Создание web-документов средствами HTML

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

план

1. Введение.

2. Структура языка HTML.

3. Задание фона документа.

4. Цветовая разметка документа. Цвет в HTML.

5. Параграфы.

6. Графические объекты, таблицы.

7. Ссылки.

Интернет – это всемирное объединение компьютеров, которые могут обмениваться между собой информацией (110 миллионов компьютеров на январь 2001 года).

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

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

Второй фактор – протоколы, основу которых составляют правила работы Сети. Их достаточно много. Международная организация по стандартизации ISO (International Standards Organization) разработала семиуровневую модель Сети, на каждом из которых действуют отдельные протоколы, скрывающиеся за аббревиатурами HTTP, FTP, SMTP и другими, которые работают с разными типами информации. Современные программы, предназначенные для работы в Сети, часто состоят из двух частей (у пользователя – клиентская часть программы) и на сервере (программа-сервер). Первая вызывает программу-сервер, которая и осуществляет обслуживание, пересылая, например, сообщения электронной почты. Широко распространены в Интернете почтовые серверы для передачи электронной почты, серверы для пересылки файлов, серверы Web-страниц и др. Все они являются парными программами «Клиент-сервер», обменивающимися между собой информацией.

Web-страницы можно просматривать при помощи клиентской программы Web- браузера.

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

Чтобы сделать информацию Web-страниц доступной для множества компьютерных систем, создан универсальный язык HTML (Hyper Text Markup Language) – язык разметки гипертекста, который стал стандартом для оформления сетевых документов. Информация, закодированная при помощи этого языка, не переводится в машинный код и передается с ПК на ПК в виде обычного текста, в который добавлена специальная разметка HTML.

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

Вся Web-страница делится на структурные блоки, называемые элементами. Элементы-блоки имеют различное функциональное назначение (заголовки, параграфы….и т.д.).

Элемент имеет свое имя, атрибуты-параметры и содержимое, называемое контентом (от английского content – содержимое).

Основная масса элементов представляется в виде последовательности:

• открывающий тег, в котором располагается имя элемента и его атрибуты;

• контент;

• закрывающий тег.

Внутри тега располагается имя элемента, другими словами, сама команда-инструкция для браузера, например:

<p> – тег, открывающий элемент-абзац.

Большинству открывающих тегов соответствуют закрывающий тег – аналогичная комбинация, в которой перед именем команды ставится косая черта (слеш), например:

</p> – тег, закрывающий элемент-абзац.

<br> (перенос текста на другую строку), он не требуют закрывающего тэга.

Открывающий и закрывающий теги образуют команду- контейнер – структуру, в которой помещается контент.

Для создания странички, необходимо открыть стандартную программу Блокнот и в ней набрать следующий текст, сохранить его как index.html, затем открыть и получим следующую картину:

<html>

<head>

<title> Мой первый шаг </title>

</head>

<body>

Здравствуйте, это моя первая страница.

<br>

Добро пожаловать!:)

</body>

</html>

С помощью браузера, можно открыть наш документ, но блокнот не закрывать, он нам еще пригодится. В наш *.html документ можно вносить изменения (в блокноте), но, чтобы посмотреть, как это выглядит в нашем браузере, надо не забывать на панели инструментов нажимать на кнопку обновить.

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

Коротко о главном:

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

Весь HTML-документ помещается внутрь контейнера

<HTML> </HTML>

Заголовок Web-страницы заключается в контейнер

<HEAD> </HEAD>

Название Web-страницы содержится в контейнере

<TITLE> </TITLE>

Основное содержание страницы помещается в контейнер

<BODY> </BODY>

Цвет шрифта может быть разного цвета, он зависит от палитры, которую вы можете посмотреть в Интернете по адресу – http://www.artlebedev.ru/tools/colors/.

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

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

Все обозначения цвета в Html прописываются именно таким способом. Например, белый цвет – ffffff.

Чтобы окрасить слова Добро Пожаловать в красный цвет необходимо внести изменения в документ index.html.

<font color="#CC0000"> Добро пожаловать!:) </font>

Color – параметр (атрибут) для тэга font, он отвечает, в данном случае, за цвет заключенного в контейнер текста. Атрибут color, как и другие атрибуты, не принадлежит только одному тэгу, он может быть присвоен и некоторым другим тэгам.

Попробуйте вместо СС0000 подставить другие значения цветов для атрибута color. Обратите внимание, что значению цвета обязательно должен предшествовать значок «решетка» – #.

<html>

<head>

<title>Мой первый шаг </title>

</head>

<body>

Здравствуйте, это моя первая страница.

<br>

<font color="#CC0000"> Добро пожаловать!:) </font>

</body>

</html>

Данный документ выводит слова «Здравствуйте, это моя первая страница.» черным цветом, А слова «Добро пожаловать!:)» – красным цветом.

Тэг <font> </font> – многофункционален. Им может задаваться не только цвет текста в конкретной части документа, но и размер шрифта, и вид шрифта.

Задать цвет можно в открывающем тэге <body>:

<body text="#336699"> – это атрибуты синего цвета.

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

<html>

<head>

<title>Мой первый шаг </title>

</head>

<body text="#336699">

Здравствуйте, это моя первая страница.

<br>

<font color="#CC0000"> Добро пожаловать!</font>:)

</body>

</html>

Далее рассмотрим как задается фон документа.

Цвет фона устанавливается в уже знакомом нам тэге <body>:

<body bgcolor="#000000">

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

<html>

<head>

<title>Мой первый шаг </title>

</head>

<body text="#336699" bgcolor="#000000">

<br>

<font color="#CC0000"> Добро пожаловать!</font>:)

</body>

</html>

В этом случае фон – черный, слова теста «Здравствуйте, это моя первая страница.» - синего цвета, слова теста «Добро пожаловать!» – красного.

Обратите внимание: мы одновременно можем прописать в тэге <body> и цвет текста в документе, и цвет фона (это на всякий случай, если вы еще не поняли – одному тэгу может быть присвоено несколько атрибутов).

<body text="#336699" bgcolor="#000000">

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

Поговорим о параграфах. Параграфы вводятся тэгом: <p></p>

С помощью параграфов мы можем центрировать текст:

<p align="center">текст</p>

С помощью параграфов мы можем выровнять текст по левому краю:

<p align="left">текст</p>

По правому краю документа:

<p align="right">текст</p>

По обоим краям документа:

<p align="justify">текст</p>

Введем параграфы в наш документ. Подставим параграф с атрибутом центрирования текста

<html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#000000"> <p align="center"> Здравствуйте, это моя первая страница. <br> <font color="#CC0000"> Добро пожаловать!</font>:) </p> </body> </html> (посмотреть) Помните о том, что нельзя вводить в документ подобную конструкцию: <p></p> Пустые элементы <p> без какого-либо содержания (других тэгов или текста) могут игнорироваться браузерами. Не забывайте это. Заметьте, что текст в документе, если не задавать параграфы, всегда выравнивается по умолчанию по левому краю. Также запомните, что после закрывающего тега </p> автоматически происходит перенос строки. Но что делать, если вам этот перенос никак не нужен? Есть тэг альтернативный <p align="center">: <center> текст </center> Используя альтернативный тег страницу можно представить: <html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#FFFFCC"> <center> Здравствуйте, это моя первая страница. <br> <font color="#CC0000"> Добро пожаловать!</font>:) </center> </body> </html> Конечно, тэг <center> хорош, но остался нам он еще с прошлых версий HTML (да, их было несколько, все в этом мире развивается, HTML не исключение). Пока что этот тэг никто не отменял, и его можно использовать, но это не слишком желательно. Лучше использовать тэг <div></div>, одно из назначений которого выравнивание содержимого вашего документа. Все четыре значения атрибута align можно употреблять с <div>: <div align="center"> текст </div> <div align="left"> текст </div> <div align="right"> текст </div> <div align="justify"> текст </div> Например: <html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#000000"> <div align="center"> Здравствуйте, это моя первая страница. <br> <font color="#CC0000"> Добро пожаловать!</font>:) </div> <p align="justify"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится еще один виртуальный друг?:) </p> </body> </html> (посмотреть) Параграф не может содержать в себе другие параграфы, и также тэг <div></div>. Т.е. следующие конструкции будут не верны, и вводить их в документ нельзя: <p align="right"> <p>текст</p> <p>текст</p> <p>текст</p> </p> И <p align="right"> <div>текст</div> <p>текст</p> <div>текст</div> </p> Однако <div> может содержать в себе параграфы: с помощью него мы можем сгруппировать их, допустим, по правому краю. <div align="right"> <p>текст первого абзаца</p> <p>текст второго абзаца</p> <p>текст третьего абзаца</p> </div> Конечно, <p> и <div> не несут в себе исключительно функцию выравнивания элементов.

Рассмотрим как можно выделять текст при помощи заголовков и ознакомимся с еще одной функцией тэга <font></font>. Существуют шесть уровней заголовков: <H1> текст </H1> <H2> текст </H2> <H3> текст </H3> <H4> текст </H4> <H5> текст </H5> <H6> текст </H6> Итак, h1 – самый важный, h6 – наименее важный. Вводя заголовки в текст, вы позволяете вашему посетителю более легко ориентироваться на странице. Заголовками вы определяете структуру внутри текста. Давайте теперь введем заголовок в наш документ. Фраза "Здравствуйте, это моя первая страница" получится выделенной: <html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#FFFFCC"> <div align="center"> <H3>Здравствуйте, это моя первая страница.</H3> <br> <font color="#CC0000"> Добро пожаловать!</font>:) </div> <p align="justify"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится еще один виртуальный друг?:) </p> </body> </html> (посмотреть)

Заголовки предназначены для выделения небольшой части текста (строки, фразы). Но, если вы хотите выделить большой фрагмент текста, то заголовки для этого использовать нельзя. Для этого предназначен атрибут size тэга <font></font>, который устанавливает желаемый размер шрифта: <font size="+4"> текст </font> <font size="+3"> текст </font> <font size="+2"> текст </font> <font size="+1"> текст </font> <font size="+0"> текст </font> <font size="-1"> текст </font> <font size="-2"> текст </font>

Попробуем выделить слова «еще один виртуальный друг»: <html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#FFFFCC"> <div align="center"> <H3>Здравствуйте, это моя первая страница.</H3> <br> <font color="#CC0000"> Добро пожаловать!</font>:) </div> <p align="justify"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <font size="+1"> еще один виртуальный друг?:)</font> </p> </body> </html> (посмотреть)

Не увлекайтесь гигантоманией. Ее симптомы: непомерно большие размеры шрифта, гигантские кнопки на пол экрана, вместо маленьких и милых кнопочек, и толстый (жирный) во всех случаях текст. Поэтому помните и жалейте глаза своих посетителей: стандартный size (по умолчанию) ="+0". Кроме размера шрифта, можно задавать и разный стиль шрифта. Попробуем выделять текст курсивом, подчеркивать, перечеркивать, делать полужирным, задавать моноширинный текст, делать верхний и нижний индексы – все эти тэги, как правило, рассматриваются вместе. Сначала рассмотрим курсив и полужирный текст: <b> Полужирный текст </b> <i> Наклонный текст (курсив) </i> Попробуем снова для слов «еще один виртуальный друг» применить полужирный текст: <html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#FFFFCC"> <div align="center"> <H3>Здравствуйте, это моя первая страница.</H3> <br> <font color="#CC0000"> Добро пожаловать!</font>:) </div> <p align="justify"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг?:)</b> </p> </body> </html> (посмотреть) Моширинный шрифт, что это такое за шрифт? Это шрифт с символами одинаковой фиксированной ширины, как шрифт у пишущей машинки. А тэг для него следующий: <tt> моноширинный шрифт </tt> Также моноширинным шрифтом отображается текст, заключенный в тэг, <pre></pre>: <pre> текст (куча пробелов) текст текст (куча пробелов) текст текст (куча пробелов) текст</pre> У тэга <pre> есть одна замечательная особенность: текст, заключенный в него, выводится с точностью до пробела так, как вы его набили в блокноте. Этот тэг вам может быть полезен, допустим, для форматирования стихотворений. К одному фрагменту текста может применяться сразу несколько тэгов: <tt><b><i> текст </i></b></tt> В нашем примере текст моноширинный, полужирный, и выделен курсивом. Подчеркнутый текст вводится при помощи тэга <u>: <u> Подчеркнутый текст </u> Тэги <strike> и <s> представляют текст перечеркнутым шрифтом, можете использовать какой вам угодно из них, принципиальной разницы между ними нет: <strike> Перечеркнутый </strike> <s> Перечеркнутый </s> Тэг <big> представляется крупным шрифтом, а <small> малым шрифтом относительно основного текста: <small> Малый </small> Нормальный текст <big> Большой </big> Тэги Sup и Sub – определяют верхний и нижний индексы. Sup – верхний, Sub – нижний. Где они могут пригодиться? Ну, например, при написании какой-нибудь формулы - H2O (все, что мы выносим со школьной скамьи:). Верхний индекс <sup> ^sup </sup> Нижний индекс <sub> _sub </sub>

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

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

<font face="arial"> текст (шрифт Arial)</font>

Типы шрифтов являются стандартными, и по идее находятся на компьютере каждого пользователя - это:

Times;
Times New Roman;
Arial;
Helvetica;
Courier;
Verdana;
Tahoma;
Cosmic Sans;
Garamond

Вы можете безбоязненно использовать любой из них. В атрибуте face можно указать сразу несколько типов шрифтов:

<font face="arial, verdana, courier"> текст (шрифт Arial) </font>

В этом случае если у посетителя не окажется на компьютере шрифта Arial, то текст будет отображен шрифтом Verdana. Если и Verdana нет на компьютере вашего посетителя, то текст будет отображен шрифтом Courier. Т.е. в атрибуте face мы можем задать список разделенных запятыми названий шрифтов, которые броузер вашего посетителя должен попытаться найти у него на компьютере и отобразить в порядке приоритета.

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

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

В вашей страничке могут быть использованы графические объекты. Запомните, страница (сайт) не должна представлять собой супер графического изыска, который весит сотни килобайт, т.к. это жестоко, и ни одна живая душа не выдержит подобной пытки (грузить долго). Вот, например, эта страница, содержание которой вы сейчас тщательно изучаете, весит в картинках не более 70 килобайт (это общий вес всех картинок, а не вес каждой), что вполне допустимо, и не слишком тяжело. Также я посоветую не изощряться с анимированными картинками: они отвлекают внимание от содержания странички. Постарайтесь также создавать свои картинки для своего сайта, а не собирать их по бесплатным коллекциям с графикой, пусть ваш сайт будет уникальным. Для вашего удобства кладите картинку в ту же папку, что и документ, тогда путаницы будет меньше.

Вставлять картинки в документ можно с помощью:

<img src="my.jpg">

Вместо my.jpg мы можем подставить имя любой картинки (me.gif, main.png). Самое главное понять, что все расположенное между кавычками – ссылка (путь к картинке). Наш пример говорит о том, что картинка лежит в том же каталоге (директории, папке), в которой лежит и наш документ. Если картинка лежит в поддиректории (в папке, которая лежит в вашей основной папке), то ссылка на неё будет выглядеть так:

<img src="my/my.jpg">

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

<img src="../my.jpg">

Если у вас нет на данный момент картинки, то сохраните ее у себя в папке с нашей страничкой.

Например, картинка с именем x_cc391336.jpg,хранится там же где и документ index.html:

<html>

<head>

<title>Мой первый шаг </title>

</head>

<body text="#336699" bgcolor="#FFFFCC">

<div align="center">

<H3>Здравствуйте, это моя первая страница.</H3>

<br>

<font color="#CC0000"> Добро пожаловать!</font>:) </div>

<p align="justify">

<img src="x_cc391336.jpg"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится <b> еще один виртуальный друг?:)</b>

</p>

</body>

</html> (посмотреть)

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

<img src="pr1.png" align="left">

Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать наоборот (картинка справа, текст слева) надо прописать right:

<img src="pr1.png" align="right">

Но это не все: текст может располагаться внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3):

(1) - <img src="pr1.png" align="bottom">

(2) - <img src="pr1.png" align="middle">

(3) - <img src="pr1.png" align="top">

Рассмотрим процесс создания и форматирования таблиц в HTML. Начинается и заканчивается таблица открывающим и закрывающим тегами <TABLE>. Далее записывается столько парных тегов <TR>, сколько строк должно быть в таблице. Между каждой парой тегов <TR> записывается столько парных тегов <TD>, сколько ячеек должно быть в данной строке, причем, каждая строка должна состоять из одинакового количества ячеек. Для первой строки вместо тегов ячеек <TD> можно записать теги <ТН>, в таком случае эта строка будет объявлена строкой заголовков столбцов. Данные в этой строке будут автоматически выделены полужирным шрифтом и выровнены по центру.

Вот таблица на языке HTML (назначение атрибутов тега <TABLE> мы обсудим позже):

<TABLE BORDER CELLSPASING=0> <TR>

<ТН>День недели</ТН>

<ТН>Тема занятий</ТН>

</TR>

<TR>

<ТБ>Понедельник</ТО>

<ТО>Навигация в WWW</TD>

</TR>

<TR>

<TD>Btophhk</TD>

<TD>ПoИck информации в Интернете</ТD>

</TR>

</TABLE>

Примерно так эта таблица будет выглядеть в браузере:

День недели	Тема занятий
Понедельник	Навигация в WWW
Вторник	Поиск информации в Интернете

Сразу после тега <TABLE> можно записать парный тег <CAPTION>,который определяет заголовок таблицы. С помощью атрибута ALIGN задают расположение заголовка: ALIGN=TOP - заголовок над таблицей, ALIGN=BOTTOM - заголовок под таблицей.

Рассмотрим некоторые приемы форматирования таблицы с использованием атрибутов тега <TABLE>:

- BORDER - задает ширину границы в пикселях. Следует помнить, что отсутствие атрибута BORDER означает отсутствие отображения границ таблицы. Этот вариант используют, если таблица нужна для компоновки станицы. Если не присвоить атрибуту BORDER никакого значения (см. пример выше), ширина границы будет равна 1 пикселю;

- BORDERCOLOR- цвет границы;

- Другой вариант - атрибуты BORDERCOLORLIGHTи BORDERCOLORDARK,которые задают более светлый и более темный цвета границы для создания эффекта объемной границы. Однако не все браузеры интерпретируют эти атрибуты;

- CELLSPASING- расстояние между границами ячеек в пикселях.

Если атрибут отсутствует, то между границами ячеек появится зазор величиной в 1 пиксель;

- CELLPADDIN G - расстояние между границей ячейки и данными в ячейке;

- WIDTHи HEIGHT- ширина и высота таблицы в пикселях или процентах от ширины окна браузера.

Наша страничка может состоять из нескольких документов. Один из них главный (index.html) – он открывается первым и должен обязательно лежать на вашем сайте в интернете. Остальные документы вы можете называть как угодно (photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.html). Они все могут лежать в одной директории (папке), а могут в разных.

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

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

Для начала создадим новый документ (в нашем примере foto.html) в той же директории (папке), где находится наш главный документ index.html. Содержание документа выдумайте сами, у вас для этого уже достаточно знаний. Пусть foto.html - документ с вашими фотографиями. Тогда мы можем без зазрения совести фразу "посмотреть мои фотографии" сделать ссылкой на foto.html:

<a href="foto.html">посмотреть мои фотографии</a>

Тэг <a></a> делает ссылкой заключенную в него картинку или фразу (текст). Принципы прописывания пути мы уже знаем:

(1) - <a href="foto.html">мои фотографии</a>

(2) - <a href="photos/prf.html">мои фотографии</a>

(3) - <a href="http://www.homepage.ru/prf.html">мои фотографии</a>

В случае (1) – документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на foto.html, в случае (2) – документ лежит в поддиректории /photos, в случае (3) – мы ссылаемся на сайт http://www.homepage.ru, где лежит нужный нам документ.

Первые два примера (1) и (2) – называют относительными путями. (3) – абсолютный, т.е. указанный полностью, включая имя сайта (в нашем случае - http://www.homepage.ru/). Абсолютный путь мы используем, когда ссылаемся на чужие странички, относительный мы используем, когда ссылаемся на документы внутри нашего сайта.

Примером ссылки может быть просмотр фотографий из файла foto.html:

<html>

<head>

<title>Мой первый шаг </title>

</head>

<body text="#336699" bgcolor="#FFFFCC">

<div align="center">

<H3>Здравствуйте, это моя первая страница.</H3>

<br>

<font color="#CC0000"> Добро пожаловать!</font>:) </div>

<p align="justify">

<img src="x_cc391336.jpg"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии <a href="foto.html">посмотреть мои фотографии</a>, почитать обо мне, черкнуть пару строчек в мою гостевую книгу.А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится <b> еще один виртуальный друг?:)</b>

</p>

</body>

</html> (посмотреть)

Контрольные вопросы.

1. Что понимают под единым адресным пространством?

2. Что является основой любой Web-страницы?

3. Что такое теги?

4. Как создается Web-страница, что для этого необходимо?

5. Что такое браузер?

6. Что понимают под контейнером?

7. Как задается цвет?

8. Как задается фон страницы?