|
↓ Содержание ↓
↑ Свернуть ↑
| Следующая глава |
Артем Белоглазов
Учебник
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.
|
↓ Содержание ↓
↑ Свернуть ↑
| Следующая глава |
