< head > описание заголовка текст документа icon

< head > описание заголовка текст документа


Смотрите также:
Справочник по html текст документа...
Это органическая часть любой научной работы. Список включает в себя цитируемые в данной работе...
Стр. Web дизайн: Лекция №4 Свойства страницы...
[Введите цитату из документа или краткое описание интересного события...
А. Н. Иванов Реквизиты документа отделяют друг от друга 2-3 межстрочными интервалами...
Практическая работа в текстовом процессоре ms word...
Практическая работа в текстовом процессоре ms word...
План создания чего-либо, включающий описание, чертежи, макеты ит д. Предварительный текст...
Документа
Как оформить ссылку на интернет-источник?...
Роль документа в жизни человека в обществе...
Документа



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

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

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



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



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

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





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



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



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





<i><span class="butback" onclick="goback(10824789)">^</span> <span class="submenu-table" id="10824789">Это заглавие документа</span></i><b> </</b>TITLE<b>></b><br /> <br /> </HEAD><br /> <br /> <i>текст документа</i><br /> <br /> </HTML><br /> <br /> <b>Определение тела документа</b>. Весь остальной HTML-документ, включая весь текст, содержится внутри тэга <ВODY> ...</BODY>. Теперь наш документ выглядит примерно так:<br /> <br /> <HTML><br /> <br /> <HEAD><br /> <br /> <TITLE> <i><span class="butback" onclick="goback(10824790)">^</span> <span class="submenu-table" id="10824790">Это заглавие документа</span></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><br /> <br /> Несмотря на то, что присутствие этих трех тэгов предусмотрено стандартом, большинство<b> </b>браузеров может отобразить документ даже при их отсутствии. Однако следует приучить себя всегда указывать эти тэги - и вам не придется беспокоиться по поводу редактирования документа, если в будущем эти тэги станут необходимы.<br /> <br /> <i>Задание 1. Создание простейших файлов </i><i>HTML</i><i>.</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><b> </</b>TITLE<b> ></b><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><br /> В браузере Microsoft Internet Explorer обновите полученную Web-страницу, используя клавишу F5 или кнопку <b>Обновить</b> (Refresh). Изменилось ли изображение текста на экране?<br /> </ol> <br /> <i>Примечание.</i> <i>В дальнейшем после внесения изменений в Web-страницу всегда выполняйте пункты 3-4 этого задания</i>.<br /> <br /> Существуют специальные команды, выполняющие <b>перевод строки</b> и <b>задающие начало нового абзаца</b>. <br /> <br /> <BR> - перевод текста в новую строку; <br /> <br /> <Р> - начало абзаца, еще добавляет пустую строку, которая зрительно выделяет абзац. <br /> <br /> Оба тэга являются непарными.<br /> <br /> <i><span class="butback" onclick="goback(10824792)">^</span> <span class="submenu-table" id="10824792">Задание 3. Использование тэгов перевода строки и абзаца.</span></i><br /> <br /> 1<img src="358701_html_m631003e.png" name="graphics2" align=left hspace=12 width=301 height=255 border=0>. Внесите изменения в текст файла 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>





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





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

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

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

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

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

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

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

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

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

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

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

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





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





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





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>E="7"></b> <i>Расписание</i><b> </b><br /> <br /> <i>занятий на вторник</i><br /> <br /> </BODY><br /> <br /> </HTML><br /> <br /> 2. Самостоятельно измените размер шрифта для текста «занятий на вторник», используя тэг <FONT>.<br /> <br /> 3. Измените оформление текста HTML-документа, используя тэги выделения фрагментов текста и тэги перевода строки и абзаца.<br /> <br /> <b><span class="butback" onclick="goback(10824795)">^</span> <span class="submenu-table" id="10824795">Гарнитура и цвет шрифта</span></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 width=559 border=1 bordercolor="#000000" 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 — коричневый<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><span class="butback" onclick="goback(10824796)">^</span> <span class="submenu-table" id="10824796">Задание</i> 7. <i>Установка гарнитуры и цвета шрифта.</span></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><br /> <br /> <Р ALIGN=CENTER><br /> <br /> <b> <i>Расписание</i> </b><br /><br /> <br /> <FONT SIZE="6"<i><i>занятий</i><i> </i><i>на</i><i> </i><i>btoph</i><i>и</i><i>k</i></i><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><span class="butback" onclick="goback(10824799)">^</span> <span class="submenu-table" id="10824799">Задание 9. Установка цвета фона и текста.</span> </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>






Расписание


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








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

Атрибуты изображения

Атрибут


Формат


Описание


ALT


картина


Задает текст, заменяющий изображение в том случае, если браузер не воспринимает это изображение


BORDER





Задает толщину рамки вокруг изображения. Измеряется в пикселях


ALIGN





Задает выравнивание изображения относительно текста: относительно текста выровнена верхняя часть изображения - ТОР. нижняя - BOTTOM. средняя - MIDDLE


HEIGHT





Задает вертикальный размер изображения внутри окна броузера


WIDTH





Задает добавление верхнего и нижнего пустых полей


HSPACE





Задает добавление левого и правого пустых полей



^ Задание 11. Установка атрибутов изображения.

Самостоятельно внесите изменения в файл RASP.html опробуйте использование таких атрибутов графики, как ALT, BORDER, HEIGHT, WIDTH.

^ Примечание. Всегда обращайте внимание на размер (объем в байтах) графического файла, так как это влияет на время загрузки Web-страницы.

Фоновая графика

Фоновое изображение — это графический файл с изображением небольшой прямоугольной плашки. При просмотре в браузере эта плашка многократно повторяется, заполняя все окно, независимо от его размеров.

Графика, используемая в качестве фоновой, задается в тэге <BODY>.

Задание 12. Установка фонового изображения на Web-странице

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





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







Расписание


занятий на btophиk








Таблицы

Ячейка таблицы может содержать в себе текст, графику или другую таблицу. Таблица состоит из:

названия таблицы

  • заголовков столбцов

  • ячеек

Таблица заполняется построчно, полностью, для пустых ячеек используют пробелы.

Тэги оформления таблиц
текст


Тэг

Формат

Описание

TABLE

текст


Объявление таблицы

TR


Начало строки

TD

текст
Тэг данных

^ Атрибуты тэга <TABLE>

BORDER



Устанавливает рамку вокруг таблицы

WIDTH



Задает ширину таблицы в % от ширины таблицы или в пикселях

BGCOLOR



Задает цвет фона таблицы

^ Атрибуты тэгов <TD> и <TR>




ALIGN


Устанавливает выравнивание по горизонтали (RIGHT, LEFT, CENTER)

VALIGN


Устанавливает выравнивание по вертикали (TOP-по верху, MIDDLE-по середине, BOTTOM-по низу, BASELINE )

BGCOLOR


Задает цвет фона

^ Задание 13. Создание таблицы

  1. Наберите в блокноте следующий текст:





<i>Расписание занятий 11 класса</i>






11 класс


Понедельник










< /TR>



Lesson 11A 11B
1 Русский Информатика История
2 Алгебра Физика Химия
3 Физ-ра Физика Физика






  1. Cохраните файл под именем 11.html

  2. Просмотрите созданный файл.

Задание 14. Создание таблицы

Дополните полученную Web-страницу по аналогии расписанием на последующие дни: вторник, среду, четверг, пятницу.


Построение гипертекстовых связей

^ Важнейшим свойством языка HTML является возможность включения в документ ссылок на другие документы. В качестве ссылки можно использовать текст или графику.

Возможны ссылки: • на удаленный HTML-файл,

на некоторую точку в текущем HTML-документе,

на любой файл, не являющийся HTML-документом.

^ Ссылки в пределах одного документа

Такие ссылки требуют наличия двух частей: метки и самой ссылки. Метка определяет точку, на которую происходит переход по ссылке. Ссылка использует имя метки. Ссылки выделяются цветом или подчеркиванием, в зависимости от того, как настроен браузер. Для изменения цвета ссылки используется атрибуты LINK= и VLINK= тэга .

^ Опишем ссылку:

<А НREF="#ПН">Понедельник<>

Перед именем метки (ПН), указывающей, куда надо переходить по ссылке, ставится символ # Между символами •> и < располагается текст («Понедельник»), на котором должен быть произведен щелчок для перехода по ссылке.

Определим метку:

<А NAME="ПH"> Понедельник </A>

Задание 15. Создание ссылки в пределах одного документа.

  1. Дополните файл 11.НТМL описанием таблицы, содержащей названия дней недели, поместив его в начало Web-страницы:







<ТD>Понедельник



<ТD>Среда









Вторник Четверг Пятница Cy66oтa







2. Вставьте в файл 11.НТМ метку (указывающую на понедельник), заменив строку Понедельник:



Понедельник


3. Измените таблицу с названиями дней недели, вставив ссылку для выбранной метки:

•••







<ТD>Среда




4. Сохраните файл.

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


Ссылки на другой HTML-документ

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

Опишем ссылку: <А HREF="11.HTML">11 класс

После имени файла (11.НТМL), между символами «>» и «<» располагается текст («11 класс»), на котором должен быть произведен щелчок для перехода к этому файлу.

Задание 16. Создание ссылки на другой HTML-документ.

1. Загрузите в браузер файл RASP.HTML

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





Учебный файл HTML






ALIGN=CENTER>


Расписание B>


занятий на BTOPHИK










Понедельник Вторник




11 класс 10 класс TR>

9 Knacc8 класс








Скачать 218,92 Kb.
оставить комментарий
Дата02.12.2011
Размер218,92 Kb.
ТипДокументы, Образовательные материалы
Добавить документ в свой блог или на сайт

Ваша оценка этого документа будет первой.
Ваша оценка:
Разместите кнопку на своём сайте или блоге:
rudocs.exdat.com

Загрузка...
База данных защищена авторским правом ©exdat 2000-2017
При копировании материала укажите ссылку
обратиться к администрации
Анализ
Справочники
Сценарии
Рефераты
Курсовые работы
Авторефераты
Программы
Методички
Документы
Понятия

опубликовать
Загрузка...
Документы

Рейтинг@Mail.ru
наверх