Вверх A A A
Краткий курс HTML 5
Июль 2017
Нед Пн Вт Ср Чт Пт Сб Вс
26
1
2
27
3
4
5
6
7
8
9
28
10
11
12
13
14
15
16
29
17
18
19
20
21
22
23
30
24
25
26
27
28
29
30
31
31
   Архив сайта
2009 Показать Свернуть
2010 Показать Свернуть
2011 Показать Свернуть
2012 Показать Свернуть
  • Январь
  • Февраль
  • Март
  • Апрель
2013 Показать Свернуть
2014 Показать Свернуть
  • Май
  • Июнь
  • Июль
  • Август
  • Сентябрь
  • Октябрь
  • Ноябрь
  • Декабрь
2015 Показать Свернуть
  • Сентябрь
  • Октябрь
  • Ноябрь
  • Декабрь
2016 Показать Свернуть
   Архив блога
2009 Показать Свернуть
  • Январь
  • Февраль
  • Март
  • Апрель
  • Май
  • Июнь
  • Июль
  • Август
  • Сентябрь
  • Октябрь
  • Ноябрь
  • Декабрь
2010 Показать Свернуть
  • Январь
  • Февраль
  • Март
  • Апрель
  • Май
  • Июнь
  • Июль
  • Август
2011 Показать Свернуть
2012 Показать Свернуть
2013 Показать Свернуть
2014 Показать Свернуть
  • Май
  • Июнь
  • Июль
  • Август
  • Сентябрь
  • Октябрь
  • Ноябрь
  • Декабрь
2015 Показать Свернуть
  • Май
  • Июнь
  • Июль
  • Август
  • Сентябрь
  • Октябрь
  • Ноябрь
  • Декабрь
2016 Показать Свернуть
Краткий курс HTML 5

Краткий курс HTML 5

| | 506

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

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

32 / 250

| | 1200

Введение

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

5 / 552

| | 383

Для структурирования и оформления текста применяются теги — специальные ключевые слова, обрамленные в скобки < и >. Большинство из них имеют закрывающую пару с косой чертой «/» перед именем тега. Это позволяет обозначать определенные части текста. Например:

Код HTML:выделим <i>слово</i> курсивом
В браузере:выделим слово курсивом

Как видно из примера, в браузере теги не отображаются, но могут влиять на отображение текста.

5 / 169

| | 394

Когда вы набираете в редакторе обычный текст, то не задумываясь начинаете с первого слова. В нашем случае все несколько сложнее, поскольку сначала необходимо сообщить браузеру некоторую служебную информацию, сформировав каркас 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 (команда «Сохранить как…»). Но давайте по порядку…

5 / 164

| | 412

Мы уже познакомились с элементами <!DOCTYPE>, <html> и <body>, составляющими основу нашего документа. Однако их явно недостаточно, поскольку даже перенести строку и выделить абзацы невозможно простым нажатием Enter. Для этого также существуют теги.

Для переноса строки применяется пустой тег <br />:

Этот текст содержит перенос,<br />
и поэтому занимает две строки
5 / 189

| | 458

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

<h4 id="header">Этому элементу присвоен идентификатор header</h4>

Похожее назначение у атрибута class, с тем отличием, что один и тот же класс может быть присвоен нескольким элементам в документе. Кроме того, одному элементу можно присвоить несколько классов, указав их в значении атрибута через пробел.

<p id="first" class="mytext">Элемент класса mytext с идентификатором first</p>
<p class="mytext more">Элемент классов mytext и more</p>

Практическое применение этих атрибутов активно начинается после знакомства с таблицами стилей CSS и/или каким-либо скриптовым языком (например, JavaScript). До тех пор в рамках HTML-документа может пригодится только атрибут id, да и то в специфических случаях, рассматриваемых в соответствующих главах. Еще одним атрибутом, применяемым совместно с CSS является style. В его значении можно напрямую указать CSS-инструкции для отображения элемента.

5 / 230

| | 639

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

<small> — второстепенные комментарии, уменьшенный текст.
<i> — акцентированный текст, наклонное начертание.
<b> — акцентированный текст, жирное начертание.
<em> — более акцентированный текст, наклонное начертание.
<strong> — более акцентированный текст, жирное начертание.
<dfn> — термин, впервые определяемый в документе.
<code> — программный код или его фрагмент.
<samp> — результат вывода компьютерной программы или скрипта.
<kbd> — название клавиш или набираемого на клавиатуре текста.
<var> — переменная какой-либо компьютерной программы.
<cite> — цитата или сноска на другой материал.
5 / 143

| | 368

Веб-страницы отличаются от своих бумажных аналогов в первую очередь наличием гиперссылок, связывающих документы друг с другом. Для обозначения таких ссылок применяется тег <a>. Адрес страницы (URI), которую должен загрузить браузер при нажатии на ссылку, указывается в атрибуте href

<a href="http://www.exlab.net/">текст ссылки</a>

Если язык страницы, на которую ведет ссылка, отличен от языка ссылающейся страницы, то можно добавить атрибут hreflang, значением которого должен быть код языка (ISO 639). Также через дефис можно добавить код страны (ISO 3166).

<a href="http://www.example.com/" hreflang="en-US">Example</a>

Атрибут target указывает браузеру, в какой вкладке открывать страницу. Возможные значения:

13 / 176

| | 440

Для вставки в HTML-документ изображений предназначен непарный тег <img />, базовые возможности которого определяются следующими атрибутами:

src — относительный или абсолютный URI изображения (обязательный)
аlt — короткое описание (отображается при отключенной графике)
width и height — ширина и высота соответственно, в пикселях или процентах

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

23 / 215

| | 414

Стандартом HTML предлагается выбор из трех типов списков. Все они являются составными конструкциями и формируются с помощью структурных тегов. Первые два типа — это нумерованный и ненумерованный списки. Обозначаются они парными тегами <ol> и <ul> соответственно. Пункты списка располагаются внутри этих тегов в элементах <li>, следующих друг за другом.

<ul>
   <li>Кофе</li>
   <li>Чай</li>
   <li>Молоко</li>
</ul>
5 / 204
Краткий курс HTML 5