Глава 4. Создаем веб-страничку

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

Язык HTML

Основой каждой странички является HTML (сокращение от английского Hypertext Markup Language) - язык разметки гипертекста.

Документ, написанный на языке HTML, представляет собой текст, в который вставлены теги разметки гипертекста (markup tags). Теги помогают браузеру разобраться, как должен быть расположен текст на экране, в каком месте будут находиться рисунки, хранящиеся в разных файлах, и т.д. С помощью тегов формируются связи с другими веб-сайтами и ресурсами Интернета. Текст с тегами называется исходным кодом, или HTML-кодом. Просмотреть готовый файл, написанный на языке HTML, можно в браузере (Microsoft Internet Explorer, Netscape Navigator). Как пользоваться этими программами, вы уже знаете. Там вы уже не увидите тегов, так как они находятся «внутри» документа и на экране браузера не отображаются.

Помните, что каждая компьютерная программа предназначена для определенной цели и решает свои задачи. Никогда не используйте программу Microsoft Word или Microsoft Power Point для создания веб-страниц (там есть специальная команда Сохранить как Web-страницу). Программа Microsoft Word - это текстовый редактор, созданный для редактирования текстов, а не веб-страниц. Она включает в страницу так много тегов-паразитов, что объем страницы возрастает в несколько раз! То же касается и программы Microsoft Power Point.

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

Итак, чтобы понять строение HTML-документов и лучше запомнить теги, нужно познакомиться с азами языка HTML. Любой веб-документ вы можете просмотреть с помощью программы Блокнот, выбрав в браузере команду меню Вид ► Просмотр в виде HTML. В Блокноте вы можете править страницу и даже написать ее заново вручную. Но мы будем показывать вам основные операции, выполняемые с помощью двух самых распространенных веб-редакторов - Microsoft FrontPage и Macromedia Dreamweaver. Когда вы хорошо изучите язык HTML, то вам неплохо будет подключить еще и программу Home Site.

Для создания веб-страницы одних веб-редакторов недостаточно. Нужен графический редактор, например Adobe Photoshop, который умет не только хорошо обрабатывать картинки и фотографии (добавлять или убирать яркость и контрастность, менять размер изображения), рисовать кнопки и заголовки, но и отлично оптимизирует изображения - уменьшает их объем практически без потери качества. А чем меньше «весят» картинки, тем быстрее они грузятся в Интернете. И, конечно же, нужна программа для «переброски» сайта на сервер провайдера. О них мы уже говорили в главе 2 - это программы CuteFTP, Windows Commander и Far Manager.

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

Итак, приступим. Создайте папку HP. В ней будут храниться все элементы вашего сайта.

Внимание

Запомните, что все файлы одного сайта (HTML-документы, графические файлы, видео- и аудиофрагменты и т.д.) должны храниться строго в одной папке или же в папках, вложенных в нее.

Возьмите лист бумаги, продумайте и запишите структуру вашего сайта (основные разделы - их названия на русском языке и имена файлов латинскими буквами с расширением .htm). Пример: Главная страница - index.htm, История - istoriya.htm или ist.htm, и т.д.

Внимание

Запомните, что названия HTML-документов всегда пишутся маленькими латинскими буквами без пробелов. Можно использовать цифры, а также знаки «подчеркивание» и «тире». Первая, главная страница практически всегда носит название index.htm (.html, .shtml).

Продумайте цветовое решение вашего сайта. Можно взять за основу использование любого темного цвета и размывку его от темного тона к светлому. Затем можно взять один контрастный цвет и использовать его для заголовков или ссылок.

Внимание

Работая в автоматическом редакторе, постоянно следите за HTML-кодом создаваемой страницы.

Загрузите программу-редактор веб-страниц. Учтите, что программа Microsoft FrontPage идет в стандартном наборе программ Microsoft Office, а программу Macromedia Dreamweaver надо приобретать отдельно, но сделать это очень рекомендуется. Первое, на что следует обратить внимание в этих программах, - это панель инструментов, почти такая же, как в программе Microsoft Word. Если вы владеете программой Microsoft Word, то освоить эти веб-редакторы не составит для вас особого труда.

Программы для создания сайтов

Теперь попробуем создать самый простой HTML-документ. Первое, что вы увидите перед собой, загрузив программу FrontPage или Dreamweaver, будет чистый лист. На нем вы и будете строить свою страничку. Введите на нем фразу моя страничка и сразу обратите внимание на HTML-код.

В программе Dreamweaver, для того чтобы увидеть HTML-код, надо щелкнуть на значке, расположенном в нижнем правом углу окна программы (рис. 4.1). Откроется диалоговое окно Code Inspector (Просмотр HTML-кода). В программе FrontPage надо просто Щелкнуть на вкладке HTML внизу окна.

Познакомимся с тегами поближе. Посмотрите внимательно на HTML-код. Вы увидите основные теги разметки страницы:

<HTML>

<HEAD>

<meta http-equiv="Content-Type" content="text/html;

charset=windows-1251"»>

  <TITLE>Моя страничка</TITLE>

</HEAD>

<BODY>

Моя страничка</BODY>

</HTML>

Рис. 4.1. Окно программы Macromedia Dreamweaver

Внимание

Прописные и строчные буквы в написании тегов значения не имеют. Компьютер одинаково отреагирует на записи <title> и <TITLE>.

Внимание

Запомните, что теги - это определенные последовательности символов, заключенные между знаками < (меньше) и > (больше). Символ < обозначает начало тега, символ > обозначает конец тега. Все, что заключено между тегами <HTML> и </HTML>, является HTML-документом.

Любой HTML-документ состоит из двух частей. Первая часть - заголовок, который находится между тегами <HEAD> и </HEAD>, или же «голова» странички. В нем содержится служебная информация о документе, которая не выводится на экран. Название странички располагается между тегами <TITLE> и </TITLE> и появляется в заголовке окна браузера. Например:

<TITLE>Моя страничка</TITLE>

Рис. 4.2. Свойства страницы в программе Macromedia Dreamweaver

Не забудьте проверить кодировку (должна быть windows-1251). Если вы работаете в программе Macromedia Dreamweaver, то выставить кодировку и прочие параметры вашей страницы вам будет очень легко: выберите команду меню Modify ► Page Properties (Изменить ► Свойства страницы) (рис. 4.2). В программе Microsoft FrontPage диалоговое окно свойств страницы (Page Properties) вызывается щелчком правой кнопкой мыши в любом месте экрана.

Внимание

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

Рис. 4.3. Файл index.htm в браузере

Вторая часть HTML-документа - тело, которое выводится на экран браузером, - содержит текст, картинки, видеофрагменты. Она заключается между тегами <BODY> и </BODY>. Форматирующие теги бывают парные и непарные, открывающие и закрывающие. Область действия парного тега начинается с того места, где стоит открывающий тег, а кончается там, где встречается закрывающий. Так, например, текст будет выводиться на экран полужирным шрифтом, если стоит между тегами <В> и </В>. Признак закрывающего тега - символ /.

