Шаг 1. Создание шаблона документа HTML
Создание и редактирование Web-страниц
Краткие теоретические сведения
Для создания Web-страниц используются различные программные средства. В простейшем случае текст документа HTML можно создать при помощи стандартной программы Блокнот, а просмотреть его в программе-браузере, например, Microsoft Internet Explorer. Поскольку программа Блокнот предназначена для создания текстовых документов, то по умолчанию она использует расширение имени файла .txt. При сохранении же Web-страниц необходимо явно указывать расширение имени файла .html. Для того, что бы можно было увидеть отредактированный HTML-документ, необходимо не забывать сохранять его в программе Блокнот и обновлять содержимое окна браузера.
Любой документ HTML состоит из текста, который необходимо отобразить, и инструкций, которые управляют способом отображения. Такие инструкции называются тегами. Чтобы браузер мог отличить текст, который необходимо отобразить от тегов, последние заключаются в символы <>. Текст HTML документа должен начинаться тегом <html>, а заканчиваться </html>. Внутри этих тегов помещается «голова» и «тело» документа, которые обозначаются тегами <head>…</head> и <body>…</body>, соответственно. Тег <title>…</title>, помещаемый внутри тега <head>…</head>, служит для указания информации, которая будет отображаться в заголовке окна браузера. Информация, которая должна отображаться в основном окне браузера, помещается внутри тега<body>…</body>. Большинство браузеров не чувствительны к регистру символов в тегах, поэтому их можно записывать как строчными, так и прописными буквами, или их сочетанием. Например, правильно будут обработаны такие теги, как <BODY>, <body> и <Body>.
Цвет фона и символов HTML-документа можно указать двумя способами – в формате RGB, когда он указывается тремя составляющими: красной (R), зеленой (G) и синей (B) и его названием. При указании цвета в формате RGB каждая из его компонент указывается своим 16-ричным значением в диапазоне от 00 до ff. Примеры записи цвета приведены в Таблице 1.
Таблица 1
| Название цвета | Название цвета | ||||
| Русское | Английское | RGB | Русское | Английское | RGB |
| черный | black | фиолетовый | purple | FF00FF | |
| белый | white | FFFFFF | желтый | yellow | FFFF00 |
| красный | red | FF0000 | коричневый | brown | |
| зеленый | green | 00FF00 | оранжевый | orange | FF8000 |
| бирюзовый | azure | 00FFFF | лиловый | violet | 8000FF |
| синий | blue | 0000FF | серый | gray | A0A0A0 |
Цвет фона устанавливается при помощи атрибута bgcolor= в теге <body>. Если он не указан, то по умолчанию используется цвет, указанный в настройках браузера. Как правило – это белый цвет.
Цвет текста, отображаемого в окне браузера по умолчанию, - черный. Он указывается в его настройках. Явно цвет текста можно указать в теге <body> при помощи атрибута text=. Цвет отдельного фрагмента текста изменяется при помощи атрибута color= тега <font>.
Ход работы
Шаг 1. Создание шаблона документа HTML
Чтобы создать свой HTML-документ, выполните следующее:
1. Создайте папку HTML, в которой будут храниться документы HTML, создаваемые по ходу выполнения работ.
2. Запустите стандартную программу Блокнот.
3. Наберите в окне редактора Блокнот следующий текст:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
4. Сохраните файл под именем template.html в созданной ранее папке HTML. Не забудьте явно указать расширение имени файла .html, так как Блокнот по умолчанию применяет .txt.
5. Для просмотра созданной Web-страницы запустите на выполнение браузер, например, Microsoft Internet Explorer.
6. Откройте в браузере созданный ранее файл template.html, выполнив команду Файл aОткрыть a Обзор. В результате откроется пустое окно:
Так происходит потому, что созданный файл не содержит никакой полезной информации, а является всего лишь заготовкой (шаблоном) для любого HTML-документа, т.е. в дальнейшем его можно будет брать за основу при создании произвольной Web-страницы.
7. В программе Блокнот отредактируйте файл template.html так, чтобы между тегами <title > и </title> был помещен текст «Мой первый документ HTML», а между <body> </body> - «Всем огромный привет!». В результате документ HTML должен иметь такое содержание:
<html>
<head>
<title>Мой первый документ HTML</title>
</head>
<body>
Всем огромный привет!
</body>
</html>
8. Сохраните отредактированный документ в файле hello.html, выполнив команду Файл a Сохранить как….
9. Откройте в браузере файл hello.html, выполнив команду Файл aОткрыть a Обзор. В результате увидите примерно следующее:
Шаг 2. Задание цвета текста
1. Закройте программу Блокнот.
2. В браузере выполните команду Вид a Просмотр HTML кода. В результате откроется окно со стандартной программой Блокнот, в котором Web-страница будет представлена в командах HTML.
3. Измените цвет слова «Всем» на красный, указав название цвета. Для этого файл hello.html отредактируйте следующим образом:
<html>
<head>
<title>Мой первый документ HTML</title>
</head>
<body>
<font color="red">Всем</font> огромный привет!
</body>
</html>
4. Сохраните внесенные в файл hello.html изменения, выполнив команду Файл a Сохранить.
5. Обновите содержимое окна браузера нажав кнопку Обновить. В результате его окно должно выглядеть примерно так:
6. Отредактируйте файл hello.html так, чтобы цвет слова «огромный» был зеленым, указав цвет в формате RGB:
<html>
<head>
<title>Мой первый документ HTML</title>
</head>
<body>
<font color="red">Всем</font> <font color="#00FF00">огромный</font> привет!
</body>
</html>
Обратите внимание, что значению цвета обязательно должен предшествовать значок «решетка» - #!
7. Просмотрите отредактированную Web-страницу, сохранив ее в Блокноте и обновив содержание окна браузера.
8. Установить весь остальной текст на странице синим. Для этого отредактируйте файл hello.html следующим образом:
<html>
<head>
<title>Мой первый документ HTML</title>
</head>
<body text="#0000FF">
<font color="red">Всем</font> <font color="#00FF00">огромный</font> привет!
</body>
</html>
9. Просмотрите в браузере отредактированную Web-страницу.
Шаг 3. Задание цвета фона
- Внесите следующие изменения в файл hello.html и просмотрите его в браузере:
<html>
<head>
<title>Мой первый документ HTML</title>
</head>
<body text="#0000FF" bgcolor="#000000">
<font color="red">Всем</font> <font color="#00FF00">огромный</font> привет!
</body>
</html>
Индивидуальные задания
1. В соответствии с номером по списку группы, или указанием преподавателя, установите такие цвета на Web-странице:
| Вариант | Фон | Текст | Слово «Всем» | Слово «огромный» |
| белый | черный | серый | синий | |
| черный | белый | красный | серый | |
| черный | зеленый | серый | красный | |
| синий | белый | зеленый | бирюзовый | |
| лиловый | белый | желтый | оранжевый | |
| серый | зеленый | лиловый | бирюзовый | |
| красный | фиолетовый | лиловый | зеленый | |
| фиолетовый | зеленый | серый | синий | |
| зеленый | синий | красный | серый | |
| серый | черный | зеленый | лиловый | |
| лиловый | зеленый | фиолетовый | черный | |
| коричневый | зеленый | серый | красный | |
| синий | серый | зеленый | черный | |
| черный | зеленый | серый | лиловый | |
| оранжевый | лиловый | фиолетовый | белый | |
| зеленый | синий | оранжевый | серый | |
| лиловый | зеленый | черный | синий | |
| бирюзовый | черный | белый | коричневый | |
| оранжевый | фиолетовый | лиловый | серый | |
| серый | зеленый | оранжевый | коричневый | |
| коричневый | белый | зеленый | красный | |
| красный | зеленый | черный | коричневый | |
| белый | оранжевый | зеленый | фиолетовый | |
| фиолетовый | бирюзовый | лиловый | черный | |
| черный | фиолетовый | оранжевый | серый | |
| серый | оранжевый | фиолетовый | красный | |
| оранжевый | фиолетовый | красный | серый | |
| желтый | лиловый | фиолетовый | бирюзовый | |
| бирюзовый | красный | коричневый | лиловый | |
| зеленый | синий | оранжевый | черный |
2. Отправьте результаты выполнения индивидуального задания преподавателю на проверку.