double arrow

ПЕРЕЧЕНЬ УСЛОВНЫХ ОБОЗНАЧЕНИЙ И СОКРАЩЕНИЙ

CSS (Cascading Style Sheets) – каскадные таблицы стилей

HTML – Hypertext Markup Language – язык разметки гипертекста.


1. ПРЕДСТАВЛЕНИЕ ТЕКСТОВЫХ ДОКУМЕНТОВ В ФОРМАТЕ HTML

1.1 Цель работы

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

1.2 Указания к организации самостоятельной работы студентов

Во время выполнения работы необходимо ознакомится с литературой [1 – 3], материалами конспекта лекций и информацией, приведенной в подразделе 1.4.

1.3 Описание программного продукта, используемого для выполнения лабораторной работы

Для выполнения лабораторной работы используется ПЭВМ, операционная система Windows 2007, Web-браузер Internet Explorer / Opera / Google Chrome, текстовый редактор.

1.4 Порядок выполнения работы и указания к ее выполнению

1.4.1 Рассмотрим некоторые основные теоретические положения, необходимые для выполнения данной лабораторной работы

Рассмотрим пример кода для задания заголовка и названия документа (рис. 1.1):

<HTML>

<Head> Заголовок документа <Title>Название документа в окне браузера

</Title> </Head>

</HTML>

Рисунок 1.1 – Окно браузера с заголовком и названием документа


Тег Head – определяет начало и конец заголовка документа. Является контейнером для элементов, содержащих техническую информацию о документе. (TITLE, BASE, STYLE, LINK, META).

Тег Title – элемент HTML-кода, который отвечает за те слова, которые появятся в заголовке веб-браузера.

Пример кода для того, чтобы заголовок документа был синего цвета, посредине страницы с размером первого уровня (< h1 > Заголовок первого уровня </ h1 >) рис. 1.2.

<HTML>

<Head> <H1 Align=Center> <font color=blue> Заголовок Документа </H1>

<Title> Название документа в окне браузера </Title>

</Head>

</HTML>

Рисунок 1.2 – Окно с заголовком документа

Тег < font> представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей. Атрибуты:

· color – устанавливает цвет текста;

· face – определяет гарнитуру шрифта;

· size – задает размер шрифта в условных единицах

Например, код в HTML 5 (рис. 1.3):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Название документа в окне браузера</title>

</head>

<body>

<p><font size="5" color="red" face="Arial">П</font> ервая буква этого предложения

написана шрифтом Arial, выделена красным цветом и увеличена в размерах.</p>

</body>

</html>

Рисунок 1.3 – Окно браузера с примером размера и цвета шрифта текста

Тег <p>…</p> создает новый абзац.

Тег <div>…</div> делит Веб-страницу на области с целью применения стилей.

Тег <BR>…</BR> – перенос строки.

Тег <BODY>…</BODY> – тело Веб-страницы, которое описывает ее содержимое.

Пример кода с заданием фона и границ документа (рис. 1.4):

<HTML>

<Head> <H1 Align=Center> <font color=blue> Заголовок Документа </H1>

<Title> Название документа в окне браузера </Title>

</Head>

<Body bgcolor="#CCCCCC" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0"> <font color=black> Текст документа </Body>

</HTML>

Рисунок 1.4 – Окно браузера с примером задания цвета фона

Рассмотрим атрибуты web-документа (табл. 1.1).

Таблица 1.1 – Атрибуты документа

Название Описание
alink, link, vlink Определяют цвет гиперссылок

Продолжение табл. 1.1

Название Описание
background Определяет графический фон
bgcolor Изменяет цвет фона
bgproperties Определяет возможность перемещения графического фона при пролистывании страницы
bottommargin Изменяет высоту нижнего поля
leftmargin Изменяет ширину левого поля
marginheight Изменяет высоту верхнего и нижнего полей
marginwidth Изменяет ширину левого и правого полей
rightmargin Изменяет ширину правого поля
text Изменяет цвет текста
topmargin Изменяет высоту верхнего поля

Пример кода для форматирования текста (рис. 1.5):

<HTML>

<Head> <H1 Align="Center"> <font color=blue> Заголовок Документа </H1>

<Title> Название документа в окне браузера </Title>

</Head>

<Body bgcolor="#CCCCCC" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0"> <font color=black> <H3 align=center>Текст документа </H3>

<p>MARGINHEIGHT - определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Netscape.</p>

<p>TOPMARGIN - определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer.</p>

<div> MARGINWIDTH - определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Netscape.

LEFTMARGIN - определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Internet Explorer.

BACKGROUND - определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG.

