Найпростіший спосіб розділити веб-сторінку
Щоб створити чисту, добре організовану, зручну для читання веб-сторінку, дотримуйтесь основ. HTML 5 і CSS 3 можуть отримувати всю пресу, але основні елементи HTML, такі як заголовки, абзаци та кілька добре розміщених таблиць, можуть ефективно розділити сторінку для передачі вашого повідомлення. Ось кілька простих, корисних тегів, які допоможуть організувати сайт.
Заголовки
Назви різних розмірів привертають увагу і спрямовують читачів на інформацію, яку вони хочуть прочитати. Почніть з основного заголовка, використовуючи
або
теги:
Ласкаво просимо на мій сайт
Використовуйте заголовки нижнього рівня, щоб розділити сайт вертикально на розділи. Обмежте заголовки двома-трьома розмірами, починаючи від
до
і не більше трьох-чотирьох розділів.
Абзаци
Використовуйте абзац
тег, щоб розділити текст на розділи таким чином:
Текст першого абзацу ...
Текст другого абзацу ...
Зберігайте абзаци малими та стислими. Типові веб-читачі швидко сканують вміст, тож перейдіть до першого-двох речень до того, як їм стане нудно, і натисніть інше посилання.
Зображення
Кілька добре розміщених зображень також допомагають розділити сторінку на логічні розділи. Змінюйте орієнтацію вліво та вправо, щоб розбити сторінку. Якщо можливо, перетворіть заголовки у зображення, щоб додати стилю та різноманітності. Зображення також добре працюють, замінюючи посилання та кнопки.
Столи
Використовуйте прості таблиці, щоб розділити сторінку по горизонталі. Одна таблиця, розміщена після заголовка, фактично розділить сторінку на два-три розділи. Використовуйте такий HTML-код:
| Зміст лівої колонки йде сюди ... | Вміст центру йде сюди…. | Тут іде правильний вміст ... |
Таблиця заповнює сторінку лівим стовпцем, що займає 20 відсотків сторінки, правим стовпцем - ще 20 відсотків, а центральний стовпець - між ними. Не забудьте запам’ятати атрибут valign, щоб кожен стовпець починався зверху і стікав вниз. Забудьте про цей атрибут, і вміст буде вертикально вирівняний до центру сторінки. Додайте вміст, а потім регулюйте ширину стовпців, поки презентація не буде виглядати правильно.
Лінії та межі
Горизонтальне правило, кодоване як "" без лапок, або межа навколо таблиці може підкреслити розрив розділу або привернути увагу до блоку тексту. Використовуйте їх економно і дотримуйтесь ширини ліній не більше двох-трьох точок. Поекспериментуйте з цими елементами, щоб побачити, чи вони додають чи відволікають від презентації.
Пробіл
Пусті рядки та стовпці часто поділяють сторінку краще, ніж усі інші форматування. Розриви рядків, кодовані як "
"без лапок, порожні абзаци, кодовані як самозамикаючі теги як"
"без лапок, а порожні стовпці таблиці відокремлюють текст і роблять макет приємнішим для читача. Порожній простір займає невелику пропускну здатність і насправді є найпростішим способом розділити сторінку.
