Учебник Macromedia Dreamweaver (стр. 1 из 135)
ЧАСТЬ I. КАК СДЕЛАТЬ ПРОСТЕЙШИЙ WEB-САЙТ
o Глава 1. Как создаются Web-страницы
- Что такое Интернет
- Как создаются Web-страницы
- Гиперссылки
- Клиенты и серверы Интернета
- Зачем нужны HTML-редакторы
- Что дальше?
Как сделать простейший Web-сайт
· Глава 1. Как создаются Web-страницы
· Глава 2. Основные принципы работы с Dreamweaver
· Глава 3. Начинаем с текста
· Глава 4. Рисунки, звуки, фильмы
· Глава 5. Таблицы
· Глава 6. Работа с Web-сайтом
Как создаются Web-страницы
Так как же делаются те красивые Web-странички, которые выводит нам Web-обозреватель? И откуда они берутся? А вот я слышал в автобусе слово "WWW" и не знаю, что это такое... И вообще, что такое Интернет и почему мы его не видим, как, например, монитор или сообщения об ошибках Windows?
Все-все! Сейчас попытаемся ответить на эти вопросы. И начнем с самого последнего.
В самом деле, что такое Интернет? Электронный океан, таинственная стихия, заключенная в кремниевых кристаллах и медных проводах современных компьютеров. Несуществующая вселенная, иной раз кажущаяся более реальной, чем наш материальный, "настоящий" мир. То, что вторгается в каждый дом, опутывает всю планету и сознание всех людей тугой медно-кремниевой паутиной; нечто запредельное, непостижимое людскому разуму, никому не видимое, но всеми ощущаемое...
Но довольно! Вы слишком много читаете фантастики (или газет типа "Церковного вестника"). На самом деле, все намного проще. Возможно, вы даже немного разочаруетесь, узнав, что такое Интернет. Но правда должна быть сказана, чего бы это ни стоило. Ради этого и написана данная книга.
Итак, что такое Интернет и как он работает?
Вот объяснение для зануд и педантов. Интернет — это совокупность компьютерных сетей, связанных друг с другом и работающих по единым стандартам. Говоря простыми словами, это множество локальных сетей, плюс пользователи, подключающиеся к ним по модемам, плюс соединяющие эти сети высокоскоростные каналы связи, плюс еще пара миллионов тонн всяких железяк, пара триллионов строк программного кода и пара-тройка тысяч стандартов, призванных навести в этом барахле подобие порядка.
Собственно, грубое описание Интернета дано. Конечно, на самом деле все неизмеримо сложнее, но для нас сейчас достаточно этого краткого описания. Если же вы хотите знать больше, читайте специальные книги. А пока что заканчиваем этот раздел, самый краткий в настоящей книге, и переходим к следующему...
А теперь поговорим о том, как создаются Web-страницы.
Для этого используется особый язык HTML (HyperText Markup Language -язык гипертекстовой разметки). Этот язык определяет набор специальных команд, называемых тегами и используемых для задания форматирования или назначения тех или иных элементов Web-страницы. Особые теги используются для размещения на Web-страницах графических изображений, аудио- и видеоклипов и прочих так называемых внедренных объектов.
Кажется, я вас напугал. Но, несмотря на кажущуюся сложность, Web-страницы не представляют собой ничего сложного. Это обычные текстовые файлы, созданные в стандартном Блокноте или аналогичном простейшем текстовом редакторе. И содержат они текст, тот самый текст, который вы хотите поместить на страницы, только размеченный особым образом...
Да что тут говорить! Лучше все показать на примере. Взгляните на рис. 1.1. Это простейшая Web-страничка, сделанная для примера в Блокноте.
Чтобы увидеть эту страничку воочию, откройте Блокнот, наберите приведенный ниже код, проверьте его на ошибки и сохраните в файле с именем 1.1.htm. Только когда будете вводить имя файла в стандартном окне сохранения, заключите его в кавычки, иначе Блокнот добавит расширение txt, и ваш файл получит имя 1.1.htm.txt. После этого откройте полученный файл в Web-обозревателе, для чего достаточно дважды щелкнуть по нему мышью.
Теперь давайте рассмотрим сам HTML-код нашей первой странички.
<HTML> <HEAD>
<ТIТLЕ>WEB-страница</ТITLЕ> </HEAD> <BODY>
<Н1>Пример WEB-страницы</Н1>
<Р>Это простейшая Web-страничка, созданная в стандартном
<I>Блокноте</I>
и отображенная в <I>Microsoft Internet Explorer</I>.</P> </BODY> </HTML>
Выглядит устрашающе... Однако хорошо заметен текст, который виден в окне Web-обозревателя на рис. 1.1. Давайте рассмотрим его подробнее.
<Н1>Пример WEB-страницы</Н1>
<Р>Это простейшая Web-страничка, созданная в стандартном <I>Блокноте</I>
иотображеннаяв
<I>Microsoft Internet Explorer</I>.</P>
Вы видите какие-то слова, заключенные в угловые скобки < и >. Это и есть теги HTML. Они задают форматирование текста. Скажем, строка <I>Блокноте</I> будет выведена курсивом, т. к. теги <i> и </i> задают курсивное начертание текста. Причем, тег <i> помечает начало курсивного фрагмента (открывающий тег), а тег </i> — конец (закрывающий тег). А собственно фрагмент, заключенный между открывающим и закрывающим тегами, называется содержимым тега.
Рис. 1.1. Простейшая Web-страничка
Это были теги физического форматирования текста, т. е. просто задающие, как текст должен выглядеть в окне Web-обозревателя. Теперь рассмотрим теги логического форматирования, которые позволяют разбить текст на отдельные логические блоки. В нашем небольшом фрагменте это теги <р> и <Н1> (и соответствующие им закрывающие теги </р> и </HI>). Они задают соответственно обычный текстовый параграф и заголовок первого уровня;
при этом Web-обозреватель будет знать, что <H1>пример WEB-страницы</H1> — это заголовок, и отобразит его соответствующим образом. Как и в предыдущем случае, открывающий тег помечает начало логического блока текста, а закрывающий — конец.
Здесь мы говорили о так называемых парных тегах, когда открывающему тегу соответствует закрывающий. HTML определяет также набор одинарных тегов. Один из них — это тег вставки графического изображения <IMG>.
<IMG SRC="picture.gif">
Здесь мы видим, что само графическое изображение хранится в отдельном файле picture.gif. То есть, изображение — это один из внедренных элементов Web-страницы. Тег <IMG> содержит в себе параметр SRC, задающий имя файла изображения. (Такие параметры называются атрибутами тега.) Web-обозреватель, встретив в HTML-коде страницы тег <IMG>, загружает файл, чье имя задано атрибутом SRC, и отображает его.
Осталось рассмотреть совсем немного тегов, используемых для служебных целей и не отображаемых Web-обозревателем. Они так и называются — невидимые теги.
Парный тег <BODY>. . .</BODY> используется для выделения тела Web-страницы, т. е. той ее части, которая будет отображаться в окне Web-обозревателя. Кроме тела, Web-страница также должна содержать задаваемый парным тегом <HEAD>. . .</HEAD> заголовок, где помещается служебная информация. (Этот заголовок не выводится Web-обозревателем, а используется для внутренних нужд. Не путайте заголовок Web-страницы и обычный текстовый заголовок, задаваемый тегом <H1>!) Среди этой служебной информации может быть название страницы, показываемое в заголовке окна Web-обозревателя; оно задается парным тегом <TITLE>. . .</TITLE>.
Давайте рассмотрим заголовок нашей страницы.
<HEAD>
<TITLE>Web</TITLE> </HEAD>
Собственно, заголовок содержит только название нашей страницы, помеченное тегом <TITLE>. . .</TITLE>. Но в подавляющем большинстве случаев заголовок содержит множество других данных, необходимых как Web-обозревателю, так и другим программам, обеспечивающим функционирование Интернета и WWW. Мы пока не будем их рассматривать.
Взгляните еще раз на HTML-код нашей страницы. Заметьте, что одни теги вложены в другие. Так, тег <i> вложен в тег <р>, тег <Р> — в тег <BODY>, а тег <BODY> - в тег <HTML>. Такая вложенность или иерархия тегов в HTML встречается на каждом шагу. Давайте представим ее в виде схемы.
<HTML>
<HEAD>
<TITLE>
<BODY>
Здесь мы убрали мешающие нам закрывающие теги и их содержимое. Величина отступа показывает уровень вложенности того или иного тега. Так, тег <BODY> имеет первый уровень вложенности, а тег <H1> — второй. Теги предыдущих уровней вложенности называются родительскими тегами или родителями, а теги последующих уровней — дочерними тегами или потомками. Например, для тега <HEAD> родительским тегом будет <HTML>, а дочерним -<TITLE>. Для тега <BODY> родителем будет тег <HTML>, а потомками — теги
<Н1>, <Р> и <I>.
Весь HTML-код Web-страницы вложен внутрь парного тега <HTML>. . .</HTML>. Этот тег находится на самом высшем, нулевом, уровне вложенности и не имеет родителя.
Я здорово перегрузил вас информацией, и вам может показаться, что HTML — это что-то запредельно сложное. На самом деле, все это очень просто, и вы можете легко создавать простейшие Web-странички вручную. И в подтверждение этого давайте немного изменим код нашей страницы. Например, выделим название фирмы Microsoft жирным шрифтом. Тег, задающий "жирность", — <B>. . .</B>.
Далее приведем измененный фрагмент HTML-кода.
<Р>Это простейшая Web-страничка, созданная в стандартном
<I>Блокноте</I>
и отображенная в
<I><B>Microsoft</B> Internet Explorer</I>.</P>
Заметьте, как мы вложили один тег в другой (эти теги выделены). Теперь слово "Microsoft" будет набрано и жирным шрифтом, и курсивно. Только обратите внимание на порядок вложенности тегов и не нарушайте его. Если же вы случайно допустите ошибку и поместите теги так:
<Р>Это простейшая Web-страничка, созданная в стандартном <I>Блокноте</I> и отображенная в <B><I>Microsoft</B> Internet Explorer</I>.</P>
то Web-обозреватель может и не отобразить ваше творение (хотя Internet Explorer славится своим умением исправлять мелкие ошибки Web-дизайнера). Запомните простое правило: закрывающие теги должны повторяться в порядке, обратном порядку соответствующих им открывающих тегов.