HTML: различия между версиями
Содержимое удалено Содержимое добавлено
Нет описания правки |
|||
Строка 156:
=== Теги форматирования ===
Теперь перейдём к форматированию текста. Форматирование задаёт не так внешний вид, как структуру страницы. Важнейшими тегами форматирования есть абзацы (англ. paragraph) и заголовки (англ. header)
==== Заголовки ==== Заголовки бывают шести уровней. Заголовки первого уровня главные и самые большие, а заголовки шестого уровня даже меньше, чем текст абзацев. Ниже пример использования заголовков: <source lang="html5">
Строка 201 ⟶ 203 :
</html>
</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>}}
Строка 348 ⟶ 352 :
death. "</pre>}}
==== Изменение шрифта ====
Ещё немного о теге изменения шрифта. Шрифт может иметь три дополнительных атрибута: '''жирность (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“. Что в переводе означает: „сильно возражать, выступать против, протестовать“. Кто протестует не сказано, но скорее всего Консорциум трёх дубльве. Вместо тегов вычёркивания рекомендуют использовать тег удаления. А вместо тега подчёркивания — стили.''</blockquote>
==== Удаление и замена ====
Для того чтобы, обходится без <code><nowiki><s></nowiki></code>, придумали тег <code><nowiki><del></nowiki></code> он помечает что текст был именно удалён как неверный и автор акцентирует пользователя на этом. Кроме тега удаления ввели тег вставки. Тег вставки указывает текст, который вставили после удаления. Выглядит такая вещь примерно так:
<source lang="html5">
Строка 366 ⟶ 372 :
Причём текст в теге <nowiki><ins></nowiki> будет подчёркнут. (А ребята из W3schools говорили использовать CSS)
==== Таблица тегов форматирования ====
Далее опишу все теги в таблице, потому что мне уже надоело здесь о них рассказывать, а вам видимо надоело читать.
{|Class="wikitable"
Строка 380 ⟶ 387 :
|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>}}||Задаёт текст в нижнем индексе.
Строка 390 ⟶ 397 :
|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>}}||Задаёт текст, представляющий компьютерный код.
|-
|kbd||<nowiki><kbd>текст</kbd></nowiki>||{{CSS:rendered|1=<kbd>текст</kbd>}}||Задаёт текст, который введён с клавиатуры.
|-
|tt||<nowiki><tt>текст</tt></nowiki>||{{CSS:rendered|1=<tt>текст</tt>}}||Задаёт текст, который выглядит так, будто введён с телетайпа. (Моноширинный шрифт, тег устаревший)
Строка 404 ⟶ 411 :
|samp||<nowiki><samp>текст</samp></nowiki>||{{CSS:rendered|1=<samp>текст</samp>}}||Задаёт текст, который является примером (Sample). Почти как примеры в этом тексте.
|-
|var||<nowiki><var>текст</var></nowiki>||{{CSS:rendered|1=<var>текст</var>}}||Задаёт текст, представляющий переменную. Наверное для всяких статей по программированию.
|-
|pre||<nowiki><pre>текст</pre></nowiki>||{{CSS:rendered|1=<pre style="border: 0px none; background-color: white; ">текст</pre>}}||Задаёт текст, который сохраняет все символы форматирования, такие как табуляции, пробелы, и переносы строк.
|-
|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>}}||Задаёт текст адреса. Отображается курсивом.
|-
|bdo||<nowiki><bdo dir="rtl">HTML</bdo></nowiki>||{{CSS:rendered|1=<bdo dir="rtl">HTML</bdo>}}||Очень весёлый тег. Для тех кто пишет на
|-
|blockquote||<nowiki><blockquote>html html html</blockquote></nowiki>||{{CSS:rendered|1=<blockquote>html html html</blockquote>}}||Задаёт текст большой цитаты.
|-
|q||<nowiki><q>html html</q></nowiki>||{{CSS:rendered|1=<q>html html</q>}}||Задаёт текст маленькой цитаты.
Строка 422 ⟶ 429 :
|cite||<nowiki><cite>html+css+javascript=website</cite></nowiki>||{{CSS:rendered|1=<cite>html+css+javascript=website</cite>}}||Задаёт текст цитаты.
|-
|dfn||<nowiki><p><dfn>html</dfn> — это язык разметки гипертекста</p></nowiki>||{{CSS:rendered|1=<p><dfn>html</dfn> — это язык разметки гипертекста</p>}}||Задаёт строку, для которой будет дано определение (Definition).
|}
Ну, со структурой гипертекста, думаю, мы разобрались, можно теперь переходить к вещам более глобальным.
| |||