Смотрим как устроена web страница

Следующая статья: Как создать первую web (html) страницу

Содержание

Вводная
Что все-таки представляет собой язык HTML?
Язык HTML
Теги как база html
Структура html документа
Комментарии в HTML коде

Вводная

Чтоб проще было осознать, как «устроена» web страничка, загрузим какой-либо документ из WWW и разглядим его строение. Загрузим в качестве примера главную страничку web сайта sd-company.su.

Загрузите в браузер главную страничку web сайта sd-company.su.

Когда вы загружаете из WWW хоть какой документ, то его текст в окне вашего браузера отображается в отлично отформатированном, комфортном для просмотра виде. Это означает, что web странички представляют собой не обычный текст, а содержат также некую вспомогательную информацию для управления представлением документа в окне вашего браузера. Так как при разработке документа не понятно, на компьютере какого типа пользователь будет его просматривать, то web странички не могут готовиться и храниться в формате, разработанном для определенной компьютерной платформы, к примеру, в формате Microsoft Word для Windows ХР. Для того, чтоб пользователь, работающий на компьютере хоть какого типа, лицезрел документ, отформатированный соответствующим образом, употребляется разработанный специально для этого язык HTML.

Что все-таки представляет собой язык HTML?

Если вы работаете с браузером Internet Explorer, то изберите команду меню Вид - Просмотр HTML кода (View - Source). На дисплее появится окно с начальным кодом этой странички на языке HTML.

В FireFox либо Гугл Chrome довольно надавить CTRL+U

Вид web страничек в Интернет очень нередко изменяется. Но для нас на данный момент это не значительно.

HTML - HyperText Markup Language (Язык разметки гипертекста)

HTML - HyperText Markup Language (Язык разметки гипертекста) представляет собой достаточно обычный набор команд, описывающих структуру документа. Этот язык разметки позволяет выделить в документе отдельные логические части - заглавия, абзацы, таблицы, списки-перечисления и так далее, но не задает определенные атрибуты форматирования. Определенный вид форматирования определяет сам браузер при чтении документа, и конкретно браузер обеспечивает лучшее отображение web документа на вашем экране.

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

Язык HTML

Язык HTML существует в нескольких вариантах, либо спецификациях. Как и версии программных товаров, спецификации пронумерованы: 2.0, 3.0, 3.2, 4.0. Любая следующая спецификация представляет собой расширение и дополнение предшествующей. Мы будем использовать конструкции последней спецификации HTML 4.0, которые поддерживаются последними версиями большинства всераспространенных браузеров.

Документ в окне с кодом HTML - это текстовый документ специального формата. Все файлы этого формата имеют расширение .html либо .htm. В документе HTML обыденный текст смешивается с элементами разметки, заключенными в угловые скобки < и >, к примеру, <html>, <head>, <title>, </title>. Такие элементы разметки именуются тегами. Теги бывают одиночными, открывающими и закрывающими и состоят из последующих вереницей в определенном порядке частей:

левой угловой скобки <;
необязательного знака слэш /, который значит, что тег является конечным тегом, закрывающим некую структуру, к примеру, </title>. В этом смысле можно читать знак / как конец некого элемента разметки, к примеру, строчки либо абзаца;
имени тега, к примеру, html;
необязательных атрибутов. Тег может быть без атрибутов либо сопровождаться одним либо несколькими атрибутами, к примеру, align="center";
правой угловой скобки >.

Таким макаром, открывающий тег <html>, стоящий сначала документа HTML и значащий его начало, состоит из имени html и двух угловых скобок < >, а тег </html>, находящийся в конце web документа, не считая обозначенных частей содержит также знак слэш /, значащий закрывающий тег и указывающий на конец документа. Тег <script language="vbscript"> значит начало кода интегрированной в документ программы-сценария. Этот тег содержит, не считая имени script, атрибут language со значением "vbscript", значащий, что сценарий написан на языке vbscript.

В тегах могут употребляться только знаки латинского алфавита, а в значениях атрибутов - любые знаки. Если в качестве значений атрибута употребляются, к примеру, знаки кириллицы, то они обязаны быть заключены в кавычки, к примеру, name="Раздел 1".

Язык HTML не различает огромные и малые буковкы, так что теги <HEAD>, <head> и <Head> эквивалентны. Но вот в 2010 году консорциум w3c, взявший на себя ответственность навести порядок в сфере спецификации html языка, в новейшей спецификации HTML5 безотступно советует писать теги малеханькими знаками, и на другими словами весомые предпосылки. Потому дальше мы будем использовать написание тегов в нижнем регистре.

Теги как база html

Большая часть тегов являются парными: за открывающим тегом следует соответственный ему закрывающий тег, а меж ними содержится текст либо другие теги, к примеру:

<title>Книжный Интернет-магазин Три Cтупеньки</title>

В таких случаях два тега и часть документа, заключенная меж ними, образуют блок, именуемый элементом HTML. Некие теги, к примеру, <hr>, являются одиночными и для их закрывающий тег не применяется. Такие теги сами по для себя являются элементами HTML.

Большая часть тегов могут иметь один либо несколько атрибутов - характеристик, дающих дополнительную информацию о том, как браузер должен обрабатывать текущий тег. Но атрибутов может и не быть совсем. Атрибут тега состоит из имени, к примеру, align, знака равенства = и значения, которое задается строчкой знаков, к примеру, "center": align="center". Значения атрибутов обычно заключаются в кавычки. Но если эти значения употребляют только знаки латинского алфавита, числа и дефисы, то кавычки можно опустить, к примеру: align=center. Но опускать кавычки категорически не рекомендуется в силу ряда обстоятельств связанных с предстоящей интеграцией html с javascript и php языками. Потому вырабатывайте привычку сходу писать атрибуты в кавычках.

Структура html документа

Каждый HTML документ имеет определенную структуру, которая смотрится последующим образом:

<html>
<head>
…
</head>
<body>
</body>
</html>

Структура HTML документа содержит последующие неотклонимые элементы:

теги <html> и </html>, которые отмечают начало и конец документа;
заголовок, ограниченный тегами <head> и </head>;
тело, ограниченное тегами <body>…</body>.

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

Не считая элемента <title>…</title>, заголовок может содержать элементы <meta>…</meta>, к примеру, <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">, для указания инфы о документе. Открывающий тег <meta> включает пары имя=значение, описывающие характеристики документа, к примеру, тип документа, его шифровку, авторство, перечень ключевиков и так далее Эти данные употребляются также поисковиками при индексации документов.

Комментарии в HTML коде

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

Изучая язык HTML, очень полезно просматривать и рассматривать HTML код web страничек, сделанных опытнейшими мастерами. Это помогает резвее освоить и осознать принципы и структуру языка.

Закройте окно с кодом HTML.

Закройте также программу-браузер.

Сейчас, когда мы представляем для себя внутреннее устройство web страничек, можно приступить к их созданию.