Создание Web-страницы. Форматирование текста.

Hyper Text Markup Language (HTML) — язык разметки гипертекста — предназначен для написания гипертекстовых документов, публикуемых в World Wide Web.

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

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

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

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

Все содержимое файла WEB-страницы заключается в парный тег <HTML>...</HTML>, указывающий браузеру, что данный текст представляет собой HTML-документ и, возможно, содержит в себе теги, которые браузер должен выявить, распознать и правильно интерпретировать.

HTML-документ состоит из двух частей: заголовок (head) и тела (body), расположенных в следующем порядке:

<html>
   <head> Заголовок документа </head>
   <body> 
       Тело документа 
   </body>
</html>

Чаще всего в заголовок документа включают парный тег <TITLE>...</TITLE>, определяющий название документа.

Тело документа является обязательным элементом, так как в нем располагается весь материал документа. Тело документа размещается между тегами <BODY>...</BODY>. Все, что размещено между этими тегами, интерпретируется браузером в соответствии с правилами языка HTML позволяющими корректно отображать страницу на экране монитора.

Практическая работа:

1. Создайте папку HTML, в которой мы будем сохранять созданные Web-страницы.

2. Запустите стандартную программу Блокнот.

3. Наберите в окне редактора простейший текст файла HTML: 

4. Сохраните файл под именем PROBA.HTML

Откройте полученный файл.

Посмотрите внимательно на исходный текст, он располагался в разных строках, но в окне браузера он отображается без форматирования (в одну строку).

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

Тег перевода строки <BR> отделяет строку от последующего текста или графики. Тег <BR> является одинарным.

Тег абзаца <P> . . . </P> тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац.

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

Внесите следующие изменения в файле

6. Сохраните внесенные изменения в файле PROBA.HTML. Просмотрите с помощью  браузера  новую полученную Web-страницу.

7. У тега <P> есть атрибут выравнивания ALIGN, который может принимать следующие значения:

LEFT - по левому краю;

CENTER - по центру;

RIGHT - по правому краю;

JUSTIFY - по ширине.

Например:  <P ALIGN=CENTER> но она ведь работает!!!</P>

Внесите изменения в файл, посмотрите полученные изменения

 

8. У каждого текста есть какой-либо заголовок. Для создания заголовков служит тег <H*> . . .</H*>, где вместо звездочки записывается цифра (одна и та же и в открывающемся, и в закрывающемся теге). При этом цифра 1 задает шрифт наибольшего размера (для общего заголовка), 2 - чуть меньший (для подзаголовков), 3 - еще меньший и т.д.

Выравнивание заголовков, если не указать его явно, делается по левому краю. Если же надо задать другое выравнивание, то необходимо воспользоваться атрибутом ALIGN, например строка <H1 ALIGN=CENTER> . . .</H1> задает размещаемый по центру общий заголовок.

Внесите изменения в файле, посмотрите полученные изменения.

9. Отделим заголовок горизонтальной чертой. Для создания горизонтальной черты служит одиночный тег <HR>, имеющий атрибуты size и color.

Для изменения толщины линии используется атрибут SIZE=* в место звездочки подставляются арабские цифры 1, 2, 3 и т.д. Чем больше цифра, тем толще будет линия.

Для изменения цвета линии можно использовать атрибут СOLOR="X".

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

Цвет

 

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

например <HR SIZE=2 COLOR=GREEN> задает горизонтальную зеленую линию толщиной 2 пикселя.

Внесите изменения в файле, посмотрите полученные изменения.

 

10. Тег <FONT> . . . </FONT> предоставляет возможности управления размером, начертанием и цветом текста.

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

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

Например, <FONT SIZE=4>.

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

Например, <FONT FACE="ARIAL" SIZE=4 COLOR=blue> Это моя первая проба сил</FONT>.  У текста, заключенного в данный тег, поменяется гарнитура шрифта на "Arial" размер изменится на 4 и цвет поменяется на синий.

Внесите изменения в файле, посмотрите полученные изменения.

 

11. Поменяйте у последнего абзаца шрифт на Courier New, цвет  - красный.

Внесите изменения в файле, посмотрите полученные изменения.

      12. Измените цвет у заголовка текста на оранжевый.

      13. Для изменения начертания текста служат следующие теги:

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

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

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

Например: <B> Страничка </B><I>пока</I> <U> еще получилась</U>

Внесите изменения в файле, посмотрите полученные изменения.

 

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

<I><B>Страничка</B></I> <I>пока</I> <U> еще получилась</U>

Внесите изменения в файле, посмотрите полученные изменения.

 

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

 

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

 

 

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

 

 

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

 

 

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

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

Измените цвет фона страницы на "pink" - цвет морской пены. <BODY BGCOLOR=pink>

15. Созданный файл сдайте на проверку учителю.