 |
Составить базовый HTML-файл, содержащий строку декларации, заголовок и тело документа.
|
|
|
|
Контрольные вопросы:
Что такое строка декларации версии, и как она должна выглядеть.
Элементы, относящиеся к заголовку документа.
Для чего нужны элементы HEAD и TITLE.
Элемент BASE и его параметры.
Для чего нужен элемент STYLE.
Элемент LINK и его параметры.
Тело HTML-документа и его параметры.
Лабораторная работа №2
Тема: Работа с текстом
Цель: Научится работать с элементами, разбивающими текст на блоки и элементами для оформления и осмысленного выделения текста.
Текстовые блоки
В этом разделе описаны элементы, разбивающие текст документа на блоки тем или иным способом. Типичными примерами текстовых блоков являются параграфы, абзацы и главы. Для отделения одной части текста от другой также используются разделительные горизонтальные линии и символы возврата каретки.
Элементы, разбивающие текст на блоки:
| H1,H2,...H6 | Используются для создания заголовков текста |
| P | Используется для разметки параграфов. |
| DIV | Отделяет блок HTML–документа от остальной его части |
| ADDRESS | Оформляет текст как почтовый адрес |
| BLOCKQUOTE | Оформляет текст как цитату |
| BR | Осуществляет перевод строки |
| HR | Вставляет в текст горизонтальную разделительную линию. |
| PRE | Включает в документ (моноширинным шрифтом) блок предварительно отформатированного текста |
H1,H2,...H6
(HTML 2.0) – Headers
Используются для создания заголовков текста. Существует шесть уровней заголовков, различающихся величиной шрифта. С их помощью можно разбивать текст на смысловые уровни – разделы и подразделы.
Параметры:
ALIGN – определяет способ выравнивания заголовка по горизонтали.
Возможные значения: left, right, center.
<H1 ALIGN = “center” >Самый большой заголовок посередине </H1>
|
|
|
<H2> Заголовок поменьше </H2>
…
<H6> Самый маленький заголовочек </H6>
P
(HTML 2.0) – Paragraph
Используется для разметки параграфов.
Параметры:
ALIGN – определяет способ горизонтального выравнивания параграфа.
Возможные значения: left, center, right. По умолчанию имеет значение left.
<P ALIGN = “center”> Это центрированный параграф. <BR>
Текст располагается в центре окна браузера </P>
< P ALIGN = “right”> А это параграф, выровненный по правому краю.</P>
DIV
(HTML 3.2) – Division
Используется для отделения блока HTML–документа от остальной части документа. Находящиеся между начальным и конечным тэгами текст или HTML–элементы оформляются как отдельный параграф.
Параметры:
ALIGN – определяет выравнивание содержимого элемента DIV. Параметр может принимать следующие значения: left, right, center.
… Текст документа …
<DIV ALIGN = “center”>
… Текст, таблицы, изображения. Выравнивание по центру.
</DIV>
… Текст документа …
ADDRESS
(HTML 2.0) – Address
Находящийся между начальным и конечным тэгами текст оформляется как почтовый адрес. Чаще всего оформление выражается в выделении строки адреса курсивом.
Пишите по следующему адресу:
<ADDRESS>
Москва, ул. Академика Королёва, 13<BR>
Мурзилке
< /ADDRESS >
Примечание: Internet Explorer версии 3.0 неверно интерпретирует конечный тэг </ADDRESS>, поэтому весь текст, находящийся после адреса, будет отображаться курсивом. Эту ошибку можно легко устранить, поставив после </ADDRESS> любой элемент форматирования текста.
<ADDRESS>
Мой адрес не дом и не улица, <BR>
Мой адрес Советский Союз.
< /ADDRESS >
<│></│>
Нормальный текст
…
BLOCKQUOTE
(HTML 2.0) – Block Quote
Оформляет находящийся между начальным и конечным тэгами текст как цитату. Используется для длинных цитат (в отличие от элемента CITE). Цитируемый текст отображается отдельным абзацем с увеличенным отступом.
|
|
|
Редакция журнала “Домосед” выражает благодарность
Бухаресту Магарычу Шницелю за замечательное стихотворение:
<BLOCKQUOTE>
Синели красные ромашки, <BR>
Желтели в небе облака, <BR>
Синицы в тёплый край летели, <BR>
К истоку двигалась река. <BR>
…
</BLOCKQUOTE>
BR
(HTML 2.0) – Break
Данный элемент осуществляет перевод строки, то есть практически аналогичен нажатию Enter в текстовом редакторе. После того, как в браузерах появилась возможность обтекания изображения текстом, понадобился дополнительный параметр CLEAR. Элемент не имеет конечного тэга.
Параметры:
CLEAR – указывает на необходимость завершения обтекания изображения текстом. Может принимать следующие значения:
all – завершить обтекание изображения текстом.
left – завершить обтекание текстом изображения, выровненного по левому краю.
right – завершить обтекание текстом изображения, выровненного по правому краю.
Первое предложение <BR > Второе предложение на следующей строке
Примечание: Возьмите себе за правило всегда ставить <br> после тэга <img...>. В противном случае все картинки будут иметь неприятный отступ.
HR
(HTML 2.0) – Horisontal Rule
Вставляет в текст горизонтальную разделительную линию.
Параметры:
WIDTH – определяет длину линии в пикселах или процентах от ширины окна браузера.
SIZE – определяет толщину линии в пикселах.
ALIGN – определяет выравнивание горизонтальной линии. Параметр может принимать следующие значения:
left – выравнивание по левому краю документа.
right – выравнивание по правому краю документа.
center – выравнивание по центру документа (используется по умолчанию).
NOSHADE – определяет способ закраски линии как сплошной. Параметр является флагом и не требует указания значения. Без данного параметра линия отображается объемной.
COLOR – определяет цвет линии. Задается либо RGB–значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. Работает только в Internet Explorer, поэтому лучше его не использовать.
Текст, разделённый <HR NOSHADE WIDTH = “50%”> сплошной горизонтальной линией.
PRE
(HTML 2.0) – Preformatted Text
Используется для включения в документ уже отформатированного текста. Браузеры воспроизводят содержимое этого элемента с помощью моноширинного шрифта, сохраняя пробелы и символы конца строки.
|
|
|
<PRE>
Hi There!
Hi There!
Hi There!
</PRE>
Примечание: Следует избегать использования символа горизонтальной табуляции, т.к. он может быть неадекватно интерпретирован некоторыми браузерами. Вместо символа табуляции рекомендуется использовать число пробелов, кратное четырем.
Форматирование текста
В этом разделе описаны элементы для оформления и смыслового выделения текста – подчеркивания, изменения шрифта, выделения курсивом, цитирования и т.д.
Элементы форматирования текста:
| BASEFONT | Определяет основной шрифт, которым должен отображаться текст документа |
| FONT | Позволяет изменять цвет, размер и тип шрифта текста |
| I | Выделяет текст курсивом |
| EM | Используется для смыслового выделения текста (курсивом) |
| B | Выделяет текст жирным шрифтом |
| STRONG | Усиленное выделение текста (жирным) |
| U | Выделяет текст подчеркнутым |
| S, STRIKE | Выделяет текст перечеркнутым |
| BIG | Отображает текст увеличенным шрифтом (относительно текущего) |
| SMALL | Отображает текст уменьшенным шрифтом (относительно текущего) |
| SUP | Отображает текст со сдвигом вверх (верхний индекс) |
| SUB | Отображает текст со сдвигом вниз (нижний индекс) |
| CODE, SAMP | Оформляют текст как формулу или программный код |
| TT | Отображает текст моноширинным шрифтом |
| KBD | Выделяет текст, который предлагается набрать на клавиатуре |
| VAR | Используется для обозначения в тексте переменных |
| CITE | Оформляет текст как цитату или ссылку на источник |
BASEFONT
(HTML 4.0) – Base Font
Не имеет конечного тэга. Определяет основной шрифт, которым должен отображаться текст документа.
Впоследствии вы можете легко изменить шрифт в любой части документа, используя элемент FONT. Действие элемента BASEFONT не распространяется на текст, заключенный в ячейки таблиц.
Параметры:
SIZE – обязательный параметр. Определяет базовый размер шрифта. Возможные значения: целые числа от 1 до 7 включительно.
FACE – определяет используемый шрифт (гарнитуру).
<BODY>
<BASEFONT SIZE = “3”>
…
Текст документа шрифтом 3 размера
|
|
|
…
<FONT SIZE =”+1”>
Слегка увеличиваем шрифт
</FONT>
…
Продолжаем шрифтом 3 размера
…
</BODY>
FONT
(HTML 3.2) – Font
Позволяет изменять цвет, размер и тип шрифта текста, находящегося между начальным и конечным тэгами. Вне тэгов <FONT> и </FONT> используется шрифт, указанный в элементе BASEFONT.
Параметры:
SIZE – определяет размер шрифта. Возможные значения:
– целое число от 1 до 7;
– относительный размер с указанием знака, вычисляется путем сложения с базовым размером, определенным с помощью параметра SIZE элемента BASEFONT.
COLOR – определяет цвет текста. Задается либо RGB–значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.
FACE – определяет используемый шрифт.
<FONT SIZE =”+2”> COLOR = “#AA0000”> Увеличенный красный шрифт </FONT>
<FONT SIZE =”3” FACE = “Courier” COLOR = “Magenta”> Моноширинный фиолетовый текст 3 размера </FONT>
|
|
|
