29.10.2012

Урок 2. Заголовки, абзацы, работа со шрифтами

Давайте посмотрим на два фрагмента текста:

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.


Для определения свойств шрифта используется тег <FONT> со следующими атрибутами: 
size – размер шрифта,  
color – цвет шрифта, 
face – гарнитура шрифта или список допустимых шрифтов. 

Размер шрифта  задается относительно размера, установленного в программе просмотра по умолчанию (FONT size=+4).

Кроме тега <FONT> для изменения свойств шрифта можно использовать следующие теги:

полужирный шрифт (Bold) – <B> текст </B>
подчеркивание (Underline) – <U> текст </U>
курсивный шрифт (Italic). –<I> текст </I>
зачеркнутый текст (Strike Out)-  <S> текст </S>
усиленное выделение (полужирный шрифт)  -  <STRONG>…</STRONG>
укрупнение шрифта по сравнению с обычным -  <BIG>…</BIG>
уменьшение шрифта по сравнению с обычным - <SMALL>…</SMALL>
пишущая машинка - <TT>текст</TT>
верхние индексы - <SUP> т е к с т </SUP>
нижние индексы - <SUB> т е к с т </SUB>

Упражнение

Откройте Блокнот и наберите в нем следующий фрагмент кода:

 

<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!