HTML

Учебник о языке разметки HTML

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

HTML

Введение в HTML

Введение

HTML (Hyper Text Markup Language, расшифровывается как язык разметки гипертекстовых страниц) — каркас всех современных сайтов.HTML является языком разметки, но не языком программирования. Под языком разметки понимается набор символов созданный с целью передачи информации о строении текста. Это значит, что в отличии от языков программирования, язык разметки только управляет "внешним видом" текста для конечного пользователя.

Мы ранее сказали, что будем рассказывать об HTML5. Чем отличается стандарт HTML5 от предыдущих HTML? Существует такая организация W3C (World Wide Web Consortium). Суть её работы хорошо выражена в их лозунге «Leading the Web to Its Full Potential…» («Приведём всемирную паутину к лидерству, раскрыв все её возможности»). И когда они говорят, что в будущем браузеры не будут поддерживать старые версии HTML, то оно наверняка так и будет - в данный момент, почти все браузеры придерживаются единого стандарта, который разрабатывает W3C, а именно - HTML5.

Когда W3C создавали стандарт HTML, в нём не предусматривалось тегов для форматирования гипертекста - теги показывали только структуру документа, например:

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
      <h1>
         Это заголовок. 
      </h1>
      <p>
         Это абзац. 
      </p>
   </body>
</html>

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

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   </head>
   <body>
      <marquee>
         Бегущую строку, умеет отображать только IE.
      </marquee>
   </body>
</html>

Вскоре, количество тегов сильно разрослось.

Также нежелательно было появление в стандарте HTML 3.2 тега  (он нужен для изменения цвета, шрифта и размера текста). Представьте себе, что нужно написать страницу, где все заголовки красные. И приходится помимо тегов в заголовке писать ещё тег шрифта с атрибутом цвета.

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

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

Собираем инструменты

Текстовый редактор

Первым делом, нам понадобится текстовый редактор. Текстовый редактор есть на каждом компьютере. Важно заметить: нам нужна программа для редактирования текстовых файлов, а не документов (то есть ни в коем случае нельзя использовать текстовые препроцессоры по типу Microsoft Word). Обычно стандартного «Блокнота» Windows достаточно, но есть текстовые редакторы, которые лучше приспособлены к написанию HTML-страниц. Неплохие редакторы Notepad ++, Brackets, Atom, Sublime Text в которых хорошо писать не только HTML, CSS, но и ещё несколько десятков других языков программирования и разметки. У них есть несколько удобных функций,таких как подсветка синтаксиса, которая позволяет выявлять ошибки прямо во время их создания, автоматическое дополнение тегов, что позволит сэкономить время на написание кода и многое другое.

Браузер

О браузере также стоит сказать несколько слов. Все советуют держать у себя на компьютере набор браузеров: Firefox, Opera, Chrome, Safari и просматривать свои страницы во всех сразу. Правда, функции тегов в разных браузерах отличаются не сильно (а с введением HTML5 - различий в тегах нет). Поэтому учиться можно просматривая свои страницы в одном из них, а уже когда пишете что-то большее — посмотрите, не имеется ли слишком критических различий во всех других. Тем не менее, в современных и наиболее популярных браузерах Firefox и Chrome различия настолько незначительны и касаются в основном старых тегов.

Первая страница

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

Чтобы создать веб-страницу, нужно создать в файловой системе текстовый файл с расширением .html или .htm. Какое из них выбрать — философский вопрос. .htm — сокращение от .html, что довольно смешно, поскольку .html — это тоже сокращение. Но были времена, когда в некоторых ОС расширение файла могло содержать максимум 3 символа (например, DOS), и страницы гипертекста имели расширение .htm. Теперь можно использовать оба расширения,но лучше всего использовать именно .html

Содержание веб-страницы

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

URL (Universal Resource Locator) — адрес ресурса, который мы видим в адресной строке браузера.

Тег — это всё, что находится между угловыми скобками. Например <html>. Теги не отображаются браузером, они только задают структуру текста. Теги бывают трёх видов:

