Часть 1. Основные тэги оформления текста документа и рисунков.

Лабораторная работа №4

ЯЗЫК ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ – HTML

Цель работы: создание html странички

Теоретические сведения

Язык, который используется для создания таких документов получил название HTML (Hyper Text Markup Language) – язык разметки гипертекстов, а программы для интерпретации HTML-файлов, формирования их в виде Web-страниц и отображения на экране компьютера пользователя называли Браузер (Browser).

Бурное развитие сети Интернет привело к появлению огромного числа Web-серверов, предназначенных для размещения и обслуживания Wed-сайтов (логически связанных групп Web-страниц), принадлежащих как частным лицам, так и организациям. А разработчики Браузеров, стремясь сделать Web-сайты более привлекательными и динамичными, постоянно модернизируют HTML. Поэтому один и тот же HTML-документ в разных Браузерах может выглядеть по-разному.

Стандартизацией языка HTML занимается организация, называемая World Wide Web Consortium (сокращенно - W3C), а среди разработчиков Браузеров лидирующие места занимают компании Netscape и Microsoft. В настоящее время последней спецификацией W3C является версия HTML 4.0, базовые конструкции которой рассматриваются далее.

Виды тэгов в HTML

HTML-документ представляет собой текстовый ASCII-файл, содержащий собственно текст, который должен быть отображен в окне Браузера, и команды разметки – HTML-тэги, определяющие внешний вид документа при его интерпретации в окне Браузера.

HTML-тэг записывается в угловых скобках (<>) и состоит из имени, за которым может следовать список атрибутов (для большинства тэгов необязательный). Имена и атрибуты представляют собой английские слова и аббревиатуры и почти всегда их смысл прозрачен. Записывать тэги можно в любом регистре - прописными или строчными буквами.

Тэги можно разделить на две большие группы.

Тэги одной группы, называемые контейнерами, воздействуют на часть документа, заключенную между ними. Они имеют два компонента: открывающий (начальный) и закрывающий (конечный). Закрывающий тэг имеет тоже название, что и открывающий, но перед его названием ставится косая черта (символ /). Между открывающим и закрывающим тэгами может располагаться текст или другие тэги.

Автономные (одиночные) тэги не имеют конечного компонента. Они вызывают однократное действие или при их интерпретации в отображаемый документ вставляется тот или иной объект. Например, тэг <IMG SRC="pict.gif">, вызывает вставку рисунка из файла pict.gif.

Тэги могут иметь уточняющие параметры – атрибуты. Атрибуты записываются внутри автономного тэга, а в контейнере только в открывающей части. В списке атрибуты отделяются друг от друга пробелами. Последовательность атрибутов не существенна. Значения атрибутов указываются после знака равенства в кавычках. Кавычки нужно ставить обязательно, если значение атрибута содержит пробелы.

Примеры тэгов с атрибутами:

<BODY BGCOLOR="LIGHTBLUE"> - задает светло-синий фон для документа,

<FONT SIZE=+2 COLOR=RED> текст </FONT> - парный тэг, дает указание Браузеру вывести заключенный в «контейнер» текст символами, увеличенными относительно базового размера (SIZE=+2) и красного цвета (COLOR=RED).

Тэги, определяющие структуру HTML-документа

HTML-документ заключается в тэги <HTML> и </HTML>. Между этими тэгами располагаются две секции: секция заголовка (между тэгами <HEAD> и </HEAD>) и секция тела документа (между тэгами <BODY> и </BODY>).

Секция заголовка содержит описание параметров, используемых при отображении документа, но не отображающихся непосредственно в окне обозревателя.

Секция тела документа содержит текст, предназначенный для отображения обозревателя и тэги, указывающие на способ форматирования текста, определяющие графическое оформление документа, задающие параметры гиперссылок и так далее. Например:

<HTML>

<HEAD>

<ТIТLE>Пример НТМL-документа</ТIТLE>

</HEAD>

<BODY>

Самый простой HTML-документ

</BODY>

</HTML>

Браузер отобразит это документ, выведя в своем окне строку текста: Самый простой HTML-документ, расположенную в секции тела документа. Благодаря наличию тэга <ТIТLE> в заголовке окна Браузера будет выведено не имя файла, а заголовок, обычно несущий смысловое содержание. В данном случае заголовок окна Браузера будет: Пример НТМL-документа.

Основные тэги HTML

Основные тэги языка HTML приведены в прил. 7.1.

Комментарии - текст комментария размещается в тэге <!-- ….текст комментария…. --> и не отображается в окне Браузера.

Символьные примитивы – конструкции, заменяющие служебные символы языка HTML (обычно начинаются с амперсанта – символа &):

пробел - &nbsp; символ меньше (<) - &lt; больше (>) - &gt;
равно (=) - &quot; амперсант (&) - &amp и другие.

Цвета текста и фон документа.

Цвет основного текста, цвет гиперссылок и фон документа описываются в начальном тэге тела документа <BODY > с помощью атрибутов.

Значение цвета можно задавать в одной из двух форм. Первая форма использует задание цвета в RGB – палитре (Red-Green-Blue). Код цвета указывается шестнадцатеричными числами, задающими интенсивность соответствующей составляющей (по два разряда). Например, ярко-красный имеет код – FF0000, ярко зеленый – 00FF00, черный цвет 000000, белый – FFFFFF. При задании цвета перед шестнадцатеричным числом ставится символ #.

Возможно задание цвета с помощью имен. Таблица основных цветов приведена в прил. 7.2. Каждому названию цвета соответствует определенная RGB – триада. Например, цвету navy - #000080.

Тэги форматирования текста

Для форматирования текста HTML-документа предусмотрены две группы тэгов, называемые логическими и физическими тэгами форматирования.

Тэги логической группы обозначают своими именами структурные группы текстовых фрагментов. Например, тэг <CODE> указывает на программный код, тэг <STRONG> - сильное выделение. Фрагменты с логическим форматированием Браузер отображает определенным образом в соответствии с его возможностями.

Тэги физического форматирования указывают Браузеру как отобразить текстовый фрагмент согласно предпочтению автора. Например, тэг <B> используется для отображения текста полужирным начертанием (что обычно соответствует логическому тэгу <STRONG>).

Современные Браузеры поддерживают и те, и другие тэги форматирования. Однако с выходом спецификации HTML 4.0, предпочтение отдается логическому форматированию, поскольку был провозглашен принцип отделения структуры документа от его представления.

Текст выводится в окне Браузера непрерывно слово за словом, при этом весь пробельный материал отображается как один пробел. Поэтому для перевода строки и вставки дополнительного пробельного интервала необходимо использовать специальные средства.

  • Символьный приметив &nbsp – один пробел.
  • Тэг <BR> (от английского break) – вставка новой строки.
  • Тэг <P> (от английского paragraph) – начинает абзац с новой строки, отделяя от предыдущего двойным межстрочным интервалом.
  • Текст, заключенный между тэгами <PRE> </PRE> (от английского preformatted), отображается так, как он был отформатирован предварительно, со всеми пробелами переносами строк.

Заголовки разных уровней.

Тэги вида <Hn> ….</Hn>оформляют заключенный в них текст в виде Заголовка n-уровня. Значения n могут изменяться от 1 (самый крупный) до 6 (самый мелкий). Так же, как и тэг абзаца <P>, тэг Заголовка прерывает текстовый поток и отделяет его пустой строкой.

Тэги <H1>, <H2>, <H6>могут иметь атрибут выравнивания ALIGN со значениями LEFT (по умолчанию), CENTER, RIGHT и JUSTIFY.

Списки

HTML позволяет создавать нумерованные и маркированные списки.

Фрагмент текста, представляющий список, заключается в тэги:

<OL> …. </OL>упорядоченный список (ordered list),

<UL> ….</UL> неупорядоченный список (unordered list),

<DL> ….</DL> список определений (definition list).

Каждый элемент списка заключается в тэги <LI> ….</LI>(от английского list item).

Тэг нумерованного списка может иметь параметр TYPE= , определяющий вид нумерации, и START= ,задающий начальное значение первого элемента списка (не зависимо от типа указывается цифрой).

TYPE=A – задает маркеры в виде прописных латинских букв;

TYPE=a – маркеры – строчные латинские буквы;

TYPE=I – маркеры в виде больших римских цифр;

TYPE=i – маркеры в виде маленьких римских цифр;

TYPE=1 – маркеры – арабские цифры (по умолчанию).

В тэгах маркированного списка параметр TYPE указывает тип маркера: закрашенные кружочки – disc, не закрашенные кружочки – circle, закрашенные квадратики – square.

Графические изображения.

Тэг <IMG> вставляет изображение в текстовый поток. Закрывающего компонента тэг не имеет.

