Организация сайта сводится к трем основным задачам.
1. Создание сайта на своем компьютере. Включает в себя подготовку информации, которую будет содержать сайт, и преобразование ее в HTML-формат. В итоге должен получиться полностью законченный сайт, отлаженный и работоспособный.
2. Размещение. Если ваши веб-страницы будут лежать мертвым грузом у вас на компьютере, то их, само собой, никто не увидит. Чтобы информация стала достоянием общественности, ее необходимо поместить на один из постоянно доступных в Интернете серверов.
3. Раскрутка. Ваш доступный населению всей планеты сайт может вообще никто не посетить лишь по одной простой причине – о нем попросту никто не будет знать. Чтобы повысить посещаемость, необходимо его раскрутить.
Рассмотрим подробнее каждый из этих пунктов.
Прежде чем приступить непосредственно к формированию веб-страниц, необходимо подготовить содержимое будущего сайта (текст, изображения и пр.). Ведь согласитесь, было бы глупо создавать сайт ни о чем. Поэтому будем считать, что вся необходимая для наполнения веб-страниц информация уже есть. Осталось отформатировать ее, сделать удобочитаемой, снабдить иллюстрациями и украсить, то есть привести в божеский вид. Все это и многое другое умеет важнейший во Всемирной паутине инструмент – HTML.
Существует множество разнообразных редакторов для создания HTML-страниц. Всех их можно разделить на две основные категории.
– Программы, работающие по методу WYSIWYG (What You See Is What You Get) – что видишь, то и получишь. Они автоматически вставляют все необходимые служебные слова (теги) в исходный файл. С помощью данных программ можно сотворить неплохой сайт, не имея никакого представления о четырех странных буквах – HTML. Создание сайта в данном случае напоминает сборку конструктора – все просто, наглядно и интуитивно понятно.
– Обычные текстовые редакторы (в частности, стандартный Блокнот). В данном случае не обойтись без знания синтаксиса языка HTML. Работа будет рутинной, отдаленно напоминающей программирование.
Какой же дорогой пойдем мы? А вот и неверно! Первый способ пригодится в дальнейшей повседневной жизни, а для обучения и понятия сути структуры веб-страницы как нельзя лучше подойдет именно второй. Ведь не зная арифметики, как ни крути, никогда не станешь настоящим профессором.
Данная книга не претендует на роль справочника или подробного учебника по HTML. Если вы хотите изучить этот язык детально, то для этих целей существуют специальные издания (в магазинах среди других компьютерных книг они выделяются внушительным объемом). В нашем случае целью является знакомство с данным языком, приобретение основных навыков для начала работы с ним и дальнейшего совершенствования. Повторю, что HTML (HyperText Markup Language) – это язык разметки гипертекста. Заметьте, не язык программирования, а язык разметки (то есть программирования, собственно, никакого и нет)! В HTML происходит просто добавление к текстовому файлу тегов – специальных служебных слов, заключенных в угловые скобки (символы < и >). Большинство тегов являются парными и влияют на все то, что заключено между открывающими и закрывающими тегами. Закрывающий тег отличается от открывающего наличием слэша (например, <PRE> и </PRE>). Именно теги позволяют делать с текстом все то, что мы видим на веб-страницах.
Все HTML-документы имеют одну и ту же структуру, основу которой составляют обязательные теги. Откройте Блокнот и введите следующий текст:
<HTML>
<TITLE> Пример простейшего HTML-документа </TITLE>
<B0DY> Добро пожаловать на мою первую веб-страницу </B0DY>
</HTML>
Теперь сохраните введенный текст как файл с расширением НТМ и откройте его с помощью браузера. Вот вы уже и научились создавать простейшую веб-страницу!
Тег <HTML> является признаком того, что данный текстовый файл является HTML-документом. Он сигнализирует браузеру о том, что далее ему необходимо будет обрабатывать другие теги. Любая веб-страница начинается с тега <HTML>, им же и заканчивается.
Ter <TITLE> применяется для задания заголовка документа. Текст, заключенный между данными тегами, будет выводиться в строке заголовка браузера.
Информация, помещенная между тегами <BODY> и </BODY>, является «телом» документа. Она выводится непосредственно в рабочей области браузера.
В общем случае у веб-документа есть также и «голова», ограничивающаяся тегами <HEAD> и </HEAD>. Информация, располагающаяся в этом разделе документа, является служебной и сообщает браузеру дополнительные данные о документе, стиль страницы, взаимосвязь с другими элементами и т. д.
Далее будем работать исключительно с «телом» документа.
Для чего нужно форматирование? Попробуйте скопировать в «тело» документа произвольный текст и посмотрите на результат. Понравилось? Вся информация идет сплошным текстом: без заголовков, переносов, делений на абзацы и т. д. Чтобы сделать документ удобочитаемым и привести содержимое в порядок, следует прибегнуть к форматированию.
Заголовки и подзаголовки. Сначала необходимо определить заголовки. Язык HTML позволяет оперировать шестью разнообразными типами. Первый заголовок – самый главный, самый большой и жирный, а каждый последующий – поменьше и похилее.
Первый заголовок обозначается тегом <Н1>, второй – <Н2> и т. д. Пример заголовка третьего уровня:
<НЗ>Текст заголовка</НЗ>
Выравнивание абзацев. Операции с отдельными абзацами текста производятся с помощью тега <Р>:
<Р>текст абзаца</Р>
Абзацы можно выравнивать по центру страницы:
<Р ALIGN="CENTER">TЕKCT абзаца</Р>
а также по левому:
<Р ALIGN="LEFT">TЕKCT абзаца</Р>
по правому:
<Р ALIGN="RIGHT">TЕKCT абзаца</Р>
или по обоим краям:
<Р ALIGN="JUSTIFY">TЕKCT абзаца</Р>
Размер и стиль шрифта. Размер шрифта можно задавать с помощью тега <FONT>, изменяя его параметр SIZE. Чем больше значение этого параметра, тем больше размер символов текста:
<F0NT SIZE="+6">большой текст</FONT>
<F0NT SIZE="-2">маленький текст</FONT>
Стиль шрифта устанавливается с помощью следующих тегов:
<В>полужирный текст</В>
<I>курсивный текст</I>
<U>подчеркнутый текст</U>
Данные теги можно применять и в совокупности:
<i><u>курсивный и подчеркнутый текст</u></i>
Списки. Списки подразделяются на нумерованные и маркированные. Для создания нумерованного списка используются следующие теги:
<0L>
<LI>Первый элемент
<LI>Второй элемент
</0L>
Для организации маркированного списка применяется такая конструкция:
<UL>
<LI>Первый элемент
<LI>Второй элемент
</UL>
Списки можно вкладывать друг в друга для организации более сложных, вложенных списков:
<0L>
<LI>Первый элемент
<UL>
<LI>Первый элемент второго уровня
<LI>Второй элемент второго уровня
</UL>
<LI>Второй элемент
</0L>
Принудительный перенос. Для продолжения текста с новой строки существует тег <BR>:
…какой-то текст. <ВР>Этот текст уже с новой строки…
Теги <PRE></PRE> позволяют выводить предварительно отформатированный текст, с точностью до пробелов и переносов.
Попробуем объединить все, что мы узнали о форматировании текста.
<HTML>
<TITLE>
Примеры форматирования текста
</TITLE>
<B0DY>
<Н1>Заголовок 1</Н1>
<НЗ>Заголовок 3</Н3>
<Н5>Заголовок 5</Н5>
<Р ALIGN="CENTER><B>
Полужирный текст, выровненный по центру</В></Р>
<Р ALIGN="LEFT"><I>
Курсивный текст, выровненный по левому краю</I></Р>
<Р ALIGN="RIGHT" XU>
Подчеркнутый текст, выровненный по правому краю</u></Р>
<F0NT SIZE="+2">пример вложенного списка</FONT>
<0L>
<И>Элемент списка первого уровня
<UL>
<LI><F0NT SIZE="-1 «>первый элемент списка второго уровня; </F0NT>
<LI><F0NT SIZE="-1 «>второй элемент списка второго уровня. </F0NT>
</UL>
<LI>Элемент списка первого уровня
</0L>
</B0DY>
</HTML>
Теперь посмотрим на результат в браузере (рис. 6.1).
Рис. 6.1. Форматирование текста
Помимо манипуляций с текстом, HTML позволяет изменять цвета элементов вебстраницы. Цвета в HTML обозначаются в шестнадцатеричном виде.
Для справки: если в десятичной системе каждая цифра числа находится в пределах от 0 до 9, то в шестнадцатеричной – от 0 до F (после 9 идет А, затем В, С, D, Е и F), то есть числу 16 соответствует F, a 17—10.
Так, белому цвету в HTML соответствует код FFFFFF, черному – 000000, а между ними находится более 16 млн других цветов.
