Теги структурного форматирования

Язык HTML. Понятие разметки, тега, атрибута.

HTML - стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.

Язык HTML является приложением SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879.

Понятие ТЕГ - это элемент языка HTML, с помощью которого выполняется разметка исходного текста веб-страницы. Теги представляют из себя сокращения или аббревиатуры английских слов заключенные в угловые скобки <>, например, тег <p>…</p> сокращение от английского слова paragraph, то есть текст заключенный в данный тег будет распознаваться браузерами, как параграф.

При отображении документа в браузере самих тегов не видно, но они влияют на внешний вид документа.

Тег представляет собой конструкцию вида <Имя_тега>, которая предназначена для указания браузеру каким образом отобразить элемент на странице. Некоторые теги требуют использования закрывающего тега, показывающего окончание элемента.

Каждый тег в HTML имеет специальное значение и отвечает за вывод определенных данных. Регистр букв в названиях тегов не имеет значение, например, тег <p>…</p> и тег <P>…</P> — это одно и то же. То есть теги можно записывать и строчными, и заглавными буквами. Раньше общепринятым было, все теги записывать заглавными буквами, чтобы теги отличались от обычного текста. Сейчас такой необходимости нет, так как многие редакторы имеют подсветку синтаксиса.

Всего тегов в HTML насчитывается более 90. Как правило, один тег воздействует только на часть документа, например, тег заголовка первого уровня <h1>…</h1>. В таких случаях используются парные теги: открывающий и закрывающий. Открывающий тег (например, <h1>) создает эффект, а закрывающий (</h1>) — прекращает его действие. Как видно из примера, закрывающий тэг всегда имеет вот такой символ (/) — прямой слеш. Такие теги называют парные.

Некоторые теги дают разовый эффект в месте своего появления. Например, тег горизонтальной полосы <HR> или тег отображения картинки <img>. Такие теги не имеют закрывающих тегов. Такие теги называют не парные.

Кроме того теги подразделяют на несколько типов, которое различаются по выполняем функциям:

• теги верхнего уровня;

• теги заголовка документа;

• блочные элементы;

• строчные элементы;

• универсальные элементы;

• списки;

• таблицы;

• фреймы.

Это разделение не строгое, поэтому некоторые теги находятся в разных группах. Например, тэги для создания списков <ol> и <ul> относятся и к спискам, и к блочным элементам.

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

Понятие АТРИБУТЫ - это дополнительные ключевые слова, свойства, отделенные от основного ключевого слова тега и один от друга символами пробела, которые могут иметь значения (стандартные или устанавливаемые авторами или сценариями).

Атрибуты бывают глобальными и специфическими. Глобальные атрибуты можно задавать любым HTML элементам, при этом они делятся на основные атрибуты(class, id, style) и атрибуты событий(onclick, onkeydown).

Для некоторых атрибутов следует задавать значение, которое отделяют от имени атрибута символом "=" (знак равентсва). Значение атрибута берут в кавычки, но во многих случаях их можно и не ставить. Закрывающих тегов атрибуты не содержат.

Примеры тегов с атрибутами:

<body bgcolor="#000000" text="#ffffff" background="rain.gif">

<option selected>

<frame scr="file.html" noresize>

В теге <a>, которые определяет ссылку, обязательно нужно задавать атрибут href="/", в котором прописывается адрес, по которому пользователь перейдет, нажав на ссылку. У тега <img>, который задает картинку, обязательным является атрибут src="/", который определяет путь, по которому находится заданная картинка относительно страницы.

Также бывают атрибуты class=""(задает класс элемента, по которому ему можно задать стили), id=""(идентификатор, уникальное имя элемента), style=""(инлайновые стили для элемента), type=""(например, для тега <input>, определяет его тип), width="", border="".

Атрибуты необходимы для сообщения браузеру дополнительной информации о выводе содержимого элемента. Например, атрибут COLOR отвечает за цвет элемента на странице. В атрибутах хранятся имена выводимых картинок, URL-адреса для ссылки и так далее. Атрибут всегда указывается после имени тега в виде пары ИМЯ_АТРИБУТА=”значение” через пробел. Если используется несколько атрибутов, они указываются через пробел.

По умолчанию в SGML необходимо, чтобы все значения атрибутов были разделены с помощью двойных (десятичный код ASCII 34) или одинарных кавычек (десятичный код ASCII 39). Рекомендуется всегда использовать кавычки.

Имена атрибутов всегда учитывают регистр.

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

Понятие РАЗМЕТКИ - при создании разметки и оформлении страницы, ее разделяет на отдельные функциональные части. Разметка страницы веб-сайта подразумевает выделение таких блоков:

шапка сайта (header)

боковые колонки (sidebar)

подвал сайта (footer)

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

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

Страница также может содержать информационные блоки - список новостей, последние обновления, популярное, акции.

Для создания разметки страницы можно использовать таблицу <table> (табличная верстка), блоки <div> (блочная верстка), а также элементы семантической разметки HTML5(<header>, <footer>, <section>, <aside>).

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

Теги структуры.

Структура html-документа состоит из трех пар тегов

<html>

<head> Заголовок документа </head>

<body> Тело документа </body>

</html>
Теги являются контейнером для всех остальных, т.е в них помещаются все остальные. Таким образом, ваш документ должен начинаться с тега, и заканчиваться тегом.

Сам документ условно разделен на две части — заголовок документа (теги) и тело документа (теги)

Элемент HEAD

Начальный тег:необязателен, Конечный тег:необязателен

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

Элемент TITLE

Начальный тег:обязателен, Конечный тег:обязателен

Каждый документ HTML должен иметь элемент TITLE в разделе HEAD.

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

Элемент Base

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

У этого тега один атрибут href, значением которого является адрес страницы.

Элемент Link

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

У тега несколько атрибутов:

href — указывает URL-адрес подключаемого файла.

rel — указывает на тип отношения данного документа к внешнему (например: rel=»stylesheet» указывает, что внешний файл определяет стиль текущего документа).

type — указывает тип и параметры присоединенной таблицы стилей.

Метаданные

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

Элемент META

Начальный тег:обязателен, Конечный тег:запрещен

Определения атрибутов

Для следующих атрибутов допустимые значения и их интерпретация зависят от профиля:

name- определяет имя свойства.

content - определяет значение свойства.

scheme - дает имя схеме, используемой для интерпретации значения свойства.

http-equiv - может использоваться вместо атрибута name. Серверы HTTP используют этот атрибут для сбора информации для заголовков сообщений ответов HTTP. Атрибут http-equiv может использоваться вместо атрибута name; он особенно важен, если документы загружаются по протоколу передачи гипертекста (HTTP). Серверы HTTP могут использовать имя свойства, указанное в атрибуте http-equiv для создания заголовка в ответе http

Атрибут lang может использоваться с элементом META для указания языка значения атрибута content. Это позволяет синтезаторам речи использовать правила произношения для разных языков.

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

В этом примере имя автора объявляется на французском языке:

META и заголовки HTTP

Заголовки HTTP используются для «общения» браузера и web-сервера - для проверки статуса сервера, наличие куки и перенаправлений, посылаемых сервером.

Заголовки HTTP (англ. HTTP Headers) — это строки в HTTP-сообщении, содержащие разделённую двоеточием пару параметр-значение.

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

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

META и поисковые машины

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

Элемент META может использоваться для указания информации по умолчанию для документа.

Элемен Script

Теги <script></script> используются для подключения внешних файлов скриптов. Это позволяет оптимизировать код страниц. Например, если вы используете функции java script для большинства своих страниц, то поместив эти функции на отдельную страницу — function.js, с помощью тега <script> можно указать путь к этой страницы.

Это повышает читабельность кода и ускоряет загрузку страниц. У этого тега несколько параметров:

language — указывает язык написания скрипта, в спецификации HTML 4.0 данный параметр не рекомендуется к употреблению. Вместо него следует указывать параметр type.

type — указывает тип MIME для языка.

src — указывает путь к внешнему файлу со скриптами.

Тело документа

Элемент BODY

В теле документа располагается содержание документа.

Начальный тег:не обязателен, Конечный тег:не обязателен

Определения атрибутов

background - Нежелателен. Значение этого атрибута - URI, указывающий на изображение. Это изображение является фоном (для визуальных браузеров).

text - Нежелателен. Этот атрибут устанавливает цвет текста (для визуальных браузеров).

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

vlink - Нежелателен. Этот атрибут устанавливает цвет текста ссылок, по которым Вы переходили (для визуальных браузеров).

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

bgcolor — указывает фоновый цвет документа.

leftmargin — определяет отступ от левого края окна браузера до контента страницы.

rightmargin — определяет отступ от правого края окна браузера до контента страницы.

topmargin — определяет отступ от верхнего края окна браузера до контента страницы.

bottommargin — определяет отступ от нижнего края окна браузера до контента страницы.

Все, что отображается на web-странице, находится в тегах . Это текст, картинки и исполняющиеся скрипты, а также теги для оформления всего этого.

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

3. Теги форматирования и оформления.

Теги структурного форматирования

Для форматирования текста существует много тегов. Одни их них используются часто, другие – редко.

12 3 4 5 6

Не нашли, что искали? Воспользуйтесь поиском по сайту: