Создание Веб страниц

СОДЕРЖАНИЕ

ВВЕДЕНИЕ

World Wide Web – глобальная компьютерная сеть на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet. Для навигации в WWW используются специальные программы – Web-браузеры, которые существенно облегчают путешествие по бескрайним просторам WWW. Вся информация в Web-браузере отображается в виде Web-страниц.

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

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

В данной работе рассмотрены основы языка программирования Web-страниц – HTML, который является общепринятым стандартом WWW. Это дает возможность ознакомиться со структурой Web-страницы и приемами ее правильного оформления.

1.      Что такое HTML

Существует несколько версий HTML. Стандарт языка непрерывно обновляется и дополняется, следствие этого - каждый год выходит новая версия HTML. С другой стороны - веб-браузеры, с помощью которых пользователи просматривают html-страницы, также имеют свои различия в части интерпретации и поддержки отдельных тэгов. Это обусловлено тем, что разработкой браузеров занимаются различные компании. Что из этого следует? Попросту говоря, один и тот же html-код разные браузеры будут отображать по-разному, а некоторые тэги отдельные браузеры вообще "не понимают".

HTML (HyperText Markup Language, язык гипертекстовой разметки) - специальные инструкции браузеру, с помощью которых создаются Веб-страницы.

То есть Web-страницы - это документы в формате HTML, содержащие текст и специальные тэги (дескрипторы) HTML. По большому счету тэги HTML необходимы для форматирования текста (то есть придания ему нужного вида), который "понимает" браузер. Документы HTML хранятся в виде файлов с расширением .htm или .html. [1]

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

Для более быстрого знакомства с HTML-кодом можно просматривать понравившуюся страницу в режиме "В виде HTML". Для этого в браузере надо выбрать пункт меню "Вид" - "В виде HTML".

После этого откроется новое окно с исходным текстом HTML-кода. Просматривая готовый код HTML, можно узнать, как тэги языка применяются более опытными программистами. Кроме того, это один из способов преодоления различных проблем, возникающих время от времени.[2]

2.      С помощью чего создаются Web-страницы

Что такое Веб-страница? По сути дела - это простой текстовый документ, содержащий тэги (которые в свою очередь являются обычным текстом, заключенным в скобки). Т.е., исходя из вышеизложенного, Веб-страницы можно набрать в любом текстовом редакторе (Блокнот, WordPad, Word и т.д.). В этом случае абсолютно все надо набирать своими ручками. Основной плюс такого метода - код получается абсолютно минимизированным, т.е. "вес" такой html-страницы будет минимальным. К недостаткам следует отнести тот факт, что пользователь должен очень хорошо знать язык html-разметки, да и результаты своего труда нельзя будет сразу посмотреть. Поэтому таким методом создания Веб-страниц практически никто не пользуется. Порекомендовать его можно разве что для создания простеньких Веб-страничек если нет возможности использования специализированных программ.

Практически все Веб-дизайнеры используют специальные программы, которые называются HTML-редакторы. Наиболее популярные - Macromedia HomeSite, Dreamweaver MX.

Чем же они хороши? Прежде всего, тем, что они как раз и предназначены для создания Веб-страниц. Синтаксис в таких программах обычно выделяется разными цветами, так что очень хорошо видно где находится текст, а где дескрипторы, а где php-код. Многие сложные конструкции тэгов можно вводить одним щелчком мышки. Результат своего труда виден тут же, в соседнем окошке.

Кроме вышеуказанных программ существует еще один тип специализированных программ - это, так называемые, средства визуального проектирования (Microsoft FrontPage, HoTMetal Pro). Они позволяют создавать Веб-страницы таким образом, чтобы полностью исключить необходимость набора тэгов HTML вручную. Подобные программы выполняют все необходимые операции автоматически, по мере "рисования" Веб-страницы. К недостаткам таких программ следует отнести тот факт, что "вес" таких страниц оказывается большим из-за избыточного HTML-кода, да и изящную страничку без подправки кода "вручную" сделать весьма проблематично. [2]

3. Структура HTML-кода

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <title>Пример веб-страницы</title>

</head>

<body>

  <h1>Заголовок</h1>

  <!-- Комментарий -->

  <p>Первый абзац.</p>

  <p>Второй абзац.</p>

</body>

</html>

Если скопировать содержимое данного примера и сохранить его в папке c:\www\ под именем example41.html. После этого запустить браузер и открыть файл через пункт меню Файл > Открыть файл (Ctrl+O). В диалоговом окне выбора документа указать файл example41.html. В браузере откроется веб-страница, показанная на рисунке 1.

Рисунок 1 – Результат выполнения примера

Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

Часто можно встретить код HTML вообще без использования <!DOCTYPE>, веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается в браузере по-разному при использовании <!DOCTYPE> и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется», т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы не произошло подобных ситуаций, всегда добавляйте <!DOCTYPE> в начало документа. [3]

4. Типы тэгов

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

Условно теги делятся на следующие типы:

1)     теги верхнего уровня;

2)     теги заголовка документа;

3)     блочные элементы;

4)     встроенные элементы;

5)     универсальные элементы;

6)     списки;

7)     таблицы.

Следует учитывать, что один и тот же тег может одновременно принадлежать разным группам, например, теги <ol> и <ul> относятся к категории списков, но также являются и блочными элементами.

1) Тэги верхнего уровня. Эти теги предназначены для формирования структуры веб-страницы и определяют раздел заголовка и тела документа.

<html>

Тег <html> является контейнером, который заключает в себе всё содержимое веб-страницы, включая теги <head> и <body>. Открывающий и закрывающий теги <html> в документе необязательны, но хороший стиль диктует непременное их использование.

<head>

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

<body>

Тег <body> предназначен для хранения содержания веб-страницы, отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>. К такой информации относится текст, изображения, таблицы, списки и др.

