- Текст добавлен: 10 октября 2016, 03:44
сообщить о нарушении
Текущая страница: 8 (всего у книги 19 страниц) [доступный отрывок для чтения: 8 страниц]
Глава 6
Создание собственного сайта
– Создание.
– Размещение.
– Раскрутка.
Чтобы успешно работать в Сети, совсем не обязательно наличие собственного сайта. Вполне можно быть пассивным пользователем Интернета: искать информацию, посещать разнообразные чужие ресурсы, общаться и т. д. Но согласитесь, все же как приятно было бы в этом безграничном океане информации иметь и свой островок! На нем можно разместить все, что угодно: информацию о себе, какой-либо коммерческий проект, описание передовых способов выплавки чугуна или список любимых выражений дедушки по папиной линии. Это ваше представительство во Всемирной сети, и исключительно вам решать, что оно будет содержать. И не стоит думать, что для создания собственного сайта необходимы обширные знания в области высоких технологий. На самом деле все гораздо проще, чем кажется.
Организация сайта сводится к трем основным задачам.
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-документа
Добро пожаловать на мою первую веб-страницу
Теперь сохраните введенный текст как файл с расширением НТМ и откройте его с помощью браузера. Вот вы уже и научились создавать простейшую веб-страницу!
Тег является признаком того, что данный текстовый файл является HTML-документом. Он сигнализирует браузеру о том, что далее ему необходимо будет обрабатывать другие теги. Любая веб-страница начинается с тега , им же и заканчивается.
Ter
применяется для задания заголовка документа. Текст, заключенный между данными тегами, будет выводиться в строке заголовка браузера.</p>
<p>Информация, помещенная между тегами <BODY> и </BODY>, является «телом» документа. Она выводится непосредственно в рабочей области браузера.</p>
<p>В общем случае у веб-документа есть также и «голова», ограничивающаяся тегами <HEAD> и </HEAD>. Информация, располагающаяся в этом разделе документа, является служебной и сообщает браузеру дополнительные данные о документе, стиль страницы, взаимосвязь с другими элементами и т. д.</p>
<p>Далее будем работать исключительно с «телом» документа.</p>
<b>Форматирование текста</b><p>Для чего нужно форматирование? Попробуйте скопировать в «тело» документа произвольный текст и посмотрите на результат. Понравилось? Вся информация идет сплошным текстом: без заголовков, переносов, делений на абзацы и т. д. Чтобы сделать документ удобочитаемым и привести содержимое в порядок, следует прибегнуть к форматированию.</p>
<p><b>Заголовки и подзаголовки. </b>Сначала необходимо определить заголовки. Язык HTML позволяет оперировать шестью разнообразными типами. Первый заголовок – самый главный, самый большой и жирный, а каждый последующий – поменьше и похилее.</p>
<p>Первый заголовок обозначается тегом <Н1>, второй – <Н2> и т. д. Пример заголовка третьего уровня:</p>
<blockquote><div><p><НЗ>Текст заголовка</НЗ></p>
</div></blockquote><p><b>Выравнивание абзацев</b>. Операции с отдельными абзацами текста производятся с помощью тега <Р>:</p>
<blockquote><div><p><Р>текст абзаца</Р></p>
</div></blockquote><p>Абзацы можно выравнивать по центру страницы:</p>
<blockquote><div><p><Р ALIGN="CENTER">TЕKCT абзаца</Р></p>
</div></blockquote><p>а также по левому:</p>
<blockquote><div><p><Р ALIGN="LEFT">TЕKCT абзаца</Р></p>
</div></blockquote><p>по правому:</p>
<blockquote><div><p><Р ALIGN="RIGHT">TЕKCT абзаца</Р></p>
</div></blockquote><p>или по обоим краям:</p>
<blockquote><div><p><Р ALIGN="JUSTIFY">TЕKCT абзаца</Р></p>
</div></blockquote><p><b>Размер и стиль шрифта.</b> Размер шрифта можно задавать с помощью тега <FONT>, изменяя его параметр SIZE. Чем больше значение этого параметра, тем больше размер символов текста:</p>
<blockquote><div><p><F0NT SIZE="+6">большой текст</FONT></p>
<p><F0NT SIZE="-2">маленький текст</FONT></p>
</div></blockquote><p>Стиль шрифта устанавливается с помощью следующих тегов:</p>
<blockquote><div><p><В>полужирный текст</В></p>
<p><I>курсивный текст</I></p>
<p><U>подчеркнутый текст</U></p>
</div></blockquote><p>Данные теги можно применять и в совокупности:</p>
<blockquote><div><p><i><u>курсивный и подчеркнутый текст</u></i></p>
</div></blockquote><p><b>Списки.</b> Списки подразделяются на нумерованные и маркированные. Для создания нумерованного списка используются следующие теги:</p>
<blockquote><div><p><0L></p>
<p><LI>Первый элемент</p>
<p><LI>Второй элемент</p>
<p></0L></p>
<p>Для организации маркированного списка применяется такая конструкция:</p>
</div></blockquote><blockquote><div><p><UL></p>
<p><LI>Первый элемент</p>
<p><LI>Второй элемент</p>
<p></UL></p>
</div></blockquote><p>Списки можно вкладывать друг в друга для организации более сложных, вложенных списков:</p>
<blockquote><div><p><0L></p>
<p><LI>Первый элемент</p>
<p><UL></p>
<p><LI>Первый элемент второго уровня</p>
<p><LI>Второй элемент второго уровня</p>
<p></UL></p>
<p><LI>Второй элемент</p>
<p></0L></p>
</div></blockquote><p><b>Принудительный перенос.</b> Для продолжения текста с новой строки существует тег <BR>:</p>
<blockquote><div><p>…какой-то текст. <ВР>Этот текст уже с новой строки…</p>
</div></blockquote><p>Теги <PRE></PRE> позволяют выводить предварительно отформатированный текст, с точностью до пробелов и переносов.</p>
<p>Попробуем объединить все, что мы узнали о форматировании текста.</p>
<blockquote><div><p><HTML></p>
<p><TITLE></p>
<p>Примеры форматирования текста</p>
<p>
<Н1>Заголовок 1
<НЗ>Заголовок 3
<Н5>Заголовок 5
<Р ALIGN="CENTER>
Полужирный текст, выровненный по центру
<Р ALIGN="LEFT">
Курсивный текст, выровненный по левому краю
<Р ALIGN="RIGHT" XU>
Подчеркнутый текст, выровненный по правому краю
пример вложенного списка
<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 тега <А>. Значение параметра на экране не отображается и может быть любым:
Ссылка на данный якорь будет следующей:
<А HREF="#Iabel1">Текст ссылки
При щелчке на этой ссылке экран будет сфокусирован на тексте, заданном в якоре.
В качестве ссылки может использоваться не только строка текста, но и изображение. Принцип построения и работы ссылки такой же, только между тегами располагается не текст, а изображение:
<А HREF="chap1.htm"> 
ТаблицыПри построении сайтов таблицы используются очень часто, причем применяются они, как правило, не для создания таблиц как таковых, а для удобного и красивого размещения содержимого веб-страниц.
Для организации таблицы существует тег
. Кроме того, необходимы такие теги, как – строка таблицы и | – столбец.
Создадим таблицу 2x4. Для этого сначала необходимо организовать две строки:
Затем нужно в каждой строке задать по четыре столбца:
<Т0>Текст ячейки
<ТО>Текст ячейки
<ТО>Текст ячейки
<ТО>Текст ячейки
<ТО>Текст ячейки
<ТО>Текст ячейки
<ТО>Текст ячейки
<ТО>Текст ячейки
Создать рамку для таблицы можно с помощью параметра BORDER, значение которого соответствует ширине рамки. Параметр BORDERCOLOR определяет ее цвет:
Чтобы изменить цвет фона во всей таблице или в отдельно взятой ячейке, можно использовать уже известный нам параметр BGCOLOR применительно, соответственно, к тегу или к тегу | .
Теперь поговорим о размерах. Размеры определяются с помощью параметров WIDTH и HEIGHT (ширина и высота) и могут задаваться как для всей таблицы, так и для каждой отдельной ячейки. Если, к примеру, используется конструкция:
,
то это значит, что таблица имеет ширину 700 и высоту 400 пикселов. Все ячейки поделят выделенное пространство поровну. Можно задавать размеры каждой отдельной ячейки, используя все те же параметры. В этом случае ширина и высота могут задаваться не только в пикселах, но и в процентах от габаритов таблицы:
| Tекст ячейки
Здесь указанный столбец будет занимать половину всей ширины таблицы.
Теперь давайте разберемся с содержимым ячеек. При горизонтальном выравнивании текста в ячейках используются те же инструменты, что и при форматировании обычного текста. Кроме того, можно выравнивать содержимое по вертикали. Для этих целей применяется параметр VALIGN тега | .
– По центру:
| Текст ячейки
– По верхнему краю:
| Текст ячейки
– По нижнему краю:
| Текст ячейки
Следует отметить, что содержимым ячеек может быть не только текст, но и изображения, и даже другие таблицы. Благодаря вложенным таблицам на веб-странице можно организовать сколь угодно сложную структуру данных (рис. 6.3).
Рис. 6.3. Пример страницы, построенной с помощью таблиц
ФреймыФреймы позволяют разделить веб-страницу на несколько независимых окон и в каждом из них разместить отдельную веб-страницу. Спор о том, нужно это или нет, продолжается. Я скажу одно: при умелом использовании фреймов можно создать страницу-шедевр, а в противном случае – трудно усваиваемый документ-гибрид.
Для создания фреймов необходим специальный HTML-документ с несколько необычной структурой:
От обычного такой HTML-документ отличается тем, что вместо тега присутствует тег |
|
|
|
|
|
