Часть 1.

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

Цель работы: Научиться создавать файлы, содержащие элементы форматирования, предписанные языком HTML.

Теоретическая часть: HTML-документ — это просто текстовый файл с расширением *.htm или *.html).
Вот самый простой HTML-документ:

<html> <head> <title> Лабораторная 2. Пример 1. </title> </head> <body> <H1> Привет! </H1> Это простейший пример HTML-документа. Этот html-файл может быть одновременно открыт и в блокноте, и в Internet Explorer'е. Сохранив изменения в блокноте, просто нажмите кнопку Reload ('перезагрузить') в Explorer'е, чтобы увидеть эти изменения. </body> </html>

Вы можете посмотреть этот пример прямо сейчас.

Для удобства чтения в примере введены дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах. Поэтому пример мог бы выглядеть вот так:

<html> <head> <title>Лабораторная 2. Пример 1.</title> </head> <body> <H1>Привет!</H1> Это простейший пример HTML-документа. Этот html-файл может быть одновременно открыт и в блокноте, и в Internet Explorer'е. Сохранив изменения в блокноте, просто нажмите кнопку Reload ('перезагрузить') в Explorer'е, чтобы увидеть эти изменения. </body> </html>

Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, <html>) называется меткой (по-английски — tag, читается "тег").

Большинство HTML-меток — парные, то есть на каждую открывающую метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением "/".

Метки можно вводить как большими, так и маленькими буквами. Например, метки <body>, <BODY> и <Body> будут восприняты браузером одинаково.

Многие метки, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку. Более подробно метки и их атрибуты рассмотрим в ходе выполнения лабораторной работы.

Ход работы:

Создание простейших файлов HTML.

Создайте папку, в которой Вы будете сохранять созданные Web-страницы.
Запустите стандартную программу Блокнот (Notepad) и наберите следующий текст с элементами форматирования:

<HTML><HEAD><TITLE> Учебный файл HTML </TITLE></HEAD><BODY>Расписание занятий на вторник</BODY></HTML>

Сохраните файл под именем schedule.html.
Для просмотра созданной Web-страницы загрузите броузер Microsoft Internet Explorer.
Откройте в меню броузера Файл (File), Открыть (Open), Просмотр(Обзор — Browse) и найдите созданный ранее файл schedule.html, загрузите его. Убедитесь, что название Web-страницы (Учебный файл HTML) отразилось в верхней статусной строке броузера.

Управление расположением текста на экране.

Внесите изменения в текст, расположив слова "Расписание", "занятий", "на вторник" на разных строках:

<HTML><HEAD><TITLE> Учебный файл HTML </TITLE></HEAD><BODY>Расписаниезанятийна вторник</BODY></HTML>

Сохраните внесенные изменения, с помощью команд Файл (File), Сохранить (Save).
Просмотрите с помощью броузера Microsoft Internet Explorer новую полученную Web-страницу используя клавишу F5 или с помощью кнопки Обновить (Refresh).

Предыдущие шаги не вызвали никаких видимых изменений в документе html — при отображении гипертекста броузеры автоматически размещают текст на экране, не принимая во внимание встречающиеся в файле переводы строк и идущих подряд пробелов. Существуют специальные команды, выполняющие перевод строки и задающие начало нового абзаца. Кроме того, существует команда, которая запрещает программе броузера каким-либо образом изменять форматирование текста и позволяет точно воспроизвести на экране заданный фрагмент текстового файла.
Тег перевода строки отделяет строку от последующего текста или графики. тег абзаца тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац. Оба тега являются одноэлементными (не требуют закрывающего тега).

Внесите изменения в текст файла HTML:

<HTML><HEAD><TITLE> Учебный файл HTML </TITLE></HEAD><BODY>Расписание занятий на вторник</BODY></HTML>

Сохраните внесенные изменения в файле schedule.html. Просмотрите с помощью броузера обновленную страницу.

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

Теги выделения фрагментов текста позволяют управлять отображением отдельных символов и слов. Существует три тега выделения фрагментов текста: : — для выделения полужирным, : — для выделения курсивом, : — для выделения подчеркиванием.

Внесите изменения в файл schedule.html:

<HTML><HEAD><TITLE> Учебный файл HTML </TITLE></HEAD><BODY>Расписание занятий на вторник</BODY></HTML>

Посмотрите новую полученную Web-страницу.
Попробуейте использовать вложение тегов:
Расписание занятий на вторник

Изменение размера текста

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

броузером:

o использование стилей заголовка;

o задание размера текущего шрифта;

1.Внесите изменения в файл schedule.html:

<HTML><HEAD><TITLE> Учебный файл HTML </TITLE></HEAD><BODY><H1>Расписание</H1> занятий на вторник</BODY> </HTML>

Просмотрите обновления через браузер.
Внесите следующие изменения в файл schedule.html:

<HTML><HEAD><TITLE> Учебный файл HTML </TITLE></HEAD><BODY>Расписание занятий на вторник</BODY></HTML>

Самостоятельно измените размер шрифта для текста "занятия на вторник", используя тег .

Гарнитура и цвет шрифта

Тег предоставляет возможности управления размером, начертанием и цветом текста. Изменение гарнитуры шрифта выполняется простым добавлением к тегу атрибута FACE. Например, для изображения текста шрифтом Arial необходимо записать .

Для изменения цвета шрифта в теге можно использовать атрибут COLOR="X". Вместо Х надо подставить либо название цвета (в кавычках), либо его шестнадцатеричное значение. При задании цвета шестнадцатеричным числом можно представить этот цвет разложенным на три составляющие: красную(R), зеленую (G), синюю (B), каждая из которых имеет значение от 0 до FF. Примеры записи цвета в формате RGB приведены в таблице:

Цвет	RRGGBB
black \| черный
white \| белый	FFFFFF
red \| красный	FF0000
green \| зеленый	00FF00
azure \| бирюзовый	00FFFF
blue \| синий	0000FF
gray \| серый	A0A0A0
purple \| фиолетовый	FF00FF
yellow \| желтый	FFFF00
brown \| коричневый
orange \| оранжевый	FF8000
violet \| лиловый	8000FF

Внесите изменения в файл schedule.html:

<HTML><HEAD><TITLE> Учебный файл HTML </TITLE></HEAD><BODY>Расписаниезанятий на вторник</BODY></HTML>

2. Самостоятельно измените размер, цвет, гарнитуру, стиль текста документа.

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

С помощью тегов HTML можно управлять горизонтальным выравниванием текста. Если не оговаривать способ выравнивания, все элементы в документе будут выравниваться по левому краю и иметь неровное правое поле .

Современные броузеры для выравнивания текста используется атрибут ALIGN=, который встраивается в теги абзаца или заголовка.

ALIGN=CENTER — Выравнивание по центру
ALIGN=RIGHT — Выравнивание по правому краю
ALIGN=LEFT — Выравнивание по левому краю

1.Внесите изменения в файл schedule.html:

<HTML><HEAD><TITLE> Учебный файл HTML </TITLE></HEAD><BODY>Расписание занятий на вторник</BODY></HTML>

Просмотрите обновления

Задание цвета фона и текста

Цвета фона и текста документа устанавливаются в начале файла HTML в теге <BODY>. Атрибут BGCOLOR= задает цвет фона страницы, TEXT= определяет цвет текста для всей страницы, LINK= и VLINK= определяют цвета соответственно непросмотренных и просмотренных ссылок.

Внесите изменения в файл schedule.html:

<HTML><HEAD><TITLE> Учебный файл HTML </TITLE></HEAD><BODY BGCOLOR="#FFFFCC" TEXT="#330066">Расписание занятий на вторник</BODY></HTML>

Задание на самостоятельное выполнение.

Проведите экспериментальную работу с созданным документом. Меняя размеры окна, посмотрите, как броузер показывает текст с принудительным разрывом строк. Что происходит, когда окно уменьшается настолько, что в нем не может поместиться целиком даже одно слово?
Самостоятельно создайте собственный HTML-документ. Пусть это будет небольшой рассказ о себе и своих увлечениях.

<23 24 252627 28 29 >

Дата добавления: 2015-02-10; просмотров: 1415;