Поделиться
Оформление гипертекстовой страницы.pdf
Практическая работа №26
Создание страницы на языке HTML
Цель занятия. Изучение приемов создания и форматирования Web-страницы с помощью языка HTML.
Рассмотрим основные концепции HTML, необходимые для понимания принципов разработки документов для Интернета. Для этого сделаем краткий обзор функциональных возможностей языка HTML и правил форматирования документов.
HTML-формат. Основным форматом Web-документов, составляющих содержимое узлов Web, является Hypertext Markup Language (HTML — язык разметки гипертекста). HTML представляет собой совокупность достаточно простых команд, которые вставляются в исходный текст документа (ASCII-файл) и позволяют управлять представлением этого документа на экране дисплея. Таким образом, текст, подготовленный в любом текстовом редакторе и сохраненный в обычном ASCII-формате, становится Web-страницей (HTML- документом) после добавления в него ряда команд языка HTML.
Работа с тэгами. Команды HTML задаются с помощью специальных элементов, называемых тэгами (tag). Тэги позволяют управлять представлением информации на экране при отображении HTML- документов специальными программами — браузерами (от англ. browse — просматривать), такими как Microsoft Edge, Google Chrome, Яndex browser, Opera и т.д. Иногда эти программы называют обозревателями.
Тэг имеет вид строки символов, заключенной между символами «<» и «>». Например, <BR> — это тэг переноса строки. Существуют два типа тэгов:
• одноэлементный тэг, который достаточно просто вставить в текст, чтобы совершить какое-либо действие;
• парный тэг, который влияет на текст, заключенный между точкой, где употреблен тэг, и точкой, в которой указан признак завершения команды. Признак завершения команды — это тот же самый тэг, только начинающийся с символа «/». Например, <BODY> и </BODY> — признаки начала и окончания текста документа.
Как работают браузеры. Графическая, видео- и аудиоинформация содержится в отдельных файлах и принимается браузером согласно ссылкам в документе на эти файлы. Приняв информацию, браузер компонует элементы документа в соответствии с тем, что задано командами HTML, и показывает результат на экране с учетом предварительных настроек, касающихся размеров окна браузера, используемой цветовой схемы, установленных шрифтов и т. д.
Файлы HTML — это обычные текстовые файлы, имеющие расширение НТМ. Для создания и редактирования таких файлов можно использовать стандартную программу Блокнот (Notepad) (рис. 1), входящую в комплект Windows, NotePad++ (рис. 2), и другие текстовые редакторы. Также для создания и редактирования файлов HTML можно использовать специальные HTML-редакторы. Для просмотра результата создания Web-страниц можно использовать любой Интернет-браузер
Рис 1. Окно текстового редактора блокнот (NotePad)
Рис 2. Окно текстового редактора Notepad ++
Определение HTML-файла. Первый тэг, который должен находиться в любом HTMLдокументе, — это <HTML>...</HTML>. Этот тэг указывает на то, что данный документ действительно содержит в себе HTML-текст. Все, что вы напишете в своем документе, должно находиться внутри данного тэга:
<HTML>
текст документа </HTML>
Вы указали, что ваш документ действительно содержит команды HTML.
HTML-документ содержит две части — заголовок и собственно текст.
Определение заголовка. Определение заголовка должно содержаться внутри тэга <HEAD>...</HEAD>:
<HTML> <HEAD>
описание заголовка </HEAD> текст документа </HTML>
В разделе описания заголовка можно указать заглавие документа, для этого используется тэг <TITLE>...</TITLE>. Когда браузер встречает этот тэг, он отображает все, что находится внутри него, как заглавие. Приведем пример того, как используется данный тэг:
<HTML>
<HEAD>
<TITLE> Заглавие документа </TITLE>
</HEAD>
текст документа </HTML>
Определение тега документа. Весь остальной HTML-документ, включая весь текст, содержится внутри тэга <BODY>...</BODY>. Теперь наш документ выглядит примерно так:
<HTML>
<HEAD>
<TITLE> Это заглавие документа </TITLE>
</HEAD>
<BODY>
текст документа
</BODY>
</HTML>
Несмотря на то, что присутствие этих трех тэгов предусмотрено стандартом, большинство браузеров может отобразить документ даже при их отсутствии.
Однако следует приучить себя всегда указывать эти тэги, и тогда вам не придется беспокоиться по поводу редактирования документа, если в будущем эти тэги станут необходимы.
Задание 1. Создание файла «Расписание. НТМ».
Последовательность выполнения задания
1. Создайте папку «Мой Web-сайт», в которой будем сохранять созданные Webстраницы.
2. Запустите программу NotePad ++ (Пуск/программы/Notepad ++).
3. Наберите в окне редактора текст файла HTML.
Примечание. Не обязательно набирать текст «лесенкой» — можно набирать все в одну строку, начиная с первой позиции, потому что при просмотре все пробелы и знаки перевода строки игнорируются.
Образец текста файла HTML
<HTML>
<HEAD>
<TITLE> Общее расписание </TITLE>
</HEAD>
<BODY>
Расписание занятий на понедельник
</BODY>
</HTML>
4. Сохраните файл с именем «Расписание. НТМ» в папке «Мой Web-сайт». При сохранении в окне Сохранить как (Файл/Сохранить как) (рис. 3) установите тип файла — Hyper Text Markup Language, и введите имя файла «Расписание.НТМ» (рис. 4).
Рис. 3. Команда Сохранить как
Рис 4. Указание Имя файла и Тип файла
5. Откройте папку «Мой web-сайт» Откройте файл Расписание.НТМ двойным нажатием левой кнопки мыши. Убедитесь, что название Web-страницы («Общее расписание») отразилось в верхней (статусной) строке браузера (рис. 5, а и б).
а
б
Рис. 5. HTML-файл Расписание.HTM (Notepad ++) (а), (браузер) (б)
Примечание. По умолчанию файлы HTML открываются в Интернет обозревателе (браузере).
6. Обратите внимание, что в папке «Мой Web-сайт» находится один файл — Расписание. НТМ. Вы его будете открывать в текстовом редакторе Notepad ++ и в браузере.
Примечание. В работах по созданию Web-сайта на рисунках будут представлены два окна: сверху — просмотр HTML-кода Web-страницы в редакторе Notepad ++, а снизу — этой же страницы в браузере.
Задание 2. Управление расположением текста на экране. При отображении HTMLдокументов браузеры автоматически размещают текст на экране, не реагируя на встречающиеся в файле символы перевода строк и идущие подряд символы пробелов.
Последовательность выполнения задания
1. Откройте первоисточник Web-страницы, выполнив команду Вид/Просмотр HTMLкода. Откроется окно программы Блокнот, в котором ваша Web-страница будет представлена в командах HTML.
2. Внесите изменения в Блокноте в текст файла HTML, расположив слова «Расписание», «занятий», «на понедельник» на разных строках.
<HTML>
<HEAD>
<TITLE> Общее расписание </TITLE >
</HEAD> <BODY>
Расписание занятий на понедельник
</BODY>
</HTML>
3. Сохраните в редакторе Notepad ++ текст со внесенными изменениями в файле Расписание.НТМ с помощью команды Файл/Сохранить.
4. Просмотрите с помощью браузера полученную Web-страницу, обновив ее содержание клавишей [F5] или командой Обновить.
Обратите внимание, изменилось ли изображение текста на экране?
Задание 3. Использование тэгов перевода строки и абзаца. Существуют специальные команды, выполняющие перевод строки и задающие начало нового абзаца. Кроме того, имеется команда, которая запрещает программе браузера каким-либо образом изменять форматирование текста и позволяет точно воспроизвести на экране заданный фрагмент текстового файла.
Тэг перевода строки <BR> отделяет строку от последующего текста или графики. Тэг абзаца <Р> тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац. Оба тэга являются одноэлементными. Последовательность выполнения задания
1. Внесите в редакторе Notepad++ изменения в текст файла HTML:
<HTML>
<HEAD>
<TITLE> Общее расписание </TITLE>
</HEAD> <BODY>
Расписание <p> занятий<br> на понедельник
</BODY>
</HTML>
1. Сохраните файл HTML в редакторе Notepad ++ как Расписание1. HTM командой Файл/Сохранить как.
2. Просмотрите с помощью браузера полученную Web-страницу. Обратите внимание, как отличается изображение на экране Расписание1.HTM от Расписание.HTM
Задание 4. Выделение фрагментов текста.
Тэги выделения фрагментов текста позволяют управлять отображением отдельных символов и слов. Существуют три тэга выделения фрагментов текста:
<B>...</B> — выделение полужирным;
<I>...</I> — выделение курсивом;
<U>...</U> — выделение подчеркиванием.
Возможно использование комбинированных выделений:
<I><В>Расписание </В></I><I>занятий</I> <U> на понедельник</U>.
При этом необходимо помнить следующее правило записи комбинированных тэгов: <Тэг-1> <Тэг-2>...</Тэг-2> </Тэг-1> — правильная запись; <Тэг-1> <Тэг-2>...</Тэг-1> </Тэг-2> — ошибочная запись.
Последовательность выполнения задания
1. Внесите изменения в тело файла Расписание.НТМ:
<HTML>
<HEAD>
<TITLE> Общее расписание </TITLE>
</HEAD>
<BODY>
<B> Расписание </B> <I> занятий </I> <U> на понедельник</U>
</BODY>
</HTML>
2. Сохраните как Расписание2.HTM
3. Просмотрите полученную Web-страницу (рис. 6).
Рис. 6. Выделение фрагментов текста
Задание 5. Использование стилей заголовка.
Задание размера символов. Существуют два способа управления размером текста, изображаемого браузером:
• использование стилей заголовка;
• задание размера шрифта основного документа или размера текущего шрифта.
Использование стилей заголовка. Используется шесть тэгов заголовков (от <H1> до <H6>). Каждому тэгу соответствует конкретный стиль, заданный параметрами настройки браузера.
Последовательность выполнения задания
1. Внесите изменения в файл Расписание.НТМ:
<HTML>
<HEAD>
<TITLE> Общее расписание </TITLE>
</HEAD>
<BODY>
<H1> Расписание </H1> <I>занятий</I> <U> на понедельник</U> </BODY>
</HTML>
2. Сохраните как Расписание3.HTM.
3. Просмотрите полученную Web-страницу (рис. 7).
Рис. 7. Использование стиля заголовка H1
Задание 6. Установка размера текущего шрифта.
Тэг шрифта <FONT> позволяет задавать размер текущего шрифта в отдельных местах текста в диапазоне от 1 до 7.
Последовательность выполнения задания
1. Внесите изменения в файл Расписание. НТМ:
<HTML>
<HEAD>
<TITLE> Общее расписание </TITLE>
</HEAD>
<BODY>
<FONT SIZE ="7"> Расписание </FONT> занятий на понедельник
</BODY>
</HTML>
2. Самостоятельно измените размер шрифта для текста «занятий на понедельник», используя тэг <FONT>.
3. Измените оформление текста HTML-документа, используя тэги выделения фрагментов текста и тэги перевода строки и абзаца.
4. Сохраните как Расписаение4.HTM
5. Просмотрите полученную Web-страницу (рис. 8).
Рис. 8. Изменение Размеров шрифта
Задание 7. Установка гарнитуры и цвета шрифта.
Гарнитура и цвет шрифта. Тэг <FONT> предоставляет возможности управления размером, гарнитурой и цветом текста. Изменение гарнитуры шрифта выполняется простым добавлением к тэгу <FONT> атрибута FACE. Например, для изображения текста шрифтом Arial необходимо записать: <FONT FACE="ARIAL">.
Для изменения цвета шрифта можно использовать в тэге <FONT> атрибут COLOR="X".
Вместо X нужно подставить либо название цвета (в кавычках), либо его шестнадцатеричное значение. При задании цвета шестнадцатеричным числом можно представить этот цвет разложенным на три составляющие: красную (R — Red), зеленую (G — Green), синюю (В — Blue), каждая из которых имеет значение от 0 до FF. В этом случае мы имеем дело с так называемым форматом RGB (табл. 1).
|
Таблица 1. |
|
|
|
|
Цвет |
RRGGBB |
Цвет |
RRGGBB |
|
Black - черный |
000000 |
Purple – фиолетовый |
FF00FF |
|
White – белый |
FFFFFF |
Yellow – желтый |
FFFF00 |
|
Red – красный |
FF0000 |
Brown – коричневый |
996633 |
|
Green – зеленый |
00FF00 |
Orange – оранжевый |
FF8000 |
|
Azure – бирюзовый |
00FFFF |
Violet – фиолетовый |
8000FF |
|
Blue – синий |
0000FF |
Gray – серый |
A0A0A0 |
Последовательность выполнения задания
1. Внесите изменения в файл Расписание.НТМ:
<HTML>
<HEAD>
<TITLE> Общее расписание
</TITLE>
</HEAD>
<BODY>
<I><U><B> <FONT COLOR="#FF0000" FACE="ARIAL" SIZE ="7">
Расписание
</FONT></B></I></U>
занятий на понедельник
</BODY>
</HTML>
2. Самостоятельно измените размер, цвет, гарнитуру, стиль текста документа.
3. Сохраните как Расписаение5.HTM
Задание 8. Выравнивание текста по горизонтали.
С помощью тэгов HTML можно управлять горизонтальным выравниванием текста. Если способ выравнивания не оговорен, все элементы в документе будут выравниваться по левому краю и иметь неровное правое поле.
Современные браузеры воспринимают атрибут выравнивания текста ALIGN= следующим образом:
ALIGN=CENTER — выравнивание по центру;
ALIGN=RIGHT — выравнивание по правому краю; ALIGN=LEFT — выравнивание по левому краю.
Последовательность выполнения задания
1. Внесите изменения в файл Расписание.HTM:
<HTML>
<HEAD>
<TITLE> Общее расписание </TITLE>
</HEAD>
<BODY>
<P ALIGN=CENTER>
<FONT COLOR= "#107070" SIZE="7"><B> Расписание </B></FONT><BR>
<FONT SIZE = "6"><I>занятий на понедельник</I></FONT>
</Р>
</BODY>
</HTML>
2. Сохраните файл в редакторе Notepad ++ как Расписаение6.HTM (рис. 9, а) и обновите Web- страницу. На экране вы увидите Web-страницу с внесенными изменениями, представленную на рис. 9, б.
а
б
Рис.9. Web-страница Расписание6.htm после установки гарнитуры и цвета шрифта
(Notepad ++) (a); Расписание6.HTM после установки гарнитуры и цвета шрифта (браузер)
(б) Задание 9. Установка цвета фона и текста.
При изображении фона и текста браузеры используют цвета, установленные по умолчанию, которые заданы параметрами настройки браузера. Если вы хотите задать другие цвета, то это нужно сделать в начале файла HTML в тэге <BODY>. Атрибут BGCOLOR= определяет цвет фона страницы, ТЕХТ= задает цвет текста для всей страницы, LINK= определяют цвет непросмотренных ссылок и VLINK= определяют цвет просмотренных ссылок. Параметры ссылки будут рассмотрены позже.
Последовательность выполнения задания
1. Внесите изменения в файл Расписание.HTM: <HTML> <HEAD>
<TITLE> Общее расписание </TITLE>
</HEAD>
<BODY BGCOLOR= "#FFFFCC" TEXT= "#330066">
<P ALIGN=CENTER>
<FONT GOLOR= "#107070" SIZE = "7"><B> Расписание </B></FONT><BR>
<FONT SIZE="6"><I> занятий на понедельник</1></FONT>
</P>
</BODY>
</HTML>
7. Сохраните файл как Расписание7.HTM и обновите Web-страницу.
Задание 10. Размещение графики на Web-странице.
Тэг <IMG> позволяет вставить в документ изображение. Оно появится в том месте документа, где находится этот тэг. Данный тэг является одиночным. Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG. При выполнении следующего задания будем считать, что графический файл РИСУНОК.GIF хранится в рабочем каталоге «Мой Web-сайт», где находится и наша Web-страница.
Последовательность выполнения задания
1. Создайте рисунок в программе Paint (ширина — 7,0 см, высота — 3,0 см), установленным командой Файл/Свойства) и сохраните его в папке «Мой Web-сайт» с именем «РИСУНОК.JPG». Теперь в вашей папке находятся два типа файлов.
2. Внесите изменения в файл Расписание.НТМ:
<HTML>
<HEAD>
<TITLE> Общее расписание </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFCC" TEXT= "#330066">
<P ALIGN=CENTER>
<FONTCOLOR= "#107070" SIZE = "7"><B> Расписание </В></ FONT><BR>
<FONT SIZE="6"> <I> занятий на понедельник </I> </FONTxBR><BR>
<IMG SRC= "РИСУНОК.JPG">
</P>
</BODY>
</HTML>
3. Сохраните как Расписание8.HTM
4. Результаты работы представлены на рис. 10, а и б.
а
б
Рис. 10. Web-страница Расписание8.НТМ после изменения цвета фона и размещения графики (Notepad ++) (а); Расписание8.НТМ после изменения цвета фона и размещения графики (браузер) (б)
Тэг <IMG> имеет немало атрибутов, описанных в табл. 2, которые можно задавать дополнительно. Они могут располагаться в любом месте тэга после кода IMG.
|
Таблица. 2 |
|
|
|
Атрибут |
Формат |
Описание |
|
ALT |
<IMG SRC=" РИСУНОК.GIF" ALT="картина"> |
Задает текст, заменяющий изображение в том случае, если браузер не воспринимает это изображение |
|
BORDER |
<IMG SRC="РИСУНОК.GIF” BORDER="3"> |
Задает толщину рамки вокруг изображения. Измеряется в пикселах |
|
ALIGN |
<IMG SRC="РИСУНОК.GIF" ALIGN=TOP> |
Задает выравнивание изображения относительно текста: относительно текста выровнена верхняя часть изображения — ТОР, нижняя — BOTTOM, средняя — MIDDLE |
|
HEIGHT |
<IMG SRC=" РИСУНОК.GIF" HEIGHT = 111> |
Задает вертикальный размер изображения внутри окна браузера |
|
WIDTH |
<IMG SRC = " РИСУНОК.GIF" WIDTH=220> |
Задает горизонтальный размер изображения внутри окна браузера |
|
VSPACE |
<IMG SRC="РИСУНОК.GIF" VSPACE="8"> |
Задает добавление верхнего и нижнего пустых полей |
|
HSPACE |
<IMG SRC=" РИСУНОК.GIF" HSPACE="8"> |
Задает добавление левого и правого пустых полей |
Проектное задание 11. Установка атрибутов изображения.
Самостоятельно внесите изменения в файл Расписание.НТМ, опробуйте использование таких атрибутов графики, как ALT, BORDER, HEIGHT, WIDTH.
Примечание. Всегда обращайте внимание на размер (объем в байтах) графического файла, так как это влияет на время загрузки Webстраницы.
Зачетное задание
Задание 12. Установка фонового изображения на Web- странице.
Фоновое изображение — это графический файл с изображением небольшой прямоугольной плашки. При просмотре в браузере эта плашка многократно повторяется, заполняя все окно, независимо от его размеров.
Графика, используемая в качестве фоновой, задается в тэге <BODY>.
Последовательность выполнения задания
Внесите изменения в файл Расписание.НТМ:
<HTML>
<HEAD>
<TITLE> Общее расписание </TITLE>
</HEAD>
<BODY BACKGROUND = "РИСУНОК.JPG" TEXT= "#330066" BORDER="3">
<P ALIGN=CENTER>
<FONT COLOR= "#107070" SIZE = "7"><B> Расписание </B></FONT><BR>
<FONT SIZE = "6"> <I>занятий на понедельник</I></FONT><BR><BR>
</P>
</BODY>
</HTML>
Сохраните файл в редакторе Notepad ++ как Расписание9.HTM и откройте Webдокумент. На экране вы увидите, что созданный вами рисунок замостил весь экран.
Задание 13. Создание бегущей строки на Web-странице. Бегущая строка задается парным тегом <MARQUEE>...текст... </MARQUEE>.
Последовательность выполнения задания
Внесите изменения в файл Расписание.НТМ:
<HTML>
<HEAD>
<TITLE> Общее расписание </TITLE>
</HEAD>
<BODY BGCOLOR="FFFFCC" TEXT="#FF0CCC">
<P ALIGN=CENTER><MARQUEE> <FONT COLOR="FF5511" SIZE = "5"><U>Моя первая страница</U></FONT></MARQUEE>
<FONT COLOR= "#GREEN" SIZE="7"><B>Расписание</В></ FONT><BR> <FONT SIZE = "6"> <I>занятий на понедельник</I></ FONT><BR>
<IMG SRC="РИСУНОК.JPG" BORDER="3">
<MARQUEE> <FONT COLOR="0000FF" SIZE = "5"> <I>Завтра будет лучше, чем сегодня!</I></FONT></MARQUEE>
</Р>
</BODY>
</HTML>
Сохраните файл в редакторе Notepad ++ как Расписание.HTM и откройте Webдокумент. Закройте Notepad и Web-страницу.
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
