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

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

Документ, который написан на языке HTML, представляет собой простой текст, в который вставлены флаги разметки, или "тэги" (markup tags). Флаги разметки объясняют компьютеру, как должен быть расположен текст на экране, в каком месте должны находиться рисунки, хранящиеся в совсем других файлах и так далее. С помощью флагов разметки формируются связи с другими web-сайтами и ресурсами Интернет. Просмотреть файл, написанный на языке HTML, можно в программе просмотра (Microsoft Internet Explorer, Netscape Navigator). Флаги разметки — это определенные последовательности символов, заключенные между знаками < (больше) и > (меньше).

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

Любой HTML-документ, состоит из двух частей: заголовка и тела.

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

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

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

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

Заголовок и название

Информация о документе, которая не выводится на экран, называется заголовком. Он заключается между флагами <HEAD> и </HEAD>. В заголовке HTML - документа содержится название странички, которое появится в рамке окна программы просмотра. Название странички располагается между флагами <TITLE> и </TITLE>. Например: <TITLE> Моя страничка </ TITLE>

Попробуем создать самый простой HTML документ. Создайте директорию HTML (например, в папке с номером группы). В нём будут храниться все Ваши HTML-документы и

графические файлы. Наберите в текстовом редакторе следующее:

<HTML>

<HEAD> <TITLE> Моя страничка (заголовок) </TlTLE> </HEAD>

<BODY>

Привет! Это моя личная домашняя страничка!

</BODY>

</HTML>

Сохраните этот файл под названием ind.htm в директории HTML. Затем откройте Ваш файл в программе просмотра (например, Microsoft Internet Explorer).

Параграфы

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

Использованы материалы из книги Е.В.Якушиной «INTERNET для школьников и начинающих пользователей», Москва, Аквариум, 1997г.

Вместе с флагом параграфа можно задать параметры выравнивания (ALIGN): «

• по центру (CENTER);

• по левому краю (LEFT);

• по правому краю (RIGHT).

Флаг <р align = left> обеспечит выравнивание текста параграфа по левому краю. При этом правый край окажется неровным, «рваным».

Чтобы выровнять текст абзаца по правому краю, используйте флаг <р align = right>.

Такое выравнивание используют для оформления заголовков и эпиграфов. Такого расположения текста можно добиться с помощью флага <р align=center>. Его используют для оформления коротких заголовков. Еще один способ оформления текста: <CENTER> текст </CENTER>

Заголовки

Заголовки (Headings) служат для выделения логических частей текста. Они обозначаются прописной или строчной латинской буквой h. Цифра после буквы показывает уровень заголовка (всего их может быть шесть).

Как и любой текст, заголовки можно выравнивать по левому или правому полю, по центру. Например:

<hl align=center> Изучение иностранного языка </hl>

<h2 align=center> Английский язык </h2>

<h3 align=center> Разговорная речь </h3>

<h4 align=center> Грамматика </h4>

<h5 align=center> Времена глаголов </h5>

Усовершенствуем нашу страничку ind.htm, используя заголовки и параграфы:

<HTML>

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

<BODY>

<H1 ALIGN=Center> Привет! Это моя личная домашняя страничка! </Н1> <BR>

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

<р>Я живу в Оренбурге

<НЗ ALIGN = Left> Мой ВУЗ </НЗ>

<р ALIGN = Left> Я учусь в Оренбургском Государственном Педагогическом Университете

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

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

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

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

<HR> <Н6 ALIGN = Center> Design "МиИ" </Н6>

</BODY>

</HTML>

Сохраните этот файл. Затем откройте файл в программе просмотра.

Способы выделения слов

Фрагмент текста можно выделить полужирным шрифтом (Bold). Отдельные слова можно подчеркнуть (Underline). Часто для выделения используют курсивный шрифт (Italic).

Для выделения логических частей текста используют горизонтальные линии (Horizontal Rule). Размер и толщина линии задаются с помощью параметров Size и Width: <HR SIZE=2 WIDTH="10%">

Горизонтальную линию можно нарисовать с помощью любого графического редактора. Создайте широкую цветную линию в редакторе MS Photo Editor (Средства MS Office), используя следующие параметры Нового рисунка: Тип рисунка — 256 цветов; Единицы — пикселы; Ширина — 760; Высота — 20; Цвет...— любой. Полученное изображение запишите как графический файл 1.gif в тот же каталог, что и Ваш документ ind.htm. После того, как линия нарисована, нужно сообщить, что она является составной частью странички. Это делают так: <IMG SRC-"l.gif">

Размер шрифта

Размер шрифта измеряется в пунктах (один пункт равен 1/72 дюйма, или 0,353 мм). Он задается относительно размера, установленного в программе просмотра по умолчанию: <font size=+n> ТЕКСТ </font> <font size=-n> ТЕКСТ </font> где n — число пунктов, на которое Вы хотите увеличить или уменьшить размер шрифта. Шрифт текста, расположенного между флагами < font size=±n> и </font>, будет увеличен или уменьшен.

Отредактируйте файл ind.htm и затем откройте его в программе просмотра:

<HTML>

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

<H1 ALIGN=Center> Привет! Это моя личная домашняя страничка! </Н1> <hr>

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

<р>Я живу в <FONT SIZE=+2> Оренбурге </FONT>

<НЗ ALlGN=Left> Мой ВУЗ </НЗ>

<р ALIGN=Left> Я учусь в Оренбургском Государственном Педагогическом Университете

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

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

<Н5> Мои Друзья </Н5>

<р> <U> Мои друзья </U> учатся со мной в <1>одной группе</1>.</р> <IMG SRC=" 1.gif *>

<Н6 ALIGN=Center> Design "МиИ" </H6>

</BODY>

</HTML>

Отформатированный текст

В любом текстовом редакторе создайте еще один HTML - документ и назовите его pre.htm.

<HTML>

<HEAD>

<TITLE> Советы по изготовлению страничек </TITLE>

</HEAD>

<BODY>

<PRE>

Избегайте драматического эффекта! Тиканье, мерцание, перемещение,, прокрутка... Эти новые спецэффекты повсюду на Web.

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

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

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

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

</BODY>

</HTML>

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

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

- <HTML>, <HEAD>, <TITLE>, <BODY>.

WEB-странички

Списки

Очень важный элемент Web-страничек — списки. Различают: нумерованный и маркированный списки, список определений и вложенные списки (сочетающие в себе элементы различных списков).

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

<li> Первый элемент <li> Второй элемент </ol>

Тэг <OL> может иметь параметры: <OL TYPE=A|a|I|i|1 START=n>, где:

TYPE - определяет вид счетчика:

А - большие латинские буквы (А,В,С...)

а - маленькие латинские буквы (а,Ь,с...)

I - большие римские цифры (1,П,Ш...)

i - маленькие римские цифры (i,ii,iii...)

1 - обычные цифры (1,2,3...)

START=n - число, с которого начинается отсчет

Например: <OL TYPE=I START=15>

<LI> Программирование

<LI> Алгоритмизация

</OL>

В маркированном списке (Unordered List) каждому элементу списка предшествует символ bullet (пуля). Для создания маркированного списка используются следующие флаги:

<ul>

<li> Первый элемент <li> Второй элемент </ul>

Тэг <UL> может иметь параметр: <UL TYPE=disc|circle|square> Тип тэга <UL> определяет внешний вид маркера как вид по умолчанию (disc), круглый (circle) или квадратный (square).

Например: <UL TYPE=square>

<LI> Программирование <LI> Алгоритмизация </UL>

Вложенный список (Nested lists) включает элементы различных списков:

<ol>

<li> Первый элемент нумерованного списка

<ul>

<li> Первый элемент маркированного списка

<li> Второй элемент маркированного списка

</ul>

<li> Второй элемент нумерованного списка

</ol>

Создайте страничку list.htm, в которой текст будет организован с помощью списков трех

видов.

<HTML>

<HEAD> <TITLE> Советы по изготовлению страничек </TITLE > </HEAD>

<BODY>

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

<ol>

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

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

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

</ol>

<ul>

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

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

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

</ul>

<ol>

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

<ul>

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

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

</ul>

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

</ol>

</BODY>

</HTML>

Откройте файл list.htm в программе просмотра.

Если Вы хотите поместить в страничку глоссарий (Definition List), то следует использовать флаги <dt> (текст располагается без отступа от левого поля странички) или <dd> (расположение текста с отступом от левого поля).

<dl>

<dt> Первый термин

<dd> Определение первого термина

<dt> Второй термин

<dd> Определение второго термина

</dl>

Создайте в текстовом редакторе файл list2.htm такого содержания:

<HTML>

<HEAD> <TITLE> Термины </ TITLE> </HEAD>

<BODY>

<dl>

<dt> Web server

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

<dt> HOME PAGE

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

</Р>

</dl>

</BODY>

</HTML>

Используя файл ind.htm, создайте HTML-документ, в котором должны присутствовать:

• название странички;

• заголовки нескольких уровней, выровненные по центру, левому или правому полю;

• параграфы с текстом;

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

• списки.

Сохраните этот файл под именем mdex.htm и проверьте Ваш HTML-документ в программе просмотра.

Графика

Использование цвета

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

цвета.

У флага <BODY> есть несколько параметров: BGCOLOR —цвет фона; TEXT — цвет текста; LINK — цвет гипертекстовой связи;

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

Установка значения цвета фона выглядит следующим образом: BGCOLOR="#Шестнадцатеричное значение". Так, чтобы установить красный цвет фона, нужно написать <BODY BGCOLOR ="FF0000">

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

Таблицы цветов есть в графических редакторах, а также в некоторых Web-редакторах. Там же можно выбрать смешанные цвета, подобрать оттенки.

Создайте в текстовом редакторе HTML-файл picl.htm

<HTML>

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

<p> На данной страничке текст и изображения будут располагаться на голубом фоне.

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

<FONT COLOR="#OOOOAO" size=+3> разного цвета и размера. </FONT>

</BODY>

</HTML>

Запустите программу просмотра и посмотрите, что у Вас получилось. Попробуйте поэкспериментировать со своей страничкой index.htm. Выберите понравившийся Вам цвет фона, попробуйте окрасить заголовки в тон к фону.

Наклеим обои

«Обои» представляют собой графический файл, обычно с расширением.GIF или.JPG. Это тот фон, на котором будет располагаться вся Ваша информация. В некоторых случаях они рисуются специально, с изображением логотипа или названием фирмы (коллекцию обоев можно, например, посмотреть на страничке F:\WORK\iNTERNET\OBOl\OBOl. HTM) ■

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

Создайте файл pic2.htm следующего содержания:

<HTML>

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

<B> На данной страничке текст и изображения будут располагаться на фоне "обоев" </В>

</FONT>

</BODY>

<HTML>

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

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

Простейший пример включения графического изображения в страничку Вы уже знаете:

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

Если графический файл «прописан» там же, где HTML - документ, то можно указать только имя этого файла:

Если на том же сервере, но в другом каталоге, то указывается имя каталога и файла:

<IMG SRC="pics/l.gif»

В случае, когда файл с изображением находится на другом сервере, необходимо указать URL, то есть дать полный адрес:

Найдите любую картинку (например, по указанному выше адресу) и перепишите ее в каталог HTML. Затем разместите ее на «обоях», которые Вы использовали в предыдущем

HTML - документе. Расположите картинку по центру. Ваш файл должен выглядеть так:

<HTML>

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

<B> На данной страничке текст и изображения будут располагаться на фоне "обоев" </В> </FONT>

</BODY>

</HTML>

Если вместо картинки на экране появляется только рамка, щелкните по ней правой кнопкой мыши и выберите команду Показать рисунок.

Дополнительные параметры графических изображений

Графическое изображение может иметь несколько дополнительных параметров:

1 WIDTH (ширина)

2 HEIGHT (высота),

3 ALIGN (выравнивание).

ABSMLDDLE или CENTER (по центру)

LEFT (слева),

RIGHT (справа).

Если вы располагаете изображение внутри параграфа, то вы можете его выровнять

• по левому полю (ALIGN=left);

• по правому полю (ALIGN=right);

• по верхней границе (ALIGN=top);

• по нижней границе (ALIGN=bottom);

• по центру (ALlGN=middle или center).

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

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

Возьмите любую картинку (например, f:\WORK\INTERNET\PHOTO\SH_503.JPG) и используя имеющийся в Вашем распоряжении графический редактор, определите ее размер.

Запишите изображение в директорию HTML и вставьте его в HTML-документ pic3.htm:

<HTML>

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

width (ширина) = 628 height (высота) = 416

</BODY>

</HTML>

Просмотрите файл на эране программы просмотра.

А теперь уменьшим наш рисунок в два раза, причем строго пропорционально:

<HTML>

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

Фотография пропорционально уменьшена в два раза

</BODY>

</HTML>

Посмотрите, как теперь выглядит изображение на экране.

Горизонтальный и вертикальный отступ (Hspace, Vspace)

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

Измените файл pic3.htm и проверьте его в программе просмотра:

<HTML>

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

<h2 align=center> Ребята, приглашаем вас в наш Интернет-класс! </h2>

