Порядок выполнения работы
Задание 1. Создание, сохранение, просмотр в браузере и правка простейшего HTML-документа.
1 Откройте текстовый редактор Блокнот (Notepad): Пуск / Все программы / Стандартные и наберите следующий текст, представляющий собой простейший HTML-документ:
<HTML>
<HEAD>
<TITLE> Заголовок (название) документа </TITLE>
<META http-equiv=²Content-Type² content=²text/html;
charset=Windows-1251²>
</HEAD>
<BODY>
Содержательная часть документа
</BODY>
</HTML>
2 Сохраните документ под именем web1.html в личной папке. Для этого вызовите окно сохранения документов Файл / Сохранить как… (File / Save as…). Выберите папку для сохранения файла; укажите имя файла и расширение web1.html в строке Имя файла (File name), в списке Тип файла (Save as type) выберите Все файлы (All files) и нажмите кнопку Сохранить (Save).
3 Запустите файл web1.html из какого-нибудь файлового менеджера, например Total Commander, или с помощью Internet Explorer. В IE, используя меню Файл (File), команду Открыть (Open), кнопку Обзор… (Browse…), откройте свой файл web1.html и отметьте, как он будет выглядеть в браузере.
4 Отобразите HTML-коды Web-страницы последовательностью команд Вид / Просмотр HTML-кода (View / Source). При этом откроется приложение Блокнот (Notepad).
5 Измените в Блокноте содержимое заголовка: между тэгами <TITLE>… </TITLE> введите фразу «Моя первая страница» (старый текст удалите).
6 Сохраните в Блокноте внесенные изменения комбинацией клавиш Ctrl + S или последовательностью команд Файл / Сохранить (File / Save).
7 Просмотрите в браузере Internet Explorer внесенные изменения, нажав кнопку 
− Обновить (Refresh − F5).
Задание 1. Измените содержательную часть документа, введя информацию о себе, своей работе и учебе, например:
|
|
<BODY>
ПРИВЕТ! Это моя первая страничка на языке HTML!
Меня зовут (Фамилия, имя, отчество).
Мой адрес. Я живу в городе Губкин.
Моя учеба. Я учусь в ГГПК.
Мои увлечения (опишите кратко ваши увлечения).
</BODY>
Сохраните документ web2.html. Просмотрите полученный результат в браузере. Завершите работу с браузером Internet Explorer и Блокнотом.
Пример 2. Использование параметров тэга <BODY>.
1 Откройте в Блокноте файл web2.html последовательностью команд Файл / Открыть (File / Open). При поиске нужного файла не забудьте в строке Тип файлов (Type) выбрать Все файлы (All files).
Открыть файл web2.html в Блокноте можно из Total Commander, если выбрать его из списка файлов и нажать клавишу F4 (Правка).
2 Измените цвета фона и текста в документе, присвоив атрибутам bgcolor и text открывающего тэга <BODY> некоторые значения из таблицы 2.5, например:
<BODY bgcolor=#FFFAFA text=brown>
3 Сохраните файл в Блокноте и просмотрите в Internet Explorer.
Задание 2. Измените цвет фона и текста в документе, цвета активных, просмотренных и не просмотренных гиперссылок, границы полей документа, придавая произвольные значения атрибутам элемента <BODY> (таблица 2.4).
Пример 3. Разбиение текста на абзацы. Выравнивание текста. Принудительный перенос строки. Использование заголовков внутри HTML-документа.
1 Отредактируйте содержательную часть документа web2.html следующим образом:
<BODY>
<H1><NOBR> ПРИВЕТ! Это моя первая страничка на языке HTML! <WBR> Меня зовут (Фамилия, имя, отчество). <NOBR></H1>
<P align=left> Мой адрес. <BR> Я живу в городе Губкин.
<P align=center> Моя учеба. <BR> Я учусь в ГГПК.
|
|
<P align=right> Моя специальность. <BR> (заполните информацией о группе и специальности).
<P align=justify> Мои увлечения.
<BR> Мои увлечения (опишите кратко свои увлечения).
</BODY>
2 Сохраните файл web3.html в Блокноте и просмотрите, как отразились внесенные изменения на внешнем виде Web-страницы в Internet Explorer.
Задание 3. Внесите дальнейшие изменения в документ web3.html. Используйте заголовки второго − шестого уровней (<H2> − <H6>) и выберите наиболее подходящий. Поменяйте значения параметра align (таблица 2.6) элемента <P> произвольным образом. Замените тэг <P> на <BR> и наоборот. Ознакомьтесь с результатами форматирования web1.html в браузере. Изменяя размеры окна браузера, обратите внимание на действие элементов <NOBR> и <WBR>.
Пример 4. Форматирование текста. Применение тэгов физического и логического форматирования. Форматирование с помощью элемента <FONT>.
1 Отредактируйте содержательную часть документа web1.html следующим образом:
<BODY>
<H1><NOBR> ПРИВЕТ! Это моя первая страничка на языке HTML! <WBR> Меня зовут (Фамилия, имя, отчество). <NOBR></H1>
<P align=left><I> Мой адрес. </I>
<BR> Я живу <DEL> в городе </DEL>
<EM> Губкин. </EM>
<P align=center><I> Моя учеба. </I>
<BR> Я учусь в
<ACRONYM title=²Основан в 1956 году²> ГГПК </ACRONYM>
<P align=right><TT> Моя будущая специальность </TT>
<BR> Я учусь на (заполните информацией о специальности).
<P align=justify>
<FONT face=²Verdana² color=#2a3b00 size=4> Мои увлечения.
<BR> Мои увлечения (опишите кратко свои увлечения).
</FONT>
</BODY>
2 Сохраните файл web4.html в Блокноте и просмотрите внесенные изменения в браузере IE.
|
|
Пример 5. Создание списков.
1 Создайте в Блокноте новый документ и отформатируйте его, как показано ниже, задав тем самым нумерованный (упорядоченный) список.
<HTML>
<HEAD>
<TITLE> Создание списков </TITLE>
</HEAD>
<BODY>
<H4> Главные спамеры планеты </H4>
<OL>
<LI> Соединенные Штаты - 42.11%
<LI> Южная Корея - 13.43%
<LI> Китай(включая Гонконг) - 8.44%
<LI> Канада - 5.71%
<LI> Бразилия - 3.34%
</OL>
</BODY>
</HTML>
2 Сохраните файл как list1.html и просмотрите его в браузере.
3 Измените начальный номер элемента списка, указав значение атрибута start тэга <OL>:
<OL start=3>
4 Измените маркеры нумерованного списка путем варьирования значений атрибута type тэгов <OL> или <LI>:
<OL start=3 type=A>
или
<LI type=i>
5 Измените значение номера конкретного элемента списка, например:
<LI value=10>
6 Сохраните list2.html и просмотрите изменения в браузере.
Задание 8. Создайте в документе list2.html маркированный (неупорядоченный) список, используя элемент <UL>. Измените внешний вид маркеров, варьируя значения атрибута type ={disc, circle, square}. Сохраните документ и просмотрите изменения в браузере.