Лабораторная работа№1,2

ЛАБОРАТОРНАЯ РАБОТА №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-документа. Теги форматирования шрифта и абзаца

Структура содержания документа

7

Вставка изображений

Одиночный тег <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>

Основные атрибуты изображения показаны в таблице.

Атрибут alt

Атрибут alt используется для вставки альтернативного текста для изображения.

Этот текст определяется автором страницы: <img src="boat.gif" alt="Большая лодка">

Значение атрибута alt отображается вместо изображения, если браузер не может отобразить его. Вставка атрибута alt является стандартом, потому что он помогает узнать пользователям текстовых браузеров, какие изображения вставлены в страницу.

Размеры изображений

Любое изображение имеет размер, заданный в пикселах. При встраивании изображения на страницу, возможно, Вам понадобиться изменить (чаще уменьшить) размер исходной картинки.

Для этого у тега <img> существуют атрибуты width - ширина и height - высота. Они задаются в пикселах или в процентах (процент от ширины экрана) или в других единицах. Размеры графического изображения желательно всегда указывать явно.

9