Словарь html — терминов. Основные html теги
Основные html теги — это та база, на которой строится практически любой сайт/блог. Из этой статьи Вы узнаете именно те 20% тегов, которые Вам будут необходимы всегда.
Как в любом языке, да и в здесь действует правило парето 20/80 (20% дел имеет 80% важности для достижения нужного результата), что означает — достаточно знать всего 20% кодов, чтобы уверенно достигать своих целей в сайтостроении.
HTML не является языком программирования, потому как, это — язык гипертекстовой разметки текста, что говорит само за себя, он позволяет размечать блоки на страницах для верного отображения, делать разметку текста для вебстраниц. Также с его помощью делаются ссылки с одной страницы сайта на другую. Все ссылки в интернете созданы с помощью гипертекстовой части html кода.
— это самый наипростейший язык! Если Вы решили его изучить, то важно понять с самого начала, что в этом нет ни какой сложности. С уверенностью можно сказать, что в школе детям, на уроке информатики намного сложней приходиться.
Итак приступим. Писать коды лучше в блокноте, который входит в стандартные программы операционной системы Windows или в бесплатной программе «Notepad + +».
Сначала определимся с тем, что такое тег. Тег — это ячейка самого языка html, из которого он в общем то и строится. По тегам браузеры понимают, как отобразить текст, куда вставить картинки. Теги — это и есть сами элементы разметки.
HTML теги для создания каркаса сайтаТеги бывают парные и не парные. Парные открываются и закрываются, т.е в закрывающихся присутствует обратный слеш «/».
Первое, что должно находится в любом html документе при создании страницы блога, это:
-
даст примерно слежующую карту на изображении:
Пример карты на изображении
Для того, чтобы создать карту, обрабатываемую на сервере, необходимо административное вмешательство, так как на сервере придется изменять файл конфигурации для 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-тегов являются парными: есть открывающий (например, ) и закрывающий тег, который от открывающего отличает слеш (/ ) после первой угловой скобки (например, ). Всё, что находится внутри пары тегов, называется их содержимым .
Содержимое Помещённый внутри этих тегов текст становится жирным
Бывают и непарные (одиночные) теги, которые называются метками . Их, в отличие от парных тегов, не нужно закрывать, потому что они не работают с содержимым, а выполняют какую-то функцию сами по себе. Пример одиночного тега -
. Он устанавливает перенос текста на следующую строку.Если проводить параллели с русским языком, то можно сказать, что парные теги - это кавычки или скобки, влияющие на свойства заключённого в них текста (попробуйте не закрыть кавычки вовремя), а одиночные теги (метки) - это знаки препинания (восклицательный, вопросительный или точка).
Любой тег состоит из:
- Открывающей угловой скобки (< ).
- Специального слова (имени тега). Например, hr , iframe , b .
- Закрывающей угловой скобки (> ).
Так как теги - основа языка разметки, не удивительно, что их довольно много. Рассмотрим основные, самые важные теги.
- - одиночный тег, внутри которого размещается комментарий. Комментарий - это текст, который не обрабатывается браузером. Внутри тега можно писать, что угодно, даже другие теги - работать они не будут, на экране не отобразятся. Разработчики комментируют код либо чтобы другим веб-мастерам было проще в нём разобраться, либо чтобы спустя продолжительное время его быстро смогли понять они сами.
- , , , , - теги, которые должны присутствовать в любом приличном HTML-документе (подробнее см. «Как создать сайт в Блокноте»).
- - тег содержит вспомогательную информацию для браузеров и поисковиков. Внутри него можно прописать ключевые слова, описание страницы, кодировку документа, имя автора и т. д.
- содержит ссылку на файл сценария или сам код.
- - тег, задающий стиль документа и/или его элементов с помощью CSS. HTML-документ может содержать множество тегов , определяющих разные стили разных частей страницы.
- - полная противоположность , его дополняющая. Тег задаёт «шапку» (заголовок) раздела или всей страницы.
- хранит в себе «ноги» сайта или раздела. Внутри него можно разместить вспомогательную информацию, копирайт, контактные данные и т. д.
- содержит основной контент страницы. Ни шапку, ни блок меню, ни «ноги» сайта, а то, ради чего страница создавалась. Например, на странице, которую вы сейчас читаете, внутри должна располагаться как раз эта статья.
- предназначен для создания ссылок. Ссылки - корень гипертекста, поэтому им посвящена .
- нужен для добавления на веб-страницу картинок (к вашим услугам посвящённая этому действу ).
-
,
, - , , ,, , , и другие теги форматирования текста составляют большую группу HTML-тегов, о них рассказывает статья «Форматирование текста в HTML» .
- - блочный элемент. Текст внутри форматируется с помощью CSS (каскадных таблиц стилей, которым посвящена вторая часть самоучителя).
-
. У вас есть абзац
или блок . Текст в нём оформлен в едином стиле, но вы бы хотели, не нарушая структуры, сделать так, чтобы несколько слов имели другой размер шрифта или цвет. Именно для таких ситуаций и предназначен тег .
-
,
-
,
- - теги списков. Маркированные, нумерованные - работа этих тегов. Есть ещё списки определений, за которые отвечают теги , и , но подробно обо всей это шестёрке вы узнаете из статьи «Создание списков» .