Открывающие
Закрывающие
Одинарные.

Открывающие и закрывающие теги всегда существуют парами: открывающий <html> и закрывающий </html>. Закрывающий отличается от открывающего тем, что после угловой скобки < стоит знак слэш (знак дроби) «/».

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

Приведу пример кода веб-страницы:

<html>
   <head>
      <!-- Заголовочная информация, например: -->
      <title>
         Название страницы (отображается в строке заголовка браузера)
      </title>
   </head>
   <body>
      Содержимое страницы.
   </body>
</html>

Все теги, которые встречаются выше, обязательны. Они присутствуют в каждой интернет-странице. Конечно, если вы какой-то из них забудете, браузер-то разберётся, но все серьёзные люди такие вещи не забывают. Тег <html> говорит браузеру, что в нём содержится код HTML. Тег <head> говорит, что в нём содержится заголовочная информация страницы. Эта информация на самой странице отсутствует. Тег <title>, как уже было сказано, содержит заголовок, который обычно отображается на вкладке. <body> содержит тело, тоесть содержимое страницы.

Кроме тегов и текста, гипертекстовые страницы могут содержать комментарии. Комментарии выглядят так: . Они позволяют писать на странице текст, который не отображается браузером. Это нужно для вставки сообщений типа .

В HTML существует проблемы с символами сравнения. Чтобы отображать некоторые нестандартные символы, существует понятие специальных символов. Специальные символы в HTML описываются так: &код;. Например:

Название	Код	Вид
Менее	<	<
Более	>	>
Амперсанд	&	&
Кавычка	"	"

Здесь я указал только самые-самые нужные. Если вам нужно больше, надо поискать. Можно поискать где-то здесь. То есть то, что мы хотели описать в предыдущем примере, будет выглядеть так:

<!DOCTYPE html>
<html>
   <head>
      <title>
         С чего начинается страница
      </title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   </head>
   <body>
      Каждая страница HTML начинается с тега &lt;html&gt;. 
   </body>
</html>

Кодировка

Одним из обязательных требований для веб-страницы является указывание кодировки. Опять же браузер сам может определить кодировку. Но лучше указывать. Способа есть два:

HTML4.01:

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

HTML5:

      <meta charset="utf-8" />

Оба способа одинаковы. Но второй короче.

Атрибуты

Некоторые теги имеют свойства, которые называются атрибутами. Например, почти каждый тег имеет атрибут title. В нём прописывается текст подсказки, которая видна, когда пользователь наводит курсор на элемент тега. Пусть нам нужно написать известное сокращение: HTML. И если пользователи наводят на него курсор, они могут его расшифровать. Это делается просто:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>
         Аббревиатура
      </title>
   </head>
   <body>
      <abbr title="Hypertext Markup Language">
         HTML
      </abbr>
   </body>
</html>

Здесь мы видим, как правильно записывать атрибуты. Название атрибута, затем знак равенства, и значение в двойных кавычках. В стандарте HTML 4.01 нет атрибутов без значений.

Лучше писать все атрибуты и их значения маленькими буквами
Зачем? Ради будущего!

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

Теперь перейдём к форматированию текста. Форматирование задаёт не так внешний вид, как структуру страницы. Важнейшими тегами форматирования есть абзацы (англ. paragraph) и заголовки (англ. header)

Заголовки

Заголовки бывают шести уровней. Заголовки первого уровня — главные и самые большие, а заголовки шестого уровня даже меньше, чем текст абзацев. Ниже пример использования заголовков:

<!DOCTYPE html>
<html>
   <head>
      <title>
         Начало истории
      </title>
      <meta charset="utf-8" />
   </head>
   <body>
      <h2>
         Пролог
      </h2>
      <h3>
         О хоббитах
      </h3>
      <p>
         В этой книге речь пойдет преимущественно о хоббитах, и с её страниц читатель узнает немало об их ... и т. д. 
      </p>
      <h1>
         Братство кольца
      </h1>
      <h2>
         КНИГА ПЕРВАЯ
      </h2>
      <h3>
         I Долгожданная гостиная
      </h3>
      <h3>
         ... и т.д. 
      </h3>
      <h3>
         XII Побег к броду
      </h3>
      <h2>
         КНИГА ВТОРАЯ
      </h2>
      <h3>
         ...и т.д. 
      </h3>
   </body>
