Работа на компьютере по созданию страниц

Лабораторные работы 5-7

ВВЕДЕНИЕ

Самым выдающимся достижением ХХ века признан Интернет – Всемирная Информационная Сеть (World Wide Web), или WWW.

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

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

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

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

Кирпичиками WWW являются Web-страницы, которые, в свою очередь, создаются при помощи языка разметки гипертекста (Hyper Text Markup Language), или HTML.

Хотя многие говорят о нем, как о языке программирования, на самом деле HTML таковым не является. HTML представляет собой только то, что заключено в его названии – язык маркировки, или разметки.

В основу разметки положена дескриптовая (тeговая) модель описания документа, позволяющая представить документ в виде совокупности элементов.

Цель методических указаний– познакомить студента с основными дескрипторами HTML и порядком их использования для создания собственных несложных Web-страниц.

БАЗОВАЯ СТРУКТУРА HTML-СТРАНИЦЫ. ПРОСТЕЙШИЙ ДОКУМЕНТ HTML. ТЕКСТОВЫЕ АТРИБУТЫ.

РАБОТА НА КОМПЬЮТЕРЕ ПО СОЗДАНИЮ СТРАНИЦ

Документ HTML всегда имеет определенные границы. Эти границы состоят из трех наборов контейнерных дескрипторов.

Дескриптор (тег) – это простой элемент разметки, который всегда начинается с левой угловой скобки «<» и заканчивается правой угловой скобкой «>». Между скобками записывается идентификатор дескриптора и, если необходимо, дополнительные аргументы. Все дескрипторы по их назначению и области действия можно разделить на пять основных групп:

– общего назначения;

– определения структуры текста;

– определение атрибутов текста;

– навигации и гипертекстовых ссылок;

– задания специальных эффектов и форматов данных.

Большая часть дескрипторов используются вместе с закрывающей парой, которая сигнализирует об окончании области действия соответствующего назначения. Закрывающая пара после левой угловой скобки содержит символ «/». Например, для дескриптора курсивного шрифта < I> закрывающая пара представляет собой < /I>.

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

HTML-страницы всегда начинаются с дескриптора < HTML>, который указывает на начало страницы. Он сообщает считывающему броузеру, что имеет дело с HTML-страницей. Последней строкой в документе должна быть закрывающая пара < /HTML>, которую можно интерпретировать как «конец HTML-страницы». Таким образом, каждая HTML-страница должна содержать строки:

< HTML>

< /HTML>

Следующие дескрипторы разделяют документ на две части: голову и тело. Для определения части головы добавляется дескриптор < HEAD> с закрывающей парой < /HEAD>. С учетом этого HTML-страница принимает вид:

< HTML>

< HEAD>

< /HEAD>

< /HTML>

В части тела вводится текст и все то, что фактически должно появиться на HTML-странице. Для определения тела применяется деcкриптор < BODY> с закрывающей парой < /BODY>, помещаемой после дескрипторов головы:

< HTML>

< HEAD>

< /HEAD>

< BODY>

< /BODY>

< /HTML>

В части головы документа задается заглавие, которое показывает общий смысл HTML-страницы. Его не следует путать с именем файла. При просмотре HTML-страницы в броузере Internet Explorer заглавие появится в строке заголовка окна броузера. Для определения заглавия HTML-страницы применяется дескриптор < TITLE> с закрывающей парой < /TITLE>.

Например, чтобы назвать страницу Моя первая страничка, нужно добавить дескриптор < TITLE> и поместить его в дескриптор < HEAD>:

< HTML>

< HEAD>

< TITLE> Моя первая страничка < /TITLE>

< /HEAD>

< BODY>

< /BODY>

< /HTML>

Для придания большей выразительности HTML-страницам применяются следующие дескрипторы и их закрывающие пары:

для использования жирного (bold) написания < B> и < /B>;

для курсива (italic) < I> и < /I>;

для режима подчеркивания (underline)< U> и < /U>.

Для переноса текста на другую строку (разрыва строки) используется дескриптор < BR>, он не требует закрывающей пары.

Для разбивки текста на абзацы используют открывающий дескриптор абзаца < P>, поместив его в начало каждого нового абзаца. Закрывающий < /P> не обязателен.

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

В качестве броузера (программа для просмотра Web-страниц) используют Internet Explorer (возможны и другие программы).

После создания и сохранения кода документа, написанного на языке HTML, окно Notepad не закрывается (так как еще пригодится).

Разгружается окно Internet Explorer и открывается код документа, написанного на языке HTML (Файл → Открыть → Кнопка обзор → Имя документа → ОК).

Изменения, вносимые в код документа, сохраняются, а в броузере (Internet Explorer) нажимается кнопка Обновить.

Если просматриваем броузером какую-либо Web-страницу, то код ее, написанный на языке HTML, всегда можно просмотреть прямо из броузера Internet Explorer (Вид → В виде HTML), при этом откроется новое окно для Notepad.

Задание 1.1. Напишите HTML-код для вывода нижеследующего текста и присвойте заглавие для документа Моя первая страничка:

Веселые гуси

Вытянули шеи, –

У кого длиннее?

Один серый, другой белый –

У кого длиннее?

Задание 1.2. 1.Измените HTML-код с целью придания большей выразительности своей Web-странице, выровняв по центру заголовок Веселые гуси (дескриптор < Center> и закрывающая пара < /Center>).

2. Первую строку Вытянули шеи отобразить жирным шрифтом, вторую – курсивом, третью – подчеркните, а четвертую – оставьте без изменения (рис. 1).

Рис. 1.