Кафедра «Информационные технологии и моделирование»

Утверждаю

Проректор по УР

А. Патрушев

МЕТОДИЧЕСКИЕ УКАЗАНИЯ И ЗАДАНИЯ

к самостоятельной работе по теме

«Технологии World Wide Web: основы html и css»

дисциплина «Информационные технологии в экономике»

Челябинск, 2008

Составители

Торбеев И.Г. – канд.техн.наук., доцент (ЧГАУ)

Торбеева Е.А. – ст. преподаватель (ЧГАУ)

Рецензент

Романова Е.В. – канд.экон.наук., доцент (ЧГАУ)

Ответственный за выпуск

Капов С.Н. – зав. кафедрой информационных технологий и моделирования

Печатается по решению редакционно-издательского совета ЧГАУ

Редактор Гришина Л.Ф.

РИО ЧГАУ

Формат А5. Объем уч.-изд. л.

Тираж 50 экз. Заказ №

УОП ЧГАУ

© ФГОУ ВПО «Челябинский государственный агроинженерный университет», 2008.

Введение

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

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

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

Для создания такой системы необходимо было стандартизовать:

• средства представления поддерживаемых в ней информационных ресурсов;

• способ уникальной идентификации этих ресурсов;

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

Такие стандарты были разработаны. Это язык гипертекстовой разметки HTML, универсальный указатель ресурсов URL и протокол передачи гипертекста HTTP. Кроме того, чтобы обеспечить возможность расширения функций веб-сервера, был разработан стандарт универсального шлюзового интерфейса CGI. В данных методических указаниях студентам предлагается самостоятельно освоить основы технологии WWW – HTML и CSS.

Тема №1. Основы технологии html Работа №1 «Создание простого html-документа. Разметка текста»

Цель работы: 1) научиться создавать простой Web-документ с использованием языка HTML; 2) ознакомиться с разметкой текста.

Теоретико-методическая часть

HTML. Для создания любой интернет-страницы используется язык гипертекстовой разметки HTML (HyperText Markup Language – стандарт оформления гипертекстовых документов – версия стандарта HTML 4.01 действует с 1999 года). Гипертекст – сложно структурированный текст в символах ASCII со вставленными в него гиперссылками (активными словами – командами, указывающими на другие места этого текста, другие документы, рисунки и т. д.). Таким образом, основой любой HTML-страницы является текстовый файл, в котором производится форматная разметка содержимого (форматы представления текстов, изображений, аудио- и видеоданных и пр.). Полученный файл называется HTML-файлом и имеет расширение .htm или .html. Поэтому HTML-документы можно создавать и редактировать в обычных текстовых редакторах, но эффективнее использовать специальные редакторы, например, Microsoft FrontPage.

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

Теги. Базовый элемент языка HTML – так называемый тег (tag - маркер, метка). Тег управляет форматом содержимого и всегда заключен между угловыми скобками, причем, как правило, бывает парным – имеются открывающий <> и закрывающий </> теги. Открывающий тег может иметь не- или обязательные параметры, которым присваиваются некоторые значения. Общий вид:

<тег параметр=значение …параметр=значение>…</тег>

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

Теги могут быть вложенными. Другого рода пересечения тегов не допускается (по аналогии с матрешкой).

Рис. 1 Пример разметки HTML-файла с использованием Блокнота

Теги структуры документа. Любой HTML-документ заключен между тегами <html> …</html> и имеет строго определенную структуру: заголовок и тело документа. Редактор Microsoft FrontPage, например, создает простой HTML-документ, который уже содержит эти блоки. В редакторе Блокнот нужно набирать весь код.

Заголовок документа заключается между тегами <head> …</head> и содержит служебные элементы документа (см. рис. 1). В заголовке присутствует тег <title>Новая страница 1</title>, в котором указывается название страницы (оно выводится в заголовке браузера). Мета-теги браузером не отображаются, но они нужны для правильного отображения страницы (например, для указания языка страницы), а также для различных поисковых роботов. Тег <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> определяет характеристики протокола HTTP, т. е. задает страницу в стандартной кодировке кириллицы в Windows. Content-Type указывает тип документа (параметр content) и кодировку символов (параметр charset).

Рис.2 Результат разметки HTML-страницы

Непосредственно текст документа заключен в теги <body>…</body>. Тег <body> может включать в себя ряд параметров, которые описывают некоторые общие свойства представления HTML-страницы, т.е. всего документа на экране клиентского компьютера. Например, параметр bgcolor= #rrggbb задает цвет фона документа. Значения параметра изменяются в диапазоне от 00 до FF. Тег <body bgcolor=#C0C0C0> - задает серый цвет фона страницы.

Название цвета	Шестнадцатеричное значение
aqua	00FFFF
black	000000
blue	0000FF
fuchsia	FF00FF
gray	808080
green	008000
lime	00FF00
maroon	800000
olive	808000
purple	800080
red	FF0000
teal	008080

Теги оформления текста позволяют:

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

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

• определять в тексте списки некоторых элементов с их нумерацией или без нумерации;

1. Некоторые теги начертания:

<b>…</b> - полужирный шрифт

<i>…</i> - курсив

<u>…</u> - подчеркивание

Например, строку <b> устройство компьютера </b> браузер выведет так:

устройство компьютера

а строку <b><i> устройство </i> компьютера </b> вот так

устройство компьютера

2. Текстовый абзац оформляется тегом <p>…</p>.

Он может содержать параметры форматирования абзаца, например, параметр align - выравнивание. Если параметр не задан, то по умолчанию, абзац выравнивается по левому краю. Значения этого параметра могут быть следующими: center (центр), left (влево), right (вправо), justify (по ширине). Например, элемент документа <p align=center> Интернет - это завтра человечества </p> в окне браузера будет выведен по центру окна (см. рис. 1 и 2).

Важно!

1) При отображении документа абзацы (тег <p>) разделяются пустой строкой.

2) HTML не содержит параметр, управляющий отступом абзаца.

3. Теги заголовков - <h1>…</h1>………<h6>…</h6>.

Заголовок первого уровня самый крупный. В этих тегах тоже можно указывать параметр выравнивания align. Например, конструкция <h1 align=center> Агропредприятие "Новая заря"</h1> выведет заголовок по центру страницы (см. рис. 1 и 2).

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

4. Определение шрифта текста - тег <font>…</font>. Открывающий тег может иметь следующие параметры:

• size=string – определяет размер шрифта. Значение string может быть от 1 до 7 (size=3 – стандартный размер шрифта, используемый по умолчанию);

• color=#rrggbb – определяет цвет шрифта;

• face=string – определяет гарнитуру.

Например, элемент

<font face=Arial size=4><p><b> Наше предприятие существует уже более 20 лет </b></p> </font>

будет отображен гарнитурой Arial, размер шрифта – 4 единицы.

5. Нумерованный список – тег <ol>…</ol>.

По умолчанию нумерация делается арабскими цифрами. Каждый элемент списка оформляется тегом <li>…</li>. Например, конструкция

<font face=Courier size=4 color=#086F0F>

<b>Наши постоянные клиенты:</b>

<ol>

<li>социальная сфера</li>

<li>пищевая промышленность</li>

<li>перерабатывающая промышленность</li>

</ol>

</font>

будет отображена браузером, как показано на рисунке 3.

Важно! Маркированный список создается так же, но с помощью тега <ul>…</ul>. С помощью параметра type можно задать вид значка (type=disk/square/circle).

Бегущая строка. Для создания бегущей строки используется парный тег <marquee>…</marquee>. Направление движения определяет параметр behavior, который может принимать значения left (по умолчанию), right и alternate (строка движется то вправо, то влево).

Горизонтальная линия. Для вставки горизонтальной линии используется тег <hr>. Тег может иметь следующие параметры:

• size=n – определяет толщину линии в пикселях;

• color=#rrggbb – определяет цвет линии;

• width=n – ширину линии как в пикселях, так и в процентах, относительно ширины страницы;

• align =left (right, center) – выравнивание линии.

Рис. 3 Результат отображения браузером HTML-файла