girniy.ru 1

Файлы HTML — это обычные текстовые файлы, имеющие расширение НТМ. Будем использовать для создания и редактирования файлов HTML стандартную программу Блокнот (Notepad), входящую в комплект Windows, а для просмотра результата создания Web-страниц — браузер Microsoft Internet Explorer.


Определение HTML-файла

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



текст документа



Вы указали, что ваш документ действительно содержит команды HTML, вы должны разбить документ на две части — заголовок и собственно текст.

Определение заголовка - должно содержаться внутри тэга <HEAD> ... HEAD>:





описание заголовка



текст документа



В разделе описания заголовка можно указать заглавие документа, для этого используется тэг ... . Когда браузер встречает этот тэг, он отображает все, что находится внутри него, как заглавие. Пример того, как используется данный тэг:





<i>Это заглавие документа</i><font style="color:#000;font-size:18px;text-shadow:-1px 0 #080, 0 1px #080, 0px 0 #000, 0 -0px #000;"> </</b>TITLE<b>></font><br> <br> </HEAD><br> <br> <i>текст документа</i><br> <br> </HTML><br> <br> <font style="color:#000;font-size:18px;text-shadow:-1px 0 #080, 0 1px #080, 0px 0 #000, 0 -0px #000;">Определение тела документа</font>. Весь остальной HTML-документ, включая весь текст, содержится внутри тэга <ВODY> ...</BODY>. Теперь наш документ выглядит примерно так:<br> <br> <HTML><br> <br> <HEAD><br> <br> <TITLE> <i>Это заглавие документа</i><font style="color:#000;font-size:18px;text-shadow:-1px 0 #080, 0 1px #080, 0px 0 #000, 0 -0px #000;"> </</b>TITLE<b>></font><br> <br> </HEAD><br> <br> <BODY><br> <br> <i>текст документа</i><br> <br> <font style="color:#000;font-size:18px;text-shadow:-1px 0 #080, 0 1px #080, 0px 0 #000, 0 -0px #000;"></</b>BODY<b>></font><br> <br> </HTML><br> </p> <font style="color:#F55;font-size:18px;text-shadow:-1px 0 #000, 0 1px #000, 0px 0 #000, 0 -0px #000;">Несмотря</font> на то, что присутствие этих трех <a href="/metisa/2+%D0%A0%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0+%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2+%28%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D1%8B+%D0%BDtml%29+%D0%9F%D1%80%D0%B0%D0%BA%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5+%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B+%D0%BF%D0%BE+%D1%82%D0%B5%D0%BC%D0%B5+%C2%AB%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5+Web-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B+%D0%B2+%D1%8F%D0%B7%D1%8B%D0%BA%D0%B5+html%C2%BB+%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0+Web-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8Ba/main.html">тэгов предусмотрено стандартом</a>, большинство<b> </b>браузеров может отобразить документ даже при их отсутствии. <font style="color:#F55;font-size:18px;text-shadow:-1px 0 #000, 0 1px #000, 0px 0 #000, 0 -0px #000;">Однако</font> следует приучить себя всегда указывать эти тэги - и вам не придется беспокоиться по поводу редактирования документа, если в будущем эти тэги станут необходимы. <p style="border:1px solid #0A0;padding:5px;"> <br> <i>Задание 1. Создание простейших файлов HTML.</i><br> <br> 1. Создайте папку <b>Web</b>, в которой мы будем сохранять сконструированные Web-страницы.<br> <br> 2. Запустите программу Блокнот (Notepad).<br> <br> 3. Наберите в окне редактора простейший текст файла HTML:<br> <br> <HTML><br> <br> <HEAD><br> <br> <TITLE> <i>Учебный</i><i> </i><i>файл</i><i> HTML</i>



<
BODY>

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





4. Сохраните этот файл под именем RASP.html в папке Web

5. Для просмотра созданной Web-страницы запустите файл RASP.html из папки Web.

6. Убедитесь, что название Web-страницы («Учебный файл HTML») отразилось в верхней, статусной, строке браузера.

На экране вы увидите результат своей работы, изображенный на рис. 1.


Рис. 1


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

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


  1. Расположите Окна слева направо.

  2. В Блокноте внесите изменения в текст файла RASP.html, расположив слова «Расписание», «занятий», «на вторник» на разных строках:





<i>Учебный</i><i> </i><i>файл</i><i> HTML</i><font style="color:#000;font-size:18px;text-shadow:-1px 0 #080, 0 1px #080, 0px 0 #000, 0 -0px #000;"> </b><span><b></</b></span>TITLE<span><b> ></font></span><br> <br> </HEAD><br> <br> <BODY><br> <br> <i> Расписание</i><br> <br> <i>занятий </i> <br> <br> <i>на вторник</i><b> </b> <br> <br> </BODY><br> <br> </HTML><br> <ol start=3> <li><br> Сохраните текст со внесенными изменениями в файле RASP.HTM.<br> <li></p> В браузере Microsoft Internet Explorer обновите полученную Web-страницу, используя клавишу F5 или кнопку <b>Обновить</b> (Refresh). Изменилось ли изображение текста на экране? <p style="border:1px solid #0A0;padding:5px;"> </ol> <br> <i>Примечание.</i> <i>В дальнейшем после внесения изменений в Web-страницу всегда выполняйте пункты 3-4 этого задания</i>.<br> <br> Существуют специальные команды, выполняющие <b>перевод строки</b> и <b>задающие начало нового</b> <b>абзаца</b>. <br> <br> <br> - перевод текста в новую строку; <br> <br> <Р> - начало абзаца, еще добавляет пустую строку, которая зрительно выделяет абзац. <br> <br> Оба тэга являются непарными.<br> <br> <i>Задание 3. Использование тэгов перевода строки и абзаца.</i><br> <br> 1<a href="18845_html_m631003e.png"><img src="18845_html_m631003e.png" name="graphics2" align=left hspace=12 width=301 height=255 border=0></a>. Внесите изменения в текст файла HTML:<br> <br> <HTML><br> <br> <HEAD><br> <br> <TITLE> <i>Учебный</i><i> </i><i>файл</i><i> HTML</i>





Расписание



занятий


на вторник



HTML>

2. Сохраните текст с внесенными изменениями в файле RASP.html.

3. Просмотрите полученную Web-страницу. Как изменилось изображение текста на экране? Новая страница будет выглядеть так, как показано на рис.


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

Существуют три тэга выделения фрагментов текста:

<В> ... — выделение полужирным,

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

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

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

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





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





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




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

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

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

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

<Тэг-1> <Тэг-2> ... — правильная запись;

<Тэг-1> <Тэг-2> ... — ошибочная запись.

Задание размера символов

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

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

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

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

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





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





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





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

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

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

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

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





<i>Учебный</i><i> </i><i>файл</i><i> HTML</i><b> </</b>TITLE<b>> </b><br> <br> </HEAD><br> <br> <BODY><br> <br> <b></b> <i>Расписание</i><b> </b><br> <br> <i>занятий на вторник</i><br> <br> </BODY><br> <br> </HTML><br> </p> 2. Самостоятельно измените размер шрифта для текста «занятий на вторник», используя тэг <FONT>. <p style="border:1px solid #0A0;padding:5px;"> <br> 3. Измените оформление текста HTML-документа, используя тэги выделения фрагментов текста и тэги перевода строки и абзаца.<br> <br> <b>Гарнитура и цвет шрифта</b><br> <br> Тэг <FONT> предоставляет возможности управления размером, гарнитурой и цветом текста. Изменение гарнитуры шрифта выполняется простым добавлением к тэгу <FONT> атрибута FACE. Например, для изображения текста шрифтом Arial необходимо записать: <FONT FACE="ARIAL">.<br> <br> Для изменения цвета шрифта можно использовать в тэге <FONT> атрибут COLOR="X".<br> <br> Вместо <b>Х</b> надо подставить либо название цвета (в кавычках), либо его шестнадцатеричное значение. При задании цвета шестнадцатеричным числом можно представить этот цвет разложенным на три составляющие: RGВ — (Red, Green, Blue), каждая из которых имеет значение от 0 до FF. <br> <br> Примеры записи цвета в формате RGB приведены в таблице<br> <br> Запись цвета в формате RGB <br> <table style="border:1px solid #333;padding:5px;margin:5px;" width=559 cellpadding=3 cellspacing=0> <col width=154> <col width=98> <col width=174> <col width=107> <tr valign=top> <td style="border-top:1px solid #AAA;" width=154 height=12> <br> Цвет<br> <br> </td> <td style="border-top:1px solid #AAA;" width=98> <br> RRGGBB<br> <br> </td> <td style="border-top:1px solid #AAA;" width=174> <br> Цвет<br> <br> </td> <td style="border-top:1px solid #AAA;" width=107> <br> RRGGBB<br> <br> </td> </tr> <tr valign=top> <td style="border-top:1px solid #AAA;" width=154 height=13> <br> Black— черный<br> <br> </td> <td style="border-top:1px solid #AAA;" width=98> <br> 000000<br> <br> </td> <td style="border-top:1px solid #AAA;" width=174> <br> Purple — фиолетовый<br> <br> </td> <td style="border-top:1px solid #AAA;" width=107> <br> FF00FF<br> <br> </td> </tr> <tr valign=top> <td style="border-top:1px solid #AAA;" width=154 height=11> <br> White—белый<br> <br> </td> <td style="border-top:1px solid #AAA;" width=98> <br> FFFFFF<br> <br> </td> <td style="border-top:1px solid #AAA;" width=174> <br> Yellow — желтый<br> <br> </td> <td style="border-top:1px solid #AAA;" width=107> <br> FFFF00<br> <br> </td> </tr> <tr valign=top> <td style="border-top:1px solid #AAA;" width=154 height=13> <br> Red—красный<br> <br> </td> <td style="border-top:1px solid #AAA;" width=98> <br> FF0000<br> <br> </td> <td style="border-top:1px solid #AAA;" width=174> <br> Brown — коричневый<br> <br> </td> <td style="border-top:1px solid #AAA;" width=107> <br> 996633<br> </p> </td> </tr> <tr valign=top> <td style="border-top:1px solid #AAA;" width=154 height=11> <p style="border:1px solid #0A0;padding:5px;"> Green — зеленый<br> <br> </td> <td style="border-top:1px solid #AAA;" width=98> <br> 00FF00<br> <br> </td> <td style="border-top:1px solid #AAA;" width=174> <br> Orange — оранжевый<br> <br> </td> <td style="border-top:1px solid #AAA;" width=107> <br> FF8000<br> <br> </td> </tr> <tr valign=top> <td style="border-top:1px solid #AAA;" width=154 height=13> <br> Azure — бирюзовый<br> <br> </td> <td style="border-top:1px solid #AAA;" width=98> <br> 00FFFF<br> <br> </td> <td style="border-top:1px solid #AAA;" width=174> <br> Violet—лиловый<br> <br> </td> <td style="border-top:1px solid #AAA;" width=107> <br> 8000FF<br> <br> </td> </tr> <tr valign=top> <td style="border-top:1px solid #AAA;" width=154 height=13> <br> Blue—синий<br> <br> </td> <td style="border-top:1px solid #AAA;" width=98> <br> 0000FF<br> <br> </td> <td style="border-top:1px solid #AAA;" width=174> <br> Gray—серый<br> <br> </td> <td style="border-top:1px solid #AAA;" width=107> <br> А0А0А0<br> <br> </td> </tr> </table> <br> <br> <i>Задание</i> 7. <i>Установка гарнитуры и цвета шрифта.</i><br> <br> 1. Внесите изменения в файл RASP.html<br> <br> <HTML><br> <br> <HEAD><br> <br> <TITLE> <i>Учебный</i><i> </i><i>файл</i><i> HTML</i>







Расписание


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





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

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

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

Современные браузеры воспринимают атрибут выравнивания текста ALIGN=:

ALIGN==CENTER — выравнивание по центру;

AUGN=RIGHT — выравнивание по правому краю;

ALIGN=LEFT — выравнивание по левому краю.

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

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





<i>Учебный</i><i> </i><i>файл</i><i> HTML</i><b> </</b>TITLE<b> ></b><br> <br> </HEAD><br> <br> <BODY></p> <p style="border:1px solid #0A0;padding:5px;"> <Р ALIGN=CENTER><br> <br> <b> <i>Расписание</i> </b><br> <br> <br> <i>занятий</i><i> </i><i>на</i><i> </i><span><i>btoph</i></span><span><i>и</i></span><span><i>k</i></span><span></i></span><br> <br> </P><br> <br> </BODY><br> <br> </HTML><br> <br> 2. Просмотрите результат изменений.<br> <br> <br> <b>Задание цвета фона и текста</b><br> <br> При изображении фона и текста браузеры используют цвета, установленные по умолчанию, — они заданы параметрами настройки браузера. Если вы хотите задать другие цвета, то это надо сделать в начале файла HTML в тэге <BODY>. Атрибут BGCOLOR= определяет цвет фона страницы, ТЕХТ= задает цвет текста для всей страницы, LINK= и VLINK== определяют цвета соответственно непросмотренных и просмотренных ссылок (последние два параметра будут рассмотрены позже).<br> <br> <i>Задание 9. Установка цвета фона и текста. </i> <br> <br> <i>1. </i>Внесите изменения в файл RASP.html<br> <br> <HTML><br> <br> <HEAD><br> <br> <TITLE> <i>Учебный</i><i> </i><i>файл</i><i> HTML</i><b>







Расписание


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







Размещение графики на Web-странице

Тэг позволяет вставить в документ изображение. Оно появится в том месте документа, где находится этот тэг. Данный тэг непарный. Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG. При выполнении следующего задания будем считать, что графический файл *.GIF хранится в рабочем каталоге Web, где находится и наша Web-страница.

Задание 10. Размещение графики на Web-странице.

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




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






Расписание


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