Как создать сайт

Пишу эту серию статей
Для своих друзей, которые попросили меня об этом, а также для всех кто заинтересован в создании собственных сайтов.

Все мы мечтаем создать свой сайт в интернете.
В этой статье я опишу подробно как можно создать свою web-страницу за несколько минут.

Итак перейдем от слов к делу.

 Как создать свою первую Web-страницу .

Мы с вами будем создавать сайт на примере  вымышленной фирмы  "Ореон", которая занимается, например продажей компьютеров и компьютерных программ.
Я советую вам начинать создавать HTML -код в обыкновенном блокноте.

Глава 1
1. Откройте  блокнот ( Пуск/Все программы/ Стандартные/Блокнот
2.Создайте в нем новый документ (Файл(File)*СОздать ( NEw)
3. Введите в новый документ основные теги(тэг-это элемент Html-кода . отвечающий за слова.которые появятся в заголовке вашего сайта)
Например:

<title>В Контакте | Добро пожаловать</title>

-то что вы видите  в заголовке  главной страницы известного сайта "В контакте"-введено с помощью тегов. Следовательно---------------->

<title> именно здесь вы сможете написать название своего сайта</title>

Итак  введите в новом документе блокнота следующие теги:
<html>
<Head>
<title></title>
</head>
<body>
</body>
</html>
Краткая информация: теги начинаются и заканчиваются с угловых скобок.Смотрите на то, что вы уже ввели.
<html>-открывает тег   
</html>-закрывает тег                <title> - открывает тег
</title>- закрывает тег
<body> -открывает тег
</body> - закрывает  тег

Введем между тегами <title> и </title>  название нашей Web-страницы Компания Ореон.

Между тегами <body> и </body>  вставьте новую строку с информацией о  нашей компании:
Компании Ореон у нас самые лучшие компьютеры и компьютерные программы.

если вы все сделали правильно у вас должно получиться следующее:
<html>
<Head>
<title>Компания Ореон</title>
</head>
<body>
Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы
</body>
</html>

Теперь давайте поменяем цвет фона и текста.
Их можно создавать в цифровом или символьном виде.
Для того чтобы  изменить цвет фона и текста давайте используем атрибуты:
bgcolor и text.
Давайте установим желтый цвет для  фона (yellow) страницы и синий (blue) для  текста.
Для этого  вместо тега <body> введите  следующее:

<body bgcolor=yellow text = blue>
В основном html- документе у вас должно получиться следующее:
<html>
<Head>
<title>Компания Ореон</title>
</head>
<body bgcolor=yellow text= blue>
Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы
</body>
</html>


Если вы все ввели правильно. Создайте на рабочем столе новую папку под названием Мой сайт.  И сохраните туда наш документ для этого:
выберите:
Файл/Сохранить как:  и в имени файла введите oreon.html.
Теперь просто откройте папку куда вы сохранили документ oreon.html и  запустите его щелчком или двойным щелчком левой кнопкой мыши.
Если у вас все получилось вы увидите свой документ в интернет обозревателе.

Глава  2:
В этом главе мы с вами научимся форматировать текст на странице.
Для чего нужно форматирование текста. Оно служит для того, чтобы наш документ выглядел красиво.С помощью форматирования мы сможем: установить размер и начертание шрифта, с можем выравнивать текст на странице.

Откройте блокнот:
Сейчас  Мы c вами разберем следующий пункт это- ЗАГОЛОВКИ РАЗДЕЛОВ ДОКУМЕНТА.
Они бывают разных уровней с 1-го по 6-ой.
ЗАГОЛОВКИ РАЗДЕЛОВ ДОКУМЕНТА указываются парой тегов:
<h1></h1> - заголовок первого уровня, <h2></h2>- второго уровня ,h3-третьего и так далее.
Также заголовки могут иметь различный размер: тег <h1>-самый крупный, с тегом <h6>-самый мелкий.
Вместо  первого предложения документа:
<title> Компания Ореон </title>
введите :
<h1>Компания Ореон</h1>
у вас должно получиться следующее:
<html>
<Head>
<h1>Компания Ореон</h1>
</head>
<body bgcolor = yellow text = blue>
Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы.
</body>
</html>
Сохраните документ.
Файл/Сохранить.
Когда вы вновь запустите ваш документ в обозревателе
у вас должно получиться следующее:

КОМПАНИЯ ОРЕОН
Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы.

Теперь мы рассмотрим атрибуты align.
Он позволяет выравнивать заголовки по центру(center) и по правому краю(right). так как по умолчанию текст всегда выравнивается по левому краю.
Давайте выровняем заголовок по центру web-страницы  для этого вместо строки:
<h1>Компания Ореон </h1>
введем
<h1 align =center> Компания Ореон</h1>
HTML-документ должен выглядить так:

<html>
<Head>
<h1 align =center> Компания Ореон</h1>
</head>
<body bgcolor = yellow text = blue>
Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы.
</body>
</html>

Сохраните ваш html-документ. Файл/Сохранить.( запустите ваш документ)
Если вы все правильно ввели ,ваш заголовок будет выровнен по центру.

Давайте установим наклонное начертание  остального текста.
Для этого используем парные теги <i></i>
Введите их  в начало и конец этой строки:
<i>Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы </i>
У вас должно получиться:
<html>
<Head>
<h1 align =center> Компания Ореон</h1>
</head>
<body bgcolor = yellow text = blue>
<i>Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы </i>
</body>
</html>

Сохраним: Файл/Cохранить
Запустим документ.
Если вы ввели все правильно текст о нашей  компании примет наклонное начертание.

Краткая справка:
<b></b>- устанавливает  полужирное начертание текста
Например:
<i><b> Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы</b></i>

<u></u>- подчеркнутое начертание текста
Например:
<i><u>Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы</u></i>

<small></small>- уменьшает размер шрифта
Например:
<small><i>Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы</i</small>

<big></big>- увеличивает размер шрифта
Например:
<big><i>Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы</i> </big>

Выбирайте любой  тег, который посчитаете нужным. Для примера я приведу вам наглядный
вариант с  тегом <big></big>(для увеличения текста).

<html>
<Head>
<h1 align =center> Компания Ореон</h1>
</head>
<body bgcolor = yellow text = blue>
<big><i>Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы</i> </big>
</body>
</html>


Есть еще один способ изменения размера шрифта: <font></font>
Атрибут тега size  помогает устанавливать размеры шрифта от 1-го ( самого мимнимального)  до 7-го- максимального.

Краткая справка:
Размер обычного текста = 3 условным единицам и увеличение либо уменьшение иожно указывать с помощью знаков + или -(минус), а размер шрифта в этом случае увеличивается или уменьшается по сравнению с исходным, который = 3.
Атрибут face-указывает название шрифта ( Arial,Adobe Caslon Pro и  любых других шрифтов)
Атрибут color - задает цвет шрифта.

Мы будем изменять размер шрифта с помощью тега <font>.
Для этого заменим строку:

<big><i>Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы</i> </big>
на строку:

<font size=5><i>Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы</i></font>

Что мы сделали:
мы заменили тег <big></big> на <font size=5></font>
Шрифт был установлен в 5 условных единицах. Размер можно указывать любой.(с 1 по 7)


Теперь выровняем текст о нашей компании по центру.
Для этого добавим в начало и конец этого предложения
<font size=5><i>Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы</i></font>

Теги <center></center>/

У вас должно получиться следующее:

<html>
<Head>
<h1 align =center> Компания Ореон</h1>
</head>
<body bgcolor = yellow text = blue>
<center><font size=5><i>Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы</i></font></center>
</body>
</html>
Сохраним  наш документ.Теперь вы можете посмотреть в обозревателе, что получилось.
Если у вас все правильно, то у вас все будет выровнено по центру.

СПРАВКА:
Форматирование шрифта может быть двух видов:
1.физическим,которым мы пользовались выше и
2.Логическим
Они различаются между собой  тем, что при физическом форматирование, можно прямо указать, что шрифт в заголовке будет жирным, то есть явно показать начертание шрифта текста.
При Логическом же форматировании мы указываем, только структурный тип, а браузер сам выбирает стили, и мы видим их на экране.Например: Высказывания или цитаты: всегда указываются курсивом.
Сравним теги физического и логического форматирования:
ПОЛУЖИРНЫЙ ТЕКСТ:
Физическое:<B>
Логическое <STRONG>
Курсив :
Физическое: <I>
Логическое: <EM>
Моноширинный шрифт:
Физическое: <TT>
Логическое: <CODE>
Перечеркнутый текст:
Физическое : <S>
Логическое: <DEL>

Теги для логического форматирования шрифта текста:
<dfn> </dfn> - для определения текстового термина
<cite> </cite>- для цитат, книг и фильмов.Ссылок на другие сайты или источники материалов.
<em> </em>-выделение важных фрагментов текста

<ABBR></ABBR> Используется для описания аббревиатуры (сокращенное название, которое читается по буквам).
<ACRONYM></ACRONYM> Используется для описания акронима (сокращенное название, которое читается как слово).
<TITLE></TITLE> задает текст всплывающей подсказки.
<code></code> Используется для отображения фрагментов программного кода . обязателен.

<KBD></KBD> Выделения текста, вводимого пользователем с клавиатуры (по умолчанию моноширинной шрифт). .
<SAMP ></SAMP> Используется для выделения примеров (по умолчанию моноширинной шрифт).
<STRONG> </strong> Используется для выделения текста.ДЛЯ Важных фрагментов

<VAR ></var> Используется для выделения  имен переменных в фрагменте кода программы
Отображается курсивом.

Продолжение в следующих статьях.


Рецензии