Урок 2. Заголовки, абзацы, работа со шрифтами
dorofeeva 29-10-2012, 21:30 8 877 Уроки по HTMLДавайте посмотрим на два фрагмента текста:
| HTML – это язык разметки гипертекста (Hyper Text Markup Language). Теги - это определенные последовательности символов, заключенные между знаками < (меньше) и > (больше), задающие правила вывода на экран текстов, графики, звука. |
HTML – это язык разметки гипертекста (Hyper Text Markup Language). Теги - это определенные последовательности символов, заключенные между знаками <(меньше) и > (больше), задающие правила вывода на экран текстов, графики, звука. |
По-моему, тот что справа, гораздо более читаемый и понятный. Сразу видно, что у нас есть два определения. А текст слева сливается в одну общую массу и даже читать его не хочется.
Вот так часто бывает и с сайтами. Вроде и информация на сайте нужная, а читать его совсем невмоготу. А все потому, что текст не структурирован и идет одной серой массой.
Поэтому сегодня мы и разберем, как нужно оформлять текст на веб-страничке.
Для начала вспомним русский язык. У любого связного рассказа должно быть название (заголовок), а сам текст должен быть разбит на абзацы.
Итак,
Теги для создания заголовков.
В HTML-документе поддерживаются заголовки шести уровней при помощи тега
<Hn>Текст заголовка<Hn> .
В качестве n следует использовать одну из цифр 1-6, обозначающую уровень.
Самый крупный заголовок – первого уровня (Н1), самый мелкий – шестого (Н6).
Заголовки отделяются от остального текста пустыми строками.
Вот пример применения данного тега:
| <H1>Заголовок первого уровня</H1> |
Заголовок первого уровня |
| <H3>Заголовок третьего уровня</H3> |
Заголовок третьего уровня |
| <H6>Заголовок шестого уровня</H6> |
Заголовок шестого уровня |
Да, кстати, иногда теги употребляются не просто так, а с атрибутами.
У тегов заголовка есть атрибут выравнивания. По умолчанию заголовки всегда прижаты к левому краю. А если мы хотим разместить их по-центру или прижать к правому краю, мы должны написать следующим образом:
<H1 align="center" > Заголовок по центру</H1>
<H1 align="right" > Заголовок справа</H1>
<H1 align="left" > Заголовок слева</H1>
Впрочем, более правильным является создание стиля для каждого из заголовков, но об этом не здесь, а в уроках по CSS.
Абзацы
Для разделения документа на отдельные логические части и улучшения читаемости текста используется разбиение текста на абзацы.
Для разбивки текста на абзацы используется тег <P> Текст</P>.
Текст абзаца также можно выровнять с помощью атрибута align:
<P align="left"> - по левому краю
<P align="right"> - по правому краю,
<P align="center"> - по центру
Работа со шрифтами
Гарнитура - это особенности оформления и начертания шрифта.
с «засечками»,
«рубленные»,
«рукописные».
Обычный текст лучше читается, если выбран шрифт с «засечками» (Times, Courier).
В одной и той же гарнитуре существуют несколько начертаний – обычный шрифт, курсив, полужирный курсив.
Размер шрифта определяется в «пунктах» (1 pt = 0,353 мм). Для отображения основного текста лучше всего подходит шрифт размером 12 Pt.
Упражнение
Откройте Блокнот и наберите в нем следующий фрагмент кода:
|
<HTML>
<HEAD>
<TITLE>Моя новая страничка </TITLE>
</HEAD>
<BODY>
<H1> Привет! Это моя личная домашняя страничка! </H1>
<H2 align = center> Мой город </H2>
Я живу в <FONT color=red face="Comic Sans MS" size =+5> Москве </FONT>
<H4 align = center> Мои увлечения : </H4>
<FONT color=blue face="Arial" size = +2>
<B>Музыка - гитара</B>,
<U>Спорт - футбол</U>,
<I> Люблю рисовать</I>.
</FONT>
<H5> Мои друзья </H5>
<U>Moи друзья </U> увлекаются тем же, чем и я!
</BODY>
</HTML> |
Сохраните в своей рабочей папке под именем index2.html
Просмотрите страничку в браузере, должно получиться что-то вроде этого:
Вот пока и все на сегодня. Удачи в освоении HTML!