</html>

Эта страница отобразится так:

Пролог

О хоббитах

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

Братство кольца

КНИГА ПЕРВАЯ

I Долгожданная гостиная

... и т.д.

XII Побег к броду

КНИГА ВТОРАЯ

...и т.д.

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

Переносы строк

<html>
   <head>
      <title>
         Ударяет мечом
      </title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   </head>
   <body>
      Ударяет мечом, 
      Ударяет, ударяет,

      Большой комтура Закона, 
      Чтобы с него честь
      Была для нас,

      А для Вкраплении оборона! 
   </body>
</html>

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

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

Здесь следует вставить замечание. Все теги ходят парами открывающий — закрывающий. Между ними содержатся элементы гипертекста. Но тег обрыва строки не содержит ничего. Поэтому он пару и не имеет. Но новейшие стандарты требуют, чтобы все теги закрывались. Правда учтя наличие тегов подобных , придумали сокращённую форму записи ( ). Он как бы открывается, а потом сразу закрывается. Это кажется довольно странным. Конечно можно писать и в старом формате: . Но лучше иметь код, который отвечает новейшим стандартам.

И ещё один способ — взять весь стих в теги <pre></pre>. Весь текст, помещённый между этими тегами, отображается точно так же, как его видно в редакторе. Правда этот тег также меняет шрифт на моноширинный. Но зато мы можем делать с текстом интересные вещи:

<!DOCTYPE html>
<html>
   <head>
      <title>
         Long Tail
      </title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   </head>
   <body>
      It is a long tail, certainly, 'said Alice, looking down with wonder at the Mouse's tail'
`But why do you call it sad? ' And she kept on puzzling about it while the Mouse was speaking,
so that her idea of the tale was something like this: - 
      <pre>
                    `Fury said to a
                   mouse, That he
                 met in the
               house,
            "Let us
              both go to
                law: I will
                  prosecute
                    YOU. - Come,
                       I'll take no
                        denial; We
                     must have a
                 trial: For
              really this
           morning I've
          nothing
         to do. "
           Said the
             mouse to the
               cur, "Such
                 a trial,
                   dear Sir,
                         With
                     no jury
                  or judge,
                would be
              wasting
             our
              breath. "
               "I'll be
                 judge, I'll
                   be jury, "
                         Said
                    cunning
                      old Fury:
                     "I'll
                      try the
                         whole
                          cause,
                             and
                        condemn
                       you
                      to
                       death. "
      </pre>
   </body>
</html>

Это выглядит следующим образом:

It is a long tail, certainly, 'said Alice, looking down with wonder at the Mouse's tail'

`But why do you call it sad? ' And she kept on puzzling about it while the Mouse was speaking,

so that her idea of the tale was something like this: -

                    `Fury said to a
                   mouse, That he
                 met in the
               house,
            "Let us
              both go to
                law: I will
                  prosecute
                    YOU. - Come,
                       I'll take no
                        denial; We
                     must have a
                 trial: For
              really this
           morning I've
          nothing
         to do. "
           Said the
             mouse to the
               cur, "Such
                 a trial,
                   dear Sir,
                         With
                     no jury
                  or judge,
                would be
              wasting
             our
              breath. "
               "I'll be
                 judge, I'll
                   be jury, "
                         Said
                    cunning
                      old Fury:
                     "I'll
                      try the
                         whole
                          cause,
                             and
                        condemn
                       you
                      to
                       death. "

Изменение шрифта

Ещё немного о теге изменения шрифта. Шрифт может иметь три дополнительных атрибута: жирность (bold), курсив (italic) и подчёркивание (underlined). Они меняются с помощью тегов: ,  и  соответственно.

