Создаем свою первую Web-страницу

HTML

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

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

Документ с кодом HTML - это текстовый документ специального форм.html или .htm. В документе HTML обычный текст сочетается с элементами разметки, заключенными в угловые скобки < и >, например, <html>, <head>, <title>. </title>. Такие элементы разметки называются тегами. Теги бывают одиночными, открывающими и закрывающими и состоят из следующих друг за другом в определенном порядке элементов:

· левой угловой скобки <;

· необязательного символа слэш /, который означает, что тег является конечным тегом, закрывающим некоторую структуру, например, </title>. В этом смысле можно читать символ / как конец некоторого элемента разметки, например, строки или абзаца;

· имени тега, например, html;

· необязательных align=”center”;

· правой угловой скобки >.

Таким образом, открывающий тег <html>, стоящий в начале документа HTML и означающий его начало, состоит из имени html и двух угловых скобок < >, а тег </html>, находящийся в конце Web-документа, кроме указанных элементов содержит также символ слэш /, означающий закрывающий тег и указывающий на конец документа. Тег <script langruage="vbscript">означает начало кода встроенной в документ программы-сценария. Этот тег содержит, кроме имени script, атрибут language со значением "vbscript", означающий, что сценарий написан на языке vbscript.

В тегах могут использоваться только символы латинского алфавита, а в значении атрибутов - любые символы. Если в качестве значений атрибута используются, например, символы кириллицы, то они должны быть заключены в кавычки, например, name="Раздел 1".

Язык HTML не различает большие и малые буквы, так что теги <HEAD>, <head> и <Head> эквивалентны. Далее мы будем использовать написание тегов в нижнем регистре.

Большинство тегов являются парными: за открывающим тегом следует соответствующий ему закрывающий тег, а между ними содержится текст или другие теги, например:

<title>Книжный Интернет-магазин Три Ступеньки</title>

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

Большинство тегов могут иметь один или несколько атрибутов - параметров, дающих дополнительную информацию о том, как браузер должен обрабатывать текущий тег. Однако атрибутов может и не быть вовсе. Атрибут тега состоит из имени, например, align, знака равенства = и значения, которое задается строкой символов, например, "center": align="center". Значения атрибутов обычно заключаются в кавычки. Однако если эти значения используют только символы латинского алфавита, цифры и дефисы, то кавычки можно опустить, например: align=center.

Каждый HTML-документ имеет определенную структуру, которая выглядит следующим образом:

<html>

<head>

</head>

<body>

</body>

</html>

Структура HTML-документа содержит следующие обязательные элементы:

· теги <html> и </html>, которые отмечают начало и конец документа;

· заголовок, ограниченный тегами <head> и </head>;

· тело, ограниченное тегами <body>... </body>.

В заголовке, ограниченном тегами <head> и </head>, с помощью тегов <title>.. .</title> определяется название документа, которое должно описывать его содержимое и обычно содержит не более 5-6 слов. Это название отображается браузерами в строке заголовка рабочего окна программы, а роботы, составляющие индексы для поисковых систем, идентифицируют документ, используя его название.

Кроме элемента <title>...</title>, заголовок может содержать элементы <meta>...</meta>, например, <meta http-equiv="Content-Type" con-tent="text/html; charset=windows-1251">, для указания информации о документе. Открывающий тег <meta> включает пары имя=значение, описывающие свойства документа, например, тип документа, его кодировку, авторство, список ключевых слов и т.д. Эти данные используются также поисковыми серверами при индексации документов.

Файл HTML может содержать комментарии, дающие пояснения человеку, читающему HTML-код. Комментарии начинаются с четырехсимвольной последовательности <! -- и завершаются трехсимвольной последовательностью -->, например: < !--Главная страница -->. Комментарии игнорируются браузером и не влияют на представление документа на экране. Комментарии желательно использовать в редких случаях, когда это необходимо, например, для объяснения кода HTML. Следует помнить, что они являются частью файла и передаются по сети вместе с документом. Большое количество комментариев может значительно увеличить размер файла и, соответственно, время его загрузки, что нежелательно.

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

Создаем свою первую Web-страницу

Для создания Web-документов нам понадобится любой браузер - Internet Explorer, Opera, Mozilla или Netscape, а лучше все четыре, так как многие элементы HTML по-разному отображаются в разных программах просмотра, и весьма желательно контролировать эту разницу.

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

В качестве примера подготовим Web-страницы некой фирмы. Назовем ее «Компания ГЕОТОН», допустим, что она работает в области автоматизированных систем управления. Цель сайта - рассказать миру о компании, сфере ее деятельности, найти партнеров и заказчиков.

Для файлов нашего сайта нужна отдельная папка.

u Создайте папку с именем Web на любом жестком диске вашего компьютера. Откройте программу Блокнот.

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

Сначала введем в окне программы Блокнот (Notepad) теги, определяющие структуру любого HTML-документа. Напомним, что в HTML-коде допускается использовать любой регистр символов - верхний или нижний.

u Введите с клавиатуры следующие основные теги, поместив каждый из них, кроме закрывающего тега </title>, в новой строке.

</head>

<body>

</body>

</html>

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

Напомним, что первый <html> и последний </html> теги означают соответственно начало и конец документа, элемент <head>.. .</head> определяет заголовок Web-страницы, элемент <body>.. .</body> - тело документа, а в элементе <title> </title> мы сейчас укажем название Web-страницы.

u Между открывающим <title> и закрывающим </title> тегами вставьте название документа - Компания ГЕОТОН. Этот элемент должен выглядеть следующим образом:

<title>Компания ГEOTOH</title>

Напомним, что название Web-страницы должно быть коротким и в максимальной степени отображать ее содержание.

Наша следующая задача - вставить в тело документа между тегами <body>.. .</body> короткий текст-приветствие посетителям Web-страницы.

u Вставьте пустую строку между тегами <body> и </body> и введите в ней следующий текст: Добро пожаловать на страничку компании ГЕОТОН! Здесь Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производим.

Для каждой Web-страницы вы можете определить цвет фона и цвет текста. Это выполняется с помощью атрибутов bgcolor и text открывающего тега <body>. Для определения цвета как значения атрибутов существует два варианта:

· словесное указание имени цвета, например, white (белый). В языке HTML предусмотрено шестнадцать таких имен;

· цифровое обозначение в шестнадцатеричной записи, например, "#f f f f f f " -белый, которое указывает, каким образом цвет формируется из основных цветов - красного, зеленого и синего.

Конечно, словесное указание цвета более удобно и понятно. С другой стороны, числовые обозначения дают больше возможностей, так как позволяют указать практически любой из 16 777 215 оттенков, тогда как словесные обозначения ограничены только шестнадцатью цветами.

Полный перечень цветовых имен и их цифровых эквивалентов языка HTML довольно обширен. Здесь же перечислим только некоторые цветовые имена: black (черный), gray (серый), red (красный), green (зеленый), aqua (голубой).

Используем в качестве примера для фона нашей Web-страницы синий цвет (blue), а для текста - желтый (yellow).

u Вставьте в открывающий тег <body> атрибуты bgcolor=blue и text=yellow. Этот тег должен принять вид:

Ваш текстовый файл должен выглядеть так:

<html>

<head>

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

</head>