HTML: различия между версиями
Содержимое удалено Содержимое добавлено
→Теги форматирования: оформление |
DannyS712 (обсуждение | вклад) м <source> -> <syntaxhighlight> (phab:T237267) |
||
Строка 10:
Чем отличается стандарт HTML5 от предыдущих HTML? Сначала коротенькая история. Существует такая организация W3C (World Wide Web Consortium). Суть её работы хорошо выражена в их лозунге «Leading the Web to Its Full Potential…» («Приведём всемирную паутину к лидерству, раскрыв все её возможности»). Судя по тому что они уже сделали, люди разумные и свою работу знают. И когда они говорят, что в будущем браузеры не будут поддерживать старые версии HTML, то оно наверняка так и будет. А новые браузеры появляются не так уж и редко. Когда W3C создавали стандарт HTML, в нём не предусматривалось тегов для форматирования гипертекста. Теги показывали только структуру документа, например:
<
<!DOCTYPE html>
<html>
Строка 24:
</body>
</html>
</syntaxhighlight>
Но потом разработчики браузеров начали добавлять в HTML свои теги, которые им нравились. Например:
<
<html>
<head>
Строка 39:
</body>
</html>
</syntaxhighlight>
<blockquote>''IE — давайте отсюда и дальше так будем называть [[w:Internet Explorer|Internet Explorer]]. А фраза выше — ложь. Только FF ([[w:Firefox|Firefox]]) смог нормально вывести ту несчастную строку. Но всё равно лучше такими тегами не пользоваться. ''</blockquote>
Строка 74:
Приведу пример кода веб-страницы:
<
<html>
<head>
Строка 86:
</body>
</html>
</syntaxhighlight>
Все теги, которые встречаются выше, обязательны. Они присутствуют в каждой интернет-странице. Конечно, если вы какой-то из них забудете, браузер-то разберётся, но все серьёзные люди такие вещи не забывают. Тег <code><nowiki><html></nowiki></code> говорит браузеру, что в нём содержится код HTML. Тег <code><nowiki><head></nowiki></code> говорит, что в нём содержится заголовочная информация страницы. Эта информация на самой странице отсутствует. Тег <code><nowiki><title></nowiki></code>, как уже было сказано, содержит заголовок, который обычно отображается на вкладке. <code><nowiki><body></nowiki></code> содержит тело, тоесть содержимое страницы.
Строка 94:
Ещё существует понятие специальных символов. Например, вы напишете такую страницу:
<
<html>
<head>
Строка 105:
</body>
</html>
</syntaxhighlight>
Такая страница отображается браузером неправильно (скорее всего, каждый браузер просто отобразит страницу по своему), потому что браузер не выводит теги. А <code><nowiki><html></nowiki></code> — тег. Такая же проблема и с символами сравнения. Поэтому, чтобы отображать некоторые нестандартные символы, существует понятие специальных символов. Специальные символы в HTML описываются так: &код;. Например:
Строка 126:
Здесь я указал только самые-самые нужные. Если вам нужно больше, надо поискать. Можно поискать [http://htmlweb.ru/html/symbols.php где-то здесь]. То есть то, что мы хотели описать в предыдущем примере, будет выглядеть так:
<
<!DOCTYPE html>
<html>
Строка 139:
</body>
</html>
</syntaxhighlight>
=== Кодировка ===
Строка 146:
HTML4.01:
<
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</syntaxhighlight>
HTML5:
<
<meta charset="utf-8" />
</syntaxhighlight>
Оба способа одинаковы. Но второй короче.
Строка 161:
Некоторые теги имеют свойства, которые называются атрибутами. Например, почти каждый тег имеет атрибут title. В нём прописывается текст подсказки, которая видна, когда пользователь наводит курсор на элемент тега. Пусть нам нужно написать известное сокращение: HTML. И если пользователи наводят на него курсор, они могут его расшифровать. Это делается просто:
<
<!DOCTYPE html>
<html>
Строка 176:
</body>
</html>
</syntaxhighlight>
Здесь мы видим, как правильно записывать атрибуты. Название атрибута, затем знак равенства, и значение в двойных кавычках. В стандарте HTML 4.01 нет атрибутов без значений.
Строка 190:
Заголовки бывают шести уровней. Заголовки первого уровня — главные и самые большие, а заголовки шестого уровня даже меньше, чем текст абзацев. Ниже пример использования заголовков:
<
<!DOCTYPE html>
<html>
Строка 232:
</body>
</html>
</syntaxhighlight>
Эта страница отобразится так:
Строка 241:
==== Переносы строк ====
<
<html>
<head>
Строка 260:
</body>
</html>
</syntaxhighlight>
К сожалению, браузеры отвергают все символы переноса строки, табуляции, а также лишние пробелы. Поэтому этот стишок отображается в одну или несколько строк (в зависимости от ширины окна). Но есть выход.
Строка 270:
И ещё один способ — взять весь стих в теги <nowiki><pre></pre></nowiki>. Весь текст, помещённый между этими тегами, отображается точно так же, как его видно в редакторе. Правда этот тег также меняет шрифт на моноширинный. Но зато мы можем делать с текстом интересные вещи:
<
<!DOCTYPE html>
<html>
Строка 331:
</body>
</html>
</syntaxhighlight>
Это выглядит следующим образом:
Строка 393:
Для того чтобы обходиться без <code><nowiki><s></nowiki></code>, придумали тег <code><nowiki><del></nowiki></code> он помечает что текст был именно удалён как неверный и автор акцентирует пользователя на этом. Кроме тега удаления ввели тег вставки <code><nowiki><ins></nowiki></code>. Тег вставки указывает текст, который вставили после удаления. Выглядит такая вещь примерно так:
<
2 + 2 = <del>5</del><ins>4</ins>
</syntaxhighlight>
А отобразится она так:
Строка 410:
!Тег!!Пример!! Вид!!Описание
|-
|<code><nowiki><b></nowiki></code>||<
|-
|<code><nowiki><strong></nowiki><code>||<
|-
|<code><nowiki><i></nowiki></code>||<
|-
|<code><nowiki><em></nowiki></code>||<
|-
|<code><nowiki><sub></nowiki></code>||<
|-
|<code><nowiki><sup></nowiki></code>||<
|-
|<code><nowiki><ins></nowiki></code>||<
|-
|<code><nowiki><del></nowiki></code>||<
|-
|<code><nowiki><code></nowiki></code>||<
|-
|<code><nowiki><kbd></nowiki></code>||<
|-
|<code><nowiki><samp></nowiki></code>||<
|-
|<code><nowiki><var></nowiki></code>||<
|-
|<code><nowiki><pre></nowiki></code>||<
|-
|<code><nowiki><abbr></nowiki></code>||<
|-
|<code><nowiki><address></nowiki></code>||<
|-
|<code><nowiki><bdo></nowiki></code>||<
|-
|<code><nowiki><blockquote></nowiki></code>||<
|-
|<code><nowiki><q></nowiki></code>||<
|-
|<code><nowiki><cite></nowiki></code>||<
|-
|<code><nowiki><dfn></nowiki></code>||<
|-
|big||<nowiki><big>текст</big></nowiki>||{{CSS:rendered|1=<big>текст</big>}}||Задаёт большой текст. (устаревший для HTML5)
Строка 466:
Как я уже говорил, основным свойством, которое отличает нормальный текст и гипертекст, является гиперссылка. Гиперссылки создаются с помощью тега <nowiki><a></nowiki> с атрибутом href, который принимает значение нужного нам URL. Например, нужно создать страницу, которая содержит ссылку на статью. Это может выглядеть примерно так:
<
<!DOCTYPE html>
<html>
Строка 479:
</body>
</html>
</syntaxhighlight>
Теперь на странице надпись [[HTML|ru.wikibooks.org]] станет гиперссылкой.
Строка 493:
Например, если вы певец и хотите поделиться своими песнями с другими, вы можете положить в папку с сайтом файл track1.mp3, а в файле index.htm написать:
<
<html>
<head>
Строка 502:
</body>
</html>
</syntaxhighlight>
Если файлы находятся в одном каталоге, то в атрибуте href достаточно написать название файла, чтобы сделать ссылку. Если же мы имеем файлы «site/1.htm» и «site/subdir/2.htm», то чтобы с первого сделать ссылку на второй, а со второго на первый, надо написать href ="subdir/2.htm" и href ="../1.htm" соответственно. Такие адреса называются относительными. Две точки означают «тот каталог что выше». Относительные адреса хороши тем, что когда мы переименовываем папку «site» или меняем хостинг их не нужно менять.
Строка 512:
Чтобы долго не объяснять снова приведу пример:
<
<html>
<head>
Строка 530:
</body>
</html>
</syntaxhighlight>
Когда мы делаем гиперпереходы в пределах одной страницы, то в атрибуте href просто пишем знак («#») и название закладки (то что написано в атрибуте id). А когда делаем переход на закладку в другой странице, то сначала пишем адрес страницы, затем добавляем знак («#») и название закладки. Когда случайно делается переход на закладку, которой не существует, ничего страшного не происходит. Мы просто попадаем в начало страницы, как при обычном переходе.
Строка 548:
Чтобы указать файл, который будет проигрываться, нужно написать так:
<
<bgsound src="Example.mid" loop="3" volume="-1000" balance="3000">
</syntaxhighlight>
Параметры:
Строка 565:
Вот как он выглядит:
<
<!DOCTYPE html>
<html>
Строка 576:
<body>
<audio controls="controls">
<
<
</audio>
</body>
</html>
</syntaxhighlight>
Обращаем ваше внимание на непонятный тег <code><nowiki><
Дело в том, что браузеры не поддерживают все форматы музыки и порой приходится перекодировать вашу музыку в другие типы аудио, чтобы мелодия корректно отображалась в основных браузерах.
Строка 593:
* loop — повторяет воспроизведение звука с начала после его завершения.
* preload — используется для загрузки файла вместе с загрузкой веб-страницы.
* src — указывает путь к воспроизводимому файлу (только если не использовался тег <nowiki><
== Элементы оформления ==
Строка 614:
Также мы можем изменить размер картинки. Например, если мы имеем маленькое изображение, мы можем его растянуть. Правда тогда оно будет отображаться несколько размыто. Также можно изменять размеры изображения вместе с изменением размеров окна браузера. Для этого размеры указывают в процентах. Размеры задаются атрибутами width и height. Пример:
<
<!DOCTYPE html>
<html>
Строка 632:
</body>
</html>
</syntaxhighlight>
Картинки могут быть помещены между тегами <a> и </a>, тогда щелчок по ним будет аналогичным щелчку по обычным ссылкам. Вокруг картинки появится синяя рамка. Но есть ещё более интересный способ сделать из картинки гиперссылку. Это карты.
Строка 639:
Изображение можно разделить на области различной формы, каждая из которых может ссылаться в другое место. Для этого с помощью тега <nowiki><map></nowiki> задают карту. Атрибут id идентифицирует карту и используется для связи с картинкой. Чтобы картинку назначить в качестве карты, используется атрибут usemap (в котором мы должны записать id карты). Внутри тега карты содержатся теги областей, которые задаются тегами <nowiki><area></nowiki>. Опять же, этот тег одинарный, и хочет чтобы его правильно закрывали. Атрибут href задаёт адрес ссылки, атрибут nohref, если назначить ему значение true, исключает зону с карты. Атрибут shape задает форму области: rect — прямоугольная, circle — круг, и poly — для многоугольника.
<
<!DOCTYPE html>
<html>
Строка 657:
</body>
</html>
</syntaxhighlight>
Пример я бессовестно «сдул» [http://www.w3schools.com/html/tryit.asp?filename=tryhtml_areamap отсюда]. Очень хорошее место, чтобы потренироваться, без лишней мороки.
Строка 669:
Списки в HTML бывают трёх видов: упорядоченные (ordered list) <nowiki><ol></nowiki>, неупорядоченные (unordered list) <nowiki> <ul> </nowiki>, и списки определений (definition list) <nowiki> <dl> </nowiki>. Элементы двух первых списков задаются тегом <nowiki> <li> </nowiki> (list item). Элементом списка может быть любой текст, картинки, абзацы, а также другие списки. Например, упорядоченный список задают так:
<
<ol>
<li> Раз </li>
Строка 675:
<li> Три </li>
</ol>
</syntaxhighlight>
Выглядит это так:
Строка 685:
Список определений не является списком элементов. Это список терминов и определений терминов. Список определений начинается с тега <nowiki><dl></nowiki>. Каждый термин списка определений начинается с тега <nowiki><dt></nowiki>. Каждое определение списка начинается с тега <nowiki><dd></nowiki>:
<
<dl>
<dt>элемент 1</dt>
Строка 692:
<dd>описание элемента 2</dd>
</dl>
</syntaxhighlight>
=== Таблицы ===
Строка 707:
|}
<
<table border="1">
<tr> <td> Строка 1 Столбец 1 </td> <td> Строка 1 Столбец 2 </td> <td> Строка 1 Столбец 3 </td></tr>
Строка 713:
<tr> <td> Строка 3 Столбец 1 </td> <td> Строка 3 Столбец 2 </td> <td> Строка 3 Столбец 3 </td></tr>
</table>
</syntaxhighlight>
По умолчанию таблицы отображаются без границ. То есть границы невидимы. Это иногда полезно, но иногда мы хотим, чтобы границы были видны. Для этого задают значение атрибута <nowiki>border</nowiki>. Он задаёт толщину границ таблицы. (Правда только внешних). Если его значение ноль, то границы не отображаются.
Строка 734:
А пишется вот так:
<
<table border="1">
<tr><td></td> <th> Столбец 1 </th> <th> Столбец 2 </th> </tr>
Строка 740:
<tr> <th> Строка 2 </th> <td> Строка 2 Столбец 1 </td> <td> Строка 2 Столбец 2 </td> </tr>
</table>
</syntaxhighlight>
Стоит заметить, что такой способ лучше чем писать содержимое ячейки в тегах <nowiki><b></nowiki> или <nowiki><strong></nowiki>. И не только потому, что так короче. А и потому, что потом можно будет применить к заголовкам таблицы отдельные стили.
Строка 748:
Ячейки таблицы можно объединять. Делается это с помощью атрибутов colspan и rowspan тега <nowiki><td></nowiki>. colspan указывает на сколько колонок будет данная ячейка, а rowspan — на сколько строк. Такой код:
<
<table border="1">
<tr><td colspan="2"> Строка 1 Столбец 1 растягивается на два вправо </td> <td> Строка 1 Столбец 3 </td></tr>
Строка 754:
<tr><td> Строка 3 Столбец 1 </td><td> Строка 3 Столбец 3 </td></tr>
</table>
</syntaxhighlight>
Даёт такой результат:
Строка 788:
* Новые теги:
** <nowiki><section></nowiki>, <nowiki><article></nowiki>, <nowiki><aside></nowiki>, <nowiki><header></nowiki>, <nowiki><footer></nowiki>, <nowiki><nav></nowiki>, <nowiki><main></nowiki>, <nowiki><hgroup></nowiki> (уже считается устаревшим в W3C),
** <nowiki><figure></nowiki>, <nowiki><figcaption></nowiki>, <nowiki><video></nowiki>, <nowiki><audio></nowiki>, <nowiki><
** <nowiki><datalist></nowiki>, <nowiki><keygen></nowiki>, <nowiki><output></nowiki>, <nowiki><progress></nowiki>, <nowiki><meter></nowiki>, <nowiki><dialog></nowiki>,
** <nowiki><data></nowiki>, <nowiki><time></nowiki>, <nowiki><mark></nowiki>, <nowiki><ruby></nowiki>, <nowiki><rt></nowiki>, <nowiki><rp></nowiki>, <nowiki><bdi></nowiki>, <nowiki><wbr></nowiki>,
| |||