Файл: Языки гипертекстовой разметки ( HTML, XML, XHTML, SGML ).pdf

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

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

Стили (CSS)

Связанные стили

При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением css. Для связывания документа с этим файлом применяется тег <link>. [31] Данный тег помещается в контейнер <head>, как показано в примере ниже.

<!DOCTYPE HTML>

<html>

<head>

<title>Стили</title>

</head>

<body>

<h1>Заголовок</h1>

<p>Текст</p>

</body>

</html>

Значение атрибута тега <link> — rel остаётся неизменным независимо от кода, как приведено в данном примере. Значение href задаёт путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. [32] Важно, что таким образом можно подключать таблицу стилей, которая находится на другом сайте.

Содержимое файла mysite.css подключаемого посредством тега <link> приведено в примере.

H1 {

color: #000080;

font-size: 200%;

font-family: Arial, Verdana, sans-serif;

text-align: center;

}

P {

padding-left: 20px;

}

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

Глобальные стили

При использовании глобальных стилей свойства CSS описываются в самом документе и располагаются в заголовке веб-страницы. [33] По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет хранить стили в одном месте, в данном случае непосредственно на той же странице с помощью контейнера <style>, как показано в примере.

<!DOCTYPE HTML>

<html>

<head>

<title>Глобальные стили</title>

<style>

H1 {

font-size: 120%;

font-family: Verdana, Arial, Helvetica, sans-serif;

color: #333366;

}

</style>

</head>

<body>

<h1>Hello, world!</h1>

</body>

</html>

В данном примере задан стиль тега <h1>, который затем можно использовать во всех необходимых местах на данной веб-странице.

Внутренние стили

Внутренний или встроенный стиль является по существу расширением для одиночного тега, используемого на текущей веб-странице. [34] Для определения стиля используется атрибут style, а его значением выступает набор стилевых правил.

<!DOCTYPE HTML>

<html>

<head>

<title>Внутренние стили</title>

</head>

<body>

<p style="font-size: 120%; font-family: monospace; color: #cd66cc">Пример текста</p>

</body>

</html>

В данном примере стиль тега <p> задаётся с помощью атрибута style, в котором через точку с запятой перечисляются стилевые свойства

Скрипты <script>…</script>

В данном разделе мы рассмотрим все основные элементы javascript.

Javascript подключается напрямую в HTML-файл. [35] Самый простой способ - это написать javascript-команды внутри тега <script> в теле страницы.

Подключение в любом месте

Когда браузер читает HTML-страничку, и видит <script> - он первым делом читает и выполняет код, а только потом продолжает читать страницу дальше.

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

<body>

<h1>Считаем кроликов</h1>

for(var i=1; i<=3; i++) {

alert("Из шляпы достали "+i+" кролика!")

}

</script>

<h1>...Посчитали</h1>

</body>

В этом примере использовались следующие элементы.

Тег <script> сообщает браузеру о том, что внутри находится исполняемый скрипт. Атрибут type говорит о том, что это javascript. Атрибут может и отсутствовать, но с точки зрения стандарта его следует указать. [36]

Конструкция for.

Это стандартный цикл, по синтаксису аналогичный другим языкам программирования.

Объявление var i.

Объявление переменной внутри цикла: i - локальная переменная.

Функция alert.

Выводит сообщение на экран и ждет, пока посетитель не нажмет ОК.

Вынос скриптов в заголовок HEAD.

Обычно javascript стараются отделить от собственно документа.

Для этого его помещают внутрь тега HEAD, а в теле страницы по возможности оставляется чистая верстка.

В следующем примере javascript-код только описывает функцию count_rabbits, а ее вызов осуществляется по нажатию на кнопку input.

<html>

<head>

function count_rabbits() {

for(var i=1; i<=3; i++) {

alert("Из шляпы достали "+i+" кролика!")

}

</script>

</head>

<body>

</body>

</html>

Для указания запускаемой по клику функции в input был использован атрибут onclick. Это лишь вершина мощного айсберга javascript-событий.

Внешние скрипты.

Обычно javascript-код не пишут в HTML, а подключают отдельный файл со скриптом. Делается это следующим образом:

<script src="/script.js"></script>

При этом файл /my/script.js содержит javascript-код, который иначе мог бы находиться внутри тега <script>.

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

Чтобы подключить несколько скриптов, следует использовать несколько подобных тегов:

<script src="/js/script1.js"></script>

<script src="/js/script2.js"></script>

При указании атрибута src содержимое тега игнорируется.

То есть одновременно подключить внешний файл и написать что-то внутри тега нельзя. Придется делать два разных тега <script>: первый с src, второй - с командами, которые будут выполнены после выполнения внешнего файла.

Блочные элементы

Блочные элементы характеризуются тем, что занимают всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. [37]

<div>…</div>

Тег <div> относится к универсальным блочным контейнерам и применяется в тех случаях, где нужны блочные элементы без дополнительных свойств. [38] Также с помощью тега <div> можно выравнивать текст внутри этого контейнера с помощью атрибута align.

<h1>Заголовок</h1> (h1…h6)

В HTML используются шесть текстовых заголовков разного уровня, с помощью которых можно разделять текст на секции разного уровня. Таким образом, тег <h1> используется для наиболее важных заголовков (заголовки первого уровня), а тег тег <h6> показывает заголовки шестого уровня, являющиеся наименее важными. [39] Заголовок первого уровня по умолчанию отображается самым крупным жирным шрифтом, заголовки следующих уровней имеют менее крупный шрифт.

Поскольку теги <h1>...<h6> являются блочными элементами, они должны начинаться с новой строки, а следующие за ними элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. [40]

<p>Абзац</p>

Тег <p> указывает на начало абзаца (параграфа) текста. Если нет закрывающего тега, то конец данного абзаца совпадает с началом следующего абзаца.

Поскольку, тег <p> является блочным элементом, текст всегда начинается с новой строки, а абзацы, следующие один за другим, разделены пустым пространством (или отбивкой).

Строчные элементы

Строчными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. В основном они используются для изменения вида текста или его логического выделения. [41]

Разница между блочными и строчными элементами следующая.

Строчные элементы могут содержать только данные или другие строчные элементы, а в блочные допустимо вкладывать другие блочные элементы, строчные элементы, а также данные. Иными словами, строчные элементы никак не могут хранить блочные элементы. [42]
Блочные элементы всегда начинаются с новой строки, а строчные таким способом не акцентируются.
Блочные элементы занимают всю доступную ширину, например, окна браузера, а ширина строчных элементов равна их содержимому плюс значения отступов, полей и границ.

<a>…</a>

Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. [43] В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Ссылки являются основой гипертекстовых документов и позволяют переходить с одной веб-страницы на другую. Особенность их состоит в том, что сама ссылка может вести не только на HTML-файлы, но и на файл любого типа, причем этот файл может размещаться совсем на другом сайте. [44] Главное, чтобы к документу, на который делается ссылка, был доступ. Иными словами, если путь к файлу можно указать в адресной строке браузера, и файл при этом будет открыт, то на него можно сделать ссылку.

<span>…</span>

Универсальный тег, предназначенный для определения строчного элемента внутри документа. [45]

<b>…</b>

Определяет жирное начертание шрифта.

<i>…</i>

Устанавливает курсивное начертание шрифта.

<br />

Тег <br> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа <p>, использование тега <br> не добавляет пустой отступ перед строкой.

<img />

Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0" в тег <img>.

Списки

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

<ol>…</ol>

Тег <ol> устанавливает нумерованный список, т.е. каждый элемент списка начинается с числа или буквы и увеличивается по нарастающей. [47]

<ul>…</ul>

Устанавливает маркированный список, каждый элемент которого начинается с небольшого символа — маркера.

<li>…</li>

Тег <li> определяет отдельный элемент списка. [48]Внешний тег <ul> или <ol> устанавливает тип списка — маркированный или нумерованный.

<dd>, <dt>, <dl>

Тройка элементов предназначена для создания списка определений. Каждый такой список начинается с контейнера <dl>, куда входит тег <dt> создающий термин и тег <dd> задающий определение этого термина. [49] Закрывающий тег </dd> не обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента. Тем не менее, предпочтительнее закрывать все теги.

Таблицы

Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. [50] Обычно таблицы используются для упорядочения и представления табличных данных.

<table>…</table>

Служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>.

<td>…</td>

Предназначен для создания одной ячейки таблицы. Тег <td> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.

<th>…</th>

Тег <th> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. [51] Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру.