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

      Комментарии к записи Создаем свою первую web-страницу отключены

HTML

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

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

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

  • левой угловой скобки
  • необязательного символа слэш /, который означает, что тег является конечным тегом, закрывающим некоторую структуру, например, . В этом смысле можно читать символ / как конец некоторого элемента разметки, например, строки или абзаца;
  • имени тега, например, html;
  • необязательных align=”center”;
  • правой угловой скобки .

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

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

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

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

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

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

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

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

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

  • тегии , которые отмечают начало и конец документа;
  • заголовок, ограниченный тегамии ;
  • тело, ограниченное тегами … .

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

Кроме элемента …, заголовок может содержать элементы …, например, , для указания информации о документе. Открывающий тегвключает пары имя=значение, описывающие свойства документа, например, тип документа, его кодировку, авторство, список ключевых слов и т.д. Эти данные используются также поисковыми серверами при индексации документов.

Файл 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 Введите с клавиатуры следующие основные теги, поместив каждый из них, кроме закрывающего тега , в новой строке.

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

Напомним, что первыйи последнийтеги означают соответственно начало и конец документа, элемент .. . определяет заголовок Web-страницы, элемент .. . — тело документа, а в элементе мы сейчас укажем название Web-страницы.

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

Компания ГEOTOH

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

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

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

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

  • словесное указание имени цвета, например, white (белый). В языке HTML предусмотрено шестнадцать таких имен;
  • цифровое обозначение в шестнадцатеричной записи, например, #f f f f f f-белый, которое указывает, каким образом цвет формируется из основных цветов — красного, зеленого и синего.

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

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

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

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

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

Компания ГЕОТОН

Статьи к прочтению:

Создание WEB страниц легко!


Похожие статьи: