HTML-документ

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

HTML-редактор

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

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

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

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

Рис. 11.13. Свойства ячеек
Информация взята с сайта

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

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

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

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

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

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

Кроме текста, в качестве ссылок можно использовать и рисунки. Изображение в этом случае надо поместить между тегами и , как показано в примере 9.7.
Пример 9.7. Создание рисунка-ссылки
Когда изображение становится ссылкой, вокруг него автоматически добавляется рамка толщиной один пиксел. Чтобы убрать рамку, добавьте параметр border="0" к тегу .
В Nvu создание ссылки для изображения делается с помощью вкладки «Ссылка» в параметрах добавления и свойств изображения, как показано на рис. 9.6.

Рис. 9.6. Создание ссылки на изображении в Nvu
Информация взята с сайта

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

Кодировка

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

Контейнер

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

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

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

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

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

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

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

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

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

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

Отрубай топором.

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

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

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

и
• (пример10.1).
  Пример 10.1. Создание маркированного списка
  Результат выполнения примера показан ниже.
  
• 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 тега
. Допустимые значения приведены в табл. 10.1

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


Маркированный список с маркерами в виде круга	...	Чебурашка Крокодил Гена Шапокляк
Маркированный список с маркерами в виде окружности	...	Чебурашка Крокодил Гена Шапокляк
Маркированный список с квадратными маркерами	...	Чебурашка Крокодил Гена Шапокляк

<


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

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

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

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





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




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


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




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


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




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


Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера. Синтаксис следующий.
_{Нижний индекс}
Для изменения вида текста, выберите пункт меню Формат > Стиль текста > Нижний индекс.
Информация взята с сайта

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




NOWRAP


Добавление параметра nowrap к тегу

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

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

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


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


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


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


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

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

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


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


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


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



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



3. Duis te feugifacilisi.



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


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

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





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




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


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



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



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




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


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

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


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


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


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

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

   
   По умолчанию, при переходе по ссылке документ открывается в текущем окне. При необходимости, это условие может быть изменено параметром target тега <А>. Если установить у target значение _blank, как показано в примере 7.2, то отроется новое окно и документ, на который ведет ссылка, загрузится в нем.
   Пример 7.2. Открытие документа в новом окне
   Чтобы указать в Nvu, что ссылка будет открываться в новом окне, при ее создании нажмите на кнопку «Расширенные свойства» (рис. 7.6) и в дополнительном разделе выберите пункт «в новом окне», как показано на рис. 7.7.
   
   
   
   Рис. 7.7. Изменение свойств ссылки
   Информация взята с сайта
   
   Copyright © 2005 Влад Мержевич, по всем вопросам пишите по адресу
   
   
   

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

   
   Каждая ячейка таблицы, задаваемая через тег

   , в свою очередь тоже имеет свои параметры, часть из которых совпадает с параметрами тега . Параметры таблиц Тот факт, что таблицы применяются достаточно часто и не только для отображения табличных данных обязан не только их гибкости и универсальности, но и обилию параметров тегов , и . Далее перечислены параметры тега . Параметры тегов и кавычки Согласно спецификации HTML все параметры тегов следует брать в двойные или одинарные кавычки. Отсутствие кавычек не приведет к ошибкам, браузеры достаточно корректно обрабатывают код и без кавычек, за исключением текста, содержащего пробелы (пример 5.2). Пример 5.2. Использование кавычек в параметрах тегов В данном примере первая строка написана правильно, со всеми кавычками, а во второй у параметра alt кавычки отсутствуют. Из-за этого браузер в качестве значения параметра alt возьмет только первое слово. Переносы строк В отличие от абзаца, тег переноса строки не создает дополнительных вертикальных отступов между строками и может применяться практически в любом тексте. Синтаксис следующий. Lorem ipsum dolor sit amet... Замечание Строка «Lorem ipsum dolor sit amet...» является канонической «рыбой», иными словами это текст, вставляемый на веб-страницу, при отсутствии конечной информации. На этом сайте вы будете частенько встречать указанный текст, впрочем, как и на многих других сайтах. Для создания переноса строки в Nvu, используйте сочетание клавиш +. Также можно выбрать из списка «Обычный текст» (рис.6.1) и установить перенос уже клавишей . Переносы строк Внутри тега между его параметрами допустимо ставить перенос строк. В примере5.1 показана одна и та же строка, но оформленная разными способами. Пример 5.1. Переносы строк в коде тега alt="Вид заголовка в браузере Internet Explorer" width="438" height="118"> Замечание Хотя ошибки при переносе текста в подобном случае и не возникнет, рекомендуем писать теги в одну строку, иначе ухудшается восприятие кода и его становится сложнее править. Поля вокруг изображения Для любого изображения можно задать пустые поля по горизонтали и вертикали с помощью параметров hspace и vspace. Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не наезжал плотно на изображение, необходимо вокруг него добавить пустое пространство (пример9.5). Пример 9.5. Добавление отступов вокруг изображения Полужирное начертание Насыщенностью называют увеличение толщины линий шрифта и соответственно контраста. Обычно различают четыре вида насыщенности: светлое начертание, нормальное, полужирное и жирное. Однако с помощью HTML можно установить только нормальное и полужирное начертание. Из-за этого термины «полужирный» и «жирный» слились воедино, поэтому правильно применять то или иное слово для обозначения одного и того же начертания. Синтаксис следующий. Жирное начертание шрифта Для создания полужирного начертания в Nvu, необходимо предварительно выделить текст и нажать на кнопку на панели инструментов. Аналогично можно воспользоваться сочетанием клавиш +. Порядок параметров в тегах Порядок параметров в любом теге не имеет значения и на результат отображения элемента не влияет. Информация взята с сайта Copyright © 2005 Влад Мержевич, по всем вопросам пишите по адресу Порядок тегов Существует определенная иерархия вложенности тегов. Например, метатеги должны находиться внутри контейнера и нигде иначе. Чтобы не возникло ошибки, следите за тем, чтобы теги располагались в коде правильно. Если теги между собой равноценны в иерархии связи, то их последовательность не имеет значения. Так, можно поменять местами теги , но поскольку мы ничего там не указали, Nvu автоматически запрашивает нужный текст (рис. 2.2). Рис. 2.2. Окно для ввода текста заголовка страницы Теперь осталось только указать место, куда сохранить наш файл (например, C:\www\) и задать его имя. По умолчанию имя файла совпадает с введенным заголовком, но можно указать любое другое подходящее. Заметьте, что расширение у файла должно быть html, именно по нему операционная система определяет, что имеет дело с HTML-документом. Замечание 1 Хотя файлы можно называть как угодно, в том числе и по-русски, рекомендуется это делать, только когда надо создать один-два отдельных документа на локальном компьютере. При создании сайта и его размещении в Интернете, используйте в именах файлов только латинские символы без пробелов и в нижнем регистре (маленькими буквами, значит). Замечание 2 Обычно к файлу добавляется расширение html. Вы также можете повстречать расширение и htm. Разницы между такими формами написания нет, однако заметим, что расширение html встречается чаще, его и будем придерживаться в дальнейшем. Чтобы посмотреть результат в браузере, можно пойти двумя путями. Перейти в папку, куда мы сохранили наш файл, и щелкнуть по нему. В этом случае откроется браузер установленный по умолчанию и документ в нем будет загружен автоматически. Запустить браузер самостоятельно и выбрать пункт меню Файл > Открыть (+), после чего указать путь к файлу. Можно также написать полный путь к файлу в адресной строке браузера. Смотрим, что получилось (рис. 2.3). Рис. 2.3. Веб-страница в браузере Ба, что это!? Итог выглядит совсем не так, как ожидалось. Переносов строк нет, все отображается сплошным текстом. Чтобы понять, почему это произошло, следует знать особенности HTML. Информация взята с сайта Copyright © 2005 Влад Мержевич, по всем вопросам пишите по адресу Особенности HTML Прежде чем редактировать код веб-страницы, следует принять во внимание некоторые особенности, которые присущи HTML при работе с текстом. Структура HTML-кода Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы, которые остаются исходными, независимо от вида и направления сайта. Рассмотрим код, который первоначально создается в редакторе Nvu (пример 4.1). Для удобства добавлены номера строк, но в коде их, конечно же, быть не должно, иначе это приведет к ошибке. Далее разберем отдельные строки нашего кода. Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения спецификации HTML и не прощает ошибок, что обычно приводит к иному отображению документа, чем планировал разработчик. Переходный HTML более «спокойно» относится к некоторым огрехам кода, поэтому этот тип использовать предпочтительнее. Заметьте, что в примере 4.1 не указывается путь к DTD-файлу, как это показано в примере 4.2. Этот параметр не является обязательным и его можно опустить. Замечание Часто можно встретить код HTML вообще без использования !DOCTYPE, веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается по-разному при использовании !DOCTYPE и без него. Чтобы не произошло подобных ситуаций, всегда добавляйте этот тег в начало документа. 02. Тег определяет начало HTML-файла, внутри него хранится заголовок ( ) и тело документа (). 03. Заголовок документа, как еще называют блок , может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице. 04. Тег является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег с разными параметрами, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Так, чтобы браузер понимал, что имеет дело с кодировкой «Кириллица (Windows)» и добавляется строка, как в примере 4.1. 05. Тег