Создание собственного сайта
– Создание.
– Размещение.
– Раскрутка.
Чтобы успешно работать в Сети, совсем не обязательно наличие собственного сайта. Вполне можно быть пассивным пользователем Интернета: искать информацию, посещать разнообразные чужие ресурсы, общаться и т. д. Но согласитесь, все же как приятно было бы в этом безграничном океане информации иметь и свой островок! На нем можно разместить все, что угодно: информацию о себе, какой-либо коммерческий проект, описание передовых способов выплавки чугуна или список любимых выражений дедушки по папиной линии. Это ваше представительство во Всемирной сети, и исключительно вам решать, что оно будет содержать. И не стоит думать, что для создания собственного сайта необходимы обширные знания в области высоких технологий. На самом деле все гораздо проще, чем кажется.
Организация сайта сводится к трем основным задачам.
1. Создание сайта на своем компьютере. Включает в себя подготовку информации, которую будет содержать сайт, и преобразование ее в HTML-формат. В итоге должен получиться полностью законченный сайт, отлаженный и работоспособный.
2. Размещение. Если ваши веб-страницы будут лежать мертвым грузом у вас на компьютере, то их, само собой, никто не увидит. Чтобы информация стала достоянием общественности, ее необходимо поместить на один из постоянно доступных в Интернете серверов.
3. Раскрутка. Ваш доступный населению всей планеты сайт может вообще никто не посетить лишь по одной простой причине – о нем попросту никто не будет знать. Чтобы повысить посещаемость, необходимо его раскрутить.
Рассмотрим подробнее каждый из этих пунктов.
Создание
Прежде чем приступить непосредственно к формированию веб-страниц, необходимо подготовить содержимое будущего сайта (текст, изображения и пр.). Ведь согласитесь, было бы глупо создавать сайт ни о чем. Поэтому будем считать, что вся необходимая для наполнения веб-страниц информация уже есть. Осталось отформатировать ее, сделать удобочитаемой, снабдить иллюстрациями и украсить, то есть привести в божеский вид. Все это и многое другое умеет важнейший во Всемирной паутине инструмент – HTML.
Существует множество разнообразных редакторов для создания HTML-страниц. Всех их можно разделить на две основные категории.
– Программы, работающие по методу WYSIWYG (What You See Is What You Get) – что видишь, то и получишь. Они автоматически вставляют все необходимые служебные слова (теги) в исходный файл. С помощью данных программ можно сотворить неплохой сайт, не имея никакого представления о четырех странных буквах – HTML. Создание сайта в данном случае напоминает сборку конструктора – все просто, наглядно и интуитивно понятно.
– Обычные текстовые редакторы (в частности, стандартный Блокнот). В данном случае не обойтись без знания синтаксиса языка HTML. Работа будет рутинной, отдаленно напоминающей программирование.
Какой же дорогой пойдем мы? А вот и неверно! Первый способ пригодится в дальнейшей повседневной жизни, а для обучения и понятия сути структуры веб-страницы как нельзя лучше подойдет именно второй. Ведь не зная арифметики, как ни крути, никогда не станешь настоящим профессором.
HTML
Данная книга не претендует на роль справочника или подробного учебника по HTML. Если вы хотите изучить этот язык детально, то для этих целей существуют специальные издания (в магазинах среди других компьютерных книг они выделяются внушительным объемом). В нашем случае целью является знакомство с данным языком, приобретение основных навыков для начала работы с ним и дальнейшего совершенствования. Повторю, что HTML (HyperText Markup Language) – это язык разметки гипертекста. Заметьте, не язык программирования, а язык разметки (то есть программирования, собственно, никакого и нет)! В HTML происходит просто добавление к текстовому файлу тегов – специальных служебных слов, заключенных в угловые скобки (символы < и >). Большинство тегов являются парными и влияют на все то, что заключено между открывающими и закрывающими тегами. Закрывающий тег отличается от открывающего наличием слэша (например,
и). Именно теги позволяют делать с текстом все то, что мы видим на веб-страницах.
Обязательные теги
Все HTML-документы имеют одну и ту же структуру, основу которой составляют обязательные теги. Откройте Блокнот и введите следующий текст:
Теперь сохраните введенный текст как файл с расширением НТМ и откройте его с помощью браузера. Вот вы уже и научились создавать простейшую веб-страницу!
Тег является признаком того, что данный текстовый файл является HTML-документом. Он сигнализирует браузеру о том, что далее ему необходимо будет обрабатывать другие теги. Любая веб-страница начинается с тега , им же и заканчивается.
Ter
Информация, помещенная между тегами
В общем случае у веб-документа есть также и «голова», ограничивающаяся тегами
и . Информация, располагающаяся в этом разделе документа, является служебной и сообщает браузеру дополнительные данные о документе, стиль страницы, взаимосвязь с другими элементами и т. д.Далее будем работать исключительно с «телом» документа.
Форматирование текста
Для чего нужно форматирование? Попробуйте скопировать в «тело» документа произвольный текст и посмотрите на результат. Понравилось? Вся информация идет сплошным текстом: без заголовков, переносов, делений на абзацы и т. д. Чтобы сделать документ удобочитаемым и привести содержимое в порядок, следует прибегнуть к форматированию.
Заголовки и подзаголовки. Сначала необходимо определить заголовки. Язык HTML позволяет оперировать шестью разнообразными типами. Первый заголовок – самый главный, самый большой и жирный, а каждый последующий – поменьше и похилее.
Первый заголовок обозначается тегом <Н1>, второй – <Н2> и т. д. Пример заголовка третьего уровня:
<НЗ>Текст заголовкаНЗ>
Выравнивание абзацев. Операции с отдельными абзацами текста производятся с помощью тега <Р>:
<Р>текст абзацаР>
Абзацы можно выравнивать по центру страницы:
<Р ALIGN="CENTER">TЕKCT абзацаР>
а также по левому:
<Р ALIGN="LEFT">TЕKCT абзацаР>
по правому:
<Р ALIGN="RIGHT">TЕKCT абзацаР>
или по обоим краям:
<Р ALIGN="JUSTIFY">TЕKCT абзацаР>
Размер и стиль шрифта. Размер шрифта можно задавать с помощью тега , изменяя его параметр SIZE. Чем больше значение этого параметра, тем больше размер символов текста:
Стиль шрифта устанавливается с помощью следующих тегов:
<В>полужирный текстВ>
курсивный текст
подчеркнутый текст
Данные теги можно применять и в совокупности:
курсивный и подчеркнутый текст
Списки. Списки подразделяются на нумерованные и маркированные. Для создания нумерованного списка используются следующие теги:
<0L>
0L>
Для организации маркированного списка применяется такая конструкция:
- Первый элемент
- Второй элемент
Списки можно вкладывать друг в друга для организации более сложных, вложенных списков:
<0L>
- Первый элемент второго уровня
- Второй элемент второго уровня
0L>
Принудительный перенос. Для продолжения текста с новой строки существует тег
:
…какой-то текст. <ВР>Этот текст уже с новой строки…
Теги
позволяют выводить предварительно отформатированный текст, с точностью до пробелов и переносов.Попробуем объединить все, что мы узнали о форматировании текста.
Примеры форматирования текста
<Н1>Заголовок 1Н1>
<НЗ>Заголовок 3Н3>
<Н5>Заголовок 5Н5>
<Р ALIGN="CENTER>
Полужирный текст, выровненный по центруВ>Р>
<Р ALIGN="LEFT">
Курсивный текст, выровненный по левому краюР>
<Р ALIGN="RIGHT" XU>
Подчеркнутый текст, выровненный по правому краюР>
<0L>
<И>Элемент списка первого уровня
второй элемент списка второго уровня.
0L>
Теперь посмотрим на результат в браузере (рис. 6.1).
Рис. 6.1. Форматирование текста
Цвета
Помимо манипуляций с текстом, HTML позволяет изменять цвета элементов вебстраницы. Цвета в HTML обозначаются в шестнадцатеричном виде.
Для справки: если в десятичной системе каждая цифра числа находится в пределах от 0 до 9, то в шестнадцатеричной – от 0 до F (после 9 идет А, затем В, С, D, Е и F), то есть числу 16 соответствует F, a 17—10.
Так, белому цвету в HTML соответствует код FFFFFF, черному – 000000, а между ними находится более 16 млн других цветов.
Цвет фона устанавливается с помощью параметра BGCOLOR в обязательном теге
. По умолчанию фон белый.Чтобы установить, к примеру, оранжевый, необходимо ввести следующее:
Для изменения цвета шрифта во всем документе существует параметр TEXT все в том же теге
.Например, синий шрифт можно получить следующим образом:
Можно применять и оба параметра одновременно:
Если же цвет шрифта устанавливать во всем документе нет необходимости, а нужно, к примеру, выделить только несколько слов, то следует воспользоваться следующей конструкцией:
Ниже приведен список основных цветов. Более полный перечень можно найти в Интернете (или же получить нужный цвет «на ощупь").
– Черный – 000000.
– Белый – FFFFFF.
– Синий – 0000FF.
– Зеленый – 00FF00.
– Желтый – FFFF00.
– Красный – FF0000.
– Оранжевый – FF9900 и FFA500.
– Голубой – 00CCFF.
– Серый – 999999.
– Коричневый – 996633.
Изображения
Чтобы вставить в документ изображение, необходимо воспользоваться тегом . Данный тег имеет множество параметров, главным из которых является SRC, задающий имя файла с изображением. Если картинка находится в той же папке, что и HTML-файл, то достаточно просто указать ее название:
Если изображение расположено во вложенной папке, то ссылка на него будет примерно такой:
Аналогично можно указывать расположение изображения в Интернете:
Немаловажными являются параметры WIDTH и HEIGHT – соответственно, ширина и высота изображения в пикселах. Если эти параметры не заданы, то будут использоваться реальные размеры изображения.
Картинка, вставляемая в документ описанным выше способом, просто «встраивается» в текст, занимая одну из его строк наравне с остальными словами. Зачастую это выглядит довольно некрасиво. Ситуацию можно исправить, используя параметр ALIGN тега .
– Обтекание текстом справа:
– Обтекание текстом слева (рис. 6.2):
Рис. 6.2. Размещение рисунков.
Помимо всего прочего, картинку можно использовать для задания фонового изображения. Для этого существует параметр BACKGROUND тега
:Выбранное изображение будет находиться на заднем плане, а все остальные элементы – располагаться поверх него.
Если размеры картинки меньше размеров окна, то она будет размножена таким образом, чтобы занять все имеющееся пространство.
Ссылки
Ссылка является основным инструментом для перехода от одной веб-страницы к другой. Она задается тегом <А> с параметром HREF, указывающим на файл, который будет открыт при щелчке на данной ссылке.
Типичными являются следующие конструкции:
<А HREF="chap1.htm">Teкст ссылкиА>
<А HREF="content/chap1.htm">Teкст ссылкиА>
<А HREF="
В документе текст ссылки выделяется отличным от остального текста цветом и подчеркивается. Как правило, он объясняет содержимое той веб-страницы, на которую вы перейдете, щелкнув на ссылке.
Иногда нужно, чтобы при щелчке на ссылке веб-страница открывалась в новом окне. В данном случае фрагмент документа будет выглядеть следующим образом:
<А TARGET="_BLANK» HREF="chap1.htm">Tекст ссылкиА>
При работе с большими документами очень полезными бывают ссылки на другие места того же файла. Для этого, помимо самой ссылки, понадобится метка (якорь), указывающая место, в которое нужно перейти. Для создания якоря используется параметр NAME тега <А>. Значение параметра на экране не отображается и может быть любым:
<А NAME="Iabel1">ТекстА>
Ссылка на данный якорь будет следующей:
<А HREF="#Iabel1">Текст ссылкиА>
При щелчке на этой ссылке экран будет сфокусирован на тексте, заданном в якоре.
В качестве ссылки может использоваться не только строка текста, но и изображение. Принцип построения и работы ссылки такой же, только между тегами располагается не текст, а изображение:
<А HREF="chap1.htm">
Таблицы
При построении сайтов таблицы используются очень часто, причем применяются они, как правило, не для создания таблиц как таковых, а для удобного и красивого размещения содержимого веб-страниц.
Для организации таблицы существует тег
– столбец. Создадим таблицу 2x4. Для этого сначала необходимо организовать две строки: Затем нужно в каждой строке задать по четыре столбца: Создать рамку для таблицы можно с помощью параметра BORDER, значение которого соответствует ширине рамки. Параметр BORDERCOLOR определяет ее цвет:
|