Мой первый веб-сайт

Страница 1 из 1
1

Мой первый веб-сайт (Подробно и в картинках рассмотрим, как сделать веб-сайт.)

Мой первый веб-сайт

admin

Дата: Четверг, 2010-12-23, 01:47:30 | Сообщение # 1

Хакер

Администраторы

Сообщений: 151

Репутация: 0

Не на форуме

Что такое сайт?

Под сайтом понимают некоторый адрес (доменное имя, например, http://cybernova.net/ ) в интернете, объединяющих одну и более веб-страниц (например, страница этой статьи — одна из множества веб-страниц на нашем сайте). Обычно каждая страница имеет свой определённый адрес (URL). В частности, адрес этой страницы — http://cybernova.net/forum/52-118-1 — это и есть URL. Подробнее о том, что такое сайт, можно прочесть вот здесь. При создании страницы используют специальный язык — HTML — язык разметки документа. Он определяет форматирование текста. Без него текст отображался бы просто, как обычный текст — набор символов. Поэтому, самое первое, что надо сделать перед началом своей карьеры славного веб-разработчика — это познать все истины HTML. С этой целью рассмотрим детали данного языка.

Лучшая программа для создания веб-страниц — это блокнот Windows. Да-да, никакого специального софта для программирования, типа компилятора Pascal/Delphi, нам не понадобится. Всё уже есть в родной и кому-то уже поднадоевшей Microsoft Windows. Файлы веб-страниц необходимо сохранять с расширением .htm или .html. Это необходимо для того, что бы сервер, на который в дальнейшем загрузятся эти файлы, обрабатывал их как файлы со специальным форматированием HTML. Если эти файлы сохранить под другим расширением, например .txt, то, открыв один из них через браузер, мы увидим свой текст, безо всякого форматирования, в таком виде, в каком мы его видели в окне блокнота Windows. Что бы сохранить в блокноте файл с расширением htm или html, необходимо в выпадающем меню Файл, выбрать пункт Сохранить как..., в открывшемся окне напротив Тип файла: выбрать пункт Все файлы и ввести имя файла с расширением. Помимо требований к расширению файла есть одно требование и к имени файла: файл страницы, которая будет является главной страницей сайта, должен иметь имя index (т.е., если полностью, index.html или index.htm) и загружать его надо в корень сайта (т.е. в самой первой папке вашего хостинга, обычно она носит имя www или public_html). Всё это, конечно, не про uCoz. Если вы уже являетесь пользователем системы uCoz, то вам не нужно ломать голову расширениями и именами файлов. С uCoz вам будет достаточно просто изменять HTML-код в админке своего сайта в нужном шаблоне и всё. Всё остальное на себя берёт система.
На этом заканчиваем с введением в сайтостроение и переходим к главному блюду.

HTML — это теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными метками — тегами. Элементы могут быть пустыми, т.е. не содержащими никакого текста и других данных. В этом случае обычно не указывается закрывающий тег (зависит от версии доктайпа, про них читайте ниже). Кроме того, элементы могут иметь атрибуты, определяющие их свойства. Атрибуты указываются в открывающем теге.
Пример одного из элементов:

Code

<b>мой первый текст</b>

В браузере этот текст будет выделен жирным шрифтом:

Quote

мой первый текст

Пример одного из пустых элементов:

Code

<hr>

Этот тег в браузере рисует горизонтальную линию на всю ширину страницы.

Пример элемента с атрибутом:

Code

<a href="http://cybernova.net/">ссылка на наш сайт</a>

Здесь href — это и есть атрибут, его значение указывается после знака равенства в кавычках (необязательно двойных, можно и одинарных). В браузере этот элемент будет выглядеть как ссылка на сайт cybernova.net:

Quote

ссылка на наш сайт

Как видим, закрывающий тег отличается от открывающего только наклонной чертой / после символа <. А так же тем, что в нём не пишут атрибуты — это делают только в открывающем теге.
Общая схема элемента выглядит так:

Code

<имя_тега имя_атрибута="значение_атрибута">текст, который будет подвержен действию тега</имя_тега>

А схема пустого текста, который не действует на текст, а рисует линию, или вставляет картинку, выглядит так:

Code

<имя_тега имя_атрибута="значение_атрибута">

Имя у тега может быть только одно. А атрибутов — несколько (разделены они могут быть пробелами, но разделять их так не обязательно — кавычка после значения атрибута явно даёт понять, что описание текущего атрибута однозначно закончено; главное, конечно, что бы имя тега и имя атрибута были разделены пробелом).

Если в значении атрибута надо вписать двойную кавычку, то, что бы она не вызвала каких-либо неопределённостей, необходимо использовать её мнемонику. Мнемоника — это конструкция SGML, которая ссылается на символ из набора символов документа. В HTML предопределено большое количество спецсимволов. Чтобы вставить определенный символ в разметку, нужно вставить определенную ссылку-мнемонику в HTML структуру.
Например, такая мнемоника:

Code

"[/code]

в браузере будет выглядеть так:

[quote]"[/quote]

т.е. как кавычка, но не как символ завершения описания значения атрибута. Подробнее об этом вы можете прочесть в <a href="http://ru.wikipedia.org/wiki/%D0%9C%D0%BD%D0%B5%D0%BC%D0%BE%D0%BD%D0%B8%D0%BA%D0%B8_%D0%B2_HTML" target="_blank">Википедии</a>.

Вкратце документ на языке HTML представляет собой следующую структуру (блок-схему, скажем так):

[list]
[*]Объявление доктайпа
[*]Тег, открывающий документ
[*]«Голова» документа
[*]«Тело» документа
[*]Тег, закрывающий документ
[/list]

[b]Объявление доктайпа[/b]

Это — необязательная запись, и обычно служит только неким указанием (правилом) для браузера. Что ещё за указание? Дело в том, что теги бывают разные, т.к. язык HTML время от времени совершенствуется одним интернет-сообществом под кодовым названием <a href="www.w3.org">W3C</a>. Занимается эта контора тем, что решает проблемы стандартов в области сайтостроения. У них на веб-сайте есть даже валидатор кода HTML — <a href="http://validator.w3.org/" target="_blank">http://validator.w3.org/</a> — суть которого сводиться к проверке того, что HTML-код, который вы напечатали на своей странице, соответствует версии, указанной в доктайпе. Если не соответствует, то валидатор выдаст вам всякие Error и Warning, с указанием [i]почему[/i] и [i]где[/i]. На этой же странице есть выпадающее меню под названием [b]Document Type[/b], в котором можем лицезреть все официально существующие на данный момент версии доктайпов. Как видим, их довольно много. Но, к счастью, сейчас нам достаточно рассмотреть только следующие версии: HTML 3.2, HTML 4.01 Frameset, HTML 4.01 Transitional, HTML 4.01 Strict, XHTML 1.0 Frameset, XHTML 1.0 Transitional, XHTML 1.0 Strict, XHTML 1.1 и HTML5.

[list]
[*]Для справки:
HTML «произошёл» от более сложного и общего (т.е. предназначенного не только для веб-страниц) языка разметки — SGML, и соответствует международному стандарту ISO 8879. Если вам интересно, подробности можете узнать в <a href="http://ru.wikipedia.org/wiki/HTML" target="_blank">Википедии</a>.
[/list]

Итак, давайте по порядку рассмотрим указанные выше версии доктайпов.

[color=purple][b]HTML 3.2[/b][/color]
Язык HTML был разработан давно, в 1991—1992 годах, британским учёным Тимом Бернерсом-Ли в стенах Европейского совета по ядерным исследованиям в Женеве. Рассматривать первые версии языка бессмысленно: они уже давно устарели и все, даже самые древние браузеры, нормально поддерживают HTML, начиная с версии 3.2.
Объявление доктайпа, который указывает, что используется HTML 3.2, выглядит так:

[code]<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//EN">

В этой версии тег, открывающий документ, выглядит так:

Code

<html>

А тег, закрывающий документ, выглядит так:

Code

</html>

Использовать эту версию HTML стоит лишь в том случае, если ваш сайт предполагается использовать в браузерах некоторых очень старых моделей телефонов. В наш прогрессивный век, когда все используют смартфоны и КПК, про HTML 3.2 лучше забыть и перейти к следующему пункту (см. ниже).

HTML 4.01 (Frameset)
Объявление доктайпа, который указывает, что используется HTML 4.01 (Frameset), выглядит так:

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Frameset означает, что в этой версии используются фреймы. Подробнее о них вы прочтёте ниже.

В этой версии тег, открывающий документ, и тег, закрывающий документ, выглядит так же, как и в версии 3.2.
А куда мы дели, спросите вы, HTML 3.3? А 4.0?
HTML 4.0 вышел почти сразу же после 3.2 (HTML 3.2 — 14 января 1997 года; HTML 4.0 — 18 декабря 1997 года), но, во-первых, он мало чем отличался от HTML 3.2 и, во-вторых, он сильно уступает HTML 4.01, который является фактически всё тем же HTML 4.0, только дополненным и исправленным. Кстати, HTML 4.01 появился не так уж и скоро — аж через 2 года, т.е. 24 декабря 1999 года, когда интернет уже стал набирать обороты и приходить в каждый дом.

HTML 4.01 (Transitional)
Объявление доктайпа, который указывает, что используется HTML 4.01 (Transitional), выглядит так:

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Transitional означает, что на этой веб-странице используется переходный синтаксис, т.е. в HTML-коде встречаются теги как старой версии 3.2, так и новой версии 4.01.
В этой версии тег, открывающий документ, и тег, закрывающий документ, выглядит так же, как и в версии 3.2.

HTML 4.01 (Strict)
Объявление доктайпа, который указывает, что используется HTML 4.01 (Strict), выглядит так:

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Strict означает, что на этой веб-странице используется строгий синтаксис, т.е. в HTML-коде теги только новой версии 4.01, а не так, как в переходной версии, когда в коде и HTML 3.2, и HTML 4.01.
В этой версии тег, открывающий документ, и тег, закрывающий документ, выглядит так же, как и в версии 3.2.

XHTML 1.0 (Frameset)
Объявление доктайпа, который указывает, что используется XHTML 1.0 (Frameset), выглядит так:

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Frameset означает, что в этой версии используются фреймы. Подробнее о них вы прочтёте ниже.

Буква X в XHTML означает, что данная версия языка разметки произошла от другого обобщённого языка — XML (в то время, как было уже сказано выше, HTML берёт началь от SGML). Главное его отличие от HTML в том, что все элементы должны быть обязательно закрыты завершающим тегом (пустые элементы, например как

должны закрываться пробелом и косой чертой в конце (перед символом >), как в этом примере:

) и имена тегов и их атрибутов должны быть только в нижнем регистре.

В этой версии тег, открывающий документ, выглядит так:

Code

А тег, закрывающий документ, выглядит так:

Code

</html>

XHTML 1.0 (Transitional)
Объявление доктайпа, который указывает, что используется XHTML 1.0 (Transitional), выглядит так:

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Transitional означает, что на этой веб-странице используется переходный синтаксис, т.е. в HTML-коде встречаются теги как старой версии HTML 4.01, так и новой версии XHTML 1.0.
В этой версии тег, открывающий документ, и тег, закрывающий документ, выглядит так же, как и в версии XHTML 1.0 (Frameset).

XHTML 1.0 (Strict)
Объявление доктайпа, который указывает, что используется XHTML 1.0 (Strict), выглядит так:

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Strict означает, что на этой веб-странице используется строгий синтаксис, т.е. в HTML-коде теги только новой версии XHTML 1.0, а не так, как в переходной версии, когда в коде и HTML 4.01, и XHTML 1.0.
В этой версии тег, открывающий документ, и тег, закрывающий документ, выглядит так же, как и в версии XHTML 1.0 (Frameset).

XHTML 1.1
Объявление доктайпа, который указывает, что используется XHTML 1.1, выглядит так:

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

В этой версии тег, открывающий документ, и тег, закрывающий документ, выглядит так же, как и в версии XHTML 1.0 (Frameset).

HTML 5
Объявление доктайпа, который указывает, что используется HTML 5, выглядит так:

Code

<!DOCTYPE HTML>

В этой версии тег, открывающий документ, выглядит так:

Code

А тег, закрывающий документ, выглядит так:

Code

</html>

Как было уже сказано выше, указание доктайпа является необязательным, посему не стоит глубоко уходить в эту тему, тем более на начальном уровне знаний. Для создания большинства веб-страниц достаточно просто писать в стиле синтаксиса HTML 4.1 (Transitional), даже не указывая доктайп, и всё. Однако, когда вам придётся писать кроссбраузерные веб-сайты (т.е. такие, который должны одинково хорошо отображаться во всех распространённных браузерах) о доктайпе придёться вспомнить в самую первую очередь.

Опишем теперь то, что из себя представляет «голова» документа и его «тело».

Великий Админ Киберновы

admin

Дата: Четверг, 2010-12-23, 01:54:08 | Сообщение # 2

Хакер

Администраторы

Сообщений: 151

Репутация: 0

Не на форуме

«Голова» документа

В этой части веб-страницы указывается «служебный» HTML-код.

Заголовок страницы

Code

<title>так указывается заголовок страницы</title>

который мы можем увидеть в самом верху браузера. Данный тег атрибутов не имеет.
Мета-данные

Code

Например, указать кодировку веб-страницы:

Code

обычно указывать её следует только в том случае, если браузеры не могут правильно определить кодировку вашего сайте и выдают кракозяблы, вместо понятных нам символов. В нашем примере мы указали кодировку UTF-8. Для русскоязычных сайтов можно указывать WINDOWS-1251.

Запретить страницу к индексированию:

Code

Описание страницы:

Code

обычно нужен поисковикам, чтобы они могли «понять» смысл текста на странице.

Ключевые слова страницы:

Code

опять же — это для поисковиков, чтобы они знали, по каким лучше всего словам найти вашу страницу.

Перенаправление страницы на другую страницу

Code

где число 10 — это кол-во секунд, через которое браузер должен сделать перенаправление пользователя на указанный URL.

Базовый URL страницы

Code

Этот элемент инструктирует браузер относительно полного базового адреса текущего документа. Тег предназначен для документов, в которых используется относительный адрес и эти документы могут переноситься в другую папку или без потери связи. Браузер ищет тег BASE, определяет полный адрес документа и корректно загружает его. Например, если адрес документа указан как , то при добавлении рисунков достаточно использовать относительный адрес

. При этом полный путь к изображению будет www.megasite.ru/hzchd/images/labuda.gif, что позволяет браузеру всегда находить графический файл, независимо от того, где находится текущая веб-страница.

Правила CSS (стиль для элементов)
CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — это технология описания внешнего вида документа, написанного языком разметки (т.е. HTML).
Подробнее читайте в Википедии.
Пример стиля:

Code

или подключая отдельный файл со стилями (обычно имеет расширение .css, но не обязательно, ибо атрибуты type="text/css" и rel="stylesheet" уже сами за себя говорят браузеру, что за файл подключается):

Code

Как видим из первого примера, стиль для тега указывается через его имя (в нашем примере — body), стиль для класса указвается с помощью символа точки (в нашем примере — .myclass), стиль для элемента с id (id — это один и атрибутов, который можно указать в теге) указывается с помощью символа решётки (в нашем примере — #myid).
Кстати, комментарии, что вы видите в коде — это та часть кода, которая будет игнорироваться, т.е. не учитываться браузером. Поэтому туда можно писать что угодно, например, описания стиля, авторские права на него и т.п.

Javascript
JavaScript — объектно-ориентированный скриптовый язык программирования. Используя его на странице, сайт можно сделать динамическим, интерактивным. Т.е. это будет что-то большее, чем просто документ с форматированным текстом. JavaScript выполняется браузером на компьютере пользователя.
Пример кода:

Code

или подключая отдельный файл со скриптом (обычно имеет расширение .js, но не обязательно, ибо тег script уже сам за себя говорит браузеру, что за файл подключается):

Code

Иконка сайта в адресной строке браузера

Code

Файл иконки должен обязательно иметь имя favicon.ico, лежать в корне сайта и иметь размеры 16x16.

Для справки:
HTML-код так же имеет комментарии. Они имеют такой вид:

Code
<b>тут жирный текст</b>

<a href="http://cybernova.ru/">ссылка на наш сайтик</a>
Браузер Microsoft Internet Explorer (MSIE, IE или просто по-русски ИЕ) умеет «по-домашнему» использовать HTML-комментарии:

Code
<!-[if IE]> текст (или HTML-код), который будет виден только в ИЕ <![endif]-->

Условные комментарии используются для написания специальных инструкций, которые будут работать только в Internet Explorer не ниже 5-ой версии. Ещё примеры использования:

Code

«Тело» документа

Эта часть страницы и есть то самое место, где содержится наш видимый на странице в браузере текст, отформатированный как нам надо с помощью тегов HTML и применением стилей CSS. Здесь нельзя указывать теги, используемые в «голове», за исключением тегов style и script.

Подробности о тегах HTML и правилах CSS можно легко найти в Интернете. В этой статье рассмотрим лишь вкратце основные теги, которые чаще всего используют.

table
Рисует таблицу. Пример:

Code

<table border="1" cellpadding="2" cellspacing="1" width="100%">
   <tr>
   <td>текст1</td><td>текст2</td><td>текст3</td>
   </tr>
   <tr>
   <td>текст4</td><td>текст5</td><td>текст6</td>
   </tr>
</table>

В браузере будет вот такая таблица:

border — толщина рамки в пикселах. cellpadding — отступ от рамки до содержимого ячейки. cellspacing — расстояние между ячейками. Параметр width сделал таблицу на всю ширину окна браузера (100%). Для того, чтобы указать это значение в пикселях, его надо вписывать без знака процента, например:

Code

width="380"

span
Данный тег создаёт строчный элемент — используется, чтобы в тексте к определённому фрагменту был применён определённый стиль. Строчный — означает, что элемент не будет иметь вокруг себя отступы и переводы строк, т.е. будет как бы являться частью строки. Например:

Code

Я помню чудное мгновенье, <span style="color:orange;font-size:15px">передо мной</span> явилась ты!

Из этого примера текст в браузере будет выглядеть так:

Quote

Я помню чудное мгновенье, передо мной явилась ты!

Вместо явного прописывания параметра style в теге можно просто прописать какой-нибудь класс CSS, например так:

Code

Я помню чудное мгновенье, <span class="mystil">передо мной</span> явилась ты!

а уже в отдельном файле CSS создать правило:

Code

.mystil {
color:orange;
font-size:15px;
}

Это особенно актуально на тех страницах, где множество разных элементов должны иметь одинаковый стиль. Ибо в таком случае достаточно просто создать правило в CSS с именем класса, например mystil, и дальше уже всем нужным элементам присвоить этот класс. И если потребуется внести изменения в стили этих элементов, то достаточно будет просто внести одно изменение в CSS и всё!

div
Этот тег аналогичен тегу span с одним исключением — он строит блочный элемент. Блочный элемент — это такой элемент, вокруг которого автоматически создаются переводы строк, и к которому можно применить стиль отступов вокруг элемента. Рассмотрим на примерах.

Code

текст1<div>текст2</div>текст3

В браузере это будет выглядеть так:

Quote

текст1

текст2

текст3

т.е. браузер автоматически добавил переводы строк вокруг блочного элемента. Отступы вокруг элемента можно увеличить:

Code

текст1<div style="padding:10px;">текст2</div>текст3

В браузере это будет выглядеть так:

Quote

текст1

текст2

текст3

Можно ещё добавить линию вокруг элемента:

Code

текст1<div style="padding:10px;border:1px solid red;">текст2</div>текст3

В браузере это будет выглядеть так:

Quote

текст1

текст2

текст3

a, b, i, u, img
Тег a — создаёт ссылку.

Code

В браузере создаст такой текст:

Quote

мой сайт

Для справки:
О том, как менять стиль для ссылок, читайте по этой ссылке.

Тег b — выделяет текст жирным шрифтом.

Code

В браузере создаст такой текст:

Quote

мой сайт

Тег i — выделяет текст курсивным шрифтом.

Code

В браузере создаст такой текст:

Quote

мой сайт

Тег u — выделяет текст подчёркнутым шрифтом.

Code

В браузере создаст такой текст:

Quote

мой сайт

Тег img — служит для вставки картинки.

Code

В браузере:

ul
Данный тег используется для создания списка чего-то. Пример:

Code

<ul>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
</ul>

что в браузере даст:

Quote

Чебурашка

Крокодил Гена

Шапокляк

form
Данный тег создаёт формы, с полями для ввода текста и кнопкой «Отправить».

Ну вот, собственно, всё самое основное мы описали. Теперь вам будет проще изучать сайтостроение, т.к. вы уже как минимум знаете, что нужно искать в google.ru. Подробнее о CSS и HTML вы можете узнать из HTMLBOOK.

Великий Админ Киберновы

Мой первый веб-сайт (Подробно и в картинках рассмотрим, как сделать веб-сайт.)

Страница 1 из 1
1