Абзацы

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

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

<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>

<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>

ALIGN

Задает выравнивание таблицы по краю окна браузера. Допустимые значения: left— выравнивание таблицы по левому краю, center — по центру и right — по правому краю.

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<body>

</body>

</html>

BORDER

Устанавливает толщину рамки в пикселах. По умолчанию рамка изображается трехмерной, но если используется параметр bordercolor тега <TABLE>, то вид рамки меняется. Когда в теге <TABLE> используется параметр border без аргументов (<tableborder>), то браузер отображает рамку толщиной один пиксел.

BORDERCOLOR

Устанавливает цвет рамки таблицы. Рамка обычно рисуется как трехмерная, добавление параметров bordercolor и border к тегу <TABLE> создают однотонную линию.

Браузер

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

Наиболее популярны следующие браузеры: Internet Explorer, Firefox, Mozilla, Netscape, Opera.

CELLPADDING

Определяет расстояние между границей ячейки и ее содержимым. Этот параметр добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без параметра cellpadding текст в таблице «налипает» на рамку, снижая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот параметр не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.

CELLSPACING

Задает расстояние между внешними границами ячеек. Если установлен параметр border, толщина границы принимается в расчет и входит в общее значение.

COLSPAN

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

Ячейка 1
Ячейка 2	Ячейка 3

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

CSS (Cascading Style Sheets, каскадные таблицы стилей)

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

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

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

Добавление и удаление ячеек

Новые ячейки можно добавлять двумя основными способами. Первый способ заключается в использовании пункта меню Таблица> Вставить, как показано на рис. 11.7. Это подменю позволяет добавлять строки и столбцы относительно ячейки, в которой находится курсор. Например, курсор находится в верхней ячейке таблицы. Тогда выбор пункта «Строка сверху» добавит новую строку сверху текущей ячейки, которая, соответственно, переместится ниже.

Рис. 11.7. Добавление новых строк в таблицу

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

Рис. 11.8. Добавление и удаление новых ячеек

Замечание

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

Кроме способа удаления строк и столбцов таблицы, показанного на рис. 11.8, можно воспользоваться пунктом меню Таблица > Удалить (рис. 11.9), где из подменю выбрать, что вы желаете удалить.

Рис. 11.9. Удаление строк таблицы

Добавление таблицы и изменение ее свойств в Nvu

Для добавления таблицы нажмите на кнопку

на панели инструментов Nvu или выберите пункт меню Вставка> Таблица... или Таблица > Вставить > Таблица... После чего откроется окно, как показано на рис. 11.1.

Рис. 11.1. Вставка таблицы в Nvu

Укажите желаемые размеры таблицы и щелкните по кнопке ОК или в любом месте внутри таблицы (рис. 11.1). При таком способе создания таблицы некоторые параметры устанавливаются автоматически, в частности, ширина таблицы равна 100 пикселов, значения параметров cellspasing и cellpadding равны 2 пикселам, а border — 1 пикселу. Также добавляется необязательный тег <TBODY> (пример 11.2).

Пример 11.2. Исходная таблица, созданная с помощью Nvu

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<body>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

Замечание

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

Чтобы указать дополнительные параметры таблицы, такие как: количество строк, столбцов, ширина таблицы и рамки, то следует выбрать вкладку «Точная» в окне «Вставка таблицы», как показано на рис. 11.2.

Рис. 11.2. Указание некоторых параметров при создании таблицы

Такие атрибуты таблицы как горизонтальное выравнивание в ячейке (align), вертикальное выравнивание (valign), переносить текст или нет (wrap), расстояние между соседними ячейками (cellspacing) и отступ от границы до содержимого ячейки (cellpadding) можно установить на вкладке «Ячейка» (рис. 11.3).

Рис. 11.3. Параметры ячеек и таблицы

HEIGHT

Устанавливает высоту таблицы. В спецификации HTML 4 этого параметра нет, однако браузеры в большинстве случаев понимают его, если он установлен у тега <TABLE>. Если высота таблицы не указана, то берется суммарное значение параметра height у тега <TD>, в противном случае высота вычисляется на основе содержимого таблицы.

HTML-документ

Обычный текстовый файл, который может содержать в себе текст, теги и стили. Изображения и другие объекты хранятся отдельно. Содержимое такого файла обычно называется HTML-код.

HTML (HyperText Markup Language, язык разметки гипертекста)

HTML — это система верстки веб-страниц, которая определяет, какие элементы и как должны располагаться в документе. Чтобы показать, что мы имеем дело не с обычным текстовым документом, используется термин HTML-документ. Подобные документы открываются под управлением браузера.

HTML-редактор

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

Изменение размеров таблицы и ячеек

Чтобы изменить размеры исходной таблицы достаточно поместить курсор в любую ячейку созданной таблицы, и тогда отобразятся специальные маркеры по ее сторонам, с помощью которых можно установить новый размер (рис. 11.4). Размеры ячеек отображаются на линейках сверху и слева.

Рис. 11.4. С помощью мыши можно указывать новую ширину и высоту таблицы

После того как вы потянете за один из маркеров, новый размер таблицы отображается пунктирной линией. Также в специальном окне выводятся ширина и высота таблицы, а в скобках — изменения относительно текущего размера (рис. 11.5).

Рис. 11.5. Отображение новых размеров таблицы

Изменить ширину или высоту отдельных строк или колонок таблицы можно с помощью линеек, как показано на рис. 11.6. Наводите курсор мыши на разделительную полосу и перемещаете в нужную сторону. Текущая ширина или высота отображается там же в момент перемещения.

Рис. 11.6. Изменение ширины столбца

Замечание

Обычно линейки в Nvu всегда включены, но вы можете сами их выключать или включать при необходимости через меню Вид > Показать/скрыть > Линейки.

Изменение свойств ячеек

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

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

Рис. 11.13. Свойства ячеек

Информация взята с сайта

Изменение свойств таблицы

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

на панели инструментов. Откроется окно «Свойства таблицы», где надо выбрать вкладку «Таблица», как показано на рис.11.12. Аналогично можно вызвать окно через пункт меню Таблица > Свойства таблицы...

Рис. 11.12. Свойства таблицы

С помощью окна «Свойства таблицы» можно указать новое количество строк и столбцов, ширину таблицы, толщину рамки и другие параметры.

Изображение в качестве ссылки

Кроме текста, в качестве ссылок можно использовать и рисунки. Изображение в этом случае надо поместить между тегами <A> и </A>, как показано в примере 9.7.

Пример 9.7. Создание рисунка-ссылки

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<body>

</body>

</html>

Когда изображение становится ссылкой, вокруг него автоматически добавляется рамка толщиной один пиксел. Чтобы убрать рамку, добавьте параметр border="0" к тегу <IMG>.

В Nvu создание ссылки для изображения делается с помощью вкладки «Ссылка» в параметрах добавления и свойств изображения, как показано на рис. 9.6.

Рис. 9.6. Создание ссылки на изображении в Nvu

Информация взята с сайта

Кодировка

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

Контейнер

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

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

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

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

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

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

Любое количество пробелов идущих подряд, на веб-странице отображается как один

Сколько бы вы не поставили пробелов между словами, это никак не повлияет на конечный вид текста. Это же правило относится к символам табуляции и переносу текста. Поэтому не ставьте лишних пробелов, поскольку это лишь увеличит общий объем файла, но никак не изменит вид документа в браузере. В качестве образца возьмем один текст и напишем его в коде HTML по-разному (пример3.1).

Пример 3.1. Способы написания текста в коде HTML

<p>Измеряй микрометром. Отмечай мелом. Отрубай топором. </p>

<p>Измеряй микрометром. Отмечай мелом. Отрубай топором.</p>

<p>Измеряй микрометром.

Отмечай мелом.

Отрубай топором. </p>

Несмотря на разное написание, отображаться эти строки будут одинаково.

Замечание 1

Исключением из этого правила является тег PRE, внутри которого любое число пробелов отображается именно так, как оно указано в коде.

Замечание 2

Обычно символы табуляции в коде HTML применяются для того, чтобы установить отступ слева, таким образом выровнять теги «лесенкой» и создать «красивый» удобочитаемый код. Помните при этом, что пользователи редко заглядывают в исходный код документа, им это просто не надо, зато каждый символ табуляции или пробела увеличивает ненужный объем файла. А это в итоге влияет на скорость загрузки и отображения документа.

Маркированный список

Маркированный список определяется тем, что перед каждым элементом списка добавляется небольшой маркер, обычно в виде закрашенного кружка. В этом смысле все пункты списка идентичны по своему оформлению. Для установки маркированного списка используются теги <UL> и <LI> (пример10.1).

Пример 10.1. Создание маркированного списка

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<body>

<ul>

<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</li>

<li>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</li>

<li>Duis te feugifacilisi.</li>

<li>Duis autem dolor in hendrerit in vulputate velit esse molestie consequat.</li>

</ul>

</body>

</html>

Результат выполнения примера показан ниже.

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.

Duis te feugifacilisi.

Duis autem dolor in hendrerit in vulputate velit esse molestie consequat.

Обратите внимание на отступы сверху, снизу и слева от списка. Такие отступы добавляются автоматически.

Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора стиля маркера используется параметр type тега <UL>. Допустимые значения приведены в табл. 10.1

Табл. 10.1. Стили маркеров списка

Тип списка

Код HTML

Пример

Маркированный список с маркерами в виде круга

</ul>

Чебурашка

Крокодил Гена

Шапокляк

Маркированный список с маркерами в виде окружности

Чебурашка

Крокодил Гена

Шапокляк

Маркированный список с квадратными маркерами

Чебурашка

Крокодил Гена

Шапокляк

<

Для создания нового маркированного списка в Nvu, предназначена кнопка

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

) и вводить желаемый текст. Нажатие на клавишу <Enter> создаст новый элемент списка, еще одно нажатие на <Enter> отменяет работу со списком и позволяет вводить обычный форматированный текст.

Для изменения стиля маркеров выберите пункт меню Формат > Список > Свойство списка... и в открывшемся окне укажите желаемый стиль (рис. 10.1).

Рис. 10.1. Панель для изменения стиля маркера

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

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

Нет расстановки переносов в тексте

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

Представьте, что у вас в середине предложения есть какое-нибудь длинное слово, вот например «Дегидроэпиандростерон». В текстовом редакторе это слово будет перенесено по слогам так, чтобы текст занял указанную ширину, а на веб-странице подобное слово будет отображаться целиком, без переносов.

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

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

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

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

Информация взята с сайта

NOWRAP

Добавление параметра nowrap к тегу <TD> заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой. Неправильное использование этого атрибута может привести к тому, что таблица будет слишком широкой и не поместится целиком на веб-страницу. Как следствие, появится горизонтальная полоса прокрутки. В любом случае, пользоваться подобной таблицей будет неудобно, из-за чего применение параметра nowrap осуждается в спецификации HTML 4.

Нумерованный список

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

арабские цифры (1, 2, 3, ...);

прописные латинские буквы (A, B, C, ...);

строчные латинские буквы (a, b, c, ...);

римские цифры в верхнем регистре (I, II, III, ...);

римские цифры в нижнем регистре (i, ii, iii, ...).

Для указания типа нумерованного списка применяется параметр type тега <OL>. Его возможные значения приведены в табл. 10.2

Табл. 10.2. Типы нумерованного списка

Тип списка

Код HTML

Пример

Нумерованный список с арабскими цифрами	<ol type="1"> <li>...</li> </ol>	1. Чебурашка 2. Крокодил Гена 3. Шапокляк
Нумерованный список с прописными буквами латинского алфавита	<ol type="A"> <li>...</li> </ol>	A. Чебурашка B. Крокодил Гена C. Шапокляк
Нумерованный список со строчными буквами латинского алфавита	<ol type="a"> <li>...</li> </ol>	a. Чебурашка b. Крокодил Гена c. Шапокляк
Нумерованный список с римскими цифрами в верхнем регистре	<ol type="I"> <li>...</li> </ol>	I. Чебурашка II. Крокодил Гена III. Шапокляк
Нумерованный список с римскими цифрами в нижнем регистре	<ol type="i"> <li>...</li> </ol>	i. Чебурашка ii. Крокодил Гена iii. Шапокляк

В примере 10.2 показано создание списка с использованием римских цифр в верхнем регистре.

Пример 10.2. Создание нумерованного списка

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<body>

<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</li>

<li> Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</li>

<li>Duis te feugifacilisi.</li>

<li>Duis autem dolor in hendrerit in vulputate velit esse molestie consequat.</li>

</ol>

</body>

</html>

Результат примера показан ниже.

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.

Duis te feugifacilisi.

Duis autem dolor in hendrerit in vulputate velit esse molestie consequat.

Создание нумерованного списка в Nvu напоминает создание списка маркированного. Но для этого вида списка используется кнопка

на панели инструментов. Для изменения стиля нумерации выберите пункт меню Формат > Список > Свойство списка... и укажите желаемые параметры в открывшемся окне (рис. 10.2).

Рис. 10.2. Панель для изменения свойств нумерованного списка

Объединение ячеек

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

Рис. 11.10. Выделенные ячейки таблицы

Теперь остается выбрать пункт меню Таблица > Объединить выбранные ячейки и таблица приобретает вид, как показано на рис. 11.11.

Рис. 11.11. Таблица с объединенными ячейками

Особенности таблиц

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

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

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

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

Рамка таблицы, в случае добавления параметра border к тегу <TABLE>, изначально отображается как трехмерная. Присоединение параметра bordercolor превращает рамку в однотонную, ликвидируя тем самым эффект трехмерности.

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<body>

<a href="http://www.htmlbook.ru" target="_blank">Ссылка открывает новое окно на сайт htmlbook.ru</a>

</body>

</html>

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

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

Информация взята с сайта

Параметры ячеек

Каждая ячейка таблицы, задаваемая через тег <TD>, в свою очередь тоже имеет свои параметры, часть из которых совпадает с параметрами тега <TABLE>.

Параметры таблиц

Тот факт, что таблицы применяются достаточно часто и не только для отображения табличных данных обязан не только их гибкости и универсальности, но и обилию параметров тегов <TABLE>, <TR> и <TD>. Далее перечислены параметры тега <TABLE>.

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

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

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

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

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

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

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

<img src="/images/title2.gif"

alt="Вид заголовка в браузере Internet Explorer"

width="438"

height="118">

Замечание

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

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

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

Lorem ipsum<br> dolor sit amet...

Замечание

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

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<body>

<img src="sample.gif" align="left" height="50" width="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>

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

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

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

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

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

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

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

Информация взята с сайта

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

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

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

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

Для добавления нового изображения в Nvu нажмите на кнопку

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

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

Замечание

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

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

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

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

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<body>

</body>

</html>

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<body>

</body>

</html>

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

Замечание

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

Редактор веб-страниц

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

ROWSPAN

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

Ячейка 1	Ячейка 2
Ячейка 3

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

Сайт (интернет-ресурс)

Cайт — это набор отдельных веб-страниц, которые связаны между собой ссылками и единым оформлением.

Основные понятия

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

Создание HTML-документа

Поскольку HTML-файл является обычным текстовым документом, то для написания кода HTML и создания веб-страницы подойдет любой текстовый редактор, например «Блокнот» (Notepad), который входит в комплект Windows. Большинство авторов так и советуют — используйте Блокнот, говорят они и точка. Но мы заявляем — забудьте об этой программе, она не предназначена для создания и редактирования HTML-кода. Существует целый класс HTML-редакторов специально «заточенных» для создания отдельных веб-страниц и сайтов целиком. Если ваша цель — написание небольшого HTML-кода, то разницы нет, в каком редакторе его писать. Но если вы хотите серьезно и эффективно подойти к созданию сайта, воспользуйтесь редакторами, которые помогут вам в этом. «Эффективно» в данном случае означает достижение требуемого результата с наименьшими затратами. Сюда входит время, затраченное на написание корректного кода, исправление ошибок, тестирование и т.д.

Далее все манипуляции с HTML будем производить в HTML-редакторе Nvu. Его достоинства следующие.

Эта программа бесплатная для использования, скачать последнюю версию можно с сайта http://nvu.mozilla.ru.

Программа грамотно русифицирована, также имеется справка и документация на русском языке.

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

Можно переключаться между несколькими режимами редактирования – визуальным, кодом HTML и режимом отображения тегов.

Встроенный менеджер сайта дает возможность управлять множеством HTML-документов и отслеживать их изменения.

Легко добавлять и менять популярные элементы веб-страниц, такие как: формы, таблицы, изображения.

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

Nvu построена на открытом коде. Это означает динамичное развитие программы, добавление новых возможностей, появление тем и расширений.

Имеется мощный встроенный редактор CSS с предварительным просмотром результата.

Есть возможность использования стилей вместо параметров тегов.
Код HTML и CSS формируется в соответствии с существующими стандартами и спецификациями.
После запуска программы минимальный первоначальный код будет создан автоматически. На рис. 2.1 показан вид программы Nvu в режиме редактирования HTML-кода.

