Следствием наличия специального тега, определяющего абзац, является тот факт, что обычного символа конца строки, вводимого по нажатию клавиши ENTER, для создания абзацного отступа недостаточно. Язык HTML рассматривает символы конца строки и пробелы особым образом. Любая последовательность, состоящая только из пробелов и символов конца строки, при отображении документа рассматривается как одиночный пробел. Это, в частности, означает, что символ конца строки даже не осуществляет перехода на новую строку (для этой цели используется текстовый элемент, задаваемый непарным тегом <BR>).
7. С помощью тега <font> можно изменить параметры шрифта. Для тега используются следующие параметры: face, size и color.
8. Параметр Face служит для задания гарнитуры шрифтов использующихся для текста. Названий шрифтов можно указать несколько, через запятую. В этом случае, если первый указанный шрифт не будет найден, будет использоваться следующий по списку.
Пример 3. Использование параметра face
<font face="Arial, Helvetica, sans-serif'>Текст будет написан шрифтом Arial.</font>
9. Size задает размер шрифта в условных единицах от 1 до 7. Средний размер, используемый по умолчанию принят 3. Размер шрифта можно указывать как абсолютной величиной (например, size=4), так и относительной (например, size=+1, size=-1). В последнем случае размер изменяется относительно базового.
10. Color определяет цвет текста, который можно задавать с помощью названий цветов или в шестнадцатеричном формате.
Пример 5. Изменение цвета текста
<font size=5 color=red face=Arial>П</font>ервая буква этого предложения будет написана шрифтом Arial, красным цветом и увеличенной.</font>
Первая буква этого предложения будет написана шрифтом Arial, красным цветом и увеличенной.
11. Видоизменение текста - средства его форматирования, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. В таблице перечислены основные теги, которые применяются для изменения оформления текст
Таблица 2.1-Теги, используемые для оформления текста
Код HTML
Описание
Пример
<b>Текст </b>
Жирный текст
Текст
<i>Текст</i>
Курсивное начертание текста
Текст
<u>Текст</u>
Подчеркнутый текст
Текст
<sup>Текст</sup>
Верхний индекс
e=mc2
<sub>Текст</sub>
Нижний индекс
H2O
<strike>Текст</strike>
Зачеркнутый текст
Текст
<pre>Текст</pre>
Текст пишется как есть, включая все пробелы
Текст
<em>Текст</em>
Курсивный текст
Текст
<strong>Текст</strong>
Жирный текст
Текст
Обычно для создания верхнего или нижнего индекса используется тег small, делающий индекс меньше по размеру основного шрифта.
12. Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому, правому краю, по центру или по ширине.
Таблица 2.2 – Теги, используемые для выравнивания текста
Код HTML
Описание
Пример
<p>Текст</p>
Добавляет новый параграф, по умолчанию выровненный по левому краю. Перед параграфом автоматически добавляется пустая строка.
Текст
<p align=left>Текст</p>
Выравнивание по левому краю.
Текст
<p align=right>Текст</p>
Выравнивание по правому краю.
Текст
<p align=center>Текст</p>
Выравнивание по центру.
Текст
<p align=justify>Текст</p>
Выравнивание по ширине.
Текст по ширине
13. Вставка изображений в html-страницы
Для встраивания изображения в документ используется тег IMG, имеющий единственный обязательный параметр src, который определяет адрес файла с картинкой.
Файл с рисунком, изображенным ниже, называется sample.gif и размещается в папке images корня сайта.
Для указания адреса изображения можно задавать как абсолютный, так и относительный адрес.
Пример 7. Вставка изображения в документ
<html>
<body>
<img src="http://www.htmlbook/images/sample.gif'> - это абсолютный адрес размещения изображения
<img src="/images/sample.gif''> - адрес размещения изображения относительно корня сайта
<img src="images/sample.gif''> - адрес размещения изображения относительно текущего HTML-документа
</body>
</html>
14.Выравнивание изображений
Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается параметром align тега IMG. В таблице перечислены возможные значение этого параметра и результат его использования.
Таблица 2.3 – Теги, используемые для выравнивания изображения в тесте
Код HTML
Описание
<img src="HLPBELL.GIF" align=texttop>
Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки.
<img src=HLPBELL.GIF align=top>
Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.
<img src=HLPBELL.GIF align=middle>
Выравнивание середины изображения по базовой линии текущей строки.
<img src=HLPBELL.GIF align=absmiddle>
Выравнивание середины изображения по средине текущей строки.
<img src=HLPBELL.GIF align=baseline>
Выравнивание изображения по базовой линии текущей строки.
<img src=HLPBELL.GIF align=bottom>
Выравнивание нижней границы изображения по окружающему тексту..
<img src=HLPBELL.GIF align=left>
Выравнивает изображение по левому краю окна.
<img src=HLPBELL.GIF align=right>
Выравнивает изображение по правому краю окна.
15. Наиболее популярные параметры - left и right, создающие обтекание текста вокруг изображения. Чтобы текст не прилегал плотно к рисунку, рекомендуется в теге IMG добавить параметр hspace и vspace, задающих расстояние до текста в пикселах.
Пример 8: Обтекание текста вокруг рисунка
<html>
<body>
<img src="HLPBELL.GIF" width=40 height=40 hspace=5 vspace=5 align=left>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrad exerci tution ullamcorper suscipit lobortis nisi ut aliquip ex ea commodo consequat.
</body>
</html>
Задание:
1. Оформите текст, как показано ниже:
Октябрь уж наступил,
Уж роща отряхает
Последние листы
С нагих своих ветвей.
Дохнул осенний хлад,
Дорога промерзает,
Журча, еще бежит
За мельницуручей
2.Выровняйте рисунки и текст так, как показано ниже:
Контрольные вопросы:1. Что такое HTML?2. Структура HTML-документ?3. Функциональные блочные элементы?4. Теги, используемые для выравнивания текста?5. Теги, для вставки изображения в html-страницу?6. Обтекание текста вокруг рисунка.
Лабораторная работа №2
Тема: Создание гипертекстовых ссылок
Цель работы: Освоение навыков создания гипертекстовых ссылок с помощью тега A, который имеет единственный параметр href. Изучение абсолютных и относительных ссылок.
Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега A, который имеет единственный параметр href. В качестве значения используется адрес документа (URL).
Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка.
Пример 1. Использование абсолютных ссылок
<html>
<body>
<a href=www.yandex.ru>Поисковая система Яндекс</a>
</body>
</html>
1. Относительные ссылки, как следует из их названия, построены относительно текущего документа или адреса. Примеры таких адресов:
1. /
2. /demo/
3. /images/pic.gif
4. ../help/me.html
5. manual/info.html
2. Первые две ссылки называются неполные и указывают веб-серверу загружать файл index.html (или default.html) находящемуся в корне сайта (пример 1) или папке demo (пример 2). Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге. Слэш перед адресом говорит о том, что адресация начинается от корня сайта, двоеточие - перейти на уровень выше в списке каталогов сайта.
Пример 2. Использование относительных ссылок
<html>
<body>
<a href=images/xxx.jpg>Посмотрите на мою фотографию !</a><br> <a href=tip.html>Как сделать такое же фото?</a> </body> </html>
3. Ссылки внутри страницы
Большие документы читаются лучше, если они имеют оглавление со ссылками на соответствующие разделы. Для создания ссылки следует вначале сделать закладку в соответствующем месте и дать ей имя при помощи параметра name тега А.
Пример 3. Создание внутренней ссылки
<html>
<body>
<a name=top></a> Друг уронил утюг в унитаз. И разбил его. Причем так разбил, что по назначению унитаз и использовать никак нельзя. Мгновением назад только что вот все было хорошо и вот уже дыра, да такая, что можно забыть, что есть такой предмет в доме. Махнул рукой нечаянно, а потом мучайся...
<a href=#top>Наверх</a>
</body>
</html>
4. Между тегами <a name=top> и </a> отсутствует текст, так как требуется лишь указать местоположение перехода по ссылке, находящейся внизу страницы. Имя ссылки на закладку начинается символом # , после чего идет название закладки. Название выбирается любое, соответствующее тематике.
5. Можно, также, делать ссылку на закладку, находящуюся в другой вебстранице и даже другом сайте. Для этого в адресе ссылки надлежит указать ее адрес и в конце добавить символ решетки # и имя закладки.
Пример 4. Ссылка на закладку из другой веб-страницы
<html>
<body>
<a href=text.html#bottom>Перейти к нижней части текста</а>
</body>
</html>
5. Ссылка на новое окно
Если требуется сделать ссылку на документ, который открывается в новом окне браузера, используется параметр target=_blank тега А.
6. Создание нового окна обычно требуется в случаях, когда делается ссылка на другой сайт, в остальном лучше открывать документы в текущем окне, поскольку обилие окон может сбить читателя с толку.
7. Так как ссылки на текущее или новое окно ничем не отличаются друг от друга, на некоторых сайтах рядом со ссылкой ставят специальную иконку, показывающую, что документ открывается в новом окне.
Пример 5. Создание ссылки на новое окно
<html>
<body>
<a href=www.bsu.edu.ra>ОбьIчная ссылка на сайт www.bsu.edu.ru</a><br> <a href=www.bsu.edu.ru target=_blank>Ссылка открывает новое окно на сайт www.bsu.edu.ru</a>
</body>
</html>
Обычная ссылка на сайт www.bsu.edu.ru Ссылка открывает новое окно на сайт www.bsu.edu.ru
Задание:
Используя внутренние ссылки, создать следующий словарь терминов:
Словарь терминов
АБВГДЕ
А
Авторизацияпользователей - процесс определения прав пользователя для доступа к различной информации, ресурсам, а также действия, которые может совершать пользователь.
Б
Баннером(от англ. banner — знамя) - рекламное изображение фиксированного размера, как правило, содержащее анимацию, которое выполняет роль гиперссылки на тот или иной ресурс Интернета.
Библиотечные каталог – это структурированная информация обо всех присутствующих в библиотеке книгах, т.е. полные библиографические данные книг, необходимые для их получения.
В
В начало
Г
В начало
Д
В начало
Контрольные вопросы:1. Что такое гиперссылка?2. Для чего необходима гиперссылка?3. Абсолютные и относительные гиперссылки.4. Создание гиперссылки в веб-документе.5. Тег для установки гиперссылки?6. Как создать ссылки на новое окно?
Лабораторная работа №3
Тема: Создание списков. Нумерованные списки
Цель работы: изучить принципы создания нумерованного и маркированного списка, изучения тега OL и результатов их применения.
Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от параметров тега OL, который и используется для создания списка. В качестве маркеров могут быть следующие значения: арабские цифры заглавные латинские буквы прописные латинские буквы заглавные римские цифры прописные римские цифры.
Ниже, в таблице приведены различные параметры тега OL и результат их применения.
Нумерованный список с параметрами по умолчанию:
1. текст
2. текст
3. текст
<ol start="5">
Нумерованный список начинающийся с пяти:
5. текст
6. текст
7. текст
<ol type="A">
Нумерованный список с заглавными буквами латинского алфавита:
A. текст
B. текст
C. текст
<ol type="a">
Нумерованный список с прописными буквами латинского алфавита:
a текст
b текст
c текст
<ol type="I">
Нумерованный список с римскими буквами:
I. текст
II. текст
III. текст
<ol type="i">
Нумерованный список с прописными римскими буквами:
i. текст
ii. текст
iii. текст
<ol type="1">
Нумерованный список с арабскими цифрами:
1. текст
2. текст
3. текст
<ol type="I" start="7">
Список с римскими цифрами начинающийся с семи:
IV. Текст
V. текст
VI. текст
1. Маркированные списки позволяют разбить большой текст на отдельные блоки. Тем самым привлекается внимание читателя к тексту и повышается его читабельность. С учетом худшего восприятия текста с экрана монитора, чем печатного варианта, это является весьма полезным приемом.
Для установки маркированного списка используется тег UL иLI (Пример 1)
Пример 1. Создание маркированного списка
<html>
<head>
<body>
Что следует учитывать при тестировании сайта:
<ul>
<li>работоспособность всех ссылок</li>
<li>поддержку разных браузеров</li>
<li>читабельность текста</li>
</ul>
</body>
</html>
Ниже показан результат примера 1.
Что следует учитывать при тестировании сайта:
• работоспособность всех ссылок
• поддержку разных браузеров
• читабельность текста
2. Обратите внимание, что у маркированного текста появляются отступы сверху и снизу. Чтобы от них избавиться, список можно делать без тега UL. При этом исчезнут и отступы текста перед маркерами.
Пример 2. Создание маркированного списка без отступов
<html>
<head>
<body>
Что следует учитывать при тестировании сайта:
<li>работоспособность всех ссылок</li>
<li>поддержку разных браузеров</li>
<li>читабельность текста</li>
</body>
</html>
Ниже показан результат примера 2.
Что следует учитывать при тестировании сайта:
• работоспособность всех ссылок
• поддержку разных браузеров
• читабельность текста
3. Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора типа маркера используется параметр type="... " тега UL. Вместо многоточия подставляется одно из трех значений указанных в таблице.
Таблица 4.2 – Параметры тега UL, используемые для создания маркированного списка
Код HTML
Пример
<ul type="disc">
Что следует учитывать при тестировании сайта:
• работоспособность всех ссылок
• поддержку разных браузеров
• читабельность текста
<ul type="circle">
Что следует учитывать при тестировании сайта:
□ работоспособность всех ссылок
□ поддержку разных браузеров
□ читабельность текста
<ul type="square">
Что следует учитывать при тестировании сайта:
■ работоспособность всех ссылок
■ поддержку разных браузеров
■ читабельность текста
4. С помощью CSS этот список можно расширить и вместо встроенных символов использовать в качестве маркера рисунок.
Задание:Создать маркированный текст.
Контрольные вопросы:1. Нумерованный список?2. Установка маркированного списка.3. Тег для установки списка?4. Параметры тега UL, используемые для создания маркированного списка.
Лабораторная работа № 4
Тема: Создание таблиц
Цель работы: Изучить принципы построения таблиц. Научиться создавать простые и сложные таблицы.
Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений.
Для добавления таблицы на веб-страницу используется тег-контейнер TABLE. Таблица должна содержать хотя бы одну строку и колонку.
Для добавления строк используются теги <tr> и </tr>. Чтобы разделить строки на колонки применяются теги <td> и </td>.
Параметры таблицы
Для изменения вида и свойств таблицы используется множество параметров, которые добавляются в теге TABLE.
<table параметр1=... параметр2=...>
Таблица 5.1 - Описание параметров таблицы и их свойств
Свойство
Значение
Описание
Пример
align=
Left
Right
Center
Выравнивание таблицы
align=center
background=
URL
Фоновый рисунок
background=pic.gif
bgcolor=
#rrggbb
Цвет фона таблицы
bgcolor=#FF9900
border=
n
Толщина рамки в пикселах
border=2
bordercolor=
#rrggbb
Цвет рамки
border-
color=#333333
bordercol-ordark=
#rrggbb
Тень рамки
bordercol-ordark=#f0f0f0
cellpadding=
n
Расстояние между ячейкой и ее содержимым
cellpadding=7
cellspacing=
n
Дистанция между ячейками
cellspacing=3
nowrap
Запрещает переносы строк в тексте
<table nowrap>
frame=
Void
Above
Below
Lhs
Rhs
Hsides
Vsides
Box
Задание типа рамки таблицы
frame=hsides
valign=
Top Bottom
Выравнивание по высоте
valign=top
width=
n
n%
Минимальная ширина таблицы, можно задавать в пикселах или процентах
width=90%
height
n
n%
Минимальная высота таблицы, можно задавать в пикселах или процентах
height=18
Примечание
1. Таблица, если не указано особо, всегда выравнивается по левому краю;
2. Параметр background, отвечающий за рисунок фона, своеобразно понимается в разных браузерах. IE вставляет картинку во всю таблицу, если таблица по размеру больше фонового рисунка, он повторяется по горизонтали или вертикали. Netscape добавляет фоновое изображение в каждую ячейку таблицы;
3. По умолчанию, таблица выводится без рамки. Однако Netscape добавляет тонкую линию между ячеек. Чтобы ее не было, всегда указывайте параметр border=0;
4. Если ширина таблицы не указана, она подгоняется под содержание ячеек.
Пример 1:Создание таблицы
<HTML>
<HEAD>
<TITLE>ТАБЛИЦА</ТIТLE>
</HEAD>
<BODY>
<TABLE border="2" align=center>
<TR>
<TD colspan=2 align=center>
<B>Заголовок Таблицы.</В>
</TD>
</TR>
<TR>
<TD align="center">
Первая ячейка первой строки
</TD>
<TD align="center">
Вторая ячейка первой строки
</TD>
</TR>
<TR>
<TD align="center">
Первая ячейка второй строки
</TD>
<TD align="center">
Вторая ячейка второй
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Тег <TABLE> задает таблицу
1. Атрибуты border="2" и align=center задают, соответственно, размер границ таблицы и выравнивание ее по центру страницы Тег <TR> задает строку таблицы Тег <TD> задает ячейку таблицы
2. Атрибут colspan=n объединяет n ячеек по горизонтали (по столбцам) В результате получится следующая таблица, состоящая из двух столбцов и двух строк:
Заголовок Таблицы.
Первая ячейка первой строки
Вторая ячейка первой строки
Первая ячейка второй строки
Вторая ячейка второй
Пример 2. Сложная таблица
<HTML>
<HEAD>
<TITLE>СЛОЖНАЯ ТАБЛИЦА</TITLE>
</HEAD>
<BODY>
<TABLE border="1" width="75%" align=center>
<TR>
<TD width="66%" colspan="2">
<P align="center">
Две ячейки, объединенные по горизонтали
</TD >
</TR > <TR >
<TD width="33%" rowspan="2" valign="middle" >
Две ячейки, объединенные по вертикали
</TD >
<TD width="33%">
по левому краю
</TD>
</TR>
<TR>
<TD width="33%">
<P align="right" >
по правому краю
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Атрибут colspan=n объединяет n ячеек по горизонтали (по столбцам)
Атрибут rowspan=n объединяет n ячеек по вертикали (по строкам)
Атрибут valign="middle" выравнивает текст в ячейке по центру ячейки по вертикали
<TD ROWSPAN="3">А это три ячейки третьего столбца объединились в одну большую</TD>
</TR>
<TR>
<TD COLSPAN="2">Это единственная ячейка второй строки, объединяющая оба столбца</TD>
</TR>
<TR>
<TD> Это первая ячейка третьей строки</TD>
<TD WIDTH="33%">А это вторая ячейка третьей строки</TD >
</TR>
</TBODY>
<TFOOT BGCOLOR="Yellow">
<TR>
<TD COLSPAN="3" ALIGN="center">
<SMALL>конец</SMALL></TD></TR>
</TFOOT>
</TABLE>
</BODY>
</HTML>
Атрибут CELLSPACING="6" задает свободное пространство между ячейками таблицы
Атрибут CELLPADDING="20" задает свободное пространство между данными в ячейке и ее границами
Атрибут BORDERCOLORLIGHT="Lime" задает цвет левого и верхнего углов таблицы
Атрибут BORDERCOLORDARK="Green" задает цвет правого и нижнего углов таблицы
Атрибут BGCOLOR="#DFFFDF" задает цвет фона таблицы
В результате получается следующая таблица:
Задание:
Создать турнирную таблицу, представленную ниже на рисунке.
Для задания кавычек используйте специальные символы « ("«") и » ("»"), для создания длинного тире используйте специальный символ — ("—").
Рисунок 5.1 -Пример таблицы
Контрольные вопросы:1. Для чего необходима таблица в веб-документе?2. Элементы таблицы?3. Параметры таблицы?4. Простые и сложные таблицы.5. Параметры тега TABLE?
Лабораторная работа №5
Тема: Создание фреймов
Цель работы: Изучить принципы создания фреймов, тег FRAMESET, необходимый для его использования.
Фреймы - это окна независимого просмотра HTML-документов. Иногда бывает очень удобно использовать навигацию по странице в виде меню, оформленного в отдельном фрейме, и основного окна, где будет представлена вся основная информация, определяемая действиями пользователя в области меню.
Для создания фрейма используется тег FRAMESET, который заменяет тег BODY в документе и используется для разделения экрана на области. Внутри данного тега находятся теги FRAME, которые указывают на HTML-документ, предназначенный для загрузки в область.
1. В приведенном примере присутствует объявление двух фреймов, которые будут располагаться вертикальными полосами и занимать соответственно 30 и 70 процентов рабочей области. Вертикальное расположение устанавливается параметром cols="...", а для горизонтальных полос используют параметр rows="...". Параметр border="..." определяет границу между фреймами. Определение документа, изначально загружаемого при открытии этого файла (этот документ является HTML-страницей.), задается атрибутом тега <FRAME> src="...", при этом необходимо указать параметр name="...", позволяющий задать "имя" созданной области в виде последовательности латинских букв и цифр, использованной как значение этого атрибута. Это имя можно использовать, чтобы загружать новые документы в ранее созданную область. Для этого в тег <A>, определяющий гиперссылку, необходимо добавить атрибут target="." , значение которого совпадает с ранее определенным именем области. При переходе по данной гиперссылке новый документ загрузится в указанный фрейм. Например, предположим, что начальная страница Web-узла состоит из двух фреймов: слева располагается навигационная панель, а справа -текущая страница. Если правой области присвоено имя, используемое во всех ссылках, имеющихся в левой области, то щелчок на любой ссылке навигационной панели приведет к обновлению информации в соседней области, оставляя навигационную панель без изменений. В данном документе находятся только ссылки на другие (существующие) HTML-документы, которые будут загружены броузером при открытии страницы с фреймами. Файл menu.html имеет следующую структуру:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<H1>Первый фрейм</H1>
</BODY>
</HTML>
Файл main.html также имеет указанную выше структуру. Следует сказать, что оба этих файла должны располагаться в том же каталоге, где расположен файл с фреймами.
Задание:
Расположить эти фреймы по вертикали, используя атрибут rows="...'\ В результате у вас должно получиться следующее:
Рисунок 6.1 – Пример окна с двумя фреймами
2. Распространенное явление – комбинация вертикальных и горизонтальных фреймов.
<FRAMESET cols="*, 55%"> символ * означает все оставшееся место <FRAME src="homepage.htm" name="Frame1">
Используя вложенные теги FRAMESET, разбейте страницу следующим образом:
Рисунок 6.2 – Пример окна с четырмя фреймами
3. Используя атрибут target="...", сделать в фреймах гиперссылки, по нажатию на которые в эти же или в другие фреймы произойдет загрузка других страниц.
Контрольные вопросы:1. Что такое фрейм?2. Для чего необходим фрейм?3. Тег для построения фреймов?4. Вертикальные и горизонтальные фреймы.
Контрольные вопросы:1. Нумерованный список?2. Установка маркированного списка.3. Тег для установки списка?4. Параметры тега UL, используемые для создания маркированного списка. 
