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

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

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

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

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

59 / 639
Изображение для статьи: Введение
| | 2604

Введение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<ul>
   <li>Кофе</li>
   <li>Чай</li>
   <li>Молоко</li>
</ul>
5 / 624
Изображение для статьи: Таблицы
| | 1255

В HTML есть мощный инструмент отображения информации, структурированной в виде таблиц. Для этой цели предусмотрен десяток структурных тегов. Простейшая таблица состоит из элемента <table>, включающего по одному или несколько элементов <tr>, <th> и <td>.

<table>
   <caption>Выписка лицевого счета</caption>
   <tr>
      <th>Месяц</th>
      <th>Баланс</th>
   </tr>
   <tr>
      <td>Январь</td>
      <td>500 грн.</td>
   </tr>
</table>

Если необходимо отобразить описание таблицы, то его можно поместить в элемент <caption>, располагаемый сразу за открывающим тегом <table>. Далее последовательно располагаются строки таблицы, обозначаемые тегом <tr>. Каждая строка содержит в себе ячейки <th> или <td>, формируя таким образом столбцы таблицы.

5 / 1001
Изображение для статьи: Разметка веб-страницы
| | 1165

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

HTML 4 и более ранние версии языка применялись в первую очередь для визуального оформления документа. Для создания каркаса страницы было достаточно всего двух тегов: блочного <div> и строчного <span>, которые сами по себе не влияют на отображение текста (кроме стандартных «блочных» свойств <div>), но позволяют использовать глобальные атрибуты class и id. А уже с их помощью задать стили отображения в CSS — не проблема. Тем более, что многие теги стандарта HTML 4 поддерживали целый набор атрибутов для визуального оформления.

32 / 959
Изображение для статьи: Формы
| | 823

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

Полноценная форма состоит из элемента <form>, внутри которого располагается любое содержимое (кроме других форм), включающее одно или несколько полей ввода — кнопки, однострочные и многострочные текстовые поля, выпадающие списки и т. д. Функциональность формы определяется рядом атрибутов элемента <form>. Одним из них является name, в котором можно указать уникальное имя формы. В документе может быть сколько угодно форм, но имена их не должны совпадать. С помощью этого имени подключенные к документу клиентские скрипты могут получать динамический доступ к полям формы еще до ее отправки на сервер.

5 / 598
Изображение для статьи: Элементы ввода данных
| | 901

Наиболее используемым элементом форм несомненно является <input />. С его помощью создаются поля для ввода текста, паролей и выбора файлов, а также кнопки, флажки и переключатели. В HTML5 он еще и приспособлен для ввода всевозможных дат, числовых значений, телефонов, адресов и даже выбора цвета. Все это многообразие определяется атрибутом type, все допустимые значения которого перечислены в таблице ниже. Вы уже знаете, что данные из формы передаются на сервер в виде пар «поле=значение». Название поля, определяемого элементом <input /> задается атрибутом name, а его значение по умолчанию можно указать в value

<input type="text" name="поле" value="значение" />
5 / 705
Изображение для статьи: Создание меню
| | 1030

Элемент <menu> не нов для HTML, но в пятой версии языка изменилось его лексическое назначение. Теперь он представляет собой список команд, который в зависимости от установленного значения атрибута type может выполнять три различных функции — контекстное меню, панель инструментов (toolbar) и произвольное меню с командами:

list — произвольный набор команд (значение по умолчанию).
toolbar — панель инструментов.
context — контекстное меню.
5 / 818
Изображение для статьи: Мультимедиа и скрипты
| | 1094

Стандарт HTML позволяет вставлять в документ различные объекты, включая аудио/видео-проигрыватели, flash-ролики, скрипты, PDF-документы и прочее.

Элемент <object> предназначен для подключения какого-либо внешнего ресурса и может отображаться, в зависимости от его типа, как изображение, встроенный документ или управляемая плагином область. Адрес ресурса, будь-то изображение, видео-ролик или что-либо другое, указывается в атрибуте data, а его MIME-тип — в type. Если необходимо вставить плагин без указания ресурса, то указывается только type, но в любом случае один из этих атрибутов должен обязательно присутствовать в элементе. Если ресурс указанного типа не может быть отображен в браузере, то вместо объекта выводится содержимое элемента <object>. Таким образом, в нем целесообразно помещать информацию о необходимости установки плагина и т. п.

5 / 872
Изображение для статьи: Фреймы
| | 881

С помощью тега <iframe> можно вставить в страницу другой документ, который отобразится во фрейме — специальной прямоугольной области с собственными полосами прокрутки (scrollbars). Основным атрибутом этого элемента является src, в значении которого указывается абсолютный или относительный URL вставляемого документа. HTML5, однако, предлагает альтернативный вариант — вы можете указать исходный код дочерней страницы непосредственно в атрибуте srcdoc, без необходимости хранить ее отдельно. Естественно, этот код должен быть экранирован и соответствовать стандарту HTML.

<iframe src="frame.html"></iframe>
5 / 681
Изображение для статьи: Новые атрибуты в HTML 5
| | 798

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

В HTML5 добавлены несколько атрибутов, принимающих только значения true или false. Атрибут contenteditable указывает, может ли пользователь редактировать содержимое элемента (true) или нет (false). Естественно, что редактируемые элементы могут получать фокус ввода, и для определения порядка переключения между ними используется tabindex, упомянутый в главе «Элементы ввода». Атрибут draggable позволяет включить (true) или отключить (false) возможность перетаскивания элемента мышью. Обычно по умолчанию браузер позволяет перетаскивать только изображения и гиперссылки. С помощью атрибута hidden можно обозначить элемент, содержимое которого уже или еще не актуально. Если установить ему значение true, то такой элемент не будет отображен браузером. И наконец, атрибут spellcheck со значением true сообщает браузеру о необходимости орфографической/грамматической проверки содержимого элемента. В результате такой проверки обнаруженные ошибки будут выделены каким-либо, зависящим от конкретного браузера образом. Этот атрибут применяется вместе с различными элементами ввода.

5 / 585
Изображение для статьи: Обратная совместимость
| | 1074

Благодаря реализованному в HTML5 механизму представлений, проблему совместимости этого стандарта с его предыдущими версиями можно считать в целом решенной. Однако на момент создания курса он еще не достиг статуса официально рекомендованного языка и поддерживается в полной мере только немногими бразерами. Поэтому актуальным вопросом является отображение документов, сверстанных по стандарту HTML5, в тех браузерах, которые не обеспечивают его стопроцентную поддержку, особенно в Internet Explorer.

5 / 865
Изображение для статьи: Специальные символы HTML
| | 915

Специальные символы в HTML реализуются с помощью интерпретируемых браузером мнемоник и числовых кодов. Например, двойную кавычку (") можно вывести кодом &quot;, а знак евро (€) — &euro;. Все мнемокоды начинаются с амперсанда (&) и заканчиваются точкой с запятой (;). Чтобы обычный амперсанд в тексте не путался с началом мнемокода, его выводят с помощью кода &amp;

5 / 592
Изображение для статьи: Коды ISO 3166-1
| | 816

ISO 3166-1 — часть стандарта ISO 3166, содержащая коды названий стран и подчинённых территорий. Стандартом определены три кода для каждой страны:

5 / 612
Изображение для статьи: Коды языков
| | 1691

Языковые коды разработаны для представления языков в обработке данных. В языковых атрибутах HTML используется стандарт ISO 639-1. Приведенная в статье таблица дополнена расширенными версиями ISO 639, а также ГОСТ 7.75–97 и цифровыми кодами языков.

5 / 1465
Изображение для статьи: Коды и названия цветов в HTML
| | 778

Коды и названия цветов в HTML.

5 / 573
Краткий курс HTML 5
Свернуть