| Главная « HTML - язык гипертекста |  |
 |
Техника разметки текста с помощью HTML |
HTML (язык гипертекстовой разметки) — это основной язык, с помощью которого создаются веб-страницы. Страница, которую пользователь видит в своем браузере, может состоять из множества разных файлов — например, изображений, анимационных роликов, сценариев JavaScript, апплетов и т. д. - но основой страницы практически всегда является документ HTML. Другие языки разметки (прежде всего многочисленные приложения XML) пока еще слабо поддерживаются браузерами и поэтому не вытесняют HTML на компьютерах обычных пользователей.
CSS (каскадные таблицы стилей) — это язык, предназначенный для оформления веб-страниц и некоторых других видов документов. Разработчик стандартов HTML и CSS, Консорциум Всемирной Паутины (The World Wide Web Consortium, W3C) рекомендует разделять структуру и представление — т. е. кодировать в HTML только логическую структуру документа, а все, что связано с отображением документа на экране или представлением на других устройствах, выполнять средствами CSS.
 |
Этот сайт — не учебник по HTML и CSS. Хотя на этой странице содержится справочный материал по основам обоих языков, все же для их настоящего изучения рекомендую обратиться к официальной документации Консорциума W3C. Большая часть материала этого сайта предназначена для тех, кто уже хотя бы немного владеет HTML и CSS. |
Аббревиатура «HTML» расшифровывается как «HyperText Markup Language» (в переводе на русский язык — «язык разметки гипертекста»). Взрывной рост Всемирной Паутины в начале 1990-х во многом обусловлен широким распространением этого языка и браузеров, отображающих написанные на нем страницы.
Все три слова в названии языка — «структурный», «разметка» и «гипертекст» - нуждаются в дополнительных пояснениях, которые сейчас и будут даны.
|
Гипертекст — это просто текст со ссылками. Текст практически каждой веб-страницы является типичным примером гипертекста: можно щелкнуть по ссылке, и вы немедленно перейдете к другой странице, к загружаемому файлу или еще к какому-нибудь ресурсу, на который указывает эта ссылка. |
Теперь поговорим о разметке. Как вам известно, в коде документа HTML находится не только сама информация, которую пользователь увидит на веб-странице, но и некоторые инструкции о том, как браузер пользователя будет обрабатывать эту информацию.
Например, можно включить в документ такую конструкцию, как заголовок заключенного в тэги H1. Пользователь увидит на странице только сам текст заголовка. Окружающие его тэги H1 не отображаются на странице, но снабжают браузер информацией, позволяющей правильно интерпретировать этот текст. Они обозначают, что такой текст является заголовком первого уровня. Большинство современных графических браузеров по умолчанию выделяют этот заголовок полужирным шрифтом увеличенного кегля. (Забегая вперед, заметим, что многие поисковые системы придают заголовкам больший вес, чем обычному тексту, а заголовкам первого уровня — в свою очередь, больший вес, чем прочим заголовкам.)
|
Такие конструкции, которые сами не являются содержанием страницы, но указывают браузеру, как интерпретировать содержание, и называются разметкой. |
|
Разметка — это код, который сопровождает содержание документа и предоставляет браузеру (или другой обрабатывающей программе) информацию о том, как следует интерпретировать те или иные фрагменты содержания. |
Язык HTML предназначен в первую очередь для структурной разметки, т. е. для обозначения каждого элемента в соответствии с его местом и ролью в структуре документа. Например, тэг <p>…<⁄p> обозначает, что элемент является просто абзацем обычного текста, тэг <ul>…<⁄ul> — что элемент является перечнем, тэг <blockquote>…<⁄blockquote> — что элемент является цитатой и т. д.
В HTML есть также тэги, управляющие внешним видом отдельных элементов: например, тэг <i>…<⁄i> выделяет текст курсивом, тэг <font>…<⁄font> изменяет различные параметры шрифта, а тэг <br ⁄> вставляет перевод строки. Все такие тэги не относятся к структурной разметке, и применять их не рекомендуется. Все, что касается оформления веб-страницы, ее внешнего вида, можно и нужно делать с помощью CSS.
|
Одна из многочисленных причин, почему оформление следует делать средствами CSS, заключается в том, что оформительские возможности HTML очень скудны. Например, с помощью HTML можно сделать рамки вокруг таблицы — но нельзя сделать рамки с разных сторон разными. А что касается оформления текста (собственно, ему и посвящен этот сайт) — HTML не предоставляет для этого практически никаких средств. С ним нельзя сделать абзацный отступ, разрядку, управлять междустрочным интервалом и междусловными пробелами… Практически все типографское оформление шрифта можно сделать только с помощью CSS. |
Структурная разметка не имеет никакого отношения к внешнему виду документа. Документ может быть отображен на экране компьютера, написан от руки или напечатан на пишущей машинке; в конце концов, его можно прочитать вслух — но все заголовки в нем останутся заголовками, все neречни — перечнями, а цитаты — цитатами. Структурная роль элементов документа, в отличие от оформления, никак не меняется в зависимости от того, какими средствами просматривают этот документ.
|
Структурная разметка — это разметка, обозначающая роль каждого элемента в структуре документа. |
Иными словами, структурная разметка говорит о том, чем является тот или иной элемент, а не о том, как его следует или не следует отображать. Грамотная структурная разметка обеспечивает независимость документа от устройства вывода.
Структурная разметка не говорит о том, как конкретно должен быть выделен текст. Но это не мешает разработчику оформить его нужным образом с помощью CSS. Технология CSS позволяет даже написать отдельные таблицы стилей для каждого возможного устройства отображения.
|
Структурная разметка и оформление не противоречат друг другу. На грамотной веб-странице должно быть и то, и другое. Структурную разметку рекомендуется выполнять средствами HTML, а оформление — средствами CSS. |
Хорошая структурная разметка также облегчает автоматическую обработку документа. Например, когда необходимо пронумеровать все заголовки или составить оглавление документа — программа легко справится с этой задачей, если заголовки помечены соответствующими структурными тэгами. Можно при этом включить в середину документа новые заголовки — программе не составит труда перенумеровать все заново и обновить оглавление. Если не использовать для заголовков правильные тэги H1, H2 и т. д., то их нумерация или составление оглавления превратится в кропотливую и неэффективную ручную работу.
|
Книги, которые следует прочитать:
|
