Раздел 9. Подготовка и размещение в
Интернет информации. Язык HTML.
Работа 9.1. Изучение основ языка
гипертекстовой разметки документов (HTML) и создания многостраничных сайтов
Цель работы.
Изучить основы и получить навыки подготовки многостраничной информации для
размещения ее в Интернете.
В результате выполнения данной работы
студенты должны изучить на практике способы подготовки информации для
размещения ее в Интернет.
Порядок выполнения работы.
1. Изучить теоретическую часть
2. Выполнить задания в соответствии
методическими указаниями
3. В конце лабораторной работы студенты
должны представить отчёт по работе преподавателю и ответить на его вопросы
Предварительные указания по порядку
выполнения работы
• Отчётом по данной работе является
документ HTML, состоящий из че-тырех страниц, находящийся в папке имя которой
является фамилией студента.
• При выполнении работы создание и
редактирование текста выполняется при помощи редактора Блокнот (Notepad).
• Просмотр страниц выполняется из
браузера Internet Explorer или иного, установленного на компьютере студента и
преподавателя.
Теоретическая часть
Создание любого сайта возможно только
после знакомства с языком HTML, который является основой создания страниц
любого сайта и освоить правила формирования структуры сайта и взаимосвязи его
страниц.
HTML-документы представляют собой
ASCII-файлы, доступные для просмотра и редактирования в любом редакторе
текстов.
Правила форматирования документа в HTML
определяются при помощи специальных команд – тегов. Большинство тегов являются
парными и имеют схожий вид. Начинаются они с имени тега в угловых скобках, а
заканчиваются именем тега с косой чертой также в угловых скобках. Например,
чтобы указать, что текст должен располагаться в середине экрана, используется
следующая команда:
<center> Привет посетителям моей
страницы. </center>
Основные типы тегов представлены ниже:
• <html> и </html> -
это граничные теги HTML страницы и они размещаются в начале и конце любой
страницы
• <head> </head> -
между этими тегами находится невидимая часть сайта, служебная информация.
• <title><.title> - между
этими тегами пишется название сайта.
• <body> </body > -
между этими тегами размещается информация сайта, отображаемая на экране
компьютера
• <table> <tr>
<td> - теги формирования таблиц, которые являются одной из важнейших
конструкций при построении сайта.
• <h> ... </h>
<p>...</p> <li>...</li> - теги для написания
заголовков, параграфов, списков для вставки текста на страницу.
• <img src="адрес"
width="ширина" height="высота" alt="название"
> - так вставляется изображение.
• <a rel="nofollow ugc" target="_blank" href="#
адрес"> Страница 1 </a> - так делается ссылка на страницу.
Простейший документ на языке HTML и его
отражение в браузере представ-лены ниже на рис. 8.16:
<HTML>
<HEAD>
<TITLE>Документ
HTML </TITLE>
</HEAD>
<BODY>
<H1> Это заголовок </H1>
Добро пожаловать в WWW <br> Я,
Иванов Иван Иванович, новый автор HTML-документов
</BODY>
</HTML>
Здесь использованы следующие теги:
<HTML> и парный ему </HTML>
для описания всего документа (его границ)
<HEAD> и парный ему </HEAD> –
информационный блок
<TITLE> и парный ему </TITLE>
для задания заголовка документа
<BODY> и парный ему </BODY>
для описания тела документа
<H1> и парный ему </H1> для
задания текстового заголовка первого уровня
<BR> для указания на конец
параграфа. Внимание, тег <BR> не имеет парного тега.
ПРИМЕЧАНИЕ. В тегах языка HTML не
различаются символы верхнего и нижнего регистров: тег <TITLE>
эквивалентен тегу <title><Title>.
Заголовок документа Тэг <TITLE> и
парный ему тег </TITLE>
Каждый HTML-документ должен иметь
заголовок. Заголовок используется для поиска документов и обычно отображается
отдельно от документа, например, как заголовок окна, в котором отображается сам
документ. Обычно заголовок со-держит краткое описание содержимого документа.
Заголовки разделов внутри документа. Для
структуризации текста в доку-менте HTML возможно использование заголовков шеcти
уровней – от 1 до 6. Заголовок первого уровня считается самым главным
(крупным) и используется в качестве первого заголовка документа. Заголовки
могут выделяться цветом или шрифтом.
Синтаксис:
<Hx>Текст заголовка</Hx>,
где х – это число от 1 до 6, указывающее
уровень заголовка.
В примере на рис. 8.16 использован
заголовок первого уровня.
Логические стили
Логические стили, наряду с шестью стилями
заголовков используются для формирования текстовой части документа. Начертание
текста выделенного с помощью логических стилей зависит от настроек браузера.
<STRONG> –служит для выделения
текста (обычно это утолщённый шрифт).
<SMALL> – уменьшенный шрифт.
<BIG> – увеличенный шрифт.
<SUP> (superscript) – для верхних
индексов.
<SUB> (subscript) – для нижних
индексов.
Физические стили
Начертание шрифта при использовании таких
стилей не зависит от настроек браузера.
<U> – (underline) подчёркивание
<B> – (bold) – полужирный
<I> – (italic)курсив
Чтобы ввести в текст символ произвольного
вида, можно задать его код в следующем формате &#n, где n это ASCI – код
вводимого символа.
Чтобы ввести в текст пробел надо написать
 .
