Web-страницы. Язык HTML и др. 1. Базовые конструкции языка HTMLБазовые конструкции языка HTML 2. Работа с таблицами и фреймами.Работа с таблицами и фреймами. 3. Работа с изображениями, гиперссылки Работа с изображениями, гиперссылки 6. Рисунки Рисунки 7. Таблицы Таблицы 8. Фреймы Фреймы 9. Блоки (DIV)Блоки (DIV) 10. Понятие о JavaScript Понятие о JavaScript
Тема 1. Базовые конструкции языка HTML. Адресация в Интернете.Основы Интернета. Веб- страница и веб сайт.Адресация в Интернете.Основы Интернета. Веб- страница и веб сайт. Базовые конструкции языка HTML. Понятие тега. Структура документа.Базовые конструкции языка HTML. Понятие тега. Структура документа. Списки.Списки. Текстовые гиперссылки. 2
Тема 2. Работа с таблицами и фреймами. Создание таблиц. Объединение ячеек. Установка ширины и высоты ячеек. Создание таблиц. Объединение ячеек. Установка ширины и высоты ячеек. Цветовое оформление таблиц. Использование таблиц для размещения объектов на веб-странице.Использование таблиц для размещения объектов на веб-странице. Фреймы. Теги для работы с фреймами. 3
Тема 3. Работа с изображениями, гиперссылки. Использование изображений в веб- страницах.Использование изображений в веб- страницах. Размещение изображений в тексте. Графические гиперссылки. Использование кнопок перехода. Фото- галерея.Графические гиперссылки. Использование кнопок перехода. Фото- галерея. 4
Базовые конструкции языка HTML Основы Интернет. Веб – страница и веб сайт. Адресация в интернете
6 Адресация в интернете IP-адрес - уникальный адрес компьютера в сети Интернет, имеющий длину 4 байта. Обычно первый и второй байты определяют адрес сети, третий байт определяет адрес подсети, а четвертый - адрес компьютера в подсети. IP-адрес записывают в виде четырех чисел со значениями от 0 до 255, разделенных точками. Например:
Адресация в интернете 7 Доменное имя имя, служащее для идентификации единиц административной автономии в сети Интернет. Полное доменное имя состоит из непосредственного имени домена и далее имён всех доменов, в которые он входит, разделённых точками. Например, полное имя ru.wikipedia.org. обозначает домен третьего уровня ru, который входит в домен второго уровня wikipedia, который входит в домен верхнего уровня org, который входит в безымянный корневой домен
Адресация в интернете 8 В World Wide Web для задания местоположения файлов на других серверах сети Internet используется URL - Uniform Resource Locator. URL включает в себя : метод доступа к ресурсу, т.е. протокол доступа (http, ftp, file, telnet и др.) сетевой адрес ресурса (имя хост-машины и домена) полный путь к файлу на сервере Например: Адрес сайта Каталог Сервер
Что такое Web-страницы? 9 Гиперссылка – «активная»ссылка на другой документ. Гипермедиа-документ – документ, включающий текст, рисунки, звуки, видео, в котором любой элемент может быть гиперссылкой. WWW (World Wide Web) – «всемирная паутина», служба Интернет для обмена информацией в виде гипертекста (и гипермедиа). Web-страница – текстовый файл, в котором описано размещение материала на экране. Браузер – программа для просмотра Web-страниц на экране (Internet Explorer, Mozilla Firefox, Opera, Safari).
10 Какие бывают Web-страницы? статические – существуют на сервере в виде готовых файлов: *.htm, *.html динамические – полностью или частично создаются на сервере в момент запроса (выбор информации из базы данных) *.shtml, *.asp, *.pl, *.php позволяют выбирать информацию из базы данных по заранее неизвестным запросам дополнительная нагрузка на сервер загружаются медленнее
Web-страницы. Язык HTML и др. Понятие тега. Структура документа
12 Язык HTML HTML = Hypertext Markup Language (язык разметки гипертекста) HTML – это не язык программирования! ! HTML-страница – это текстовый файл (Блокнот): Моя страница Привет! … Моя страница Привет! … index.html sail.jpg man.jpg sunset.jpg clock.avi ball.swf bee.wav images
13 Тэги Тэг – это команда языка HTML, которую выполняет браузер: непарные тэги парные тэги (контейнеры) вставить рисунок открывающий закрывающий область действия тэга: описание таблицы
14 Простейшая Web-страница Моя первая Web-страница Привет! Моя первая Web-страница Привет! first.html Моя первая Web-страница Моя первая Web-страница шапка («голова») Привет! Привет! основная часть («тело»)
15 Заголовки: H1 … H6 Заголовок документа Заголовок раздела Заголовок подраздела Заголовок параграфа Комментарий Авторские пометки Заголовок документа Заголовок раздела Заголовок подраздела Заголовок параграфа Комментарий Авторские пометки выравнивание: История left, center, right left, center, right
16 Абзацы переход на новую строку абзац (с отступами) И вечный бой! Покой нам только снится Сквозь кровь и пыль... Летит, летит степная кобылица И мнет ковыль... И вечный бой! Покой нам только снится Сквозь кровь и пыль... Летит, летит степная кобылица И мнет ковыль... Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее. До самого вечера тело с варежками... Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее. До самого вечера тело с варежками...
17 Выравнивание Этот текст выровнен по центру. Этот текст выровнен по ширине. Этот текст выровнен по центру. Этот текст выровнен по ширине. left по левой границе right по правой границе center по центру justify по ширине Не используйте выравнивание по ширине для узких столбцов! ! атрибут тэга
18 Специальные символы Символ HTML-код Название –—(длинное) тире неразрывный пробел § §параграф © ©символ авторского права « «левая русская кавычка » »правая русская кавычка ® ®зарегистрированная торговая марка ° °градус ² ²квадрат ³ ³куб ¼ ¼четверть ½ ½половина ¾ ¾три четверти × ×знак умножения ÷ ÷знак деления
19 Специальные символы А.С. Пушкин — солнце русской поэзии. Дом сдали в 2011 году. Пёс весил 12 кг. Из дома вышел А.С. Пушкин – солнце русской поэзии. Из дома вышел А.С. Пушкин – солнце русской поэзии. Вышел А.С. Пушкин – солнце русской поэзии.
Теги для задания видов начертания шрифта Теги Вид начертания и Полужирный и Курсив и Подчёркнутый и Перечёркнутый и Верхний индекс и Нижний Индекс
21 Параметры шрифта задаёт гарнитуру шрифта, размер и цвет шрифта Тег одинарный, действует на вест текст, размещённый ниже и имеет следующие атрибуты: FASE=«значения» - гарнитура; SIZE=значения – размер шрифта, задаётся целы числом от 1 до 7 COLOR= значение – цвет текста
22 Тэг FONT – свойства блока текста цвет текста размер шрифта Привет! Как дела? Привет! Как дела? Привет! <FONT COLOR=red SIZE=6> Как дела? Привет! <FONT COLOR=red SIZE=6> Как дела? от 1 до 7 (3 – нормальный) от 1 до 7 (3 – нормальный)
23 Задание для практической работы: 1. Какие есть ещё теги для форматирования текста? 2. Какое отличие тега FONT от тега BASEFONT? 3. Выполнить задания: упражнение 2.1, Придумать тему для собственной странички. Расположить на ней текст о себе.
Web-страницы. Язык HTML и др. Списки.
25 Маркированные списки Вася Петя Коля Вася Петя Коля unordered list (неупорядоченный список) list item (элемент списка) изменение маркера: disk circle square
26 Нумерованные списки Вася Петя Коля Вася Петя Коля ordered list (упорядоченный список) изменение нумерации: , i, I, a, A
27 Списки определений компьютер устройство для обработки информации дискета гибкий магнитный диск винчестер жесткий магнитный диск компьютер устройство для обработки информации дискета гибкий магнитный диск винчестер жесткий магнитный диск definition list (список определений) definition term (термин) definition description (описание)
28 Многоуровневые списки Города России Города Украины Города России Города Украины Москва Санкт-Петерург Киев Одесса
Web-страницы. Язык HTML и др. Текстовые гиперссылки.
30 Ссылки на другие страницы сайта Таблицы страница в той же папке anchor (якорь) hyper reference (гиперссылка) страница во вложенной папке Пример страница в соседней папке Текст выйти из текущей папки
31 Ссылки на другие сайты Почта на главную страницу сайта index.htm, index.html, default.asp, … на конкретную страницу сайта (URL) Васин текст Васин текст на файл для скачивания Скачать Скачать
32 Ссылки внутри страницы Глава 1 Глава 2 Глава 1 Это текст главы 1. Это текст главы 1. Это текст главы 1. Наверх Глава 2 Это текст главы 2. Это текст главы 2. Это текст главы 2. Наверх Глава 1 Глава 2 Глава 1 Это текст главы 1. Это текст главы 1. Это текст главы 1. Наверх Глава 2 Это текст главы 2. Это текст главы 2. Это текст главы 2. Наверх в другом файле Цвет текста метка (якорь) переход на метку
33 Запуск почтовой программы Напишите мне! Напишите мне!
34 Цвет гиперссылок LINK ссылки, на которых не были VLINK посещенные ссылки ALINK активные ссылки
35 Тэг BODY – общие свойства страницы цвет фона и текста цвет гиперссылок Привет! Привет! цвет текста цвет фона посещенные ссылки (visited link) посещенные ссылки (visited link) цвет ссылок атрибуты тэга
Работа с таблицами и фреймами. Создание таблиц
37 Простейшая таблица Таблица из одной строки из трех столбцов без указания ширины таблицы и ячеек. Таблица из одной строки из трех столбцов без указания ширины таблицы и ячеек. толщина рамки TABLEтаблица TR = table rowстрока таблицы TD = table dataданные таблицы TH = table header заголовок (жирный, по центру) CAPTION ALIGN= top (=bottom) заголовок таблицы (до или после таблицы)
38 Объединение ячеек Привет! Вася, Петя, Маша! Привет! Вася, Петя, Маша! Привет! Вася, Петя, Маша! Привет! Вася, Петя, Маша! column span охват столбцов row span охват строк
39 Размеры ширина в пикселях или в % от ширины окна браузера высота в пикселях всей таблицы: строки: ячейки: ширина в пикселях или в % от ширины таблицы
Задание для практической работы: Пример 2.4, стр. 62, задание выполнить для расписания своего класса 2. Пример 2.5, стр Упражнение 2.3, стр. 66Упражнение 2.3, стр Пример 2.6, стр. 67
41 Выравнивание <TR ALIGN="center" VALIGN="top"> По центру, по верхней границе <TD ALIGN="right" VALIGN="middle" WIDTH=200>По правой границе, по середине <TR ALIGN="center" VALIGN="top"> По центру, по верхней границе <TD ALIGN="right" VALIGN="middle" WIDTH=200>По правой границе, по середине всей таблицы: информации в ячейках: left, center, right left, center, right left, center, right left, center, right top, middle, bottom top, middle, bottom
Оформление внешней рамки 42
Отображение разделительных линий 43
44 Фон и цвет текста Привет! Таблица из двух строк и двух столбцов Привет! Таблица из двух строк и двух столбцов цвет фона фоновый рисунок
45 Отступы <TABLE CELLSPACING = 10 CELLPADDING = 10 BGCOLOR = blue> 1 2 <TABLE CELLSPACING = 10 CELLPADDING = 10 BGCOLOR = blue> 1 2 интервал между ячейками отступ внутри ячеек CELLSPACING CELLPADDING
46 Кодирование цвета имена red, green, blue, magenta, black, шестнадцатеричные коды white # F A # F A # F A # F A R R G G B B # F F # F F # F F # F F # F F F F F F# F F F F F F # F F F F F F# F F F F F F # 0 0 F F F F# 0 0 F F F F # 0 0 F F F F# 0 0 F F F F # # # # # A A A A A A# A A A A A A # A A A A A A# A A A A A A
Задание для практической работы 47 Пример 2.7, стр.70 – 1 балл Упражнение 2.4, стр балла Пример стр. 71, 1. Добавить заливку ячеек цветом 2. Убрать вертикальные линии 3. Сделать цветную рамку 4. Названия классов – гиперссылки на страницы классов 5. Изменить цвет гиперссылки – 5 баллов
48 Фреймы Фрейм (frame) – это часть сложной Web-страницы, в которую может быть загружена другая Web- страница. 3 файла: left.html – страница в левой части right.html – страница в правой части index.html – описание структуры
49 Описание структуры index.html Фреймы-столбцы Фреймы-столбцы columns столбцы columns столбцы ширина в пикселях или % все остальное место source источник source источник имя фрейма (для ссылок)
50 Граница между фреймами граница между фреймами: 0 – невидима, 1 - видима граница между фреймами: 0 – невидима, 1 - видима ширина полосы между фреймами, за которую можно перетащить границу
51 Настройка фрейма (FRAME) <FRAME SRC="a.htm" MARGINWIDTH="0" MARGINHEIGHT="0" NORESIZE SCROLLING="auto"> <FRAME SRC="a.htm" MARGINWIDTH="0" MARGINHEIGHT="0" NORESIZE SCROLLING="auto"> убрать отступы от края фрейма до содержимого полоса прокрутки: auto – появляется, когда надо yes – есть всегда no – нет никогда полоса прокрутки: auto – появляется, когда надо yes – есть всегда no – нет никогда запретить изменение размеров
52 Фреймы-строки index.html Фреймы-строки <FRAME SRC="down.html" NAME="qq"> Фреймы-строки <FRAME SRC="down.html" NAME="qq"> строки ширина в пикселях или %
53 Сложные структуры (3 фрейма) index.html
54 Как открыть ссылку в другом фрейме <A HREF="chapter2.htm" TARGET="qq">Глава 2 <A HREF="chapter2.htm" TARGET="qq">Глава 2 TARGET _blank – в новом окне _parent – в родительском окне _top – в главном окне (убрать фреймы)
55 Что такое CSS? HTML – язык логической разметки текста, определяющий содержание и структуру страницы (заголовки разных уровней, абзацы) HTML–код не должен содержать оформления! оформление частей документа (заголовков, параграфов) описывается в отдельном файле CSS = Cascading Style Sheets – каскадные таблицы стилей стилевые файлы: *.css HTML + CSS оформление содержание + Javascript анимация
56 Свойства элементов страницы body { color: white; background: #FF6600; } body { color: white; background: #FF6600; } название тэга значение селектор (свойство) color – цвет символов background – цвет фона my.css
57 Подключение стилевого файла Пример CSS <link rel="stylesheet" href="my.css" type="text/css">... Пример CSS <link rel="stylesheet" href="my.css" type="text/css">... qq.html my.css body { color: white; background: #0000E0; } body { color: white; background: #0000E0; } <body>...</body>
58 Шрифты p { font-family: Arial,sans-serif; font-size: 20px; font-style: italic; font-weight: bold; } p { font-family: Arial,sans-serif; font-size: 20px; font-style: italic; font-weight: bold; } для всех абзацев семейство шрифтов serif – с засечками sans-serif – без засечек monospace – моноширинный serif – с засечками sans-serif – без засечек monospace – моноширинный размер в пикселях normal – обычный italic - курсив normal – обычный italic - курсив normal – обычный bold - жирный normal – обычный bold - жирный
59 Классы (стили оформления) p.spec { font-style: italic; background: green; } p.spec { font-style: italic; background: green; } для абзацев класса spec LEtat cest moi. LEtat cest moi. qq.html LEtat cest moi..spec { font-style: italic; background: green; }.spec { font-style: italic; background: green; } для всех элементов класса spec для всех элементов класса spec Россия молодая Россия молодая
60 Размеры, выравнивание p { background: #E6E6FF; width: 80%; height: 100px; text-align: left; text-indent: 20px; } p { background: #E6E6FF; width: 80%; height: 100px; text-align: left; text-indent: 20px; } ширина высота Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis velit, tempus sit amet cursus at, porta ut turpis. Sed augue tellus, tincidunt id ultricies at, tempor quis sem. выравнивание: left center right justify выравнивание: left center right justify 100px 80% 20px фон абзацный отступ
61 Рамка и поля p { background: #ccffcc; border: 1px solid green; margin: 0 40px 20px 40px; padding: 5px; } p { background: #ccffcc; border: 1px solid green; margin: 0 40px 20px 40px; padding: 5px; } рамка отступы снаружи отступы внутри сверху, справа, снизу, слева со всех сторон толщина solid – сплошная dashed - штриховая dotted – точечная solid – сплошная dashed - штриховая dotted – точечная цвет Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis velit, tempus sit amet cursus at, porta ut turpis. Sed augue tellus, tincidunt id ultricies at, tempor quis sem. 40px 5px 20px
p.hallo { background: white url(images/grad.jpg); } p.hallo { background: white url(images/grad.jpg); } 62 Фоновый рисунок Привет, Вася! Привет, Вася! Привет, Вася! p.hallo { background: url(grad.jpg) repeat-y; } p.hallo { background: url(grad.jpg) repeat-y; } Привет, Вася!
63 Фоновый рисунок без повторения p. { background: url(letter.gif) no-repeat; padding-left: 20px; } p. { background: url(letter.gif) no-repeat; padding-left: 20px; } 20px
64 Ссылки p. a { color: green; text-decoration:none; } p. a { color: green; text-decoration:none; } p. a:hover { color: #00F; text-decoration:underline; } p. a:hover { color: #00F; text-decoration:underline; } p. a:visited { color: #F0F; } p. a:visited { color: #F0F; } ссылки внутри абзаца стиля убрать подчеркивание посещённые ссылки подчеркнуть когда мышь над ссылкой
65 Выделение отдельных слов.latin { color: green; font-style: italic; }.latin { color: green; font-style: italic; } класс, применимый ко всему курсив Собака(лат. Canis lupus familiaris ) одно из наиболее Домашних "животных-компаньонов". Собака(лат. Canis lupus familiaris ) одно из наиболее Домашних "животных-компаньонов". Что хочется исправить? !
Работа с изображениями, гиперссылки. Тема 6. Рисунки
67 Форматы рисунков GIF (Graphic Interchange Format) сжатие без потерь прозрачные области анимация только с палитрой (2…256 цветов) рисунки с четкими границами, мелкие рисунки JPEG (Joint Photographer Expert Group) сжатие с потерями только True Color (16,7 млн. цветов) нет анимации и прозрачности рисунки с размытыми границами, фото PNG (Portable Network Graphic) сжатие без потерь с палитрой (PNG-8) и True Color (PNG-24) прозрачность и полупрозрачность (альфа-канал) нет анимации плохо сжимает мелкие рисунки
68 Фон страницы (через CSS) body { background: url(back.jpg); } body { background: url(back.jpg); } 'images/back.jpg' '../images/back.jpg ' 'images/back.jpg' '../images/back.jpg ' Не должно быть «швов»! ! Фон не должен мешать! ! #6e5c62;
69 Рисунки в документе из той же папки: из другой папки: с другого сервера: image (изображение) source (источник)
70 Выравнивание left right top bottom (по умолчанию) middle
71 Отступы VSPACE (vertical space) HSPACE (horizontal space)
72 Выравнивание и отступы (CSS) img.left { float: left; margin: 5px 10px; } img.left { float: left; margin: 5px 10px; } = VSPACE = HSPACE = ALIGN margin: 5px 10px 5px 0; отступа слева нет!
73 Другие атрибуты всплывающая подсказка надпись на месте рисунка, если его нет всплывающая подсказка надпись на месте рисунка, если его нет размеры позволяют: растянуть - сжать не портить дизайн, если рисунка нет размеры позволяют: растянуть - сжать не портить дизайн, если рисунка нет толщина рамки вокруг рисунка
74 Рисунок-гиперссылка <IMG SRC="mailru.jpg" ALT="Бесплатная почта" BORDER=0> <IMG SRC="mailru.jpg" ALT="Бесплатная почта" BORDER=0> локальная ссылка: ссылка на другой сервер: иначе будет синяя рамка вокруг если не вплотную к, будет «хвост» не будет «хвоста»
75 Рисунки в HEFS вставить рисунок Автоматически вставляются размеры! !
Создание карты гиперссылок. 76 Карта ссылок - это изображение, содержащее одну или несколько гиперобластей, называемых гиперобъектами. Каждый гиперобъект функционирует, как отдельная ссылка. Ссылки могут указывать на различные страницы или выполнять различные скрипты, что делает карты ссылок более полезными, чем обычные старые добрые изображения со ссылкой, в которых изображение целиком функционирует, как одна ссылка. В карте ссылок сам файл изображения не представляет ничего особенного. Можно начать с любого Web-изображения. Превращает изображение в карту ссылок блок HTML- кода, определяющий форму, положение и функционирование гиперобъектов. Итак, карта ссылок состоит из двух частей: 1. Самого файла изображения; 2. Блока кода, определяющего гиперобъекты. Обратите внимание, что в теге img используется атрибут usemap, который сообщает браузеру, какое определение карты применить. На странице можно иметь любое число карт ссылок и даже можно использовать одно и то же определение для абсолютно разных изображени. Само определение находится между тегами mар. Значение атрибута name тега тар соответствует значению атрибута usemap тега img, за одним исключением, которое бросается в глаза: в значении атрибута usemap перед именем определения ставится символ числа (#), а значение атрибута name не имеет префикса. Каждый гиперобъект карты ссылок получает свой собственный тег area. Таким образом, если у нас есть шесть гиперобъектов, нам понадобится шесть тегов area. Эти теги are a могут идти в любом порядке. Как можно предположить, атрибуты тега area определяют, где и как будут располагаться гиперобъекты: Атрибут shape определяет, какая форма гиперобъекта из трех возможных используется: прямоугольник (rect), окружность (circle) или многоугольник (poly). Атрибут coords определяет положение и размер гиперобъекта. В зависимости от значения атрибута shape, значения атрибута coords имеют разный смысл. Левый верхний угол любого изображения имеет координаты (0,0). Правый нижний угол изображения с размерами 500 на 300 пикселов имеет координаты (500,300). Атрибут href содержит ссылку гиперобъекта. Его значением может быть путь к новой странице, или оно может открывать пустое окно электронного сообщения или запускать скрипт.
Web-страницы. Язык HTML и др. Тема 9. Блоки (DIV)
78 Блоки (DIV) – любое содержимое Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et mauris. 1
79 Блоки (DIV) – рамки и отступы Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et mauris. In hac habitasse platea dictumst. Cras dapibus nulla ac metus commodo viverra eget vitae erat. Donec ut mi tellus. Mauris eu turpis vel tellus tincidunt pulvinar. padding border margin #qq { padding: 5px 10px; border: 1px solid green; margin: 5px 15px 5px 10px; } #qq { padding: 5px 10px; border: 1px solid green; margin: 5px 15px 5px 10px; }
80 «Плавающие» блоки.picture { float: left; margin: 5px; }.picture p { margin: 0; text-align: center; font-family: sans-serif; font-size: 80%; font-weight: bold; }.picture { float: left; margin: 5px; }.picture p { margin: 0; text-align: center; font-family: sans-serif; font-size: 80%; font-weight: bold; } На природе На природе свойства блока свойства абзаца внутри блока
Web-страницы. Язык HTML и др. Тема 10. Понятие о Javascript
82 Что может Javascript? информация статична нет интерактивности (только переход на другую страницу) Чем плоха HTML-страница? Что можно сделать с помощью Javascript? изменение рисунка при наведении мыши выпадающие меню всплывающие подсказки фотогалерея без перегрузки страницы движение объекта по экрану Javascript может быть отключен в браузере
83 Основные принципы каждый элемент на странице (текст, рисунок, таблица) – это объект, имеющий свои свойства свойства объекта можно менять из программы на Javascript (скрипта) все, что происходит – это события все события можно «обрабатывать», т.е. как-то реагировать на них Javascript – это язык программирования! ! HTML + Javascript = DHTML (Dynamic HTML)
84 Замена рисунка при движении мыши когда курсор мыши над рисунком после ухода мыши События: onMouseOver – курсор мыши над объектом onMouseOut – курсор мыши ушел с объекта начальный рисунок this – этот объект this.src – свойство SRC этого объекта
85 Скрытый блок Детали — это гайка, шайба, болт, винт, шуруп, гвоздь и др. Детали — это гайка, шайба, болт, винт, шуруп, гвоздь и др..hidden { display:none; }.hidden { display:none; }
86 Скрытый блок: оформление ссылки <a href="#" onClick="show('details');return false;"> Показать детали <a href="#" onClick="show('details');return false;"> Показать детали остаться на странице по щелчку вызвать функцию show переход не выполнять
Скрытый блок: как его открыть? 87 function show ( name ) { var elem = document.getElementById(name); if ( elem ) elem.style.display = "block"; } function show ( name ) { var elem = document.getElementById(name); if ( elem ) elem.style.display = "block"; } <script type="text/javascript" src="test.js"> <script type="text/javascript" src="test.js"> test.js найти блок по имени изменить свойство display
Формы 88 <input type="button" value="Готово" onClick="check();"> <input type="button" value="Готово" onClick="check();"> надпись на кнопке имя формы имя элемента делать по щелчку
Форма: обращение к элементам 89 function check() { if ( calc.answer.value == "4" ) alert("Правильно!"); else alert("Неправильно!"); } function check() { if ( calc.answer.value == "4" ) alert("Правильно!"); else alert("Неправильно!"); } test.js вывести сообщение