Веб-технологии и веб-дизайн
.pdfтекст документа согласно спецификации языка HTML (например, «<»). Комбинация задает неразрывный пробел.
Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить. Посмотрите на добавленный абзац. Убедитесь, что появился абзацный отступ. Можно ли рекомендовать такой метод создания абзацного отступа? Почему?
Метод предварительно отформатированного текста. Вернитесь к редактированию документа. Разместите после последнего абзаца горизонтальную линейку. Скопируйте эталонный абзац через буфер обмена, поместив копию ниже линейки. Добавьте в начало скопированного абзаца тег <PRE>, задающий предварительно отформатированный текст, и несколько пробелов. В конце абзаца добавьте тег </PRE>. Сохраните документ.
Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить. Посмотрите на добавленный абзац. Убедитесь, что появился абзацный отступ. Обратите внимание на способ обработки пробелов и символов конца строки в предварительно отформатированном тексте. В чем особенность используемого шрифта? Выскажите свое мнение об использовании этого метода создания абзацного отступа.
Метод невидимого изображения. Вернитесь к редактированию документа. Разместите после последнего абзаца горизонтальную линейку. Скопируйте эталонный абзац через буфер обмена, поместив копию ниже линейки. Добавьте в начало скопированного абзаца тег <IMG>, укажите используемый файл изображения и задайте отступ по горизонтали в 10 пикселей (HSPACE="10"). Файл изображения должен представлять собой картинку в формате GIF, состоящую из одного пикселя (1x1), заданного прозрачным цветом. Сохраните документ.
Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить. Посмотрите на добавленный абзац. Убедитесь, что появился абзацный отступ.
Проанализируйте все использованные методы и выскажите свое мнение о принципиальной целесообразности их использования и о том, какой из них наиболее удобен.
6.3 Структура отчета и требования к оформлению
1)задание;
2)текст документа;
3)скриншоты результатов.
6.4 Контрольные вопросы
1.Опишите структуру документа HTML.
2.Что такое элемент языка HTML?
3.Основные атрибуты элемента BODY.
4.Как задать заголовок документа HTML?
5.Какой из методов создания абзацного отступа является наиболее удобным?
61
Лабораторная работа № 7.
РАЗМЕТКА ТЕКСТОВОГО ДОКУМЕНТА ТЕГАМИ ЯЗЫКА HTML
Цель: овладеть навыками создания документов HTML в текстовом редакторе, изучить элементы языка HTML для форматирования документа, научиться создавать маркированные и нумерованные списки, получить практические навыки создания гипертекстовых ссылок на закладки документа HTML.
7.1 Основные теоретические положения и методика выполнения работы
7.1.1 Заголовки
Для обозначения заголовков текста в языке HTML существуют специальные элементы – H1, H2, H3, H4, H5 и H6 (номера определяют важность заголовка от 1 до 6). Для заголовков можно задать следующие свойства:
–align – выравнивание заголовка;
–title – текст подсказки (всплывает при наведение указателя). Например:
<HTML>
<HEAD>
<TITLE>Заголовки. Элемент FONT</TITLE>
</HEAD>
<BODY>
<H1 align=center> Заголовок H1 </H1> <H2 align=center> Заголовок H2 </H2> <H3 align=center> Заголовок H3 </H3> <H4 align=center> Заголовок H4 </H4> <H5 align=center> Заголовок H5 </H5> <H6 align=center> Заголовок H6 </H6>
</BODY>
</HTML>
7.1.2 Создание списков в документе HTML
Основное применение списков:
–нумерованные – для перечисления элементов, следующих в строго определенном порядке;
–маркированные – для перечисления элементов, следующих в произвольном порядке;
–многоуровневые – для конкретизации информации определенных элементов;
–список определений – используется для форматирования словарей.
Для создания нумерованных списков используются тэги <OL> и <LI>. Тэгом <OL> отмечается начало всего списка. Тэгом <LI> обозначают начало отдельного элемента списка. По умолчанию элементы списка нумеруются по порядку 1, 2, 3… При помощи атрибута TYPE можно изменить стиль нумерации (таблица 7.1).
62
Таблица 7.1 – Стили нумерации списка
Значение TYPE |
Стиль нумерации |
|
|
A |
A, B, C… |
|
|
a |
a, b, c… |
|
|
I |
I, II, III… |
|
|
i |
i, ii, iii… |
|
|
1 |
1. 2. 3… |
|
|
Если дополнить уже существующий список новыми значениями, то браузер автоматически пересчитает его. При помощи атрибутов START и VALUE можно изменить порядок нумерации списка.
Атрибут START – служит для задания начального номера списка, отличного
от 1.
Атрибут VALUE – дает возможность назначить произвольный номер любому элементу списка. Пример приведен на рис. 7.1.
HTML-код: |
Отображение в браузере: |
|
<ol> |
|
|
<li>элемент 1</li> |
1. |
элемент 1 |
<li>элемент 2</li> |
2. |
элемент 2 |
<li>элемент 3</li> |
3. |
элемент 3 |
</ol> |
|
|
<ol type="A"> |
|
|
<li>элемент 1</li> |
A. элемент 1 |
|
<li>элемент 2</li> |
B. элемент 2 |
|
<li>элемент 3</li> |
C. элемент 3 |
|
</ol> |
|
|
<ol start="5"> |
|
|
<li>элемент 1</li> |
|
|
<li value="9">элемент 2</li> |
5. |
элемент 1 |
<li>элемент 3</li> |
9. |
элемент 2 |
</ol> |
10.элемент 3 |
|
|
|
|
Рисунок 7.1 – Пример создания нумерованных списков
63
Для создания маркированных списков применяют тэги <UL> и <LI>. Тэгом <UL> отмечается начало всего списка. Тэгом <LI> обозначают начало отдельного элемента списка.
По умолчанию элементы списка маркируются черным кружочком. При помощи атрибута TYPE можно изменить стиль маркирования. В пределах одного списка можно использовать различную маркировку элементов списка. Пример приведен на рис. 7.2.
HTML-код: |
Отображение в браузере: |
||
<ul type="circle"> |
|
|
|
<li>элемент 1</li> |
o |
элемент 1 |
|
<li>элемент 2</li> |
o |
элемент 2 |
|
● |
элемент 3 |
||
<li type="disc">элемент 3</li> |
|||
▪ |
элемент 4 |
||
|
|||
<li type="square">элемент 4</li> |
|
|
|
</ul> |
|
|
|
|
|
|
|
Рисунок 7.2 – Пример создания маркированного списка
Для создания многоуровневых списков можно использовать как маркированные, так и нумерованные списки, а также их сочетание. Многоуровневый список получается путем вложения одного списка в тело другого. Главная задача при этом не запутаться. Для этого советую делать различные отступы для отдельных списков.
Для создания списков определений используют три тэга:
–<DL> – начало/конец списка;
–<DT> – начало/конец конкретного термина;
–<DD> – начало/конец поясняющей статьи термина.
Тэги <DT> и <DD> не обязательно чередовать. Т.е. можно «привязать» к одному определению несколько терминов и наоборот. Пример приведен на рис.
7.3.
HTML-код: |
Отображение в браузере: |
<dl> |
Термин 1 |
<dt>Термин 1</dt> |
Аннотация1 к термину 1 |
<dd>Аннотация1 к термину 1</dd> |
Аннотация2 к термину 1 |
<dd>Аннотация2 к термину 1</dd> |
|
</dl> |
|
|
|
Рисунок 7.3 – Пример создания списка определений
64
7.1.3 Гиперссылки и закладки
Ссылки это базовый элемент, без которого невозможно представить Интернет. Создать HTML ссылку очень просто. Для этого используется простенький элемент с одним атрибутом. Например:
<A HREF="http://www.zvirec.com">Это ссылка на сайт zvirec.com </A>
Элемент А (ancor) является как бы якорем, т.е. текст, заключенный между открывающим <A> и закрывающим </A> тегом, будет текстом ссылки. Атрибут HREF это сокращение от «hypertext reference/гипертекстовая ссылка», специфицирует место, на которое выполняется переход по данной ссылке – обычно это internet-адрес и/или имя файла.
Сделать HTML ссылку между страницами одного и того же веб-сайта гораздо проще. Например, если у нас есть две страницы (к примеру page1.html и page2.html), расположенные в одной папке, то код ссылки с page1 на page2 будет выглядеть так:
<A HREF="page2.htm"> Для перехода на page2 щелкни здесь! </A>
Т.е. надо просто написать название страницы, на которую мы хотим перейти. Eсли страница page2 находится в подпапке "subfolder", код ссылки выглядит
так:
<A HREF="subfolder/page2.htm">Для перехода на page2 щелкни здесь!
</A>
Так будет выглядеть код HTML ссылки со страницы page2 на page1 (в обратную сторону):
<A HREF="../page1.htm"> Для перехода на page1 щелкни здесь! </A>
Т.е. сочетание "../" указывает как бы на папку, расположенную на один уровень выше от данной позиции файла, с которого делается ссылка.
Бывают случаи, когда необходимо сделать ссылку с начала страницы в конец или наоборот, или к примеру с оглавления на главы и т.д. Необходимо пометить место документа следующей конструкцией:
<H2> <A NAME="razdel1"></A> Раздел1: </H2>
Теперь вы можете ссылаться на помеченную область (в данном случае Раздел1) простым указанием ее имени после значка #. Вот как будет выглядеть ссылка на Раздел1:
<A HREF="#razdel1"> Ссылка на Раздел 1 </A>
65
Более наглядный пример:
<h1> Оглавление </h1> <br>
<a href="#razdel1">Раздел 1: как стать богатым</a> <br> <a href="#razdel2">Раздел 2: как стать счастливым</a><br> <a href="#razdel3">Раздел 3: как быть здоровым</a>
<h2 id="razdel1">Раздел 1: как стать богатым </h2>
<p> Для того, чтобы стать богатым необходимо очень много трудиться
..... </p>
<h2 id="razdel2">Раздел 2: как стать счастливым </h2>
<p>Для того чтобы стать счастливым, нужно использовать каждую минуту...</p>
<h2>Раздел3:<a name="razdel3"></a> как быть здоровым</h2> <p>Для того чтобы быть здоровым нужно много заниматься физкультурой...</p>
Пример ссылки на е-mail сайта zvirec.com:
<A HREF="mailto:admin@zvirec.com">Написать письмо админу </A>
Как вы видите, используется MAILTO, потом двоеточие и адрес получателя. При нажатии на ссылку запустится почтовая программа-клиент с заполненным полем имени получателя.
7.2 Задание и порядок выполнения работы
Используя стандартные приемы форматирования текста с помощью HTMLтегов, оформить заданный текст в виде WEB-документа и выполнить разбиение текста на абзацы, выделить заголовки и подзаголовки, выполнить форматирование нумерованных и маркированных списков. Файл с текстом взять в соответствии со своим вариантом из таблицы 7.2.
Вначале каждого раздела и подраздела вставить именованные закладки. В конце каждого раздела и подраздела вставить гиперссылку, по которой можно вернуться в начало документа (к самой первой его строке).
Вначале документа под его заголовком создать содержание в виде гиперссылок на закладки этого же документа.
Создать заголовок HTML-документа, в котором указать:
– автора и авторские права;
– описание документа;
– ключевые слова;
– язык и кодировку документа.
Продемонстрировать работоспособность созданного документа.
66
Таблица 7.2 – Варианты заданий для форматирования текста
№№ |
|
|
|
Имя файла |
|
вариан- |
Тема документа |
||||
( \\next\vt\ОИТ\07\ ) |
|||||
тов |
|
|
|
||
|
|
|
|
||
1 |
|
2 |
|
3 |
|
1 |
Операционные системы |
|
Вариант 01.txt |
||
|
|
|
|||
2 |
Сетевые концепции и термины |
Вариант 02.txt |
|||
|
|
|
|||
3 |
Сетевое оборудование и топологии |
Вариант 03.txt |
|||
|
|
|
|
||
4 |
Адресация в ip-сети |
|
Вариант 04.txt |
||
|
|
|
|||
5 |
Обмен данными в ip-сети |
Вариант 05.txt |
|||
|
|
|
|
|
|
6 |
Транспортные |
и |
служебные |
Вариант 06.txt |
|
протоколы стека TCP/IP |
|
||||
|
|
|
|||
|
|
|
|
||
7 |
Безопасность в ip-сети |
|
Вариант 07.txt |
||
|
|
|
|
||
8 |
Назначение и функции |
|
Вариант 08.txt |
||
операционной системы |
|
||||
|
|
|
|||
|
|
|
|||
9 |
Архитектура операционной |
Вариант 09.txt |
|||
системы |
|
|
|||
|
|
|
|
||
|
|
|
|||
10 |
Планирование процессов и потоков |
Вариант 10.txt |
|||
|
|
|
|||
11 |
Управление оперативной памятью |
Вариант 11.txt |
|||
|
|
|
|||
12 |
Концепция виртуальной памяти |
Вариант 12.txt |
|||
|
|
|
|||
13 |
Управление виртуальной памятью |
Вариант 13.txt |
|||
|
|
|
|
||
14 |
Управление файлами |
|
Вариант 14.txt |
||
|
|
|
|||
15 |
Средства просмотра web |
Вариант 15.txt |
|||
|
|
|
|
||
16 |
Управление файлами |
|
Вариант 14.txt |
||
|
|
|
|||
17 |
Управление виртуальной памятью |
Вариант 13.txt |
|||
|
|
|
|||
18 |
Концепция виртуальной памяти |
Вариант 12.txt |
|||
|
|
|
|||
19 |
Управление оперативной памятью |
Вариант 11.txt |
|||
|
|
|
|||
20 |
Планирование процессов и потоков |
Вариант 10.txt |
|||
|
|
|
|||
21 |
Архитектура операционной |
Вариант 09.txt |
|||
системы |
|
|
|||
|
|
|
|
||
|
|
|
|
||
22 |
Назначение и функции |
|
Вариант 08.txt |
||
операционной системы |
|
||||
|
|
|
|||
|
|
|
|
|
|
|
|
|
67 |
|
|
Продолжение таблицы 7.2
1 |
|
2 |
|
3 |
23 |
Безопасность в ip-сети |
|
Вариант 07.txt |
|
|
|
|
|
|
24 |
Транспортные |
и |
служебные |
Вариант 06.txt |
протоколы стека TCP/IP |
|
|||
|
|
|
||
|
|
|
||
25 |
Обмен данными в ip-сети |
Вариант 05.txt |
||
|
|
|
|
|
26 |
Адресация в ip-сети |
|
Вариант 04.txt |
|
|
|
|
||
27 |
Сетевое оборудование и топологии |
Вариант 03.txt |
||
|
|
|
||
28 |
Сетевые концепции и термины |
Вариант 02.txt |
||
|
|
|
|
|
29 |
Операционные системы |
|
Вариант 01.txt |
|
|
|
|
||
30 |
Средства просмотра web |
Вариант 15.txt |
||
|
|
|
|
|
7.3 Структура отчета и требования к оформлению
1)индивидуальное задание;
2)текст документа;
3)скриншоты результатов.
7.4 Контрольные вопросы
1.Как обозначаются заголовки текста в документе HTML?
2.Выравнивание и подсказка заголовка текста.
3.Сколько уровней заголовков существует в HTML?
4.Какие бывают списки при форматировании текста?
5.Как создать маркированный список в HTML документе?
6.Виды маркеров в маркированном списке.
7.Нумерованные списки их форматирование в документе HTML.
8.Как создать многоуровневый список?
9.Использование списка определений для форматирования текста.
10.Что такое гиперссылка?
11.Правила задания адреса в гиперссылке.
12.Вставка именованной закладки в документ HTML.
13.Гиперссылка на раздел документа.
14.Гиперссылка на адрес электронной почты.
68
Лабораторная работа № 8.
ИСПОЛЬЗОВАНИЕ ТАБЛИЦ ДЛЯ ОФОРМЛЕНИЯ WEB-СТРАНИЦЫ
Цель: изучить основные элементы языка HTML для создания таблиц в документе, получить практические навыки создания таблиц с простым и сложным форматированием, научиться создавать оформление страницы с помощью таблиц в документе HTML.
8.1 Основные теоретические положения и методика выполнения работы
После введения таблиц в HTML у Web-мастеров появилось мощное средство дизайна для размещения в нужном месте экрана графических образов и текста.
8.1.1 Создание таблиц в HTML
Для описания таблиц используется тег <ТАВLЕ>. Тег <ТАВLЕ>, как и многие другие, автоматически переводит строку до и после таблицы.
Создание строки таблицы – тег <ТR>.
Тег <ТR> (Таble Row, строка таблицы) создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами <ТR></ТR>.
Определение ячеек таблицы – тег <ТD>.
Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD> </ТD>. Число тегов <ТD> </ТD> в строке определяет число ячеек. Например:
<HTML>
<BODY>
<H1 ALIGN=center>Таблица</H1> <CENTER>
<TABLE BORDER> <TR>
<TD COLSPAN=3>Если в таблице два тега TR, то в ней две строки.</TD>
</TR>
<TR>
<TD>Если в строке три тега TD,</TD> <TD>то в ней</TD>
<TD>три столбца.</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Заголовки столбцов таблицы – тег <ТН>.
Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН> </ТН> (Таblе Неаder, заголовок таблицы). Эти теги подобны <ТD> </ТD>.
69
Отличие состоит в том, что текст, заключенный между тегами <ТН> </ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD> </ТD> с тегом <В> и атрибутом <АLIGN=center>, текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью <ТН>. Например:
<HTML>
<BODY>
<TABLE BORDER> <TR>
<TH>Заголовок центрирован по умолчанию
</TH>
<TH COLSPAN=2>Заголовок может объединять столбцы</TH>
</TR>
<TR>
<TH>Заголовок может быть расположен перед столбцами</TH> <TD>Текст или данные</TD>
<TD>Текст или данные</TD>
</TR>
<TR>
<TH ROWSPAN=3>Заголовок может объединять строки</TH> <TD>Текст или данные</TD>
<TD>Текст или данные</TD>
</TR>
<TR>
<TD>Текст или данные</TD> <TD>Текст или данные</TD>
</TR>
<TR>
<TD>Текст или данные</TD> <TD>Текст или данные</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Использование заголовков таблицы – тег <САРТIОN>.
Тег <CAPTION> позволяет создавать заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо над (<САРТION АLIGN=top>), либо под таблицей (<САРТION ALIGN=bottom>). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы. Иногда тег <САРТION> используется для подписи под рисунком. Для этого достаточно описать таблицу без границ. Например:
<HTML>
<BODY>
<TABLE BORDER>
<CAPTION ALIGN=top>Заголовок над таблицей</CAPTION>
70