Слайд 2
«Каркас» страницы
< html >
Мой
сайт
Посмотреть в браузере
Слайд 3
Текст в HTML
< 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
Вставка картинок
Посмотреть в
браузере
Слайд 13
Таблицы (продолжение 1)
cellspacing="10">
1
2
Посмотреть
в браузере
Слайд 14
Таблицы (продолжение 2)
cellspacing="10">
1
background="5.gif">
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
Слайд 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-текста формы
Добавить
запись в гостевую книгу
Добавить запись в гостевую книгу
Слайд 21
Формы
….
…. ()
….
Aтрибуты:
ACTION=”URL” - URL, по которому
передается содержимое формы
METHOD=”GET” or “POST” - способ/метод пересылки протоколом
HTTP содержимого формы
METHOD=”GET” (по умолчанию) - содержимое формы добавляется к URL
METHOD= “POST” - содержимое формы пересылается HTTP-серверу в виде сообщения
ENCTYPE = ”MIME type” - MIME-тип данных, пересылаемых к HTTP-серверу методом POST
Слайд 22
- Определитель полей ввода в формах
NAME=”var-name” VALUE=”default_string” SIZE=”n” MAXLENGTH=”nmax” ALIGN=”position” SRC=”URL”>
Атрибуты:
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
- Элементы меню в формах
MULTIPLE SIZE=”n” >
Item_1
> Item_2
Атрибуты:
NAME=”var-name” - имя переменной, ассоциированное с вводимым элементом SELECT
MULTIPLE - определяет формат меню в виде списка с прокруткой, а также допускает выбор множества элементов списка OPTION
SIZE=”n” - определяет количество элементов в списке прокрутки
OPTION - элементы списка SELECT
VALUE=”value” - определяет величину, присвоенную данному элементу списка OPTION
SELECTED - отмечает предварительно выбранный элемент списка OPTION
Слайд 25
- Ввод нескольких строк текста
ROWS=”n” COLS=”m” >
Default text to be displayed
TEXTAREA >
Атрибуты:
NAME=”var-name” - имя переменной, ассоциированное с вводимым текстом в форме TEXTAREA
ROWS=”n” - количество рядов в зоне ввода текста
COLS=”m” > - количество колонок в зоне ввода текста
Слайд 26
- Ввод нескольких строк текста - Пример
Слайд 27
Элементы -Флаги-переключатели
Text_Item_#
….
Слайд 29
Элементы -Переключатели-”радиокнопки”
Text_Item_#
…
Слайд 31
Активные графические образы
Атрибуты
HREF=“http://host/cgi-bin/imagemap/table_or_base
SRC=“directory/image.gif”
ISMAP -
серверный вариант формирования ссылок по координатам
USEMAP - клиентский (в
браузере) вариант формирования ссылок по координатам
Формат HTTP-запроса к WWW-серверу
GET http://host/cgi-bin/imagemap/table_or_base?x,y HTTP1.0
Слайд 32
Формат таблицы IMAGE.MAP
METHOD URL Coordinates pairs
# Image map for image.gif
circle dir1/capital.html 50,20
50,30
rec dir2/region.html 80,40 120,60
poly dir3/area.html 10,20 10,45 15,55 20,78
default dir/default.html
circle - круг - задаются
координаты центра и правой крайней точки
rectangle (rec) - прямоугольник - задаются координаты левой верхней и правой нижней точек
polygon (poly) - задаются координаты вершин многоугольника
point - задаются координаты точки
default - задается URL, который выдается, если указатель мыши не попадает на выделенную зону образа
Слайд 33
Активные графические образы клиентского типа USEMAP
USEMAP="#map1">
...
ALT="Access Guide" SHAPE=rect COORDS="x3,y3,x4,y4">
Атрибуты
SHAPE=shape -определяет очертание активной зоны (circle, rectangle (rec),polygon (poly), point, default)
HREF=URL - гипертекстовая ссылка, соответствующая выделенной области
COORDS="x1,y1,x2,y2, …, xN, yM" - координаты опорных точек активной зоны
ALT="Alt Text" - текст, который отображается неграфическим броузером
Слайд 34
Использование фреймов в HTML-документах
MRGINWIDTH=“k”
MRAGINHEIGHT=“l” SCROLLING=“method” NORESIZE>
…
- задание
параметров фрейма
...
- # информация, которая должна отображаться в
… # броузерах, не понимающих фреймы
Слайд 35
Задание параметров фреймов -
Атрибуты:
ROWS=“m,n,p” -
задает параметры деления экрана браузера на фреймы по вертикали
в %, пикселях или по умолчанию (*)
COLS=“a,b,c” - задает параметры деления экрана браузера на фреймы по горизонтали в %, пикселях или по умолчанию (*)
Слайд 36
Атрибуты фреймов -
MRAGINHEIGHT=“l” SCROLLING=“method” NORESIZE>
Атрибуты:
NAME=“framename#” - имя фрейма (для использования в
атрибуте TARGET в директиве
…SRC=“URL” - адрес документа: отображаемого в данном фрейме
MRGINWIDTH=“k” - отступ отображаемой информации от горизонтальных границ
MRAGINHEIGHT=“l” -отступ отображаемой информации от горизонтальных границ
SCROLLING=“method” - параметр режима скроллинга во фрейме (yes, no, auto)
NORESIZE - запрещает изменение размера фрейма
Слайд 37
Пример -документа с фреймами
It's a frame, I
tell ya'!
- fills in.-->
Alternative content no-frames browsers.
Слайд 38
Ссылки
Ссылка на внешний ресурс
="Photoshop/lesson16/lesson16_nofp_bg.gif"> Ссылка на файл
Обращение к почтовому клиенту (E-mail)
Посмотреть
в браузере
Слайд 39
Фон страницы
Посмотреть в браузере
Посмотреть в браузере
Слайд 40
Стиль ссылок (цвет и подчеркивание)
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 можно
использовать не только в заголовке документа, но в его теле.