Динамическая и статическая компоновка сайта. Современные видеокарты поддерживают несколько произвольно устанавливаемых видеорежимов, характеризующихся экранным разрешением и количеством цветов, используемых при отображении информации на экране компьютера. При открытии в одном и том же броузере какой-либо web-страницы она может отображаться не одинаковым образом в зависимости от используемого экранного разрешения.
Для того чтобы избежать "съезжания" элементов html-документа друг относительно друга и, как следствие, деформации web-страницы в целом при изменении параметров экрана, все компоненты web-страницы заключаются в соответствующие ячейки невидимой таблицы, при этом каждому объекту назначается одно, строго определенное положение. Данной таблице можно назначить строго определенную ширину в пикселах, например, 640 точек, после чего жестко позиционировать ее по центру экрана или "прижать" к левому его краю. Такой вариант компоновки сайта называется статическим, поскольку ширина таблицы не меняется в зависимости от экранного разрешения. При изменении параметров экрана не происходит ни малейшего смещения элементов дизайна страницы.
Другой подход – когда ширину невидимой таблицы, содержащей фрагменты web-страницы, задают в процентах от текущей ширины экрана. При увеличении экранного разрешения таблица "растягивается" по горизонтали, и все размещенные в ее ячейках элементы, позиционированные либо по центру, либо по краям столбцов, смещаются согласно установленному алгоритму. В силу того, что параметры таблицы изменяются в зависимости от настроек экрана, такой принцип компоновки html-документа можно называется динамическим. И тот и другой подход обладает как достоинствами, так и недостатками.
Статическая компоновка страницы.
Достоинства. Простота алгоритма верстки документа. Оптимизировав страницу для отображения с экранным разрешением 640х480 точек, можно быть уверенным, что при изменении пользовательских экранных настроек элементы дизайна не "поплывут".
Недостатки. При отображении документа на компьютере с высоким экранным разрешением по краям экрана или с правой его стороны остается заметное пустое поле.
Динамическая компоновка страницы.
Достоинства. Документ растягивается по всей ширине экрана, не остается неиспользованных пустых полей.
Недостатки. Сложность верстки и отладки страницы
Элементы web-страницы. Любая web-страница содержит определенный набор стандартных элементов, являющихся обязательными компонентами каждого ресурса Интернета:
1. Заголовок web-страницы. Он может быть выполнен как в текстовом, так и в графическом варианте, и должен располагаться в верхней части документа. Иногда с заголовком совмещают меню выбора кодировки кириллицы и кнопки для перехода с русскоязычной на англоязычную версию сайта.
2. Непосредственно под заголовком документа, как правило, располагается рекламный баннер. Стандартный размер баннеров, публикуемых под заголовком документа, составляет обычно 468х60 точек.
3. Логотип компании-владельца данного сайта или ссылку на сервер, осуществляющий web-хостинг. Логотип необходим не всегда, как правило, он включается в состав web-страницы лишь в случае, если сайт имеет коммерческую направленность.
4. Основную часть документа занимает так называемое текстовое поле – участок где размещается смысловое наполнение страницы: содержательный информационный текст и иллюстрации. Перечисленные элементы еще называют "контент" (content – содержание).
5. Элементы навигации – гиперссылки, связывающие данный документ с другими разделами сайта. Элементы навигации могут быть выполнены в виде текстовых строк, графических объектов, то есть кнопок, либо активных компонентов, т.е. кнопок, реагирующих на движение, например, мыши, выполняя при наведении на них курсора какие-либо несложные действия (включение подсветки, создание эффекта "нажатия", изменение формы и т.д.). Располагать элементы навигации следует таким образом, чтобы они всегда были "на виду". Наиболее устоявшимся подходом является размещение элементов навигации у левой границы страницы.
6. В нижней части документа принято публиковать информацию о разработчиках сайта и адрес электронной почты, по которому посетители ресурса могут направить владельцам странички свои отклики, предложения и пожелания.
7. Если Web-страница является стартовым документом, в нижней ее части также размещают счетчик посещений.
Директивы HTML называются тегами. Теги заключаются в угловые скобки. Все теги за исключением некоторых – парные. Закрывающий тег отличается от открывающего наличием символа /. Синтаксис записи тега:
<ТЕГ> обрабатываемое значение </ТЕГ>
Теги допускают вложение друг в друга. Все объекты не заключенные в угловые скобки, воспринимаются как текстовые элементы.
HTML не чувствителен к регистру, однако рекомендуется применять при написании тегов заглавный регистр для улучшения читаемости кода. Исключением являются адреса URL и escape -последовательности.
Тег – это команда html , указывающая интерпретатору броузера, каким образом он должен обрабатывать соответствующее каждой конкретной директиве значение. Это значение называется атрибутом тега. Тег может иметь атрибут или не иметь его. Тег верхнего уровня < HTML > не имеет атрибутов.
Синтаксис записи тега в совокупности с его атрибутом:
<ТЕГ имя_атрибута_1=”значение”
…
имя_атрибута_ n =”значение”>
Значения атрибутов заключаются в прямые кавычки <”>. Если внутри атрибута тега встречается другое значение, заключенное в кавычки, то есть имеет место вложение одних кавычек в другие, в качестве внутренних кавычек рекомендуется использовать одинарные. Такое выражение выглядит следующим образом:
<ТЕГ имя_атрибута_1=”значение_1;
’значение2’;
значение3”>
Спецификация языка позволяет опускать кавычки в следующих видах атрибутов:
атрибуты, записываемые только строчными или заглавными символами латинского алфавита и не включающие иных символов, например цифр.
атрибуты, состоящие только из цифр от 0 до 9.
атрибуты, обозначающие промежутки времени.
Например, запись атрибутов border =”1” или align =” center ” допустимо представить в виде border =1 или align = center .
Структура HTML документа
< HTML >
< HEAD > Заголовок документа
< TITLE >Внешний заголовок </ TITLE >
</ HEAD >
< BODY >
Тело документа, содержащее основной код
</ BODY >
</ HTML >
Комментарии. Комментарии открываются символьной последовательностью, начинающейся с открывающей угловой скобки, восклицательного знака и двух знаков тире <! - закрываются сочетанием - >.
Формат комментария:
<! - текст комментария - >
Дефинитивный определить. Согласно спецификациям HTML тег DOCTYPE (что означает "объявление типа документа" или дефинитивный определить) сообщает валидатору, какая версия HTML используется на странице. Этот тег должен всегда находиться в первой строке каждой страницы. Тег DOCTYPE – ключевой компонент web-страниц, претендующих на соответствие стандартам: без него код и CSS не пройдет проверку валидатором.
Тег DOCTYPE также важен для правильного отображения и работы страницы в браузерах, соответствующих стандартам (Mozilla, IE5/Mac, и IE6/Win).
Тег DOCTYPE, в атрибутах которого указывается полный URI (полный web-адрес), сообщает браузерам, что страницу нужно вывести с соблюдением определенного стандарта или подвида этого стандарта.
Форматы тега DOCTYPE для стандартов HTML 4.01 Strict (строгий), Transitional (переходный), Frameset (с фреймами)
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http: // www. w3. org/TR/html4/strict. dtd">
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http: // www. w3. org/TR/html4/loose. dtd">
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Frameset // EN" "http: // www. w3. org/TR/html4/frameset. dtd">
Определить тот или иной цвет при создании web -страницы можно двумя методами: посредством задания специальных цветовых меток, обозначающий названия цветов словами, или с помощью шестнадцатеричного цифрового кода, заменяющего эти метки.
Для вывода цветных изображений на экран монитора применяется так называемая палитра RGB ( Red , Green , Blue ). Согласно данному стандарту, теоретические основы которого были разработаны ученым-физиком Г. Гельмгольцем, можно получить абсолютно любой желаемый оттенок путем смешивания всего лишь трех красок: красной, зеленой и синей.
Для обозначения цвета шестнадцатеричным цифровым кодом перед самим кодом ставится символ <#>, далее следует набор из шести знаков в шестнадцатеричной системе счисления.
Таблица.
| Цвет | Символьная метка | Цифровой код |
| Белый | White | #FFFFFF |
| Черный | Black | #000000 |
| Зеленый | Green | #008000 |
| Светло-зеленый | Lime | #00FF00 |
| Серый | Gray | #808080 |
| Светло-серый | Silver | #C0C0C0 |
| Желтый | Yellow | # FFFF 00 |
| Темно-бордовый | Maroon | #800000 |
| Синий | Blue | #0000 FF |
| Темно-синий | Navy | #000080 |
| Голубой | Aqua | #00FFFF |
| Изумрудный | Teal | #008080 |
| Красный | Red | # FF 0000 |
| Пурпурный | Purple | #800080 |
| Розовый | Fuchsia | # FF 00 FF |
| Оливковый | Olive | #808000 |
Для передачи цветов в html предпочтительнее пользоваться шестнадцатеричным цифровым кодом.
Escape -последовательности. Иногда возникает необходимость использования в тексте символы, зарезервированные для обозначения элементов кода HTML . Это могут быть угловые скобки, прямые кавычки и т.д.Т. е. необходимо, чтобы символы отображались как текст, интерпретатор же воспринимает их как часть команд разметки гипертекста. Поэтому существуют escape -последовательности, или их еще называют "нотации символьных объектов". Они начинаются символом & и заканчиваются; а между ними размещается сама команда, записываемая в строчном регистре.