Слайды и текст этой презентации
Слайд 1HTML
Язык гипертекстовой разметки
для написания кода страниц сайта
Слайд 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Вставка картинок
Посмотреть в браузере
Слайд 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
Слайд 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 - Определитель полей ввода в формах
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 интерактивного образа
Слайд 23TYPE - Атрибут типа полей ввода в формах
TYPE= ”text” -
ввод строки текста
”password”- ввод пароля - при вводе текст заменяется
“звездочками”
”radio” - группа “радиокнопок”, из которых может быть выбрана только одна
”checkbox” - ввод логических элементов, определяемых значением Вкл./Выкл.
”hidden” - неотображаемый элемент текста, применяемый для связи форм
”reset” - управляющая кнопка для сброса всех полей формы
”submit” - управляющая кнопка, инициирующая пересылку данных к серверу
”image” - управляющая кнопка, инициирующая пересылку данных к серверу
Слайд 24 - Элементы меню в формах
SIZE=”n” >
Item_1
Item_2
Атрибуты:
NAME=”var-name” -
имя переменной, ассоциированное с вводимым элементом SELECT
MULTIPLE - определяет формат меню в виде списка с прокруткой, а также допускает выбор множества элементов списка OPTION
SIZE=”n” - определяет количество элементов в списке прокрутки
OPTION - элементы списка SELECT
VALUE=”value” - определяет величину, присвоенную данному элементу списка OPTION
SELECTED - отмечает предварительно выбранный элемент списка OPTION
Слайд 25 - Ввод нескольких строк текста
COLS=”m” >
Default text to be displayed
Атрибуты:
NAME=”var-name” -
имя переменной, ассоциированное с вводимым текстом в форме TEXTAREA
ROWS=”n” - количество рядов в зоне ввода текста
COLS=”m” > - количество колонок в зоне ввода текста
Слайд 26 - Ввод нескольких строк текста - Пример
Comments:
name=comments COLS=70 ROWS=8>
Any comments are highly appreciated. Thank you!
type=reset>
Слайд 27Элементы -Флаги-переключатели
Text_Item_#
….
Слайд 29Элементы -Переключатели-”радиокнопки”
Text_Item_#
…
Text_Item_#
Example
Слайд 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
...
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-документах
MRAGINHEIGHT=“l” SCROLLING=“method” NORESIZE>
…
- задание параметров фрейма
...
-
# информация, которая должна отображаться в
… # броузерах, не понимающих фреймы
Слайд 35Задание параметров фреймов -
Атрибуты:
ROWS=“m,n,p” - задает параметры
деления экрана браузера на фреймы по вертикали в %, пикселях
или по умолчанию (*)
COLS=“a,b,c” - задает параметры деления экрана браузера на фреймы по горизонтали в %, пикселях или по умолчанию (*)
Слайд 36Атрибуты фреймов -
NORESIZE>
Атрибуты:
NAME=“framename#” - имя фрейма (для использования в атрибуте TARGET в
директиве
…SRC=“URL” - адрес документа: отображаемого в данном фрейме
MRGINWIDTH=“k” - отступ отображаемой информации от горизонтальных границ
MRAGINHEIGHT=“l” -отступ отображаемой информации от горизонтальных границ
SCROLLING=“method” - параметр режима скроллинга во фрейме (yes, no, auto)
NORESIZE - запрещает изменение размера фрейма
Слайд 37Пример -документа с фреймами
It's a frame, I tell ya'!
3 columns: left and right -20%; middle - fills in.-->
Frame content: left.htm, middle.htm, and right.htm -->
Alternative content no-frames browsers.
Слайд 38Ссылки
Ссылка на внешний ресурс
Ссылка
на файл
Обращение к почтовому клиенту (E-mail)
Посмотреть в браузере
Слайд 39Фон страницы
Посмотреть в браузере
Посмотреть в браузере
Слайд 40Стиль ссылок (цвет и подчеркивание)
{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 можно использовать не только
в заголовке документа, но в его теле.