Правда вместо тега  рекомендуют использовать тег , а вместо  — . У них есть различие  и  — это логическое выделение, а  и  — физическое, то есть в первых двух случаях мы акцентируем внимание посетителя сайта на каком-то слове или предложение, ну а в последних двух просто требуется, чтобы текст был жирным или курсивным и делается это просто для красоты. Кроме того существует ещё такое свойство как зачёркивание. Оно задавалось тегом <s>, что означало strikeout. Но опять же в современном мире слова не вычёркивают, их удаляют.

Школа W3 напротив тегов , <s> и <strike> пишет «deprecated». Что в переводе означает: «сильно возражать, выступать против, протестовать». Кто протестует не сказано, но скорее всего Консорциум трёх дубльве. Вместо тегов вычёркивания рекомендуют использовать тег удаления. А вместо тега подчёркивания — стили.

Удаление и замена

Для того чтобы обходиться без <s>, придумали тег <del> он помечает что текст был именно удалён как неверный и автор акцентирует пользователя на этом. Кроме тега удаления ввели тег вставки <ins>. Тег вставки указывает текст, который вставили после удаления. Выглядит такая вещь примерно так:

      2 + 2 = <del>5</del><ins>4</ins>

А отобразится она так:

2 + 2 = 54

Причём текст в теге <ins> будет подчёркнут. (А ребята из W3schools говорили использовать CSS)

Таблица тегов форматирования

Далее опишу все теги в таблице, потому что мне уже надоело здесь о них рассказывать, а вам видимо надоело читать.

Тег	Пример	Вид	Описание
`<b>`	<b>текст</b>	текст	Задаёт жирный текст.
`<strong>`	<strong>текст</strong>	текст	Задаёт сильный акцент на тексте между тегами. Выглядит так же, как и жирный.
`<i>`	<i>текст</i>	текст	Задаёт курсивный текст.
`<em>`	<em>текст</em>	текст	Задаёт акцент на тексте между тегами. По виду аналогичен курсивному.
`<sub>`	H<sub>2</sub>O — это вода	H₂O — это вода	Задаёт текст в нижнем индексе.
`<sup>`	2<sup>8</sup> = 256	2⁸ = 256	Задаёт текст в верхнем индексе.
`<ins>`	<ins>текст</ins>	текст	Задаёт текст, который вставляется после удаления. Обычно подчёркнут.
`<del>`	<del>текст</del>	~~текст~~	Задаёт текст, который удалён (выглядит перечёркнутым).
`<code>`	<code>текст</code>	`текст`	Задаёт текст, представляющий компьютерный код.
`<kbd>`	<kbd>текст</kbd>	`текст`	Задаёт текст, который введён с клавиатуры.
`<samp>`	<samp>текст</samp>	`текст`	Задаёт текст, который является примером (Sample). Почти как примеры в этом тексте.
`<var>`	<var>текст</var>	`текст`	Задаёт текст, представляющий переменную. Наверное для всяких статей по программированию.
`<pre>`	<pre>текст</pre>	текст	Задаёт текст, который сохраняет все символы форматирования, такие как табуляции, пробелы, и переносы строк.
`<abbr>`	<abbr title="HyperText Markup Language">HTML</abbr>	HTML	Задаёт текст аббревиатуры. В атрибуте title можно записать расшифровки.
`<address>`	<address>город Берлин</address>	город Берлин	Задаёт текст адреса. Отображается курсивом.
`<bdo>`	<bdo dir="rtl">HTML</bdo>	HTML	Очень весёлый тег. Для тех кто пишет на иврите или арабском. В атрибуте dir можно задать направления текста. «rtl» — справа налево, «ltr» — нормально.
`<blockquote>`	<blockquote>html html html</blockquote>	html html html	Задаёт текст большой цитаты.
`<q>`	<q>html html</q>	html html	Задаёт текст маленькой цитаты.
`<cite>`	<cite>html+css+javascript=website</cite>	html+css+javascript=website	Задаёт текст цитаты.
`<dfn>`	<p><dfn>html</dfn> — это язык разметки гипертекста</p>	html — это язык разметки гипертекста	Задаёт строку, для которой будет дано определение (Definition).
big	<big>текст</big>	текст	Задаёт большой текст. (устаревший для HTML5)
small	<small>текст</small>	текст	Задаёт маленький текст.
u	<u>текст</u>	текст	Подчёркивание текста. (устаревший для HTML4.01, но не для HTML5)
s	<s>текст</s>	~~текст~~	Перечёркивание текста. (устаревший для HTML4.01, но не для HTML5)
tt	<tt>текст</tt>	`текст`	Задаёт текст, который выглядит так, будто введён с телетайпа. (Моноширинный шрифт, тег устаревший)

