татическая компоновка страницы. Достоинства. Простота алгоритма верстки документа. Оптимизировав страницу для отображения с экранным разрешением 640х480 точек, можно быть уверенным, что при изменении пользовательских экранных настроек элементы дизайна не "поплывут". Недостатки. При отображении документа на компьютере с высоким экранным разрешением по краям экрана или с правой его стороны остается заметное пустое поле. Динамическая компоновка страницы. Достоинства. Документ растягивается по всей ширине экрана, не остается неиспользованных пустых полей. Недостатки. Сложность верстки и отладки страницыЭлементы web-страницы. Любая web-страница содержит определенный набор стандартных элементов, являющихся обязательными компонентами каждого ресурса Интернета: 1. Заголовок web-страницы. Он может быть выполнен как в текстовом, так и в графическом варианте, и должен располагаться в верхней части документа. Иногда с заголовком совмещают меню выбора кодировки кириллицы и кнопки для перехода с русскоязычной на англоязычную версию сайта. 2. Непосредственно под заголовком документа, как правило, располагается рекламный баннер. Стандартный размер баннеров, публикуемых под заголовком документа, составляет обычно 468х60 точек. 3. Логотип компании-владельца данного сайта или ссылку на сервер, осуществляющий web-хостинг. Логотип необходим не всегда, как правило, он включается в состав web-страницы лишь в случае, если сайт имеет коммерческую направленность. 4. Основную часть документа занимает так называемое текстовое поле - участок где размещается смысловое наполнение страницы: содержательный информационный текст и иллюстрации. Перечисленные элементы еще называют "контент" (content - содержание). 5. Элементы навигации - гиперссылки, связывающие данный документ с другими разделами сайта. Элементы навигации могут быть выполнены в виде текстовых строк, графических объектов, то есть кнопок, либо активных компонентов, т.е. кнопок, реагирующих на движение, например, мыши, выполняя при наведении на них курсора какие-либо несложные действия (включение подсветки, создание эффекта "нажатия", изменение формы и т.д.). Располагать элементы навигации следует таким образом, чтобы они всегда были "на виду". Наиболее устоявшимся подходом является размещение элементов навигации у левой границы страницы. 6. В нижней части документа принято публиковать информацию о разработчиках сайта и адрес электронной почты, по которому посетители ресурса могут направить владельцам странички свои отклики, предложения и пожелания. 7. Если Web-страница является стартовым документом, в нижней ее части также размещают счетчик посещений. 3. Основы html и форматирование текста3.1 Структура HTML документаДирективы 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">3.2 Цветовые спецификацииОпределить тот или иной цвет при создании web-страницы можно двумя методами: посредством задания специальных цветовых меток, обозначающий названия цветов словами, или с помощью шестнадцатеричного цифрового кода, заменяющего эти метки. Для вывода цветных изображений на экран монитора применяется так называемая палитра RGB (Red, Green, Blue). Согласно данному стандарту, теоретические основы которого были разработаны ученым-физиком Г. Гельмгольцем, можно получить абсолютно любой желаемый оттенок путем смешивания всего лишь трех красок: красной, зеленой и синей. Для обозначения цвета шестнадцатеричным цифровым кодом перед самим кодом ставится символ <#>, далее следует набор из шести знаков в шестнадцатеричной системе счисления. Таблица.|
Цвет | Символьная метка | Цифровой код | | Белый | White | #FFFFFF | | Черный | Black | #000000 | | Зеленый | Green | #008000 | | Светло-зеленый | Lime | #00FF00 | | Серый | Gray | #808080 | | Светло-серый | Silver | #C0C0C0 | | Желтый | Yellow | #FFFF00 | | Темно-бордовый | Maroon | #800000 | | Синий | Blue | #0000FF | | Темно-синий | Navy | #000080 | | Голубой | Aqua | #00FFFF | | Изумрудный | Teal | #008080 | | Красный | Red | #FF0000 | | Пурпурный | Purple | #800080 | | Розовый | Fuchsia | #FF00FF | | Оливковый | Olive | #808000 | | |
Для передачи цветов в html предпочтительнее пользоваться шестнадцатеричным цифровым кодом. 3.3 Форматирование текстаEscape-последовательности. Иногда возникает необходимость использования в тексте символы, зарезервированные для обозначения элементов кода HTML. Это могут быть угловые скобки, прямые кавычки и т.д.Т. е. необходимо, чтобы символы отображались как текст, интерпретатор же воспринимает их как часть команд разметки гипертекста. Поэтому существуют escape-последовательности, или их еще называют "нотации символьных объектов". Они начинаются символом & и заканчиваются; а между ними размещается сама команда, записываемая в строчном регистре. Таблица.|
Символ | Значение | Именной примитив | Числовой примитив | | < | Левая угловая скобка | < | < | | > | Правая угловая скобка | > | > | | “ | Прямые кавычки | " | " | | & | Амперсант | & | & | | | Неразрывный пробел | |   | | © | Символ копирайта | © | © | | ® | Символ зарегистрированной торговой марки | ® | ® | | = | Знак равенства | ≡ | = | | | Стрелка влево | ← | ← | | | Стрелка вправо | → | → | | | Стрелка вверх | ↑ | ↑ | | | Стрелка вниз | ↓ | ↓ | | |
Пример: На этой страничке изложены мои " мысли вслух " по данному вопросу Перевод строки, пробелы, табуляция. Введенное пользователем с помощью клавиатуры форматирование текста, включающее в себя пробелы, отступы табуляции и переводы строки, игнорируется браузером при интерпретации html-документа. Исключением из этого правила может служить только текст, помеченный специальным тегом <PRE> - командой предварительного форматирования. Формат команды: <PRE> предварительно отформатированный текст </PRE> В этом случае все, что расположено между открывающим и закрывающим тегами <PRE> отобразится в окне броузера с сохранением всех введенных дизайнером пробелов, переводов строк и отступов табуляции. Тег стандартного абзаца. <P align=аргумент> Текст, заключенный в абзац </P> Аргументы ALIGN: right - выравнивание текста по правому краю; left - выравнивание текста по левому краю; center - выравнивание текста по центру; justify - выравнивание текста по ширине.
Страницы: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11
|
