Разное

Структура страницы html: Конспект «Структура HTML-документа» — Структура HTML-документа — HTML Academy

06.04.2021

Конспект «Структура HTML-документа» — Структура HTML-документа — HTML Academy

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

<!DOCTYPE html>

Простейшая HTML-страница состоит как минимум из трёх тегов: <html>, <head> и <body>. Тег <head> обычно содержит заголовок, ключевые слова, описание страницы и другие служебные данные. Также внутри него подключаются внешние ресурсы, например, стили. Содержимое этого тега не отображается на странице напрямую. А в теге <body> хранится содержание страницы, которое отображается в окне браузера.

Для подключения стилей к странице существует тег <link>. Для этого у него есть атрибут href в котором задаётся адрес стилевого файла, а значение stylesheet атрибута rel говорит браузеру, что мы подключаем именно стили, а не что-то другое.

<head>
  <link href="адрес_файла_стилей.css" rel="stylesheet">
</head>

Ещё один элемент, который располагается в <head> — это тег <title>. В нём задаётся заголовок страницы, который отображается во вкладках браузера. По заголовку должно быть понятно, о чём эта страница, даже когда она не открыта в браузере, а отображается в результатах поиска или в браузерных закладках.

<head>
  <title>Тренажёры — HTML Academy</title>
</head>

Ещё один важный тег, располагающийся внутри <head> это тег <meta>. Он одиночный, то есть не требует парный закрывающий тег в конце. С помощью

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

Кодировка текста HTML-страницы указывается с помощью атрибута charset:

<meta charset="название кодировки">

Самая распространённая современная кодировка — utf-8.

Перечень ключевых слов задаётся тегом <meta>, у которого атрибут

name имеет значение keywords. Ключевые слова (самые важные слова из содержания страницы) перечисляются в атрибуте content через запятую:

<meta name="keywords" content="важные, ключевые, слова">

Краткое описание (или аннотация) страницы задаётся похожим образом, только значение атрибута name меняется на description:

<meta name="description" content="краткое описание">

Внутри <body> находятся те теги, которые отображаются на странице. Например, тег <main> выделяет основное содержание страницы, которое не повторяется на других страницах. И обычно на странице используется один

<main>.

Тег <header> содержит вводную часть страницы, которую чаще называют «шапкой», а тег <footer> описывает заключительную часть страницы, или «подвал». Существует тег <section>, который обозначает крупный смысловой (или «логический») раздел.

Тег <article>, обозначает цельный, законченный и самостоятельный фрагмент информации.

Для создания логического раздела с основной навигацией предназначен тег <nav> (сокращение от английского «navigation»). Обычно в 

<nav> включают ссылки на другие страницы или навигацию по текущей странице.

Тег <aside> включает в себя дополнительное содержание, не связанное напрямую с основным. Такие блоки ещё часто называют «сайдбарами» или боковыми панелями.

Для создания основной структуры текста используют заголовки. В HTML существует целое семейство заголовочных тегов: от <h2> до <h6>. Тег <h2> обозначает самый важный заголовок (заголовок верхнего уровня), а тег <h6> обозначает подзаголовок самого нижнего уровня.

<h2>Спецификация HTML</h2>
<h3>Раздел 1 Введение</h3>
<h4>Раздел 1.1 Происхождение языка</h4>

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


Продолжить

Структура html-документа, веб-страницы | основные теги

  • doctype
  • Элемент html
  • Элемент head
  • Элемент title
  • Элемент body

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

doctype

Каждый HTML документ, отвечающий спецификации HTML какой-либо версии (мы будем указывать последнюю версию), обязан начинаться со строки декларации версии HTML, делается это с помощью объявления <!DOCTYPE> следующим образом:


<!DOCTYPE html>

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

Хотя слово doctype размещается в угловых скобках (< и >), оно не является тегом, это инструкция, предназначенная специально для браузеров, и восклицательный знак (!) в начале отличает ее от остального кода в HTML-документе.

Элемент html

После объявления версии и типа документа необходимо обозначить его начало и конец, делается это с помощью элемента <html>:


<!DOCTYPE html>
<html>
</html>

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

Элемент head

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

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


<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

Элемент title

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


<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна</title>
  </head>
</html>

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

Элемент body

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


<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна</title>
  </head>
  <body>
  </body>
</html>

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


<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна</title>
  </head>
  <body>
    Hello, world!
  </body>
</html>

С этой темой смотрят:

  • Введение в html
  • HTML элементы
  • Создание html документа
  • Теги <meta> в HTML

СТРУКТУРА HTML-СТРАНИЦЫ И ВЛОЖЕНИЕ

Следующая диаграмма дает нам общее представление о структуре HTML-страницы:

Как мы видим, страница состоит из пяти важных частей:

  1. DOCTYPE
  2. HTML
  3. ГОЛОВКА
  4. КОРПУС
  5. НАЗВАНИЕ

DOCTYPE:

Говоря простыми словами, это означает объявление «типа документа».

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

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

В целях безопасности мы обычно используем «свободную» интерпретацию, которая позволяет браузерам читать старые теги HTML. Например:

HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd “>

Для HTML5 объявление выглядит так:

HTML:

Чтобы отобразить веб-страницу, нам сначала нужно сообщить браузеру, что это веб-страница.

Почему? Потому что браузеры могут отображать файлы других типов: файлы Adobe Acrobat, текстовые файлы, изображения, файлы Flash.

Чтобы сигнализировать браузеру, что это страница сайта, нам нужны два тега — открывающий и закрывающий тег:

Все, что есть видно в браузере, находится между этими двумя тегами .

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

HEAD:

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

Внутри элемента могут находиться следующие элементы:

  • (этот элемент обязателен в HTML-документе)</li><li> <стиль></li><li> <базовый></li><li> <ссылка></li><li> <мета></li><li> <скрипт></li><li> <noscript></li></ul><p> Размещается между тегами<html><center><ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-1812626643144578" data-ad-slot="4491286225"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center> и<body>.</p><p> В HTML 4.01 элемент<head> обязателен.</p><p> В HTML5 элемент<head> можно опустить.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf.ppt-online.org/files1/slide/2/20tCizTfgQFKHYXo749ucZEPlvBLyORw1prjqN/slide-75.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files1/slide/2/20tCizTfgQFKHYXo749ucZEPlvBLyORw1prjqN/slide-75.jpg' /></noscript></p><h3><span class="ez-toc-section" id="BODY"> BODY: </span></h3><p> Все, что пользователи видят на своем экране, генерируется из кода между открывающим и закрывающим тегами этого элемента. Итак, это «тело» HTML-документа.</p><p> Содержит текст, гиперссылки, изображения, таблицы, списки и т.д.,</p><p> Тег body имеет множество атрибутов, которые помогают нам управлять отображением некоторых элементов страницы. Мы можем классифицировать эти атрибуты по трем типам</p><ol><li> Атрибуты макета: например, цвет фона или изображения, цвет текста и цвета ссылок</li><center><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1812626643144578" data-ad-slot="3076124593" data-ad-format="auto" data-full-width-responsive="true"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center><li>  Глобальные атрибуты: атрибуты, общие для всех элементов HTML, такие как стиль, язык, класс, идентификатор и т. д.</li><li> Атрибут событий: например, события мыши, события клавиатуры, события Windows или события формы, события мультимедиа и т. д.</li></ol><p> Обратите внимание, что все атрибуты макета были удалены из HTML5. Вместо этого используйте CSS.</p><h3><span class="ez-toc-section" id="i"> ВКЛАДЫВАНИЕ: </span></h3><p> Элемент HTML — это элемент, который имеет открывающий и закрывающий теги.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf.ppt-online.org/files/slide/k/Kx5oTRXPBHti08ud2CmqekZLSD3JNr7fVMpzh1/slide-4.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/k/Kx5oTRXPBHti08ud2CmqekZLSD3JNr7fVMpzh1/slide-4.jpg' /></noscript> Например, два тега</p><p> Открывающий тег<head><center><ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="4908081011"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center></p><p> Закрывающий тег</head></p><p> Сделать элемент head.</p><p> Когда разные элементы HTML назначаются одному и тому же блоку, это называется вложением.</p><p> В HTML мы используем вложение много раз.</p><pre title="Basic HTML structure"> <! ДОКТИП HTML> <html> <голова> <title> Название страницы <тело>

    Мой первый заголовок

    Мой первый абзац.

    В приведенном выше примере элементы

     

    Аналогичным образом элемент заголовка

    и элемент абзаца

    вложены в элемент .

    PS: По любым вопросам, запросам и отзывам пишите нам по адресу [email protected] или [email protected]. Счастливого обучения?

    Следите за Саурабхом Дхингрой:

    Формат файла HTML

    Что такое файл HTML?

    HTML (Hyper Text Markup Language) — это расширение для веб-страниц, созданных для отображения в браузерах. HTML, известный как язык Интернета, развивался с учетом новых требований к информации, которая должна отображаться как часть веб-страниц. Последний вариант известен как HTML 5, что дает большую гибкость для работы с языком. HTML-страницы либо принимаются с сервера, на котором они размещены, либо также могут быть загружены из локальной системы. Каждая HTML-страница состоит из HTML-элементов, таких как формы, текст, изображения, анимация, ссылки и т. д. Эти элементы представлены тегами и несколькими другими, где каждый тег имеет начало и конец. Он также может встраивать приложения, написанные на языках сценариев, таких как JavaScript и таблицы стилей (CSS), для общего представления макета.

    Краткая история

    Спецификации HTML поддерживаются Консорциумом World Wide Web (W3C) с 1996 года. В 2000 году они также стали международным стандартом (ISO/IEC 15445:2000). В 1999 году был опубликован HTML 4.01. В 2004 г. Рабочая группа по технологиям веб-гипертекстовых приложений (WHATWG) начала работу над версией HTML5, которая стала совместным продуктом с W3C в 2008 г. Она была завершена и стандартизирована 28 октября 2014 г.

    Структура формата файла HTML

    Документ HTML 4 состоит из трех частей:

    1. строка, содержащая информацию о версии HTML
    2. секция декларативного заголовка
    3. тело, содержащее фактическое содержимое документа. Тело может быть реализовано элементом BODY или элементом FRAMESET, чтобы содержать тело в кадрах

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

     

   <ГОЛОВА>
      Знакомство с форматом файла HTML
     
    
   
   <ТЕЛО>
      
    Привет, мир!

    Информация о версии

    Первая строка кода, , называется объявлением типа документа и сообщает браузеру, в какой версии HTML написана страница. В зависимости от версии HTML существует ряд различных объявления типа документа, которые называют определение типа документа (DTD), используемое для документа. Каждое DTD отличается от других элементами, которые оно поддерживает, и отличается следующим образом:

    • HTML 4.01 Strict – включает все элементы и атрибуты, которые не объявлены устаревшими или не отображаются в документах с наборами фреймов.
    • HTML 4.01 Transitional – включает все в строгом DTD, а также устаревшие элементы и атрибуты (большинство из которых относится к визуальному представлению).
    • Набор фреймов HTML 4.01 —  включает в себя все элементы переходного DTD, а также фреймы

    Для HTML5 информация о версии выглядит так, как указано ниже.

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

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

    Информация о теле HTML

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

      dtd">

<ГОЛОВА>
 Ссылки на встроенные таблицы стилей
 <СТИЛЬ type#"text/css">
  ТЕЛО { фон: белый; черный цвет}
  A: ссылка {цвет: красный}
  A: посетил { цвет: темно-бордовый }
  A:активный {цвет: фуксия}
 

<ТЕЛО>
  ... тело документа...

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

     

<ГОЛОВА>
 Связывание с внешними таблицами стилей
 <ССЫЛКА rel#"таблица стилей" type#"text/css" href#"smartstyle.css">

<ТЕЛО>
  ... тело документа...

    Элементы HTML

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *