Главная · Карта сайта · Поиск · Статьи · Компьютерные курсы · Обучающие программы · Открытые проекты · Веб-программирование · Создание интернет-сайта · Полезные ссылки · Глоссарий · Контакты · Декабрь 09 2016 20:20:18
Последнее опубликованное

Что такое Model-View-Controller
Pattern Model-View-Controller

Как создать свой веб-сайт
Как создать свой сайт в интернете

Разное
Статистика

Краткий справочник по HTML, XHTML и CSS


Краткий справочник по HTML

Что мне нравится в стандартах, так это то, что их всегда очень много, и я могу выбирать из огромного списка.

Andrew S. Tannenbaum

Сравнение стандартов HTML и XHTML

Тем, кто не знает, что такое HTML советую в первую очередь ликвидировать безграмотность в этом вопросе, прочитав об истории появления и развития языка разметки гипертекста (ссылка ниже). Что касается XHTML, то это новое поколение языка разметки интернет страниц, созданное на базе XML, в то время как HTML был разработан на основе SGML. Далее ссылки, которые помогут читателю разобраться во всех этих аббревиатурах:

Итак, язык XHTML повторяет и дополняет функциональность HTML, а зачем он это делает, я как раз и попытаюсь изложить в этом разделе. Поскольку XHTML является расширением XML, то все требования к правильно сформированному (well-formed) XML документу сохраняются. Вот те самые дополнительные требования к разметке документа, если он должен соответствовать стандарту XHTML:

  1. Каждый тег XHTML должен быть закрыт. Если HTML позволял конструкции типа <br> или <hr>, то в XHTML они должны выглядеть только так: <br/><hr/>. Менее тривиальным является следующий вариант разметки, который устраивает HTML, но не является корректным с точки зрения XML:
    <b>bold<i>bold_and_italic</b>italic</i>
    Правильным XHTML аналогом будет являться следующая разметка
    <b>bold<i>bold_and_italic</i></b><i>italic</i>
    На основе приведенного примера, первое ограничение я бы дополнил формулировкой: XHTML не допускает частичного пересечения области действий тегов разметки. Если это обстоятельство и создает какие-то дополнительные сложности верстальщикам, то эти сложности с лихвой компенсируются контролем над ошибками со стороны сервисов XML. Причины всех этих ограничений проявятся дальше.

  2. XHTML не поддерживает сокращенной формы записи атрибутов. Это означает, что в XHTML нет сокращенной формы записи булевых атрибутов, а само значение атрибутов всегда должно быть в кавычках. Если в HTML следующий код считался корректным
    <input type=textbox readonly value='anytext'/>
    , то в XHTML приведенная конструкция должна выглядеть следующим образом:
    <input type='textbox' readonly='readonly' value='anytext'/>

  3. Специальные символы в XHTML должны быть представлены в виде кодов. Это означает, например, что символы < и >, если они не являются частью разметки, должны в тексте обозначаться, как &lt; и &gt; соответственно. Если такой вариант не устраивает, например, если требуется в разметку добавить программный код (Java-script, VBScript), то для этих целей следует использовать раздел CDATA, содержимым которого может быть любая символьная информация, в том числе специальные символы разметки. Вот пример:
    <script type="text/javascript">
    <![CDATA[
    Код скрипта
    ]]>
     </script>

  4. Все символы, используемые в именах тегов и атрибутов должны быть строчными. Вот это ограничение уже не является наследием XML, поскольку XML настаивает только на том, чтобы и открывающий и закрывающий теги были записаны одинаковым набором символов, в который могут входить как строчные, так и заглавные символы. Это ограничение, скорее, результат стремления избежать путаницы и оптимизировать скорость обработки документа. Кодировка символов в XHTML, как и в XML по умолчанию UTF-8.

  5. Корневой элемент в XHTML должен быть один. Другими словами это означает, что тег HTML должен присутствовать в XHTML всегда! Стандарт HTML не настаивал на присутствии тегов <HTML> и <BODY> – разметку можно было начинать с любого тега и корневого элемента могло не быть вообще.

Теперь пару слов о менее очевидных отличиях между двумя этими стандартами. Повторюсь, что все “разногласия” между HTML и XHTML являются следствием того, что XHTML является расширением XML, а HTML нет.

Обработчик HTML является, по сути, интерпретатором. Он обрабатывает документ последовательно, и именно это обстоятельство позволяет ему исправлять ошибки разметки. Многим известно, что документ HTML в памяти браузера представлен в виде объектной модели DOM. Именно DOM является основой DHTML (Dynamic HTML) – симбиоза HTML и Java Script, который способен “оживлять” статичную разметку, обрабатывая события пользователя. Код java-script и DOM способны одни фрагменты документа “на лету” заменять другими или существенно изменять стиль их отображения. Преобразования эти осуществляются на стороне клиента, благодаря чему перезагрузки страницы не требуется. Все выглядит красиво и динамично. Именно благодаря DOM стали возможны все выпадающие меню и списки на страницах браузера. Для корректного формирования объектной модели интерпретатору HTML жизненно необходимо исправлять ошибки верстальщиков, добавляя закрывающие теги, исправляя частичные пересечения области действия тегов разметки (пример выше) и т.п. Обработчик XML, в свою очередь, больше походит на компилятор: он обрабатывается сразу весь документ. Если документ не является well-formed, то обработчик (парсер) сообщает об ошибке и отменяет формирование DOM целиком. Логично, что в случае XHTML происходит все то же самое. Для XML и его расширений действует правило: “Либо все, либо ничего”, в то время как парсер HTML не сообщает об ошибках, старается их исправлять и практически всегда производит, как минимум, частичную обработку HTML страницы. Кому-то такое поведение HTML интерпретатора может нравиться больше, чем категоричность XHTML обработчика, но позволю себе сделать следующее замечание. Исправление HTML происходит на стороне клиента, т.е. интернет браузером. Различных браузеров достаточно много, не говоря уже о большом количестве версий каждого из них. Это обстоятельство не гарантирует вам, что во всех случаях ошибки будут исправлены одинаково и результат этого исправления вас устроит. Также можно утверждать, что на исправление ошибок тратится дополнительное время. Не стоит в этом полагаться на браузер.

Как итог всему вышесказанному. На данный момент не все интернет браузеры поддерживают XHTML. Для того чтобы поэкспериментировать с этим новым стандартом локально, достаточно файлу с гипертекстом дать расширение .xhtml и открыть его в поддерживающем XHTML интернет браузере, например, в Opera. Если разметка не будет соответствовать well-formed XML, то браузер выведет сообщение об ошибке. Если у тега не будет определено пространство имен xmlns=http://www.w3.org/1999/xhtml, то вы увидите просто xml. Ниже приведен пример XHTML разметки страницы:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>xhtml sample</title>
</head>
<body>
  <h1>It is <b>xhtml</b> parsing result</h1>
</body>
</html>

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


Справочник по HTML/XHTML

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

Шаблон XHTML страницы интернет ресурса

Следующим образом должен выглядеть шаблон интернет страницы на XHTML:

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Заголовок страницы</title>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
  <meta name="description" content="Описание страницы"/>
  <meta name="keywords" content="Ключевые слова"/>  
  <link rel="stylesheet" href="Путь к файлу каскадных таблиц стилей .css" type="text/css"/>
 </head>
 <body>
 </body>
</html>

Я сделал акцент на словосочетании интернет страница не случайно. Помимо самой разметки, для поисковых систем в интернете (Google, Яндекс и других) важна метаинформация о странице. К метаинформации относят содержимое мета-тегов (<meta>) и тега заголовка страницы (<title>). Если располагать их по степени важности для поискового сервиса, то на первом месте идет содержательность и уникальность (по отношению к другим страницам интернет ресурса) заголовка страницы, на втором месте - более развернутое (символов 150-250) описание страницы (description) и на третьем месте уже список ключевых слов (keywords) через запятую.

В чем их важность? Во-первых, содержимое заголовка – это подпись-ссылка на вашу страницу в поисковой выдаче, а содержимое тега description – это один из кандидатов на роль сниппета (краткого описания страницы) все в тех же результатах поиска (см. рисунок ниже). На самом деле те же Google и Яндекс стараются создать сниппет из основного текста вашей страницы, но это у них не всегда получается, поскольку текста может быть совсем мало или не быть вообще, к примеру, на странице размещены только картинки, видео или анимация. В этом случае им не остается ничего другого, как обратиться к краткому описанию страницы. Имея возможность управлять представлением ссылки на ваш сайт, вы можете сделать ее более привлекательной для пользователей поисковой системы и тем самым повысить ее показатель CTR (click-through rate) – количество переходов, деленное на количество показов страницы в результатах поиска. Во-вторых, исходя из назначения мета-тегов, они должны содержать именно заголовок, отражающий тему страницы, ее краткое описание и ключевые слова. Следовательно, сопоставив мета-теги и само содержание страницы можно понять, насколько оно (содержание) может соответствовать ожиданиям потенциальных пользователей, когда те увидят заголовок и сниппет на странице результатов поискового запроса и примут решение перейти по ссылке. В информационном поиске это соответствие также называют степенью релевантности или просто релевантностью результатов запроса, и именно релевантность, представленная в виде числовых величин, полученных по тщательно скрываемым от общественности алгоритмам оказывает значительное влияние на позиции того или иного сайта в рейтингах поисковиков.

Мета-теги и представление сайта в результатах поискового запроса.
Заголовок и описание (сниппет) веб-страницы в результатах поискового запроса.

Мета-теги с атрибутом http-equiv играют роль заголовков HTTP запросов, и содержат различного рода системные настройки и параметры, необходимые браузеру, чтобы корректно отображать содержимое веб-страниц. В данном примере с помощью такого тега браузеру сообщается, что формат страницы – это текст или гипертекст text/html, для отображения которого следует использовать кодировку windows-1251. В русскоязычном сегменте всемирной паутины в основном используют указанному мной кодировку или “универсальную”, построенную на основе 8-ми битного представления юникода, кодировку UTF-8. Если кодировка в мета-теге указана не будет, а браузер пользователя не сможет определить ее самостоятельно, то текст может предстать в нечитаемом виде.

Мета-теги могут содержать и другие метаданные, например информацию об авторе (author) и авторских правах (copyright). Для этого достаточно добавить еще тегов <meta> с соответствующими значениями атрибутов name и content.

Заголовки

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

Пример разметки заголовков: открыть представление в браузере

<body>
 <h1>Заголовок 1-го уровня</h1>
 <h2 align="center">Заголовок 2-го уровня</h2>
 <h3 align="right">Заголовок 3-го уровня</h3>
 <h4 align="left">Заголовок 4-го уровня</h4>
 <h5 align="justify">Заголовок 5-го уровня</h5>
</body>

Крайне желательно, чтобы текст в заголовках перекликался с содержанием заголовка самой станицы и соответствующих мета-тегов: описанием страницы и списком ключевых слов. Если это не так, то вы рискуете, что робот поисковой системы отнесет ваш шедевр к категории “спам”. Эти замечания касаются не только заголовков, но и всего остального содержания страницы.

Списки

Списки в HTML представлены тремя видами: обычный или маркированный список (ul), нумерованный список (ol) и список определений (dl). Содержимое списков первых двух видов состоит из набора элементов (li). Каждый элемент списка определений состоит из термина (dt) и, собственно, его определения (dd). Список определений можно сконструировать и из других элементов разметки, но не стоит забывать про различные сервисы, которые видят особый смысл в используемых верстальщиком конструкциях. Иначе, зачем авторам HTML создавать специальную разметку для таких списков? Следующий пример демонстрирует разметку маркированного списка и двух вложенных в него списков: нумерованного и списка определений. Сложность иерархии списков ограничивается только фантазией автора страницы и требованиями к желаемому результату. Любой из этих списков может быть как основным, так и вложенным.

Пример разметки списков: открыть представление в браузере

<body>
 <h1>Основной список</h1>
 <ul>
  <li type="circle">элемент списка 1</li> 
  <li type="square">элемент списка 2 (заголовок вложенного нумерованного списка)</li> 
   <ol>
    <li>элемент нумерованного списка 1</li> 
    <li>элемент нумерованного списка 2</li> 
    <li>элемент нумерованного списка 3</li> 
   </ol> 
  <li type="disc">элемент списка 3 (заголовок вложенного списка определений)</li> 
   <dl>
    <dt>термин 1</dt><dd>определение термина 1</dd> 
    <dt>термин 2</dt><dd>определение термина 2</dd> 
    <dt>термин 3</dt><dd>определение термина 3</dd> 
   </dl> 
 </ul>
</body>

Маркированный список поддерживает три вида маркера: окружность (circle), диск (disc) и квадрат (square), но его можно заменить произвольной картинкой.

<ul style=”list-style-image: url(путь к картинке);”>

Будет неплохо, если с использованием списка определений будет сформирован небольшой предметный указатель с исчерпывающей, но краткой информацией по ним.

Таблицы

Таблицы (table) в HTML, как в прочем и везде состоят из названия таблицы (caption), заголовка, состоящего из описания колонок и строк с ячейками таблицы. Заголовок – это та же строка таблицы (tr), только вместо тега ячейки таблицы (td) используется тег заголовка колонки (th). Естественно, что можно заголовок соорудить с использованием обычных ячеек таблицы, но в этом случае сложнее будет его выделить графически. И еще один момент. Ячейки в таблице можно объединять, как по горизонтали, так и по вертикали с использованием атрибутов colspan и rowspan, а текст выравнивать определением значения атрибута align.

Пример разметки таблиц: открыть представление в браузере

<body>
  <table border="1">
   <caption>Заголовок таблицы</caption>
   <tr><th width="50%">Колонка 1</th><th width="75px">Колонка 2</th><th>Колонка 3</th></tr>
   <tr><td align='left'>данные [1,1]</td><td>данные [1,2]</td><td>данные [1,3]</td></tr>
   <tr><td align='right'>данные [2,1]</td><td colspan="2" align='center'>данные [2,2] и [2,3]</td></tr>
   <tr><td rowspan="2">данные [3,1] и [4,1]</td><td>данные [3,2]</td><td>данные [3,3]</td></tr>
   <tr><td>данные [4,2]</td><td>данные [4,3]</td></tr>
  </table>
 </body>

Строчные и блочные элементы разметки

Строчный элемент разметки – это тэг, который позволяет выделить часть строки или несколько строк (зависит от размера окна браузера) и изменить их представление: выделить другим шрифтом, цветом, рамкой и т.п. Для таких элементов (<a>, <img>, <span> и др.) нельзя задать ширину и высоту, поскольку значения этих параметров определяются содержимым строчного элемента: текстом, изображениями и другими вложенными тегами.

Блочный элемент разметки – это тэг, область которого представлена прямоугольником (<p>, <div>, <table>, <ul> и др.). Если такому элементу не задать явно ширину, то она будет соответствовать всей области, предоставленной элементом - контейнером. Высота блочного элемента, так же, как и строчного по-умолчанию определяется его содержимым. Каждый новый блочный элемент появляется в новой строке, если иной способ размещения не задан с использованием атрибута float: left – элемент сдвигается влево, а последующие (если позволяет их ширина) выстраиваются за ним справа; right – наоборот, предписывает обтекание элемента его последователями слева, а сам элемент будет, по мере необходимости, сдвинут вправо. Ширину и высоту блочного элемента можно задать явно с использованием атрибутов width и height, как в абсолютных значениях (px), так и в процентах (%) от максимально возможных значений.

Описанные ранее таблицы, списки и даже заголовки являются блочными элементами. К строчным элементам относятся ссылки и изображения, о которых речь пойдет чуть ниже. Строчные элементы могут располагаться внутри блочных, но не наоборот. Далее, представлен пример с использованием блочных элементов <div> (раздел) и <p> (абзац), а также, строчного элемента <span> (участок или интервал). С помощью элемента <div> я выделил две прямоугольные области и задал для них внешний отступ - атрибут margin и внутренний отступ - атрибут padding. Все настройки стиля отображения (цвет фона, отступы, размеры) для всех элементов заданы с использованием тэга <style>, который предназначен для внедрения в html документ каскадных таблиц стилей, о которых более подробно написано в конце этой статьи. Связь элемента разметки с конкретным стилем осуществляется с использованием атрибута class. Значения отступов с разных сторон элемента (сверху, справа, снизу, слева) специально задал разные, чтобы было понятно, в каком порядке они перечисляются в краткой форме для первого <div>. Для второго <div> значения для внутреннего отступа с каждой стороны задал в полной форме.

Представление в браузере:

открыть

HTML разметка:

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Заголовок страницы</title>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
  <meta name="keywords" content="Ключевые слова"/>  
  <meta name="description" content="Описание страницы"/>
  <link rel="stylesheet" href="Путь к файлу каскадных таблиц стилей .css" type="text/css"/>
  <style type="text/css">
   .container { 
    border: solid 1px black; 
   }
   .div1 { 
    width: 200px; 
    background: #ccc;
    border: solid 1px black; 
    margin:50px 50px 50px 50px;
    padding:20px 40px 60px 80px;
   }
   .div2 { 
    width: 400px; 
    background: #eee; 
    border: solid 1px black; 
    margin:20px 20px 20px 20px;
    padding-left:20px;
    padding-right:60px;
    padding-top:80px;
    padding-bottom:40px;
   }
   .big-green { 
     color: green;
     font-size: 200%;
     font-family: serif;
    }
  </style>
 </head>
 <body>
  <div class='container'>
   <div class='div1' title='Первый блок &lt;div&gt;'>Первый блок &lt;div&gt;<hr/>
	Часть содержимого выделена <span class='big-green'>крупным шрифтом и зеленым цветом</span> 
	с использованием тэга &lt;span&gt;
   </div>
   <div class='div2' title='Второй блок &lt;div&gt;'>Второй блок &lt;div&gt;<hr/>
	Блок содержит три абзаца:<p align='left'>Первый абзац выравнивает текст по левому краю.</p>
	<p align='right'>Второй - по правому краю.</p>
	<p align='center'>Третий - по центру.</p>
   </div>
  </div>
 </body>
</html>

Ссылки, закладки и фреймы

Ссылки - ключевой элемент разметки HTML и краеугольный камень интернет страниц. Именно они делают из обычного текста гипертекст, придавая содержимому ресурса “трехмерность”. Определяется ссылка с использованием тега <a> (от английского слова anchor - якорь).

<a href="URI ресурса" target=”где открыть связанный документ”>текста ссылки</a>

В качестве значения атрибута target можно указать либо _blank – загрузить страницу в новое окно/закладку, либо _self – загрузить страницу в текущее окно/закладку браузера. Два других возможных значения этого атрибута: _parent и _top касаются размещения страниц во фреймах, но о них в этой статье речи не пойдет. Фреймы – вещь специфическая, которой нужно уметь пользоваться. Чаще всего они используются при реализации информационных порталов уровня интранет (Intranet – внутренняя частная сеть некоторой организации), и реже при разработке интернет ресурсов. Как фреймы использованы на этом сайте вы можете посмотреть здесь или здесь. Открыв страницу, посмотрите ее исходный код. В обоих вариантах с использованием фреймов область браузера делится на три части: меню (каталог), выбранная страница и главная страница каталога. Есть еще элемент <iframe>, который являет собой плавающий фрейм. С помощью элемента <iframe> на странице в любом ее месте можно отобразить содержимое другой страницы.

Пример плавающего фрейма:


Для вставки плавающего фрейма добавьте в HTML разметку страницы примерно следующий код:
<iframe src="http://codingcraft.ru/resources/HTML/html5/canvas.html" width="600" height="400"></iframe>

Я использую этот элемент для включения в свои обзоры различных примеров, которые содержат собственные настройки стилей и JavaScript сценарии. Больше всего таких включений с использованием <iframe> в статье о новых возможностях HTML5.

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

Атрибут target обязательным не является, а его значением по умолчанию чаще всего является _self.

Пример ссылки на страницу:

<a href="http://codingcraft.ru" target=”_blank” title="Главная страница">Школа программирования codingcraft.ru</a>:
[Школа программирования codingcraft.ru]

С использованием тега ссылки можно также определять закладки. Для этого достаточно поместить тег <a> в нужном вам месте и дать ему имя – определить атрибут name. Для перехода к этой закладке из другого места документа достаточно указать имя закладки дополнив значение атрибута href именем закладки через символ #.

Пример определения закладки:

<a name=”bookmark”></a><h1>Закладка</h1>

Пример ссылки на закладку:

Если закладка находится на той же странице, то:
<a href=”#bookmark”>Ссылка на закладку</a>

Таким образом, для перехода к началу текущего раздела следует добавить следующий код:
<a href='#html_anchors_and_bookmarks'>Ссылки и закладки</a>
[Переход к началу текущего раздела]

Если закладка находится на другой странице, то:
<a href=”http://адрес страницы#bookmark”>ссылка на закладку</a>

Вот так организуется переход к закладке на странице http://codingcraft.ru/web-design/html5.php:
<a href='http://codingcraft.ru/web-design/html5.php#canvas'>подпись закладки</a>
[Обзор нового элемента canvas, появившегося в HTML5]

Стоит отметить, что закладкой может быть не только тег <a>, но и любой другой элемент, для которого определен атрибут id.

Пример ссылки на элемент по значению id:

Определение элемента:
<h1 id='bookmark'>Заголовок</h1>

Ссылка на элемент:
<a href=”#bookmark”>Ссылка на заголовок</a>

Закладки являются незаменимым инструментом при составлении оглавлений и предметных указателей.

Изображения

Изображение - самый простой способ разнообразить страницу любого интернет ресурса. Ничего сложного во вставке изображения в разметку нет, нужно только выбрать место, добавить тег <img> и указать ссылку на файл с изображением в атрибуте src:

<img src=”ссылка на файл с изображением”/>

Возможно, понадобится задать определенные размеры изображению через атрибуты width и height и выровнять его местоположение на странице определением уже знакомого атрибута align. Есть два момента, на которые стоит обратить внимание: альтернативный текст и заголовок изображения. Первый нужен для просмотра страниц с отключенной графикой, поскольку именно этот альтернативный текст предстанет перед пользователем в месте размещения изображения. Второй – подпись изображения, которая появляется в виде всплывающей подсказки, когда курсор мыши находится над областью изображения. Альтернативный текст определяется через атрибут alt, а подпись изображения – через атрибут title.

<img src=”ссылка на файл с изображением” alt=”описание изображения” title=“подпись изображения”/>

Может быть, на первый взгляд эти атрибуты покажутся не столь важными, но если вы заинтересованы в успешном продвижении создаваемых вами интернет страниц в выдаче поисковых машин, то заполнять их необходимо. Также, поисковые сервисы Google и Яндекс предоставляют возможность поиска информации по картинкам, а эти два атрибута помогут им правильно связать текстовый запрос пользователя с нужными файлами изображения.

И еще: обычные текстовые ссылки на странице можно дополнить их графическим аналогом, если нужное изображение поместить внутрь тэга <a>:

Пример графической ссылки:

<a href="ссылка на страницу"><img src=”ссылка на файл с изображением” alt=”описание изображения” title=“подпись изображения”/></a>

Я не зря написал, что именно дополнить, а не заменить. Сервисам поиска могут больше нравиться текстовые “анкоры”, поскольку они им более “понятны”. Вы, как автор интернет страницы, всегда обязаны думать в первую очередь о посетителях и эргономике вашей разметки именно для них, но никогда не забывать про тех, от кого зависят ваши позиции в результатах выдачи интернет поиска. Старайтесь, чтобы вся эта диалектика не вызвала в вас когнитивного диссонанса.

Обзор спецификации HTML5
Эта графическая ссылка добавлена следующим образом:
<a href='http://codingcraft.ru/web-design/html5.php'><img src='http://codingcraft.ru/images/articles/resources/HTML/html5.png' width='100px' height='100px' alt='Обзор спецификации HTML5' title='Обзор спецификации HTML5'></a>

Оформление текста

Представление в браузере:

К другим видам разметки относятся абзацы (p), перенос строки (br), линии (hr), а также различные манипуляции с текстом: выделение жирным (b), курсивом (i), подчеркиванием (u) и зачеркиванием (s). Есть также специальные теги (strong, em), которые помимо выделения текста сообщают различного рода анализаторам страниц, что выделенный фрагмент имеет большое значение или является ключевым термином. Иногда важно сохранить исходное форматирование (pre):

 количество   пробелов    и     табуляций.

По умолчанию все “лишние” проблемы ликвидируются обработчиком HTML. Аббревиатуры также рекомендуется выделять отдельно (abbr).
С помощью HTML можно записывать математические выражения и формулы:

(a+b)2=a2+2ab+ b2

C2H5OH

Можно особо важные фрагменты выделять другим

цветом

и (или)

шрифтом.


Много еще чего позволяет HTML, и про это "много" можно прочитать более подробно в интернете, набрав в поисковике, например

'HTML стили текста'

или что-то в этом роде.

HTML разметка:

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

Примеры разметки интернет страницы

Разметка или верстка интернет страницы – это процесс создания html макета страницы путем компоновки элементов – контейнеров, и их наполнение текстовыми и графическими данными. Если вы используете CMS инструменты, то, скорее всего, для вас процесс верстки - это только наполнение содержимым предоставляемых этими системами шаблонов. Если вы все делаете вручную, то в первую очередь средствами html разметки необходимо создать макет или шаблон интернет страницы. Шаблон он на то и шаблон, что его удобно использовать повторно каждый раз, когда на сайте создается новая страница. Вы можете разработать для себя библиотеку html шаблонов и каждый раз выбирать наиболее подходящий для конкретного случая. Этот раздел о макетах интернет страниц и о технике их верстки.

Табличная верстка

Ну а теперь все вместе. Пример ниже демонстрирует наиболее популярный шаблон интернет страницы, хотя и в очень упрощенной форме. В шаблоне использованы и заголовки и таблицы со списками и закладки. В первую очередь хочу обратить внимание на возможность суперпозиции составных элементов разметки, например, внутри ячеек одной таблицы могут находиться списки и другие таблицы. Вся страница представлена набором областей. Каждая область – это отдельная ячейка внешней таблицы, состоящей из трех строк: тема страницы, основное содержание и нижний колонтитул. Основное содержание, в свою очередь, состоит из трех колонок: слева находится список-меню, посередине основное содержание страницы и справа дополнительный рекламный раздел. Основное содержание также представлено в виде отдельных разделов, размеченных с использованием внутренней таблицы. Также, стоит обратить внимание на определение ширины элементов. Браузер рассчитывает ширину элементов слева направо, а высоту сверху вниз. Ширину и высоту можно определить как в абсолютных величинах, так и в относительных – в процентах. Если вы первому по порядку элементу сразу определите 100%, то остальным просто будет некуда деться, поэтому необходимо сразу определиться насчет процентного соотношения или задать некоторым элементам фиксированный размер. По умолчанию браузер определят ширину и высоту элементов, как минимально необходимую для размещения их содержимого в окне браузера. Для элементов, чей размер заранее неизвестен, можно этот размер и не задавать, положившись на выбор браузера, или определить его, как 100%, которые будут интерпретированы, как “все оставшееся место”. И еще одно замечание по поводу вертикального выравнивания одних элементов внутри других: по умолчанию браузер размещает элементы по центру, и если вас это не устраивает, то используйте атрибут valign, как это сделано с областью меню и дополнительным разделом в приведенном примере.

Представление в браузере:

(Представление ниже может отличаться от того, что открывается в отдельном окне, поскольку в текущем окне на процесс обработки html разметки оказывают влияние настройки CSS самого сайта codingcraft.ru.)

открыть в отдельном окне

Название страницы

  1. Раздел 1
  2. Раздел 2
  3. Раздел 3

Раздел 1

Параграф 1.1


Содержание параграфа 1.1

Параграф 1.2


Содержание параграфа 1.2

Параграф 1.3


Содержание параграфа 1.3

Раздел 2

Параграф 2.1


Содержание параграфа 2.1

Параграф 2.2


Содержание параграфа 2.2

Параграф 2.3


Содержание параграфа 2.3

Раздел 3

Параграф 3.1


Содержание параграфа 3.1

