Понедельник
17-10-23, 07:16
"КОМП" от и до!
Приветствую Вас Гость | RSS
Главная Статьи Регистрация Вход
Меню сайта

Категории каталога
Создание Web-сайтов [9]
Основы создания web-сатов для начинающих
Анимация для сайтов [0]
Создание анимированного изображения для Web-сайта

Наш опрос
Статьи по каким темам вам наиболее интересны?
Всего ответов: 250

Реклама

Главная » Статьи » Web-разработка и дизайн » Создание Web-сайтов

2. Основные средства htmL. 2.1. Простейшее форматирование текста (Часть 1)

2. Основные средства языка HTML

2.1. Простейшее форматирование текста

В разделе 1.2 мы начали знакомиться с тем, как пишется код веб-страницы, и увидели, что ничего принципиально сложного в этом нет. Давайте сейчас продолжим знакомство с языком HTML. Для начала попробуем отформатировать текст на нашей гипотетической страничке так, чтобы его было более или менее удобно и приятно воспринимать и производить Печать плакатов А1.

В качестве примера продолжим форматирование страницы нашего несуществующего писателя Сергея Сергеева. Предположим, что за вступительным текстом, который мы начали форматировать в разделе 1.2, мы должны расположить два его рассказа (он же писатель!). Каждый рассказ имеет название, подзаголовок и небольшой эпиграф.

Известно, что в книгах названия рассказов обычно располагают по центру страницы, а эпиграф — у ее правого края. Давайте попробуем осуществить это на веб-странице. Для этого вначале введем понятие атрибутов тега. Дело в том, что почти каждый тег HTML может употребляться не только “сам по себе”. Внутри негр (то есть между угловыми скобками), кроме названия тега могут задаваться еще несколько его свойств, называемых атрибутами. Например, атрибутом разных тегов может являться цвет текста, размер шрифта и т. д.

Управление выравниванием текста

В данном случае нам потребуется такой атрибут, как выравнивание (выключка) текста. Он может употребляться с разными тегами. Поскольку на нашей страничке и заголовок, и эпиграф должны быть отделены друг от друга и от основного текста, имеет смысл употребить тег <Р> . Каждый фрагмент текста, заключенный между тегами <Р> и </Р> , будет представлять собой отдельный абзац:

<Р>Это первый абзац.</Р> <Р>Это второй абзац.</Р> <Р>Это третий абзац и т. д.</Р>

Чтобы выровнять заголовок по центру страницы, можно написать следующее:

<Р ALIGN="center">3AГOЛOBOK РАССКАЗА № !</Р>

Вы, очевидно, уже поняли, что атрибут ALIGN= означает выравнивание. Ему присвоено значение "center" для выравнивания текста по центру страницы. Между атрибутом и его значением всегда должен стоять знак равенства. Для того чтобы расположить эпиграф по правому краю, надо, соответственно, атрибуту ALIGN= присвоить значение "right":

<Р ALIGN="right">ЭПИГРАФ</P>

Теперь давайте посмотрим, как будет выглядеть вся страничка целиком.

<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">

<TITLE>Домашняя страница Сергея Cepreeвa</TITLE>

</HEAD>

<BODY> 

<FONT FACE="Times New Roman"><P>Домашняя страница Сергея Сергеева<BR>

<BR>

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

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

<BR>

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

<P ALIGN="CENTER">ИBAH-ЦAPEBИЧ И СЕРЫЙ ЗАЯЦ<BR>

сказка</Р></P>

<P ALIGN="RIGHT">Hy, погоди!.. <BR>

(Из мультфильма)</P>

<P>Жил да был Иван-Царевич, и все у него было: и злато-серебро, и невест полный дворец, и книжек много умных, и тренажерный зал огромный. Однако тоскливо было у него на душе - как встанет утром с постели царской, так и начнет горевать, и горюет до вечера.<BR>

Долго ли, коротко ли, ... (тут располагается еще несколько абзацев, разделенных тегом BR, хотя это не единственный способ разделения абзацев)...<BR>

И они жили долго и счастливо и умерли в один день. </P>

<P ALIGN="CENTER">MOЛOTOK<BR>

рассказ</P>

<P ALIGN="RIGHT">Мы кузнецы, и дух наш молод.<BR>

(Из песни)</P>

<P>Это случилось очень давно, уж и не помню в каком году, в каком веке и в каком тысячелетии... (Здесь располагается текст рассказа) </P></FONT>

</BODY>

</HTML>

Результат показан на рис. 2.1. Как видите, это весьма похоже на то, что было задумано. Однако сразу бросаются в глаза несколько недостатков. Во-первых, абзацы в основном тексте на вид плохо отделены друг от друга, хотя и разделены тегом <BR> .


Рис. 2.1. Иллюстрация применения атрибута ALIGN

Оформление абзацев

Вообще говоря, для разделения абзацев вместо тега <BR> можно также использовать тег <Р> . Он, надо сказать, и был создан для этого. Но поскольку придумывали его не у нас в России, то он делит абзацы в соответствии с зарубежными правилами книгопечатания — между абзацами пропускается строка, а сам абзац начинается без отступа слева (“красной строки”). Такое оформление непривычно для нас, и поэтому попробуем отформатировать абзацы по-другому — без пропуска строки и с отступом слева.

Собственно, используя тег <BR> вместо тега <Р> , мы уже избежали пропуска строки перед каждым абзацем. Теперь попробуем создать отступ. в НTML изначально не было предусмотрено средств для этого, поэтому придется схитрить.

Если вы еще помните, в былые времена в примитивных текстовых редакторах некоторые использовали для отступа несколько пробелов, как на пишущей машинке. Здесь можно попробовать применить этот допотопный прием. Правда, “в лоб” он работать не будет, поскольку броузеры игнорируют лишние пробелы. Однако мы можем поставить специальный символ, называемый неразрывным пробелом. Он никогда не игнорируется, и несколько таких символов вполне могут заменить нам отступ первой строки. Для того чтобы создать неразрывный пробел, следует ввести:

&nbsp;

Поясним, что в языке HTML подобная конструкция всегда используется для ввода так называемых специальных символов. Как только броузер встречает в тексте знак амперсенд (&), он начинает интерпретировать сле-дующие за ним буквы как код специального символа. Так продолжается до тех пор, пока не встретится точка с запятой. Специальные символы используются, в частности, для кодирования букв с различными “добав-ками” типа селиля, циркумфлекса и пр. (для текстов, например, на фран-цузском языке), ввода знаков торговой марки и авторского права, символов денежных единиц, знаков “больше” и “меньше” и т. д.

Итак, если ввести перед абзацем несколько неразрывных пробелов, то абзац отобразится с отступом первой строки.

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

Посмотрим еще раз на нашу страничку. Еще один ее недостаток заключается в том, что весь текст написан шрифтом одного размера. Вообще говоря заголовки выделяют более крупным шрифтом (причем обычно полужирным). Для того чтобы выделять заголовки, в 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". Но следует иметь в виду, о такое выравнивание не поддерживалось в старых версиях броузеров. (юузеры Internet Explorer и Netscape Navigator поддерживают его только начиная со своих четвертых версий.

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

Более, на нашей страничке хотелось бы визуально отделить рассказы от вступительного текста. Это можно сделать с помощью горизонтальной черты. В принципе, для этого достаточно в нужном месте поставить тег <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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Жил да

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

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

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

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

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

<HR WIDTH="75%">

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

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

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Это

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

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

</BODY>

</HTML>

Результат наших трудов представлен на рис. 2.2. Что ж, страничка посте пенно становится все лучше. Но, не правда ли, хочется сделать вступи-


Рис. 2.2. Применение заголовочных стилей

тельный текст чуть крупней и выделить в нем некоторые моменты? Кроме того, текст эпиграфа обычно дается чуть более мелким шрифтом, а подзаголовки и подписи под эпиграфом неплохо бы выделить курсивом.

Категория: Создание Web-сайтов | Добавил: kompot (08-11-21)
Просмотров: 1435 | Рейтинг: 0.0/0 |
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма входа

Поиск

Друзья сайта

Статистика


Copyright MyCorp © 2017