Основные теги HTML

также нумерацией:

<OL>

<LI>Элемент 1

<LI>Элемент 2

<LI>Элемент 3

</OL>

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

<DD>Этот вид списков чуть сложнее, чем два предыдущих, но и выглядит более эффектно.

<P>Помните, что списки можно встраивать один в другой, но не следует закладывать слишком много уровней вложенности. </P>

<P>Обратите внимание, что внутри элемента списка может находиться несколько абзацев. Все абзацы при этом будут иметь одинаковое левое поле. </P>

</DL>

</body> </html>

 

Результат этого фрагмента программы:

 

Задания

1.Набрать пример 3-1 на стр. 1, посмотреть результат и далее  выполнить сл. изменения:

а) Поменять высоту бегущей строки;

б) Фон текста первой бегущей строки красным, второго текста  – синим;

в) Горизонтальные линии после абзацев перекрасить в др. цвета, их толщины и длины также изменить по своему усмотрению;

2. Набрать пример 3-2 на  стр. 2, посмотреть результат и  далее в каждой строке перечислить  имена студентов группы;

3. Набрать пример 3-3 на  стр. 2, посмотреть результат и  далее в каждой строке перечислить  фамилии студентов группы, провести  толстые и разноцветные разделительные  горизонтальные линии;

4. Набрать пример 3-4 на  стр. 2, посмотреть результат и  далее в каждой строке длинных  определений дать пояснения профессиям  экономиста, бухгалтера и финансиста;

5. Набрать пример 3-4 на  стр. 3, посмотреть результат и  далее  в каждой строке коротких  определений записать имена студентов  группы и дать краткую характеристику  типа “отличник учебы”, “галантный  парень”, “симпатичная девушка”  и т.д.;

6. Набрать пример 3-5 на  стр. 3  c вашими измененными фрагментами  текста, посмотреть результат и  далее  в каждой строке изменять  строки и их оформления по  вашему усмотрению.

 

 

Лабораторная работа №4  Построение таблиц

 

Цель работы научить студентов:

• использованию основных тегов по созданию таблиц,

• создавать таблицы в HTML-документах,

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

Теги заглавия <CAPTION> </CAPTION> задают заголовок таблицы. Определение таблицы имеет следующий синтаксис:

<TABLE ALIGN="align"  BGCOLOR="#rrggbb"  BORDER="integer"

BORDERCOLOR="#rrggbb"   CELLPADDING="integer"

CELLSPACING="integer"  WIDTH="integer">

</TABLE>

Вот их выполняемые функции:

ALIGN определяет выравнивание таблицы (по умолчанию — по левому краю). ALIGN может принимать одно из следующих значений: LEFT, CENTER, RIGHT.

BGCOLOR задает цвет фона (в шестнадцатеричном формате RGB или как одно из предопределенных названий цвета).

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

BORDERCOLOR определяет цвет рамки (в шестнадцатеричном формате RGB или как одно из предопределенных названий); должен использоваться совместно с атрибутом BORDER.

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

CELLSPACING — целое число, которое определяет горизонтальное и вертикальное расстояние между ячейками. Задается в пикселях.

WIDTH - целое число, определяющее ширину таблицы. Его значение может быть задано в пикселях или в процентах (%).

Заголовок определяется тегом <CAPTION> в соответствии со следующим синтаксисом:

<CAPTION  ALIGN="align"   VALIGN="valign"> </CAPTION>

Tег <CAPTION> имеет следующие атрибуты.

ALIGN определяет выравнивание заголовка и принимает одно из следующих значений: LEFT, CENTER (по умолчанию) или RIGHT.

VALIGN определяет вертикальное выравнивание заголовка и может принимать одно из следующих значений: ТОР, MIDDLE, BOTTOM (по умолчанию), BASELINE.

Строка таблицы определяется тегом <TR></TR>, который имеет свои атрибуты:

<TR  ALIGN="align"   BGCOLOR="#rrggbb" BORDERCOLOR="#rrggbb"> Строка… </TR>

Атрибуты тега <TR>

ALIGN — выравнивание строки. Возможны следующие значения: LEFT (пo умолчанию), CENTER, RIGHT.

BGCOLOR определяет цвет фона (в шестнадцатеричном формате RGB или как одно из предопределенных названий).

BORDERCOLOR — цвет рамки строки (в шестнадцатеричном формате RGB или как одно из предопределенных названий). Этот атрибут будет использоваться только в том случае, если для атрибута BORDER тега <TABLE> определено значение, отличное от нуля.

Ячейки (столбцы) таблицы определяются тегами <TD></TD> и <ТН></ТН> в соответствии со следующим синтаксисом:

<TD или ТН  ALIGN="align"  BACKGROUND="url"]  BGCOLOR="#rrggbb" BORDERCOLOR="#rrggbb"] > Столбец… </TD или /TН>

Теги <TD> и <ТН> имеют следующие атрибуты:

ALIGN — горизонтальное выравнивание текста. ALIGN может принимать одно из следующих значений: LEFT, CENTER (по умолчанию), RIGHT.

BGCOLOR — цвет фона (в шестнадцатеричном формате RGB или как одно из предопределенных названий).

BORDERCOLOR — цвет рамки ячейки (в шестнадцатеричном формате RGB или как одно из предопределенных названий цвета). Этот атрибут будет использоваться только в том случае, если для атрибута BORDER тега <TABLE> определено значение, отличное от нуля.

COLSPAN — целое число, определяющее количество столбцов, попадающих в данную ячейку, предназначенную для объединенного заголовка столбцов.

ROWSPAN — целое число, определяющее количество строк, попадающих в данную ячейку, предназначенную для их объединения.

Таким образом, инструмент для «растягивания» ячеек в таблице представляет собой два атрибута тегов <th> и <td>: colspan и rowspan. Один из них позляет расширять диапазон охвата по горизонтали (по строке), другой — по вертикали (по столбцу). Рассмотрим пример:

<table border="1l"> 
<сарtion>Спецификации компьютеров</сарtion> 
<tr><th>&nbsр;</th><th>модель 100</1И><th>модель 200</th></tr> 
<tr><th>npoцeccop</th><td>G9-l.6</td><td>G9-l.7</td></tr> 
<tr><th>Винчестер</th><td>78 T6</td><td>90 T6</td></tr> 
<tr><th>Видеокарта</th><td colspan="2">Rageous 428p</td></tr> 
<tr><th>A/B Bыходl</th><td rowspan="2">Heт</td><td>EcTb</td> </tr>

<th>Порт сменного дисковода</th><td>Опционально</td></tr> 
</table>

Итак, colspan растягивает ячейку с надписью Rageous 428p на две колонки — назначение этого атрибута вполне понятно. Что касается rowspan, то он растягивает вторую колонку на две строки. Таким образом, хотя надпись, казалось бы, должна появиться во второй колонке (потому что она описана сразу после <th>), она появится в третьей. Важно не запутаться в этом, а для этого нужно как можно чаще проверять себя, просматривая страницу в браузере. А выглядит таблица в браузере так, как показано на рис.

Цвета ячеек и строк

Во время работы с таблицами может понадобиться изменить цвет фона некоторых строк или даже отдельных ячеек. Любой элемент может иметь атрибут bgcolor, который применяется как раз для таких целей. Значением атрибута bgcolor должно быть имя или номер цвета. Применение атрибута bgcolor показано па примере:

<table> 
<trxth>Регион</ th><th=Июнь</th><th>Июль</th><th>Август</th></tr> 
<tr bgcolor="yellow"><th>Ceвep</th><td>600  000</td> 
<td>400 000</td><td>800 000</td></tr> 
<tr><th>Юг</th><td>300 000</td><td>200 000</td><td>400 000</td></tr> 
<tr bgcolor-"yellow"><th>Bocток</th><td>230 000</td><td>=490 OO0</td> 
<td>980 000</td></tr> 
<tr><th>3aпад</th><td>320 000</td><td>120 000</td> 
<td>490 000</td></tr> 
</table>

Можно использовать не только имя цвета в качестве значения атрибута bgcolor, но и тройку двухразрядных шестнадцатиричных чисел в формате RGB (красный, зеленый, синий). Например, bgcolor="#ff00ff" задает задний фон фиолетового цвета.

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

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

<table border="8">.

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

Далее показан пример использования обоих атрибутов. Результат — на рис.

<table border=8 align=center width="50%">

<caption>Уровень  продаж конфет разных типов  среди студентов </сарtion>

<tr><th>Tип</th><th>Melissa</th><th>Brian</th><th>Roger</th></tr>

<tr><th> Шоколадные  плитки</th><td>50</td><td>25</td><td>50</td></tr>

<tr><th>Фруктовые  тянучки</th><td>50</td><td>45</td><td>30</td> </tr>

<tr><th> Лeденцы </th><td>15</td><td>25</td><td>40</td></tr>

</table>

 

Атрибуты cellpadding и cellspacing

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

<table border ="1" ce11spacing="10">

Тем не менее, сellspacing работает не менее эффективно и при отсутствии атрибута border:

<table cellspacing="10">

Что касается атрибута cellpadding, то он используется для определения количества пространства, которое должно быть отведено под расстояние между границей ячейки и ее содержимым. (Значения, как и прежде, задаются в пикселах). По умолчанию значением этого атрибута является 1. Можно поставить и нулевой cell padding, но это приведет к тому, что содержимое ячеек будет наползать на границы. Приведенный далее пример показан на таблице рис.

 

<tаble border»"1" cellpadding="10">

 

Теперь рассмотрим задания.

Задания

1.Набрать сл. пример, посмотреть  результат и далее выполнить  некоторые изменения:

<TABLE    ALIGN=CENTER  BORDER=3   CELLSPACING=2  

       CELLPADDING=2   WIDTH="80%"

       BGCOLOR=YELLOW   BORDERCOLOR=BLUE>

       <CAPTION> <H2> Заголовок  таблицы </H2>  </CAPTION>

       <TR>  <TD> первая клетка таблицы </TD> 

                   <TD> вторая клетка таблицы </TD> </TR>

        <TR> <TD> первая клетка таблицы </TD>

                   <TD> вторая клетка таблицы </TD></TR>

</TABLE>

а) изменить цвет фона 1-строки (<TR BGCOLOR=SILVER>) серебристый, серый цвета.

б) изменить толщину рамок (бордюра), текст в клетках и т.д.

2) Набрать сл. пример, посмотреть  результат и далее выполнить  некоторые изменения:

<TABLE ALIGN="RIGHT" BORDER="3" BORDERCOLOR="Blue"  WIDTH="80%">

<CAPTION ALIGN="RIGHT" > Заголовок  появится справа и сверху от таблицы </CAPTION>

<TR>  <ТН COLSPAN="3"> Заголовок Столбца </TН> </TR>

  <TR ALIGN="RIGHT" BGCOLOR="yellow">

  <TH> Столбец 1 </ТН> <ТН> Столбец 2 </ТН> <ТН> Столбец 3 </TН>

</TR>

<TR> <TD> Данные для  Столбца 1 </TD>

   <TD> Данные для Столбца 2 </TD>

           <TD> Данные для Столбца 3 </TD>

</TR>

</TABLE>

 

а) Добавить ещё один столбец к обеим строкам;

б) Добавить ещё две строки;

в) Изменить слова текстов в клетках,  цвет фона строк и отдельных клеток;

г) Изменить цвет заголовка и т.д.

д) Провести перед таблицей, после заголовка таблицы и в конце таблицы горизонтальные линии разного цвета.

Контрольные вопросы

1. Почему для разработки Web-страниц используется специальный язык разметки гипертекста? Мы знаем, что с помощью текстового процессора Word вполне можно получать представительные документы. Почему нельзя использовать этот удобный и мощный текстовый процессор для разработки Web-документов?

2. Как вы понимаете, что такое тег HTML?

3. С помощью каких известных вам программ можно создавать Web-документы в коде HTML?

4. С помощью каких известных вам программ можно просматривать Web-документы?

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

6. Несмотря на отсутствие тегов для создания текста фиксированной ширины, управлять шириной текста все-таки можно. С помощью какого средства можно создать текст, расположенный в трех (например) колонках заданной ширины?

7. Что такое альтернативный текст? Зачем он нужен и когда используется?

8. Чем отличаются текстовые и графические гиперссылки?