Раздел 1. Структура документа

Методические указания к лабораторным работам

Основы создания Web-документа

Мурманск

УДК

ББК

К

Составители – Невская В.И., ст. преподаватель, Сенецкая Л.Б., доцент кафедры информационных систем и прикладной математики Мурманского государственного технического университета

Методические указания рассмотрены и одобрены кафедрой

«16» сентября 2011 года, протокол № 1

Рецензент - В.В. Ковальчук, д. т. н., профессор, кафедры ИС и ПМ МГТУ

© Оригинал макета подготовлен авторами

© Мурманский государственный технический университет, 2011

Введение. 4

Лабораторная работа №1 Основы HTML. 6

Лабораторная работа №2 Создание гиперссылок, работа с изображениями. 16

Лабораторная работа №3 Работа с таблицами. 30

Лабораторная работа №4 Работа с формами. 41

Лабораторная работа №5 Работа с фреймами. 55

Лабораторная работа №6 Работа с картой изображений. 67

Лабораторная работа №7 Заголовок HTML-документа. 72

Лабораторная работа№8 Cascading Style Sheets/Каскадные таблицы стилей. 76

Лабораторная работа №9 Шрифты.. 85

Лабораторная работа№10 Идентификация и группирование элементов. 102

Лабораторная работа№11 Боксовая модель. 108

Введение

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

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

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

Методические указания позволят студентам получить практические навыки создания гипертекстовых документов с использованием HTML и CSS.

Термин HTML (HyperText Markup Language) означает "язык маркировки гипертекстов". Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли. Со времени создания первой версии HTML претерпел некоторые изменения. Как и многое другое в компьютерном мире, версии, или спецификации, HTML оказались пронумерованными.

CSS это язык стилей, определяющий отображение HTML-документов. Например, CSS работает с шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другими вещами.

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

Конкретные преимущества CSS:

· управление отображением множества документов с помощью одной таблицы стилей;

· более точный контроль над внешним видом страниц;

· различные представления для разных носителей информации (экран, печать, и т. д.);

· сложная и проработанная техника дизайна.

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

Лабораторная работа №1
Основы HTML

Цель работы:получить навыки создания html – документа.

Задачи:

· научиться применять обязательные и непарные метки;

· научиться создавать списки (нумерованные, маркерованные, определений);

· научиться форматировать шрифт внутри html – документа;

· научиться добавлять в html – документ форматированный текст.

Порядок выполнения работы

Раздел 1. Структура документа

HTML-документ — это просто текстовый файл с расширением *.htm Задание 1.1

Наберите в редакторе «блокнот» текст следующего HTML-документа:

Сохраните документ с именем пример1_1.htm, откройте в браузере.

Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, <html>) называется меткой (по-английски — tag, читается "тэг"). Большинство HTML-меток — парные, то есть на каждую открывающую метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением "/". Метки можно вводить как большими, так и маленькими буквами. Например, метки <body>, <BODY> и <Body> будут восприняты браузером одинаково. Многие метки, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку. В этом простейшем документенет ни одного атрибута.