Разметка web-страницы с использованием таблицы

Разметку Web-странцы удобно производить с использованием таблицы. Возможны различные варианты разметки. Рассмотрим некоторые из них.

1 вариант

Разметка страницы производится с использованием таблицы шириной на весь экран, независимо от того, каково разрешение экрана (width=100%). В данном случае удобно создать таблицу, состоящую из двух строк и двух столбцов. Верхняя строка будет отведена под заголовок странички, левый столбец будет отведен под меню Web-сайта.

Посмотреть

2 вариант

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

Посмотреть

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

Во все ячейки второй строки введен текст странички.

Посмотреть

Задание

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

— на каждой страничке должны быть ссылки на другие страницы вашего сайта.

— на каждой страничке должны быть размещены иллюстрации.

— материалы для сайта необходимо найти в Интернете на любую из предложенных тем:

1. Петербург — северная столица.

2. Рассказ о любимом виде спорта.

3. Рассказ об институте, в который вы собираетесь поступать.

4. Рассказ о любимой музыкальной группе.

5. Рассказ о зимних олимпийских играх.

6. Если у вас есть готовая тема, обсудите ее с преподавателем.

Некоторые (предположительно полезные) советы по разработке и размещению HTML-страниц

Правила хорошего тона при разработке HTML-документов

Ознакомьтесь с текущей спецификацией HTML

Производители браузеров часто добавляют к своим творениям поддержку меток, не входящих в текущую спецификацию HTML. Именно поэтому иногда можно встретить страницы, оптимизированные для того или иного браузера. На мой взгляд, это далеко не лучший подход. Однако, как говорил Рэй Брэдбери, единственный способ заставить писателя не писать — это кольт сорок пятого калибра. И писатели пишут…

Не питайте абсолютного доверия к визуальным редакторам HTML

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

Используйте продуманную иерархию заголовков

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

Следите за вложенностью меток

Современные браузеры способны правильно обработать вложенные метки. Например, вот такой фрагмент HTML-текста

жирный наклонный шрифт

большинство браузеров вполне успешно воспроизведут как жирный наклонный шрифт. Обратите внимание — метки … в этом фрагменте находятся внутри меток …. Другими словами, метки вложены одна в другую.

Работа браузера, однако, окажется сильно затрудненной, если вложенность окажется нарушенной, например:

вложенность меток нарушена

Соблюдение вложенности — очень важная часть общей культуры написания HTML-текста.

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

Помните, что пользователи могут отключать автоматическую загрузку изображений. Не ленитесь подсказать пользователю, чего именно он не видит. Это особенно важно, когда изображения являются гипертекстовыми ссылками.

При разработке крупных документов создавайте оглавления

При написании крупного документа очень полезно поместить в его начале оглавление с гипертекстовыми ссылками на разделы. Это может облегчить пользователю работу с документом, особенно если документ носит справочный характер.

HTML для начинающих — #4 — Таблицы


Похожие статьи.

Понравилась статья? Поделиться с друзьями: