Элементы веб страниц

Логические стили
HTML допускает два подхода к шрифтовому выделению фрагментов текста.
С одной стороны, можно прямо указать, что шрифт на некотором участке
текста должен быть жирным или наклонным, то есть изменить физический
стиль текста. С другой стороны, можно пометить некоторый фрагмент
текста как имеющий некоторый отличный от нормального логический
стиль, оставив интерпретацию этого стиля браузеру.
При использовании логических стилей автор документа не может знать
заранее, что увидит на экране читатель. Разные браузеры толкуют одни и те
же метки логических стилей по-разному. Некоторые браузеры игнорируют
некоторые метки вообще и показывают нормальный текст вместо
выделенного логическим стилем. Вот самые распространенные логические
стили.
<EM> ... </EM> От английского emphasis — акцент.
<STRONG> ... </STRONG> От английского strong emphasis — сильный акцент.
<CODE> ... </CODE> Рекомендуется использовать для фрагментов исходных
текстов.
<SAMP> ... </SAMP> От английского sample — образец. Рекомендуется
использовать для демонстрации образцов сообщений, выводимых на экран
программами.
<KBD> ... </KBD> От английского keyboard — клавиатура. Рекомендуется
использовать для указания того, что нужно ввести с клавиатуры.
<VAR> ... </VAR>
От английского variable — переменная. Рекомендуется использовать для
написания имен переменных.
Подытожим наши знания о логических и физических стилях с помощью
примера 11.1. Заодно Вы сможете увидеть, как Ваш браузер показывает те
или иные логические стили.
Выполните пример 11.1. Просмотрите результат в разных браузерах. Есть ли
отличия?
Пример 11.1. Использование физических и логических стилей шрифта
1
2
Спецсимволы
Поскольку символы "<" и ">" воспринимаются браузерами как начало и
конец HTML-меток, возникает вопрос: а как показать эти символы на экране?
В HTML это делается с помощью &-последовательностей (их еще называют
символьными объектами или эскейп-последовательностями). Браузер
показывает на экране символ "<", когда встречает в тексте
последовательность < (по первым буквам английских слов less than —
меньше, чем). Знак ">" кодируется последовательностью > (по первым
буквам английских слов greater than — больше, чем).
Символ "&" (амперсанд) кодируется последовательностью &
Двойные кавычки (") кодируются последовательностью "
Помните: точка с запятой — обязательный элемент &-последовательности.
Кроме того, все буквы, составляющие последовательность, должны быть в
нижнем регистре (т.е., маленькие).
Вообще говоря, &-последовательности определены для всех символов из
второй половины ASCII-таблицы (куда, естественно, входят и русские
буквы).
Спецсимволы также могут быть заданы числовыми кодами. Обозначения
спецсимволов можно найти в справочных таблицах.
Задание для самостоятельного выполнения
Создайте веб-страницу, содержащую несколько &-последовательностей.
3
Создание списков в НТМL-документе
Пронумерованные списки
В пронумерованном списке браузер автоматически вставляет номера
элементов по порядку. Это означает, что ли вы добавите или удалите один
или несколько элементов пронумерованного списка, то остальные номера
автоматически будут пересчитаны.
Пронумерованный список создается блочным тегом <ol> … </ol> (ordered list).
Каждый элемент списка начинается с тега <li> (list item).
Тег <ol> может иметь параметры type и start,
где
туре - Вид счетчика:
туре=А - большие латинские буквы (А, В, С...),
туре=а - маленькие латинские буквы (а, в, с...),
туре=I - большие римские цифры (I, II, III...),
туре=i - маленькие римские цифры (i, ii, iii...),
туре=1 – по умолчанию, обычные цифры (1,2,3...);
start=n - число, с которого начинается отсчет.
Выполните пример 11.2.
4
Пример 11.2. Нумерованный список
В данном случае при отсутствии параметров используется формат списка по
умолчанию.
При использовании атрибута type, например <ol type=A>, список выглядит
так:
5
Если <ol type=I>, то
Маркированные списки
Для непронумерованных списков браузер обычно использует маркеры для
пометки элемента списка. Вид маркера, как правило, настраивает
пользователь браузера.
Маркированный список формируется тегом <ul> … </ul> (unordered list).
Каждый элемент начинается с тега <li>.
Тег <ul> может иметь параметр type, который определяет внешний вид
маркера:
<ul type=disc> – по умолчанию
<ul type=circle> – круглый
<ul type=square> – квадратный
Выполните пример 11.2.
6
Пример 11.3. Маркированный список
Измените тип маркера и просмотрите результат.
Списки определений
Список определений формируется блочным тегом <DL> … </DL> (definition list
— список определений). Данный список служит для создание списков типа
"термин"-"определение". Каждый термин задается тегом <DT> (definition
7
term — определяемый термин), а определение - тегом <DD> (definition
definition — определение определения).
Выполните пример 11.4.
Пример 11.4. Список определений
8
Вложенные списки
Вы можете создавать вложенные списки, используя различные тэги списков
или повторяя одни внутри других.
Для этого просто необходимо разместить одну пару тэгов (стартовый и
завершающий) внутри другой.
Выполните пример 11.5.
Пример 11.5. Многоуровневый список
9
Задание для самостоятельного выполнения
Создайте веб-страницу, содержащую текст:
10
Вставка изображений
Для размещения картинки в html-документе используется одиночный тег
<img src="путь к картинке">
Пример <img src="picture.jpg"> говорит о том, что картинка лежит в той же
папке, в которой лежит и наш документ. Если картинка лежит во вложенной
папке то ссылка на неё будет выглядеть так: <img src="photo/picture.jpg">,
графический файл может лежать и на другом сервере (в этом случае нужно
указывать полный URL-адрес).
Тег <img>, предназначенный для вставки изображений, относится к тегам,
создающим новые элементы документа, отсутствовавшие в исходном тексте.
Добавление изображения происходит в два этапа:
 вначале готовится графический файл желаемого размера,
 затем он добавляется на страницу через тег <img>. Сам HTML
предназначен только для того, чтобы отобразить требуемую картинку,
при этом никак ее не меняя.
Тег <img> имеет атрибуты.
Атрибут align определяет расположение картинки относительно текста. По
умолчанию align=bottom – текст располагается внизу картинки.
Другие значения:
middle – текст располагается посередине картинки
top – текст располагается вверху картинки
left – картинка будет прижата к левому краю экрана, а текст будет обтекать
ее справа
right – наоборот, картинка будет прижата к правому краю, а текст будет
обтекать ее слева
Для любого изображения можно задать невидимые отступы по горизонтали
и вертикали с помощью атрибутов hspace и vspace. Особенно это актуально
при обтекании рисунка текстом. В этом случае, чтобы текст не «наезжал»
плотно на изображение, необходимо вокруг него добавить пустое
пространство.
11
Атрибут vspace задает расстояние между текстом и рисунком (по
вертикали). Расстояние задается в пикселях. Например, vspace="20".
Атрибут hspace тоже задает расстояние между текстом и рисунком, но по
горизонтали. Расстояние задается в пикселях.
Альтернативный текст позволяет получить текстовую информацию о
рисунке при отключенном в браузере показе картинок или во время их
загрузки. Такой текст появляется раньше самого изображения и дает
представление об его содержании. Затем зарезервированное пустое поле
заменяется картинкой.
Вид всплывающей подсказки, а именно, ее цвет, фон, шрифт и др. параметры
задаются с помощью настроек операционной системы и не могут быть
изменены через HTML-файл.
Для создания альтернативного текста используется атрибут alt="текст".
Для создания всплывающей подсказки используйте атрибут title="текст"
Рассмотрим применение атрибутов в примере
Пример. Вставка изображения.
Подготовьте любое изображение небольшого размера.
Сохраните под именем picture_14_2.jpg.
Подготовьте 2 абзаца некоторого текста. Создайте html-страницу. В первый
абзац вставьте картинку без отступов, во второй – с отступами.
Расположение картинки – слева. Можно также добавить альтернативный
текст.
12
13
Очевидно, что второй фрагмент визуально выглядит лучше.
Изменение размеров рисунка
Для изменения размеров рисунка средствами HTML у тега <img>
предусмотрены атрибуты width (ширина) и height (высота).
Допускается использовать значения в пикселах или процентах. Если
установлена процентная запись, то размеры изображения вычисляются
относительно родительского элемента — контейнера, где находится тег
<img>. В случае отсутствия родительского контейнера, в его качестве
выступает окно браузера. Иными словами, width="100%" означает, что
рисунок будет растянут на всю ширину веб-страницы.
Добавление только одного атрибута width или height сохраняет пропорции и
отношение сторон изображения. Браузер при этом ожидает полной загрузки
рисунка, чтобы определить его первоначальную высоту и ширину.
Обязательно задавайте размеры всех изображений на веб-странице. Это
несколько ускоряет загрузку страницы, поскольку браузеру нет нужды
вычислять размер каждого рисунка после его получения. Это утверждение
особенно важно для изображений, размещенных внутри таблицы.
14
Ширину и высоту изображения можно менять как в меньшую, так и большую
сторону. Однако на скорость загрузки рисунка это никак не влияет,
поскольку размер файла остается неизменным. Поэтому с осторожностью
уменьшайте изображение, т.к. это может вызвать недоумение у читателей,
отчего такой маленький рисунок так долго грузится. А вот увеличение
размеров приводит к обратному эффекту — размер изображения велик, но
файл относительно изображения аналогичного размера загружается
быстрее. Но качество рисунка при этом ухудшается.
Пример. Изменение размера изображения.
15
16
Фон документа
Картинку можно сделать фоном документа. Это прописывается в тэге:
<body background="bgr.jpg">
Параметр background указывает на то, где лежит фоновая картинка, в нашем
примере он указывает на то, что наша фоновая картинка лежит в той же
папке, что и документ.
Изображение, URL-адрес которого указан в атрибуте background, будет
размножено браузером по всей площади окна под содержимым «переднего
плана».
Первой в голову приходит идея взять средних размеров изображение с
близкими к квадрату пропорциями (100—200 пикселов по ширине и высоте)
и позволить браузеру действительно размножить эту картинку по
горизонтали и вертикали.
Пример. Применение изображения в качестве фона.
Подготовьте изображение, которое будет являться фоном, и произвольный
текст для наполнения страницы.
17
18
Основы гипертекста
В HTML переход от одного фрагмента текста к другому задается с помощью
тега вида:
<a href="адрес_перехода">выделенный фрагмент текста</a>
Таким образом, любая ссылка в HTML имеет два обязательных элемента:
источник — тот фрагмент текста (в более общей трактовке — тот элемент
документа), который заключен между <a> и </a> и щелчок по которому
активизирует ссылку, и пункт назначения — URL-адрес документа, на
который ведет ссылка.
Абсолютные адреса применяются в первую очередь для указания на другой
сетевой ресурс и достаточно редко используются в рамках одного сайта.
Относительные адреса указываются от корня сайта или текущего
документа. Например, код
<a href="index.htm">Перейти к оглавлению</a>
означает загрузить файл с именем index.htm, который располагается в той же
папке, что и сама веб-страница.
19
Далее рассмотрим несколько примеров таких адресов.
/
Адрес указывает обычно на файл index.htm (или другой файл, назначенный
файлом по умолчанию в настройках веб-сервера), который находится в
корне сайта. Если такой файл отсутствует, браузер, как правило, показывает
список файлов, находящихся в данном каталоге.
/images/pic.gif
Слеш (символ /) перед адресом говорит о том, что адресация начинается от
корня сайта. Ссылка ведет на рисунок pic.gif, который находится в папке
images. А та в свою очередь размещена в корне сайта. Адреса относительно
корня сайта работают только под управлением веб-сервера и на локальном
компьютере не применимы.
../helpme.htm
Две точки перед именем указывает браузеру перейти на уровень выше в
списке каталогов сайта и там «поискать» файл helpme.htm.
manual/info.htm
Если перед именем папки нет никаких дополнительных символов, вроде
точек или слеша, то папка размещена внутри текущего каталога, а уже в ней
располагается файл info.htm.
Иногда можно встретить в адресе ссылки путь в виде ./file/doc.html. Точка со
слешем означает, что отсчет ведется от текущей папки. Подобная запись
избыточна и ее можно сократить до file/doc.htm.
Рассмотрим пример. В нем используются различные виды относительных
гиперссылок.
Пример. Относительные гиперссылки.
Создайте на диске папку с именем www. В ней –вложенную папку pages и два
файла index.htm и about.htm. В папке pages создайте файл page1.htm.
20
Содержимое файла index.htm
Содержимое файла about.htm сделайте любым.
Содержимое файла page1.htm
21
Убедитесь в работоспособности ссылок.
Использование относительных адресов дает одно очень важное
практическое применение. Если Вы подготовили к публикации некоторую
группу
HTML-документов,
которые
ссылаются
друг
на
друга
относительными ссылками и находятся в одном каталоге на Вашем
компьютере, вся эта группа документов будет работать точно так же, если ее
поместить в любой другой каталог на любом другом компьютере, в
локальной сети или в Интернет! Таким образом, у Вас появляется
возможность разрабатывать целые коллекции документов без подключения
к Интернет, и только после окончательной готовности, подтвержденной
испытаниями, помещать коллекции документов в Интернете целиком.
В рассмотренном выше примере переименуйте папку www в другое имя, тем
самым имитируя перенос файлов на другой компьютер. Убедитесь, что
работоспособность ссылок (а значит и сайта) сохранилась.
Основы построения таблиц
Одним из наиболее мощных и широко применяемых в HTML средств
являются таблицы. Понятие табличного представления данных не
нуждается в дополнительном пояснении. В HTML таблицы используются не
только традиционно, как метод представления данных, но и как средство
форматирования Web-страниц.
Рассмотрим сначала минимальный набор тегов и их
необходимый и достаточный для создания несложных таблиц.
параметров,
Описание таблиц должно располагаться внутри раздела документа <body>.
22
Тег <table>
Документ может содержать произвольное число таблиц, причем допускается
вложенность таблиц друг в друга. Каждая таблица должна начинаться тегом
<table> и завершаться тегом </table>. Внутри этой пары тегов располагается
описание содержимого таблицы. Любая таблица состоит из одной или
нескольких строк, в каждой из которых задаются данные для отдельных
ячеек.
Рассмотрим атрибуты этого элемента. Большинство атрибутов могут
использоваться и в других элементах таблицы.
Таблицу можно выровнять по горизонтали при помощи атрибута align:
• align="left" – влево;
• align="center" – по центру;
• align="right" – вправо.
Ширину таблицы можно задать точно в пикселях или в процентном
отношении к ширине страницы в окне браузера. Например:
width=400
width=50%
Аналогичные параметры могут задаваться и для отдельных ячеек. Заметим,
что задание конкретного значения параметра, например width=400, не
означает, что таблица в любом случае будет иметь указанную ширину, а
лишь определяет рекомендуемую ширину, которая будет выдержана по
возможности.
Для управления видом рамки используются два атрибута. Дело в том, что
браузер создает изображение рамки, имитируя ее трехмерность. На рамке
можно различить фронтальную и наклонную боковую грани.
Шириной боковой грани управляет атрибут:
border=4
При задании нулевого значения для этого атрибута рамка исчезает совсем.
23
Шириной фронтальной грани управляет атрибут:
cellspacing=3
Если значение этого атрибута равно нулю, рамка получается тонкой,
заостренной.
Для всех ячеек таблицы можно задать размер пустого пространства
(отступы), окружающего данные в ячейках (в пикселях или в процентах):
cellpadding=5
или
cellpadding="15%"
Задание этого атрибута делает ячейки больше. Между рамкой таблицы и
данными всегда сохраняется определенное расстояние. В некоторых случаях
это позволяет улучшить восприятие таблицы, сделать текст в ячейках легко
читаемым.
Для всей таблицы может быть задан цвет фона:
bgcolor="Цвет"
bgcolor=#RRGGBB
Вместо цвета допускается использовать рисунок:
background="Файл"
Атрибуты bgcolor и background можно указывать и с другими элементами
таблицы, кроме элемента caption.
24
Атрибут rules определяет вид сетки таблицы внутри, то есть между
ячейками.
Он тоже имеет несколько параметров:
• none — сетка отсутствует;
• groups — сетка вокруг групп ячеек;
• rows — горизонтальные линии между строками;
• cols — вертикальные линии между колонками;
• all — обычная сетка.
Тег <caption>
Таблица может иметь название, которое заключается в пару тегов <caption> и
</caption>. Описание названия таблицы должно располагаться сразу же после
тега <table> и до первого <tr>.
Несмотря на то, что этот элемент располагается внутри элемента table,
название выводится на экране вне рамки таблицы.
Теги <th>, <tr>, <td>
Каждая строка начинается тегом <tr> (table row) и завершается тегом </tr>.
Отдельная ячейка в строке обрамляется парой тегов <td> и </td> (table data)
или <th> и </th> (table header). Тег <th> используется обычно для ячеекзаголовков таблицы, а <td> — для ячеек-данных. Различие в использовании
заключается лишь в типе шрифта, используемого по умолчанию для
отображения содержимого ячеек, а также расположению данных внутри
ячейки. Содержимое ячеек типа <th> отображается полужирным шрифтом и
располагается по центру. Ячейки, определенные тегом <td> по умолчанию
25
отображают данные, выровненные влево и посередине
направлении.
в вертикальном
Теги <td> и <th> не могут появляться вне описания строки таблицы <tr>.
Завершающие коды </tr>, </td> и </th> могут быть опущены. В этом случае
концом описания строки или ячейки является начало следующей строки или
ячейки, или конец таблицы. Завершающий тег таблицы </table> обязателен.
Количество строк в таблице определяется числом открывающих тегов <tr>, а
количество столбцов — максимальным количеством <td> или <th> среди всех
строк. Часть ячеек могут не содержать никаких данных, такие ячейки
описываются парой следующих подряд тегов — <td>, </td>. Если одна или
несколько ячеек, располагающихся в конце какой-либо строки, не содержат
данных, то их описание может быть опущено, а браузер автоматически
добавит требуемое количество пустых ячеек. Отсюда следует, что
построение таблиц, в которых в разных строчках располагается различное
количество столбцов одного и того же размера, не разрешается.
Атрибут align позволяет выравнивать данные в ячейках по горизонтали. Он
принимает следующие значения:
• left — выравнивание влево;
• right — выравнивание вправо;
• center — центрирование.
Атрибут valign позволяет выравнивать текст по вертикали. Значения могут
быть такие:
• top — выравнивание по верхнему краю ячейки;
• bottom — выравнивание по нижнему краю ячейки (не всегда работает);
• center — выравнивание по центру;
• baseline — выравнивание по первой строке.
26
В устройстве таблицы легче всего разобраться на простом примере.
Пример. Простейшая таблица.
27
Из примера видно, что первая строка таблицы содержит только ячейкизаголовки.
При необходимости можно создать заголовки, как для столбцов, так и для
строк.
Сложные таблицы
Для сложных таблиц характерна потребность в объединении нескольких
смежных ячеек по горизонтали или по вертикали в одну. Данная
возможность реализуется с помощью параметров colspan (COLunm SPANning)
и rowspan (ROW SPANning), задаваемых в кодах <td> или <th>. Форма записи:
colspan = num
где num — числовое значение, определяющее, на сколько столбцов следует
расширить текущую ячейку по горизонтали. Применение параметра rowspan
аналогично, только здесь указывается количество строк, которые должна
захватить текущая ячейка по вертикали. По умолчанию для этих параметров
устанавливается значение, равное единице. Допустимо одновременное
задание значений обоих параметров для одной ячейки. Правильная
установка значений этих параметров может оказаться не очень простой
задачей.
Выполните пример.
28
Пример. Создание сложной таблицы.
Невнимательное задание значений параметров объединения ячеек может
привести к их взаимному перекрытию и конфликтам, при которых результат
29
непредсказуем. Характерное применение объединенных ячеек — общий
заголовок для нескольких смежных колонок или строк.
30