Листинг 5.2. Файл chap5\imgmap\imgmap. htm

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

<HTML>

<HEAD>

<ТITLЕ>Сегментированная графіка для посилань</ТITLE>

</HEAD>

<BODY BGCOLOR=#FFFFFF>

<MAP NAME="buttons">

<AREA SHAPE="RECT" COORDS="10,10,30,20" HREF="blue.htm">

<AREA SHAPE="RECT" COORDS="10,30,30,40" HREF="yellow.htm">

<AREA SHAPE="RECT" COORDS="40,10,60,40" HREF="red.htm">

<AREA SHAPE="RECT" COORDS="0,0,70,50" NOHRER>

</MAP>

<IMG SRC="buttons.gif" BORDER=0 USEMAP="#buttons">

</BODY>

</HTML>

Цей документ посилається на графічний файл buttons.gif, показаний на мал. 5.1. Останній оператор <AREA> описує всю поверхню зображення як нечувствительную до щиголів миші. Проте, області, описані раніше іншими операторами <AREA>, будуть працювати в якості дошкульних областей. Це відбувається тому, що якщо області перекрываются, те навігатор використовує перший опис, що зустрілося в карті.

Для чого найкраще використовувати сегментированную графіку? Найбільше очевидне застосування - використання посилань для опису окремих фрагментів складного зображення, такого, наприклад, як географічна карта, уява екрана працюючої програми і т.п.

Якщо усе, що необхідно зробити за допомогою сегментированной графіки, - це розміщення панелі з кнопками, то має сенс роздивитися варіант використання таблиці, в осередках якої знаходяться зображення окремих кнопок. Цей варіант гарний тим, що буде працювати навіть у таких навігаторах, що не спроможні розпізнавати сегментированную графіку (наприклад, навігатор NSCA Mosaic).

Був розглянутий варіант використання сегментированной графіки, коли карта дошкульних областей зберігається в документі HTML. Це найбільше простий засіб. Для повноти виклада можна зауважити, що існує ще один засіб роботи із сегментированной графікою, при якому інформація про дошкульні області зберігається на сервері. У курсі не буде розглядатися другий засіб, тому що він припускає використання більш складних методів.

3. Додаток Map This!

Описана вище методика підготування сегментированных графічних зображень не занадто зручна, тому що необхідно вручну створювати карту дошкульних областей. Тим часом можна безплатно завантажити з Internet додаток Map This! , створене спеціально для роботи із сегментированной графікою. Нижче приведена адреса серверу WWW, де можна одержати саму свіжу версію додатка Map This! :

http://www.ecoetc.ohio-state.edu/tc/mt

Головне вікно цього додатка показане на мал. 5.2.

У додаток Map This! умонтовано редактор областей, що дозволяє задавати дошкульна область візуально за допомогою миші. При цьому просто рисуються межі областей поверх зображення.

Органи керування, розташовані на інструментальній лінійці, дозволяють вибрати потрібну форму області - прямокутну, круглу або багатокутну.

Крім редагування областей, додаток Map This! може автоматично створювати карту областей в однім із трьох форматів, зокрема у форматі, необхідному для вмикання карти в документ HTML.

При роботі зі списком областей, можна зазначити для кожної області адреса URL об'єкта, на який за допомогою цій області створюється посилання. Список областей можна редагувати, змінюючи адресу посилання, додаючи в список нова область або удаляя існуючі.

Мал. 5.2. Головне вікно додатка Map This!

Нижче приведений скорочений зразок документа HTML, що був створений додатком Map This! для зображення, що входить у комплект цього додатка:

<BODY>

<МАР NAME="Country Lake">





















<AREA SHAPE=RECT COORDS="213,296,289,336" HREF="door.html">

<AREA SHAPE=CIRCLE COORDS="499,355,14" HREF="liferaft.html">

<AREA SHAPE=POLY COORDS="637,362,551,366,550,373,545,375,448,366,371,367,347,367,336,367,293,356,256,352,0,356,0,477,640,478,637,365,637,362,637,362" HREF="lake.html">

<AREA SHAPE=RECT COORDS="125,308,167,335" HREF="lunch.htm" ALT="Table">

<AREA SHAPE=RECT COORDS="350,335,539,365" HREF="boat.html">

…

<AREA SHAPE=RECT COORDS="332,275,362,323" HREF="lady...tm" ALT="The lady in the pink shirt">

<AREA SHAPE=RECT COORDS="86,205,289,339" HREF="house.html">

<AREA SHAPE=RECT COORDS="292,261,325,328" HREF="house.html">

<AREA SHAPE=POLY COORDS="97,173,88,199,290,201,283,174,97,173,97,173" HREF="roof.html">

<AREA SHAPE=POLY COORDS="292,225,292,259,332,257,319,228,292,228,294,224,292,225,292 ,225" HREF="roof.html">

<AREA SHAPE=POLY COORDS="0,136.81,197,80,335,0,335,0,216,0,136,0,136" HREF="mountain.html" ALT="the left mountain">

<AREA SHAPE=default HREP="tryagain.html">

</MAP>

/BODY>

Це практично готовий документ, уміст якого можна використовувати для створення власного документа HTML із сегментированной графікою.

4. Посилання на різноманітні ресурси Internet

Документи HTML можуть містити посилання на такі ресурси мережі Internet, як електронної поштові адреси, сервери FTP, електронні конференції і т.д. Нижче приведені приклади вказівки значень параметра HREF оператора <А> для деяких найбільше важливих ресурсів:

Приклад Опис

HREF="http://... " Посилання на об'єкт, що буде передаватися з використанням протоколу HTTP. Це може бути документ або любой довільний об'єкт, наприклад двоичный файл

HREF="ftp://... " Посилання на сервер FTP

HREF='mailto:... " Посилання на електронну поштову адресу. Коли користувач вибирає таке посилання, на екрані з'являється вікно поштової програми, залученої до навігатора. За допомогою цього вікна користувач може послати електронний лист за адресою, зазначеному в посиланні

HREF="news:... " Посилання на електронну конференцію

HREF="nntp://... " Посилання на сервер електронної конференції

HREF="telnet://... " Активізація сеансу віддаленого доступу до вузла мережі Internet із використанням протоколу TELNET

HREF="gopher://... " Посилання на сервер Gopher

Перший із приведених прикладів уже знаком. Цей формат параметра HREF використовувався для посилання на документи HTML. У такий спосіб можна зробити посилання на довільний двоичный файл, графічне зображення або на інший об'єкт.

Навіщо це може знадобитися? Крім тексту, графічних зображень, умонтованих у документ оператором <IMG>, видео- і звукових файлів, можна розмістити в каталогах серверу WWW довільні файли, наприклад архіви програм. Якщо зробити посилання на ці файли з використанням протоколу HTTP, вони будуть завантажені навігатором, що може потім виконати над ними різноманітні дії, від простого запису у виді файла на локальний диск до запуску додатка, спроможного опрацювати прийняті дані.

Наприклад, на нашому сервері лежать файли lzh, у яких знаходяться архіви вихідних текстів до томів серії "Бібліотека системного програміста". Посилання на файли архівів виглядають у такий спосіб:

<A>HREF=http://www.dials.ccas.ru/frolov/bin/dbsp11.lzh><IMGSRC="disk.gif"BORDER=O></A>

Коли користувач зробить щиголь по графічному зображенню, навігатор відобразить на екрані діалогову панель із пропозицією зберегти файл на локальному диску.

Зазначеним засобом часто оформляються посилання на графічні файли великого розміру. Документ HTML при цьому містить або текстовий опис такого зображення, або невеличку піктограму. Зробивши щиголь, користувач може завантажити у вікно навігатора повне зображення і при необхідності зберегти його потім на диску.

У багатьох випадках поряд із сервером WWW потрібно створити і власний сервер FTP. Сервер FTP, так само як і сервер WWW, можна вказувати з використанням або прямою адресою IP, або (що краще) доменної адреси. Посилання на сервери FTP у документах HTML розміщаються, як правило, для того, щоб користувач міг завантажити відтіля якийсь двоичных файл.

Можна забезпечити завантаження двоичных файлів і через протокол HTTP, розташувавши ці файли в каталогах серверу WWW. Для користувача немає особливої різниці, відкіля він буде одержувати файли із серверу WWW або із серверу FTP. Проте якщо сервери є виртуальными і знаходяться в постачальника послуг Internet, оплата за передачу файлів віддаленому користувачу може обчислюватися по-різному, у залежності від того, на якому сервері (FTP або WWW) знаходяться ці файли.

На багатьох серверах WWW можна зустріти посилання на поштові адреси. На сервері теж є таке посилання:

<FONT SIZE=2>Посилайте ваші коментар за адресою

<А HREF="mailto:frolov@glas.apc.org">frolov@glas.apc.org</A>

</FONT>

Поштова адреса буде виділений підкресленням. Можна зробити по ньому щиголь мишею, при цьому автоматично запустится поштова програма.

Практична частина

Завдання 1: Посилання в малюнках

1. Створити 5 довільних сторінок html або використати вже існуючі створені на попередніх лабораторних роботах.

2. Створити html сторінку на якій розмістити 5 довільних малюнків з посиланнями на сторінки з пункту 1.

Завдання 2: Мапа посилань

3. Створити за допомогою графічного редактора Paint малюнок з п’ятьма геометричними фігурами прямокутник та коло, щоб вони не перетиналися та зберегти малюнок у форматі gif.

4. Створити 5 довільних сторінок html або використати вже існуючі створені на попередніх лабораторних роботах.

5. За допомогою оператора <МАР> створити мапу посилань на новому малюнку формату gif для переходу на 5 html сторінок.

Практична робота №4

Тема: Використання каскадних таблиць стилів при створенні Web-сторінок.

Мета: Навчитися створювати каскадні таблиці стилів та застосовувати їх до Web-сторінок.

Теоретичні відомості

CSS, или каскадные таблицы стилей, – это то, как HTML представлен. Точно также как HTML описывает контент, таблицы стилей определяют, как документ выглядит.

Стили не напоминают структуру HTML. Они используют формат «свойство: значение» и большая часть свойств может использоваться для большинства HTML-тегов.

Правила CSS

Правила CSS содержат определения стиля элемента или группы элементов. Они используют следующий синтаксис:

селектор {свойство:значение; свойство:значение; свойство:значение;}

Все пары свойство:значение являются декларациями. Множественные (составные) декларации разделяются точкой с запятой. Селектор определяет элементы, на которые воздействуют правила. Давайте рассмотрим следующее правило:

p {

color:darkgreen;

font-family:Verdana;

font-size:10pt

}

Это правило определяет, что текст во всех параграфах должен быть темно-зеленого цвета, размер текста должен быть 10 точек, а в качестве шрифта можно использовать шрифт Verdana.

Для подключения к файлу html каскадной таблицы стилей потребуется указать в HTML-файле ссылку на неё. Выглядит это следующим образом (см последнюю строку):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>CSS Example</title>

<link rel="stylesheet" type="text/css" href="web.css" />

Комментарии в CSS

Комментарии в CSS начинаются с «/*» и заканчиваются «*/». Взгляните на этот пример:

p {

color:red; /* Текст во всех параграфах должен быть красного цвета */

}

Специфика

В случаях, когда два и более правила CSS конфликтуют друг с другом относительно одного и того же элемента, браузер следует набору правил, которые позволяют определить приоритет CSS правила.

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

Если два селектора идентичны, тогда всегда приоритет получит последний из них. Например, у вас есть:

p { color: red; }

p { color: blue; }

Элемент p всегда будет синего цвета, т.к. соответствующее правило указано последним.

Тем не менее, люди обычно не используют идентичные и конфликтующие селекторы специально (потому что это бессмысленно). Конфликты вполне могут появиться, когда у вас есть вложенные селекторы. Рассмотрите следующий пример:

div p { color: red; }

p { color: blue; }

Выглядит так, будто элементы p в пределах элемента div будут показаны синим цветом, потому что правило, которое устанавливает цвет p, указано последним. Однако на самом деле они будут показаны красным цветом из-за специфичности первого селектора. Говоря простым языком, приоритет в конфликтных ситуациях увеличивается вместе со спецификой селектора.

Настоящая специфика группы вложенных элементов требует вычислений. По существу, вы приравниваете каждый селектор id («#anything») к значению 100, каждый селектор class («.anything») к 10, а каждый селектор HTML («anything») к 1. Затем вы складываете их значения, а общий результат и будет вашим значением специфики.

p имеет специфику 1 (1 HTML селектор)

div p имеет специфику 2 (2 HTML селектора; 1+1)

.tree имеет специфику 10 (1 селектор class)

div p.tree имеет специфику 12 (2 HTML селектора и 1 селектор class; 1+1+10)

#baobab имеет специфику 100 (1 селектор id)

body #content .alternative p имеет специфику 112 (HTML селектор, id селектор, class селектор, HTML селектор; 1+100+10+1)

Таким образом, в случае, если все эти примеры будут использованы, div p.tree (со спецификой 12) будет более специфичен, чем div p (со спецификой 2), а body #content .alternative p будет более специфичем, чем все они, независимо от порядка.

Фоновые изображения

Предусмотрено несколько свойств, которые используются для манипуляции фоновыми изображениями. К счастью свойство background используется со всеми ими.

body {

background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;

}

Это включает в себя следующие свойства:

background-color, с которым мы сталкивались прежде.

background-image, которое представляет собой местонахождение самого изображения.

background-repeat, которое указывает, как изображение повторяется. Это может быть repeat — фактически эквивалент эффекта «мозаики» по всему фону; repeat-y — изображение повторяется по координатной оси Y, т.е. сверху и снизу; repeat-x — изображение повторяется по координатной оси X, т.е. следует одно за другим слева на право; no-repeat — изображение показывается только один раз и не повторяется.

background-position, показывает расположение изображения. Это может быть top (сверху), center (по центру), bottom (снизу), left (слева), right (справа) или любая благоразумная их комбинация.

Фоновые изображения могут использоваться для большинства элементов HTML, а не только для страницы целиком (body). Фоновые изображения могут использоваться и для простых, но эффективных решений — например, для создания закругленных уголков.

Легко увлечься техникой фоновых изображений и начать размещать их по всей странице. Некоторые визуально гиперактивные люди уверены, что страница выглядит хорошо, когда яркие цветные фотографии накладываются друг на друга по всему фону веб-страницы, заставляя пользователя «разгадывать» текст на переднем плане. Это, конечно же, экстремальный пример. Но факт состоит в том, что наиболее дружественен к пользователю легко читаемый текст, набранный черным цветом на белом фоне или белым цветом на простом черном фоне (есть также предложения слегка приглушать белый и черный фон, чтобы снизить блики).

Поэтому лучше использовать фоновые изображения там, где на верхнем слое не будет контента, либо делать фоновые изображения очень светлыми, что, кстати, может уменьшить вес файла изображения, потому что в этом случае задействовано меньше цветов (при условии, что вы применяете формат с индексированной палитрой цветов — например, GIF).

Классы и идентификаторы

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

Преимущество такого подхода состоит в том, что вы получаете один и тот же элемент HTML, но представляете его различными способами в зависимости от его класса или идентификатора.

В CSS селектор класса обозначают именем, которое следует за точкой (.). Идентификатор обозначают именем, которое следует за знаком решетки (#).

Таким образом CSS может напоминать следующий код:

#top {

background-color: #ccc;

padding: 1em

}

.intro {

color: red;

font-weight: bold;

}

HTML делает отсылку к стилю CSS значениями атрибутов id и class. Например:

<div id="top">

<h1>Chocolate curry</h1>

<p class="intro">This is my recipe for making curry purely with chocolate</p>

<p class="intro">Mmm mm mmmmm</p>

</div>

Разница между идентификатором id и классом заключается в том, что идентификатор может применяться для определения одного элемента, а класс может использоваться для определения нескольких элементов.

В дополнение вы можете использовать селектор для определенного элемента HTML, просто указав сначала HTML-селектор. Например p.jam { какой-то стиль } будет применяться для элементов параграфов, у которых есть класс «jam».

CSS границы

Вы можете использовать границы (рамки), применяя их к большинству элементов HTML в пределах страницы. Все, что вам требуется, чтобы сделать границу вокруг элемента — это border-style. Возможные значения, которые можно применять: solid (тонкая граница), dotted (граница состоит из точек, пунктир), dashed (граница состоит из коротких отрезков), double (двойная), groove (эффект углубления), ridge (эффект кромки), inset (эффект врезки) и outset (эффект возвышения).

border-width используется для указания ширины границы, которая измеряется в пикселах. В числе других свойств: border-top-width, border-right-width, border-bottom-width и border-left-width.

И, наконец, border-color используют для указания цвета границы.

Добавьте этот код в CSS-файл:

h2 {

border-style: dashed;

border-width: 3px;

border-left-width: 10px;

border-right-width: 10px;

border-color: red;

}

В результате вы должны получить красную прерывистую границу вокруг заголовка HTML второго уровня (элемент h2) шириной 3 пикселя наверху и внизу, а также 10 пикселей слева и справа (Ширина всей границы в 3 пикселя в результате была определена).

Завдання

1. Створити текстовий документ

2. Записати в нього стилі у відповідності:

- Фон документа задати малюнком;

- Для заголовка 1-го роду – вирівнювання посередині, колір червоний, розмір шрифта 18 pt, тип шрифта: Times Now Roman;

- Для заголовка 2-го роду – вирівнювання посередині, колір зелений, розмір шрифта 16 pt, тип шрифта: Times Now Roman;

- Для абзаца – колір синій, розмір шрифта 14 pt, тип шрифта: Times Now Roman;

- Дл малюнків задати границю шириною 3 пікселя зеленого кольору та відступ від зображення 5 пікселів.

3. Сберегти документ з розширенням .css.

4. Створити довільну Web-сторінку з використанням перелічених вище елементів документа: заголовків 1-го та 2-го ступеня, абзаців (не менше 5), малюнків.

5. Підключити файл css до нової web-сторінки.

Практична робота №5

Тема: Блокова верстка сторінок сайту.

Мета: Навчитися створювани структуру та наповнення сайту використовуючи блочну верстку.

Теоретичні відомості

Блочная верстка

Ранее сайты верстали при помощи таблиц. Каждый элемент страницы — заголовок, текст, картинка — располагался в собственной ячейке, ячейки кучно роились в других, более крупных ячейках, те в свою очередь лежали в главной ячейке, сиречь самой странице сайта.

Табличная верстка сейчас уже морально устарела, хотя очень многие вебмастера продолжают ее использовать. Большим минусом ее является тяжеловесный код. Ведь каждую мало-мальскую ячейку нужно обозначить определенными тэгами. Кроме того, каждая ячейка, как своеобразная коробочка, имеет стенки, у которых есть толщина и цвет. И эти данные тоже нужно закодировать.

В результате помимо полезного наполнения страницы, мы получаем кучу ненужного мусора. Поэтому более не станем говорить за таблицы, а таки плавно перейдем к блочной верстке.

Блочная верстка позволяет обойтись без жесткой конструкции табличной сетки. Принцип тут простой: каждый элемент страницы, будь то картинка, кусок текста (абзац), табличка, список и пр. называется блоком. Блоки, как кирпичики, располагаются на странице в режиме "естественного потока". Это как будто вы пишете письмо, и как только строка кончается, то переходите на следующую. Монитор — это тоже своеобразная "страница". Содержимое сайта на мониторе так же "раскладывается" слева направо и сверху вниз по-порядку.

У блоков есть одна интересная особенность: каждый из них считает, что недостойно находиться на одной горизонтали (читай — строке) с другим блоком. Поэтому по-умолчанию блоки всегда располагаются один под другим. Это умолчание можно подкорректировать и расположить несколько блоков на одной линии. Но об этом чуток попозже.

То есть, мы не делим пространство веб-страницы на ячейки как в табличной верстке, а словно бы складываем в коробочку все элементы. В этой самой "коробочке" они плотно укладываются один к другому. В результате мы избавляемся от скелета, а стало быть, и от массы ненужного кода. Для сравнения: когда я сверстал свою самую первую веб-страницу, используя таблицы, а потом переделал в блочный вариант, то вес кода уменьшился ровно в 4 раза. Да и разбираться в нем стало намного проще.

Что же такое этот самый блок? Блок — это обычная прямоугольная область, обладающая рядом свойств, таких как: рамка, поля и отступы. Содержимым блока может быть что угодно — кусок текста, картинка, список, форма для заполнения, меню навигации и т.п.

Рамка (border)— это контур, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная).

Поля (padding)— отделяют содержимое блока от его рамки, чтобы текст, например, не был “впритык” к стенкам блока.

Отступы (margin)— это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга.

Из картинки видно, что внутреннее содержимое, например кусок текста, всегда имеет рамку. Она может быть как видима, так и невидима. В последнем случае у нее просто толщина равна нулю. Сам текст может как иметь поля (расстояние от рамки), так и не иметь их. В свою очередь, рамка тоже может иметь отступы от других таких же блоков, или прижиматься к ним плотно. Это позволяет гибко регулировать размещение блоков на странице, задавая цифровые значения отступам и полям.

Тэг

Тэг— это особая конструкция языка HTML. Можно сказать — буква алфавита. Различают открывающий и закрывающий тэги. В самом простом случае тэг — это как деталь детского конструктора, которая имеет своё строгое предназначение: планка — значит планка, колесо — значит колесо и ничто иное. К примеру, тэг абзаца:

<p>Текст абзаца.</p>

всегда обозначается буквой “p” и никак иначе.

Тэги всегда заключены в угловые скобки. Как видно из примера, наличествуют как открывающий тэг, так и закрывающий. У последнего перед именем добавлен “слэш” /— косая черта, наклоненная вправо. Для самых любознательных: данный значок расположен на клаве во втором ряду снизу справа в английской раскладке, а не во втором сверху в русской. Сверху — это совершенно другой знак, хотя и похож.

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

<img src="images/risunok.jpg" alt="" />

Тэг div

В отличии от строгих привязок стандартных HTML-тэгов к своему содержимому (”р” — к абзацам, “а” — к ссылкам, “img” — к изображениям), тэг divявляется по-сути нейтральным. То есть ему всё равно что содержать, хоть всё разом. Его используют для задания функциональных областей на странице, таких как: “шапка” (header), блок навигации, блок основного содержимого, “футер” (footer) или подвал по-нашему.

У данного тэга, как и у любого другого, имеются свои собственные атрибуты.

Атрибут— описательная характеристика тэга. То есть, что он может делать и каким образом. Например, опять же возьмём тэг изображения:

<img src="images/risunok.jpg" width="200px" height="50px" alt="Рисунок меня, где я кормлю собаку, а она кусает меня зачем-то" />

В данном случае src, width, height, alt являются атрибутами тэга. В кавычках (и это тоже обязательное требование современных стандартов) даны значения атрибутов. Расшифровать такую запись несложно. Тэг указывает, что в данном месте страницы нужно прилепить изображение risunok.jpgиз папки images, шириной 200 пикселей, высотой 50 пикселей.

И еще добавлен альтернативный текст, который всплывает на страничке при наведении мышки на рисунок. Это не блажь, а тоже необходимое требование. Не все пользователи сети обладают хорошим зрением. Кто-то пользуется программой распознавания и чтения текста. А кто-то просто выключает показ картинок в браузере. Вот для них и существуют альтернативные подписи к рисункам. Если же их нет смысла подписывать (например маркер списка или стрелка какая), то у атрибута alt оставляют пустое место — alt="".

Итак, атибуты тэга div. Наиболее часто используют два вида:

id— атрибут, позволяющий придать тегу уникальное значение, то есть такое, которое на странице используется только один раз. Например “header”(про кавычки не забываем), или “footer“. Таким образом мы сможем задать затем в листе стилей для тэга divс атрибутом idи значением “header”(шапка) одни настройки, а для подвала “footer”совсем другие, и браузер верно распознает, что вот этот абзац, обозначенный тэгом <р>относится к “шапке” и будет набран крупным и красным шрифтом, а вот этот к “подвалу” и будет мелким и серым. И никакой путаницы!

