Верстка страницы с использованием таблицы.

Посмотрите на этот пример с таблицей, он Вам ничего не напоминает??

< html>
< head>
< title> Верстка страницы < /title>
< /head>
< body>
< center>
< table border=" 1" width=" 640" height=" 480" >
< tr>
< td colspan=" 5" height=" 30" > < center> Заголовок< /center> < /td>
< /tr>
< tr>
< td height=" 30" width=" 20%" > < center> кнопка1< /center> < /td>
< td width=" 20%" > < center> кнопка2< /center> < /td>
< td width=" 20%" > < center> кнопка3< /center> < /td>
< td width=" 20%" > < center> кнопка4< /center> < /td>
< td width=" 20%" > < center> кнопка5< /center> < /td>
< /tr>
< tr>
< td valign=" top" > содержание: < /td>
< td colspan=" 4" > < center> куча текста< /center> < /td>
< /tr>
< /table>
< /center>
< /body>
< /html>

Как видите, таблица это хороший и главное удобный инструмент для верстки страницы..

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

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

Добавим красок:

< html>
< head>
< title> Таблица и краски< /title>
< /head>
< body>
< center>
< table width=" 300" height=" 300" >
< tr>
< td bgcolor=" #c0e4ff" > 1< /td>
< td bgcolor=" #c5ffa0" > 2< /td>
< td bgcolor=" #c0e4ff" > 3< /td>
< /tr>
< tr>
< td bgcolor=" #c5ffa0" > 4< /td>
< td bgcolor=" #ffa0c5" > 5< /td>
< td bgcolor=" #c5ffa0" > 6< /td>
< /tr>
< tr>
< td bgcolor=" #c0e4ff" > 7< /td>
< td bgcolor=" #c5ffa0" > 8< /td>
< td bgcolor=" #c0e4ff" > 9< /td>
< /tr>
< /table>
< /center>
< /body>
< /html>

Выровняем текст:

Здесь появляется новый атрибут valign - Вертикальное выравнивание. До этого момента нам был знаком атрибут align - горизонтальное выравнивание.

< html>
< head>
< title> Выравнивание в таблице< /title>
< /head>
< body>
< center>
< table width=" 300" height=" 300" >
< tr>
< td bgcolor=" #c0e4ff" valign=" top" > 1< /td>
< td bgcolor=" #c5ffa0" valign=" top" > < center> 2< /center> < /td>
< td bgcolor=" #c0e4ff" align=" right" valign=" top" > 3< /td>
< /tr>
< tr>
< td bgcolor=" #c5ffa0" > 4< /td>
< td bgcolor=" #ffa0c5" > < center> 5 < /center> < /td>
< td bgcolor=" #c5ffa0" align=" right" > 6< /td>
< /tr>
< tr>
< td bgcolor=" #c0e4ff" valign=" bottom" > 7< /td>
< td bgcolor=" #c5ffa0" valign=" bottom" > < center> 8< /center> < /td>
< td bgcolor=" #c0e4ff" align=" right" valign=" bottom" > 9< /td>
< /tr>
< /table>
< /center>
< /body>
< /html>

Теперь о новых атрибутах.

Cellspacing - задаёт расстояние в пикселях между ячейками таблицы. Задав значение cellspacing=" 0" можно избавиться от " зазора" между ячейками.

Пример, увеличим " зазор":

< html>
< head>
< title> Расстояние между ячейками< /title>
< /head>
< body>
< center>
< table width=" 300" height=" 300" cellspacing=" 15" >
< tr>
< td bgcolor=" #c0e4ff" valign=" top" > 1< /td>
< td bgcolor=" #c5ffa0" valign=" top" > < center> 2< /center> < /td>
< td bgcolor=" #c0e4ff" align=" right" valign=" top" > 3< /td>
< /tr>
< tr>
< td bgcolor=" #c5ffa0" > 4< /td>
< td bgcolor=" #ffa0c5" > < center> 5< /center> < /td>
< td bgcolor=" #c5ffa0" align=" right" > 6< /td>
< /tr>
< tr>
< td bgcolor=" #c0e4ff" valign=" bottom" > 7< /td>
< td bgcolor=" #c5ffa0" valign=" bottom" > < center> 8< /center> < /td>
< td bgcolor=" #c0e4ff" align=" right" valign=" bottom" > 9< /td>
< /tr>
< /table>
< /center>
< /body>
< /html>

Атрибут cellpadding (не путайте с cellspacing) - в пикселях задаёт поля ячеек (отступ от границ ячеек до текста)

Пример:

< html>
< head>
< title> Поля таблицы< /title>
< /head>
< body>
< center>
< table width=" 300" height=" 300" cellspacing=" 0" cellpadding=" 25" >
< tr>
< td bgcolor=" #c0e4ff" valign=" top" > 1< /td>
< td bgcolor=" #c5ffa0" valign=" top" > < center> 2< /center> < /td>
< td bgcolor=" #c0e4ff" align=" right" valign=" top" > 3< /td>
< /tr>
< tr>
< td bgcolor=" #c5ffa0" > 4< /td>
< td bgcolor=" #ffa0c5" > < center> 5< /center> < /td>
< td bgcolor=" #c5ffa0" align=" right" > 6< /td>
< /tr>
< tr>
< td bgcolor=" #c0e4ff" valign=" bottom" > 7< /td>
< td bgcolor=" #c5ffa0" valign=" bottom" > < center> 8< /center> < /td>
< td bgcolor=" #c0e4ff" align=" right" valign=" bottom" > 9< /td>
< /tr>
< /table>
< /center>
< /body>
< /html>

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

Смотрим пример:

< html>
< head>
< title> Вложенная таблица< /title>
< /head>
< body>
< center>
< table width=" 600" height=" 400" border=" 1" >
< tr>
< td colspan=" 2" > < center> Заголовок< /center> < /td>
< /tr>
< tr>
< td valign=" top" > содержание: < /td>
< td valign=" top" >
< center>
< br> < br>
В одну ячейку вложена целая таблица!!
< br> < br> < br>
< table width=" 200" height=" 200" cellspacing=" 0" cellpadding=" 15" >
< tr>
< td bgcolor=" #c0e4ff" valign=" top" > 1< /td>
< td bgcolor=" #c5ffa0" valign=" top" > < center> 2< /center> < /td>
< td bgcolor=" #c0e4ff" align=" right" valign=" top" > 3< /td>
< /tr>
< tr>
< td bgcolor=" #c5ffa0" > 4< /td>
< td bgcolor=" #ffa0c5" > < center> 5< /center> < /td>
< td bgcolor=" #c5ffa0" align=" right" > 6< /td>
< /tr>
< tr>
< td bgcolor=" #c0e4ff" valign=" bottom" > 7< /td>
< td bgcolor=" #c5ffa0" valign=" bottom" > < center> 8< /center> < /td>
< td bgcolor=" #c0e4ff" align=" right" valign=" bottom" > 9< /td>
< /tr>
< /table>
< /center>
< /td>
< /tr>
< /table>
< /center>
< /body>
< /html>

Такой вот растянутый код получился… Сложно? Запутанно? Может быть на первый взгляд оно так и есть, но ведь не зря же я приводил столько примеров! Если что то не понятно вернитесь назад, перечитайте, идите от простого к более сложному и тогда всё станет на свои места! Практика - залог успеха. Не ленитесь, пробуйте писать код самостоятельно..

Ну и уже по традиции подвожу итог главы.. Итак, что у Вас там за страничка получилась..?

У меня она уже вот такая:

< html>
< head>
< title> Мой первый сайт < /title>
< /head>
< body text=" #484800" bgcolor=" #ffffff" background=" graphics/fon.jpg" >
< center>
< table width=" 640" height=" 480" cellpadding=" 5" cellspacing=" 2" border=" 1" >
< tr>
< td colspan=" 3" height=" 30" bgcolor=" #b2ff80" >
< center> < img src=" graphics/privet.png" width=" 200" height=" 40" alt=" Привет мир!!! " > < /center>
< /td>
< /tr>
< tr>
< td height=" 30" width=" 33%" bgcolor=" #ffa0cf" > < center> < b> Обо мне!!! < /b> < /center> < /td>
< td width=" 33%" bgcolor=" #c0e4ff" > < center> < b> Здесь мои фотки!! < /b> < /center> < /td>
< td bgcolor=" #c0e4ff" > < center> < b> Напишите мне письмо..< /b> < /center> < /td>
< /tr>
< tr>
< td colspan=" 3" valign=" top" bgcolor=" #b2ff80" >

< p align=" justify" >
< img src=" graphics/foto.jpg" align=" left" hspace=" 10" width=" 100" height=" 90" alt=" Это моя фотка!!! " title=" Это моя фотка!! " >
& nbsp; & nbsp; & nbsp; Разрешите представиться Карлсон! который живет на крыше.
Спокойствие! Только спокойствие! подумаешь с жильём проблемы..< br> Я - умный, красивый, в меру упитанный мужчина, в полном расцвете сил! Женщины сходят по мне сходят с ума.. эх.. какая досада.. в общем со мной не соскучишься..
< /p>
< p> & nbsp; & nbsp; & nbsp; По телевизору показывают жуликов... Ну чем я хуже?! - так что вот решил сделать свою страничку! < /p>
< p> & nbsp; & nbsp; & nbsp; Хочу здесь найти себе новых друзей, для того чтобы вместе гулять по крышам! < /p>
< p> & nbsp; & nbsp; & nbsp; Я очень очень сильно люблю < font size=" +1" color=" #ff0000" > варенье< /font>!!! С нетерпеньем буду ждать Вашего приглашения на чай.. побалуемся плюшками… пошалим…< /p>
< center> < b> Прилечу!! < /b> < /center>
< p> & nbsp; & nbsp; Ну зачем тебе этот щенок? Я же лучше, Малыш…< /p>

< /td>
< /tr>
< /table>
< /center>
< /body>
< /html>

Читайте так же: Глава 12 " И снова таблицы.. "

Полезные советы:

· При создании больших сложных таблиц рекомендую сначала рисовать их на бумаге. Так будет удобнее представить её общую картину, подсчитать количество строк и столбцов, увидеть с какой ячейки и на какое количество следует растягивать " объединять" те или иные ячейки.

· При выборе будущих размеров Вашей страницы, особенно это касается её ширины (атрибут width), ориентируйтесь на стандартные разрешения мониторов 640 на 480, 800 на 600, 1024 на 768… Но самое главное помните, что у разных пользователей в зависимости от их мониторов и зрения выставлены разные разрешения и если указанные Вами размеры будут выходить за их рамки то соответственно на экранах таких пользователей будут появляться полосы прокрутки. Вертикальная полоса это беда нестрашная, благо колёсико на мышке придумали, да и пишут у нас слева направо, а не сверху вниз.. а вот горизонтальная полоса прокрутки уже вызывает значительные неудобства при чтении страницы.. Так что не советую указывать большую ширину страницы. По-моему ширина в 1024 пикселей будет оптимальным размером… хотя… ну да ладно.. решайте сами.

Глава 5

Ссылки

Думаю, Вам уже понятно о чём пойдет речь в этой главе.. и Вы знаете, что из себя представляет ссылка, если нет, то нажмите сюда.. (https://www.webremeslo.ru/html/primer/primer29.html) Существует несколько видов ссылок, а так же " механизмов" перехода по ним. В этой главе постараюсь подробно рассказать о том как прописать ссылки, а так же посвятить в тонкости дела по работе с ними.

Лирическое отступление:
Как-то в армии подходит ко мне начальник штаба и отдаёт приказ, цитирую:
Принеси мне вот тот документ, правда я не знаю где он и какой!! Что стоишь? Бегом давай!! Опаздываю я!!!

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

На данный момент с помощью блокнота мы создали только один HTML документ у меня он с именем index.html (зачем выбрал такое странное название index.html и зачем оно нужно смотрите в полезных советах) у Вас не знаю с каким, Вы сами имя придумывали, но думаю, Вы его помните и знаете где он лежит, если конечно Вы не мой начальник штаба:).. В этом документе мы попробуем создать ссылку на другой документ, которого у нас еще нет.. Так что прежде чем на него ссылаться, его нужно создать, благо Вы это уже умеете.

1. Открываем блокнот.

2. Пишем код на html языке. к примеру страничку с рядом фотографий.

3. Сохраняем его как html страничку в ту же рабочею папку, где уже есть созданный нами первый документ. Давайте, что б не путаться назовем его primer.html, да и первый тоже, пожалуй, переименуйте в index.html

Теперь я знаю, что у Вас два html документа index.html и primer.html и что теперь у Вас есть минимальный набор для дальнейшего обучения.