1 HTML Язык гипертекстовой разметки для написания кода страниц сайта

2 «Каркас» страницы Мой сайт Посмотреть в браузере

3 Текст в HTML Мой сайт Текст в HTML Посмотреть в браузере

4 Теги,,, Полужирный текст в HTML Наклонный текст в HTML Текст 1 в HTML Текст 2 в HTML Посмотреть в браузере

5 Теги заголовков Заголовок 1 уровня Заголовок 2 уровня Посмотреть в браузере

6 Ненумерованные списки Элемент списка 1 Элемент списка 2 Посмотреть в браузере

7 Нумерованные списки Элемент списка 1 Элемент списка 2 Посмотреть в браузере

8 Вложение ненумерованных списков Элемент списка 1 Элемент списка 1.1 Элемент списка 1.2 Элемент списка 2 Посмотреть в браузере

9 Вложение нумерованных списков Элемент списка 1 Элемент списка 1.1 Элемент списка 1.2 Элемент списка 2 Посмотреть в браузере

10 Сложные списки Элемент списка 1 Элемент списка 1.1 Элемент списка 1.2 Элемент списка 2 Посмотреть в браузере

11 Вставка картинок Посмотреть в браузере

12 Таблицы 1 2 Посмотреть в браузере

13 Таблицы (продолжение 1) 1 2 Посмотреть в браузере

14 Таблицы (продолжение 2) 1 2 Посмотреть в браузере

15 Таблицы в HTML-документах - …... - определитель ряда таблицы Атрибуты –ALIGN=align - выравнивание текста по левому (left), правому (right) краю (по умолчанию - по центру (center)) –VALIGN=alignment - определяет положение текста в ячейках таблицы - выравнивание к верху (top), к низу (bottom) или по центру (по умолчанию) Дополнительно (в реализациях различных броузеров) –BGCOLOR=color - цвет фона ряда таблицы

16 Таблицы в HTML-документах - … … - определитель ячейки таблицы, помещается внутри определителя ряда... Атрибуты COLSPAN=colspan - определяет количество столбцов, которые занимает ячейка ROWSPAN=rowspan- определяет количество рядов, которые занимает ячейка NOWRAP - запрещает разрыв строки текста внутри ячейки WIDTH - задает ширину ячейки в пикселях HEIGHT - задает высоту ячейки в пикселях ALIGN=align - выравнивание текста по левому (left), правому (right) краю (по умолчанию - по центру (center)) VALIGN=alignment - определяет положение текста в ячейках таблицы - выравнивание к верху (top), к низу (bottom) или по центру (по умолчанию) Дополнительно (в реализациях различных браузеров) BGCOLOR=color - цвет фона в таблице BORDERCOLOR=color - определяет цвет рамки таблицы; может использоваться совместно с BORDERCOLORDARK, BORDERCOLORLIGHT

17

18 Таблицы - Пример Requirements for Netscape Gold Platform, OS PC Requirements Windows 486, HDD 5MB, 8MB Macintosh 68020, HDD 5MB, 8 MB Unix N/A, HDD 6 MB, 16 MB

19 Формы - Интерактивный элемент World Wide Web

20 Пример HTML-текста формы Добавить запись в гостевую книгу Добавить запись в гостевую книгу <form method=POST action=" bin/cadguestbook.pl"> Имя: URL: Город: Страна: <input type=text value=RF name=country size=15> Комментарии:

21 Формы …. ….( ) …. Aтрибуты: ACTION=URL- URL, по которому передается содержимое формы METHOD=GET or POST - способ/метод пересылки протоколом HTTP содержимого формы METHOD=GET (по умолчанию) - содержимое формы добавляется к URL METHOD= POST - содержимое формы пересылается HTTP- серверу в виде сообщения ENCTYPE = MIME type - MIME-тип данных, пересылаемых к HTTP- серверу методом POST

22 - Определитель полей ввода в формах Атрибуты: TYPE= type - ввод строки текста VALUE=default_string- начальное значение содержимого полей ввода NAME=var-name- присваивает имя var-name вводимым данным SIZE=n, MAXLENGTH=nmax- определяют размер отображаемого поля текста и длину текстового буфера для типов text и password ALIGN=top, middle, bottom - привязка текста и графического образа для TYPE=image SRC=URL- используется для указания URL интерактивного образа

23 TYPE - Атрибут типа полей ввода в формах TYPE= text - ввод строки текста password- ввод пароля - при вводе текст заменяется звездочками radio- группа радиокнопок, из которых может быть выбрана только одна checkbox - ввод логических элементов, определяемых значением Вкл./Выкл. hidden - неотображаемый элемент текста, применяемый для связи форм reset - управляющая кнопка для сброса всех полей формы submit - управляющая кнопка, инициирующая пересылку данных к серверу image - управляющая кнопка, инициирующая пересылку данных к серверу

