Рассылка закрыта
При закрытии подписчики были переданы в рассылку "Мой альтернативный доход" на которую и рекомендуем вам подписаться.
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
Разработка и оптимизация сайтов
Здравствуйте! С Вами Павел Любимов и это третий выпуск рассылки "Разработка и оптимизация сайтов". В этом выпуске я расскажу об общем устройстве страницы HTML, о правилах, которые следует соблюдать при ее создании и о документе, в котором эти правила изложены. Также сегодня я более подробно расскажу о командах HTML. Приступим. DOCTYPE. Устройство документа HTML.Документ HTML можно вполне сравнить с обычным бумажным документом. Внешний вид большинства документов стандартизирован. Расположение текста, печатей, цветовая гамма, даже бумага. Все имеет значение и весь этот набор отличительных признаков именуется "бланк". С html-документами приблизительно то же самое. Можно размещать практически любой материал на web-странице от простого текста до мультимедийного контента (например, видео). Но размещается все это внутри стандартного бланка. Как же выглядит бланк html-документа? Обратимся к иллюстрации:
Давайте разберем - что входит в состав бланка html-документа.
Тип документа определяется при помощи DOCTYPE. DOCTYPE - это декларация. Она определяет тот набор команд, который можно использовать при верстке (создании) web-страниц. Может возникнуть вопрос: "А что, наборов команд несколько?". Не совсем так. Набор тегов один, просто существует устаревший набор HTML 3.2, существует переходной набор (от версии 3.2 к версии 4.0), содержащий в себе часть устаревших тегов - HTML 4.01 Transitional. И, разумеется, существует набор тегов, полностью соответствующий нынешней спецификации HTML 4.01 Strict. В этом наборе полностью отсутствуют устаревшие теги. Только не поймите меня неправильно. Набор тегов - это не набор ключей, его нельзя скачать или установить. Просто, объявляя тип документа (DOCTYPE), Вы автоматически соглашаетесь использовать четко определенный набор тегов. Выход за рамки этого набора хоть и обработается ПА, но будет считаться ошибкой при проверке документа. Или может случиться так, что некоторые теги просто не станут работать. Думаю, назначение DOCTYPE более чем понятно. Теперь о том, какие DOCTYPE бывают. Их почти 10 видов, однако к верстке сайта на HTML прямое отношение имеют 3:
Первая декларация - переходная (с устаревшими тегами), вторая строго соответствует стандарту, а третья относится к верстке страницы на фреймах. Теги при этом используются практически те же, что и в первых двух случаях, а вот структура страницы в корне отличается от той, которую я привел на схеме выше. Поэтому о фреймах мы поговорим чуть позже, когда Вы немного освоитесь. Я посвящу этому отдельный выпуск. Итак, бланк документа начинается с DOCTYPE. Советую сразу использовать Strict, поскольку сам стандарт HTML 4.01 уже достаточно стар и его в скором времени сменит HTML 5.0. Я думаю, не стоит приводить документ к устаревшему виду, используя Transitional. Некоторые теги, как я уже писал, работать не будут, однако этот пробел легко можно будет восполнить средствами CSS. О том, как это реализуется на практике, я подробно расскажу и покажу в следующих выпусках. А пока давайте переходить к следующему пункту схемы - границам содержимого. По сути тут особо сказать и нечего. Все, что Вам необходимо знать по данному пункту - это то, что он обязательный. Назначение тега <HTML></HTML> - указывать обозревателю место начала и конца документа. То есть с чего начинать обрабатывать документ и в каком месте эту обработку завершить. Идем дальше. Контейнер <HEAD></HEAD> содержит внутри себя техническую информацию, предназначенную для программы, которая будет обрабатывать страницу. Пользователь, за очень редким исключением, содержащуюся в этом блоке информацию не видит и никак не воспринимает. Это именно техническая часть документа, именуемая также "шапкой". Если DOCTYPE объявляет - какие теги используются в документе, то тут содержатся настройки для тегов, которые будут использованы. Помните, мы говорили об атрибутах тегов и каскадных таблицах в прошлом выпуске рассылки? Вот как раз в этом блоке указываются ссылки на таблицы стилей, пишутся сами стили и указывается другая техническая информация. О том, какая конкретно информация должна тут содержаться, в следующем выпуске. А пока переходим к последнему пункту. Информационный блок <BODY></BODY> содержит внутри себя отформатированный текст (гипертекст), о котором шла речь в первом выпуске, картинки (графику), мультимедийный контент (аудио, видео). Одним словом всю ту информацию, которую Вы видите на экране, посещая интернет-страницы. Практически вся информация, содержащаяся в блоке <BODY></BODY> отображается на экране. С помощью большого числа тегов и атрибутов эта информация соответствующим образом форматируется (настраивается). В качестве примера можно привести строчку текста из прошлого выпуска, отформатированную в абзац. В следующих выпусках я познакомлю Вас с большинством тегов, применяющихся при верстке страницы по декларации HTML 4.01 Strict. В данном же выпуске мне осталось подробнее рассказать о самих тегах и о спецификации Strict как о документе. Если Вы внимательно читали предыдущие выпуски, то уже успели для себя отметить по крайней мере одну особенность тегов - их парность. А именно различия в написании тега переноса строки <BR> и тега <P></P>, например. Сейчас объясню в чем тут разница. Вы набираете в адресной строке обозревателя произвольный адрес. Нажимаете клавишу Enter и ПА начинает загружать страницу. При обработке ему встречается тег <BR> и программа выполняет действие - переносит строку. Встретила команду и выполнила действие. Команда <BR> относится к конкретной строке текста. Перенос строки означает, что задача выполнена. Более ни от чего выполнение этой команды не зависит. Теперь обратимся к тегу абзаца <P></P>. Вот обозреватель наткнулся на первую открывающий тег <P>, следовательно он обработает весь текст, находящийся справа от данной команды. Но как программа поймет, когда надо закончить обработку текста? Тут есть три варианта: либо программа встретит закрывающий тег </P> и остановит выполнение задачи, либо ей встретится новый открывающий тег <P> и ПА начнет строить новый абзац текста, либо обозреватель не встретит ни того, ни другого и отформатирует весь текст как один абзац. В этом случае говорят, что тег <P> парный, но закрывающий тег необязателен. Соответственно, есть команды, где закрывающий тег обязателен. К этой категории относятся рассмотренные сегодня парные теги <HTML></HTML>, <HEAD></HEAD> и <BODY></BODY>. Запомните пару терминов (я буду пользоваться ими в дальнейшем). Начальный тег - начало выполнения команды. Конечный тег - конец выполнения команды. Итак, что мы имеем... Существует три категории тегов:
У тегов могут быть обязательные и необязательные атрибуты. Например, тег размещения графики <IMG> имеет обязательный атрибут "alt". Если картинка не загрузится, пользователь увидит подпись, содержащуюся в атрибуте "alt". Таким образом можно будет определить тематику картинки и то, что она должна быть. В противном случае(если "alt" проигнорирован разработчиком)пользователь ничего не увидит. По этой причине тег <IMG> имеет обязательный атрибут "alt". <IMG src="image.png" alt="изображение в формате PNG">
Спецификация HTML 4.01 Strict. Напоследок скажу пару слов о спецификации (декларации). Сразу отмечу, что раз уж мы занимаемся изучением языка HTML, правильнее называть этот документ спецификацией HTML, хотя встречаются оба термина и оба в принципе правильные. Однако далее я буду употреблять термин "спецификация". Спецификация - это по сути единый документ. В нем содержатся все теги. Только в комментариях к тегам указан их статус "рекомендован", "не рекомендован" и "запрещен". Если использовать Strict, работать будут только рекомендованные теги, если применять Transitional - заработают не рекомендованные. Запрещенные теги будут работать, поскольку их поддержка до сих пор осуществляется обозревателями, но использовать их в корне не верно - это прошлый век. Уже скоро от их поддержки откажутся. В заключение выпуска иллюстрация на тему: Подведем итог: сегодня Вы узнали из чего состоит документ HTML. Как он выглядит, как устроен. С практической точки зрения Вы уже знаете достаточно для того, чтобы такой документ создать. Используя информацию из сегодняшнего выпуска можно получить следующее:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN>
Это уже нормальный html-документ, правда при его выполнении вы ничего не увидите. Но с точки зрения кода - полный порядок. Со спецификацией Вы можете познакомиться тут. Пока особо не вникайте, разберемся по ходу дела.
До следующей встречи!
Что дальше? В следующем выпуске мы приступим непосредственно к созданию html-документов, рассмотрим некоторые приемы, разберем простейшие примеры и немного поговорим о применении каскадных таблиц стилей. На сегодня все.
|
| В избранное | ||