Обязательным атрибутом его является SRC=url (адрес графического файла, может быть относительным или абсолютным). Для ускорения загрузки Web-страницы с рисунками рекомендуется в тэге рисунка указывать его размеры атрибутами HEIGHT и WIDTH. Это позволяет Браузеру еще до полной загрузки рисунка выполнить разметку экрана и загрузить текст.

Основные необязательные атрибуты приведены в табл. 7.1.

Таблица 7.1

Атрибут Назначение атрибута
ALT=текст Альтернативный текст, выводимый в режиме Браузера без загрузки изображений
BORDER= значение Толщина обрамляющей рамки в пикселях
HEIGHT= значение Высота изображения в пикселях или в процентах от высоты окна Браузера
WIDTH= значение Ширина изображения в пикселях или в процентах от ширины окна Браузера
HSPACE= значение Свободное пространство слева и справа от изображения в пикселях
VSPASE= значение Свободное пространство сверху и снизу от изображения в пикселях
ALIGN=значение Выравнивание изображения по горизонтали и по вертикали. Значения задаются атрибутами TOP, MIDDLE, BOTTOM. При применении этих значений вставленное изображение разрывает текстовый поток. Если заданы значения LEFT либо RIGHT, изображение будет соответствующим образом выровнено по горизонтали, а текст будет обтекать его.

Гиперссылки

Связь между HTML-документами и фрагментами документов организуется с помощью тэгов <A> …</A> (от английского anchor- якорь).

Тэг <A> употребляется в двух формах – для перехода на другой документ в его начала, или для перехода к поименованному фрагменту (якорю) того же или другого документа.

  • В первом случае обязательным атрибутом является
    HREF=url – адрес целевого документа.

Текст и изображения, размещенные между тэгами <A> …</A>, становятся активной зоной, чувствительной к щелчку мыши, который вызывает загрузку целевого документа. Текст гиперссылки выделяется подчеркиванием и цветом, указанным как значение атрибута LINK тэга BODY, либо цветом по умолчанию.

  • Во втором случае – при создании якоря (метки или закладки) фрагмента – обязателен атрибут NAME=#имя, где имя – идентификатор фрагмента (якоря).

Пример. Пусть в документе report.htm была определена закладка:
<A NAME=”CHEPTER2”> </A>.

Тогда гиперссылка на эту закладку из другого документа, находящегося в этом же каталоге, будет выглядеть следующим образом:
<A HREF="report.htm#CHEPTER2"> переход к Главе 2 </A>.

Таблицы.

Таблицы в HTML-документах используются не столько для того, чтобы располагать данные в обрамленных ячейках, сколько с целью позиционирования фрагментов текста и изображений друг относительно друга, создания многоколонного текста, обтекания рисунков и т.п.

Основные тэги таблиц:
<TABLE> …< /TABLE > - начало и окончание таблицы;

<TR> …</TR> - начало и окончание строки;

<TD> …</TD> - начало и окончание ячейки.

Ячейки таблицы могут содержать любые данные, допустимые в HTML-документе, в том числе и вложенные таблицы. Не следует оставлять ячейки таблицы незаполненными. Если по замыслу ячейка должна выглядеть пустой, следует расположить в ней хотя бы неразрывный пробел - &nbsp.

Для оформления таблиц могут быть использованы атрибуты, задаваемые в тэгах <TABLE>, <TR> и <TD>. Основные из них перечислены в прил. 1.

Приложение 1

Основные тэги языка HTML