24 - Элементы меню в формах Item_1 Item_2 Атрибуты: NAME=var-name - имя переменной, ассоциированное с вводимым элементом SELECT MULTIPLE - определяет формат меню в виде списка с прокруткой, а также допускает выбор множества элементов списка OPTION SIZE=n- определяет количество элементов в списке прокрутки OPTION - элементы списка SELECT VALUE=value - определяет величину, присвоенную данному элементу списка OPTION SELECTED- отмечает предварительно выбранный элемент списка OPTION

25 - Ввод нескольких строк текста Default text to be displayed Атрибуты: NAME=var-name - имя переменной, ассоциированное с вводимым текстом в форме TEXTAREA ROWS=n - количество рядов в зоне ввода текста COLS=m >- количество колонок в зоне ввода текста

26 - Ввод нескольких строк текста - Пример Comments: Any comments are highly appreciated. Thank you!

27 Элементы -Флаги- переключатели Text_Item_# …. Text_Item_# Example Текст 1 Текст 2: Текст 3: Текст 4 Текст 5 Текст 6

28

29 Элементы -Переключатели- радиокнопки Text_Item_# … Text_Item_# Example Текст 1 Текст 2 : Текст 3: Текст 4 Текст 5 Текст 6

30

31 Активные графические образы Атрибуты HREF= SRC=directory/image.gif ISMAP - серверный вариант формирования ссылок по координатам USEMAP - клиентский (в браузере) вариант формирования ссылок по координатам Формат HTTP-запроса к WWW-серверу GET HTTP1.0

32 Формат таблицы IMAGE.MAP METHODURLCoordinates pairs # Image map for image.gif circledir1/capital.html50,20 50,30 recdir2/region.html80,40 120,60 polydir3/area.html10,20 10,45 15,55 20,78 defaultdir/default.html circle - круг - задаются координаты центра и правой крайней точки rectangle (rec) - прямоугольник - задаются координаты левой верхней и правой нижней точек polygon (poly)- задаются координаты вершин многоугольника point - задаются координаты точки default - задается URL, который выдается, если указатель мыши не попадает на выделенную зону образа

33 Активные графические образы клиентского типа USEMAP... Атрибуты SHAPE=shape -определяет очертание активной зоны (circle, rectangle (rec),polygon (poly), point, default) HREF=URL - гипертекстовая ссылка, соответствующая выделенной области COORDS="x1,y1,x2,y2, …, xN, yM" - координаты опорных точек активной зоны ALT="Alt Text" - текст, который отображается неграфическим броузером

34 Использование фреймов в HTML- документах … - задание параметров фрейма... - # информация, которая должна отображаться в …# броузерах, не понимающих фреймы

35 Задание параметров фреймов - Атрибуты: ROWS=m,n,p - задает параметры деления экрана браузера на фреймы по вертикали в %, пикселях или по умолчанию (*) COLS=a,b,c - задает параметры деления экрана браузера на фреймы по горизонтали в %, пикселях или по умолчанию (*)

36 Атрибуты фреймов - Атрибуты: NAME=framename# - имя фрейма (для использования в атрибуте TARGET в директиве … SRC=URL - адрес документа: отображаемого в данном фрейме MRGINWIDTH=k - отступ отображаемой информации от горизонтальных границ MRAGINHEIGHT=l -отступ отображаемой информации от горизонтальных границ SCROLLING=method - параметр режима скроллинга во фрейме (yes, no, auto) NORESIZE - запрещает изменение размера фрейма

37 Пример -документа с фреймами It's a frame, I tell ya'! Alternative content no-frames browsers.

38 Ссылки Ссылка на внешний ресурс Ссылка на файл Обращение к почтовому клиенту ( ) Посмотреть в браузере

39 Фон страницы Посмотреть в браузере

40 Стиль ссылок (цвет и подчеркивание) <!-- a:link {color: #000000; text-decoration: none;} a:visited {color: #FF0000; text-decoration: none;} a:hover {color: #00FF00; text-decoration: underline;} a:active {color: #0000FF; text-decoration: none;} --> Посмотреть в браузере

41 Элемент разметки SCRIPT Элемент разметки SCRIPT служит для размещения кода JavaScript, VBScript или JScript. Вообще говоря, SCRIPT можно использовать не только в заголовке документа, но в его теле.

42 Задание В «Блокноте» написать HTML-код простой странички с использованием материалов лекции. Просмотреть страницу в браузере. Спасибо за внимание!