ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

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

Заголовки в HTML. Набор текста в HTML

Итак, продолжим набивать текстом нашу страницу. Поговорим о HTML заголовках. Подобно названию страницы, заголовки в HTML должны быть краткими и полезными. Существует шесть размеров шрифта HTML заголовков (они пронумерованы от одного до шести, причем первый номер соответствует самому крупному размеру шрифта). Чтобы воспользоваться заголовком с размером букв первого номера, нужно обозначить выделяемый текст тегами <h1> и </h1>. У него есть разновидности от <h2> </h2> до <h6> </h6>.

Самый крупный заголовок <h1>, соответственно, самый мелкий <h6>. Давайте попробуем ввести HTML заголовок в нашу страницу. Этот текст должен располагаться в части, отдельной тегами <body> и </body>.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Компания АВС</title>
</head>

<body bgcolor="blue" text="red">
<h1>Компания АВС</h1>
Компания АВС — поставки электронной техники ведущих мировых производителей.
</body>
</html>

Для просмотра документа в браузере, его нужно сохранить на диске.

Сохраните вашу страницу (Файл->Сохранить) и откройте ее (или нажмите обновить Обновить, если вы не закрывали страницу).

В окне веб-браузера это будет выглядеть ТАК.

По умолчанию заголовок раздела выравнивается по левому краю страницы. Атрибут align позволяет выровнять заголовок по правому краю или центрировать. Значение right данного атрибута обеспечивает выравнивание текста по правому краю, а значение center —центрирование. Давайте выравняем заголовок раздела по центру веб-страницы.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Компания АВС</title>
</head>

<body bgcolor="blue" text="red">
<h1 align="center">Компания АВС</h1>
Компания АВС — поставки электронной техники ведущих мировых производителей.
</body>
</html>

Сохраните вашу страницу (Файл->Сохранить) и откройте ее (или нажмите обновить Обновить, если вы не закрывали страницу).

В окне веб-браузера это будет выглядеть ТАК.

Набор текста в HTML

Давайте теперь наберем какой-нибудь текст в нашу страничку. Процедура набора текста в HTML-документ является самой простой. Итак, наберем:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Компания АВС</title>
</head>

<body bgcolor="blue" text="red">
<h1 align="center">Компания АВС</h1>
Компания АВС — поставки электронной техники ведущих мировых производителей.<br>
В компании АВС вы всегда найдете:<dd>
телевизоры<dd>
видиомагнотофоны<dd>
видеоплейеры<dd>
музыкальные центры<dd>
компьютеры<dd>
принтеры и сканеры<dd>
и другие товары.
</body>
</html>

Чтобы, все не смешалось в одну строку, необходимо отформатировать текст. Для этого существует тег <br>. Этот тег нужно вставлять в месте, где нужно делать перенос строки. Существует также тег параграфа, т.е. небольшой отступ от начала строки. Это тег <dd>.

Сохраните вашу страницу (Файл->Сохранить) и откройте ее (или нажмите обновить , если вы не закрывали страницу).

В окне веб-браузера это будет выглядеть ТАК.

Разделители в HTML

Хотя простые линии очень полезны, они довольно скоро надоели создателям веб-страниц. Поэтому несколько лет назад, тег <hr> был доработан до его теперешнего, "резинового" в обращении, вида. Теперь помимо тонкой линии поперек страницы вы можете применить и другой тип линии, используя расширения тега <hr>.

Вставим теги в документ:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Компания АВС</title>
</head>

<body bgcolor="blue" text="red">
<h1 align="center">Компания АВС</h1>
<hr>
Компания АВС — поставки электронной техники ведущих мировых производителей.<br>
<hr noshade>
В компании АВС вы всегда найдете:<dd>
телевизоры<dd>
видиомагнотофоны<dd>
видеоплейеры<dd>
музыкальные центры<dd>
компьютеры<dd>
принтеры и сканеры<dd>
и другие товары.
<hr size="5">
</body>
</html>

А теперь спокойно разберем все возможные параметры линий:

<hr noshade> — по умолчанию, линия отбрасывает трудно-видимую тень. Для того чтобы тени от линии не было, необходимо использовать такой синтаксис.

<hr size="10"> — по умолчанию, линия имеет размер 1 пиксель. Но мы можем его менять. Для этого необходимо вписать size="ваше число", где ваше число— число пикселей.

<hr width="80%"> — по умолчанию, линия имеет ширину равную 100%, т.е. во всю длину окна браузера. В данном случае мы изменили этот параметр на 80%, т.е. ширина линии равна не 100, а 80 % занимаемой ширины окна.

<hr color="orange"> — по умолчанию, линия имеет прозрачный цвет. Но из-за тени, нам кажется, что линия серая. Мы можем изменить цвет линии. Чуть раньше было рассказано, и объяснено на примерах какими могут быть цвета. Синтаксис виден из примера.

Все эти параметры, могут сочетаться и использоваться параллельно.

Сохраните вашу страницу (Файл->Сохранить) и откройте ее (или нажмите обновить Обновить, если вы не закрывали страницу).

В окне веб-браузера это будет выглядеть ТАК.