Назначение Вид тэгов Примечание
Общая структура документа HTML
Тип документа <HTML></HTML> Начало и конец.
Имя документа <HEAD></HEAD> Не отображается Браузером.
Заголовок <TITLE></TITLE> Отображается в строке заголовка окна Браузера.
Тело <BODY></BODY>  
Комментарий <! --***--> Обозревателем игнорируется.
Структура содержания документа
Внутренние заголовки различного уровня <HN></HN> Где N – номер уровня заголовка (от 1 до 6–ти).
Заголовок с выравниванием <H? ALIGN=”left”></H?> Типы выравнивания: · left - по левому краю, · center - по центру, · right - по правому краю, · justify – по ширине.
Форматирование абзацев
Создание абзаца (параграфа) <P></P>  
Перевод строки внутри абзаца <BR> Одиночный тэг
Перенос <WBR>  
Выравнивание абзаца <P ALIGN=”left”></P> Типы выравнивания: left, right, center и - justify
Горизонтальная линия между абзацами <HR> Одиночный тэг
Атрибуты: толщина, длина линии, выравнивание <HR SIZE=? WIDTH=? ALIGN=”left”> Толщина указывается в пикселях, длина – в пикселях или %, выравнивание по умолчанию center
Форматирование шрифта
Логическое форматирование
Выделение текста курсивом - Полужирным - Как с клавиатуры -   <EM></EM> <STRONG> </STRONG> <KBD> </KBD> Фрагмент документа: Обычный текст <EM>Курсив </EM> <KBD>Моношириный</KBD>
Физическое форматирование <B> жирный</B> <S> подчеркнутый</S> X<SUP>2</SUP> - отобразится как X2 <I> курсив </I>
Курсив <I> </I>
Подчеркнутый <U> </U>
Перечеркнутый. <S> </S>
Моноширинный <TT> </TT>
Верхний индекс <SUP></SUP>
Нижний индекс <SUB></SUB>
Размер шрифта <FONT SIZE=?></FONT> От 1 до 7
Базовый размер шрифта (задается для всего документа в целом) <BASEFONT SIZE=?> От 1 до 7, по умолчанию равен 3
Список предпочтительных гарнитур шрифтов, через запятую <FONT FACE=”шр-т1,шр-т2”> <FONT FACE="Verdana,Arial">
Цвет шрифта (задается либо ключевым словом, либо шестнадцатеричным кодом) <FONT COLOR=”$$$$$$”> </FONT> Red –красный Blue – голубой #ff0000 – 16-тиричный код красного цвета в формате RGB
Создание списков
Упорядоченный <OL></OL> Фрагмент документа: <OL> <LI>Элемент списка 1</LI> <LI>Элемент списка 2</LI> <LI>Элемент списка 3</LI> </OL>  
Неупорядоченный <UL></UL>
Элемент списка <LI></LI>
Списки определений <DL></DL>
Определяемые термины <DT></DT>
Определения <DD></DD>
Таблица
Определить таблицу <TABLE></TABLE> <TABLE border=”1”> <TR> <TH>Товар</TH> <TH>Цена</TH> </TR> <TR> <TD>Радиотелефон </TD> <TD align=”center”> 2000 </TD> </TR> </TABLE>
Окантовка таблицы <TABLE BORDER=?></TABLE>
Строка таблицы <TR></TR>
Выравнивание <TR ALIGN=LEFT | RIGHT | CENTER | JUSTIFY >
Ячейка таблицы <TD></TD>
Выравнивание по горизонтали <TD ALIGN=LEFT | RIGHT | CENTER | JUSTIFY>
Ширина (в пикселях или в % к ширине окна) <TD WIDTH=?>
Заголовок столбцов или строк (полужирный) <TH></TH>
Вставка изображений
Вставка графического файла <IMG SRC=”URL” WIDHT=”?” HEIGHT=”?”> Фрагмент документа: <IMG SRC=”grafica.gif” WIDHT=”550” HEIGHT=”240” ALT=”Графический файл”>
Выравнивание текста <IMG SRC=”URL” ALIGN=”TOP”>
Вывод альтернативного текста <IMG SRC=”URL” ALT=”текст*”>
Вставка ссылок
Ссылки на другую страницу <A HREF=”URL”> текст </A> Фрагмент документа: <A HREF=”str2.htm”> Ссылка1</A> <A HREF=”URL”>текст</A> <A NAME=”metka1”></A> <A HREF=”index.htm#metka1”> На главную страницу</A>”
Ссылка на закладку в другом документе <A HREF=”URL#*”> текст</A>
На закладку в том же документе <A HREF=”#*”> текст</A>
Определить закладку <A NAME=”*”></A>
Цвет фона, текста и ссылок
Фоновая картинка <BODY BACKGROUND=”URL”> Фрагмент текста: <BODY BACKGROUND=”grafica.gif” TEXT=”black” (черный) LINK=”#FF0000” (красный) VLINK=”#FFFF00” (желтый) ALINK=”#FFFFFF”> (белый) ------------------------- </BODY>
Цвет фона <BODY BGCOLOR=”#$$$$$$”>
Цвет текста <BODY TEXT=”#$$$$$$”>
Цвет ссылки <BODY LINK=”#$$$$$$”>
Цвет пройденной ссылки <BODY VLINK=”#$$$$$$”>
Цвет активной ссылки <BODY ALINK=”#$$$$$$”>
                 

Приложение 2

Основные цвета

Color's name Название Red Green Blue
black черный
navy темно-синий
blue синий FF
green зеленый
teal сине-зеленый
lime ярко-зеленый FF
aqua голубой FF FF
maroon вишневый
purple фиолетовый
olive оливковый
gray темно-серый
silver светло-серый C0 C0 C0
red красный FF
fuchsia лиловый FF FF
yellow желтый FF FF
white белый FF FF FF

ОСНОВНЫЕ ТЕРМИНЫ

ASCII (American Standard Code for information Interchange – Американский стандартный код для обмена информацией) – семиразрядный код для представления текстовой информации.

Browser (Браузер) – программа для просмотра (интерпретации) гипертекстовых документов.

GIF (Graphics Interchange Format – формат обмена графикой) – используется для не многоцветных четких изображений, поддерживает прозрачные области и анимацию.

HTML (Hyper Text Markup Language) – язык разметки гипертекстов.

JPEG (Joint Photography Experts Group – объединенная группа экспертов по машиной обработке фотоизображений) – распространенный формат растровой графики, который идеально подходит для сканируемых фотографий.

Web-page (Web-страница) – электронный документ, предназначенный для размещения (размещенный) в Интернет.

Web-site (Web-сайт) – совокупность Web-страниц, связанных между собой темой, гиперссылками и близким расположением в Интернет.

Web server (Web-сервер) – сервер, предназначенный для размещения Web-сайтов в Интернет, и предоставляющий услуги по запросам клиентов.

ЗАДАНИЕ Тема: Подготовка простейшего гипертекстового документа средствами программы Блокнот

Часть 1. Основные тэги оформления текста документа и рисунков.

1. На рабочем диске создать свою папку, а в ней текстовый файл с наименованием first.htm

1.1. Запустить редактор Блокнот, ввести в него текст:
Приветствую Вас на моей первой web-страничке.

1.2. Сохранить файл в созданной папке. При сохранении, в окне диалога "сохранить как…" в строке "Тип файла:" выбрать вариант "Все файлы (*.*)" , а в строке "Имя файла" задать имя с расширением html или htm, например first.htm (где name - ваше имя).

1.3. Закрыть документ, найти его пиктограмму в окне Проводника.

1.4. Открыть файл непосредственно из окна Проводника. Проанализировать, с помощью какого приложения отображается файл и как выглядит введенная фраза.

1.5. Сделать выводы о том, что HTML-документ это всего лишь текст.

2. Ввести теги, определяющие структуру HTML-документа.

2.1. С помощью меню Браузера "Вид" - "В виде HTML" вызвать документ для его редактирования. Ввести приведенные ниже теги, в разделе Заголовка (TITLE) указать свою фамилию.

<HTML>

<HEAD> <TITLE> Фамилия - первый</TITLE>

</HEAD>

<BODY>

Приветствую Вас на моей первой Web-страничке.

</BODY>

</HTML>

2.2. Сохранить документ под тем же именем, "Обновить" его отображение в Браузере. Проанализировать произошедшие изменения в отображении документа.

3. Отредактировать документ.

3.1. Вызвать меню Браузера "Вид" - "Источник HTML"и добавить текст подписи, например,
Студент группы ХХ факультета YYY Имя Фамилия
Сохранить документ (не закрывать) и обновить его просмотр в Браузере.

3.2. Отредактировать документ так, чтобы подпись начиналась с новой строки - использовать тэг <BR>. Просмотреть в Браузере новый вариант.

3.3. Добавить перед подписью горизонтальную линию.

Внимание! После каждого изменения документ нужно сохранять, а просмотр в Браузере начинать с обновления загрузки документа с помощью кнопки "Обновить" на панели инструментов или нажатием клавиши F5.

4. Выполнить оформление текста стилем Заголовок.

4.1. Оформить первую строку документа стилем Заголовок-1 с помощью парного тэга <H1> …</H1>.

4.2. Оформить строку с подписью стилем Заголовок-3 и выровнять по правому краю.

4.3. Изменить стиль оформления первой строки на Заголовок-2 с выравниванием по центру, а подпись на Заголовок-4.

4.4. Просмотреть полученный документ в Браузере при различных размерах шрифта (меню «Вид»).

5. Выполнить оформление абзацев.

5.1. После заголовка ввести текст монолога Гамлета (английский и русский варианты).

To be, or not to be, that is the question:

Whether 'tis nobler in the mind to suffer

The slings and arrows of outrageous fortune,

Or to take arms against a sea of troubles,

And by opposing, end them...

Быть иль не быть - вот в чем вопрос.

Что благороднее: сносить удары

Наши рекомендации