Параграф 3.2


Содержание параграфа 3.2

Параграф 3.3


Содержание параграфа 3.3

Дополнительный раздел под объявления, анонсы и рекламу


нижний колонтитул

HTML разметка:

В интернете среди веб - дизайнеров (и тех, кто себя таковыми считает) идут споры: с помощью каких конструкций создавать макет интернет сайтов. Только что я продемонстрировал то, как макет сайта можно создать с помощью таблицы-контейнера, которая разбивает страницу на отдельные области. На универсальное решение я не претендую, поскольку не являюсь профессиональным веб - дизайнером, но считаю, что основную идею ”как создать макет сайта с помощью таблиц” я донес. Такой способ называют табличной версткой. В следующем разделе я хочу в общих чертах описать еще один способ верстки html макетов.

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

Элемент <div> появился сравнительно недавно (сравнительно с таблицами), и на его основе веб мастера разработали новый подход к разметке многоцелевых интернет страниц. Верстку на основе блочного элемента <div> стали называть div-версткой. Работа с элементами <div> для разбиения страницы на области менее очевидна, чем работа с таблицами, но имеет ряд преимуществ. Во-первых, div-верстка – это более гибкий механизм, и считается, что исходный код такой разметки более компактный и понятный. Я неслучайно написал, что “считается”, поскольку все зависит от умения автора – программиста сайта: можно все сделать изящно и красиво с помощью таблиц, а можно в стремлении не отстать от моды с помощью div-ов нагородить такое, что не разгребешь. Можно сказать, что div верстка – это составление мозаики, а верстка таблицами – рисование сетки. Приведенные выше и ниже макеты html страниц легко описать и с помощью таблиц и с помощью div-ов, но если вам необходимо составить макет из прямоугольных областей абсолютно разного размера, то div-ы вам в руки и только. При верстке с помощью тэга <div> необходимо более аккуратно следить за тем, как ведет макет страницы на различных разрешениях экрана, поскольку на нестандартном разрешении все может “поплыть”. Перед тем, как продемонстрировать (опять же, без претензии на законченность и универсальность решения) пример div верстки, хочу сказать, что не стоит ограничивать себя каким-то одним подходом. Комбинируйте табличную и div верстку и получите по-настоящему красивое и эффективное решение. И еще: в следующем примере стили разметки я внедрил прямо в ее элементы посредством атрибута style. Так делать на практике не стоит, поскольку лучше подключать CSS через внешний файл, и ссылаться на стили с помощью атрибута class, а как это сделать я описал в разделе о CSS и способах их подключения. Здесь я поступил так, поскольку таким образом проще всего отобразить пример “живьем” в контексте стилей CSS для самого сайта codingcraft.ru. С другими шаблонами разметки, размещенными на этом сайте вы можете познакомиться здесь.

Представление в браузере:

(Представление ниже может отличаться от того, что открывается в отдельном окне, поскольку в текущем окне на процесс обработки html разметки оказывают влияние настройки CSS самого сайта codingcraft.ru.)

открыть в отдельном окне

Дополнительный раздел под объявления, анонсы и рекламу

Раздел 1

Параграф 1.1


Содержание параграфа 1.1

Параграф 1.2


Содержание параграфа 1.2

Параграф 1.3


Содержание параграфа 1.3

Раздел 2

Параграф 2.1


Содержание параграфа 2.1

Параграф 2.2


Содержание параграфа 2.2

Параграф 2.3


Содержание параграфа 2.3

Раздел 3

Параграф 3.1


Содержание параграфа 3.1

Параграф 3.2


Содержание параграфа 3.2

Параграф 3.3


Содержание параграфа 3.3

HTML разметка:


Пару слов о каскадных таблицах стилей

Каскадные таблицы стилей CSS (Cascading Style Sheets) – это специальный язык со своей специальной формальной грамматикой, с помощью которой можно описывать параметры стиля форматирования и графического представления элементов разметки в браузере. Конечно, в некоторых случаях это можно сделать и прямо по месту “не отходя от кассы”, определяя значения нужных атрибутов прямо в элементах разметки, но такой подход не очень удобен и даже вреден. Причина в том, что для однотипных участков, встречающихся на одной или нескольких страницах, настройки стиля придется копировать, что приведет к ненужному увеличению общего объема ресурса и, как следствие, к увеличению времени загрузки страницы, а также может стать причиной стилистических ошибок (при копировании можно и ошибиться). Вывод: использовать настройки стиля “по месту” разумно тогда, когда форматируемый фрагмент является уникальным в пределах всего ресурса и требует отдельного уникального оформления.

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

  1. К HTML странице можно подключить внешнюю таблицу стилей – файл с расширением .css (см. шаблон XHTML страницы, тэг <link>), можно внедрить таблицу стилей прямо в HTML код посредством тега <style>:
    <head>
      <style type="text/css">
        td {font-family : "trebuchet ms", Verdana, Tahoma, Arial, Sans-Serif;
             font-size : 14px;}
      </style>
    </head>
    или вписать персональный стиль элементу разметки с помощью атрибута style.
    <h1 style="font-family : "trebuchet ms", Verdana, Tahoma, Arial, Sans-Serif;">

  2. Стиль в CSS можно связать с элементом разметки одним из следующих способов:
    1. Связать с типом элемента:
      h2 {
      	font-family : "trebuchet ms", Verdana, Tahoma, Arial, Sans-Serif;
      	font-size : 17px;
      	margin : 10px; color : #356481;
      }
      Все элементы данного типа (заголовок 2-го уровня) будут отображаться в соответствии с указанными настройками.

    2. Определить класс элементов:
      .section {
      	font-family : "trebuchet ms", Verdana, Tahoma, Arial, Sans-Serif;
      	font-size : 14px;
      	color : #444;
      	background-color : #fff;
      	border-bottom : 1px solid #ccc;
      	padding : 5px;
      }
      Все элементы, относящиеся к классу section, например <td class=”section”>, браузер будет отображать именно так, как вы опишите в CSS. Есть еще возможность отдельно определить стили для элементов, которые входят в состав других элементов разметки. Если у вас есть специальный стиль для представления таблицы, и вам необходимо, чтобы заголовки (th) и/или ячейки (td) для таких таблиц отображались специальным образом, то вы можете в контексте стиля всей таблицы описать для них индивидуальные наборы параметров. Вот пример:
      .table_style th{
      	font-family : " Arial, Sans-Serif;
      	font-size : 12px;
      	border: 1px solid #ccc;
      	background-color : #eee;
      }:
      , где table_style – это имя класса таблицы, который в HTML будет задан примерно так: <table class=”table_style”…>.

    3. Связать другим способом. Например, связать по идентификатору элемента (значению атрибута id). В этом случае определение стиля в CSS начинается не с точки, а с символа #. Можно связать по типу элемента с фильтром по значению атрибутов. Есть и другие, встречающиеся намного реже в практике случаи.

    Стили, определенные для конкретного типа или класса элементов также распространяются на все его дочерние элементы. Например, чуть выше приведено определение стиля для класса section. И если для элемента таблицы td будет определена принадлежность к этому классу, текст внутри такого элемента будет выведен указанным в стиле шрифтом.

  3. Таблицы стилей называются каскадными, поскольку логика применения стиля к конкретному элементу определяется исходя из приоритета стиля. Иными словами, каскадирование в контексте HTML/CSS, это выбор стиля с наибольшим приоритетом. Откуда для каждого элемента берется несколько стилей, из которых приходится выбирать? Ну, во-первых, любой браузер имеет определенные настройки отображения содержимого интернет страниц, и они имеют наименьший приоритет. Далее, по порядку увеличения приоритета, идет наследуемый стиль – стиль элемента контейнера. Затем идут стили, определенные в каскадных таблицах стилей CSS: начиная со стилей более общей привязки по типу и заканчивая стилями с более конкретным типом привязки: по классу, идентификатору, значению атрибутов и т.д. Ну и наибольшим приоритетом обладают персональные или внедренные в элементы разметки стили.

Надеюсь, что этой информации будет достаточно, чтобы начать грамотно применять каскадные таблицы стилей для настройки внешнего вида ваших персональных интернет страниц. Конкретные примеры вы легко найдете в сети. Также, советую познакомиться с материалами раздела 'основы веб-дизайна' на сайте codingcraft.ru, где я постарался собрать шаблоны решений наиболее популярных задач, с которыми приходится сталкиваться в процессе создания сайта.


Эпилог

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


Другие вопросы, связанные с разметкой документов:


Компьютерные курсы и курсы программирования
Основы программирования

Курс для начинающих программистов на C# и VB.NET.

SQL 25™

Построение SQL запросов и работа с базой данных.

C# Quick Guide™

Программирование на C#. Краткое руководство.

RegEx

Применение регулярных выражений.

Plug-in архитектура

Примеры программной Plug-in архитектуры.

XML и его расширения

Язык разметки XML и его расширения с примерами.

HTML и разметка гипертекста

Языки HTML, XHTML и CSS с примерами разметки.

Основы веб-дизайна

Основы веб-дизайна: решения типовых задач верстки.

Программирование на PHP

Руководство по программированию на PHP для начинающих.

Справочные материалы

Шаблоны проектирования
Каталог шаблонов проектирования программных компонентов.

Рефакторинг кода
Каталог приемов рефакторинга программного кода.

Гость
Имя

Пароль



Забыли пароль?
Запросите новый здесь
.
Coding Craft. Все права защищены © 2011. Проект Инициативного Народного Фронта Образования - ИНФО-проект.