HTML: различия между версиями
Содержимое удалено Содержимое добавлено
Oleg4280 (обсуждение | вклад) исправил ошибку |
Oleg4280 (обсуждение | вклад) оформление и другие исправления |
||
Строка 73:
Тег — это всё, что находится между угловыми скобками. Например <code><nowiki><html></nowiki></code>. Теги не отображаются браузером, они только задают структуру текста. Теги бывают трёх видов: открывающие, закрывающие и одинарные. Открывающие и закрывающие теги всегда ходят парами. Закрывающий отличается от открывающего тем, что после угловой скобки < стоит знак слэш (дробь) «/». Пара открывающего и закрывающего тега выглядит так: <code><nowiki><html></html></nowiki></code>. Одинарные теги — вещь противоречивая, и я их рассмотрю позже.
<blockquote>''Важно знать, что начиная с версии HTML 4.01 (точнее XHTML 1.0) все теги должны быть написаны маленькими буквами.
Элемент гипертекста — это всё, что находится между открывающим и закрывающим тегом. Элементы бывают вложенными.
Строка 141:
С чего начинается страница
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8;
</head>
<body>
Строка 169:
</h3>
<p>
В этой книге речь пойдет преимущественно о хоббитах, и с
</p>
<h1>
Строка 225:
Можно каждую строчку стихотворения поместить в отдельный абзац. Правда обычно между абзацами большие белые поля. Поэтому можно использовать одинарный тег <nowiki><br /></nowiki>. Этот тег обозначает переход на новую строку, то есть обрыв ('''br'''eak) старого.
<blockquote>''Здесь следует вставить замечание. Все теги ходят парами открывающий — закрывающий. Между ними содержатся элементы гипертекста. Но тег обрыва строки не содержит ничего. Поэтому он пару и не имеет. Но новейшие стандарты требуют, чтобы все теги закрывались. Правда учтя наличие тегов подобных <nowiki><br></nowiki>, придумали сокращённую форму записи (<nowiki><br /></nowiki>). Он как бы открывается, а потом сразу закрывается. Это кажется довольно странным. Конечно можно писать и в старом формате: <nowiki><br></nowiki>. Но лучше иметь код, который отвечает новейшим стандартам.
И ещё один способ — взять весь стих в теги <pre></pre>. Весь текст, помещённый между этими тегами, отображается точно так же, как его видно в редакторе. Правда этот тег также меняет шрифт на моноширинный. Но зато мы можем делать с текстом интересные вещи:
Строка 291:
</html>
</source>
Это выглядит следующим образом:
{{CSS:rendered|1= It is a long tail, certainly, 'said Alice, looking down with wonder at the Mouse's tail'
`But why do you call it sad? ' And she kept on puzzling about it while the Mouse was speaking,
Строка 339 ⟶ 341 :
to
death. "</pre>}}
Ещё немного о теге изменения шрифта. Шрифт может иметь три дополнительных атрибута: '''жирность (bold)''', ''курсив (italic)'' и <u>подчёркивание (underlined)</u>. Они меняются с помощью тегов: <code><nowiki><b></nowiki></code>, <code><nowiki><i></nowiki></code> и <code><nowiki><u></nowiki></code> соответственно.
Строка 350 ⟶ 353 :
2 + 2 = <del>5</del><ins>4</ins>
</source>
А отобразится она так:
{{CSS:rendered|1=2 + 2 = <del>5</del><ins>4</ins>}}
Строка 369 ⟶ 374 :
|em||<nowiki><em>текст</em></nowiki>||{{CSS:rendered|1=<em>текст</em>}}||Задаёт акцент на тексте между тегами. По виду аналогичен курсивному.
|-
|big||<nowiki><big>текст</big></nowiki>||{{CSS:rendered|1=<big>текст</big>}}||Задаёт большой текст
|-
|small||<nowiki><small>текст</small></nowiki>||{{CSS:rendered|1=<small>текст</small>}}||Задаёт маленький текст
|-
|sub||<nowiki><p>H<sub>2</sub>O — это вода</p></nowiki>||{{CSS:rendered|1=<p>H<sub>2</sub>O — это вода</p>}}||Задаёт текст в нижнем индексе.
Строка 379 ⟶ 384 :
|ins||<nowiki><ins>текст</ins></nowiki>||{{CSS:rendered|1=<ins>текст</ins>}}||Задаёт текст, который вставляется после удаления. Обычно подчёркнут.
|-
|u||<nowiki><u>текст</u></nowiki>||{{CSS:rendered|1=<u>текст</u>}}||Подчёркивание текста
|-
|del||<nowiki><del>текст</del></nowiki>||{{CSS:rendered|1=<del>текст</del>}}||Задаёт текст, который удалён (выглядит перечёркнутым).
|-
|s||<nowiki><s>текст</s></nowiki>||{{CSS:rendered|1=<s style="color: black; ">текст</s>}}||Перечёркивание текста
|-
|code||<nowiki><code>текст</code></nowiki>||{{CSS:rendered|1=<code style="color: black; border: 0px none; background-color: white; ">текст</code>}}||Задаёт текст, представляющий компьютерный код.
Строка 399 ⟶ 404 :
|abbr||<nowiki><abbr title="HyperText Markup Language">HTML</abbr></nowiki>||{{CSS:rendered|1=<abbr title="HyperText Markup Language">HTML</abbr>}}||Задаёт текст аббревиатуры. В атрибуте title можно записать расшифровки.
|-
|acronym||<nowiki><acronym title="HyperText Markup Language">HTML</acronym></nowiki>||{{CSS:rendered|1=<abbr title="HyperText Markup Language">HTML</abbr>}}||Задаёт текст акронима (в атрибуте title). Акроним — это устоявшееся сокращение, а аббревиатура — нет.
|-
|address||<nowiki><address>город Берлин</address></nowiki>||{{CSS:rendered|1=<em>город Берлин</em>}}||Задаёт текст адреса. Отображается курсивом.
Строка 414 ⟶ 419 :
|}
Надо сказать, что W3C не рекомендует (источник?) использование этих элементов, предпочитая CSS.
Ну, со структурой гипертекста, думаю, мы разобрались, можно теперь переходить к вещам более глобальным.
Строка 435 ⟶ 440 :
Опять же этот тег не входит в спецификацию HTML. Зато в HTML5 добавили тег <nowiki><audio></nowiki>
Вот как он выглядит:
<source lang="html5">
<!DOCTYPE html>
Строка 452 ⟶ 458 :
</html>
</source>
Обращаю ваше внимание на непонятный тег <nowiki><source /></nowiki>, дело в том, что браузеры не поддерживают все форматы музыки и порой приходится перекодировать вашу музыку в другие типы аудио, чтобы мелодия корректно отображалась в основных браузерах.
''По техническим причинам тег <nowiki><source /></nowiki> отображён как <nowiki><sourc /></nowiki>, правильно писать <nowiki><source /></nowiki>! ''
Строка 464 ⟶ 471 :
=== Кодировка ===
Нужно заметить, что правильнее указывать кодировку документа. Для HTML 4.01:
<source lang="html5">
<meta http-equiv="text/html; charset=utf-8" />
</source>
В HTML5 появился более короткий способ объявления кодировки (но и первый вариант тоже корректен):
<source lang="html5">
<meta charset="utf-8" />
Строка 730 ⟶ 740 :
Также можно выделить строки таблицы в группы, с различным функциональным назначением и назначить им разные стили. Ой как мне не терпится уже дойти до стилей. Но по порядку. Можно выделить заголовочный часть <nowiki><thead></nowiki>, основную часть <nowiki><tbody></nowiki> и итог <nowiki><tfoot></nowiki>.
== См. также ==
* [[HTML5]]
| |||