Конспект урока "Основы языка гипертекстовой разметки документов"

Основы языка гипертекстовой разметки документов

Информация в Интернете размещается на web-сайтах. Web-сайты же состоят из web-страниц, как

обыкновенный журнал состоит из страниц. Web-страницы внутри одного web-сайта связаны между собой

с помощью гиперссылок.

Сайты могут быть интерактивными и мультимедийными.

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

представлена в виде графики (картинки, анимация, видеозапись) или звука (звукозаписи).

Если же на сайте есть различные формы для обратной связи с посетителями сайта (например,

анкета), то такой сайт является интерактивным.

Web-страницы сайта могут содержать динамические объекты, созданные с помощью специальных

языков программирования.

Пользователь может запускать те или иные динамические объекты с помощью расположенных на

сайте управляющих элементов, например, кнопок.

Перед созданием сайта необходимо разработать его проект: определить, сколько web-страниц будет

входить в сайт, какова будет их тематика и как они будут связаны между собой.

Нам известно, что web-страницы реализуются с помощью языка разметки гипертекстовых

документов HTML и на самом деле являются обычными текстовыми документами, в которые

вставляются специальные управляющие символы (тэги).

Текстовой файл можно будет удалить после создания html-документа. Основными элементами

документа являются тэги (или дескрипторы).

Тэги – управляющие символы, которые определяют вид Web-страницы при её просмотре в

браузере.

При отображении в браузерах web-страницы предстают в том виде, который задается тэгами.

Для создания web-страниц используются как простейшие текстовые редакторы, так и специальные

программы, облегчающие и оптимизирующие работу с web-страницами.

Создание структуры web-страницы

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

открывающего и закрывающего тэгов и называются контейнером.

Закрывающий тэг содержит прямой слэш (/) перед обозначением. Записывать тэги можно как

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

свойства.

Web-страница состоит их двух логических частей: заголовка и содержания. HTML-код страницы

помещается внутрь контейнера <HTML></HTML>, по которому браузер определяет, что это web-

страница. Заголовок web-страницы заключается в контейнер <HEAD></HEAD> и содержит название

документа и справочную информацию о нем. Название страницы заключается в тэги <TILE></TILE>.

Основное содержание страницы помещается в контейнер <BODY></BODY>. Здесь могут быть

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

Созданную web-страницу необходимо сохранить в виде файла с расширением htm или html.

Страницу, которая загружается в браузер первой, принято сохранять под именем index.htm.

Смотри таблицу основных тэгов языка HTML.

Для работы с HTML документом необходимо пройти подготовительный этап:

1. Создать персональную папку, где обязательным требованием является использование для имени

папки английские буквы;

2. Создать текстовой документ блокнот;

3. Открыть документ и сохранить его под новым именем с расширением html или htm.

4. Закрыть документ;

5. Открыть html –документ;

6. Открыть блокнот, выполнив команду Вид/в виде html.

В папке должны находится:

Общий вид программы:

<html>

<head>

<title>Моя персональная страница</title>

</head>

<body>

Моя страница

</body>

</html>

Основное содержание программы помещается между тэгами <body></body>. Рассмотрим основные тэги.

Таблица основных тэгов языка HTML

ТЭГИ

НАЗНАЧЕНИЕ

Указывает программе просмотра страниц, что это HTML документ.

Данные тэги обрамляют документ

Определяет место, где помещается различная информация, не

отображаемая в теле документа. Здесь располагается тэг названия

документа и тэги для поисковых машин

Помещает название в оглавление программы просмотра страниц

Определяет видимую часть документа

Устанавливает цвет фона документа, используя значение цвета в виде

RRGGBB – пример: FF0000 – красный цвет

Устанавливает цвет текста документа, используя значение цвета в

виде RRGGBB – пример: 000000 – черный цвет

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

RRGGBB – пример: 00FF00 – зеленый цвет

Устанавливает цвет гиперссылок на которых вы уже побывали,

используя значение цвета в виде RRGGBB – пример: 333333 – серый

цвет

Устанавливает цвет гиперссылок при нажатии

Для создания своей первой страницы недостаточно знать основные тэги. Необходимо научиться

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

текста. Они представлены в следующей таблице:

(Каждому ученику раздается данная таблица и проектируется на экран).

Таблица тэгов для форматирования текста

ТЭГИ

НАЗНАЧЕНИЕ

…

Задает размер заголовка

Обрамляет предварительно отформатированный текст

Жирное начертание шрифта

Начертание Курсив

Имитация стиля печатной машинки

Используется для цитат, обычно наклонный текст

Используется для выделения наиболее важных частей текста

(наклонный и жирный текст)

Устанавливает размер текста в пределах от 1 до 7

Устанавливает цвет текста, используя значение цвета в виде

Начало нового абзаца

Выравнивает абзац относительно одной из сторон документа,

значения:

Вставляет перевод строки

</ blockquote>

Создает отступы с обеих сторон текста.

Создает нумерованный список

<li>

Определяет каждый элемент списка и присваивает номер

Создает ненумерованный список

Создает гиперссылку на другие документы или часть текущего

документа

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

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

Вставка изображений

Для того чтобы сделать web-страницу более привлекательной, на ней можно разместить

графические файлы трех форматов – GIF, JPG, PNG. Изображения других форматов необходимо

преобразовать в один из вышеуказанных.

На титульной странице обычно размещаются изображения, соответствующие тематике сайта.

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

можно найти на сайте производителей и продавцов компьютерной техники.

На web-страницу рисунок вставляется с помощью тэга <IMG> с атрибутом SRC, который указывает

путь к файлу на локальном компьютере или в Интернете. Полный путь к файлу на локальном

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

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

имени файла.

С помощью атрибута ALT можно добавлять к рисунку на web-странице поясняющий текст,

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

причинам рисунок не загружается в браузере.

Гиперссылки на web-страницах

Если web-страница состоит из нескольких страниц, то должна быть возможность перехода с одной

страницы на другую. Такую возможность дают гиперссылки (состоит из 2 частей: указатель ссылки и

адресная часть ссылки).

Указатель ссылки – это то, что мы видим на web-странице, обычно это текст или рисунок. Текст

гиперссылки по умолчанию выделяется синим цветом и подчеркиванием. Щелчок мышью по указателю

ссылки вызывает переход на другую страницу, указанную в адресной части гиперссылки.

Адресная часть – это URL-адрес документа, на который указывает ссылка. URL-адрес может быть

абсолютным и относительным.

Абсолютный адрес содержит путь к файлу и его имя.

Например: C:/Web-сайт/filename.htm – абсолютный адрес документа, находящегося на локальном

компьютере.

http//www.host.ru/Web-сайт/filename.htm – абсолютный адрес документа, находящегося на

удаленном компьютере в Интернете.

Относительный URL-адрес указывает на местоположение документа относительно того, в котором

находится указатель ссылки.

При разработке сайта входящие в него web-страницы рекомендуется связывать относительными

ссылками. Тогда при перемещении этого сайта в другой каталог или при его публикации в Интернете

адресную часть ссылок изменять не надо.

Гиперссылка задается контейнером <A> </A>. Контейнер должен содержать указатель ссылки. А с

помощью атрибута HREF задается URL-адрес документа на локальном компьютере или в Интернете: <A

HREF=”URL”> Указатель гиперссылки </A>.

Практическая часть

Задание 1: разработайте тематический сайт «Компьютеры», который должен содержать:

1) титульную страницу «Компьютер»;

2) страницу «Программы», содержащую классификацию ПО;

3) страницу Словарь», содержащую словарь компьютерных терминов;

4) страницу «Комплектующие» с ценами на устройства компьютера;

5) страницу «Анкета», содержащую анкету для посетителей сайта.

1 этап: откройте окно текстового редактора Блокнот. В окне Блокнота введите следующий HTML-

код web-страницы:

<HTML>

<HEAD>

<TITLE> Компьютер</TITLE>

</HEAD>

<BODY>

Все о компьютере

</BODY>

</HTML>

Теперь сохраните файл под именем index.htm в папке сайта и загрузите этот файл в окно браузера для

просмотра.

2 этап: мы создали страницу и вставили в нее заголовок. Теперь добавим текст после

горизонтального разделителя и отформатируем его. В окне приложения Блокнот в контейнер <BODY>

вставьте следующий текст с тэгами:

Все о компьютере

</HI>

<HR>

На этом сайте вы сможете получить различную информацию о компьютере, его

программном обеспечении и ценах на компьютерные комплектующие.

Терминологический словарь познакомит вас с компьютерными терминами, а

также вы сможете заполнить анкету.

Задание 2: в созданный нами сайт «Компьютер» на титульную страницу вставьте изображение

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

1 этап: «Скачайте» изображение компьютера из Интернета и сохраните его в файле с именем

computer.gif в каталоге сайта. В приложении Блокнот откройте созданный ранее файл index.htm. Затем в

контейнер <BODY> вставьте перед абзацами текста тэг вставки изображения:

2 этап: создайте пустые страницы «Программы», «Словарь», «Комплектующие», «Анкета» и

сохраните их в файлах с именами software.htm, glossary.htm, hardware.htm, anketa.htm в каталоге сайта.

Каждая страница должна содержать следующий код:

<HTML>

<HEAD>

<TITLE> Заголовок страницы </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

3 этап: вставьте в титульную страницу код, создающий панель навигации вашего сайта:

[<A HREF=”software.htm”> Программы </A>]

[<A HREF=”glossary.htm”> Словарь </A>]

[<A HREF=”hardware.htm”> Комплектующие </A>]

[<A HREF=”anketa.htm”> Анкета </A>]

4 этап: вставьте в титульную страницу код, создающий ссылку на адрес электронной почты:

<A HREF= mailto:[email protected]> E-mail:[email protected] </A>

</ADDRESS>

Скачать материал

Конспект урока "Основы языка гипертекстовой разметки документов"

Информатика - еще материалы к урокам:

Предметы

Похожие материалы