8.12. Стилі

Можна описувати спеціальними стилями окремі слова або пропозиції. Є два типи стилів: логічний і фізичний. Логічні стилі визначають текст згідно заданому значенню, тоді як фізичні стилі визначають деякі ділянки тексту.

Навіщо існують два стилі, якщо вони можуть дати однаковий результат на екрані? У якості відповіді на це питання зішлемся на аксіому: "Довіртеся вашому browser."

У ідеалі, в, зміст відділяється від заголовка. Таким чином, SGML визначає рядок як заголовок, але не визначає, що заголовок повинен бути написаний, наприклад, жирним шрифтом з розміром букв 24 пункти, і повинен бути розташований у верхній частині сторінки. Перевага цього підходу (це подібно в концепції стилю в більшості текстових процесорів) - в тому, що якщо Ви вирішуєте замінити стиль заголовка - все, що Ви повинні зробити - це змінити визначення заголовка в Web browser.

Інша перевага стилів в тому, що, наприклад, зручніше визначити що - небудь як < H1> чим пам’ятати, яким шрифтом треба описувати заголовок. Це ж істинно і для окремих символів. Наприклад, розглянемо <STRONG> . Більшість browsers розглядають це як жирний шрифт в тексті. Проте, можливо, що читач вважав за краще б що цьому розділі це виділялося, наприклад, іншим кольором. Таким чином, стилі дають користувачеві велику свободу у виборі шрифтів.

8.12.1 Логічні стилі

<DFN>

служить для опису визначень. (Це визначення.)

< EM >

служить для виділення слів. (Це виділене слово.)

<CITE>

служить для виділення заголовків книг, фільмів, цитат тощо.(Це цитата)

<CODE>

служить для виділення програмних кодів, текстів програм тощо. Зображається шрифтом фіксованої ширини. (The <stdio.h> header file)

<KBD>

використовується для введення з клавіатури користувача. Може бути зображено жирним шрифтом (але в більшості browser зображається спеціальним шрифтом). (Введіть passwd)

<SAMP>

використовується для машинних повідомлень. Зображається шрифтом фіксованої ширини. (Seg mentation fault: Core dumped.)

<STRONG>

служить для ОСОБЛИВОГО виділення слів. Зазвичай виділяється жирним шрифтом (Це дуже важливо )

<VAR>

використовується для символьних змінних. (Це змінна.)

8.12.2. Фізичні стилі

Існують фізичні способи виділення - автор задає стиль написання тексту, описуючи шрифт в початковому HTML-документі.

Ви можете задати:

<B>, </B>

жирний шрифт (це жирний шрифт)

<I>, </I>

похилий шрифт (це похилий шрифт)

<TT>, </TT>

фіксований шрифт (шрифт заданої ширини) (це fixed шрифт)

8.12.3. Спеціальні символи

Символи <, >, & і " мають в HTML особливе значення, як символи форматування. Але іноді нам необхідно використовувати їх в тексті по своєму прямому призначенню. Для їх введення в текст, Ви повинні використовувати:

& lt;

- ліва дужка <

& gt;

- права дужка >

& amp;

- &

& quot;

- "

ЗАУВАЖЕННЯ: Спеціальні символи чутливі до регістра: Не МОЖНА використовувати &LT; замість <.

8.13. Переривання рядка

Використовуючи <BR> Ви можете перейти на новий рядок, не починаючи нового абзацу (у більшості browser абзаци виділяються додатковими порожніми рядками).

Наприклад:

Інститут Ядерної Фізики<BR>Московського Державного Університету <BR>

дасть на екрані:

Інститут Ядерної Фізики Московського Державного Університету

Гиперссылка и гипертекст

Термин гиперссылка (от англ. hyperlink), очень часто употребляется в сокращённом варианте: «ссылка» и «link» соответственно — основной и важнейший функционал HTML, реализующий динамическую связь конкретного элемента веб-страницы с любым — собственным или иным другим — сетевым ресурсом (или же определённым местом сетевого ресурса).

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

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

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

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

Гипертекст

Таким образом, мы можем ввести в свой обиход ещё одно понятие: гипертекст (от англ. hypertext) — тип информационного проекта, элементы которого ассоциативно соединены между собой системой гиперсвязей. Это позволяет комфортно перемещаться между отдельными частями веб-проекта (или нескольких проектов, связанных в единую гипертекстовую сеть). В общем случае, даже не имеет значения, в каком месте Интернета находятся фрагменты гипертекста — продуманная и правильно реализованная система гиперссылок способна увязать между собой неограниченное количество как удалённых друг от друга, так и очень разных по исполнению ресурсов.

Гиперссылка на другую html страницу

Гиперссылка может связывать страницы как в пределах одного сайта, так и указывать на любую страницу в Интернете. При построении ссылки на чужие страницы всегда надо пользоваться абсолютным адресом страницы (http://www.site.com/page.html). Если создается ссылка на страницу в пределах сайта, то предпочтительнее использовать относительный URL (page.html, catalog/page.html). Делая графическую гиперссылку, помните, что некоторым пользователям графика недоступна, поэтому обязательно включайте соответствующие текстовые элементы.

Для создания гиперссылки служит дескриптор <A>

Пример:

HTML-код:

<a href="http://on-line-teaching.com/index.html">Ссылка на главную страницу сайта</a>

<a href="../index.html">Ссылка на главную страницу сайта</a>

Отображение в браузере:

Ссылка на главную страницу сайта

Ссылка на главную страницу сайта

Гиперссылка в пределах html страницы

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

Чтобы построить ссылку на область внутри текущей страницы, надо дать этой области название при помощи атрибута NAME тэга <A>. Имя должно содержать только буквы и цифры.

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

Пример:

HTML-код:

<a href="#Начало страницы">Наверх страницы</a>

В то место, куда надо сделать переход надо вставить:

<a name="Начало страницы"></a>

Отображение в браузере:

Наверх страницы

Почтовая гиперссылка

Создавая ссылку на адрес электронной почты, вы должны указать адрес e-mail. Следует позаботиться о том, чтобы пользователю было ясно, кому он собирается отослать сообщение.

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

Пример:

HTML-код:

<a href="mailto:admin@on-line-teaching.com?subject=Письмо автору" title="Письмо автору с сайта www.on-line-teaching.com">admin@on-line-teaching.com</a>

Отображение в браузере:

admin@on-line-teaching.com

Открытие html страниц в новом окне

При помощи атрибута TARGET можно загрузить страницу в новом окне браузера. Этот атрибут предназначен для задания наименования окна. Имя окна используется в служебных целях. Чтобы открыть страницу в новом окне надо использовать константу _blank.

Пример:

HTML-код:

<a href="../index.html" target="_blank"">Ссылка на главную страницу сайта</

Отображение в браузере:

Ссылка на главную страницу сайта

Цвет текста гиперссылок

Атрибуты LINK, ALINK, VLINK задают цвет шрифта гиперссылок.

Атрибут LINK служит для выделения гиперссылок, которые еще не посещались пользователем.

Атрибут VLINK - уже посещенные ссылки.

Атрибут ALINK - выделяет активную гиперссылку.

Порядок перехода по гиперссылкам

Некоторые браузеры могут поддерживать функцию перехода по гиперссылкам с помощью клавиши Tab. При этом браузер по умолчанию подсвечивает гиперссылки в порядке их следования в тексте страницы. Изменить порядок перехода можно с помощью атрибута TABINDEX тэга <A>. Чтобы включить гиперссылку в перечень, описывающий новый порядок перехода, надо присвоить атрибуту TABINDEX некоторое целое положительное число в диапазоне от 1 до 32767. Чтобы исключить гиперссылку из перечня, надо присвоить атрибуту любое отрицательное число. Когда пользователь нажимает клавишу TAB, курсор перемещается к гиперссылке с наименьшим положительным значением индекса. Если нескольким гиперссылкам присвоено одинаковое значение индекса, первой выбранной окажется та, которая в тексте страницы стоит выше.

Следует сказать, что атрибутом TABINDEX можно пользоваться для выбора других объектов, например, графических изображений.

Таблицы в HTML

Одним из наиболее мощных и широко применяемых в HTML средств являются таблицы. Понятие табличного представления данных не нуждается в дополнительном пояснении. В HTML таблицы используются не только традиционно, как метод представления данных, но и как средство форматирования Web-страниц, задания взаимного расположения элементов страницы. При просмотре такого документа сразу не видно, что для его построения используется таблица, так как рамки вокруг её ячеек не прорисовываются.

Создание HTML-таблиц.

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

Описание таблиц должно распологаться внутри раздела документа <BODY> . Документ может содержать произвольное число таблиц, причём допускается и вложенность таблиц друг в друга. Каждая таблица должна начинаться тэгом <TABLE> и завершаться тэгом </TABLE> . Внутри этой пары тэгов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек.

Каждая строка начинается тэгом <TR> (Table Row) и завершается тэгом </TR> . Отдельная ячейка в строке обрамляется парой тэгов <TD> и </TD> (Table Data) или <TH> и </TH> (Table Header). Тэг <TH> используется обычно для ячеек-заголовков таблицы, а <TD> - для ячеек-данных. Различие в использовании заключается лишь в типе шрифта, используемого по умолчанию для отображения содержимого ячеек, а также расположению данных внутри ячейки. Содержимое ячейки типа <TH> отображается полужирном шрифтом (Bold) шрифтом и располагается по центру. Ячейки, определённые тэгом <TD> по умолчанию отображают данные, выровненные влево и посередине в вертикальном направлении.

Тэги <TH> и <TD> не могут появляться вне описания строки таблицы <TR> . Завершающие коды </TR> , </TD> и </TH> могут быть опущены. В этом случае концом описания строки или ячейки является начало следующей строки или ячейки, или конец таблицы. Завершающий тэг таблицы </TABLE> не может быть опущен.

Количество строк в таблице определяется числом открывающих тэгов <TR> , а количество столбцов - максимальным количеством <TD> или <TH> среди всех строк. Часть ячеек могут не содержать никаких данных, такие ячейки описываются парой следующих подряд тэгов <TD> </TD> . Если одна или несколько ячеек, располагающихся в конце какой-либо строки, не содержит данных, то их описание может быть опущено, а браузер автоматически добавит требуемое количество пустых ячеек. Отсюда следует, что построение таблиц, в которых в разных строчках располагается различное количество столбцов одного и того же размера, не разрешается.

Таблица может иметь заголовок, который заключается в пару тэгов <CAPTION> и </CAPTION> . Описание заголовка таблицы должно располагаться внутри тэгов <TABLE> и </TABLE> в любом месте, однако вне области описания любого из тэгов <TR> , <TD> или <TH> . Согласно спецификации языка HTML расположение описания заголовка регламентировано более строго: оно должно располагаться сразу же после тэга <TABLE> и до первого <TR> . Мы рекомендуем придерживаться этого правила.

По умолчанию текст заголовка таблицы располагается над ней (align="top") и центрируется в горизонтальном направлении.

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

Этих седений вполне достаточно для построения элементарных таблиц.

Приведём пример простейшей таблицы состоящий из двух строк и двух столбцов :

<html>

<head>

<title>Пример простейшей таблицы</title>

</head>

<BODY> <TABLE border>

<TR>

<TD>Ячейка 1 строки 1

<TD>Ячейка 2 строки 1

<TR>

<TD>Ячейка 1 строки 2

<TD>Ячейка 2 строки 2

</TABLE>

</body>

</html>

Системи обробки тексту. Функції та загальна характеристика текстових редакторів, текстових процесорів, видавничих систем. Текстовий редактор «Блокнот».