HTML (HyperText Markup Language) - язык разметки гипертекста -
предназначен для создания Web-страниц.
Под гипертекстом в этом случае понимается текст, связанный с другими
текстами указателями-ссылками.
HTML представляет собой достаточно простой набор кодов, которые описывают структуру документа. HTML позволяет выделить в тексте отдельные логические части (заголовки, абзацы, списки и т.д.), поместить на Web-страницу подготовленную фотографию или картинку, организовать на странице ссылки для связи с другими документами.
HTML не задает конкретные и точные атрибуты форматирования документа.
Конкретный вид документа окончательно определяет только программа-броузер
на компьютере пользователя Интернета.
HTML также не является языком программирования, но web-страницы могут включать в
себя встроенные программы-скрипты на языках Javascript и
Visual Basic Script и
программы-апплеты на языке Java.
Даже, если вы не собираетесь в дальнейшем редактировать "вручную" текст HTML (предполагая использовать графические редакторы), знание языка HTML даст вам возможность как лучше использовать эти средства, так и увеличит ваши шансы сделать HTML-документ более доступным и "читаемым" при просмотре броузерами разных фирм.
Основными компонентами HTML являются:
Теги представляют собой зарезервированные последовательности символов,
начинающиеся с < (знака меньше) и заканчивающиеся >
(знаком больше).
Закрытие тега
отличается от открытия только наличием символа '/'.
Предположим, у нас есть гипотетический атрибут
форматирования
текста,
управляемый кодом <X>, и мы хотим применить его к словам "Это мой
текст".
HTML-последовательность кодов и собственно текста будет выглядеть так:
<X>Это мой текст</X>
Теги могут вкладываться друг в друга иерархически, но без пересечений, то есть
допустимо вложение вида <teg1><teg2></teg2>
</teg1>, но не <teg1><teg2>
</teg1></teg2>.
Действие вложенных тагов объединяется.Например, если внутрь тега,
создающего жирное начертание шрифта, вложен тег курсива, то в результате
получится жирный курсив.
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> <HEAD> <Мета-теги> <Функции скриптов> <TITLE>Заголовок документа</TITLE> </HEAD> <BODY> Основная часть документа </BODY> </HTML>
Каждый пользователь компьютера, работающий в текстовом редактором Microsoft Word знаком с понятием стиля заголовка. В HTML тоже применяется это понятие для структурирования документа и выделения важности заголовка. Всего существуют 6 стилей заголовка. Каждый из них обозначается в HTML-документе парными тегами <Hi> и </Hi> Здесь i обозначает важность стиля. H1 обозначает самый важный стиль заголовка, H2 - стиль заголовка второго уровня, а H6 - стиль заголовка самого нижнего уровня.
В подавляющем большинстве случаев для заголовков Web-страниц используют три первых уровня заголовков <H1>, <H2> и <H3>. Объясняется это тем, что размеры шрифтов оставшихся заголовуов (теги <H4> - <H5>) меньше размера обычного шрифта Web-страницы.
Вот как в документ можно добавить очень важный заголовок.
<H1>An important heading</H1>
А вот результат.
Посмотрим другие примеры:
Это обычный текст
Понятие абзаца в HTML-документе также аналогично понятию абзаца в
Microsoft Word. Абзац обозначается в документе парными тегами
<P> и </P> . Впрочем, применение
закрывающего тега не
является строго обязательным.
НО! Специфика тега <P> заключается в том, что после
текста, который
находится в его пределах, пустая строка добавляется
автоматически.
Следует помнить и о другой особенности текстовых абзацев: когда текст достигает
правой границы окна Web-броузера. переход на новую строку осуществляется
автоматически, независимо от расположения тега <P>.
Для отдельного абзаца можно указать тип, размер и цвет шрифта отличным
от стиля остального документа.
Например:
<P ALIGN="CENTER"><B><I><FONT FACE="Arial" SIZE=6 COLOR="#С07080">My greetings to you!</P>А вот и результат -
Если в середине строки появилась необходимость ее разорвать - используйте одиночный тег переноса строки <BR>.(Это соответствует нажатию клавишной комбинации [Shift]-[Enter] в текстовых процессорах Word). Код <BR> не означает конца логического абзаца, и за строкой с этим кодом дополнительная пустая строка не появится.
Вот и нарушено первое правило!
Кроме тега <BR> не требует закрытия тег
добавления изображения
<IMG>.
Использование закрывающего тега абзаца </p> также не является строго
обязательным.
HTML довольно "демократичен": неправильный тег или неправильное вложение тегов обычно не приводят к "зависаниям" броузера, а только вызывает сообщение об ошибке в строке состояния окна броузера вашего Интернет-читателя. Разумеется ошибки могут привести к неправильному форматированию HTML-документа.
Примером использования тега <BR> может служить написание почтового адреса или стихотворения.
Возврат в начало страницы Возврат на главную страницу сайтаБроузеры показывают текст в своем окне, автоматически осуществляя перенос слов. Поэтому, если вы считаете необходимым запретить разрыв блока текста с пробелами между словами - воспользуйтесь специализированным символом - символом незазрывного пространства (non-breaking space). Например,
Освежающий и бодрящий напиток Coca Cola, приобрел широкую популярность в нашей стране.
А вот и результат:
Освежающий и бодрящий напиток Coca Cola, приобрел широкую популярность в нашей стране.Более подробную информацию о специальных зарезервированных символах можно получить здесь.
Cовет
Не следует использовать цепочку символов для выравнивания текста в окне броузера. Для этой целеи рекомендуется использовать таблицы стилей.Достоинством броузеров является их способность самостоятельно распределять текст в окне броузера. Но иногда вы не нуждаетесь в этой услуге, хотите самостоятельно определить представление вашего текста в окне броузера. Например, вы хотите представить код программы в наиболее удобочитаемом виде. Такую возможность вам предоставляет тег <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), то вместо тегов форматирования используйте каскадные таблицы стилей.