Урок 1. Язык HTML. Структура HTML-документа.

Урок 2. Форматирование HTML-документа. 

Урок 3. Списки в HTML-документе.

Урок 4. Управление цветом.

Урок 5. Разработка web-странички «Самопрезентация». 

Урок 6. Вставка изображений. 

Урок 7. Создание бегущей строки.

Урок 8. Творческая работа «Совершенствование вида web-странички».

Урок 9. Гиперссылки.

Урок 10. Гиперссылки внутри документа. 

Урок 11. Карты-изображения.

Урок 12-13. Создание сайта на свободную тему.

Урок 14-15. Таблицы.

Урок 16. Создание web-страницы с помощью таблицы.

Урок 17. Фреймовая структура сайта.

Урок 18-19. Взаимодействие между фреймами.

Урок 20-21. Создание сайта фреймовой структуры.

Урок 22-24. Работа с редактором сайтов.

Урок 25. Каскадные таблицы стилей (css).

Урок 26 Css. Шрифтовое и абзационное оформление.

Урок 27. Css. Цвет и фон.

Урок 28. Css. Свойства стиля списков.

Урок 29. Css. Форматирование рамок и отступов.

Урок 30. Css. Абзацы. Гиперссылки. Размещение стилевой таблицы.

Урок 31. Применение таблицы стилей к части страницы.

Урок 32-34. Итоговая работа. Разработка сайта.

HTML — язык разметки гипертекста

Hyper Text Markup Language (HTML) — язык разметки гипертекста — предназначен для написания гипертекстовых документов, публикуемых в World Wide Web.

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

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

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

Графическая и звуковая информация, включаемая в HTML-документ, хранится в отдельных файлах. Программы просмотра HTML-документов (браузеры) интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащих HTML-документы приняты расширения .htm или .html.

В большинстве случаев теги используются парами. Пара состоит из открывающего <имя_тега> и закрывающего  тегов. Действие любого парного тега начинается с того места, где встретился открывающий тег, и заканчивается при встрече соответствующего закрывающего тега. Часто пару, состоящую из открывающего и закрывающего тегов, называют контейнером, а часть текста, окаймленную открывающим и закрывающим тегом, — элементом.

Последовательность символов, составляющая текст может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр, и специальных символов (например #, +, $, @), за исключением следующих четырех символов, имеющих в HTML специальный смысл: < (меньше), > (больше), & (амперсанд) и " (двойная кавычка). Если необходимо включить в текст какой-либо из этих символов, то следует закодировать его особой последовательностью символов.

Структура HTML-документа

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

HTML-документ состоит из двух частей: заголовок (head) и тела (body), расположенных в следующем порядке:

Заголовок документа

Тело документа

В блоке … описываются общие правила отображения HTML-документа и содержится вспомогательная информация о документе. Чаще всего в заголовок документа включают парный тег , определяющий название документа. Многие программы просмотра используют его как заголовок окна, в котором выводят документ. Программы, индексирующие документы в сети Интернет, используют название для идентификации страницы. Хорошее название должно быть достаточно длинным для того, чтобы можно было корректно указать соответствующую страницу, и в то же время оно должно помещаться в заголовке окна. Название документа вписывается между открывающим и закрывающим тегами.

Тело документа является обязательным элементом, так как в нем располагается весь материал документа. Тело документа размещается между тегами <body> и . Все, что размещено между этими тегами, интерпретируется браузером в соответствии с правилами языка HTML позволяющими корректно отображать страницу на экране монитора.

Открывающие теги могут содержать атрибуты, т. е. дополнительную информацию о свойствах отображаемого на экране элемента. Атрибуты записываются внутри открывающего тега через пробел от его имени в виде отдельного ключевого слова или ключевого слова, знака «=» и параметра (значения атрибута).

Порядок следования атрибутов в теге не важен.

Атрибут действует от открывающего тега, в котором он задан, до закрывающего или только внутри внутри тега, если тег не имеет парного.

Форматирование HTML-документа

Разделение текста на абзацы

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

 в начале каждого нового абзаца. Использование закрывающего тэга

Для того, чтобы выровнять текст используется атрибут align с возможными значениями center, left, right и justify. Он, соответственно, выравнивает текст по центру, по левому краю, по правому краю и одновременно по двум краям сразу.

Заголовки

Для задания названий разделов и подразделов в HTML используются теги заголовков. Существуют шесть уровней заголовков и обозначаются они так:

• < H1>< /H1> — заголовок первого уровня
• < H2>< /H2> — заголовок второго уровня
• < H3>< /H3> — заголовок третьего уровня
• < H4>< /H4> — заголовок четвёртого уровня
• < H5>< /H5> — заголовок пятого уровня
• < H6>< /H6> — заголовок шестого уровня

Заголовки выделяются полужирным шрифтом и отделяются от остального текста пустой строкой. Самый крупный заголовок < H1>< /H1>, а самый маленький< H6>. Теги заголовков имеют атрибут align — выравнивание текста заголовка на странице (значения те же, что и для выравнивания обычного текста);

Перевод строки

Для того чтобы перейти на следующую строку в любом месте текущей строки, в HTML существует тэг разрыва строки <BR>. Он заставляет программу просмотра выводить стоящие после него символы с начала новой строки. В отличие от тэга абзаца, тэг <BR> не вставляет пустую строку и не имеет соответствующего закрывающего тэга.

Бывают случаи, когда возникает необходимость в противоположной операции - запретить перевод строки. Текст, заключенный между тэгами <NOBR> и NOBR>, будет гарантированно заключаться в одной строке без перевода на другую.

Горизонтальные линии

Другим методом разделения документа на части является проведение горизонтальных линий. Они визуально подчеркивают законченность той или иной части страницы.

Элемент <HR> позволяет провести горизонтальную линию в окне большинства программ просмотра. Этот тэг не является контейнером, поэтому не имеет закрывающего тэга. До и после линии автоматически вставляется пустая строка.

Тег < HR> имеет следующие атрибуты:

• size — толщина полосы;
• width — ширина полосы;
• align — выравнивание;
• color — цвет полосы;

Использование предварительно отформатированного текста

HTML имеет специальный тэг контейнер, в который можно включать предварительно отформатированный текст. При этом можно в большей степени контролировать вывод документа программой просмотра, правда, за счет некоторой потери гибкости.

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

Самым большим недостатком контейнера <PRE> является возможность вывода преформатированного текста только моноширинным шрифтом. Это делает вид преформатированных cтрок слишком громоздким.

Теги форматирования символов

• < B>< /B> — используется для выделения текста полужирным. вместо него рекомендуется использовать тег < strong>< /strong>. 
• < I>< /I> — используется для получения курсивного текста. Вместо этого тега рекомендуется использовать тег < em>< /em>.
• < U>< /U> — позволит подчеркнуть текст.
• < STRIKE>< /STRIKE> — делает текст перечёркнутым.
• < SUB>< /SUB> — предназначен для выделения подстрочного текста (нижний индекс).
• < SUP>< /SUP> — нужен для выделения надстрочного текста (верхнего индекса).

Для форматирования непосредственно шрифтов, в HTML есть тег . У этого тега существуют следующие атрибуты:

• color — цвет текста шрифта;
• face — гарнитура шрифта;
• size — размер текста шрифта. Может быть задан абсолютным (от 1 до 6) либо относительным значением (от +1 до +6 и от -1 до -6). По умолчанию, размер текста равен 3. Если указать < font size="+1">< /font>, то текст, размещённый между тегами < font> и < /font>, будет отображаться увеличенным на 1 по сравнению с другим текстом. Аналогично и с -1.

Все теги форматирования являются парными и допускают вложенность друг в друга. Один тег должен находиться внутри другого и никак не пересекаться с другим.

Задания к уроку

Задание 1.

Преобразовать HTML-документ к следующему виду:

Самый большой заголовок

Заголовок2

Заголовок3

Заголовок4

Заголовок5

Самый маленький заголовок

Это шрифт 1

Это шрифт 2

Это шрифт 3

Это шрифт 4

Это шрифт 5

Это шрифт 6

Это шрифт 7

Задание 2.

Преобразовать HTML-документ к следующему виду:

Улучшенный HTML-документ

Сходство

Пит Хейн (перевод Н. А. Прохоровой)

Корова не похожа на лошадь.

А лошадь не похожа на корову.

Именно это сходство

Мы и берем за основу.

Задание 3.

Преобразовать HTML-документ к следующему виду:

Домашние животные

(Заголовок h1)

Собаки

(Заголовок h2)

Сторожевые

(выравнивание слева, полужирный шрифт)

Охотничьи

(выравнивание справа, полужирный шрифт)

Дрессировка

(выравнивание по центру, полужирный шрифт)

Клубы                                Выставки                                        Площадки

(выравнивание по центру, размер шрифта 4, цвет шрифта красный)

Стихотворение

(цвет шрифта синий, выравнивание по центру)

По жизни я скромен,

Оваций не надо!

Но как же я классно

Смотрюсь у снаряда!

(выравнивание по левому краю, размер шрифта 2)

Списки в HTML-документе

Маркированный список

Одним из типов списков, реализованных в языке HTML, является маркированный список. Иначе списки такого типа называют ненумерованными или неупорядоченными. Последнее название часто используется как формальный перевод названия соответствующего тега <UL>, с помощью которого и организуются списки такого типа в HTML-документах (UL — Unordered List, неупорядоченный список).

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

Для создания маркированного списка необходимо использовать тэг-контейнер <UL> UL>, внутри которого располагаются все элементы списка. Открывающий и закрывающий тэги списка обеспечивают перевод строки до и после списка, отделяя, таким образом, список от основного содержимого документа, поэтому здесь нет необходимости использовать теги абзаца <P> или принудительного перевода строки <BR>.

Каждый элемент списка должен начинаться тэгом <LI> (LI — List Item, элемент списка). Тег <LI> не нуждается в соответствующем закрывающем тэге, хотя его наличие в принципе не возбраняется. Браузеры обычно при отображении документа начинают каждый новый элемент списка с новой строчки.

Пример:

Знаки зодиака:

• Овен

• Телец

• Близнецы

• Рак

• Лев

• Дева

• Весы

• Скорпион

• Стрелец

• Козерог

• Водолей

• Рыбы

В тэге <UL> может быть указан параметр type. Он может принимать следующие значения: disc, circle и square. Этот параметр используется для принудительного задания вида маркеров списка. Конкретный вид маркера будет зависеть от используемого браузера. Типичными вариантами отображения являются следующие:

• type = disc — маркеры отображаются закрашенными кружками;
• type = circle — маркеры отображаются не закрашенными кружками;
• type = square — маркеры отображаются закрашенными квадратиками.

Пример записи:

type = circle>.

Значением, используемым по умолчанию, является type = disc.

Нумерованный список

Другим типом списков, реализованных в языке HTML, является нумерованный список. Иначе списки такого типа называют упорядоченными. Последнее название часто используется как формальный перевод названия соответствующего тега

, с помощью которого и организуются списки такого типа в HTML-документах (OL — Ordered List, упорядоченный список).

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

Для создания нумерованного списка следует использовать тэг-контейнер

, внутри которого располагаются все элементы списка. Открывающий и закрывающий теги списка обеспечивают перевод строки до и после списка, отделяя таким образом список от основного содержимого документа.

Как и для маркированного списка, каждый элемент нумерованного списка должен начинаться тэгом <LI>.

Пример:

Наиболее яркие звезды, видимые с Земли:

 
1. Сириус

2. Канопус

3. Арктур

4. Альфа Центавра

5. Вега

6. Капелла

7. Ригель

8. Процион

9. Ахернар

10. Бета Центавра

11. Ветельгейзе

12. Альдебаран

В тэге

 может быть указан параметр type. Параметр type используется для задания вида нумерации списка. Может принимать следующие значения:
• type = А — задает маркеры в виде прописных латинских букв;
• type = а — задает маркеры в виде строчных латинских букв;
• type = I — задает маркеры в виде больших римских цифр;
• type = i — задает маркеры в виде маленьких римских цифр;
• type = 1 — задает маркеры в виде арабских цифр.

По умолчанию всегда используется значение type = 1, т. е. нумерация при помощи арабских цифр. После номера элемента списка всегда дополнительно выводится знак "точка".

Вложенные списки

Бывают случаи, когда в элемент списка одного типа требуется включить целый список такого же типа или другого. При этом будут организованы многоуровневые или вложенные списки. В HTML допустимо произвольное вложение различных типов списков.

Пример:

Спутники некоторых планет

<UL>

<LI>Земпя

1. Луна

1. Mapc

   1. Фобос

   2. Деймос

2. Уран

   1. Ариэль

   2. Умбриэль

   3. Титания

   4. Оберон

   5. Миранда

3. Нептун

   1. Тритон

   2. Нереида

Задания к уроку

Задание 1.

Размер шрифта первого заголовка – 6, второго – 5. Для обоих списков размер шрифта – 3.

Солнце должно быть:

1. Теплым
2. Круглым
3. Желтым

Снег должен быть:

1. Белым
2. Холодным
3. Пушистым

Задание 2.

Волшебник Изумрудного города

А. Волков

Содержание

• Ураган
• Дорога из желтого кирпича
• Великий и Ужасный
• Исполнение желаний

Задание 3.

Использование списков

1. Маркированный список удобен тогда, когда порядок элементов в нем не важен. Примеры:

• Список продуктов для приготовления борща
• Список команд исполнителя
• Список школьных предметов

2. Нумерованный список особенно хорош для описания действий, в которых важен порядок следования. Примеры:

• Рецепт приготовления борща
• Программа для исполнителя
• Расписание уроков

Задание 4.

Как сделать хороший HTML-документ

I        Структурировать материал

1. Разбить материал на главы, параграфы, пункты
2. Придумать заголовки частей

II        Продумать стиль оформления

1. Выбрать цвета

1. Выбрать цвет фона
2. Выбрать цвет основного текста
3. Выбрать цвета для выделения отдельных элементов документа

2. Зафиксировать способы оформления отдельных элементов

III        Написать программу

IV        Провести тестирование и отладку программы

Способы задания цвета

В HTML существует два способа задания цвета: при помощи ключевых слов и в цветовой модели RGB.

Ключевые слова

Этот способ заключается в следующем: существуют 16 базовых цветов, которые можно записывать не только их цифровыми значениями, но и цветовыми именами.

RGB - шестнадцатеричная запись

Основные цвета red, green, blue – красный, зеленый и синий могут иметь условные значения от 00 до FF (их аналог в десятичном представлении - это числа от 0 до 255). Из сочетания трех цветов, каждому из которых присваивается одно из значений, получается необходимый цвет.

Например, белый цвет задается как  #FFFFFF, а черный цвет – как #000000. Первые две цифры кода (двухзначное шестнадцатеричное число) определяют насыщенность красного, следующие две - насыщенность зеленого и последние две - синего.

Перед шестнадцатеричным  числом, обозначающим цвет, ставят символ #. Он обязателен, а делается это для исключения путаницы  в определении системы счисления.

Перечень базовых цветов

Задание цвета фона для HTML документа

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

Цвет фона определяется атрибутом bgcolor тега . Например, тег, задающий цвет фона #FF1230, имеет вид:

 bgcolor ="#FF1230">

тег, задающий желтый цвет фона, имеет вид:

 bgcolor ="YELLOW">

Можно задать и цвет текста. Этой цели служит атрибут text тега >. тег, приведенный ниже, задает зеленый цвет фона и синий цвет текста:

 ="GREEN" text ="BLUE"> 

Сочетание цветов.

При выборе цветовой гаммы для сайта, важно сделать это правильно, руководствуясь основными принципами теории цвета.

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

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

Комплементарные (дополнительные) цвета 

Комплементарными, или дополнительными, контрастными, являются цвета, расположенные на противоположных сторонах цветового круга Иттена.

Выглядит их сочетание очень живо и энергично, особенно при максимальной насыщенности цвета.

Классическая триада

Классическую триаду образуют три равноудаленных по цветовому кругу Иттена цвета. Такая композиция выглядит достаточно живой даже при использовании бледных и ненасыщенных цветов. Чтобы добиться гармоничности в триаде, возьмите один цвет за главный, а два других используйте для акцентов.

Аналоговая триада

Аналоговую цветовую схему образуют три соседних цвета в двенадцатичастном цветовом круге.

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

Контрастная триада

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

Выглядит эта схема почти настолько же контрастно, но не настолько напряженно. Если вы не уверены, что сможете правильно использовать комплементарные цвета – используйте контрастную триаду.

Прямоугольная схема 

Прямоугольная схема состоит из четырех цветов, каждые два из которых – комплементарные.

Эта схема дает, пожалуй, самое большое количество вариаций входящих в нее цветов. Чтобы проще было сбалансировать прямоугольную схему, один цвет надо выбрать доминирующим, остальные – вспомогательными.

Квадратная схема  

Квадратная схема практически повторяет прямоугольную схему, но цвета в ней равноудаленные по кругу. Здесь также стоит выбрать один доминирующий цвет.

Первые правила использования цветов, да и не только цветов, были созданы задолго до появления современного графического дизайна Леонардо да Винчи в его «Трактате о живописи». Но даже он уже говорил: «Если ты в своем творчестве хочешь руководствоваться только правилами, то никогда ничего не достигнешь, и в твоих произведениях будет царить путаница». Поэтому, дизайнеру можно пользоваться данными рекомендациями, но важнее следовать своей интуиции.

Задания к уроку

Задание 1.

1. Создать новую Web-страницу в редакторе Блокнот.
2. В элементе