Задание № 1. Создание простейшего файла HTML
1. Создайте личную папку, куда вы будете сохранять все файлы своего сайта.
2. Запустите программу Блокнот (Notepad).
3. Наберите в окне программы простейший файл HTML.
<HTML>
<HEAD>
<TITLE>Учебный файл HTML</TITLE>
</HEAD>
<BODY>
Расписание занятий на вторник
</BODY>
</HTML>
4. Сохраните файл под именем RASP.HTML (обязательно укажите тип файла HTML при сохранении) в личной папке.
5. Для просмотра Web-страницы используйте любую программу браузера (Internet Explorer, Opera, Mozilla Firefox или другую).Для этого,не покидая программу Блокнот(свернитеокно на панель задач), откройте личную папку и двойным кликом по файлу RASP.HTML откройте окно браузера.
Рис.1
На экране вы увидите результат работы, изображенный на рисунке 1.
Задание № 2. Управление расположением текста на экране
1. При необходимости откройте текст Web-страницы в Блокноте (1 щелчок правой клавишей мыши по файлу RASP.HTML, в контекстном меню выбрать команду Открыть с помощью... и выбрать программу Блокнот).При необходимости открыть файл в браузере
– двойной клик по значку файла левой клавишей мыши.
2. Внести изменения в файл RASP.HTML, расположив слова Расписание, занятий, на вторник на разных строках.
<HTML>
<HEAD>
<TITLE>Учебный файл HTML</TITLE>
</HEAD>
<BODY>
Расписание
занятий
на вторник
</BODY>
</HTML>
3. Сохраните текст с внесенными изменениями в файле RASP.HTML (меню Файл | Сохранить). Если у вас уже отображается Web-страница, то вам достаточно переключиться на панели задач на программу браузера и обновить эту страницу (кнопка 
). Изменилось ли отображение текста на экране?
Не удивляйтесь тому, что внешний вид вашей Web-страницы не изменился.
Не забывайте каждый раз сохранять текст Web-страницы при ее корректировке в программе Блокнот и обновлять страницу при ее просмотре в программе браузера.
Задание № 3. Некоторые специальные команды форматирования текста
Существуют специальные команды, выполняющие перевод строки и задающие начало нового абзаца. Кроме того существует команда, запрещающая программе браузера изменять каким-либо образом изменять форматирование текста и позволяет точно воспроизвести на экране заданный фрагмент текстового файла.
Тег перевода строки <BR> отделяет строку от последующего текста или графики.
Тег абзаца <P> тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац.
Оба тега являются одноэлементными, тег <P> – двойной, т.е. требуется закрывающий тег.
1. Внесите изменения в файл RASP.HTML
<HTML>
<HEAD>
<TITLE>Учебный файл HTML</TITLE>
</HEAD>
<BODY>
<P>Расписание</P>
<BR>занятий<BR>
на вторник
</BODY>
</HTML>
2. Сохраните внесенные изменения, переключитесь на панели задач на программу браузера, обновите Web-страницу.
Как изменилось отображение текста на экране? Выглядеть ваша Web-страница будет примерно так, как показано на рисунке 2.
Рис. 2
Задание № 4. Выделение фрагментов текста
1. Внести изменения в текст файла RASP.HTML
<HTML>
<HEAD>
<TITLE>Учебный файл HTML</TITLE>
</HEAD>
<BODY>
<B>Расписание</B>
<I> занятий</I>
<U> на вторник</U>
</BODY>
</HTML>
2. Посмотрите полученную Web-страницу.
Возможно использование комбинированных выделений текста.
<I><B>Расписание</B></I> <I><U> занятий</U></I> <U> на вторник</U>
Но при этом необходимо помнить следующее правило использования комбинированных тегов:
<Тег_1><Тег_2>... </Тег_2></Тег_1> – правильная запись.
<Тег_1><Тег_2>... </Тег_1></Тег_2> –ошибочная запись.
Обратите внимание на «вложенность» тегов, она напоминает «вложенность» скобок.
Задание № 5. Задание размеров символов Web-страницы
Существует два способа управления размером текста, отображаемого браузером:
· использование стилей заголовка,
· задание размера шрифта основного документа или размера текущего шрифта. Используется шесть тегов заголовков: от <H1> до <H6> (тег двойной, т.е. требует закрытия). Каждому тегу соответствует конкретный стиль, заданный параметрами настройки браузера.
1. Внесите изменения в файл RASP.HTML
<HTML>
<HEAD>
<TITLE>Учебный файл HTML</TITLE>
</HEAD>
<BODY>
<P><H1>Расписание</H1></P>
<I> занятий</I><U> на вторник</U> </BODY>
</HTML>
2. Просмотрите свою Web-страницу. На экране вы увидите то, что отображено на рисунке 3.
Рис. 3
Задание № 6. Установка размера текущего шрифта
Тег шрифта <FONT> позволяет задавать размер текущего шрифта в отдельных местах текста в диапазоне от 1 до 7.
1. Внесите изменения в текст RASP.HTML
<HTML>
<HEAD>
<TITLE>Учебный файл HTML</TITLE>
</HEAD>
<BODY>
<FONT SIZE="7">Расписание</FONT>
занятий на вторник
</BODY>
</HTML>
2. Самостоятельно измените размер текста «занятий на вторник», используя тег <FONT>.
3. Измените оформление текста HTML-документа, используя тег выделения фрагментов и тег перевода строки и абзаца.
Задание № 7. Установка гарнитуры и цвета шрифта
Тег <FONT> предоставляет возможности управления гарнитурой, цветом и размером текста. Изменение гарнитуры текста выполняется простым добавлением к тегу <FONT> атрибута FACE. Например,для отображения текста шрифтом Arial необходимо записать:
<FONT FACE=”ARIAL”>
Для изменения цвета шрифта можно использовать в теге <FONT> атрибут COLOR=”X”. Вместо “X” надо подставить английское название цвета в кавычках(“ ”),либо его шестнадцатеричноезначение. При задании цвета шестнадцатеричным числом необходимо представить этот цвет разложенным на три составляющие: красную (R – Red), зелѐную (G – Green), синюю (B – blue), каждая из которых имеет значение от 00 до FF. В этом случае мы имеем дело с так называемым форматом RGB.
Примеры записи текста в формате RGB приведены в Таблице 1:
| Таблица 1 | ||||||||||||||
| Запись текста в формате RGB | ||||||||||||||
| Цвет | RRGGBB | Цвет | RRGGBB | Цвет | RRGGBB | |||||||||
| Black | Purple | FF00FF | Green | 00FF00 | ||||||||||
| Черный | Фиолетовый | Зеленый | ||||||||||||
| White | FFFFFF | Yellow | FFFF00 | Azure | 00FFFF | |||||||||
| Белый | Желтый | Бирюзовый | ||||||||||||
| Red | FF0000 | Brown | Blue | 0000FF | ||||||||||
| Красный | Коричневый | Синий | ||||||||||||
| Orange | FF8000 | Violet | B000FF | Gray | A0A0A0 | |||||||||
| Оранжевый | Лиловый | Серый | ||||||||||||
1. Внесите изменения в файл RASP.HTML
<HTML>
<HEAD>
<TITLE>Учебный файл HTML</TITLE>
</HEAD>
<BODY>
<U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7"> Расписание</FONT></B></I></U> занятий на вторник
</BODY>
</HTML>
2. Самостоятельно измените размер, цвет, гарнитуру стиль текста документа.
Задание № 8. Выравнивание текста по горизонтали
1. Внесите изменения в файл RASP.HTML
<HTML>
<HEAD>
<TITLE>Учебный файл HTML</TITLE>
</HEAD>
<BODY>
<P ALIGN="CENTER">
<FONT COLOR="#008080" SIZE="7">
<B>Расписание</B></FONT><BR>
<FONT SIZE="6"><I> занятий на вторник</I></FONT> </P>
</BODY>
</HTML>
2. Просмотрите изменения в браузере. На экране вы увидите то, что показано на рисунке 4.
Рис. 4
Задание № 9. Задание цвета фона и текста
При изображении фона и цвета браузеры используют цвета, установленные по умолчанию, – они заданы параметрами настройки браузера. Если вы хотите задать другие цвета, то это надо сделать в начале файла HTML в теге <BODY>. Атрибут BGCOLOR= определяет цвет фона страницы, атрибут TEXT= задает цвет текста для всей страницы, атрибуты LINK= и VLINK= определяют соответственно цвета непросмотренных и просмотренных ссылок (последние два примера будут рассмотрены позже).
1. Внесите изменения в файл RASP.HTML
<HTML>
<HEAD>
<TITLE>Учебный файл HTML</TITLE> </HEAD>
<BODY BGCOLOR="#FFFFCC" TEXT="#330066"> <P ALIGN="CENTER">
<FONT COLOR="#008080" SIZE="7">
<B>Расписание</B></FONT><BR>
<FONT SIZE="6"><I> занятий на вторник</I></FONT> </P>
</BODY>
</HTML>
2. Просмотрите изменения Web-страницы в браузере.
Задание № 10. Размещение графики на Web-странице
Тег <IMG> позволяет вставить изображение на Web-страницу. Оно появится в том месте документа, где находится этот тег. Тег <IMG> является одиночным.
Необходимо помнить, что графические файлы должны находиться в той же папке, что и файл HTML, описывающий страницу. Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG.
Для выполнения следующего задания поместите файл с именем CLOCK.JPG (или другим именем) в рабочую папку.
Следует помнить, что для браузера важно, в каком регистре вы задаете описание имени и типа файла. Выработайте для себя определенное правило и строго следуйте ему. Если вы размещаете файл графического изображения во вложенной папке, то при описании изображения необходимо указывать путь доступа к файлу изображения, отображая вложенность папок.
1. Внесите изменения в файл RASP.HTML
<HTML>
<HEAD>
<TITLE>Учебный файл HTML</TITLE> </HEAD>
<BODY BGCOLOR="#FFFFCC" TEXT="#330066"> <P ALIGN="CENTER">
<FONT COLOR="#008080" SIZE="7">
<B>Расписание</B></FONT><BR>
<FONT SIZE="6"><I> занятий на вторник</I></FONT> <BR><BR>
<IMG SRC="CLOCK.PNG">
</P>
</BODY>
</HTML>
2. Просмотрите изменения вашей Web-страницы в браузере.
На экране вы увидите те, что показано на рисунке 5.
Рис. 5
Тег <IMG> имеет немало атрибутов, описанных в таблице 2. Эти атрибуты можно задавать дополнительно и располагаться они могут в любом месте тега после кода IMG.
Таблица 2
| Атрибуты изображения | |||||
| Атрибут | Формат | Описание | |||
| ALT | <IMG SRC="CLOCK.JPG" | Задает текст, заменяющий изображение в том случае, | |||
| ALT="Картинка"> | если браузер не воспринимает изображение | ||||
| BORDER | <IMG SRC="CLOCK.JPG" | Задает толщину рамки вокруг изображения. | |||
| BORDER="3"> | Измеряется в пикселях | ||||
| ALIGN | <IMG SRC="CLOCK.JPG" | Задает выравнивание | изображения | относительно | |
| ALIGN="TOP"> | текста: | ||||
| · относительно текста | выровнена | верхняя | часть | ||
| изображения – "TOP", | |||||
| · относительно текста | выровнена | нижняя | часть | ||
| изображения – "BOTTOM", | |||||
| · относительно текста | выровнена | средняя | часть | ||
| изображения – "MIDDLE". | |||||
| HEIGHT | <IMG SRC="CLOCK.JPG" | Задает вертикальный размер изображения внутри | |||
| HEIGHT="111"> | окна браузера | ||||
| WIDTH | <IMG SRC="CLOCK.JPG" | Задает горизонтальный размер изображения внутри | |||
| WIDTH="210"> | окна браузера | ||||
| VSPACE | <IMG SRC="CLOCK.JPG" | Задает добавление верхнего и нижнего пустых полей | |||
| VSPACE="8"> | |||||
| HSPACE | <IMG SRC="CLOCK.JPG" | Задает добавление левого и правого пустых полей | |||
| HSPACE="8"> | |||||
Задание № 11. Использование атрибутов изображения
1. Самостоятельно внесите изменения в текст файла RASP.HTML: опробуйте использование таких атрибутов графики, как ALT, BORDER, ALIGN, HEIGHT, WIDTH, VSPACE,
HSPACE.