Рис. 2.1. Исходный код пустой веб-страницы
Поскольку первоначально документ не содержит в себе нашего текста, а только служебную информацию, текст перед просмотром результата следует добавить. Для этого используется место между тегами <body> и </body>. В примере 2.1 показан код после того, как в него вставлен подходящий текст.
Пример 2.1. Код HTML с текстом
<!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>

Не беспокойся о мелочах. Если имеешь убеждение, то мелочи склонны

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

что-нибудь и назови это началом. Затем иди и стань лицом к началу.

Встав лицом к лицу с началом, позволь ему сделать с собой все, что

угодно. Я надеюсь, что твои убеждения не позволят тебе выбрать начало с

причудами. Смотри на вещи реально и скромно. Начни это сейчас!

Карлос Кастанеда, "Сон ведьмы"

</body>

</html>
Теперь надо сохранить файл в определенном месте, чтобы мы его могли просмотреть в браузере. Хотя в Nvu и встроен предварительный просмотр результата, он предназначен лишь для предварительной оценки результата, ведь пользователи будут смотреть нашу веб-страницу именно в браузере.
Нажимаем на кнопку Сохранить (

) на панели инструментов Nvu или используем комбинацию клавиш <Ctrl>+<S>. После чего появляется окно, где просят ввести заголовок страницы. Это текст, который будет отображаться в заголовке окна браузера. В коде HTML заголовок указывается между тегами <title> и </title>, но поскольку мы ничего там не указали, Nvu автоматически запрашивает нужный текст (рис. 2.2).

Рис. 2.2. Окно для ввода текста заголовка страницы
Теперь осталось только указать место, куда сохранить наш файл (например, C:\www\) и задать его имя. По умолчанию имя файла совпадает с введенным заголовком, но можно указать любое другое подходящее. Заметьте, что расширение у файла должно быть html, именно по нему операционная система определяет, что имеет дело с HTML-документом.
Замечание 1
Хотя файлы можно называть как угодно, в том числе и по-русски, рекомендуется это делать, только когда надо создать один-два отдельных документа на локальном компьютере. При создании сайта и его размещении в Интернете, используйте в именах файлов только латинские символы без пробелов и в нижнем регистре (маленькими буквами, значит).
Замечание 2
Обычно к файлу добавляется расширение html. Вы также можете повстречать расширение и htm. Разницы между такими формами написания нет, однако заметим, что расширение html встречается чаще, его и будем придерживаться в дальнейшем.
Чтобы посмотреть результат в браузере, можно пойти двумя путями.
Перейти в папку, куда мы сохранили наш файл, и щелкнуть по нему. В этом случае откроется браузер установленный по умолчанию и документ в нем будет загружен автоматически.
Запустить браузер самостоятельно и выбрать пункт меню Файл > Открыть (<Ctrl>+<O>), после чего указать путь к файлу. Можно также написать полный путь к файлу в адресной строке браузера.
Смотрим, что получилось (рис. 2.3).

Рис. 2.3. Веб-страница в браузере
Ба, что это!? Итог выглядит совсем не так, как ожидалось. Переносов строк нет, все отображается сплошным текстом. Чтобы понять, почему это произошло, следует знать особенности HTML.
Информация взята с сайта

Copyright © 2005 Влад Мержевич, по всем вопросам пишите по адресу

Особенности HTML

Прежде чем редактировать код веб-страницы, следует принять во внимание некоторые особенности, которые присущи HTML при работе с текстом.

Структура HTML-кода

Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы, которые остаются исходными, независимо от вида и направления сайта. Рассмотрим код, который первоначально создается в редакторе Nvu (пример 4.1). Для удобства добавлены номера строк, но в коде их, конечно же, быть не должно, иначе это приведет к ошибке.

Пример 4.1. Исходный код веб-страницы

01. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

02. <html>

03. <head>

04. <meta content="text/html; charset=Windows-1251" http-equiv="content-type">

05. <title>Вторая страница</title>

06. </head>

07. <body>

08. <br>

09. </body>

10. </html>

Далее разберем отдельные строки нашего кода.

01. !DOCTYPE предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Существует несколько видов !DOCTYPE, они различаются в зависимости от версии HTML, на которую ориентированы (пример 4.2).

Пример 4.2. Допустимые DTD

HTML 3.2 (предыдущая версия HTML)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

Строгий HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Переходный HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 при использовании фреймов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

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

