HTML: различия между версиями

Содержимое удалено Содержимое добавлено
→‎Ссылки: оформление
викификация
Строка 1:
== Введение ==
Однажды я увидел книжку по веб-дизайну, а поскольку я имел обыкновение читать всё что вижу, то я её прочитал. И с тех пор считал что знаю HTML. Но недавно мне сказали адрес одного хорошего сайта [http://www.w3schools.com www.w3schools.com]. Символы «w3» в названии сайта означают «три w», или «www». Что важного я там узнал? Во-первых, что мои знания несколько устаревшие. Во-вторых, то что мои теги распознаёт браузер, ещё не значит что так будет продолжаться и дальше. Поэтому я решил написать современную книгу о веб-дизайне.
 
[[Файл: Html-small.png]]
Строка 6:
Постараюсь описать всё как можно доступнее, и согласно новым тенденциям. Ибо консерватизм — это ни что иное, как лень учить что-то новое. Но если вы не учите новое, вы отстаёте. А отставание в современном мире недопустимо. Поэтому здесь будем рассматривать HTML 5.
 
Как положено, стоит начать с определений. [[w:HTML|HTML]] (''Hyper Text Markup Language'') — значит язык разметки гипертекстовых страниц. Даже не считается языком программирования, но каждый программист, уважающий себя, должен его знать. Ибо без него учить [[w:JavaScript|JavaScript]] или [[w:PHP|PHP]] нет смысла.
 
Чем отличается стандарт HTML 5 от предыдущих HTML? Сначала коротенькая история. Существует такая организация W3C (World Wide Web Consortium). Суть её работы хорошо выражена в их лозунге «Leading the Web to Its Full Potential…» («Приведём всемирную паутину к лидерству, раскрыв все её возможности»). Судя по тому что они уже сделали, люди разумные и свою работу знают. И когда они говорят, что в будущем браузеры не будут поддерживать старые версии HTML, то оно наверняка так и будет. А новые браузеры появляются не так уж и редко. Когда W3C создавали стандарт HTML, в нём не предусматривалось тегов для форматирования гипертекста. Теги показывали только структуру документа, например:
Строка 26:
</source>
 
Но потом разработчики браузеров начали добавлять в HTML свои теги, которые им нравились. Например:
 
<source lang="html4strict">
Строка 43:
<blockquote>''IE — давайте отсюда и дальше так будем называть [[w:Internet Explorer|Internet Explorer]]. А фраза выше — ложь. Только FF ([[w:Firefox|Firefox]]) смог нормально вывести ту несчастную строку. Но всё равно лучше такими тегами не пользоваться. ''</blockquote>
 
Также нежелательно было появление в стандарте HTML 3.2 тега <code><nowiki><font></nowiki></code> (он нужен для изменения цвета, шрифта и размера текста). Представьте себе, что нужно написать страницу, где все заголовки красные. И приходится помимо тегов в заголовке писать ещё тег шрифта с атрибутом цвета.
 
С четвёртой версии разделяются форматирование документа и его структура. Теперь в HTML-странице сохраняются только структура страницы (разноуровневые заголовки, абзацы, цитаты, списки), а всё, что относится к форматированию, описывается в [[w:CSS|CSS]]. Это удобно, поскольку позволяет быстро менять оформление всего сайта изменением только файла со стилем, и, кроме того, уменьшает длину кода, который нужно написать.
 
== Структура страницы ==
 
=== К работе! ===
Лучший способ научиться что-то делать — сделать это. Не получится — учиться дальше. А получится — значит вы уже научились. :-)
 
Для того чтобы изучить HTML, кроме чтения этого руководства, нам нужно иметь:
# [[w:Компьютер|Компьютер]]
# [[w:Браузер|Браузер]]
# [[w:Текстовый редактор|Текстовый редактор]]
 
Раз вы читаете этот текст, две первые вещи у вас точно есть. Текстовый редактор также есть на каждом компьютере. Важно заметить: нам нужна программа для редактирования текстовых файлов, а не документов (т.то е.есть не в ''коем случае'' нельзя использовать текстовые препроцессоры типа Microsoft Word). Обычно стандартного «Блокнота» Windows достаточно, но есть текстовые редакторы, которые лучше приспособлены к написанию HTML-страниц. Неплохой редактор для Windows [[w:Notepad++|Notepad ++]], в котором хорошо писать не только HTML, а и CSS, PHP, C++, и еще несколько десятков других языков. В нём есть такая хорошая вещь, как подсветка синтаксиса, которая позволяет выявлять ошибки прямо во время их создания :-). Если же у вас Linux, тогда вы точно знаете что такое хороший текстовый редактор.
 
О браузере также стоит сказать несколько слов. Все советуют держать у себя на компьютере набор браузеров: Internet Explorer, Firefox, Opera, Chrome, Safari и просматривать свои страницы во всех сразу. Правда, функции тегов в разных браузерах отличаются не сильно (а в идеале вообще не отличаются). Поэтому учиться можно, просматривая свои страницы в одном из них, а уже когда пишете что-то большое — посмотрите, не имеется ли слишком критических различий во всех других.
 
Чтобы создать веб-страницу, нужно создать в файловой системе текстовый файл с расширением .html или .htm . Какое из них выбрать — философский вопрос :-). .htm — сокращение от .html, что довольно смешно, поскольку .html это тоже сокращение. Но были времена, когда в некоторых ОС расширение файла могло содержать максимум 3 символа (например, DOS), и страницы гипертекста имели расширение .htm . Теперь можно использовать оба расширения.
 
=== Содержание веб-страницы ===
Веб-страницы состоят из [[w:Гипертекст|гипертекста]]. Гипертекст отличается от обычного текста тем, что содержит гиперссылки. Они обычно обозначены подчеркиванием и синим цветом, и позволяют сделать гиперпереход в <s>другую вселенную</s> другой гипертекст, или любое другое место (якорь), указанное с помощью [[w:URL|URL]]. Гипертекст состоит из тегов.
 
URL (''Universal Resource Locator'') — адрес ресурса, который мы видим в адресной строке браузера.
 
Тег — это всё, что находится между угловыми скобками. Например <code><nowiki><html></nowiki></code>. Теги не отображаются браузером, они только задают структуру текста. Теги бывают трёх видов: открывающие, закрывающие и одинарные. Открывающие и закрывающие теги всегда ходят парами. Закрывающий отличается от открывающего тем, что после угловой скобки < стоит знак слэш (знак дроби) «/». Пара открывающего и закрывающего тега выглядит так: <code><nowiki><html></html></nowiki></code>. Одинарные теги — вещь противоречивая, и я их рассмотрю позже.
 
Элемент гипертекста — это всё, что находится между открывающим и закрывающим тегом. Элементы бывают вложенными.
 
Приведу пример кода веб-страницы:
 
<source lang="html5">
Строка 87 ⟶ 88 :
</source>
 
Все теги, которые встречаются выше, обязательны. Они присутствуют в каждой интернет-странице. Конечно, если вы какой-то из них забудете, браузер-то разберётся, но все серьёзные люди такие вещи не забывают. Тег <code><nowiki><html></nowiki></code> говорит браузеру, что в нём содержится код HTML. Тег <code><nowiki><head></nowiki></code> говорит, что в нём содержится заголовочная информация страницы. Эта информация на самой странице отсутствует. Тег <code><nowiki><title></nowiki></code>, как уже было сказано, содержит заголовок, который обычно отображается на вкладке. <code><nowiki><body></nowiki></code> содержит тело, или содержимое страницы.
 
Кроме тегов и текста, гипертекстовые страницы могут содержать комментарии. Комментарии выглядят так: <code><nowiki><!-- Комментарий --></nowiki></code>. Они позволяют писать на странице текст, который не отображается браузером. Это нужно для вставки сообщений типа <code><nowiki><!-- Здесь не забыть дописать абзац о комментариях --></nowiki></code>.
 
Ещё существует понятие специальных символов. Например, вы напишете такую страницу:
 
<source lang="html5">
Строка 106 ⟶ 107 :
</source>
 
Такая страница отображается браузером неправильно (скорее всего, каждый браузер просто отобразит страницу по своему), потому что браузер не выводит теги. А <code><nowiki><html></nowiki></code> — тег. Такая же проблема и с символами сравнения. Поэтому, чтобы отображать некоторые нестандартные символы, существует понятие специальных символов. Специальные символы в HTML описываются так: &код;. Например:
 
{|Class="wikitable"
Строка 123 ⟶ 124 :
|}
 
Здесь я указал только самые-самые нужные. Если вам нужно больше, надо поискать. Можно поискать [http://htmlweb.ru/html/symbols.php где-то здесь]. То есть то, что мы хотели описать в предыдущем примере, будет выглядеть так:
 
<source lang="html5">
Строка 141 ⟶ 142 :
 
=== Кодировка ===
Одним из обязательных требований для веб-страницы является указывание кодировки. Опять же браузер сам может определить кодировку. Но лучше указывать. Способа есть два:
<source lang="html5">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Строка 148 ⟶ 149 :
<meta charset="utf-8" />
</source>
Оба способа одинаковы. Но второй короче.
 
=== Атрибуты ===
Некоторые теги имеют свойства, которые называются атрибутами. Например, почти каждый тег имеет атрибут title. В нём прописывается текст подсказки, которая видна, когда пользователь наводит курсор на элемент тега. Пусть нам нужно написать известное сокращение: HTML. И если пользователи наводят на него курсор, они могут его расшифровать. Это делается просто:
 
<source lang="html5">
Строка 178 ⟶ 179 :
=== Теги форматирования ===
Теперь перейдём к форматированию текста. Форматирование задаёт не так внешний вид, как структуру страницы. Важнейшими тегами форматирования есть абзацы (англ. paragraph) и заголовки (англ. header)
 
==== Заголовки ====
Заголовки бывают шести уровней. Заголовки первого уровня главные и самые большие, а заголовки шестого уровня даже меньше, чем текст абзацев. Ниже пример использования заголовков:
Строка 225 ⟶ 227 :
</source>
 
Эта страница отобразится так:
{{CSS:rendered|1=<p style="font-size: 1.75em; ">Пролог</p><p style="font-size: 1.50em; ">О хоббитах</p><p>В этой книге речь пойдет преимущественно о хоббитах, и с ее страниц читатель узнает немало об их ... и т. д. </p><p style="font-size: 2em; ">Братство кольца</p><p style="font-size: 1.75em; ">КНИГА ПЕРВАЯ</p><p style="font-size: 1.50em; ">I Долгожданная гостиная</p><p style="font-size: 1.50em; ">... и т.д. </p><p style="font-size: 1.50em; ">XII Побег к броду</p><p style="font-size: 1.50em; ">КНИГА ВТОРАЯ</p><p style="font-size: 1.50em; ">...и т.д. </p>}}
<blockquote>''Я здесь пишу и пишу примеры. Не забывайте пробовать что-то сами! Или хотя бы по крайней мере посмотрите как будут выглядеть примеры страниц, которые вам даются, в вашем браузере (а если у вас несколько браузеров, то не забывайте посмотреть как выглядит страница в других!). ''</blockquote>
Строка 321 ⟶ 323 :
</source>
 
Это выглядит следующим образом:
 
{{CSS:rendered|1= It is a long tail, certainly, 'said Alice, looking down with wonder at the Mouse's tail'
Строка 374 ⟶ 376 :
Ещё немного о теге изменения шрифта. Шрифт может иметь три дополнительных атрибута: '''жирность (bold)''', ''курсив (italic)'' и <u>подчёркивание (underlined)</u>. Они меняются с помощью тегов: <code><nowiki><b></nowiki></code>, <code><nowiki><i></nowiki></code> и <code><nowiki><u></nowiki></code> соответственно.
 
Правда вместо тега <code><nowiki><b></nowiki></code> рекомендуют использовать тег <code><nowiki><strong></nowiki></code>, а вместо <code><nowiki><i></nowiki></code>  — <code><nowiki><em></nowiki></code>. У них есть различие <code><nowiki><strong></nowiki></code> и <code><nowiki><em></nowiki></code>  — это ''логическое выделение'', а <code><nowiki><b></nowiki></code> и <code><nowiki><i></nowiki></code>  — ''физическое'', т.то е.есть в первых двух случаях мы акцентируем внимание посетителя сайта на каком-то слове или предложение, ну а в последних двух просто требуется чтобы, текст был жирным или курсивным и делается это просто для красоты. Кроме того существует ещё такое свойство как зачёркивание. Оно задавалось тегом <nowiki><s></nowiki>, что означало strikeout. Но опять же в современном мире слова не вычёркивают, их удаляют.
 
<blockquote>''Школа W3 напротив тегов <nowiki><u></nowiki>, <nowiki><s></nowiki> и <nowiki><strike></nowiki> пишет „deprecated“«deprecated». Что в переводе означает: „сильно«сильно возражать, выступать против, протестовать“протестовать». Кто протестует не сказано, но скорее всего Консорциум трёх дубльве. Вместо тегов вычёркивания рекомендуют использовать тег удаления. А вместо тега подчёркивания — стили.''</blockquote>
 
==== Удаление и замена ====
Для того чтобы, обходится без <code><nowiki><s></nowiki></code>, придумали тег <code><nowiki><del></nowiki></code> он помечает что текст был именно удалён как неверный и автор акцентирует пользователя на этом. Кроме тега удаления ввели тег вставки. Тег вставки указывает текст, который вставили после удаления. Выглядит такая вещь примерно так:
 
<source lang="html5">
Строка 385 ⟶ 387 :
</source>
 
А отобразится она так:
 
{{CSS:rendered|1=2 + 2 = <del>5</del><ins>4</ins>}}
Строка 392 ⟶ 394 :
 
==== Таблица тегов форматирования ====
Далее опишу все теги в таблице, потому что мне уже надоело здесь о них рассказывать, а вам видимо надоело читать.
 
{|Class="wikitable"
Строка 398 ⟶ 400 :
!Тег!!Пример!! Вид!!Описание
|-
|<code><nowiki><b></nowiki></code>||<source lang="html5"><b>текст</b></source>||{{CSS:rendered|1=<b>текст</b>}}||Задаёт жирный текст.
|-
|<code><nowiki><strong></nowiki><code>||<source lang="html5"><strong>текст</strong></source>||{{CSS:rendered|1=<strong>текст</strong>}}||Задаёт сильный акцент на тексте между тегами. Выглядит так же, как и жирный.
|-
|<code><nowiki><i></nowiki></code>||<source lang="html5"><i>текст</i></source>||{{CSS:rendered|1=<i>текст</i>}}||Задаёт курсивный текст.
|-
|<code><nowiki><em></nowiki></code>||<source lang="html5"><em>текст</em></source>||{{CSS:rendered|1=<em>текст</em>}}||Задаёт акцент на тексте между тегами. По виду аналогичен курсивному.
|-
|<code><nowiki><sub></nowiki></code>||<source lang="html5">H<sub>2</sub>O — это вода</source>||{{CSS:rendered|1=H<sub>2</sub>O — это вода}}||Задаёт текст в нижнем индексе.
|-
|<code><nowiki><sup></nowiki></code>||<source lang="html5">2<sup>8</sup> = 256</source>||{{CSS:rendered|1=2<sup>8</sup> = 256}}||Задаёт текст в верхнем индексе.
|-
|<code><nowiki><ins></nowiki></code>||<source lang="html5"><ins>текст</ins></source>||{{CSS:rendered|1=<ins>текст</ins>}}||Задаёт текст, который вставляется после удаления. Обычно подчёркнут.
|-
|<code><nowiki><del></nowiki></code>||<source lang="html5"><del>текст</del></source>||{{CSS:rendered|1=<del>текст</del>}}||Задаёт текст, который удалён (выглядит перечёркнутым).
|-
|<code><nowiki><code></nowiki></code>||<source lang="html5"><code>текст</code></source>||{{CSS:rendered|1=<code style="color: black; border: none; background-color: white; ">текст</code>}}||Задаёт текст, представляющий компьютерный код.
|-
|<code><nowiki><kbd></nowiki></code>||<source lang="html5"><kbd>текст</kbd></source>||{{CSS:rendered|1=<kbd>текст</kbd>}}||Задаёт текст, который введён с клавиатуры.
|-
|<code><nowiki><samp></nowiki></code>||<source lang="html5"><samp>текст</samp></source>||{{CSS:rendered|1=<samp>текст</samp>}}||Задаёт текст, который является примером (Sample). Почти как примеры в этом тексте.
|-
|<code><nowiki><var></nowiki></code>||<source lang="html5"><var>текст</var></source>||{{CSS:rendered|1=<var>текст</var>}}||Задаёт текст, представляющий переменную. Наверное для всяких статей по программированию.
|-
|<code><nowiki><pre></nowiki></code>||<source lang="html5"><pre>текст</pre></source>||{{CSS:rendered|1=<pre style="border: 0px none; background-color: white; ">текст</pre>}}||Задаёт текст, который сохраняет все символы форматирования, такие как табуляции, пробелы, и переносы строк.
|-
|<code><nowiki><abbr></nowiki></code>||<source lang="html5"><abbr title="HyperText Markup Language">HTML</abbr></source>||{{CSS:rendered|1=<abbr title="HyperText Markup Language">HTML</abbr>}}||Задаёт текст аббревиатуры. В атрибуте title можно записать расшифровки.
|-
|<code><nowiki><address></nowiki></code>||<source lang="html5"><address>город Берлин</address></source>||{{CSS:rendered|1=<em>город Берлин</em>}}||Задаёт текст адреса. Отображается курсивом.
|-
|<code><nowiki><bdo></nowiki></code>||<source lang="html5"><bdo dir="rtl">HTML</bdo></source>||{{CSS:rendered|1=<bdo dir="rtl">HTML</bdo>}}||Очень весёлый тег. Для тех кто пишет на иврите или арабском. В атрибуте dir можно задать направления текста. „rtl“«rtl» — справа налево, „ltr“«ltr» — нормально.
|-
|<code><nowiki><blockquote></nowiki></code>||<source lang="html5"><blockquote>html html html</blockquote></source>||{{CSS:rendered|1=<blockquote>html html html</blockquote>}}||Задаёт текст большой цитаты.
|-
|<code><nowiki><q></nowiki></code>||<source lang="html5"><q>html html</q></source>||{{CSS:rendered|1=<q>html html</q>}}||Задаёт текст маленькой цитаты.
Строка 436 ⟶ 438 :
|<code><nowiki><cite></nowiki></code>||<source lang="html5"><cite>html+css+javascript=website</cite></source>||{{CSS:rendered|1=<cite>html+css+javascript=website</cite>}}||Задаёт текст цитаты.
|-
|<code><nowiki><dfn></nowiki></code>||<source lang="html5"><p><dfn>html</dfn> — это язык разметки гипертекста</p></source>||{{CSS:rendered|1=<p><dfn>html</dfn> — это язык разметки гипертекста</p>}}||Задаёт строку, для которой будет дано определение (Definition).
|-
|big||<nowiki><big>текст</big></nowiki>||{{CSS:rendered|1=<big>текст</big>}}||Задаёт большой текст. (устаревший для HTML5)
|-
|small||<nowiki><small>текст</small></nowiki>||{{CSS:rendered|1=<small>текст</small>}}||Задаёт маленький текст.
|-
|u||<nowiki><u>текст</u></nowiki>||{{CSS:rendered|1=<u>текст</u>}}||Подчёркивание текста. (устаревший для HTML4.01, но не для HTML5)
Строка 573 ⟶ 575 :
Обращаем ваше внимание на непонятный тег <code><nowiki><source /></nowiki></code>.
 
Дело в том, что браузеры не поддерживают все форматы музыки и порой приходится перекодировать вашу музыку в другие типы аудио, чтобы мелодия корректно отображалась в основных браузерах.
 
''По техническим причинам тег <nowiki><source /></nowiki> отображён как <nowiki><sourc /></nowiki>, правильно писать <nowiki><source /></nowiki>! ''
Строка 579 ⟶ 581 :
Подробно про атрибуты тега <code><nowiki><audio></nowiki></code>:
 
* autoplay  — звук начинает играть сразу после загрузки страницы.
* controls  — добавляет панель управления к аудиофайлу.
* loop  — повторяет воспроизведение звука с начала после его завершения.
* preload  — используется для загрузки файла вместе с загрузкой веб-страницы.
* src  — указывает путь к воспроизводимому файлу (только если не использовался тег <nowiki><source /></nowiki>).
 
== Элементы оформления ==
Строка 593 ⟶ 595 :
----
 
Делается это просто как новая строка: <nowiki><hr /></nowiki> (horisontal ruler). Вообще-то в этом теге есть атрибуты, которые настраивают внешний вид, но их использование в новых стандартах нежелательно. Разрешены только общие атрибуты, такие как id, class, style и атрибуты событий, но это темы следующего раздела.
 
=== Картинки ===
Строка 624 ⟶ 626 :
</source>
 
Картинки могут быть помещены между тегами <a> и </a>, тогда щелчок по ним будет аналогичным щелчку по обычным ссылкам. Вокруг картинки появится синяя рамка. Но есть ещё более интересный способ сделать из картинки гиперссылку. Это карты.
 
=== Карты ===
Изображение можно разделить на области различной формы, каждая из которых может ссылаться в другое место. Для этого с помощью тега <nowiki><map></nowiki> задают карту. Атрибут id идентифицирует карту и используется для связи с картинкой. Чтобы картинку назначить в качестве карты, используется атрибут usemap (в котором мы должны записать id карты). Внутри тега карты содержатся теги областей, которые задаются тегами <nowiki><area></nowiki>. Опять же, этот тег одинарный, и хочет чтобы его правильно закрывали. Атрибут href задаёт адрес ссылки, атрибут nohref, если назначить ему значение true, исключает зону с карты. Атрибут shape задает форму области: rect — прямоугольная, circle — круг, и poly — для многоугольника.
 
<source lang="html5">
Строка 649 ⟶ 651 :
</source>
 
Пример я бессовестно «сдул» [http://www.w3schools.com/html/tryit.asp?filename=tryhtml_areamap отсюда]. Очень хорошее место, чтобы потренироваться, без лишней мороки.
 
Форму задают с помощью атрибута coords, который содержит четыре координаты (лево, верх, право, низ) для прямоугольника, три (координаты центра и радиус) для круга, и чётное количество для многоугольника (координаты каждой вершины). Координаты можно узнать морем способов. Можно в Paint'еPaint’е посмотреть. А если форма сложная, точек много, то можно и специальную программу использовать. Это вроде [http://www.carlosag.net/Tools/XMap/ X-Map]. Хотя, если честно, ни этой программой, ни картами я не пользовался. Но если такое есть, то надо дать людям знать. Иначе книжка какая-то не солидная будет.
 
== Представление информации структурировано ==
Строка 756 ⟶ 758 :
Кроме строк таблица может иметь заголовок. Тег <nowiki><caption></nowiki> предназначен для создания заголовка к таблице и может размещаться только в середине тега <TABLE>, причём сразу после открывающего тега. Такой заголовок представляет собой текст, который по умолчанию отображается перед таблицей и описывает её.
 
Также можно выделить строки таблицы в группы, с различным функциональным назначением и назначить им разные стили. Ой как мне не терпится уже дойти до стилей. Но по порядку. Можно выделить заголовочный часть <nowiki><thead></nowiki>, основную часть <nowiki><tbody></nowiki> и итог <nowiki><tfoot></nowiki>.
 
== HTML5 ==
Строка 801 ⟶ 803 :
** вместо <nowiki><dir></nowiki> использовать <nowiki><ul></nowiki>,
** вместо <nowiki><bgsound></nowiki> — тег <nowiki><audio></nowiki>,
** вместо <nowiki><listing></nowiki> и <nowiki><xmp></nowiki>  — теги <nowiki><pre></nowiki> или <nowiki><code></nowiki>,
** вместо <nowiki><strike></nowiki> — <nowiki><del></nowiki> или <nowiki><s></nowiki>,
** вместо <nowiki><isindex></nowiki> — комбинацию тега <nowiki><form></nowiki> и текстового поля.