HTML В 1989 году лобастые учёные из ЦЕРНа (та же самая контора, которая построила большой адронный коллайдер) сделали удобный язык для хранения и представления документации по своим ядерным штучкам. За основу был взят SGML, но существенно упрощённый. Во-первых, нельзя было указывать произвольные имена тегов; стал доступен всего лишь небольшой набор тегов - <b>, <p>, <a> и др. Во-вторых, регистр, в котором были набраны теги, не имел роли. Можно было писать,например, <A></a>, и это написание являлось корректным. В-третьих, при рендеринге документа в формате HTML игнорировались несколько подряд идущих пробельных символов (они заменялись одним пробелом), переносы строк с помощью символа \n (этот специальный символ в текстовых редакторах обычно вставляется, когда нажимают на ENTER, означает конец строки), символы табуляции \t и так далее. Форматировать документ надлежало с помощью тегов.
Рендерится HTML-документ с помощью специальной программы, браузера.
Совершенно внезапно в начале девяностых годов появился интернет, и ещё более внезапно самой популярной службой интернета стала Всемирная Паутина. Настолько популярной, что теперь WWW и интернет де-факто синонимы.
Сутью всемирной паутины являются гипертекстовые странички, связанные друг с другом с помощью гиперссылок (или,попросту говоря, ссылок).
Для описания веб-страничек стали использовать, не мудрствуя лукаво, всё тот же HTML.
Однако тут же возникла проблема: браузеров стало много, а тегов стало не хватать. Каждый производитель браузеров стал лепить поддержку своих собственных тегов, и в итоге HTML стал скатываться в треш и анархию. Для преодоления такой ситуации крупнейшие браузероделы объединились в консорциум по стандартизации и в 1995 году создали первую официальную версию языка HTML под названием "HTML 2". Цифра 2 была использована, чтобы отличить новую версию формата от уже имеющегося на рынке зоопарка.
В настоящий момент актуальной версией языка HTML является HTML 4.01. Работы над HTML 5 не завершены.
Основные теги HTML 4.01 Про структуру документа в формате HTML я уже рассказывал во введении. Сейчас сосредоточусь на деталях.
HTML-страница может быть двухтипов: страницей с фреймами и страницей, непосредственно содержащей контент.
Для информации о HTML-документах используется тег <META>, расположенный где-то между <HEAD> и </HEAD>. Он имеет четыре основных атрибута:
name - имя метатега - указывает на его назначение;
content - устанавливает значение метатега
charset - кодировка (см.ниже),
http-equiv - установка HTTP-заголовка (об этих заголовках я расскажу в курсе PHP).
Так как HTML-документ - это обычный текстовый файл, то он может быть в разных кодировках - windows-1251, koi8-r, utf8, etc.
Для указания кодировки документа используется тег meta примерно вот такого вида:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Атрибут name может иметь, вообще говоря, любое поддерживаемое браузером значение. Неподдерживаемые браузером значения игнорируются. Значения атрибута name:
author - автор документа
keywords - ключевые слова, встречающиеся на странице; разделены запятыми. Когда-то использовались поисковыми сервисами, но с появлением SEO-шников поисковики забили на ключевые слова.
description - подробное описание страницы.
generator - программа, с помощью которой создана страница, или название движка.
language - язык страницы.
Например:
<meta name="generator" content="Hanabira 【花びら】 0.5.1225">
<meta name="language" content="ru">
<meta name="keywords" content="hanabira board chan">
<meta name="description" content="Доброчан - анонимный имиджборд об аниме">
Для линковки со страницей каких-либо ресурсов, например, фавиконки (иконки, ображающейся в адресной строке браузера), JS-скриптов, CSS-файлов и т.д. используется тег <LINK>.
Так,
<link rel="shortcut icon" href="http://dobrochan.ru/favicon.ico">
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
установит для страницы фавиконку, лежащую по адресу
http://dobrochan.ru/favicon.ico . Два тега с разными rel'ами нужны потому, что в разных браузерах загрузка фавиконки реализована по-разному.
Кстати об адресации. Так как WWW предполагает наличие гиперсвязи одного элемента с другим, то WWW-элемент (страница, картинка, ресурс) обязан иметь точный адрес. Адрес может быть двух типов: абсолютный (начинается с http:// и точно описывает местоположение) и относительный (вычисляется относительно текущей папки; актуален, как правило, только в пределах одного сервера).
Текущая папка обозначается символом точки . , в качестве обозначения каталога верхнего уровня используются две точки .., в качестве разделителя используется прямой слеш /
<link rel="shortcut icon" href="http://dobrochan.ru/favicon.ico">
<link rel="shortcut icon" href="./favicon.ico">
...
обозначает путь к одному и тому же файлу с иконкой (при условии, что страничка и иконка лежат в одной папке).
<body></body> - главный тег страницы с элементами. Внутри него должны быть расположены все остальные теги, содержащие рисуемые элементы.
атрибуты:
alink - увет активной ссылки (активной ссылка становится, когда по ней кликнули, но курсор мыши ещё не отпущен)
bgcolor - фоновый цвет
link - цвет ссылок
vlink - цвет посещённых ссылок
text - цвет текста
background - задаёт фоновый рисунок страницы (абсолютная или относительная адресация).
Управлять внешним видом body с помощью атрибутов не рекомендуется, нужно использовать CSS.
Теги содержания:
<P></P> - вставляет на страницу абзац текста.
атрибуты: align - выравнивание.
align="left" - по левому краю, right - по правому, center - по центру, justify - по ширине.
<BR> - перенос строки.
<B></B> - делает текст полужирным.
<I></I> - курсив.
<U></U> - подчёркивание.
<S></S> - зачёркивание.
<SMALL></SMALL> - маленький текст.
<SUB></SUB> - текст ниже baseline
<SUP></SUP> - текст выше baseline
<CENTER></CENTER> - центрированный текст
<H1></H1> - заголовок первого приоритета.
<H2></H2> - заголовок второго приоритета.
...
<H6></H6> - заголовок шестого приоритета.
<H4>Евгений Онегин</H4>
<P>
Мой дядя самых честных правил, <br>
Когда не в шутку занемог,<br>
Он уважать себя заставил<br>
И лучше выдумать не мог.
</P>
<P>
Его пример — другим наука;<BR>
Но, боже мой, какая скука <BR>
С больным сидеть и день, и ночь<BR>
Не отходя ни шагу прочь!
</P>
— - это так называемый HTML-мнемоник, вставляющий тире.
<A></A> - делает всё внутри себя гиперссылкой.
Атрибуты:
href - указание на другую страницу (абсолютный/относительный адрес) или на якорь.
name - устанавливает якорь на этой же самой странице; якори используются для перехода их одного места страницы в другое.
<A name="anchor1">Тут может быть текст, а может и не быть</A>
<P>Большой блок текста</P>
<A href="#anchor1">Наверх</A>
<A href="http://google.ru/">в гугл!</A>
<IMG> вставляет на страницу картинку.
Атрибуты:
ширина width - выставляется либо в пикселях, либо в процентах от ширины родительского контейнера.
высота height - аналогично ширине;
замещающий текст alt - отображается на месте картинки в случае, когда загрузка картинок отключена в браузере.
всплывающая подсказка title - содержит текст, который появляется при наведении на картинку мышки. Если не установлен, в качестве всплывающей подсказки используется текст из alt.
border - управляет толщиной рамки картинки. Ели рисунок является гиперссылкой, то в некоторых браузерах вокруг него появится синяя рамка. Чтобы её прибить, нужно всего лишь установить её толщину в нуль.
И сразу же примечание. Внешним видом элементов лучше управлять не с помощью width, height, align и border, а устанавливать их с помощью CSS-стилей.
<FONT></FONT> - управляет шрифтом на веб-странице.
Устарел. Вместо него лучше использовать CSS.
Атрибуты:
color - цвет текста
size - размер букв в уе от 1 до 7
face - имя шрифта
<FONT size="5" color="FF0000" face="Arial">Красный текст.</FONT>
<TABLE></TABLE> - вставляет на страницу таблицу.
атрибуты:
width, height - ширина или высота
background - фоновая картинка
bgcolor - фоновый цвет
border - толщина рамки. Таблицы с рамкой нулевой толщины часто используются для вёрстки.
cellpadding - отступ от рамки до содержимого ячейки.
cellspacing - просветы между ячейками
rules - способ рисования рамки (см. в ссылках в конце поста)
<THEAD></THEAD> - нужен для хранения одной или нескольких строк, составляющих "шапку" таблицы
<TBODY></TBODY>
<TFOOTER></TFOOTER> - подвал таблицы
Деление на шапку/тело/подвал чисто декоративное и не является обязательным, браузер в состоянии подставить <TBODY> автоматически.
<TR></TR> - контейнер-строка, должен содержать ячейки.
<TD></TD> - ячейка таблицы.
<TH></TH> - ячейка для заголовков.
Пример таблицы:
<table cellpadding="10" border="1">
<tr>
<th width="75%">Политическая партия</th>
<th width="25%">% голосов</th>
</tr>
<tr>
<td>КПРФ</td>
<td>30%</td>
</tr>
<tr>
<td>Яблоко</td>
<td>14%</td>
</tr>
<tr>
<td>Единая Россия</td>
<td>20%</td>
</tr>
<tr>
<td>ЛДПР</td>
<td>15%</td>
</tr>
<tr>
<td>СР</td>
<td>20%</td>
</tr>
</table> <LI></LI> - элемент нумерованного или маркированного списка.
Нумерованный список OL.
Атрибуты: type - тип нумерации. A | a | I | i | 1
- соотв. большие лат.буквы, маленькие лат.буквы, большие римские цифры, маленькие римские цифры, арабские цифры.
start - номер, с которого будет начинаться список.
<UL></UL>
атрибуты:
type - тип маркера. "disc | circle | square" - пулька, кружочек, квадратик.
<h4>Серия "Гарри Поттер"</h4>
<ol>
<li>Философский камень</li>
<li>Тайная комната</li>
<li>Узник Азкабана</li>
<li>Кубок огня</li>
<li>Орден феникса</li>
<li>Принц-полукровка</li>
<li>Роковые мощи</li>
</ol>
<br>
<h4>Доброчан-это</h4>
<ul>
<li>Стильно</li>
<li>Познавательно</li>
<li>Чай с крендельками!</li>
</ul>
