Викиучебник

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

Интерактивная навигация по истории
← Предыдущая правкаСледующая правка →
Содержимое удалено Содержимое добавлено
ВизуальныйВики-текст
викификация
исправление ошибок
Строка 4:
[[Файл: Html-small.png]]
 
Постараюсь описать всё как можно доступнее, и согласно новым тенденциям. Ибо консерватизм — это ни что иное, как лень учить что-то новое. Но если вы не учите новое, вы отстаёте. А отставание в современном мире недопустимо. Поэтому здесь будем рассматривать HTML 5[[w:HTML5|HTML5]].
 
Как положено, стоит начать с определений. [[w:HTML|HTML]] (''Hyper Text Markup Language'') — значит язык разметки гипертекстовых страниц. Даже не считается языком программирования, но каждый программист, уважающий себя, должен его знать. Ибо без него учить [[w:JavaScript|JavaScript]] или [[w:PHP|PHP]] нет смысла.
 
Чем отличается стандарт HTML 5HTML5 от предыдущих HTML? Сначала коротенькая история. Существует такая организация W3C (World Wide Web Consortium). Суть её работы хорошо выражена в их лозунге «Leading the Web to Its Full Potential…» («Приведём всемирную паутину к лидерству, раскрыв все её возможности»). Судя по тому что они уже сделали, люди разумные и свою работу знают. И когда они говорят, что в будущем браузеры не будут поддерживать старые версии HTML, то оно наверняка так и будет. А новые браузеры появляются не так уж и редко. Когда W3C создавали стандарт HTML, в нём не предусматривалось тегов для форматирования гипертекста. Теги показывали только структуру документа, например:
 
<source lang="html5">
Строка 57:
# [[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>. Теги не отображаются браузером, они только задают структуру текста. Теги бывают трёх видов: открывающие, закрывающие и одинарные. Открывающие и закрывающие теги всегда ходят парами. Закрывающий отличается от открывающего тем, что после угловой скобки <nowiki><</nowiki> стоит знак слэш (знак дроби) <nowiki>«/»</nowiki>. Пара открывающего и закрывающего тега выглядит так: <code><nowiki><html></html></nowiki></code>. Одинарные теги — вещь противоречивая, и я их рассмотрю позже.
 
Элемент гипертекста — это всё, что находится между открывающим и закрывающим тегом. Элементы бывают вложенными.
Строка 133:
С чего начинается страница
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8;" />
</head>
<body>
Строка 143:
=== Кодировка ===
Одним из обязательных требований для веб-страницы является указывание кодировки. Опять же браузер сам может определить кодировку. Но лучше указывать. Способа есть два:
 
<source lang="html5">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</source>
 
<source lang="html5">
<meta charset="utf-8" />
</source>
 
Оба способа одинаковы. Но второй короче.
 
Строка 174 ⟶ 177 :
 
<blockquote><i> Лучше писать все атрибуты и их значения маленькими буквами
Зачем? Ради будущего! :-)</i>
</blockquote>
 
Строка 181 ⟶ 184 :
 
==== Заголовки ====
Заголовки бывают шести уровней. Заголовки первого уровня — главные и самые большие, а заголовки шестого уровня даже меньше, чем текст абзацев. Ниже пример использования заголовков:
 
<source lang="html5">
Строка 228 ⟶ 231 :
 
Эта страница отобразится так:
 
{{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>
 
Строка 252 ⟶ 257 :
</html>
</source>
 
К сожалению, браузеры отвергают все символы переноса строки, табуляции, а также лишние пробелы. Поэтому этот стишок отображается в одну или несколько строк (в зависимости от ширины окна). Но есть выход.
 
Строка 376 ⟶ 382 :
Ещё немного о теге изменения шрифта. Шрифт может иметь три дополнительных атрибута: '''жирность (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> он помечает что текст был именно удалён как неверный и автор акцентирует пользователя на этом. Кроме тега удаления ввели тег вставки <code><nowiki><ins></nowiki></code>. Тег вставки указывает текст, который вставили после удаления. Выглядит такая вещь примерно так:
 
<source lang="html5">
Строка 566 ⟶ 572 :
<body>
<audio controls="controls">
<sourcsource src="music1.mp3" type="audio/mpeg" />
<sourcsource src="music2.mp3" type="audio/ogg; codecs=vorbis" />
</audio>
</body>
Строка 576 ⟶ 582 :
 
Дело в том, что браузеры не поддерживают все форматы музыки и порой приходится перекодировать вашу музыку в другие типы аудио, чтобы мелодия корректно отображалась в основных браузерах.
 
''По техническим причинам тег <nowiki><source /></nowiki> отображён как <nowiki><sourc /></nowiki>, правильно писать <nowiki><source /></nowiki>! ''
 
Подробно про атрибуты тега <code><nowiki><audio></nowiki></code>:
Строка 598 ⟶ 602 :
 
=== Картинки ===
До этого момента мы прочитали очень много текста о тексте. Конечно — текст важнейшая часть любой страницы (если конечно это не страница какой-либо галереи), но сплошной текст штука довольно скучная. Иллюстрированный текст выглядит намного лучше. Для вставки в текст изображения используют тег <nowiki><img /> </nowiki>. Его атрибут src задаёт источник (source) — файл, в котором содержится картинка. Этот тег одинарный, что означает, что когда мы пишем код, который отвечает новейшим стандартам, его нужно заканчивать так: <nowiki>/></nowiki>.
 
Иногда картинки не отображаются. Это происходит по разным причинам. Тем не менее, нужно чтобы пользователь и в таких случаях знал, что вы хотели ему показать. Для этого картинки имеют атрибут alt. Он задает текст, который отображается на месте картинки в тех случаях, когда сама картинка недоступна.
 
<blockquote>''Не стоит забывать о том, что картинки очень долго загружаются при медленном доступе к интернету. И даже когда доступ в интернет достаточно быстрый, некоторые пользователи исключают загрузку картинок в целях экономии. И это замечание актуально даже в 2011 году. Поэтому не пренебрегайте атрибутом alt. ''</blockquote>
 
Также мы можем изменить размер картинки. Например, если мы имеем маленькое изображение, мы можем его растянуть. Правда тогда оно будет отображаться несколько размыто. Также можно изменять размеры изображения вместе с изменением размеров окна браузера. Для этого размеры указывают в процентах. Размеры задаются атрибутами width и height. Пример:
Строка 688 ⟶ 692 :
=== Таблицы ===
 
Таблицы удобно задавать с помощью HTML, так как в HTML можно делать вложенные элементы. Таблица также состоит из вложенных элементов. Таблица (<nowiki> <table> </nowiki>) состоит из строк (<nowiki> <tr> </nowiki> — table row), каждая из которых также состоит из ячеек (<nowiki> <td> </nowiki> — table data). А внутри ячейки может быть уже все что угодно. Даже еще одна таблица. Выглядит это так:
 
{|Border=1
Строка 707 ⟶ 711 :
</source>
 
По умолчанию таблицы отображаются без границ:-). То есть границы невидимы. Это иногда полезно, но иногда мы хотим, чтобы границы были видны. Для этого задают значение атрибута <nowiki>border</nowiki>. Он задаёт толщину границ таблицы. (Правда только внешних). Если его значение ноль, то границы не отображаются.
 
Иногда надо назвать столбцы или строки, используют ячейку заголовка. Для этого вместо тега <nowiki><td></nowiki> пишут <nowiki><th></nowiki>. Выглядит это так:
Строка 734 ⟶ 738 :
</source>
 
Стоит заметить, что такой способ лучше чем писать содержимое ячейки в тегах <nowiki> <b> </nowiki> или <nowiki> <strong> </nowiki>. И не только потому, что так короче. А и потому, что потом можно будет применить к заголовкам таблицы отдельные стили.
 
Некоторые браузеры не отображают пустые ячейки (то есть не обводят их рамкой). Можете посмотреть что делает ваш, в предыдущем примере верхняя левая ячейка пуста. Чтобы обмануть браузер и заставить его отображать ячейку будто там что-то есть, мы можем положить туда невидимый символ -. Это символ несокрушимого пропуска:-) (Non Breakable SPace). Назвали его несокрушимым оттого, что слова, разделённые таким пропуском, переносятся на следующую строку только вместе.
 
Ячейки таблицы можно объединять. Делается это с помощью атрибутов colspan и rowspan тега <nowiki> <td> </nowiki>. colspan указывает на сколько колонок будет данная ячейка, а rowspan — на сколько строк. Такой код:
 
<source lang="html4strict">
Источник — https://ru.wikibooks.org/wiki/HTML