Студопедия Главная Случайная страница Обратная связь

Разделы: Автомобили Астрономия Биология География Дом и сад Другие языки Другое Информатика История Культура Литература Логика Математика Медицина Металлургия Механика Образование Охрана труда Педагогика Политика Право Психология Религия Риторика Социология Спорт Строительство Технология Туризм Физика Философия Финансы Химия Черчение Экология Экономика Электроника

Справочная информация. Структура HTML-документа.Существует много различных инструментальных средств для создания Web-страниц




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

Файлы, содержащие информацию на языке HTML, обычно имеют расширение htm или html Они могут создаваться либо с помощью простейших текстовых редакторов (например, «Блокнота»), либо с помощью специальных HTML-редакторов. Основной файл каждого каталога обычно имеет имя index. Если при загрузке страницы в адресе не указывать имя файла, то обычно будет производиться поиск.

Тэги (флаги, дескрипторы, контейнеры)— это специальные кодовые слова, определяющие внешний вид текста и графики, выводимой на экран, и формирующие связи с другими web-сайтами и ресурсами Интернета.

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

HTML-документ начинается с тэга <HTML> и заканчивается тэгом </HTML>. Между ними располагается то, что будет выводиться на экран программой просмотра: текст, картинки, видеофрагменты и т. д. Любой HTML-документ состоит из двух частей: заголовка и тела. Кроме того, допускается использование комментариев. Комментарий должен начинать­ся с <!- и заканчиваться ->. Всё, что располагается между этими тэгами, на экран выводиться не будет. Комментарии помогают лучше разобраться в коде HTML-документа.

Таким образом, общая структура HTML-документа имеет вид:

<HTML>

<HEAD>

….

</HEAD>

<BODY>

….

</BODY>

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

<TITLE> название документа </TITLE>

Тело документа — это содержимое Web-страницы. Оно располагается между тэгами <BODY> и </BODY>. Тэг <BОDY> может содержать ряд атрибутов для глобальных установок, относящихся ко всему документу: цвета гиперссылок, цвет текста, фона, фоновый рисунок и т. д. Некоторые атрибуты тэга <BODY>:

• а1ink=цвет — цвет загружаемой гиперссылки;

• 1inkк=цвет —цвет невыбранной гиперссылки;

• vlink= цвет — цвет посещенной гиперссылки;

• bgcolor= цвет — фоновый цвет страницы;

• background="имя графического файла" — повторяющаяся фоновая графика. Рисунок, хранящийся в указанном файле, будет размножен по всему экрану и перекроет цвет фона. Можно использовать форматы файлов GIF и JPEG;

• text= цвет — цвет текста;

• topmargin=n — расстояние между верхним краем окна браузера и содержимым страницы (задается в пикселях);

• lef tmargin=n — расстояние между левым краем окна браузера и содержимым страницы.

Цвет указывается с помощью либо его имени, либо его шестнадцатеричного кода.

Некоторые цвета:

black — черный (000000);

aqua — бирюзовый (00ffff);

blue — синий (0000ff);

gray — серый (808080);

reen — зеленый (008000);

red — красный (ffOOOO);

white — белый (ffffff);

yellow — желтый (ffff00);

maroon — коричневый (800000);

fuchsia — розовый (ff00ff);

lime — светло-зеленый (008000);

navy — ультрамариновый (000080);

olive — оливковый (808000); purple — пурпурный (800080);

silver — серебряный (c0c0c0);

teal — темно-зеленый (008080).

Форматирование текста. Шрифты.Тэги форматирования служат для определения внешнего вида текста и задания его расположения на странице.

1) <DIV> — выделение абзаца:

<DIV а1ign=тип выравнивания>…</DIV>

Значения параметра align:

left — по левому краю;

right — по правому краю;

center — по центру;

justify — по центру.

2)<Р align = тип выравнивания> . . .</Р> — выделение абзаца текста.

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

3) <CENTER> . . .</CENTER> — центрирование всех элементов, располо­женных между этими тэгами (текста, таблиц, графики).

4) <BR> — принудительный разрыв строки в месте установки данного тэга.

5) <Н1 align = тип выравнивания >...</Н1>

<Н2 align = тип выравнивания >...</Н2>

…….

<Н6 align= тип выравнивания >...</Н6>

Это форматирование заголовков. Тэги с номерами 1-3 пригодны для вывода заголовков (большой размер шрифта). Тэги с номерами 4-6 задают размер шрифта, равный или меньший размеру шрифта текущего текста. По умолчанию текст выводится на экран тем шрифтом, который задан в установках браузера. Для изменения шрифта используется тэг <FONT>: <FONT fасе = название шрифта size = paзмеp со1ог = цвет>... </FONT> — определение шрифта.

Атрибут face определяет тип шрифта (Arial, Times New Roman, Courier New, Inipact и т. д.). По умолчанию текст будет выводиться тем шрифтом, который задан в настройках программы-браузера. То же самое будет происходить, если указанный шрифт не установлен на компьютере. Возможно задание сразу нескольких шрифтов через запятую. Тогда сначала будет искаться первый, в случае его отсутствия — второй и т. д.

size — размер шрифта; может задаваться абсолютным значением в диапазоне от 1 до 7 и относительным (по отношению к базовому значению). При относительном задании необходимо перед числом поставить знак + (увеличение) или - (уменьшение). Рекомендуется использовать относительное значение.

color — цвет; задается так же, как цвет фона.

Для изменения начертания шрифта используются тэги:

1) <В>. . . </В> — полужирный шрифт;

2) <I>...</I> — курсив;

3) <U> . . . </U> — подчеркивание;

4) <SUB>.. .</SUB> — нижний индекс;

5)<SUP> . . .</SUP> — верхний индекс.

Гиперсвязи и гиперссылки.Реализуемые в Интернет-документах ссылки можно разделить на две категории:

1) ссылки на другие позиции внутри того же документа;

2) ссылки на другой документ.

Для задания этих типов гиперсвязей используется один тэг <А>, имеющий следующий вид:

hrеf = целевой адрес>текст или графика</А>

В качестве гиперссылки можно использовать текст или графическое изображение. Информация, которая располагается между тэгами <А> и </А>, будет выведена на экран. Если это текст, то он будет выделен подчеркиванием и специальным цветом (по умолчанию синим). При размещении указателя мыши над гиперссылкой он принимает вид руки. При выборе ссылки будет осуществлен переход по заданному адресу. Если ука­зывается относительный адрес (например, только имя файла), то он будет искаться в текущей папке.

При работе с большими документами рекомендуется вставлять в них метки с помощью этого же тэга с параметром NAME:

<А NАМЕ=метка></А>

Сама метка на экране не отображается. Для организации перехода к меткам документа следует записать следующий HTML-код:

<А НRЕF = # метка>текст или графика</А>

Если нужно перейти к заданной метке в другом документе, то необходимо записать такой код:

<А НRЕF =адрес документа # метка>текст или графика</А>

Пример

Файл index.htm:

<HTML>

<HEAD>

<TITLE> Страничка Компьютерной школы ПГУ</TINLE>

</HEAD>

 

<BODY bgcolor = gray link=white vlink = yellow>

<H1 align = center><FONT color = navy>Koмьютерная школа ПГУ

</FONT></Hl>

<BR>

<BR>

<H2 align =c enter><A HREF="history.htm">

История создания</А></Н2>

<BR><BR>

<H2 align = center><A HREF="prepod.htm">

Преподаватели</А></Н2>

<BR><BR>

<H2 align=center><A HREF="kurs.htm">Kypсы</A></H2>

</BODY>

</HTML>

 

Файл history.htm:

<HTML>

<HEAD>

<TITLE> История Компьютерной школы ПГУ</ТIТLE>

</HEAD>

 

<BODY bgcolor=gray link=white vlink=yellow>

<H1 align=center><FONT color=navy>

История создания</FONT></Н1>

<p align=justify>

Компьютерная школа была основана в <b>сентябре 1994

года</b>. Первый набор учеников составил <b>100</b> человек.

</р>

<р align=justifу>

В <i>1995</i> году в школе появилось старшее, а в <i>1996</i>

году - младшее отделение.

</р>

</BODY>

</HTML>


Поможем в написании учебной работы
Поможем с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой





Дата добавления: 2014-11-10; просмотров: 941. Нарушение авторских прав; Мы поможем в написании вашей работы!

Studopedia.info - Студопедия - 2014-2022 год . (0.018 сек.) русская версия | украинская версия
Поможем в написании
> Курсовые, контрольные, дипломные и другие работы со скидкой до 25%
3 569 лучших специалисов, готовы оказать помощь 24/7