- •Элемент title
- •Метаданные
- •Элемент meta
- •Meta и заголовки http
- •Meta и поисковые машины
- •Тело документа Элемент body
- •Элементы построения таблиц Элемент table
- •Строки таблицы: элемент tr
- •Ячейки таблицы: элементы th и td
- •Группы строк: элементы thead, tfoot и tbody
- •Группы столбцов: элементы colgroup и col
- •Элемент colgroup
- •Элемент col
- •Внешние ссылки
- •Ссылки на разделы текущей страницы
- •Ссылки на страницы своего сайта
- •Атрибуты ссылок
- •Общие атрибуты тегов
- •Таблицы стилей.
- •Виды селекторов:
- •1. Внутренние таблицы стилей.
- •2. Глобальные таблицы стилей.
- •3. Связанные таблицы стилей.
- •14. Свойства таблиц стилей
- •1. Свойства шрифта.
- •2. Свойства цвета и фона.
- •3. Свойства текста.
- •4. Свойства, связанные с размером и рамкой.
- •15. Позиционирование объектов в документе.
«Интернет-программирование»
Язык 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 name="Author" lang="fr" content="Arnaud Le Hors">
Meta и заголовки http
Заголовки HTTP используются для «общения» браузера и web-сервера - для проверки статуса сервера, наличие куки и перенаправлений, посылаемых сервером.
Заголовки HTTP (англ. HTTP Headers) — это строки в HTTP-сообщении, содержащие разделённую двоеточием пару параметр-значение.
Некоторые браузеры поддерживают использование элемента META для обновления текущей страницы по истечении указанного числа секунд с возможностью замены на другой URI.
<META http-equiv="refresh" content="3,http://www.acme.com/intro.html">
content - это число, указывающее задержку в секундах, за которым следует URI, который нужно загрузить по прошествии этого времени. Этот механизм широко используется для создания кратковременных заставок. Однако поскольку некоторые браузеры не поддерживают этот механизм, авторам следует включить в заставку возможность перейти на следующую страницу (чтобы они на "зависли" на заставке).