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




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

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

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





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

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



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





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



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

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







<i>Это заглавие документа</i><b> </</b>TITLE<b>></b> <br /> <br /></HEAD> <br /> <br /><i>текст документа</i> <br /> <br /></HTML> <br /> <br /><b>Определение тела документа</b>. <a href="/vvedenie-v-html.html"> Весь остальной HTML-документ</a>, включая весь текст, содержится внутри тэга <ВODY> ...</BODY>. Теперь наш документ выглядит примерно так: <br /> <br /><HTML> <br /> <br /><HEAD> <br /> <br /><TITLE> <i>Это заглавие документа</i><b> </</b>TITLE<b>></b> <br /> <br /></HEAD> <br /> <br /><BODY> <br /> <br /><i>текст документа</i> <br /> <br /><b></</b>BODY<b>></b> <br /> <br /></HTML> <p>Несмотря на то, что присутствие этих трех <a href="/klassifikacii-stepenej-zashiti-obolochki-elektrooborudovaniya.html">тэгов предусмотрено стандартом</a>, большинство браузеров может отобразить документ даже при их отсутствии. Однако следует приучить себя всегда указывать эти тэги - и вам не придется беспокоиться по поводу редактирования документа, если в будущем эти тэги станут необходимы.</p> <br /> <br /><i>Задание 1. Создание простейших файлов HTML.</i> <p>1. Создайте папку <b>Web</b>, в которой мы будем сохранять сконструированные Web-страницы.</p> <p>2. Запустите программу Блокнот (Notepad). </p> <p>3. Наберите в окне редактора простейший текст файла HTML:</p> <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> <span><b></</b></span>TITLE<span><b> ></b></span> <br /> <br /></HEAD> <br /> <br /><BODY> <br /> <br /><i> Расписание</i> <br /> <br /><i>занятий </i> <br /> <br /><i>на вторник</i> <br /> <br /></BODY> <br /> <br /></HTML> <br /><ol start=3> <li> <br />Сохраните текст со внесенными изменениями в файле RASP.HTM. <br /><li> <br />В браузере Microsoft Internet Explorer обновите полученную Web-страницу, используя клавишу F5 или кнопку <b>Обновить</b> (Refresh). Изменилось ли изображение текста на экране? <br /></ol> <br /><i>Примечание.</i> <i>В дальнейшем после внесения изменений в Web-страницу всегда выполняйте пункты 3-4 этого задания</i>. <p>Существуют <a href="/xi-2-specialenie-meri-po-usileniyu-ohrani-na-more-str.html">специальные команды</a>, выполняющие <b>перевод строки</b> и <b>задающие начало нового</b> <b>абзаца</b>. </p> <br /> <br /><BR> - перевод текста в новую строку; <br /> <br /><Р> - начало абзаца, <a href="/proekt-poryadok-dennij-ta-proekti-rishene-v5.html">еще добавляет пустую строку</a>, которая зрительно выделяет абзац. <p>Оба тэга являются непарными.</p> <br /> <br /><i>Задание 3. Использование тэгов перевода строки и абзаца.</i> <p>1<img src="15939_html_m631003e.png" name="graphics2" align=left hspace=12 width=301 height=255 border=0>. Внесите изменения в текст файла HTML:</p> <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> <p> <i>Расписание</i> </p> <br /> <br /><i>занятий на вторник</i> <br /> <br /></BODY> <br /> <br /></HTML> <p>2. Самостоятельно измените размер шрифта для текста «занятий на вторник», <a href="/instrukciya-po-nastrojke-d-link-dph120s.html">используя тэг </a><FONT>.</p> <p>3. Измените оформление текста HTML-документа, используя тэги выделения фрагментов текста и тэги перевода строки и абзаца. <br /> <br /><b>Гарнитура и цвет шрифта</b> </p> <p>Тэг <FONT> предоставляет возможности управления размером, гарнитурой и цветом текста. Изменение гарнитуры шрифта выполняется простым добавлением к тэгу <FONT> атрибута FACE. <a href="/amplitudnie-shkali.html">Например</a>, для изображения текста шрифтом Arial необходимо записать: <FONT FACE="ARIAL">.</p> <p>Для изменения цвета шрифта можно использовать в тэге <FONT> атрибут COLOR="X". </p> <p>Вместо <b>Х</b> надо подставить либо название цвета (в кавычках), либо его шестнадцатеричное значение. При задании цвета шестнадцатеричным числом можно представить этот цвет разложенным на три составляющие: RGВ — (Red, Green, Blue), каждая из которых имеет значение от 0 до FF. </p> <p>Примеры записи цвета в формате RGB приведены в таблице </p> <p>Запись цвета в формате RGB </p> <br /><table width=559 cellpadding=3 cellspacing=0> <col width=154> <col width=98> <col width=174> <col width=107> <tr valign=top> <td width=154 height=12> <br />Цвет <br /> <br /></td> <td width=98> <br />RRGGBB <br /> <br /></td> <td width=174> <br />Цвет <br /> <br /></td> <td width=107> <br />RRGGBB <br /> <br /></td> </tr> <tr valign=top> <td width=154 height=13> <br />Black— черный <br /> <br /></td> <td width=98> <br />000000 <br /> <br /></td> <td width=174> <br />Purple — фиолетовый <br /> <br /></td> <td width=107> <br />FF00FF <br /> <br /></td> </tr> <tr valign=top> <td width=154 height=11> <br />White—белый <br /> <br /></td> <td width=98> <br />FFFFFF <br /> <br /></td> <td width=174> <br />Yellow — желтый <br /> <br /></td> <td width=107> <br />FFFF00 <br /> <br /></td> </tr> <tr valign=top> <td width=154 height=13> <br />Red—красный <br /> <br /></td> <td width=98> <br />FF0000 <br /> <br /></td> <td width=174> <br />Brown — <a href="/primer-rascheta-tiraj-1000a3-lico-v-5-cvetov.html">коричневый </a><br /> <br /></td> <td width=107> <br />996633 <br /> <br /></td> </tr> <tr valign=top> <td width=154 height=11> <br />Green — зеленый <br /> <br /></td> <td width=98> <br />00FF00 <br /> <br /></td> <td width=174> <br />Orange — оранжевый <br /> <br /></td> <td width=107> <br />FF8000 <br /> <br /></td> </tr> <tr valign=top> <td width=154 height=13> <br />Azure — бирюзовый <br /> <br /></td> <td width=98> <br />00FFFF <br /> <br /></td> <td width=174> <br />Violet—лиловый <br /> <br /></td> <td width=107> <br />8000FF <br /> <br /></td> </tr> <tr valign=top> <td width=154 height=13> <br />Blue—синий <br /> <br /></td> <td width=98> <br />0000FF <br /> <br /></td> <td width=174> <br />Gray—серый <br /> <br /></td> <td width=107> <br />А0А0А0 <br /> <br /></td> </tr> </table> <br /> <br /><i>Задание</i> 7. <i>Установка гарнитуры и цвета шрифта.</i> <p>1. Внесите изменения в файл RASP.html</p> <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> <br /> <br /><Р 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> <p>2. Просмотрите результат изменений.</p> <br /><b>Задание цвета фона и текста</b> <p>При изображении фона и текста браузеры используют цвета, установленные по умолчанию, — они заданы параметрами настройки браузера. Если <a href="/russkoe-nazvanie-latinskoe-nazvanie.html">вы хотите задать другие цвета</a>, то это надо сделать в начале файла HTML в тэге <BODY>. Атрибут BGCOLOR= определяет цвет фона страницы, ТЕХТ= задает цвет текста для всей страницы, LINK= и VLINK== определяют цвета соответственно непросмотренных и просмотренных ссылок (последние два параметра будут рассмотрены позже).</p> <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>




Расписание

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





База данных защищена авторским правом ©shkola.of.by 2016
звярнуцца да адміністрацыі

    Галоўная старонка