Главнаястр.1<Гл.2. Элементы Web-страницч1ч2ч3>Web-страница – это текст, который виден на экране и специальные флажки (теги), форматирующие его. Язык разметки страничек называется HTML (HyperText Markup Language); Существует международные стандарты HTML (версий 3.2, 4), описывающие возможные метки и их допустимые сочетания. Программы просмотра терпимы к нарушениям стандарта и ошибкам в синтаксисе: если они встречают незнакомую метку, то делают вид, что этой метки вообще нет.
HTML-документ это просто текстовый файл с расширением *.htm (Unix-системы могут содержать файлы с расширением *.html). Для компоновки web-страничек можно использовать любой текстовый редактор, сохраняющий «только текст», т.е. текст без символов форматирования (например, редактор Norton Commander-а, Far-a или Notepad).
Вот самый простой HTML-документ:
<html>
<head>
<title> Пример 1 </title>
</head>
<body>
<H1> Привет! </H1>
<P> Это простейший пример HTML-документа. </P>
<P>
Этот *.htm-файл может быть открыт и в Notepad, и в Netscape. Сохранив изменения в Notepad, просто нажмите кнопку Reload (перезагрузить) в Netscape, чтобы увидеть эти изменения реализованными в HTML-документе.
</P>
</body>
</html>
Дополнительные отступы введены для удобства чтения, однако в HTML это совсем не обязательно. Браузеры игнорируют символы конца строки и множественные пробелы в HTML-файлах. Как видно из примера, вся информация о форматировании документа находится в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, <html>) называется меткой или тегом (по-английски tag). Большинство тегов парные (как открывающие и закрывающие скобки), то есть на каждую открывающую метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением "/". Такую пару тегов иногда называют контейнером, в котором находится определенное содержимое.
Большие и маленькие буквы не различаются, например <BR>, <Br> и <br> равноправны и одинаково вызывают принудительный перевод строки в тексте. Часто действие тегов интуитивно понятно для знающих английский:
<B></B> - Bold (жирный), <I></I> - Italic (курсив), <P></P> - Paragraph (параграф).
Многие теги, помимо имени, могут содержать атрибуты – элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку. В нашем простейшем документе, однако, нет ни одного атрибута.
Замечание
В настоящее время начинается постепенный переход к более строгому языку разметки гипертекста – XHTML, который уже поддерживается разработчиками некоторых браузеров. Этот язык существенно расширяет возможности языка HTML 4, но более требователен к синтаксису. Для последующей совместимости с XHTML желательно 1) имена тегов и атрибутов записывать в нижнем регистре и 2) значения атрибутов должны всегда заключаться в кавычки.
Тег <html> должен открывать HTML-документ, а тег </html> должен завершать его.
Пара тегов <head> ... </head> указывает на начало и конец заголовка документа. Кроме наименования документа (см. метки <title> ниже), в этот раздел может включаться служебная информация.
Все, что находится между тегами <title> и </title>, толкуется браузером как название документа, показывается в заголовке окна и печатается в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.
Пара тегов <body> ... </body> указывает на начало и конец тела HTML-документа, в котором и находится содержимое документа.
Теги вида <hi>, где i – цифра от 1 до 6 (<h1> ... </h1> – <h6> ... </h6>) описывают заголовки шести различных уровней. Заголовок первого уровня – самый крупный, шестого уровня – самый мелкий.
Все, что заключено между <p> и </p>, воспринимается как один абзац. Метки <hi> и <p> могут содержать атрибут align (от английского «выравнивать»), например:
<h1 align="center"> Выравнивание заголовка по центру </h1>
или <p align="right"> образец абзаца с выравниванием по правому краю </p>
Вот еще один пример HTML-документа:
<html>
<head>
<title>Пример 2</title>
</head>
<body>
<h1 align="center"> привет! </h1>
<h2> Это чуть более сложный пример HTML-документа</h2>
<P> Теперь мы знаем, что абзац можно выравнивать не только влево, </P>
<p align="center">но и по центру</p> <p align="right">или по правому краю.</p>
</body>
</html>
Картинки и другие нетекстовые компоненты не вставляются в документ, а хранятся отдельно. Вместо этого в текст вставляется ссылка, указывающая программе просмотра имя файла, содержащего картинку. Стандартно поддерживаются форматы картинок GIF и JPEG.
<img src="имя_файла.gif"> – вставить картинку.
<a href="http://www.openweb.ru"> мастерская </a> – сделать слово "мастерская" гипертекстовой ссылкой на сервер www.openweb.ru.
Последние два тега кроме своего имени содержат атрибуты. Например, чтобы вставить в документ картинку у тега <img>, необходим атрибут src="имя_файла.gif". Часто атрибуты необязательны и служат для уточнения внешнего вида элемента.
Теперь Вы знаете достаточно, чтобы создавать простые HTML-документы самостоятельно. Чтобы улучшить наш простой HTML-документ рассмотрим форматирование абзаца.
Существуют теги, которые не подчиняются двум основным правилам HTML: они непарные, а некоторые (&-последовательности) вводятся только маленькими буквами.
<BR> – этот тег используется, если необходимо перейти на новую строку, не прерывая абзаца. Это удобно при публикации стихов:
<html>
<head>
<title>Пример 3</title>
</head>
<body>
<h1>Стих</h1>
<p> Однажды в студеную зимнюю пору<br>
Сижу за решеткой в темнице сырой.<br>
Гляжу - поднимается медленно в гору<br>
Вскормленный в неволе орел молодой.</p>
<p> И шествуя важно, в спокойствии чинном,<br>
Мой грустный товарищ, махая крылом,<br>
В больших сапогах, в полушубке овчинном,<br>
Кровавую пищу клюет под окном.</p>
</body>
</html>
<HR> – горизонтальная линия. Может включать атрибут size, определяющий толщину линии и/или width – ширину линии (в пикселях или процентах). Например:
<hr size=2 width=100%><br> <hr size=4 width=50%><br>
<hr size=8 width=25%><br> <hr size=16 width=12%><br>
&-последовательности. Символы "<" и ">" воспринимаются браузерами как начало и конец HTML-меток. Чтобы показать эти символы на экране вводят &-последовательности (искейп-последовательности). Браузер показывает на экране символ "<", когда встречает в тексте последовательность < (less than – меньше, чем). Знак ">" кодируется последовательностью > (greater than – больше, чем). Символ "&" (амперсант) кодируется последовательностью & Двойные кавычки (") – " Все буквы должны быть в нижнем регистре (т.е., маленькие), точка с запятой – обязательный элемент &-последовательности.
Комментарии
Браузеры игнорируют любой текст, помещенный между <!-- и -->. Это удобно для размещения комментариев. <!-- Это комментарий -->
HTML допускает два подхода к шрифтовому выделению фрагментов текста. Можно прямо указать, каким должен быть шрифт на некотором участке текста, то есть изменить физический стиль текста. А можно пометить некоторый фрагмент текста как имеющий отличный от нормального логический стиль, оставив интерпретацию стиля браузеру.
Под физическим стилем принято понимать прямое указание браузеру на модификацию текущего шрифта. Например, все, что находится между тегами <b> и </b>, будет написано жирным шрифтом. Текст между тегами <i> и </i> будет написан наклонным шрифтом. Текст, размещенный между тегами <tt> и </tt>, будет написан шрифтом, имитирующим пишущую машинку, то есть имеющим фиксированную ширину символа.
Тег font – задает размер и цвет шрифта текста (применять не рекомендуется). Атрибуты:
Size – устанавливает размер шрифта. По умолчанию используется размер 3. Значения: а) фиксированный размер от 1 до 7, б) относительное изменение "+1" и "-3" на один размер больше и на три размера меньше. Можно задавать размеры в пунктах – pt, пикселях – px.
Face – определяет список разделенных запятыми названий шрифтов. Color – цвет текста. Примеры: <font size="5" face="Arial" color="green"> ЗЕЛЕНЫЙ</font>
<font size=9pt face="Arial, Helvetica, sans-serif" color="#006699">
Шрифты типа Arial, Helvetica, sans-serif называют пропорциональными рублеными; Georgia, Times New Roman, serif – пропорциональные с засечками (серифные); Courier, mono – моноширинные шрифты (буквы одинаковой ширины) с засечками.
При использовании логических стилей заранее неизвестно, что увидят пользователи. Разные браузеры представляют одни и те же тегами логических стилей по-разному. Некоторые браузеры показывают нормальный текст вместо выделенного логическим стилем. Распространены следующие логические стили: <em> ... </em> – от английского emphasis – акцент, <strong> ... </strong> – сильный акцент, <code> ... </code> – фрагмент исходного текста, <samp> ... </samp> – образец сообщения, <kbd> ... </kbd> – для указания того, что нужно ввести с клавиатуры, <var> ... </var> – для написания имен переменных.
Как мы уже видели структурировать документ можно с помощью заголовков и абзацев. Кроме того, абзацы можно организовывать в списки.
Текст, расположенный между тегами <ul> и </ul>, воспринимается как ненумерованный список. Каждый новый элемент списка начинается с тега <li>.
Например, чтобы создать вот такой список:
Иван;
Данила;
белая кобыла
необходим вот такой HTML-текст:
<ul>
<li>Иван; <li>Данила; <li>белая кобыла
</ul>
Обратите внимание: у тега <li> нет парного закрывающего тега.
Нумерованные списки устроены так же, как ненумерованные, но вместо символов, выделяющих новый элемент, используются цифры. Если модифицировать предыдущий пример:
<ol>
<li>Иван; <li>Данила; <li>белая кобыла
</ol>
получится вот такой список:
1. Иван;
2. Данила;
3. белая кобыла
Элемент любого списка может включать в себя целый список любого вида. Число уровней вложенности в принципе не ограничено, однако злоупотреблять вложенными списками не следует. Вложенные списки удобны при подготовке разного рода планов и оглавлений.
Браузеры обычно игнорируют множественные пробелы и символы конца строки. Однако, текст, заключенный между тегами <pre> и </pre> (от английского preformatted – предварительно форматированный), выводится браузером на экран как есть – со всеми пробелами, символами табуляции и конца строки.
Важнейшим свойством языка HTML является возможность включения в документы ссылок на другие документы. В качестве ссылки можно использовать текст или графику.
Возможны ссылки:
Пример ссылки на другой HTML-документ, позволяющей перейти к другому файлу.
Ссылка: <a href="5.htm"> 5 класс </a>
После имени файла 5.htm, между символами > и < , указывается текст (5 класс), на котором производится щелчок для перехода на этот файл.
Ссылки в пределах одного документа требуют наличия двух частей: тега и самой ссылки. Тег определяет точку, к которой происходит переход по ссылке. Ссылка использует имя тега. Ссылки выделяются цветом или подчеркиванием, в зависимости от настроек браузера. Пример:
Ссылка: <a href="#pn"> Понедельник </a>
В ссылке перед именем тега (pn) ставится символ #. Между символами > и < располагается текст (Понедельник), на котором производится щелчок для перехода по ссылке.
Тег: <a name="pn">Понедельник</a>
До настоящего времени мы имели дело с документами, в которых существовал только один «поток» текста. На практике иногда нужно расположить текст в несколько колонок. Таблица может в этом помочь. Кроме того, таблица, состоящая из одной ячейки, может эффективно выделить фрагмент текста, на который Вы хотите обратить внимание читателя.
В устройстве таблицы легче всего разобраться на примере.
<html>
<head> <title>Пример 10</title> </head>
<body>
<h1>Простейшая таблица из двух строк и двух колонок</h1>
<table border=1> <!--Это начало таблицы-->
<caption> У таблицы может быть заголовок </caption> <!--Это заголовок таблицы-->
<tr> <!--Это начало первой строки-->
<td> Первая колонка </td> <!--Это первая ячейка-->
<td> Вторая колонка </td> <!--Это вторая ячейка-->
</tr> <!--Это конец первой строки-->
<tr> <!--Это начало второй строки-->
<td> </td> <!--Это первая ячейка-->
<td> </td> <!--Это вторая ячейка-->
</tr> <!--Это конец второй строки-->
</table> <!--Это конец таблицы-->
</body>
</html>
Таблица начинается с тега <table> и заканчивается тегом </table>. Таблица может иметь заголовок (<caption> ... </caption>), хотя он не является обязательным. Каждая строка таблицы начинается с тега <tr> и заканчивается тегом </tr>. Содержимое ячеек заключают между тегами <td> </td>.
Если ячейка таблицы пуста, вокруг нее не рисуется рамка. Если рамка нужна, в ячейку можно ввести символ неразрывного пробела – (non-breaking space). Ячейка будет пустой, но с рамкой вокруг нее. Ячейка таблицы может содержать в себе другую таблицу.
Как мы уже знаем, HTML – это набор объектов-контейнеров, таких как <p>...</p>, <h1>...</h1>, <table>...</table> и других. Для каждого такого объекта определены правила его отображения на web-странице, иначе говоря – стиль. Стандартным тегам HTML соответствует набор встроенных стилей, используемых по умолчанию. Каждый стиль задает множество свойств объекта.
Технология CSS (Cascading StyleSheets – каскадные таблицы стилей) позволяет переопределить некоторые из этих свойств.
Например, для определения цвета элементов 'h1' как синий, достаточно записать:
h1 { color: blue }.
Приведенное «правило CSS» состоит из двух частей:
селектора ('h1') и определения ('color: blue').
Определение тоже состоит из двух частей: свойства ('color') и значения ('blue').
Приведенный пример влияет только на одно из свойств, но он уже является таблицей стилей. Совместно с другими стилями он будет определять конечный вид всего документа. Список селекторов, свойств и их возможных значений определяется в спецификации HTML.
Таблица стилей должна быть подключена к тексту HTML. Например:
<html>
<head> <title>Заголовок</title>
<link rel=stylesheet type="text/css" href="cool.css" title="cool">
<style type="text/css">
<!-- h1 { color: blue } -->
</style>
</head>
<body>
<h1>Headline is blue</h1>
<p style="color: green">While the paragraph is green.
</body>
</html>
Данный пример демонстрирует способы подключения стилей к html-документу, используя:
В CSS текстовые комментарии в таблицах стилей оформляются так:
em { color: red } /* red, really red!! */
Комментарий эквивалентен пробелу. Комментарии не могут вкладываться друг в друга.
Для уменьшения размера таблицы стилей можно группировать селекторы в разделенные запятыми списки: h1, h2, h3 { font-family: helvetica }
Точно также можно группировать определения:
h1 {font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: helvetica; font-style: normal;}.
Если установлен синий цвет для h1 { color: blue } и есть тег 'h1' с <em> внутри:
<h1>The headline <em>is</em> important!</h1>,
тогда (если для элемента 'em' не было определено никакого цвета), то 'is' унаследует цвет родительского элемента, т.е. он также будет отображен синим цветом. Другие свойства стиля также наследуются, например font-family и font-size. Наследование уменьшает количество CSS-текста.
Для определения свойства стиля по умолчанию для документа, можно задать это свойство у элемента, от которого наследуются все остальные видимые элементы. В html документах элемент 'body' выполняет эту функцию: body { color: black; background: white; } – устанавливает цвет текста в черный, а фон белым.
Некоторые свойства родительских элементов не наследуются дочерними элементами. В большинстве случаев интуитивно понятно, когда возникает такая ситуация. Например, свойство 'background' не наследуется, но фон родительского элемента по умолчанию будет виден. Часто значение свойства указывается в процентах от другого свойства:
p { font-size: 10pt }
p { line-height: 120% } /* relative to 'font-size', i.e. 12pt */
Для свойства, значения которого указываются в процентах, определено свойство, на которое оно ссылается. Дочерние элементы 'p' унаследуют вычисленное значение line-height (12pt).
В HTML существует атрибут class. Все элементы внутри элемента body могут быть классифицированы, а на класс можно сослаться через таблицу стилей:
<html>
<head> <title>Заголовок</title>
<style type="text/css">
h1.pastoral { color: #00FF00 }
</style>
</head>
<body>
<h1 class="pastoral">Way too green</h1>
</body>
</html>
К классифицированным элементам применяются нормальные правила наследования, они наследуют значения своих родителей в структуре документа. Можно определить все элементы одного класса, опустив имя тега в селекторе:
.pastoral { color: green } /* all элементы with CLASS pastoral */
Для каждого селектора можно определить только один класс. CSS предоставляет настолько большие возможности для использования атрибута CLASS, что во многих случаях не важно у какого элемента HTML устанавливается класс – можно заставить любой элемент эмулировать любой другой элемент. Не рекомендуется часто пользоваться такой возможностью, т.к. это лишает документ структуры.
HTML определяет атрибут id, который гарантированно имеет уникальное значение в документе, как селектор таблицы стилей и может адресоваться с помощью '#':
#z98y { letter-spacing: 0.3em }
h1#z98y { letter-spacing: 0.5em }
<p id=z98y>Wide text</p>
В примере первый селектор соответствует элементу 'p' благодаря 'id' атрибута. Второй селектор определяет тип элемента ('h1') и значение id, и, поэтому, не соответствует элементу 'p'.
Используя id в качестве селектора, можно устанавливать свойства поэлементно без использования структурных элементов HTML. Такое использование стилей не рекомендуется.
Вместо того чтобы указывать все свойства стилей, можно установить значения по умолчанию, а затем указать исключения. Для того чтобы элементы 'EM' внутри 'H1' имели другой текст, можно было бы указать:
h1 { color: blue } и em { color: red }
Когда данная таблица стилей будет использована, весь текст в 'em', как внутри, так и вне 'h1' станет красным.
Чтобы только те элементы 'em', которые заключены в 'h1' стали красными надо, указать:
h1 em { color: red }
Такой селектор называется контекстным. Контекстные селекторы состоят из простых селекторов, разделенных пробелом (все описываемые до этого селекторы являлись простыми селекторами). Описанные правила применяются только к последнему простому селектору (в данном случае 'em').
Можно сгруппировать несколько контекстных селекторов: h1 b, h2 b, h1 em { color: red }, что эквивалентно:
h1 b { color: red }
h2 b { color: red }
h1 em { color: red }
В CSS стиль обычно применяется к определенному элементу в структуре документа. Это достаточно для создания широкого спектра стилей, но не покрывает несколько типичных эффектов. Псевдо-классы не существуют в тексте HTML, но могут использоваться в селекторах CSS. Они «вставляются» браузером при определенных условиях. Браузеры по-разному отображают ссылки посещенные недавно, не посещенные и посещенные давно. В CSS эти ситуации обрабатываются с помощью псевдо-классов элемента 'a':
a:link { color: red } /* unvisited link */ ссылка
a:visited { color: blue } /* visited links */ просмотренная ссылка
a:active { color: lime } /* active links */ ссылка, которая в данный момент выбрана.
Псевдо-классы не влияют на ссылки-якоря. Браузеры могут по собственному усмотрению перемещать элемент из 'visited' в 'link' после некоторого периода времени. Селекторы псевдо-класса не соответствуют обычным классам. В CSS псевдо-классы ссылок не оказывают влияния ни на один элемент, кроме 'a'. Поэтому тип элемента в селекторе можно опускать. Селекторы: a:link { color: red } и :link { color: red } будут идентичны. Имена псевдо-классов не зависят от регистра. Псевдо-классы могут использоваться в контекстных селекторах:
a:link img { border: solid blue }
Псевдо-классы также могут комбинироваться с простыми классами:
a.external:visited { color: blue }
<a class=external href="http://www.outside.org/">external link</a>
Если ссылка в этом примере была посещена, то она будет синей. Обратите внимание, что имя обычного класса предшествует имени псевдо-класса в селекторе.
При написании таблиц стилей большую помощь может оказать редактор стилей, встроенный в DreamWeaver (им мы воспользуемся далее) или более мощный – TopStyle Pro.
TopStyle Pro (www.bradsoft.com) считается сегодня лучшим редактором для создания стилей. Он имеет множество вспомогательных «мастеров», удобный поиск и другие встроенные средства. Это фактически учебник по каскадным таблицам стилей. Воспользовавшись этой программой можно быстро освоить синтаксис таблиц стилей.
При первом запуске программы появляется мастер, который предложит ознакомиться с обучающей системой, если Вы новичок в этой программе, а также настроит интерфейс программы. Как только Вы начнете писать текст таблицы стилей, Вам сразу же будет предложена масса всевозможных подсказок по свойствам CSS и их значениям.
Программа содержит и другие полезные инструменты. Например, инструмент Link Wizard способен подключить стилевой файл (с расширением .css) ко всем страницам вашего сайта. Style Checker – позволяет проверить любой файл .css на наличие ошибок, а Orphan Styles –просмотрит существующие страницы сайта на предмет избыточных стилей.
TopStyle Pro прост в освоении, на знакомство с ним уходит два-три часа (если Вы, конечно, раньше немного разобрались с основами создания самих таблиц стилей).
Обновлено 20.05.2004