Позволяет обойти эту особенность и отображать текст как требуется разработчику.

 - определяет текстовый абзац. Тег 
Является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.
 
..
..

 - HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег 
 представляет собой наиболее важный заголовок первого уровня, а тег 
 служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги 
,…,
 относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. Тег имеет атрибут align
, который определяет выравнивание заголовка, может принимать значения left
 - выравнивание заголовка по левому краю, center
 - выравнивание по центру, right
- выравнивание по правому краю, justify
- выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для заголовка, длина которого более, чем одна строка.

 

 - представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей. Тег имеет 3 атрибута: color
 - устанавливает цвет текста, face
 - определяет гарнитуру шрифта, size
 - задает размер шрифта в условных единицах.
 

 - помечает текст как цитату или сноску на другой материал. Такое выделение удобно для изменения стиля текста через CSS, а также применяется для разделения кода HTML на структурные элементы. Браузеры обычно устанавливают текст внутри контейнера  курсивом.
 

 - указывает, что последовательность символов является аббревиатурой. С помощью атрибута title
 дается расшифровка сокращения, что позволяет понимать аббревиатуру тем людям, которые с ней не знакомы. Кроме того, поисковые системы индексируют полнотекстовый вариант сокращения, что может использоваться для повышения рейтинга документа.
 
По умолчанию, текст заключенный в контейнере > подчеркивается пунктирной линией.

 
Ниже приведу код, в котором я использовал все эти теги:
 
 
 
 
 
 
HTML and CSS are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages and Web Applications. Learn more below about: 
 
What is HTML?
 
HTML is the language for describing the structure of Web pages. HTML gives authors the means to:
 
 
Publish online documents with headings, text, tables, lists, photos, etc.
 
Retrieve online information via hypertext links, at the click of a button.
 
Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc. 
 
Include spread-sheets, video clips, sound clips, and other applications directly in their documents. 
 
 
With HTML, authors describe the structure of pages using markup. The elements of the language label pieces of content such as “paragraph,” “list,” “table,” and so on.
 
What is XHTML?
 
XHTML is a variant of HTML that uses the syntax of XML, the Extensible Markup Language. XHTML has all the same elements (for paragraphs, etc.) as the HTML variant, but the syntax is slightly different. Because XHTML is an XML application, you can use other XML tools with it (such as XSLT, a language for transforming XML content).
 
What is CSS?
 
CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup язык language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation. 
 
What is WebFonts?
 
WebFonts is a technology that enables people to use fonts on demand over the Web without requiring installation in the operating system. W3C has experience in downloadable fonts through HTML, CSS2, and SVG. Until recently, downloadable fonts have not been common on the Web due to the lack of an interoperable font format. The WebFonts effort plans to address that through the creation of an industry-supported, open font format for the Web (called "WOFF").
 
 

А вот и визуальный результат.
 
Лекция подошла к концу, надеюсь приобретённые знания вам пригодятся! В следующей лекции я расскажу вам о том, что в себе хранит тег , научимся выполнять всевозможные манипуляции с изображениями, и познакомимся с таблицами.
 
Здравствуйте дорогие читатели. Как я и обещал в предыдущей лекции сегодня расскажу о теге , о всевозможных манипуляциях с изображениями и о работе с таблицами.
Вы узнаете какая должна присутствовать минимальная структура html документа. Подробно и с примерами разберем каждый необходимый ее элемент. Также поговорим о том, как правильно создавать файлы и страницы сайта.
 Структура HTML документа
Давайте разберем структуру html документа чтобы понимать, как все работает. Вы узнаете, какой каркас должен присутствовать на странице чтобы она считалась валидной (правильной
).
Чтобы создать любую веб-страницу, в ней должен присутствовать минимальный набор тегов. Они расположены в примере ниже.

 

 
 
 
 
 
 
Как создать сайт в интернете
 
 

