Тема 2: «Таблицы в HTML документах»
Лекция 9-10
Форматирование HTML документов
Разделение текста на абзацы.
HTML предполагает, что автор документа ничего не знает о компьютере своего читателя. Читатель праве установить любой размер окна и пользоваться любым из имеющихся у него шрифтов. Это означает, что место переноса в троке определяется только программой просмотра и установками конечного пользователя. Символы перевода строки оригинального текста игнорируются, в результате чего текст, отлично смотревшийся в окне редактора, может превратиться в сплошной неудобочитаемый текст в окне программы просмотра.
Чтобы избежать этого, необходимо разделять текст на абзацы при помощи специальных элементов. Чтобы программа просмотра отделяла абзацы друг от друга, необходимо поместить открывающий тэг <P> в начале каждого нового абзаца. Использование закрывающего тэга </P> необязательно.
Тэг абзаца имеет один атрибут ALIGN, имеющий следующие значения:
· LEFT - выравнивание текста по левой границе окна браузера
· CENTER - выравнивание по центру окна браузера
· RIGHT - выравнивание по правой границе окна браузера
Перевод строки
Для того чтобы перейти на следующую строку в любом месте текущей строки, в HTML существует тэг разрыва строки<BR>. Он заставляет программу просмотра выводить стоящие после него символы с начала новой строки. В отличие от тэга абзаца, тэг <BR> не вставляет пустуй строку и не имеет соответствующего закрывающего тэга.
|
|
|
Бывают случаи, когда возникает необходимость в противоположной операции - запретить перевод строки. Текст, заключенный между тэгами <NOBR> и </NOBR>, будет гарантированно заключаться в одной строке без перевода на другую.
Структурирование текста
Для удобства читателей текст рекомендуется разбить на логические части, каждая из которых посвящена отдельной теме.
После того как это будет сделано, каждой части текста следует дать осмысленный заголовок с целью облегчить поиск нужной темы.
Заголовки
Заголовки имеют важнейшее место в структурировании HTML - документов. Тэги заголовков являются одними из самых употребляемых в языке разметки гипертекста.
Элемент “заголовок” является контейнером и потому должен иметь открывающий (<H1>) и закрывающий (</H1>) тэги. HTMLрасполагает шестью уровнями заголовков: H1(самый верхний), H2, H3, H4, H5 и H6 (самый нижний).
Точно также, как и в элементе абзац, в заголовках можно использовать атрибут ALIGN. Его применение здесь важно с той точки зрения, что не все программы просмотра выравнивают заголовки по левому краю окна.
Горизонтальные линии
Другим методом разделения документа на части является проведение горизонтальных линий. Они визуально подчеркивают законченность той или иной части страницы.
|
|
|
Элемент <HR> позволяет провести рельефную горизонтальную линию в окне большинства программ просмотра. Этот тэг не является контейнером, поэтому не имеет закрывающего тэга. До и после линии автоматически вставляется пустая строка.
Тэг <HR> имеет следующие атрибуты:
· ALIGN - выравнивает по раю или центру; имеет значения LEFT, CENTER, RIGHT
· WIDTH - устанавливает длину линии в пикселах или процентах от ширины окна браузера; в последнем случае добавляется символ %
· SIZE - Устанавливает ширину линии в пикселах
· NOSHADE - отменяет рельефность линии
· COLOR - Указывает цвет линии
Использование предварительно отформатированного текста
HTML имеет специальный тэг контейнер, в который можно включать предварительно отформатированный текст. При этом можно в большей степени контролировать вывод документа программой просмотра, правда, за счет некоторой потери гибкости.
Наиболее употребительным является контейнер <PRE>. Текст внутри него может записываться в любой форме. Универсальность этого контейнера позволяет создавать таблицы и ровные колонки текста. Другим важным применением является вывод на экран больших блоков программного кода, не позволяющий браузеру переформатировать их.
|
|
|
Текст внутри контейнера <PRE> может содержать любые элементы физического и логического форматирования. Возможно, например, создание таблицы с заголовком, данным полужирным шрифтом, и данными, выделенными курсивом. Однако запрещено использование тэга <ADRESS> и тэгов заголовка.
Самым большим недостатком контейнера <PRE> является возможность вывода преформатированного текста только моноширинным шрифтом. Это делает вид преформатированных cтрок слишком громоздким.
Тема 2: «Таблицы в HTML документах»
Создание таблиц в HTML
Для описания таблиц используется тег <ТАВLЕ>. Тег <ТАВLЕ>, как и многие другие, автоматически переводит строку до и после таблицы.
Создание строки таблицы - тег <ТR>
Тег <ТR> (Таble Row, строка таблицы) создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами lt;ТR></ТR>.
Определение ячеек таблицы - тег <ТD>
Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD></ТD>. Число тегов <ТD></ТD> в строке определяет число ячеек.
|
|
|
Заголовки столбцов таблицы - тег <ТН>
Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН></ТН> (Таblе Неаder, заголовок таблицы). Эти теги подобны <ТD></ТD>. Отличие состоит в том, что текст, заключенный между тегами <ТН></ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD></ТD> с тегом <В> и атрибутом <АLIGN=center>, текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью <ТН>.
Использование заголовков таблицы - тег <САРТIОN>
Тег <CAPTION> позволяет создавать заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо над (<САРТION АLIGN=top>), либо под таблицей (<САРТION ALIGN=bottom>). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы. Иногда тег <САРТION> используется для подписи под рисунком. Для этого достаточно описать таблицу без границ.
Атрибут NOWRAP
Обычно любой текст, не помещающийся в одну строку ячейки таблицы, переходит на следующую строку. Однако при использовании атрибута NOWRAP с тегами <ТН> или <ТD> длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку.
Атрибут СОLSPAN
Теги <ТD> и <ТН> модифицируются с помощью атрибута СОLSPAN (Column Span, соединение столбцов). Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом СОLSPAN, чтобы растянуть ее над любым количеством обычных ячеек.
Атрибут ROWSPAN
Атрибут ROWSPAN, используемый в тегах <ТD> и <ТН>, подобен атрибуту СОLSPAN=, только он задает число строк, на которые растягивается ячейка. Если вы указали в атрибуте ROWSPAN=s число, большее единицы, то соответствующее количество строк должно находиться под растягиваемой ячейкой. Внизу таблицы ее поместить нельзя.
Атрибут WIDТН
Атрибут WIDТН применяется в двух случаях. Можно поместить его в тег <ТАВLЕ>, чтобы дать ширину всей таблицы, а можно использовать в тегах <ТD> или <ТН>, чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах. Например, если вы задали в теге <ТАВLЕ> вы получите таблицу шириной 250 пикселов независимо от размера страницы на мониторе. При задании WIDТН=50% в теге <ТАВLЕ> таблица будет занимать половину ширины страницы при любом размере изображения на экране. Так что, указывая ширину таблицы в процентах, имейте в виду, что если у пользователя узкая область просмотра, ваша страница может выглядеть несколько странно. Если вы пользуетесь пикселами, и таблица оказывается шире области просмотра, внизу появится полоса прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и другой способ задания ширины таблицы может оказаться полезным.
Атрибут СЕLLРАDDING
Данный атрибут определяет ширину пустого пространства между содержимым ячейки и ее границами, то есть задает поля внутри ячейки.
Атрибуты АLIGN и VALIGN
Теги <ТR>, <ТD> и <ТН> можно модифицировать с помощью атрибутов ALIGN и VALIGN. Атрибут АLIGN определяет выравнивание текста и графики по горизонтали, то есть по левому или правому краю, либо по центру. Горизонтальное выравнивание может быть задано несколькими способами:
ALIGN=blееdleft прижимает содержимое ячейки вплотную к левому краю.
ALIGN=left выравнивает содержимое ячейки по левому краю с учетом отступа, заданного атрибутом СЕLLPADDING.
АLIGN=сеnter располагает содержимое ячейки по центру.
АLIGN=right выравнивает содержимое ячейки по правому краю с учетом отступа, заданного атрибутом СЕLLPADDING.
Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. Вертикальное выравнивание может быть задано несколькими способами:
содержимое ячейки по ее верхней границе.
содержимое ячейки по вертикали.
содержимое ячейки по ее нижней границе.
Атрибут BORDER
В теге <ТАВLЕ> часто определяют, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пространство под них будет отведено. Того же результата можно добиться, задав <ТАВLЕ ВОRDER=0>. Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится делать для разных таблиц границы различной толщины, чтобы их легче было различать.
Атрибут CELLSPACING
Атрибут СЕLLSPACING определяет ширину промежутков между ячейками в пикселах. Если этот атрибут не указан, по умолчанию задается величина, равная двум пикселам. С помощью атрибута СЕLLSPACING= можно размещать текст и графику там, где вам нужно. Если вы хотите оставить пустое место, можно вписать в ячейку пробел.
Атрибут BGCOLOR
Данный атрибут позволяет установить цвет фона. В зависимости от того, с каким тегом (TABLE, TR, TD) он применяется, цвет фона может быть установлен для всей таблицы, для строки или для отдельной ячейки. Значением данного атрибута является RGB-код или стандартное название цвета.
Атрибут BACKGROUND
Данный атрибут задает фоновое изображение для таблиц. Применим к тегам TABLE и TD. Его значением является URL файла с фоновым изображением. Применение этого атрибута рассматривается ниже.
Дата добавления: 2018-04-04; просмотров: 294; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!