Создание Web-страниц. Введение в язык HTML

World Wide Web (WWW)

Web (World Wide Web, WWW) - это всемирная информационная сеть, представляющая собой огромный набор взаимосвязанных друг с другом документов. Они называются Web-страницами и расположены на сотнях тысяч компьютеров - Web-серверах, разбросанных по всему миру. Для просмотра Web-страниц используются программы-клиенты, называемые Web-браузерами (от англ. to browse - просматривать, пролистывать). Примерами Web-браузеров являются Internet Explorer, Opera.

Гипертекст - это текст (документ), содержащий в себе ссылки на другие документы

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

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

Web-страница - это документ гипермедиа. Для создания Web-страниц используется специальный язык - HTML (сокращение от англ. Hyper Text Markup Language - язык гипертекстовой разметки). HTML-документ - это обычный текстовый файл с расширением. htm или. html. Web-страница хранится как HTML-документ. Главная цель HTML - описать внешний вид документа. Для этого в текст документа вставляются специальные коды - дескрипторы или, как их еще называют, тэги (от англ. tag - этикетка, бирка). Они определяют способы форматирования текста и позволяют связать слова и фразы документа с другими документами в Internet. Создать Web-страницу можно в любом текстовом редакторе. Существуют также специальные HTML-редакторы для создания HTML-документов.

У всех ресурсов в Internet, в том числе и у Web-страниц, есть свой собственный адрес, заданный в виде URL (сокращение от англ. Uniform Resource Locator - унифицированный локатор ресурсов). URL - это стандарт, принятый в Internet для определения местонахождения любого ресурса, будь то документ или служба.

URL состоит из трёх частей:

Схема

Хост

Путь

Схема описывает протокол прикладной программы, который используется для доступа к ресурсу. Чаще всего это протокол HTTP (сокращение от англ. Hyper Text Transfer Protocol - протокол передачи гипертекста). За протоколом ставятся символы "://". Хост - это доменное имя компьютера, на котором находится ресурс. Путь - это полный путь к документу и, возможно, его имя. Имена каталогов отделяются друг от друга символом "/".

Пример URL: p>

Создание Web-страниц

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

Все Web-страницы имеют одинаковую структуру. Дескрипторы <HTML> и </HTML> являются самыми "внешними", они заключают в себе остальной текст и другие дескрипторы. Обратите внимание: большинство дескрипторов языка - парные: открывающий и закрывающий. Закрывающий имеет то же имя, что и открывающий, но перед ним стоит косая черта ("/"). Внутри "внешних" дескрипторов находятся заголовок и тело HTML-документа. Заголовок ограничивается дескрипторами <HEAD> и </HEAD> (от англ. head - заголовок), а тело - дескрипторами <BODY> и </BODY> (от англ. body - тело). В заголовке естественно расположить название Web-страницы. Оно ограничивается дескрипторами <TITLE> и </TITLE> (от англ. title - название). Кроме названия, в заголовке могут находиться и другие элементы с дополнительной информацией о Web-странице. Тело содержит текст Web-страницы, элементы мультимедиа, гиперссылки.

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

Пример 5.1. Шаблон Web-страницы. Создайте текстовый документ и сохраните его под именем Шаблон. htm.

<HTML>

<HEAD>

<TITLE>Название Web-страницы</TITLE>

</HEAD>

<BODY>

Содержимое Web-страницы: текст, графика, ссылки, ...

</BODY>

</HTML>

Откройте данный файл в Internet Explorer. Если необходимо просмотреть или отредактировать HTML-текст данной Web-страницы, выполните команду

ВидПросмотр HTML-кода

На экране появится созданный вами текст на языке HTML.

При составлении тела Web-страницы обычно начинают с заголовков и подзаголовков, т. к. именно они создают чёткую структуру документа. Существует шесть уровней заголовков, каждому из которых соответствует свой размер шрифта. Используется тот же принцип, что и в книгах: заголовки глав выделяются крупным шрифтом, заголовки разделов - более мелким, заголовки подразделов - ещё более мелким и т. д. Для выделения заголовков на Web-странице используются дескрипторы <H1>, </H1> - для заголовков первого уровня (H от Head), <H2>, </H2> - для заголовков второго уровня и т. д. Например, создайте, а затем откройте такую Web-страницу, чтобы увидеть стандартное дли Internet Explorer выделение заголовков:

Пример 5.2. Использование заголовков

<HTML>

<HEAD>

<TITLE>Оформление заголовков различных уровней</TITLE>

</HEAD>

<BODY>

<H1>Заголовок первого уровня</H1>

<H2>Заголовок второго уровня</H2>

<H3>Заголовок третьего уровня</H3>

<H4>Заголовок четвертого уровня</H4>

<H5>Заголовок пятого уровня</H5>

<H6>Заголовок шестого уровня</H6>

</BODY>

</HTML>

Для того чтобы разделить текст на абзацы, используется дескриптор <P>. Он помещается в начало каждого нового абзаца. Закрывающий дескриптор </P> необязателен. Такой дескриптор даёт команду браузеру завершить текущий абзац и вставить пустую строку перед следующим. Если же нужно просто перейти на новую строку, не вставляя пустую, следует использовать дескриптор разрыва строк <BR>. Это одиночный дескриптор: он не имеет закрывающей пары. Абзацы и заголовки можно выравнивать по центру, по левому или по правому краю. Способ выравнивания задаётся в дескрипторе заголовка или абзаца с помощью параметра ALIGN (выровнять), который может принимать такие значения:

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

Пример 5.3. Выравнивание абзацев.

<HTML>

<HEAD>

<TITLE>Выравнивание абзацев</TITLE>

</HEAD>

<BODY>

<P ALIGN=LEFT>По левому краю</P>

<P ALIGN=CENTER>По центру</P>

<P ALIGN=RIGHT>По правому краю</P>

<P ALIGN= JUSTIFY>По ширине</P>

</BODY>

</HTML>

Для придания шрифту, которым выводится текст, определённого начертания (полужирный, курсив, подчёркнутый и т. п.), поместите этот текст между парными дескрипторами, приведёнными ниже.

<B> </B> - полужирное начертание;

<I> </I> - курсив;

<U> </U> - подчёркнутый текст;

<STRIKE> </STRIKE> - перечёркнутый текст;

<SUP> </SUP> - верхний индекс;

<SUB> </SUB> - нижний индекс.

К одному и тому же фрагменту текста может применяться сразу несколько подобных дескрипторов.

Пример 5.4. Форматирование текста.

<HTML>

<HEAD>

<TITLE>Форматирование текста</TITLE>

</HEAD>

<BODY>

<B>Полужирный</B>

<BR>

<I>Курсив</I>

<BR>

<U>Подчёркнутый</U>

<BR>

<B><I><U>Полужирный подчёркнутый курсив</U></I></B>

<BR>

<STRIKE>Перечёркнутый </STRIKE>

<BR>

<SUP>Верхний индекс</SUP>

<BR>

<SUB>Нижний индекс</SUB>

</BODY>

</HTML>

Основная сила языка HTML - в возможности связывать документы между собой посредством ссылок. Для определения ссылок используется дескриптор <A>, </A>.

Общий формат ссылки таков:

<A HREF="путь или URL">текст ссылки</А>.

Значением параметра HREF является URL Web-страницы или путь к файлу, на который делается ссылка.

Ссылки можно использовать и для перемещения внутри одного документа. Такие ссылки называются внутренними в отличие от междокументных ссылок, называемых внешними. Чтобы включить ссылку на какое-либо место в документе, его нужно обозначить. Это делается с помощью параметра NAME (имя) дескриптора <A>. Например, вы создаёте страницу со списком учеников вашего класса и подробными сведениями о них. При щелчке на фамилии должен осуществляться переход к просмотру сведений о выбранном ученике. В тексте такой Web-страницы для каждого ученика должны присутствовать такие две строки:

<A HREF="# Иванов">Иванов Иван Иванович</А>

<A NAME="Иванов">Сведения об Иванове И. И.</А>

Для включения в Web-страницу графического изображения используется одиночный дескриптор

(IMG - сокращение от англ. IMaGe - изображение; SRC - сокращение от англ. SouRCe - источник).

Например, в файле cat. gif содержится фотография вашего любимого кота. Чтобы мир увидел эту фотографию, включите в свою Web-страницу такой код:

<P>Это мой любимый кот <IMG SRC="cat. gif">

Пример 5.5 иллюстрирует применение ссылок.

Пример 5.5. Использование ссылок.

<HTML>

<HEAD>

<TITLE>Использование ссылок</TITLE>

</HEAD>

<BODY>

<A HREF="#Вн_с">Внутренняя ссылка</А>

<A HREF="Парабола. doc">Текст ссылки на файл "Парабола. doc"</А>

<A NAME="Вн_с">Сюда осуществится переход по внутренней ссылке</А>

</BODY>

</HTML>