Форматирование абзацев, заголовков

ЗАДАНИЕ. Создадим абзацы-заголовки и простые абзацы.

Откройте документ 1.htm в Блокноте. Между тегами <body>..</body> введите:

<html> <head> <title> Пример 4 </title></head> <body> <H1> Заголовок 1 уровня </H1> <H2> Заголовок 2 уровня </H2> <H3> Заголовок 3 уровня </H3> <H6> Заголовок 6 уровня </H6> <HR> <p> Отдельный абзац текста </p> <p> Ещё один абзац текста </p> </body> </html>

Сохраните документ (Файл /Сохранить как) под именем заголовки.htm.

Запустите программу Internet Explorer и откройте там файл заголовки.htm

Установите соответствие между элементами html-кода(что ввели в Блокноте) и фрагментами web-страницы (в окне браузера):

тег <HR> отобразился как горизонтальная линия,

тэги вида <Hi> (где i - цифра от 1 до 6) задают заголовки разных уровней. Заголовок 1^го уровня - самый крупный, 6^го уровня - самый мелкий.

Создание гиперссылок

Главная особенность гипертекста – он позволяет посредством ссылок (links) связывать документы, т.е. делать ссылки из одного документа на другие.

Это можно сделать, т.к. каждый документ сети имеет свой уникальный адрес (URL - Uniform Resource Locator), состоящий из адреса компьютера-сервера, на котором он находиться и пути к документу на этом сервере. Кроме полного URL часто используется частичный URL (просто название файла), он не содержит название сервера, потому что указывает на документ, находящийся на том же сервере, что и документ, из которого сделана ссылка

Ссылки могут назначаться и на текст, и на рисунок. Зная URL документа или рисунка можно сделать на него ссылку, используя запись:

<A href="URL">...</A> Примеры:

<Ahref="http://ftep.debryansk.ru/fakultet/facult.html">Ссылка на факультет БГУ</A>

<A href="page2.html">Ссылка на 2ю страницу </A>

ЗАДАНИЕ. Создадим на странице гиперссылку на другую страницу.

Откройте 1.htm в Блокноте. Между <body>..</body> всё удалите и введите:

<html> <head> <title>Пример 5</title> </head> <body> Текст до ссылки. <A href="1.htm">Это ссылка</A> Текст после ссылки </body> </html>

Сохраните документ под именем ссылка.htm

Откройте файл ссылка.htm в программе Internet Explorer . Убедитесь: текст между тегами <А> и </А> выделен как ссылка (цветом, подчеркиванием).

Щелкните по ссылке - загрузится документ, на который указывает ссылка.

Щелкните на кнопке Назад (вверху, на панели инструментов), чтоб вернуться к предыдущей странице. Убедитесь: ссылка теперь считается просмотренной и отображается другим цветом.

Ссылка может указывать как на другой документ, так и на конкретную часть внутри другого документа. Для этого: 1) данной части документа (тексту или рисунку) должно быть присвоено имя. Для этого используют запись:

<A name="имя">Текст </A> или

2) Чтоб сделать ссылку на конкретную часть документа, записывают:

<A href="URL документа#имя"> Текст, за которым закреплена ссылка </A>

<A href="URL документа"> <img src="URL рисунка"> </A>,

Если нужно сделать ссылку на конкретную часть документа, который вы просматриваете в данный момент, то используется команда:

Форматирование шрифта

ЗАДАНИЕ. Настроим различные параметры шрифта.

Откройте 1.htm в Блокноте. Между <body>..</body> всё удалите и введите:

<html> <head> <title>Пример 6 </title> </head> <body> <base font size="5"color="brown"> <p>Шрифт по умолчанию коричневый</p> <font size="-2" face="arial" color="green"> <p>Шрифт зеленый</p> </font> <p> <B>Полужирный.</B> <I>Курсив.</I> <U>Подчеркнутый.</U> <S>Вычеркивание.</S> <sub>Нижний индекс.</sub> <sup>Верхний индекс.</sup> <p> <p> <em>Выделение. <strong>Сильное выделение. <code>Текст программы. <kbd>Клавиатурный ввод. </body> </html>

-Сохраните документ под именем шрифт.htm.

- Откройте в браузере Internet Explorer файл шрифт.htm

- Установите, как настраивают шрифт применённые тэги. Поясним:

<basefont> – этот тэг задаёт шрифт по умолчанию, причем увеличенный шрифт. После тега указывают атрибуты шрифта по умолчанию:

size- задаёт размер шрифта по умолчанию (например, size="5")

color - задаёт цвет шрифта (например, коричневый color="brown").

<font>..</font> - заключенный между этими тэгами шрифт приобретает параметры (размер, гарнитуру, цвет), указанные после тега <font> атрибутами:

size- размер шрифта (например size="-2"), face- гарнитура шрифта (например face="arial"), color - цвет шрифта (напр., зеленый color="green").

Начертание шрифта задают парные теги: <В>..</В> - полужирный шрифт, <I>..</I> – курсив, <U>..</U> – подчеркивание, <S>..<S> – вычеркивание, <sub>..</sub> – нижний индекс, <sup>..</sup> – верхний индекс.

Оформление шрифта задают теги:
<еm> (выделение), <strong> (сильное выделение), <code> (текст программы), <kbd> (клавиатурный ввод), <samp> (пример вывода).

Браузер при выводе html-файла на экран преобразует его текст – игнорирует лишние пробелы, символы конца строки. Но если хотите, чтоб на экране текст выглядел так, как вы его ввели в html-документ, используйте тэг предварительного форматирования<pre> (текст должен находиться между тэгами <pre>.. </pre>). С помощью него удобно делать и таблицы.

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

ЗАДАНИЕ. Вставка рисунка и изменение его расположения на странице

1. Откройте Photoshop, создайте новый рисунок (Файл /Новый), размер 90´90 пикс.

Потом залейте рисунок фоновым цветом (например, зеленым). Кистью нанесите на фон любой рисунок. Сохраните рисунок под именем рис1.gif.

2. Откройте 1.htm в Блокноте. Между <body>..</body> всё удалите и:

Введите 4-5 строк текста (можно 4-5 строк любых букв с пробелами).

Щелкните в начало текста, введите тег <img src="рис1.gif" align="bottom">

Сохраните документ под именем рисунок.htm

3. Откройте в браузере Internet Explorer файл рисунок.htm.
Заметьте, как сейчас рисунок расположен относительно текста?

4. Вернитесь в Блокнот и измените значение атрибута align="top".
Сохраните файл под тем же именем. Вернитесь в Internet Explorer и щелкните Обновить. Как изменилось расположение рисунка с атрибутом"top"?

5. Вернитесь в Блокнот и измените значение атрибута align="right".
Сохраните файл под тем же именем. Вернитесь в Internet Explorer и щелкните Обновить. Как изменилось расположение рисунка с атрибутом "right"?

6. Вернитесь в Блокнот и добавьте в тег <img> (в конец записи) атрибуты
hspace=40 vspace=20. Сохраните файл под тем же именем.

В Internet Explorer щелкните Обновить. Как изменилось положение рисунка?

ВЫВОД: тэг для вставки рисунка в текст – <img src="рис.ext">.

Если точка вставки находится за пределами абзаца (рисунок стоит на строке один, без текста), то этот тэг ещё окружается тэгами абзаца <p>..</p>

Для настройки рисунка тэг может иметь атрибуты:

а) Для задания выравнивания рисунка (Align) к тэгу вставки рисунка добавляют атрибут выравниванияalign=.. После знака = указывают значение, как выровнять рисунок (по низу строки - bottom,по верху абзаца - top,справа от абзаца - rightили слева - left).Так, тэг для рисунка, выровненного по левому краю страницы, таков:<img src="makaka. gif" align=left>

(подробнее с примерами – см. в Главе 6).

б) Для задания обводки рисунка рамкой (Border) толщиной в n пикселей к тэгу добавится атрибут border=n. Например, тэг для рисунка c рамкой толщиной 3 пикселя, таков:<img src="makaka. gif" border=3>

в) Для вставки сверху и снизу от рисунка свободного пространства шириной в n пикселей к тэгу добавится атрибутvspace=n. Например:
<img src="makaka. gif" vspace=5>

Аналогично, для вставки слева и справа от рисунка свободного пространства шириной в n пикселей к тэгу добавится атрибут hspace=n.

г) Для задания ширины рисунка в n пикселей к тэгу добавится атрибут width=n. Например, <img src="makaka. gif"width=30> Аналогично, для задания высоты рисунка в n пикселей к тэгу добавится атрибут height=n.

д) Для добавления комментария к рисунку к тэгу добавится атрибут alt="комментарий". Пример: <img src="makaka. gif" alt="obezjana">

Зачем? Рисунки занимают большой объем памяти (в сравнении с текстом), поэтому их пересылка по сети занимает больше времени. Пользователь может отказаться от их просмотра, ведь часто рисунки просто оформляют web-страницы (а некоторые программы просмотра html-документов работают в текстовом режиме, не могут отображать графику). Тогда программы просто отмечают словом-комментарием (или иконкой) те места в документах, где должна находиться графика.

Создание списков

ЗАДАНИЕ. Создадим 3 списка: нумерованный, маркированный, определений

1. Откройте 1.htm в Блокноте. Между <body>..</body> всё удалите и вставьте:

Вставьте тег <OL type="1">, он начинает нумерованный список.

Вставьте элементы списка, предваряя каждый тегом <LI>.

Завершите список тегом </OL>.

<html> <head> <title>Пример 7</title> </head> <body> <OL type="1"> <LI>Диван <LI>Кровать <LI>Тумба <LI>Сервант </OL> </body> </html>

Сохраните документ под именем list.htm. Откройте его в Internet Explorer.

Посмотрите, как нумерованный список отображается в браузере, какова нумерация, заданная атрибутомtype=.

Вообще атрибутом type (тэга <OL>) можно задать такие способы нумерации:

TYPE=1 – арабские цифры; TYPE=A – прописные буквы;

TYPE=a – строчные буквы; TYPE=i – римские цифры.

Атрибутом start= (в тэге <OL>) можно задать номер, с которого начинается нумерация элементов списков.

2. Вернитесь в Блокнот, установите курсор после окончания списка.

Вставьте тег <UL type="square">, он начинает маркированный список.

Вставьте элементы списка, предваряя их тегом <LI>. Завершите список тегом </UL>. Получится так:

<UL type="square"> <LI>Диван <LI>Кровать <LI>Тумба <LI>Сервант </UL>

Сохраните документ под тем же именем.

Вернитесь в Internet Explorer, щелкните Обновить. Как отобразился маркированный список, его маркировка, заданная атрибутомtype= ?

3. Вернитесь в Блокнот и щелкните в конец введенного списка.

Вставьте тег <DL>, он начинает список определений.

Вставьте список определяемых слов (терминов), предваряя их тегом <DT>

Вставьте список соответствующих определений, предваряя их тегом <DD>

Завершите список тегом </DL>. Например, сделайте так:

<html> <head><title> Пример 8 </title> </head> <body> <OL type="1"> <LI>Диван <LI>Кровать <LI>Тумба <LI>Сервант </OL> <UL type="square"> <LI>Диван <LI>Кровать <LI>Тумба <LI>Сервант </UL> <DL> <DT>Диван <DT>Кровать <DT>Тумба <DT>Сервант <DD>На нём отдыхают <DD>На ней спят <DD>На ней сидят <DD>Для посуды </DL> </body> </html>

Сохраните документ под тем же именем. В Internet Explorerщелкните Обновить. Посмотрите, как выглядит на web-странице список определений.

Создание таблиц

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

Начинают и заканчивают таблицу тэгами <table> … </table>.

Тэг <TR> начинает каждую строку таблицы, внутри ряда содержание каждой ячейки начинает тэг <TD>. Поэтому структура таблицы выглядит так:

<TD>Ряд 1, ячейка 1</TD> <TD>Ряд 1, ячейка 2</TD>

</TR>

<TR>

<TD>Ряд 2, ячейка 1</TD> <TD>Ряд 2, ячейка 2</TD>

</TR>

</table>

На экране такая таблица будет выглядеть так:

Ряд 1, ячейка 1	Ряд 1, ячейка 2
Ряд 2, ячейка 1	Ряд 2, ячейка 2

Ячейки 1й строки (ряда) можно оформить как заголовки столбцов:
тэг <TH> начинает каждый заголовок столбца таблицы. Например:

<TR> <TH>заголовок столбца 1 <TH>заголовок столбца 2

Заголовок над всей таблицей задаёт парный тэг <caption> с атрибутами, напр.:

<caption align="top">Заголовок таблицы </caption>

Для установки разных параметров всей таблицы к тэгу <table> добавляют:

Ÿ атрибут border=n задаёт толщину рамки вокруг таблицы. По умолчанию толщина =0 (текст стоит в табличной форме, но сетка таблицы не видна).
Например:при <table border=5>вид таблицы такой:

Ряд 1, ячейка 1	Ряд 1, ячейка 2
Ряд 2, ячейка 1	Ряд 2, ячейка 2

Ÿ атрибут width=n задаёт ширину таблицы в пикселях, или в % по отношению к ширине всего экрана. Например: <table border=1 width=400>

Ÿ атрибут height=n задаёт высоту таблицы в пикселях,

например: <table height=200 border=1>

Ÿ атрибут cellpadding=n задаёт поля внутри ячеек таблицы (т.е. текст будет отступать от края ячейки на заданное количество пикселей). По умолчанию эти поля =2 пикселя. Например: <table cellpadding=10 border=1>

Ÿ атрибут cellspacing=nзадаёт ширину поля между ячейками (тогда у каждой ячейки появится своя рамка, и между этими рамками будет расстояние, заданное атрибутом cellspacing). По умолчанию ширина границ 2 пикселя.

При создании таблиц применяют атрибуты, задающие параметры и для отдельных рядов таблицы (если они заключены между тэгами <TR>..</TR>) или ее ячеек

Ÿ атрибут align выравнивает содержимое ячеек по горизонтали. По умолчанию содержимое выравнивается по левому краю. Пример:

Тип атрибута	Align=Left	Align=Center	Align=Right
Вид в таблице	Текст слева	Текст по центру	Текст справа

Ÿ атрибут valign выравнивает содержимое ячеек по вертикали. Атрибут может принимать значения top, middle или bottom. По умолчанию – выравнивание middle. Атрибут используется, если высота ячейки больше, чем занимает ее содержимое. Пример:

Тип атрибута	Valign= Top	Valign= Middle	Valign=Bottom
Вид текста в таблице	Текст вверху ячейки	Текст по середине ячейки	Текст внизу ячейки

Ÿ атрибут colspan=n объединяет n ячеек ряда, начиная с данной, в 1 ячейку

A	B	C
D	E (данная ячейка занимает два столбца)
F	G	H

В данном случае описание 2го ряда таблицы содержит описание только 2х ячеек (в остальных рядах по 3 ячейки) и выглядит так:

<TR>

<TD colspan=2>E (данная ячейка занимает 2 столбца)</TD>

</TR>

Ÿ атрибут rowspan=n объединяет n ячеек столбца, начиная с данной, в 1ячейку

A	B	C
D	E (данная ячейка занимает 2 ряда)	F
G	H

Html-код для создания такой таблицы выглядит так:

<TR>

</TR>

<TR>

<TD>D</TD><TD rowspan=2>E(данная ячейка занимает 2 ряда)</TD>

</TR>

<TR>

</TR> </table>

Ÿ атрибут width=n – установка ширины ячейки. Ширина задается в пикселях или в % от ширины всей таблицы.

Ÿ атрибут height=n – установка высоты ячейки. Задается в пикселях.

ЗАДАНИЕ. Откройте 1.htm в Блокноте. Между <body>..</body> всё удалите и далее создадим таблицу номеров телефонов.

Для вставки таблицы, причем с заданной толщиной линий (border) и шириной таблицы (width) введите тег: <table border="10" width="100%">

Для заголовка введите: <caption align="top">Список телефонов</caption>

Для задания 1й строки таблицы (с двумя заголовками столбцов) так:

<TR bgcolor="yellow" align="center"> <TH>Фамилия <TH>Номер телефона

Создайте следующие строки таблицы, предваряя каждую тегом <TR> и помещая содержимое каждой ячейки после тега <TD>. Заполните 5-10 строк

Последнюю строку задайте так:

<TR> <TD align="center" colspan="2"> На 1 этаже здания - бесплатный телефон

Завершите таблицу тегом </table> Сохраните файл под именем таблица.htm

<html> <head><title> Пример 9 </title></head> <body> <table border=10 width=100%> <caption align="top"> Список телефонов </caption> <TR bgcolor="yellow" align="center"> <TH>Фамилия <TH>Номер телефона <TR> <TD>Иванов <TD>41-23-15 <TR> <TD>Петров <TD>61-20-15 <TR> <TD>Сидоров <TD>70-90-09 <TR> <TD>Кузнецов <TD>61-10-89 <TR> <TD align="center"colspan="2"> На 1этаже здания - бесплатный телефон </table> </body> </html>

Откройте файл таблица.htm в Internet Explorer.
Изучите, как заданные атрибуты влияют на вид таблицы в браузере.

Измените ширину окна браузера. Как при этом изменяется вид таблицы?

Описание фреймов

1. Запустите редактор Блокнот и введите следующий документ:

<html> <head> <title>Описание фреймов</title> </head> <frameset rows="60%,*"> <frame src="таблица.htm"> <frameset cols="35%,65%" noresize> <frame src="1.htm"> <frame src="ссылка.htm"> </frameset> </html>

3. Сохраните документ как фрейм.htm. Откройте его в Internet Explorer.

4. Изучите представление нескольких созданных ранее документов в отдельных фреймах. Что происходит при изменении ширины окна браузера?
Можно изменить положение границ фреймов перетаскиванием мышью?

5. Щелкните на ссылке в фрейме. Как отобразится новый документ?

Щелкните на кнопке Назад и убедитесь, что возврат к предыдущему документу не нарушает структуру фреймов.

6. Вернитесь в Блокнот и измените структуру и параметры фреймов по своему усмотрению. Сохраните документ под тем же именем.

7. В Internet Explorerщелкните Обновить. Но если измененный вид web-страницы не соответствует замыслу, в Блокноте исправьте ошибки.

&-последовательности

Символы "<" и ">" воспринимаются браузерами как начало и конец html-тэгов. А если надо на экране, на web-странице отразить эти символы как знаки "меньше" и "больше"? Как быть? Аналогично в языке HTML для служебных целей используются кавычки (") и амперсанд (&).

Если же надо вставить в текст эти зарезервированные символы, используют их эквиваленты – &-последовательности (или коды ASCII):

Недопустимые символы	Выражения для кодирования символов
< (знак "больше")	<
>(знак "меньше")	>
& (амперсанд)	&
"(двойная кавычка)	"
'(апостроф)	'
[ (квадратная скобка)	[
] (квадратная скобка)	]
несколько пробелов	нажать Ctrl+Shift+пробел (в коде отразится  )

Правила: точка с запятой - обязательный элемент &-последовательности. Все буквы последовательности должны быть маленькие (в нижнем регистре). Т.е. использование меток типа &QUOT; или &AMP; не допускается.

Комментарии

Браузеры игнорируют любой текст, помещенный между .

Поэтому так размещают комментариев. Пример:

Глава 5. САЙТОСТРОЕНИЕ в Macromedia Dreamweaver

I. Интерфейс Dreamweaver. Начало работы

Форматирование абзацев, заголовков - student2.ru

Рис.1. Интерфейс программы Dreamweaver

Главные компоненты рабочей области:

· окно документа показывает редактируемый документ в режиме Дизайна;

· панель объектов (Insert) имеет кнопки для быстрого размещения на странице разных объектов – рисунков, таблиц, спец. символов и т.д. Чтоб открыть/закрыть палитру объектов, нажмите в меню Окно /Объекты (Window /Insert, или Ctrl+F2);

· плавающие палитры(Floating Palettes) позволяют объединять в общие блоки окна, инспекторы и палитры.

· палитра свойств(Properties) показывает свойства выделенного текста или объекта, дает возможность их редактировать. Для появления палитры нужно нажать Окно /Свойства (Window /Properties)или Ctrl+F3.

Большинство изменений свойств сразу применяются к объекту (но есть свойства, для применения которых нужно кликнуть мышкой за границами палитры свойств).

В палитре свойств сначала отображаются наиболее используемые свойства объекта. Чтобы отобразить дополнительные параметры, нужно нажать на треугольник в правом нижнем углу.

Выделять объекты можно и в окне документа, и в окне html-кода.

Панель объектов имеет разделы:

· Common – отражает наиболее используемые объекты – рисунок, таблица, клипы Flash, аплеты Java и др. Этот раздел открыт по умолчанию;

· Characters – спец. символы - знак копирайта, символы валют, скобки, дает возможность вставить символ по выбору;

· Forms – создание форм и элементов управления;

· Frames - содержит наиболее используемые структуры фреймов на странице

· Head – теги заголовка страницы, такие как META, KEYWORDS и BASE, REFRESH и др.