Ну, со структурой гипертекста, думаю, мы разобрались, можно теперь переходить к вещам более глобальным.

Ссылки

Как я уже говорил, основным свойством, которое отличает нормальный текст и гипертекст, является гиперссылка. Гиперссылки создаются с помощью тега <a> с атрибутом href, который принимает значение нужного нам URL. Например, нужно создать страницу, которая содержит ссылку на статью. Это может выглядеть примерно так:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>
         Ссылка
      </title>
   </head>
   <body>
      Здесь можно найти материалы о web-дизайне: <a href="http://ru.wikibooks.org/wiki/HTML">ru.wikibooks.org</a>. 
   </body>
</html>

Теперь на странице надпись ru.wikibooks.org станет гиперссылкой.

Обычно страницы в интернете не сидят одиноко. Они размещаются группами, которые называются узлами. Сайт — это по моему определению набор страниц и других файлов, которые имеют общую часть URL. Например, все страницы, начинающиеся на http://www.microsoft.com, принадлежат одному сайту одной маленькой компьютерной фирмы. Далее следует символ «/», и адрес продолжается.

Можно сделать у себя на компьютере маленькую модель сайта. Для этого нужно создать новый каталог, в котором будем размещать файлы. Затем в каталоге разместить файл index.htm. Если есть какая-то ссылка на ваш сайт, без указания, какой конкретно файл загружать, то будет загружен именно index.htm. Далее мы можем создать ещё одну папку внутри нашей. Пусть она называется subdir. Если в ней разместить файл index.htm, то для перехода к нему нужно будет написать: «www.ваш_сайт.com/subdir/».

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

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

Например, если вы певец и хотите поделиться своими песнями с другими, вы можете положить в папку с сайтом файл track1.mp3, а в файле index.htm написать:

<html>
<head>
<title>Моя музыка</title>
</head>
<body>
Я только что записал новый трек. Вы можете <a href="track1.mp3">скачать его здесь.</a>
</body>
</html>

Если файлы находятся в одном каталоге, то в атрибуте href достаточно написать название файла, чтобы сделать ссылку. Если же мы имеем файлы «site/1.htm» и «site/subdir/2.htm», то чтобы с первого сделать ссылку на второй, а со второго на первый, надо написать href ="subdir/2.htm" и href ="../1.htm" соответственно. Такие адреса называются относительными. Две точки означают «тот каталог что выше». Относительные адреса хороши тем, что когда мы переименовываем папку «site» или меняем хостинг их не нужно менять.

Но этим возможности тега <a> не исчерпываются. a — сокращенно от anchor — что значит якорь. С помощью тега <a> можно ставить в гипертекстовом документе якоря, или проще говоря закладки, позволяющие переходить в определённое место документа. Это особенно полезно, когда документ большой, и нужно быстро переходить в нём к нужному разделу. Для этого существует атрибут id.

Я правда не понимаю для чего делать закладки с помощью тега <a>, когда атрибут id есть в каждом тезисе. Но всеми способами получается нормально.

Чтобы долго не объяснять снова приведу пример:

<html>
<head>
<title>Моя музыка</title>
</head>
<body>
<h1> Содержание</h1>
<a href="#part1"><h2>Часть 1</h2></a>
<a href="#part2"><h2>Часть 2</h2></a>
<a href="#part3"><h2>Часть 3</h2></a>
<h1 id="part1">Часть 1</h1>
<p> Много текста </p>
<h1 id="part2">Часть 2</h1>
<p>Много текста</p>
<h1 id="part3"> Часть 3</h1>
<p>Много текста</p>
</body>
</html>

Когда мы делаем гиперпереходы в пределах одной страницы, то в атрибуте href просто пишем знак («#») и название закладки (то что написано в атрибуте id). А когда делаем переход на закладку в другой странице, то сначала пишем адрес страницы, затем добавляем знак («#») и название закладки. Когда случайно делается переход на закладку, которой не существует, ничего страшного не происходит. Мы просто попадаем в начало страницы, как при обычном переходе.

Вообще-то w3cschools писали об атрибуте name, но кроме того они писали, что скоро этот атрибут будет отвергнут и заменён на id. Поэтому думаю лучше использовать более новый, и в два раза короче вариант. А чем короче страница, тем быстрее она загрузится :-)

Чаще страницы загружаются в том окне, где вы щёлкнули ссылку. Но мы можем выбрать место, где будут загружаться страницы. Для этого в теге <a> существует атрибут target. Он может принимать значения _blank, если нам нужно загружать страницу в новом окне, _self, если нам ничего менять не нужно (оно и так загружается в том окне где щёлкнули), _parent, если мы хотим забрать из окна фрейма и открыть страницу на всё окно.

Аудио

bgsound

Этот тег нестандартный и не входит в спецификации. Поддерживается только IE. Вместо него рекомендуется использовать тег <audio>.

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

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

<bgsound src="Example.mid" loop="3" volume="-1000" balance="3000">

Параметры:

src указывает путь к музыкальному файлу.
loop устанавливает, сколько раз будет проигрываться музыка. По умолчанию проиграется 1 раз.
volume задаёт громкость звучания музыки на странице. По умолчанию — 0. Громкость — целое число от −10000 до 0. Ноль — максимальный уровень. Чем больше значение этого параметра, тем тише звучит музыка.
balance регулирует громкость звучания в левой и правой колонках.

audio

В HTML5 добавили новый тег <audio>.

Вот как он выглядит:

<!DOCTYPE html>
<html>
   <head>
      <title>
         Очень красивая мелодия! 
      </title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   </head>
   <body>
      <audio controls="controls">
         <source src="music1.mp3" type="audio/mpeg" />
         <source src="music2.mp3" type="audio/ogg; codecs=vorbis" />
      </audio>
   </body>
</html>

Обращаем ваше внимание на непонятный тег <source />.

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

Подробно про атрибуты тега <audio>:

autoplay — звук начинает играть сразу после загрузки страницы.
controls — добавляет панель управления к аудиофайлу.
loop — повторяет воспроизведение звука с начала после его завершения.
preload — используется для загрузки файла вместе с загрузкой веб-страницы.
src — указывает путь к воспроизводимому файлу (только если не использовался тег <source />).

Элементы оформления

Подведём черту

Иногда вы что-то пишете, пишете, и вдруг чувствуете что нужно подвести черту.

Делается это просто как новая строка: <hr /> (horisontal ruler). Вообще-то в этом теге есть атрибуты, которые настраивают внешний вид, но их использование в новых стандартах нежелательно. Разрешены только общие атрибуты, такие как id, class, style и атрибуты событий, но это темы следующего раздела.

Картинки

До этого момента мы прочитали очень много текста о тексте. Конечно — текст важнейшая часть любой страницы (если конечно это не страница какой-либо галереи), но сплошной текст штука довольно скучная. Иллюстрированный текст выглядит намного лучше. Для вставки в текст изображения используют тег <img>. Его атрибут src задаёт источник (source) — файл, в котором содержится картинка. Этот тег одинарный, поэтому закрывающий тег не нужен.

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

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

Также мы можем изменить размер картинки. Например, если мы имеем маленькое изображение, мы можем его растянуть. Правда тогда оно будет отображаться несколько размыто. Также можно изменять размеры изображения вместе с изменением размеров окна браузера. Для этого размеры указывают в процентах. Размеры задаются атрибутами width и height. Пример:

<!DOCTYPE html>
<html>
   <head>
      <title>
         Картинки
      </title>
      <meta charset="utf-8" />
   </head>
   <body>
      <img src="image.jpg" alt="Маленькая картинка" title="Маленькая картинка" width="100" height="100">
      <br/>
      <img src="image.jpg" alt="Велика картинка" title="Велика картинка" width="400" height="400">
      <br />
      <img src="image.jpg" alt="Широка картинка" title="Широка картинка" width="100%" height="400">
      <br/>
   </body>
</html>

Картинки могут быть помещены между тегами <a> и </a>, тогда щелчок по ним будет аналогичным щелчку по обычным ссылкам. Вокруг картинки появится синяя рамка. Но есть ещё более интересный способ сделать из картинки гиперссылку. Это карты.

Карты

Изображение можно разделить на области различной формы, каждая из которых может ссылаться в другое место. Для этого с помощью тега <map> задают карту. Атрибут id идентифицирует карту и используется для связи с картинкой. Чтобы картинку назначить в качестве карты, используется атрибут usemap (в котором мы должны записать id карты). Внутри тега карты содержатся теги областей, которые задаются тегами <area>. Опять же, этот тег одинарный, и хочет чтобы его правильно закрывали. Атрибут href задаёт адрес ссылки, атрибут nohref, если назначить ему значение true, исключает зону с карты. Атрибут shape задает форму области: rect — прямоугольная, circle — круг, и poly — для многоугольника.

<!DOCTYPE html>
<html>
   <head>
      <title>
         Карта планет
      </title>
      <meta>
   </head>
   <body>
      <img src="planets.gif" width="145" height="126" usemap="#planetmap">
      <map id="planetmap" name="planetmap">
         <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
         <area shape="circle" coords="90,58,3" alt="Mercury" href="mercury.htm" />
         <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
      </map>
   </body>
</html>

Пример я бессовестно «сдул» отсюда. Очень хорошее место, чтобы потренироваться, без лишней мороки.

Форму задают с помощью атрибута coords, который содержит четыре координаты (лево, верх, право, низ) для прямоугольника, три (координаты центра и радиус) для круга, и чётное количество для многоугольника (координаты каждой вершины). Координаты можно узнать морем способов. Можно в Paint’е посмотреть. А если форма сложная, точек много, то можно и специальную программу использовать. Это вроде X-Map. Хотя, если честно, ни этой программой, ни картами я не пользовался. Но если такое есть, то надо дать людям знать. Иначе книжка какая-то не солидная будет.

Представление информации структурировано

Списки

Списки в HTML бывают трёх видов: упорядоченные (ordered list) <ol>, неупорядоченные (unordered list) <ul> , и списки определений (definition list) <dl> . Элементы двух первых списков задаются тегом <li> (list item). Элементом списка может быть любой текст, картинки, абзацы, а также другие списки. Например, упорядоченный список задают так:

<ol>
    <li> Раз </li>
    <li> Два </li>
    <li> Три </li>
</ol>

Выглядит это так:

Раз
Два
Три

Список определений не является списком элементов. Это список терминов и определений терминов. Список определений начинается с тега <dl>. Каждый термин списка определений начинается с тега <dt>. Каждое определение списка начинается с тега <dd>:

<dl>
    <dt>элемент 1</dt>
    <dd>описание элемента 1</dd>
    <dt>элемент 2</dt>
    <dd>описание элемента 2</dd>
</dl>

Таблицы

Таблицы удобно задавать с помощью HTML, так как в HTML можно делать вложенные элементы. Таблица также состоит из вложенных элементов. Таблица (<table>) состоит из строк (<tr> — table row), каждая из которых также состоит из ячеек (<td> — table data). А внутри ячейки может быть уже все что угодно. Даже еще одна таблица. Выглядит это так:

Строка 1 Столбец 1	Строка 1 Столбец 2	Строка 1 Столбец 3
Строка 2 Столбец 1	Строка 2 Столбец 2	Строка 2 Столбец 3
Строка 3 Столбец 1	Строка 3 Столбец 2	Строка 3 Столбец 3

<table border="1">
<tr> <td> Строка 1 Столбец 1 </td> <td> Строка 1 Столбец 2 </td> <td> Строка 1 Столбец 3 </td></tr>
<tr> <td> Строка 2 Столбец 1 </td> <td> Строка 2 Столбец 2 </td> <td> Строка 2 Столбец 3 </td></tr>
<tr> <td> Строка 3 Столбец 1 </td> <td> Строка 3 Столбец 2 </td> <td> Строка 3 Столбец 3 </td></tr>
</table>

По умолчанию таблицы отображаются без границ. То есть границы невидимы. Это иногда полезно, но иногда мы хотим, чтобы границы были видны. Для этого задают значение атрибута border. Он задаёт толщину границ таблицы. (Правда только внешних). Если его значение ноль, то границы не отображаются.

Иногда надо назвать столбцы или строки, используют ячейку заголовка. Для этого вместо тега <td> пишут <th>. Выглядит это так:

	Столбец 1	Столбец 2
Строка 1	Строка 1 Столбец 1	Строка 1 Столбец 2
Строка 2	Строка 2 Столбец 1	Строка 2 Столбец 2

А пишется вот так:

<table border="1">
<tr><td></td> <th> Столбец 1 </th> <th> Столбец 2 </th> </tr>
<tr> <th> Строка 1 </th> <td> Строка 1 Столбец 1 </td> <td> Строка 1 Столбец 2 </td> </tr>
<tr> <th> Строка 2 </th> <td> Строка 2 Столбец 1 </td> <td> Строка 2 Столбец 2 </td> </tr>
</table>

Стоит заметить, что такой способ лучше чем писать содержимое ячейки в тегах или . И не только потому, что так короче. А и потому, что потом можно будет применить к заголовкам таблицы отдельные стили.

Некоторые браузеры не отображают пустые ячейки (то есть не обводят их рамкой). Можете посмотреть что делает ваш, в предыдущем примере верхняя левая ячейка пуста. Чтобы обмануть браузер и заставить его отображать ячейку будто там что-то есть, мы можем положить туда невидимый символ -. Это символ несокрушимого пропуска (Non Breakable SPace). Назвали его несокрушимым оттого, что слова, разделённые таким пропуском, переносятся на следующую строку только вместе.

Ячейки таблицы можно объединять. Делается это с помощью атрибутов colspan и rowspan тега <td>. colspan указывает на сколько колонок будет данная ячейка, а rowspan — на сколько строк. Такой код:

<table border="1">
<tr><td colspan="2"> Строка 1 Столбец 1 растягивается на два вправо </td> <td> Строка 1 Столбец 3 </td></tr>
<tr><td> Строка 2 Столбец 1</td> <td rowspan="2"> Строка 2 Столбец 2 растягивается на 2 вниз </td> <td> Строка 2 Столбец 3 </td></tr>
<tr><td> Строка 3 Столбец 1 </td><td> Строка 3 Столбец 3 </td></tr>
</table>

Даёт такой результат:

Строка 1 Столбец 1 растягивается на два вправо		Строка 1 Столбец 3
Строка 2 Столбец 1	Строка 2 Столбец 2 растягивается на 2 вниз	Строка 2 Столбец 3
Строка 3 Столбец 1	Строка 2 Столбец 2 растягивается на 2 вниз	Строка 3 Столбец 3

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

Также можно выделить строки таблицы в группы, с различным функциональным назначением и назначить им разные стили. Ой как мне не терпится уже дойти до стилей. Но по порядку. Можно выделить заголовочный часть <thead>, основную часть <tbody> и итог <tfoot>.

HTML5

Основная статья: HTML5

См. также