Структура HTML – документа

1 2 3 4 5 6 7

ФЕДЕРАЛЬНОЕ АГЕНТСТВО СВЯЗИ

Федеральное государственное бюджетное образовательное учреждение

Высшего образования

«Поволжский государственный университет телекоммуникаций и информатики»

КОЛЛЕДЖ СВЯЗИ

ВЕБ - ДИЗАЙН

УЧЕБНОЕ ПОСОБИЕ

для специальностей:

09.02.03 – Программирование в компьютерных системах

09.02.04 – Информационные системы (по отраслям)

09.02.07 – Информационные системы и программирование

Самара

2018

Рассмотрено на заседании ПЦК «Информационных систем и технологий» Председатель ____________Шомас Е.А. Протокол №____ от ___________2018г.

Утверждаю: Зам. директора по УВР ____________Логвинов А.В. «_____»______________2018г.

Шомас Е.А.

Веб - дизайн. Учебное пособие. – Самара.: КС ПГУТИ, 2018. - 78c.

Содержание

Раздел 1. Язык гипертекстовой разметки HTML.. 4

Тема 1.1 Структура HTML – документа. 4

Тема 1.2 Теги форматирования текста. 10

Тема 1.3 Ссылки. 14

Тема 1.4 Вставка объектов на веб – страницу. 16

Тема 1.5 Создание таблиц средствами HTML.. 20

Тема 1.6 Создание форм.. 21

Тема 1.7 Семантическая структура страницы.. 36

Раздел 2. Каскадные таблицы стилей CSS. 38

Тема 2.1 Введение в таблицы стилей и язык CSS. 38

Тема 2.2 Основные свойства CSS. 43

Тема 2.3 Оформление HTML – документа средствами CSS. 48

Тема 2.4 Создание макета страницы и верстка. 55

Тема 2.5 Трансформации, переходы и анимации. 59

Тема 2.6 Введение в адаптивный дизайн. 66

Тема 2.7 Canvas. Работа с графикой. 68

Список использованных источников. 78

Раздел 1. Язык гипертекстовой разметки HTML

Тема 1.1 Структура HTML – документа

HTML (Hyper Text Markup Language) – язык гипертекстовой разметки документов, который отвечает за структуру сайта. С помощью HTML текстовый документ разбивают на блоки смысловой информации (заголовки, параграфы, таблицы, рисунки и т.п.).

Гипертекстовый документ – это документ, содержащий переходы (гиперссылки) на другие документы. При использовании гиперссылки происходит перемещение от одного документа к другому.

Создать HTML документ можно в любом текстовом редакторе Notepad++, Sublime Text, Brackets и другие. Главный HTML – документ принято называть index.html.

Основой языка HTML является дескриптор (тег), он несет в себе определенную информацию.

Дескриптор HTML – это чаще всего два тега (открывающий и закрывающий) и часть документа между ними.

Тег – в переводе с английского – ярлык, этикетка. Тег определяет тип выводимого элемента HTML (например, заголовок, таблица, рисунок и т.п.). Сам тег не отображается браузером. Тег представляет собой последовательность элементов, заключенные в угловые скобки (< и >). Символ / используется для обозначения закрывающегося тега.

Атрибуты – необязательный набор параметров, определяющих дополнительные свойства элемента HTML (например, цвет или размер).

Пример элемента HTML:

<h1 align= "center"> Глава 1</h1>

В этом примере:

<h1 align= "center"> – открывающий тег

</h1> – закрывающий тег

h1 – имя тега

align= "center" – атрибут

align – имя атрибута

"center" – значение атрибута

Глава 1 – содержание элемента HTML

Структура HTML – документа

Последняя версия языка считается HTML5.

Для создания документа HTML5 нужно в первую очередь прописать два элемента: doctype и html.

Doctype – указывает на версию документа (html5), а элемент html между своими открывающим и закрывающим тегами содержит весь документ. Внутри элемента html размещаются два других элемента:

Head – содержит метаданные веб – страницы- заголовок веб – страницы, тип кодировки, ссылки на внешние ресурсы – стили, скрипты, если они используются;

Body – определяет содержимое html – страницы.

Базовая структура HTML – документа будет выглядеть следующим образом:

<!DOCTYPE HTML>

<html>

<head>

<title>Заголовок</title>

</head>

<body>

<div>Документ HTML5</div>

</body>

</html>

В элементе head определено два элемента:

- title - представляет заголовок страницы;

- meta - определяет метаинформацию страницы. Для корректного отображения символов русского алфавита предпочтительно указывать кодировку utf-8.

В пределах элемента body используется только один элемент - div, который оформляет блок. Содержимым этого блока является простая строка.

Поскольку выбрана кодировка utf-8, то браузер будет отображать веб-страницу именно в этой кодировке. Также необходимо чтобы сам текст документа соответствовал выбранной кодировке, для этого в различных текстовых редакторах есть соответствующие настройки для установки кодировки. Например, в Notepad++ надо зайти в меню Кодировки и в открывшемся списке выбрать пункт Преобразовать в UTF-8 без BOM. Сохраняется HTML – документ с расширением *.html.

В разделе документа body располагается та информация, которая отображается в окне браузера. Данный тег имеет ряд атрибутов, определяющих внешний вид документа. Ниже приводится спецификация тега <BODY>.

< body

text ="цвет текста"

bgcolor ="цвет фона"

background ="адрес фонового рисунка"

link ="цвет непосещенной гиперссылки"

vlink ="цвет посещенной гиперссылки"

alink ="цвет активной гиперссылки">

- Атрибут text задает цвет шрифта для всего документа в формате RGB или в символьной нотации;

- Атрибут bgcolor задает цвет фона окна браузера документа в формате RGB или в символьной нотации;

- Атрибут background позволяет указать адрес и имя рисунка, используемого в качестве фона. Этот рисунок будет размножен и распределен на заднем плане документа;

- Атрибуты link, vlink и alink задают цвета гиперссылок в формате RGB или в символьной нотации.

Пример использования фонового рисунка:

Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями: