Html документ это: Что такое HTML? Основы языка разметки гипертекста

Содержание

Что такое HTML? Основы языка разметки гипертекста

HTML

access_time

9 декабря, 2020

hourglass_empty

5мин. чтения

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

HTML не является языком программирования, то есть он не имеет возможности создавать динамические функции. Вместо этого он позволяет организовывать и форматировать документы, аналогично Microsoft Word.

При работе с HTML мы используем простые структуры кода (теги и атрибуты), чтобы разметить страницу веб-сайта. Например, мы можем создать абзац, поместив прилагаемый текст в исходный тег <p> и закрывающий </p>.

<p> Вот как вы добавляете абзац в HTML. </p>
<br><p> У вас может быть более одного! </p></br>

В целом, HTML — это язык разметки, который очень прост в освоении даже для начинающих в создании сайтов. Вот что вы узнаете, прочитав эту статью.

Нужен недорогой, но надёжный хостинг для учебного или небольшого коммерческого проекта? Ознакомьтесь с тарифами общего хостинга. Скидки до 90%!

К тарифам

История HTML

HTML был изобретён Тимом Бернерсом-Ли, физиком из исследовательского института ЦЕРН в Швейцарии. Он придумал идею интернет-гипертекстовой системы.

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

Согласно Справочнику HTML Element Reference от Mozilla Developer Network, в настоящее время существует 140 тегов HTML, хотя некоторые из них уже устарели (не поддерживаются современными браузерами).

Из-за быстрого роста популярности HTML теперь считается официальным веб-стандартом. Спецификации HTML поддерживаются и разрабатываются консорциумом World Wide Web (W3C). Вы можете проверить последнее состояние языка в любое время на веб-сайте W3C (англ).

Самым большим обновлением языка стало внедрение HTML5 в 2014 году. Было добавлено несколько новых семантических тегов к разметке, которые показывают смысл их собственного контента, например <article>, <header> и <footer>.

Как работает HTML?

HTML-документы — это файлы, которые заканчиваются расширением .html или .htm. Вы можете просматривать его с помощью любого веб-браузера (например, Google Chrome, Safari или Mozilla Firefox). Браузер читает HTML-файл и отображает его содержимое, чтобы пользователи интернета могли его просматривать.

Обычно средний веб-сайт включает несколько разных HTML-страниц (англ). Например: домашние страницы, обычные страницы, страницы контактов будут иметь отдельные HTML-документы.

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

Большинство элементов HTML имеют открытие и закрытие, в которых используется синтаксис

<tag> </tag>.

Ниже вы можете увидеть пример кода, с помощью которого можно структурировать элементы HTML:

<div>
    <h2> Основная рубрика </h2>
    <h3> Броский подзаголовок </h3>
    <p> Пункт 1 </p>
    <img src = "/" alt = "Изображение">
    <p> Пункт второй с гиперссылкой <a href="https://example.com"> </a> </p>
</div>
  • Самый главный элемент — это простое разделение (<div> </div>), которое вы можете использовать для разметки больших разделов контента.
  • Он содержит заголовок (<h2> </h2>), подзаголовок (<h3> </h3>), два абзаца (<p> </p>) и изображение (<img>).
  • Второй абзац содержит ссылку (<a> </a>) с атрибутом href, который содержит целевой URL.
  • Тег изображения также имеет два атрибута: src для пути изображения и alt для описания изображения.

Обзор наиболее используемых HTML-тегов

HTML-теги имеют два основных типа: блок-уровень и встроенные теги.

  1. Элементы уровня блока занимают всё свободное пространство и всегда запускают новую строку в документе. Заголовки и параграфы — отличный пример блочных тегов.
  2. Встроенные элементы занимают столько места, сколько им нужно, и не запускают новую строку на странице. Они обычно служат для форматирования внутреннего содержимого элементов уровня блока. Ссылки и подчеркнутые строки — хорошие примеры встроенных тегов.

Теги блочного уровня

Три тега уровня блока, которые каждый HTML-документ должен содержать: <html>, <head> и <body>.

  1. Тег <html> </html> — это элемент самого высокого уровня, который охватывает каждую HTML-страницу.
  2. Тег <head> </head> содержит метаинформацию, такую ​​как заголовок страницы и кодировка.
  3. Наконец, тег <body> </body> содержит всё содержимое, отображаемое на странице.
 <html>
    <head>
      <!-- META INFORMATION -->
    </head>
    <body>
      <!-- PAGE CONTENT -->
    </body>
 </html>
  • Заголовки имеют 6 уровней в HTML. Они варьируются от <h2> </h2> до <h6> </h6>, где h2 — заголовок наивысшего уровня, а h6 — самый низкий. Абзацы прилагаются <p> </p>, в то время как в блочных комментариях используется тег <blockquote> </blockquote>.
  • Разделы — это более крупные секции контента, которые обычно содержат несколько абзацев, изображений, иногда блок-записей и других меньших элементов. Мы можем пометить их, используя тег <div> </div>. Элемент div может содержать ещё один тег div внутри него.
  • Вы можете также использовать теги <ol> </ol> для упорядоченных списков и <ul> </ul> для неупорядоченных. Отдельные элементы списка должны быть заключены в тег <li> </li>. Например, вот как выглядит основной неупорядоченный список в HTML:
<ul> <li>Элемент списка 1</li> <li>Элемент списка 2</li> <li>Элемент списка 3</li> </ul>

Встроенные теги

Для форматирования текста используются многие встроенные теги. Например, тег <strong> </strong> визуализирует выделенный элемент жирным шрифтом, тогда как теги <em> </em> отображают его курсивом.

Гиперссылки также являются встроенными элементами, для которых требуются теги <a> </a> и атрибуты href для указания адресата ссылки:

<a href="https://example.com/">Нажми сюда!</a>

Изображения также являются встроенными элементами. Вы можете добавить один с помощью <img> без закрывающего тега. Но вам также нужно будет использовать атрибут src для указания пути изображения, например:

<img src="/images/example.jpg" alt="Пример изображения">

Если вы хотите узнать больше тегов HTML, попробуйте проверить наш полный HTML-лист (англ) (который также доступен для загрузки).

Эволюция HTML. Что отличает HTML и HTML5?

Начиная с первых дней, HTML прошёл невероятную эволюцию. W3C постоянно публикует новые версии и обновления, в то время как исторические вехи также получают выделенные имена.

HTML4 (в наши дни обычно называемый «HTML») был опубликован в 1999 году, а последняя крупная версия вышла в 2014 году. HTML5 — это обновление, которое ввело множество новых функций для языка.

Одной из наиболее ожидаемых особенностей HTML5 является поддержка встраивания аудио и видео. Вместо использования Flash-плеера мы можем просто вставлять видео и аудио-файлы на наши веб-страницы с помощью новых тегов <audio> </audio> и <video> </video>. Он также включает встроенную поддержку масштабируемой векторной графики (SVG) и MathML для математических и научных формул.

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

Наиболее популярными семантическими тегами являются <article> </article>, <section> </section>, <aside> </aside>, <header> </header> и <footer> </footer>. Чтобы найти уникальные отличия, попробуйте проверить наше подробное сравнение HTML и HTML5.

Плюсы и минусы HTML

Как и большинство вещей, HTML имеет как сильные стороны так и слабые.

Плюсы:

  • Широко используемый язык с большим количеством ресурсов и огромным сообществом.
  • Выполняется изначально в каждом веб-браузере.
  • Поставляется с плоской кривой обучения.
  • В открытом доступе и совершенно бесплатный.
  • Чистая и последовательная разметка.
  • Официальные веб-стандарты поддерживаются консорциумом World Wide Web (W3C).
  • Легко интегрируется с базовыми языками, такими как PHP и Node.js.

Минусы:

  • В основном используется для статических веб-страниц. Для динамической функциональности вам может потребоваться использовать JavaScript или бэкэнд-язык, такой как PHP.
  • Это не позволяет пользователю реализовать логику. В результате все веб-страницы нужно создавать отдельно, даже если они используют одни и те же элементы, например. заголовки и колонтитулы.
  • Некоторые браузеры принимают новые функции медленно.
  • Иногда поведение браузера трудно предсказать (например, старые браузеры не всегда создают новые теги).

Как связаны HTML, CSS и JavaScript?

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

Однако HTML отлично работает с двумя другими интерфейсами: CSS (каскадные таблицы стилей) и JavaScript. Вместе они могут обеспечить богатый пользовательский интерфейс и реализовать расширенные функции.

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

Подумайте об HTML как о человеке, тогда CSS будет его одеждой а JavaScript — движениями и манерами.

Итак … Что такое HTML?

HTML является основным языком разметки в интернете. Он запускается изначально в каждом браузере и поддерживается консорциумом World Wide Web.

Вы можете использовать его для создания структуры контента веб-сайтов и веб-приложений. Это самый низкий уровень технологий frontend, который служит основой для стилизации, которую вы можете добавить с помощью CSS и функциональности, которую вы можете реализовать с помощью JavaScript.

Что такое HTML и CSS

3024 Посещений

Рассмотрим понятия HTML и CSS.

Что такое HTML. HTML (HyperТext Markup Language) — это язык разметки гипертекста, при помощи которого создаются веб-страницы. Используется HTML исключительно для разметки текстового документа. Проще говоря, перед HTML стоит задача определения структуры документа.

HTML представляет собой набор тегов, “описывающих” структуру документа. Вот ключевые:

  • Основные: html, head, title, body.
  • Структурные: div, span.
  • Текстовые: p, ul, ol, li, h2-h6, br, em, strong, b, i.
  • Таблицы: table, tr, td, th.
  • Ссылки: a.
  • Мультимедиа: img, object.
  • Фреймы: frameset, frame, iframe.
  • Формы: form, input, textarea, label, select, option.
  • Факультативные: hr.
  • Специальные: script, link, meta.

Теги в HTML-документе заключены в скобки <>. Кроме того, стоит запомнить, что теги бывают двух видов:

  • Парные, включающие в в себя открывающий и закрывающий тег (к примеру, <p>какой-то текст</p>).
  • Одиночные, состоящие только лишь из открывающего тега (например, <br>).

Благодаря тегам веб-браузер “идентифицирует” структуру текста. Речь идет о том, какая часть считается заголовком, какая — новым абзацем и пр.

Как выглядит HTML-документ. HTML-документ — это текстовый файл, имеющий расширение . html. Создание и редактирование HTML-документов выполняется как в обычном блокноте, так и в различных специализированных редакторах, например, Dreamweaver, Visual Studio и PHPStorm.

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

<html>

<head>

<title>Моя страница</title>

</head>

<body>

Hello!!!

</body>

</html>

Сохраните файл с расширением .html → кликните на него и он откроется в браузере.

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

Разбираем HTML документ — Как создать сайт

Разбираем код HTML-документа

Урок №3
Разбираем HTML код

Давайте разберём, что означает каждая часть нашего кода HTML-документа, введённого в Блокнот на прошлом уроке:

<html>
 <head>
  <title>Название страницы</title>
 </head>
 <body>
  <h2>Заголовок статьи</h2>
  <p>
   Абзац статьи. </p>
 </body>
</html>

Но для начала узнаем, что такое HTML-тег или просто «тег»?

Тег — основа языка HTML

Основной частью языка HTML является — тег. HTML документ (как и весь html-код) и состоит и тегов. Тег содержит в себе имя и угловые скобки, которые расположены по бокам — <имяТега>:

<p> — это один из множества, различных HTML-тегов, означает абзац.

Теги бывают открывающими и закрывающими. У закрывающих тегов перед именем стоит косая черта (слэш) /

<p> — открывающий тег.
</p> — закрывающий тег.

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

У тегов разные имена и каждое имя означает какой либо элемент HTML-страницы: заголовок статьи, абзац (параграф) статьи, фотографию, ссылку, кнопку и т.п.

Рассмотрим другие теги используемые в нашем HTML коде.

Теги <html> </html> — начало и конец HTML-документа

Возвращаемся к нашему HTML документу:

<html>
 <head>
  <title>Название страницы</title>
 </head>
 <body>
  <h2>Заголовок статьи</h2>
  <p>
   Абзац статьи.</p>
 </body>
</html>

Каждый HTML-документ начинается с открывающегося тега <html> и заканчивается закрывающимся тегом </html>

Теги <head> </head> и <body> </body> — голова и тело HTML-документа

Между тегами <html> </html> располагаются два блока.
1. Первый блок начинается и заканчивается тегами <head> </head> — их называют головой HTML-документа.
2. Второй блок начинается и заканчивается тегами <body> </body> — их называют телом HTML-документа.

<html>
 <head>
  <title>Название страницы</title>
 </head>
 <body>
  <h2>Заголовок статьи</h2>
  <p>
   Абзац статьи. </p>
 </body>
</html>

1. <head> </head> — голова HTML-документа.
2. <body> </body> — тело HTML-документа, между этими тегами располагается основная информация страницы: заголовки, абзацы, фотографии, ссылки, кнопки и т.д.

Теги <title> </title> — название HTML-страницы

<html>
 <head>
  <title>Название страницы</title>
 </head>
 <body>
  <h2>Заголовок статьи</h2>
  <p>
   Абзац статьи.</p>
 </body>
</html>

В голове между тегами <head> </head>, располагаются теги
<title> </title>. Между тегами <title> </title> помещают текст, который выступает в качестве названия страницы.

В нашем примере, между тегами <title> </title>, находится текст:
Название страницы

Текст помещённый между тегами <title> </title> появляется в двух местах, в виде названия окна браузера и в виде названия вкладки браузера:

Название страницы, которую вы сейчас читаете, содержит следующий текст:
Разбираем код HTML-документа. Выясняем что такое тег.

Теги <h2> </h2> и <p> </p> — заголовок и абзац статьи

<html>
 <head>
  <title>Название страницы</title>
 </head>
 <body>
  <h2>Заголовок статьи</h2>
  <p>
   Абзац статьи.</p>
 </body>
</html>

В теле нашего HTML-документа, между тегами <body> </body>, располагаются два вида тегов:
<h2> </h2> — теги заголовока статьи,
<p> </p> — теги абзаца статьи.

<h2> </h2> — между этими тегами располагается текст, который является заголовком статьи.
Например, текст заголовока статьи, которую вы сейчас читаете содержит следующее:
Разбираем HTML код

<p> </p> — между этими тегами располагается текст, который является абзацем статьи.
Например, второй абзац статьи, которую вы сейчас читаете, содержит следующее:
Но для начала узнаем, что такое HTML-тег или просто «тег»?

Обобщаем материал по структуре HTML-документа:

Каждый HTML-документ начинается и заканчивается тегами <html> </html> Каждый HTML-документ состоит из двух блоков, головы и тела:
1. <head> </head> — голова HTML-документа,
2. <body> </body> — тело HTML-документа.

В голове HTML-документа между тегами <head> </head>, располагаются теги <title> </title> и некоторая служебная информация о странице (мета-теги), которую мы изучим чуть позже.

В теле HTML-документа между тегами <body> </body>, располагается основной контент: тексты, изображения, формы, которые обрамлены тегами заголовков h2, абзацев p, изображений img, ссылок a, кнопок input и т. д.

Читать далее: Добавляем статью в HTML-документ


Дата публикации поста: 3 апреля 2019

Дата обновления поста: 15 октября 2014


Навигация по записям

Тип документа | Учебник HTML5

Тип документа.

В первую очередь необходимо указать тип создаваемого нами документа. В HTML5 это делается чрезвычайно просто (листинг 1.1).

Листинг 1.1. Использование элемента <doctype>

<! DOCTYPE html>

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

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

<html>

После объявления типа документа мы переходим к построению древовидной структуры HTML. Как всегда, в корне дерева находится элемент <html>. Внутри этого элемента помещается весь остальной код HTML (листинг 1.2).

Листинг 1.2. Использование элемента <html>

<! DOCTYPE html>

<html lang=»ru»>

</html>

Единственный атрибут, указания которого требует HTML5, — это атрибут lang открывающего тега <html>. Он определяет язык содержимого в создаваемом нами документе, и в данном случае мы выбрали русский — значение ru (английскому языку соответствует значение en).

ПОВТОРЯЕМ основы —

HTML — это язык разметки для построения веб-страниц.

Теги HTML представляют собой ключевые слова и атрибуты, окруженные угловыми скобками, например, <html lang=»ru»>.

В данном случае ключевое слово — это html, а lang — атрибут со значением ru. Большинство тегов HTML парные: один открывающий, а второй закрывающий. Содержимое находится между тегами. В нашем примере <htmllang=»ru»> указывает на начало кода HTML, а </html> — на завершение кода. Сравните открывающий и закрывающий теги, и вы увидите, что закрывающий тег отличается только слешем (/) перед ключевым словом (например, </html>). Весь наш остальной код будет находиться между этими двумя тегами: <html>

… </html>.

Что касается структуры и составляющих ее элементов, HTML5 — чрезвычайно гибкий инструмент. Элемент <html> можно использовать без атрибутов или вообще не добавлять в код. Но в целях обеспечения совместимости, а также по другим причинам, которые не стоит здесь рассматривать, мы рекомендуем вам следовать некоторым базовым правилам. Мы научим вас создавать документы с использованием хорошего HTML-кода.

Значения атрибута lang для других языков вы можете найти на веб-странице: www. w3schools. com/tags/ref_language_codes. asp.

<head>

Продолжаем построение документа. HTML-код, который добавляется между тегами <html>, делится на два основных раздела. Как и в предыдущих версиях HTML, первый раздел представляет собой «голову», а второй — «тело» кода. Таким образом, нужно создать эти два раздела, используя уже знакомые элементы <head> и <body>.

Разумеется, первым идет элемент <head>, и, как и у других структурных элементов, у него есть открывающий и закрывающий теги (листинг 1.3).

Листинг 1.3. Использование элемента <head>

<! DOCTYPE html>

<html lang=»ru»>

<head> </head>

</html>

Сам тег по сравнению с предыдущими версиями языка не изменился, и его назначение остается таким же. Внутри тега <head> мы определяем заголовок веб-страницы, объявляем кодировку символов, добавляем общую информацию о документе и приводим ссылки на внешние файлы, содержащие стили, сценарии и даже изображения, необходимые для отображения страницы.

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

<body>

Следующий большой раздел, который является частью основной структуры документа HTML, — «тело». Это видимая часть документа, содержимое которой описывается внутри тега <body>. Данный тег также не изменился по сравнению с предыдущими версиями HTML.

Листинг 1.4. Использование элемента <body>

<! DOCTYPE html>

<html lang=»ru»>

<head>

</head>

<body> </body>

</html>

ПОВТОРЯЕМ ОСНОВЫ —

Пока что мы написали очень простой код, но уже с составной структурой. Смысл в том, что HTML-код — это не последовательный набор инструкций. HTML — это язык разметки, то есть набор тегов или элементов, чаще всего парных, которые можно вкладывать друг в друга (одни элементы могут целиком находиться внутри других). В первой строке кода из листинга 1.4 находится одиночный тег с определением документа, сразу за ним следует открывающий тег <html lang=»ru»>. Этот тег и закрывающий тег </html> в конце документа указывают на начало и конец HTML-кода. Между ними мы добавили теги, определяющие два важных раздела основной структуры документа: <head> и <body>. Это также парные теги. Позже в этой главе вы узнаете о других тегах, которые можно вставлять внутрь пар <head> и <body>. В результате получается древовидная структура, в корне которой находится тег <html>.

<meta>

Настало время вплотную заняться «головой» документа. Здесь было добавлено несколько изменений и новшеств, среди которых тег, определяющий кодировку символов в документе. Это тег <meta>, который указывает на то, каким образом текст должен отображаться на экране (листинг 1.5).

Листинг 1.5. Использование элемента <meta>

<! DOCTYPE html>

<html lang=»ru»>

<head>

<meta charset=»utf-8″>

</head>

<body>

</body>

</html>

В HTML5 данный элемент (как и многие другие) упрощен. Новый тег <meta> для обозначения кодировки символов стал короче. Разумеется, вы можете поменять кодировку UTF-8 на любую другую и использовать другие теги <meta>, например description или keywords, как показано в листинге 1. 6.

Листинг 1.6. Добавление различных элементов <meta>

<! DOCTYPE html>

<html lang=»ru»>

<head>

<meta charset=»utf-8″>

<meta name=»description» content=»Это пример кода HTML5″>

<meta name=»keywords» content=»HTML5, CSS3, DavaScript»>

</head>

<body>

</body>

</html>

ПОВТОРЯЕМ основы —

В документе может быть несколько тегов <meta>, содержащих общие объявления, однако эта информация не отображается в окне браузера. Она используется только поисковыми системами и устройствами, которым требуются предварительные данные о нашем документе. Как уже говорилось, кроме заголовка и некоторых значков, никакая другая информация между тегами <head> пользователям не видна. В коде листинга 1.6 атрибут name внутри тега <meta> определяет тип тега, а в атрибуте content объявляется его значение, однако эти сведения на экран не выводятся. Чтобы побольше узнать о теге <meta>, зайдите на наш веб-сайт и просмотрите ссылки для этой главы.

В HTML5 одинарные теги не обязательно должны иметь закрывающий слеш (/), но мы все же рекомендуем использовать его для совместимости. Предыдущий пример кода можно записать, как показано в листинге 1.7.

<! DOCTYPE html>

<html lang=»ru»>

<head>

<meta charset=»utf-8″ />

<meta name=»description» content=’Это пример» />

<meta name=»keywords» content=»HTML5, CSS3, JavaScript» />

</head>

<body>

</body>

</html>

<title>

Тег <title>, как и раньше, используется для определения заголовка документа (листинг 1.8), и ничего нового о нем сказать нельзя.

Листинг 1.8. Использование элемента <title>

<! DOCTYPE html>

<html lang=»ru»>

<head>

<meta charset=»utf-8″>

<meta name=»description» content=’Это пример HTML5″>

</head>

<body>

</body>

</html>

ПОВТОРЯЕМ ОСНОВЫ —

Текст между тегами <title> представляет собой общий заголовок для создаваемого документа. Чаще всего браузеры отображают его в заголовке окна.

<link>

Еще один важный элемент, являющийся частью «головы» документа, — <link>. Он используется для подключения к документу стилей, сценариев, изображений или значков из внешних файлов. Чаще всего с помощью <link> подключают таблицу стилей из внешнего CSS-файла (листинг 1.9).

Листинг 1.9. Использование элемента <link>

<! DOCTYPE html>

<html lang=»ru»>

<head>

<meta charset=»utf-8″>

<meta name=»description» content=Это пример HTML5″>

<link rel=»stylesheet» href=»mystyles. css»>

</head>

<body>

</body>

</html>

Таблица стилей — это набор правил форматирования, позволяющий менять внешний вид документа, например размер и цвет текста. Без таких правил текст и другие элементы отображаются на экране с использованием стандартных стилей браузера (размер, цвет и другие характеристики устанавливаются по умолчанию). Стили представляют собой простые правила, занимающие обычно всего несколько строк кода, и их можно объявить в самом документе HTML. Как мы увидим далее, не обязательно подгружать эту информацию из внешних файлов, но использование отдельных файлов для таблиц стилей — хорошая практика. Загрузка стилей CSS из внешнего файла упрощает структуру основного документа, увеличивает скорость загрузки веб-сайта, а также позволяет воспользоваться преимуществами новых возможностей HTML5.

В HTML5 избавились от необходимости указывать тип подключаемой таблицы стилей, таким образом, атрибут type больше не используется. Теперь для внедрения файла со стилями достаточно двух атрибутов: rel и href. Название атрибута rel происходит от англ. relation (отношение), и его значение определяет, чем для нашего документа является подключаемый файл. В данном случае атрибуту rel присвоено значение stylesheet, то есть мы сообщаем браузеру, что mystyles. css — это CSS-файл со стилями, необходимыми для отображения страницы (в следующей главе мы займемся стилями CSS и научимся подключать их к документу).

С добавлением этого последнего элемента работу над «головой» документа можно считать законченной. Теперь мы можем как следует поработать над телом, где и происходит все самое интересное.

Вам также могут быть интересны следующие статьи:

XML— это очень просто… | XML | Статьи | Программирование Realcoding.Net

В последнее время аббревиатура «XML» все чаще встречается в статьях, книгах и разговорах профессионалов (и дилетантов). Многое уже было сказано, и многое еще будет сказано об этой универсальной технологии. Основная цель данной статьи состоит в том, чтобы ввести читателя в мир расширяемого языка разметки и показать некоторые средства, используемые для представления знаний посредством XML-технологий и последующей визуализации этих знаний. Я не собираюсь утомлять читателя пространными описаниями стандартов на документы XML, рекомендуемых консорциумом W3C (зайдите в гости к консорциуму, проживающему по адресу http://www.w3.org; здесь расположена вся официальная документация). О некоторых стандартах и их реализации мы поговорим в следующих статьях, а сейчас наша основная задача — понять, из-за чего, собственно говоря, начался весь этот шум вокруг XML.

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

Судя по наметившимся тенденциям, в будущем XML будет служить связующим звеном между различными платформами и приложениями. Что же касается применения XML в бизнесе, то наилучшей областью для этого специалисты считают B2B (business-to-business). Уже сейчас многие компании, специализирующиеся в электронной коммерции, активно применяют расширяемый язык разметки для улучшения взаимодействия с партнерами.

Что же такое XML? Если речь идет о формальном определении, я бы предложил следующее: XML — это универсальный, не зависящий от платформы язык разметки, который можно использовать для представления иерархических данных и унификации передаваемой информации. Сама аббревиатура расшифровывается как Extensible Markup Language, что в переводе означает «расширяемый язык разметки». Как и HTML (Hypertext Markup Language), XML является потомком SGML (Standard General Markup Language) — «дедушки» языков разметки, который в течение многих лет используется в издательском деле. Иногда говорят, что XML — это не язык, а скорее метаязык, с помощью которого можно определять другие языки. Действительно, путем создания новых тэгов и определения новых структур с помощью этих тэгов мы фактически создаем новые языки с их собственным синтаксисом и семантикой.

Предвижу давно напрашивающийся вопрос: чем же был плох HTML? Последние версии этого языка в сочетании с каскадными таблицами стилей (CSS) позволяют создавать очень красивые web-сайты и обладают практически неограниченными возможностями форматирования гипертекстовых документов. Зачем же нам морочить голову, изобретать и добавлять новые тэги, когда и стандартных элементов (плюс возможности стилевых таблиц) хватает даже для самого причудливого оформления Web-страницы? Дело в том, что XML в его «чистом» виде слабо связан с форматированием документов. Альфа и омега этого языка — возможность семантически и синтаксически корректно описывать сложные структурированные данные. Правильно же представленные данные легче обрабатывать, передавать и представлять пользователю.

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

Теперь попробуем сделать то же самое с помощью XML:

Этот тривиальный пример хорошо демонстрирует различия в представлении данных с помощью HTML и XML. Действительно, то, что относилось к тексту в HTML-представлении (слова «Name» и «Age»), относится к структуре в XML-документе (тэги <name> и <age>). Таким образом, XML позволяет лучше структурировать хранимую и передаваемую информацию. Если в традиционном HTML понятия «представление» и «визуализация» часто смешиваются, то при работе с XML мы четко разделяем эти понятия. Все, что относится к описанию предметной области, делается средствами XML, а то, что относится к визуализации, мы оставляем специальным программам и стилевым таблицам.

Синтаксис прост, но строг…

Рассмотрим следующий простой документ XML:

<?xml version=»1.0″?> <people> <person> <name> <first_name>Ivan</first_name> <second_name>Ivanovich</second_name> <surname>Ivanov</surname> </name> <age>8</age> <hobby>football</hobby> </person> <person> <name> <first_name>Pyotr</first_name> <second_name>Petrovich</second_name> <surname>Petrov</surname> </name> <age>25</age> <hobby>chess</hobby> </person> <person> <name> <first_name>Nikolay</first_name> <second_name>Nikolayevich</second_name> <surname>Nikolayev</surname> </name> <age>45</age> <hobby>swimming</hobby> </person> </people>

Первая строка:

является декларацией используемой версии языка. В данном случае это версия 1.0. Не пропускайте эту строку в ваших документах!

Вторая строка

описывает корневой элемент документа (the root element). Составитель как бы предупреждает: «этот документ содержит информацию о людях».

Элементы, представленные тэгами <person> и </person> являются дочерними узлами (child nodes) корневого узла <people>. Слово «class» представляет собой имя атрибута, значение которого равно children. Узлы <name>, <age> и <hobby> являются потомками (descendants) узла <people> и дочерними узлами для <person>. Наконец, тэги <first_name>, <second_name> и <surname> — это «дети» для <name>, «внуки» для <person> и «правнуки» для <people>.

Последняя строка

определяет конец корневого элемента.

Отметим некоторые особенности синтаксиса XML.

В отличие от HTML, все элементы XML должны иметь закрывающий тэг (closing tag). В HTML следующая запись допустима:

В XML опускать закрывающие тэги нельзя. Для данного примера представление текста в формате XML могло бы выглядеть так:

<p>Это мой первый параграф</p> <p>Это мой второй параграф</p>

Впрочем, вместо <p> мы могли бы использовать другой тэг, например, отсутствующий в HTML тэг <prgrph>, благо XML позволяет нам изобретать наши собственные тэги. Заметим, что первая, «декларативная» строка документа не содержит закрывающего тэга. Это не ошибка. Дело в том, что декларации не являются элементами XML и не имеют закрывающих тэгов.

В отличие от HTML, тэги XML чувствительны к регистру (case sensitive). Если в HTML строки символов <IMG>, <img> и <Img> представляют собой один и тот же тэг, то в XML эти тэги не эквивалентны. Примеры:

<Letter>Это неправильная запись!</letter> <letter>Это правильная запись</letter>

В HTML иногда можно нарушить правила вложения тэгов без тяжелых последствий (в виде сообщения об ошибке). В XML это невозможно. Например, код

в HTML допускается. В XML такая запись ошибочна. Правильный код выглядел бы так:

В отличие от HTML, все документы XML должны иметь корневой элемент. Все остальные элементы являются «потомками» корневого. При этом строгие правила вложения не должны нарушаться.

В отличие от HTML, XML сохраняет пробелы. Строка

в HTML будет показана так:

В XML все пробелы будут сохранены.

В HTML значения атрибутов элементов часто могут не заключаться в кавычки. В XML все значения атрибутов непременно должны быть заключены в кавычки. Нарушение этого правила обязательно приведет к ошибке. Если в нашем примере третью строку изменить следующим образом:

синтаксис XML будет нарушен.

«Хорошие» и «плохие» документы

Документы XML, удовлетворяющие всем требованиям синтаксиса, называют правильными (well-formed). С этой точки зрения построенный нами документ с корневым элементом <people> является правильным. Я надеюсь, что на вашем компьютере заблаговременно был установлен Microsoft Internet Explorer 5.0. Если так, то мы можем проверить «правильность» нашего документа прямо сейчас. Сохраните текст документа в файле myFirstXML.xml и откройте этот файл в Internet Explorer. Если вы правильно скопировали текст, получится нечто вроде этого (рис. 1).

Если бы мы допустили какую-нибудь синтаксическую ошибку, например, забыли закрыть какой-нибудь тэг, программа-анализатор сообщила бы нам об этом через окно Internet Explorer.

Следует отметить, что я перечислил лишь основные правила синтаксиса XML, акцентируя внимание читателя на их отличии от правил построения документов HTML. Кроме правильных документов различают также действительные (valid) документы, которые удовлетворяют специальным определениям типа документа (Document Type Definition, DTD). Определение типа документа представляет собой описание логической структуры, в соответствии с которой строится документ. DTD определяет части документа и указывает, какие элементы и в каком порядке в них могут размещаться. Определение типа документа — это, по сути дела, набор правил, который передается специальной программе-анализатору (parser) для обработки документа и определения его соответствия правилам построения.

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

является частью DTD (в рассмотренном примере DTD содержит лишь одну эту строку).

Презентация документа

Я чувствую, что читатель устал от теоретических рассуждений и ждет конкретных указаний, которые помогли бы ему воочию оценить работу XML. Я уже писал, что XML прежде всего используется для представления, а не для визуализации данных. Тем не менее, существуют изящные методы визуализации документов XML. Попробуем визуализировать рассмотренный ранее документ с помощью каскадных таблиц стилей (CSS), о которых вы, вероятно, уже слышали.

Визуализация документов XML с помощью CSS по сути ничем не отличается от визуализации документов HTML. Требуется лишь связать нужный документ с нужной таблицей стилей. Что может быть проще?

Создайте файл myFirstXML.css в той же папке, что и myFirstXML.xml и занесите в него следующие определения стилей:

person {display: block; color: blue; margin-bottom: 30pt} name {display: block; color: brown} age, hobby {display: block} person. children {background-color: yellow}

Здесь display: block означает, что данный элемент нужно представлять в виде отдельного блока в окне браузера, color определяет цвет переднего плана, margin-bottom: 30pt здесь означает, что от каждого элемента <person> следует отступить на 30 пунктов вниз перед показом следующего элемента. Наконец, элементы <person> со значением атрибута class, равным children, следует подсветить желтым цветом.

Не забудьте сохранить файл.

Добавьте в ранее созданный файл myFirstXML.xml строку

после строки

с целью декларировать связь документа XML со стилевой таблицей CSS.

Опять сохраните файл.

Откройте файл myFirstXML.xml в окне Internet Explorer.

Нет, не все так просто…

Таблицы CSS, позволяющие визуализировать XML-документы, все же не решают всех проблем. В настоящее время имеются гораздо более мощные средства для трансформации и презентации документов XML, позволяющие не только произвольным образом форматировать документ XML, но и изменять его структуру, осуществлять поиск и сортировку в документе и выполнять другие интересные и полезные операции. Для расширения таких возможностей был разработан специальный расширяемый язык стилей (XSL). У читателя может возникнуть вопрос: «Если я хочу связывать документ XML с различными стилевыми таблицами, должен ли я каждый раз менять строку документа, декларирующего его связь со стилевой таблицей, или это можно делать динамически, используя скрипты или языки программирования?» Конечно, можно! Впрочем, об этом в следующий раз…

Краткий курс HTML 5. HTML-документ — Exlab

3. HTML-документ

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

<!DOCTYPE html>
<html>
<head>
   <title>Заголовок документа</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
Мой первый HTML-документ
</body>
</html>

Сохраните это в файл с расширением . html, после чего откройте его в браузере. Вы должны увидеть страницу с единственной надписью «Мой первый HTML-документ», да еще в заголовке браузера написано «Заголовок документа». Если вместо русских букв отображаются квадраты, то сохраните файл, выбрав в вашем редакторе кодировку UTF-8 (команда «Сохранить как…»). Но давайте по порядку…

Определение типа документа

Первая строчка сообщает браузеру, что наш документ составлен в формате HTML 5. Это так называемое DTD, и оно всегда расположено в самом начале. В других версиях HTML/XHTML эта строчка имеет более сложный вид и здесь рассматриваться не будет. Не забывайте указывать DTD, чтобы браузер знал, с чем имеет дело, и верно отображал документ.

Структура документа

Ниже находится корневой элемент <html>, охватывающий весь документ от DTD до самого конца. Внутри него один за другим расположены <head> и <body>. Как и следует из названия, <head> — это «голова» документа, в которой размещается заголовок <title> (его содержимое отображается в заголовке браузера) и прочая служебная информация (сейчас это единственный элемент <meta />). <body> — это «тело» документа, в котором и находится основной текст.

Элементы <html>, <head> и <title>, наряду с DTD являются обязательными и должны быть размещены в описанном выше порядке. В противном случае документ не будет соответствовать стандартам W3C (проверьте одним из способов, описанных во введении). Это еще не значит, что он не будет отображаться в каких-либо браузерах, но нет гарантий, что отображение будет верным.

Кодировка документа

Элемент <meta /> предназначен для передачи служебной информации браузеру. Атрибут http-equiv определяет «о чем сообщить», а content — «что сообщить».

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

В этой строчке браузеру сообщается, что содержимое документа (content-type) соответствует MIME-типу text/html в кодировке UTF-8. Более подробно возможности этого элемента будут рассмотрены позже. Тег <meta /> непарный, поэтому завершается косой чертой «/».

Если нет причин использовать другую кодировку, то сохраняйте HTML-документы в UTF-8 (в большинстве редакторов есть соответствующая опция). К ее недостаткам можно отнести, пожалуй, лишь больший размер файлов. Это связано с тем, что символы, не входящие в ASCII (латиница, цифры, знаки препинания и др. ), занимают два байта, вместо одного. Преимущество же в том, что она позволяет использовать любые символы Unicode (включая большинство алфавитов мира). UTF-8 — рекомендуемая кодировка для HTML-документов, и давно является стандартом «де-факто» в интернете.

HTML документ. Структура html документа. Что тестировать?

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

Предлагаем шесть инструментов тестирования HTML кода в браузере:

  1. CodePen

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

  1. Использование текстового редактора

Это еще один способ запустить файл HTML. При работе в текстовом редакторе в автономном режиме, таком как Sublime Text или Notepad ++, просто нужно сохранить файл с расширением .html и запустить его, дважды щелкнув по нему. По умолчанию он запускается в браузере, установленном на локальном компьютере. Также можно перейти в раздел «Настройки» своего устройства и изменить браузер по умолчанию, чтобы проанализировать вывод в разных браузерах. 

  1. JSFiddle

JSFiddle – это онлайн-сообщество разработчиков, которое также предоставляет платформу для тестирования HTML кода онлайн в браузере. Он был запущен как приложение в 2009 году, но позже приобрел огромную популярность. JSFiddle в основном используется для тестирования кода JavaScript в режиме онлайн, но также можно тестировать HTML, CSS и код, написанный с помощью некоторых других интерфейсных библиотек. Он имеет собственный онлайн-редактор и одновременно показывает вывод. Это буквально лучший инструмент для работы с JavaScript. Единственным недостатком является то, что нужно нажать кнопку «Выполнить», чтобы обновить панель предварительного просмотра.

  1. JSBin

Многие новички считают интерфейс JSFiddle сложным для работы. JSBin является альтернативой JSFiddle и сравнительно проще в использовании. Он имеет два типа доступа: бесплатный и профессиональный. Оба типа позволяют неограниченное бесплатное тестирование кода HTML, CSS и JavaScript в браузере, однако количество библиотек JavaScript, которые можно включить, является фиксированным. Если необходимо получить доступ к дополнительным функциям, таким как частные корзины и хостинг активов, нужно зарегистрировать профессиональную учетную запись.

  1. Liveweave

Liveweave предлагает предварительный просмотр HTML кода в режиме реального времени и является одним из самых красивых и приятных инструментов для работы. Интерфейс действительно прост и понятен благодаря наличию изменяемых размеров панелей. При наборе кода во встроенном редакторе он постоянно делает подсказки, чем значительно облегчает работу. Кроме того, можно легко сохранить код в облаке и даже загрузить его в виде файла .zip для дальнейшего использования. Он также позволяет работать с библиотеками JavaScript, такими как jQuery, и имеет линейку, позволяющую отслеживать отзывчивость продукта.

  1. HTMLhouse

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

Также существует бесплатный сервис для проверки Markup Validation Service W3C, с помощью которого можно осуществить поиск ошибок валидации на страницах сайта. Этот сервис проверяет указанные данные на ошибки, а также формирует отчет с их перечнем и рекомендациями по исправлению. 

Для новичков, помимо вышеприведенных инструментов, могут пригодиться некоторые другие HTML-ресурсы, такие как HTML Goodies. Также можно работать с инструментами разработчика Chrome. Для этого нужно запустить HTML документ в Google Chrome и щелкнуть правой кнопкой мыши элемент HTML, который необходимо проверить. Нажав «Проверить» можно получить инструменты для запуска, анализа и даже отладки кода.

Однако основным недостатком всех вышеперечисленных инструментов является то, что они показывают, как выглядит код только в одном браузере. Если необходимо тестировать в разных браузерах, нужно установить их все. Это также иногда невозможно. Например, если тестировщик работает в среде Mac, он не может напрямую тестировать в IE. Одним из способов протестировать сайт в разных браузерах является использование онлайн-кроссбраузерных инструментов тестирования, таких как LambdaTest. Это один из самых удивительных инструментов кроссбраузерного тестирования, позволяющий тестировать свой код на кроссбраузерную совместимость. Результаты теста основаны на результатах более 2000 браузеров. Это обеспечивает бесперебойную работу кода в различных десктопных и мобильных браузерах и избавляет от многих проблем.

Объекты документа HTML DOM

Свойство / метод Описание
активный элемент Возвращает текущий сфокусированный элемент в документе
addEventListener () Присоединяет обработчик событий к документу
принять узел () Принимает узел из другого документа
анкеры Возвращает коллекцию всех элементов в документе, имеющих атрибут имени
апплетов Возвращает коллекцию всех элементов в документе
baseURI Возвращает абсолютный базовый URI документа
кузов Задает или возвращает тело документа (элемент )
закрыть () Закрывает выходной поток, ранее открытый с документом. открытый ()
печенье Возвращает все пары «имя / значение» файлов cookie в документе.
кодировка Не рекомендуется. Вместо этого используйте characterSet. Возвращает кодировку символов для документа
набор символов Возвращает кодировку символов для документа
createAttribute () Создает узел атрибута
createComment () Создает узел комментария с указанным текстом
createDocumentFragment () Создает пустой узел DocumentFragment
createElement () Создает узел элемента
createEvent () Создает новое событие
createTextNode () Создает текстовый узел
по умолчанию Просмотр Возвращает объект окна, связанный с документом, или null, если он недоступен.
дизайн Модель Управляет возможностью редактирования всего документа.
doctype Возвращает объявление типа документа, связанное с документом
документ Элемент Возвращает элемент документа документа (элемент )
документ Режим Возвращает режим, используемый браузером для визуализации документа
документURI Задает или возвращает расположение документа
домен Возвращает доменное имя сервера, на котором загружен документ
domConfig Устарело.Возвращает конфигурацию DOM документа
закладные Возвращает коллекцию всех элементов документа
execCommand () Вызывает указанную операцию буфера обмена для элемента, имеющего в данный момент фокус.
форм Возвращает коллекцию всех элементов
в документе
полноэкранный режим Элемент Возвращает текущий элемент, отображаемый в полноэкранном режиме
полноэкранный режим включен () Возвращает логическое значение, указывающее, можно ли просмотреть документ в полноэкранном режиме.
getElementById () Возвращает элемент с атрибутом ID с указанным значением
getElementsByClassName () Возвращает HTMLCollection, содержащую все элементы с указанным именем класса
getElementsByName () Возвращает HTMLCollection, содержащую все элементы с указанным именем
getElementsByTagName () Возвращает HTMLCollection, содержащий все элементы с указанным именем тега
имеетFocus () Возвращает логическое значение, указывающее, имеет ли документ фокус
голова Возвращает элемент документа
изображений Возвращает коллекцию всех элементов в документе
реализация Возвращает объект DOMImplementation, который обрабатывает этот документ
importNode () Импортирует узел из другого документа
вход Кодирование Возвращает кодировку, набор символов, используемый для документа
последняя Модифицированная Возвращает дату и время последнего изменения документа
звеньев Возвращает коллекцию всех элементов и в документе, которые имеют атрибут href
нормализовать () Удаляет пустые текстовые узлы и присоединяет соседние узлы
normalizeDocument () Удаляет пустые текстовые узлы и присоединяет соседние узлы
открыто () Открывает поток вывода HTML для сбора вывода из документа. написать ()
querySelector () Возвращает первый элемент, который соответствует указанным селекторам CSS в документе.
querySelectorAll () Возвращает статический список узлов, содержащий все элементы, соответствующие указанному селектору (-ам) CSS в документе.
состояние готовности Возвращает статус (загрузки) документа
реферер Возвращает URL-адрес документа, в который загружен текущий документ
removeEventListener () Удаляет обработчик событий из документа (который был прикреплен с помощью метода addEventListener ())
renameNode () Переименовывает указанный узел
скриптов Возвращает коллекцию элементов