Департамент образования города москвы
ГБОУ СПО ПОЛИТЕХНИЧЕСКИЙ КОЛЛЕДЖ № 39
Методические указания
к практической работе № 30
«Основы языка HTML. Форматирование страницы,
текста, абзацев.»
дисциплины «Информатика и ИКТ»
для групп первого курса СПО
технический профиль
Тема: Основы языка HTML. Форматирование страницы, текста, абзацев.
Цель занятия: ознакомить учащихся с назначением языка HTML, его основными тэгами, атрибутами тэгов. Научить создавать Web-страницы, содержащие текст, разбивать текст на абзацы. Выравнивать абзацы, создавать заголовки, подзаголовки, изменять параметры шрифта, управлять начертанием текста, использование цвета на Web-странице.
Общие сведения Создание Web-страниц с помощью языка html.
Web-страницей (веб-страницей) называется гипертекст – т.е. текст, в который встроены специальные коды (теги), управляющие дополнительными элементами: форматированием текста, иллюстрациями, мультимедийными вставками, гиперссылками на другие документы.
Web-страницы создаются с помощью специального языка – языка разметки гипертекста:
Коды языка HTML, с помощью которых выполняется разметка web-страницы, называются тегами.
В
се
теги начинаются с символа (<) и
заканчиваются символом (>). Пару этих
символов называют угловыми
скобками.
Внутри угловых скобок записывается
ключевое
слово.
Тэги можно набирать как заглавными, так
и строчными буквами.
Каждый
тег в языке HTML имеет специальное
назначение.
Пример записи тега:
Теги бывают парные
и непарные
кроме того теги могут иметь атрибуты, например:
Структура Web-страницы
Структура HTML-документа позволяет задействовать вложенные друг в друга контейнеры. Собственно, сам документ — это один большой контейнер, который начинается с тега <HTML> и заканчивается тегом </HTML>. Он указывает браузеру, что данный текст представляет собой HTML-документ и, содержит в себе теги, которые браузер должен выявить, распознать и правильно интерпретировать.
Типичная Интернет-страница состоит из двух частей: головная часть (HEAD) и тела (BODY). Эту базовую структуру в простейшем виде можно представить следующим образом:
<HTML> |
Начало HTML-документа |
<HEAD> |
Начало головной части |
<TITLE> |
Начало строки названия страницы |
… |
Строка названия страницы |
</TITLE> |
Конец строки названия страницы |
</HEAD> |
Конец головной части |
<BODY> |
Начало тела документа |
… |
|
</BODY> |
Конец тела документа |
</HTML> |
Конец HTML-документа |
Параметры страницы
Описание тегов тела документа следует начать с тега <ВОDY>.
В теге <BОDY> можно задать свои цветовые параметры документа, используя атрибуты:
bgcolor=цвет фона
tехt=цвет текста
vlink =цвет пройденных гипертекстовых ссылок
link =цвет гипертекстовой ссылки
alink=цвет активной гипертекстовой ссылки
Цвет можно задать просто написав его название на английском языке, или используя RGB-код, который состоит из # и шестизначного кода цвета.
Название |
Код |
Описание |
aqua |
#00FFFF |
Голубой |
black |
#000000 |
Черный |
blue |
#0000FF |
Синий |
fuchsia |
#FF00FF |
Сиреневый |
gray |
#808080 |
Серый |
green |
#008000 |
Зеленый |
lime |
#00FF00 |
Светло-зеленый |
maroon |
#800000 |
Коричневый |
navy |
#000080 |
Темно-синий |
olive |
#808000 |
Оливковый |
purple |
#800080 |
Темно-сиреневый |
red |
#FF0000 |
Красный |
silver |
#C0C0C0 |
Серебряный |
teal |
#008080 |
Сизый |
white |
#FFFFFF |
Белый |
yellow |
#FFFF00 |
Желный |
gold |
#FFD700 |
Золотой |
indigo |
#4B0080 |
Индиго |
purple |
#800080 |
Пурпурный |
orange |
#FFA500 |
Оранжевый |
violet |
#EE80EE |
Фиолетовый |
Если в качестве атрибутов тега <ВОDY> указать:
<ВОDY вgcolor=#FFFFFF техт=#0000FF vlink=#FF0000 link=#00FF00>,
то цвет фона будет белым, текст будет синим, ссылки — зелеными, а пройденные ссылки станут красными.
В теге <BODY> можно задать также поля страницы.
Например, тег <ВОDY leftmargin=40> создаст на всей странице левое поле шириной 40 пикселей. При n, равном 0, левое поле отсутствует.
Заголовки <Нn>…</Нn>,
В стандарте определено 6 уровней заголовков: от 1 до 6.
Пример:
<H1>Заголовок 1</H1> <H2>Заголовок 2</H2>
На экране браузера будет выглядеть:
Выравнивание заголовков, если не указано, дается по левому краю. Если же нужно задать выравнивание заголовка, необходимо использовать атрибут align (горизонтальное выравнивание, который имеет следующие значения:
align=left – выравнивание по левому краю;
align=right – выравнивание по правому краю;
align=center – выравнивание по центру;
align=justify – выравнивание по ширине.
Предположим, что нам нужно задать подзаголовок и выровнять его по центру:
<H2 align=center>Подзаголовок (H2) по центру</H2>
Абзац <P>…</P>
Элемент абзаца (paragraph) – один из самых полезных, применяется для разделения текста на параграфы. Он позволяет использовать только начальный тег, так как следующий элемент Р обозначает не только начало следующего абзаца, но и конец предыдущего.
Например:
<P>Текст первого абзаца.
<P>Текст второго абзаца</P>
Текст третьего абзаца. <P>
Вместе с элементом абзаца можно использовать атрибут выравнивания align:
Обрыв строки <BR>
Элемент обеспечивает принудительный переход на новую строку. Он имеет только начальный тег. Отличие тега <BR> от тега <P> состоит в том, что браузер не создает пустой строки между строками.