2)Тэги заголовка документа.

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

<title>

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

<meta>

Метатеги используются для хранения информации, предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Хотя тег <meta> всего один, он имеет несколько атрибутов, поэтому к нему и применяется множественное число.

3) Блочные элементы.

Блочные элементы характеризуются тем, что занимают всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки.

<blockquote>

Предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с пустым пространством сверху и снизу.

<div>

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

<h1>,...,<h6>

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

<hr>

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

<p>

Определяет параграф (абзац) текста.

<pre>

Задает блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. В HTML любое количество пробелов идущих в коде подряд на веб-странице показывается как один. Тег <pre> позволяет обойти эту особенность и отображать текст как требуется разработчику.

Следующие теги не должны размещаться внутри контейнера <pre>: <big>, <img>, <small>, <sub> и <sup>.

4) Встроенные элементы.

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

<A>

 Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия параметров name или href тег <a> устанавливает ссылку или якорь.

<B>

Определяет жирное начертание шрифта.

<BIG>

Тег <big> увеличивает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега <big> увеличивает текст на одну условную единицу.

<BR>

Тег <br> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа <p>, использование тега <br> не добавляет пустой отступ перед строкой.

<EM>

Тег <em> предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.

<I>

Устанавливает курсивное начертание шрифта.

<IMG>

Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив параметр border="0" в тег <img>.

<SMALL>

Тег <small> уменьшает размер шрифта на единицу по сравнению с обычным текстом. По своему действию похож на тег <big>, но действует с точностью до наоборот.

<SPAN>

Универсальный тег, предназначенный для определения встроенного элемента внутри документа.

<STRONG>

Тег <strong> предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.

<SUB>

Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера — H2O.

<SUP>

Отображает шрифт в виде верхнего индекса. По своему действию похож на <sub>, но текст отображается выше базовой линии текста — м2.

Разница между блочными и встроенными элементами следующая.

Встроенные элементы могут содержать только данные или другие встроенные элементы, а в блочные допустимо вкладывать другие блочные элементы, встроенные элементы, а также данные. Иными словами, встроенные элементы никак не могут хранить блочные элементы.

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

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

5) Универсальные элементы.

Особенность этих тегов состоит в том, что они в зависимости от контекста могут использоваться как блочные или встроенные элементы.

<del>

Тег <del> используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны. Браузеры обычно помечают текст в контейнере <del> как перечеркнутый.

<ins>

Тег <ins> предназначен для акцентирования вновь добавленного текста и обычно применяется наряду с тегом <del>. Браузеры помечают содержимое контейнера <ins> подчеркиванием текста.

6) Списки.

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

<ol>

Тег <ol> устанавливает нумерованный список, т.е. каждый элемент списка начинается с числа или буквы и увеличивается по нарастающей.

<ul>

Устанавливает маркированный список, каждый элемент которого начинается с небольшого символа — маркера.

<li>

Тег <li> определяет отдельный элемент списка. Внешний тег <ul> или <ol> устанавливает тип списка — маркированный или нумерованный.

<dd>, <dt>, <dl>

Тройка элементов предназначена для создания списка определений. Каждый такой список начинается с контейнера <dl>, куда входит тег <dt> создающий термин и тег <dd> задающий определение этого термина. Закрывающий тег </dd> не обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента. Тем не менее, хорошим стилем является закрывать все теги.

7) Таблицы.

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

<table>

Служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>.

<td>

Предназначен для создания одной ячейки таблицы. Тег <td> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.

<th>

Тег <th> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру.

<tr>

Тег <tr> служит контейнером для создания строки таблицы. [4]

5. Значения атрибутов тегов

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

5.1 Цвет.

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

Шестнадцатеричные цвета

Для задания цветов в HTML используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Числа от 10 до 15 заменены латинскими буквами. В таблице  1 приведено соответствие десятичных и шестнадцатеричных чисел.

Таблица 1. Десятичные и шестнадцатеричные числа меньше 16

Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно (таблица 2). Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной.

Таблица 2. Десятичные и шестнадцатеричные числа больше 16

Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставится символ решетки #, например #aa69cc. При этом регистр значения не имеет, поэтому допустимо писать #F0F0F0 или #f0f0f0.

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

<body bgcolor="#fa8e47">

Здесь цвет фона веб-страницы задан как #FA8E47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (FA) определяют красную составляющую цвета, цифры с третьей по четвертую (8E) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет.

Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, общее количество цветов может быть 256х256х256 = 16.777.216 комбинаций. Цветовая модель, основанная на красной, зеленой и синей составляющей получила название RGB (red, green, blue; красный, зеленый, синий). Эта модель аддитивная (от add — складывать), при которой сложение всех трех компонент образует белый цвет.

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

Если значения компонент цвета одинаковы (например: #D6D6D6), то получится серый оттенок. Чем больше число, тем светлее цвет, значения при этом меняются от #000000 (черный) до #FFFFFF (белый).

Ярко-красный цвет образуется, если красный компонент сделать максимальным (FF), а остальные компоненты обнулить. Цвет со значением #FF0000 самый красный из возможных красных оттенков. Аналогично обстоит с зеленым цветом (#00FF00) и синим (#0000FF).

Желтый цвет (#FFFF00) получается смешением красного с зеленым. Это хорошо видно на цветовом круге (рисунок 2), где представлены основные цвета (красный, зеленый, синий) и комплементарные или дополнительные. К ним относятся желтый, голубой и фиолетовый (еще называемым пурпурным). Вообще, любой цвет можно получить смешением близлежащих к нему цветов. Так, голубой (#00FFFF) получается за счет объединения синего и зеленого цвета.

Рисунок 2 - Цветовой круг

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