class— атрибут, позволяющий одно и то же значение придать нескольким элементам. Например всем изображениям на странице добавить рамку одинаковой толщины и цвета. Так как изображений несколько, то атрибут idуже нельзя использовать.

DOCTYPE

Для начала определим тип нашего документа. Любая грамотно свёрстанная страница должна в самом начале содержать так называемый DOCTYPE. Нужен он не для форсу бандитского, а для всевозможных устройств вывода информации и браузеров в том числе. Пока что все ныне существующие браузеры прекрасно обходятся и без указания доктипа. Но уже грядут те времена, когда страница сайта, сразу начинающаяся с тэга <html>просто не будет прочитана, потому как стандарты становятся жесче.

Мы определим нашу страничку в соответствии с самым крутым и строгим на данный момент доктипом под названием Strict 1.0.

Выглядит сей крендель так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Прошу обратить внимание: как я уже говорил, требования здесь весьма строгие — все тэги, не имеющие закрывающей пары, должны заканчиваться пробелом со слэшем / перед закрывающей угловой скобкой. Но вот ведь сам доктип тоже выглядит как тэг! Почему же у него нет этого пробела со слэшем? А просто! Захотелось так разработчикам сих строгих правил. Но это единственный случай, где правило не работает.

Тэг <html>

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

<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

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

<html>

Следующий тэг <head>. В нём содержится всякая служебная информация: название страницы (то, что входит в титл), кодировка, ключевые слова для поисковых роботов, описание страницы и т.п. Вся эта инфа записана в служебных тэгах meta, которые также не отображаются на странице в браузере.

Мы запишем на нашей страничке следующую информацию:

<head>

<meta http-equiv="content-type" content="text/html; charset=windows-1251" />

<meta name="description" content="Сайт о поросенках-летунах и счастливой летучей жизни." />

<meta name="keywords" content="летать, свин-летун, пиггсы, полёты, лёччики, пилоты." />

<link rel="stylesheet" href="style.css" type="text/css" />

Поясним:

Первый мета-тэг показывает на кодировку сайта. В рунете желательно пользовать все-таки виндовз-1251, чтобы случайно у Васи Пяткина в его IE версии 3.0 не повылезали вместо красивого и грамотного текста всякие кракозябры.

Второй мета-тэг — это краткое описание сайта. Именно эта строка первой покажется в результатах поиска яндекса или рамблера, если они ещё нас найдут.

В третьем мета-тэге ключевые слова для поисковиков. Объяснять не буду зачем это нужно, думаю и так ясно.

И наконец последняя строка — это не что иное как ссылка на наш лист стилей CSS, который мы создадим чуть позже. Про него скажу лишь вот что: по умолчанию наш лист стилей могут использовать любые устройства вывода инфы будь то экран монитора, принтер, либо телетайп какой-нить шпиёнский. Но если мы хотим указать для какого устройства конкретно предназначена страница, то после атрибута typeсо значением text/сssдолжны будем указать дополнительный атрибут media со значениями:

print — для принтера

handheld — для “наладонника”

screen — для монитора only и т.д.

Это понятно — если кто-то захочет распечатать нашу страничку, то ему вовсе ни к чему на отпечатке навигация, кнопки-картинки, рекламные баннеры и супер-красивые заголовки. Только полезная инфа. И вот для такого случая пишется отдельный лист стилей, попроще.

Тэг <title>

Следующим парным тегом будет титл — это тот текст, который появляется на самом верху браузера при открытии странички:

<title>Пиггасы | Главная</title>

Понятное дело, что туда необходимо вписать название страницы. Не Index, не default, не просто цифра 1 какая, а настоящее, хорошее название. Это также необходимо, как и название для книги. Да и поисковые роботы сильно уважают, когда в титле набран вменяемый текст.

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

<head><title></title></head>

Это правило вложения должно выполняться всегда! Никаких перестановок типа:
⇐ Назад
1
2
3
4
567
8
Далее ⇒