BGCOLOR - определяет цвет фона документа.</div>

<I><h5 align="right"> TEXT - определяет цвет текста в документе.</I></h5>

<p>LINK - определяет цвет гиперссылок в документе.</p>

<p>ALINK - определяет цвет подсветки гиперссылок в момент нажатия.</p>

<p>VLINK - определяет цвет гиперссылок на документы, которые вы уже просмотрели.</p>

<p>Значения атрибутов BGCOLOR, TEXT, LINK, ALINK и VLINK задаются либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.</p>

</Body>

</HTML>

Рисунок 1.5 – Пример форматирования текста

Рассмотрим пример написания ссылок.

Абсолютные ссылки могут быть слишком громоздкими и переставать работать, если перемещен младший (child) по иерархии документ.

Относительные ссылки легче вводить и обновлять, но и эта связь обрывается, если перемещён старший (parent) по иерархии документ. Оба вида связи могут нарушиться при переносе документа с одного компьютера на другой.

Тег <a>…</a> – является одним из важных элементов HTML и предназначен для создания ссылок.

Тег <base> – инструктирует браузер относительно полного базового адреса текущего документа.

Тег <nav> – группирует ссылки навигации по сайту.

Синтаксис для того, чтобы создать гипертекстовую связь:

<А HREF="адрес_pecypcа"> выделенный_текст_ссылки </А>,

Пример в HTML 5.

HTML5IECrOpSaFx

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>Тег А</title>

</head>

<body>

<p><a href="images/xxx.jpg">Посмотрите на мою фотографию!</a></p>

<p><a href="tip.html">Как сделать такое же фото?</a></p>

</body>

</html>

<!DOCTYPE HTML>

< html >

< head >

< meta charset="utf-8" >

< title > Тег А </ title >

</ head >

< body >

< p >< a href="images/xxx.jpg" > Посмотрите на мою фотографию! </ a ></ p >

< p >< a href="tip.html" > Как сделать такое же фото? </ a ></ p >

</ body >

</ html >

Приведем пример кода окна веб-странички со ссылкой на другой документ и с выводом на экран картинки по правому краю (рис. 1.6)

<HTML>

<Head> <H1 Align="Center"> <font color=blue> Заголовок Документа </H1>

<Title> Название документа в окне браузера </Title>

</Head>

<Body bgcolor="#CCCCCC" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0"> <font color=black> <H3 align=center>Текст документа </H3>

<p>MARGINHEIGHT - определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Netscape.</p>

<p>TOPMARGIN - определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer.</p>

<div> MARGINWIDTH - определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Netscape.

LEFTMARGIN - определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Internet Explorer.

BACKGROUND - определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG.

BGCOLOR - определяет цвет фона документа.</div>

<I><h5 align="right"> TEXT - определяет цвет текста в документе.</I></h5>

<p>LINK - определяет цвет гиперссылок в документе.</p>

<p>ALINK - определяет цвет подсветки гиперссылок в момент нажатия.</p>

<p>VLINK - определяет цвет гиперссылок на документы, которые вы уже просмотрели.</p>

<p>Значения атрибутов BGCOLOR, TEXT, LINK, ALINK и VLINK задаются либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.</p>

<A HREF="Document 1.html"> <A HREF="Document 2.html">Ссылка</A>

<p><IMG SRC="versal.jpg" Align="right"></p>

</Body>

</HTML>

Рисунок 1.6 – Окно браузера со ссылкой на другой документ и с выводом на экран картинки по правому краю

Пример кода для вывода на экран документа со следующими параметрами: ширина левого поля 100.pxl, высота верхнего поля 100.pxl, ширина правого поля 100.pxl, высота нижнего поля 300.pxl. Документ содержит изображение с размерами width="120" height="190" (рис. 1.7).

<HTML>

<Head>

<Title>...</Title>

</Head>

<Body leftmargin="100"

topmargin="100" rightmargin="100"

bottommargin="300">

<IMG SRC="notrdam1.gif" width="120"height="190" ></Body>

</HTML>

Рисунок 1.7 – Окно браузера с документом, содержащим изображение с размерами 120х190

Пример кода для гипертекстовой ссылки на изображение (рис. 1.8):

<A HREF="Document 1.html"><A HREF="Document 2.html"><H2 Align="left"> <font color="Maroon"> Адрес дворца </H2> </A> // при нажатии на «Адрес дворца», открывается Document 2

<A HREF="Document 1.html"><A HREF="Document 3.html"> <IMG SRC="versal.jpg" Align="left"></A>

Примечание. Document 3.htm был создан отдельно, в которое загружено изображение notrdam1 (рис. 1.7).

Рисунок 1.8 – Окно с примером гипертекстовой ссылки на изображение

1.4 Порядок выполнения работы

1. В текстовом редакторе "Блокнот" создать файл с именем contacts.html и, используя теги HTML, HEAD, TITLE и BODY, задать структуру HTML документа.

2. Определить и задать в созданном HTML-документе значения полей и цветовую схему сайта, удобную для восприятия пользователя:

· Левое поле

· Верхнее поле

· Цвет фона

· Цвет текста

· Цвет ссылок (обычных, активных, посещенных)

3. Используя теги заголовка H1 и H2 вывести в верхней части HTML-документа название сайта и название страницы соответственно, выравнивая их по центру.

4. С помощью тегов форматирования текста B, I, U, TT и FONT представить абзац с текстом приветствия пользователя, а также контактную информацию с обязательными полями: · Адрес · Телефон · Факс · E-mail · Сайт Названия полей обозначить при помощи списка определений DL и выделить их контрастным полужирным шрифтом (рис. 1.9).

5. Просмотреть результат в браузере.

6. Сделать выводы по работе.

1.5 Содержание отчета

1. Теория по созданию шаблона HTML-документа.

2. Таблица значений полей и цветовой схемы сайта согласно п.2.

3. Текст созданного HTML-документа.

4. Копия экрана с отображением созданного HTML-документа.

5. Выводы по работе.

Рисунок 1.9 - Форматирование текста страницы «Контакты»

1.6 Контрольные вопросы

1. Расшифровать аббревиатуру HTML.

2. Привести пример кода для гипертекстовой ссылки на изображение.

3. Описать предназначение тэгов: Head, Title, Body, Base, Nav, Font, P, Div.

4. Описать предназначение атрибутов: Background, Margin, Bgcolor, Text, Link, Alink и Vlink.

5. Чем отличаются: заголовок от названия документа?

6. Описать процесс описания полей нового Web-документа.

7. Описать базовый шаблон HTML-документа.

8. Каким образом происходит разделение текста Web-документа на абзацы?

9. Определение гипертекстовых ссылок.

10. Описать понятия абсолютные и относительные ссылки.


2 ТАБЛИЦЫ И ОСНОВНЫЕ ЭЛЕМЕНТЫ ФОРМ В HTML-ДОКУМЕНТЕ

2.1 Цель работы

Изучение основ построения таблиц в HTML-документе и их использование при задании структуры web-страниц.

2.2 Указания к организации самостоятельной работы студентов

Во время выполнения работы необходимо ознакомится с литературой [1 – 3], материалами конспекта лекций и информацией, приведенной в подразделе 2.4.

2.3 Описание программного продукта, используемого для выполнения лабораторной работы

Для выполнения лабораторной работы используется ПЭВМ, операционная система Windows 2007, Web-браузер Internet Explorer / Opera / Google Chrome, текстовый редактор.

2.4 Порядок выполнения работы и указания к ее выполнению

2.4.1 Рассмотрим некоторые основные теоретические положения, необходимые для выполнения данной лабораторной работы

Разберем пример синтаксиса для того, чтобы в документе слева на сером фоне под названием документа вывести ссылку, красным цветом (рис. 2.1).

<HTML>

<Head> <H1 Align="Center"> <font color="blue"> Харьковский национальный университет радиоэлектроники </H1>

<Title> Название документа в окне браузера </Title>

<Body bgcolor="#CCCCCC" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">

<A HREF="Laba 3.html"><A HREF="Document 2.html"><H2 align="left"><font color="#FF0000">Главная</A></H2>

<A HREF="Laba 3.html"><A HREF="Document 2.html"><H2 align="left"><font color="#FF0000">Информация для абитуриентов</A></H2>

<A HREF="Laba 3.html"><A HREF="Document 2.html"><H2 align="left"><font color="#FF0000">Перечень специальностей</A></H2>

<A HREF="Laba 3.html"><A HREF="Document 2.html"><H2 align="left"><font color="#FF0000">Контакты</A></H2>

</Body>

</HTML>

Рисунок 2.1 – Окно браузера с созданным web-документом

Создание таблиц в документе HTML.

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

Для создания таблицы служит тег <TABLE>. Как известно таблица состоит из строк, а строки, в свою очередь состоят из ячеек. Для определения строк служит тег <TR>, для создания ячеек – <TH>, <TD>.

Тег <TH> используется для создания ячеек с заголовками.

Тег <TD> – для обыкновенных ячеек с данными.

Пример создания таблиц (рис. 2.2).

Рисунок 2.2 – Окно с примером кода и созданной таблицы


Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



Сейчас читают про: