Лабораторные работа №1
HyperText Markup Language (HTML) является языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться различными типами WEB-браузеров. Когда документ создан с использованием HTML, браузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей. Большинство документов имеют стандартные элементы, такие, как заголовок, параграфы или списки. Используя теги HTML вы можете обозначать данные элементы, обеспечивая WEB-браузеры минимальной информацией для отображения данных элементов, сохраняя в целом общую структуру и информационную полноту документов. Все что необходимо, чтобы прочитать HTML-документ – это WEB-браузер, который интерпретирует теги HTML и воспроизводит на экране документ в виде, который ему придает автор.
Для построения HTML-документов необходимо использовать текстовый редактор БЛОКНОТ. После набора теговой модели документ следует сохранить, указав расширение .html. Это позволит просмотреть документ в браузере, который проинтерпретирует теги.
Команды языка (теги) заключаются в угловые скобки. Как правило, теги парные. Первый тег открывает описание команды, определяет ее начало, второй, отличающийся от первого наличием косой черты "/" перед ключевым словом (именем тега), закрывает его.
Тег <HTML> должен открывать программу, а тег </HTML> -- закрывать ее.
Между этими двумя основными тегами располагается головная часть программы (заголовок программы) и ее тело:
<TITLE> </TITLE> - Название документа
Между тегами <BODY> и </BODY> располагаются команды, следуя которым браузер выводит информацию в окно документа.
ЗАГОЛОВКИ
В HTML-документе поддерживаются заголовки шести уровней при помощи конструкции
<Hn>текст заголовка</Hn>
Здесь в качестве n следует использовать одну из цифр 1-6, обозначающую уровень заголовка. Заголовки выделяются браузером при показе HTML-документа размером шрифта и жирностью:
Это заголовок 1 уровня Это заголовок 2 уровня Это заголовок 3 уровня Это заголовок 4 уровня Это заголовок 5 уровня Это заголовок 6 уровня |
Кодирование символов:
<HR> - Рисование линии
Задавая разные параметры атрибуту size, можно получить целую коллекцию линий, разных по толщине:
команда | вид линии на экране |
<HR size=1> | |
<HR> | |
<HR size=5> | |
<HR size=10> |
Замечание
По умолчанию браузер рисует линии "объемными". Можно вывести линии "плоскими", если использовать атрибут noshade:
команда | вид линии на экране |
<HR size=1 noshade> | |
<HR noshade> | |
<HR size=5 noshade> | |
<HR size=10 noshade> |
Цвета для фона и шрифта на всем протяжении документа можно задать при помощи атрибутов bgcolor и text в теге <BODY>. В рассмотренном выше примере записано:
<HTML>
<HEAD>
...
</HEAD>
<BODY bgcolor=silver text=black>
...
</BODY>
</HTML>
Это означает, что в документе заданы черные символы (black) на серебристом фоне (silver). К тексту можно обращаться или числовым значением например bgcolor=#ff00cc или значением цвета bgcolor=black. (См. рис.1.1 и рис.1.2)
Как отмечалось выше, атрибуты цветов, заданные в теге <BODY> действуют до парного тега </BODY>, то есть, до конца документа. С цветом фона ничего уже не поделаешь -- он может задаваться только один раз, а цвет шрифта можно менять внутри документа многократно при помощи команды <FONT>...</FONT>. Установка цвета в этой команде выполняется при помощи атрибута color так, как это сделано в примере:
<HTML>
<HEAD>
...
</HEAD>
<BODY bgcolor=silver text=black> Заданы цвета для всего документа
...
<FONT color=maroon> Задан новый цвет шрифта (коричневый)
...
</FONT> Восстановлен цвет шрифта (черный)
...
</BODY>
</HTML>
Выравнивание абзацев и фрагментов
Команда <P>, записанная без атрибутов, выравнивает текст по левому краю страницы. Можно запрограммировать вывод текста с ровным правым краем, или так, чтобы все его строчки были выровнены по центру.
<P> | -- выравнивает абзац по левому краю |
<P align=left> | -- выравнивает абзац по левому краю |
<P align=right> | -- выравнивает абзац по правому краю |
<P align=center> | -- выравнивает абзац по центру |
Выровнять по центру можно не только отдельный абзац или заголовок, но и целую группу экранных элементов, если поместить их описание внутри тегов <CENTER>…</CENTER>
Применение стилей к тексту:
СПИСКИ
Маркированный список | Нумерованный список |
Список вопросов Пятачка: · Какой он, этот Слонопотам? · Неужели очень злой? · Идет ли он на свист? И если идет, то зачем? · Любит ли он поросят или нет? · И как он их любит? | Список слов из словаря Эллочки: 1. Хамите. 2. Хо-хо! 3. Знаменито. 4. Мрачный. 5. Мрак. 6. Жуть. |
Маркированный список
Каждый элемент этого списка браузер предваряет меткой в начале строки, а сами строки смещает вправо.
Команда UL, задающая маркированный список, имеет следующую структуру:
Описание команды | Пример |
<LI>первый элемент</LI> <LI>второй элемент</LI> ... <LI>последний элемент</LI> </UL> |
<LI>Какой он, этот Слонопотам?</LI> <LI>Неужели очень злой?</LI> ... <LI>И как он их любит?</LI> </UL> |
Конечный тег </LI> не является обязательным.
Вид метки, которую браузер помещает перед каждым элементом списка, настраивается при помощи атрибута type. Этот атрибут может отсутствовать или принимать одно из трех значений:
Начальный тег | Вид метки на экране |
<UL> | · диск |
<UL type=circle> | o окружность |
<UL type=disc> | · диск |
<UL type=square> | § квадрат |
Нумерованный список
В нумерованных списках каждый элемент снабжен номером, вид и начальное значение которого настраивается специальным атрибутом.
Нумерованный список задается при помощи команды <OL>.
Описание команды | Пример |
\n'+ ' первый элемент\n'+ ' второй элемент\n'+ ' ...\n'+ ' последний элемент\n'+ '\n' )); //--> <OL> <LI>первый элемент</LI> <LI>второй элемент</LI> ... <LI>последний элемент</LI> </OL> | \n'+ ' Хамите.\n'+ ' Хо-хо!\n'+ ' ...\n'+ ' Жуть.\n'+ '\n' )); //--> <OL> <LI>Хамите.</LI> <LI>Хо-хо!</LI> ... <LI>Жуть.</LI> </OL> |
Замечание
Конечный тег </LI> не является обязательным.
Вид номера определяется значением атрибута type.
Начальный тег | Вид номера на экране |
<OL> | 1. Нумерация выполняется арабскими цифрами (1, 2, 3,...) |
<OL type=1> | 1. Нумерация выполняется арабскими цифрами (1, 2, 3,...) |
<OL type=A> | A. Нумерация выполняется прописными буквами (A, B, C,...) |
<OL type=a> | a. Нумерация выполняется строчными буквами (a, b, c,...) |
<OL type=I> | I. Нумерация выполняется большими римскими цифрами (I, II, III,...) |
<OL type=i> | i. Нумерация выполняется малыми римскими цифрами (i, ii, iii,...) |
Естественную нумерацию элементов списка (с единицы) можно изменить при помощи атрибута start=n. Число n задает начальное значение нумерации. Если для нумерации используются буквы или римские цифры, то стартовое значение равно n-му элементу в системе нумерации (например, 4 означает D или IV).
Список-определение
В СПИСКЕ-ОПРЕДЕЛЕНИИ все записи сдвинуты влево при помощи табуляции.
Список – определение определяется следующими командами начала и конца списка: <DL> и </DL>. Данный список служит для создание списков типа "термин"-"описание". Каждый термин начинается тэгом <DT> , а описание - тэгом <DD>.
НАПРИМЕР: Курсы:
Компьютерные:
Оператор
Пользователь
Бухгалтерские:
Бухгалтерия 1С
Бухгалтер + Бухгалтерия 1С
Для написания такого фрагмента документа используется ряд команд списка определения:
<DL> Курсы:
<DT> Компьютерные:
<DD> Оператор
<DD> Пользователь</DT>
<DT>Бухгалтерские:
<DD>Бухгалтерия 1С
<DD>Бухгалтер + Бухгалтерия 1С
</DT></DL>
ЗАДАНИЯ1:
Создайте следующий документ, используя списки.
Создайте следующий документ, используя списки.
Создайте следующий документ.
