Гипертекст и язык гипертекстовой разметки HTML (стр. 2 из 3)

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

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

Информационные сайты могут иметь иерархическую или сетевую структуру. В иерархических сайтах создаются оглавления, а в сайтах с сетевой структурой для навигации используются карты сайтов.

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

Примеры электронных газет, журналов и новостных сайтов:

gazeta.ru - новостной сайт;

internet.ru - Интернет-газета;

commputtera.ru - компьютерный журнал.

3. Язык гиппертекстов HTML

Язык HTML — это язык разметки гипертекстов, хранящихся на Web-серверах и отображаемых браузерами на экранах ЭВМ. Язык HTML определяет правила описания гипертекстов и отображения их браузерами на экранах компьютеров.

Гипертексты должны начинаться со слова <html> и заканчиваться словом </html>. Слова в угловых скобках <>в языке HTML называются тэгами, а в программировании — дескрипторами. Почти все тэги HTML парные — <html> и </html>, <head> и </head> и т.д.

Парные тэги выделяют некоторый фрагмент гипертекста — «заглавие», «тело» и т. д. Первый тэг начинает фрагмент, а второй — завершает его. В закрывающих дескрипторах перед именем ставится знак дроби / .

Общая структура гипертекстов, записанных в языке HTML:

гипертекст ::= <html> заглавие тело </html>

заглавие ::= <head> титул </head>

титул ::= <title> название </title>

тело ::= <body> текст </body>

В соответствии с правилами HTML гипертексты обязаны иметь «заглавие» и «тело». Как публикации гипертексты могут и должны содержать сведения об авторах и владельцах авторских прав (сайтов).

В заглавии гипертекста должно содержаться «название», которое браузерами отображается на самой верхней строке экрана ЭВМ. Название должно выражать главную идею публикации (страницы). Гипертекст без названия — это как статья без названия.

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

Пример гипертекста и результат его отображения браузером на экране ЭВМ:

Гипертекст: Результат:

Результат работы браузера — загрузка и вывод на экран ЭВМ гипертекста, хранящегося на сайте по адресу, указанному в окне браузера. Если гипертекст слишком велик, то браузер выводит кнопки протяжки гипертекста справа или внизу экрана.

Размеры экранов ЭВМ имеют следующий спектр. Минимальный размер экрана — 640 х 480 пикселей. Далее стандартные размеры экранов — 800 х 600, 1024 х 768 и 1280 х 1024 пикселей. Поэтому на разных экранах гипертексты могут вы глядеть по-разному.

Общая структура гипертекстов и их отображения на экране ЭВМ:

Гипертекст: Результат:

Текстовая часть может состоять из строк и абзацев с заголовками и без заголовок, со списками, таблицами и меню.

тело ::— <body> текст </body>

текст::= заголовок { текст } |

абзац { текст } |

ссылки { текст } |

список { текст } |

таблица { текст } |

Заголовки в гипертекстах оформляются в следующем виде:

заголовок::= <h1> название </h1>

заголовок::= <h2> название </h2>

заголовок::= <h6> название </h6>

где тэги h1, ... , h6 задают размер заголовков по отношению к основному тексту.

Абзацы в гипертекстах начинаются с дескриптора <p>:

абзац ::=<p | параметры |> гипертекст | </p> |

Переход на новую строку и абзацах указывается дескриптором <bг> . Конец абзаца </р> не обязателен, но необходим при использовании параметров в дескрипторе абзаца.

Основной параметр абзацев — align — выравнивание текстов на экране ЭВМ. Выравнивание текстов производится браузерами автоматически в соответствии с размерами экрана ЭВМ:

align=center- по центру экрана:

align=left- к левому краю;

align=right - к правому краю;

align=justify - на весь экран.

Для выравнивания абзацев должен быть выбран единый общий стиль, который необходимо применять ко всем во всех гипертекстах на сайте.

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

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

<big> Большие символы </big>

<b> жирный шрифт </b>

<i> курсив </ i>

<u>подчеркивание </u>

<strike> перечеркивание </strike>

<small> маленькие символы </small>

Шрифтовое выделение в гипертекстах задается тэгом <font>: шрифты:: = < font параметры> текст </ font>

Параметры шрифтов - их размер и тип. Размеры шрифта задаются параметром size = размер.

Размер указывается явно от 1 до 6, либо в форме увеличения +1, +2 или уменьшении - 1, - 2.

Тип шрифта задается параметром

face = шрифт

Здесь шрифт — один из стандартных шрифтов: «Times», «Courier» и т. д.

Цвет шрифта задается параметром со1ог = цвет, где цвет — цвет выделенного фрагмента гипертекста. Например — выделение текста красным цветом:

< font color = гed > текст </ font >

Стандартные названия цветов в языке НТМL:

red - красный, green - зеленый, blue – синий, black—черный,

white - белый, gold - золотой, yellow—желтый и т. д.

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

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

Фрагменты гипертекстов могут размешаться на одном и том же сайте либо на нескольких сайтах или даже на нескольких серверах. Во внешних гиперссылках указываются имена соответствующих файлов на сайте, сервере или в сети Интернет:

Общая форма внешних гиперссылок:

гиперссылка ::= <a href = «адрес» > надпись </ a>

где «адрес» — это адрес гипертекста внутри сайта или на другом сервере сети Интернет.

Примеры внешних гиперссылок:

а)адрес сайта в Интернет:

http: // bак2.naгоd.гu

б)адрес страницы на сайте:

http: // bак2.naгоd.гu / inrogl.html.

в)адрес страницы в папке сайта;

http: // bак2.naгоd.гu / tests / test2.html.

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

а)ссылка на страницу внутри того же сайта:

<a href = « inrogl.html. > оглавление </ а>

б)ссылка на страницу внутри того же сайта, но в другой папке:

<a href = «tests / test2.html» > тесты 2 </ а>

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

Графические файлы обычно размешаются на сайтах и отдельной папке с именем image. Загрузка иллюстраций на экраны пользовательских ЭВМ проводится браузерами с помощью операторов <img>:

Общая форма операторов загрузки графических иллюстраций:

Расположение иллюстраций на экране ЭВМ задается параметрами выравнивания: align=left— по левому краю, align=right — по правому краю экрана. Текст при этом обтекает иллюстрации соответственно справа пли слепа.

Иллюстрации могут быть прижаты к верхнему или нижнему краю экрана, что задается параметрами: align =top - к верхнему краю, align=bottom - к нижнему краю экрана, либо выровнены по середине экрана — align = middle.

Для расположения иллюстрации па экране ЭВМ в операторе загрузки могут быть указаны их ширина и высота:

высота:= height= «высота»

ширина:= width= «длина»

Размеры иллюстраций задаются числом точек экрана (в пикселах) либо в процентах от высоты или ширины экрана ЭВМ. В последнем случае на разных экранах иллюстрации будут иметь различные размеры. Рассчитав расположение иллюстраций для экранов минимальных размеров, можно быть уверенным в их размещении на экранах любого, другого размера.

Размеры иллюстраций обычно выбирают так, чтобы они были видны целиком даже на экранах ЭВМ с минимальным размером. Если кран ЭВМ больше, то иллюстрации будут занимать только его часть.

Гипертекстовые списки — это перечни с нумерацией или выделением элементов списков. Все элементы начинаются тэгами <li>. Нумерованные списки начинаются тэгом <ol> и заканчиваются тэгом </ol>. Ненумерованные списки ограничиваются тэгами <ul> </ul>.

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

Заключение

HTML — это язык разметки гипертекстов (hypertext markup language).

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