Заметьте, что в примере 4.1 не указывается путь к DTD-файлу, как это показано в примере 4.2. Этот параметр не является обязательным и его можно опустить.
Замечание
Часто можно встретить код HTML вообще без использования !DOCTYPE, веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается по-разному при использовании !DOCTYPE и без него. Чтобы не произошло подобных ситуаций, всегда добавляйте этот тег в начало документа.
02. Тег <html> определяет начало HTML-файла, внутри него хранится заголовок (<head>) и тело документа (<body>).
03. Заголовок документа, как еще называют блок <head>, может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице.
04. Тег <meta> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег с разными параметрами, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Так, чтобы браузер понимал, что имеет дело с кодировкой «Кириллица (Windows)» и добавляется строка, как в примере 4.1.
05. Тег <title> определяет заголовок веб-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.1).

Рис. 4.1. Вид заголовка в браузере Internet Explorer
06. Обязательно следует добавлять закрывающий тег </head>, чтобы показать, что блок заголовка документа завершен.
07. Тело документа <body> предназначено для размещения тегов и содержательной части.
08. Внутри контейнера <body> могут размещаться практически любые элементы веб-страницы, в частности, тег <br>, как показано в примере 4.1, создает перенос строки.
09. Следует добавить закрывающий тег </body>, чтобы показать, что тело документа завершено.
10. Последним элементом в коде идет закрывающий тег </html>.
Информация взята с сайта

Copyright © 2005 Влад Мержевич, по всем вопросам пишите по адресу

Теги HTML

Чтобы браузер понимал, что имеет дело не с простым текстом, а с особым элементом, который задает его форматирование, и применяются теги. Теги являются основой HTML и берутся в угловые скобки. Общий синтаксис написания тегов следующий.

<тег параметр1="значение" параметр2="значение">

<тег параметр1="значение" параметр2="значение">...</тег>

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

Далее описаны некоторые рекомендации, которые относятся к тегам.

Работа с текстом

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

Ссылки

Ссылки являются основой гипертекстовых документов и позволяют переходить с одной веб-страницы на другую. Особенность их состоит в том, что сама ссылка может вести не только на 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>

<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», чтобы путь к файлу был локальным.

Якоря

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<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 символ решетки добавляется автоматически.

Информация взята с сайта

Изображения

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

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

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

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

</head>

<body>

<img src="http://www.htmlbookimages/sample.gif"> - абсолютный адрес размещения изображения

<img src="images/sample.gif"> - адрес размещения изображения относительно корня сайта

<img src="images/sample.gif"> - адрес размещения изображения относительно текущего HTML-документа

</body>

</html>

Списки

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

Любой список представляет собой контейнер <UL>, который устанавливает маркированный список, или <OL>, определяющий список нумерованный. Каждый элемент списка должен начинаться с тега <LI>.

Таблицы

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

Создание таблиц

Для добавления таблицы на веб-страницу используется тег <TABLE>. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <TR> и <TD> соответственно. Таблица должна содержать хотя бы одну ячейку (пример11.1). Допускается вместо тега <TD> использовать тег <TH>. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. В остальном, разницы между ячейками, созданными через теги <TD> и <TH>, нет.

Пример 11.1. Создание таблицы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<body>

<tr>

<th>Ячейка 1</th>

<th>Ячейка 2</th>

</tr>

<tr>

<td>Ячейка 3</td>

<td>Ячейка 4</td>

</tr>

</table>

</body>

</html>

Вид таблицы, полученной в данном примере, показан ниже.

Ячейка 1 Ячейка 2

Ячейка 3

Ячейка 4

Ячейки формируются по строкам, вначале указывается первая строка, затем вторая и т.д.

Список определений

Список определений состоит из двух элементов — термина и его определения. Сам список задается с помощью контейнера <DL>, термин — тегом <DT>, а его определение — с помощью тега <DD>. Вложение тегов для создания списка определений продемонстрировано в примере 10.3.

Пример 10.3. Общая структура списка определений

<dl>

<dt>Термин 1</dt>

<dd>Определение 1</dd>

<dt>Термин 2</dt>

<dd>Определение 2</dd>

<dl>

Список определений хорошо подходит для расшифровки терминов, создания глоссария, словаря, справочника и т.д. В примере 10.4 показано одно из возможных использований этого вида списка.

Пример 10.4. Создание списка определений

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<body>

<dl>

<dd>Тег - это специальный символ разметки, который применяется для вставки различных элементов на веб-страницу таких как: рисунки, таблицы, ссылки и др. и для изменения их вида.</dd>

<dt>HTML-документ</dt>

<dd>Обычный текстовый файл, который может содержать в себе текст, теги и стили. Изображения и другие объекты хранятся отдельно. Содержимое такого файла обычно называется HTML-код.</dd>

<dd>Cайт - это набор отдельных веб-страниц, которые связаны между собой ссылками и единым оформлением.</dd>

</dl>

</body>

</html>

Результат примера показан ниже.

Тег

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

HTML-документ

Сайт

Cайт - это набор отдельных веб-страниц, которые связаны между собой ссылками и единым оформлением.

Список определений, как и другие списки, характеризуется наличием отступов сверху и снизу.

Создать список определений в Nvu достаточно просто. Для этого имеется две похожих кнопки на панели инструментов.

— устанавливает термин (тег <DT>).

— устанавливает описание термина (тег <DD>).

Контейнер <DL> формируется автоматически, и заботиться об этом теге нет необходимости.

Если списка и текста для него еще нет, нажмите на кнопку

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

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

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

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

Информация взята с сайта

Copyright © 2005 Влад Мержевич, по всем вопросам пишите по адресу

Ссылки (гиперссылки)

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

Тег

Тег — это специальный символ разметки, который применяется для вставки различных элементов на веб-страницу таких как: рисунки, таблицы, ссылки и др. и для изменения их вида. Для обозначения тегов используется символ <тег>. Теги нечувствительны к регистру, поэтому запись <B> и <b> эквивалентна.

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

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

Текст занимает ширину окна браузера

Если вы просто напишите одну длинную строку в коде HTML, то в браузере она будет отформатирована, чтобы текст поместился по ширине в окно. Переносы текста будут добавлены автоматически в местах пробела или дефиса. Что произойдет, если в тексте нет ни того, ни другого символа? Браузер не сможет создать переносы и отобразит текст одной строкой. Если она шире окна браузера, то неминуемо появится горизонтальная полоса прокрутки.

Информация взята с сайта

VALIGN

Устанавливает вертикальное выравнивание содержимого ячейки. По умолчанию контент ячейки располагается по ее вертикали в центре. Возможные значения: top— выравнивание по верхнему краю строки, middle — выравнивание по середине, bottom — выравнивание по нижнему краю, baseline — выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии.

Веб-сервер

Веб-сервером называется компьютер, на котором хранятся документы сайта. Одновременно так же называется программа, которая обеспечивает выдачу документов при их запросе браузером, а также работу с различными сервисами. Наиболее популярными веб-серверами являются Apache и Internet Information Server (IIS).

Информация взята с сайта

Веб-страница

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

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

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

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

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

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

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

Вы можете свободно использовать данный

Оригинал этого файла взят с сайта , автор и разработчик — Влад Мержевич.
Вы можете свободно использовать данный документ в личных целях, а также распространять его любым способом — выкладывать у себя на сайте, давать друзьям, копировать по локальным сетям и т.д. Извещать о том, что файл добавлен на определенный ресурс, необязательно, но желательно. Только учтите при этом, что оригинал может и меняться.
Запрещается всякая модификация содержимого файла, в частности, вносимые любым способом исправления и декомпиляция. Если вы обнаружили в текстах ошибку или неточность, сообщите об этом мне, поправим на месте.
Документ может распространяться только на свободной основе. Любое коммерческое использование воспрещено.
Информация взята с сайта

Copyright © 2005 Влад Мержевич, по всем вопросам пишите по адресу

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

Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается параметром 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>

</head>

<body>

<img src="sample.gif" align="left" height="50" hspace="10" vspace="10" width="50">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>

WIDTH

Задает ширину таблицы. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в таблице находятся изображения, параметр width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого. Как и в случае с высотой, если ширина явно не указана, то она будет вычисляться на основе содержимого таблицы.

WYSIWYG (What You See Is What You Get; Что видишь, то и получишь)

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

Заголовки

Заголовки выполняют важную функцию на веб-странице. Во-первых, они показывают важность раздела, к которому относятся. Чем больше заголовок и его «вес», тем более он значимый. Вспомните, что в газетах и журналах передовицы набраны крупным шрифтом, тем самым, привлекая к ним внимание и говоря: «вот это надо читать обязательно». Во-вторых, с помощью различных заголовков легко регулировать размер текста. Чем выше уровень заголовка, тем больше размер шрифта. Самым верхним уровнем является уровень 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>

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

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