суббота, 27 июля 2013 г.

Введение в HTML (часть 1)

Введение в HTML

HTML — язык разметки гипертекста (Hypertext Markup Language) зародился именно как способ отмечать, где надо шрифт сделать жирненьким, где наклонным, где нарисовать табличку, а где вставить картиночку. То, что с помощью HTML можно рисовать всякие красивые веб-страницы, люди поняли намного позже, но основной смысл HTML всё равно не в красивостях, а именно в разметке текста.

Тэги

Собственно HTML представляет собой так называемые тэги (tags), вставленные в текст. Тэг представляет из себя конструкцию следующего вида:

<tag ...>some text</tag>

Многоточие — это перечисление свойств тэга. В простейшем случае у тэга нет свойств, и он выглядит так:

<tag>some text</tag>

Первая часть тэга <tag> называется открывающей частью, последняя часть </tag> называется закрывающей. В закрывающей части ставится слэш / и не может быть свойств. Свойства тэга перечисляются только в открывающей части. Некоторые тэги не содержат текста внутри себя (или могут не содержать), такие тэги состоят всего из одной части, которая сразу открывающая и закрывающая:

<tag … />

Многоточие — это перечисление свойств тэга, в простейшем случае их может и не быть.

Примеры тэгов со свойствами и с текстом внутри:

<span class="myclass">Это тэг под названием spa</span>
<a href="http://example.com">Эта ссылка, ведущая на example.com</a>

Примеры тэгов без свойств с текстом внутри:

<strong>Это полужирный текст</strong>
<b>Это тоже полужирный текст</b>
<em>Это наклонный текст (курсив)</em>

Примеры самозакрывающихся тэгов со свойствами:

<img src="http://example.com/image.jpg" />
<br clear="all" />

А вот тэг без текста внутри, но не самозакрывающийся:

<em></em>

Если бы внутри него был текст, то был бы наклонным.

Пример самозакрывающегося тэга без свойств:

<br />

Для самозакрывающихся тэгов допустимо написание без слэша в конце, то есть можно писать не <br />, а <br> — это будет нормально работать, но только для тех тэгов, которые в принципе всегда самозакрывающиеся и не имеют текста в середине, такие, как <br />, <hr />, <img /> и тому подобные.

В HTML тэгов существует ограниченное множество, и новых тэгов изобретать нельзя. Если встречается несуществующий тэг, он обычно игнорируется. Обычно нет разницы, ЗАГЛАВНЫМИ или обычными буквами написан тэг: <SPAN> или <span> — нет разницы, однако, строго рекомендуется писать тэги обычными, а не заглавными буквами.

Свойства тэгов

У всех без исключения тэгов могут быть свойства. Свойства перечисляются внутри открывающей части тэга в следующем виде (с двойными кавычками):

property-name="property-value"

Или с одинарными кавычками:

property-name='property-value'

Или вообще можно (но не рекомендуется) без кавычек, если property-value состоит из одного слова без пробелов.

Если у тэга много свойств (больше одного) они записываются через пробел, например:

<a href="/path/to/page/" target="_blank">какая-то ссылка</a>

Названия свойств можно писать ЗАГЛАВНЫМИ или строчными буквами, но рекомендуется писать строчными. Значения свойств уже casee-sensitive, то есть имеется разница, большая там буква или маленькая. В HTML разных свойств существует ограниченное множество, и новых свойств придумывать нельзя. Каждое свойство за что-то отвечает. Есть свойства общие для всех тэгов, а есть свойства, которые бывают только у некоторых тэгов.

Когда-то давно не существовало единых жёстких правил отображения разных тэгов с разными свойствами в разных браузерах, поэтому раньше они отображали разные тэги кто как. До сих пор ощущаются отголоски этого безобразия — некоторые браузеры отображают разные тэги с разными свойствами чуть-чуть по-разному. Поэтому желательно верстать правильно с точки зрения семантики (структуры языка) и не использовать сложные замудрённые конструкции. И ещё одно, очень важное правило, обязательное: ТЭГИ ДОЛЖНЫ БЫТЬ ВЛОЖЕНЫ ДРУГ В ДРУГА.

Неправильный вариант:

<small><i></small></i> — так делать нельзя!

Правильный вариант:

<small><i></i></small>

Структура HTML-документа

Структура HTML-документа очень проста. Любой HTML-документ устроен следующим образом:

<!DOCTYPE html>
<html>
 <head>
  тэги, относящиеся к заголовкам документа
 </head>
 <body>
  собственно всё содержимое документа
 </body>
</html>

Видно, что документ состоит из двух основных частей. Первая часть — тэг head — содержит информацию о том, какие файлы скриптов и стилей подключать, какой у документа заголовок, какие ключевые слова, и так далее. Вторая часть — тэг body — содержит собственно саму вёрстку документа. А перед тэгом head стоит ещё один особенный тэг DOCTYPE. Про него часто забывают, но лучше про него не забывать. Тэг DOCTYPE указывает браузеру разновидность HTML, в которой свёрстан данный документ, для того, чтоб браузер выбрал правильный способ отображения. Разновидностей HTML не так много, и у каждой свой DOCTYPE.

Уже устаревший и потому не рекомендуемый к использованию вариант HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Ещё не устаревший, но уже устаревающий HTML 4.01 Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

И самый новый (новее пока что ничего не придумали) HTML 5:

<!DOCTYPE html>

Рекомендую использовать именно этот вариант. Дело в том, что отличия HTML 5 от HTML 4 незначительны и касаются только способов отображения некоторых тэгов. Все современные браузеры поддерживают HTML 5 и, хотя некоторые всё же отклоняются от стандартов, но не очень сильно. Старые же версии браузеров, которые поддерживают только HTML четвёртой версии и отображают HTML 5 как будто это HTML 4, постепенно исчезают, и всё больше и больше людей пользуются современными версиями браузеров. В конце концов останется очень мало людей со старыми версиями браузеров, и верстать свой сайт в HTML 4.01 Strict или (о, ужас!) в HTML 4.01 Transitional ради них будет бессмысленно, точно так же, как сейчас никто не думает, верстая, как будет выглядеть страничка, если просматривать её в текстовом режиме (не только без картинок, но и вообще без графики).

Всё-всё-всё, заключённое между <!-- и --> считается комментарием, не отображается, и никак на отображение не влияет.

Специальные символы в HTML

Для отображения некоторых символов в HTML существуют специальные последовательности. Например, так как символы < и > обозначают начало и конец тэгов, то зачастую может оказаться так, что не удастся записать какой-то текст, потому что в нём встречаются эти символы и браузер может попытаться интерпретировать их как начало или конец тэгов и не отобразить часть текста или отобразить криво. Для того, чтоб браузер точно знал, что данный символ — это именно знак «больше» > или знак «меньше» <, но не начало или конец тэга, их заменяют на последовательности символов.

Знак «больше» заменяют на последовательность «&gt;», знак «меньше» — на последовательность «&lt;». Таким образом, если написать:

&lt;div&gt;

То браузер отобразит это так:

<div>

И не начнёт тэг <div>, как было бы, если просто написать <div> без замены < и > на спецсимволы. Таких спецсимволов достаточно много. Самые часто используемые приведены в таблице ниже.

Символ Обозначение в HTML
< &lt;
> &gt;
& &amp;
« &laquo;
» &raquo;
§ &sect;
&euro;
&trade;
© &copy;
® &reg;
° &deg;

Блок <head>

В блоке <head> используется ограниченный набор тэгов, служащих для сообщения браузеру информации об отображаемой странице.

Тэг <meta> — основной тэг, служащий для этого. В зависимости от свойств тэга meta он задаёт для страницы те или иные свойства. Обычно у тэга <meta> есть два свойства — name и content.

Для задания ключевых слов страницы (требуется зачастую для поисковиков):

<meta name="keywords" content="one, two, ... " />

Для задания описания страницы (тоже требуется для поисковиков):

<meta name="description" content=" ... " />

Для указания автора страницы (тоже требуется для поисковиков):

<meta name="author" content="Author Name">

Также тэг <meta> может передавать (и переопределять) содержимое HTTP-заголовков. В этом случае он имеет следующие свойства: http-equiv и content. Например, указание кодировки страницы:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

или так (только в новых браузерах):

<meta charset="UTF-8" />

С помощью заголовков <meta http-equiv /> можно, например, запретить браузеру отображать страницу как HTML и заставить отобразить как тестовый файл, или заставить скачать её и открыть в экселе (не факт, что получится, но можно попытаться). Например, для открытия веб-страницы как текстового файла в кодировке windows-1251:

<meta http-equiv="Content-Type" content="text/plain; charset=widows-1251" />

Для того, чтоб браузер попытался скачать страницу и открыть её в экселе:

<meta http-equiv="Content-Type" content="application/vnd.ms-excel; charset=widows-1251" />
<meta http-equiv="Content-Disposition" content="download; filename='file.xls'">

Краткое отступление, необходимое для пояснения материала.

Когда браузер устанавливает соединение с сервером по протоколу HTTP или HTTPS и получает с сервера веб-страницу, сервер сначала посылает служебную информацию, называемую «заголовки» (headers). Для того, чтоб в теле HTML-страницы переопределить эти заголовки, например, кодировку страницы, может быть использован тэг <meta>.

Тэг <link> используется для подключения дополнительных файлов. В подавляющем большинстве случаев он используется для подключения файла со стилями (CSS-файла):

<link rel="stylesheet" type="text/css" href="path/to/css-file.css" />

Либо для задания favicon для страницы (маленькой такой картиночки, которая показывается в адресной строке браузера и в закладках):

<link rel="icon" type="image/x-icon" href="favicon.ico" />

Для задания заголовка страницы используется тэг <title>:

<title>Заголовок страницы, который отобразится в заголовке браузера</title>

Тэг <script> используется для джаваскриптов либо для подключения джаваскриптов из отдельных файлов. В случае, если джаваскрипт сам размещается прямо в <head> и <script>, то тэг имеет примерно такой вид:

<script type="text/javascript"> JavaScript code here </script>

В случае, если надо только подключить джаваскрипт из отдельного файла, то тэг <script> имеет такой вид:

<script type="text/javascript" src="/path/to/javascript.js" />

Указание свойства type="text/javascript" не обязательно, но строго желательно, чтоб браузер точно знал, что это именно джаваскрипт, и нужно выполнять его соответствующим образом.

Тэг <style> используется для задания стилей объекта прямо в <head>, если нельзя по какой-то причине подключить css-файл с помощью тэга <link>:

<style type="text/css"> some CSS definitions </style>

Указание свойства type="text/css" не обязательно, но желательно. Тэги <script> и <style> могут быть подключены не только в <head>, но и в <body>, а если честно, то и вообще везде в <html>, то есть даже после <body>, но так делать крайне не советую, потому что браузер вдруг может проигнорировать скрипт, объявленный или подключенный не в <head> и не в <body>, и это неверно семантически (с точки зрения структуры документа).

Блок <body>

В этом блоке как раз и размещается основное видимое содержимое страницы — весь текст и все остальные тэги. Тэгов на самом деле довольно много, но используются чаще всего только некоторые. Тут, я думаю, надо внести, для ясности, термин «элемент» — это тэг на веб-странице со всем своим содержимым.

У некоторых тэгов есть уникальные для них свойства, но у большинства элементов набор свойств одинаковый. Наиболее важны и часто используются следующие общие свойства:

id определяет идентификатор элемента. Строго рекомендуется делать так, чтоб идентификаторы были уникальными. Эти идентификаторы используются, в первую очередь, в JavaScript-ах для быстрого доступа к элементу, но могут также использоваться и в CSS для задания каких-либо свойств именно этому элементу.

Пример:

<div id="ajaxTarget">сюда джаваскрипт загрузит что-нибудь</div>

class определяет класс элемента. У одного элемента может быть сколько угодно классов, и тогда они записываются через пробел. Например:

<span class="outerWrapper command">спан с двумя классами</span>

style определяет стиль элемента. Синтаксис описания такой же, как в CSS, например:

<div style="border: 1px solid red;">блок с красной рамкой</div>

title — заголовок элемента. Обычно, если это свойство задано, то его значение будет показываться во всплывающей подсказке при наведении мыши на элемент.

Также существуют и широко применяются свойства-события. Подробно сейчас на этом останавливаться не буду, так как более полно это планирую рассказать в теме про JavaScript. Вкратце, можно писать вызовы джаваскриптовых функций или сразу джаваскрипт-код в значениях этих свойств, и эти функции (этот код) будут вызываться, когда с элементом происходит какое-то событие. Например, при нажатии на эту надпись покажется сообщение «клик»:

<span onclick="alert('клик')">нажми меня</span>

Элементы строчные (inline)

Некоторые тэги только меняют каким-то образом свойства отображаемого текста. Если текст будет очень длинный, он будет переноситься на следующую строчку, то есть текст может занимать несколько строчек. Пример подобного тэга — наклонный шрифт, которым набрано предыдущее предложение. Если бы это была веб-страница, то в начале наклонного текста стоял бы открывающий тэг <em> или <i>, а в конце — соответственно, закрывающий тэг </em> или </i>. Так как строчные элементы могут занимать много строчек, то у них нет понятия «высоты», есть только понятие «высота строки». Отступы по этой же причине могут быть только перед строчным элементом и после, а выше или ниже — нет.

Самые часто используемые строчные тэги:

<a> — элемент-якорь. Используется для создания гиперссылок или для создания привязок в конкретном документе. Обладает следующими уникальными свойствами:

name — имя или название. Если где-нибудь на странице, расположенной по адресу http://example.com/ создать элемент <a> со свойством name, например, такой:

<a name="anchor"></a>

То тогда, если набрать в браузере адрес http://example.com#anchor, браузер сам промотает страницу вниз, до элемента <a name="anchor"></a>.

Свойство href указывает адрес, куда ведёт ссылка (href = hyper reference):

<a href="http://example.org">Это ссылка example.org</a>

Если ещё при этом указать свойство target, то новая страница может открыться, например, в новой вкладке или новом окне, если указано target="_blank", или в текущем окне, если указано target="_top" (или если никакого target не указано). Также можно открывать новую страницу в текущем фрейме и родительском, если писать target="_self" или target="_parent" соответственно. Про фреймы я расскажу позднее.

Правила хорошего тона вёрстки рекомендуют использовать тэг <a> только для ссылок, то есть только для того, для чего он изначально предназначается. Если надо выделить как-нибудь кусок текста, чтоб при наведении на него курсор менялся со «стрелочки» на «пальчик», но при нажатии не происходило открытия новой страницы, лучше использовать <span>, задав соответствующие свойства в CSS, но никак не <a href="#"></a>. Это связано, в первую очередь, с тем, что JavaScript-программисты потом будут проклинать верстальщика за <a href="#"> :)

<span> этот тэг ровным счётом ничего не делает с текстом. Он нужен для того, чтоб менять свойства куска текста, заключённого в него, средствами CSS.

<font> этот тэг иногда ещё используется, но лучше его не использовать, потому что он устаревший. Для таких же целей можно использовать <span>, задав соответствующие стили в CSS.

<strong> или <b> делает текст жирным.

<em> или <i> делает текст наклонным (курсивом).

<sup> переводит текст в верхний регистр.

<sub> переводит текст в нижний регистр.

<big> делает текст побольше.

<small> делает текст поменьше.

<u> делает текст подчёркнутым.

<strike> или <s> делает текст зачёркнутым.

<br> просто
перенос
строки.

Комментариев нет:

Отправить комментарий

Ублюдочный Гугл поломал форму комментариев. Извините.