HTML - это язык тэгов.

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

А тэгом горизонтальной линии -

---

.

Существует два типа тэгов: контейнеры и одиночные тэги.

Контейнер. Это дескрипторная пара, состоящая из начального (или открывающего) и конечного (или закрывающего) тэгов. Начальный тэг имеет вид , где TAG - это имя реального HTML - тэга. Конечный тэг имеет вид . Контейнеры предназначены для хранения некоторой информации, например текста или других HTML - тэгов. Поэтому между начальным и конечным тэгами заключено содержимое контейнера. Например, элемент, представляющий собой отформатированный текст, заключается между тэгами

И 

.

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

---

создаёт горизонтальную линию.

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

Замечание : Язык HTML не чувствителен к регистру. Тэги могут набираться как прописными, так и строчными буквами, т.е. команда и представляет собой текстовую строку. Не следует заключать его в кавычки, если вы хотите, чтобы на экране их тоже не было. В большинстве случаев раздел TITLE занимает не более одной строки.

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

Хотя в WWW и наметилась тенденция к увеличению “активного” содержания, большинству читателей все же интересна текстовая часть страниц. Поэтому независимо от того пишется ли новый текст или конвертируется старый, процесс работы над телом документа отнимает немалое количество времени.

Прежде чем приступить к наполнению документа содержанием, есть смысл изготовить его “каркас”. HTML - документ должен содержать некоторые обязательные элементы, без которых он не будет правильно интерпретирован. Пример простейшего шаблона приведен в листинге.

Enter body text here

Шаблон открывается тэгом

, который, как мы уже знаем, необходим для каждого HTML - документа. Следующим идет тэг ,начинающий заголовок документа. Заголовок содержит элемент TITLE , вводящий название документа, в нашем случае “This is an example document”. Заголовок закрывается тэгом . Далее идет тэг , после которого помещается текст (тело) документа. Тэг означает конец тела, а тэг - конец всего документа. BODY может содержать большое количество атрибутов. Все они важны, так как определяют общий облик документа. Эти атрибуты приведены в таблице.

	Назначение
ALINK	определяет цвет ссылки, активной в текущий момент
BACKGROUND	указывает на URL - адрес изображения, которое используется в качестве фонового
BGCOLOR	определяет цвет фона документа
BGPROPERTIES	если установлено значение FIXED , фоновое изображение не прокручивается
LEFTMARGIN	Устанавливает границу левого поля в пикселах
LINK	Определяет цвет еще не просмотренной ссылки
TEXT	Определяет цвет текста
TOPMARGIN	Устанавливает границу верхнего поля в пикселах
VLINK	Определяет цвет уже просмотренной ссылки

Рассмотрим эти атрибуты подробнее.

Определение цвета составных частей документа - первый шаг к его созданию. Если это не сделано, используются цвета по умолчанию. Они определяются установками программы просмотра.

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

HTML цвета определяются цифрами в шестнадцатеричном коде. Цветовая система базируется на трех основных цветах - красном, синем и зеленом. Для каждого цвета задается шестнадцатеричное значение в пределах от 00 до FF, что соответствует диапазону 0-255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ #. Для простоты в HTML 3.2 определены 16 стандартных цветов, которые вместе с их шестнадцатеричными кодами приведены в нижеследующей таблице.

Цвет	Код
Black (черный)	#000000
Магооп (темно-бордовый)	#800000
Green (зеленый)	#008000
Olive {оливковый)	#808000
Navy (темно-синий)	#000080
Purple (фиолетовый)	#800080
Teal (чирок)	#008080
Gray (серый)	#808080
Silver (серебряный)	#С0С0С0
Red (красный)	#FF0000
Lime (известь)	#00FF00
Yellow (желтый)	#FFFF00
Blue (синий)	#0000FF
Fuchsia (фуксия)	#FF00FF
Aqua (аква]	#00FFFF
White (белый)	#FFFFFF

BGCOLOR отвечает за цвет фона документа. Если страница имеет фоновое изображение, этот атрибут должен обеспечивать цвет, как можно более близкий к общему тону рисунка. Это позволит читателю, настроившему свой браузер на отказ от загрузки изображений, ясно видеть текст. Многие авторы не придерживаются этого правила. В этом случае, если фоновый рисунок исполнен в темных токах и выбран белый цвет шрифта для текста, некоторые читатели могут быть удивлены, не увидев ничего, кроме пустой белой страницы. TEXT определяет цвет текста документа. Старайтесь в ваших страницах всегда поддерживать высокую контрастность текста. При использовании шрифта с тонким начертанием помните, что он смотрится лучше темным на светлом фоне. LINK используется браузером для показа еще непросмотренных ссылок. Очевидно, что они должны выделяться цветом на фоне основного текста.

Атрибут VLINK служит для показа уже просмотренных ссылок. Как правило, их окрашивают более темным оттенком того же цвета, что и не

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

Одним ид популярных способов украсить HTML - страницу является размещение на ней фоновой графики, видимой под основным текстом (атрибут

BACKGROUND ). Такой прием помогает подчеркнуть целостность документа либо. наоборот, разделить его на логические части.

Большинство фоновых изображений малы по размеру, но их копии, как обои, заполняют все окно программы просмотра. Особенно популярны различные текстурные (узорчатые) изображения: кирпичи, мрамор, всевозможные виды тканей. В основном они служат для простого заполнения пустот в документе. Более продуманные страницы имеют фон, соответствующий содержанию.

Атрибуты

LEFTMARGIN и TOPMARGIN служат для установки расстояния между левым и верхним краями текста и соответствующими краями окна браузера. Местоположение других краев текста не регулируется. Это сделано для того, чтобы обеспечить возможность просмотра страницы любым браузером. Невозможно заранее знать, какой размер окна у программы читателя документа. LEFTMARGIN устанавливает расстояние между левым краем окна браузера, которое измеряется в пикселах. Чаще всего этот атрибут применяется, когда автор хочет иметь слева поле, свободное от текста, и отличающееся узором или цветом от остальной части фонового изображения. TOPMARGIN служит для установки расстояния между верхним краем текста и верхним краем окна браузера. Он обычно используется, если верхняя часть фонового изображения имеет большое значение и его желательно оставить открытым. HTML - документы можно включать комментарии, которые не будут видны читателю. Они должны начинаться тэгом . Все, что заключено внутри этих тэгов, при просмотре страницы остается невидимым. ADDRESS является одним из важнейших элементов HTML. Он служит для идентификации автора документа и (по желанию) для указания адреса автора. Сюда же обычно помещаются сведения об авторских правах. Этот элемент располагается либо в начале, либо в самом конце документа. ADDRESS состоит из текста, помещенного между тэгами

и

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

При создании сайта первое, что нужно представлять — это то, как формируется веб-страница. Это, своего рода, «фундамент» в сайтостроении. Поэтому прежде чем, углубляться в изучение более сложных технологий создания сайтов, рекомендуется иметь хотя бы базовые сведения о 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. Полученная в данном уроке информация — это базовые понятия, без них не обойтись. О более сложных вещах мы поговорим в других уроках.

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

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

Для примера эти строки на web-странице будут отображаться одинаково не смотря на их разное написание:

Добро пожаловать на наш сайт!

Добро
пожаловать на наш сайт!

Добро пожаловать
на наш
сайт!

Исключение составляет тег

, внутри которого все пробелы и переносы отображаются как есть.

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

. Синтаксис создания абзацев следующий:
Это первый абзац.


А это уже второй абзац

Абзацы на html-странице отделяются небольшими отступом от предыдущего и последующего элементов. Тег 
Также является блочным элементом. Что такое блочные элементы я писал в статье « ». Напомню, что блочные элементы
 характеризуются тем, что занимают всю доступную ширину html-страницы, высота элемента определяется его содержимым, и он всегда начинается с новой строки.
Рассмотрим пример применения абзацев на web-странице. Откроем текстовый редактор, наберем HTML-код и сохраним с расширением html:














Сайт об автомобилях.




Классификация автомобилей


Легковой;


Грузовой;


Внедорожник;


Багги;


Пикап;


Спортивный;


Гоночный.





При открытии данного файла будет примерно такая картина:
Пока, что наша страница содержит одни абзацы.
Для выравнивания текста в абзаце тег 
Поддерживает атрибут align.
Он может принимать одно из четырех значений:
left
 — выравнивание текста по левому краю;
center
 — выравнивание текста по центру;
right
 — выравнивание текста по правому краю;
justify
 — выравнивание по ширине, т.е. выравнивание текста одновременно по правому и левому краю. Для этого браузер помещает пробелы между словами.
По умолчанию атрибут align имеет значение left. Пример использования атрибута align:

Этот текст в абзаце на html странице будет выровнен по левому краю!


Этот текст в браузере отобразится по центру страницы!


Этот текст будет выровнен по правому краю!


А этот большой кусок текста браузер выровняет по ширине, т.е. одновременно по правому и левому краю! Для этого web-обозреватель вставит между словами дополнительные пробелы и абзац примет аккуратный вид, удобный для чтения!

И так это отобразится в браузере:

Заголовки в языке HTML
Для выделения разделов текста на web-странице применяются заголовки. В html существует шесть уровней заголовков. Самым верхним уровнем является уровень 1 — тег 
, а самым нижним - уровень 6, тег 
. Теги 
 — 
 являются блочными элементами страницы. Содержимое заголовка первого уровня отображается самым крупным шрифтом жирного начертания, а заголовки последнего шестого уровня - самым мелким.

Синтаксис создания заголовков:














Заголовок первого уровня



Заголовок второго уровня



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



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



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



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






Результат:

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


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


Научным языком автомобиль это:


Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.


Классификация автомобилей


Автомобили бывают следующих типов:


Легковой;


Грузовой;


Внедорожник;


Багги;


Пикап;


Спортивный;


Гоночный.

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

Теги 
-
, как и тег 
Используют атрибут align для выравнивания текста. При использовании этого атрибута все аналогично как с тегом
Нумерованные и маркированные списки в HTML
Список применяется для того, чтобы сформировать пронумерованный или непронумерованный перечень каких-либо фраз или значений. Список с пронумерованными пунктами называется нумерованным
, а с непронумерованными пунктами — маркированным
.
В маркированных списках пункты помечаются маркерами, которые ставятся левее пунктов списка. Web-браузер отображает список с отступом слева и самостоятельно расставляет необходимые маркеры или нумерацию. Списки и их пункты относятся к блочным элементам Web-страницы.
Любой список в HTML представляет собой набор элементов, каждый из которых помещается внутрь тега 
. Затем все элементы помещаются внутрь тега 
, если нужен маркированный список, или внутрь тега 
, если нужен нумерованный список.













Маркированный список:



первый пункт.


второй пункт.


третий пункт.
 


Нумерованный список:



первый пункт нумерованного списка.


второй пункт нумерованного списка.


третий пункт нумерованного списка.







И выглядят они примерно так:

В маркированных списках могут применяться различные типы маркеров. Для определения типа маркера в тег 
 добавляется атрибут type,
если мы хотим задать вид маркера для всех элементов списка или добавить это же атрибут в тег 
 если необходимо задать вид маркера для конкретного элемента. Атрибут type может принимать следующие значения:

disc — закрашенная окружность;
circle — окружность;
square — квадрат.
По умолчанию атрибут type равен disc. Пример использования:


Пункт 1


Пункт 2


Пункт 3






Пункт 1


Пункт 2


Пункт 3






Пункт 1


Пункт 2


Пункт 3



Отображение в браузере:

Нумерованный список также поддерживает атрибут type, с помощью которого можно задавать следующие типы маркера:
A — заглавные латинские буквы;
a — строчные латинские буквы;
I — заглавные римские цифры;
i — строчные римские цифры;
1 — арабские цифры.
По умолчанию в нумерованном списке атрибут type устанавливает в качестве маркеров арабские цифры. Кроме атрибута type нумерованный список поддерживает атрибут start
, который задает число с которого будет начинаться список. В спецификации HTML5 для нумерованного списка появился еще атрибут reversed,
который меняет нумерацию на обратный порядок.
Т.е. вместо 1, 2, 3 список будет нумероваться 3, 2, 1. Но атрибут reversed поддерживается еще очень малым количеством браузеров.
Списки можно помещать друг в друга, создавая вложенные списки. Вложенный список
 помещается внутрь элементов 
 внешнего списка:



первый пункт.


второй пункт.



первый пункт вложенного списка.


второй пункт вложенного списка.


третий пункт вложенного списка.






третий пункт.



И в браузере:

В HTML есть еще третий вид списка — , который представляет из себя перечень терминов и их определений. Этот список задается с помощью парного тега 
. Внутри него помещают пары «термин - определение». Термины заключают в парный тег 
, а определения - в парный тег 
:



Термин 1


Определение 1


Термин 2


Определение 2



Отображение в браузере:

На нашей Web-странице есть абзац классификации автомобилей. Сделаем эту классификацию при помощи маркированного списка:


Легковой;


Грузовой;


Внедорожник;


Багги;


Пикап;


Спортивный;


Гоночный.



И посмотрим результат:

Горизонтальные линии

Для разделения или дополнительного выделения блоков текста в HTML есть одинарный тег HR — горизонтальная линя
. Так это выглядит в коде html:
Первый абзац




Второй абзац

И вот как это отображается:

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

align — определяет выравнивание линии;
color — задает цвет линии;
size — устанавливает толщину линии в пикселях;
width — устанавливает ширину линии в пикселях.
Вставим горизонтальную линию на нашу WEB-страницу. Сделаем ее зеленым цветом, толщиной в 1 пиксель и шириной 320 пикселей:
Сайт об автомобилях.


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


Научным языком автомобиль это:


Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.




Классификация автомобилей


Автомобили бывают следующих типов:




Легковой;


Грузовой;


Внедорожник;


Багги;


Пикап;


Спортивный;


Гоночный.



Результат будет примерно таким:


От автора:
 приветствую вас на блоге webformyself. Язык html, как и многие другие вещи в нашей жизни, имеет определенную структуру. В нашем случае ее закладывают специальные команды. Какие теги определяют структуру html страницы и где их нужно прописывать? Об этом я постараюсь рассказать сегодня.
 
Теги структуры документа html
 
Любой, абсолютно любой html документ имеет какие-то одинаковые фрагменты. Количество заголовоков, абзацев и списков на веб-страницах может быть разным, но есть определенные теги, которые обязательно присутствуют в исходном коде любого сайта.
 
 — с этого указания начинается любой html-файл. Этот фрагмент кода используется для указания типа документа. Зачем это нужно? Дело в том, что существует несколько версий языка html, также есть его модификация. Указав доктайп, вы помогаете браузеру точно определить тип и интерпретировать код без ошибок.
 
Ранее значения этого параметра были очень длинными и непонятными. Сегодня все упростилось и для работы с современной версией языка нужно использовать такую строку:
 
 

 
<
!
DOCTYPE
html
>


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

 
<
meta
http
-
equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
>


Кодировка сама по себе непосредственно никак не отображается на веб-странице и все же она играет большую роль. Если она не будет задана явно, то могут возникнуть ошибки при открытии в разных браузерах, а чтение может оказаться невозможным.
 
 — с точки зрения объема можно сказать, что этот блок включает в себя больше всего информации, потому что именно в нем формируется тело страницы. Это непосредственно то, что будет выведено на экран.
 
 
Рис. 1. Это типичный пример обязательных тегов, которые формируют структуру документа.
  
 — 
 — очень важные парные теги заголовков, которые выводятся на веб-страницу. Как правило, в h1 заключают название статьи или другой публикации, в h2 – подзаголовки, в h3 – подзаголовки подзаголовков и т.д. В крупном документе действительно могут понадобиться все эти теги.
 
Заголовок выводится как блочный элемент и имеет отступы сверху и снизу. Большие тексты рекомендуется разбивать на множество подзаголовков, потому что таким образом у читателя улучшается восприятие материала. Также заголовок имеет важную функцию в плане оптимизации сайта под требования поисковых систем. Ключевое слово в заголовке и подзаголовках улучшает ревелантность страницы.
 
 — формирует абзац (параграф) текста. Также очень важный элемент. Едва ли кто-то захочет читать сплошной текст, никак не разделенный на абзацы, верно?
 
Абзац также имеет небольшие отступы. В визуальных редакторах систем управления сайтом этот тег может проставляться автоматически всякий раз, когда вы делаете два переноса строки.
 
Выше были описаны, пожалуй, самые основные теги, которые отвечают за структуру. Они есть у любой веб-странички. Но как вообще формируется тег и что в него входит?
 
Структура тега html
 
Давайте сразу разберемся на примере.
 
Заголовок
 
Тут видно, что мы не просто написали 
. В любой тег можно вписать дополнительные атрибуты. Они пишутся в открывающейся части элемента.
 
 
Сначала пишется имя самого атрибута, а потом задается его значение. В этом примере строчка class = «title» привяжет к нашему заголовку стилевой класс title, так что через него можно будет обратиться к этому элементу в css.
 
Между парными тегами мы записали то, что непосредственно будет выведено на экран. После этого следует закрыть тег. Если забыть это сделать, то это может привести к интересным ошибкам. Например, весь текст на странице может превратиться в заголовок. В одинарных тегах нельзя писать произвольный текст, в них можно задать только определенные атрибуты.