Размер, гарнитура и цвет шрифта
Тег <BAZEFONT SIZE=…> задаёт размер
шрифта, который используется в документе по умолчанию
Тег <FONT SIZE=.. FACE=…. COLOR=….>
задаёт размер, гарнитуру и цвет символов
Пример
<FONT SIZE=5 FACE=«ARIAL» COLOR=«BLUE»>
COLOR=«#ffaa55» – шестнадцатеричное
значение
ПРИМЕЧАНИЕ. Следует учесть, что шрифты,
которые вы используете должны быть установлены не только у Вас, но и у
клиентов, которые будут просматривать документ.
Можно задать несколько допустимых шрифтов,
например: <FONT FACE=«Arial, Helvetica, Geneva, Swiss, Sans, Serif»>.
Браузер при этом будет использовать первый из найденных шрифтов.
Теги абзаца и перевода строки
Тег перевода строки <BR> отделяет
строку от последующего текста или графики.
Тег абзаца <P> тоже отделяет строку,
но ещё добавляет пустую строку, кото-рая зрительно выделяет абзац. Оба тега
являются непарными, т.е. не имеют закрывающих тегов. Чтобы закончить строку или
абзац в определённом месте достаточно поставить соответствующий тэг.
Тэг <NoBR> предотвращает
произвольный разрыв текста и перемещения графики при переполнении строки окна
браузера. Этот тэг парный. Если же в не-разбиваемом блоке текста надо в
каком-то месте допустить разрыв используется тэг <WBR>. Он ставится между
тегами <NoBR> и </NoBR>
В качестве аргумента может применяться
одно из трёх ключевых слов: RIGHT, LEFT, ALL, обеспечивающих размещение текста
там, где свободно левое, правое или оба поля соответственно (не надо
многократно писать <BR>).
Выравнивание текста и графики. Теги
<LEFT>, <RIGHT>, <CENTER> выравнивают текст и графику по
левому краю, правому краю или центру, соответственно.
Современные браузеры для выравнивания
текста используют директиву ALIGN в теге <P>, которая может принимать
значения left, right, center, justify.
Пример
<P ALIGN=left> – выключка по левому
краю </P>
<P ALIGN=right> – выключка по
правому краю </P>
<P ALIGN=center> – центрирование
</P>
<P ALIGN=justify> – выравнивание
текста </P>
ПРИМЕЧАНИЕ.
Чтобы поместить в текст документа
комментарий – пояснительный текст, который не должен отображаться на экране,
следует использовать следующий тег:
<!-- …. -->
Текст комментария располагается вместо
точек.
Разделительные полосы. Тег <HR >
(horizontal rule –горизонтальная полоса) разбивает текст (аналогично тегу
<P>) и проводит горизонтальную полосу шири-ной во весь экран.
Вид стандартных полос можно изменить с
помощью необязательных атрибутов: SIZE – толщина полосы, WIDTH –длина полосы,
ALIGN – выравнивание полосы. Атрибут NOSHADE создаёт сплошную чёрную полосу без
оттенения.
Пример
<HR SIZE=10 WIDTH=200 ALIGN=CENTER
NOSHADE>
Цвета фона, текста и ссылок определяются в
начале файла HTML в теге BODY:
<BODY BGCOLOR=«#aaefff» TEXT= «black» LINK
=«#ff0000» VLINK=«red» BACKGROUND = "recbg.jpg"
BGPROPERTIES="fixed" >
Атрибуты тега:
BGCOLOR – цвет фона,
TEXT – цвет основного текста,
LINK – цвет не просмотренных
гипертекстовых ссылок,
VLINK – цвет просмотренных ссылок,
BACKGROUND – имя графического файла,
используемого в качестве фона.
Фоновое изображение – это графический файл
(расширение GIF или JPG) с изображением небольшой прямоугольной области. При
просмотре в браузере эти изображения многократно повторяются, заполняя все
окно. Чем меньше размер изображения, тем быстрее будет загружаться весь фон.
Фоновый звук. Internet Explorer распознает
оба формата оцифрованного звука (WAW, AU), а также формат MIDI. Большие файлы
требуют много времени для передачи и загрузки.
Тег <BGSOUND SRC=«file.wav» LOOP=10>
обеспечивает загрузку и воспроизведение на соответствующем аппаратном
обеспечении,
где:
– SRC – это сокращение от Source
(источник);
– LOOP определяет число повторений
звукового клипа. Чтобы звук повторялся бесконечно, надо задать ключевое слово
INFINITE.
Графика.
Графические файлы используются в HTML-документах с целью повышения наглядности
и привлекательности документов, а также для вставки текстов, например,
математических формул, которые трудно воспроизвести при помощи текста.
<IMG SRC=«image1.jpg»> – это минимальная
форма записи вставки графического файла, image1.jpg – это имя графического
файла, вставляемого в документ.
<IMG SRC=«image1.jpg» LOWSRC=«image1-1.jpg»
ALT==«image1.jpg» WIDTH=… HEIGHT=… ALIGN=LEFT HSPACE=20 VSPACE=10 BORDER=2 >
– это развёрнутая
(максимальная) форма.
LOWSRC – необязательный параметр,
используемый для увеличения скорости передачи графики. Файл image1-1.jpg
содержит то же изображение, что и image1.jpg, но выполнен с низким разрешением.
Этот файл загружается вместе с текстом, а затем уже загружается основное
изображение.
ALT – задаёт имя файла изображения,
которое отображается при наведении курсора на ссылку. Особенно полезно, когда
программа по каким-то причинам не находит файла изображения. Этот файл
загружается вместе с текстом, а затем уже загружается основное изображение.
WIDTH, HEIGHT – ширина и высота
изображения. Использование этих атрибутов существенно ухудшает качество
изображения и не обеспечивает более быстрой загрузки изображения, так как
фактический размер файла изображения (в байтах) при этом не изменяется
(качество не ухудшится, если точно выдержать соотношение размеров изображения
по ширине и высоте).
Атрибут ALIGN принимает значения:
LEFT – обеспечивает выравнивание
изображения по левому краю. При этом текст обтекает изображение справа.
RIGHT – обеспечивает выравнивание
изображения по правому краю. При этом текст обтекает изображение слева.
TOP – выравнивает одну строку текста
(например название рисунка) по верху изображения. При этом текст располагается
слева или справа от изображения, в соответствии с расположением текста
относительно изображения в исходном тексте. При этом не надо ставить знака
<BR>.
BOTTOM – выравнивание строки текста внизу
изображения (по высоте).
MIDLE – выравнивание строки текста по середине
изображения (по высоте).
HSPACE – горизонтальное поле (отступ в
пикселях) вокруг изображения.
VSPACE – вертикальное поле (отступ в
пикселях) вокруг изображения.
BORDER=2 ширина черной рамки вокруг
изображения.
ПРИМЕЧАНИЕ. Анимационные GIF-файлы встраиваются
в документ точно таким же образом, и не требуют дополнительных параметров.
Организация связи документов на сайте
(ссылок).
Ссылки позволяют щелчком по выделенному
слову или фразе перейти к дру-гому документу или части того же документа.
Гипертекстовые ссылки выделяются в тексте документа цветом.
Чтобы включить ссылку в документ
необходимо:
1. Поместить в текст тег <A >.
После символа А следует пробел.
2. Указать имя файла, на который
происходит ссылка в формате: HREF=«имя файла» и закрывающую скобку >.
3. Ввести текст ссылки.
4. Указать на завершение тега
</A>
Пример
<A HREF=«GLAVA2.HTM»> Глава вторая
</A>
В данном примере фраза «Глава вторая»
является ссылкой на HTML-документ, GLAVA2.HTM, находящийся в том же каталоге
(папке), что и текущий документ. Если документ находится в другом каталоге, то
необходимо указать имя этого каталога (или путь), например:
<A HREF=«BOOK/GLAVA2.HTM»> Глава
вторая
</A>
Такие ссылки называются относительными.
При необходимости можно за-дать и абсолютные имена файлов. Последние обычно
используются для ссылок на несвязанные между собой документы, например:
<A HREF=«http:/www.cpress.ru/BOOK/GLAVA2.HTM»>
Глава вторая </A>
Здесь http:/www.cpress.ru – так называемый
URL – Uniform Resource Locator (унифицированный адрес ресурсов).
Ссылки на фрагмент документа
Для создания ссылки из документа DOCUM1 на
какой-то раздел (абзац) документа, содержащегося в файле DOCUM2, необходимо
сначала создать именованную ссылку (метку) в документе DOCUM2:
<A NAME=«PETJA»>Петя
Иванов</A>,
а затем ссылку на неё из документа DOCUM1,
указывая не только имя файла, но и имя ссылки, разделив их символом #.
<A HREF=«DOCUM2#PETJA»>Привет от
Петра</A>.
В этом примере фраза «Привет от Петра»
является ссылкой на метку «PETJA» документа DOCUM2.
Для организации ссылок на разделы одного и
того же документа используется та же технология, но в адресе ссылки не
указывается имя файла. Например, чтобы перейти в именованный раздел PETJA в
документе DOCUM2, надо создать следующую ссылку:
<A HREF=«#PETJA»>
Цвета ссылок можно определить в теге
стилей <style> (это так называемые каскадные стили.) При этом значения
атрибутов, определенных в тэге <style> имеют приоритет перед
определениями, сделанными в теге BODY или в теле документа.
Пример:
<head>
<style>
a:link {color:#ff5500; font-weight:normal; }
a:visited {color:#00ff00; font-weight:normal; }
a:hover {color:blue; font-weight:normal; }
</style>
</head>
На данном примере отражен механизм задания
цвета ссылки на странице в трех возможных ее состояниях:
• просто задана ссылка;
• ссылка по которой уже был
переход;
• ссылка на которую наведен курсор.
Графические ссылки
Такие ссылки позволяют щёлкнуть на
изображении и перейти к другому файлу.
Для того, чтобы сделать графическую
ссылку, надо набрать тот же код, что и для текстовых ссылок. Но в том месте,
где стоял текст, выделенный для ссылки, поставьте графическое изображение, на
котором будет производиться щелчок.
Пример
<A HREF=«DOG.HTM»><IMG SRC=«images/dog1.gif»
ALT=«Собака» WIDTH=60 HEIGHT=80></A>
Целесообразно для графических ссылок не
уменьшать размер исходного изображения при помощи атрибутов WIDTH и HEIGHT, а
создавать отдельные миниатюрные изображения. Это существенно ускорит процесс
загрузки документа.
Практическая часть.
1. Создайте HTML-документ
(Web-страницу), содержащую четыре пара-графа текста, выполненного различными
типами шрифтов, различными цветами, имеющих различные выключки (выравнивания).
Каждый параграф должен содержать одну фотографию.
ПРИМЕЧАНИЕ. Для создания HTML документа
используйте программу «Блокнот» (Notepad).
2. Параграфы должны содержать
следующую информацию:
Параграф 1 - «Работа студента
группы ……………… Ива-нова И.И.». Далее наименование вуза, факультета и
специальности.
Параграф 2 – любимый город;
Параграф 3 – любимый сезон года;
Параграф 4 – любимый вид спорта.
3. Параграфы должны начинаться
заголовками различных уровней и со-держать до трех строк текста с фотографией).
Заголовок первого параграфа – «Дан-ные об авторе»
4. В HTML-документе (п. 1 работы)
создайте фоновый рисунок (тег BODY, атрибут BACKGROUND).
5. Введите в документ между
параграфами текста разделительные полосы (тэг HR), придав атрибутам полосы
различные значения высоты, ширины и выравнивания.
6. Создайте три дополнительные
страницы с различным цветом фона страницы:
• страница 2;
• страница 3;
• страница 4.
Главному документу (первой странице)
присвойте имя INDEX.HTM. При помощи тега <A HREF=> Текстовая ссылка
</A> организуйте связь главного документа с тремя другими документами,
обеспечивая перекрашивание гипертекстовой ссылки при наведении на неё курсора.
7. Перенесите текст параграфа 2 на
страницу 2 и создайте ссылку со слов «Параграф 2» на первой странице на
страницу 2.
8. Повторите п. 7 для параграфов 3 и 4 .
9. Проверьте через браузер
правильность выполнения заданий данной работы.
10. Сообщите преподавателю об окончании
работы.
69 минут
36 минут
33 минуты
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.