<p> Слово "Интернет" часто встречается в печати, по телевизору, радио. Про Интернет

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

<р> Мы расскажем вам о возникновении сети Интернет, развитии, назначении.

Вы узнаете, что надо иметь, чтобы подключиться к сети, кто такие "провайдеры".

<р> Вам представится возможность вплотную соприкоснуться с информационными ресурсами Интернет.

<р> Вы узнаете что такое Всемирная паутина World Wide Web (WWW), ее историю,

принцип действия. Вас ждут увлекательные путешествия по всему миру.

</BODY>

</HTML>

Альтернативный текст

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

Покажем на конкретном примере, как создается альтернативный текст. На страничке нужно расположить, например, фотографию горного пейзажа (из коллекции на странице F:\W0RK\INTERNET\PH0T0\SC.HTM)- Для этого указываем, где программа просмотра должна ее искать, а затем записываем альтернативный текст: <IMG SRC="//f:/work/internet/photo/ 17sc090.jpg" АЦГ="Фотопанорама. Горный пейзаж">

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

Создание гиперссылок

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

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

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

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

<А HREF="https://www.vega.ru"> Международная Лаборатория Вега </А> До сих пор мы делали только отрывочные HTML-документы. Теперь мы сможем их связывать в логически построенный Web-сайт. Созданный index.htm будет началом заглавной страничкой Вашего собственного сайта.

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

Проверьте работу гипертекстовой ссылки, создав следующую страничку linkl.htm:

<HTML>

<HEAD> <TITLE> Гиперссылки </TITLE> </HEAD>

<BODY>

<hl> Документ со ссылкой на локальный файл </hl>

Добро пожаловать на одну из моих страничек!

<р>А <А HREF="pic3.htm"> здесь </А> можно посмотреть еще одно моё творение!

</BODY>

</HTML>

Ссылки на точки внутри документа

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

Для создания такой ссылки необходимо выполнить следующие шаги:

1. Создайте маркер раздела (например, в файле pic3.htm):

<А NAME="www"> World Wide Web </A>

2. Создайте ссылку на данный маркер (например, в файле linkl.htm):

<А HREF="pic3.htm#www"> здесь </А>

Эти теги можно использовать и для того, чтобы быстро находить фрагменты самого документа. Для этого достаточно добавить в нужное место метку <А NAМЕ="метка"> </А>, а затем в том же документе создать гиперссылку <А HREF="#имя">... </А> Например:

<ul>

<li> <а href="#ex 1 "> Раздел 1 </а> <li> <а href="#ex2"> Раздел 2 </а> </ul>

<а name-"ex 1 "> </а>... Текст раздела 1...

<а name="ex2"> </а>... Текст раздела 2 …

И еще несколько советов.

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

Все еще в процессе изготовления. Ничто не говорит «сачок» так явно, как постоянный знак «В процессе производства». По возможности избегайте этой пиктограммы.

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

Ссылки на другие серверы. Если Вы должны иметь лист ссылок, то используйте уникальные.

Сломанная стрела. Проверяйте как можно чаще правильность ссылок на Вашей странице.

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

Аудио и видео

Одним из преимуществ Web является ее способность включать различные типы media: графику, видео и звук — в дополнение к форматированному тексту.

Вы хотите разместить на Вашей страничке речь президента и сделать это так, чтобы Ваш посетитель услышал его голос? Добавьте простой текстовый флаг разметки:

<а href="President.wav"> Речь президента (90К) </а>

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

Проверьте работу гипертекстовых ссылок, создав следующую страничку link2.htm:

<HTML>

<HEAD> <TITLE> Адреса </TITLE> </HEAD>

<BODY>

<hl> Примеры адресов: </hl>

<h2>

|<p> <a href="https://www.yandex.m> Поисковый сервер Яndex </a>

<p> <a href=«7/c-server/net/litml"> Папка с файлами на С-сервере </а>

<р> <а href="//c-server/net/html/blowup.avi"> Видеофрагмент (478 К) </а>

<р> <а href="//f:/work/intemet/photo/sc.htm"> Страничка на сетевом диске F: </а>

<р> <а href="pic2.htm"> А эта страничка на моем компьютере </а>

< h2>

</BODY>

</HTML>

В каталоге C-server/Net/Html находятся папки, соответствующие именам компьютеров в локальной сети. В свой папке, на сервере, Вы можете сохранить наиболее удачное своё творение (index.htm), чтобы затем его могли оценить и другие.

Организуйте адреса в файле link2.htm в виде какого-либо списка и проверьте работу гиперссылок в программе просмотра.

Таблицы

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

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

Таблица вставляется в HTML-документ парными флагами <TABLE> и </TABLE>.

У флага <TABLE> есть параметры:

BORDER — ширина бордюра;

WIDTH —ширина таблицы;

BGCOLOR — цвет фона под таблицей.

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

1. <CAPTION> Название таблицы </CAPTION>.

У флага CAPTION есть всего один параметр, определяющий положение названия таблицы — ALIGN. Он может принимать два значения: top — над таблицей; bottom —под таблицей.

2. <ТР> Строка таблицы </TR>

У этого флага есть три параметра:

ALIGN — выравнивание внутри строки:

LEFT, RIGHT, CENTER; VALIGN — вертикальное выравнивание внутри строки таблицы:

TOP, BOTTOM, MIDDLE; BGCOLOR — цвет фона внутри строки.

3. <TD> Столбец таблицы </TD>

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

ALIGN — выравнивание:

LEFT, RIGHT, CENTER; VALIGN — вертикальное выравнивание:

TOP, BOTTOM, MIDDLE; COLSPAN, ROWSPAN — растягивание клетки на несколько столбцов, строк; BGCOLOR — цвет фона под столбцом.

Создадим в текстовом редакторе файл t1.htm и запишем в каталог HTML:

<title> Таблица </title>

</HEAD>

<BODY>

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

<TR> <TD> ячейка A </TD> <TD> ячейка В </TD> <TD> ячейка С </TD> </TR>

<TR> <TD> ячейка D </TD> <TD> ячейка E </TD> <TD> ячейка F </TD> </TR>

</TABLE>

</BODY>

</HTML>

Открыв файл в программе просмотра, увидим пример самой простой таблицы

Чтобы назвать столбцы и строки, воспользуемся флагом <ТН> Заголовок </ТН>.

Он может иметь следующие параметры:

ALIGN — выравнивание;

VALIGN — вертикальное выравнивание;

COLSPAN, ROWSPAN — растягивание клетки на несколько столбцов, строк; WIDTH — ширина названия;

BGCOLOR — цвет фона под названием.

Отредактируйте файл t1.htm следующим образом:

<title> Таблица </title>

</HEAD>

<BODY>

<H2 ALIG№=Center> Самая простая таблица с заголовками </Н2>

<ТН> Заголовок 1 </ТН> <ТН> Заголовок 2 </ТН> <ТН> Заголовок 3 </ТН>

<TR> <TD> ячейка A </TD> <TD> ячейка В </TD> <TD> ячейка С </TD> </TR> <TR> <TD> ячейка D </TD> <TD> ячейка E </TD> <TD> ячейка F </TD> </TR>

</TABLE>

</BODY>

</HTML>

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

Измените файл t1.htm:

<title> Таблица </title>

</HEAD>

<BODY>

<H2 ALIGN=Center> Таблица </H2>

<TH> Заголовок 1 </TH> <TH> Заголовок 2 </TH> <TH> Заголовок 3 </TH>

<TR>

<TD ALIGN=center COLSPAN=2> ячейка A </TD>

<TD ALIGN=center ROWSPAN=2> ячейка В </TD>

</TR>

<TR>

<TD> ячейка С </TD> <TD> ячейка D </TD> </TR>

</TABLE>

</BODY>

</HTML>

Параметр BORDER флага <TABLE> устанавливает ширину бордюра (рамки таблицы) и может принимать любое значение от 0 до 10. Ширина бордюра BORDER=G обозначает его отсутствие.

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

Создайте файл t2.htm такого содержания:

<HTML>

<HEAD> <title> Таблица </title> </HEAD>

<BODY>

<H2 ALIGN=Center> Таблица </H2>

<caption> Таблица в 50% ширины от экрана </caption>

<TR>

<TD WTOTH=80%> Столбец в 80% ширины таблицы </TD> <TD> ячейка 2 </TD> </TR>

<TR>

<TD> ячейка 3 </TD> <TD> ячейка 4</TD>

</TR>

</TABLE>

</BODY>

</HTML>

На экране компьютера Вы увидите, сколько места занимают таблица, столбцы и ячейки.

Таблицы можно использовать и для форматирования текста. Предположим, что Вам надо выровнять текст по левой границе и отодвинуть его от края. Для достижения цели используйте флаги таблицы, не указывая строки и ячейки, но указывая невидимый бордюр (NOBORDER).

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

Создайте файл t3.htm:

<HTML>

<HEAD> <title> М.Ю. Лермонтов </title> </HEAD>

Горные вершины <br>

Спят во тьме ночной; <br>

Тихие долины <br>

Полны свежей мглой; <Ьг>

Не пылит дорога, <br>

Не дрожат листы... <br>

Подожди немного, <br>

Отдохнёшь и ты.

</font> </TD> </TR>

</TABLE>

</BODY>

</HTML>

Составьте таблицу (на страничке index.htm) с именами файлов в вашем каталоге HTML и с комментариями к ним. Причём, имена файлов в таблице должны являться «гиперссылками на соответствующие HTML-документы.

Бегущая строка

Бегущая строка — это очень интересное изобразительное решение, которое может украсить Вашу страничку.

Главным и единственным флагом, создающим бегущую строку, является флаг <MARQUEE> ТЕКСТ </MARQUEE> На место слова ТЕКСТ подставляется любое слово или фраза, которую надо заставить бежать по экрану компьютера. Вставленная фраза появится из-за правого края программы просмотра и, пройдя через всю страницу, скроется за левым краем.

Если бегущую строку нужно направить справа налево флаг принимает вид: <MARQUEE DIRECTION=left> ТЕКСТ </MARQUEE>

Флаг

<MARQUEE DIRECTION=right> ТЕКСТ </MARQUEE> сохранит движение слева направо.

С помощью другой группы атрибутов можно задавать характер движения надписи по странице.

scroll — стандартное движение от правого края к левому. Этот атрибут организует бесконечный цикл. Число циклов можно ограничить, введя оператор LOOP

<MARQUEE LOOP-n BEHAVIOR=scroll> ТЕКСТ </MARQUEE>

Значение n оператора LOOP указывает число повторений цикла. В данном случае, поскольку во флаг еще включен атрибут BEHAVIOR со значением scroll, надпись совершит стандартное движение от правого до левого края Web-страницы три раза.

slide — надпись один раз пробегает от правого края к левому, где и остается, alternate — движение от правого края страницы к левому и обратно. Бесконечный цикл. Флаги бегущей строки с включенными в них атрибутами характера движения выглядят следующим образом:

<MARQUEE BEHAVIOR=scroll> ТЕКСТ </MARQUEE>

<MARQUEE BEHAVIOR=slide> ТЕКСТ </MARQUEE>

<MARQUEE BEHAVIOR=altemate> ТЕКСТ </MARQUEE >

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

<MARQUEE WDDTH=n> ТЕКСТ </MARQUEE>

где n — ширина той части страницы, на которой расположена бегущая строка. Значение п указывается как в пикселях, так и в процентах от общей ширины видимой части страницы.

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

<MARQUEE scrollamount=n> ТЕКСТ </MARQUEE> Здесь п — число пикселей.

Метод задания скорости состоит в указании времени, спустя которое текст будет перерисован на экране заново:

<MARQUEE scrolldelay=t> ТЕКСТ </MARQUEE> В данном случае переменная величина t — измеряется в миллисекундах.

Есть возможность указывать величину шрифта текста в строке:

<FONTSIZE=n> <MARQUEF> ТЕКСТ </MARQUEE> </FONT> Можно окрасить поверхность бегущей строки в какой-либо цвет:

<MARQUEE BGCOLOR=n> ТЕКСТ </MARQUEE>, где n, можно указать в вид шестнадцатеричного числа либо написав его название. И, наконец, можно указать высоту бегущей строки, задавая величину n в пикселях:

<MARQUEE HEIGHT=n> ТЕКСТ </MARQUEE>

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

Рамки

Рамки (или фреймы — Frame) — мощный механизм представления информации на Web- Страницах. С помощью рамок экран разделяется на несколько областей, в каждой из которых отображается содержимое отдельной страницы и даже Web-узла.

Для создания рамок (областей страницы) используют флаг <FRAMESET> и парный ему флаг </FRAMESET>, а для их описания — флаги < FRAME >.

Создайте четыре маленьких Web-документа: a.htm, b.htm, c.htm, d.htm. Задайте цвет фона каждой страницы, для чего используйте атрибут BGCOLOR флага BODY.

Файл a.htm:

Файл d.htm:

<HTML>

<HEAD> <TITLE> Рамки. Страничка D </TITLE> </HEAD>

<BODY BGCOLOR-"#FFFFFF"> Фрейм D белого цвета </BODY>

</HTML>

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

Поиск по сайту