Безумная Aza (merengue) wrote,
Безумная Aza
merengue

Урок 2. Структура html-документа

Ну что, дорогие мальчики и девочки. Первый урок осилили? Домашнее задание сделали? Как это - "ничего не задавали"? А html-редакторы поставили? Опробовали? А справочник полистали? Как - нет? А кто за вас все это делать будет? А ну бегом за работу! Пришли учиться, так учитесь по-настоящему. Хочу вам сказать, что в HTML и учить-то особо нечего. Пары-тройки уроков на весь HTML нам должно вот так хватить. Так что настраивайтесь, настраивайтесь.

Сегодня поговорим о структуре html-документа и некоторых важных тэгах разметки. Ах, да, вот чего. Надеюсь, все знают, как просмотреть исходный код страницы, которая открыта в вашем браузере? А это один из самых важных навыков вебмастера :))) Так вот, в любом браузере выберите в меню View → Source (или Source Code, или Page Source). (У меня нет под рукой русскоязычного браузера, поэтому, плиз, киньте мне в коммент, как эти пункты меню обозвали наши локализаторы в IE, Firefox и Opera.) Ну как, видите перед собой кучу всякого непонятного кода? Пойдем в нем разбираться!

Наверняка первым, что вы увидите сверху, будет что-то вроде этого:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Это - доктайп, объявление типа документа. Какими бывают типы html-документов и для чего они нужны, мы поговорим немного позже, через несколько уроков. Некоторые вебмастера вообще не объявляют доктайп, но это их личные предпочтения. По правилам хорошего тона лучше все-таки вписать эту строчку в ваш документ. Многие html-редакторы при создании нового документа делают это автоматически.

Дальше идет непосредственно html-документ, начинается он с тэга <html> и заканчивается таким же закрывающим тэгом. Браузер принимает во внимание все, что заключено в контейнере <html>, а все, что за его пределами - игнорирует.

Еще два важных контейнера разделяют наш документ на две части: заголовок (head) и тело (body) документа. Эти тэги ни в коем случае не должны перекрывать друг друга, так что всегда следите за тем, чтобы тэг <head> закрывался до того, как начнется тэг <body>. В заголовке содержится служебная информация для браузера, поисковых машин. А в теле документа - все то, что мы видим в окне нашего браузера - картинки, текст, таблицы и многое другое. Внутри тэга <head> разрешены только некоторые тэги, внутри <body> - все остальные. Ниже вы можете видеть небольшое схематическое изображение структуры html-документа:

HTML
HEAD
BASE, BASEFONT, BGSOUND, LINK, META, SCRIPT, STYLE, TITLE
BODY






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

<link> - устанавливает связь с внешним документом, вроде файла со стилями или со шрифтами.
<meta> - определяет метатеги, которые используются для хранения информации, предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. О метатегах и их необходимости мы поговорим в одном из следующих уроков.
<script> - для описания скриптов, может содержать ссылку на программу или ее текст на определенном языке. Скрипты могут располагаться во внешнем файле и связываться с любым html-документом.
<style> - определяет стили элементов веб-страницы. Готовьтесь морально - как только мы пройдем HTML, мы посвятим много-много времени стилям и каскадным таблицам стилей (Cascade Stylesheet, CSS), с ними можно выделывать такое, чего вам и не снилось! :)
<title> - определяет заголовок документа. Вот как раз вам задание по внеклассному чтению: зачем нужен заголовок документа и где он отображается.
!!!
Все, что вы расположите между знаков <!-- и -->, в HTML является комментарием и не отображается браузером. Пример использования:

<!-- Это комментарий -->

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


Ну вот мы и подобрались к нашему первому практическому занятию: открывайте ваш редактор и пишите следующее (если ваш редактор не вставил это автоматически):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>(Здесь вставьте ваш заголовок)</title>
</head>
<body>

</body>
</html>



И вот вам вторая порция внеклассного чтения: прочитайте и примените на практике различные параметры для тэга <body>. Обратите внимание, как в HTML прописывается цвет элемента. Можно задавать цвет по его английскому названию (red, blue, silver, navy, и т.д.) - вот вам табличка названий, которые понимают браузеры. А можно - по шестнадцатеричному значению цвета в записи #rrggbb. В большинстве графических редакторов можно получить шестнадцатеричное (hexadecimal или hex) значение цвета, ткнув в палитру выбора цвета. И еще в помощь вам есть малюсенькая программка ColorPix, которая показывает значение цвета любого пикселя, выбранного на вашем экране. Очень полезная штучка, рекомендую скачать:



Домашнее задание: прочитать следующие статьи и применить на практике данные в них примеры:

Отсылаю вас к справочнику и онлайн-мануалу, потому что там все это изложено более чем доступно. Если что-нибудь будет непонятно, спрашивайте здесь. В следующем уроке мы займемся таблицами и списками, а на сегодня всё!

Кстати, вдогонку. Тут нашелся такой бесплатный хостинг, Hut.Ru, предлагает много заманчивого: и FTP, и базу данных, и PHP, и SSI, и шелл даже! Думаю, что для тренировок есть смысл зарегистрироваться там. Кто-нибудь пробовал этот хостинг, насколько он глючен и капризен? И соответствует ли заявленным обещаниям?
Tags: сайтостроение
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 25 comments