My First Site

При создании HTML-страницы элементы позиционируются согласно положению их кода в общем коде страницы. Говоря другими словами, если код блока помещен внутрь кода ячейки таблицы, то и на странице этот блок будет внутри этой ячейки. При таком положении дел невозможно представить, как, допустим, частично наложить один элемент на другой. Однако, это возможно при помощи абсолютного позиционирования элементов. При этом положение элемента определяется не положением его HTML-кода в исходном коде страницы, а его координатами, заданными с помощью CSS-стилей left и top.

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

top: 200px; left: 300px;

то расстояние его верхнего края до верхней границы страницы равно 200 пикселей, а расстояние левого края до левой границы страницы - 300 пикселей:

Помимо стилей left и top, элементу необходимо также задать стиль position со значением absolute, указывая, что мы хотим применить абсолютное позиционирование. Есть еще один полезный стиль z-index, который позволяет настроить перекрытие элементов при наложении. Элемент с абсолютным позиционированием накрывает все элементы с относительным позиционированием. Если два элемента с абсолютным позиционированием наложены друг на друга, то на передний план выталкивается тот элемент, у которого больше значение стиля z-index.

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

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

Затрагивая тему разметки веб-страниц ранее мы всегда применяли традиционный язык HTML, который в данный момент является скорее уже теоретической составляющей и на практике почти не применяется. Одним из наиболее распространенных языков разметки гипертекста в последнее время является XHTML. XHTML - это практически тот же HTML, но с небольшими различиями. Существует несколько версий (1.0, 1.1, 2.0 - в разработке) и типов (strict, transitional, frameset) XHTML. Для создания страниц я рекомендую использовать XHTML Transitional или Strict. XHTML Strict требует более строго соблюдения синтаксиса и накладывает ряд дополнительных ограничений. Если необходима страница с фреймами, то используйте XHTML Frameset.

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

HTML:

<br>
<img src="/logo.gif">

XHTML:

<br />
<img src="/logo.gif" />

Если вы не знаете, что такое HTTP-заголовки, вам необходимо прочитать статью "Принципы функционирования веб-сервера".

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

В упомянутой выше статье помимо теоретической информации были приведены также листинги HTTP-заголовков, используемых браузером при запросе главной страницы сайта ya.ru и содержащихся в ответе веб-сервера на соответствующий запрос. Но гораздо интереснее (и полезнее) посмотреть, чем отвечает ваш сервер на запросы браузером ваших страничек. Позже, при создании "умных" HTML-страниц это станет ключом к пониманию принципов активного взаимодействия пользователя и сайта.

В качестве инструмента для просмотра HTTP-заголовков я предлагаю использовать плагин к браузеру FireFox LiveHTTPHeaders. Установить его можно так: Инструменты - Дополнения - Поиск дополнений, ищем по слову "headers", устанавливаем LiveHTTPHeaders. После перезагрузки браузера появится новая функция: Инструменты - Просмотр HTTP-заголовков.

Предлагаю опробовать плагин на странице, созданной на предыдущем уроке. Открываем окно "Просмотр HTTP-заголовков", жмем "очистить", чтобы убрать появившиеся заголовки (при запросе домашней страницы браузера и т.п.). Далее делаем запрос страницы, например, http://test-domain2/. В окне заголовков появились заголовки от запросов браузера и от ответов веб-сервера:

Во втором уроке мы уже пробовали сотворить HTML-страницу, однако без использования стилей она получилась, откровенно говоря, убогой. С помощью CSS-стилей можно создать гораздо более красивую и функциональную страницу, что мы и попытаемся сделать.

Создайте в корневом каталоге одного из ваших виртуальных доменов файлы index.html и style.css. В первый будем помещать HTML-код, а во второй - CSS-стили страницы. Набросайте в index.html следующий код:

<html>  
  <head> 
    <title>Главная страница</title> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
    <link rel="stylesheet" href="/style.css" type="text/css">
  </head>  
  <body> 
    <table class="content" border="1" width="100%" height="100%"> 
      <tr> 
        <td height="80px" colspan="3">Шапка</td> 
      </tr> 
      <tr> 
        <td height="30px" colspan="3">Меню</td> 
      </tr> 
      <tr> 
        <td width="200px">Левый контент</td> 
        <td>Основной контент</td> 
        <td width="200px">Правый контент</td> 
      </tr> 
      <tr> 
        <td height="60px" colspan="3">Подвал</td> 
      </tr> 
    </table>
  </body>  
</html>

в файл style.css:

* {font-family: verdana; font-size: 12px}
body {margin: 0; padding: 0}

.content {border-collapse: collapse}  
.content td {padding: 0}

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

Далее, рисуем шапку страницы в графическом редакторе. Я сделал следующий набросок в редакторе Gimp (исходник):