Урок 1. Всемирная паутина и Web-узлы. Язык HTML. Понятие о контейнерах и тегах

Всемирная паутина, или WWW (World Wide Web), представляет собой глобальное информационное пространство. В WWW каждый может разместить собственный Web-узел, содержащий информацию по любой теме. Физической основой Всемирной паутины является Интернет (от англ. Internet) - всемирная система объединённых компьютерных сетей.

Веб-узел, или веб-сайт (англ. web — паутина и site — место) — это совокупность веб-страниц. Каждая веб-страница представляет собой текстовый файл, в котором текст размечен на языке HTML (или XHTML).

Страницы веб-сайта объединены общим корневым адресом, а также зачастую темой, логической структурой, оформлением.

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

Например, URL-адрес http://www.yoursite.ru/index.html означает следующее: http - web-сервер, использующий протокол HTTP; www – узел находится в World Wide Web; yoursite – узел какого либо сайта; ru – узел находится в России; index.html – главная страница сайта.

HTML (HyperText Markup Language – язык разметки гипертекста), является языком создания веб-страниц. Его нельзя считать языком программирования.

Язык HTML позволяет

  • форматировать текст (под форматированием текста чаще всего понимают оформление текста с помощью шрифтов, цвета и др. признаков текста, изменяющих его вид, но не смысл);
  • различать в нём функциональные элементы (кнопки, таблицы и др.);
  • создавать ссылки на другие ресурсы Интернет (гиперссылки);
  • вставлять различные внешние объекты в отображаемую страницу (изображения, звукозаписи и др.).
  • добавлять в страницу программные коды, написанные на языках программирования (например, на языке JavaScript).

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

Контейнеры HTML

Контейнерная модель html-документа

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

Тег состоит из имени, за которым может следовать необязательный список атрибутов тега. Атрибуты тега могут иметь конкретные значения, устанавливаемые для изменения функции тега. Текст тега заключается в угловые скобки ("<" и ">").

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

<TABLE WIDTH=570 ALIGN=center>

Эта запись означает следующее: таблица шириной 570 пикселов, выровнена по центру.

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

Чаще всего HTML-контейнеры состоят из начального и конечного тегов, между которыми размещаются текст и другие элементы документа. Имя конечного тега идентично имени начального, но перед именем конечного тега ставится косая черта / (например, для тега тела документа <BODY> закрывающая пара представляет собой </BODY>). Конечные теги никогда не содержат атрибутов. Некоторые элементы разметки не имеют конечного компонента, поскольку являются автономными элементами. Например, тег изображения <IMG>, который служит для вставки в документ графического изображения, конечного компонента не требует.

HTML-документ — это один большой контейнер, который начинается с тега <HTML> и заканчивается тегом </HTML>:

<HTML>
…
</HTML>	

Контейнер HTML состоит из двух других вложенных контейнеров: заголовка документа (HEAD) и тела документа (BODY):

<HTML>
<HEAD>
…  
</HEAD>
 
<BODY>
…
</BODY>
</HTML>	

В заголовке с помощью тега TITLE можно именовать окна браузера:




Это заголовок


Существуют и другие тэги, расположенные между <head> </head>, в основном несущие служебную и управляющую информацию.

Тег тела документа BODY, в отличие от тега НEАD, имеет атрибуты.
Атрибут BАСКGROUND определяет фон, на котором отображается текст документа. Так, если источником для фона HTML- документа является графический файл image.gif, то в открывающем теге тела BODY появляется соответствующий атрибут:

<ВОDY ВАСКGROUND="image.gif">

Также с помощью атрибутов ВGCOLOR и ТЕХТ можно указать цвета фона и текста документа. Цвета определяются в терминах RGB в шестнадцатеричной нотации (#ХХХХХХ). Также имеется возможность задавать цвета по названию.

Практическая работа "Контейнеры и теги HTML"

1. Откройте текстовый редактор (блокнот, Bred или др.) и введите следующий код HTML:

<html>
<head>
<title>web-cтраница</title>
</head>
<body text=#0000ff bgcolor=#f0f0f0>
<h1> HTML – язык разметки документов</h1>
Теги бывают
<ul>
<li> начальными 
<li> конечными
<li> автономными
</ul>
Контейнеры HTML
<ul>
<li> HEAD 
<li> BODY
</ul>
</body>
</html>

2. Сохраните документ на жестком диске, например под именем index.html. Здесь index – имя файла, а html – расширение, указывающее на тип документа.

3. Откройте документ для просмотра. Он откроется в браузере (например, Internet Explorer).

4. Обратите внимание на то, как расположены два списка.

5. Щелкните правой кнопкой мыши в окне браузера. В контекстном меню выберите пункт "Просмотр HTML-кода"

6. Поменяйте списки местами (список "Формы HTML-документов" должен располагаться выше, чем список "Теги бывают"). Обсудите, что для этого нужно сделать.

7. Закройте блокнот, сохранив изменения.

8. Обновите окно браузера (для этого достаточно нажать на кнопку Обновить на панели инструментов). Отметьте изменения.

Практическая работа "Атрибуты тегов BODY и HEAD"

1. Создайте четыре html-документа (например, one.html, two.html, three.html, four.html).

2. Откройте первый файл для редактирования и введите код:

<html>
<head>
<title> стр. №1</title>
<meta HTTP-EQUIV="Refresh" CONTENT="1; URL=two.html">
</head>
<body bgcolor=#0000FF text=FFFF00>
 Это первая страница
</body>
</html>

3. Обратите внимание на тег META и его атрибуты. Здесь задается смена страницы в окне браузера на two.html через 1 секунду.

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

Вопросы и задания:

  1. Объясните понятие «контейнер», использующееся при описании языка HTML?
  2. Может ли иметь закрывающий тег атрибуты?
  3. Можно ли менять значения атрибутов?