Основные элементы разметки
Содержание
Часть 1. Создание Web-страниц с помощью языка разметки гипертекста HTML5. 2
1. Краткие сведения о HTML.. 2
2. Элементы HTML.. 3
3. Основы CSS. 11
4. Валидация HTML и CSS. 18
5. Задания на лабораторную работу. 22
6. Требования к отчетности. 23
Справочники по HTML и CSS. 23
Часть 2. Процесс создания сайта, подбор компании-хостера, выбор и регистрация доменного имени. 24
Часть 1. Создание Web-страниц с помощью языка разметки гипертекста HTML5
Цель работы: ознакомление с языком разметки HTML, создание и валидация HTML-страниц с использованием устаревших и новых средств разметки.
Краткие сведения о HTML
HyperTextMarkupLanguage – «язык разметки гипертекста» - стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме. Является приложением SGML (стандартного обобщённого языка разметки), соответствующего международному стандарту ISO 8879.
Основные этапы в развитии HTML:
ü 1990-1995 – Начальное развитие («относительно хаотичное»)
ü 1995-2000 – Стандартизация(«навсегда»)
ü 2000-2005 – Поиск путей дальнейшего развития
ü 2005-2014 – Разработка нового поколения HTML(HTML5)
Версии:
ü RFC 1866 - HTML 2.0, одобренный как стандарт 22 сентября 1995 года;
ü HTML 3.2 - 14 января 1997 года;
ü HTML 4.0 - 18 декабря 1997 года;
ü HTML 4.01 (изменения, причём более значительные, чем кажется на первый взгляд) - 24 декабря 1999 года;
ü ISO/IEC 15445:2000 (так называемый ISO HTML, основан на HTML 4.01 Strict) - 15 мая 2000 года;
ü HTML 5 - 28 октября 2014 года;
ü HTML 5.1 начал разрабатываться примерно 19 декабря 2012 года.
HTML 5 основан на XHTML (более строгом варианте HTML). XHTML (англ. Extensible Hypertext Markup Language — расширяемый язык разметки гипертекста) – семейство языков разметки веб-страниц на основе XML, повторяющих и расширяющих возможности HTML 4.
Элементы HTML
Структура HTML разметки
Разметка любой страницы выглядит следующим образом:
<!Спецификация DOCTYPE>
<html>
<head(Заголовок)>
[<Надпись заголовка>]
[<Стили>]
[<Скрипты>]
</head>
<body(Тело страницы)>
[<Разметка страницы>]
</body>
</html>
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML <!DOCTYPE…>. Спецификация документа должна быть указана, поскольку в противном случае браузер не будет иметь возможности корректно интерпретировать разметку. В различных браузерах по умолчанию отображение различно!
Варианты DOCTYPE для HTML 4.01:
XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.0 Mobile:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
XHTML 1.1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Варианты DOCTYPE для HTML 5:
<!DOCTYPE html>
Основные элементы разметки
Каждый элемент может быть представлен одним или двумя тегами и содержать или не содержать внутри себя другие элементы. Такие элементы делят на блочные и текстовые. Блочные элементы относятся к частям текста уровня абзаца. Текстовые элементы описывают свойства отдельных фраз и еще более мелких частей текста.
Правила вложения элементов:
· Элементы не должны пересекаться - если открывающий тег располагается внутри элемента, то и соответствующий закрывающий тег должен располагаться внутри этого же элемента.
· Блочные элементы могут содержать вложенные блочные и текстовые элементы.
· Текстовые элементы могут содержать вложенные текстовые элементы.
· Текстовые элементы не могут содержать вложенные блочные элементы.
Теги выделяются специальными знаками < >, причём открывающий тег выглядит как <имя элемента>, а закрывающий как </имя элемента>. В случае XHTML, используется тег вида <имя элемента /> для указания элементов без закрывающих тегов.
Атрибут характеризует элемент и имеет формат <имя_элемента атрибут1=”123”>. Существуют атрибуты специального вида: id – уникальный идентификатор элемента для всего документа, class – имя класса элемента, которое используется для разметки таблицами стилей.
Гарантию правильного воспроизведения документа дает только неукоснительное следование требованиям спецификации языка.
Далее приведены некоторые наиболее часто применяемые элементы разметки.
Элемент html
Элемент html является обязательным для любой страницы. Определяет границы html-документа.
Элемент head
Не является обязательным. Представляет собой контейнер, в котором размещаютсяэлемента заголовка документа.
Внутри элемента head могут быть определены следующие элементы (таблица 1).
Таблица 1 допустимые элементы внутри head
| Тэг | Описание |
| <title> | Определяет заглавие документа. Обычно браузеры отображают этот заголовок в заголовке окна. |
| <base />[1] | Определяет базовый адрес или адрес по умолчанию для всех ссылок на странице. Ссылки на странице, содержащие относительный путь будут дополняться базовым адресом. При перемещении такого документа все ссылки будут сохранены. |
| <link /> | Определяет связи между документом и внешними ресурсами. Например подключение стилей отображения. |
| <meta /> | Определяет метаданные о документе. Среди них могут быть как дополнительные ключевые слова, используемые для поиска, так и указание кодировки страницы. |
| <script> | Определяет скрипты, выполняемые на стороне браузера. |
| <style> | Определяет информацию о стилях отображения в документе. В отличии от <link> эти стили будут внедрены в документ. |
Замечание: для страниц на русском языке обязательно необходимо указывать кодировку текста. В настоящее время целесообразно использовать только UNICODE-кодировки, например utf-8.
Примеры:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta http-equiv="Content-Type" content="text/html; charset=koi8-r" />
Для HTML5 существует короткая форма декларации:
<meta charset="utf-8">
Элемент body
Не является обязательным. Представляет собой контейнер, в котором размещаются элементы, описывающие тело (или содержимое) документа.
Исторически этот элемент имел дополнительные атрибуты, позволявшие выбрать цвет фона, шрифта, фоновый рисунок, однако эти атрибуты устарели и их использование в настоящее время запрещено.
Элемент содержит ряд стандартных атрибутов, таких как класс, стиль, заголовок элемента, язык. А также атрибуты-события, среди которых onload (загрузка страницы), onunload (закрытие страницы), а также события мыши и клавиатуры.
Элементы разметки текста
Рассмотрим несколько элементов, которые часто применяются для разметки текста.
Таблица 2 Некоторые элементы разметки текста
| Тэг | Описание |
| <p> | Параграф. Позволяет указать область текста, относящуюся к одному параграфу. Параграфы при отображении обычно отделяются увеличенным отступом. В рамках параграфа игнорируются переводы строк в исходном тексте. Формат переноса может быть задан стилями, но не имеет отношения к исходной разметке. Пример: <p>Некоторый текст.</p> Будет выведено: Некоторый текст. |
| <br /> | Перевод строки в любом месте текста, включая параграфы. Параграф при этом не разрывается. Пример: <p>Некоторый <br />текст.</p> Будет выведено: Некоторый текст. |
| <pre> | Устаревший, но широко применяемый элемент, позволяющий обеспечить вывод текста, включая все переводы строк. Пример: <pre>Некоторый текст.</pre> Будет выведено: Некоторый текст. |
| <ul> | Unordered list. Позволяет разметить список, элементы которого в зависимости от значения атрибута type (устаревшего) будут отмечены как круг, квадрат или окружность. В разметке каждый элемент списка указывается тегами <li>…</li>. Пример: <ul type=”disk”> <li>Кофе</li> <li>Чай</li> <li>Молоко</li> </ul> Будет выведено: · Кофе · Чай · Молоко |
| <ol> | Ordered list. Позволяет разметить список, элементы которого будут отмечены порядковым номером. В разметке каждый элемент списка указывается тегами <li>…</li>. Имеются атрибуты (устаревшие) start, позволяющий указать стартовый номер, а также type, позволяющий указать тип нумерации: 1(арабские числа), A, a (буквы латинского алфавита), I,i (римские числа). Пример: <ol> <li>Кофе</li> <li>Чай</li> <li>Молоко</li> </ol> Будет выведено: 1. Кофе 2. Чай 3. Молоко |
| <h1> … <h6> | Устаревшие теги, предназначенные для того, чтобы выделить заголовки соответствующего уровня. Рекомендуется использовать стили. |
Вставка изображений
Для вставки изображений применяется элемент <img />.
Элемент img имеет обязательный атрибут src, который должен содержать URL графического файла. Любой современный браузер поддерживает отображение форматов png, jpg, gif. Рекомендуется использование формата png по причине отсутствия лицензионных ограничений.
Другой обязательный атрибут – alt. Его использование необходимо для того, чтобы в браузерах, которые не могут отобразить изображение, вместо изображения был выведен текст. Значение атрибута altтакже используется поисковыми системами для того, чтобы ассоциировать изображение, указанное в атрибуте srcс текстом.
Необязательные атрибуты width и height указывают ширину и высоту изображения в пикселах или процентах. Их использование необходимо для корректного отображения страницы до того, как браузер загрузил изображение. Каналы связи не идеальны, и скорости 10-100 килобит до сих пор встречаются в условиях плохого покрытия у беспроводных модемов, включая технологии 3G и LTE. Если не учитывать скорость загрузки страниц, пользователи, просматривающие такие страницы, будут видеть постоянно меняющееся расположение блоков и текста.
Пример img:
<img src=”picture.png” width=”100” height=”200” alt=”Диаграмма” />
Вставка ссылок
Для вставки ссылок применяется так называемый «якорный» элемент <a> (anchor). Любой текст или изображение, помещенные между тегами <a> и </a> будут отображены в браузере как элементы, чувствительные к нажатию. Обязательный атрибут – href, который содержит URL.
Примеры:
<a href=”http://www.somesite.ru/”>
<img src=”picture.png” width=”100” height=”200” alt=”Диаграмма” />
</a>
<a href=”http://www.somesite.ru/”>Некоторый текст</a>
Разметка таблиц
Для разметки таблиц используется элемент <table>, который является контейнером для элементов <tr> (строка), <th> (заголовок), и <td> (колонка).
Элемент table часто использовался не только для оформления таблиц как таковых, а для разграничения областей отображения на странице.
Пример:
<table border="1">
<tr>
<th>Наименование</th>
<th>Количество</th>
</tr>
<tr>
<td>ручка</td> <td>10</td>
</tr>
<tr>
<td>карандаш</td> <td>20</td>
</tr>
</table>
Результат представлен на рисунке 1.
Рисунок 1 Пример отображения таблицы
Элемент table может иметь атрибут width, который указывает ширину таблицы в пикселах или процентах ширины устройства отображения. Атрибут border указывает толщину линии.
Элементы <td> и <th> обеспечивают разметку колонок и имеют два важных опциональных атрибута: rowspan и colspan. С помощью этих атрибутов можно указать объединение ячеек таблицы по строкам и столбцам соответственно.
Пример:
<table width="100%" border="1">
<tr>
<th colspan="2">Назв. & Кол.</th>
<th>Всего</th>
</tr>
<tr>
<td>Ручка</td>
<td>10</td>
<td rowspan="2">30</td>
</tr>
<tr>
<td>Карандаш</td>
<td>20</td>
</tr>
</table>
Результат представлен на рисунке 2.
Рисунок 2 Пример отображения таблицы с объединением столбцов и строк
Элементы разметки блоков
Как уже упоминалось ранее, элемент <table> исторически используется не только для того, чтобы отображать таблицы как таковые, но и для разметки блоков. Этот подход применялся до того, как были разработаны таблицы стилей и в настоящее время должен быть заменен блочной разметкой, а именно элементами <div> и <span>.
Элемент <span> используется для выделения фрагментов текста, например, цветом внутри параграфа. Обратите внимание на то, что параграф при этом остаётся целым. Пример:
<p>Некоторый текст с <span style="color:red">красным</span>.</p>
Отображение:
Некоторый текст с красным.
Элемент <div> используется для разметки блока, содержащего произвольные элементы, а не только текст. Более того, элемент <div> может содержать вложенные элементы <div>.
Пример:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#div1 {float: right;}
#div2 {width: 100px; float: left;}
</style>
</head>
<body>
<div id="div1">
<table border="1">
<tr>
<th colspan="2">Назв. & Кол.</th>
<th>Всего</th>
</tr>
<tr>
<td>Ручка</td>
<td>10</td>
<td rowspan="2">30</td>
</tr>
<tr>
<td>Карандаш</td>
<td>20</td>
</tr>
</table>
</div>
<div id="div2">
<p>
Некоторый текст, часть которого <span
style="color:red">выделена красным</span>.
</p>
</div>
</body>
</html>
Результат представлен на рисунке 3. Более подробно см. раздел блочной модели http://www.w3.org/TR/CSS2/box.html.
Рисунок 3 Пример отображения таблицы внутри блока
Формы
Для того, чтобы пользователь имел возможность ввода данных и отправки их на сервер,
разработан элемент <form>, который является контейнером для элементов ввода. Пример:
<form action="/form_submit" method="get">
Имя: <input type="text" name="fname" /><br />
Фамилия: <input type="text" name="lname" /><br />
Пол: <input type="radio" name="gender"value="м"/>м
<input type="radio" name="gender"value="ж"/>ж<br />
<input type="submit" value="Отправить" />
</form>
Результат представлен на рисунке 4.
Рисунок 4 Пример отображения формы
Основным элементом внутри формы является <input>, причем вид поля ввода определяется атрибутом type. Некоторые возможные значения атрибута type приводятся в следующей таблице.
Таблица 3. Значения атрибута type тэга input
| Тип | Описание |
| type="text" | Текстовое поле. |
| type="password" | Текстовое поле для ввода пароля. Введенные символы маскируются символом *. |
| type="radio" | Селектор в виде круглой кнопки. Возможные позиции выбора ввода реализуются несколькими элементами с этим типом и одинаковым значением атрибута name. См. в примере name="gender" |
| type="checkbox" | Селектор в виде квадрата. В отличии от типа radio, предполагает только два состояния: пункт выделен или не выделен |
| type="submit" | Кнопка выполнения стандартного действия подтверждения. |
| type="button" | Произвольная кнопка. Форма может иметь несколько кнопок. |