HTML: различия между версиями
Содержимое удалено Содержимое добавлено
Нет описания правки |
|||
Строка 1:
== Введение ==
Однажды я увидел книжку по web-дизайну, а поскольку я имел обыкновение читать всё что вижу, то я её прочитал. И с тех пор считал что знаю HTML. Но недавно мне сказали адрес одного хорошего сайта [http://www.w3schools.com/ www.w3schools.com]. Символы «w3» в названии сайта означают «три w», или «www». Что важного я там узнал? Во-первых, что мои знания несколько устаревшие. Во-вторых, то что мои теги распознаёт браузер, ещё не значит что так будет продолжаться и дальше. Поэтому я решил написать современную книгу о веб-дизайне.
[[Файл: Html-small.png]]
Строка 52:
== Структура страницы ==
=== К работе! ===
Лучший способ научиться что-то делать — сделать это. Не получится — учиться дальше. А получится — значит вы уже научились. :-)
Строка 61 ⟶ 60 :
# [[w:Текстовый редактор|Текстовый редактор]]
Раз вы читаете этот текст, две первые вещи у вас точно есть. Текстовый редактор также есть на каждом компьютере. Важно заметить: нам нужна программа для редактирования текстовых файлов, а не документов (т. е. не в ''коем случае'' нельзя использовать текстовые препроцессоры типа Microsoft Word). Обычно стандартного «Блокнота» Windows достаточно, но есть текстовые редакторы, которые лучше приспособлены к написанию HTML-страниц. Неплохой редактор для Windows [[w:Notepad++|Notepad ++]], в котором хорошо писать не только HTML, а и CSS, PHP, C++, и еще несколько десятков других языков. В нём есть такая хорошая вещь, как подсветка синтаксиса, которая позволяет выявлять ошибки прямо во время их создания :-). Если же у вас
О браузере также стоит сказать несколько слов. Все советуют держать у себя на компьютере набор браузеров: IE, Firefox, Opera, Chrome, Safari и просматривать свои страницы во всех сразу. Правда, функции тегов в разных браузерах отличаются не сильно (а в идеале вообще не отличаются). Поэтому учиться можно, просматривая свои страницы в одном из них, а уже когда пишете что-то большое — посмотрите, не имеется ли слишком критических различий во всех других.
Чтобы создать веб-страницу, нужно создать в файловой системе текстовый файл с расширением .html или .htm . Какое из них выбрать — философский вопрос. .htm — сокращение от .html, что довольно смешно, поскольку .html это тоже сокращение. Но были времена, когда в некоторых ОС расширение файла могло содержать максимум 3 символа (например, DOS), и страницы гипертекста имели расширение .htm . Теперь можно использовать оба расширения.
=== Содержание веб-страницы ===
Веб-страницы состоят из [[w:Гипертекст|гипертекста]]. Гипертекст отличается от обычного текста тем, что содержит гиперссылки. Они обычно обозначены подчеркиванием и синим цветом, и позволяют сделать гиперскачок в <s>другую вселенную</s> другой гипертекст, или любое другое место (якорь), указанное с помощью [[w:URL|URL]]. Гипертекст состоит из тегов. ▼
▲Веб-страницы состоят из [[w:Гипертекст|гипертекста]]. Гипертекст отличается от обычного текста тем, что содержит гиперссылки. Они обычно обозначены подчеркиванием и синим цветом, и позволяют сделать гиперскачок в <s>другую вселенную</s> другой гипертекст, или любое другое место, указанное с помощью [[w:URL|URL]]. Гипертекст состоит из тегов.
URL (''Universal Resource Locator'') — адрес ресурса, который мы видим в адресной строке браузера.
Тег — всё, что находится между угловыми скобками. Например <code><nowiki><html></nowiki></code>. Теги не отображаются браузером, они только задают структуру текста. Теги бывают трёх видов: открывающие, закрывающие и одинарные. Открывающие и закрывающие теги всегда ходят парами. Закрывающий отличается от открывающего тем, что после
<blockquote>''Важно знать, что начиная с версии HTML 4.01 (точнее XHTML 1.0) все теги должны быть написаны маленькими буквами. ''</blockquote>
Строка 97 ⟶ 95 :
</source>
Все теги, которые встречаются выше, обязательны. Они присутствуют в каждой интернет-странице. Конечно, если вы какой-то из них забудете, браузер-то разберётся, но все серьёзные люди такие вещи не забывают. Тег <nowiki>html</nowiki> говорит браузеру, что в нём содержится код HTML. Тег <nowiki>head</nowiki> говорит, что в нём содержится заголовочная информация страницы. Эта информация на самой странице отсутствует. Тег <nowiki>title</nowiki>, как уже было сказано, содержит заголовок, который отображается в строке заголовка. <code><nowiki><body></nowiki></code> содержит тело, или содержимое страницы.
Кроме тегов и текста, гипертекстовые страницы могут содержать комментарии. Комментарии выглядят так: <nowiki><!-- Комментарий --></nowiki>. Они позволяют писать на странице текст, который не отображается браузером. Это нужно для вставки сообщений типа <nowiki><!-- Здесь не забыть дописать абзац о комментариях --></nowiki>.
Строка 113 ⟶ 111 :
<body>
Каждая HTML-страница начинается с тега <html>.
</html>
</source>
Такая страница отображается браузером неправильно, потому что браузер не выводит теги. А <code><nowiki><html></nowiki></code> — тег. Такая же проблема и с символами сравнения. Поэтому, чтобы отображать некоторые нестандартные символы, существует понятие специальных символов. Специальные символы в HTML описываются так: &код;. Например:
{|Class="wikitable"
Строка 131 ⟶ 129 :
| Амперсанд || &amp; || &
|-
| Кавычка || &quot; ||
|}
Строка 197 ⟶ 195 :
</html>
</source>
Эта страница отобразится так:
{{CSS:rendered|1=<h2>Пролог</h2><h3>О хоббитах</h3><p>В этой книге речь пойдет преимущественно о хоббитах, и с ее страниц читатель узнает немало об их ... и т. д. </p><h1>Братство кольца</h1><h2>КНИГА ПЕРВАЯ</h2><h3>I Долгожданная гостиная</h3><h3>... и т.д. </h3><h3>XII Побег к броду</h3><h2>КНИГА ВТОРАЯ</h2><h3>...и т.д. </h3>}}
<blockquote>''Я здесь пишу и пишу примеры. Не забывайте пробовать что-то сами! Или хотя бы по крайней мере посмотрите как будут выглядеть примеры страниц, которые вам даются, в вашем браузере (а если у вас несколько браузеров, то не забывайте посмотреть как выглядит страница в других!). ''</blockquote>
Строка 682 ⟶ 681 :
Кроме строк таблица может иметь заголовок. Тег <nowiki><caption></nowiki> предназначен для создания заголовка к таблице и может размещаться только в середине тега <TABLE>, причём сразу после открывающего тега. Такой заголовок представляет собой текст, который по умолчанию отображается перед таблицей и описывает её.
Также можно выделить строки таблицы в группы, с различным функциональным назначением и назначить им разные стили. Ой как мне не терпится уже дойти до стилей. Но по порядку. Можно выделить заголовочный часть <nowiki><thead></nowiki>, основную часть <nowiki><tbody></nowiki> и итог <nowiki><tfoot></nowiki>.
== См. также ==
* [[HTML5]]
* [[Самоучитель HTML]]
| |||