- •Лабораторная работа №5 Основы html-технологий. Создание простейших Web-страниц. Основные сведения
- •Создание Web-страницы
- •Упражнение 1
- •Упражнение 2
- •Цвет в языке html
- •Шестнадцатеричные коды
- •Оформление текста
- •Упражнение 3
- •Стили оформления
- •Упражнение 5
- •Заголовки
- •Специальные символы
- •Упражнение 4
- •Оформление абзацев Переход на новую строку
- •Выравнивание абзацев
- •Упражнение 6
- •Списки Маркированные списки
- •Нумерованные списки
- •Cписки определений
- •Вложенные списки
- •Упражнение 7
- •Контрольное задание
Оформление абзацев Переход на новую строку
Д
ля
того, чтобы начать новый абзац, можно
использовать простейший тэг <BR>,
который заставляет браузер начать вывод
текста с новой строки. Страница с кодом
<BODY>
Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее. <BR> До самого вечера тело с варежками ... </BODY>
будет показана на экране так:
Абзацы
В языке HTML есть специальный парный тэг <P> (от английского paragraph — абзац), позволяющий ограничить абзац. При этом каждый абзац отделяется от другого некоторым интервалом, который облегчает чтение текста страницы.
Открывающий тэг <P> обозначает начало абзаца, а соответствующий ему закрывающий — конец абзаца. Страница с кодом
<BODY> <P> Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее. </P> <P> До самого вечера тело с варежками ... </P> </BODY>
будет показана на экране так:
Выравнивание абзацев
У тэга <P> есть параметр ALIGN, который может принимать значения:
LEFT — выровнять по левой границе
RIGHT — выровнять по правой границе
CENTER — выровнять по центру
JUSTIFY — выровнять по ширине (левая и правая границы)
По умолчанию абзац выравнивается по левой границе. Ниже показано, как использовать этот параметр:
<P ALIGN="center"> Этот текст выровнен по центру. </P> <P ALIGN="justify"> Этот текст выровнен по ширине. </P>
В заголовках тоже можно указывать тип выравнивания, например так:
<H1 ALIGN="center"> Заголовок, выровненный по центру </H1>
Упражнение 6
Добавьте в файл Упражнение1.htm фразу «Каждый охотник желает знать где сидит фазан». Цвета слов выбирайте в соответствии с первой буквой (каждый – красный, охотник - оранжевый и т.д.). Нечетные слова во фразе выровняйте по левому краю, четные – по правому. Перед фразой добавьте заголовок параграфа «Оформление абзацев».
Списки Маркированные списки
Каждый элемент маркированного списка имеет маркер — специальный значок слева. Список ограничен парным тэгом <UL> (от английского unordered list — неупорядоченный список). Каждый элемент списка начинается с непарного тэга <LI>, после которого можно располагать текст, рисунки, таблицы и т.п. Список заканчивается закрывающим тэгом </UL>.
Ниже приведен пример простейшего маркированного списка — слева HTML-код, а справа — изображение в окне браузера.
<BODY> <UL> <LI>Вася <LI>Петя <LI>Коля </UL> </BODY> |
|
|
В команде <UL> можно задавать тип маркера, например, для того, чтобы установить в качестве маркера кружок, надо написать
<UL TYPE="disk">
Кроме этого типа можно также использовать значения circle (окружность) и square (квадрат).
Нумерованные списки
Каждый элемент такого списка имеет номер. Нумерация может быть числовой или буквенной. Список ограничен парным тэгом <OL> (от английского ordered list — упорядоченный список). Каждый элемент списка начинается с непарного тэга <LI>, после которого можно располагать текст, рисунки, таблицы и т.п. Список заканчивается закрывающим тэгом </OL>.
Ниже приведен пример простейшего нумерованного списка — слева HTML-код, а справа — изображение в окне браузера.
<BODY> <OL> <LI>Вася <LI>Петя <LI>Коля </OL> </BODY> |
|
|
В команде <OL> можно задавать тип нумерации (в параметре TYPE) и начальное значение номера (в параметре START). Так в следующем примере задается нумерация маленькими римскими цифрами начиная с iii.
<BODY> <OL TYPE="i" START="3"> <LI>Вася <LI>Петя <LI>Коля </OL> </BODY> |
|
|
Кроме этого типа можно также использовать значения A (заглавные латинские буквы), a (строчные латинские буквы), I (большие римские цифры), и 1 (арабские цифры).
