Задаем шрифт, размер шрифта и другое оформление текста

Чтобы наша Web-страница выглядела более привлекательно, разделим текст на абзацы и выделим заголовок. HTML имеет шесть уровней заголовков разделов документа, пронумерованных цифрами от 1 до 6. Заголовки объявляются парой тегов с номерами, соответствующими уровню, например, <hl></hl> -заголовок раздела первого уровня, a <h6></h6> - заголовок раздела шестого уровня. От нормального текста заголовки отличаются размером и толщиной букв. Заголовок первого уровня hl отображается обычно очень крупным шрифтом, в то время как заголовок шестого уровня h6 - очень мелким.

Не следует путать заголовки разделов документа с рассмотренным ранее заголовком документа, определяемым элементом <head></head>.

В качестве заголовка текста используем первое предложение - Добро пожаловать на страничку компании ГЕОТОН! Для этого достаточно ограничить его тегами <h1> и </h1>.

u Вставьте в текст файла geoton.html теги <h1> и </h1> так, чтобы они ограничивали первое предложение текста, и этот фрагмент кода принял следующий вид:

<hl> Добро пожаловать на страничку компании ГЕОТОН!</h1>.

u Просмотрите полученный результат, для этого схраните файл, т.к. операцию сохранения необходимо всегда выполнять перед просмотром документа, так как браузер открывает файл для просмотра, загружая его в оперативную память компьютера с диска. Если после редактирования кода HTML вы не сохраните файл, то никаких изменений в браузере не увидите.Нажмите клавишу [F5] или кнопку Обновить (Refresh) на панели инструментов рабочего окна программы Internet Explorer. Файл geoton.html будет перезагружен, и вы увидите в окне браузера, как выглядит заголовок первого уровня .

u Просмотрите, как будут выглядеть заголовки остальных пяти уровней, изменяя в тегах номера: h2, h3 и т.д. После каждого изменения не забывайте сохранять файл и обновлять изображение в окне браузера.

u Когда вы закончите эксперименты, снова восстановите в файле geoton.html теги <hl> и </hl>

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

По умолчанию заголовок выравнивается по левому краю страницы. Но его можно также выровнять по правому краю или центрировать. Для правостороннего выравнивания в теге <hl> используется атрибут align=right, а для центрирования - align=center. Допускается также явное указание левостороннего выравнивания - align=left.

u Добавьте в тег <h1> атрибут align=center, чтобы центрировать заголовок. Этот элемент должен принять следующий вид:

<hl align=center>flo6po пожаловать на страничку компании ГЕОТОН!</hl>

Теперь займемся остальным текстом. Увеличим его размер и оформим текст полужирным курсивным начертанием. Для установки полужирного начертания используются парные теги <b></b>.

u Вставьте в файле geoton.html открывающий <b> и закрывающий </b> теги так, чтобы они ограничили текст Здесь вы узнаете... Этот элемент должен принять следующий вид:

<b>Здесь Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производим</b>

Просмотрите результат в браузере.

Курсивное начертание устанавливается с помощью тегов <i></i>.

u Вставьте в исходный код HTML тег <i> и </i> так, чтобы отредактированный элемент принял следующий вид:

<b><i>Здесь Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производим</i ></b>

Элементы разметки могут быть вложенными, как в данной структуре, где элемент <i>...</i> вложен в элемент <b>...</b>. Современные браузеры способны правильно обрабатывать вложенные теги. Поэтому вам необходимо следить за тем, чтобы не нарушался порядок вложения. Работа браузера окажется затрудненной, если вложенность будет нарушена. Например, такая запись будет неправильной: <b><i>…</b></i>Соблюдение вложенности - очень важная часть общей культуры написания HTML-кода.

С помощью пары тегов <u></u> можно установить подчеркнутое начертание текстового фрагмента, ограниченного данными тегами, а с помощью пары тегов <tt></tt> - отобразить текст телетайпным шрифтом.

После того, как вы просмотрите полученный результат, увеличим размер шрифта текста. Это можно сделать разными способами.

Теги <big></big> увеличивают размер шрифта текста, заключенного между ними.

u Добавьте в начало и конец вышеуказанного фрагмента кода соответственно теги <big> и </big> так, чтобы элемент принял следующий вид:

<big><b><i>Здесь Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производим</i></b></big>

С помощью тегов <small></small> вы можете уменьшить размер шрифта текста по сравнению с исходным.

Другой способ указания размера шрифта - с помощью тегов <font></font> с атрибутом size. В качестве значений этого атрибута используются целые числа от 1 до 7. Причем значение 1 соответствует минимальному размеру шрифта, а значение 7 - максимальному.

u Используя вместо тегов <big></big> теги вида <font size=1></font>, просмотрите как изменяется размер шрифта текста при разных значениях атрибута size - от 1 до 7.

В качестве значения атрибута size можно также использовать числа от 1 до 7 со знаком + (плюс) или - (минус). В этом случае размер шрифта соответственно увеличивается или уменьшается, по сравнению с исходным, например, теги <font size=+l></font> увеличат размер шрифта, по сравнению с текущим, на один уровень.

u Проверьте. Установите 5 в качестве значения атрибута size для рассматриваемого фрагмента текста: <font size=5></font>. HTML-код этого фрагмента должен быть таким:

<font size=5><b><i>Здесь Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производим</i></b></font>

В тегах <font></font> может использоваться также атрибут color для указания цвета шрифта, ограниченного тегами текста. Значения этого атрибута такие же, как и для рассмотренных ранее атрибутов, описывающих цвет фона и текста документа.

По умолчанию абзац с текстом Здесь Вы узнаете.. . выровнен влево. Центрируем его по горизонтали с помощью тегов <center></center>. Вы можете также выровнять абзац по правому краю страницы с помощью тегов <right></right> или по левому - с помощью тегов <lef t></lef t>.

u Вставьте теги <center></center>, ограничив ими указанный абзац так, чтобы код HTML принял вид :

<html>

<head>

<title>Компания ГЕОТОН</title>

</head>

<h1 align=center>До6po пожаловать на страничку компании ГЕОТОН!<h1>

<center><font size=5><h><i>Здесь вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы npoизводим<i><b></font></center>

Обратите внимание, что для центрирования абзаца мы использовали теги <center></center>, в отличие от атрибута align=center, который использован нами в тегах <hl></hl>.

Этот атрибут мы применим в тегах <р></р>, которые позволяют представить текст в виде отдельного абзаца.

u Отредактируйте элемент HTML, включающий текст Здесь Вы узнаете..., удалив теги <center></center>, <font size=5></font>, <b></b>, <i></i> и вставив теги <p> и </p> с атрибутом style так, чтобы этот элемент принял следующий вид:

<р style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center">3десь Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производим</р>

Как видите, язык HTML позволяет использовать разные способы стилевого оформления. Вместе с тем, применение языка каскадных таблиц стилей CSS является более предпочтительным.

Мы рассмотрели только один вариант использования языка таблиц стилей, когда определение стиля располагается непосредственно внутри тега элемента, который вы описываете. Это делается с помощью атрибута style, используемого с большинством стандартных тегов HTML. Но есть и другие варианты использования CSS.

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

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

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

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

В настоящее время язык CSS насчитывает довольно большое количество свойств элементов HTML, которыми он может управлять. Применяя «безопасные», т.е. совместимые с максимальным количеством браузеров элементы CSS -свойства шрифта, цвета элементов и фона, свойства текста и границ - вы можете значительно облегчить свою работу и сделать ваши Web-страницы более привлекательными в плане оформления текста.

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

На каждую Web-страницу можно поместить любое количество рисунков. Вы можете использовать готовые графические изображения или создать их сами. Посмотрим, как вставить в Web-документ уже готовый рисунок.

Графические изображения, которые вы вставляете в свои Web-документы, должны быть созданы в таком графическом формате, который поддерживается браузером. Стандартные форматы Web-графики - GIF, JPG и PNG. Размеры их файлов минимальны по сравнению с другими форматами, что значительно сокращает время загрузки из сети.

Вставим на первую страницу нашего сайта рисунок.

Если у вас установлена операционная система Windows версии 98/МЕ/2000, вы можете использовать рисунок CLOUD.GIF, который обычно находится в папке Windows, т.е. той папке, в которой установлена операционная система Windows.

Если у вас установлена операционная система Windows ХР, вы можете использовать рисунок logo.jpg из папки C:\WINDOWS\Help\Tours\htmlTour.

Вы можете использовать любой другой рисунок подходящих размеров. Важно чтобы имя файла этого рисунка состояло только из символов английского алфавита.

Далее в тексте мы будем рассматривать работу с рисунком CLOUD.GIF-ваше название может быть другим.

Прежде всего, этот файл рисунка следует скопировать в папку Web, которую мы создали для хранения файлов сайта.

u Скопируйте файл CLOUD.GIF или любой другой файл с расширением .GIF в папку Web.

Для вставки изображения в Web-документ используется одиночный тег <img> с атрибутом src, значение которого соответствует имени вставляемого файла или его адресу в Интернете. С помощью необязательного атрибута <border> можно включить отображение рамки вокруг рисунка. Значение 1 для этого атрибута создаст рамку толщиной 1 пиксел. Таким образом, тег, вставляющий рисунок, должен выглядеть следующим образом:

Вставим его после заголовка Добро пожаловать на страничку компании ГЕОТОН!

Операционная система Windows не различает регистр букв в названиях имен файлов, но операционные системы семейства Unix различают его, поэтому следует тщательно следить за тем, чтобы имя файла в теге указывалось с соблюдением регистра. Начинающие Web-дизайнеры часто недоумевают: почему рисунок был виден на странице при тестировании на локальном компьютере и не появляется при загрузке страниц с удаленного сервера. А все дело в том, что они указали cloud.gif, а на диске хранится CLOUD.GIF.

u Вставьте пустую строку после элемента <h1 align=center>Дo6po пожаловать на страничку компании ГЕОТОН! </ h1> и введите в ней тег <img src=CLOUD.GIF border=l> для включения изображения в документ.

Чтобы выровнять рисунок по центру, следует, воспользовавшись тегами <center> </center>, записать строку кода HTML, вставляющего рисунок, следующим образом:

u Откорректируйте указанную строку в файле geoton.html.