Теги заголовка html документа. Основы языка 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-документе должны присутствовать элементы HEAD (информация о документе) и BODY (тело документа).

Раздел документа HEAD

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

Раздел заголовка начинается тегом < HEAD > и следует сразу за тегом . Между открывающим и закрывающим тегами элемента HEAD располагаются другие элементы заголовка.

Название документа title

Для того чтобы дать название HTML-документу, предназначен тег < TITLE > . Это название будет выведено в заголовок окна броузера. Название записывается между тегами и и представляет собой строку текста. Длина этой строки может быть любой, но рекомендуется делать ее не больше 60 символов. Элемент TITLE должен находиться только в разделе HEAD.

Раздел документа BODY

В этом разделе документа располагается та информация, которая отображается в окне броузера. Раздел BODY должен начинаться тегом < BODY > и завершаться тегом , между которыми располагаются элементы HTML, из которых и состоит содержание документа.

Спецификация элемента BODY

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

TEXT="цвет текста"

BGCOLOR="цвет фона"

BACKGROUND="адрес фонового рисунка"

Атрибут TEXT задает цвет шрифта для всего документа в формате RGB или в символьной нотации. По умолчанию (если не указан этот атрибут) используются настройки броузера.

Атрибут BGCOLOR задает цвет фона окна броузера документа в формате RGB или в символьной нотации. По умолчанию используются настройки броузера.

Атрибут BACKGROUND позволяет указать адрес и имя рисунка, используемого в качестве фона. Этот рисунок будет размножен и распределен на заднем плане документа.

Атрибуты LINK, VLINK и ALINK задают цвета гиперссылок в формате RGB или в символьной нотации. По умолчанию используются настройки броузера. Непосещенная гиперссылка – гиперссылка, которая еще не использовалась для перехода к другому документу. Посещенная гиперссылка – гиперссылка, которая уже использовалась для перехода к другому документу. Активная гиперссылка – гиперссылка на документ, к которому в данный момент происходит переход.

Советы по использованию атрибутов тега BODY

 Если вы указываете хотя бы один цвет в теге BODY, то укажите и остальные. Это связано с тем, что пользователь может установить настройки цветов своего броузера как ему удобней. Указание только одного цвета может привести к ситуации, что у некоторых пользователей текст сольется с цветом фона. В результате просмотр документа будет затруднен.

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

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

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

Существует два способа создания гипертекстовых документов. Можно воспользоваться одним из WYSIWYG HTML -редакторов (например, Netscape Composer , основы работы с котором рассмотрены в разделе "Обработка текста на ЭВМ", Microsoft FrontPage , HotDog, или др.), для работы с которыми не требуется специальных знаний о внутренней структуре создаваемого документа. Этот способ позволяет создавать документы для WWW без знания языка HTML . HTML-редакторы автоматизируют создание гипертекстовых документов, избавляют от рутинной работы. Однако их возможности ограничены, они сильно увеличивают размер получаемого файла и не всегда полученный с их помощью результат соответствует ожиданиям разработчика. Но, безусловно, этот способ незаменим для новичков в деле подготовки гипертекстовых документов.

Альтернативой служит создание и разметка документа при помощи обычного редактора plain-текста (таких, как emacs или NotePad). При этом способе в текст вручную вставляются команды языка HTML . Создавая документы таким способом, вы точно знаете, что делаете.

Как уже отмечалось, HTML -документ содержит символьную информацию. Одна ее часть - собственно текст, т. е. данные, составляющие содержимое документа. Другая - теги ( markup tags ), называемые также флагами разметки , - специальные конструкции языка HTML , используемые для разметки документа и управляющие его отображением. Именно теги языка HTML определяют, в каком виде будет представлен текст, какие его компоненты будут исполнять роль гипертекстовых ссылок, какие графические или мультимедийные объекты должны быть включены в документ. Графическая и звуковая информация , включаемая в HTML -документ, хранится в отдельных файлах. Программы просмотра HTML -документов (браузеры) интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащие HTML -документы, приняты расширения.htm или. html .

Прописные и строчные буквы при записи тегов не различаются . В большинстве случаев теги используются парами. Пара состоит из открывающего (start tag ) и закрывающего ( end tag ) тегов. Синтаксис открывающего тега:

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

Атрибуты тега записываются в следующем формате:

имя[="значение"]

Кавычки при задании значения аргумента не обязательны и могут быть опущены. Для некоторых атрибутов значение может не указываться. У закрывающего тега атрибутов не бывает.

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

Последовательность символов, составляющая текст, может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки , букв, знаков препинания, цифр, и специальных символов (например, +, #, $, @), за исключением следующих четырех символов, имеющих в HTML специальный смысл: < (меньше), > (больше), & (амперсенд) и " (двойная кавычка). Если необходимо включить в текст какой-либо из этих символов, то следует закодировать его особой последовательностью символов.

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

Каждая из таких зарезервированных последовательностей начинается символом амперсенда (&) и заканчивается точкой с запятой (;).

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.

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

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

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

Данные теги предназначены для формирования структуры веб-страницы и определяют раздел заголовка и тела документа. Всего выделяют 3 тега верхнего уровня:

…

…

…

Рассмотри все теги подробнее.

Тег

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

Тег

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

Тег

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

Набор тегов верхнего уровня и порядок их вложения показан в примере ниже:

1 2 3 4

… …

… …

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