Заголовок

Т. А. ГОЛОВАНОВА ОСНОВЫ 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-документ начинается с тега и закан- чивается тегом . Внутри этих тегов размещается весь доку- мент. Заголовок Внутри тегов располагается информация об авторах, ключевые слова, названия страниц, служебная информация и т.д. В окне браузера не отображается. Cодержимое Тег , документа размещающийся внутри тега (тело документа) , определяет заголовок документа. Отображается в строке заголовка окна браузера. Внутри тегов размещается «тело» web- страницы или всего сайта. Содержит всю информацию о содержании сайта – текст, изображения, видеофрагменты и т.д. Отображается в окне браузера полностью. Обратите внимание: все перечисленные теги являются в HTML-документе обязательными. 7 2. Основные теги. Форматирование текста 2.1. Определение разделов документа Для определения разделов HTML-документа используют контейнер- ные теги

и .

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

Основы HTML и CSS

Similar Основы HTML и CSS