Структура HTML-документа. Создание HTML-документа

Создание HTML-документа

Создайте простейший HTML-файл. Для этого:

1. Создайте на диске отдельную директорию (папку) для своей будущей страницы. Вы можете назвать ее своим именем (фамилией). Например, D: \IVANOVA.

2. Запустите Блокнот.

3. Наберите текст HTML.

4. В меню Файл (File) выполните команду Сохранить как. В диалоговом окне Сохранения файла найдите созданную папку, укажите тип файла Все файлы и сохраните файл, назвав его своим именем (фамилией), и указав расширение HTML. Например, D: \IVANOVA\Ivanova.HTML

5. Закройте Блокнот.

6. Загрузите браузер Microsoft Internet Explorer, Opera или любой другой.

7. В меню Файл (File) выполните команду Открыть. Используя кнопку Обзор, найдите свой документ D: \IVANOVA\Ivanova.HTM и загрузите его.

	< html> < head> < title> Мой первый шаг < /title> < /head> < body> Здравствуйте, это моя первая страница. < br> Добро пожаловать!:) < /body> < /html>
Рис. 1 Создание HTML-страницы

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

HTML (HyperText Markup Language) - язык разметки гипертекста

Файл HTML - это текстовый файл с расширением.HTML или HTM. Команды языка HTML задаются между специальными символами <... >, и называются тэгами (tag). Тэг - это инструкция браузеру, указывающая способ отображения текста. Браузер (от англ. Browse – просмотр) - это специальные программы просмотра файлов в Интернет.

Тэги могут быть двух видов:

1) одноэлементный тэг: <...>; его достаточно просто вставить в текст для того, чтобы совершить какое-либо действие;

2) парный тэг: <...>...< /...>; он влияет на текст, с того места, где употреблен, до того места, где указан признак окончания его действия. Признаком завершения команды служит тот же самый тэг, только начинающийся с символа слэш " / ":

<...> - открывающийся тэг, < /...> - закрывающийся тэг.

Структура HTML-страницы показана на рис.1

< HTML>...< /HTML> - границы HTML-документа

< HEAD>... < /HEAD> - заголовок HTML-документа

< BODY>... < /BODY> - содержание (тело) HTML-документа

HTML не чувствителен к регистру, т.е. тэги можно набирать прописными или строчными буквами

В заголовке документа обычно содержится название документа, которое задается с помощью парного тэга TITLE

< TITLE >...(не более 64 символов) < / TITLE >

Тело документа HTML содержит весь текст, несущий информацию и все тэги HTML, используемые для форматирования текста

Основными атрибутами парного тэга < BODY> является

BGCOLOR – задание фонового цвета

BACKGROUND – задание фона в виде рисунка.

	< html> < head> < title> Задание фона< /title> < /head> < body bgcolor=" 80%, 60%, 80%" > Здравствуйте, это моя первая страница. < br> Добро пожаловать!:) < /body> < /html>	html> < head> < title> Фоновый рисунок< /title> < /head> < body background=" fon/star03a.jpg" > Здравствуйте, это моя первая страница. < br> Добро пожаловать!:) < /body> < /html>
Рис. 2 Атрибуты тэга < BODY>

Значение цвета в атрибуте BGCOLOR может задаваться несколькими способами:

названием, например " red";

кодом RGB, например " #FFFFFF";

в десятичном виде, например " 255, 0, 0";

в процентах, например " 30%, 40%, 30%";

Код RGB - это три шестнадцатеричных числа в диапазоне 00 - FF. 1-ое, 2-ое и 3-е число, соответственно, представляют собой количество красного, зеленого и синего тонов в цвете.

AQUA - аквамарин NAVY - темно-синий

BLACK - черный OLIVE - оливковый

BLUE - голубой PURPLE - пурпурный

FUSCHIA - RED - красный

GRAY - серый SILVER - серебряный

GREEN - зеленый TEAL

LIME - зеленоватый WHITE - белый

MAROON - каштановый YELLOW - желтый

Атрибут BACKGROUND подключает эту картинку в качестве фона и указывает на то, где лежит фоновая картинка. (Фоновой картинкой может служить любой файл с расширением GIF или JPG.)

Если Вы хотите, чтобы фоновая картинка не прокручивалась вместе с текстом, то необходимо добавит еще один атрибут BGPROPERTIES=FIXED.

3. Написание текста: работа со шрифтами

Тэги абзаца и перевода строки.

< P> …< /P> - новый абзац (парный тэг).

< BR> - переход на новую строку. (одинарный тэг)

Парные тэги выделения фрагментов текста.

I пишет текст курсивом

B - полужирный шрифт

U - подчеркнутый шрифт

SUP - верхний индекс

SUB - нижний индекс

Размер текста.

Существует два способа управления размером текстом:

1) использование стилей заголовка,

2) задание размера шрифта основного документа или размера текущего щрифта.

< Hx> Заголовок x-го уровня < /Hx>

где x - цифра от 1 до 6, определяющая уровень заголовка, чем больше цифра тем меньше размер шрифта.

Атрибут SIZE в теге BASEFONT задает базовый (основной) размер шрифта Web-документа. Величина атрибута может лежать в пределах от 1 до 7. По умолчанию используется величина 3.

Одинарный тэг BASEFONT можно поместить в заголовок HTML-документа

Парный тэг FONT позволяет задавать размер текущего шрифта в отдельных местах текста в диапазоне от 1 до 7, для этого также используется атрибут SIZE. Шрифты могут быть заданы относительно базового: size=+число size=-число. При этом сумма базового размера шрифта и размера текущего шрифта должна быть не меньше1и не более7. Например для основного шрифта, равного 3, размер текущего шрифта может находиться в пределах от -2 до +4.

	< html> < head> < title> Работа со шрифтами< /title> < BASEFONT SIZE = 4> < /head> < body background=" fon/star03a.jpg" BGPROPERTIES=FIXED> < P> < Font size=+2> < I> Рад приветствовать Вас на своей домашней страничке< /I> < /Font> < P> Прежде всего, позвольте представиться.< BR> Я – студент ИБЭИТ - Иванов Иван Ивонович. < /BODY> < /HTML>
Рис. 3 Задание размеров шрифта

Парные тэги BIG выводят текст шрифтом на один размер больше текущего. Парные тэг SMALL выводят текст шрифтом на один размер меньше текущего.

Цвет и стиль написания шрифта

Цвет всего текста можно задать с помощью атрибута TEXT в тэге BODY. При этом цвет текста задается аналогично цвету фона документа.

Например, < body background=" fon/star03a.jpg" BGPROPERTIES=FIXED TEXT=”blue”>

Изменить цвет текста только в конкретной части документа можно с помощью задания атрибута COLOR в тэге FONT.

С помощью атрибута FACE тэга FONT можно менять стиль написания (гарнитуру) шрифта, например: < FONT FACE=" Times New Roman" >

< Font size=+1 COLOR=#FF0000 FACE=" Arial" > < I> Рад приветствовать Вас на своей домашней страничке< /I> < /Font>

Выравнивание текста по горизонтали.

С помощью задания значений атрибута ALIGN тэга Р можно расположить текст справа (RIGHT), слева (LEFT) и по центру (CENTER) и выровнять по левому и правому краям

(JUSTIFY)

Задание:

1. создать Web-страницу, указав ее заголовок;
2. задать фон страницы (с помощью цвета или картинки);
3. написать текст своей первой страницы в виде полной информации о себе используя тэги для работы со шрифтами:
1. разбить текст на абзацы;
2. задать цвет основного текста;
3. выделить заголовок:
4. расположив его по центру страницы
5. задав цвет и размер отличные от основных