Раздаточные материалы к первому занятию по теме Веб

advertisement
1
© 1999-2002 А.Климов
А. Васильков.
20 марта 2005 г.
Основные теги HTML
Раздаточные материалы к первому занятию по теме «Веб-дизайн. Вторая ступень»
Форматирование документа
1. <BODY> </BODY>. Определяет видимую часть HTML-документа.
Атрибуты:
bgcolor
Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB пример: FF0000 - красный цвет, либо используя константы цвета, например для желтого
цвета, используемой на данной странице <body bgcolor= "yellow">
background
Указывает на url-адрес изображения - фона документа
text
Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB пример: 000000 - черный цвет, либо используя константы цвета, например для зеленого
цвета, используемой на данной странице <body text= "green">
<body link=?>
Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример:
00FF00 - зеленый цвет,либо используя константы цвета,например для красного
цвета,используемой
на
данной
странице
<body
link=
"red">
Пример красной ссылки
<body vlink=?>
Устанавливает цвет гиперссылок на которых вы уже побывали, используя значение цвета
в виде RRGGBB - пример: 333333 - серый цвет
<body alink=?>
Устанавливает цвет гиперссылок при нажатии. Например, на этой странице ссылки
становятся синими при нажатии мышкой
bgproperties=fixed
Фоновое изображение прокручиваться не будет. Т.е. текст будет двигаться при нажатии
PageDown, а фон - нет. Данный параметр поддерживается только Internet Explorer
Эти параметры можно объединять, например на этой страничке используется <BODY
bgcolor="yellow" text="green" link="red" alink="blue">
2. Тег <HEAD> определяет место, где помещается различная информация не отображаемая в
теле документа. Здесь располагается тег названия документа и теги для поисковых машин
3. Тег <HTML> указывает программе просмотра страниц (браузеру), что это HTML документ.
4. Тег <META>. ВНИМАНИЕ! Закрывающий тег </META> не используется.
Специальная группа инструкций <META>, предназначена в основном для описания и
индексирования документа поисковыми машинами. Все тэги META не видны при просмотре
документа. Команды <META> вносятся в "шапку" гипертекстового документа - внутри блока
<HEAD>...</HEAD>.
<META HTTP-EQUIV="Expires" CONTENT="Mon, 25 Sep 2001 00:02:01 GMT">
Используется для того, чтобы в нужное время браузер при просмотре документа брал не
версию, хранящуюся в кэше, а свежую версию прямо с Вашего сайта.
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Windows-1251">
Используется для того, чтобы браузер мог правильно отобразить содержимое страницы и для
определения поисковой машиной языка, на котором написана страница.
2
© 1999-2002 А.Климов
<META HTTP-EQUIV="Refresh" CONTENT="x; URL=http://changer.newmail.ru/">
Используется для того, чтобы браузер автоматически переключался на новый адрес.
<META name="author" content="Arni Schwarz">
Используется для указания имени автора. Поисковые системы могут найти нужный сайт по
имени автора (или найти самого автора).
<META name="copyright" content="© 2001 SOFT BANANAS">
Полезно также указать и авторские права название фирмы почти наверняка будет
проиндексировано поисковой машиной.
<META http-equiv="PICS-Label" content=' (PICS-1.1 "http://www.gcf.org/v2.5" labels on
"1994.11.05T08:15-0500" until "1995.12.31T23:59-0000" for "http://w3.org/PICS/Overview.html"
ratings (suds 0.5 density 0 color/hue 1)) '>
Еще одна интересная штучка отсечение нежелательных пользователей от указанной страницы,
при помощи введения рейтинга - т.н. "красной лампочки". Некоторые браузеры позволяют
"повесить замок" на содержимое определенных сайтов, запрещая их просмотр. Имеется
несколько признанный рейтинговых систем, распознаваемых браузерами. Сам браузер,
естественно, можно подстроить под использование рейтинга, а профиль пользователя браузера
защитить паролем. Как правило, текст в этот тэг вставляется в строгом соответствии с текстом,
имеющемся на рейтинговом сервере.
<META name="keywords" content="META, HTML, WWW, Web, паутина, поиск, определение,
рекомендации, примеры использования, учебник, руководство, информация, справка, Netscape,
Microsoft Internet Explorer">
Список терминов и ключевых слов это то, что является самым главным при индексировании
Вашего сайта поисковой машиной! Длина содержимого тегов МЕТА "keywords" не должна
превышать 1000 символов.
<META name="description" content="The best homepage">
Краткое описание Вашего сайта, используемое поисковым сервером для индексирования, и, как
правило, вставляемое в текст страницы найденных совпадений в качестве описания. Вашего
сайта. Длина содержимого тегов МЕТА "description" не должна превышать 200 символов.
5. Тег <TITLE> не является частью отображаемого текста. Он может отображаться, например,
как заголовок страницы или название окна. Только один TITLE может быть в документе.
Элемент TITLE должен использоваться для идентификации содержимого документа.
Поскольку пользователи часто обращаются к документам вне контекста, авторы должны
предоставлять осмысленные заголовки. Таким образом, вместо такого заголовка, как
"Введение", который не даёт достаточно информации о документе, авторы должны записать,
например, так: "Введение в HTML". Название должно быть не более 40 символов, т.к. название,
превышающее размер в 40 символов не помещается в строку заголовка окна браузера.
Таблицы
1. Тег <CAPTION> определяет заголовок для таблицы TABLE. Элемент CAPTION может
располагаться только непосредственно после начального тега TABLE. Элемент TABLE может
включать только один элемент CAPTION. Закрывающий тег обязателен.
Атрибуты
align=
Не рекомендуемый параметр. Выравнивание заголовка относительно таблицы.
Возможные значения: left, right, top (по умолчанию), bottom
title
Всплывающая подсказка
3
© 1999-2002 А.Климов
2. Тег <TABLE> создает таблицу. Все прочие элементы таблицы должны быть вложенными в
него. Допускается также вложение таблиц одна в другую, т.е. содержимым ячейки может быть
другая таблица. Закрывающий тег обязателен
Атрибуты
align=
Выравнивание таблицы относительно документа. Возможные значения: center, left,
right
background Строка, определяющая рисунок для заднего фона
bgcolor Определяет задний фон таблицы
Толщина рамки в пикселах. Если атрибут не указан, то таблица выводится без
видимой рамки
border
bordercolor
cellspacing
cellpadding
rules
Цвет рамки
Задает расстояние между ячейками таблицы
Задает расстояние между содержимым ячейки и ее рамкой
Описывает рамки вокруг таблицы.
Может принимать следующие значения:
Отображает все части рамки внутри таблицы
Отображает все вертикальные рамки внутри таблицы
Отображает горизонтальные части рамки между группами таблицы THEAD,
groups
TBODY, TFOOT
none
Удаляет все рамки вокруг таблицы
rows
Отображает все горизонтальные рамки внутри таблицы
all
cols
Всплывающая подсказка
Ширина таблицы в процентах или пикселах .
title
width
3. Тег <TH> определяет заголовок для столбца в таблице. Обычно, выделяются жирным
шрифтом. Закрывающий тег обязателен
Атрибуты
bgcolor Цвет фона
bordercolor Цвет рамки для элемента
height
Указывает высоту элемента в процентах или пикселях
align
Выравнивает текст в ячейке



left - по левому краю (по умолчанию)
rigth - по правому краю
center - по центру
valign
Выравнивает текст в ячейке по вертикали
top - по верхнему краю
middle - по центру
bottom - по нижнему краю



colspan
rowspan
title
Указывает кол-во столбцев которое объединено в одной ячейке (по умолчанию=1)
Указывает кол-во строк которое объединено в одной ячейке (по умолчанию=1)
Всплывающая подсказка
4. Тег <TD> определяет отдельную ячейку в таблице.
4
Атрибуты
height
align
© 1999-2002 А.Климов
Указывает высоту элемента в процентах или пикселях
Выравнивает текст в ячейке
left - по левому краю (по умолчанию)
rigth - по правому краю
center - по центру



Выравнивает текст в ячейке по вертикали
valign
top - по верхнему краю
middle - по центру
bottom - по нижнему краю



colspan
rowspan
title
Указывает кол-во столбцев которое объединено в одной ячейке (по умолчанию=1)
Указывает кол-во строк которое объединено в одной ячейке (по умолчанию=1)
Всплывающая подсказка
5. Тег <TR> и необязательный парный ему </TR> определяет строку в таблице
Атрибуты
Align
left - по левому краю
rigth - по правому краю
center - по центру



valign



Выравнивает текст в ячейке
Выравнивает текст в ячейке по вертикали
top - по верхнему краю
middle - по центру
bottom - по нижнему краю
Гиперссылки
1. Тег <A> служит для создания гипертекста (ссылок). Гипертекст позволяет осуществлять
мгновенный переход от одного фрагмента текста к другому. Сам гипертекст поддается
форматированию. Закрывающий тег обязателен. Тег должен содержать либо атрибут name, либо
href .
Атрибуты
contentEditable - Возможность редактирования
name
Задает имя элемента. Имя используется, например, для создания ссылок между
фреймами
href
Задает URL ресурса, на который должен перейти пользователь, щелкнув по ссылке.
Атрибут может указывать как на внешний документ, так и на элемент внутри данного
документа.
Для создания гиперссылки вызова почтовой программы для написания письма
используется <a href="mailto:your@email">
target
Строка, определяющая или получающая одно из следующих значений
name Имя ссылки или фрейма
_blank Загружает ссылку в новое окно
5
© 1999-2002 А.Климов
_parent Загружает ссылку в родительском окне
_search Загружает ссылку в панель поиска браузера. Доступно в Internet Explorer 5 и выше
_self
По умолчанию. Загружает ссылку в это же окно, где был произведен клик по ссылке
_top
Загружает ссылку в topmost окно
title
Всплывающая подсказка.
Download