Вверх A A A
Краткий курс HTML 5
Ноябрь 2017
Нед Пн Вт Ср Чт Пт Сб Вс
44
1
2
3
4
5
45
6
7
8
9
10
11
12
46
13
14
15
16
17
18
19
47
20
21
22
23
24
25
26
48
27
28
29
30
49
Краткий курс HTML 5

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

Изображение для статьи: Краткий курс HTML 5
| | 594

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

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

32 / 338
Изображение для статьи: Введение
| | 1525

Введение

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

5 / 877
Изображение для статьи: Теги и элементы
| | 501

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

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

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

5 / 287
Изображение для статьи: HTML-документ
| | 510

Когда вы набираете в редакторе обычный текст, то не задумываясь начинаете с первого слова. В нашем случае все несколько сложнее, поскольку сначала необходимо сообщить браузеру некоторую служебную информацию, сформировав каркас 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 / 280
Изображение для статьи:  Основные элементы и их типы
| | 576

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

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

Этот текст содержит перенос,<br />
и поэтому занимает две строки
5 / 353
Изображение для статьи: Глобальные атрибуты
| | 604

Глобальные атрибуты поддерживаются большинством тегов, откуда и получили свое название. С помощью атрибута 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 / 376
Изображение для статьи: Форматирование
| | 745

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

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

Веб-страницы отличаются от своих бумажных аналогов в первую очередь наличием гиперссылок, связывающих документы друг с другом. Для обозначения таких ссылок применяется тег <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 / 348
Изображение для статьи: Изображения
| | 585

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

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

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

23 / 360
Изображение для статьи: Списки
| | 550

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

<ul>
   <li>Кофе</li>
   <li>Чай</li>
   <li>Молоко</li>
</ul>
5 / 340
Краткий курс HTML 5
Свернуть