Лабораторная работа№1,2
.pdf
ЛАБОРАТОРНАЯ РАБОТА №1 СТРУКТУРА HTML ДОКУМЕНТА. ДЕСКРИПТОРЫ.
Задание к 1 лабораторной работе
1.Создать файл с гипертекстовым документом, в заголовке написать ФИО и
группу.
2.Выполнить форматирование шрифта:
∙Оформить фразу по приведенному ниже образцу:
В слове УТРО все буквы должны иметь разные цвета. В слове ПРОХЛАДОЙ оформить буквы ПРО – красным цветом, ОЙ – синим.
∙Использовать надстрочный и подстрочный текст. 3. Выполнить форматирование абзацев:
∙Ввести текст:
Быть иль не быть – вот в чем вопрос. Что благороднее: сносить удары неистовой судьбы – иль против моря невзгод вооружиться, в бой вступить. И все покончить разом…
∙Оформить выравнивание абзаца по ширине.
∙Ограничить абзац горизонтальными разделительными линиями сверху
иснизу, используя тег <HR>.
4. Выполнить оформление списков:
∙Дополнить текст документа следующим текстом:
Язнаю как оформлять:
Шрифты, Заголовки, Абзацы
∙Оформить три последние строки как список нумерованный.
∙Сделать оформление списка на список маркированный.
∙Создать «смешанный» список:
Я знаю, как оформлять:
1.Шрифты
∙Размер
∙Цвет
∙Гарнитуру
∙Индексы
2.Заголовки
∙От 1-го до 6-го уровня
3.Абзацы
∙Выравнивание
∙Разрыв строк внутри абзаца
∙С использованием переформатирования.
5.Вставить рисунки в документ, используя все известные атрибуты. 6. Создание гиперссылок и закладок.
∙ Закрепить гиперссылки на другие страницы за следующими элементами списка:
За словом Шрифт – гиперссылка на документ.
1
За словом Заголовки – на документ. За словом Абзацы – на документ.
∙Создать закладку в документе перед фразой «Нас утро встречает прохладой». Дать ей имя «Morning».
∙Изменить первую гиперссылку (слово Шрифт) так, чтобы она указывала на закладку «Morning».
7. Закрепить гиперссылки за графическими файлами.
8. Создать таблицу по варианту: Создать таблицы вида:
2
9. Создать фреймовую структуру по вариантам таблиц. Вставить в структуру страницы и ссылки между страницами.
Описание работы
Язык HTML (Hyper Text Markup Langguage - язык разметки гипертекста) является языком форматирования текстовых документов для представления их в WWW - "всемирной паутине".
Для просмотра HTML документа необходима специальная программа - браузер. Предполагается, что этот практикум выполняется с использованием Internet Explorer.
Для написания HTML документов достаточно простейшего текстового редактора, не добавляющего в текст никаких специальных символов. При работе в Windows наиболее простым вариантом является использование редактора Notepad (он же Блокнот в русских версиях
Windows).
Запуск редактора осуществляется через кнопку "Пуск"---
>"Стандартные"--->"Блокнот". Сохраните документ: "Файл"--->"Сохранить как" (расширение html). Двойной клик левой кнопкой мыши по файлу запустит браузер для просмотра HTML документа (пока он пустой). При создании HTMLдокументов можно переключаться между редактором и браузером (сохранения изменения в редакторе и обновляя изображение в браузере) до получения требуемого результата.
3
Дескрипторы
Разметка HTML документа осуществляется дескрипторами. В простейшем случае дескриптор представляет собой ключевое слово, заключенное в угловые скобки (знаки "меньше" и "больше"). Большинство дескрипторов образуют пары, как <HTML> и </HTML>, у закрывающего дескриптора ключевому слову предшествует наклонная черта (слэш), но есть и одиночные дескрипторы. В различной литературе дескрипторы еще называют тэгами и, иногда, флагами.
Структура HTML документа
HTML документ начинается дескриптором <HTML> и заканчивается дескриптором </HTML>.
Далее HTML документ делится на две части заголовок и тело. Границы заголовка определяются парой дескрипторов <HEAD> и </HEAD>, тело ограничивается парой дескрипторов <BODY> и </BODY>.
Заголовок содержит сведения для браузера и поисковых машин, необходимые для работы с документом. Мы ограничимся названием документа. Название документа заключается в дескрипторы
<TITLE>...</TITLE>.
Втеле HTML документа располагается текст, графика, гиперссылки
идругая информация, которую отображает браузер.
Обратите внимание, что вверху окна браузера появилось название документа «Лабораторная работа № 1», это результат действия дескриптора <TITLE>.
Одиночные дескрипторы
Большинство дескрипторов HTML парные такие как
<HTML>...</HTML>, <HEAD>...</HEAD> и т.д. Но есть и одиночные дескрипторы, такие, как, например, <BR> и <HR>.
Дескриптор <BR> нужен для принудительного перевода строки, а дескриптор <HR> рисует горизонтальную линию, сколько дескрипторов <HR>, столько и линий.
4
Атрибуты дескрипторов
Дескриптор, в простейшем случае, это ключевое слово, заключенное в угловые скобки. В общем случае, помимо ключевого слова дескриптор может содержать атрибуты. Так в дескрипторе <BODY> можно указать атрибуты, отвечающие за цвета фона и текста документа: BGCOLOR и TEXT. Значение атрибутов BGCOLOR и TEXT задаются как шестнадцатеричный код трехбайтного RGB цвета, например "7FFFD4" (аквамарин) или как имя в таблице цветов - "aquamarine".Таблицы цветов в конце документа.
ФОРМАТИРОВАНИЕ ТЕКСТА. ГРАФИКА В HTML.
5
Обычный HTML-документ обычно состоит написанных мелким шрифтом текстовых абзацев, предшествующих им более крупных заголовков графических изображений (картинок).
Текстовые абзацы
Для выделения абзацев в HTML документах служат дескрипторы <P>...</P>. В абзаце текст автоматически распределяется по строкам, поэтому заботиться о переносе строк не требуется. Для дескриптора <P> (так же, как и для заголовков) предусмотрен атрибут ALIGN:
∙ALIGN=LEFT выравнивает текст абзаца по левому краю;
∙ALIGN=RIGHT выравнивает текст абзаца по правому краю;
∙ALIGN=CENTER центрирует текст абзаца;
∙ALIGN=JUSTIFY выравнивает текст абзаца по ширине (по левому и правому краю). Если длина текста менее одной строки, то выравнивание аналогично ALIGN=LEFT.
Заголовки в HTML документах
В HTML документах предусмотрено 6 типов заголовков. Самый крупный определяется дескрипторами <H1>...</H1>, а самый мелкий дескрипторами <H6>...</H6>. Для каждого из дескриптора заголовка допускается атрибут выравнивания текста ALIGN, который может принимать следующие значения:
∙ALIGN=LEFT выравнивает заголовок по левому краю;
∙ALIGN=RIGHT выравнивает заголовок по правому краю;
∙ALIGN=CENTER располагает заголовок по центру;
∙ALIGN=JUSTIFY выравнивает заголовок по ширине текста, выравнивая его по левому и правому краю, если длина заголовка более одной строки. Если длина заголовка менее одной строки, то выравнивание аналогично
ALIGN=LEFT.
Если атрибут ALIGN не указывается, это равнозначно ALIGN=LEFT.
В тексты HTML документов можно включать комментарии, они служат для пояснений и не отображаются браузерами. Комментарии заключаются в дескрипторы <!— и--!>
P.S. Однако, как это ни прискорбно, атрибут "align" считается устаревшим и не рекомендуется к использованию. Центрирование осуществляется с помощью отступов marging таблиц CSS или иными методами, о которых будет сказано позже.
Дескрипторы форматирования
1. При помощи дескрипторов <B>...</B> можно выделять текст полужирным шрифтом;
6
2.Дескрипторы <I>...</I> определяют написание курсивом;
3.Посредством дескрипторов <U>...</U> можно подчеркнуть текст;
4.Использование дескрипторов <S>...</S> позволяет перечеркнуть
написанное;
Таблица основных тегов HTML-документа. Теги форматирования шрифта и абзаца
Назначен |
Вид тегов |
Примечание |
ие |
|
|
|
Общая структура документа HTML |
|
Тип документа |
<HTML></HTML> |
Начало и конец документа |
Имя документа |
<HEAD></HEAD> |
Не отображается броузером |
Заголовок |
<TITLE></TITLE> |
Содержимое строки заголовка |
|
|
окна броузера |
Тело документа |
<BODY></BODY> |
Содержимое WEB-страницы |
Структура содержания документа
Внутренние |
<H№> текст </H№> |
Где № – номер уровня |
заголовки |
|
заголовка (от 1 до 6). |
различного |
|
Например, <H1>…</H1> - |
уровня |
|
заголовок 1-го уровня. |
Заголовок с |
<H№ ALIGN=”LEFT| |
LEFT - по левому краю, |
выравниванием |
CENTER| RIGHT”> текст </H№> |
CENTER - по центру, |
|
|
RIGHT - по правому краю. |
Форматирование абзацев |
|
|
Создание абзаца |
<P> текст </P> |
Абзацы отделяются двойным |
(параграфа) |
|
межстрочным интервалом |
Перевод строки |
<BR> |
Одиночный тег |
внутри абзаца |
|
|
Выравнивание |
<P ALIGN=”LEFT”> текст |
LEFT - по левому краю |
абзаца |
</P> |
CENTER - по центру |
|
<P ALIGN= |
|
|
”CENTER”> текст </P> |
RIGHT - по правому краю |
|
<P ALIGN=”RIGHT”> |
JUSTIFY – по ширине |
|
текст</P> |
|
|
<P ALIGN=”JUSTIFY”> |
|
|
текст </P> |
|
Разделительная |
<HR SIZE=«?»> |
Одиночный тег. «?» - толщина |
горизонтальная |
|
линии в пикселях. Толщину |
линия между |
|
линии можно не указывать. |
абзацами |
|
|
Форматирование шрифта |
|
|
Жирный |
<B> текст </B> |
<B>Жирный</B> |
Курсив |
<I> текст </I> |
<I> Курсив </I> |
Подчеркнутый |
<U> текст </U> |
<U> Подчеркнутый </U> |
Перечеркнутый |
<S> текст </S> |
<S> Перечеркнутый</S> |
Увеличенный |
<BIG> текст </BIG > |
|
размер |
|
|
7
Уменьшенный |
<SMALL> текст </SMALL> |
<SUP> Верхний индекс |
|
размер |
|
||
Верхний индекс |
<SUP> текст </SUP> |
</SUP> |
|
Нижний индекс |
<SUB> текст </SUB> |
<SUB> Нижний индекс |
|
|
|
</SUB> |
|
Размер шрифта |
<FONT SIZE=«?»> текст |
?- значения от 1 до 7 или |
|
|
</FONT> |
относительное |
изменение |
|
|
(например, +2) |
|
Базовый размер |
<BASEFONT SIZE=«?»> |
Одиночный тег |
|
шрифта |
|
? – размер от 1 до 7; по |
|
|
|
умолчанию равен 3 и задается |
|
|
|
для всего документа в целом |
|
Гарнитура |
<FONT FASE=«название1, |
Текст оформляется |
первым, |
шрифта |
название2, …»> текст </FONT> |
установленным на компьютере |
|
|
|
шрифтом из списка названий |
|
Цвет шрифта |
<FONT COLOR=”$$$$$$”> |
Цвет задается либо ключевым |
|
|
текст |
словом, |
либо |
|
</FONT> |
шестнадцатеричным |
кодом с |
|
|
символом # |
|
|
|
RED – красный, #FF0000 – |
|
|
|
шестнадцатеричный код – |
|
|
|
красного цвета |
|
Вставка изображений
Одиночный тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Этот тег имеет единственный обязательный атрибут src (произошло от слова «source» -источник). Значением атрибута src является url-адрес изображения, который определяет адрес файла с картинкой. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> внутрь контейнера <a> </a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0" в тег <img>.
Фоновые изображения
Фоновое изображение заполняет собой все пространство элемента для которого оно задано. Так, указав в теге <body> атрибут background="fon.gif", рисунком fon.gif будет залито все окно браузера.
Задавая фоновый рисунок документа, не забывайте указывать также атрибут bgcolor="цвет фона". Это нужно в том случае, если у пользователя может быть отключена загрузка изображений и Вашего красивого фона он не увидит. Тогда браузер и будет использовать параметр bgcolor.
Встраивание изображений
В HTML изображения вставляются с помощью тега <img>.
Тег <img> — одиночный, что означает, что он содержит только атрибуты и не имеет закрывающего тега.
Синтаксис тега <img>
<img src="url" />
URL указывает на адрес ресурса, где хранится изображение, например:
8
<img src="./img/portret.jpg" alt="Это мой портрет"/>
Браузер вставляет изображение в то место, где встречается тег <img>.
Атрибуты тега <img>
Основные атрибуты изображения показаны в таблице.
|
Атрибут |
|
Описание |
|
|
|
|
|
|
|
|
|
|
|
|
|
align |
|
задает выравнивание рисунка и способ обтекания текстом |
|
|
|
|
|
∙ |
bottom — нижняя граница картинки выравнивается по |
|
|
|
|
окружающему тексту (по умолчанию) |
|
|
|
|
|
∙ |
left — по левому краю окна. Текст обтекает справа |
|
|
|
|
∙ |
middle — центр картинки по базовой линии текущей |
|
|
|
|
строки |
|
|
|
|
|
∙ |
right — по правому краю окна. Текст обтекает слева |
|
|
|
|
∙ |
top — верх картинки выравнивается по самому |
|
|
|
|
высокому элементу строки |
|
|
|
|
|
|
|
|
|
alt |
|
альтернативный текст |
|
|
|
|
|
|||
|
|
|
|
|
|
|
border |
|
толщина рамки |
|
|
|
|
|
|||
|
|
|
|
|
|
|
height/width |
|
задает высоту/ ширину рисунка |
|
|
|
|
|
|||
|
|
|
|
|
|
|
src |
|
URL графического файла, отображаемого на странице |
|
|
|
|
|
|||
|
|
|
|
|
|
|
hspace/vspace |
|
Горизонтальный/ вертикальный отступ от изображения до |
|
|
|
|
|
|||
|
|
|
окружающего контента. |
|
|
|
|
|
|
|
|
Атрибут alt
Атрибут alt используется для вставки альтернативного текста для изображения.
Этот текст определяется автором страницы: <img src="boat.gif" alt="Большая лодка">
Значение атрибута alt отображается вместо изображения, если браузер не может отобразить его. Вставка атрибута alt является стандартом, потому что он помогает узнать пользователям текстовых браузеров, какие изображения вставлены в страницу.
Размеры изображений
Любое изображение имеет размер, заданный в пикселах. При встраивании изображения на страницу, возможно, Вам понадобиться изменить (чаще уменьшить) размер исходной картинки.
Для этого у тега <img> существуют атрибуты width - ширина и height - высота. Они задаются в пикселах или в процентах (процент от ширины экрана) или в других единицах. Размеры графического изображения желательно всегда указывать явно.
9
При загрузке изображения браузер будет автоматически масштабировать |
|
вашу картинку к заданным параметрам ширины и высоты. Только имейте в виду, |
|
что неаккуратное задание параметров, может привести к изменению пропорций |
|
рисунка, а следовательно, к его искажению. |
|
Отделение изображения от текста |
|
vspace и hspace - соответственно вертикальный и горизонтальный отступы от |
|
внешней границы вокруг изображения. Отступы задаются в пикселах. |
|
Рамка вокруг изображения |
|
Атрибут border тега <img> позволяет заключить изображение в рамку, цвет |
|
которой совпадает с цветом текста на странице, а толщина задается в пикселях. По |
|
умолчанию рамка отсутствует. |
|
Размещение изображения на странице |
|
Если вы вставите изображение между двух параграфов, тогда браузер |
|
отобразит первый параграф, затем изображение и после него второй параграф. |
|
Для того, чтобы наши изображения выглядели так, как нам хочется их надо |
|
выровнять. И поможет нам в этом атрибут align. |
|
Рисунок по центру |
|
Код |
Результат |
<html> |
|
... |
|
<p>Paragraph 1</p> |
|
<img src="image/pic_center.gif" align="center" |
|
alt="Иллюстрация " height="186" width="156"> |
|
<p>Paragraph 2 </p> |
|
... |
|
</html> |
|
Обтекание рисунка текстом |
|
Код |
Результат |
<html> |
|
<head> |
|
<title>Рисунок в тексте</title> |
|
</head> |
|
<body> |
|
<p><img src="image/float_pic.giff" width="100" height="200" |
|
alt="Иллюстрация" align="left" vspace="5" hspace="5"> |
|
Paragraph ... bla-bla-bla</p></body> |
|
</html> |
|
Вы уже знаете, что у тега <img> есть |
атрибут align, который определяет |
выравнивание изображения. Этот атрибут задает, возле какого края окна будет |
|
располагаться рисунок, одновременно устанавливая и способ обтекания текста. |
|
Чтобы выровнять изображение по правому |
краю и задать обтекание слева, |
|
10 |