align — указывает положение заголовка: он может быть в верхней (top) или нижней (bottom) части таблицы.
a |
b |
c |
d |
e |
Рамки (фреймы)
Мощным визуальным средством являются так называемые рамки или фреймы (frames). С помощью рамок область отображения браузера может быть разделена на отдельные части, содержащие различные документы. При этом возможно задание связей между рамками так, что выбор ссылки в одной рамке может приводить к отображению запрошенного документа в другой. Это позволяет создавать очень удобные в использовании документы (при неправильном применении можно также создать и очень неудобные). Рамки на сегодняшний день поддерживаются в последних версиях таких браузеров, как netscape navigator (начиная с версии 2.0) и ms internet explorer (версии 3.0 и выше), но популярность применения рамок растет, и похоже, что вскоре к этим браузерам добавятся новые.
Рамки описываются в специальном html-документе, называемом Документом Описания Рамок. Этот документ содержит описание числа, размеров и положения рамок, а также url-и их содержимого. Нельзя пытаться вписать содержимое рамок в описание, оно должно находиться в отдельных документах.
При описании рамок тег заменяется на тег
описания содержимого рамок
Тег будет игнорироваться браузером, если перед ним встретятся любые теги, в обычном случае встречающиеся внутри тега . Теги могут быть вложенными, что позволяет, как Читатель увидит далее, создавать очень сложные конструкции. Параметры тега могут быть следующими:
rows=«x1,x2,… или x1%,x2%,… или x1*,x2*,…» — этот параметр описывает рамки как строки различной высоты. Высоты рамок задаются списком разделенных запятыми значений. Высоты измеряются в точках, процентном отношении от общей высоты области отображения, либо как относительные величины. Сумма высот всех рамок должна быть равна высоте всей области отображения. Если этого не происходит, браузеры сами корректируют значения.
cols=«x1,x2,… или x1%,x2%,… или *» — используется для описания рамок как столбцов различной ширины. Используется так же, как параметр rows.
задаст две горизонтальные рамки, причем первая (верхняя) будет в три раза выше второй (нижней).
задаст три горизонтальные рамки, причем первая (верхняя) будет иметь высоту 100 точек, третья (нижняя) будет иметь высоту 50 точек, а вторая (средняя) займет все оставшееся пространство.
задаст две вертикальные рамки, причем первая (левая) будет иметь ширину 70% общей ширины области отображения, а вторая (правая) — 30%.
Для задания содержимого рамки используется тег . Параметры могут быть следующими:
src — указывает url документа, который должен быть отображен в рамке. Если параметр не указан, рамка останется пустой.
name — значение этого параметра определяет имя для рамки. Впоследствии по этому имени на рамку можно будет сослаться с помощью параметра target тега .
scrolling — показывает, можно ли проматывать содержимое документа в рамке. Может принимать следующие значения:
yes — содержимое рамки МОЖЕТ проматываться.
no — содержимое рамки НЕ может проматываться.
auto — браузер решает, отображать линейку прокрутки или нет (исходя из длины документа). Это значение иcпользуется по умолчанию.
noresize — если этот параметр указан, пользователь не сможет изменить размеры рамки. По умолчанию пользователь МОЖЕТ изменять размеры отображаемых рамок (например, таская границу рамки указательным устройством).
marginwiph — указывает на величину горизонтального отступа внутри рамки.
marginheight — указывает на величину вертикального отступа внутри рамки.
дает рамке имя myframe1 и отображает в ней файл file1.html, причем линейка прокрутки не отображается, ширина горизонтального отступа устанавливается в 5 точек, и пользователь может свободно менять размеры рамки.
Более полный пример:
соответствует примерно следующей раскладке рамок в области отображения:
Расположение рамок примера
Что же происходит, если браузер не понимает рамок? Пользователь видит абсолютно чистый экран и не может добраться до нужной ему информации. Как сделать так, чтобы такая ситуация не возникала? Разработчики расширений предусмотрели такую ситуацию и придумали тег, содержимое которого никогда не отображается в браузере, понимающем рамки, тогда как «глупый» браузер, увидя незнакомый тег, честно отобразит его содержимое без применения каких-либо хитростей. Такой тег называется
Для организации связей между рамками разработчики предусмотрели параметр target для тега . Он также может применяться в тегах , и .
Картрированные изображения
Очень мощным средством организации гипертекстовых ссылок является так называемые «картрированые изображения» (imagemaps). Они представляют собой изображения с чувствительными областями, то есть, выделение различных частей изображения указательным устройством приводит к движению по гипертексту в различных «направлениях».
Картрированные изображения бывают двух типов: обрабатываемые на сервере (server-side) или на клиенте (client-side).
Для создания карт на стороне клиента используется тег html под названием . Синтаксис тега таков:
где параметры тега могут быть такими:
shape — определяет форму активной области для карты. Может принимать значения rect, circle, poly, default, соответствующие областям прямоугольной, круглой, многоугольной и области по умолчанию соответственно. Все типы областей, кроме default, требуют указания координат в атрибуте coords.
coords — определяет координаты областей. В зависимости от типа области может иметь вид: для прямоугольной—значения координат верхнего левого и правого нижнего углов, («x1,y1,x2,y2»); для круговой—координаты центра и радиус («x,y,r»); для многоугольной—список координат вершин («x1,y1,x2,y2,x3,y3,…»);
href — определяет url, на который ссылается данная область.
noref — указывает, что область «мертва», то есть за ней не скрывается ссылка.
Чтобы использовать локальную карту на изображении в параметре usemap тега необходимо указать имя карты. Например:
height=»480″ usemap=»#mymap»>
даст примерно слежующую карту на изображении:
Пример карты на изображении
Для того, чтобы создать карту, обрабатываемую на сервере, необходимо административное вмешательство, так как на сервере придется изменять файл конфигурации для cgi-модуля обработки информации от карты.
При использовании различных web-серверов формат описания карты на сервере может варьироваться. Два наиболее распространенных формата произошли от http-серверов ncsa и cern. Приведем пример использования карты с сервером ncsa httpd.
На стороне сервера, файл (например) /usr/local/etc/httpd/conf/imagemap.conf:
# this is a map for ncsa server
test_map: /home/joe/public_html/maps/test.map
Использовать эту карту можно примерно таким образом:
height=200 ismap>
Формы
Для чего нужны формы?
Форма - это инструмент, с помощью которого HTML-документ может послать некоторую информацию в некоторую заранее определенную точку внешнего мира, где информация будет некоторым образом обработана.
Cоздать форму гораздо проще, чем ту «точку внешнего мира», в которую форма будет посылать информацию. В качестве такой «точки» в большинстве случаев выступает программа, написанная на Перл или Си. Программы, обрабатывающие данные, переданные формами, часто называют CGI-скриптами. Сокращение CGI (Common Gateways Interface) означает «общепринятый интерфейс шлюзов». Написание CGI-скриптов в большинстве случаев требует хорошего знания соответствующего языка программирования и возможностей операционной системы Unix.
В последнее время определенное распространение получил язык PHP/FI, инструкции которого можно встраивать прямо в HTML-документы (документы при этом сохраняются в виде файлов с расширением *.pht или *.php).
Формы передают информацию программам-обработчикам в виде пар [имя переменной]=[значение переменной]. Имена переменных следует задавать латинскими буквами. Значения переменных воспринимаются обработчиками как строки, даже если они содержат только цифры.
Как устроена форма
Форма открывается меткой и заканчивается меткой . HTML-документ может содержать в себе несколько форм, однако формы не должны находиться одна внутри другой. HTML-текст, включая метки, может размещаться внутри форм без ограничений.
Метка может содержать три атрибута, один из которых является обязательным. Вот эти атрибуты:
Обязательный атрибут. Определяет, где находится обработчик формы.
Определяет, каким образом (иначе говоря, с помощью какого метода протокола передачи гипертекстов) данные из формы будут переданы обработчику. Допустимые значения: METHOD=POST и METHOD=GET. Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET.
Определяет, каким образом данные из формы будут закодированы для передачи обработчику. Если значение атрибута не установлено, по умолчанию предполагается ENCTYPE=application/x-www-form-urlencoded.
Простейшая форма
Для того, чтобы запустить процесс передачи данных из формы обработчику, нужен какой-то орган управления. Создать такой орган управления очень просто:
Встретив такую строчку внутри формы, браузер нарисует на экране кнопку с надписью Submit (читается «сабмит» с ударением на втором слоге, от английского «подавать»), при нажатии на которую все имеющиеся в форме данные будут переданы обработчику, определенному в метке .
Надпись на кнопке можно задать такую, какая нравится, путем введения атрибута VALUE=»[Надпись]» (читается «вэлью» с ударением на первом слоге, от английского «значение»), например:
Теперь мы знаем достаточно для того, чтобы написать простейшую форму. Она не будет собирать никаких данных, а просто будет возвращать к началу страницы.
Пример 11
Простейшая форма
Надпись, нанесенную на кнопку, можно при необходимости передать обработчику путем введения в определение кнопки атрибута NAME=[имя] (читается «нэйм», от английского «имя»), например:
При нажатии на такую кнопку обработчик вместе со всеми остальными данными получит и переменную button со значением Поехали!.
В форме может быть несколько кнопок типа submit с различными именами и/или значениями. Обработчик, таким образом, может действовать по-разному в зависимости от того, какую именно кнопку submit нажал пользователь.
Как форма собирает данные
Существуют и другие типы элементов . Каждый элемент должен включать атрибут NAME=[имя], определяющий имя элемента (и, соответственно, имя переменной, которая будет передана обработчику). Имя должно задаваться только латинскими буквами. Большинство элементов должны включать атрибут VALUE=»[значение]», определяющий значение, которое будет передано обработчику под этим именем. Для элементов и , однако, этот атрибут не обязателен, поскольку значение соответствующей переменной может вводиться пользователем с клавиатуры.
Основные типы элементов :
Определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE=[число] (ширина окна ввода в символах) и MAXLENGTH=[число] (максимально допустимая длина вводимой строки в символах). Пример:
Определяет окно шириной 20 символов для ввода текста. По умолчанию в окне находится текст Иван, который пользователь может редактировать. Отредактированный (или неотредактированный) текст передается обработчику в переменной user.
Определяет окно для ввода пароля. Абсолютно аналогичен типу text, только вместо символов вводимого текста показывает на экране звездочки (*). Пример:
Определяет окно шириной 20 символов для ввода пароля. Максимально допустимая длина пароля - 10 символов. Введенный пароль передается обработчику в переменной pw.
Определяет радиокнопку. Может содержать дополнительный атрибут checked (показывает, что кнопка помечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка. Пример:
9600 бит/с
14400 бит/с
28800 бит/с
Определяет группу из трех радиокнопок, подписанных 9600 бит/с, 14400 бит/с и 28800 бит/с. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная modem со значением 9600. Если пользователь отметит другую кнопку, обработчику будет передана переменная modem со значением 14400 или 28800.
Определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут checked (показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов. Пример:
Персональные компьютеры
Рабочие станции
Серверы локальных сетей
Серверы Интернет
Определяет группу из четырех квадратов. Первоначально помечены второй и четвертый квадраты. Если пользователь не произведет изменений, обработчику будут переданы две переменные: comp=WS и comp=IS.
Определяет скрытый элемент данных, который не виден пользователю при заполнении формы и передается обработчику без изменений. Такой элемент иногда полезно иметь в форме, которая время от времени подвергается переработке, чтобы обработчик мог знать, с какой версией формы он имеет дело. Другие возможные варианты использования Вы вполне можете придумать сами. Пример:
Определяет скрытую переменную version, которая передается обработчику со значением 1.1.
Определяет кнопку, при нажатии на которую форма возвращается в исходное состояние. Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типа reset может и не иметь атрибута name. Пример:
Определяет кнопку Очистить поля формы, при нажатии на которую форма возвращается в исходное состояние.
Помимо элементов , формы могут содержать меню и поля для ввода текста .
Меню из n элементов выглядит примерно так:
[текст 1]
[текст 2]
[текст n]
Как Вы видите, меню начинается с метки и заканчивается меткой . Метка содержит обязательный атрибут NAME, определяющий имя переменной, которую генерирует меню.
Метка может также содержать атрибут MULTIPLE, присутствие которого показывает, что из меню можно выбрать несколько элементов. Большинство браузеров показывают меню в виде окна, в котором находятся элементы меню (высоту окна в строках можно задать атрибутом SIZE=[число]). Меню в большинстве случаев показывается в виде выпадающего меню.
Метка определяет элемент меню. Обязательный атрибут VALUE устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню. Метка может включать атрибут checked, показывающий, что данный элемент отмечен по умолчанию.
Разберем небольшой пример.
Вариант 1
Вариант 2
Вариант 3
Такой фрагмент определяет меню из трех элементов: Вариант 1, Вариант 2 и Вариант 3. По умолчанию выбран элемент Вариант 1. Обработчику будет передана переменная selection значение которой может быть option1 (по умолчанию), option2 или option3.
После всего, что мы уже узнали, элемент может показаться совсем простым. Например:
А здесь — Ваш адрес…
Все атрибуты обязательны. Атрибут NAME определяет имя, под которым содержимое окна будет передано обработчику (в примере - address). Атрибут ROWS устанавливает высоту окна в строках (в примере - 5). Атрибут COLS устанавливает ширину окна в символах (в примере - 50).
Текст, размещенный между метками и , представляет собой содержимое окна по умолчанию. Пользователь может его отредактировать или просто стереть.
Важно знать, что русские буквы в окне при передаче обработчику могут быть конвертированы в соответствующие им символьные объекты.
Специальные символы и комментарии
Специальные символы
Некоторые общеупотребимые символы не имеют своих мест на клавиатуре, например значок ©. Другие же трактуются браузерами как командные последовательности, как, например, угловые скобки, в которые заключаются теги языка html. Очевидно, должен быть способ набора таких символов в текст. В html существует набор макропоследовательностей, которые превращаются браузерами в соответствующие им «непечатные» символы. Очевидно, что не во всех шрифтах есть полный набор символов, и браузер не во всех ситуациях будет способен их корректно отобразить. Но для полного описания документа все особые символы должны быть правильно закодированы. Приведем список специальных символов и соответствующие им макрокоманды языка.
Специальные символы
Комментарии
Как и во всяком языке программирования, в html есть способ закомментировать часть текста так, чтобы она не обрабатывалась программами просмотра. Комментарии заключаются между последовательностями < ! — — и — — >. Пример комментария:
Советы по разработке и размещению HTML — страниц
Правила хорошего тона при разработке HTML-документов
Производители браузеров часто добавляют к своим творениям поддержку меток, не входящих в текущую спецификацию HTML. Именно поэтому иногда можно встретить страницы, оптимизированные для того или иного браузера. На мой взгляд, это далеко не лучший подход. Однако, как говорил Рэй Брэдбери, единственный способ заставить писателя не писать - это кольт сорок пятого калибра. И писатели пишут…
Не питайте абсолютного доверия к визуальным редакторам HTML
Помните, что большинство визуальных редакторов HTML, хотя и работают в целом корректно, имеют мелкие (а иногда и крупные) недостатки. Отчасти это связано с тем, что HTML с самого начала не был приспособлен для автоматизированной разработки.
Не вписывайте атрибуты, значение которых вы хотите указать то же, что и по умолчанию
Это увеличивает размер вашего файла и доставляет кучу лишней работы.
Атрибут face используйте только при надобности особенного шрифта.
Используйте продуманную иерархию заголовков
Помните, что Ваш документ будет читаться гораздо лучше, если в нем будет четкое разбиение на разделы и подразделы. HTML предоставляет в Ваше распоряжение шесть уровней заголовков. Воспользуйтесь этим богатством в своих интересах - создайте легко читаемый документ с интуитивно ясной структурой.
Следите за вложенностью меток
Современные браузеры способны правильно обработать вложенные метки. Например, вот такой фрагмент HTML-текста
жирный наклонный шрифт
большинство браузеров вполне успешно воспроизведут как жирный наклонный шрифт. Обратите внимание - метки … в этом фрагменте находятся внутри меток …. Другими словами, метки вложены одна в другую.
Работа браузера, однако, окажется сильно затрудненной, если вложенность окажется нарушенной, например:
вложенность меток нарушена
Соблюдение вложенности - очень важная часть общей культуры написания HTML-текста.
Указывайте альтернативный текст при включении в документ изображений
Помните, что пользователи могут отключать автоматическую загрузку изображений. Не ленитесь подсказать пользователю, чего именно он не видит. Это особенно важно, когда изображения являются гипертекстовыми ссылками.
При разработке крупных документов создавайте оглавления
При написании крупного документа очень полезно поместить в его начале оглавление с гипертекстовыми ссылками на разделы. Это может облегчить пользователю работу с документом, особенно если документ носит справочный характер.
Хорошо продумайте навигацию
Попытайтесь вообразить себе, что в распоряжении пользователя нет кнопки Back. Подумайте о том, как обеспечить пользователю необходимую свободу перемещения в этом случае. Это поможет Вам спроектировать удобную в пользовании коллекцию HTML-документов.
Типовые ошибки HTML
Типовые ошибки будут рассмотрены на примере этого кода страницы:
Home Page
«Привет!»
Это моя фотка в возросте 15 лет.
Мои линки.
Крэки
Тут лежит классный софт! МП-3 — рулезз!
Примочки к мастдаю!
Ошибки в атрибутах тега
На данной странице в качестве бэкграунда бэкграунд должениспользоваться внешний гиф. Ошибка в описании пути. Путь к файлу описан относительно диска c:\ на локальной машине. Такой бэкграунд не будет отображен у клиента. Правильный код:
background=»../../images/buttonweb.gif»
Не совместимые атрибуты.
Не совместимый код: bgproperties=»fixed» topmargin=»1″ leftmargin=»1″
NN не понимает ракие расширения, для совместимости кода необходимо дополнительно указать MARGINWIDTH=»1″ MARGINHEIGHT=»1″
Для корректного отображения страницы в броузерах с отключенной графикой желательно также указывать цвет бэкграунда,. bgcolor=»»
Избыточное форматирование
Особенность HTML редактора Front Page. Достаточно использовать один из тегов, либо либо абсолютно идентичный ему
Избыточное форматирование в теге
Данном случае текст уже отцентрирован и нет необходимости добавлять атрибуты с этой целью. Имеет смысл только использование Align=»left(right)».
Тег
В этих строках не закрыт (
), что приведет к неадекватному отображению интервалов между параграфами в NN и IE. Хороший стиль требует закрывать тег
Использование Font Face.
Использование нестандартных шрифтов на страницах приведет к тому, что страница будет или неудобочитаема, или не читаема вовсе. Для совместимости с броузерами с других платформ необходимо использовать вот такую конструкцию:
Избыточное форматирование стиля шрифта
Конструкция избыточна. Предпочтительно использовать для выделения заголовков , или комбинацию — сразу за и относительный размер шрифта .
Квотирование в тексте контента.
Использование кавычек в таком виде («») в контенте не допустимо. Необходимо указывать &qwote; Привет Пиплы! &qwote;.
Нарушение порядка закрывания тегов
Теги должны закрываться с учетом порядка их вложения. Правильная конструкция
… контент …
Для описания картинок на странице необходимо использовать следующие атрибуты:
width=»», height=»»
Если их не указать, то страница не будет загружаться до тех пор, пока не загрузится до конца картинка.
Отсутствие этого атрибута приведет к тому, что вокруг картинки, если «навесить» на нее гиперссылку, появится окантовка с цветом гиперссылки
Отсутствие данного атрибута сделает информацию о картинке недоступной в браузерах с отключенной графикой.
Правильный код описания картинки выглядит вот так:
Незакрытый анкер, и атрибуты анкера.
Анкер подлежит обязательному закрытию. Хороший стиль программирования подразумевает следующее построение:
… контент …
Примечание.
Указание тега позволит в дальнейшем не указывать в расширении анкера TARGET.
В случае, если анкер закрыть с переводом строки, или не закрыть его вовсе то NN отрендерит такой код с маленькой черточкой, что сильно заметно на страницах со светлым фоном.
Форматирование списков.
При форматировании списков необходимо закрывать тег
, форматирование текста в каждой строке списка имеет смысл только в случае выделения строк. Правильный код.
- … контент …
- … контент …
- … контент …
Таблица цветов:
Название в CSS
|
Образец
|
Цвет
|
Значение
|
Название в IE4
|
aliceBlue
|
|
блёкло-синий
|
#F0F8FF
|
htmlAliceBlue
|
antiqueWhite
|
|
античный белый
|
#FAEBD7
|
htmlAntiqueWhite
|
aqua
|
|
голубая вода
|
#00FFFF
|
htmlAqua
|
aquamarine
|
|
аквамарин
|
#7FFFD4
|
htmlAquamarine
|
azure
|
|
лазурь
|
#F0FFFF
|
htmlAzure
|
beige
|
|
бежевый
|
#F5F5DC
|
htmlBeige
|
bisque
|
|
бисквитный
|
#FFE4C4
|
htmlBisque
|
black
|
|
чёрный
|
#000000
|
htmlBlack
|
blanchedalmond
|
|
светло-кремовый
|
#FFEBCD
|
htmlBlanchedAlmond
|
blue
|
|
синий
|
#0000FF
|
htmlBlue
|
blueviolet
|
|
сине-фиолетовый
|
#8A2BE2
|
htmlBlueViolet
|
brown
|
|
коричневый
|
#A52A2A
|
htmlBrown
|
burlywood
|
|
старого дерева
|
#DEB887
|
htmlBurlyWood
|
cadetblue
|
|
блёклый серо-синий
|
#5F9EA0
|
htmlCadetBlue
|
chartreuse
|
|
фисташковый
|
#7FFF00
|
htmlChartreuse
|
chocolate
|
|
шоколадный
|
#D2691E
|
htmlChocolate
|
coral
|
|
коралловый
|
#FF7F50
|
htmlCoral
|
cornflowerblue
|
|
васильковый
|
#6495ED
|
htmlCornflowerBlue
|
cornsilk
|
|
тёмный шёлк
|
#FFF8DC
|
htmlCornsilk
|
crimson
|
|
малиновый
|
#DC143C
|
htmlCrimson
|
cyan
|
|
Циан
|
#00FFFF
|
htmlCyan
|
darkblue
|
|
тёмно-синий
|
#00008B
|
htmlDarkBlue
|
darkcyan
|
|
тёмный циан
|
#008B8B
|
htmlDarkCyan
|
darkgoldenrod
|
|
тёмный красно-золотой
|
#B8860B
|
htmlDarkGoldenRod
|
darkgrey
|
|
тёмно-серый
|
#A9A9A9
|
htmlDarkGrey
|
darkgreen
|
|
тёмно-зелёный
|
#006400
|
htmlDarkGreen
|
darkkhaki
|
|
тёмный хаки
|
#BDB76B
|
htmlDarkKhaki
|
darkmagenta
|
|
тёмный фуксин (красный)
|
#8B008B
|
htmlDarkMagenta
|
darkolivegreen
|
|
тёмно-оливковый
|
#556B2F
|
htmlDarkOliveGreen
|
darkorange
|
|
тёмно-оранжевый
|
#FF8C00
|
htmlDarkOrange
|
darkorchid
|
|
тёмно-орхидейный
|
#9932CC
|
htmlDarkOrchid
|
darkred
|
|
тёмно-красный
|
#8B0000
|
htmlDarkRed
|
darksalmon
|
|
тёмно-оранжево-розовый
|
#E9967A
|
htmlDarkSalmon
|
darkseagreen
|
|
тёмный морской волны
|
#8FBC8F
|
htmlDarkSeaGreen
|
darkslateblue
|
|
тёмный серовато-синий
|
#483D8B
|
htmlDarkSlateBlue
|
darkslategrey
|
|
тёмный синевато-серый
|
#2F4F4F
|
htmlDarkSlateGrey
|
darkturquoise
|
|
тёмно-бирюзовый
|
#00CED1
|
htmlDarkTurquoise
|
darkviolet
|
|
тёмно-фиолетовый
|
#9400D3
|
htmlDarkViolet
|
deeppink
|
|
тёмно-розовый
|
#FF1493
|
htmlDeepPink
|
deepskyblue
|
|
тёмный небесно-синий
|
#00BFFF
|
htmlDeepSkyBlue
|
dimgrey
|
|
тускло-серый
|
#696969
|
htmlDimGrey
|
dodgerblue
|
|
тускло-васильковый
|
#1E90FF
|
htmlDodgerBlue
|
firebrick
|
|
огнеупорного кирпича
|
#B22222
|
htmlFireBrick
|
floralwhite
|
|
цветочно-белый
|
#FFFAF0
|
htmlFloralWhite
|
forestgreen
|
|
лесной зелёный
|
#228B22
|
htmlForestGreen
|
fuchsia
|
|
фуксии
|
#FF00FF
|
htmlFuchsia
|
gainsboro
|
|
светлый серо-фиолетовый
|
#DCDCDC
|
htmlGainsboro
|
ghostwhite
|
|
туманно-белый
|
#F8F8FF
|
htmlGhostWhite
|
gold
|
|
золотой
|
#FFD700
|
htmlGold
|
goldenrod
|
|
красного золота
|
#DAA520
|
htmlGoldenRod
|
grey
|
|
серый
|
#808080
|
htmlGrey
|
green
|
|
зелёный
|
#008000
|
htmlGreen
|
greenyellow
|
|
зелёно-жёлтый
|
#ADFF2F
|
htmlGreenYellow
|
honeydew
|
|
свежего мёда
|
#F0FFF0
|
htmlHoneydew
|
hotpink
|
|
ярко-розовый
|
#FF69B4
|
htmlHotPink
|
indianred
|
|
тусклый красный
|
#CD5C5C
|
htmlIndianRed
|
indigo
|
|
индиго
|
#4B0082
|
htmlIndigo
|
ivory
|
|
слоновой кости
|
#FFFFF0
|
htmlIvory
|
khaki
|
|
хаки
|
#F0E68C
|
htmlKhaki
|
lavender
|
|
бледно-лиловый
|
#E6E6FA
|
htmlLavender
|
lavenderblush
|
|
бледный розово-лиловый
|
#FFF0F5
|
htmlLavenderBlush
|
lawngreen
|
|
зелёной травы
|
#7CFC00
|
htmlLawnGreen
|
lemonchiffon
|
|
лимонный
|
#FFFACD
|
htmlLemonChiffon
|
lightblue
|
|
светло-синий
|
#ADD8E6
|
htmlLightBlue
|
lightcoral
|
|
светло-коралловый
|
#F08080
|
htmlLightCoral
|
lightcyan
|
|
светло-циановый
|
#E0FFFF
|
htmlLightCyan
|
lightgrey
|
|
светло-серый
|
#D3D3D3
|
htmlLightGrey
|
lightgreen
|
|
светло-зелёный
|
#90EE90
|
htmlLightGreen
|
lightpink
|
|
светло-розовый
|
#FFB6C1
|
htmlLightPink
|
lightsalmon
|
|
светлый оранжево-розовый
|
#FFA07A
|
htmlLightSalmon
|
lightseagreen
|
|
светлый морской волны
|
#20B2AA
|
htmlLightSeaGreen
|
lightskyblue
|
|
светлый небесно-синий
|
#87CEFA
|
htmlLightSkyBlue
|
lightslategrey
|
|
светлый синевато-серый
|
#778899
|
htmlLightSlateGrey
|
lightsteelblue
|
|
светло-стальной
|
#B0C4DE
|
htmlLightSteelBlue
|
lightyellow
|
|
светло-жёлтый
|
#FFFFE0
|
htmlLightYellow
|
lime
|
|
цвет извести
|
#00FF00
|
htmlLime
|
limegreen
|
|
зеленовато-известковый
|
#32CD32
|
htmlLimeGreen
|
linen
|
|
льняной
|
#FAF0E6
|
htmlLinen
|
magenta
|
|
фуксин
|
#FF00FF
|
htmlMagenta
|
maroon
|
|
оранжево-розовый
|
#800000
|
htmlMaroon
|
mediumaquamarine
|
|
умеренно-аквамариновый
|
#66CDAA
|
htmlMediumAquamarine
|
mediumblue
|
|
умеренно-голубой
|
#0000CD
|
htmlMediumBlue
|
mediumorchid
|
|
умеренно-орхидейный
|
#BA55D3
|
htmlMediumOrchid
|
mediumpurple
|
|
умеренно-пурпурный
|
#9370DB
|
htmlMediumPurple
|
mediumseagreen
|
|
умеренный морской волны
|
#3CB371
|
htmlMediumSeaGreen
|
mediumslateblue
|
|
умеренный серовато-синий
|
#7B68EE
|
htmlMediumSlateBlue
|
mediumspringgreen
|
|
умеренный зеленовато-серый
|
#00FA9A
|
htmlMediumSpringGreen
|
mediumturquoise
|
|
умеренно-бирюзовый
|
#48D1CC
|
htmlMediumTurquoise
|
mediumvioletred
|
|
умеренный красно-фиолетовый
|
#C71585
|
htmlMediumVioletRed
|
midnightblue
|
|
ночной синий
|
#191970
|
htmlMidnightBlue
|
mintcream
|
|
мятно-кремовый
|
#F5FFFA
|
htmlMintCream
|
mistyrose
|
|
туманно-розовый
|
#FFE4E1
|
htmlMistyRose
|
moccasin
|
|
болотный
|
#FFE4B5
|
htmlMoccasin
|
navajowhite
|
|
грязно-серый
|
#FFDEAD
|
htmlNavajoWhite
|
navy
|
|
тёмно-синий
|
#000080
|
htmlNavy
|
oldlace
|
|
старого коньяка
|
#FDF5E6
|
htmlOldLace
|
olive
|
|
оливковый
|
#808000
|
htmlOlive
|
olivedrab
|
|
тускло-оливковый
|
#6B8E23
|
htmlOliveDrab
|
orange
|
|
оранжевый
|
#FFA500
|
htmlOrange
|
orangered
|
|
красно-оранжевый
|
#FF4500
|
htmlOrangeRed
|
orchid
|
|
орхидейный
|
#DA70D6
|
htmlOrchid
|
palegoldenrod
|
|
бледно-золотой
|
#EEE8AA
|
htmlPaleGoldenRod
|
palegreen
|
|
бледно-зелёный
|
#98FB98
|
htmlPaleGreen
|
paleturquoise
|
|
бледно-бирюзовый
|
#AFEEEE
|
htmlPaleTurquoise
|
palevioletred
|
|
бледный красно-фиолетовый
|
#DB7093
|
htmlPaleVioletRed
|
papayawhip
|
|
дыни
|
#FFEFD5
|
htmlPapayaWhip
|
peachpuff
|
|
персиковый
|
#FFDAB9
|
htmlPeachPuff
|
peru
|
|
коричневый
|
#CD853F
|
htmlPeru
|
pink
|
|
розовый
|
#FFC0CB
|
htmlPink
|
plum
|
|
сливовый
|
#DDA0DD
|
htmlPlum
|
powderblue
|
|
туманно-синий
|
#B0E0E6
|
htmlPowderBlue
|
purple
|
|
пурпурный
|
#800080
|
htmlPurple
|
red
|
|
красный
|
#FF0000
|
htmlRed
|
rosybrown
|
|
розово-коричневый
|
#BC8F8F
|
htmlRosyBrown
|
royalblue
|
|
королевский голубой
|
#4169E1
|
htmlRoyalBlue
|
saddlebrown
|
|
старой кожи
|
#8B4513
|
htmlSaddleBrown
|
salmon
|
|
оранжево-розовый
|
#FA8072
|
htmlSalmon
|
sandybrown
|
|
рыже-коричневый
|
#F4A460
|
htmlSandyBrown
|
seagreen
|
|
морской волны
|
#2E8B57
|
htmlSeaGreen
|
seashell
|
|
морской пены
|
#FFF5EE
|
htmlSeaShell
|
sienna
|
|
охра
|
#A0522D
|
htmlSienna
|
silver
|
|
серебристый
|
#C0C0C0
|
htmlSilver
|
skyblue
|
|
небесно-голубой
|
#87CEEB
|
htmlSkyBlue
|
slateblue
|
|
серовато-синий
|
#6A5ACD
|
htmlSlateBlue
|
slategrey
|
|
синевато-серый
|
#708090
|
htmlSlateGrey
|
snow
|
|
снежный
|
#FFFAFA
|
htmlSnow
|
springgreen
|
|
весенний зелёный
|
#00FF7F
|
htmlSpringGreen
|
steelblue
|
|
голубовато-стальной
|
#4682B4
|
htmlSteelBlue
|
tan
|
|
желтовато-коричневый
|
#D2B48C
|
htmlTan
|
teal
|
|
чайный
|
#008080
|
htmlTeal
|
thistle
|
|
чертополоха
|
#D8BFD8
|
htmlThistle
|
tomato
|
|
томатный
|
#FF6347
|
htmlTomato
|
turquoise
|
|
бирюзовый
|
#40E0D0
|
htmlTurquoise
|
violet
|
|
фиолетовый
|
#EE82EE
|
htmlViolet
|
wheat
|
|
пшеничный
|
#F5DEB3
|
htmlWheat
|
white
|
|
белый
|
#FFFFFF
|
htmlWhite
|
whitesmoke
|
|
белый дымчатый
|
#F5F5F5
|
htmlWhiteSmoke
|
yellow
|
|
жёлтый
|
#FFFF00
|
htmlYellow
|
yellowgreen
|
|
жёлто-зелёный
|
#9ACD32
|
htmlYellowGreen
|
HTML - язык гипертекстовой разметки. В его основе лежат так называемые теги. Теги - это некие элементы обвертки, задающие формат и свойства элементов веб-страницы. На одной странице мы собрали для вас актуальный справочник тегов HTML.
Всего насчитывается более ста элементов разметки. Каждый имеет ряд атрибутов и собственный синтаксис. Справочник по тегам HTML поможет быстрой найти нужный вам элемент.
Список тегов HTML
Ниже в таблице представлен список тегов HTML5 с кратким описанием на русском языке.
Тег
Краткое описание
|
Комментарий.
|
|
Определяет тип документа.
|
|
Ссылка, гиперссылка, якорь.
|
|
Определяет текст как аббревиатуру.
|
|
Контактная информация автора или владельца документа.
|
|
Определяет область на карте-изображении
|
|
Статья
|
|
Контент в стороне (содержимое не является основным на странице по смыслу)
|
|
Позволяет вставить воспроизводимый аудио файл.
|
|
Полужирный текст.
|
|
Задает базовый URL или аттрибут target для относительных ссылок в документе.
|
|
Область, где написание текста может имееть другое направления.
|
|
Устанавливает направление написания текста. В отличии от направление указывается физическое направление
|
|
Цитата.
|
|
Указывает область body документа.
|
|
Перенос строки.
|
|
Кликабельная кнопка
|
|
Используется для рисовании графики с помощью скриптов
|
|
Подпись таблицы.
|
|
Сноска на название материала.
|
|
Используется для вставки компьютерного кода в текстовом виде.
|
|
Задает характеристики колонок в таблице.
|
|
Определяет группу из одной или более колонок таблицы для форматирования.
|
|
Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле
|
|
Определяет описание термина из тега в списке терминов
|
|
Текст, который удален в новой версии документа.
|
|
Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть
|
|
Указывает, что содержимое является термином.
|
|
Определяет диалоговое окно или интерактивный элемент
|
|
Блочный элемент - один из основных элементов верстки.
|
|
Определяет список определений
|
|
Название термина в списке определений
|
|
выделенный по смыслу текст (обычно, текст выделенный курсивом).
|
|
Контейнер для внешнего приложения
|
|
Группа связанных элементов в форме
|
|
Заголовок для элемента
|
|
Определяет автономную группу из нескольких элементов (например картинка с подписью)
|
|
Нижний колонтитул
|
|
Определяет форму пользовательского ввода
|
-
|
Заголовки HTML разного уровня: , , , , , .
|
|
Указывает область head документа.
|
|
Блок заголовка
|
|
Горизонтальная линия - тематический разделитель.
|
|
Корневой элемент. Сообщает браузеру, что данный документ является HTML документом.
|
|
Выделяет текст курсивом.
|
|
Определяет встроенный фрейм
|
|
Изображение, картинка.
|
|
Поле для ввода
|
|
Текст, который был добавлен в новой версии документа.
|
|
Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом.
|
|
Метка для поля ввода. Указывает на привязку элемента (обычно текста) к полю ввода.
|
|
Заголовок элементов
|
|
Элемент списка
|
|
Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS)
|
|
Основной контент
|
|
Контейнер для . Определяет пользовательскую карту на изображении
|
|
Выделенный текст (обычно с помощью подсветки фона).
|
|
Контейнер для списка пунктов меню
|
|
Определяет элементы, которые пользователь может вызвать из контекстного меню
|
|
Используется для определения мета-данных документа.
|
|
Измеритель значений в заданном диапазоне
|
|
Контейнер для навигационных элементов
|
|
Альтернативный контент для пользователей, отключивших скрипты
|
|
Определяет встроенный объект
|
|
Определяет нумерованный список
|
|
Определяет группу связанных вариантов в выпадающем списке. Дает название группу
|
|
Параметр (вариант выбора) в выпадающем списке
|
|
Результат вычислений
|
|
Абзац.
|
|
Задает параметры для встроенных объектов
|
|
Контейнер для нескольких изображений
|
|
Предварительно отформатированный текст.
|
|
Индикатор выполнения (прогресса)
|
|
Цитата в тексте.
|
|
Альтернативный текст, если браузер не поддерживает тег .
|
|
Аннотация к содержимому тега .
|
|
Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов).
|
|
Перечеркнутый текст.
|
|
Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом).
|
|
Определяет скрипт или подключение скрипта из внешнего ресурса.
|
|
Раздел
|
|
Определяет выпадающий список
|
|
Текст шрифтом меньшего размера.
|
|
Определяет ресурс для тегов , и .
|
|
Строчный элемент.
|
|
Текст, выделенный по значению. Обычно отображается полужирным.
|
|
Определяет контейнер для определения стилей документа
|
|
Отображает текст в виде нижнего индекса.
|
|
Заголовок внутри тега
|
|
Отображает текст в виде верхнего индекса.
|
Определяет таблицу.
|
|
Определяет область контента в таблице.
|
|
|
Ячейка в таблице .
|
Многострочное поле для ввода
|
|
Определяет группу строк в нижней части таблицы - нижний колонтитул. Подробнее
|
Место, где допускается перенос строки.
|
Устаревшие теги HTML
Чем заменить устаревший тег HTML? В большинстве случаев подойдут каскадные таблицы стилей CSS. Также, существуют альтернативы не используемым в новой спецификации тегам и в пределах HTML. Ниже в таблице представлены устаревшие теги HTML с вариантами их замены.
Тег
Краткое описание
|
Акроним. Используйте тег вместо него
|
|
Встроенный апплет. Используйте или вместо него.
|
|
Задает цвет, размер, и семейство шрифта всего текста в документе. Используйте вместо него
|
|
Текст большего размера. Используйте вместо него
|
|
Отцентрованный текст. Используйте вместо него
|
|
Список директорий. Используйте |
|
Определяет цвет, размер и семейство шрифта. Используйте вместо него
|
|
Фрейм внутри . Используйте вместо него
|
|
Определяет набор фреймов. Для добавления нескольких встроенных фреймов используйте несколько элементов
|
|
Альтернативный текст, если фреймы не поддерживаются
|
|
Перечеркнутый текст. Используйте или вместо него
|
|
Моноширный текст. Используйте вместо него
|
|
Подчеркнутый текст. Используйте вместо него
|
В языке HTML всё, что вы напишите в HTML-документе, будет выведено на экран браузера сплошным текстом, то есть браузер игнорирует переводы строк, а также несколько набранных вами подряд пробелов заменяются одним.
Теги — это управляющие команды, которые были придуманы для того, чтобы отформатировать текст, т.е. теги говорят браузеру о том, как именно нужно вывести на экран часть текста, заключенную в теги. Для создания тега между угловыми скобками вводится HTML-код, который предназначен только для браузеров. Посетители сайта не видят теги.
Как уже отмечалось выше, все теги начинаются с угловой скобки < и заканчиваются угловой скобкой > . После открывающей угловой скобки следует имя тега (команды).
Например, тег
предназначен для акцентирования текста, браузеры отображают такой текст курсивным начертанием. Когда браузер обнаруживает этот тег, он переключается на форматирование курсивным шрифтом текста, следующего за тегом.
Рассмотрим пример: Этот текст обычный. Этот текст курсивный.
Тег
называют начальным или открывающим тегом, что означает включение браузером определенной команды (в данном случае написание курсивным шрифтом). У большинства тегов есть пара в виде закрывающего тега, который отключает команду.
Закрывающий тег выглядит так же, как начальный, но начинается с слэша. Итак, конечный тег для выделения курсивным шрифтом -
.
Рассмотрим пример: Этот текст обычный. Внимание! Курсив.
Это снова обычный шрифт.
Как вы успели заметить, браузер последовательно анализирует HTML – документ в поисках команд (тегов) и применяет или отключает разные параметры форматирования текста. Браузер отформатированный текст (все, что не является тегом) отображает в своем окне.
Процесс вставки тегов в обычный неформатированный текст называется разметкой HTML-документа, а теги - знаками разметки. При написании тегов не учитывается регистр букв, тег может быть прописан как строчными, так и прописными буквами, но всё же рекомендуется применение прописных букв.
|
Ниже приведены примеры основных тегов HTML, с объяснением их использования, а также примеры их применения в HTML-документе.
Заголовки
Существует специальный тег для указания заголовков в HTML. Есть 6 уровней заголовков в HTML, начиная от для наиболее важных объявлений, до для наименее важных.
Мы рассмотрели пример создания простенькой страницы, где давались комментарии некоторых html тегов, поскольку, мне кажется, что лучше сначала показать что-то на примере, а потом перейти к более детальному описанию. Именно поэтому создание страницы было рассмотрено во втором уроке, а более детальное в третьем.
Итак, ниже представлены описания распространенных html тегов, которые используются чуть ли не на каждой странице сайта. Поверьте, их уже хватит, чтобы написать целый сайт.
Список тегов html
1. HTML тег (для абзацев)
- выводит текстовый абзац (допускает атрибуты style, class, id). Самый распространенный тег, поскольку в него чаще всего помещают текст (впрочем он для этого и создан).
Например, html код:
Текстовый абзац номер один
А это другой абзац
Текстовый абзац номер один
А это другой абзац
К тегу можно ещё приписать параметр style:
С помощью этих различных значений можно редактировать внешний вид шрифта. Про эти параметры можно прочитать в отдельном уроке: стили в html и свойство css font .
Также можно прописать атрибуты CLASS
и ID
. Например:
2. HTML тег и (выделение жирным)
И
- два тега, которые позволяют сделать шрифт жирным. Разницы между этими тегами нет.
Приведем пример. Html код:
жирный текст
Преобразуется на странице в следующее:
жирный текст
Также можно прописать атрибуты CLASS и ID (как и в случае с
Примечание
Эти теги оказывают небольшое влияние на ранжирование документов в поисковых системах, поэтому бесцельно их лучше не использовать.
3. HTML тег (создание курсива)
- курсивный шрифт (допускает параметр style, class, id)
Например, html код:
курсивный текст
Преобразуется на странице в следующее:
4. HTML тег (подчеркнутый текст)
- подчеркнутый шрифт (допускает параметр style, class, id)
Например, html код:
подчеркнутый текст
Преобразуется на странице в следующее:
подчеркнутый текст
5. HTML тег (создание гиперссылки)
Создает ссылку на странице (допускает параметр style, class и другие).
Например, html код:
текст ссылки
Преобразуется на странице в следующее:
Все параметры и атрибуты тега
будут рассмотрены в отдельном уроке: html тег .
6. HTML тег (заголовки в контенте)
,...,
- заголовочные теги внутри контента (допускает параметр style, class, id). Причем чем меньше цифра, тем больший вес и размер (по умолчанию) имеет текст, заключенный в эти теги.
Например, html код:
Заголовок h1
Тег
используют для названия страницы (также как и тайтл)
Необходимо использовать эти теги только по назначению, т.е. только когда в статье необходим заголовок. Это связано с тем, что теги ,...,
имеют большое влияние на поисковые машины. Если их использовать правильно, то шансы попасть на верхние строчки выдачи очень высоки.
7. HTML тег (выравнивание)
- выравнивает контент по центру.
Например, html код:
Этот текст будет в центре
Преобразуется на странице в следующее:
Этот текст будет в центре
Примечание
- - для текста
- ...
- для всего (например, изображение)
8. HTML тег (подстрочный текст)
- выводит подстрочный шрифт.
Например, html код:
Обычный текст,
подстрочный текст
Преобразуется на странице в следующее:
Обычный текст, подстрочный текст
9. HTML тег (надстрочный текст)
- выводит надстрочный шрифт.
Например, html код:
Обычный текст,
надстрочный текст
Преобразуется на странице в следующее:
Обычный текст, надстрочный текст
10. HTML тег ,
,
- выводит шрифт на один пиксель больше/меньше текующего размера (допускает параметр style, class, id).
Например, html код:
Обычный шрифт,
этот шрифт больше на один пиксель
Преобразуется на странице в следующее:
Обычный шрифт, этот шрифт больше на один пиксель
11. HTML тег (создание списков)
Выводит список (допускает параметр style, class, id). Каждый новый элемент записывается между -
и
.
Например, html код:
Список:
- первый элемент списка
- второй элемент списка
Преобразуется на странице в следующее:
Список: - первый элемент списка
- второй элемент списка
12. HTML тег (создание таблиц)
- создает таблицу (допускает параметр style, class). Каждая новая строка создается тегами
, а столбец |
.
Например, html код:
1-строка 1 элемент
| 1-строка 2 элемент
|
2-строка 1 элемент
| 2-строка 2 элемент
|
Преобразуется на странице в следующее:
Все возможности тега
13. HTML тег (перенос строки)
- переход на следующую строку, представляет собой одиночный тег.
Например, html код:
Строка 1
2-строка
3-строка
А этот текст будет на 3ей строке, поскольку перехода не было
Преобразуется на странице в следующее:
1-Строка
2-строка
3-строка
А этот текст будет на 3ей строке, поскольку перехода не было
14. HTML тег (горизонтальная линия)
- чертит линию, представляет собой одиночный тег (допускает параметр style, class).
Например, html код:
Какой-то текст над линией
А этот текст будет уже под линией
Преобразуется на странице в следующее:
Какой-то текст над линией
А этот текст будет уже под линией
15. HTML тег (вывод картинки)
Например, html код:
http://img-fotki.yandex.ru/get/5821/27743399.2b/0_8875d_14383ca6_M.jpg
">
Преобразуется на странице в следующее:
Все возможности тега
будут рассмотрены в отдельном уроке: .
16. HTML тег (форматирование текста)
- для форматирования текста, изменения стиля и т.п. (допускает параметр style, class, id). Его вес в глазах поисковых машин отсуствует, поэтому его можно использовать сколько хотите.
Например, html код:
Этот текст зеленый,
а его размер 15 пикселей
Преобразуется на странице в следующее:
Примечание
Аналогичным тегом является
.
17. HTML тег (создание формы)
- создание формы на странице (допускает параметр style, class).
Например, ввод логина и пароля, любые кнопки, любая форма регистрации - все это формы.
18. HTML тег (создание блоков)
- служит для создания блоков на странице (допускает параметр style, class). Раньше для разметки на страницах пользовались в основном таблицами. После появления тега
задача упростилась. Практически все сайты содержат
блоки, как удобную альтернативу таблицам.
Тег
- это специальное зарезервированное слово, заключённое в угловые скобки (например,
). Тег - основная составляющая HTML: им код начинается, им же заканчивается, внутри тегов заключается отображаемая на веб-странице информация. Записывать их рекомендуется в нижнем регистре, то есть обычными маленькими буквами: не
, а
.
Какими бывают теги?
Большинство HTML-тегов являются парными: есть открывающий (например,
) и закрывающий тег, который от открывающего отличает слеш (/
) после первой угловой скобки (например,
). Всё, что находится внутри пары тегов, называется их содержимым
.
Содержимое
Помещённый внутри этих тегов текст становится жирным
Бывают и непарные (одиночные) теги, которые называются метками
. Их, в отличие от парных тегов, не нужно закрывать, потому что они не работают с содержимым, а выполняют какую-то функцию сами по себе. Пример одиночного тега -
. Он устанавливает перенос текста на следующую строку.
Если проводить параллели с русским языком, то можно сказать, что парные теги - это кавычки или скобки, влияющие на свойства заключённого в них текста (попробуйте не закрыть кавычки вовремя), а одиночные теги (метки) - это знаки препинания (восклицательный, вопросительный или точка). Любой тег состоит из:
- Открывающей угловой скобки (<
).
- Специального слова (имени тега). Например, hr
, iframe
, b
.
- Закрывающей угловой скобки (>
).
Основные HTML-теги
Так как теги - основа языка разметки, не удивительно, что их довольно много. Рассмотрим основные, самые важные теги.
-
- одиночный тег, внутри которого размещается комментарий. Комментарий
- это текст, который не обрабатывается браузером. Внутри тега можно писать, что угодно, даже другие теги - работать они не будут, на экране не отобразятся. Разработчики комментируют код либо чтобы другим веб-мастерам было проще в нём разобраться, либо чтобы спустя продолжительное время его быстро смогли понять они сами.
-
,
,
,
,
- теги, которые должны присутствовать в любом приличном HTML-документе (подробнее см. «Как создать сайт в Блокноте»).
-
- тег содержит вспомогательную информацию для браузеров и поисковиков. Внутри него можно прописать ключевые слова, описание страницы, кодировку документа, имя автора и т. д.
-
содержит ссылку на файл сценария или сам код.
-
- тег, задающий стиль документа и/или его элементов с помощью CSS. HTML-документ может содержать множество тегов
, определяющих разные стили разных частей страницы.
-
- полная противоположность
, его дополняющая. Тег задаёт «шапку» (заголовок) раздела или всей страницы.
-
хранит в себе «ноги» сайта или раздела. Внутри него можно разместить вспомогательную информацию, копирайт, контактные данные и т. д.
-
содержит основной контент страницы. Ни шапку, ни блок меню, ни «ноги» сайта, а то, ради чего страница создавалась. Например, на странице, которую вы сейчас читаете, внутри
должна располагаться как раз эта статья.
-
предназначен для создания ссылок. Ссылки - корень гипертекста, поэтому им посвящена .
-
нужен для добавления на веб-страницу картинок (к вашим услугам посвящённая этому действу ).
-
,
, -
,
,
,
,
,
,
и другие теги форматирования текста составляют большую группу HTML-тегов, о них рассказывает статья «Форматирование текста в HTML» .
-
- блочный элемент. Текст внутри
форматируется с помощью CSS (каскадных таблиц стилей, которым посвящена вторая часть самоучителя).
-
. У вас есть абзац
или блок
. Текст в нём оформлен в едином стиле, но вы бы хотели, не нарушая структуры, сделать так, чтобы несколько слов имели другой размер шрифта или цвет. Именно для таких ситуаций и предназначен тег .
-
,
, -
- теги списков. Маркированные, нумерованные - работа этих тегов. Есть ещё списки определений, за которые отвечают теги
,
и
, но подробно обо всей это шестёрке вы узнаете из статьи «Создание списков» .
,
,
,
,
и |
используются при создании таблиц и подробно рассматриваются в отдельной статье .
-
- тег, добавляющий странице интерактивности, то есть позволяющий пользователю взаимодействовать с веб-сайтом. Конечно, форме необходим обработчик, но зато с помощью тегов внутри
вы можете создать интерфейс. Флажки, кнопки, переключатели, поля ввода и другие объекты, которые требуют от вас активных действий - всё это элементы формы, код которых размещается внутри контейнера
.
-
- тег, создающий интерактивную кнопку. Чтобы при нажатии на неё что-нибудь произошло, кнопка должна находиться в форме (располагаться между тегами
).
-
создаёт элементы формы: переключатели, флажки, кнопки, всевозможные поля ввода. Вставляется в контейнер
. Но зачем нам тогда отдельно
, если есть универсальный
?
позволяет создать кнопку с расширенными параметрами. Например, на кнопке можно разместить картинку. На элементе, созданном через
, такого сделать нельзя.
-
и
- теги создания меню в HTML 5.
- это контейнер, внутри которого помещаются элементы
, добавление которых и приводит к созданию пунктов меню. Довольно интересная парочка. Например, с её помощью вы можете создать собственное контекстное меню для страницы или отдельного её элемента.
-
- ещё один тег формы, создающий в ней большое поле, в которое можно вводить не одну строку текста, а целые абзацы.
Рекомендуем почитать
Сегодня мы рассмотрим:
Настоящие ценители музыки знают, что для качественного...
Файлы *.xlsx с примерами вычислений формул и функций. А так же бесплатные...
В операционных системах Windows, начиная с Vista, используется встроенный...
Наверх
| | |