Всё для создания сайта - Первый шаг в ХТМЛ часть2

Специальные символы

Догадливый читатель уже мог задаться вопросом: если некоторые символы используются языком HTML как управляющие, то что делать, если надо, чтобы какой-нибудь из этих символов был показан на результирующей странице? И как, собственно говоря, в данном уроке были набраны теги HTML, почему они были показаны браузером, а не послужили ему командами? ;-)

Ответ прост: есть способ записи специальных символов. Он состоит в следующем: записывается символ амперсанд &, потом записывается имя или код символа, потом ставится точка с запятой.

Чтобы получить символ открывающей угловой скобки (знак меньше), надо написать

Некоторые полезные символы записываются следующим образом:

Символ	Смысл	Имя/Код	Расшифровка	Запись
<	открывающая угловая скобка, знак меньше	lt	less than	<
>	закрывающая угловая скобка, знак больше	gt	greater than	>
&	амперсанд (имеет смысл "и" в англоязычных странах)	amp	ampersand	&
"	кавычка	quot	quotemark	"
€	знак евро	#8364	-	€
§	знак параграфа	sect	section	§
α	греческая буква альфа	alpha	-	α
β	гречаская буква бета	beta	-	β
®	знак зарегистрированного товарного знака	reg	registered	®

Теги логического форматирования

На заре возникновения, язык HTML был прост, примерно так, как я рассказал. Но со временем интернет развился, в нем появилось множество типов файлов (картинки, программы, фильмы и др.), интернет становился больше и в нем становилось все труднее разбираться. Постепенно стало ясно, что вместо того, чтобы просто программировать облик текста, лучше программировать его деление на смысловые блоки.

И первый же смысловой блок, который мы рассмотрим - это самый крупный блок - сам документ. Незамысловато правда? ;-)

Этот блок обозначается тегом <html> и должен обрамлять весь документ. То есть, открывание тега <html> должно присутствовать в самом начале любого документа html, а закрывание - в самом конце.

<html>

...

</html>

Зачем это нужно?

Чтобы программы, блуждающие в интернете, в том чсиле браузеры, открыв документ HTML могли сразу же понять, что это именно он. Программы открывают файл и видят в самом его начале <html>. Ага, думают они, понятно, что с этим делать.

Итак, мы приходим к выводу, что два примера, рассмотренные нами выше (sample2-1 и sample2-2) были мной составлены логически неправильно - в них не было указано, что это документы HTML. Чтобы исправить неточность, нужно обрамить все содержимое документа тегом <html>. Получится более правильный пример - sample2-3.

Но это еще не все!

Дело в том, что внутри блока "документ" положено выделять еще два подблока - заголовок и тело. Заголовок - это блок, в котором указывается информация ОБ документе. Тело - это блок, который содержит сам документ. Заголовок кодируется тегом <head>, а тело - тегом <body>.

В нашем примере заголовка не было, то есть, мы ничего не говорили ОБ документе. Поэтому тег <head> нам был не нужен. А вот тег <body> мы должны были использовать, так как содержимое у нас было. Итак, еще более логически правильная версия примера получится, если обрамить содержимое тега <html> тегом <body>. Получится примерsample2-4, еще более правильный с логической точки зрения, но не отличающийся визуально.

Для чего может потребоваться заголовок документа (тег <head>)?

Вообще-то, у него много полезных функций, но нам сейчас будет понятна и полезна одна - внутри тега <head> можно использовать тег <title>, который управляет тем, что отображается в заголовке окна браузера.

Таким образом, пятая версия примера выглядит так

<html>

 <head>

 <title>Пример 5-й версии</title>

 </head>

 <body>

 Hello, <b>world</b>! <br>

 Привет, <b>мир</b>!

 </body>

</html>

Здесь использован также тег , чтобы разбить строку на две. Обратите внимание на стиль записи кода "лесенкой" - он позволяет визуально отличить вложение тегов друг в друга.

Данный текст находится в файле sample2-5, посмотрите его. Видите, что в заголовке окна теперь написано не то, что впредыдущем случае?

Несмотря на то, что мы уже практически приблизились к логически идеальному документу, это все еще не он: у нас использованы два физических тега - и . Вместо них также рекомендуется использовать логические. Вместо тега надо использовать тег , а в место тега - разбиение текста на абзацы при помощи тега-контейнера .

Зачем это нужно?

Одно из возможных объяснений таково: в разных странах выделение главной или важной мысли может осуществляться по-разному: у одних это подчеркивание, у других курсив, у третьих - жирный шрифт. Если набирая текст вы хотите написать именно что-то важное, то используте тег . Эти вы просто пометите часть текста, как важную. А отобразится ли она жирным шрифтом или подчеркиванием - вас волновать не должно.

Разумеется, если вы хотите именно физически подчеркнуть текст - то тогда наоборот, правильнее использовать тег физического форматирования текста .

Итак, окончательная, самая логически правильная версия примера приведена в файле sample2-6.

Вот некоторые теги логического форматирования, которые вам могут пригодиться:

(paragraph, абзац) - используется для обозначения абзацев текста
с <h1> по <h9> (heading, заголовок) - используется для обрамления заголовков в тексте
(сильный) - сильная мысль, обычно отображается жирны шрифтом, используйте вместо тега b
(emphasis, выделение) - важная мысль, обычно отображается курсивом, используйте вместо тега i
<cite> (цитата) - используется для обрамления цитат, обычно изображается курсивом
<del> (deleted, удаленный) - используется для пометки удаленного текста, обычно изображается зачеркнутым шрифтом