HTML позволяет определить внешний вид страницы, использовать в ней графические и мультимедийные объекты, а также обеспечить переход к другому документу. Для решения этих задач используются так называемы тэги («tag» √ от англ. «ярлык», «бирка») или дескрипторы, которые являются конструкциями HTML, описывающими параметры форматирования текста, подключение мультимедийных модулей и гиперпереходы. Для обозначения тэгов служат знаки «меньше» и «больше». Тэги бывают двойные √ требующие открытия и закрытия (например, задающим полужирное выделение для части текста √ <b>...</b>) и одинарные (например, выводящие на экран цветную полоску-разделитель √ <hr>).
HTML-документ является ASCII-текстом, поэтому его можно создать используя простейший текстовый редактор типа Notepad'а. Причем неважно большими или маленькими буквами набираются тэги. Главное, чтобы создаваемый файл получил расширение .htm или .html. Некоторые конструкции языка принято считать обязательными, хотя современные броузеры отобразят любой файл с указанными расширениями.
Рассмотрим простейший HTML-документ, выводящий на экран текст и изображение:
Демонстрация HTML. Часть первая.Пример вставки текста:Текст, заключенный в тэг абзаца с выравниваниемем влево. Размер и вид шрифта зависят от установок броузера. Выделить текст можно тэгами физического или логического форматирования. Полужирный. Курсив. Пример вставки изображения:
Черно-белая фотография хорошего фантаста Сергея Лукьяненко приведена просто для иллюстрации возможности размещения изображения. В данном случае реализовано обтекание фотографии текстом справа. |
Теперь разберем код, формирующий этот документ. Обязательные тэги набраны ПРОПИСНЫМИ буквами. Комментарии к коду √ по нажатию сноски.
<!doctype1 html public "-//w3c//dtd html 4.0 transitional//en"><HTML>2
<HEAD>3
<TITLE>4Demo HTML.</TITLE>
<meta5 name="description" content6="Простой пример HTML-кода.">
<meta name="keywords" content="html,homepage,web">
</HEAD>
<body7 bgcolor="#00ccff" text="#8000000">
<h39 align="center">Демонстрация HTML. Часть первая.</h3>
<h4 align="center">Пример вставки текста:</h4>
<p10 align="left">Текст, заключенный в тэг абзаца с выравниваниемем влево. Размер и вид шрифта зависят от установок броузера. Выделить текст можно тэгами физического или логического11 форматирования. <b12>Полужирный</b>. <i13>Курсив</i>.</p>
<h4 align="center">Пример вставки изображения:</h4>
<img src=14"lukyan.jpg" width=100 height=112 alt="фото С. Лукьяненко" align="left"> <p align="left">Черно-белая фотография хорошего фантаста Сергея Лукьяненко приведена просто для иллюстрации возможности размещения изображения. В данном случае реализовано обтекание фотографии текстом справа.</p><br>15
</body>
</HTML>
1<!--...--!> позволяет размещать комментарии внутри Web-кода. Комментарии не обрабатываются броузерами и практически не влияют на скорость загрузки. Специализированный тэг <!doctype...> сообщает броузеру DTD документа HTML и указывает применение расширенного стандарта языка. [код]
2<HTML>...</HTML> указывает начало и конец документа HTML. При их отсутствии старые броузеры могут его не опознать. [код]
3<HEAD>...</HEAD> указывает начало и конец заголовка со служебной информацией документа. На экран выводится только содержимое тэга <TITLE>...</TITLE>. [код]
4<TITLE>...</TITLE> указывает начало и конец названия документа. Его содержимое выводится броузером в строке заголовка окна броузера, перед названием самого броузера. Не рекомендуется использовать более 64 символов. [код]
5<meta...> используется для размещения инструкций для броузеров и серверов. [код]
6<meta name="..." content>="...". Name указывает тип информации, которую содержит атрибут content. В данном случае указано описание содержимого страницы, используемое поисковыми роботами при помещении в Web-каталог. Нижняя строка описывает ключевые слова («keywords») используемые при обработке поисковым роботом. Такая комбинация описания страницы и ключевых слов для ее поиска позволяет найти в Интернете необходимую информацию. Некоторые поисковые системы воспринимают в атрибуте content не более 60 символов. [код]
7<body...>...</body> указывает начало и конец «тела» HTML-документа. Внутри него – форматированный текст, изображения, мультимедиа и гиперссылки – все, что выводится во внутренней области окна броузера. Внутри начального тэга обычно указывают главные установки HTML-документа – цвета фона и текста окна, непросмотренных, просмотренных и активных ссылок и др. Если эти параметры не описаны, используются установки броузера. [код]
8Атрибуты <bgcolor=#... text=#...> указывает цвет фона и текста страницы в шестнадцатиричном коде по схеме RGB (Red, Green, Blue – красный, зеленый, голубой). Каждая из 3-х позиций может принимать значения от 00 до FF. Смесь 3-х цветов дает соответствующие оттенки. Считается, что кавычки можно не ставить. Дополнительную информацию о цветах и безопасной палитре можно найти в разделе Graphics. [код]
9Тэг <h3>...</h3> указывает начало и конец текста в формате заголовка 3-го уровня. Всего их шесть. Если вы не установите свое стилевое оформление, то они будут отображаться в полужирном начертании с отбивкой снизу пустой строки. Кегль (размер шрифта) увеличивается от 6-го к 1-му. Атрибут align задает выравнивание заголовка влево (left), по центру (center) или вправо (right). [код]
10Тэг <p>...</p> указывает начало и конец абзаца с отбивкой пустой строки после закрывающего тэга. Кегль (размер шрифта) текста зависит от установок броузера или соответствующих тэгов. Атрибут align обеспечивает выравнивание текста влево (left), по центру (center) или вправо (right). Параметр justify (выравнивание по ширине) поддерживается некоторыми броузерами (IE 4.x и NN 4.x в том числе), но не входит в стандарт HTML 4.0 и не рекомендуется для использования. [код]
11Разница между логическим и физическим форматированием в том, что первое указывает характер (назначение) текста, полагаясь на установки броузера. Физическое (или абсолютное) форматирование задается явно, точным указанием стиля и начертания. Сторонники логического подхода утверждают, что настоящая гибкость языков разметки заключена в способности Web-броузера (и человека, который его конфигурирует) самостоятельно принимать решения о форматировании. Сторонники физического форматирования говорят о необходимости полного контроля разработчика над внешним видом Web-публикации. [код]
12Тэги <b>...</b> как вы уже знаете, задают полужирное выделение заключенного между ними текста. Если Вы приверженец логического форматирования, можете использовать тэг <strong>...</strong>. Если установки броузера не были изменены пользователем, то он, скорее всего, увидит ваш текст именно в полужирном отображении. [код]
13Тэги <i>...</i> задают курсивное отображение заключенного между ними текста. Иногда такое начертание называют «наклонным», что неверно. Наклонным (oblique) может быть подвид некоторой гарнитуры (вида шрифта), а не начертание. В логическом форматировании, курсивному начертанию эквивалентен тэг <em>...</em>. [код]
14Тэг <img src="..."> обеспечивает отображение броузером графического файла. Если он располагается в одном каталоге с HTML-документом, достаточно просто указать его имя. Если нет, то, в зависимости от платформы вашего провайдера, придется описывать его абсолютное или относительное местоположение. Чем они отличаются, можно будет узнать из статьи «Проектирование сайта» раздела Begin. Атрибуты width="..." и height="..." задают ширину и высоту изображения в пикселах (точках экрана) или процентах. Наличие этих атриботов позволяет броузеру сразу выделить область под изображение и дает возможность читать сопроводительный текст пока загружается графика. Их отсутствие приводит к повторному форматированию текста по окончании загрузки картинки. Атрибут alt="..." позволяет определить текст, выводимый вместо изображение для пользователей с текстовыми броузерами или тех, кто отключает вывод графики для ускорения загрузки. Этот же текст высвечивается пока идет загрузка. Понятно, что он должен быть кратким. Кроме alt="..." может использоваться атрибут title="...". Он задает комментарий (строку текста), выводимый при задержки курсора «мышки» в области картинки. При его отсутствии в качестве комментария выводится содержимое alt="...". Атрибут align="..." для изображения обеспечивает выравнивание не только влево, по центру или вправо, но и задает выравнивание нижнего края сопровождающего текста по верхнему краю (top), центру (middle) и нижнему краю (bottom) изображения. [код]
15Тэг <br> задает принудительный переход строки (добавляет пустую строку). Обычно он используется внутри авзаца. В данном случае тэг <br> добавлен для обмана броузера Netscape Navigator. Без этой пустой строки NN ограничивает область заграшивания имеющимися текстовыми строками и фотография выступает вниз за пределы голубого прямоугольника. [код]
Мы закончили рассмотрение базового каркаса HTML-документа. Понятно, что описать все тэги и все атрибуты в рамках одного урока невозможно. Некоторые Вы узнаете из последующих уроков, некоторые – из полного справочника по 4-й версии HTML, который уже подготавливается нами к размещению. Главное – четко уяснить назначение «головы» (head) и «тела» (body) HTML-документа.
 |
|
