Это самый КРУПНЫЙ заголовок :-)

А это самый мелкий

Заголовки, как и абзацы можно выравнивать таким же способом, через align.

Форматирование текста с помощью стилей

Логические теги позволяют форматировать текст согласно его смыслу, а физические теги реализуют пожелания относительно внешнего вида текста в браузере. Для физического форматирования текста можно использовать следующие теги:

- <b> полужирный текст;

- <big> увеличивает размер шрифта по умолчанию;

- <blink> мерцающий текст;

- <i> курсив;

- <s> просвечивающий текст;

- <small> уменьшает размер шрифта по умолчанию;

- <sub> подстрочный текст;

- <sup> надстрочный текст;

- <tt> мошиниринный шрифт (все знаки одинаковой толщины);

- <u> подчеркнутый текст. Логические стили применяются с помощью контейнеров, т.е. текст, к которому применяется логический стиль, заключается между начальным и конечным тегом;

- <em> выделенный текст;

- <strong> сильно выделенный текст;

- <cite> текст в виде цитаты;

- <code> текст, представляющий собой фрагмент HTML-кода;

- <den> текст, представляющий собой определение;

- <samp> текст, представляющий собой фрагмент кода;

- <var> текст, определяющий переменную или значение.

Изменение размера и цвета шрифта

Для изменения размера шрифта в HTML предусмотрен одиночный тег <font>, который имеет атрибут size. Используя этот атрибут, можно установить абсолютный размер шрифта (от 1 до 7) или относительный по отношению к основному шрифту страницы (-4 до +4). Синтаксис определения размера шрифта следующий: <font size=значение>.

Размер основного шрифта документа устанавливается одиночным тегом <basefont>, который имеет следующий синтаксис:
<basefont size =значение>.

Для изменения цвета шрифта служит атрибут color:

<font color=X>

Атрибут color=X – устанавливает цвет текста. Параметр Х задается шестнадцатеричным кодом или словом, указывающим цвет на английском языке. Шестнадцатеричный и именной цветовые коды представлены в табл. 1.

Таблица 1

Для указания типа шрифта служит атрибут face.

Создание линий в HTML

Для разделения текста на части можно воспользоваться горизонтальными линиями. Тег <hr> вставляет в текст горизонтальную разделительную линию. Этот тег имеет следующие атрибуты:

width – определяет длину линии в пикселях или процентах от ширины окна браузера;

size – определяет толщину линии в пикселях;

align – определяет выравнивание горизонтальной линии. Атрибут может принимать следующие значения:

left – выравнивание по левому краю документа;

right – выравнивание по правому краю документа;

center – выравнивание по центру документа (используется по умолчанию);

noshade – определяет способ закраски линии как сплошной. Атрибут является флагом и не требует указания значения. Без данного атрибута линия отображается объемной;

color – определяет цвет линии. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов. Атрибут работает только в Internet Explorer.

Например:

<hr noshade width="50%">

<hr align=center color=green width="50%">

<hr size=7 width="50%">

Вставка комментариев

Комментарии служат для того, чтобы можно было проще разобраться в HTML-коде документа. Они служат пояснениями к отдельным фрагментам кода. Для вставки комментариев используется синтаксис:

<! - - Текстовая часть комментария - - >

Комментарии могут занимать несколько строк:

<! - - Этот комментарий

занимает две строки - - >

6.3. Создание и тестирование HTML-файла

Создание списков

Списки – это очень мощное средство структурирования документа. С их помощью можно обеспечить четкую и ясную подачу материала.

В HTML существуют следующие типы списков:

нумерованный список <ol>

маркированный <ul>

список определений <dl>

Нумерованные списки называют упорядоченными. Они создаются с помощью тега <ol> </ol>. Каждый элемент списка внутри этого тега определяется с помощью тега <li>. Синтаксис определения списка имеет вид:

<ol type=тип> <!- - определяется нумерованный список - - >

<li> 1-й элемент списка

<li> 2-й элемент списка

...

<li> последний элемент списка

</ol>

Атрибут type устанавливает стиль форматирования списка арабскими или римскими цифрами, а также буквами алфавита. Параметр тип может принимать значения, приведенные в табл. 2.

Таблица 2

Для изменения нумерации элемента внутри списка следует установить значение параметра для атрибута type в соответствующем этому элементу теге <li>, используя конструкцию:

<li type=тип>

Последующие элементы списка будут иметь нумерацию, указанную в атрибуте type тега <ol>.

В отличие от нумерованных в маркированных списках перед каждым элементом отображается маркер. Создание маркированных списков производится с помощью HTML-конструкции вида:

<ul type=тип_маркера>

<li type= тип_маркера>элемент списка

<li>элемент списка

...

<li type= тип_маркера>элемент списка

</ul>

Для маркированных списков могут быть применены различные типы маркеров (табл. 3)

Таблица 3

Списки определений служат для создания абзацев, определяющих термин, указанный в элементе списка. Элементы списка определений состоят из названия элемента и его описания, поэтому такие списки в какой-то мере напоминают толковые словари. Названия элемента устанавливается с помощью тега <dt>, а его определение с помощью тега <dd>. Для определения списка определений применяется следующая синтаксическая конструкция:

<dl>

<dt> элемент списка (термин)

<dd> определение элемента списка

<dt> следующий элемент списка (термин)

<dd>определение элемента списка

…

<dt> последний элемент списка (термин)

<dd>определение элемента списка

</dl>

6.4. Таблицы в HTML

Для размещения кода таблицы HTML служит контейнер
<table> </table>. При описании таблицы нужно указать количество строк и столбцов, а также их расположение. Строки определяются с помощью теговой пары <tr> </tr>, которые могут включать следующие атрибуты:

align - устанавливает выравнивание текста в ячейках строки. Допустимые значения: align=left (выравнивание влево), align=center (выравнивание по центру), align=right (выравнивание вправо);

valign - устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: valign=top (выравнивание по верхнему краю), valign=middle (выравнивание по центру), valign=bottom (выравнивание по нижнему краю).

Каждый контейнер <tr> содержит одну строку таблицы. Внутри этого контейнера помещаются описания ячеек. Для этого служит пара <td></td>, которые могут включать следующие атрибуты:

nowrap - атрибут означает, что содержимое ячейки должно быть показано в одну строку;

colspan - устанавливает ширину ячейки по горизонтали. Например, colspan=3 означает, что ячейка простирается на три колонки.

rowspan - устанавливает высоту ячейки по вертикали. Например, rowspan=2 означает, что ячейка занимает две строки;

align - устанавливает выравнивание текста в ячейке. Допустимые значения: align=left (выравнивание влево), align=center (выравнивание по центру), align=right (выравнивание вправо);

valign - устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: valign=top (выравнивание по верхнему краю), valign=middle (выравнивание по центру), valign=bottom (выравнивание по нижнему краю);

width - устанавливает ширину ячейки в пикселах (например, width=200);

height - устанавливает высоту ячейки в пикселах (например, height=40).

Для определения интервалов в таблице служат атрибуты cellspacing и cellpandding. Атрибут cellspacing – определяет расстояние между рамками ячейками в таблице значение в пикселях, а атрибут cellpandding устанавливает расстояние между рамкой ячейки и текстом. Например:

<table border=2 windth=600 cellspac ing=4 cellpandding=5 >

6.5. Гипертекстовые ссылки

Существуют три основных типа гиперссылок: внутренние, внешние и относительные. Внутренние ссылки – это ссылки на объекты в пределах одного документа. Данный тип ссылок удобно использовать на длинной странице, чтобы иметь возможность быстро перемещаться между ее разделами. Внешние ссылки – это ссылки на другие Web-сервера. Относительные ссылки – это на другие Web-страницы, расположенные на одном сервере со страницей.

В каждой ссылке содержится URL (Uniform Resource Locator) – унифицированный локатор ресурсов. URL – это адрес Web-страницы.

URL состоит из двух основных элементов: типа протокола и собственного адреса. Тип протокола определяет вид ресурса Internet, с которым устанавливается связь. Самым распространенным протоколом является http:// - протокол передачи гипертекста, с помощью которого по Web передаются HTML-документы. Собственный адрес – это имя файла, каталога или компьютера. Например:

http://www.huracan-oreiro.narod.ru/read.html

В этом примере префикс http:// указывает тип используемой службы Интернета, www.huracan-oreiro- представляет имя сервера. Компонент narod.ru определяет домен, в котором находится сервер.

Создание гиперссылок на другие Web-страницы.Большинство гиперссылок являются сами по себе частью элемента привязки, который создается с помощью тега <a>. Этот тег можно использовать в основной части HTML-документа, но только не внутри пары <head> </head>. Самым распространенным атрибутом тега <a> является href. Его значением является путь к файлу, на который делается ссылка. Элемент привязки всегда завершается конечным тегом </a>. Сам URL должен заключаться в кавычки и следовать определением элемента привязки.

В HTML для гиперссылки используется следующий формат:

<a href=" url">текст ссылки</a>

Создание внутренних ссылок в документах.Кроме ссылок на другие документы, часто бывает полезно включить ссылки на разные части текущего документа. Например, большой документ читается лучше, если он имеет оглавление со ссылками на имеющиеся разделы. Для организации внутренней ссылки надо создать указатель, определяющий место расположения. Таким указателем является параметр name в тэге <a>. Например, Вам надо сослаться в Вашем большом документе на раздел "Теория"(theory). В HTML – коде перед этим разделом надо будет вставить следующую строку: <a name=theory></a> Содержимое тэга <a> отсутствует, так как нет необходимости как-то выделять текст. После того как место назначения определено, приступаем к созданию ссылки на него. Для задания внутренней ссылки перед указываемым именем ставится префикс #, говорящий о том, что это внутренняя ссылка <a href="#theory">Теория</a>.

Определение раздела текста именованным объектом выполняется с помощью тега <a> и имеет следующий синтаксис:

<a name="имя_раздела">раздел текста</a>

Создание относительных ссылок. Ссылки создаются, как и в предыдущем случае, с помощью контейнерного тега <a>. Для создания гиперссылки используется формат:

<a href=" url">текст ссылки</a>

При создании относительной ссылки нет необходимости включать URL доменное имя.

Создание ссылок на адреса электронной почты.Если тема Web-страницы такова, что желательно получить на нее отзыв или другую информацию по электронной почте, то следует предусмотреть в ней ссылки на адрес электронный почты. Используя эту ссылку, пользователь имеет возможность отправить сообщение непосредственно из браузера. Синтаксис ссылки на адрес электронной почты имеет формат:

<a href=mailto:электронный_адрес>текст адреса </a>

Например:

<body>

ваши отзывы и предложения можно отправить по адресу <br>

<a href="mailto:maxal@topmail.kz">email: maxal@topmail.kz </a>

</body>

Отображение встроенных рисунков

Изображения в Интернете бывают разных форматов. Самыми признанными и распространенными среди них являются gif, jpg.

Формат gif позволяет создавать анимированные картинки. Этот формат является сжатым, и допустимое количество цветов в нем 256. Сжатие происходит без потерь, т.е. изображение записывается без каких-либо преобразований. Формат jpg также является сжатым, и применяется для изображений требующих большое количество цветов вплоть до 16 млн. Сжатие происходит после оптимизации и поэтому происходят потери в качестве. Размер файла сильно зависит от требуемого качества изображения, которое может иметь 7 уровней качества (от очень плохого до наилучшего).

Для размещения на Web-странице встроенного рисунка используем тег <img>. Этот тег имеет атрибут scr указания адреса отображаемого рисунка, но можно использовать вместо пути его URL в Internet.

<html>

<base href="http://www.mjk.msk.ru/~dron/images">

<p><img src="prob.gif">

<p><img src="../banner.gif">

<p><img src="http://www.rambler.ru/dronban.jpg">

</html>

Первая картинка будет загружаться из адреса http://www.mjk.msk.ru/~dron/images/prob.gif. Вторая уже будет загружаться из каталога высшего уровня, т.е. в данном случае прямо из http://www.mjk.msk.ru/~dron/. Последняя картинка демонстрирует возможность загрузки картинок с других сайтов, и загрузится с сайта http://www.rambler.ru/. Эти названия изображений даны только для примера и на самом деле не существуют.

Кроме атрибута src существуют еще несколько атрибутов:

alt -этот атрибут задает текст, который будет изображаться вместо картинки, если она не загрузилась или не отображается. Этот текст также выскакивает во всплывающей подсказке. Как правило, в тексте указывается краткое описание изображения или ссылки, а также иногда содержит в себе название файла с его размером. Пример:

<img src="pic1.gif" alt="Рис.1. Пример вращения тела.">

<img src="b.jpg" alt="b.jpg">

Большинство атрибутов в HTML не требуют заключения в кавычки, но атрибут alt лучше ограничивать, т.к. он может содержать пробелы и разделительные знаки, которые браузер не сможет обработать.

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

align - задает выравнивание изображения относительно текущей строки: align=top - выравнивает верхний край изображения по верхнему краю текущей строки; align=middle - выравнивает центр изображения по базовой линии текущей строки; align=bottom - установка по умолчанию. Выравнивает нижний край изображения по базовой линии текущей строки; align=left - выравнивает изображение по левому полю; align=right - выравнивает изображение по правому полю.

width и height - Эти атрибуты задают горизонтальный и вертикальный размер картинки, чтобы еще до начала загрузки изображения браузер выделил ему требуемое место.

border- задает толщину рамки, которой будет обрисовываться изображение. Если изображение не является ссылкой, то оно по умолчанию не окружается рамкой. Если же это изображение-ссылка, то толщина рамки будет равна 2. Рамка иногда может портить стиль вашей страницы, тогда используйте border=0.

vspace - используется для указания ширины пространства сверху и снизу от изображения в пикселах. Как правило, по умолчанию равно 0.

usemap и ismap - устанавливают на картинку карты ссылок, на которых я остановлюсь подробнее в следующих шагах.

6.6. Технология CSS. Проектирование оформления web-сайта

Каскадные таблицы стилей (Cascading Style Sheets) — это технология управления дизайном web-страницы, которая существенно увеличивает диапазон возможностей описания внешнего вида страницы и упрощает сам процесс редактирования и форматирования ее содержимого.

Стиль - набор параметров, задающий внешнее представление объекта. Набор стилей всех элементов называют таблицей стилей.

Существует различные методы, которыми это можно сделать:

Внутренние таблицы стилей задают внутри элемента HTML, при помощи атрибута style. Практически каждый тег HTML может иметь этот атрибут. Это говорит о том, что к этому тегу применяется некое стилевое описание

Пример:

<h1 style="">………</h1>

Все что написано между кавычками и будет являться стилевым описанием.

<p style="color: #ff0000; font-size:12px"> это параграф со стилем </p>

Встроенные таблицы стилей при таком способе таблица стилей встраивается в заголовок html-страницы. Для этого в HTML существуют теги <style></style>, с параметром type, который указывает, что подключается именно таблица стилей CSS.

<html>

<head>

<title>таблица стилей в заголовке html-страницы </title>

<style type="text/css">

h1{

Color:red

}

</style>

</head>

Внешние таблицы стилейнаходится во внешнем файле и присоединяется к HTML-документу через элемент link. При этом CSS-файл с внешней таблицей стиля всегда сопровождает HTML-файл документа.

Пример:

<html>

<head>

<title>Пример подключения внешней таблицы стиля </title>

<link rel="stylesheet" type="text/css" href="file_of_style.css">

</head>

Для подключения внешнего CSS используется тег link. Тег устанавливает связь с внешними документами, чаще всего с таблицами стилей, должен располагаться в секции head, в одном документе может быть несколько тегов link.

У тега link используются три атрибута:

rel — отвечает за установку взаимосвязи и в данном случае имеет значение "stylesheet";

type — MIME-тип подключаемого объекта. У нас это таблица стилей — значит тип "text/сss";

href — абсолютный или относительный путь к самому CSS-файлу.