|
Читайте также: |
1. Структура HTML-документа
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML <!DOCTYPE…>:
1) Варианты DOCTYPE для HTML 4.01:
· Строгий (Strict) – не содержит элементов, помеченных как «устаревшие» или «не одобряемые» (deprecated)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
· Переходный (Transitional) – содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
· Переходный c фреймами (Frameset) – соответствует переходному, но содержит также теги для создания наборов фреймов.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
2) Варианты DOCTYPE для HTML 5:
В HTML 5 используется только один вариант DOCTYPE:
<!DOCTYPE html>
Рисунок 1 –Структура HTML-документа
Теги заголовка документа (HTML5):
| <title>Структура Web-страницы</title> | Элемент для размещения заголовка Web-страницы. Строка отображается в заголовке окна броузера. |
| <meta charset="UTF-8"> | Этот тег несет служебную информацию и не отображается в экране броузера. В данном случае идет речь о кодировке Web-странички. Вам достаточно лишь каждый раз вставлять этот тег в таком виде на свою страничку. Тогда ваша страничка будет использовать кодировку указанную кодировку (для HTML5, кодировка UTF-8 используется по умолчанию) |
| <meta name="Author" content="Ivanov Ivan"> | Имя автора Web-страницы. |
| <meta name="Keywords" content="WWW, HTML, document, страничка, структура"> | Набор ключевых слов для поиска. Раньше этими словами пользовались поисковые машины, для отбора сайтов по тематике запроса. Сегодня эти слова поисковыми машинами практически не используются, однако полезно вставить этот тег на свою страничку и указать в нем ключевые слова, отражающие содержание вашего сайта. |
Основные используемые теги в разделе <body>:
| № | Тег | Атрибут | Описание |
| <body> основное тело документа | bgcolor="color" | цвет фона | |
| text="color" | цвет текста | ||
| <p> абзац | align="left"| "right" | "center" | "justify" | выравнивание по левому краю выравнивание по правому краю выравнивание по центру выравнивание по ширине | |
| <center> выравнивает содержимое по центру | |||
| <b>, <u>, <i> | выделение, подчеркивание, курсив | ||
| <h1>-<h6> | теги заголовков (<h1> – самый большой) | ||
| <font> параметры шрифта | size="x" color="color" face="type" | [от 1 до 7] задает размер шрифта задает цвет шрифта задает название шрифта ["arial","courier new" и т.д.] | |
| <hr> | отчеркивающая горизонтальная линия (не имеет закрывающего тега) | ||
| <br> | перевод строки (не имеет закрывающего тега) |
| № | Тег | Атрибут | Описание |
| <table> тег таблицы <tr> тег строки <th> тег ячейки заголовка <td> тег обычной ячейки | align="left"| "right" | "center" | "justify" | выравнивание по левому краю выравнивание по правому краю выравнивание по центру выравнивание по ширине | |
| valign="top" | "bottom" | "middle" | выравнивание по верхнему краю выравнивание по нижнему краю выравнивание по центру | ||
| width="xx%" | "xxxxpx" | задает ширину в процентах (от размера контейнера) или пикселах | ||
| height="xx%" | "xxxxpx" | задает высоту в процентах (от размера контейнера) или пикселах | ||
| border="xx" | задает толщину границы таблицы | ||
| bgcolor="color" | задает цвет фона ячеек (-ки) | ||
| bordercolor="color" | задает цвет границ ячеек (-ки) | ||
| <ul> <li></li> ... <li></li> </ul> ненумерован-ный список | type="disc" | "circle" | "square" | Для маркированного списка маркеры могут принимать один из трех видов: кружок (disc), окружность (circle) и квадрат (square) | |
| <ol> <li></li> ... <li></li> </ol> нумерован-ный список | type="A"| "a" | "I" | "i"| "1" reversed= "reversed" start="x" | устанавливает вид маркера списка (большие / малые буквы, большие / малые римские цифры, арабские цифры); нумерация в списке становится по убыванию (3,2,1); задаёт число, с которого будет начинаться нумерованный список | |
| <header> </header > Заголовок | – | Задает «шапку» сайта или раздела, в которой обычно располагается заголовок (не путать с тегом <head>!). | |
| <footer> </footer> Подвал | – | Обычно содержит информацию о копирайте, контактную информацию, дата создания и т.д. | |
| <main> </main> Основной контент | универсальные аттр. | Содержит ("обрамляет") основную информацию страницы сайта без блоков footer'a, header'a, nav, menu, form и т.д. | |
| <address> </address> Адрес, инфо об авторе | – | Планируется, что поисковые системы будут анализировать содержимое этого тега для сбора информации об авторах сайтов. | |
| <article> </article > | – | Отмечаются важные разделы на странице | |
| <aside> </aside> | – | Отмечает блок, который связан с основным контентом, но не является его частью (например, комментарий) |
| – не рекомендуется для применения в HTML5 | |
| – указание рекомендовано W3C и может влиять на оценку сайта | |
| – добавлено в НТМЛ5 |
Теги №3,4,6 – не рекомендуются к использованию (согласно рекомендациям W3C – HTML желательно использовать для логической разбивки контента. Внешний вид и оформление ложится на CSS). Также не рекомендуется ряд атрибутов из тегов 1,2,9-11. Для уточнения смотрите спецификацию [1].
Теги 12-17 несут такие же функции, что и тег <div> – т.е. позволяют представить контент в виде структурных блоков, к которым могут применяться разные правил оформления или обработки. Однако в отличие от НТМЛ4, новые теги позволяют не только выделить блок, но и указать его смысловую нагрузку.
2. Разработать страницу описания страны (см. варианты ЛР №1), следующего содержания:
– указать спецификацию, которой будет соответствовать страница (HTML5);
Раздел <head>
– установить название (title): <Название страны>+" "+ <ФИО>;
– установить мета теги: автор, ключевые слова и т.д.;
Раздел <body>
– установить заголовок страницы по центру (текст аналогично title);
– отчеркнуть горизонтальной линией;
– добавить подразделы с описанием:
Обща информация (название страны, расположение, гос. строй и т.д. - аналогично википедии);
а) географическое положение;
б) климат;
в) административное деление;
г) культура;
д) образование;
е) спорт
Содержание разделов:
б) добавить таблицу (в виде именно таблицы), аналогичную данной (выравнивание = центр, кроме названий показателей = лево):
| Показатель | Янв. | Фев. | Март | Апр. | Май | Июнь | Июль | Авг. | Сен. | Окт. | Нояб. | Дек. | Год |
| Абсолютный максимум, °C | 11,1 | 17,3 | 22,4 | 29,1 | 33,6 | 35,0 | 39,4 | 39,9 | 33,8 | 29,5 | 23,2 | 14,7 | 39,9 |
| Средний максимум, °C | −1,5 | −0,2 | 5,0 | 13,7 | 20,4 | 23,5 | 24,5 | 24,1 | 18,6 | 12,1 | 4,5 | 0,4 | 12,1 |
| Средняя температура, °C | −4,3 | −3,3 | 1,3 | 8,9 | 15,1 | 18,3 | 19,5 | 18,9 | 13,8 | 7,9 | 1,8 | −2 | 7,9 |
| Средний минимум, °C | −6,8 | −5,9 | −1,7 | 4,9 | 10,6 | 14,0 | 15,3 | 14,6 | 9,9 | 4,6 | −0,3 | −4,2 | 4,6 |
| Абсолютный минимум, °C | −31,1 | −32,2 | −24,9 | −10,4 | −2,4 | 2,4 | 5,8 | 3,3 | −2,9 | −17,8 | −21,9 | −30 | −32,2 |
| Норма осадков, мм |
Цвета задать как через коды цвета, так и названия цвета.
в) перечень территориальных единиц в виде ненумерованного списка, например:
· Винницкая область
· Волынская область
· Днепропетровская область
...
г) культура и искусство (по факту наличия информации в википедии), установить:
– общие сведения;
– литература;
– изобразительное искусство;
– театр;
– кинематограф;
– кухня.
д) образование (общая информация)
е) спорт (нумерованный список зимние/летние участия в олимпиадах и общекомандное место) – пример для Украины (выравнивание = лево, значения "место" и шапка = центр):
1. Летние олимпийские игры (это 1-й элемент нумерованного списка вместе с таблицей)
| № | ОИ | Год | Место проведения | Страна | Место |
| XXV* | Барселона | Испания | |||
| XXVI | Атланта | США | |||
| XXVII | Сидней | Австралия | |||
| ... (и т.д.) |
* Объединённая команда (ОК)
2. Зимние олимпийские игры(это 2-й элемент нумерованного списка вместе с таблицей)
| № | ОИ | Год | Место проведения | Страна | Место |
| XVI* | Альбервиль | Франция | |||
| XVII | Лиллехаммер | Норвегия | |||
| XVIII | Нагано | Япония | |||
| ... (и т.д.) |
* Объединённая команда (ОК)
http://www.wisdomweb.ru/HDOM/style.php
3. Разработать страницу с результатами ЛР№1 (см. варианты ЛР №1);
– указать спецификацию, которой будет соответствовать страница (HTML5);
Раздел <head>
– установить название (title): <Название страны>+" "+ <ФИО>;
– установить мета теги: автор, ключевые слова и т.д.;
Раздел <body>
– установить заголовок страницы по центру (текст аналогично title);
– отчеркнуть горизонтальной линией;
Список названий пунктов заданий с результирующими таблицами и скриншотами с подписями (Рисунок 1 – Популярные браузеры (Англия) и т.д.).
Варианты заданий
Таблица 6 – Варианты заданий
| № | Страна | № | Страна | № | Страна |
| Польша | Германия | Чехия | |||
| Судан | Египт | Иран | |||
| Индия | Беларусь | Лаос | |||
| Боливия | Бразилия | Гондурас | |||
| Туркменистан | Италия | Алжир | |||
| Австрия | Греция | Франция | |||
| Пакистан | Ливия | Казахстан | |||
| Китай (Юг) | Китай (Запад) | Таиланд | |||
| Киргизстан | Афганистан | Румыния | |||
| Грузия | Македония | Швейцария |
| Литва | Эстония | Латвия |
Проверить валидатором на выполнение стандартов:
http://validator.w3.org/#validate_by_input
Допустимый варнинг содержит следующий текст (явное указание кодировки. В принципе лучше все таки его указывать):
| 1. Using Direct Input mode: UTF-8 character encoding assumed Unlike the “by URI” and “by File Upload” modes, the “Direct Input” mode of the validator provides validated content in the form of characters pasted or typed in the validator's form field. This will automatically make the data UTF-8, and therefore the validator does not need to determine the character encoding of your document, and will ignore any charset information specified. If you notice a discrepancy in detected character encoding between the “Direct Input” mode and other validator modes, this is likely to be the reason. It is neither a bug in the validator, nor in your document. |
Использование НТМЛ5 (пока это еще тестовый валидатор)
| 2. Using experimental feature: HTML5 Conformance Checker. The validator checked your document with an experimental feature: HTML5 Conformance Checker. This feature has been made available for your convenience, but be aware that it may be unreliable, or not perfectly up to date with the latest development of some cutting-edge technologies. If you find any issues with this feature, please report them. Thank you. |
Кроме того, могут быть варнинги. связанные с выравниванием в таблице (климат, спорт). На данном этапе они допускаются. В ЛР №4 - эти элементы надо будет заменить на CSS.
Литература
[1] http://htmlbook.ru/html5
Дата добавления: 2015-10-02; просмотров: 55 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Приклад виконання. | | | Краткие теоретические сведения |