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

⇐ ПредыдущаяСтр 3 из 5Следующая ⇒

Любые теги, а также их параметры нечувствительны к регистру, поэтому форму записи вы вольны выбирать сами, как писать — <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?, чтобы путь к файлу был локальным.

Открытие ссылки в новом окне

По умолчанию, при переходе по ссылке документ открывается в текущем окне. При необходимости, это условие может быть изменено параметром target тега <А>. Если установить у target значение _blank, как показано в примере 7.2, то отроется новое окно и документ, на который ведет ссылка, загрузится в нем.

Пример 7.2. Открытие документа в новом окне

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

Рис. 7.7. Изменение свойств ссылки

Шаг 8. Якоря (анкеры)

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

Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей имя при помощи параметра name тега <А> (пример 8.1).

Пример 8.1. Создание внутренней ссылки

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
<body>

...

<a href="#top">Наверх</a>
</body>
</html>

Между тегами <a name="top"> и </a> текст не обязателен, так как требуется лишь указать местоположение перехода по ссылке, находящейся внизу страницы. Имя ссылки на якорь начинается символом #, после чего идет имя якоря, оно выбирается любое, соответствующее тематике.

Для создания якоря в Nvu используется кнопка на панели инструментов. Аналогичное действие производится через меню Вставка > Якорь с именем... После чего запрашивается желаемое имя якоря (рис. 8.1).

Рис. 8.1. Ввод имени якоря

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

Рис. 8.2. Выбор якоря из списка

Обратите внимание, что имя якоря на рис. 8.1 пишется без дополнительного символа решетки (#), а в списке якорей на рис. 8.2 символ решетки добавляется автоматически.

Шаг 9. Изображения

Для встраивания изображения в документ используется тег <IMG>, имеющий единственный обязательный параметр src, который определяет адрес файла с картинкой.

Для указания адреса изображения можно задавать как абсолютный, так и относительный путь. В общем случае, правила для добавления изображений те же, что и при создании ссылок.

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

· Если в начале адреса стоит слэш (символ /), то отсчет идет от корня сайта. Например, адрес сайта — http://baklan.narod.ru означает, что написав путь к изображению как /images/bird.jpg, мы, тем самым говорим серверу показать в браузере файл http://baklan.narod.ru/images/bird.jpg. Учтите, что подобные ссылки со слэшем впереди работают только на веб-сервере, на локальном компьютере они действовать не будут.

· Если перед адресом добавляется упоминание протокола HTTP (http://), то речь идет об абсолютной ссылке. Изображение всегда будет загружаться с указанного адреса в Интернете, даже при сохранении веб-страницы на локальный компьютер.

· Двоеточие со слэшем (../) в начале адреса говорит о том, что и рисунок и веб-страница находятся в разных папках, которые размещены на одном уровне. На рис. 9.1 показан файл index.html, в который требуется поместить рисунок sample.gif. Тогда относительный путь к изображению из index.html будет ../images/pic.gif. Возможны случаи хранения файлов, что обращение из одного файла к другому превращается в набор двоеточий, например: ../../../images/pic.gif.

Рис. 9.1. Пример размещения файлов

· Имя папки в начале пути, без всяких слэшей и двоеточий, сообщает, что и текущий файл и папка с изображением находятся на одном уровне. Как показано на рис.9.2, относительный путь к рисунку sample.gif из файла index.html будет images/pic.gif.

Рис. 9.2. Пример размещения файлов

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

Пример 9.1. Вставка изображения в документ

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<img src="http://www.htmlbook.ru/images/sample.gif"> - абсолютный адрес размещения изображения
<img src="/images/sample.gif"> - адрес размещения изображения относительно корня сайта
<img src="images/sample.gif"> - адрес размещения изображения относительно текущего HTML-документа
</body>
</html>

Альтернативный текст

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

Для создания альтернативного текста используется параметр alt тега <IMG>, как показано в примере 9.2.

Пример 9.2. Добавление альтернативного текста

Размеры изображения

Для изменения размеров изображения средствами HTML предусмотрены параметры width и height тега <IMG> (пример 9.3). В качестве значений используется пиксел — элементарная точка на мониторе.

Пример 9.3. Размеры изображения

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

Замечание

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

Рамка вокруг изображения

Вокруг изображения можно добавить рамку, цвет которой совпадает с цветом текста на веб-странице. Для этого служит параметр border тега <IMG> (пример 9.4). В качестве значения указывается толщина рамки в пикселах.

Пример 9.4. Добавление рамки вокруг изображения

Поля вокруг изображения

Для любого изображения можно задать пустые поля по горизонтали и вертикали с помощью параметров hspace и vspace. Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не наезжал плотно на изображение, необходимо вокруг него добавить пустое пространство (пример 9.5).

Пример 9.5. Добавление отступов вокруг изображения

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<img src="sample.gif" align="left" height="50" hspace="10" vspace="10">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</body>
</html>

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

Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается параметром align тега <IMG>. В табл. 9.1 перечислены возможные значения этого параметра и результат его использования.

Табл. 9.1. Значения параметра align для выравнивания изображений
Значение	Описание	Пример
bottom	Нижняя граница изображения выравнивается по базовой линии текстовой строки. Это значение установлено по умолчанию.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
left	Изображение располагается по левому краю родительского элемента.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
middle	Середина изображения выравнивается по базовой линии текущей строки текста.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
right	Изображение выравнивается по правому краю родительского элемента.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
top	Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Наиболее популярные параметры ? left и right, создающие обтекание вокруг изображения (пример 9.6).

Пример 9.6. Обтекание текста вокруг рисунка

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<img src="sample.gif" align="left" height="50" hspace="10" vspace="10" ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</body>
</html>

Работа с изображениями в Nvu

Для добавления нового изображения в Nvu нажмите на кнопку или выберите пункт меню Вставка > Изображение... После этого откроется диалоговое окно, где следует указать адрес изображения и альтернативный текст (рис.9.3).

Рис. 9.3. Окно свойств изображения

Замечание

Некоторые браузеры никак не отображают альтернативный текст, кроме случая отключения показа изображений. Если вы хотите обязательно сделать всплывающую подсказку, используйте параметр title тега <IMG>. В Nvu можно добавить эту возможность, заполнив текстом поле ?Всплывающая подсказка? (рис. 9.3).

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

Рис. 9.4. Изменение размеров изображения в Nvu

Остальные параметры, определяющие вид изображения, меняются на вкладке ?Внешний вид? (рис. 9.5). Сюда входят ?Поля слева и справа? (параметр hspace), ?Поля сверху и снизу? (vspace), ?Сплошная рамка? (border) и ?Расположение текста относительно изображения? (align).

Рис. 9.5. Добавление отступов, рамки и выравнивания к изображению

Дата добавления: 2019-02-12; просмотров: 311; Мы поможем в написании вашей работы!

Поделиться с друзьями:

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

Мы поможем в написании ваших работ!