Лабораторные работу по курсу Веб-технологии
Часть 1. HTML и CSS
Лабораторная работа 1. Введение в HTML. Структура HTML-документа. Форматирование текста
Цель: Научиться применять теги HTML для структурирования страницы и форматирования текста.
1.1 Теоретические сведения
1.1.1 Программы для редактирования html-страниц
Для создания html-страниц необходим редактор. Для выполнения лабораторных работ предлагаются текстовые редакторы PSPad или Notepad++. По сравнению с блокнотом в программах имеется подсветка синтаксиса, автоматическое дополнение когда, панель свойств и т.д. Для выполнения некоторых лабораторных работ могут потребоваться дополнительные материалы, которые обычно расположены в папке рядом с методическими указаниями.
1.1.2 Структура html-документа
Составление страниц для сайта базируется на языке HTML (от англ. Hypertext Markup Language – язык разметки гипертекста). Все страницы сайта имеют расширение .htm или .html.
Основной структурной единицей языка является тег с его атрибутами. Тег представляет собой заключенные в треугольные скобки инструкции языка, которые сообщают, какими свойствами должен обладать тот или иной фрагмент текста на странице. Большинство тегов являются парными: содержат как открывающийся, так и закрывающийся тег (см. рисунок 1.1):
Рисунок 1.1 – Структура тега
Следует отметить что написание значений атрибутов следует писать в двойных кавычках.
Описание документа строится на основании тегов. Весь документ должен быть заключен в главный тег (см. рисунок 1.2).
Рисунок 1.2 – Структура html-документа
Все теги можно условно разделить на группы по их функциональному назначению: теги уровня документа, теги форматирования, теги структурных элементов и т.д.
1.1.3 Теги уровня документа
<html>...</html> парный тег-контейнер, который заключает в себе все содержимое веб-страницы. Открывающий и закрывающий теги в документе обязательны, для того, чтобы указать границы документа.
<head>...</head> тег предназначен для хранения элементов, которые используются для хранения служебной информации предназначенной для браузеров и поисковых систем. Содержимое тега не отображается на странице, за исключением тега .
<title>...</title> содержит текст заголовка, который отображается в строке заголовка окна браузера.
<body>...</body> предназначен для хранения содержимого веб-страницы (контента), отображаемого в окне браузера (форматированный текст, изображения, таблицы и т.д.). Тег может содержать множество атрибутов, которые влияют на отображения всего документа в целом.
Таблица 1.1 Основные атрибуты тега
Название атрибута |
Назначение атрибута |
alink |
цвет активной ссылки (цвет задается шестнадцатеричным числом или константой, например красные: red или #ff0000) |
background |
фоновый рисунок на веб-странице |
bgcolor |
цвет фона веб-страницы |
topmargin (leftmargin, bottommargin) |
отступ от верхнего (левого, нижнего) края окна браузера до контента |
link |
цвет ссылок на веб-странице |
text |
цвет текста в документе |
vlink |
цвет посещенных ссылок |
Например, следующий фрагмент html-кода задает для всего документа цвет текста зеленый, цвет ссылок черный, цвет фона желтый. Листинг 1.1.
Листинг 1.1 - Пример использования атрибутов тега
1.1.4 Основные теги форматирования текста
Таблица 1.2 - Теги форматирования текста
Название тега |
Назначение тега, атрибуты |
<b>..</b> или <strong>...<strong> |
устанавливает жирное начертание шрифта |
<i>...</i> |
устанавливает курсивное начертание шрифта |
<u>...</u> |
устанавливает подчеркнутое начертание шрифта |
<strike>...</strike> |
устанавливает зачеркнутое начертание шрифта |
<cite>...</cite> |
помечает текст как цитату, обычно отображается курсивом |
<code>...</code> |
предназначен для отображения текста, который представляет собой программный код, обычно отображается моноширинным шрифтом |
<del>...</del> |
используется для выделения текста, который был удален в новой версии документа |
< ins>...</ins> |
используется для выделения текста, который был добавлен в новую версию документа |
<dfn>...</dfn> |
применяется для выделения терминов при их первом появлении в тексте |
<sup>...</sup> |
отображает шрифт в виде верхнего индекса |
<sub>...</sub> |
отображает шрифт в виде нижнего индекса |
<pre>...</pre> |
определяет блок текста, в котором сохраняется количество пробелов между словами, заданное на этапе создания документа |
< nobr>...</nobr> |
уведомляет браузер отображать текст в одну строку без переноса |
<h1>...</h1> … <h6></h6> |
устанавливает заголовки различного уровня значимости от самого крупного h1 до самого мелкого h6 |
<font>...</font> |
предназначен для установки характеристик шрифта, которые задаются в атрибуте тега. Тег имеет следующие атрибуты:
color=… задает цвет шрифта (в шестнадцатеричной форме, например, #ff0000) face=… задает гарнитуру шрифта (Arial, Tahoma) size=… задает размер шрифта в условных единицах (целое число от 1 до 7 или изменения числа +1 или -2) самый крупный шрифт 7 |
<p>...</p> |
определяет границы абзаца. Тег имеет атрибут align, который отвечает за выравнивание текста и может принимать значения: left, right, center и justify |
<br> |
устанавливает принудительный перенос строк |
< hr> |
рисует горизонтальную линию. Параметры горизонтальной линии можно задать с использованием атрибутов тега: align=… определяет выравнивание линии color=… цвет линии noshade=… рисует линию без трехмерных эффектов size=… толщина линии в пикселях width=… ширина линии в пикселях |