HTML основы

Основные понятия

HTML (HyperText Markup Language) — язык разметки гипертекста — предназначен для создания Web-страниц.

Под гипертекстом в этом случае понимается текст, связанный с другими текстами указателями-ссылками.

HTML представляет собой достаточно простой набор кодов, которые описывают структуру документа. HTML позволяет выделить в тексте отдельные логические части (заголовки, абзацы, списки и т.д.), поместить на Web-страницу подготовленную фотографию или картинку, организовать на странице ссылки для связи с другими документами.

HTML не задает конкретные и точные атрибуты форматирования документа. Конкретный вид документа окончательно определяет только программа-броузер на компьютере пользователя Интернета. 

HTML также не является языком программирования, но web-страницы могут включать в себя встроенные программы-скрипты на языках Javascript и Visual Basic Script и программы-апплеты на языке Java.

Даже, если вы не собираетесь в дальнейшем редактировать «вручную» текст HTML (предполагая использовать графические редакторы), знание языка HTML даст вам возможность как лучше использовать эти средства, так и увеличит ваши шансы сделать HTML-документ более доступным и «читаемым» при просмотре броузерами разных фирм.

Основными компонентами HTML являются:

• Тег (tag). Тег HTML это компонент, который командует Web- броузеру выполнить определенную задачу типа создания абзаца или вставки изображения.

• Атрибут (или аргумент). Атрибут HTML изменяет тег. Например, можно выровнять абзац или изображение внутри тега.

• Значение. Значения присваиваются атрибутам и определяют вносимые изменения. Например, если для тега используется атрибут выравнивания, то можно указать значение этого атрибута. Значения могут быть текстовыми, типа left или right, а также числовыми, как например ширина и высота изображения, где значения определяют размер изображения в пикселях.

Теги представляют собой зарезервированные последовательности символов, начинающиеся с < (знака меньше) и заканчивающиеся > (знаком больше). 

Закрытие тега отличается от открытия только наличием символа ‘/’.

Предположим, у нас есть гипотетический атрибут форматирования текста, управляемый кодом <X>, и мы хотим применить его к словам «Это мой текст».

HTML-последовательность кодов и собственно текста будет выглядеть так:

<X>Это мой текст</X>

Теги могут вкладываться друг в друга иерархически, но без пересечений, то есть допустимо вложение вида <teg1><teg2></teg2></teg1>, но не <teg1><teg2> </teg1></teg2>.

Действие вложенных тагов объединяется.Например, если внутрь тега, создающего жирное начертание шрифта, вложен тег курсива, то в результате получится жирный курсив.

Первое правило

Первое правило HTML: закрывайте все, что вы открыли! 

НО! Из этого правила, как и из всех остальных, существуют исключения.

HTML- программа должна начинаться тегом <HTML> и заканчиваться тегом </HTML>

<HTML>

…… (здесь будут другие теги программы)

</HTML>

HTML- программы состоят из двух основных частей: заголовка и тела. Заголовок ограничивается парой тегов<HEAD> и </HEAD>, а тело — парой тегов<BODY> и </BODY>.

В результате HTML- программа выглядит следующим образом:

<HTML>

<HEAD>

… (здесь будет заголовок)

</HEAD>

<BODY>

…. (здесь будут другие теги тела программы)

</BODY>

</HTML>

Кроме того, каждая HTML- программа имеет заголовок, который помещается в заголовок окна броузера. Заголовок окна броузера создается при помощи двух тегов <TITLE> и </TITLE> и содержится между тегами <HEAD> и</HEAD>.

Тогда программа принимает следующий вид:

<HTML>

<HEAD>

<TITLE> Основы HTML </TITLE> ;

</HEAD>

<BODY>

…. (здесь будут другие теги тела программы)

</BODY>

</HTML>

Некоторые авторы, пишущие об языке HTML, советуют записывать теги прописными буквами, другие — используют строчные. Редактор HTML — Allaire HomeSite 4.5.1, например использует по умолчанию нижний регистр для записи тегов. При создании моих страниц использовались оба варианта написания тегов. Как видите, допустимо и то и другое. Современные броузеры допускают запись тегов в любом регистре. 

Уже позднее я узнала, что нельзя делать категоричные заявления по этому вопросу. Существуют теги и атрибуты «чуствительные» к написанию прописными или строчными буквами. Это регламентируется стандартами языка HTML, определенными Консорциум W3C.

Обращайтесь к первоисточнику!

Хорошее знание технического английского обязательно!

 При написании HTML-программ возникает необходимость вставки комментариев — поясняющих текстов, которые невидны при загрузки документа в броузер. Для этой цели служит тег <!>. Все, что заключено между символами <! и > считается комментарием и не отображается в броузере.

 Еще один тег, который очень важен в HTML-программе, но так же не предназначается для отображения какого-либо объекта в броузере — тег <META>. Этот тег служит специальным целям, а именно — указания языка, на котором написан документ, его кодовой страницы, ключевых слов, используемых поисковыми системами для классификации этого документа и т.п. Теги <META> обычно вставляются в HTML-программу на заключительном этапе создания Web-страницы —публикации.

 Для вставки в HTML-программу фрагмента программ, написанных на языке JavaScript или Viual Basic Script сценариев используют теги <SCRIPT> и </SCRIPT>.

Общая структура HTML-файла

Суммируя вышесказанное приведем общую структуру HTML-файл :

<HTML>

<HEAD>

<Мета-теги>

<Функции скриптов>

<TITLE>Заголовок документа</TITLE>

</HEAD>

<BODY>

Основная часть документа

</BODY>

</HTML>

Заголовки, абзацы, разрывы строк

Заголовки

Каждый пользователь компьютера, работающий в текстовом редактором Microsoft Word знаком с понятием стиля заголовка. В HTML тоже применяется это понятие для структурирования документа и выделения важности заголовка. Всего существуют 6 стилей заголовка. Каждый из них обозначается в HTML-документе парными тегами  и  Здесь i обозначает важность стиля. H1 обозначает самый важный стиль заголовка, H2 — стиль заголовка второго уровня, а H6 — стиль заголовка самого нижнего уровня.

В подавляющем большинстве случаев для заголовков Web-страниц используют три первых уровня заголовков 

 и 

. Объясняется это тем, что размеры шрифтов оставшихся заголовков (теги

 — 

) меньше размера обычного шрифта Web-страницы.

Вот как в документ можно добавить очень важный заголовок.

An important heading

А вот результат.

An important heading

Посмотрим другие примеры:

Это заголовок второго уровня

Это заголовок третьего уровня

Это обычный текст

Это заголовок четвертого уровня

Это заголовок пятого уровня

Это заголовок шестого уровня

Абзацы

Понятие абзаца в HTML-документе также аналогично понятию абзаца в Microsoft Word. Абзац обозначается в документе парными тегами 

 и 

 . Впрочем, применение закрывающего тега не является строго обязательным. 

НО! Специфика тега 

заключается в том, что после текста, который находится в его пределах, пустая строка добавляется автоматически.

Следует помнить и о другой особенности текстовых абзацев: когда текст достигает правой границы окна Web-браузера. переход на новую строку осуществляется автоматически, независимо от расположения тега

.

Для отдельного абзаца можно указать тип, размер и цвет шрифта отличным от стиля остального документа.

Например:

My greetings to you!

А вот и результат —

My greetings to you!

Разрывы строк

Если в середине строки появилась необходимость ее разорвать — используйте одиночный тег переноса строки .(Это соответствует нажатию клавишной комбинации [Shift]-[Enter] в текстовых процессорах Word). Код 

не означает конца логического абзаца, и за строкой с этим кодом дополнительная пустая строка не появится.

Вот и нарушено первое правило!

Кроме тега  не требует закрытия тег добавления изображения, использование закрывающего тега абзаца

 также не является строго обязательным.

HTML довольно «демократичен»: неправильный тег или неправильное вложение тегов обычно не приводят к «зависаниям» браузера, а только вызывает сообщение об ошибке в строке состояния окна браузера вашего Интернет-читателя. Разумеется ошибки могут привести к неправильному форматированию HTML-документа.

Примером использования тега  может служить написание почтового адреса или стихотворения.

Браузеры показывают текст в своем окне, автоматически осуществляя перенос слов. Поэтому, если вы считаете необходимым запретить разрыв блока текста с пробелами между словами — воспользуйтесь специализированным символом  — символом неразрывного пространства (non-breaking space). Например,

Освежающий и бодрящий напиток Coca Cola,

приобрел широкую популярность в нашей стране.

А вот и результат:

Освежающий и бодрящий напиток Coca Cola, приобрел широкую популярность в нашей стране.

Не следует использовать цепочку символов &nbsp; для выравнивания текста в окне броузера. Для этой целеи рекомендуется использовать таблицы стилей.

Предварительно отформатированный текст

Достоинством браузеров является их способность самостоятельно распределять текст в окне браузера. Но иногда вы не нуждаетесь в этой услуге, хотите самостоятельно определить представление вашего текста в окне браузера. Например, вы хотите представить код программы в наиболее удобочитаемом виде. Такую возможность вам предоставляет тег <pre>. Посмотрим пример:

<pre>

void Node::Remove()

{

if (prev)

prev->next = next;

else if (parent)

parent->SetContent(null);

if (next)

next->prev = prev;

parent = null;

}

</pre>

Это выполнится так

void Node::Remove()

{

if (prev)

prev->next = next;

else if (parent)

parent->SetContent(null);

if (next)

next->prev = prev;

parent = null;

}

Красиво, правда? Привлекает внимание, удобно читать программный код. Это сделано при помощи таблицы стилей.

Обратите внимание на то, что в случае использования тега <pre> , текст отображается броузером точно в таком виде, как он был создан в HTML-документе. Сохраняются все пробелы,табуляцииУ и переводы строк. Исключением является только новая строка, следующая сразу же за тегом <pre>. Таким образом, эти два примера кода HTML на эране дисплея будут показаны одинаково:

<pre>предварительно отформатированный текст</pre>

<pre>

предварительно отформатированный текст

</pre>

А именно:

предварительно отформатированный текст

предварительно отформатированный текст

У этого тега существует необязательный атрибут, указывающий желаемый размер строки в символах, а именно:

<PRE width=»N»>

Попробуем?

Предмет истории есть жизнь народов и человечества.

Непосредственно уловить и обнять словом — описать жизнь не только

человечества, но одного народа, представляется невозможным.

Обычно, для отображения предварительно отформатированного текса используются моноширинные шрифты, все символы которого имеют одинаковую ширину. Для того, чтобы броузер «не забыл» об этом следует применить таблицы стилей. Например, это можно сделать так:

<style type=»text/css»>

pre { color: green; background: white; font-family: monospace; } </style>

Результат такого определения стиля для тега <pre> вы можете видеть на этой странице.

Если вы устанавливаете цвет текста, желательно также установить цвет фона. Это поможет вам избежать ситуации, когда буквы будут практически неразличимы на близком к ним по цвету фоне.

Совет № 2. Вместо того, чтобы устанавливать цвет фона для элемента <pre>, установите цвет фона для элемента <body>. Например, это можно сделать так:

<style type=»text/css»>

body { color: black; background: white; }

pre { color: green; font-family: monospace; }

</style>

Выделенный текст

В тех случаях, когда необходимо обратить особое внимание пользователя на тот или иной фрагмент текста, следует использовать стандартные средства форматирования.

Стандартные средства форматирования представлены специальными тегами, которые обязательно являются парными (т.е. имеются открывающий и закрывающий теги).

Чтобы увеличить размер шрифта на один пункт, используйте тег <big>.

Чтобы выделить текст полужирным шрифтом, воспользуйтесь тегом <b> или тегом <strong>.

Чтобы выделить текст курсивом, воспользуйтесь тегом <i> или тегом <em>.

Вы заметили, что в данном случае выделение текста тегами <i> и <em> различаются?

Объяснение простое — в HTML-коде этой страницы используется внедренная таблица стилей, в которой для тега <em> указан шрифт: полужирный курсив.

Шрифт пишущей машинки можно имитировать с помощью тега <tt>.

С помощью тега <small> размер шрифта можно уменьшить на один пункт.

Существуют и другие теги, которые также предназначены для выделения текста.

Кроме того, в HTML включена поддержка математических символов и научных обозначений. Для построения простейших равенств и выражений вам могут пригодиться два тега <sub> (нижний индекс) и <sup> (верхний индекс). Например:

A2+B2=C2

CO2=углекислый газ

В HTML-коде это записано так:

<p align=»center»>A<sup>2</sup>+B<sup>2</sup>=C<sup>2</sup></p>

<p align=»center»>CO<sub>2</sub>=углекислый газ</p>

Если вы намерены придерживаться хорошего стиля программирования Web-страниц (с помощью HTML и XHTML), то вместо тегов форматирования используйте каскадные таблицы стилей.

На сегодняшний день многие старые теги HTML, которые предназначались специально для выделения текста, вытеснены новыми возможностями форматирования с помощью каскадных таблиц стилей.  

Администратор

Добавить комментарий