Главная | Обратная связь | Поможем написать вашу работу!

Теги можно писать как прописными, так и строчными символами

Любые теги, а также их параметры нечувствительны к регистру, поэтому форму записи вы вольны выбирать сами, как писать — <BR> или <br>. В любом случае рекомендуется придерживаться выбранной формы записи на протяжении всех страниц сайта. Заметим также, что текст, полностью набранный прописными символами, читается хуже, чем текст со строчными символами или смешанный.

Для параметров тегов используются значения по умолчанию

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

Переносы строк

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

Пример 5.1. Переносы строк в коде тега

Замечание

Хотя ошибки при переносе текста в подобном случае и не возникнет, рекомендуем писать теги в одну строку, иначе ухудшается восприятие кода и его становится сложнее править.

Параметры тегов и кавычки

Согласно спецификации HTML все параметры тегов следует брать в двойные или одинарные кавычки. Отсутствие кавычек не приведет к ошибкам, браузеры достаточно корректно обрабатывают код и без кавычек, за исключением текста, содержащего пробелы (пример 5.2).

Пример 5.2. Использование кавычек в параметрах тегов

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

Неизвестные теги и параметры

Если какой-либо тег или его параметр был написан неверно, то браузер проигнорирует подобный тег и будет воспроизводить текст так, словно тега и не было.

Порядок тегов

Существует определенная иерархия вложенности тегов. Например, метатеги должны находиться внутри контейнера <HEAD> и нигде иначе. Чтобы не возникло ошибки, следите за тем, чтобы теги располагались в коде правильно.

Если теги между собой равноценны в иерархии связи, то их последовательность не имеет значения. Так, можно поменять местами теги <TITLE> и <META>, на конечный результат это никак не скажется.

Закрывайте все теги

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

Порядок параметров в тегах

Порядок параметров в любом теге не имеет значения и на результат отображения элемента не влияет.

Шаг 6. Работа с текстом

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

Абзацы

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

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

Каждый абзац начинается с тега <p> и должен иметь необязательный закрывающий тег </p>.

Замечание

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

На рис. 6.1 показано, как создать новый абзац в программе Nvu. После добавления первого абзаца, остальные будут формироваться автоматически при нажатии на кнопку <Enter>.

Рис. 6.1. Создание нового абзаца в редакторе Nvu

В примере 6.1 показано применение абзацев для создания отступов между строк.

Пример 6.1. Использование абзацев

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
<title>Применение абзацев</title>
</head>
<body>
<p>В одних садах цветёт миндаль, в других метёт метель. </p>
<p>В одних краях ещё февраль, в других - уже апрель.</p>
<p>Проходит время, вечный счёт: год за год, век за век... </p>
<p>Во всём - его неспешный ход, его кромешный бег. </p>
<p>В году на радость и печаль по двадцать пять недель.</p>
<p>Мне двадцать пять недель февраль, и двадцать пять - апрель. </p>
<p>По двадцать пять недель в туман уходит счёт векам. </p>
<p>Летит мой звонкий балаган куда-то к облакам. </p>
<p><i>М. Щербаков</i></p>
</body>
</html>

Переносы строк

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

Lorem ipsum<br> dolor sit amet...

Замечание

Строка?Lorem ipsum dolor sit amet...? является канонической?рыбой?, иными словами это текст, вставляемый на веб-страницу, при отсутствии конечной информации. На этом сайте вы будете частенько встречать указанный текст, впрочем, как и на многих других сайтах.

Для создания переноса строки в Nvu, используйте сочетание клавиш <Shift>+<Enter>. Также можно выбрать из списка?Обычный текст? (рис. 6.1) и установить перенос уже клавишей <Enter>.

Заголовки

Заголовки выполняют важную функцию на веб-странице. Во-первых, они показывают важность раздела, к которому относятся. Чем больше заголовок и его?вес?, тем более он значимый. Вспомните, что в газетах и журналах передовицы набраны крупным шрифтом, тем самым, привлекая к ним внимание и говоря:?вот это надо читать обязательно?. Во-вторых, с помощью различных заголовков легко регулировать размер текста. Чем выше уровень заголовка, тем больше размер шрифта. Самым верхним уровнем является уровень 1 (<H1>), а самым нижним — уровень 6 (<H6>). И, в-третьих, поисковики добавляют рейтинг тексту, если он находится внутри тега заголовка. Это важно для раскрутки сайта и для его занятия первых строк выдачи результата в поисковой системе по ключевым словам.

Синтаксис создания заголовков следующий.

<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвертого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>

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

На рис. 6.2 показано, как установить требуемый заголовок для текста в редакторе Nvu.

Рис. 6.2. Выбор заголовка для текста

В примере 6.2 показано одновременное применение различных заголовков.

Пример 6.2. Использование заголовков

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta
content="text/html; charset=Windows-1251" http-equiv="content-type">
<title>Применение заголовков</title>
</head>
<body>
<h1>Ускорение работы сайта</h1>
<h2>Часть 1</h2>
<p>Ускорение загрузки и сокращение кода веб-страниц.</p>
<h2>Часть 2</h2>
<p>Сжатие графических файлов при сохранении их качества.</p>
<h2>Часть 3</h2>
<p>Ускорение запуска и выполнения скриптов на языке JavaScript.</p>
</body>
</html>

Полужирное начертание

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

<b>Жирное начертание шрифта</b>

Для создания полужирного начертания в Nvu, необходимо предварительно выделить текст и нажать на кнопку на панели инструментов. Аналогично можно воспользоваться сочетанием клавиш <Ctrl>+<B>.

Курсивное начертание

Курсивный шрифт представляет собой не просто наклон отдельных символов, для некоторых шрифтов это полная переделка под новый стиль, имитирующий рукописный. Синтаксис следующий.

<i>Курсивное начертание шрифта</i>

Для создания курсивного начертания в Nvu, необходимо предварительно выделить текст и нажать на кнопку на панели инструментов. Аналогично можно воспользоваться сочетанием клавиш <Ctrl>+<I>.

Верхний индекс

Воспроизводит текст как верхний индекс. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера. Синтаксис следующий.

<sup>Верхний индекс</sup>

Для изменения вида текста, выберите пункт меню Формат > Стиль текста > Верхний индекс, как показано на рис. 6.3.

Рис. 6.3. Выбор стиля текста через меню Nvu

Через это же меню можно установить и другие виды начертания текста.

Нижний индекс

Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера. Синтаксис следующий.

<sub>Нижний индекс</sub>

Для изменения вида текста, выберите пункт меню Формат > Стиль текста > Нижний индекс.

Шаг 7. Ссылки

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

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега <A>, который имеет обязательный параметр href. В качестве значения используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов).

Адрес может быть абсолютным и относительным. Абсолютные адреса должны начинаться с указания протокола и содержать имя сайта (домена), например, ссылка вида http://www.htmlbook.ru является абсолютной и ведет на главную страницу сайта htmlbook.ru. В примере 7.1 показано создание абсолютной ссылки на другой сайт.

Пример 7.1. Использование абсолютных ссылок

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
<title>Использование ссылок</title>
</head>
<body>
<a href="http://www.htmlbook.ru">Ссылка на сайт htmlbook.ru</a>
</body>
</html>

Для создания абсолютной ссылки в Nvu, выделите текст и нажмите на кнопку на панели инструментов или выберите пункт меню Вставка > Ссылка (<Ctrl>+<L>). После чего откроется окно, где следует ввести полный адрес требуемой веб-страницы или сайта (рис. 7.1).

Рис. 7.1. Добавление адреса ссылки

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

При создании локальных ссылок надо понимать, какой путь (URL) в каком случае следует указывать, поскольку он зависит от расположения файлов. Рассмотрим несколько типичных вариантов.

1. Файлы располагаются в одной папке (рис. 7.2).

Рис. 7.2.

Необходимо сделать ссылку из исходного документа на ссылаемый. В таком случае код будет следующий.

<a href="Ссылаемый документ.html">Локальная ссылка</a>

Подобное имя файла взято только для образца, на сайте в именах файлов не следует использовать русские символы с пробелами, да еще и в разном регистре.

2. Файлы размещаются в разных папках (рис. 7.3).

Рис. 7.3.

Когда исходный документ хранится в одной папке, а ссылаемый в корне сайта, то перед именем файла в адресе ссылки следует поставить две точки и слэш (/), как показано в примере.

<a href="../Ссылаемый документ.html">Локальная ссылка</a>

3. Файлы размещаются в разных папках (рис. 7.4).

Рис. 7.4.

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

<a href="../../Ссылаемый документ.html">Локальная ссылка</a>

Аналогично обстоит дело с любым числом вложенных папок.

4. Файлы размещаются в разных папках (рис. 7.5).

Рис. 7.5.

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

<a href="Папка/Ссылаемый документ.html">Локальная ссылка</a>

Заметьте, что никаких дополнительных точек и слэшей перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так.

<a href="Папка 1/Папка 2/Ссылаемый документ.html">Локальная ссылка</a>

Замечание Иногда можно встретить путь к файлу относительно корня сайта, он выглядит как?/Папка/Имя файла? со слэшем вначале. Учтите, что такая форма записи не работает на локальном компьютере, а только под управлением веб-сервера.

При создании локальной ссылки Nvu самостоятельно подставит нужный путь к файлу, вам требуется лишь выбрать файл, на который следует сделать ссылку (рис. 7.6).

Рис. 7.6. Создание локальной ссылки

При этом нужно поставить флажок на пункте?Относительный URL?, чтобы путь к файлу был локальным.

⇐ Предыдущая 1 234 5 Следующая ⇒

Воспользуйтесь поиском по сайту: