Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
язык html.doc
Скачиваний:
0
Добавлен:
01.07.2025
Размер:
888.32 Кб
Скачать

Оформление заголовков

Посмотрим еще раз на нашу страничку. Еще один ее недостаток заключается в том, что весь текст написан шрифтом одного размера. Вообще говоря, заголовки выделяют более крупным шрифтом (причем обычно полужирным). Для того чтобы выделять заголовки, в HTML существуют так называемые теги заголовков. Это <Н1>, <Н2>, <НЗ>, <Н4>, <Н5> и <Н6> (и из закрывающие теги). Для самых крупных заголовков можно использовав тег <Н1> , для заголовков помельче — <Н2> и так далее. Например, так:

<Н2>ИВАН-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ<ВR> сказка</Н2>

Однако обратите внимание на то, что для выравнивания по центру нужно приложить дополнительные усилия, например поместить соответствующий тег внутрь тега заголовка (то есть в данном случае между тегами <Н2> и </Н2> ):

<Н2><Р ALING="сеntег">ИВАН-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ<ВR> сказка</Р></Н2>

Если этого не сделать, то заголовок будет выровнен по левому краю.

В нашем случае имеет смысл использовать для заголовков рассказа тег <Н2> , а для заголовка всей странички — тег <Н1> (общий заголовок должен быть крупнее). Для выравнивания общего заголовка по центру мы можем написать так:

<H1><DIV ALING="сеntег">Домашняя страница Сергея Сергеева</DIV></Н1>

Обратите внимание на то, что вместо тега <Р> для выравнивания мы: использовали тег <DIV> . Этот тег означает разделитель и определяет фрагмент, который можно наделить какими-либо стилевыми свойствами, Текст, расположенный между тегами <DIV> и </DIV> , в большинстве браузеров также отделяется от остального текста с помощью символа перевода строки (если не заданы еще какие-либо параметры).

Вы, наверное, обратили внимание на то, что в предыдущем примере основной текст рассказов был заключен в тег < Р ALIGN="left"> . Здесь значение "left" означает выравнивание по левому краю, однако это значение атрибута ALIGN= определено по умолчанию. То есть, для определения абзаца, выровненного по левому краю, достаточно было просто "ставить тег <Р>. Однако текст рассказа обычно смотрится лучше, если у него ровные оба края, а не только левый — мы к этому привыкли по бумажным изданиям. Чтобы выровнять текст по обоим краям, можно добавить атрибут ALIGN= со значением "justify". Но следует иметь в виду, что такое выравнивание не поддерживалось в старых версиях браузеров.

Горизонтальная линейка

Более, на нашей страничке хотелось бы визуально отделить рассказы от вступительного текста. Это можно сделать с помощью горизонтальной черты. В принципе, для этого достаточно в нужном месте поставить тег <BR> (он не имеет закрывающего тега). Однако в этом случае горизонтальная черта займет всю ширину страницы, что будет смотреться неопрятно. Для определения ширины горизонтальной черты можно задать атрибут WIDTH=, например, так:

<HR WIDTH="75%">

В этом случае горизонтальная линия займет 75% от полной ширины экранной страницы. Можно также определять ширину линии и в пикселах ( экранных точках). Например, запись <HR WIDTH="75"> определит ширину линии в 75 пикселов (это получится очень короткая линия). Если хотите, можете определить также толщину линии, установив атрибут SIZE=.

Некоторые проблемы могут возникнуть, если мы захотим оставить немного Свободного пространства между вступительным текстом и горизонтальной линией (в данном случае это уместно, так как между линией и заголовком, определенным тегом <Н2> , пространство довольно большое, и желательно соблюсти некоторый баланс). Дело в том, что если поставить перед линией тег <BR> , то большинство браузеров его проигнорируют. Выход можно найти, если после <BR> вставить неразрывный пробел или вместо <BR> использовать “пустой” абзац:

<P></P><HR WIDTH="75%">

И то и другое не очень эстетично с точки зрения кода. Правда, если страничка делается для браузеров Netscape (версии 3 и более поздних), можно использовать тег <SPACER> , чтобы задать вертикальный отступ:

<SPACER TYPE="vertical" SIZE="25">

собственно говоря, это то, что нужно, но другие браузеры не поддерживают этот тег и поэтому просто проигнорируют его. Поэтому ограничимся пока тегом <BR> с неразрывным пробелом. А в главе 4 вы узнаете, как можно легко решать такие проблемы с помощью CSS (каскадных таблиц стилей).

Давайте посмотрим, что у нас получилось.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<title>Домашняя страница Сергея Cepreesa</title>

</head>

<body>

<h1><DIV aling="center">Домашняя страница Сергея Сергеева </div></h1>

<br> Сергей Сергеев - писатель-авангардист, автор 20 рассказов. <br>

В жизни большой любитель собак и компьютерных игр. <br> <br>

Некоторые его рассказы вы можете прочитать прямо здесь. <br>

<HR WIDTH="75%"> <H2><P ALIGN="center">ИBAH-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ <br>

сказка</p></H2>

 

<p align="right">Hy, погоди!.. <BR>(Из мультфильма)</Р>

<p align="justify">      Жил да

был Иван-Царевич, и все у него было: и злато-серебро, и невест

полный дворец, и книжек много умных, и тренажерный зал огромный... <br>

      Долго ли, коротко ли ... <br>

      И они жили долго и счастливо

и умерли в один день.</Р>

<HR WIDTH="75%">

<h2><p align="center">MOЛOTOK <br> рассказ</p></h2>

<p ALIGN="right">Mы кузнецы, и дух наш молод. <br> (Из песни)</P>

      Это

случилось очень давно, уж и не помню в каком году, в каком веке

и в каком тысячелетии... (Здесь располагается текст рассказа)

</BODY>

</HTML>