Создаем свою первую 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=UTF-8" >, для указания информации о документе. Открывающий тег < 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>, в новой строке.

< html>

< head>

< title> < /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. Этот тег должен принять вид:

< body bgcolor=blue text=yellow>

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

< html>

< head>

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

< /head>

< body bgcolor=blue text=yellow>