1. Введение в HTML
HTML (HyperText Markup Language, язык разметки гипертекста) представляет собой систему верстки веб-страниц и определяет, где и как в документе отображать отдельные элементы (текст, рисунки, ссылки и др.).
Исходный код самой веб-страницы является обычным текстовым документом и состоит всего из двух основных компонентов, которые перемежаются между собой:
текст, который и надо показать в окне браузера;
теги, они добавляют рисунки, устанавливают ссылки, меняют вид текста и делают еще множество других полезных вещей.
Таким образом, освоение HTML сводится к изучению основных тегов (их около двух десятков) и правил их использования.
Разметка документа
Представьте, что вы диктуете секретарше текст, который изобилует выделением цвета, жирным начертанием и рисунками. При этом фраза «Вставить рисунок» может быть понята двояко, ведь это воспринимается как обычный текст или как команда добавить изображение. Чтобы исключить лишнего переспрашивания и уточнения что же именно делать, вначале следует обговорить ключевое слово и терминологию. Например, «абракадабра: новый абзац» будет обозначать, что дальнейший текст следует набирать со следующего абзаца.
В случае с HTML в качестве подобных ключевых слов выступают теги, они как раз и определяют действия, которые необходимо совершить с текстом. Поэтому теги еще называются элементами разметки. Например, <B>текст</B> означает, что текст, находящийся между ключевыми словами <B> и </B> должен отображаться жирным начертанием. Аналогично с помощью тегов создаются списки, таблицы, добавляются изображения и другие элементы веб-страницы.
Для элементов разметки существуют правила их использования, которые установлены спецификацией HTML. Этот документ регламентирует порядок применения тегов, их вложенность и принцип работы. Знание спецификации и ее соблюдение помогает избежать типичных ошибок и позволяет создать универсальный код, одинаково хорошо работающий на различных устройствах и в разных браузерах.
Браузеры
Сам HTML-файл обычно размещается на сервере и для его просмотра необходима специальная программа — браузер, например, Mozilla Firefox. В задачу браузера входит подключение к удаленному серверу, получение кода HTML и его интерпретация согласно спецификации. Иными словами, браузер преобразует HTML-документ в веб-страницу, которую мы и наблюдаем, когда «ходим» по Интернету. Заметим также, что браузер вполне корректно работает и на локальном компьютере, это позволяет легко проверять работу HTML-документов.
Как построить свой сайт? (мануал для новичков)
4.96K
Koenig
20 окт 2011 г., 22:22
(\/)____o_O____(\/)
Koenig
20 окт 2011 г., 22:23
(\/)____o_O____(\/)
Быстрый старт
Чтобы сразу же ввести в курс дела нетерпеливых читателей, предложим им возможность создания веб-страницы без последовательного изучения правил HTML. По крайней мере, вы сумеете убедиться, что создание веб-страниц достаточно простая штука.
В листинге 1.1 приведен несложный пример такого кода.
Чтобы посмотреть результат листинга в действии, проделайте следующие шаги.
1. В Windows откройте программу Блокнот (Пуск > Выполнить > набрать "notepad" или Пуск > Программы > Стандартные > Блокнот).
2. Наберите или скопируйте код в Блокноте (рис. 1.1).
3. Сохраните готовый документ (Файл > Сохранить как...) под именем c:\www\example11.html, при этом обязательно поставьте в диалоговом окне сохранения тип файла: Все файлы. Обратите внимание, что расширение у файла должно быть именно html.
4. Запустите браузер Internet Explorer (Пуск > Выполнить > набрать "iexplore" или Пуск > Программы > Internet Explorer).
5. В браузере выберите пункт меню Файл > Открыть и укажите путь к вашему файлу.
6. Если все сделано правильно, то в браузере вы увидите результат
В случае возникновения каких-либо ошибок проверьте правильность набора кода согласно листингу 1.1, расширение файла (должно быть html) и путь к документу.
Чтобы сразу же ввести в курс дела нетерпеливых читателей, предложим им возможность создания веб-страницы без последовательного изучения правил HTML. По крайней мере, вы сумеете убедиться, что создание веб-страниц достаточно простая штука.
В листинге 1.1 приведен несложный пример такого кода.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Моя первая веб-страница</title>
</head>
<body>
<h1>Заголовок страницы</h1>
<p>Основной текст.</p>
</body>
</html>Чтобы посмотреть результат листинга в действии, проделайте следующие шаги.
1. В Windows откройте программу Блокнот (Пуск > Выполнить > набрать "notepad" или Пуск > Программы > Стандартные > Блокнот).
2. Наберите или скопируйте код в Блокноте (рис. 1.1).
3. Сохраните готовый документ (Файл > Сохранить как...) под именем c:\www\example11.html, при этом обязательно поставьте в диалоговом окне сохранения тип файла: Все файлы. Обратите внимание, что расширение у файла должно быть именно html.
4. Запустите браузер Internet Explorer (Пуск > Выполнить > набрать "iexplore" или Пуск > Программы > Internet Explorer).
5. В браузере выберите пункт меню Файл > Открыть и укажите путь к вашему файлу.
6. Если все сделано правильно, то в браузере вы увидите результат
В случае возникновения каких-либо ошибок проверьте правильность набора кода согласно листингу 1.1, расширение файла (должно быть html) и путь к документу.
Koenig
20 окт 2011 г., 22:23
(\/)____o_O____(\/)
2. Инструментарий
Для эффективной работы не обойтись без необходимых и привычных инструментов, в том числе и при написании кода HTML. Поэтому для начальной разработки веб-страниц или даже небольшого сайта — так называется набор страниц, связанных между собой ссылками и единым оформлением, нам понадобятся следующие программы.
Текстовый редактор.
Браузер для просмотра результатов.
Валидатор — программа для проверки синтаксиса HTML и выявления ошибок в коде.
Графический редактор.
Справочник по тегам HTML.
Далее рассмотрим эти инструменты подробнее.
Текстовый редактор
HTML-документ можно создавать в любом текстовом редакторе, хоть Блокноте, тем не менее, для этой цели подойдет не всякая программа. Нужна такая, чтобы поддерживала следующие возможности:
подсветка синтаксиса — выделение тегов, текста, ключевых слов и параметров разными цветами. Это облегчает поиск нужного элемента, ускоряет работу разработчика и снижает возникновение ошибок;
работа с вкладками. Сайт представляет собой набор файлов, которые приходится править по отдельности, для чего нужен редактор, умеющий одновременно работать сразу с несколькими документами. При этом файлы удобно открывать в отдельных вкладках, чтобы быстро переходить к нужному документу;
проверка текущего документа на ошибки.
Ссылки на некоторые подобные редакторы приведены ниже.
PSPad
http://www.pspad.com/ru/download.php
HtmlReader
http://htmlreader.codeby.net
Notepad++
http://notepad-plus.sourceforg ... e.htm
EditPlus
http://www.editplus.com
Браузер
Браузер это программа, предназначенная для просмотра веб-страниц. На первых порах подойдет любой браузер, но с повышением опыта и знаний потребуется завести целый «зверинец», чтобы проверять правильность отображения сайта в разных браузерах. Дело в том, что каждый браузер имеет свои уникальные особенности, поэтому для проверки универсальности кода требуется просматривать и корректировать код с их учетом. На сегодняшний день наибольшей популярностью пользуются три браузера: Firefox, Internet Explorer и Opera.
Mozilla Firefox
Перспективный и развивающийся браузер, получивший признание во всем мире. Его особенность — простота и расширяемость, которая получается за счет специальных расширений, как они называются. Изначально Firefox имеет набор только самых необходимых функций, но, устанавливая желаемые расширения, в итоге можно нарастить браузер до системы, выполняющей все необходимые для вашей работы действия.
Браузер Firefox является открытой системой, разрабатываемый группой Mozilla.
Где скачать
http://www.mozilla.ru/products/firefox/
Microsoft Internet Explorer (IE)
Один из старейших браузеров, который бесплатно поставляется вместе с операционной системой Windows. Это и определило его популярность. Последняя версия IE 7 по удобству приблизилась к своим давним конкурентам, в частности, появились вкладки. К сожалению, этот браузер хуже всех поддерживает спецификацию HTML, поэтому для корректного отображения в IE приходится порой отдельно отлаживать код специально под него.
Где скачать
http://www.microsoft.com/rus/w ... .mspx
Opera
Быстрый и удобный браузер, поддерживающий множество дополнительных возможностей, повышающих комфортность работы с сайтами.
Где скачать
http://ru.opera.com/download/
Валидатор
Валидация HTML-документа предназначена для выявления ошибок в синтаксисе веб-страницы и расхождений со спецификацией HTML. Соответственно, программа или система для такой проверки называется валидатором.
Как проверить HTML-файл на валидность
Если есть доступ в Интернет, то следует зайти по адресу http://validator.w3.org и ввести путь к проверяемому документу или сайту в специальной форме. После проверки будут показаны возможные ошибки или появится надпись, что документ прошел валидацию успешно.
Tidy
Для проверки локального HTML-файла или при отсутствии подключения к Интернету, предназначена программа Tidy. Некоторые редакторы, например, PSPad, уже содержат встроенный Tidy и валидацию документа можно провести без дополнительных средств.
Где скачать
http://tidy.sourceforge.net
Графический редактор
Графический редактор необходим для обработки изображений и их подготовки для публикации на веб-странице. Самой популярной программой такого рода является Photoshop, ставший стандартом для обработки фотографий и создания графических изображений для сайтов. Но в большинстве случаев мощь Photoshop-а избыточна, и лучше воспользоваться чем-нибудь более простым и проворным. В частности, программа Paint.Net позволяет сделать все необходимые манипуляции с изображениями, вдобавок бесплатна для использования.
Скачать Paint.Net
http://www.getpaint.net/download.html
Справочник по тегам HTML
Запоминать все теги и их параметры наизусть на первых порах сложно, поэтому требуется периодически заглядывать в руководство, чтобы уточнить тот или иной вопрос. Вообще, хороший справочник нужен всем, независимо от уровня подготовки.
Справочники в Интернете
Описание тегов HTML (на английском языке)
http://www.w3.org/TR/html4/ind ... .html
Список атрибутов тегов (на английском языке)
http://www.w3.org/TR/html4/ind ... .html
Справочник по HTML Брайана Уильямса (на английском языке)
http://www.blooberry.com/indexdot/
Справочник по HTML на сайте htmlbook.ru
http://htmlbook.ru/html/
Локальный справочник
Удобный справочник в формате CHM (стандартный файл справки Windows) содержит список всех основных тегов с их описанием и примерами использования.
http://htmlbook.ru/download/html.zip
Для эффективной работы не обойтись без необходимых и привычных инструментов, в том числе и при написании кода HTML. Поэтому для начальной разработки веб-страниц или даже небольшого сайта — так называется набор страниц, связанных между собой ссылками и единым оформлением, нам понадобятся следующие программы.
Текстовый редактор.
Браузер для просмотра результатов.
Валидатор — программа для проверки синтаксиса HTML и выявления ошибок в коде.
Графический редактор.
Справочник по тегам HTML.
Далее рассмотрим эти инструменты подробнее.
Текстовый редактор
HTML-документ можно создавать в любом текстовом редакторе, хоть Блокноте, тем не менее, для этой цели подойдет не всякая программа. Нужна такая, чтобы поддерживала следующие возможности:
подсветка синтаксиса — выделение тегов, текста, ключевых слов и параметров разными цветами. Это облегчает поиск нужного элемента, ускоряет работу разработчика и снижает возникновение ошибок;
работа с вкладками. Сайт представляет собой набор файлов, которые приходится править по отдельности, для чего нужен редактор, умеющий одновременно работать сразу с несколькими документами. При этом файлы удобно открывать в отдельных вкладках, чтобы быстро переходить к нужному документу;
проверка текущего документа на ошибки.
Ссылки на некоторые подобные редакторы приведены ниже.
PSPad
http://www.pspad.com/ru/download.php
HtmlReader
http://htmlreader.codeby.net
Notepad++
http://notepad-plus.sourceforg ... e.htm
EditPlus
http://www.editplus.com
Браузер
Браузер это программа, предназначенная для просмотра веб-страниц. На первых порах подойдет любой браузер, но с повышением опыта и знаний потребуется завести целый «зверинец», чтобы проверять правильность отображения сайта в разных браузерах. Дело в том, что каждый браузер имеет свои уникальные особенности, поэтому для проверки универсальности кода требуется просматривать и корректировать код с их учетом. На сегодняшний день наибольшей популярностью пользуются три браузера: Firefox, Internet Explorer и Opera.
Mozilla Firefox
Перспективный и развивающийся браузер, получивший признание во всем мире. Его особенность — простота и расширяемость, которая получается за счет специальных расширений, как они называются. Изначально Firefox имеет набор только самых необходимых функций, но, устанавливая желаемые расширения, в итоге можно нарастить браузер до системы, выполняющей все необходимые для вашей работы действия.
Браузер Firefox является открытой системой, разрабатываемый группой Mozilla.
Где скачать
http://www.mozilla.ru/products/firefox/
Microsoft Internet Explorer (IE)
Один из старейших браузеров, который бесплатно поставляется вместе с операционной системой Windows. Это и определило его популярность. Последняя версия IE 7 по удобству приблизилась к своим давним конкурентам, в частности, появились вкладки. К сожалению, этот браузер хуже всех поддерживает спецификацию HTML, поэтому для корректного отображения в IE приходится порой отдельно отлаживать код специально под него.
Где скачать
http://www.microsoft.com/rus/w ... .mspx
Opera
Быстрый и удобный браузер, поддерживающий множество дополнительных возможностей, повышающих комфортность работы с сайтами.
Где скачать
http://ru.opera.com/download/
Валидатор
Валидация HTML-документа предназначена для выявления ошибок в синтаксисе веб-страницы и расхождений со спецификацией HTML. Соответственно, программа или система для такой проверки называется валидатором.
Как проверить HTML-файл на валидность
Если есть доступ в Интернет, то следует зайти по адресу http://validator.w3.org и ввести путь к проверяемому документу или сайту в специальной форме. После проверки будут показаны возможные ошибки или появится надпись, что документ прошел валидацию успешно.
Tidy
Для проверки локального HTML-файла или при отсутствии подключения к Интернету, предназначена программа Tidy. Некоторые редакторы, например, PSPad, уже содержат встроенный Tidy и валидацию документа можно провести без дополнительных средств.
Где скачать
http://tidy.sourceforge.net
Графический редактор
Графический редактор необходим для обработки изображений и их подготовки для публикации на веб-странице. Самой популярной программой такого рода является Photoshop, ставший стандартом для обработки фотографий и создания графических изображений для сайтов. Но в большинстве случаев мощь Photoshop-а избыточна, и лучше воспользоваться чем-нибудь более простым и проворным. В частности, программа Paint.Net позволяет сделать все необходимые манипуляции с изображениями, вдобавок бесплатна для использования.
Скачать Paint.Net
http://www.getpaint.net/download.html
Справочник по тегам HTML
Запоминать все теги и их параметры наизусть на первых порах сложно, поэтому требуется периодически заглядывать в руководство, чтобы уточнить тот или иной вопрос. Вообще, хороший справочник нужен всем, независимо от уровня подготовки.
Справочники в Интернете
Описание тегов HTML (на английском языке)
http://www.w3.org/TR/html4/ind ... .html
Список атрибутов тегов (на английском языке)
http://www.w3.org/TR/html4/ind ... .html
Справочник по HTML Брайана Уильямса (на английском языке)
http://www.blooberry.com/indexdot/
Справочник по HTML на сайте htmlbook.ru
http://htmlbook.ru/html/
Локальный справочник
Удобный справочник в формате CHM (стандартный файл справки Windows) содержит список всех основных тегов с их описанием и примерами использования.
http://htmlbook.ru/download/html.zip
Koenig
20 окт 2011 г., 22:24
(\/)____o_O____(\/)
3. Теги
Чтобы браузер при отображении документа понимал, что имеет дело не с простым текстом, а с элементом форматирования и применяются теги. Общий синтаксис написания тегов следующий.
<тег параметр1="значение" параметр2="значение">
<тег параметр1="значение" параметр2="значение">...</тег>
Как видно из данного примера, теги бывают двух типов — одиночные и парные (контейнеры). Одиночный тег используется самостоятельно, а парный может включать внутри себя другие теги или текст. У тегов допустимы различные параметры, которые разделяются между собой пробелом. Впрочем, есть теги, без всяких дополнительных атрибутов. Параметры условно можно подразделить на обязательные, они непременно должны присутствовать, и необязательные, их добавление зависит от цели применения тега.
В листинге 3.1 показан типичный HTML-документ с тегами и текстом.
В данном примере используется одиночный тег <META>, а парных тегов сразу несколько: <HTML>, <HEAD>, <TITLE>, <BODY> и <P>.
Парные теги
Парные теги, называемые по-другому контейнеры, состоят из двух частей — открывающий и закрывающий тег. Открывающий тег обозначается как и одиночный — <тег>, а в закрывающем используется слэш — </тег>. Допускается вкладывать в контейнер другие теги, однако следует соблюдать их порядок. Так, на примере демонстрируется, как можно и нельзя добавлять один контейнер внутрь другого.
1. <div><p>Lorem <b>ipsum dolor</b> sit amet...</p></div>
2. <div><p>Lorem <b>ipsum <i>dolor</b> sit</i> amet...</p></div>
Если связать открывающий и закрывающий тег между собой скобкой, как показано примере, то несколько скобок обозначающих разные контейнеры, не должны пересекаться между собой (1). Любое пересечение условных скобок (2) говорит о том, что правильная последовательность тегов нарушена.
Не все контейнеры требуют обязательно закрывающего тега, иногда его можно и опустить. Тем не менее, всегда закрывайте все требуемые теги, так вы приучитесь сводить к нулю возможные ошибки.
Чтобы браузер при отображении документа понимал, что имеет дело не с простым текстом, а с элементом форматирования и применяются теги. Общий синтаксис написания тегов следующий.
<тег параметр1="значение" параметр2="значение">
<тег параметр1="значение" параметр2="значение">...</тег>
Как видно из данного примера, теги бывают двух типов — одиночные и парные (контейнеры). Одиночный тег используется самостоятельно, а парный может включать внутри себя другие теги или текст. У тегов допустимы различные параметры, которые разделяются между собой пробелом. Впрочем, есть теги, без всяких дополнительных атрибутов. Параметры условно можно подразделить на обязательные, они непременно должны присутствовать, и необязательные, их добавление зависит от цели применения тега.
В листинге 3.1 показан типичный HTML-документ с тегами и текстом.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Lorem ipsum</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetuer cursus pede pellentesque vitae pretium. Tristique mus at elit lobortis libero Sed vestibulum ut eleifend habitasse. Quis Nam Mauris adipiscing Integer ligula dictum sed at enim urna. Et scelerisque id et nibh dui tincidunt Curabitur faucibus elit massa. Tincidunt et gravida Phasellus eget parturient faucibus tellus at justo sollicitudin. Mi nulla ut adipiscing.</p>
</body>
</html>В данном примере используется одиночный тег <META>, а парных тегов сразу несколько: <HTML>, <HEAD>, <TITLE>, <BODY> и <P>.
Парные теги
Парные теги, называемые по-другому контейнеры, состоят из двух частей — открывающий и закрывающий тег. Открывающий тег обозначается как и одиночный — <тег>, а в закрывающем используется слэш — </тег>. Допускается вкладывать в контейнер другие теги, однако следует соблюдать их порядок. Так, на примере демонстрируется, как можно и нельзя добавлять один контейнер внутрь другого.
1. <div><p>Lorem <b>ipsum dolor</b> sit amet...</p></div>
2. <div><p>Lorem <b>ipsum <i>dolor</b> sit</i> amet...</p></div>
Если связать открывающий и закрывающий тег между собой скобкой, как показано примере, то несколько скобок обозначающих разные контейнеры, не должны пересекаться между собой (1). Любое пересечение условных скобок (2) говорит о том, что правильная последовательность тегов нарушена.
Не все контейнеры требуют обязательно закрывающего тега, иногда его можно и опустить. Тем не менее, всегда закрывайте все требуемые теги, так вы приучитесь сводить к нулю возможные ошибки.
Koenig
20 окт 2011 г., 22:24
(\/)____o_O____(\/)
Правила применения тегов
Для тегов любого типа действуют определенные правила их использования. Причем, некоторые правила обязательны для выполнения, а другие являются рекомендациями, т.е. их можно выполнять, а можно и нет.
Параметры тегов и кавычки
Согласно спецификации HTML все значения параметров тегов следует указывать в двойных ("пример") или одинарных кавычках ('пример'). Отсутствие кавычек не приведет к ошибкам, браузеры достаточно корректно обрабатывают код и без кавычек, за исключением текста, содержащего пробелы (листинг 3.2).
В данном примере строка 8 написана правильно, со всеми кавычками, а в строке 9 у параметра alt кавычки отсутствуют. Из-за этого браузер в качестве значения параметра alt возьмет только первое слово ("Вид"), а слово "заголовка" будет воспринято как ошибочный аргумент. Поэтому всегда приучайтесь указывать параметры тегов в кавычках.
Теги можно писать как прописными, так и строчными символами
Любые теги, а также их параметры нечувствительны к регистру, поэтому форму записи вы вольны выбирать сами, как писать — <BR>, <Br> или <br>. В любом случае рекомендуется придерживаться выбранной формы записи на протяжении всех страниц сайта. Заметим также, что текст, полностью набранный прописными символами, читается хуже, чем текст со строчными символами или смешанный.
В дальнейшем при упоминании в тексте тегов, для их акцентирования будем их писать преимущественно заглавными буквами, а в коде применять только строчные символы.
Переносы строк
Внутри тега между его параметрами допустимо ставить перенос строк. В листинге 3.3 показана одна и та же строка, но оформленная разными способами.
В данном примере первый тег <IMG> набран в одну строку, включая все его параметры, а второй тег <IMG> разбит на несколько строк.
Замечание
Хотя ошибки при переносе текста в подобном случае и не возникнет, рекомендуем писать теги в одну строку, иначе ухудшается восприятие кода и его становится сложнее править.
Неизвестные теги и параметры
Если какой-либо тег или его параметр был написан неверно, то браузер проигнорирует подобный тег и будет отображать текст так, словно тега и не было. Опять же, следует избегать неизвестных тегов, поскольку код HTML не пройдет валидацию.
Порядок тегов
Существует определенная иерархия вложенности тегов. Например, тег <TITLE> должен находиться внутри контейнера <HEAD> и нигде иначе. Чтобы не возникло ошибки, следите за тем, чтобы теги располагались в коде правильно.
Если теги между собой равноценны в иерархии связи, то их последовательность не имеет значения. Так, можно поменять местами теги <TITLE> и <META>, на конечный результат это никак не скажется.
Закрывайте все теги
Существует три состояния закрывающего тега: обязателен, не требуется или не обязателен. Обязательный закрывающий тег должен присутствовать всегда, иначе это приведет к ошибке при отображении документа. Для некоторых тегов вроде <BR> закрывающего тега нет в принципе. Необязательный закрывающий тег говорит о том, что разработчик может его как добавить, так и опустить, к ошибке это не приведет. Однако рекомендуем закрывать все подобные теги, включая необязательные, это дисциплинирует, создает более стройный и строгий код, который легко модифицировать.
Для тегов любого типа действуют определенные правила их использования. Причем, некоторые правила обязательны для выполнения, а другие являются рекомендациями, т.е. их можно выполнять, а можно и нет.
Параметры тегов и кавычки
Согласно спецификации HTML все значения параметров тегов следует указывать в двойных ("пример") или одинарных кавычках ('пример'). Отсутствие кавычек не приведет к ошибкам, браузеры достаточно корректно обрабатывают код и без кавычек, за исключением текста, содержащего пробелы (листинг 3.2).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Кавычки в параметре alt</title>
</head>
<body>
<p><img src="/images/title.gif" alt="Вид заголовка" width="438" height="118"></p>
<p><img src="/images/title.gif" alt=Вид заголовка width="438" height="118"></p>
</body>
</html>В данном примере строка 8 написана правильно, со всеми кавычками, а в строке 9 у параметра alt кавычки отсутствуют. Из-за этого браузер в качестве значения параметра alt возьмет только первое слово ("Вид"), а слово "заголовка" будет воспринято как ошибочный аргумент. Поэтому всегда приучайтесь указывать параметры тегов в кавычках.
Теги можно писать как прописными, так и строчными символами
Любые теги, а также их параметры нечувствительны к регистру, поэтому форму записи вы вольны выбирать сами, как писать — <BR>, <Br> или <br>. В любом случае рекомендуется придерживаться выбранной формы записи на протяжении всех страниц сайта. Заметим также, что текст, полностью набранный прописными символами, читается хуже, чем текст со строчными символами или смешанный.
В дальнейшем при упоминании в тексте тегов, для их акцентирования будем их писать преимущественно заглавными буквами, а в коде применять только строчные символы.
Переносы строк
Внутри тега между его параметрами допустимо ставить перенос строк. В листинге 3.3 показана одна и та же строка, но оформленная разными способами.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Кавычки в параметре alt</title>
</head>
<body>
<p><img src="/images/title2.gif" alt="Вид заголовка в браузере Internet Explorer" width="438" height="118"></p>
<p><img src="/images/title2.gif"
alt="Вид заголовка в браузере Internet Explorer"
width="438"
height="118"></p>
</body>
</html>В данном примере первый тег <IMG> набран в одну строку, включая все его параметры, а второй тег <IMG> разбит на несколько строк.
Замечание
Хотя ошибки при переносе текста в подобном случае и не возникнет, рекомендуем писать теги в одну строку, иначе ухудшается восприятие кода и его становится сложнее править.
Неизвестные теги и параметры
Если какой-либо тег или его параметр был написан неверно, то браузер проигнорирует подобный тег и будет отображать текст так, словно тега и не было. Опять же, следует избегать неизвестных тегов, поскольку код HTML не пройдет валидацию.
Порядок тегов
Существует определенная иерархия вложенности тегов. Например, тег <TITLE> должен находиться внутри контейнера <HEAD> и нигде иначе. Чтобы не возникло ошибки, следите за тем, чтобы теги располагались в коде правильно.
Если теги между собой равноценны в иерархии связи, то их последовательность не имеет значения. Так, можно поменять местами теги <TITLE> и <META>, на конечный результат это никак не скажется.
Закрывайте все теги
Существует три состояния закрывающего тега: обязателен, не требуется или не обязателен. Обязательный закрывающий тег должен присутствовать всегда, иначе это приведет к ошибке при отображении документа. Для некоторых тегов вроде <BR> закрывающего тега нет в принципе. Необязательный закрывающий тег говорит о том, что разработчик может его как добавить, так и опустить, к ошибке это не приведет. Однако рекомендуем закрывать все подобные теги, включая необязательные, это дисциплинирует, создает более стройный и строгий код, который легко модифицировать.
Koenig
20 окт 2011 г., 22:24
(\/)____o_O____(\/)
Значения параметров тегов
Для параметров тегов используются значения по умолчанию
Когда для тега не добавлен какой-либо допустимый параметр, это означает, что браузер в этом случае будет подставлять значение, заданное по умолчанию. Если вы ожидали получить иной результат на веб-странице, проверьте, возможно, следует явно указать значения некоторых параметров.
Параметры без значений
Допустимо использовать некоторые параметры у тегов, не присваивая им никакого значения, как показано в листинге 3.4.
В данном примере используется параметр disable, у которого явно не задано значение. Подобная запись называется «сокращенный атрибут тега».
Порядок параметров в тегах
Порядок параметров в любом теге не имеет значения и на результат отображения элемента не влияет. Поэтому теги вида <img src="/images/title.gif" width="438" height="118"> и <img height="118" width="438" src="/images/title.gif"> по своему действию равны.
Формат параметров
Каждый параметр тега относится к определенному типу (например: текст, число, путь к файлу и др.), который обязательно должен учитываться при написании параметра. Так, в листинге 3.3 упоминается тег <IMG>, он добавляет на веб-страницу рисунок, а его параметр width задает ширину изображения в пикселах. Если поставить не число, а нечто другое, то аргумент будет проигнорирован и возникнет ошибка при валидации документа.
Для параметров тегов используются значения по умолчанию
Когда для тега не добавлен какой-либо допустимый параметр, это означает, что браузер в этом случае будет подставлять значение, заданное по умолчанию. Если вы ожидали получить иной результат на веб-странице, проверьте, возможно, следует явно указать значения некоторых параметров.
Параметры без значений
Допустимо использовать некоторые параметры у тегов, не присваивая им никакого значения, как показано в листинге 3.4.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Добавление формы</title>
</head>
<body>
<form action="self.php">
<p><input type="text"></p>
<p><input type="submit" disabled></p>
</form>
</body>
</html>В данном примере используется параметр disable, у которого явно не задано значение. Подобная запись называется «сокращенный атрибут тега».
Порядок параметров в тегах
Порядок параметров в любом теге не имеет значения и на результат отображения элемента не влияет. Поэтому теги вида <img src="/images/title.gif" width="438" height="118"> и <img height="118" width="438" src="/images/title.gif"> по своему действию равны.
Формат параметров
Каждый параметр тега относится к определенному типу (например: текст, число, путь к файлу и др.), который обязательно должен учитываться при написании параметра. Так, в листинге 3.3 упоминается тег <IMG>, он добавляет на веб-страницу рисунок, а его параметр width задает ширину изображения в пикселах. Если поставить не число, а нечто другое, то аргумент будет проигнорирован и возникнет ошибка при валидации документа.
Koenig
20 окт 2011 г., 22:25
(\/)____o_O____(\/)
4. Структура HTML-кода
Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы, которые не меняются от вида и направленности сайта. В листинге 4.1 показан код простого документа, содержащего основные теги.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример веб-страницы</title>
</head>
<body>
<h1>Заголовок</h1>
<!-- Комментарий -->
<p>Первый абзац.</p>
<p>Второй абзац.</p>
</body>
</html>Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example41.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O). В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница
Далее разберем отдельные строки нашего кода
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер "не путался" и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.
Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии HTML, на которую ориентированы
Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения спецификации HTML и не прощает ошибок. Переходный HTML более «спокойно» относится к некоторым огрехам кода, поэтому этот тип в определенных случаях использовать предпочтительнее.
Например, в строгом HTML и XHTML непременно требуется наличие тега <TITLE>, а в переходном HTML его можно опустить и не указывать. При этом помним, что браузер в любом случае покажет документ, независимо от того, соответствует он синтаксису или нет. Подобная проверка осуществляется при помощи валидатора и предназначена в первую очередь для разработчиков, чтобы отслеживать ошибки в документе.
В дальнейшем будем применять преимущественно строгий <!DOCTYPE>, кроме случаев, когда это оговаривается особо. Это позволит нам избегать типичных ошибок и приучит к написанию синтаксически правильного кода.
Замечание
Часто можно встретить код HTML вообще без использования <!DOCTYPE>, веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается в браузере по-разному при использовании <!DOCTYPE> и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется», т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы не произошло подобных ситуаций, всегда добавляйте <!DOCTYPE> в начало документа.
<html>
Тег <HTML> определяет начало HTML-файла, внутри него хранится заголовок (<HEAD>) и тело документа (<BODY>).
<head>
Заголовок документа, как еще называют блок <HEAD>, может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице, за исключением контейнера <TITLE>.
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
Тег <META> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой «Кириллица (Windows)» и добавляется данная строка.
<title>Пример веб-страницы</title>
Тег <TITLE> определяет заголовок веб-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера
Замечание
Тег <TITLE> является обязательным и должен непременно присутствовать в коде документа.
</head>
Обязательно следует добавлять закрывающий тег </HEAD>, чтобы показать, что блок заголовка документа завершен.
<body>
Тело документа <BODY> предназначено для размещения тегов и содержательной части веб-страницы.
<h1>Заголовок</h1>
HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <H1> представляет собой наиболее важный заголовок первого уровня, а тег <H6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <H1>...<H6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.
<!-- Комментарий -->
Некоторый текст можно спрятать от показа в браузере, сделав его комментарием. Хотя такой текст пользователь не увидит, он все равно будет передаваться в документе, так что, посмотрев исходный код, можно обнаружить скрытые заметки.
Комментарии нужны для внесения в код своих записей, не влияющих на вид страницы. Начинаются они тегом <!-- и заканчиваются тегом -->. Все, что находится между этими тегами отображаться на веб-странице не будет.
>Первый абзац.</p>
Тег <P> определяет абзац (параграф) текста. Если закрывающего тега нет, считается, что конец параграфа совпадает с началом следующего блочного элемента.
<p>Второй абзац.</p>
Тег <P> является блочным элементом, поэтому текст всегда начинается с новой строки, параграфы текста идущие друг за другом разделяются между собой вертикальным промежутком.
</body>
Следует добавить закрывающий тег </BODY>, чтобы показать, что тело документа завершено.
</html>
Последним элементом в коде всегда идет закрывающий тег </HTML>.
Koenig
20 окт 2011 г., 22:29
(\/)____o_O____(\/)
5. Типы тегов
Каждый тег HTML принадлежит к определенной группе тегов, например, табличные теги направлены на формирование таблиц и не могут применяться для других целей.
Условно теги делятся на следующие типы:
теги верхнего уровня;
теги заголовка документа;
блочные элементы;
встроенные элементы;
универсальные элементы;
списки;
таблицы.
Следует учитывать, что один и тот же тег может одновременно принадлежать разным группам, например, теги <OL> и <UL> относятся к категории списков, но также являются и блочными элементами.
Далее рассмотрим только те теги, которые потребуются нам в дальнейшей работе.
Теги верхнего уровня
Эти теги предназначены для формирования структуры веб-страницы и определяют раздел заголовка и тела документа.
<HTML>
Тег <HTML> является контейнером, который заключает в себе всё содержимое веб-страницы, включая теги <HEAD> и <BODY>. Открывающий и закрывающий теги <HTML> в документе необязательны, но хороший стиль диктует непременное их использование.
<HEAD>
Тег <HEAD> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри контейнера <HEAD> находятся метатеги, которые используются для хранения информации, предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.
<BODY>
Элемент <BODY> предназначен для хранения содержания веб-страницы, отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <BODY>. К такой информации относится текст, изображения, таблицы, списки и др.
Набор тегов верхнего уровня и порядок их вложения показан в листинге 5.1.
В данном примере показано, что контейнер <HTML> определяет «каркас» всей веб-страницы, внутри него вначале задается тег <HEAD>, затем идет контейнер <BODY>, в нем хранится содержательная часть документа, которая и отображается в браузере. Теги <HTML> и <BODY> хотя и не относятся к обязательным тегам (т. е. их можно не размещать в коде), все же стоит добавлять всегда. Это позволяет получить четкую и понятную структуру документа.
Заметьте, что в листинге не упоминается <!DOCTYPE>, поскольку этот обязательный элемент кода веб-страницы не является тегом, а предназначен для браузеров, чтобы сообщить им, как интерпретировать текущий документ.
Теги заголовка документа
К этим тегам относятся элементы, которые располагаются в контейнере <HEAD>. Все эти теги напрямую не отображаются в окне браузера, за исключением тега <TITLE>, который определяет название веб-страницы.
<TITLE>
Используется для отображения строки текста в левом верхнем углу окна браузера. Такая строка сообщает пользователю название сайта и другую информацию, которую добавляет разработчик.
<META>
Метатеги используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Хотя тег <META> всего один, он имеет массу параметров, поэтому к нему и применяется множественное число.
Так, для краткого описания содержимого веб-страницы используется значение description параметра name, как показано в листинге 5.2.
Описание сайта, заданное с помощью тега <META> и параметра description, обычно отображается в поисковых системах или каталогах при выводе результатов поиска. Значение keywords также предназначено в первую очередь для повышения рейтинга сайта в поисковых системах. В качестве аргумента перечисляются ключевые слова, встречаемые на веб-странице (листинг 5.3).
Ключевые слова можно перечислять через пробел или запятую. Поисковые системы сами приведут запись к виду, который они используют.
Блочные элементы
Блочные элементы характеризуются тем, что занимают всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки.
<BLOCKQUOTE>
Предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с пустым пространством сверху и снизу.
<DIV>
Тег <DIV> относится к универсальным блочным контейнерам и применяется в тех случаях, где нужны блочные элементы без дополнительных свойств. Также с помощью тега <DIV> можно выравнивать текст внутри этого контейнера с помощью параметра align.
<H1>...<H6>
Эта группа тегов определяет текстовые заголовки разного уровня, которые показывают относительную важность секции, расположенной после заголовка.
<HR>
Рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера. Линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке.
<P>
Определяет параграф (абзац) текста.
<PRE>
Задает блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. В HTML любое количество пробелов идущих в коде подряд на веб-странице показывается как один. Тег <PRE> позволяет обойти эту особенность и отображать текст как требуется разработчику.
Следующие теги не должны размещаться внутри контейнера <PRE>: <BIG>, <IMG>, <SMALL>, <SUB> и <SUP>.
Встроенные элементы
Встроенными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. В основном они используются для изменения вида текста или его логического выделения.
<A>
Тег <A> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия параметров name или href тег <A> устанавливает ссылку или якорь.
<B>
Определяет жирное начертание шрифта.
<BIG>
Тег <BIG> увеличивает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега <BIG> увеличивает текст на одну условную единицу.
<BR>
Тег <BR> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа <P>, использование тега <BR> не добавляет пустой отступ перед строкой.
<EM>
Тег <EM> предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.
<I>
Устанавливает курсивное начертание шрифта.
<IMG>
Тег <IMG> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <IMG> в контейнер <A>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив параметр border="0" в тег <IMG>.
<SMALL>
Тег <SMALL> уменьшает размер шрифта на единицу по сравнению с обычным текстом. По своему действию похож на тег <BIG>, но действует с точностью до наоборот.
<SPAN>
Универсальный тег, предназначенный для определения встроенного элемента внутри документа.
<STRONG>
Тег <STRONG> предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.
<SUB>
Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера — H2O.
<SUP>
Отображает шрифт в виде верхнего индекса. По своему действию похож на <SUB>, но текст отображается выше базовой линии текста — м2.
Разница между блочными и встроенными элементами следующая.
Встроенные элементы могут содержать только данные или другие встроенные элементы, а в блочные допустимо вкладывать другие блочные элементы, встроенные элементы, а также данные. Иными словами, встроенные элементы никак не могут хранить блочные элементы.
Блочные элементы всегда начинаются с новой строки, а встроенные таким способом не акцентируются.
Блочные элементы занимают всю доступную ширину, например, окна браузера, а ширина встроенных элементов равна их содержимому плюс значения отступов, полей и границ.
Универсальные элементы
Особенность этих тегов состоит в том, что они в зависимости от контекста могут использоваться как блочные или встроенные элементы.
<DEL>
Тег <DEL> используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны. Браузеры обычно помечают текст в контейнере <DEL> как перечеркнутый.
<INS>
Тег <INS> предназначен для акцентирования вновь добавленного текста и обычно применяется наряду с тегом <DEL>. Браузеры помечают содержимое контейнера <INS> подчеркиванием текста.
Списки
Списком называется взаимосвязанный набор отдельных фраз или предложений, которые начинаются с маркера или цифры. Списки предоставляют возможность упорядочить и систематизировать разные данные и представить их в наглядном и удобном для пользователя виде.
<OL>
Тег <OL> устанавливает нумерованный список, т.е. каждый элемент списка начинается с числа или буквы и увеличивается по нарастающей.
<UL>
Устанавливает маркированный список, каждый элемент которого начинается с небольшого символа — маркера.
<LI>
Тег <LI> определяет отдельный элемент списка. Внешний тег <UL> или <OL> устанавливает тип списка — маркированный или нумерованный.
<DD>, <DT>, <DL>
Тройка элементов предназначена для создания списка определений. Каждый такой список начинается с контейнера <DL>, куда входит тег <DT> создающий термин и тег <DD> задающий определение этого термина. Закрывающий тег </DD> не обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента. Тем не менее, хорошим стилем является закрывать все теги.
Таблицы
Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления табличных данных.
<TABLE>
Служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <TR> и <TD>.
<TD>
Предназначен для создания одной ячейки таблицы. Тег <TD> должен размещаться внутри контейнера <TR>, который в свою очередь располагается внутри тега <TABLE>.
<TH>
Тег <TH> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру.
<TR>
Тег <TR> служит контейнером для создания строки таблицы.
Фреймы
Фреймы разделяют окно браузера на отдельные области, расположенные вплотную друг к другу. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью тега <FRAME>. С помощью фреймов веб-страница делится на два или более документа, которые обычно содержат навигацию по сайту и его контент. Механизм фреймов позволяет открывать документ в одном фрейме, по ссылке, нажатой в совершенно другом фрейме. Допустимо также использовать вложенную структуру элементов, это позволяет дробить фреймы на более мелки области.
<FRAME>
Тег <FRAME> определяет свойства отдельного фрейма, на которые делится окно браузера.
<FRAMESET>
Тег <FRAMESET> заменяет собой элемент <BODY> на веб-странице и формирует структуру фреймов.
<IFRAME>
Тег <IFRAME> создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.
Каждый тег HTML принадлежит к определенной группе тегов, например, табличные теги направлены на формирование таблиц и не могут применяться для других целей.
Условно теги делятся на следующие типы:
теги верхнего уровня;
теги заголовка документа;
блочные элементы;
встроенные элементы;
универсальные элементы;
списки;
таблицы.
Следует учитывать, что один и тот же тег может одновременно принадлежать разным группам, например, теги <OL> и <UL> относятся к категории списков, но также являются и блочными элементами.
Далее рассмотрим только те теги, которые потребуются нам в дальнейшей работе.
Теги верхнего уровня
Эти теги предназначены для формирования структуры веб-страницы и определяют раздел заголовка и тела документа.
<HTML>
Тег <HTML> является контейнером, который заключает в себе всё содержимое веб-страницы, включая теги <HEAD> и <BODY>. Открывающий и закрывающий теги <HTML> в документе необязательны, но хороший стиль диктует непременное их использование.
<HEAD>
Тег <HEAD> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри контейнера <HEAD> находятся метатеги, которые используются для хранения информации, предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.
<BODY>
Элемент <BODY> предназначен для хранения содержания веб-страницы, отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <BODY>. К такой информации относится текст, изображения, таблицы, списки и др.
Набор тегов верхнего уровня и порядок их вложения показан в листинге 5.1.
<html>
<head>
...
</head>
<body>
...
</body>
</html>В данном примере показано, что контейнер <HTML> определяет «каркас» всей веб-страницы, внутри него вначале задается тег <HEAD>, затем идет контейнер <BODY>, в нем хранится содержательная часть документа, которая и отображается в браузере. Теги <HTML> и <BODY> хотя и не относятся к обязательным тегам (т. е. их можно не размещать в коде), все же стоит добавлять всегда. Это позволяет получить четкую и понятную структуру документа.
Заметьте, что в листинге не упоминается <!DOCTYPE>, поскольку этот обязательный элемент кода веб-страницы не является тегом, а предназначен для браузеров, чтобы сообщить им, как интерпретировать текущий документ.
Теги заголовка документа
К этим тегам относятся элементы, которые располагаются в контейнере <HEAD>. Все эти теги напрямую не отображаются в окне браузера, за исключением тега <TITLE>, который определяет название веб-страницы.
<TITLE>
Используется для отображения строки текста в левом верхнем углу окна браузера. Такая строка сообщает пользователю название сайта и другую информацию, которую добавляет разработчик.
<META>
Метатеги используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Хотя тег <META> всего один, он имеет массу параметров, поэтому к нему и применяется множественное число.
Так, для краткого описания содержимого веб-страницы используется значение description параметра name, как показано в листинге 5.2.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML</title>
<meta name="description" content="Сайт об HTML и создании сайтов">
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
</head>
<body>
<p>...</p>
</body>
</html>Описание сайта, заданное с помощью тега <META> и параметра description, обычно отображается в поисковых системах или каталогах при выводе результатов поиска. Значение keywords также предназначено в первую очередь для повышения рейтинга сайта в поисковых системах. В качестве аргумента перечисляются ключевые слова, встречаемые на веб-странице (листинг 5.3).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML</title>
<meta name="keywords" content="HTML, META, метатег, тег, поисковая система">
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
</head>
<body>
<p>...</p>
</body>
</html>Ключевые слова можно перечислять через пробел или запятую. Поисковые системы сами приведут запись к виду, который они используют.
Блочные элементы
Блочные элементы характеризуются тем, что занимают всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки.
<BLOCKQUOTE>
Предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с пустым пространством сверху и снизу.
<DIV>
Тег <DIV> относится к универсальным блочным контейнерам и применяется в тех случаях, где нужны блочные элементы без дополнительных свойств. Также с помощью тега <DIV> можно выравнивать текст внутри этого контейнера с помощью параметра align.
<H1>...<H6>
Эта группа тегов определяет текстовые заголовки разного уровня, которые показывают относительную важность секции, расположенной после заголовка.
<HR>
Рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера. Линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке.
<P>
Определяет параграф (абзац) текста.
<PRE>
Задает блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. В HTML любое количество пробелов идущих в коде подряд на веб-странице показывается как один. Тег <PRE> позволяет обойти эту особенность и отображать текст как требуется разработчику.
Следующие теги не должны размещаться внутри контейнера <PRE>: <BIG>, <IMG>, <SMALL>, <SUB> и <SUP>.
Встроенные элементы
Встроенными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. В основном они используются для изменения вида текста или его логического выделения.
<A>
Тег <A> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия параметров name или href тег <A> устанавливает ссылку или якорь.
<B>
Определяет жирное начертание шрифта.
<BIG>
Тег <BIG> увеличивает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега <BIG> увеличивает текст на одну условную единицу.
<BR>
Тег <BR> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа <P>, использование тега <BR> не добавляет пустой отступ перед строкой.
<EM>
Тег <EM> предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.
<I>
Устанавливает курсивное начертание шрифта.
<IMG>
Тег <IMG> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <IMG> в контейнер <A>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив параметр border="0" в тег <IMG>.
<SMALL>
Тег <SMALL> уменьшает размер шрифта на единицу по сравнению с обычным текстом. По своему действию похож на тег <BIG>, но действует с точностью до наоборот.
<SPAN>
Универсальный тег, предназначенный для определения встроенного элемента внутри документа.
<STRONG>
Тег <STRONG> предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.
<SUB>
Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера — H2O.
<SUP>
Отображает шрифт в виде верхнего индекса. По своему действию похож на <SUB>, но текст отображается выше базовой линии текста — м2.
Разница между блочными и встроенными элементами следующая.
Встроенные элементы могут содержать только данные или другие встроенные элементы, а в блочные допустимо вкладывать другие блочные элементы, встроенные элементы, а также данные. Иными словами, встроенные элементы никак не могут хранить блочные элементы.
Блочные элементы всегда начинаются с новой строки, а встроенные таким способом не акцентируются.
Блочные элементы занимают всю доступную ширину, например, окна браузера, а ширина встроенных элементов равна их содержимому плюс значения отступов, полей и границ.
Универсальные элементы
Особенность этих тегов состоит в том, что они в зависимости от контекста могут использоваться как блочные или встроенные элементы.
<DEL>
Тег <DEL> используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны. Браузеры обычно помечают текст в контейнере <DEL> как перечеркнутый.
<INS>
Тег <INS> предназначен для акцентирования вновь добавленного текста и обычно применяется наряду с тегом <DEL>. Браузеры помечают содержимое контейнера <INS> подчеркиванием текста.
Списки
Списком называется взаимосвязанный набор отдельных фраз или предложений, которые начинаются с маркера или цифры. Списки предоставляют возможность упорядочить и систематизировать разные данные и представить их в наглядном и удобном для пользователя виде.
<OL>
Тег <OL> устанавливает нумерованный список, т.е. каждый элемент списка начинается с числа или буквы и увеличивается по нарастающей.
<UL>
Устанавливает маркированный список, каждый элемент которого начинается с небольшого символа — маркера.
<LI>
Тег <LI> определяет отдельный элемент списка. Внешний тег <UL> или <OL> устанавливает тип списка — маркированный или нумерованный.
<DD>, <DT>, <DL>
Тройка элементов предназначена для создания списка определений. Каждый такой список начинается с контейнера <DL>, куда входит тег <DT> создающий термин и тег <DD> задающий определение этого термина. Закрывающий тег </DD> не обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента. Тем не менее, хорошим стилем является закрывать все теги.
Таблицы
Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления табличных данных.
<TABLE>
Служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <TR> и <TD>.
<TD>
Предназначен для создания одной ячейки таблицы. Тег <TD> должен размещаться внутри контейнера <TR>, который в свою очередь располагается внутри тега <TABLE>.
<TH>
Тег <TH> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру.
<TR>
Тег <TR> служит контейнером для создания строки таблицы.
Фреймы
Фреймы разделяют окно браузера на отдельные области, расположенные вплотную друг к другу. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью тега <FRAME>. С помощью фреймов веб-страница делится на два или более документа, которые обычно содержат навигацию по сайту и его контент. Механизм фреймов позволяет открывать документ в одном фрейме, по ссылке, нажатой в совершенно другом фрейме. Допустимо также использовать вложенную структуру элементов, это позволяет дробить фреймы на более мелки области.
<FRAME>
Тег <FRAME> определяет свойства отдельного фрейма, на которые делится окно браузера.
<FRAMESET>
Тег <FRAMESET> заменяет собой элемент <BODY> на веб-странице и формирует структуру фреймов.
<IFRAME>
Тег <IFRAME> создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.
Koenig
20 окт 2011 г., 22:29
(\/)____o_O____(\/)
6. Значения параметров у тегов
Параметры тегов расширяют возможности самих тегов и позволяют гибко управлять различными настройками отображения элементов веб-страницы. Общее количество параметров достаточно велико, но их значения, как правило, можно сгруппировать по разным типам, например, задающих цвет, размер, адрес и др. Далее рассмотрим основные типы значений.
Цвет
В HTML цвет задается одним из двух путей: с помощью шестнадцатеричного кода и по названию некоторых цветов. Преимущественно используется способ, основанный на шестнадцатеричной системе исчисления, как наиболее универсальный.
Шестнадцатеричные цвета
Для задания цветов в HTML используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Числа от 10 до 15 заменены латинскими буквами. В табл. 6.1 приведено соответствие десятичных и шестнадцатеричных чисел.
Десятичные 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Шестнадцатеричные 1 2 3 4 5 6 7 8 9 A B C D E F
Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно (табл. 6.2). Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной.
Десятичные 16 17 18 19 20 21 22 23 24 25 26 27 28
Шестнадцатеричные 10 11 12 13 14 15 16 17 18 19 1A 1B 1C
Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставится символ решетки #, например #aa69cc. При этом регистр значения не имеет, поэтому допустимо писать #F0F0F0 или #f0f0f0.
Типичный цвет, используемый в HTML, выглядит следующим образом.
<body bgcolor="#fa8e47">
Здесь цвет фона веб-страницы задан как #FA8E47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (FA) определяют красную составляющую цвета, цифры с третьей по четвертую (8E) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет.
FA + 8E + 47 = FA8E47
Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, общее количество цветов может быть 256х256х256 = 16.777.216 комбинаций. Цветовая модель, основанная на красной, зеленой и синей составляющей получила название RGB (red, green, blue; красный, зеленый, синий). Эта модель аддитивная (от add — складывать), при которой сложение всех трех компонент образует белый цвет.
Чтобы легче ориентироваться в шестнадцатеричных цветах, примите во внимание некоторые правила.
Если значения компонент цвета одинаковы (например: #D6D6D6), то получится серый оттенок. Чем больше число, тем светлее цвет, значения при этом меняются от #000000 (черный) до #FFFFFF (белый).
Ярко-красный цвет образуется, если красный компонент сделать максимальным (FF), а остальные компоненты обнулить. Цвет со значением #FF0000 самый красный из возможных красных оттенков. Аналогично обстоит с зеленым цветом (#00FF00) и синим (#0000FF).
Желтый цвет (#FFFF00) получается смешением красного с зеленым. (красный, зеленый, синий) и комплиментарные или дополнительные. К ним относятся желтый, голубой и фиолетовый (еще называемым пурпурным). Вообще, любой цвет можно получить смешением близлежащих к нему цветов. Так, голубой (#00FFFF) получается за счет объединения синего и зеленого цвета.
Цвета по шестнадцатеричным значениям не обязательно подбирать эмпирическим путем. Для этой цели подойдет графический редактор, умеющий работать с разными цветовыми моделями, например, Adobe Photoshop.
Веб-цвета
Если установить качество цветопередачи монитора в 8 бит (256 цветов), то один и тот же цвет может показываться в разных браузерах по-своему. Это связано со способом отображения графики, когда браузер работает со свой собственной палитрой и не может показать цвет, который у него в палитре отсутствует. В этом случае цвет заменяется сочетанием пикселов других, близких к нему, цветов, имитирующих заданный. Чтобы цвет оставался неизменным в разных браузерах, ввели палитру так называемых веб-цветов. Веб-цветами называются такие цвета, для каждой составляющей — красной, зеленой и синей, устанавливается одно из шести значений — 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). В скобках указано шестнадцатеричное значение данной компоненты. Общее количество цветов из всех возможных сочетаний дает 6х6х6 — 216 цветов. Пример веб-цвета — #33FF66.
Основная особенность веб-цвета заключается в том, что он показывается одинаково во всех браузерах. В данный момент актуальность веб-цветов весьма мала из-за повышения качества мониторов и расширения их возможностей.
Цвета по названию
Чтобы не запоминать совокупность цифр, вместо них можно использовать имена широко используемых цветов. В табл. 6.3 приведены имена популярных названий цветов.
Имя цвета Цвет Описание Шестнадцатеричное значение
aqua Голубой #00FFFF
black Черный #000000
blue Синий #0000FF
fuchsia Светло-фиолетовый #FF00FF
gray Темно-серый #808080
green Зеленый #008000
lime Светло-зеленый #00FF00
maroon Темно-красный #800000
navy Темно-синий #000080
olive Оливковый #808000
purple Темно-фиолетовый #800080
red Красный #FF0000
silver Светло-серый #C0C0C0
teal Сине-зеленый #008080
white Белый #FFFFFF
yellow Желтый #FFFF00
Не имеет значения, каким способом вы задаете цвет — по его имени или с помощью шестнадцатеричных чисел. По своему действию эти способы равны. В листинге 6.1 показано, как установить цвет фона и текста веб-страницы.
В данном примере цвет фона задается с помощью параметра bgcolor тега <BODY>, а цвет текста через параметр text. Для разнообразия значение у атрибута text установлено в виде шестнадцатеричного числа, а у bgcolor с помощью зарезервированного ключевого слова teal.
Размер
В HTML размеры элементов или расстояния между ними задаются в пикселах или процентах. Пиксел — это элементарная точка на экране монитора, является относительной единицей измерения, ее величина зависит от установленного экранного разрешения и размера монитора. Возьмем, к примеру, популярное разрешение монитора 1024х768 пикселов. Картинка с такими же размерами будет занимать всю область экрана. Увеличив разрешение монитора до 1280х1024, мы, тем самым, уменьшим размеры изображения на экране.
При использовании пикселов в качестве значений пишется только число, например: width="380". В листинге 6.2 приведено добавление изображения с заданными размерами.
В данном примере рисунок имеет ширину 111 пикселов (width="111"), высоту 102 пиксела (height="102"), горизонтальный и вертикальный отступ по 4 пиксела (hspace и vspace) и толщину границы вокруг картинки 2 пиксела (border="2").
Процентная запись удачно дополняет пикселы, поскольку позволяет привязаться к размерам определенного элемента, к примеру, окна браузера. Так, если задать у картинки ширину 100%, то рисунок будет заполнять все свободное пространство окна по ширине. Браузер понимает, что речь идет о процентах, если после числа добавляется символ %, например: width="40%".
Замечание
Размеры допустимо задавать только в целых числах. Это правило относится как к пикселам, так и процентам.
Учтите, что размер в процентах вычисляется от размеров родительского элемента, иными словами, контейнера, внутри которого располагается элемент. Если родитель явно не задан, тогда за отсчет принимается окно браузера. В листинге 6.3 приведен код веб-страницы, в котором ширина элементов задается в процентах.
В данном примере ширина картинки задана как 100%, при этом высота изображения явно не задается, поскольку она вычисляется автоматически
Обратите внимание, что в изображении появляются заметные искажения, это связано с увеличением картинки вопреки ее исходным размерам.
Как вы понимаете, ширина окна принимается за 100%, но ее легко превысить, причем ненароком. В частности, стоит только добавить в листинге 6.3 к тегу <IMG> отступы по горизонтали (hspace="10") и ширина изображения станет 100%+20. Это в свою очередь приведет к появлению горизонтальной полосы прокрутки. Учитывайте этот нюанс при установке размеров элементов.
Адрес
— Папа, как пишется «адрес», — обращается сын программиста к папе.
— Напиши: «URL».
Адресом называется путь к документу, например, к графическому файлу. Адрес необходим в тех случаях, когда делается ссылка на веб-страницу или загружается определенный файл. Например, в теге <IMG> адрес используется в качестве аргумента параметра href, он задает путь к файлу с изображением.
Синонимом адреса выступает URL (Universal Resource Locator, универсальный указатель ресурсов), различают абсолютные и относительные адреса.
Абсолютные адреса
Подобные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где задан URL и начинаются всегда с указания протокола передачи данных. Для веб-страниц это обычно HTTP (HyperText Transfer Protocol, протокол передачи гипертекста), соответственно, абсолютные адреса начинаются с ключевого слова http://. В листинге 6.4 приведена ссылка, в которой применяется абсолютный адрес.
В данном примере текстовая ссылка ведет на сайт htmlbook.ru и указывает на веб-страницу с именем body.html, которая располагается в каталоге html.
Абсолютные адреса применяются в первую очередь для указания на другой сетевой ресурс и достаточно редко используются в рамках одного сайта.
Относительные адреса
Относительные адреса указываются от корня сайта или текущего документа. Например, код <img src="pic.gif"> означает загрузить графический файл с именем pic.gif, который располагается в той же папке, что и сама веб-страница. Далее рассмотрим несколько примеров таких адресов.
/
Адрес указывает обычно на файл index.html, который находится в корне сайта. Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге. Имя файла не обязательно должно быть index.html, этот параметр меняется через настройки веб-сервера — так называется программа, которая анализирует приходящие от браузера запросы и передает ему документы, показываемые пользователю.
/images/pic.gif
Слэш (символ /) перед адресом говорит о том, что адресация начинается от корня сайта. Ссылка ведет на рисунок pic.gif, который находится в папке images. А та в свою очередь размещена в корне сайта.
../help/me.html
Двоеточие перед именем указывает браузеру перейти на уровень выше в списке каталогов сайта и там «поискать» файл me.html.
manual/info.html
Если перед именем папки нет никаких дополнительных символов, вроде двоеточия или слэша, то папка размещена внутри текущего каталога, а уже в ней располагается файл info.html.
Замечание
Адреса относительно корня сайта вроде /demo/ работают только под управлением веб-сервера и на локальном компьютере не применимы.
В листинге 6.5 приведены ссылки, в которых используются относительные адреса.
Иногда можно встретить в адресе ссылки путь в виде ./file/doc.html. Точка со слэшем означает, что отсчет ведется от текущей папки. Подобная запись избыточна и ее можно сократить до file/doc.html.
Параметры тегов расширяют возможности самих тегов и позволяют гибко управлять различными настройками отображения элементов веб-страницы. Общее количество параметров достаточно велико, но их значения, как правило, можно сгруппировать по разным типам, например, задающих цвет, размер, адрес и др. Далее рассмотрим основные типы значений.
Цвет
В HTML цвет задается одним из двух путей: с помощью шестнадцатеричного кода и по названию некоторых цветов. Преимущественно используется способ, основанный на шестнадцатеричной системе исчисления, как наиболее универсальный.
Шестнадцатеричные цвета
Для задания цветов в HTML используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Числа от 10 до 15 заменены латинскими буквами. В табл. 6.1 приведено соответствие десятичных и шестнадцатеричных чисел.
Десятичные 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Шестнадцатеричные 1 2 3 4 5 6 7 8 9 A B C D E F
Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно (табл. 6.2). Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной.
Десятичные 16 17 18 19 20 21 22 23 24 25 26 27 28
Шестнадцатеричные 10 11 12 13 14 15 16 17 18 19 1A 1B 1C
Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставится символ решетки #, например #aa69cc. При этом регистр значения не имеет, поэтому допустимо писать #F0F0F0 или #f0f0f0.
Типичный цвет, используемый в HTML, выглядит следующим образом.
<body bgcolor="#fa8e47">
Здесь цвет фона веб-страницы задан как #FA8E47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (FA) определяют красную составляющую цвета, цифры с третьей по четвертую (8E) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет.
FA + 8E + 47 = FA8E47
Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, общее количество цветов может быть 256х256х256 = 16.777.216 комбинаций. Цветовая модель, основанная на красной, зеленой и синей составляющей получила название RGB (red, green, blue; красный, зеленый, синий). Эта модель аддитивная (от add — складывать), при которой сложение всех трех компонент образует белый цвет.
Чтобы легче ориентироваться в шестнадцатеричных цветах, примите во внимание некоторые правила.
Если значения компонент цвета одинаковы (например: #D6D6D6), то получится серый оттенок. Чем больше число, тем светлее цвет, значения при этом меняются от #000000 (черный) до #FFFFFF (белый).
Ярко-красный цвет образуется, если красный компонент сделать максимальным (FF), а остальные компоненты обнулить. Цвет со значением #FF0000 самый красный из возможных красных оттенков. Аналогично обстоит с зеленым цветом (#00FF00) и синим (#0000FF).
Желтый цвет (#FFFF00) получается смешением красного с зеленым. (красный, зеленый, синий) и комплиментарные или дополнительные. К ним относятся желтый, голубой и фиолетовый (еще называемым пурпурным). Вообще, любой цвет можно получить смешением близлежащих к нему цветов. Так, голубой (#00FFFF) получается за счет объединения синего и зеленого цвета.
Цвета по шестнадцатеричным значениям не обязательно подбирать эмпирическим путем. Для этой цели подойдет графический редактор, умеющий работать с разными цветовыми моделями, например, Adobe Photoshop.
Веб-цвета
Если установить качество цветопередачи монитора в 8 бит (256 цветов), то один и тот же цвет может показываться в разных браузерах по-своему. Это связано со способом отображения графики, когда браузер работает со свой собственной палитрой и не может показать цвет, который у него в палитре отсутствует. В этом случае цвет заменяется сочетанием пикселов других, близких к нему, цветов, имитирующих заданный. Чтобы цвет оставался неизменным в разных браузерах, ввели палитру так называемых веб-цветов. Веб-цветами называются такие цвета, для каждой составляющей — красной, зеленой и синей, устанавливается одно из шести значений — 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). В скобках указано шестнадцатеричное значение данной компоненты. Общее количество цветов из всех возможных сочетаний дает 6х6х6 — 216 цветов. Пример веб-цвета — #33FF66.
Основная особенность веб-цвета заключается в том, что он показывается одинаково во всех браузерах. В данный момент актуальность веб-цветов весьма мала из-за повышения качества мониторов и расширения их возможностей.
Цвета по названию
Чтобы не запоминать совокупность цифр, вместо них можно использовать имена широко используемых цветов. В табл. 6.3 приведены имена популярных названий цветов.
Имя цвета Цвет Описание Шестнадцатеричное значение
aqua Голубой #00FFFF
black Черный #000000
blue Синий #0000FF
fuchsia Светло-фиолетовый #FF00FF
gray Темно-серый #808080
green Зеленый #008000
lime Светло-зеленый #00FF00
maroon Темно-красный #800000
navy Темно-синий #000080
olive Оливковый #808000
purple Темно-фиолетовый #800080
red Красный #FF0000
silver Светло-серый #C0C0C0
teal Сине-зеленый #008080
white Белый #FFFFFF
yellow Желтый #FFFF00
Не имеет значения, каким способом вы задаете цвет — по его имени или с помощью шестнадцатеричных чисел. По своему действию эти способы равны. В листинге 6.1 показано, как установить цвет фона и текста веб-страницы.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Цвета</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body bgcolor="teal" text="#ffffff">
<p>Пример текста</p>
</body>
</html>В данном примере цвет фона задается с помощью параметра bgcolor тега <BODY>, а цвет текста через параметр text. Для разнообразия значение у атрибута text установлено в виде шестнадцатеричного числа, а у bgcolor с помощью зарезервированного ключевого слова teal.
Размер
В HTML размеры элементов или расстояния между ними задаются в пикселах или процентах. Пиксел — это элементарная точка на экране монитора, является относительной единицей измерения, ее величина зависит от установленного экранного разрешения и размера монитора. Возьмем, к примеру, популярное разрешение монитора 1024х768 пикселов. Картинка с такими же размерами будет занимать всю область экрана. Увеличив разрешение монитора до 1280х1024, мы, тем самым, уменьшим размеры изображения на экране.
При использовании пикселов в качестве значений пишется только число, например: width="380". В листинге 6.2 приведено добавление изображения с заданными размерами.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Изображение</title>
</head>
<body>
<p><img src="figure.jpg" alt="Винни-Пух в гостях у Кролика" width="111" height="102" hspace="4" vspace="4" border="2"></p>
</body>
</html>В данном примере рисунок имеет ширину 111 пикселов (width="111"), высоту 102 пиксела (height="102"), горизонтальный и вертикальный отступ по 4 пиксела (hspace и vspace) и толщину границы вокруг картинки 2 пиксела (border="2").
Процентная запись удачно дополняет пикселы, поскольку позволяет привязаться к размерам определенного элемента, к примеру, окна браузера. Так, если задать у картинки ширину 100%, то рисунок будет заполнять все свободное пространство окна по ширине. Браузер понимает, что речь идет о процентах, если после числа добавляется символ %, например: width="40%".
Замечание
Размеры допустимо задавать только в целых числах. Это правило относится как к пикселам, так и процентам.
Учтите, что размер в процентах вычисляется от размеров родительского элемента, иными словами, контейнера, внутри которого располагается элемент. Если родитель явно не задан, тогда за отсчет принимается окно браузера. В листинге 6.3 приведен код веб-страницы, в котором ширина элементов задается в процентах.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Изображение</title>
</head>
<body>
<p><img src="figure.jpg" alt="Винни-Пух в гостях у Кролика" width="100%"></p>
</body>
</html>В данном примере ширина картинки задана как 100%, при этом высота изображения явно не задается, поскольку она вычисляется автоматически
Обратите внимание, что в изображении появляются заметные искажения, это связано с увеличением картинки вопреки ее исходным размерам.
Как вы понимаете, ширина окна принимается за 100%, но ее легко превысить, причем ненароком. В частности, стоит только добавить в листинге 6.3 к тегу <IMG> отступы по горизонтали (hspace="10") и ширина изображения станет 100%+20. Это в свою очередь приведет к появлению горизонтальной полосы прокрутки. Учитывайте этот нюанс при установке размеров элементов.
Адрес
— Папа, как пишется «адрес», — обращается сын программиста к папе.
— Напиши: «URL».
Адресом называется путь к документу, например, к графическому файлу. Адрес необходим в тех случаях, когда делается ссылка на веб-страницу или загружается определенный файл. Например, в теге <IMG> адрес используется в качестве аргумента параметра href, он задает путь к файлу с изображением.
Синонимом адреса выступает URL (Universal Resource Locator, универсальный указатель ресурсов), различают абсолютные и относительные адреса.
Абсолютные адреса
Подобные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где задан URL и начинаются всегда с указания протокола передачи данных. Для веб-страниц это обычно HTTP (HyperText Transfer Protocol, протокол передачи гипертекста), соответственно, абсолютные адреса начинаются с ключевого слова http://. В листинге 6.4 приведена ссылка, в которой применяется абсолютный адрес.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Ссылка</title>
</head>
<body>
<p><a href="http://htmlbook.ru/html/body.html">Описание тега BODY</a></p>
</body>
</html>В данном примере текстовая ссылка ведет на сайт htmlbook.ru и указывает на веб-страницу с именем body.html, которая располагается в каталоге html.
Абсолютные адреса применяются в первую очередь для указания на другой сетевой ресурс и достаточно редко используются в рамках одного сайта.
Относительные адреса
Относительные адреса указываются от корня сайта или текущего документа. Например, код <img src="pic.gif"> означает загрузить графический файл с именем pic.gif, который располагается в той же папке, что и сама веб-страница. Далее рассмотрим несколько примеров таких адресов.
/
Адрес указывает обычно на файл index.html, который находится в корне сайта. Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге. Имя файла не обязательно должно быть index.html, этот параметр меняется через настройки веб-сервера — так называется программа, которая анализирует приходящие от браузера запросы и передает ему документы, показываемые пользователю.
/images/pic.gif
Слэш (символ /) перед адресом говорит о том, что адресация начинается от корня сайта. Ссылка ведет на рисунок pic.gif, который находится в папке images. А та в свою очередь размещена в корне сайта.
../help/me.html
Двоеточие перед именем указывает браузеру перейти на уровень выше в списке каталогов сайта и там «поискать» файл me.html.
manual/info.html
Если перед именем папки нет никаких дополнительных символов, вроде двоеточия или слэша, то папка размещена внутри текущего каталога, а уже в ней располагается файл info.html.
Замечание
Адреса относительно корня сайта вроде /demo/ работают только под управлением веб-сервера и на локальном компьютере не применимы.
В листинге 6.5 приведены ссылки, в которых используются относительные адреса.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Ссылки</title>
</head>
<body>
<p><a href="images/xxx.jpg">Посмотрите на мою фотографию!</a></p>
<p><a href="tip.html">Как сделать такое же фото?</a></p>
</body>
</html>Иногда можно встретить в адресе ссылки путь в виде ./file/doc.html. Точка со слэшем означает, что отсчет ведется от текущей папки. Подобная запись избыточна и ее можно сократить до file/doc.html.
Koenig
20 окт 2011 г., 22:30
(\/)____o_O____(\/)
7. Текст
Для изменения вида текста существует достаточно большое количество различных тегов. Это и немудрено, ведь текст самый популярный вид информации.
Особенности текста в HTML
Прежде чем редактировать код веб-страницы, следует принять во внимание некоторые особенности, которые присущи HTML при работе с текстом.
Любое количество пробелов идущих подряд, в браузере отображается как один
Сколько бы вы не поставили пробелов между словами, это никак не повлияет на конечный вид текста. Это же правило относится к символам табуляции и переносу текста. Поэтому не ставьте лишних пробелов, поскольку это лишь увеличит общий объем файла, но никак не изменит вид документа в браузере. Приведенные ниже строки будут отображаться на веб-странице одинаково, несмотря на их разное написание.
<p>Измеряй микрометром. Отмечай мелом. Отрубай топором. </p>
<p>Измеряй микрометром. Отмечай мелом. Отрубай топором.</p>
<p>Измеряй микрометром.
Отмечай мелом.
Отрубай топором.</p>
Исключением из этого правила является тег <PRE>, внутри которого любое число пробелов отображается именно так, как оно указано в коде.
Нет расстановки переносов в тексте
HTML не поддерживает расстановку переносов в словах как это делают текстовые редакторы, иначе говоря, все слова пишутся целиком без их разбиения. Это условие несущественно, пока не используется выравнивание текста по ширине. В этом случае блок текста выравнивается по левому и правому краю. Короткие строки при этом растягиваются за счет автоматического добавления пробелов между словами. Иногда пустые блоки между словами настолько велики, что портят внешний вид страницы и ухудшают читабельность текста.
Представьте, что у вас в середине предложения есть какое-нибудь длинное слово, вот например «Дегидроэпиандростерон» . В текстовом редакторе это слово будет перенесено по слогам так, чтобы текст занял указанную ширину, а на веб-странице подобное слово будет отображаться целиком, без переносов.
Текст занимает ширину окна браузера
Если вы просто напишите одну длинную строку в коде HTML, то в браузере она будет отформатирована, чтобы текст поместился по ширине в окно. Переносы текста будут добавлены автоматически в местах пробела или дефиса. Что произойдет, если в тексте нет ни того, ни другого символа? Браузер не сможет создать переносы и отобразит текст одной строкой. Если она шире окна браузера, то неминуемо появится горизонтальная полоса прокрутки.
Абзацы
Как правило, блоки текста разделяют между собой абзацами (параграфами). По умолчанию между параграфами существует небольшой вертикальный отступ, называемый отбивкой. Синтаксис создания абзацев следующий.
<p>Абзац 1</p>
<p>Абзац 2</p>
Каждый абзац начинается с тега <P> и должен иметь необязательный закрывающий тег </P>.
Замечание
В любой книге для выделения следующего абзаца используется отступ первой строки, еще называемый «красная строка» . Это позволяет читателю легко отыскивать взглядом новую строку и повышает, таким образом, читабельность текста. На веб-странице этот прием обычно не используется, а для разделения абзацев применяется отбивка.
В листинге 7.1 показано применение абзацев для создания отступов между строк.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Применение абзацев</title>
</head>
<body>
<p>В одних садах цветёт миндаль, в других метёт метель. </p>
<p>В одних краях ещё февраль, в других - уже апрель.</p>
<p>Проходит время, вечный счёт: год за год, век за век...</p>
<p>Во всём - его неспешный ход, его кромешный бег.</p>
<p>В году на радость и печаль по двадцать пять недель.</p>
<p>Мне двадцать пять недель февраль, и двадцать пять - апрель.</p>
<p>По двадцать пять недель в туман уходит счёт векам.</p>
<p>Летит мой звонкий балаган куда-то к облакам.</p>
<p><i>М. Щербаков</i></p>
</body>
</html>при использовании тега <P> между абзацами возникают слишком большие отступы. От них можно избавиться, если в местах переноса строк добавлять тег <BR>. В отличие от абзаца, тег переноса строки <BR> не создает дополнительных вертикальных отступов между строками и может применяться практически в любом тексте.
Так, текст листинга 7.1 с учетом переноса строк будет преобразован следующим образом (листинг 7.2).
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Переносы в тексте</title>
</head>
<body>
<p>В одних садах цветёт миндаль, в других метёт метель.<br>
В одних краях ещё февраль, в других - уже апрель.<br>
Проходит время, вечный счёт: год за год, век за век...<br>
Во всём - его неспешный ход, его кромешный бег.<br>
В году на радость и печаль по двадцать пять недель.<br>
Мне двадцать пять недель февраль, и двадцать пять - апрель.<br>
По двадцать пять недель в туман уходит счёт векам.<br>
Летит мой звонкий балаган куда-то к облакам.</p>
<p><i>М. Щербаков</i></p>
</body>
</html>Заголовки
Заголовки выполняют важную функцию на веб-странице. Во-первых, они показывают важность раздела, к которому относятся. Чем больше заголовок и его «вес» , тем более он значимый. Вспомните, что в газетах и журналах передовицы набраны крупным шрифтом, тем самым, привлекая к ним внимание и говоря: «вот это надо читать обязательно» . Во-вторых, с помощью различных заголовков легко регулировать размер текста. Чем выше уровень заголовка, тем больше размер шрифта. Самым верхним уровнем является уровень 1 (<H1>), а самым нижним — уровень 6 (<H6>). И, в-третьих, поисковики добавляют рейтинг тексту, если он находится внутри тега заголовка. Это важно для раскрутки сайта и для его занятия первых строк выдачи результата в поисковой системе по ключевым словам.
Синтаксис создания заголовков показан в листинге 7.3.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Заголовки в тексте</title>
</head>
<body>
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвертого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>
</body>
</html>Как правило, на веб-странице применяют заголовки с первого по третий уровень, их вполне достаточно. Редко когда приходится использовать заголовки более низкого уровня.
Выравнивание текста
Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому краю, правому краю, по центру или по ширине. Наиболее распространенный вариант — выравнивание по левому краю, когда слева текст сдвигается до края, а правый остается неровным. Выравнивание по правому краю и по центру в основном используется в заголовках и подзаголовках. Следует иметь в виду, что при использовании выравнивания по ширине, в тексте между словами могут появиться большие интервалы, что не очень красиво.
Для установки выравнивания текста обычно используется тег параграфа <P> с параметром align, который определяет способ выравнивания. Также блок текста допустимо выравнивать с помощью тега <DIV> с аналогичным параметром align. Он может принимать следующие значения:
left — выравнивание по левому краю, задается по умолчанию;
right — выравнивание по правому краю;
center — выравнивание по центру;
justify — выравнивание по ширине (одновременно по правому и левому краю). Этот аргумент работает только для текста, длина которого более, чем одна строка.
Также аргумент align можно применять как для текста, так и для заголовков (листинг 7.4).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Выравнивание текста</title>
</head>
<body>
<h1 align="center">Как поймать льва?</h1>
<h2 align="right">Метод перебора</h2>
<p align="justify">Делим пустыню на ряд элементарных участков, размер которых совпадает с габаритными размерами льва, но при этом меньше размера клетки. Далее простым перебором определяем участок, в котором находится лев, что автоматически приводит к его поимке.</p>
<h2 align="right">Метод дихотомии</h2>
<p align="justify">Делим пустыню на две половины. В одной части - лев, в другой его нет. Берем ту половину, в которой находится лев, и снова делим ее пополам. Так повторяем до тех пор, пока лев не окажется пойман.</p>
</body>
</html>Жирное начертание
Насыщенностью называют увеличение толщины линий шрифта и соответственно контраста. Обычно различают четыре вида насыщенности: светлое начертание, нормальное, полужирное и жирное. Однако с помощью HTML можно установить только нормальное и жирное начертание. Для установки текста жирного начертания применяется два тега: <B> и <STRONG>.
<b>Жирное начертание шрифта</b>
<strong>Сильное выделение текста</strong>
Курсивное начертание
Курсивный шрифт представляет собой не просто наклон отдельных символов, для некоторых шрифтов это полная переделка под новый стиль, имитирующий рукописный. Курсив для текста определяют два тега: <I> и <EM>.
<i>Курсивное начертание шрифта</i>
<em>Выделение текста</em>
Следует отметить, что теги <B> и <STRONG>, также как <I> и <EM> хотя и похожи по своему действию, являются не совсем эквивалентными и заменяемыми. Первый тег <B> — является тегом физической разметки и устанавливает жирное начертание текста, а тег <STRONG> — тегом логической разметки и выделяет помеченный текст. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов <B> и <STRONG>, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.
В листинге 7.5 показано использование тегов <EM> и <STRONG> для оформления текстов.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Оформление текста</title>
</head>
<body>
<p><strong>А где же печенье и самогоноваренье?!</strong> - <em>воскликнул Мальчиш-плохиш</em>.</p>
</body>
</html>Верхний и нижний индекс
Индексом по отношению к тексту называется смещение символов относительно базовой линии вверх или вниз. В зависимости от положительного или отрицательного значения, индекс называется, соответственно, верхним или нижним. Они активно применяются в математике, физике, химии и для обозначения единиц измерения. HTML предлагает два тега для создания индекса: <SUP> верхний индекс и <SUB> индекс нижний. Текст, помещенный в один из этих контейнеров, обозначается меньшим размером, чем базовый текст и смещается относительно горизонтали.
В листинге 7.6 показано, где применяется подобный текст
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Нижний индекс</title>
</head>
<body>
<p><b>Формула серной кислоты:</b> <i>H<sub>2</sub>SO<sub>4</sub></i></p>
</body>
</html>Всего: 131
© 2024, JohnCMS