Викиучебник

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

Интерактивная навигация по истории
← Предыдущая правкаСледующая правка →
Содержимое удалено Содержимое добавлено
ВизуальныйВики-текст
Нет описания правки
Строка 1:
== Введение ==
Однажды я увидел книжку по webвеб-дизайну, а поскольку я имел обыкновение читать всё что вижу, то я её прочитал. И с тех пор считал что знаю HTML. Но недавно мне сказали адрес одного хорошего сайта [http://www.w3schools.com/ www.w3schools.com]. Символы «w3» в названии сайта означают «три w», или «www». Что важного я там узнал? Во-первых, что мои знания несколько устаревшие. Во-вторых, то что мои теги распознаёт браузер, ещё не значит что так будет продолжаться и дальше. Поэтому я решил написать современную книгу о веб-дизайне.
 
[[Файл: Html-small.png]]
Строка 16:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />▼
</head>
<body>
Строка 80 ⟶ 79 :
 
<source lang="html5">
<!DOCTYPE html>
<html>
<head>
Строка 87 ⟶ 85 :
Название страницы (отображается в строке заголовка браузера)
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
Строка 95 ⟶ 92 :
</source>
 
Все теги, которые встречаются выше, обязательны. Они присутствуют в каждой интернет-странице. Конечно, если вы какой-то из них забудете, браузер-то разберётся, но все серьёзные люди такие вещи не забывают. Тег <code><nowiki><html></nowiki></code> говорит браузеру, что в нём содержится код HTML. Тег <code><nowiki><head></nowiki></code> говорит, что в нём содержится заголовочная информация страницы. Эта информация на самой странице отсутствует. Тег <code><nowiki><title></nowiki></code>, как уже было сказано, содержит заголовок, который обычно отображается в строкена заголовкавкладке. <code><nowiki><body></nowiki></code> содержит тело, или содержимое страницы.
 
Кроме тегов и текста, гипертекстовые страницы могут содержать комментарии. Комментарии выглядят так: <nowiki><!-- Комментарий --></nowiki>. Они позволяют писать на странице текст, который не отображается браузером. Это нужно для вставки сообщений типа <nowiki><!-- Здесь не забыть дописать абзац о комментариях --></nowiki>.
 
Ещё существует понятие специальных символов. Например, вы напишете такую страницу:
 
<source lang="html5">
<!DOCTYPE html>
<html>
<head>
Строка 148 ⟶ 144 :
</html>
</source>
 
=== Кодировка ===▼
Одним из обязательных требований для веб-страницы является указывание кодировки. Опять же браузер сам может определить кодировку. Но лучше указывать. Способа есть два:
<source lang="html5">▼
▲ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</source>▼
<source lang="html5">▼
<meta charset="utf-8" />▼
</source>▼
Оба способа одинаковы. Но второй короче.
 
=== Теги форматирования ===
Строка 344 ⟶ 350 :
Ещё немного о теге изменения шрифта. Шрифт может иметь три дополнительных атрибута: '''жирность (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. Но опять же в современном мире слова не вычёркивают, их удаляют, поэтому в порядке модернизации используют тег <nowiki><del></nowiki>.
 
<blockquote>''Школа W3 напротив тегов <nowiki><u></nowiki>, <nowiki><s></nowiki> и <nowiki><strike></nowiki> пишет „deprecated“. Что в переводе означает: „сильно возражать, выступать против, протестовать“. Кто протестует не сказано, но скорее всего Консорциум трёх дубльве. Вместо тегов вычёркивания рекомендуют использовать тег удаления. А вместо тега подчёркивания — стили.''</blockquote>
Строка 469 ⟶ 475 :
*preload — используется для загрузки файла вместе с загрузкой веб-страницы.
*src — указывает путь к воспроизводимому файлу (только если не использовался тег <nowiki><source /></nowiki>).
 
▲=== Кодировка ===
Нужно заметить, что правильнее указывать кодировку документа. Для HTML 4.01:
 
▲<source lang="html5">
<meta http-equiv="text/html; charset=utf-8" />
▲</source>
 
В HTML5 появился более короткий способ объявления кодировки (но и первый вариант тоже корректен):
 
▲<source lang="html5">
▲ <meta charset="utf-8" />
▲</source>
 
=== Атрибуты ===
Строка 503 ⟶ 496 :
 
=== Ссылки ===
 
Как я уже говорил, основным свойством, которое отличает нормальный текст и гипертекст является гиперссылка. Гиперссылки создаются с помощью тега <nowiki><a></nowiki> с атрибутом href, который принимает значение нужного нам URL. Например, нужно создать страницу, которая содержит ссылку на статью. Это может выглядеть примерно так:
 
Строка 541 ⟶ 533 :
Но этим возможности тега <nowiki> <a> </nowiki> не исчерпываются. a — сокращенно от anchor — что значит якорь. С помощью тега <a> можно ставить в гипертекстовом документе якоря, или проще говоря закладки, позволяющие переходить в определённое место документа. Это особенно полезно, когда документ большой, и нужно быстро переходить в нём к нужному разделу. Для этого существует атрибут id.
 
<blockquote>''Я правда не понимаю для чего делать закладки с помощью тега <nowiki><a></nowiki>, когда атрибут id есть в каждом тезисе. Но всеми способами получается нормально.''</blockquote>
 
Чтобы долго не объяснять снова приведу пример:
Источник — https://ru.wikibooks.org/wiki/HTML