Структура веб-страниц
В основном веб-страницы создаются с помощью языка гипертекстовой разметки (HTML— Hyper Text Markup language). HTML— это простой язык программирования, основная задача которого заключается в форматировании страницы при отображении в веб-браузере, например в Microsoft Internet Explorer. В данной главе представлен минимум информации, который необходимо знать для создания веб-страниц и их объединения в работающий сайт.
HTML состоит из элементов. Например, абзац текста или изображение это элементы. Элементы, в свою очередь, состоят из тегов, атрибутов и содержимого (последнее не всегда обязательно). Ниже приведена более подробная информация по каждому виду элементов.
1.Теги. Это простые дескрипторы, которые указывают веб-браузеру на расположение элементов на странице и их форматирование.
Открывающий тег. Начало каждого элемента в HTML обозначается открывающим тегом: имя элемента указывается в угловых скобках. Например, открывающий тег абзаца — это <р>, а открывающий тег изображения — <IMG>.
Закрывающий тег. Конец элемента в HTML обозначается закрывающим тегом. Он точно такой же, как открывающий, только перед именем элемента ставится обратная косая черта. Следовательно, </р> — закрывающий тег абзаца. У некоторых элементов, например у IMG. закрывающих тегов нет
2.Атрибуты. С помощью атрибутов определяют параметры элементов. Добавляя соответствующие атрибуты к тегу, задают высоту и ширину изображений, как, например, в следующем фрагменте программного кода
<IMG width="100" height="30">
3.Содержимое. Содержимое располагается между закрывающим и открывающим тегами, как. например, в следующем фрагменте программного кода:
<Р>Здесь расположено содержимое этого абзаца.</Р>
Работа с текстом
Текст — основной способ передачи информации в Интернете. Очень редко встречаются веб-страницы без текста.
Приведенные в следующих разделах примеры программного кода показывают, как создавать различные элементы, о которых пойдет речь.
Абзацы — это элементы, используемые на веб-странице для размещения текста. Текст располагают между тегами <Р> и </Р>, как в следующем фрагменте программного кода. <Р>Здесь расположено текстовое содержимое.</Р>
Наличие закрывающего тега </Р> в программном коде совершенно не обязательно. Просто большинство программ для создания веб-страниц добавляют его в код автоматически.
Интервал между абзацами создается веб-браузером тоже автоматически. Для принудительного перевода строки используется элемент BR, как в следующем фрагменте программного кода.
<Р>Это первый абзац.</Р>
<BR>
<Р>Обратите внимание на отступ перед вторым абзацем.</Р>
Чтобы сделать интервал между абзацами, используется пустое значение (без какого-либо содержимого между открывающим и закрывающим тегами) элемента Р. К сожалению, такой прием работает не для всех веб-браузеров. Стандарт по HTML не регламентирует применение пустых значений элемента Р. Поэтому тс браузеры, которые строго придерживаются стандарта, просто игнорируют такой оператор, и пустая строка не добавляется.
Для стандартного решения проблемы в Р- элемент помещают невидимое содержимое. Так как браузеры проигнорируют и обычный пробел, нужно ввести специальный код (так называемый неразрывный пробел) между открывающим и закрывающим тегами <Р>. как в следующем фрагменте программного кода.
Создание ссылки, работа с изображением
В Интернете ссылки играют очень важную роль, так как они связывают разные веб-страницы. Без них существование Интернета немыслимо. Ссылки создаются с помощью элемента А (от англ. "anchor" — указатель). Атрибут href (от англ. "hypertext reference" — гипертекстовая ссылка) данного элеме!гга определяет веб-адрес файла, на который разработчик создает ссылку. Этот адрес называется VRL (сокращение от англ. "uniform resource locator") — универсальный указатель ресурса. Так выглядит ссылка в HTML.
<А href="http://www.dialektika.com/щ>содержимое</А>
При щелчке мышью по содержимому (это может быть и надпись, и графика) браузер загружает документ, адрес которого присвоен атрибуту href. Если ссылка текстовая, по умолчанию она отображается шрифтом синего цвета с подчеркиванием, а если графическая — вокруг изображения создается голубая рамка.
Если на веб-странице будет только текст, большинство пользователей сочтут этот сайт скучным. Довольно редко встречаются сайты без изображений. При размещении изображений в Интернете обычно используются три формата файлов: GIF, /PEG (также называемый JPG) и PNG.
Где брать изображения? Их можно создавать с "чистого листа", а можно загрузить уже готовые файлы на одном из сайтов. При использовании чу-жих изображений, а так делает большинство дизайнеров, необходимо сначала ознакомиться с особыми условиями договора, предложенного на сайте. Возможен и другой вариант, когда изображения защищены авторским правом. Тогда их нельзя использовать просто так, без разрешения. К счастью, большинство собственников изображений в Интернете с удовольствием дадут такое разрешение, попросив взамен лишь создать ссылку обратно на свои адрес. Такое соглашение обеспечивает рост популярности сайта, с которого разработчик заимствует изображение, а разработчику, в свою очередь, оно даст бесплатный высококачественный материал для создания интересного сайта с графикой. Все остаются довольны.
Наиболее распространенные элементы на веб-страницах, кроме теста, — изображения. Для их вставки на страницу используется тег <IMG>. Его обязательный атрибут— src. Он указывает имя графического файла, а при необходимости и путь к нему (если этот файл расположен не в той же папке, что и HTML-файл).
Работа с WSIWYG-средствами
Программы WYSIWYG (от англ. "What you see is what you gel" — что видите, то и получаете) ХОрОШИ для новичков на ранних этапах разработки веб-страниц, однако они имеют свойство быстро надоедать по причине избыточного количества методов и свойсгв различных элементов. На первый взгляд это может показаться очень даже неплохо, но проходит время, и это начинает раздражать. Прежде чем воспользоваться WYSIWYG-средствами, разработчик должен убедиться, что они ему подходят и помогут шлифовать мастерство.
За внешней простотой WYSrWYG-средств обычно скрыты достаточно мощные функциональные возможности. Программа Dreamweaver (тема данной главы) позволяет установить подходящие атрибуты для каждого элемента интерфейса, если разработчика не устраивают значения по умолчанию. В Dreamweaver веб-мастер может наслаждаться одновременно как быстрой визуальной разработкой, так и редактированием HTML-кода.
Ее используют многие профессиональные веб-дизайнеры, однако это не единственный вариант.
В предыдущих статьях раскрыты базовые понятия по организации и функционированию веб-страниц. После изучения этого материала можно приступать к их созданию с помощью замечательного продукта Adobe Dreamweaver. He так давно он назывался Macromedia Dreamweaver, но в компьютерном мире все очень быстро меняется.
Не стоит переживать о предстоящих трудностях. В данной главе вы просто попробуете работать с поистине чудесной программой, ощутите всю ее прелесть, узнаете о новых возможностях. (Кстати, и мне Dreamweaver нравится больше всех остальных программ.) О дизайне веб-сайтов будет рассказано в других статьях. А в следующих разделах читатель научится задавать свойства страницы, работать с текстом и ссылками. По мере знакомства с программой полезно поэкспериментировать с цветами и другими значениями атрибутов.
Обьединение CSS и HTML
Существует три способа добавления каскадных таблиц стилей на веб-страницу.
1. Внутренние стили. В данном случае эффект получается ограниченным. Стиль применяется только к тому тегу, в котором он определен, и совершенно не влияет на остальные элементы веб-страницы. Внутренние стили — самый простой вариант реализации CSS, однако они не обеспечивают достаточной гибкости. В этом случае для определения стиля используется атрибут style. Внутренний стиль, устанавливающий цвет расположенного только в пределах элемента HI текста, будет выглядеть следующим образом:
<Н1 style="color: Ыие">Это основной заголовок синего цвета.</Н1>
2.Объявление стиля с помощью тега < STYLE >. В данном случае форматирование применяется для всей веб-сграницы. Однако польза от такого способа форматирования нивелируется при наличии огромного сайта со множеством веб-страниц. Контейнерный тег <STYLE> размещается в HTML-документе внутри тега <HEAD>. Объявление стиля будет выглядеть примерно так:
<HEAD>
<STYLE>
HI
{color:blue}
</STYLE>
</HEAD>
Теперь, если текст на веб-странице поместить внутри тега <Н1>, этот текст будет отформатирован синим цветом.