Основы HTML и CSS

58 Pages·2016·1.283 MB·Russian

by  Т. А. Голованова

Т. А. ГОЛОВАНОВА

ОСНОВЫ HTML И CSS

Учебно-методическое пособие

4
5
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ
РОССИЙСКОЙ ФЕДЕРАЦИИ

ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ
БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ
ВЫСШЕГО ОБРАЗОВАНИЯ

«ВЯТСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ»

Факультет экономики и менеджмента

Кафедра бизнес-информатики

Т. А. ГОЛОВАНОВА

ОСНОВЫ HTML И CSS

Учебно-методическое пособие

Киров
2016
4
УДК 004.438(07)
Г61

Допущено к изданию методическим советом факультета экономики
и менеджмента ВятГУ в качестве учебно-методического пособия для
студентов направлений 38.03.02 «Менеджмент», 38.03.03 «Управление
персоналом» и 43.03.02 «Туризм» всех профилей подготовки,
всех форм обучения
Рецензент:
кандидат технических наук,
доцент кафедры неорганической и физической химии ВятГУ,
Е. Г. Фоминых
Голованова, Т. А.
Г61 Основы HTML и CSS: учебно-методическое пособие /
Т. А. Голованова. – Киров: ВятГУ, 2016. – 55 с.

УДК 004.438(07)

Учебно-методическое пособие предназначено для выполнения
лабораторных работ по дисциплине «Информационные технологии в
профессиональной деятельности».
Авторская редакция
Тех. редактор Е. О. Гладких

© ВятГУ, 2016
2
Оглавление
Введение ............................................................................................................... 5
1. HTML-документ. Структура web-страницы .............................................. 6
2. Основные теги. Форматирование текста .................................................... 8
2.1. Определение разделов документа ............................................................ 8
2.2. Добавление заголовков ............................................................................. 8
2.3. Разбиение текста на параграфы ................................................................ 9
2.4. Принудительный перенос и
предварительно отформатированный текст ................................................... 10
2.5. Форматирование шрифта ........................................................................ 11
2.6. Горизонтальная линейка ......................................................................... 12
2.7. Использование сокращений и акронимов ............................................. 13
Лабораторная работа № 1. Создание web-страницы. Основные теги.
Форматирование текста .................................................................................... 14
3. Списки в HTML-документе ....................................................................... 17
3.1. Создание нумерованного списка ............................................................ 17
3.2. Создание маркированного списка .......................................................... 18
3.3. Многоуровневые (вложенные) списки .................................................. 19
1) Таблицы в HTML-документе ..................................................................... 20
1.1. Вставка таблицы ...................................................................................... 20
1.2. Формирование заголовка таблицы ......................................................... 22
1.3. Группирование строк таблицы ............................................................... 22
1.4. Объединение ячеек. Вложенные таблицы ............................................. 23
Лабораторная работа № 2. Списки и таблицы в HTML-документе ............ 24
2) Изображения в HTML-документе ............................................................. 27
2.1. Добавление изображения в HTML-документ. Оформление
изображения ....................................................................................................... 27
2.2. Обтекание графики текстом ................................................................... 29
2.3. Фоновое изображение ............................................................................. 29
3) Текстовые и графические гиперссылки в HTML-документе ................ 30
3.1. Текстовая гиперссылка ............................................................................ 31
3
3.2. Графическая гиперссылка ....................................................................... 31
3.3. Гиперссылка в пределах веб-страницы ................................................. 32
3.4. Цвет текста гиперссылок ........................................................................ 33
3.5. Почтовая гиперссылка ............................................................................. 33
Лабораторная работа № 3. Изображения и гиперссылки в
HTML-документе .............................................................................................. 34
4. Фреймы в HTML-документе ...................................................................... 36
4.1. Создание фреймовой структуры ............................................................ 36
4.2. Гиперссылки во фреймах ........................................................................ 39
4.3. Плавающий фрейм ................................................................................... 39
Лабораторная работа № 4. Фреймы в HTML-документе .............................. 41
5. Каскадные таблицы стилей CSS ................................................................ 42
5.1. Присоединение CSS к HTML-документу .............................................. 43
5.2. Селекторы ................................................................................................. 44
5.3. Форматирование шрифта в CSS ............................................................. 46
5.4. Форматирование текста в CSS................................................................ 47
5.5. Цветовое оформление элементов в CSS ................................................ 50
5.6. Фоновое изображение ............................................................................. 51
5.7. Блочные элементы ................................................................................... 52
5.8. Границы элементов .................................................................................. 53
Лабораторная работа № 5. Использование каскадных таблиц стилей в
HTML-документе .............................................................................................. 54
6. Библиографический список ....................................................................... 55

4
Введение

HTML (от англ. HyperText Markup Language – «язык гипертекстовой
разметки») – стандартный язык разметки документов во Всемирной пау-
тине. Большинство веб-страниц содержат описание разметки на языке
HTML (или XHTML). Гипертекст – это текст, устроенный таким образом,
что он превращается в систему, иерархию текстов, одновременно состав-
ляя единство и множество текстов. Язык HTML интерпретируется браузе-
рами; полученный в результате интерпретации форматированный текст
отображается на экране монитора компьютера или мобильного устройства.
Автор HTML – сэр Тимоти Джон Бернерс-Ли – британский учёный,
изобретатель URI, URL, HTTP, HTML, создатель Всемирной паутины
(совместно с Робертом Кайо) и действующий глава Консорциума Всемир-
ной паутины.
В настоящее время существует большое количество программ-
конструкторов, предназначенных для создания сайтов. Однако все эти про-
граммы основаны на использовании языка HTML, при помощи которого
формируется содержание и оформление веб-страницы.
Данное учебно-методическое пособие содержит информацию об ос-
новных элементах HTML, их использовании для формирования структуры
веб-страницы и её содержимого, а также краткую характеристику каскад-
ных таблиц стилей (CSS). В пособии даны методические указания для вы-
полнения лабораторных работ по созданию и редактированию веб-
страниц.

5
1. HTML-документ. Структура web-страницы

HTML-документ – это текстовый файл, созданный и сохранённый в
формате HTML (.html) и содержащий дескрипторы (теги) – управляющие
элементы разметки. Он может включать в себя:
 стилизованный и форматированный текст,
 команды включения графических и звуковых файлов,
 гиперсвязи с ресурсами Internet,
 скрипты (сценарии) на языках JavaScript и VBScript,
 различные объекты, в том числе анимацию.
Теги (дескрипторы) – это команды, используемые для выделения
элементов HTML-документа. Иначе говоря, это указания для браузера, как
следует отображать тот или иной элемент в документе. Имя тега всегда за-
ключено в треугольные скобки: <тег>.
Различают контейнерные и неконтейнерные теги. Контейнерные со-
держат открывающую и закрывающую части и записываются следующим
образом: <тег> элемент документа </тег>. Большинство тегов – контей-
нерные. Неконтейнерные теги не имеют закрывающей части.
Свойства тега определяют его атрибуты и их значения, которые запи-
сываются внутри открывающего тега. Значения атрибута записывают после
знака = (равно) в кавычках: <тег атрибут=”значение атрибута”> элемент
документа </тег>.

6
HTML-документ состоит их двух частей: заголовка и «тела» доку-
мента (см. рисунок).
Любой HTML-документ

начинается с тега <html> и закан-
<html>
чивается тегом </html>. Внутри
этих тегов размещается весь доку-
<head>
мент.
<title>Заголовок</title>
Внутри тегов <head>
</head>
</head> располагается информация
об авторах, ключевые слова,

названия страниц, служебная
<body> информация и т.д. В окне браузера
не отображается.
Cодержимое Тег <title> </title>,
документа
размещающийся внутри тега
(тело документа)
<head> </head>, определяет
заголовок документа.
</body> Отображается в строке заголовка
окна браузера.

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

7
2. Основные теги. Форматирование текста

2.1. Определение разделов документа

Для определения разделов HTML-документа используют контейнер-
ные теги <div> </div> и <span> </span>.
<div> </div> – это блочный элемент, и внутри него могут заключать-
ся любые другие элементы, и он всегда начинается с новой строки.
<span> </span> – это встроенный элемент, и внутри его может раз-
мещаться только текст, или ещё встроенный элемент, и расположить его
можно в любой части текста.

2.2. Добавление заголовков

Заголовки документа обозначаются при помощи контейнерного тега
<h> </h>, уровень заголовка обозначается цифрой от 1 до 6. 1 – самый
крупный, 6 – самый мелкий.
Атрибут выравнивания заголовков:
 align
Значения атрибута align:
 right – по правому краю;
 left – по левому краю;
 center – по центру;
 justify – по ширине.

8