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="&copy; 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 Всплывающая подсказка.