|
↓ Содержание ↓
↑ Свернуть ↑
|
Артем Белоглазов
Учебник
HTML и Самиздат
(каждый писатель желает стать издателем)
Мой учебник ни в коей мере не претендует на полноту, всеобъемлемость и абсолютную истину, но некоторые аспекты рассмотрены здесь весьма подробно.
Лирическое отступление.
На написание сего учебника меня подвиг неряшливый, неаккуратный, некрасивый вид многих авторских разделов. Оно, конечно, совершенно не мое дело, но встречают-то по одежке! Поэтому – ряд советов и замечаний, вы вправе им следовать или не следовать. Ознакомиться, впрочем, стоит. Для тех же, кто, как и я сам когда-то, всерьез заинтересуется HTML, будут даны ссылки на другие учебники и полезные ресурсы.
Если у вас совершенно нет времени на изучение, а хочется, чтоб "было красиво" – обратите внимание на статью "HTML и Самиздат (light version)". В ней даны примеры и шаблоны, сказано – как, но не объясняется почему. Просто делайте, и всё будет ОК.
Конец лирического отступления.
Учебник может совершенно свободно распространяться, но только "as is" ("как есть"). Условия.
В принципе, я не хотел делить учебник на разделы, но пришлось. Поэтому читать лучше по порядку, хотя, если есть оглавление, то почему бы им не воспользоваться? Вы сможете легко перейти к любому интересующему вас тэгу.
Я предполагаю, что в процессе изучения вы будете самостоятельно писать код html-документа, опираясь на полученные знания. Для этого вам будут нужны:
прямые руки;
текстовый редактор, например, блокнот (но лично я рекомендую многофункциональный Notepad++, русский интерфейс в наличии);
браузер. Вы можете одновременно открыть файл и в блокноте, и в браузере. Внесли изменения в код – сохранились, а в браузере дали команду "обновить" (F5).
Естественно, в дальнейшем вы будете пользоваться специализированными HTML-редакторами, но сначала – ручками (непременно и обязательно), чтоб прочувствовали.
Совет: визуальные редакторы HTML – это не наш метод, если, конечно, вы не полный чайник, и вам абсолютно неинтересно, как оно всё устроено и работает. Будет быстро, топорно, шаблонно и намусорено (в смысле, мусора в коде много). Вот так.
Гораздо лучше пользоваться специализированными редакторами, по сути своей похожими на интерактивные среды программирования (Delphi, Visual Basic). Таким образом, вы получите полный контроль над кодом и понимание, что же вы собственно делаете.
Оглавление
html и все, все, все
тэги и их параметры
структура html-документа
<body>, параметры тэга
комментарии
<br>, переносим строки
<p>, тэг абзаца
проблема красной строки
выделяем слова – <b>, <i>, <u>, <s>, <tt>, <sup>, <sub>
<hr>, горизонтальная линия
<font>, шрифт, и как с ним бороться
face, гарнитура шрифта
size, все о размере
<big> и <small>, нет, они здесь не случайно
color, раскрась сам
<div>, выравнивание текста
<Hn>, заголовки
<blockquote>, цитаты
<pre>, предварительно отформатированный текст
 , неразрывный пробел и другие спецсимволы
<nobr> и <wbr>, запретим браузеру переносить наш текст
<ul>, <ol>, <li>, списки по списку
<a>, ссылки (а вас куда послали? :-)
<img>, вставляем рисунки
картинка-ссылка, карта ссылок
<table>, <tr>, <td>, таблицы
<marquee>, бегущая строка
ссылки на полезные ресурсы и условия распространения
HTML и все, все, все
Итак, HTML – это язык разметки гипертекста (HyperText Markup Language). Многие сайты и странички в инете написаны именно на нем. Первая версия HTML была разработана Тимом Бернерсом-Ли, работавшем в Европейской лаборатории физики элементарных частиц. Естественно, прогресс не стоит на месте, и на сегодняшний день версия (спецификация) HTML имеет номер 4.01. Ознакомиться с текущей спецификацией можно на сервере организации W3C.
В принципе, html-файл является обычным текстовым файлом, но (внимание!) кроме, собственно, текста он содержит html-тэги (tags), невидимый в браузере код, который и определяет, как будет выглядеть ваш документ. Этот файл имеет расширение .htm или .html, существуют, конечно, и другие расширения, но нас с вами они не касаются. Ну, скажем, в Самиздате ваше творение будет называться так: YourTextName.shtml. Потому что оно будет содержать в себе директивы SSI, но, как я уже говорил, все это наc не касается, потому что выходит за рамки данной статьи. Начнем лучше знакомство с тэгами.
[к оглавлению]
Тэги и их параметры
Тэг (команда языка HTML) начинается с символа "<" (левая угловая скобка или знак "меньше") и заканчиваются символом ">" (правая угловая скобка или знак "больше").
Например: <br>, <hr>.
Тэги бывают открывающими и закрывающими. Закрывающий тэг отличается от стартового тем, что содержит прямой слеш внутри угловых скобок.
Вот так: <b> текст </b>.
Некоторые тэги (<br>, <hr>) не требуют закрывающего тэга. Большинство тэгов могут содержать дополнительные параметры, их может быть довольно много. Эти параметры располагаются в открывающей части тэга. И только там. Понятно? Смотрим:
<font fасе="Arial" size="4" color="#126641"> текст </font>
Что видим? Тэг <font> (шрифт) и его параметры – face, size, color (вид шрифта, размер, цвет). После каждого параметра ставится знак равно и пишется значение параметра в кавычках (или апострофах). Перед и после знака равно можно поставить пробел, кому как удобней. Если значением параметра является число или одно слово, то кавычки (апострофы) можно опускать. Если же в значении параметра указываются некоторые символы или оно состоит из более чем одного слова, то кавычки обязательны. Если вы сомневаетесь, писать кавычки или нет, лучше уж напишите. Кавычки ясно и недвусмысленно указывают браузеру начало и конец значения этого самого параметра. Поясняю. Если бы мы написали так:
<font face=Arial> текст </font>
То браузер показал бы наш текст шрифтом Arial. Все ОК. А если я хочу шрифт Comic Sans MS? Пишем:
<font face=Comic Sans MS> текст </font>
Неправильно. Ошибка. Браузер покажет этот текст шрифтом по умолчанию. Надо так:
<font fасе="Comic Sans MS"> текст </font>
К сожалению, для Самиздата и этот пример не является верным. Поэтому внимательно прочитайте главу, посвященную тэгу <font>.
Если значение состоит из более чем одного слова или имеет в названии некоторые спецсимволы, обязательно берем его в кавычки.
Порядок следования параметров внутри тэга совершенно не важен, главное, чтобы они отделялись друг от друга пробелами. Есть мнение, что тэги надо писать ПРОПИСНЫМИ буквами, а параметры строчными, дабы выделить скелет html-кода. Но браузеру это абсолютно безразлично, можете писать хоть вОт ТаК.
Если какой-то тэг или параметр написан неправильно, браузер его просто проигнорирует. Это вам, скажем, не Delphi, где компилятор дурным голосом будет орать об ошибке.
При открытии странички браузер интерпретирует html-код и формирует на экране документ, который видит пользователь. Отображение html-кода производится последовательно: слева направо и сверху вниз.
Размер документа зависит от размера окна браузера, если только не применен так называемый жесткий (каркасный) дизайн, который строится в основном на таблицах с привязкой всех величин к пиксельному размеру экрана. Однако имейте в виду: при увеличении разрешения экрана размер пикселя уменьшается, при уменьшении разрешения – увеличивается. Таким образом, вы рискуете тем, что:
1) изображение у пользователя может быть крохотным, прижатым к левой части экрана, а если еще и зафиксировать с помощью CSS размер шрифта, то текст вообще придется разглядывать в лупу;
2) изображение будет слишком крупным, включится полоса прокрутки, что тоже плохо.
Если дизайн не подгоняется под определенные размеры, то в соответствии с умолчаниями браузер отформатирует страницу так, чтобы все элементы html-документа занимали экран целиком. Такой дизайн называют "резиновым", т.е. растягивающимся. Лучше применять "резиновый" дизайн, что не исключает жесткой фиксации по размерам некоторых элементов. Например, каких-то таблиц или их ячеек.
Естественно, что один и тот же html-документ по-разному отображается на разных компьютерах, и на одном компьютере при различных его настройках – тоже. Зато HTML не зависит ни от операционной системы, ни от аппаратной части конкретного компьютера, и его можно просмотреть на любой машине, если там установлен браузер. Разумеется, различные браузеры могут чуточку неодинаково отображать html-документ, во-первых, из-за того, что каждый интерпретирует и отображает html-код в соответствии с какими-то своими принципами. Да, есть определенные стандарты и т.п., но так как механизмы различны, то достигается всё это разными способами, поэтому погрешности неизбежны. Во-вторых, у браузеров имеются так называемые настройки по умолчанию, т.е. каким будет цвет у страницы, если это не указано, каким будет цвет шрифта и т.д.
Разработчики браузеров берут за основу либо движок IE, либо NN. Создавая html-документ, постарайтесь написать его код так, чтобы документ по возможности одинаково выглядел и там и там.
[к оглавлению]
Структура html-документа
Отложим пока тэги с параметрами в сторону и пробежимся вкратце по структуре html-документа. Он делится на "голову" и "тело". Смотрим:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> ... </title>
</head>
<body>
</body>
</html>
Первая строка – декларация <!DOCTYPE>. Она обозначает тип документа и его формат, что облегчает распознание этого файла другими программами. Также указывается версия стандарта HTML, например, 4.0 и язык документа, можно написать RU.
<html>
Начало html-документа.
<head>
Начало головы html-документа. В головной части содержится техническая информация о документе. Самое место для всяких мета-тэгов, стилей, скриптов и т.д.
<title>
</title>
Заголовок html-документа, будет отображен в заголовке окна браузера.
</head>
Конец головы html-документа.
<body>
Начало тела html-документа. В теле размещается собственно контент.
</body>
Конец тела html-документа.
</html>
Конец html-документа.
В секции <head> можно (и даже нужно!) прописать вот такой мета-тэг:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
Он определяет кодировку документа. Эта кодировка (windows-1251) уже практически вытеснила КОИ-8. Но если документ написан в кодировке КОИ-8, то естественно надо указать ее (charset=koi8-r).
Вообще-то браузер определяет кодировку самостоятельно, но зачастую – неправильно, и тогда текст отображается кракозябрами. Поэтому браузеру нужно помочь.
Если вы хотите вставить в документ стили (CSS), то поступаем следующим образом:
<style type="text/css">
<! —
описание стилей
— >
</style>
В принципе, нигде прямо не говорится, что стили надо прописывать в секции <head>, но так уж сложилось. На всякий случай стили взяты в комментарий (<! — — >), вдруг у пользователя древний-предревний браузер? Что такое стили, он знать не знает, возьмет и отобразит текст описания на страничке. А лучше, не вставлять стили в документ, а хранить их в отдельном файле (*.css). Тогда на этот файл надо сделать ссылку (вот ее указывают именно в блоке <head>). Таким образом, один-единственный файл стилей будет определять внешний вид всех страничек сайта.
<link rel="stylesheet" type="text/css" href="URL">
URL – путь к файлу. О том, как задаются ссылки вы, узнаете дальше.
Ну как, интересно? Только все это нам не понадобится. Потому что при заливке html-файла на сервер Самиздата тэги <html>, <head>, <body> и описание стилей будут безжалостно выкинуты. Жаль, конечно, ведь у тэга <body> столько интересных параметров. Зачем же я вам тогда голову морочил? Это, понимаете ли, азы, основа. Ее надо знать. Так что пишите свои html-документы грамотно. Пригодится.
[к оглавлению]
<body>, параметры тэга
Ну и для общего развития рассмотрим параметры тэга <body>. Таковых имеется предостаточно, и половину из них в этом самом тэге желательно бы прописать.
bgcolor – задает цвет фона документа. О цвете мы поговорим позже, когда будем изучать тэг <font>.
text – задает цвет текста документа. Рекомендуется всегда указывать эти цвета, потому что, если этого не сделать, браузер применит цвета в соответствии со своими настройками. Что из этого получится? Зачастую ничего хорошего.
background – определяет фоновый рисунок для документа. Его значением является URL, по которому находится рисунок. Этот рисунок будет многократно размножен по вертикали и горизонтали. Если вы задаете background, то необходимо задать максимально близкий по цвету bgcolor (в том случае, если у рисунка нет областей прозрачности). Зачем? Затем, что графика грузится дольше, чем текст. Читал, допустим, пользователь, этот самый текст на белом экране, а тут картинка пришла фоновая зеленого, например, цвета. Приятно? Про картинки вы тоже все узнаете, в свое время.
link, alink, vlink – определяют цвет ссылок на странице. Подробности в соответствующей теме.
topmargin, leftmargin, rightmargin, bottommargin – определяют ширину полей документа в пикселях (верхнее, левое, правое, нижнее) для браузеров на движке IE. Вы можете указать только верхнее и левое поле, тогда нижнее и правое примут такие же значения. По умолчанию поля у документа есть (ма-а-ленькие такие).
marginheight, marginwidth – определяют ширину полей документа в пикселях (верхнее / нижнее, левое / правое) для браузеров на движке NN. Если уж будете задавать ширину полей, то пропишите их и для IE, и для NN.
[к оглавлению]
Комментарии
Да, вот еще что – HTML дает возможность вставить в код комментарии. Они могут находиться в любом месте документа и браузером, естественно, не отображаются. Синтаксис:
<! — Комментарий — >
Вряд ли они вам понадобятся, так, на всякий случай. Вдруг что-то потребуется закомментировать, а вы не знаете как!
Единственно возможное их применение – во время отладки убрать часть кода, закомментировав ее. Теперь вернемся к нашим баранам, то бишь тэгам.
[к оглавлению]
<br>, переносим строки
Возьмите какой-нибудь текстовый файл, измените расширение на .htm, откройте в браузере. Плохо, да? Весь текст написан слитно. Где мои любимые абзацы?!
Решением проблемы станет тэг <br>. Он осуществляет перевод строки. Пример кода:
Первая строка <br> Вторая строка <br> Третья строка
Браузер покажет:
Первая строка
Вторая строка
Третья строка
Как вы заметили, завершающего тэга не требуется. У тэга <br> есть параметр clear, но нам он пока не нужен.
Можно еще воспользоваться тэгом абзаца <p> ... </p>, но лучше не стоит. Сейчас увидите почему. Пример кода:
<p> Первая строка <p> Вторая строка <p> Третья строка
Здесь не проставлен парный тэг </p> – он просто-напросто игнорируется браузером, можете его не писать. Браузер покажет:
Первая строка
Вторая строка
Третья строка
Нормально? Мне кажется, нет. Откройте любую книжку, посмотрите, есть между абзацами отступ? Правда, можно добиться "адекватного поведения" от тэга <p>, используя стили (CSS), но нам это не светит. По крайней мере, здесь, на Самиздате, будете делать свой сайт – тогда пожалуйста. Между прочим, на Западе абзацы как раз отделяют друг от друга пустыми строками – для них это "нормально". Для нас – нет, мы пользуемся красной строкой.
Действие тэга <p> простирается до следующего текстового блока (<br>, <hr>, <p>, <div>, <blockquote>, <ul>, <ol> и др.).
С помощью <p> можно делать отступ между главками в тексте. Один <p> равносилен <br><br>. Однако учтите, два <p> или десять, или сто отображаются браузером как один (завершающий тэг </p> значения не имеет). Поэтому, если нужен большой отступ, пользуемся многократным <br>.
[к оглавлению]
Проблема красной строки
Теперь снова откроем книжку и внимательно посмотрим. Ага, все абзацы начинаются с красной строки. Как это сделать? К сожалению, у "буржуев" красной строки нет, и в HTML ничего такого не предусмотрено, поэтому браузер использует не красную, а пустую строку для отделения абзацев друг от друга или от прочих элементов. Что ж, будем выкручиваться. (Между прочим, в CSS такой проблемы не существует, а отступ красной строки может быть даже минусовым, то есть превратиться в выступ.)
Лично меня устраивает такой вариант: <br><dd>. Эта связка будет работать только в браузерах IE и Mozilla (и им подобных), а в Opera и Google Chrome не будет! Заметим, что тэг <dd> использован не по назначению (т.к. используется он в списке определений, вот тогда-то Opera его "понимает"), ну и что? – главное результат.
Есть и другие решения:
вставить несколько неразрывных пробелов ( )
вставить слово с цветом букв под цвет фона (но лучше так не делать)
вставить прозрачный рисунок в формате gif Каждый делает на свой лад. Смотрим пример кода красной строки:
<dd> В предпоследний день одолевает хандра. Наваливается черной тучей, опрокидывает на обе лопатки. Засасывает в пучину бездействия. <br><dd> Я даже пропускаю приход Сэма. <br><dd> Случайно замечаю, глянув в окно. Мне плохо. Тебе тоже?
Что покажет браузер:
В предпоследний день одолевает хандра. Наваливается черной тучей, опрокидывает на обе лопатки. Засасывает в пучину бездействия.
Я даже пропускаю приход Сэма.
Случайно замечаю, глянув в окно. Мне плохо. Тебе тоже?
Мы воспользовались тэгом <dd> как табулятором, и с красной строкой все в порядке. Напоминаю, что это работает для браузеров IE, Mozilla и им подобных.
Почему на первой строчке нет <br>, а только <dd>? А зачем нам дополнительная пустая строка перед текстом? Если написать:
<dd><dd><dd> Мой дядя самых честных правил
То получится многократное смещение:
Мой дядя самых честных правил
Кстати, можно и не писать <br><dd>, без <br> тоже работает. Но я пишу, на всякий случай.
Повторяю еще раз: в браузерах Opera и Google Chrome тэг <dd> (если он использован не по назначению, т.е. не в списке определений) работать не будет!
Также замечу, что интерфейс СИ при переводе doc в html формирует красную строку из тэга <dd> и двух неразрывных пробелов ( ). Т.о. пользователи Opera видят ма-аленькую красную строку, а пользователи IE и Mozilla довольно большую. Я не добавляю неразрывные пробелы, т.к. это увеличивает размер текста. И еще потому, что я не принадлежу к поклонникам Opera. Не нравится она мне. Но если вы будете делать собственный сайт, позаботьтесь о том, чтобы страница выглядела одинаково при просмотре в разных браузерах.
В HTML-коде пробелов и переносов строк может быть сколько угодно, это никак не отразится на виде документа в браузере, разве что файл будет весить больше.
Для тех, кто в танке: хоть сто, хоть миллион пробелов, идущих подряд, браузер отобразит как один. Идущие подряд пустые строки браузер отобразит как один пробел.
[к оглавлению]
Выделяем слова – <b>, <i>, <u>, <s>, <tt>, <sup>, <sub>
Идем дальше. Научимся выделять слова.
<b>текст жирный</b>
текст жирный
<i>текст курсивный</i>
текст курсивный
<u>текст подчеркнутый</u>
текст подчеркнутый
<s>текст перечеркнутый</s>
текст перечеркнутый
<tt>текст моноширинный</tt>
текст моноширинный
<sup>верхний индекс</sup>
верхний индекс
<sub>нижний индекс</sub>
нижний индекс
А если мы хотим жирный курсивный подчеркнутый текст? Пожалуйста:
<b><i><u> жирный курсивный подчеркнутый </u></i></b>
Теги могут и пересекаться. Вот так:
<b> жирный <i>курсивный</i> <u><i>и еще</i> подчеркнутый</u></b>
жирный курсивный и еще подчеркнутый
При этом необходимо следить за вложенностью тэгов. Например, 6-й интернет-эксплорер скушает такую конструкцию:
<b><i><u> жирный курсивный подчеркнутый </b></i></u>
и не поперхнется, а другой браузер может заглючить.
Есть и другие тэги для выделения логического, то бишь смыслового, а мы использовали физическое. Но результат от их применения будет аналогичен вышеупомянутым тэгам или их сочетаниям. Поэтому рассматривать их мы не будем. Зачем нужна лишняя информация?
Особенность еще в том, что разные браузеры могут несколько по разному отображать логическое выделение. А я люблю ясность! Раз нужен курсив, значит, курсив, а не черт знает что. Поэтому лично я пользуюсь только физическим выделением.
Кстати, с помощью CSS можно вообще переопределить поведение тэгов. Скажем, пишем в коде: <i>однажды в студеную зимнюю пору</i>. Текст должен быть курсивным, а он, по нашему желанию может стать жирным!
[к оглавлению]
<hr>, горизонтальная линия
Рассмотрим еще один тэг, не требующий пары, – <hr>. Что он делает? Отчеркивает горизонтальную линию. У него есть такие параметры:
align – выравнивание, может принимать значения left, right и center. По умолчанию center.
width – ширина линии, может задаваться в % (относительная величина) и в пикселях (абсолютная величина). По умолчанию 100%.
size – толщина линии, задается в пикселях. По умолчанию 2 пикселя (для IE).
noshade – отмена объемности (без значений). По умолчанию линия объемна.
color – цвет линии, работает только в интернет-эксплорере (если задан цвет, то автоматически пропадает объемность). По умолчанию цвет такой же, как и цвет фона, рамка вокруг линии серая. Таким образом, написав <hr> без параметров, мы получим объемную линию шириной во все окно браузера, выровненную по центру, с толщиной в 2 пикселя.
Кстати, линия всегда выводится с новой строки. Если вслед за тэгом <hr> идет какой-либо текст, он тоже выводится с новой строки.
Вот несколько линий:
<hr size="10" width="50%" color="#FF0000">
<hr color="#02CA2A">
<hr align="left" size="5" width="150">
<hr align="right" size="5" width="80%" noshade>
Поэкспериментируйте на досуге. Авось пригодится. Как элемент дизайна, линия еще не совсем вымерла.
[к оглавлению]
<font>, шрифт, и как с ним бороться
Плавно переходим к тегу <font>, который позволит нам по всякому издеваться над шрифтом. Да, вот что – без параметров этот тэг абсолютно ничего не делает. А параметры такие:
face – гарнитура (вид) шрифта (Arial, Courier, Garamond и др.).
size – размер шрифта.
color – цвет шрифта. Параметр face, при заливке текста на Самиздат ведет себя довольно странно – может сработать, а может быть удален. Вообще.
В чем же дело? Произведя несложные опыты (кстати, благодарю за помощь Антона Столета), я установил, что СИ принимает изменение шрифта, если его название записано без кавычек.
Повторю еще раз: не нужно брать название шрифта в кавычки. Ну а если возьмете, то параметр face будет выкинут.
Но – таким образом вы никогда не сможете прописать, скажем, Book Antiqua, потому что в названии присутствует пробел, и кавычки обязательны. Да что там – даже Times New Roman не сможете, хотя, в принципе, он используется по умолчанию. И поэтому браузер при ошибочном значении параметра face все равно отобразит текст именно им. Во как.
Какие же шрифты допустимы на Самиздате? На основе проделанных опытов, привожу следующий список (конечно, он далеко не полный). В общем, пробуйте, думаю, любой шрифт с названием не более чем из одного слова подойдет.
Arial
Tahoma
Courier
Verdana
Impact
Univers
Georgia
Coronet
Symbol (Symbol, всякие греческие буквы и т.п.)
Garamond
Гарнитура – это набор начертаний символов одного шрифта. Может включать в себя прямое и курсивное начертание, либо только прямое или курсивное. Может отличаться по жирности букв, их ширине и кеглю (размеру).
Итак, задаем гарнитуру шрифта:
<font fасе="Arial"> текст </font>
Теперь браузер выведет наш текст шрифтом Arial.
Внимание! Во всех примерах, где дан параметр fасе="...", само это слово написано как смесь латинских и русских букв, иначе СИ удалил бы его из текста статьи. И если вы скопируете этот код в html-документ непосредственно из окна браузера, то, конечно же, работать эта конструкция не будет. Все остальные примеры даны правильно.
Можно определить не один вид шрифта, а несколько:
<font fасе="Arial, Helvetica, sans-serif"> текст </font>
Зачем? Если браузер не найдет на машине пользователя первый из указанных шрифтов, то будет искать второй, затем – третий. В случае неудачи будет использован шрифт по умолчанию – Times New Roman (если только пользователь эти умолчания не изменил!). Шрифты в примере заданы не абы как. Они похожи. Третьим вообще указан не шрифт, а родовой признак – sans-serif (рубленый шрифт). Существует еще два родовых признака: serif (шрифт с засечками) и monospace (моноширинный). Указывая родовой признак, можно быть уверенным, браузер что-нибудь да найдет взамен отсутствующего шрифта.
Однако может случиться такая неприятность – вы задали какой-то шрифт, и у пользователя он тоже есть, но нет никакой гарантии, что шрифт содержит в своем наборе русские буквы. У вас-то, все хорошо, а у кого-то – кракозябры. Причем, название шрифта одинаково.
Шрифты с засечками (серифные) – Times New Roman, Garamond, Georgia и др. используются обычно в основном тексте. Эти засечки-завитушки как бы связывают слова, помогая читать текст.
Рубленые шрифты – Arial, Tahoma, Verdana и др. имеют ровные края букв, их, как правило, употребляют для заголовков, сносок, подписей под таблицами и рисунками.
Моноширинные шрифты – Courier, CourierThai и др. имитируют литеры печатных машинок и матричных принтеров. Ширина букв в моноширинных шрифтах всегда одинакова, тем они и отличаются от пропорциональных шрифтов, где каждая буква занимает столько места, сколько ей требуется.
Размер шрифта в HTML совсем не то, что кегль (размер) шрифта в текстовом редакторе. Он зависит от базового размера шрифта, установленного в браузере, или явно указанного базового размера в html-документе. Сам же базовый размер зависит, во-первых, от разрешения экрана, во-вторых, от диагонального размера экрана монитора.
Размер шрифта задается так:
<font size="2"> текст </font>
текст
или вот так:
<font size="+2"> текст </font>
текст
<font size="-2"> текст </font>
текст
Разница существенная.
В первом случае мы жестко задали этот самый размер. Кстати, возможные значения – от 1 до 7. Больше цифра – больше размер. Неверные значения (не являющиеся числом) браузер проигнорирует, и шрифт у нас будет стандартного размера, который равен 3. Если мы напишем size="20", то браузер покажет этот текст так, будто size="7", ну и, соответственно, size="-15" превратится в size="1".
Во втором случае, мы задаем размер шрифта относительно базового размера. Этот самый базовый размер = 3. Впрочем, можно легко его изменить. Вот так:
<basefont size="5">
Тэг <basefont> прописывается сразу после <body>. Так же легко можно задать базовый вид шрифта и его цвет. Но не все браузеры это понимают.
<basefont size="5" color="#A972E2" fасе="Courier">
Вот небольшая табличка соответствия абсолютных и относительных размеров, при условии, что базовый размер шрифта = 3, как и бывает по умолчанию.
1
-2
2
-1
3
+0
4
+1
5
+2
6
+3
7
+4
Обратите внимание на третью строку, там написано: +0. Можно написать: -0. Значение параметра size="0" будет воспринято так – size="1". Надеюсь, все понятно? Естественно, при относительном размере size="+0" шрифт не изменится.
На практике относительный размер очень удобен. Допустим, писали мы, писали – и вдруг потребовалось увеличить (уменьшить) шрифт. Не просто выделить участок текста шрифтом побольше (поменьше), а именно относительно того размера, который был раньше.
В случае увеличения (уменьшения) на ±1, гораздо легче и быстрей (и правильней!) будет воспользоваться тегами <big> и <small>. Как они работают?
обычный текст <big>текст чуть больше</big> обычный текст
обычный текст текст чуть больше обычный текст
обычный текст <small>текст чуть меньше</small> обычный текст
обычный текст текст чуть меньше обычный текст
Если же вы хотите поменять в выделенном фрагменте не только размер, но и цвет с начертанием, то смело пользуйтесь тэгом <font>.
Поговорим о цвете. Задается он шестнадцатеричным значением в RGB-системе (Red Green Blue). Причем, сначала ставится знак "решетка".
color="#00AAFF"
Каждая пара цифр – это интенсивность соответствующего цвета (красного, зеленого и синего). Также допустим укороченный вариант записи:
color="#1В9"
Браузер поймет это так: color="#11BB99". Можно некоторые цвета (они входят в таблицу базовых цветов) записывать словами. Например: red, yellow, green и пр. Всего базовых цветов шестнадцать. А также множество их производных, которые тоже имеют мнемоническое обозначение. В основном их названия образуются путем присоединения слов dark или light к названию основного цвета. Однако не все основные цвета имеют те или иные производные. Но лучше всего цвет задавать циферками. Так как разные браузеры немножко по разному понимают, что такое "red" и что такое "green", и немножко по разному отображают.
Таблица базовых цветов
Цвет
Мнемообозначение
Шестнадцатеричный
код
Цвет
Мнемообозначение
Шестнадцатеричный
код
Black
#000000
Navy
#00007F
Gray
#7F7F7F
Blue
#0000FF
Silver
#C0C0C0
Aqua
#00FFFF
White
#FFFFFF
Green
#007F00
Red
#FF0000
Lime
#00FF00
Fuchsia
#FF00FF
Teal
#007F7F
Maroon
#7F0000
Yellow
#FFFF00
Purple
#7F007F
Olive
#7F7F00
Дополнительные цвета
Цвет
Мнемообозначение
Шестнадцатеричный
код
Цвет
Мнемообозначение
Шестнадцатеричный
код
DarkGreen
#006400
LightGreen
#90EE90
DarkRed
#8B0000
LightYellow
#FFFFE0
DarkBlue
#00008B
LightBlue
#ADD8E6
DarkViolet
#9400D3
Violet
#EE82EE
DarkTurquoise
#00CED1
Turquoise
#40E0D0
DarkOrange
#FF8C00
Orange
#FFA500
Gold
#FFD700
Beige
#F5F5DC
Brown
#A52A2A
Braun
#B0A000
Crimson
#DC143C
SkyBlue
#87CEEB
Cream
#C0EA00
BlueGray
#B0E0E0
Различные оттенки серого
Цвет
Мнемообозначение
Шестнадцатеричный
код
Цвет
Мнемообозначение
Шестнадцатеричный
код
#333333
#444444
#555555
#666666
#777777
#888888
#999999
#AAAAAA
#BBBBBB
#CCCCCC
#DDDDDD
#EEEEEE
Возможен еще один способ задания цвета, в процентном соотношении его составляющих. Вот так:
color="20%50%30%"
Красный – 20%, зеленый – 50%, синий – 30%. Этим способом пользуются тайные извращенцы и мазохисты. Дико неудобно, непонятно, непрактично, плюс никогда не представляешь, что же получится.
Существует такое понятие, как безопасные цвета, то есть цвета, отображаемые даже в 256-цветном режиме работы видеокарты. Их 216.
Вот ссылки на полные таблицы безопасных цветов (таблицы абсолютно одинаковые, а разные ссылки даны на всякий случай, вдруг ресурс будет в дауне или вообще прекратит существование):
http://foodcomp.narod.ru/avia.files/HTML.htm
http://scriptic.narod.ru/html/color2.htm
http://choozone.fromru.com/graph/for_web/shtuks/shtuka_2.htm
А вот ссылка на zip-архив (85 Kb), это таблица допустимых цветов фона и шрифта с наложением друг на друга. Очень наглядно.
http://igal-igal.narod.ru/Colors/Colors.zip
Пример изменения цвета шрифта:
<font color="#066298"> наш текст </font>
наш текст
Пример изменения фона документа будет дан в разделе таблицы.
Совет: не разукрашивайте свою страничку подобно радуге. Нескольких цветов или оттенков одного цвета вполне достаточно. Цвета должны гармонировать, либо контрастировать друг с другом. Вариантов множество, но очень многие дают неудобоваримые результаты.
[к оглавлению]
<div>, выравнивание текста
Закончим разговор о цветах и шрифтах. Займемся выравниваем текста. Откройте книжку в третий раз. Какое там выравнивание? Правильно, по всей ширине страницы. А если нет, то либо издатель учудил (типа нарочно), либо наборщик в типографии вусмерть напился.
Выравнивать будем с помощью тэга <div>, который отделяет один блок текста от другого. Сам по себе он ничего не делает, если, конечно, не использовать стили (CSS). Параметр у него один – align. Тэг <hr> помните? Все то же самое.
Align может принимать значения left, right, center и justify. Стоп, что еще за justify? Вот то самое выравнивание по ширине и есть. Старые версии браузеров не понимают значения justify. Но кто ими пользуется, старыми версиями? В крайнем случае, пользователь увидит текст, выровненный по левому краю.
Текст, обрамленный тэгом <div> ... </div>, браузер выводит с новой строки. Элемент, следующий за этим блоком, также выводится с новой строки.
Вот еще что, эта конструкция – <center> ... </center> работает подобно <div align="center"> ... </div>.
Кстати, с помощью тэга абзаца <p> можно выравнивать текст аналогичным образом. О недостатках этого тэга мы уже говорили. По умолчанию, абзац, как и текстовый блок, выравнивается по левому краю.
Как же выровнять текст на практике? Заключаем его в тэг <div> ... </div>. Целиком. Вообще весь. Все! А если делать это с помощью тэга <p>, то придется задавать выравнивание для каждого абзаца, потому что действие тэга <p> может быть прервано некоторыми другими блочными тэгами.
<Div>, <p>, <br>, <hr> являются блочными элементами. Рассмотрим и другие текстовые блоки.
[к оглавлению]
<Hn>, заголовки
Делятся на шесть уровней (<H1> ... <H6>).
<H1> – заголовок первого уровня (самый большой, соответствует размеру шрифта равного шести).
<H6> – заголовок шестого уровня (самый маленький, соответствует размеру шрифта равного единице).
Браузер выводит заголовки жирным шрифтом, оставляя сверху и снизу заголовка некоторый отступ. Единственный параметр тэга <Hn> – align (выравнивание). Может принимать значения: left, right, center и justify. По умолчанию, align="left".
Не совсем понимаю, для чего заголовку нужно выравнивание по всей ширине окна (justify). Если текст мал (а заголовки большими и не бывают), он прижмется к левому краю, как и при align="left". И только если заголовок будет настолько длинен, что перехлестнет на вторую строку, вы увидите это выравнивание по ширине.
Никогда не используйте тэг <Hn> просто для выделения чего-либо на странице. Его назначение – структурирование документа, выделение смысловых уровней и подуровней. Кстати, этот тэг любят поисковые машины. <H1> О-о!!! Пример:
<H4>Заголовок четвертого уровня</H4>
Заголовок четвертого уровня
<H5 align="center">Заголовок пятого уровня</H5>
Заголовок пятого уровня
[к оглавлению]
<blockquote>, цитаты
Этим тэгом оформляют большие цитаты. Работает так же как тэг абзаца <p>, плюс добавляет небольшой отступ слева и справа. Сверху и снизу тоже имеется некоторый отступ. Подобно абзацу всегда выводится с новой строки. Элемент, следующий за <blockquote>, выводится с новой строки. Использовать не по назначению не возбраняется. С его помощью элементарно делаются поля в документе. Пример:
<blockquote> Вокруг лес – березки, сосенки, заросли крапивы возле рассыпавшейся поленицы. Дятел с красным встопорщенным хохолком долбит трухлявое дерево: ищет короедов. Частый, дробный перестук. Листья трепещут на ветру; колышутся, пригибаясь к земле, травинки. Тени ложатся на хвойный ковер ажурными узорами. Солнышко в небе пухлое, желтое. Летнее. Этакий ароматный блинчик на сковородке. Шкворчит, пышет жаром, кокетливо прячется в мягкий пух облаков. Воздух свежий, душистый: пахнет смолой и нагретой почвой. Ку-ку – раздается в глубине леса. Ку-ку. </blockquote>
Что получится: Вокруг лес – березки, сосенки, заросли крапивы возле рассыпавшейся поленицы. Дятел с красным встопорщенным хохолком долбит трухлявое дерево: ищет короедов. Частый, дробный перестук. Листья трепещут на ветру; колышутся, пригибаясь к земле, травинки. Тени ложатся на хвойный ковер ажурными узорами. Солнышко в небе пухлое, желтое. Летнее. Этакий ароматный блинчик на сковородке. Шкворчит, пышет жаром, кокетливо прячется в мягкий пух облаков. Воздух свежий, душистый: пахнет смолой и нагретой почвой. Ку-ку – раздается в глубине леса. Ку-ку.
[к оглавлению]
<pre>, предварительно отформатированный текст
Тэг преформатирования. Берем какой-нибудь заранее отформатированный текст (со всякими там пробелами, табуляцией и переводами строк) и вставляем его в тег <pre>. Что видим? Браузер выводит текст таким, какой он есть, но:
1) моноширинным шрифтом. Что, впрочем, легко исправить, написав после <pre>: <font fасе="...">. Только, пожалуйста, помните о том, что на Самиздате не нужно брать название шрифта в кавычки. Если возьмете, параметр face будет выкинут. Также вы не сможете задать шрифт, название которого состоит из более чем одного слова. Так как по правилам HTML кавычки здесь обязательны. Впрочем, один шрифт вы сможете задать наверняка. Это Times New Roman, он используется по умолчанию (если дефолтные настройки не были изменены пользователем). Естественно браузер посчитает параметр face со значением Times New Roman (без кавычек) за ошибку. Но – в таком случае будет показан шрифт по умолчанию. Тот же Times. Вот такой извращенный способ.
2) текст будет жестко фиксирован по ширине. И если уменьшить окно браузера, то появится полоса прокрутки, потому что текст не уместится.
Вряд ли стоит оформлять что-либо тэгом <pre>, кроме стихов. Пример:
<pre>
А космос смеется
оранжевым солнцем
нам прямо в лицо.
</pre>
Текст, будет выведен с новой строки. Элемент, следующий за <pre>, выводится с новой строки. Сверху и снизу, как и в случае абзаца, имеется некоторый отступ.
Еще раз повторю: сколько бы не было пробелов в тексте, браузер отобразит лишь один. Сколько бы не было пустых строк, браузер их вообще проигнорирует, заменив одним пробелом. А заметит только в том случае, когда они включены в тэг <pre>.
[к оглавлению]
 , неразрывный пробел и другие спецсимволы
Что же делать, если позарез необходимо включить в текст несколько пробелов? Используйте неразрывный пробел – ( ).
Вот такой пример
Вот такой пример
Точка с запятой (;) ставится после знака неразрывного пробела с целью отделения его от следующего слова. Вот еще несколько символов, которые могут нам пригодится (на самом деле их о-очень много):
Название
Знак
Мнемоническое обозначение
Код
Амперсант
&
&
&
Знак "меньше"
<
<
<
Знак "больше"
>
>
>
Параграф
§
§
§
Знак копирайта
©
©
©
Знак градуса
°
°
°
Левая парная кавычка
"
«
«
Правая парная кавычка
"
»
»
Среднее тире
–
–
Длинное тире
—
—
Плюс-минус
±
±
±
Номер
№
№
Внимание! Все буквы, входящие в мнемообозначение спецсимвола должны быть маленькими. Большие буквы недопустимы.
Не для всех специальных знаков есть мнемоническое обозначение. И не во всех браузерах конкретное мнемообозначение будет работать. В таком случае, можно написать цифровой код – &#... Однако предпочтительнее пользоваться мнемоникой, в связи с различными языковыми кодировками, потому что цифровой код просто-напросто определяет место конкретного символа в кодовой таблице.
А сейчас прямо противоположный совет – на СИ необходимо использовать цифровые коды. Почему? Если вы редактируете свой текст с помощью кнопки "Textedit", то система сервера выдаст в окне редактирования не сами мнемообозначения, а те символы, которые они обозначают, и при сохранении заменит их на совершенно непонятные знаки. Коды сохраняются без изменений. Но я бы вообще не советовал пользоваться кнопкой "Textedit", т.к. СИ ненароком может еще что-нибудь поменять в тексте. Лучше перезалить отредактированное произведение поверх старого, тогда вы будете точно уверены, что текст в сети до единой буковки соответствует оригинальному тексту.
Внимание! Хотя знак "номер" (№) есть на клавиатуре и, соответственно, в кодировочной таблице, СИ коверкает его при заливке. Поэтому пользуйтесь цифровым кодом. Или можно сделать так: 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
В этой же папке есть еще два файла: 2.htm и 3.htm, а также папка pr2 с файлом 21.htm, и в ней еще папка pr3 с файлом 31.htm.
C:primer2.htm
C:primer3.htm
C:primerpr221.htm
C:primerpr2pr331.htm
Мы смотрим файл 1.htm
<a href="2.htm"> ссылка на 2.htm </a>
<a href=" pr2/21.htm "> ссылка на 21.htm </a>
<a href=" pr2/pr3/31.htm "> ссылка на 31.htm </a>
Обратите внимание на правый слеш. Пусть даже ваш браузер находит ссылки с левым слешем, но при размещении документа в интернете это выйдет боком. Потому что все серверы, как правило, работают под UNIX, а там применяется правый слеш.
Допустим, мы перешли по ссылке на 21.htm.
<a href="../3.htm"> ссылка на 3.htm </a>
<a href=" pr3/31.htm "> ссылка на 31.htm </a>
А затем оказались на 31.htm
<a href="../../3.htm"> ссылка на 3.htm </a>
<a href="../21.htm "> ссылка на 21.htm </a>
Вот так, все понятно? (Две точки означают родительскую директорию.) Теперь переместите папочку primer куда-нибудь в другое место, откройте в браузере файл 1.htm, все ссылки будут работать. А если бы мы прописывали ссылки как абсолютные, то ничего бы не получилось. Теперь возьмите файл 1.htm, выдерните из папки, положите еще куда-нибудь, откройте. Ссылки работать не будут, надеюсь, понятно, почему?
Возьмем абсолютную ссылку:
<a href="C:/photo/my/ja.jpg "> мое фото </a>
Она сработает, если на компе на диске С есть папка photo, а в ней папка my, в которой лежит файл ja.jpg.
Еще ссылки можно прописывать от корня. Вот так:
<a href="/photo/my/ja.jpg">
Допустим, у нас есть сайт, и в его корневой директории среди прочих папок есть папка photo, ну и так далее. Эта ссылка будет работать только на этом сайте, впрочем, если у другого сайта файловая структура идентична, то ссылка сработает и там.
[к оглавлению]
<img>, вставляем рисунки
Ну а сейчас займемся картинками. Чтоб, значит, красивее было. Какими же графическими форматами мы будем пользоваться? Популярные графические форматы интернета: gif и jpg. Вот ими и будем. Есть, правда, сравнительно молодой формат png, который не получил особого распространения из-за происков Microsoft. Но для начала – краткая информация.
Формат jpg – используется для фотографий (в принципе, он был специально разработан именно с такой целью), а также для рисунков с большой цветовой гаммой, где много плавных переходов. Позволяет выставлять качество рисунка (quality) при сжатии, причем само сжатие происходит с потерей качества. Таким образом, вес файла прямо пропорционален качеству картинки. Ничего страшного в этом нет, если у фотографии, содержащей до миллиона цветов, оставить тысяч десять-двадцать, то вряд ли вы это заметите.
Формат gif – используется для немногоцветных рисунков с отчетливыми границами и резкими переходами цвета, возьмем в качестве примера различные логотипы и надписи. Поддерживает 256 цветов, также позволяет задать один или несколько цветов прозрачными. Немаловажная особенность – gif может быть анимированным, то есть он просто состоит из нескольких обычных файлов, которые проигрываются в соответствии с программой, заложенной в самом gif'e. В больших gif'ах может применяться чересстрочная развертка, и когда браузер выводит картинку, то мы видим постепенное ее проявление (на маленькой скорости соединения). Таким образом, если у вас плохой канал, вы получите представление о всей картинке еще до ее полной загрузки. Чем меньше цветов используется в gif-файле, тем меньше он весит. Но – порог оптимизации равен двум в энной степени, поясняю, 32-х цветная картинка будет весить меньше, чем 64-х цветная, а 50-ти цветная – нет.
Для очень маленьких изображений лучше использовать формат gif, так как jpg для них не приспособлен. Например, прозрачный gif размером 1 х 1 пиксель весит 43 байта, а тот же пиксель в формате jpg – больше 1,5 Kb.
Картинки вставляются в документ с помощью тэга <img>. Закрывающий тэг не нужен.
Параметры:
src – задает URL картинки, является обязательным параметром.
alt – текст, который будет виден на месте картинки, если она почему-то не загрузилась, или если в браузере отключено изображение графики. При загруженной картинке этот текст будет появляться в виде подсказки при наведении курсора. Очень полезный параметр. Представьте, вы лазите по сети с отключенной графикой и видите вместо картинок одни слепые пятна, даже надписей нет. Кошмар! Надпись – дополнительная информация, если пользователь заинтересуется, то загрузит рисунок в два счета.
title – подсказка, появляющаяся при наведении курсора. Загружена картинка или нет – все равно появится. Если прописаны и title, и alt, то текст подсказки берется из title.
width и height – ширина и высота картинки в пикселях, либо в процентах от ширины окна браузера. Если размеры не совпадают с нормальными, то браузер произведет масштабирование. Рекомендуется всегда эти параметры прописывать, указывая реальные размеры, которые можно узнать в любом графическом редакторе или вьювере. Допустим, рисунок был увеличен, в таком случае он будет выглядеть некрасиво, обратный пример – рисунок был уменьшен. Зачем?! Картинка как весила энное количество килограмм, так и будет весить. Оно нам надо? Кому нужны "тяжелые" странички? Лучше обрежьте рисунок в графическом редакторе.
Если ширина и высота не заданы, то картинка выводится в естественных размерах. Если задан только один параметр, то картинка будет выведена пропорционально, то есть другой параметр как бы подстроится под заданный. При незаданных width и height, браузер построит на экране маленький стандартный прямоугольник. Учтите, текст грузится раньше, чем изображение, поэтому, когда придет картинка браузер будет вынужден полностью перерисовать экран, что не есть гут. Сидел пользователь, читал, вдруг – бац! страничка изменилась.
Рисунок можно исказить – сжать (растянуть) по высоте или ширине. Смысла особого в этом нет, если только рисунок не прозрачный gif, и мы таким образом строим дизайн странички.
Кстати, необязательно задавать размеры только в пикселях или только в процентах, можно, например, написать так: width="400" height="50%".
hspace и vspace – свободное пространство вокруг картинки, задается в пикселях. Hspace – слева и справа, vspace – сверху и снизу. По умолчанию равны нулю. Рекомендуется задавать, чтобы текст не прижимался вплотную к рисунку, это некрасиво.
border – рисует вокруг картинки рамку толщиной в n пикселей. По умолчанию равен нулю, и рамка не выводится.
align – выравнивание (по отношению к соседним элементам). Имеет следующие значения:
left – выравнивание по левому краю. Текст обтекает рисунок справа.
right – выравнивание по правому краю. Текст обтекает рисунок слева.
top, texttop – выравнивание по верхнему краю. Верхняя кромка рисунка выравнивается по верхней линии текстовой строки.
middle – выравнивание по центру (вертикальное). Центр рисунка выравнивается по базовой линии текстовой строки.
absmiddle – почти то же самое. Центр рисунка выравнивается по центру текстовой строки.
bottom, baseline – выравнивание по нижнему краю. Нижняя кромка рисунка выравнивается по базовой линии текстовой строки.
absbottom – почти то же самое. Нижняя кромка рисунка выравнивается по нижнему краю самого глубокого символа текстовой строки. По умолчанию align="bottom".
Если нужно завершить обтекание картинки текстом и начать вывод с новой строки, то делаем следующее. Помните тэг <br>? У него есть параметр clear, который может принимать следующие значения: left, right и all.
Допустим, рисунок выровнен по левому краю (align="left"). Чтобы завершить обтекание справа, пишем: <br clear="left">. Именно left, а не right. Ну и соответственно, если рисунок выровнен по правому краю, clear="right". All – завершить обтекание вообще (и слева, и справа).
Интерфейс Самиздата позволяет привязывать рисунки только после заливки файла. Таким образом, вам приходится потом редактировать текст, чтобы вставить картинку. Честно говоря, я никогда так не делаю. Я спокойненько пишу себе вызов рисунка уже при верстке статьи или рассказа. СИ хранит рисунки по такому адресу:
http://samlib.ru/img/ 1-я буква раздела / наименование раздела / наименование файла /
Для меня это выглядит так:
http://samlib.ru/img/b/beloglazow_a_i/file_ name/
Я знаю, как назову файл, знаю, какое имя будет у картинки. Поэтому я просто пишу, например, так:
<img src="http://samlib.ru/img/b/beloglazow_a_i/flower/wfl.jpg" width=97 height=149 border=0 alt="цветочек" title="Хочешь?">
Это рисунок к моему рассказу "Хочешь цветочек?", если кому интересно. А можно вообще завести себе склад рисунков – сделать файл, скрытый ото всех, и привязывать к нему картинки. Удобно. Ведь адрес будет одинаковым. Особенно, если эти рисунки не являются самостоятельными, а представляют собой элементы оформления. Скажем, background таблицы.
[к оглавлению]
Картинка-ссылка, карта ссылок
Картинка может быть ссылкой. Все просто: прописываем тэг <img> внутри тэга <a>.
<a href=" "><img src=" "></a>
Обратите внимание: если между тэгом <img> и закрывающим тэгом </a> будут пробелы или разрыв строки, то у ссылки в момент нажатия появится хвостик. Наберите этот код в текстовом редакторе, а затем просмотрите в браузере.
<a href=" "> <img src=" "> </a>
Вот такой хвост. Что же делать, если текст не помещается в видимых пределах экрана и без разрыва строки никак не обойтись?
Совет первый: пользуйтесь редакторами, которые переносят слова, не ставя признак конца строки. Например, Вордом, только не сохраняйте ваше творение как веб-страницу, ибо проклятый Ворд испоганит ваш код по самое не могу. Сохраняйте как .txt, потом ручками исправите расширение на .htm.
Совет второй: главное, чтобы не было пробелов и разрывов строки между ">" и "<", поэтому такой код вполне соответствует:
<a href=" "
><img src=" "
></a>
Если картинка является ссылкой, то браузер рисует вокруг нее рамку даже в том случае, когда параметр border не указан. Чтобы такого не случилось, надо явно прописать в тэге <img src=" " border="0">.
Часть рисунка тоже может быть ссылкой. Хоть сто частей, ведущих по ста разным адресам. Для этого рисунок необходимо разметить, а в тэг <img> вписать параметр usemap (подключить карту).
<img src=" " usemap="#map1">
Карта ссылок будет обрабатываться браузером на машине-клиенте, а карты, обрабатываемые сервером, подключаются заданием параметра ismap. Это так, для сведения, потому что там все с помощью скриптов делается.
Как мы видим, значение параметра usemap записывается аналогично ссылке-"якорю" на текущую страницу. Естественно, если вы используете больше двух карт в одном документе, их названия-идентификаторы должны быть уникальными. Разметка картинки на области-ссылки производится в тэге <map> ... </map>, который размещается в любом месте внутри тега <body> ... </body>.
<map name="map1">
<area shape="circle" cords="x,y,R" href=" " alt=" " title=" ">
<area shape="rect" cords="x,y,x,y" href=" " alt=" " title=" ">
<area shape="poly" cords="x,y,x,y,x,y..." href=" " alt=" " title=" ">
<area shape="default" nohref alt=" " title=" ">
</map>
Тэг <map> имеет параметр name, таким образом, карта относится к рисунку, у которого значение параметра usemap соответствует name.
Тэг <area> описывает области-ссылки, у него такие параметры:
shape – вид области. Значения:
circle – окружность.
rect – прямоугольник.
poly – многоугольник.
default – остальная область.
coords – координаты области в пикселях. За начало отсчета берется левый верхний угол картинки (0,0). Значения х отсчитываются в направлении правого верхнего угла, значения у – в направлении левого нижнего угла. Координаты разделяются запятыми.
Для окружности (circle) задаются три числа – координаты центра и радиус.
Для прямоугольника (rect) – две пары чисел, соответствующие координатам левого верхнего и правого нижнего угла.
Для многоугольника (poly) задаются пары точек (координаты вершин по порядку). Последняя точка автоматически замкнется на первую.
href – собственно ссылка.
nohref – указывает, что область не является ссылкой. Вот так можно вырезать дырки в других областях. Кстати, shape="default" nohref можно не писать, хотя... на всякий случай... Если будете делать дырки, то сначала укажите ее координаты, а уж потом область-ссылку, иначе ничего не получится. Почему так? Потому что области, описанные ранее, имеют преимущество перед областями, описание которых сделано позже. Пример:
<map name="m1">
<area shape="rect" coords="50,50,100,100" nohref title="нет ссылки" alt="нет ссылки">
<area shape="rect" coords="0,0,150,150" href="http://www.rusf.ru" title="Русская Фантастика" alt="Русская Фантастика">
</map>
alt – альтернативный текст для области.
title – подсказка, появляющаяся при наведении курсора на область.
Что-то не работает в одних браузерах, что-то – в других. Просто-напросто пишем и alt, и title одновременно.
[к оглавлению]
<table>, <tr>, <td>, таблицы
Ну вот мы и добрались до самого сложного – таблиц, которые практически незаменимы при построении дизайна страницы.
Таблица задается тэгом <table> ... </table>. Строки в таблице – тэгом <tr> ... </tr>, а ячейки внутри строк – <td> ... </td>.
Все элементы таблицы находятся внутри тэга <table> ... </table>.
Пример:
<table border="2">
<tr>
<th> Заголовок 1 </th>
<th> Заголовок 2 </th>
</tr>
<tr>
<td> 1 ячейка </td>
<td> 2 ячейка </td>
</tr>
<tr>
<td> 3 ячейка </td>
<td> 4 ячейка </td>
</tr>
<table>
Заголовок 1
Заголовок 2
1 ячейка
2 ячейка
3 ячейка
4 ячейка
Тэг <th> ... </th> определяет ячейку-заголовок. Отличается от <td> ... </td> тем, что текст в этой ячейке будет жирным и центрированным.
У таблицы есть куча параметров. Пока мы рассмотрим параметры тэга <table>:
border – определяет ширину границы для таблицы. Прописывается в тэге <table>. По умолчанию не задан, то есть границы не выводятся (border="0" – то же самое). Причем, если border отличен от нуля, то границы прорисовываются для всех ячеек. Кстати, используя стили (CSS), можно задать border и для ячеек или вообще убрать.
bordercolor – цвет border'a. По умолчанию серый. Если цвет не задан, то граница выводится как бы объемной. Такой эффект создается за счет того, что левая и верхняя граница светлее, чем нижняя и правая. Их тоже можно раскрасить.
bordercolorlight – цвет левой и верхней границы (только для IE).
bordercolordark – цвет нижней и правой границы (только для IE). Кстати, эти параметры повлияют и на цвет рамки вокруг ячеек. Тут все будет наоборот – левая и верхняя границы окрасятся в bordercolordark, а нижняя и правая – в bordercolorlight. Если border не задан или равен нулю, то естественно ничего раскрасить мы не сможем.
bgcolor – задает цвет фона для таблицы.
background – определяет фоновый рисунок для таблицы. Его значением является URL, по которому находится рисунок. Этот рисунок будет многократно размножен по вертикали и горизонтали.
align – выравнивание. Может принимать значения: left, center, right. По умолчанию выравнивание производится по левому краю. Когда align="left", текст обтекает таблицу справа, align="right", обтекание слева. Чтобы прервать обтекание текстом и начать его вывод под таблицей, достаточно написать <br clear="all">. Если align="center", обтекания не происходит, текст выводится над и под таблицей.
cellspacing – задает расстояние между ячейками таблицы в пикселях. По умолчанию равен двум (для IE). Если вы не хотите, чтобы вокруг каждой ячейки рисовалась рамка, задайте cellspacing="0", тогда таблица будет расчерчена одинарными линиями по горизонтали и вертикали.
cellpadding – задает отступ от границ ячейки в пикселях до элемента внутри нее. По умолчанию равен одному (для IE). Чтобы текст не прилегал слишком близко к границам ячейки (некрасиво ведь), задайте cellpadding побольше. Например, десять.
width и height – определяют ширину и высоту таблицы в пикселях, либо в процентах от ширины окна браузера. В принципе, браузер выводит таблицу, автоматически подгоняя размеры под ее содержимое, поэтому, если заданные ширина и высота меньше, чем требуется, то они будут проигнорированы. Таблица может иметь подпись-заголовок, она задается тэгом <caption> ... </caption>. Пишется сразу после тэга <table>. Имеет параметр align. По умолчанию заголовок расположен по центру над таблицей (align="top"). Рассмотрим другие варианты:
align="bottom" – заголовок расположен под таблицей по ее центру.
align="left" – заголовок расположен над таблицей слева.
align="right" – заголовок расположен над таблицей справа. Не знаю, как в других браузерах, а в 6-м IE возможно и такое:
valign="bottom" align="left" – заголовок расположен под таблицей слева.
valign="bottom" align="right" – заголовок расположен под таблицей справа. Браузер не будет выводить таблицу, пока не скачает все ее содержимое и не поймет, как оно там расположено. Как следствие, не надо делать слишком большие таблицы – раз, все рисунки внутри таблицы обязательно должны иметь параметры width и height – два.
Параметры тэга <tr>:
bordercolor – цвет border'a для всех ячеек в строке. По умолчанию такой же, как и у всей таблицы.
bordercolorlight – цвет нижней и правой границы всех ячеек в строке (только для IE).
bordercolordark – цвет левой и верхней границы всех ячеек в строке (только для IE). Как мы видим, эти параметры действуют как бы наоборот, чем для всей таблицы.
bgcolor – задает цвет фона для всех ячеек в строке.
align – задает горизонтальное выравнивание для текста в ячейках строки. Может принимать значения: left, center, right. По умолчанию align="left".
valign – задает вертикальное выравнивание для текста в ячейках строки. Может принимать значения: top, middle, bottom. По умолчанию valign="middle" (по центру).
height – определяет высоту ячеек строки в пикселях, либо в процентах от высоты всей таблицы.
Параметры тэга <td> (для <th> то же самое):
bordercolor, bordercolorlight, bordercolordark – цвет border'a для конкретной ячейки. По умолчанию такие же, как и у всей таблицы или как у строки, если для той заданы эти параметры. Подробное объяснение смотрите выше.
bgcolor – цвет фона для конкретной ячейки.
background – определяет фоновый рисунок для конкретной ячейки. Его значением является URL, по которому находится рисунок. Этот рисунок будет многократно размножен по вертикали и горизонтали.
align и valign – горизонтальное и вертикальное выравнивание для текста в конкретной ячейке. По умолчанию такие же, как у строки, в которой находится ячейка. Подробное объяснение смотрите выше.
width и height – определяют ширину и высоту ячейки в пикселях, либо в процентах от ширины и высоты таблицы. Если значения width и height меньше, чем требуется для отображения содержимого ячейки, то они будут проигнорированы. Задав высоту ячейки больше, чем высоту строки, мы добьемся того, что все ячейки в строке будут иметь такую высоту.
nowrap – запрещает браузеру автоматический перенос текста в ячейке, когда тот не помещается в ее границах. Не имеет присваиваемых значений.
colspan – количество столбцов, на которые простирается ячейка. По умолчанию равен единице.
rowspan – количество строк, на которые простирается ячейка. По умолчанию равен единице. Пример colspan и rowspan:
<table border="1">
<tr>
<td colspan="2">1/1</td>
<td rowspan="2">1/2</td>
<td>1/3</td>
</tr>
<tr>
<td>2/1</td>
<td>2/2</td>
<td>2/3</td>
</tr>
</table>
1/1
1/2
1/3
2/1
2/2
2/3
Границы пустой ячейки не отображаются. Исправить это очень легко – запишите в ячейку символ неразрывного пробела ( ).
Можно, кстати, вместо этого указать ширину (width) или высоту (height) ячейки. Либо всё сразу. Но если все ячейки будут такими, то вы вообще не увидите никаких границ. А если поиздеваться таким образом лишь над некоторыми ячейками, вы сможете увидеть подобную картину:
В первом случае у таблицы не указан цвет рамки (bordercolor). Во втором случае bordercolor ="#555555".
Вот код таблички, у которой не был указан цвет рамки:
<table border="1" bgcolor="#DDDDDD" cellspacing="0"
cellpadding="0" width="100" height="100" align="center">
<tr>
<td> </td>
<td width=20></td>
<td> </td>
</tr>
<tr>
<td width=20></td>
<td> </td>
<td width=20></td>
</tr>
<tr>
<td> </td>
<td width=20></td>
<td> </td>
</tr>
</table>
Поговорим о том, как задать цвет фона документа, в параметрах тега body вы не сможете сделать это, т.к. СИ удаляет этот тег.
Делаем так: создаем таблицу <table> с одной строкой <tr> и ячейкой <td>, которая будет обрамлять весь документ. Задаем в параметрах тега table цвет фона таблицы (bgcolor), цвет рамки (bordercolor) сделайте таким же (если не хотите, чтобы рамка выделялась). Вы можете вообще не указывать параметр border, или указать, что border="0". Тогда не придется прописывать значение bordercolor. Обязательно пропишите в тэге <table> такие параметры: width="100%" и height="100%". Таблица растянется на всю ширину и высоту окна браузера. Сам текст документа поместите в ячейку аблицы, между тегами <td> ... </td>. Если вы не укажете width и height, то ширина и высота таблицы будут определяться по тексту, помещенному в нее.
Текст по умолчанию выравнивается: вертикально – по центру таблицы, и с левого края по горизонтали. Если вы хотите сделать другое выравнивание, используйте параметры align и valign. Их можно применить как для всей строки (<tr>), так и для отдельной ячейки (<td>).
Если вы хотите, чтобы у вас в документе было несколько цветов, например, полоса для заголовка, для подписей внизу, для основного текста, то, соответственно, строк (<tr>) будет три. В параметрах тега <tr> можно задать цвет фона и рамки каждой строке. Также можно задать цвет фона и обрамляющей рамки каждой ячейке (<td>).
Советую еще раз внимательно перечитать параграф "таблицы". Все параметры и прочее – расписаны. Экспериментируйте. А теперь пример:
<table cellspacing="0" cellpadding="10" bgcolor="#A7BEE9" width="100%" height="100%">
<tr align="center" valign="top">
<td> текст текст текст </td>
</tr>
<table>
текст текст текст
С помощью таблицы элементарно делается эпиграф к произведению. Создадим таблицу с одной ячейкой, запишем туда текст эпиграфа, выровняем таблицу по правому краю. Сделать это можно двумя способами:
<table align="right"> ... </table>
<div align="right"><table> ... </table></div>
Если эпиграф – это какое-либо стихотворение, то больше ничего делать не требуется, а если текст, то его надо поместить в тэг <div align="justify"> ... <div>. Для предложения сгодится и <p align="justify"> ... <p>. Однако на следующие предложения он уже не подействует, так что используйте <div>. Для не стихотворных эпиграфов можно поменять обычную гарнитуру на рубленый шрифт, уменьшив при этом размер. Для стихотворного – по желанию.
Если предложение длинное, да еще не одно, нужно указать ширину таблицы в пикселях (можно и в процентах), потому что если опустить этот параметр, таблица примет размер по самому длинному абзацу и растянется на весь экран. Что совсем не похоже на эпиграф, не так ли? Пример:
<div align="right">
<table border="0" cellspacing="0"
cellpadding="0" width="400">
<tr>
<td>
<div align="justify">
<font face=Arial size="-1">
<dd>Текст эпиграфа. Текст эпиграфа.
<dd>Текст эпиграфа. Текст эпиграфа.
</font>
</div>
</td>
</tr>
</table>
</div>
Обратите внимание на тэг <dd> в начале каждого абзаца эпиграфа. Красная строка требуется и здесь. Для коротенького предложения красная строка, естественно, не нужна.
Почему в примере для выравнивания таблицы по правому краю использован тэг <div> с параметром align, а не такой же параметр тэга <table>? Дело в том, что таблица, как и рисунок (<img>) может обтекаться текстом слева (align="right") или справа (align="left"). Вы сами должны позаботиться о прекращении обтекания текстом, написав <br clear="all">. Таблица, имеющая выравнивание по центру (align="center"), текстом не обтекается. В общем, если у вас много разных таблиц, гораздо лучше равнять их с помощью тэга <div>, не боясь увидеть на экране нечто странное.
Все стихи в тексте оформляются в виде таблиц с выравниваем по центру. Размер шрифта при этом обязательно уменьшается, обычная гарнитура меняется на рубленую. Пример:
<div align="center">
<table border="0" cellspacing="0"
cellpadding="0">
<tr>
<td>
<font face=Arial size="-1">
1-я строка стиха.
<br>2-я строка стиха.
<br>n-я строка стиха.
</font>
</td>
</tr>
</table>
</div>
Тут я пишу <div> исключительно по привычке. Если <div align="center"> заменить на <div align="right">, таблица со стихом прижмется к правому краю. Вот вам и готовый шаблон стихотворения-эпиграфа. Вот вам и польза привычки – быстрая изменяемость кода. В эпиграфе без <div> не обойтись.
Значение параметра face в этих примерах дано без кавычек, потому что иначе СИ выкинет его, и никакого изменения гарнитуры у вас не получится. В примерах, где значение параметра face взято в кавычки, само это слово написано заведомо неправильно, ранее я предупреждал об этом.
[к оглавлению]
<marquee>, бегущая строка
Этот тэг позволяет получить эффект бегущей строки и работает только в IE. Крайне не рекомендую им пользоваться, ну разве что очень нужно будет. Тэг был создан в противовес тэгу <blink> (мерцание), который поддерживали лишь браузеры на движке NN. Н-да, хорошо, что в IE этого нет, мигающий текст – это такая пошлость.
Параметры:
height – высота строки, в пикселях или процентах от ширины окна.
width – ширина строки, в пикселях или процентах от ширины окна. По умолчанию равна ширине окна.
bgcolor – цвет фона бегущей строки, по умолчанию совпадает с фоном документа.
hspace и vspace – задают свободное пространство вокруг бегущей строки в пикселях. Hspace – слева и справа, vspace – сверху и снизу. По умолчанию равны нулю. Рекомендуется задавать, чтобы текст не прижимался вплотную к бегущей строке, это некрасиво.
loop – задает сколько раз прокрутится строка, по умолчанию – бесконечно.
direction – задает направление движения бегущей строки (left, right, up, down). По умолчанию left.
behavior – вид прокрутки:
scroll – обычная прокрутка (по умолчанию).
slide – прокрутка с остановкой у края. Если не задать loop, то строка прокрутится один раз и остановится.
alternate – строка двигается от одного края до другого, меняя направление движения.
scrollamount – задает скорость движения строки. Диапазон – от 1 (медленно) до 10 (быстро). По умолчанию 6.
scrolldelay – задержка прокрутки в миллисекундах. Если хотите привязать скорость точно ко времени, пользуйтесь этим параметром вместо scrollamount. Есть еще параметр align, принимающий такие же значения, как и при использовании его в тэге <img>, но он почему-то не работает.
Кстати, в тэг <marquee> ... </marquee> можно заключить все, что угодно. От нескольких строк, разделенных <br> или <p> до текстовых блоков, списков, таблиц и рисунков. Пример:
[к оглавлению]
Ссылки на полезные ресурсы и условия распространения
Хотите узнать о HTML больше? А о CSS? Идите по ссылкам и качайте.
http://savdv.narod.ru/uchebnik.htm
http://www.artlebedev.ru/kovodstvo2
http://html.manual.ru
http://www.postroika.ru
Вот самая хорошая ссылка: http://www.ya.ru. Введите запрос: учебник по HTML и CSS.
HTML-редакторы:
HTMLGate FREE – от MPSOFTWARE (freeware).
Мощнейшая программа, работает с HTML, CSS, ASP, PHP. Включает TIDY и т.п., однако интерфейс и прочее на английском языке.
1 st Page 2000 – от Evrsoft (freeware).
Очень мощная программа, включает серьезный подробный Help по HTML и т.п., но все на английском.
HtmlPad Fisherman – отечественная разработка (freeware). Похоже, проект закрыт. Гуглите, чтобы скачать.
Буквально дышит в затылок 1 st Page 2000, включает русский Help по HTML, CSS и пр.
http://www.filebox.ru/c/programming/html_editors
Ну и здесь тоже много чего.
[к оглавлению]
Учебник может свободно распространяться при соблюдении следующих условий:
бесплатность;
недопустимость никаких изменений (без согласования с автором);
обязательное упоминание автора;
если учебник планируется разместить на каком-либо сайте, то необходимо согласовать это с автором.
© Артем Белоглазов aka bjorn
2004-2005
|
↓ Содержание ↓
↑ Свернуть ↑
|
