- •«Мурманский государственный технический университет»
- •Методические указания к лабораторным работам Основы создания Web-документа Мурманск
- •Введение
- •Лабораторная работа №1 Основы html
- •Раздел 1. Структура документа
- •Раздел 2. Обязательные метки
- •Раздел 3. Непарные метки
- •Раздел 4. Форматирование шрифта
- •Раздел 5. Списки
- •5.4. Вложенные списки
- •Лабораторная работа №2 Создание гиперссылок, работа с изображениями
- •Раздел 1. Гиперссылки
- •1.1. Локальные ссылки
- •1.2. Ссылки на ресурсы
- •Раздел 2. Цветовая гамма html-документа
- •Раздел 3. Бегущая строка Задание. Бегущая строка
- •Раздел 4. Изображения в html-документе
- •4.1. Обтекание графики текстом в документе html
- •4.2. Выравнивание текста html-страницы
- •4.3. Пустая область вокруг изображения html-страницы
- •4.4. Списки с графическими маркерами html-страницы
- •4.5. Задание размеров изображения html-документа
- •Лабораторная работа №3 Работа с таблицами.
- •Раздел 1. Создание таблиц
- •1.1. Фон таблицы
- •1.2. Задание высоты и ширины ячеек
- •1.3. Задание выравнивния в ячейке. Объединение ячеек
- •Раздел 2. Вложенные таблицы
- •Раздел 3. Границы таблицы.
- •Лабораторная работа №4 Работа с формами
- •Раздел 1. Форма.
- •Тип элемента radio
- •Тип элемента checkbox
- •Тип элемента text
- •Тип элемента password
- •Тип элемента reset
- •Тип элемента submit
- •Тип элемента image
- •Элемент select
- •Элемент textarea
- •Лабораторная работа №5
- •Раздел 1. Работа с фреймами
- •Задания для самостоятельного выполнения:
- •Раздел 3. Зарезервированные имена фреймов
- •Лабораторная работа №6 Работа с картой изображений
- •Раздел 1. Карта-изображение
- •1.1. Основные теги для создания карты
- •Лабораторная работа №7 Заголовок html-документа
- •Раздел 1. Заголовок html-документа
- •Лабораторная работа№8 Cascading Style Sheets/Каскадные таблицы стилей. Цвет и фон
- •Раздел 1. Способы применения правила css к Html-документу
- •Метод 1: Инлайн/In-line (атрибут style)
- •Метод 2: Внутренний (тэг style)
- •Метод 3: Внешний (ссылка на таблицу стилей)
- •Раздел 2. Цвет и фон
- •2.1. Свойство color
- •Свойство background-color
- •Свойство background-image
- •Свойство background-repeat
- •Свойство background-attachment
- •Свойство background-position
- •Лабораторная работа №9 Шрифты. Ссылки
- •Раздел 1. Свойства шрифтов
- •Свойство font-family
- •Свойство font-style
- •Свойство font-variant
- •Свойство font-weight
- •Свойство font-size
- •Сокращенная запись font
- •Раздел 2. Текст
- •Свойство text-indent
- •Раздел 3. Ссылки
- •Лабораторная работа№10 Идентификация и группирование элементов (class и id) Группирование элементов (span и div)
- •Раздел 1. Группирование элементов с помощью class
- •Раздел 2. Идентификация элемента с помощью id
- •Лабораторная работа№11 Боксовая модель
- •Раздел 1. Боксовая модель
- •Заполнение элемента
- •Установка ширины блока[width]
- •Установка высоты блока[height]
- •Размещение элементов на странице
- •Всплывающие элементы (поплавки)
- •Свойство float
- •Свойство clear
- •Позиционирование элементов
- •Принципы css-позиционирования
- •Абсолютное позиционирование
- •Раздел 3. Работа со слоями
- •Рекомендуемая литература
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ БЮДЖЕТНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ
«Мурманский государственный технический университет»
Кафедра Информационных систем и
прикладной математики
Методические указания к лабораторным работам Основы создания Web-документа Мурманск
2011
УДК
ББК
К
Составители – Невская В.И., ст. преподаватель, Сенецкая Л.Б., доцент кафедры информационных систем и прикладной математики Мурманского государственного технического университета
Методические указания рассмотрены и одобрены кафедрой
«16» сентября 2011 года, протокол № 1
Рецензент - В.В. Ковальчук, д. т. н., профессор, кафедры ИС и ПМ МГТУ
© Оригинал макета подготовлен авторами
© Мурманский государственный технический университет, 2011
Введение 4
Лабораторная работа №1 Основы HTML 6
Лабораторная работа №2 Создание гиперссылок, работа с изображениями 15
Лабораторная работа №3 Работа с таблицами. 29
Лабораторная работа №4 Работа с формами 39
Лабораторная работа №5 Работа с фреймами 52
Лабораторная работа №6 Работа с картой изображений 64
Лабораторная работа №7 Заголовок HTML-документа 69
Лабораторная работа№8 Cascading Style Sheets/Каскадные таблицы стилей. 72
Лабораторная работа №9 Шрифты 81
Лабораторная работа№10 Идентификация и группирование элементов 96
Лабораторная работа№11 Боксовая модель 102
Введение
Информационные технологии, использующие возможности Интернет, проникают в большинство сфер человеческой деятельности. Умение использовать эти возможности в профессиональной деятельности обеспечивают её успешность и способствует повышению эффективности.
Электронная коммерция и банки, консалтинговые услуги, маркетинг с использованием корпоративных сайтов, предложение рекламной продукции посредством Интернет и другие услуги прочно входят в повседневную деловую жизнь.
Создание персональных или корпоративных веб-страниц и размещение их в Интернет обеспечивает практически неограниченные возможности рекламы продукции и услуг, решение задач дистанционного образования. В настоящее время веб-пространство стало такой же платформой для создания приложений, как и персональный компьютер. Поэтому овладение технологиями создания веб-приложений является обязательным элементом информационной подготовки современного специалиста.
Методические указания позволят студентам получить практические навыки создания гипертекстовых документов с использованием HTML и CSS.
Термин HTML (HyperText Markup Language) означает "язык маркировки гипертекстов". Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли. Со времени создания первой версии HTML претерпел некоторые изменения. Как и многое другое в компьютерном мире, версии, или спецификации, HTML оказались пронумерованными.
CSS это язык стилей, определяющий отображение HTML-документов. Например, CSS работает с шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другими вещами.
HTML используется для структурирования содержимого страницы. CSS используется для форматирования этого структурированного содержимого.
Конкретные преимущества CSS:
управление отображением множества документов с помощью одной таблицы стилей;
более точный контроль над внешним видом страниц;
различные представления для разных носителей информации (экран, печать, и т. д.);
сложная и проработанная техника дизайна.
Методические указания содержат краткий теоретический материал, который сопровождается примерами, его иллюстрирующими. Работы сопровождаются самостоятельными заданиями, позволяющими закрепить полученные навыки в рамках рассмотрения темы.