Создание документа HTML в текстовом редакторе Блокнот

2016-01-02

7988

Обсуждений (0)

0.00 из 5.00 0 оценок

Лабораторная работа №1

«Создание простейшего HTML-документа. Форматирование текста»

Цель работы

Изучить структуру html-документа, основные тэги форматирования текста и использовать их при создании веб-страницы.

Основы создания Web-страниц средствами

Языка разметки гипертекста HTML

Создание простого документа

Основой разработки веб-страниц является язык HTML (HyperText Markup Language – язык разметки гипертекстов).

Основной структурной единицей языка HTML является тег (от англ. Tag - дескриптор, маркер). Тег всегда заключен между скобками < > и имеет следующий вид:

<ТЕГ атрибут 1=ЗНАЧЕНИЕ ... атрибут N=ЗНАЧЕНИЕ>

Теги бывают одиночными и контейнерными. Контейнером называется пара: открывающий <ТЕГ> и закрывающий </ТЕГ>.

Открывающий тег служит для указания программе-браузеру начала какого-либо объекта или задания свойств объектов помещенных в контейнер. Закрывающий тег служит для указания программе-браузеру о конце объекта или окончания применения свойств, заданных в открывающем теге.

Атрибуты тега задают значения свойств данного объекта или объектов помещенных в контейнер.

Документ HTML начинается открывающим тегом <HTML> и заканчивается закрывающим тегом </HTML>. Между данной парой контейнерных тегов располагаются две другие основные части HTML документа: заголовок, заключенный в контейнер <HEAD>...</HEAD> и тело документа в контейнере <BODY>...</BODY> (содержание страницы). В разделе описания заголовка можно указать заглавие документа, для этого используется тэг <TITLE> ... </TITLE> (имя страницы).

Таким образом, структура простого HTML документа выглядит примерно так:

<HTML> {начало страницы}

<HEAD> {описание страницы, заголовка}

<TITLE> название </TITLE> {имя страницы}

</HEAD> {закрытый тэг описания заголовка}

<BODY> {содержание страницы}

текст

</BODY> {закрытый тэг описания страницы}

</HTML> {конец страницы}

Форматирование текста

<BODY> </BODY> - тег, определяющий границы тела документа.

Атрибуты:

BGCOLOR – определяет цвет фона документа. По умолчанию «White» (#FFFFFF).

TEXT – задает цвет текста для всей страницы. Цвет указывается в формате RGB или константами red, green, blue и т.п. По умолчанию «black» (#000000).

В таблице 1 приведены названия цветов, определенные в стандарте HTML 4 и соответствующие им RGB-коды. Отметим, что многие современные браузеры выходят за рамки стандартов и поддерживают гораздо больше названий цветов.

Таблица 1

Название	Код	Название	Код
Aqua	#00FFFF	navy	#000080
Black	#000000	olive	#808000
Blue	#0000FF	purple	#800080
Fuchsia	#FF00FF	red	#FF0000
Gray	#808080	silver	#C0C0C0
Green	#008000	teal	#008080
Lime	#00FF00	white	#FFFFFF
Maroon	#800000	yellow	#FFFF00

- абзац

Атрибуты:

ALIGN – выравнивание. Возможные значения: RIGHT-выравнивание текста по правому краю; CENTER - по центру; LEFT - по левому краю; JUSTIFY – по ширине.

<Н1> </Н1>…<Н6> </Н6> - заголовки разного уровня (от первого до шестого).

Пример:

<H2 ALIGN = CENTER> Заголовок второго уровня с выравниванием по центру.

<НR> - горизонтальная линия

Атрибуты:

ALIGN – выравнивание.

WIDTH – длина линии в процентах от окна браузера или пикселях

SIZE – ширина линии в процентах от окна браузера или пикселях

COLOR – цвет линии.

Пример:

Дополнительные возможности по форматированию:

- полужирный текст;

- курсивный текст;

- эффект подчёркивания;

<STRIKE> </ STRIKE >- эффект зачеркивания.

- используется для указания начертания шрифта в документе.

Атрибуты:

SIZE – размер шрифта.

COLOR – цвет шрифта.

FACE – гарнитура шрифта.

Пример:

<Р> Красная строка набрана шрифтом ARIAL 4 размера </Р>

Создание списков

В HTML-документе существует четыре основных вида списков:

нумерованный
маркированный
вложенные списки
список определений

Фрагмент текста, представляющий список, заключается в тэги:

<OL> …. </OL> упорядоченный список (ordered list);

<UL> ….</UL> неупорядоченный список (unordered list);

< LI>….</LI> вложенные списки;

<DL>….</DL> список определений.

Список определений служит для создание списков типа «термин» - «описание». Каждый термин начинается тэгом <DT> , а описание - тэгом <DD>.

Каждый элемент списка заключается в тэги <LI> ….</LI> (от английского list item). При выводе на экран элементы списка имеют отступ и начинаются с новой строки.

Тэг <OL> может иметь параметры: <OL TYPE=A|a|I|i|1 START=n>

TYPE= определяет вид нумерации, START= задаёт начальное значение первого элемента списка (независимо от типа указывается цифрой).

TYPE=A – маркеры в виде прописных латинских букв;

TYPE=a – маркеры в виде строчных латинских букв;

TYPE=I – маркеры в виде больших римских цифр;

TYPE=i – маркеры в виде маленьких римских цифр;

TYPE=1 – маркеры в виде арабских цифр (по умолчанию).

Тэг <UL> может иметь параметр:

Тип тэга <UL> определяет внешний вид маркера как вид по умолчанию (disc), круглый (circle) или квадратный (square).

Тэг <LI> может иметь параметры:

<OL TYPE=disc|circle|squade>

или <OL TYPE=A|a|I|i|1 VALUE=n>

TYPE Вид маркера (см. <UL>) или счетчика (см.OL)

VALUE=n Значение для элемента пронумерованного списка (его номер). Все дальнейшие номера элементов списка будут отсчитываться от этого номера.

Создание документа HTML в текстовом редакторе Блокнот

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

1. Запустить текстовый редактор Блокнот (Пуск > Программы > Стандартные > Блокнот).

2. Создать типовую структуру HTML - документа и ввести текст.

Рис. 1. Создание HTML - документа в текстовом редакторе Блокнот

3. Сохранить этот документ. При сохранении в качестве типа файла укажите «все файлы», в качестве имени файла first.html.

4. Закрыть блокнот. Найти файл first.html и открыть его с помощью интернет-браузера.

Рис. 2. Иллюстрация документа в интернет-браузере.

2016-01-02

7988

Обсуждений (0)

0.00 из 5.00 0 оценок

Обсуждение в статье: Создание документа HTML в текстовом редакторе Блокнот

Обсуждений еще не было, будьте первым... ↓↓↓