Браузер сам интерпретирует все эти теги и выводит их в одном для пользователя виде информации. Вы и сами замечали, что, когда заходите на сайт, на экране не отображаются эти элементы. Вы видите только красивую обертку, которую выводит браузер.
 
 Визуальный пример html страницы
 Тег DOCTYPE
Тег DOCTYPE всегда идет в самом начале веб-страницы. Он необходим для указания типа текущего документа. А также помимо этого браузер понимает какая версия html используется.
В последней версии 5 он имеет такой вид:
 Тег HTML
Является контейнером, который заключает в себя все содержимое веб-страницы. Открывающие и закрывающие элементы в документе не обязательны. Однако хороший стиль требует их использования.
Как правило, открывающий тег html идет вторым после определения документа при помощи doctype
. Закрывающий всегда идет на странице последним.
Этот тег сообщает браузеру, где наш html документ начинается и где заканчивается. Поэтому все остальные элементы (кроме doctype
) должны быть вложены внутри этого контейнера.
 Тег head
Тег head предназначен для хранения других элементов, цель которых помочь браузеру при работе с данными. Также внутри контейнера находятся мета теги, которые используются для хранения информации. Она предназначена для браузеров и поисковых систем.

Содержимое head
 не отображается напрямую на веб-странице, кроме тега title
. Он отвечает за заголовок страницы.
В общем, в этом элементе хранится вся техническая информация о странице. Например, тип кодировки html страницы. Он будет говорить браузеру, как ему лучше декодировать документ. Также сюда мы можем и различные скрипты.
 Тег title
У head
 есть один обязательный компонент. Это тег title. Он отвечает за то, как будет выглядеть html заголовок страницы. То, что вы напишите сюда, будет отображаться во вкладке браузера.
Отнеситесь к этому серьезно!
В данном элементе рекомендую использовать название не более 60 символов с пробелами. Это нужно чтобы оно не обрезалось в поисковой выдаче. И обязательно вписываем сюда осмысленные слова. То есть конкретно пишем, о чем будет страница.

 
 

Конечно же, при этом нужно вставлять ключевые слова и делать свое название более привлекательным. Иначе вы просто рискуете потерять трафик с поиска.
 Тег meta
Еще один элемент, это тег meta. Он не парный и особой ценности не представляет. Однако наиболее важными элементами являются его атрибуты.

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

 
 
 

Обратите внимание, как указывается параметр. Его вставляем внутри тега и перед правой закрывающей скобкой. Далее ставим знак равно и в кавычках указываем кодировку документа.
Обязательно ее указывайте в своих документах. Иначе на вашем сайте вместо текста появятся некрасивые иероглифы (кракозябры
).
 Тег body
Чуть ниже идет тег body. Это основное тело документа. Внутри него находится тот контент, который виден пользователю. Это может быть текст, картинки, ссылки, видео и так далее.
Обратите внимание, что body всегда идет ниже тега head
. То есть сначала идет техническая информация о странице и только потом основной контент для пользователя. Но никак не наоборот!
Внутри body обязательно должен присутствовать тег h1. Это заголовок материала. То есть, как будет называться ваша статья. Рекомендую название делать не более 55 символов с пробелами.

 Синтаксис html
Немного стоит упомянуть и про синтаксис html. Сразу старайтесь располагать теги в таком удобном виде, как на примере выше. Конечно же, можно расположить их и в хаотичном порядке.

 


Здесь размещается содержание документа, которое видно всем пользователям.

Браузеру будет все равно.
Он по-любому отобразит страницу правильно. Но вам самим будет очень неудобно редактировать html код страницы. Поэтому рекомендую не лепить и делать аккуратно.
Отдельные теги всегда располагайте в разных строчках. Причем соблюдайте правило вложенности
. Все вложенные теги делайте отступом в одну табуляцию от родительского элемента.

 

 
 
 
 
 
 
Название материала
 
Основной текст
 

То есть тег head
 должен идти отступом в одну табуляцию относительно тега html
. Body
 идет на уровне с head
 поскольку он тоже вложен в контейнер html
.
В общем, для быстрой и удобной работы с исходным кодом обязательно соблюдайте отступы по уровню вложенности элементов.
Исключение лишь могут составлять head
 и body
. Они используются всего лишь один раз на странице. Поэтому чтобы не уходить далеко вправо при большой вложенности, эти элементы можно делать без отступов.

 


 
 


 
Основной текст


При большой вложенности этот метод поможет сэкономить место и не потеряться в структуре html.
Как вы знаете, теги можно вкладывать друг в друга. Например, текст и картинка находятся в разных тегах. Однако при этом они имеют общий родительский элемент.
Если тег открывается, то он должен быть закрыт. Если он пустой и без зарывающей части, то в такой тег ничего вложить нельзя.
Важно четко соблюдать порядок!
Если в какой-то тег вкладывается другой, то сначала идет открывающая часть одного тега. Затем открывающая часть другого и так далее. Только потом их нужно закрывать. Но делать это нужно уже в обратном порядке. То есть сначала закрываем второй тег и только в конце доходим до первого.
Правильный пример:


 
 
Здесь размещается содержание документа, которое видно всем пользователям.

Неправильный пример:


 
 
Здесь размещается содержание документа, которое видно всем пользователям.

 
Кроме того, в один тег могут быть вложены несколько элементов. Но принцип тут тот же самый. Сначала мы открываем его. Затем вкладываем туда несколько тегов и потом закрываем.
Для наибольшей удобности дополнительно можно использовать html комментарии в коде. Например, прописать за что отвечает данный кусок кода. Это очень полезно при разработке.
Сам комментарий может быть, как однострочным, так и многострочным.

 


 
 


 
 
Основной текст


Прописывается он между конструкциями .

 Как создать файл html
Возможно, некоторые из вас не знают, как создать файл html. Для этой задачи есть много специальных программ:
Brackets
Блокнот
Notepad++
Sublime Text
Atom и другие

Если у вас Windows, то Блокнот будет уже доступен по умолчанию. Но им не удобно пользоваться. Рекомендую для начала использовать бесплатный редактор html страниц Notepad++. В нем есть много возможностей для удобной работы с кодом.
Когда запустите редактор, то перед вами уже будет новый пустой файл. Пропишите в нем тот скелет html страницы (каркас
), который мы выше разбирали. Он должен всегда присутствовать.

 

 
 
 
 
 
 
Как создать сайт в интернете
 
Здесь размещается содержание документа, которое видно всем пользователям.
 

Текст можете изменить под себя. В общем, это будет самая простая html страница.
 HTML кодировка
При создании страниц всегда прописывайте кодировку в meta
 теге. Это служебный тег, который вставляют в head
.
Вообще, этот meta
 элемент многогранный. Он может отвечать не только за кодировку, но и за многие другие вещи. Однако об этом поговорим в следующих статьях.
Сейчас у нас он играет роль указателя кодировки. Здесь есть специальная запись. Она говорит браузеру о том, что данный документ создан в кодировке utf-8
.

 
Для чего вообще нужна кодировка?
Не секрет, что во всем мире пишут и разговаривают на разных языках. Если мы создаем страницу и пишем на русском языке, то в Германии будут создавать и писать уже на немецком. В других странах уже свой язык.
Раньше при создании html страницы нужно было указывать кодировку, что мы пишем на русском языке. Немцам нужно было указывать, что они пишут на немецком и так далее.
Когда мы заходим на страницу, браузер уже понимает, на каком языке написан сайт. Также он понимает какой язык для текста используется. Соответственно, он пытается отобразить этот текстовый контент в зависимости от заданной кодировки.
К сожалению, это не всегда получалось.
Если бы мы заходили на китайские сайты, то у нас вместо их символов могли высвечиваться черные квадраты или знаки вопросов. То есть браузер просто не понимал, что это за символы.
 
 Неправильно задана html кодировка
Как решение этой проблемы была создана универсальная кодировка utf-8.
Когда она стала уже стандартом, отпала необходимость указывать конкретную кодировку для определенного языка. Достаточно было указать универсальную utf-8
 и у вас сайт отображался бы нормально во всех браузерах.
При этом упрощается еще работа и с базой данных. Поэтому здесь имейте в виду, что кодировку мы всегда будем указывать в utf-8. Но тут нужно обратить свое внимание еще на одну вещь.
 Сохраняем html utf-8
Чтобы все работало и браузер отображал страницу, желательно сохранить сам html документ в utf-8. В этом программа Notepad ++ нам очень хорошо помогает.
Здесь есть пункт «Кодировки». Если у вас сейчас кодировка не стоит (как у меня на нижнем рисунке
), то щелкните по пункту «Преобразовать в UTF-8 без BOM».

В этом случае ваш html файл будет преобразован в кодировку utf-8. Сохраните изменения.
В правом нижнем углу вы найдете надпись «Dos\Windows ANSI as UTF-8». Это значит, что документ создан в режиме utf-8 и отображение будет нормальным.
И сразу такой совет!
Зайдите в «Опции» —> «Настройки». Здесь есть вкладка «Новый документ». Сразу поставьте галочку на «UTF-8 без метки BOM». Так у вас все новые документы будут сразу создаваться в этой кодировке.

 Как сохранить html страницу

Имя файла может быть любое. Но по умолчанию и особенно если это главная страница сайта, то сохраняйте ее как index.html
.
Когда набираем адрес сайта без указания конкретной страницы, это значит, что мы запрашиваем страницу index.html. То есть, когда мы обращаемся к серверу, он развернет именно индексную страницу.
Если же мы указываем какую-то конкретную страницу, то в итоге она и будет выводиться. Но если адрес не указан, то будет возвращена индексная страница. Поэтому по умолчанию мы называем страницу index.html.
И как вы уже должны заметить, расширение файла должно быть html
. То есть в типе файла выбираем «Hyper Text Markup Language» и нажимаем «Сохранить».
 Как открыть html файл
Как открыть html файл чтобы посмотреть наглядное отображение страницы. Для этого используем любой браузер: Google Chrome, Opera, Edge, Mozilla Firefox, Safari и другие.
Не зря мы сохраняем файлы с расширением html. Ведь только этот тип документа воспроизводят браузеры. А сам язык HTML — это стандарт разметки страницы для последующего воспроизведения браузерами.
В общем, кликаем по файлу правой кнопкой мыши.
В меню наводим на «Открыть с помощью» и выбираем нужный вариант браузера. Если они не отобразятся, то кликаем на «Выбрать другое приложение». Там уже среди списка выбираем нужную программу для чтения html страниц.

Если же вам нужно отредактировать код, то выбираем подходящие редактор. Рекомендую использовать Notepad++.
 Как посмотреть html код страницы
Еще хочу вам рассказать, как можно посмотреть html код страницы прямо в браузере. Это очень полезно на практике. Например, узнать, какую структуру html кода использует тот или иной сайт.
Посмотреть код очень просто. Достаточно нажать сочетание клавиш Ctrl + U
. В новой вкладке вам откроется исходный код страницы сайта.
 
 Исходный код сайта
Еще можно в адресной строке прямо перед адресом страницы прописать:
Еще в браузерах есть встроенный инструмент веб-разработчика. Доступ к нему в меню у каждой программы будет разным. Однако клавишей F12
 этот инструмент откроется в любом браузере.
 
 Инструмент разработчика в браузере
Во вкладке «Elements» слева будет html код, а справа . Удобен такой инструмент тем, что в нем можно править код и сразу посмотреть результат. Также при редактировании могут высвечиваться подсказки. Это тоже полезно.
При создании сайта первое, что нужно представлять — это то, как формируется веб-страница. Это, своего рода, «фундамент» в сайтостроении. Поэтому прежде чем, углубляться в изучение более сложных технологий создания сайтов, рекомендуется иметь хотя бы базовые сведения о HTML. В данном уроке мы познакомимся с HTML
, разберем структуру документа HTML
 и на практических примерах закрепим полученные знания.
Что такое HTML?
HTML
 расшифровывается, как язык разметки гипертекста (от англ. HyperText Markup Language). Данный язык отвечает за то, как именно будет отображаться гипертекст на страницах сайта. Теперь давайте разберемся, что же такое гипертекст? Не секрет, что отдельная веб-страница может содержать много разнотипной информации, будь то текст, какие-то таблицы, графики, видеоролики, аудио и т.д. Так вот, всю эту информацию можно назвать одним словом — гипертекст.
Отметим, что HTML является именно языком разметки, а не языком программирования. В данном языке нет никаких логических функций и произвести какие-либо математические расчеты на нем невозможно. Страницы HTML имеют расширение .html
 или .htm
 и обрабатываются браузерами — IE, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera и др.
Теперь давайте разберемся как же браузер понимает, что и каким образом отображать на веб-странице? Это очень просто. Язык разметки гипертекста HTML имеет встроенные команды, их называют тегами. Именно по ним браузер и ориентируются.
Структура документа HTML
Любой HTML документ (веб-станица) должен иметь определенную структуру. Это позволит избежать возможных проблем при открытии страниц в браузерах. В качестве примера давайте рассмотрим страницу, которая содержит следующих HTML код:

 







...



Разберем по порядку, что входит в данную структуру:
1. Первое, что идет в документе HTML — указание версии (первая строка). Для корректной работы следует указывать данную строку при верстке веб-страницы.

3. Затем идет область для верхней части сайта (шапки). Для этого служит тег . В шапке мы указываем название нашей страницы, помещая заголовок страницы между тегами . Далее указывается кодировка HTML документа (пятая строка). Это делается для правильно отображения кириллицы. Закрываем область шапки тегом .
4. Мета-тег «description» — краткое содержание страницы, предназначен для поисковых систем. Данный тег является важным для поисковой оптимизации и его необходимо заполнять.
5. Мета-тег «keywords» — ключевые слова, которые могут встречаться на странице. Данный тег также предназначен для поисковиков. В настоящее время этот тег редко используется.
6. Тело страницы открывается тегом  и закрывается, соответственно, тегом . В теле веб-страницы размещается, как правило, основной контент — текст, видео, аудио и другая информация.
Таким образом, мы ответили на вопрос, что такое HTML и изучили структуру документа HTML. Полученная в данном уроке информация — это базовые понятия, без них не обойтись. О более сложных вещах мы поговорим в других уроках.
В этой статье мы рассмотрим структуру HTML документа
 и познакомимся с разными частями веб-страницы.
Структура документа HTML
В HTML4 веб-страница состоит из трёх главных частей:
Объявление типа документа (Document type declaration (DTD)
) сверху;
Тег HTML
, включающий в себя следующие элементы:
1. Головную часть (Head

);

2. Тело (Body

):
Посмотрите на пример, приведенный выше. Заметили красный и черный текст? Черным обозначено содержимое, а красным - теги из которых состоят элементы:


Объявление типа документа (1)
Первая строка в примере структуры HTML - не элемент, а объявление типа документа (также называемое декларацией DOCTYPE). Оно предоставляет информацию о версии HTML-документа и указывает браузерам спецификацию HTML. Правильный документ объявляет, какая версия языка используется.
Посмотрите
: Информация о DOCTYPE

Элемент HTML (2)
Весь документ содержится в элементе html
. Он часто называют корневым, и он не может находиться внутри любого другого элемента. Используется и в HTML
, и в XHTML документах
.
Внутри элемента html
 документ разделяется на «голову
» (head

) и «тело
» (body

).
Элемент Head (3)
Элемент head
 содержит описательную информацию о самом документе. То, что в нем упоминается, не должно отображаться в браузере, но передает ему некоторую информацию. Например, заголовок, используемые таблицы стилей, скрипты и другую информацию.
Элементы Meta (4)
Элемент структуры сайта HTML meta внутри head
 предоставляют информацию о метаданных. Meta-элемент
 может содержать разные виды информации. В примере, приведенном выше, он определяет кодировку символов (character encoding

), используемую в документе.
Примечание
: метаданные - это информация о документе, но не его содержание.
Элемент Title (5)
Head
 также содержит обязательный элемент title
. Согласно спецификации HTML
, каждый документ должен включать в себя заголовок. Заголовок, который указан в этом элементе, показывается в вкладке браузера.
Элемент Body (7)
body
 содержит все, что мы хотим вывести на веб-странице. Это часть HTML-документа
, которая отображается в браузере.
Запомните
Тег HTML
 - указывает браузеру, как контент должен отображаться в нем.
Любой HTML-документ
 состоит из трех частей - определение типа документа, голова и тело.
HTML 5
 определяется с помощью , в то время как HTML 4
 имеет три разных способа определения типа - Strict
, Transitional
 и фреймовая структура HTML
.
 - это корневой элемент, который не может помещаться в любой другой.
Элементы  и  вкладываются внутрь элемента .
 содержит информацию для браузера
 содержит все, что должно быть отображено в окне браузера.
Элемент HTML
 - это комбинация открывающего тега, содержимого и закрывающего тега.
Декларация Doctype
 сообщает браузеру, какому стандарту он следует.
 может содержать заголовок, таблицы стилей, скрипты и метаданные.
Метаданные - это информация о документе, но не его содержимое.
Перевод статьи “HTML Document Structure – Post #2 – HTML Tutorials
” был подготовлен дружной командой проекта .
 
Хорошо
Плохо

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

 
Управляющие конструкции языка HTML (Hyper Text Markup Language) называются тегами (дескрипторами) и вставляются непосредственно в текст документа. Все теги заключаются в угловые скобки <…>. Сразу после открывающей скобки помещается ключевое слово, определяющее тег, например
.

 
Teги HTML бывают парными и непарными. Непарные теги оказывают воздействие на весь документ или определяют разовый эффект в том месте, где они вставлены. При использовании парных тегов в документ добавляются открывающий и закрывающий теги, которые воздействуют на часть документа, заключенную между ними. Закрывающий тег отличается от открывающего наличием символа "/" перед ключевым словом (
). Закрытие парных тегов выполняется так, чтобы соблюдались правила вложения:

 
Текст
 
К открывающему тегу может быть добавлен атрибут, представляющий собой дополнительные ключевые слова, отделяемые от ключевого слова, определяющего тег, и от других атрибутов пробелами и размещаемые до завершающего тег символа ">". Способ применения некоторых атрибутов требует указания значения атрибута. Значение атрибута отделяется от ключевого слова атрибута символом "=" и заключается в кавычки.
 
<Н1 ALIGN="LEFT">
 
При отображении документа HTML сами теги не отображаются, но влияют на способ отображения документа HTML.
 
Существует два способа формирования документов HTML.
 
Первый способ состоит в разметке существующего или создаваемого документа вручную. Эта работа выполняется в текстовом редакторе или редакторе HTML.
 
Второй способ заключается в формировании документа непосредственно на экране и автоматической его разметке. В этом способе необязательно знание языка HTML. Разметка выполняется специальным редактором, работающим по принципу WYSIWYG, например, FrontPage Express.
 
Во втором способе используются средства форматирования вместо средств описания, что может приводить к нежелательным последствиям.
 
Воспроизведение документа HTML выполняется программами - броузерами, например Internet Explorer.
Простейший правильный документ HTML, содержащий все теги, определяющие структуру, выглядит следующим образом:
 

 
 
 Текст документа
 
 
 
Здесь использованы ключевые слова:
 
HTML - начало и конец документа HTML;
 
HEAD - начало и конец раздела заголовка;
 
TITLE - начало и конец общего заголовка документа;
 
BODY - начало и конец тела документа.
Большинство элементов языка HTML описывает части содержания документа и помещаются между тегами  и  (структурный элемент BODY).

Основными функциональными элементами документа HTML являются заголовки и абзацы. Язык HTML поддерживает шесть уровней заголовков, которые задаются при помощи тегов от 
 до 
. В Web-документе они отображаются шрифтом разного размера.

 
Обычные абзацы задаются с помощью парного тега 
В HTML нет средств для задания абзацного отступа. Абзацы отделяются пустой строкой. Закрывающий тег 
 рассматривается как необязательный. Подразумевается, что он стоит перед тегом, который задает очередной абзац. Если в тексте присутствует символ конца строки, при воспроизведении в броузере он рассматривается как простой пробел. Для перехода на другую строку используется непарный тег 
. В качестве ограничителя абзацев может использоваться горизонтальная линейка, задаваемая тегом 
, например:

 

 
Этот тег задает горизонтальную линейку высотой в 10 пикселов, занимающую половину ширины окна и расположенную справа.
 
 
Как только в Web-страницу будет встроена гиперсвязь
, документ можно назвать гипертекстом. Гиперссылка может указывать:
 
на позицию в своем документе (внутренние гиперссылки),
 
на другой документ на своем сервере,
 
на произвольный объект по любому адресу Internet.

 
Гиперссылки могут быть оформлены как абсолютные
или относительные
. Для создания гиперссылки необходим адрес документа, на который устанавливается ссылка. Этот адрес называется URL
 - Uniform Resource Locator.
 
Абсолютный URL
 - это полный Internet-адрес со всей информацией, требуемой клиенту для того, чтобы отыскать сервер и успешно установить с ним связь.
Относительный URL
 используется для адресации в пределах документа или совокупности документов на одном сервере.
 
Полный Internet-адрес можно получить лишь тогда, когда к относительному адресу добавляется базовый. Web-броузер при необходимости в большинстве случаев сам добавляет необходимый базовый адрес, чтобы получить полный адрес в Internet.
 
Относительные URL используются обычно внутри HTML-документа, например, для того, чтобы организовать переход из оглавления к конкретной главе. Базовый адрес можно определить с помощью дескриптора  в заголовке HTML-документа.
 
Абсолютные URL следует использовать во всех тех случаях, когда вы ссылаетесь на документы другого сервера в Internet.
 
Гипертекстовая ссылка задается парным тегом , который содержит обязательный атрибут HREF=. В качестве значения атрибута используется адрес URL документа, на который указывает ссылка. Она может указывать на произвольный документ, располагающийся на любом общедоступном узле сети, например:

 


 
Здесь задан адрес в абсолютной форме. Обычно в такой форме задается ссылка на внешний документ. При использовании относительного адреса ссылка рассматривается как внутреняя, например:
 


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

 
 
.

 
Значение этого атрибута - произвольная последовательность латинских букв и цифр, рассматриваемая как имя якоря. Для ссылки на якорь его имя указывается в конце адреса URL после символа "#":
 


 
Между дескрипторами  и  могут находиться только текст, графика и заголовки. Текст, располагающийся между  и  дескрипторами, обычно изображается броузерами в цвете (для этих целей по умолчанию используется голубой цвет), некоторые программы подчеркивают его. Посредством атрибутов в дескрипторе  цвет текста гиперсвязи можно изменить.
 
При включении в Web-страницу гиперссылок учитывайте следующие рекомендации.
 
Выразительно оформляйте текст гиперсвязи. По тексту гиперсвязи должно быть четко и ясно понятно, куда ведет эта связь. Текст гиперссылки не был слишком длинным: кратко и сжато выражайте цель ссылки.
 
Не перегружайте документ гиперссылками. Вставляйте в текст Web-страницы только действительно необходимые ссылки. В противном случае, пытаясь ознакомиться со всеми адресуемыми объектами, пользователь очень быстро потеряет нить ваших рассуждений.
 
Никогда не размещайте два <а>-дескриптора по соседству друг с другом в тексте документа, не вставив между ними никакого разделителя. При отображении такого документа тексты этих гиперсвязей просто сольются.
 
Создав свою Web-страницу, попытайтесь взглянуть на нее глазами пользователя. Все ли гиперссылки выдержаны в одном стиле?
Основные дескрипторы для организации ссылок и форматирования текста показаны в таблице.