Шаг 1. создание шаблона документа html

      Комментарии к записи Шаг 1. создание шаблона документа html отключены

Создание и редактирование Web-страниц

Краткие теоретические сведения

Для создания Web-страниц используются различные программные средства. В простейшем случае текст документа HTML можно создать при помощи стандартной программы Блокнот, а просмотреть его в программе-браузере, например, Microsoft Internet Explorer. Поскольку программа Блокнот предназначена для создания текстовых документов, то по умолчанию она использует расширение имени файла .txt. При сохранении же Web-страниц необходимо явно указывать расширение имени файла .html. Для того, что бы можно было увидеть отредактированный HTML-документ, необходимо не забывать сохранять его в программе Блокнот и обновлять содержимое окна браузера.

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

Цвет фона и символов 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= в теге . Если он не указан, то по умолчанию используется цвет, указанный в настройках браузера. Как правило – это белый цвет.

Цвет текста, отображаемого в окне браузера по умолчанию, — черный. Он указывается в его настройках. Явно цвет текста можно указать в тегепри помощи атрибута text=. Цвет отдельного фрагмента текста изменяется при помощи атрибута color= тега .

Ход работы

Шаг 1. Создание шаблона документа HTML

Чтобы создать свой HTML-документ, выполните следующее:

1.Создайте папку HTML, в которой будут храниться документы HTML, создаваемые по ходу выполнения работ.

2.Запустите стандартную программу Блокнот.

3.Наберите в окне редактора Блокнот следующий текст:

4.Сохраните файл под именем template.html в созданной ранее папке HTML. Не забудьте явно указать расширение имени файла .html, так как Блокнот по умолчанию применяет .txt.

5.Для просмотра созданной Web-страницы запустите на выполнение браузер, например, Microsoft Internet Explorer.

6.Откройте в браузере созданный ранее файл template.html, выполнив команду Файл aОткрыть a Обзор. В результате откроется пустое окно:

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

7.В программе Блокнот отредактируйте файл template.html так, чтобы между тегамиибыл помещен текст «Мой первый документ HTML», а между — «Всем огромный привет!». В результате документ HTML должен иметь такое содержание:

Мой первый документ HTML

Всем огромный привет!

8.Сохраните отредактированный документ в файле hello.html, выполнив команду Файл a Сохранить как….

9.Откройте в браузере файл hello.html, выполнив команду Файл aОткрыть a Обзор. В результате увидите примерно следующее:

Шаг 2. Задание цвета текста

1.Закройте программу Блокнот.

2.В браузере выполните команду Вид a Просмотр HTML кода. В результате откроется окно со стандартной программой Блокнот, в котором Web-страница будет представлена в командах HTML.

3.Измените цвет слова «Всем» на красный, указав название цвета. Для этого файл hello.html отредактируйте следующим образом:

Мой первый документ HTML

Всем огромный привет!

4.Сохраните внесенные в файл hello.html изменения, выполнив команду Файл a Сохранить.

5.Обновите содержимое окна браузера нажав кнопку Обновить. В результате его окно должно выглядеть примерно так:

6.Отредактируйте файл hello.html так, чтобы цвет слова «огромный» был зеленым, указав цвет в формате RGB:

Мой первый документ HTML

Всем огромный привет!

Обратите внимание, что значению цвета обязательно должен предшествовать значок «решетка» — #!

7.Просмотрите отредактированную Web-страницу, сохранив ее в Блокноте и обновив содержание окна браузера.

8.Установить весь остальной текст на странице синим. Для этого отредактируйте файл hello.html следующим образом:

Мой первый документ HTML

Всем огромный привет!

9.Просмотрите в браузере отредактированную Web-страницу.

Шаг 3. Задание цвета фона

  1. Внесите следующие изменения в файл hello.html и просмотрите его в браузере:

Мой первый документ HTML

Всем огромный привет!

Индивидуальные задания

1.В соответствии с номером по списку группы, или указанием преподавателя, установите такие цвета на Web-странице:

Вариант Фон Текст Слово «Всем» Слово «огромный»
белый черный серый синий
черный белый красный серый
черный зеленый серый красный
синий белый зеленый бирюзовый
лиловый белый желтый оранжевый
серый зеленый лиловый бирюзовый
красный фиолетовый лиловый зеленый
фиолетовый зеленый серый синий
зеленый синий красный серый
серый черный зеленый лиловый
лиловый зеленый фиолетовый черный
коричневый зеленый серый красный
синий серый зеленый черный
черный зеленый серый лиловый
оранжевый лиловый фиолетовый белый
зеленый синий оранжевый серый
лиловый зеленый черный синий
бирюзовый черный белый коричневый
оранжевый фиолетовый лиловый серый
серый зеленый оранжевый коричневый
коричневый белый зеленый красный
красный зеленый черный коричневый
белый оранжевый зеленый фиолетовый
фиолетовый бирюзовый лиловый черный
черный фиолетовый оранжевый серый
серый оранжевый фиолетовый красный
оранжевый фиолетовый красный серый
желтый лиловый фиолетовый бирюзовый
бирюзовый красный коричневый лиловый
зеленый синий оранжевый черный

2.Отправьте результаты выполнения индивидуального задания преподавателю на проверку.

Статьи к прочтению:

Создание сайта для маленьких. Урок 1 — создание первого HTML шаблона


Похожие статьи: