Уроки музыки

</TD>

</TR>

</TABLE>

<CENTER>

<A href=index.html><img src=images/home.gif></A>

<A href=dusja.htm><img src=images/dusja.gif></A>

<A href=klava.htm><img src=images/klava.gif></A>

</CENTER>

</BODY>

</HTML>

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

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

Все табличные теги имеют атрибуты, с большей частью которых ты уже знаком, но всё же перечислим основные из них:

border – толщина границы;

width, height – ширина и высота (таблицы, строки или ячейки – всё зависит от того, в каком теге этот атрибут записан), может задаваться в точках или в процентах;

align, valign – выравнивание по горизонтали (left, right, center) и по вертикали (top – по верхнему краю, bottom – по нижнему краю) содержимого ячейки; если этот атрибут находится в теге <TABLE>, то выравнивание относится к самой таблице, а не к её содержимому;

bgcolor – цвет фона (таблицы, строки или ячейки);

background – фоновый рисунок (с помощью этого атрибута ты сможешь на фоне фотографии разместить текст, бегущую строку или картинку – это пока единственный способ сделать страничку многослойной);

cellpadding, cellspacing – поля внутри ячеек и просветы между ячейками;

colspan, rowspan – пропуск колонок (ячеек) или строк.

2. Пожалуй, из всех этих атрибутов стоит подробнее разобраться с двумя последними. Добавляем новые строки:

<TABLE border=1 cellpadding=5 width=80% align=center >

<TR>

<TD colspan=3 align=center>

<H2>Жизнь Погромыча в фотографиях</H2>

</TD>

</TR>

<TR>

<TD rowspan=2 valign=center align=center

width=10%>

<H2>Ф<P>О<P>Т<P>О<P>Г<P>А

<P>Л<P>Е<P>Р<P>Е<P>Я</H2>

</TD>

<TD align=right width=45% >

Погромыч знакомится с Дусей

</TD>

<TD width=45% >

<IMG src=images/foto1.jpg>

</TD>

</TR>

<TR>

<TD align=right >

<IMG src=images/foto2.jpg>

</TD>

<TD>

Уроки музыки

</TD>

</TR>

</TABLE>

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

3. Теперь можно убрать границу таблицы, заменив в теге <TABLE> атрибут border=1 на border=0.

4. Задание простое: продолжи галерею Погромыча, добавив в таблицу ещё 2-3 строки с фотографиями. Не забудь про атрибуты alt, width и height тега <IMG>, которые ради экономии места были опущены.

5. Задание посложнее: проследи, чтобы левая колонка (в которой написано ФОТОГАЛЕРЕЯ) простиралась на все строки таблицы.

6. Задание сложное: создай страничку Карта сайта (karta.htm), на которой в виде таблицы (или таблиц) изобрази содержимое твоего сайта, например, так:

Главная
Погромыч		Дуся		Клава
Погромыч знакомится с Дусей
	Уроки музыки
Погромыч учится плавать
	Бобик в гостях у Погромыча
Карта

Сделай содержимое ячеек этой таблицы ссылками на соответствующие странички.

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

7. Если ты наивнимательнейшим и подробнейшим образом будешь выполнять последнее задание, то столкнёшься с такой проблемой – надо, чтобы фотографии на карте (или подписи к ним) ссылались не на всю страничку pogrom.htm, а на какое-то определённое её место. Как этого добиться?

c в файле pogrom.htm добавь тег <A>:

<TD align=right width=45%>

<A name=foto1>

Погромыч знакомится с Дусей

</TD>

<TD width=45%>

<IMG src=images/foto1.jpg>

</TD>

который ставит метку с именем foto1 в точку перед словом Погромыч (совсем необязательно, чтобы это имя совпадало с именем файла с фотографией);

c в файле karta.htm ссылку на первую фотографию запиши так:

<A href=pogrom.htm#foto1>

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

<A href=#foto1>

а вот значок метки (#) ставить необходимо.

И ещё одно замечание: в отличие от тега <A href…>, обязательно имеющего закрывающий тег </A>, его «родственника» <A name…> «закрывать» не надо.

c и так для всех «местных» ссылок (этот вид ссылок не имеет общепринятого названия, поэтому между нами будем их называть «местными», они ведь ссылаются на определённое место на страничке).

Если наш пятый чертёж показался тебе очень трудным или объёмным – не скисай, набирайся сил. Дальше будет не легче. Хотя, скорее всего, и не труднее.

Дата добавления: 2014-11-16