Структура HTML-документа: основные теги, пример. Мета-тег Description - разбор с примерами Метатеги для поисковых механизмов

Без преувеличения можно сказать, что получение информации посредством Интернет-страниц(WEB-pages,html-pages) наиболее популярен.Для создания подобных документов необходимо иметь хотя бы общее представление о структуре html - файла.

HTML (HyperText Makeup Language - язык создания гипертекстовых документов) - стандарный сервис сети Интернет, принятый WWW- консорциумом (W3C).На сегодняшний день последней является 4-я версия стандарта(подробнее - http://www.w3c.org/),переработанная и до полненая по сравнению с версией 3.2

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

2.1 Что такое HTML ? На самом деле,если вы откроете файл с расширением htm (или html) в любом текстовом редакторе, вы увидите,что это не что иное, как... обычный текст, правда "испорченный" какими-то словами в угловых скобках.Эти "ненужные" слова и представляют собой средства разметки текста, которые понимает программа, работающая с html-файлами(такую программу называют браузер).Похожий принцип построения докуметов не нов, и встречается,например, в текстовом процессоре TeX.
То есть html - это обычный текст (информация) плюс управляющие элем енты - тэги (удобное представление этой самой информации).
Одсюда следует, что для того, чтобы создать гипертекст,нужно всего лишь знать как, куда и в каком количестве "вносить" эти управляющие элементы.

2.2 Тэги. Тэги - (от англ. tag) это средство, позволяюшее браузеру предоста вить имеющуюся у вас информацию в виде, удобном для восприятия, пои ска, чтения.Это в своем роде язык программирования, определяющий,как будет выглядеть на экране следующая строка, что нужно выделить, а что - наоборот - столь очевидно,что нет необходимости это подчеркивать.
Тэгом считается определенное выражение, помещенное в скобки вида . Весьма условно тэги можно разделить на граничные и унарные.Унарные тэги представляют собой очевидные операции, предписывающие браузеру совершить определенное действие по постижению данного тэга при обра ботке html - документа.Пример - наиболее часто употребляемый тэг
- переход на другую строку, весь следующий за ним гипертекст браузер будет представлять, начиная с новой строки.Унарные тэги не относятся к определенным участкам текста,а,скорее всего, к всей последующей части документа.С граничными тегами сложнее, но надо учитывать, что их много больше, нежели унарных.Граничные тэги определяют, как будет выглядеть на экране пользователя часть текста,определеная этими элементами, причем в начальном тэге можно указывать различные параметры,опреде ленные данному тэгу, в конечном тэге эти параметры присутствовать не должны(браузером они игнорируются).

Здесь
• a - управляющее слово, показывающие, что текст вплоть до тега ,будет являться гипертекстовой ссылкой (то есть указнием браузеру просмотреть определенный html - документ при совершении управляющего действия (шелчка мыши) над "ограниченным" текстом)
• href="..." - параметр, определяющий,какой документ будет просмотрен (это может быть как файл на локальной или удаленной машинах,так и просто IP-адрес удаленной(с условием,что эта машина предоставляет http - сервис))

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

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

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

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

  Тэги и параметров не имеют.Эта часть документа может отсутствовать.

• основная часть документа (тело)
  Ограничивается тэгами и .Определяет то,что выводится в главном окне браузера.Здесь сосредотачивается вся несомая страницей информация.Так же может отсутствовать при использовании фреймов.
  Тэг имеет следующие (необязательные) параметры:
  • background="img.gif" - на задний план документа помещается изображение из файла img.gif
  • bgcolor="RED" - цвет заднего плана, если преведущий параметр не определен(о представлении цвета в HTML смотрите следующую часть главы)
  • text="BLACK" - цвет текста документа
  • link="RED" - цвет гиперссылок документа
  • vlink="WHITE" - цвет гиперссылок,уже посещенных пользователем
    и другие.
  В итоге простейший html-документ будет иметь следующую структуру:
  Заголовок . . Тело документа. .
  Области и не пересекаются.Любая информация вне них,но внутри -области инорируется, если не несет с собой управляющий характер(например, является java-скриптом).

  2.4 Представление цвета в HTML. Цвет в гипердокументах представляется в виде трех двухбайтных составляющих, записанных в шестнадцатиричной системе счисления.Каждая сотавляющаая определяет количество базисного цвета (по системе RGB) в данном.То есть вы можете в одном из параметров тэга вместо "WHITE" указать "#ffffff", где # указывает,что следующее число шестнадцатиричное, а каждая из световых компонент (напомню, здесь используется аддитивная модель цветопередачи) имеет значение ff, то есть участвует в формировании цвета полностью.Соответствено базисные цвета могут быть представлены: #ff0000 RED красный #00ff00 GREEN зеленй #0000ff BLUE синий Наиболее часто используемые сочетания трех компонент занесены в таблицу, имеющуюся в любом справочнике по HTML.Каждая из комбинаций имеет определенное название, распознаваемое браузером.Именно в таком виде определялись цвета в примере с тэгом .

  2.5 Основные тэги HTML. В этой части главы будут кратко описаны наиболее часто встречаемые тэги гипертекстового языка.Более подробно они описаны в спецификации и разного рода справочной и учебной литературе.

  Тэги, оределяющие отображение текста
  • размер шрифта - определяет следующий до закрывающего тэга текст как заголовок первого уровня (размер букв - максимально допустимый) - .. - .. размер букв изменяется пропорционально - .. в сторону допустимого минимума - .. - размер букв -минимально допустимый - максимально допустимый шрифт - минимально допустимый шрифт (Границы допустимости шрифтов задаются браузером, используя среднее значение, определяемое,как правило, пользователем)
  • вид надписи - (italic ) наклонный шрифт - (bold ) шрифт с выделением толщиной символов - (underline ) подчеркнутый текст - (teletype) a-la телетайпное сообщение - мигающая надпись

    Форматированный вывод текста (широко использует MS Word 8)
    Кроме того существует тэг, определяющий тип шрифта, размер и цвет -

    где
    face - тип шрифта (не стоит увлекаться экзотическими шрифтами, поскольку они могут отсутствовать в системе клиента)
    size - размер (варьируется от 1 до 6) в относительных единицах.Его также можно задавать относительно,например: size=+1 (увеличить текущее логическое значение на 1)
    color - задает цвет шрифта.
    Вышеописанный тэг очень удобен для выделения цветом той или иной строки.
  • форматирование текста (и других элементов) - выравнивание по центру - выравнивание по левой границе - выравнивание по правой границе
  • Теги,отвечающие за формирование списков -
    - - Эти два тэга определяют ограничиваемую область как список с соответствующим отступом от левой границы документа -
    • - определяет следующую информацию как новый элемент списка. Выделяется различными фигурками (пунктами)
      Списки могут быть вложенными, то есть элементом одного из списков может быть другой список.
    • Тэги общего характера
      • - Вставка в документ графической информации.(Злоупотребление этим тэгом снижает посещаемость страницы!)
        Параметры:
        • src="имя-файла" - указание, какой файл будет включен. Современные нетекстовые браузеры опрерируют изображениями в форматах GIF89, JPEG, animated GIF, реже - PNG и XPM.
        • alt="текстовой-аналог" - применяется в случае, если у клиента отключена загрузка графических изображений.
        • width - Ширина изображения в пикселах (может не соответствовать реальному).
        • height - Высота изображения в пикселах.
      • - разделяющая части документа линия.Параметр width определяет длину как в абсолютных(пикселах), так и в относительных единицах(процентах).
      • 
        - тэг начала новой строки.
      • code>.
      • - тэг гипертекстовых ссылок.Может адресовать документы в:
        • глобальной сети
          Параметр href содержит полный (с адресои ЭВМ, содержащий данный файл) путь и имя файла.
        • файл на данной машине (необязательно html-документ)
          Параметр href содержит путь к файлу относительно текущего каталога и имя файла.
        • метку в текущем документе
          Параметр href содержит символ # и имя метки.Например, для метки 001 ссылка выглядит как .Метки задаются тем же тэгом, но с другим параметром , где name - имя метки (# - не используется!).Примет для 001 -

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

    • - объявление таблицы и определение некоторых параметров
      
      bgcolor - цвет фона таблицы
      width - ширина таблицы в абсолютных и относительных единицах
      border - ширина рамки таблицы (в пикселах)
      cellpadding - отступ от границ при визуализации табличного контента (в пикселах)
      cellspacing - промежуток между ячейками таблицы (в пикселах)
      - заголовок таблицы.Как правило, применяется после объявления таблицы
      - заголовок каждого столбца.
      - объявление строковых элементов таблицы.Используется в паре с тэгом включает в себя одну или несколько областей, ограниченых тегом

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

      , определяющим, что будет находится в каждой ячейке на данной строке. Пример: HTML - решение: Нужно построить таблицу: 1 1 3 2 2 3 1 1 3 2 2 3 Последние три тэга имеют ряд параметров: colspan=.. - "растянуть" данную ячейку в ширину на указанное целое число ячеек. (неприменимо к tr) rowspan=.. - аналогично, но действие происходит по вертикали. bgcolor=.. - задание цвета фона для каждой ячейки 2.7 Фрэймы. Фрэймы - это окна независимого просмотра различных html - документов. Иногда бывает очень удобно организовать навигацию по странице в виде меню в отдельном фрейме, и основного окна, где будет представлятся вся информация, определяемая действиями пользователя в области меню.Здесь окно нужно понимать как часть рабочей области браузера, а не как отде льное от нее окно в среде Windows или X11 (хотя при помощи JavaScripts возможно и такое).Поясню действие фреймов на примере: Создадим 2 фрэйма: меню и информационное окно. Основной html-файл будет выглядеть так: index.htm Ключевые слова|О нас|Название компании или сайта Мета тег HTML определяет информацию о веб странице. Теги группы meta называют мета тегами, а содержимое мета тега - метаданными. Метаданные указывают различную техническую информацию о документе, в основном для браузеров и поисковых систем и не видны пользователю на сайте. Часто используются meta-теги: author , description , keywords , viewport , charset . Мета теги находятся в области HTML документа (). Вставить или, как говорят, прописать мета теги можно в любом порядке и количестве. Использовать meta теги не обязательно, но мы рекомендуем заполнять хотя бы мета теги description , viewport , charset . Это будет плюсом для внутренней оптимизации сайта. Синтаксис Примеры использования в HTML коде Основные мета теги Ниже приведены несколько основных тегов с комментариями по применению и примерами использования. Meta-тег description Краткое описание документа (страницы сайта). Поисковые системы могут использовать содержимое мета тега description для вывода в сниппете поисковой выдачи. Пример использования мета тега description Meta-тег keywords Ключевые слова страницы. Ранее использовался для указания поисковым системам основные смысловые фразы веб-страницы. На данный момент существуют разные мнения как правильно и стоит ли заполнять мета тег keywords . Пример заполнения мета тега keywords Meta-тег viewport Задает некоторые параметры окна просмотра в браузере. Атрибут width указывает ширину окна просмотра (вьюпорта), initial-scale - коэффициент масштабирования при первом открытии страницы. Пример использования мета тега viewport Мета тег для адаптивного сайта: указывает, что ширина вьюпорта подгоняется под размеры устройства: Meta-тег charset Кодировка веб страницы. Наиболее частое значение: "UTF-8". Пример использования мета тега кодировки charset Meta тег refresh Мета тег с атрибутом указывает время автоматического обновления страницы. Страница будет автоматически перезагружаться с интервалом указанным в content атрибуте. Значение указывается в секундах. Пример использования meta http refresh Поддержка браузерами Тег Да Да Да Да Да Атрибуты Атрибут Значения Описание charset character_set Указывает кодировку HTML документа. content тестовое значение Основное содержимое мета тега. Зависит от других атрибутов. Используется вместе с http-equiv или name . http-equiv content-type default-style refresh Устанавливает HTTP заголовок для атрибута content . Сontent-type - Кодировка. Устаревшее значение, в HTML5 используйте charset (см. пример выше). Default-style - Предпочтительная таблица стилей. Refresh - Интервал автообновления страницы. name application-name author description generator keywords viewport Имя мета тега. Как и http-equiv определяет суть мета тега. Application-name - имя веб приложения, которое представляет страница. Author - имя автора веб страницы. Description - краткое описание страницы. Generator - Указывает на программное обеспечение, использованное для создания страницы (для не рукописных страниц). Keywords - ключевые слова страницы. Viewport - некоторые параметры области просмотра страницы. Прежде чем приступить к изучению CSS, давайте вспомним, для чего на самом деле нужен язык гипертекстовой разметки HTML и определимся, как мы будем его использовать в дальнейшем. Как использовался HTML до появления CSS Главное предназначение HTML (HyperText Markup Language – англ.) – структурирование информации на веб-страницах. Изначально этот язык был придуман именно для этих целей. Но по мере того как популярность Интернета стала возрастать, росло и желание пользователей как-то разнообразить и украсить свои сайты. Веб-дизайнеры начали искать способы красивой подачи информации. Некоторые теги HTML использовались не по своему прямому назначению, например, . Метод верстки веб-документов с использованием данного тега стал настолько популярным, что даже получил отдельное название – табличная верстка. Раньше только с помощью такого способа можно было точно расположить элементы на странице. При табличной верстке дизайн веб-страницы создавался непосредственно внутри HTML-документа. Там же использовались и другие теги для стилизации и форматирования. К каким проблемам это приводило? Во-первых, HTML-код становился невероятно большим по длине, что негативно влияло как на вес документа, так и на его индексирование поисковыми роботами. Во-вторых, чтобы изменить, к примеру, цвет заголовков h1 на каждой странице сайта, приходилось прорабатывать вручную каждую из них. Все это отбирало много времени и сил. Для чего нужен HTML сейчас Сегодня, благодаря существованию CSS, есть возможность отделить дизайн страницы от ее содержимого, а также ускорить процесс работы и в разы сократить размер HTML-документа. Тем, кто уже очень давно занимается созданием сайтов, предстоит избавиться от старых привычек и научиться воспринимать HTML только как язык разметки, предназначенный для структурирования и упорядочивания данных. Новичкам будет легче осваивать новые принципы создания веб-страниц в связи с отсутствием взглядов на HTML как на инструмент придания страницам привлекательного вида. За это теперь отвечает CSS. Важно: создавая HTML-документ, думайте лишь о том, как упорядочить контент, а не о том, как его украсить. Забудьте о тегах, которые никак не структурируют страницу, а лишь меняют оформление, поскольку с помощью CSS вы достигнете тех же визуальных эффектов, но при этом сохраните HTML-код чистым и свободным от ненужных вещей. Вот некоторые HTML-теги, которые можно (и нужно) смело заменять стилями CSS: «украшающие», выравнивающие атрибуты к тегам (color , bgcolor , align и т. д.); тег (при использовании для макетирования веб-страницы); тег . HTML-теги для структурирования Для структурирования страниц используйте следующие теги: H1-H6 (heading) Теги h1-h6 предназначены для обозначения заголовков. С помощью этих тегов очень удобно разделять текст. Для лучшего понимания представьте себе книгу, в которой есть главы и подглавы. Название главы книги – это h1 , подглавы – h2 , части подглав – h3 и т. д. Расставлять теги заголовков лучше последовательно. P (paragraph) Тег Служит для обозначения абзацев текста. OL, UL (ordered list, unordered list) Теги , – удобный инструмент для обозначения перечней (навигационные ссылки, пункты в тексте, последовательный список и т. д.). DL (definition list) Тег в связке с тегами , используется при создании списка определений, где – название определения (definition term), – описание определения (definition description). DIV (division) DIV – блочный элемент, который может использоваться для выделения фрагмента документа, а также для логического объединения нескольких элементов. С помощью CSS можно придать блоку необходимый вид и позиционирование, но сам по себе никак не меняет внешний вид документа. SPAN (span) Тег по своей роли похож на . Но – это блочный элемент, а – строчный. Например, если вам нужно поменять стиль одного слова внутри тега Вы «заворачиваете» это слово в тег , добавляете атрибут id или class с именем селектора, после чего в CSS назначаете ему необходимый стиль. Семантические теги HTML5 Чтобы более грамотно структурировать HTML-документ, используйте новые теги, которые помогают лучше описать содержимое. К примеру, как отличить шапку сайта, навигационное меню и футер от другого содержимого, если все они обозначены тегами ? На помощь приходят такие теги HTML5, как , , и другие. Они не влияют на внешний вид, но помогают ориентироваться браузерам, а также поисковым роботам, зашедшим на сайт. Скриншоты с примерами использования структурирующих тегов и CSS Элемент HTML существует не в одной версии, а в нескольких (HTML 4.01, HTML5, XHTML 1.0 и другие), поэтому для правильной интерпретации веб-страницы браузеру необходимо знать, какую из версий языка вы используете. Рекомендуется указывать doctype в самом начале страницы (первая строка кода). Если проигнорировать doctype либо допустить ошибку, браузер откроет веб-страницу в так называемом режиме совместимости, что может привести к некорректному отображению содержимого, в том числе и стилей. Наиболее простым вариантом описания типа документа является doctype для HTML5 (подходит для любого браузера и работает, даже если теги HTML5 не были использованы): Выводы Первая глава нашего учебника подошла к концу. Вот основные моменты, которые вам необходимо запомнить перед тем как приступить к дальнейшему обучению: HTML необходим для структурирования информации на веб-страницах и не используется для изменения внешнего вида документа. За дизайн веб-страниц отвечает CSS. Важно пользоваться структурирующими тегами, такими как , , , , а также новыми тегами HTML5 для большей семантичности документа. Пора забыть о теге и других украшающих атрибутах, а также об использовании тега для макетирования документа. Для корректного отображения веб-страницы браузерами необходимо использовать элемент в первой строке кода. В следующей главе мы познакомимся с синтаксисом CSS и подключением таблиц к HTML , а также напишем первый стиль. Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами. HTML-документ - это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот) , так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.) . HTML-документ имеет расширение.html . HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением). Начальный тег показывает, где начинается элемент, конечный - где заканчивается. Закрывающий тег образуется путем добавления слэша / перед именем тега: … . Между начальным и закрывающим тегами находится содержимое тега - контент. Одиночные теги не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, тег создаст кнопку с текстом Кнопка внутри. Теги могут вкладываться друг в друга, например, Текст . При вложении следует соблюдать порядок их закрытия (принцип «матрёшки») , например, следующая запись будет неверной: Текст . HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута="значение" . Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы. Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел, . Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр. Браузер просматривает (интерпретирует) HTML-документ, выстраивая его структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая HTML-элементы - заголовки, таблицы, изображения и т.д. Процесс интерпретации (парсинг) начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала, при этом обрабатывая CSS и соотнося таблицы стилей с элементами страницы. HTML-документ состоит из двух разделов - заголовка — между тегами … и содержательной части — между тегами … . Структура веб-страницы 1. Структура HTML-документа Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD) . DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD. DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете. ... Элементы, находящиеся внутри тега , образуют дерево документа, так называемую объектную модель документа, DOM (document object model) . При этом элемент является корневым элементом. Рис. 1. Простейшая структура веб-страницы Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские. Предок - элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является . В то же время элемент является предком для всех содержащихся в нем тегов: , , , и т.д. Потомок - элемент, расположенный внутри одного или более типов элементов. Например, является потомком , а элемент Является потомком одновременно для и . Родительский элемент - элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 и . Тег Является родительским только для . Дочерний элемент - элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы , , И являются дочерними по отношению к . Сестринский элемент - элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 и — элементы одного уровня, так же как и элементы , и Являются между собой сестринскими. 1.1. Элемент 1.2. Элемент Раздел ... содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу. 1.2.1. Элемент Обязательным тегом раздела является тег . Текст, размещенный внутри этого тега, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы. 1.2.2. Элемент Необязательным тегом раздела является одинарный тег . С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных. Элемент может содержать несколько элементов , потому что в зависимости от используемых атрибутов они несут различную информацию. Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском: С помощью тега можно запретить или разрешить индексацию веб-страницы поисковыми машинами: Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh: Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url: @ 2024 eurodance90.ru - Windows. Железо. Интернет. Безопасность. Операционные системы. Программы