Основные теги HTML. с его закрывающей парой

Теги

Команды для браузера, говорящие, как отображать текст, вставлять таблицы, изображения и другие объекты, называются тегами (от англ. tag - ярлык, признак ). Сами теги (команды) не отображаются на экране.

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

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

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

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

Если тег имеет несколько параметров, то они прописываются через пробел в любой последовательности. Например: - две аналогичные записи открывающего тега font с параметрами color и size.

Структура HTML страниц

Любая html-страница должна содержать следующие обязательные теги:

html - сообщает браузеру, что страника написана на языке HTML и строчки до закрывающего тега представляют собой единый документ;

head - между открывающим и закрывающим тегами помещается важная информация, описывающая этот документ;

body - между открывающим и закрывающим тегами помещается само содержание страницы.

Таким образом HTML-документ имеет следующую структуру:

Описание документа (не отображается на самой страничке)

Содержание (отображается на страничке с учетом заданной разметки)

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

Например, такая строчка 1_HTML задаст название документа "1_HTML", которое в Mozilla Firefox будет отражаться в заголовке окна и на закладках (когда открыто несколько страничек):

2. Форматирование текста

Шрифты: гарнитура, размер, цвет

Оформление текста

Заголовки

Теги переноса строки и форматирования абзаца

Выравнивание текста

Упражнение

Шрифты: гарнитура, размер, цвет

При помощи HTML-разметки можно написать текст разного начертания (гарнитуры), размера и цвета. Для этого используется тег , имеющий несколько параметров:

face – для задания гарнитуры,

size – для задания размера,

color – для задания цвета.

Чтобы задать нужный шрифт, размер или цвет, необходимо соответствующему параметру присвоить нужное значение:

параметр="значение"

Гарнитура

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

Текст с начертанием Times New Roman

Текст с начертанием Times New Roman

Параметру face можно присвоить несколько значений через запятую:

face="Times New Roman, Times, serif"

В таком случае, браузер сначала попытается отобразить текст шрифтом Times New Roman . Если такой шрифт отсутствует на компьютере пользователя, то браузер попытается отобразить текст шрифтом Times и т.д.

Размер

Чтобы написать текст размером 4, необходимо вставить перед нужным текстом тег и присвоить его параметру size значение 4:

Текст размера 4

В результате браузер отобразит эту строчку так:

Текст размера 4

Что же означает эта загадочная цифра 4? Параметр size может принимать значения от 1 до 7 . Это условные единицы. Средний размер, используемый по умолчанию, соответствует size="3" .

Следовательно, размер текста 4 – это средний размер, увеличенный на 1 условную единицу, а размер 2 - это средний размер, уменьшенный на 1 условную единицу и т.д. Величина текста, заданная таким способом, называется абсолютной .

Но есть и другой способ уменьшить или увеличить размер текста относительно размера по умолчанию. Для этого нужно присвоить параметру size значение "-1" или "+1" соответственно. При таком способе задания размера величина текста называется относительной .

Итак, чтобы получить размер текста 5, можно воспользоваться двумя способами:

Текст размера 5 или Текст размера 5

Помимо перечисленных существует еще несколько способов задать размер текста.

Увеличить текст можно с помощью тега :

Увеличенный текст

В результате браузер отобразит эту строчку так:

Увеличенный текст

Уменьшить текст можно с помощью тега :

Уменьшенный текст

В результате браузер отобразит эту строчку так:

Уменьшенный текст

Теги и можно повторить несколько раз для усиления эффекта. Например, если в результате строки:

Большой текст

текст недостаточно велик:

Большой текст

можно написать так:

Большой текст

И в результате получится больший текст:

Большой текст

Цвет

Теперь о задании цвета текста. Чтобы написать текст красным цветом, необходимо вставить перед нужным текстом тег и присвоить его параметру color значение red :

Красный текст

В результате браузер отобразит эту строчку так:

Красный текст

Но цвет можно задать не только по названию, но и по цифровому значению в шестнадцатеричном формате, который выглядит как знак # и 6 символов (цифры 0-9 и буквы латинского алфавита A-F ) после него. Например, красному цвету соответствует шестнадцатеричное значение #FF0000 . Т.е. написать текст красным цветом можно двумя способами:

Красный текст или Красный текст

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

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

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

Создание html-документа

Создать простую страничку сайта можно в любом редакторе. Подойдет даже "Блокнот". Для начинающего разработчика рекомендуется использовать другие редакторы, у которых есть функции автоподстановки и другие подсказки. Благодаря этому можно создавать готовые таблицы, ссылки, изображения и другие элементы. А в "Блокноте" каждую букву приходится писать вручную.

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

Язык html является иерархичным. То есть существует специальная структура html-документа. Что это такое? Рассмотрим ниже для наглядности.

Структура html-документа. Пример

Структура всегда одна и та же. Если вы захотите поменять что-то, браузер не сможет это обработать. В результате вы не получите то, что задумали.

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

Структура html-документа - основные теги:

Из этих трех тегов состоит каркас всего сайта. Обратите внимание на рисунок. Все эти теги имеют закрывающийся тег со знаком “/”. Если вы пишете от руки, привыкайте ставить сразу оба тега - открывающий и закрывающий.

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

Раздел head

На рисунке под пунктом 3 указан раздел head. В этом разделе указывается служебная информация. Например, можно указать кодировку (пункт 4) и заголовок страницы (пункт 5).

Заголовок должен быть всегда. Без него ни один поисковик не сможет определить название контента (текста) на веб-странице. А это плохо для продвижения сайта. Более того, в браузере наверху не будет указан заголовок страницы. Это неудобство для пользователя.

Структура html-документа такова, что указывается только в разделе head. Если тег указать в разделе body или после него, то обработчик на него не обратит внимания.

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

Подключение стилей

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

Подключается файл следующим образом.

В атрибуте href указывается путь до файла. Если в пути будет ошибка, то стили не загрузятся. Также обязателен атрибут type, который указывает, что это файл css.

Другим вариантом является определение стилей прямо в разделе head.

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

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

Подключение скриптов

Скрипты подключаются следующим образом.

Здесь обязательны два атрибута: type и src. В первом указываем, что это файл Javascript, а второй - где расположен файл. Если вы допустите опечатку, то ничего работать не будет.

Раздел body

Структура html-документа такова, что размещать содержание, которое будет видно пользователю, нужно только в разделе body. Название тега говорит само за себя.

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

Рассмотрим самые основные теги, которые можно использовать в области body. Основных не так много. Все остальные вы будете узнавать по мере роста ваших знаний и практики.

Основные теги

Структура html-документа требует обязательного порядка написания элементов. Теги всегда должны по краям обрамляться скобками . Без этого браузер не поймет, что это тег. После открывающейся скобки всегда следует имя элемента (тега). Если вы допустите пробел между < и именем, то браузер посчитает это текстом.

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

Порядок атрибутов не имеет значения. Но их написание (оформление) очень важно. Всегда сначала идет имя атрибута, потом знак равенства, затем в кавычках пишется значение атрибута. Значение может быть разным - цифровое или текстовое.

Атрибут src во всех тегах указывает путь файла, который нужно подгружать. Атрибут alt во всех элементах указывает короткое описание. В данном случае загружается фотография bird.jpg с описанием - фотография птицы.

Кроме этого, в можно было указать размеры, только ширину или высоту, заголовок, выравнивание, класс стиля или рамку.

Рассмотрим другие основные теги, которые указываются в разделе body.

	Назначение
	Изображения
	Перенос текста на новую строку
…	Жирный текст
	Перечеркнутый текст
	Подчеркнутый текст

Как всё это можно представить в голове

Начинающие разработчики не всегда сразу могут представить всё это умозрительно. Посмотрите несколько примеров структуры веб-страниц, и тогда вам точно станет понятно.

• 1. HTML-документы – это структурные документы.
• 2. Названия элементов можно писать в любом регистре.
• 3. Названия атрибутов можно писать в любом регистре.
• 4. Значения атрибутов зависят от регистра, особенно адреса (особенность Unix-операционных систем состоит в различной трактовке символов в разных регистрах, поэтому файлы

picture .gif и picture.GIF различны!).

• 5. Названия элементов не могут содержать пробелов.
• 6. Если значения атрибутов содержат пробелы, они должны стоять в кавычках.
• 7. Дополнительные пробелы, символы табуляции и возврата каретки игнорируются и сжимаются в один пробел.
• 8. Элементы могут быть вложены друг в друга. При этом должно соблюдаться правило вложенности. Внутри вложенного элемента помимо открывающего тега должен быть и закрывающий. Пересечения некорректны:

Структура документа HTML

9. Незнакомые элементы и атрибуты игнорируются браузерами ("снисхождение к ошибкам").

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

Когда веб-браузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тег, который встречается в документе, должен быть тегом . Данный тег сообщает веб-браузеру, что документ написан с использованием HTML.

Комментарии в HTML. Как любой язык, HTML позволяет вставлять в тело документа комментарии, которые сохраняются при передаче документа по сети, но не отображаются браузером. Часто в комментарии "прячут" некоторые теги или целые синтаксические конструкции от старых версий браузеров, которые не способны их обработать. Комментарии могут встречаться в документе где угодно и в любом количестве. Необходимо помнить, что комментарии увеличивают объем документа, а следовательно, и время загрузки.

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

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

Теги тела документа. Теги тела документа идентифицируют отображаемые в окне компоненты HTML-документа. Тело документа может содержать ссылки на другие документы, текст и другую форматированную информацию.

Тело документа. Тело документа должно находиться между тегами и . Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация вашего документа.

Уровни заголовков . Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий – 2, и так до цифры 6. Большинство браузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Для большинства случаев текст такого заголовка станет жирным, и после текста будет отбита пустая строка. Важным является то, что эти теги определяют логическую структуру документа, участвуют в индексации поисковыми системами Интернет. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться браузером.

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

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

Теги списков. Существует три основных вида списков в HTML-документе: нумерованный, маркированный, список описаний.

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

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

и завершается тегом

.

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

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

и завершается тегом

. Каждый элемент списка начинается с тега .

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

Графика внутри HTML-документа. Одна из наиболее привлекательных черт WEB – возможность включения графических и иных типов данных в HTML-документ.

Существует два способа использования графики в HTML-документах. Первый – внедрение графических образов в документ, что позволяет пользователю видеть изображения непосредственно в контексте других элементов документа. Делается это при помощи тега . Этот тег точечный, т.е. он не закрывается. Синтаксис тега:

Обязательный параметр имеет такой же синтаксис, как и стандартный URL. Данный URL указывает браузеру, где находится

рисунок. Рисунок должен храниться в графическом формате, поддерживаемом браузером. На сегодняшний день это форматы GIF, JPG, PNG. Они поддерживаются большинством браузеров.

АLТ="текст"

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

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

Гипертекстовые ссылки являются ключевым компонентом, обусловливающим привлекательность WEB для пользователей. Добавляя гипертекстовые ссылки (далее – ссылки), пользователь делает набор документов связанным и структурированным, что позволяет получать необходимую ему информацию максимально быстро и удобно.

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

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

текст-или-картинка-которые-будут-п одсвечены-как-ссылка

Тег открывает описание ссылки, а тег – закрывает его. Любой текст, находящийся между данными двумя тегами, подсвечивается специальным образом веб-браузером. Обычно этот текст отображается подчеркнутым и выделенным цветом. Изображение обрамляется прямоугольной рамкой. Текст, обозначающий URL, не отображается браузером, а используется только для выполнения предписанных им действий при активизации ссылки (обычно при щелчке мыши на подсвеченном или подчеркнутом тексте).

Ссылки на метки внутри документа. Можно делать ссылки на различные участки или разделы одного и того же документа, используя специальные скрытые метки для этих разделов. Это позволяет быстро переходить от раздела к разделу внутри документа, не используя прокрутку экрана. Как только пользователь щелкнет на ссылке, браузер переместит его на указанный раздел документа, а строка, в которой стоит метка данного раздела, будет размещена на первой строке окна браузера (если хватит "длины" документа в окне браузера).

HTML - расшифровывается как «язык гипертекстовой разметки» (англ. HyperText Markup Language), который является наиболее широко используемым языком для написания веб-страниц.

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

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

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

HTML-документ

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

Заголовок документа Заголовок

Здесь содержание документа...

Давайте сохраним код в HTML-файле document.html с помощью вашего любимого текстового редактора. И откройте файл с помощью веб-браузера, такого как Internet Explorer, Google Chrome или Firefox и др. Он должен показать следующий результат:

Теги для создания HTML-документа

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

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

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

Знание этих тегов вполне хватит чтобы создать html-документ (html-страницу).

Чтобы изучить HTML, Вам нужно знать различные теги и понимать, как они ведут себя при форматировании текстового документа. Учить HTML легко, так как пользователям нужно только выучить использование разных тегов, чтобы отформатировать текст или изображения, тем самым сделать красивую веб-страницу.

Структура HTML-документа

Структура типичного HTML-документа будет иметь следующий вид:

Тег декларации документа Теги, связанные с заголовком документа Теги, связанные с телом документа

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

Декларация

Тег декларация используется веб-браузером для понимания версии HTML, используемой в документе. Текущая версия HTML - 5, и она использует следующее объявление:

Существует много других типов объявлений, которые могут использоваться в документе HTML в зависимости от того, какая версия HTML используется. Мы увидим более подробную информацию об этом при обсуждении тега вместе с другими тегами HTML.

Настало время рассмотреть на примере простейший HTML-документ. Мы напишем код, результатом работы которого является вывод в окне браузера фразы «Hello, world!» (в дословном переводе с англ. - «Здравствуй, мир!»). Обычно такая практика написания кода является первым опытом при изучении нового языка. Такая постановка задачи обращает внимание учащегося сразу на несколько ключевых моментов языка программирования (в нашем случае языка разметки), главным из которых является базовая структура программы (в нашем случае веб-страницы).

doctype

Это элемент также называют корневым, потому что все остальные элементы документа располагаются в нем. Корневой элемент может иметь только два дочерних элемента: и .

Элемент head

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

Элемент должен быть первым дочерним элементом , никакое содержимое или элементы не должны располагаться перед ним:

Элемент title

Элемент предоставляет текстовый заголовок для документа. Каждый HTML-документ должен иметь ровно один элемент , который должен располагаться внутри элемента :

Заголовок окна

Браузеры отображают содержимое элемента как заголовок (имя) документа, который обычно отображается вверху окна браузера или в названии вкладки:

Элемент body

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

Заголовок окна

Вот и все! Начало положено – вы получили прекрасную заготовку. Вот так будет выглядеть готовая структура документа с выводом в окне браузера фразы «Hello, world!»:

Заголовок окна Hello, world!