| Предыдущая глава |
↓ Содержание ↓
↑ Свернуть ↑
| Следующая глава |
Внимание! Хотя знак "номер" (№) есть на клавиатуре и, соответственно, в кодировочной таблице, СИ коверкает его при заливке. Поэтому пользуйтесь цифровым кодом. Или можно сделать так: N<u><sup>о</sup></u>. Получаем – Nо.
И еще немного о неразрывном пробеле. При автоматическом форматировании текста браузер не может разорвать строку в том месте, где стоит этот пробел. Напишите строчку текста, используя вместо обычного пробела неразрывный. Посмотрите на это дело в браузере. Все нормально, да? Теперь уменьшите окно браузера так, чтобы строчка уже не умещалось в нем. Появится полоса прокрутки.
Неразрывный пробел рекомендуется ставить перед тире в предложении, между знаком номера и следующим за ним числом и т.д. и т.п.
[к оглавлению]
<nobr> и <wbr>, запретим браузеру переносить наш текст
Если нам надо, чтобы браузер не мог перенести строку вообще (не обязательно, кстати, что он разорвет ее на месте пробела, другие знаки, например дефис, тоже сгодятся), то на помощь придет тэг <nobr>. Пишем:
<nobr> Сегодня он предстал в образе крепкого накачанного дядьки. </nobr>
Вуаля! Переноса нет. А если все-таки перенос допустим, но в строго определенном месте? Не проблема. Пишем в том месте <wbr>. Закрывающий тег не требуется.
<nobr> Автомат на груди. Надраенная бляха ремня, кепка с мятым козырьком. Камуфляж сидит на теле как влитой, <wbr> точно вторая кожа. </nobr>
На Самиздате, например, верхняя полоска меню заключена в тэг <nobr>. Иногда может оказаться полезным вставить в тэг <nobr> несколько следующих друг за другом рисунков.
[к оглавлению]
<ul>, <ol>, <li>, списки по списку
Дальше по списку у нас будут списки.
Существует три вида списков: упорядоченный, неупорядоченный и список описаний, который никому, в общем-то, не нужен, и рассматривать его мы не будем.
Упорядоченный список задается тэгом <ol> ... </ol>. Элементы списка заключаются в тэг <li> ... </li>. Завершающий тэг </li> можно не писать.
Параметры тэга <ol> следующие:
type – определяет тип нумерации пунктов, может принимать значения:
A – заглавные латинские буквы (A, B, C...)
a – строчные латинские буквы (a, b, c...)
I – большие римские цифры (I, II, III...)
i – маленькие римские цифры (i, ii, iii...)
1 – обычные цифры (1, 2, 3...) По умолчанию type="1".
start – определяет число, с которого начинается нумерация пунктов списка. Может принимать только целые значения, в том числе и отрицательные (дробные значения браузер превратит в целые). По умолчанию start="1". Тэг <li> тоже имеет параметры, в упорядоченном списке <ol> ... </ol> они такие:
value – изменяет порядок нумерации элементов списка, начиная с того, где был задан этот параметр. Действует до конца списка, либо до тех пор, пока снова не встретится параметр value, опять изменяющий нумерацию.
type – изменяет тип нумерации, действует только на конкретный пункт. Пример:
<ol type="i" start="3">
<li>третий элемент
<li>четвертый элемент
<li>пятый элемент
</ol>
третий элемент
четвертый элемент
пятый элемент
<ol>
<li>первый элемент
<li value="5">пятый элемент
<li>шестой элемент
<li type="I">седьмой элемент
<li>восьмой элемент
<li value="3">третий элемент
<li>четвертый элемент
</ol>
первый элемент
пятый элемент
шестой элемент
седьмой элемент
восьмой элемент
третий элемент
четвертый элемент
Неупорядоченный список задается тэгом <ul> ... </ul>. Элементы списка заключаются в тэг <li> ... </li>. Завершающий тэг </li> можно не писать.
Параметр у тэга <ul> один:
type – определяет тип маркера перед пунктами, может принимать значения:
disc – закрашенный кружок
circle – незакрашенный кружок
square – закрашенный квадрат По умолчанию type="disc".
В неупорядоченном списке тэг <li> может иметь параметр type, таким образом, каждому элементу списка будет назначен свой тип маркера. Используя стили (CSS), можно вообще назначить маркером какой-либо рисунок или отказаться от маркирования.
Пример:
<ul type="circle">
<li>незакрашенный кружок
<li type="disc">закрашенный кружок
<li>незакрашенный кружок
<li type="square">закрашенный квадрат
</ul>
незакрашенный кружок
закрашенный кружок
незакрашенный кружок
закрашенный квадрат
Списки выводятся браузером с новой строки. Элемент, следующий за списком, тоже выводится с новой строки. Слева, сверху и снизу от списка имеется некоторый отступ.
Тэгами <ul> и <ol> можно пользоваться для табулирования текста. Естественно, в этом случае не надо употреблять тэг <li>.
Списки могут быть вложенными. Вложенность не ограничена. Элемент списка сам может быть списком. При этом у вложенного неупорядоченного списка <ul> есть такая особенность: типы маркеров меняются в зависимости от уровня вложенности.
Вложенности нет, по умолчанию type="disc".
1-й уровень вложенности, type="circle".
2-й уровень вложенности, type="square".
3-й уровень вложенности, что, опять disc? Не-а, type="square". Как ни крути.
Кстати, неважно куда вложен список, в <ul> или <ol>, главное, что он – вложен.
Пример:
<ul>
<li>уровень 1
<ul>
<li>уровень 2
</ul>
<li>уровень 1
<ol>
<li>уровень 2
<li>;уровень 2
<ul>
<li>уровень 3
</ul>
</ol>
</ul>;
уровень 1
уровень 2
уровень 1
уровень 2
уровень 2
уровень 3
Список вообще можно построить без всяких там <ol> и <ul>, вот так:
<li>элемент списка
<li>
<li>элемент списка
элемент списка
элемент списка
Но в этом случае никаких отступов не будет, и список получится неупорядоченный, промаркированный закрашенными кружочками. Если же мы хотим вовсе не кружочки, а квадратики, то придется прописывать параметр type для каждого тэга <li>. Также обратите внимание, что совсем необязательно писать что-либо после тега <li>. В таком случае элемент нашего списка будет пуст, но тоже промаркирован.
[к оглавлению]
<a>, ссылки (а вас куда послали? :-)
Теперь поговорим о гиперссылках. Они задаются тэгом <a> ... </a>, у которого естественно есть всякие параметры, без которых ссылка даже не будет воспринята браузером как таковая. ОК, смотрим:
href – определяет текст или картинку (или часть картинки) как ссылку. Может принимать кучу значений, рассмотрим самые-самые:
http:// – доступ к web-документу по http-протоколу.
ftp://– запрос файла по ftp-протоколу с сервера.
mailto: – запускает почтовую программу, установленную на компьютере, если браузер поддерживает это.
file:/ – чтение файла с локального диска.
name – позволяет пометить участок документа для быстрого перехода на него по ссылке, так сказать, поставить "якорь". Имя метки должно быть уникальным для данного документа и может состоять из любых символов (регистр не имеет значения), но тогда имя обязательно заключается в кавычки. Лучше все же пользоваться старыми добрыми латинскими буквами.
Помечаем участок документа:
<a name="metka"> ... </a>
Переходим на метку:
<a href="#metka"> ссылка </a>
Это если и метка, и ссылка на нее находятся в одном документе, а если в разных?
<a href="document.htm#метка 2"> ссылка </a>
Во втором случае, браузер откроет новый документ и перейдет на "метку 2" внутри него.
Недостатки "якорей": усложняют движение по кнопкам "назад" и "вперед" браузера. В самом деле, браузеру ведь все равно, была ссылка внутренней или внешней. Допустим, вы хотите вернуться на предыдущую страницу, но уже попутешествовали по внутренним ссылкам на этой страничке, теперь браузер будет тупо прыгать по ним некоторое время, прежде чем действительно перейдет на предыдущую страницу.
Кстати, ссылку-"якорь", которая ведет на начало страницы, можно заменить таким JavaScript'ом:
<a href="JаvаScript:void(0)" оnClick="scroll(0,0)">в начало</a>
Страница будет прокручена вверх, и никаких ссылок. Естественно, на Самиздате сделать это нельзя. Скрипты здесь запрещены.
Внимание! Я заменил в примере латинские буквы "a" в слове "JаvаScript" и букву "о" в слове "оnClick" на русские, иначе движок СИ всё исковеркает.
Теперь несколько советов о том, как с помощью ссылок-"якорей" сделать сноски в документе. В книжках это выглядит это примерно так:
...палец плавно надавил на спуск штатной "Мясорубки". Этот гразер1 состоял на вооружении...
и т.д. Мы можем сделать не хуже.
<a name="grazer"></a>
...гразер <a href="#link_1" title="Сноска"><sup>1</sup></a> состоял...
Теперь ниже по тексту даем объяснение слова "гразер". Для этого помечаем участок документа:
<a name="link_1"></a>
Тут можно нарисовать две горизонтальные линии, чтобы отделить сноску от остального текста. Между ними поместить объяснение понятия. И – обязательно! – сделайте ссылку, которая позволит после прочтения сноски вернуться назад. То есть поставьте метку ("grazer") туда, где было предложение со сноской. Кстати, поместите всё это в тэг <ul> для необходимого отступа от левого края. Вот что получится в итоге:
1 Гразер – гамма-лазер. [назад]
У вас много сносок? Думаете как их назвать? Здесь даже думать не надо: link_1, link_2, link_3...
target – задает имя окна или фрейма, то есть определяет, где будет открыта ссылка. Используется совместно с параметром href. Существует несколько зарезервированных имен:
_self – ссылка откроется в текущем окне (фрейме). По умолчанию так оно и есть.
_blank – ссылка откроется в новом окне.
Другие зарезервированные имена нужны при использовании фреймов, а кому это надо, когда есть SSI? Если задано имя несуществующего окна (фрейма), оно будет создано, то есть, по существу, ссылка откроется в новом окне с указанным именем.
С помощью тэга <base> (пишется в головной части <head>) можно задать базовое значение target и базовый URL (для определения относительных адресов).
<base target="_blank" href="URL">
URL – Universal Resource Locator – универсальный способ адресации ресурсов. Придумал его Тим Бернерс-Ли. Схема такова: сначала записывается условное название протокола, например, http, затем символы "://" и адрес сервера, на котором находится файл, после – через слеш "/" – место расположение файла на сервере и название самого файла.
В общем, почти то же самое, что и задание пути к файлу или папке в операционной системе.
title – всплывающая подсказка, которая появится при наведении курсора на ссылку. Этот параметр можно вставить почти во все тэги.
Цвет ссылок указывается в тэге <body>. Если этого не сделать, то браузер применит для них цвета по умолчанию. А теперь представьте, что цвет фона документа совпадет с цветом ссылки. Нехорошо. Прописываем цвета:
<body link="colour 1" alink="colour 2" vlink="colour 3">
link – цвет ссылки.
alink – цвет активной (active) ссылки (в момент нажатия).
vlink – цвет посещенной (visited) ссылки.
Цвет ссылок лучше указывать в любом случае, потому что черт знает, какие цвета установлены у пользователя по умолчанию.
К сожалению, на Самиздате мы не сможем указать цвет ссылок. Тэг <body> выбрасывается. Помните? Мы не сможем указать цвет и поведение ссылок в стилях (CSS). Это тоже пресекается. Но если очень хочется изменить цвет, поступаем таким образом. После открывающего тега <a> пишем <font color="">. Именно внутри! Обрамляя тэгом <font> текст ссылки. Естественно, это неудобно, ведь придется прописывать цвет для каждой ссылки. Сплошные издержки.
Пощелкайте по этим ссылкам, посмотрите, что получится:
<a href="http://www.rusf.ru" target="_blank" title="Сайт Русской Фантастики"> ссылка </a>
<a href="ftp://ServerName/DirectoryName/FileName"> скачать файл </a>
<a href="mailto:ivan77ivann@mail.ru">Напишите Ивану Ивановичу </a>
<a href="mailto:vasia_pupkin@yandex.ru?subject=Хай, Вася&body=Вот, пишу тебе...">Напишите Васе Пупкину </a>
<a href="file:/C:/Doc/1.txt"> файл 1.txt </a>
<a href="http://www.rusf.ru" target="_blank"><font color="#00FF00"> Rusf.ru, зеленая ссылка <font></a>
Запомните раз и навсегда: ссылки не могут вкладываться друг в друга.
Ссылки бывают абсолютными и относительными. В абсолютных ссылках путь прописан жестко. Посмотрите на пример, расположенный выше. Документы с такими ссылками могут находиться у вас на "винте", у вашего друга, где-нибудь в интернете, при этом вы всегда сможете попасть в место, заданное ссылкой, естественно, пока данный ресурс существует. Если же ресурс благополучно почил, то будет вам "ошибка 404", либо "невозможно отобразить страницу". Относительные ссылки зависят от конкретного местоположения. Объясняю.
Допустим, имеется html-файл 1.htm, который расположен на диске С в папке primer.
C:primer1.htm
| Предыдущая глава |
↓ Содержание ↓
↑ Свернуть ↑
| Следующая глава |
