HTML — язык с которым впервые сталкивается начинающий Web-дизайнер. Вообще-то HTML первоначально предназначался для создания структуры текстовых документов и всех заинтересованных лиц устраивал. Потом как известно родился интернет и началось нашествие... Нарастающая лавина пользователей срочно потребовала: «Сделайте нам красиво»! И машина завертелась! Сайтостроители, пользователи, браузеростроители требовали от изобретателей HTML, расширения возможностей языка! И началось... Вторая версия, третья, четвёртая! И тут все поняли, что HTML изжил себя, это тупик, дальше ехать некуда!
Хотя?! Появилась на свет божий пятая версия HTML-5. Я как-то (после переезда на ПРОЗу) отдалился от всяких HTML-страстей-мордастей... Надо бы вникнуть в суть 5-й версии... Что это? Очередная каша из топора (HTML) или более сильное слияние HTML с CSS?
Но это было лишь начало кризиса! К выходу четвёртой версии HTML, накопилась масса проблем и противоречий, а всё из-за того, что каждая фирма-изготовитель браузеров старалась выделится и что-нибудь отмочить своё! От такого WEB-бардака, Web-дизайнеры сходили с ума, не зная как сделать так, чтобы страницы выглядели одинаково на всех известных браузерах! Более всех упёртым оказался Майкрософт со своим Internet Explorer! Наконец-то всем, всё надоело и всех фигурантов посадили за один стол, чтобы договориться хотя бы о каком-нибудь порядке! Так родился W3C ( World Wide Web Consortium), который и стал разрабатывать некие стандарты для WEB. Как следствием этих родов появился расширяемый HTML — XHTML и каскадные таблицы стилей — CSS!
XHTML. Я не буду изобретать велосипед, а просто процитирую автора книги «HTML, CSS, Скрипты: практика создания сайтов», Артемия Ломова! «Развитием HTML 4 стал расширяемый (eXtensible) язык разметки гипертекста — XHTML 1.0, по сути своей явившийся лишь переформулировкой стандарта HTML 4.01 в соответствии с правилами XML 1.0, XHTML 1.0, за исключением ряда нюансов, в точности повторяет функциональность HTML 4.01 и включает в себя всё те же три типа документов: Strict, Transitional и Frameset.» Вы что-нибудь поняли? Я тоже нет! По-русски: появилось много всякого такого, что и заставило о наведении порядка в деле сайтостроительства и браузеростроительства тоже! Создание неких стандартов, правил и вообще. В общем виде если вы хотите, чтобы ваш сайт более-менее правильно отображался во всех (в большинстве) браузерах, вам необходимо объявить тип вашего документа, из перечисленных выше и привести его (документ) в соответствие! Во как закрутил!
Strict — строгий, полное соответствие XHTML 1.0 и никаких гвоздей!
Transitional — переходной, можете расслабиться, но не очень...
Frameset это тоже самое плюс используются фреймы.
Еже ли вы никак не обозначите свой документ, то браузер посчитает, что нет никаких стандартов и отобразит документ как ему вздумается, под настроение?! Всеми стандартами аж с 94-го года и занимается W3C. Все эти стандарты носят рекомендательный характер и ни к чему не обязывают! Ваше право выбора, вам же всё это нужно! Ну, а уж если вы решились быть, «самых честных правил», то надо бы поближе познакомиться с этими правилами хорошего тона! Их, этих правил, всего девять! Так, что если вы до десяти считать умеете, XHTML 1.0 вы осилите! Правила можно найти на сайте W3C, а в литературе, в книге, автор Чарльз Уайк-Смит «Стильный сайт с помощью CSS». В несколько сжатом виде эти девять правил ниже по тексту.
ДЕВЯТЬ ПРАВИЛ РАЗМЕТКИ XHTML
1) Указывайте DOCTYPE.
Тег DOCTYPE сообщает браузеру как понимать (обрабатывать) страницу? Создана эта страница с применением HTML, XHTML или всё вместе? Существует три типа DOCTYPE:
Strict — код полностью совместимый с XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Transitional — переходной вариант, с использованием как HTML, так и XHTML!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
Frameset — тот же переходной вариант но, уже с применением фреймов:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Если не указать DOCTYPE, то браузер будет отображать страницу так, как будто и нет никаких WEB-стандартов, в смысле по умолчанию.
2) Указывайте пространство имён XML.
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
На сегодняшний день это выражение не имеет смысла, так как браузеры всё равно не реагируют на это! Но в будущем откажутся вас понимать! Теоретически браузер должен проверять всё ли соответствует XHTML, но проверяет ли он в действительности? Так, кто ж вам скажет!?
3) Укажите тип содержимого.
<meta http-equiv="content-type" content="text/html; charset=windows-1251" / >
Нужная вещь и указывает на то, что кодировка документа, windows-1251 и располагается в документе вместе со всеми meta-ми.
4) Закрывайте все теги, вмещающие и не вмещающие.
HTML позволял много всяких вольностей, даже отсутствие закрывающих тегов! В XHTML такой номер не пройдёт! Не вмещающие теги это те, что не имеют внутри себя содержимое. Так в XHTML выглядит тег вставки изображения:
<img src="image.jpg" alt="картинка" /> или тег принудительного перехода на новую строку <br />.
Правда, на ПРОЗе похоже про всякие W3C, XHTML впервые слышат?! Они вместо <br />, всё ещё лепят <br>! Зайдите в код любой страницы и сами всё увидите.
5) Следите за вложенными тегами.
Теги вкладываются друг друга, в общем виде, как матрёшки! Открывающий и закрывающие теги, как бы границы матрёшек!
Пример: <div>В блочный элемент div вмещаются два абзаца p <p>Это первый абзац</p><p>Это второй абзац<span>с вложенным строчным элементом span, который может изменить вид содержимого, если к нему применить правила CSS.</span></p></div>
Проще говоря, если вы открыли тег, то будьте добры и закрыть его!
6) Строчные теги не могут содержать блочные теги.
7) Указывайте теги только строчными буквами.
8) Для всех атрибутов необходимо указывать значения в кавычках.
Пример из вышестоящего правила:<img src="image.jpg" alt="картинка" />
9) Используйте кодовый эквивалент левой угловой скобки и амперсанда.
Это правило актуально для тех, кто применяет в тексте эти скобки и амперсанды. Тот кто размещает на страницах всякие листинги! Если непосредственно с клавиатуры ввести всё это, то браузер отреагирует на листинг как на код, а не на текст. Загляните в код этой страницы и увидите эти самые кодовые эквиваленты!
Со временем всё меняется и в том числе эти самые DOCTYP-ы и не исключено, что вставив в свою страницу DOCTYPE можете получить отказ валидатора от W3C. Так, что следите за рекламой!
Ну, ладно! В смысле хорошо, будем знать, что такое HTML и XHTML. Но это одни ля-ля. На первой мини-лекции мы узнали про эти чёртовы с матрёшками теги. И это всё? Не-е-ет, не всё и очень даже не всё?! Посмотрите на рис2. Это пример тега FONT (шрифта). Если мы заключим в скобочки только слово font и всё, то браузер встанет в ступор! Это всё равно брать билет в никуда?! Браузер не знает, что с этим делать? Значит надо присобачить аргумент и мало того обозначить его значение. Вот на примере всё ясно его размер (чего мы хотим?) SIZE = 5. А на рис1 Вы и видите какие размеры это SIZE может принимать? От 1 до 7. 1 — самый маленький, 7 — самый большой. На рис5а первые два слова размер шрифта 7, а вторые 6. На рис5 теги родившие текст на рис5а, но? Но там размер 4. Главное чтобы Вы видели как работают все три аргумента тега FONT? Кроме size добавились ещё FACE, название шрифта и COLOR, думаю догадались, что цвет?! Для Arial цвет красный RED, а для СORONET голубой (синий) BLUE.
На рис1 кроме FONT показаны атрибута тега Р. Там всё ясно и так. В самом низу тег BR который не имеет атрибутов, но браузер в курсах, что ему делать? Правильно переводить на другую строку. Как в пишущей машинке когда надо, дёрг по рычагу и каретка шарахнулась назад как переход на новую строку.
Перейдём и мы на новый рисунок 3. Здесь Вы видите тег IMG — изображения. Правда здесь только один аргумент SRC, указывающий на URL местонахождения файла изображения. В нашем случае изображения находится в одной папке с HTML-документом. Для IMG в HTML закрывающий тег отсутствует, а XHTML нужно ставить в конце тега косую черту, как на рис3. Кроме того обязательны и остальные атрибуты которые Вы и видите ниже. В принципе размеры можно и не указывать, всё отобразится. Но так полагается, это с одной стороны. А, с другой если Вы хотите по какой-либо причине показать увеличенную (уменьшенную) картинку. Но нужно точно знать размеры аналога. Вот как пример картинка на рис4, внизу ширина и высота заданы правильно. На рис3 же ширина на 30 пикселов меньше чем у оригинала. Результат Вы и видите. Иногда это делается преднамеренно, чтобы обмануть отслеживающе-блокирующие системы, блокирующие изображения с содержанием «нехороших» картинок!
На рис6 Вы видите (в картинках) иерархию HTML-документа. Это только один вариант, но всё же. Здесь применяют обычные человеческие понятия: предки-потомки; родители-дети; братья-сёстры. Мы не будем досконально всю эту лабуду рассматривать, но Вы должны быть в курсе, на будущее. BODY — предок всех нижележащих! Остальное и сами догадаетесь, кто есть кто?..