Непарных тегов мало, например для перехода на новую строку используется <br> (Line Break).

Сохраните этот файл под названием index.htm в папке НР. Затем откройте ваш файл в окне браузера с помощью команды Файл ► Открыть (рис. 4.3).

Разобьем текст на абзацы

Как разбить текст на абзацы? Поставьте тег <р> перед началом абзаца. Когда браузер обнаружит этот тег, он сам вставит перед текстом пустую строку. Рассмотрите пример и объясните, какой тег закрывает абзац.

<р>текст</р>

Какими являются эти теги - парными или непарными? Почему?

Вместе с тегом абзаца можно задать атрибуты выравнивания (ALIGN):

• RIGHT - по правому краю;
• LEFT - по левому краю;
• CENTER - по центру.

Рассмотрите примеры оформления текстов и постарайтесь запомнить соответствующие теги.

Тег <р align=left> обеспечит

выравнивание текста абзаца по

левому краю.

(Этот абзац выровнен по левому

краю.)

Чтобы выровнять

текст абзаца по правому краю,

используйте тег <р align=right>. Тогда ваш

текст

будет выглядеть так же, как этот.

Такое выравнивание текста значительно

затрудняет чтение, но привлекает к себе

внимание. Поэтому его часто используют для

оформления заголовков и эпиграфов.

(Этот текст выровнен по центру.)

Такого расположения текста можно добиться

с помощью тега <р align=center>.

Его используют для оформления коротких

заголовков,

но большой текст, выровненный по центру,

читать очень тяжело.

Если вас не устраивает расстояние текста от левого края и вы хотите сделать красную строку, то поставьте друг за другом после тега <р> несколько символов, обозначающих пробел ( ). Например:

Заголовок

<p>&nbsp;&nbsp;&nbsp;Текст

Внимание

Запомните, что в основном тексте не должно быть переносов!

Выравнивание в веб-редакторах устанавливается очень просто, точно так же, как в программе Microsoft Word. Существуют специальные, однотипные для всех программ кнопки на панели инструментов программы FrontPage и на панели Properties (Свойства) программы Dreamweaver (см. рис. 4.1). Один абзац отделяется от другого при нажатии клавиши Enter.

Заголовки

Для выделения логических частей текста обычно используют заголовки (headings). Они обозначаются прописной или строчной латинской буквой h. Цифра после буквы указывает уровень заголовка (всего их может быть шесть). Как и любой текст, заголовки можно выравнивать по левому или правому полю, а также по центру. Переносы в заголовках запрещены. Рассмотрите приведенный ниже пример и объясните значение каждого из тегов.

<hl align=center>Проекты нашего лицея</h1>

<h2 align=left>Журналистика</h2>

<h3 align=right>Фотогалерея</h3>

<h4 align=center>Театральная студия</h4>

<h5 align=center>Музыкальный калейдоскоп</h5>

Давайте усовершенствуем нашу страницу index.htm, используя заголовки и абзацы (листинг 4.1). При работе в веб-редакторе это можно сделать следующим образом. В программе FrontPage вы должны выделить нужную фразу, а затем в раскрывающемся списке в левом верхнем углу экрана выбрать заголовок того или иного уровня. Работая в программе Dreamweaver, вы будете выбирать заголовки в раскрывающемся списке Format (Формат) на панели Properties (Свойства). Учтите, что вы можете работать и напрямую с HTML-кодом, внося исправления прямо в него.

Листинг 4.1. Страница с заголовками и абзацами

<HTML> 

<HEAD> 

<TITLE>Моя страничка</TITLЕ>

</HEAD> 

<BODY> 

<Н2 ALIGN = Center>Привет! Это моя личная домашняя

страничка!</Н2>

<hr>

<Н3>Мой город</Н3>

<р>Я живу в Москве</р>

<Н3 ALIGN = Left>Моя школа</Н3>

<р align=left>Я учусь в школе №...</р>

<Н4 ALIGN = Center>Мои увлечения</Н4>

<р align=center>Мои увлечения - музыка, спорт.</р>

<Н5 ALIGN = Right>Мои друзья</Н5>

<р align=right> Мои друзья учатся со мной в одном

классе.</р>

<br>

<HR>

<Н6 ALIGN = Center>&copy; Design Иван Петров</Н6>

</BODY>

</HTML>

Рис. 4.4. Файл index.htm в окне браузера

Сохраните файл. Посмотрите, как он будет выглядеть в браузере. Не забудьте обновить изображение, щелкнув на значке Обновить (рис. 4.4).

Попробуйте поменять h2 на h1, а затем на h3 и h4 и посмотрите, что получится. Поэкспериментируйте с выравниванием заголовков и текста относительно окна страницы. Найдите наиболее эстетичный и читаемый вариант. При желании дополните текст своими данными.

Добавим немного эмоций

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

Фрагмент текста можно выделить полужирным шрифтом (Bold). Для этого используются открывающий тег <b> и закрывающий тег </b>. Например:

<b>текст</b>

Отдельные слова можно подчеркнуть (Underline). В таком случае применяем теги <u> и </u>.

Часто для выделения используют курсив (Italic). Для этого служат теги <i> и </i>...

Внимание

Не забывайте закрывать данные теги, иначе вы выделите весь текст, а не отдельные места в нем, как хотели.

В веб-редакторе для выделения тех или иных слов нужно пользоваться специальными кнопками на панели инструментов: В (Bold), I (Italic). Но вы можете задавать оформление и непосредственно в коде.

Если вы хотите одновременно выделить текст полужирном шрифтом и курсивом, используйте любой из двух вариантов кода:

<i><b>текст</b></i>

<b><i>текст</i></b>

Внимание

В этом примере заключена одна из главных идей HTML: тег, который открылся первым, закрывается последним, то есть вы вкладываете теги друг в друга.

Покажите действие главного правила HTML на своих примерах.

Теги, управляющие шрифтами, также имеют свои атрибуты. Рассмотрим их. Вы можете увеличить или уменьшить размер шрифта, который измеряется в пунктах (один пункт равен ¹/₇₂ дюйма или 0,353 мм). Увеличение задается относительно размера, установленного в браузере по умолчанию:

<font size=+n>текст</font>

<font size=-n>текст</font>

где n - число пунктов, на которое вы хотите увеличить или уменьшить размер шрифта. Шрифт текста, расположенного между тегами <font size=±n> и </font>, будет увеличен или уменьшен.

Пример:

<р>Я учусь в <font
SIZE=-2>Лицее</font>

Атрибут face означает название шрифта. К сожалению, не у всех может быть такой же шрифт, как у вас. Многие программы просмотра используют шрифт по умолчанию и могут вас не понять, если в названиях вы будете употреблять какой-нибудь редкий шрифт. Поэтому не рекомендуется часто использовать этот атрибут.

Пример:

<font size="+7" color="red"
face="Arial">текст</font>

В данном примере есть еще один атрибут - color. Он обозначает цвет шрифта, но о цветах мы поговорим чуть позже.

В веб-редакторах для изменения типа и размера шрифта служат раскрывающиеся списки. В программе FrontPage такой список расположен на панели инструментов Formatting (Форматирование), а в программе Dreamweaver - на панели Properties (Свойства) (по умолчанию в них установлено значение default font).

Выделим логические части

Какие еще элементы можно использовать для выделения логических частей текста? Очень хороший способ - горизонтальная линия (Horizontal Rule). Она обозначается тегом <hr>, закрывающий тег в данном случае не требуется. Перед тегом <hr> и после него не нужно ставить тег <р> или <br>, поскольку он сам по себе уже является разделителем. Но если вас не устраивает расстояние от текста до линии, поставьте несколько тегов <br> друг за другом после тега <hr>. Например:

Заголовок

<hr>

<br><br><br>Текст

Чем больше тегов <br>, тем дальше текст отстоит от линии. Этот прием, кстати, можно использовать не только в сочетании с линией.

У тега <HR> есть атрибуты, которые не являются обязательными, но на всякий случай их надо знать:

<hr align="..." color="..."
noshade size="n" width="n">

Давайте разберемся, что они обозначают.

• a1ign= - в кавычках пишем сторону выравнивания: right (по правому краю), left (по левому краю) и center (по центру). Соответственно, ваша линия будет располагаться по правому, левому краю или в центре;
• color= - цвет линии. Задается стандартно (как - вы скоро узнаете);
• noshade - по умолчанию линия является объемной;
• size="n", где n - толщина линии в пикселях;
• width="n" или width="n%", где n - ширина линии в пикселях или процентах.

Наиболее часто употребляемые параметры - размер и толщина линии - задаются с помощью атрибутов Size и Width: <HR SIZE=2 WIDTH="10%">.

В веб-редакторах горизонтальная линия вставляется с помощью команды Insert ► Horizontal Rule (Вставка ► Горизонтальная линия).

Совет

Помните, что для экрана размером 800×600 максимальная ширина n=750. Если вы не укажете атрибут width, то линия получится на весь экран. Значение в процентах от свободного пространства - n%. Например, если вы хотите, чтобы линия занимала ровно половину окна, то ставьте 50%. В одном теге не может быть двух атрибутов width - значение атрибута указывается либо в процентах, либо в пикселях.

Горизонтальную линию можно нарисовать с помощью графического редактора, а затем вставить в HTML-код (рис. 4.5).

Рис. 4.5. Горизонтальная линия

Нарисуйте разноцветную линию в каком-нибудь графическом редакторе, например Adobe Photoshop, и сохраните ее в файле hr.gif в том же каталоге, в котором находится ваш HTML-документ (файл index.htm). После того как линия нарисована, нужно вставить ее в исходный код своей страницы. Это делается с помощью непарного тега <img src>:

<IMG SRC="l.gif">

В веб-редакторе FrontPage графическое изображение вставляется с помощью команды Insert ► Picture ► From File (Вставка ► Рисунок ► Из файла). В программе Dreamweaver следует использовать команду меню Insert ► Image (Вставка ► Изображение) или щелкнуть на значке с изображением дерева на панели Objects (Объекты) (см. рис. 4.1).

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

Внимание

Не забывайте, что все изображения должны храниться в той папке, в которой находятся все элементы вашего сайта, или же в папках, вложенных в нее!

Вставим текст «один к одному»

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

<PRE> 

   Избегайте драматического эффекта! 

Тиканье, мерцание, перемещение, прокрутка... 

Эти новые спецэффекты повсюду в Веб. 

- По возможности избегайте пиктограммы 

"В процессе разработки" 

- Используйте соответствующий язык 

- Не перегружайте вашу страницу большими 

изображениями 

- Проверяйте как можно чаще ссылки на вашей странице 

</PRE>

Совет

Если вы набираете текст вручную, то у вас не будет проблем ни в одном веб-редакторе. Если же вы копируете его, особенно из программы Microsoft Word, то в случае с программой Dreamweaver особых проблем не возникнет, а вот в программу FrontPage потянутся множество тегов-паразитов из этого текстового редактора. Поэтому рекомендуется использовать в качестве промежуточного звена простейший текстовый редактор Блокнот. Сначала вы копируете текст в редакторе Microsoft Word, вставляете его в Блокнот, выделяете, копируете еще раз и вставляете в FrontPage. Это займет у вас ненамного больше времени, зато ваш файл не будет «весить» лишние килобайты, возникающие из-за тегов-паразитов.

Между тегами <PRE> и </PRE> можно вставить несколько абзацев любого текста, скопированного из текстового редактора. Для того чтобы полностью понять, как работают эти теги, подберите такой текст, в котором встречаются таблицы. Проверьте, как смотрится получившийся файл в окне браузера.

А теперь - списки

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

Списки бывают различных видов - маркированные, нумерованные и вложенные.

Маркированные списки выглядят следующим образом:

КАТАЛОГ ТУРИСТИЧЕСКИХ УСЛУГ ПРЕДЛАГАЕТ:

• широкий выбор различных видов отдыха;
• бронирование и продажу авиабилетов через Интернет;
• информацию о странах.

Нумерованные списки:

ЭНЦИКЛОПЕДИИ В СЕТИ:

1. Энциклопедия «Британика».
2. Энциклопедия «Кирилл и Мефодий».
3. Энциклопедия «От плуга до лазера 2.0».

Вложенные списки сочетают в себе элементы обоих списков.

В нумерованном списке (Ordered List) каждому элементу предшествует его порядковый номер. Чтобы браузер правильно расставил номера, нужно использовать теги разметки.

<р>Школе 172 требуются: 

<ol> 

<li>Дворник 

<li>Учитель информатики 

<li>Учитель английского языка 

</ol>

По умолчанию программа вставляет арабские цифры (1, 2, 3 и т.д.). В маркированном списке (Unordered List) каждому элементу списка предшествует маркер (bullet). Для создания маркированного списка используются следующие теги:

Маркер также может быть графическим изображением. 

<р>Администрация школы: 

<ul> 

<li>Директор - Фадеева Лидия Алексеевна 

<li>Зам. директора по УВР - Ермакова Марина Борисовна 

</ul>

Вложенный список (Nested lists), как мы уже знаем, включает элементы обоих списков, поэтому для его создания используются теги нумерованного и маркированного списков:

<р>Компания Аэрос Тревел предлагает следующие
услуги: 

<ul> 

<li>Продажа и бронирование авиабилетов 

<li>Туристические поездки: 

<ol> 

<li>Испания 

<li>Греция 

<li>Таиланд 

<li>Коста-Рика 

<li>Мексика и другие страны мира 

</оl> 

<li>Иммиграция и визы 

<li>Обучение за рубежом. 

</ul>

Внимание

Не забывайте использовать закрывающие теги </ol> и </ul>.

Необязательным атрибутом тега <ul> является type, обозначающий тип маркера:

• <ul type="circle"> - кружок;
• <ul type="disk"> - пустой кружок;
• <ul type="square"> - квадратик.

Необязательные атрибуты тега <ol>:

<ol start="n" type="">

• start="n", где n - номер, с которого начинается нумерация;
• type=" " - в кавычках пишутся буквы или цифры, которые задают тип маркера: А - большие буквы (то есть пункты списка будут отмечаться буквами А, В, С...); a - маленькие буквы (а, b, с...); I - римские цифры (I, II, III, IV...); 1 - арабские цифры (1, 2, 3...).

Попробуем на нашей странице создать текст, который будет организован с помощью списков сразу трех видов (листинг 4.2).

Листинг 4.2. Веб-страница, использующая различные виды списков

<Н2 ALIGN=Left>Советы по изготовлению
страничек</Н2> 

<ol> 

<li>По возможности вовсе избегайте пиктограммы 

"В процессе разработки" 

<li>Используйте соответствующий язык 

<li>He перегружайте вашу страницу большими изображениями 

<ol> 

<ul> 

<li>Избегайте драматического эффекта! 

<li>Проверяйте как можно чаще ссылки на вашей странице 

<li>He забывайте обновлять свою страничку! 

</ul> 

<ol> 

<li>Перед тем как положить готовую страничку на сервер, надо: 

<ul> 

<li>Проверить грамматические ошибки 

<li>Просмотреть свою страничку в различных программах 

просмотра. 

</ul> 

<li>Для рекламы странички надо: 

</ol>

Посмотрите на файл index.htm в браузере (не забыли щелкнуть на кнопке Обновить?) на своем компьютере и сравните изображение на экране с рис. 4.6.

Попробуйте убрать теги <ul></ul> - увидите, в чем Разница.

Чтобы поместить на странице словарь терминов, вам следует использовать теги <dt> (текст располагайся без отступа от левого поля страницы) или <dd> (расположение с отступом от левого поля).

Рис. 4.6. Файл index.htm в окне браузера

<dl> 

<dt>Web server 

<dd><P>Веб-сервер. Сервер, хранящий и пересылающий
HTML-документы и другие информационные ресурсы Интернета с
использованием протокола HTTP. Его называют также
HTTP-сервером.</P> 

<dt>HOME PAGE 

<dd><P>"Домашняя страница". Головная, начальная
страница, локальный архив. Первая страница какого-либо веб-сервера или
логически связанной группы HTML-документов.</P> 

</dl>

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

Рис. 4.7. Файл index.htm в окне браузера

Внимание

Следите за вашей лексикой! Если сомневаетесь в правильности написания текста, обратитесь за советом к учителю или друзьям.

Отредактируйте свой собственный HTML-документ, в котором должны присутствовать:

• название страницы;
• заголовки нескольких уровней, выровненные по центру, левому или правому полю;
• абзацы с текстом;
• фрагменты выделенного текста (с помощью полужирного шрифта, курсива, шрифта разного размера, горизонтальной линии);
• списки.

Сохраните этот файл (index.htm) и проверьте его с помощью программы просмотра.

Украсим нашу страничку

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

Цветовое решение

Для начала украсим страничку цветом. Рассмотрим способ изменения цвета. У тега <BODY> есть несколько атрибутов, влияющих на изменение цвета.

• BGCOLOR - цвет фона.
• TEXT - цвет текста. Действие последнего распространяется на весь текст, кроме тех фрагментов, где цвет изменен с помощью тега <font color="..">текст</font>. Чтобы понять действие этого атрибута, попробуйте окрасить фон в зеленый (green) цвет, а шрифт сделать желтым (yellow): <BODY BGCOLOR="green" TEXT="yellow">. Посмотрите, что получится. Потом сделайте наоборот.
• LINK - цвет гипертекстовой ссылки.
• VLINK - цвет гипертекстовой ссылки, уже посещенной в прошлом. У программы просмотра есть такое свойство - она помечает другим (своим стандартным) цветом те ссылки, которые уже просмотрены. Однако с помощью VLINK вы можете принудительно поставить свой цвет.
• ALINK - цвет активной гипертекстовой ссылки.

Обозначать чистые цвета можно по-английски: black, white, green, red, blue, yellow и т.д. Но есть и другая форма записи цвета. Пример:

<body bgcolor="#FF0000"
background="file.jpg" 

text="#000000" link="blue"
vlink="green">

Рассмотрите внимательно пример. Какие атрибуты отвечают за цвета фона, текста и ссылок? В указанном выше примере цвет фона (bgcolor="#FF0000") указывается шестнадцатеричным числом, имеющим следующую структуру: RED - GREEN - BLUE, или RGB (красный - зеленый - синий). На каждый цвет отводится 256 значений, обозначающих присутствие того или иного компонента в окончательном цвете. Например, максимум красного - FF (в шестнадцатеричной системе), остальные два цвета - 00, результат – "#FF0000".

Установка значения цвета фона выглядит следующим образом: BGCOLOR="#Шестнадцатеричное значение".

Например, чтобы установить красный цвет фона, нужно написать:

<BODY BGCOLOR="#FF0000">

Чтобы окрасить весь текст в зеленый цвет, используйте тег <BODY TEXT="#00FF00">.

Если вы работаете в программе Macromedia Dreamweaver, то параметры цвета вашей страницы выставляются следующим образом. Выберите команду меню Modify ► Page Properties (Изменить ► Свойства страницы) (см. рис. 4.2). В открывшемся диалоговом окне вы увидите поле Background (Фон) и Text (Текст). Щелкая на квадратиках с цветом, вы попадаете в таблицу цветов. Там же можно выбрать смешанные цвета и подобрать оттенки, щелкнув на кружке System Color Picker (Палитра цветов).

Рис. 4.8. Свойства страницы в программе FrontPage

В программе Microsoft FrontPage диалоговое окно свойств страницы (Page Properties) вызывается щелчком правой кнопкой мыши в любом месте экрана (рис. 4.8). Сначала Вы выберите вкладку Background (Фон) и обратите внимание на раздел Colors (Цвета). Вы можете изменить цвета фона (Background) и текста (Text) следующим образом: щелкнув на стрелке раскрывающего списка для выбора цвета, вы либо выбираете стандартные цвета, либо идете дальше, выбирая More Colors (Дополнительно) и Custom (Другие).

Рекомендуется также пользоваться таблицей цветов, которые воспринимает Интернет. Найти ее можно в разделе Бесплатное на сервере известного веб-дизайнера Артемия Лебедева по адресу http://www.design.ru.

Попробуйте настроить различные варианты цветов текста и фона для своего HTML-файла index.htm. Например:

<BODY bgcolor="#FFFFFF"> 

<Р>На данной страничке текст и изображения будут 

располагаться на белом фоне.</Р> 

<Р>Шрифт может быть 

<font COLOR="#0000A0">разного</font>
цвета.</Р>

Посмотрите на ваш файл в программе просмотра веб-страниц и проанализируйте полученный результат.

Поэкспериментируйте со своей страницей index.htm. Выберите понравившийся вам цвет фона, попробуйте окрасить заголовки в тон фона. Открыв вашу страницу в браузере, вы убедитесь сами, что она начала оживать. Следите за цветовой гаммой. Если вам нравится работать с цветом, то проведите простой эксперимент. Пригласите знакомых и друзей взглянуть на вашу превосходную цветовую схему (зеленый текст на темно-лиловом фоне), а потом накапайте им валерьянки.

Обои на странице?

«Обои» - это фон, на котором будет располагаться вся ваша информация. Они представляют собой графический файл, обычно с расширением .gif или .jpg. В некоторых случаях «обои» рисуются специально, с изображением логотипа или названием фирмы. Если у вас есть опыт работы в графических редакторах, то можно попытаться сделать «обои» самостоятельно.

«Обои» можно найти в Сети. Небольшая прогулка по WWW покажет вам, как много разных серверов предлагают бесплатно различные варианты «обоев» для ваших страниц. Например, подобную коллекцию вам могут предложить на сервере Free Web Graphics (http://graphic.centre.ru).

Если вы нашли «обои» в Интернете и выбрали понравившиеся вам, то нужно лишь щелкнуть на них правой кнопкой мыши, выбрать в браузере команду меню Save Picture As (Сохранить рисунок как) и сохранить файл в каталоге, где хранятся все ваши HTML-документы. Назовите его bg1.gif (или bg1.jpg - расширение должно соответствовать расширению исходного файла, находящегося на сайте).

Вставить «обои» в HTML-документ можно с помощью атрибута BACKGROUND тега <BODY>. Конечно же, не стоит делать фоном огромную картинку с фотографией. Графический файл «обоев» не должен занимать больше 5 Кбайт памяти. Очень важно сделать bgcolor того же оттенка, что и «обои».

<body background="kirpich.jpg"
bgcolor="orange">

В программе Macromedia Dreamweaver приклеить на вашу страничку «обои» очень просто. Выберите команду меню Modify ► Page Properties (Изменить ► Свойства страницы). Далее вам надо выбрать Background Image (Изображение для фона) и щелкнуть на кнопке Browse... (Обзор). Выберите из той папки, где у вас хранятся все элементы сайта, нужное изображение, щелкните на кнопке Select (Выбрать), и «обои» приклеются к вашей страничке.

В программе FrontPage следует щелкнуть правой кнопкой мыши в любом месте экрана, чтобы вызвать диалоговое окно свойств страницы (Page Properties). Затем нужно выбрать вкладку Background (Фон), установить флажок Background picture (Рисунок фона) и щелкнуть на кнопке Browse (Обзор). Далее найдите нужную папку, где у вас хранятся все элементы сайта, выберите изображение, щелкните на кнопке ОК, и «обои» также приклеются к вашей страничке.

Приклейте «обои» на ваш файл index.htm:

<BODY background="bg1.gif"> 

<P><font SIZE=+3><B>Ha данной страничке текст и 

изображения будут располагаться на фоне «обоев»</В> 

</font></P>

Рис. 4.9. Файл index.htm в окне браузера

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

Развесим картины

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

<IMG SRC="1.gif">

• Если графический файл находится в том же каталоге, что и HTML-документ, то достаточно указать только имя этого файла:
  <IMG SRC="1.gif">
• Если графический файл находится на том же сервере, но в другом каталоге, то указывается имя каталога и файла:
  <IMG SRC="pics/1.gif">
• В случае, когда файл с изображением находится на другом сервере, необходимо указать URL, то есть дать полный адрес:
  <IMG SRC="http://www.belti.ru/pics/belti.gif">

Совет

Чтобы браузер смог найти ваш графический файл, необходимо указать его местонахождение. Файл может находиться в той же папке, в которой расположен сам HTML-документ (про такой вариант мы говорим всегда), может быть в папке, вложенной в основную папку, а может находиться и на другом сервере.

Найдите любую картинку в формате .jpg или .gif. Вы можете взять ее в Интернете, сохранив так, как говорилось выше. Можете нарисовать ее в графическом редакторе или отсканировать. Но главное - она должна быть только в формате .jpg или .gif, другой формат Веб «не понимает». Перепишите ее в папку HP. Затем разместите ее на «обоях», которые вы уже, приклеили на свою веб-страничку. Расположите картинку по центру. Код включения картинки в ваш файл index.htm может выглядеть так (рис. 4.10):

<div align="center"><img src="1.jpg" width="590" height="370" border="1"></div>

Как вы уже знаете, атрибут WIDTH - это ширина изображения, HEIGHT - высота. Для чего они используются? Многие программы просмотра, в том числе Netscape Navigator, перед началом отображения пытаются спланировать размещение текста, рисунков и таблиц на странице и не выводят изображение до тех пор, пока не узнают его размеры. Если вы хотите, чтобы программы просмотра сразу начинали выводить текст вашего документа по мере его получения, вам следует указать фактические размеры рисунков и таблиц в пикселях. Для этого в описаниях графических изображений и используются дополнительные параметры картинки - WIDTH (ширина) и HEIGHT (высота). Эти небольшие добавления оказываются очень полезными при работе в сетях с низкой пропускной способностью.

Рис. 4.10. Файл index.htm в окне браузера

Внимание

Запомните, что на странице должен быть задан реальный размер графического изображения. Если вы хотите уменьшить вашу картинку, сделайте это в графическом редакторе. Если реальный размер вашего рисунка будет 800×600, а на страничке вы зададите его, например, 400×300, это будет серьезной ошибкой.

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

Пример:

<img src="1.jpg" width="250"
height="174" align="right" 

vspace="10" hspace="10" alt="логотип
школы">

Рассмотрим этот пример подробнее. Если вы располагаете изображением внутри текста, то его можно выровнять с помощью атрибута ALIGN, который имеет дополнительные параметры:

• MIDDLE или CENTER - выравнивание по центру (ALIGN=middle или center);
• LEFT - выравнивание по левому полю (ALIGN=left);
• RIGHT - выравнивание по правому полю (ALIGN=right);
• ТОР - выравнивание по верхней границе (ALIGN=top);
• BOTTOM - выравнивание по нижней границе (ALIGN=bottom).

Как установить необходимые параметры картинки в веб-редакторах?

В программе Macromedia Dreamweaver параметры картинки задаются так: вы выделяете картинку и обращаете внимание на панель Properties (Свойства). Вы видите, что она готова к работе с вашей картинкой. В правом верхнем углу панели вы находите поле Align, ниже Alt, ближе к середине два поля - НSpace и VSpace. Атрибут Align определяет способ выравнивания вашего изображения относительно текста, рекомендуется выбрать left или right. Атрибуты HSPACE и VSPACE обозначают горизонтальный и вертикальный отступ. Они используются для того, чтобы задать отступ от краев изображения до текста. Согласитесь, что текст, вплотную прилегающий к изображению, выглядит очень некрасиво. Поставьте в каждом из этих двух полей значение 10.

Как вы помните, в рассматриваемом нами примере был атрибут ALT. Что он обозначает? Согласитесь, что не очень-то приятно увидеть на месте картинки белое пятно. Может быть, эта картинка и не нужна, но все-таки обидно. Чтобы избежать таких накладок, используют альтернативный текст, который выводится на том месте, где должен находиться пропавший рисунок.

Если вы подведете мышь к картинке на несколько секунд, то слева увидите желтую табличку с надписью. Подписывать картинки нужно так, как вы обычно подписываете свои фотографии в фотоальбоме. Даже если на этой картинке не фотография, то напишите alt="Логотип" или alt="наш рисунок, 35 Кбайт" и т.д. Альтернативный текст также необходим в том случае, если пользователь просматривает веб-страницы в режиме отключения загрузки графических изображений (рис. 4.11).

Рис. 4.11. Режим отключения загрузки графических изображений в браузере

В программе FrontPage, когда вы щелкаете правой кнопкой мыши на вашем рисунке, появляется контекстное меню, в котором имеется команда Picture Properties (Свойства картинки), позволяющая просмотреть и изменить свойства рисунка. Перейдите на вкладку Appearance (Вид), в раскрывающемся списке Alignment (Выравнивание) выберите значение Left (По левому краю) или Right (По правому краю) и задайте отступ (примерно 10 пикселов, можно как больше, так и меньше) в полях Horizontal space (Горизонтальный отступ) и Vertical space (Вертикальный отступ). Чтобы задать альтернативный текст, щелкните на вкладке General (Общие) и введите текст в поле Text (Текст) раздела Alternative representations (Альтернативное представление).

Чтобы увидеть пример задания альтернативного текста и отступа между изображением и текстом, откройте в браузере файл по адресу http://www.oldvelo.ru/ros.shtml (рис. 4.12).

Размер графического файла в байтах, в принципе, не ограничен, но все же необходимо помнить, что передача большого графического (да и текстового) файла может занять очень много времени, особенно при низкой пропускной способности Сети. Между тем большинство путешествующих по WWW используют медленное соединение. Ожидание более одной минуты обычно начинает вызывать раздражение, и часто люди уходят с вашей страницы, так и не дождавшись получения документа или рисунка до конца. Перегрузив свою страницу большими изображениями, которые передаются по Сети целую вечность, вы можете оказаться в безлюдном уголке киберпространства. Старайтесь оптимизировать свои изображения в графическом редакторе Adobe Photoshop с помощью специальной команды Save For Web (Сохранить для Веб). Следите за тем, чтобы картинки «весили» не более 50 Кбайт.

Рис. 4.12. При наведении мыши на изображение появляется альтернативный текст

Вставьте в свой файл index.htm картинку и текст, проверьте его в браузере. Не забудьте написать альтернативный текст к вашему графическому изображению.

Совет

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

Добавим гипертекстовые ссылки

Часть текста или одно слово, графическое изображение или его часть могут иметь ссылки на другой текст внутри этого же документа или на другой документ в Интернете. Это и называется гипертекстовой связью (Hypertext link), гипертекстовой ссылкой, или просто гиперссылкой. Изображение или участок текста на странице, с которым ассоциированы гиперссылки, мы будем называть якорем ссылки. На экране ссылка выделяется каким-либо образом на фоне остального текста - подчеркиванием и особым цветом, который устанавливается по умолчанию или закладывается в параметрах тега <BODY>.

Задание. Вспомните, с помощью каких атрибутов задается цвет ссылки? Как записывается цвет?

Давайте посмотрим, как изменить цвет ссылки в используемых нами веб-редакторах. В программе Macromedia Dreamweaver идем уже знакомым нам путем. Выбрав команду меню Modify ► Page Properties (Изменить ► Свойства страницы), в открывшемся диалоговом окне свойств страницы мы увидим поля Links (Ссылки), Vizited links (Посещенные ссылки) и Active links (Активные ссылки). Щелкая мышью на квадратиках с цветом, попадаем в таблицу цветов, выбираем смешанные цвета или подбираем оттенки, щелкнув на кружке System Color Picker (Палитра цветов).

В программе Microsoft FrontPage вызываем щелчком правой кнопкой мыши диалоговое окно свойств страницы Page Properties (Свойства страницы), выбираем вкладку Background (Фон) и переходим к разделу Colors (Цвета). Меняем цвета ссылок (Hyperlink), посещенных ссылок (Vizited hyperlinks) и активных ссылок (Active hyperlinks), щелкая на стрелке раскрывающегося списка для ввода цвета.

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

<А HREF="">...</А>

Атрибут HREF определяет адрес ссылки, на которую будет совершен переход, если щелкнуть мышью на объекте, находящемся между тегами (в данном случае объект обозначен многоточием). А вот конкретный пример гиперссылки:

<А
HREF="http://www.phis.org.ru/informatika">Сайт по
информатике для 10-11 классов.</А>

Чтобы сделать ссылки на другие документы с некоторых слов основного текста вашей странички или с картинок, в веб-редакторах необходимо выполнить следующее.

В программе Macromedia Dreamweaver после выделения нужного слова (или картинки) панель Properties (Свойства) работает для выделенного объекта. Вы видите на ней поле Link (Ссылка). Если у вас уже есть в папке файл, на который вы хотите сослаться, щелкните на кнопке с изображением папки и выберите нужный файл из списка. Если вы хотите сделать внешнюю ссылку, то не забудьте написать URL-адрес целиком и «прицелиться» на отдельное окно - установите значение _blank в поле Target (Окно назначения). В этом случае содержимое страницы, заданной ссылкой, будет открыто в новом пустом окне программы просмотра.

<а href="http://www.rkka.msk.ru" target="_blank">Военно-исторический
клуб РККА</а>

В программе Microsoft FrontPage гиперссылка вставляется так: выделяете нужное слово или картинку и выбираете команду меню Insert (Вставка) ►Hyperlink (Ссылка). В поле URL вводите название файла, на который будете ссылаться (если файл находится в структуре вашего веб-сайта, http:// писать не надо). Если вы делаете ссылку на внешний документ, напишите URL полностью и в поле Target (Окно назначения) выберите значение New Window (В новом окне).

Пример ссылки с графического изображения:

<а href="http://www.rkka.msk.ru"><img
src="banner.gif"></a>

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

<img src="banner.gif" border=0>

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

<А HREF="prep.htm#pr">...</A>

Нужную часть текста следует помечать тегом

<А NAME="pr">...</A>

Внимание

Ни в коем случае не забывайте про закрывающий тег </а>.

Посмотрите внимательно на пример (листинг 4.3) и попробуйте открыть файл с гиперссылками (назовем его prep.htm) в программе просмотра.

Листинг 4.3. Страница с добавлением гиперссылок

<HTML><HEAD><TITLE></TITLE></HEAD>


<BODY> 

<Р>Поиск по тексту: 

<А HREF="prep.htm#pr">Преподаватели</А>


<br><A
HREF="prep.htm#st">Студенты</A></P> 

<B><h2 align=center> 

<А NAME="pr">Преподаватели</А></h2></В>


<Р>Зав. лабораторией Сидорова Л.С. 

<br>Петрова К.М. 

<br>Смирнов О.М. 

<br>Иванова К.А. 

<br>Борисова Н.М. 

<br>Бутусова Г.В.</Р> 

<b><h2 align=center> 

<А NAME="st">Студенты</A></h2></B>


<Р>Егорова И.М. 

<br>Савельева М.И. 

<br>Казанцева Н.А. 

<br>Ивликова Л.М. 

<br>Буянова Г.Б.</Р> 

</BODY></HTML>

Таким же путем вы можете попасть в нужную часть текста с другой страницы. Создайте файл kafedra.htm:

<HTML><HEAD><TITLE></TITLE> 

</HEAD> 

<BODY> 

<Р><А HREF="prep.htm">Преподаватели</A></P>


<Р><А HREF="prep.htm#st">Студенты</A></P>


</BODY></HTML>

Задание. Обратите внимание на расстановку тегов. Вспомните одну из главных идей HTML. В какой последовательности открываются и закрываются теги?

Веб-сайт

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

Рис. 4.13. Пример использования гиперссылок

Посмотрите, как расставлены ссылки на странице в листинге 4.4 (сама страница показана на рис. 4.13). Заметьте, что в первом случае обращение идет к файлу, расположенному на том же сайте, что и просматриваемый файл, но в другом каталоге:

<А HREF="chorus/index.htm">сайт
нашего хора</А>

Во втором случае мы обращаемся совсем к другому серверу:

<А HREF="http://center.fio.ru">в
Московском центре интернет-образования</А>

Листинг 4.4. Веб-страница (рис. 4.13), содержащая ссылки на другие веб-страницы

<html><head> 

<title>Якушина Екатерина - личная страничка</title> 

</head> 

<body Bgcolor="#FFFFFF" link=#ff0000 vlink=#ff0000> 

<h2 ALIGN=Center>Якушина Екатерина</h2> 

<IMG SRC="k1.jpg" ALIGN=LEFT ALT="Photo"
hspace=10> 

<p>Я рада приветствовать всех, кто заглянул на мою страничку! 

<p>По образованию я социальный педагог, работаю в <A
HREF="http://ww.mediaeducation.ru">лаборатории ТСО и
медиаобразования ИОСО РАО</A>. Но главное мое увлечение -
Интернет! Мне очень нравится путешествовать по Всемирной паутине и
передавать свои знания другим, я преподаю в <A
HREF="http://center.fio.ru">Московском центре
Интернет-образования</A>. Я с удовольствием делаю www-странички
(это мое хобби ;-) и работа), люблю водить машину. 

<p>А еще пою в Академическом хоре Российского
химико-технологического университета им. Д.И. Менделеева и приглашаю вас
на <a href="chorus/index.htm">сайт нашего
хора</a>. 

</p> 

<hr> 

<ADDRESS>E-mail: 

<a HREF=mail to:katerina@belti .ru> 

katerina@belti.ru</a></ADDRESS> 

</body></html>

Совет

Если вы хотите представить на вашем сайте коллекцию ссылок на другие сайты, то помните, что к настоящему моменту все знают поисковый каталог Рамблер и Yahoo, хотя бы однажды видели Кулички или Omen.ru. Поэтому используйте уникальные или соответствующие тематике вашего сайта ссылки. Как можно чаще проверяйте правильность ссылок на вашей странице. Посетители не простят вам множества сообщений «Error 404: Not Found» (Ошибка 404: Сервер не найден).

Последние строки необходимо пояснить. Большинство программ просмотра позволяют отправить электронное письмо по адресу, указанному в просматриваемом HTML-документе. Если ваш браузер предварительно настроен для работы с сервером электронной почты, то, щелкнув мышью на электронном адресе, вы увидите уже знакомый вам конверт, в котором автоматически будет вставлен адрес человека, которому вы собираетесь написать. Тег, используемый в данном случае, такой же, как и тег гиперссылки, но к нему добавляется <ADDRESS>, который, в принципе, можно и не использовать. Обязательным здесь является использование значения атрибута MAILTO. Посмотрите, как обозначен адрес электронной почты.

Не просто таблицы

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

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

Теги для формирования таблицы

Таблица вставляется в HTML-документ парными тегами <TABLE> и </ТАВLЕ>. Чаще всего забывают закрывающий тег, и из-за этой ошибки браузер отказывается выводить таблицу.

У тега <TABLE> есть атрибуты:

• BORDER - ширина обрамления;
• WIDTH - ширина таблицы;
• BGCOLOR - цвет фона под таблицей.

Между тегами могут располагаться следующие элементы таблицы:

1. <CAPTION>Название таблицы</CAPTION>. У тега CAPTION всего один атрибут, определяющий положение на звания таблицы - ALIGN. Он может принимать два значения:
   • ALIGN=top - над таблицей;
   • ALIGN=bottom - под таблицей.
2. <TR>Строка таблицы</TR>. У этого тега три атрибута:
   • ALIGN - выравнивание внутри ячеек строки, может иметь значение LEFT (по левому краю), RIGHT (по правому краю) или CENTER (по центру);
   • VALIGN - вертикальное выравнивание внутри строки таблицы, может принимать значения ТОР (по верхнему краю), BOTTOM (по нижнему краю), MIDDLE (по центру);
   • BGCOLOR - цвет фона внутри строки.
3. <TD>Столбец таблицы</TD>. Тег столбца таблицы может иметь следующие атрибуты:
   • ALIGN - выравнивание в ячейках столбца, допустимые значения: LEFT, RIGHT, CENTER;
   • VALIGN - вертикальное выравнивание в ячейках столбца, допустимые значения: TOP, BOTTOM, MIDDLE;
   • COLSPAN, ROWSPAN - растяжение клетки на несколько столбцов или строк (подробнее см. ниже);
   • BGCOLOR - цвет фона под столбцом.

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

Внимание

Так как разрешение монитора у пользователей может быть разным, ширину таблицы лучше устанавливать в процентах от ширины окна.

Рис. 4.14. Вставка таблицы в программе Dreamweaver

В программе Macromedia Dreamweaver таблицу можно вставить двумя способами: используя команду меню Insert ► Table (Вставка ► Таблица) или с помощью кнопки с изображением таблицы на панели Objects (Объекты). Далее вы должны установить нужное количество строк (Rows) и колонок (Columns), а также другие необходимые параметры (рис. 4.14). Например, параметр Width (Ширина) задает ширину таблицы, ее лучше всего устанавливать в процентах.

Внимание

Запомните, что нулевая ширина обрамления означает его отсутствие.

• Параметр Cell Padding (Отступ) определяет расстояние от границы таблицы до текста или изображения; Cell Spacing (Промежуток между ячейками) - расстояние между ячейками таблицы. Параметр Border (Рамка) устанавливает ширину обрамления (рамки таблицы) и может принимать любое значение от 0 до 10.

Рис. 4.15. Вставка таблицы в программе FrontPage

В программе Microsoft FrontPage таблица добавляется при помощи специальной кнопки Insert Table (Вставить таблицу) на панели инструментов или команды меню Table ► Insert ► Table (Таблица ► Вставка ► Таблица). Далее необходимо задать требуемые параметры (рис. 4.15).

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

<Н2 ALIGN=Center>Самая простая таблица</Н2>

<table width="75% border="1" cellspacing="0" 

cellpadding="10" a1ign="center"> 

  <tr> 

    <td>1-я ячейка таблицы</td> 

    <td>3-я ячейка таблицы</td> 

  </tr> 

  <tr> 

    <td>2-я ячейка таблицы</td> 

    <td>4-я ячейка таблицы</td> 

  </tr> 

</table>

Рис. 4.16. Простейшая таблица

Открыв файл в браузере, вы увидите пример этой простой таблицы (рис. 4.16).

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

Атрибут COLSPAN сообщает браузеру, что нужно раздвинуть клетку таблицы на несколько столбцов. Например, чтобы браузер понял, что вы хотите объединить ячейки двух столбцов, напишите: COLSPAN=2. Параметр ROWSPAN=2 растягивает клетку таблицы на две строки.

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

В программе Macromedia Dreamweaver после выделения ячеек, которые в хотите слить в одну, нужно выбрать команду Modify ► Table ► Merge Cells (Изменить ► Таблица ► Слить ячейки). Если вы хотите добавить дополнительные ячейки, то поставьте курсор в ту, которую хотите разбить, выберите команду Modify ► Table ► Split Cell (Изменить ► Таблица ► Разбить ячейки) и задайте нужное количество строк или столбцов.

В программе Microsoft FrontPage следует выбрать команду Table ► Merge Cell (Таблица ► Слить ячейки). Добавить или удалить ячейки и строки вы сможете с помощью команд Table ► Insert ► Rows or Columns (Таблица ► Вставить ► Строки или столбцы), Table ► Delete Cell (Таблица ► Удалить ячейки).

В программе Macromedia Dreamweaver после выделения таблицы на панели Propertis (Свойства) появляются все параметры этой таблицы (рис. 4.17). Вы видите все необходимые параметры. Там вы можете также вносить изменения - менять ширину, высоту таблицы, количество строк и столбцов, расстояние до текста, выравнивание и т.д. Вы также можете залить ячейки таблицы фоновым цветом, используя нижнее поле Bg (см. рис. 4.17), заклеить «обоями»- верхнее поле Bg (в этом случае надо щелкнуть на значке с изображением папки и выбрать нужный файл из папки, в которой у вас хранятся все элементы сайта), окрасить границу таблицы (поле Brdr). Следите за тем, чтобы графический файл «обоев» также располагался в той папке, в которой хранятся все элементы сайта.

Рис. 4.17. Заливка ячеек таблицы в программе Dreamweaver

В программе FrontPage как свойства таблицы, так и свойства отдельной ячейки открываются с помощью правой кнопки мыши (рис. 4.18).

Рис. 4.18. Свойства ячейки таблицы в программе FrontPage

Если вы выберете в контекстном меню команду Table Properties (Свойства таблицы), то увидите перед собой все параметры таблицы. Выбрав команду Cell Properties (Свойства ячейки), вы сможете менять вид конкретной ячейки (в которой у вас установлен курсор), например разбить ее на дополнительные ячейки. Установив флажок Use background picture (Использовать фоновое изображение) и выбрав файл с картинкой при помощи кнопки Browse (Обзор), вы можете поместить в ячейку «обои», а также изменить цвет ее фона и границ.

Поэкспериментируйте с вашей таблицей, заливая ячейки различными цветами, заклеивая их «обоями».

Различные возможности применения таблиц

Самое большое преимущество таблиц в HTML - возможность их использования для форматирования текста. Предположим, что вам надо выровнять текст по левой границе и отодвинуть его от края. Для этого можно использовать теги таблицы, не указывая строки (ячейки), но задавая невидимое обрамление (NOBORDER) или значение BORDER=0. Рассмотрим пример использования таблицы для форматирования текста (листинг 4.5). Он взят с сайта Военно-исторического клуба РККА: http://www.rkka.msk.ru/about.shtml (рис. 4.19).

Рис. 4.19. Пример использования таблицы для форматирования текста

Листинг 4.5. Фрагмент HTML-кода страницы с применением таблиц

<BODY bgcolor=white> 

<table border=1 cellpadding="20" cellspacing="1"
align=center width=90% bordercolor="#666600"> 

<tr> 

<td align=left valign=top class="fon"> 

<!--О КЛУБЕ--> 

<h2><center>О КЛУБЕ</center></h2>

<hr> 

<h3>Хранители прошлого </h3> 

<p align=justify>Октябрьский лес. Серый денек, то и дело
накрапывающий дождик. По заброшенной дороге, покрытой желто- красными
листьями, бредет одинокий грибник в спортивном костюме и резиновых
сапогах. Глаза в поисках грибов устремлены под ноги.<br> 

- Дядя, ты чего здесь?<br> ... 

</td></tr> 

</table>

Заметим, что если вы не хотите, чтобы какой-либо текст (комментарий) был показан на экране, используйте теги <!-- -->.

Пример:

<!--О КЛУБЕ-->

Внимание

Теги </tr> </td> </table> в конце таблицы должны обязательно присутствовать!

Таблица используется в том случае, если вам необходимо разместить текст на «обоях», но вы хотите, чтобы при этом он еще и хорошо читался. Можно подобрать цвет таблицы в тон обоям, можно, наоборот, сделать контрастным или добавить какие-нибудь графические элементы. Пример использования таблицы для размещения текста (изображения) на «обоях» можно увидеть на веб-сайте проекта Античная нумизматика http://www.coins.msk.ru (рис. 4.20). Здесь вы увидите много примеров использования таблиц для оформления текста и графики. HTML-код одной из страниц этого сайта приводится в листинге 4.6.

Листинг 4.6. Еще один пример использования таблиц для размещения текста и графики

<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" 

topmargin="0" marginwidth="0" marginheight="0" 

background = "bg.jpg"> 

<table width="85%" height="100%" border="0" 

cellspacing="0" cellpadding="5" align="center"> 

  <tr> 

    <td width="3" background="bg1.jpg">&nbsp;</td> 

    <td width="100%" class=g> 

    <div allign="center"><a href="map.shtml"><img src="zag.gif" 

    alt="АНТИЧНАЯ НУМИЗМАТИКА" border="0"></a></div> 

    <p>Эта страница возникла как результат моего увлечения - коллекционирования... 

    <td width="3" background="bg1.jpg">&nbsp;</td> 

    </td> 

  </tr> 

</table>

Рис. 4.20. Применение таблиц для размещения текста и изображений на «обоях»

уход за лицом . https://printb.ru квартальные календари трио 2025 заказать.

---

Пользователь, раз уж ты добрался до этой строки, ты нашёл тут что-то интересное или полезное для себя. Надеюсь, ты просматривал сайт в браузере Firefox, который один правильно отражает формулы, встречающиеся на страницах. Если тебе понравился контент, помоги сайту материально. Отключи, пожалуйста, блокираторы рекламы и нажми на пару баннеров вверху страницы. Это тебе ничего не будет стоить, увидишь ты только то, что уже искал или ищешь, а сайту ты поможешь оставаться на плаву.

---

---

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

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

---