МЕТОДИЧЕСКОЕ ПОСОБИЕ

Основы языка HTML

к элективному курсу «Создание Web-сайтов»

Введение

World Wide Web (WWW) – это одна из служб сети Интернет, обладающая наибольшей популярностью (на сегодняшний день WWW – это 90% современного Интернета), потому что отличается особой комфортностью работы и предоставляет доступ к наибольшим массивам информационных ресурсов.

HyperText Markup Language (HTML) - язык разметки гипертекста.

Гипертекст - информационная структура, позволяющая устанавливать смысловые связи между элементами текста на экране компьютера таким образом, чтобы можно было легко осуществлять переходы от одного элемента к другому. На практике в гипертексте некоторые слова выделяют путем подчеркивания или окрашивания в другой цвет (гиперссылки). Выделение слова говорит о наличии связи этого слова с некоторым документом, в котором тема, связанная с выделенным словом рассматривается более подробно.

Отдельный документ, выполненный в формате HTML, называется:

- HTML-документом, если речь идет о создании документа;

- Web-документом, если речь идет о способе его публикации или распространения;

- Web-страницей, если речь идет о способе его использования, то есть воспроизведения или иного взаимодействия с ним.

Такие страницы как правило имеют расширение htm или html.

Гиперссылка - фрагмент текста, который является указателем на другой файл или объект. Гиперссылки бывают внешними и внутренними. Если с гиперссылкой связан другой Web-документ, имеющий собственный URL-адрес, то это внешняя гиперссылка. Однако для очень длинных Web-документов авторы нередко создают внутренние гиперссылки, позволяющие переходить из одной части документа в другую, не прокручивая весь документ в окне броузера. Такие гиперссылки еще называют ссылками по якорю.

Группа Web-страниц, принадлежащих одному автору или одному издателю и взаимосвязанных общими гиперссылками, образует структуру, которая называется Web-узлом или Web-сайтом. Если речь идет о разработке группы взаимосвязанных Web-страниц, применяют термин Web-узел. Этот же термин используют, когда говорят о структуре связи между Web-страницами. Когда же речь идет с потребительских позиций и когда важна не структура Web-узла, а его содержательность или принадлежность той или иной организации, то употребляют термин Web-сайт.

Каждая HTML-страница имеет свой уникальный URL-адрес в Интернете.

Структура URL-адреса

Uniform Resource Locator – унифицированный указатель ресурса.

URL - адрес ресурса образуется объединением доменного имени компьютера, на котором он хранится, и пути поиска (пути доступа), который ведет от корневого каталога жесткого диска этого компьютера через все вложенные каталоги к файлу, представляющему ресурс.

Начинается URL – адрес с указания протокола HTTP (HyperText Transfer Protocol – протокол передачи гипертекста).

Типичный URL для WWW имеет вид:

https://www.название.домен/имя файла

Здесь название - это часть адреса, который часто употребляется для обозначения владельца сайта, а домен - обозначение крупного "раздела" Интернета: страны (ru), области деятельности (com) и т.д. Например, адрес гипертекстового файла works.htm в Интернете:

https://www.rambler.ru/bisness/works.htm

Структура HTML-документа

Терминология

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

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

Пример: элемент, содержащий некоторый текст, ограничен начальным тегом (маркером)
и конечным тегом (маркером)
. Т.е. текст помещен между тегами как в контейнер. Здесь же можно увидеть, как осуществляется возможность вложения элементов. Тег вложен внутрь тега
, поэтому конечный тег стоит перед
. В данном примере тег
указывает на то, что текст является отдельным абзацем, а тег задает формат шрифта, в нашем случае зеленый цвет шрифта.

Этот текст будет расположен в отдельном абзаце и выполнен зеленым цветом шрифта.

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

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

Этот текст будет выровнен по центру экрана

В данном примере атрибут align (выравнивание) расположен внутри тега

, следовательно, он задает выравнивание этого абзаца. Значение атрибута равно "center", т.е. выравнивание абзаца будет по центру экрана. На экране мы увидим:

Этот текст будет выровнен по центру экрана.

Структура HTML-документа

Ниже приведена структура типичного Web-документа.

	Этот тег указывает на начало HTML-документа
	Этот тег указывает на начало области заголовка Web-страницы. Служит для формирования структуры документа.
	Элемент для размещения заголовка Web-страницы. Строка отображается в заголовке окна броузера.
	Этот тег несет служебную информацию и не отображается в экране броузера. В данном случае идет речь о кодировке Web-странички. Вам достаточно лишь каждый раз вставлять этот тег в таком виде на свою страничку. Тогда ваша страничка будет использовать кодировку Windows-1251, наиболее распростра-ненную на сегодняшний день.
	Имя автора Web-страницы.
	Набор ключевых слов для поиска. Раньше этими словами пользовались поисковые машины, для отбора сайтов по тематике запроса. Сегодня эти слова поисковыми машинами практически не используются, однако полезно вставить этот тег на свою страничку и указать в нем ключевые слова, отражающие содержание вашего сайта.
	Конец области заголовка Web-страницы.
	Начало собственно содержимого Web-страницы. Тег включает в себя атрибут bgcolor, который задает цвет вашей страницы. В данном случае голубой. Если не использовать этот атрибут, то по умолчанию, цвет страницы будет белым.
Здесь расположен заголовок вашей странички	Элемент заголовка
Здесь расположен текст первого абзаца вашей странички	Элемент абзаца.
Здесь расположен текст второго абзаца вашей странички

<предыдущая страница