framedesignlab.com

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

Заголовки

Заголовки разных размеров привлекают внимание читателей и указывают на информацию, которую они хотят прочитать. Начните с основного заголовка, используя

или же

теги:

Добро пожаловать на мой сайт

Используйте заголовки более низкого уровня, чтобы разделить сайт по вертикали на разделы. Ограничьте заголовки двумя или тремя размерами в диапазоне от

к

и не более трех-четырех разделов.

Абзацы

Используйте абзац

тег для разделения текста на разделы следующим образом:

Текст первого абзаца…

Текст второго абзаца…

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

Изображений

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

Столы

Используйте простые таблицы, чтобы разделить страницу по горизонтали. Одна таблица, помещенная после заголовка, фактически разделит страницу на два или три раздела. Используйте следующий HTML-код:

Таблица заполняет страницу левым столбцом, занимающим 20 процентов страницы, правым столбцом, занимающим еще 20 процентов, и центральным столбцом между ними. Обязательно запомните атрибут valign, чтобы каждый столбец начинался сверху и перемещался вниз. Забудьте об этом атрибуте, и контент будет выровнен по вертикали по центру страницы. Добавьте контент, а затем отрегулируйте ширину столбцов, пока презентация не будет выглядеть правильно.

Линии и границы

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

Белое пространство

Пустые строки и столбцы часто разделяют страницу лучше, чем любое другое форматирование. Разрывы строк, закодированные как "

"без кавычек, пустые абзацы, закодированные как самозакрывающиеся теги как"

"без кавычек и пустые столбцы таблицы разделяют текст и делают макет более приятным для читателя. Пустое пространство требует небольшой полосы пропускания и действительно является самым простым способом разделить страницу.