|
|
||
HTML для тех, кто хочет печататься (уже начал, продолжает, нужное подчеркнуть :-) в Самиздате, но не знает, как грамотно оформить свои тексты. Если нет желания вникать и разбираться или же не хватает времени - читайте статью "HTML и Самиздат (light version)". Там дано всё необходимое с минимумом объяснений. Подготовил А. Белоглазов. | ||
Артем Белоглазов
Учебник HTML и Самиздат
(каждый писатель желает стать издателем)
Мой учебник ни в коей мере не претендует на полноту, всеобъемлемость и абсолютную истину, но некоторые аспекты рассмотрены здесь весьма подробно.
Лирическое отступление. На написание сего учебника меня подвиг неряшливый, неаккуратный, некрасивый вид многих авторских разделов. Оно, конечно, совершенно не мое дело, но встречают-то по одежке! Поэтому – ряд советов и замечаний, вы вправе им следовать или не следовать. Ознакомиться, впрочем, стоит. Для тех же, кто, как и я сам когда-то, всерьез заинтересуется HTML, будут даны ссылки на другие учебники и полезные ресурсы. Если у вас совершенно нет времени на изучение, а хочется, чтоб "было красиво" – обратите внимание на статью "HTML и Самиздат (light version)". В ней даны примеры и шаблоны, сказано – как, но не объясняется почему. Просто делайте, и всё будет ОК. Конец лирического отступления.
Учебник может совершенно свободно распространяться, но только "as is" ("как есть"). Условия.
В принципе, я не хотел делить учебник на разделы, но пришлось. Поэтому читать лучше по порядку, хотя, если есть оглавление, то почему бы им не воспользоваться? Вы сможете легко перейти к любому интересующему вас тэгу.
Я предполагаю, что в процессе изучения вы будете самостоятельно писать код html-документа, опираясь на полученные знания. Для этого вам будут нужны:
- прямые руки;
- текстовый редактор, например, блокнот (но лично я рекомендую многофункциональный Notepad++, русский интерфейс в наличии);
- браузер (например, MyIE2 / MyIE RU – отличная надстройка над IE). К сожалению, проект был закрыт в 2011 г. Но дистрибутив можно скачать, погуглив в сети.
Вы можете одновременно открыть файл и в блокноте, и в браузере. Внесли изменения в код – сохранились, а в браузере дали команду "обновить" (F5). Естественно, в дальнейшем вы будете пользоваться специализированными HTML-редакторами, но сначала – ручками (непременно и обязательно), чтоб прочувствовали. Совет: визуальные редакторы HTML – это не наш метод, если, конечно, вы не полный чайник, и вам абсолютно неинтересно, как оно всё устроено и работает. Будет быстро, топорно, шаблонно и намусорено (в смысле, мусора в коде много). Вот так. Гораздо лучше пользоваться специализированными редакторами, по сути своей похожими на интерактивные среды программирования (Delphi, Visual Basic). Таким образом, вы получите полный контроль над кодом и понимание, что же вы собственно делаете.
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> как табулятором, и с красной строкой все в порядке. Почему на первой строчке нет <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 – определяет тип нумерации пунктов, может принимать значения:
По умолчанию type="1".
- A – заглавные латинские буквы (A, B, C...)
- a – строчные латинские буквы (a, b, c...)
- I – большие римские цифры (I, II, III...)
- i – маленькие римские цифры (i, ii, iii...)
- 1 – обычные цифры (1, 2, 3...)
- 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 >в начало</a>
- Страница будет прокручена вверх. И никаких ссылок. Естественно, на Самиздате сделать это нельзя. Скрипты там запрещены.
- Теперь несколько советов о том, как с помощью ссылок-"якорей" сделать сноски в документе. В книжках это выглядит это примерно так:
- ...палец плавно надавил на спуск штатной "Мясорубки". Этот гразер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. Существует несколько зарезервированных имен: