|
681.3(07) |
№4924 | |||||
|
M - 545 |
|
| ||||
|
|
РОССИЙСКОЙ ФЕДЕРАЦИИ Федеральное государственное автономное образовательное учреждение высшего профессионального образования «Южный федеральный университет» ТЕХНОЛОГИЧЕСКИЙ ИНСТИТУТ В Г. ТАГАНРОГЕ
|
| ||||
|
К |
Методические указания к лабораторной работе №2 Разработка макета WEB-приложения с использованием технологий HTML и CSS по курсу Интернет-Интранет технологии
Для студентов специальности 230102 – Автоматизированные системы обработки информации и управления и направления 230100 – Информатика и вычислительная техника, профиль «Автоматизированные системы обработки информации и управления» всех форм обучения
Таганрог 2012
|
| ||||
МИНИСТЕРСТВО
ОБРАЗОВАНИЯ И НАУКИ
АФЕДРА
СИСТЕМНОГО АНАЛИЗА И ТЕЛЕКОММУНИКАЦИЙ
УДК 681.324(07.07)
Самойлов А.Н., Кучеров С.А.
Методические указания к лабораторной работе «Разработка макета WEB-приложения с использованием технологий HTML и CSS». – Таганрог: Изд-во ТТИ ЮФУ, 2012. – 16 c.
Лабораторная работа состоит из ряда шагов, в результате выполнения которых студент получит практические навыки по использованию технологий HTML и CSS – базовых технологий, используемых при создании современных веб-приложений.
Предназначено для студентов специальности 230102 –Автоматизированные системы обработки информации и управления и направления 230100 – Информатика и вычислительная техника, профиль «Автоматизированные системы обработки информации и управления».
Табл. 2. Ил. 4.
Рецензент канд. техн. наук, доцент Косенко Е.Ю.
Цели и задачи лабораторной работы
Цель работы: изучить технологии HTML и CSS. Получить практические навыки по их использованию. Научиться создавать макет веб-страницы.
Задачи работы
Изучить теоретический материал:
ознакомиться с технологиями HTML и CSS;
научиться оперировать основными тегами HTML.
Создать макет веб-страницы, используя «табличную верстку».
Отразить проделанные действия в отчете.
Написать осмысленный вывод.
Теоретические основы
Краткие сведения о html
HTML (от англ. HyperText Markup Language – «язык разметки гипертекста») – стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме. HTML является приложением SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879. За основу модели разметки документов в HTML принята теговая модель. Теговая модель описывает документ как совокупность контейнеров, каждый из которых начинается и заканчивается тегами. То есть документ НТМL представляет собой не что иное, как обычный АSСII-файл, с добавленными в него управляющими НТМL-кодами (тегами). Текст тега заключается в угловые скобки (< и >). Имя конечного тега идентично имени начального, но перед именем конечного тега ставится косая черта (/) (например, для тега стиля шрифта курсив <i> закрывающая пара представляет собой </i>, для тега заголовка <ТIТLЕ> закрывающей парой будет </ТIТLЕ>). Конечные теги никогда не содержат атрибутов.
CSS (англ. Cascading Style Sheets – каскадные таблицы стилей) – технология описания внешнего вида документа, написанного языком разметки. Преимущественно используется как средство оформления веб- страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.
Структура html-документа
Содержание простейшего HTML-кода с пояснениями представлено в таб. 1.
Таблица 1
Пример HTML-кода
|
Текст HTML-программы |
Комментарий |
|
<HTML> <HEAD> <METAcontent="charset=windows-1251"> <TITLE>Упражнение 1</TITLE> </HEAD> <BODY> <H1>Первый HTML-документ</H1> <HR> <P> Корова не похожа на лошадь. А лошадь не похожа на корову. Именно это сходство мы и берем за основу. </P> </BODY> </HTML> |
Начало HTML-документа Начало заголовка Информация о документе Название документа Конец заголовка Начало тела Заголовок Горизонтальная линия Начало абзаца
Абзац
Конец абзаца Конец тела Конец HTML-документа |
Команды языка (теги) заключаются в угловые скобки. Как правило, теги парные. Первый тег открывает описание команды, определяет ее начало. Второй, отличающийся от первого наличием косой черты "/" перед ключевым словом (именем тега), – закрывает его. Тег <HTML> должен открывать программу, а тег </HTML> – закрывать ее.
Заголовок программы
Между парой тегов <TITLE> и </TITLE> располагается имя HTML- документа. Это имя браузер использует в заголовке окна Windows, в котором показывает документ. Пример описания заголовка отображен на рис. 1.
Рис. 1. Пример заголовка HTML-страницы