Знакомство с HTML

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

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

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

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

Задание 5. Использование стилей заголовка

Задание 6. Задание размера текущего шрифта.

Задание 7. Гарнитура и цвет шрифта

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

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

Чтобы создать свой файл HTML, сделайте следующее:

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

<HTML>

<HEAD>

<TITLE> Учебный файл HTML </TITLE>

</HEAD>

<BODY>

Расписание занятий на вторник

</BODY>

</HTML>

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

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

Информация.

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

Откройте Web-страницу в программе Блокнот (контекстное меню файла -открыть с помощью).
Откройте первоисточник Web-страницы – в меню браузера Вид (View), Источник (Просмотр HTML кода, В виде HTML) откроется окно со стандартной программой Блокнот (Notepad), в котором ваша Web-страница представлена в командах HTML. Просмотрите её.
В контекстном меню файла выберите команду Открыть с помощью -> Блокнот. Внесите изменения в текст файла HTML, расположив слова "Расписание", "занятий", "на вторник" на разных строках:

<HTML>

<HEAD>

<TITLE> Учебный файл HTML </TITLE>

</HEAD>

<BODY>

Расписание

занятий

на вторник

</BODY>

</HTML>

Сохраните внесенные изменения в файле RASP.HTM, с помощью команд Файл (File), Сохранить (Save). Не закрывайте программу Блокнот (Notepad).
Просмотрите с помощью браузера Microsoft Internet Explorer новую полученную Web-страницу используя клавишу F5 или с помощью команд Вид(View), Обновить (Refresh). Изменилось ли изображение текста на экране?

Примечание

В дальнейшем после внесения изменений в Web-страницу всегда выполняйте п.п.4-5.

назад

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

Информация.

Существуют специальные команды, выполняющие перевод строки и задающие начало нового абзаца. Кроме того, существует команда, которая запрещает программе браузера каким-либо образом изменять форматирование текста и позволяет точно воспроизвести на экране заданный фрагмент текстового файла.

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

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

<HTML>

<HEAD>

<TITLE> Учебный файл HTML </TITLE>

</HEAD>

<BODY>

Расписание

занятий

на вторник

</BODY>

</HTML>

Сохраните внесенные изменения в файле RASP. HTM.
Просмотрите с помощью браузера Microsoft Internet Explorer новую полученную Web-страницу. Как изменилось изображение текста на экране?

назад

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

Информация.

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

… для выделения полужирным,

… для выделения курсивом,

… для выделения подчеркиванием.

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

<HTML>

<HEAD>

<TITLE> Учебный файл HTML </TITLE>

</HEAD>

<BODY>

Расписание занятий на вторник

</BODY>

</HTML>

Посмотрите новую полученную Web-страницу .

Возможно использование комбинированных шрифтов:

Расписание занятий на вторник

Но при этом необходимо помнить следующее правило записи комбинированных тэгов:

<Тэг-1> <Тэг-2> … </Тэг-2> </Тэг-1>

правильная запись

<Тэг-1> <Тэг-2> … </Тэг-1> </Тэг-2>

ошибочная запись

назад

Задание 5. Использование стилей заголовка

Информация.

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

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

Используется шесть тэгов заголовков (от Н1 до Н6). Каждому тэгу соответствует конкретный стиль, заданный в параметрах настройки браузера. Стиль Н1 – самый крупный.

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

<HTML>

<HEAD>

<TITLE> Учебный файл HTML </TITLE>

</HEAD>

<BODY>

<H1> Расписание </H1>занятий на вторник

</BODY>

</HTML>

2. Посмотрите новую полученную Web-страницу

назад

Задание 6. Задание размера текущего шрифта.

Информация.

Тэг шрифта позволяет задавать размер текущего шрифта в отдельных местах текста. Диапазон установки текущего шрифта – от 1 до 7.

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

<HTML>

<HEAD>

<TITLE> Учебный файл HTML </TITLE>

</HEAD>

<BODY>

 Расписание 

занятий на вторник

</BODY>

</HTML>

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

назад

Задание 7. Гарнитура и цвет шрифта

Информация.

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

Для изменения цвета шрифта в тэге можно использовать атрибут COLOR="X".

Вместо Х надо подставить либо название цвета (в кавычках), либо его шестнадцатеричное значение. При задании цвета шестнадцатеричным числом можно представить этот цвет разложенным на три составляющие:

красную(R), зеленую (G), синюю (B), каждая из которых имеет значение от 0 до FF

Примеры записи цвета в формате RGB приведены в таблице:

Цвет

RRGGBB

Цвет

RRGGBB

black

черный
000000

purple
фиолетовый

FF00FF

white

белый

FFFFFF

yellow

желтый

FFFF00

red

красный

FF0000

brown

коричневый

996633

green

зеленый

00FF00

orange

оранжевый

FF8000

azure

бирюзовый

00FFFF

violet

лиловый

8000FF

blue

синий

0000FF

gray

серый

A0A0A0

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

<HTML>

<HEAD>

<TITLE> Учебный файл HTML </TITLE>

</HEAD>

<BODY>

  Расписание  >

занятий на вторник

</BODY>

</HTML>

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

назад

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

Информация.

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

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

ALIGN=CENTER

Выравнивание по центру

ALIGN=RIGHT

Выравнивание по правому краю

ALIGN=LEFT

Выравнивание по левому краю

Внесите изменения в файл RASP.HTM

<HTML>

<HEAD>

<TITLE> Учебный файл HTML </TITLE>

</HEAD>

<BODY>



 Расписание 

занятий на вторник



</BODY>

</HTML>

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

Информация.

При изображении фона, текста браузеры используют цвета, установленные по умолчанию, - они заданы параметрами настройки браузера. Эти цвета устанавливаются в начале файла HTML в тэге <BODY…>. Запись цвета аналогична цвету шрифта (см. таблицу 1 п.12 ). Атрибут BGCOLOR= задает цвет фона страницы, TEXT= определяет цвет текста для всей страницы, LINK= и VLINK= определяют цвета соответственно непросмотренных и просмотренных ссылок (последние два параметра будут рассмотрены позже).

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

<HTML>

<HEAD>

<TITLE> Учебный файл HTML </TITLE>

</HEAD>

<BODY BGCOLOR="#FFFFCC" TEXT="#330066">



 Расписание 

занятий на вторник



</BODY>

</HTML>

назад

в начало


	Информатика студентам