Как сделать сайт бесплатно для "Народа"

Всем желающим научиться создавать сайты - "физкульт привет!"

Хвалю ваше желание "научиться делать сайты", вы не только правильно делаете, но и вы уже потенциальный вебмастер, который способен сделать и простой сайт на HTML, и профессиональный динамический проект на PHP или сайт на флеше.

Делать сайты - это очень увлекательно и прибыльно!!! Прибыльно потому, что на этом можно ещё и заработать.

Меня зовут Дмитрий и я научу вас делать сайты быстро и качественно! А также вы сможете создавать неповторимый дизайн для ваших сайтов. В общем к концу изучения этой статьи вы будете уметь создавать сайты - визитки, а это большое достижение и основа знаний будущего вебмастера. Если посмотреть цены на дизайнерских сайтах, предоставляющих услуги создания сайтов, то можно увидеть, что создать сайт - визитку стоит от $50 до $1000..., а значит после изучения данной страницы вы сможете зарабатывать на разработке несложных сайтов.

Делать сайты очень просто, поэтому научиться их создавать могут даже школьники и пенсионеры. Уверяю, вам понравится новое занятие! Если вы готовы, то, пожалуй, не будем долго "переливать воду" и начнём по-порядку.

Браузеры

Вы уже знаете, что сайты открывают при помощи браузеров (обозревателей), самым известным является обозреватель Internet Explorer, который входит в стандартный набор программ оперативной системы Windows. Запустить обозреватель можно через меню Пуск => Программы => Internet Explorer , тут есть адресная строка, в которой вы можете вводить адрес любых сайтов, например: http://computerlessons.mega8.ru

Азы создания сайтов

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

Теги - своеобразные контейнеры, внутри которых объекты (текст, изображения) принимают параметры тега, например тег <b> делает текст жирным, но об этом немного позже, а сейчас разберём как правильно должны называться файлы сайта.

Названия файлов сайта

Любой сайт начинается с главной страницы и эта страница всегда называется index и другого названия у первой страницы быть не может! Мы изучаем создание сайтов на языке HTML, поэтому и расширение у нашей первой страницы будет такое же: index.html

Кроме главной страницы сайта есть ещё и другие страницы, их можно называть как угодно, например: 1.html 2.html или second_page.html самое главное, чтобы названия страниц были на английском языке и по возможности без пробелов (можно использовать цифры), иначе страницы названные кириллицей (русскими буквами) работать не будут.

Изображения сайта обычно хранятся в отдельной папке и чаще всего она называется images, название папки может быть любым, например просто img. Изображения, как и страницы, должны называться только английскими буквами или цифрами, ни каких русских букв быть не должно!

Ещё на сайте могут быть архивы (с музыкой, программами, электронными книгами), предназначенные для скачивания, для удобства и порядка на сайте архивы тоже располагают в отдельной папке, например: downloads или arhiv.

Итак, мы более менее разобрались с названиями папок и теперь создадим папки для своего будущего сайта, для этого на вашем компьютере создайте папку www - в этой папке будут храниться абсолютно все файлы создаваемого сайта. В папке www сделайте папку для картинок с названием images у вас должно получиться так:

Папки для самодельного сайта готовы и мы переходим к созданию первой страницы.

Ваша первая HTML-страница

Вы уже запомнили, что первая страница сайта должна называться index.html и сейчас мы её сделаем. Для этого нам не нужно никаких специальных программ, просто запустите приложение Блокнот, если не знаете как это сделать, то идите в меню Пуск => Программы => Стандартные => Блокнот

Скопируйте следующий код в Блокнот:

<html>
<head>
<title>Мой сайт</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
Моя первая страница для сайта
</body>
</html>

Выберите в Блокноте Меню => Сохранить как... далее выберите папку, в которой будет сохранён файл, в данном случае это папка www в строке Имя файла введите название для файла index.html после этих действий нажмите кнопку Сохранить. В итоге мы получим HTML-страницу с названием index и расширением .html

Если открыть на компьютере папку www, то там у вас будет такой файл:

Кликните по значку файла index у вас должна открыться HTML-страница в браузере Internet Explorer, на странице будет только одна строка "Моя первая страница для сайта".

Значения главных тегов

Теперь давайте разберёмся, что же значит тот код, который мы вписали в html-страницу. Посмотрите как начинается и заканчивается HTML-код:

<html> - тег, который сообщает браузеру о начале HTML-страницы и соответственно тег </html> сообщает браузеру о конце HTML-страницы. Таким образом мы имеем пару тегов или парный тег, <html> - это тег открывающий, а </html> - закрывающий тег. Так образуется "контейнер", в котором могут быть другие теги, но помните, что путать открывающие и закрывающие теги никак нельзя!

<html>страница</html> - Правильно!

</html>страница<html> - Не правильно!

</html>страница</html> - Не правильно!

<html>страница<html> - Не правильно!

Отлично, тут никаких сложностей у вас быть не должно, разберём следующую пару тегов:

По сути HTML-страница состоит из "головы" и "тела" - это видно из названий тегов:

<head> - "голова" страницы, внутри этого тега (контейнера) пишут служебную информацию о странице, в основном эта информация предназначена для поисковиков (Яндекс, Рамблер) и она не отображается в браузере.

<body> - "тело" страницы, внутри этого тега (контейнера) содержится информация, которая отображается на странице при открытии её в браузере.

Значения тегов "шапки" страницы

Посмотрите на теги расположенные в "шапке" страницы:

<title> - этот тег сообщает браузеру как называется HTML-страница, это название можно увидеть если открыть страницу и посмотреть в верхний левый угол браузера.

Далее разберём значение целой строки, начинается строка с тега <meta> - этот тег не парный, у него нет закрывающего тега, а внутри тега прописаны специальные атрибуты, которые имеют определённое значение.

Значения тегов "тела" страницы

Тут у нас нечего разбирать, поскольку между тегами <body> и </body> только одна строка и никаких тегов:

<body>
Моя первая страница для сайта
</body>

На странице отображается строчка "Моя первая страница для сайта", попробуем дописать вторую строку, в конечном варианте код должен выглядеть так:

<html>
<head>
<title>Мой сайт</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
Моя первая страница для сайта
Вторая строка
</body>
</html>

Чтобы изменить код на нашей HTML-странице нужно снова открыть её Блокнотом и дописать новую строку. После необходимых изменений сохраните страницу и откройте её браузером или если вы его не закрывали, то просто обновите окно, для обновления можно нажать кнопку на клавиатуре F5. В браузере вы увидите только одну строку или точнее увидите, что из двух строк получилась одна:

Моя первая страница для сайта Вторая строка

Как видите браузер не понимает, чего от него хотят, а хотим мы чтобы было две строки, поэтому применим тег, который создаёт переход на новую строку это тег <br> (тег не парный).

<html>
<head>
<title>Мой сайт</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
Моя первая страница для сайта
<br>
Вторая строка
</body>
</html>

Допишите этот тег, сохраните изменения и посмотрите, что у вас получилось:

Моя первая страница для сайта
Вторая строка

Есть ещё один тег, который создает переход на новый абзац:

<p>абзац</p>

Тег парный, поэтому новый абзац должен быть внутри этого тега, например:

Итак, вы уже постигли азы создания сайтов и теперь перейдём к несколько сложным манипуляциям, таким как выделение заголовков, создание жирного текста и задание цвета.

Форматирование текста

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

На странице можно применять до 6-ти заголовков, а обозначаются они так:

<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>

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

Чтобы изменить размер стандартного шрифта применяют следующие теги:

Выделить текст жирным можно парным тегом <b></b> - этот тег уже устарел, но его все ещё применяют, а вот новым тегом теперь считается аналогичный тег <strong></strong>. Сделайте две одинаковые строки, но с разными тегами:

Выделяем слово <b>жирным</b>
<br>
Выделяем слово <strong> жирным</strong>

Отлично, пока всё получается! Вы ещё не устали? Вам не скучно? Лично мне очень интересно создавать сайты, всегда интересно делать красивые сайты с удивительным дизайном и к тому же за разработку сайта я никому не плачу сумасшедших сумм. Если вы хотите научиться делать красивые сайты, то вам нужно еще научиться работать с программой Photoshop - это программа для работы с графикой. Фотошоп поможет создавать уникальный дизайн для ваших проектов. Конечно, сделать красивый сайт за пару часов, без опыта работы, у вас не получится, но, посмотрев как это делаю, я вы можете сделать более менее приличный сайт и не распугивать посетителей.

Ну что ж немножко отвлеклись - давайте продолжим создание сайта ;)

Раскрасим текст и страницу

Управлять размером шрифта мы уже научились и теперь самое время заняться цветовыми решениями, покрасим текст в красный цвет:

<font color="#FF0000">Красный текст</font>

Атрибут color задаёт цвет, а сам цвет указан в шестнадцатеричном значении #FF0000, можно такой же цвет указать при помощи обычного англоязычного значения:

<font color="red">Красный текст</font>

Вот вам небольшая таблица таких значений:

Название	Цвет	Hex
aliceblue		#F0F8FF
antiquewhite		#FAEBD7
aquamarine		#7FFFD4
black		#000000
blue		#00FFFF
crimson		#DC143C
cyan		#00FFFF
darkblue		#00008B
darkgreen		#006400
darkorange		#FF8C00
darkorchid		#9932CC
deeppink		#FF1493
deepskyblue		#00BFFF
dimgray		#696969
dodgerblue		#1E90FF
forestgreen		#228B22
fuchsia		#FF00FF
gold		#FFD700
gray		#808080
green		#008000
greenyellow		#ADFF2F
orangered		#FF4500
red		#FF0000
sienna		#A0522D
silver		#C0C0C0
wheat		#F5DEB3
white		#FFFFFF
yellow		#FFFF00
yellowgreen		#9ACD32

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

Так мы задали цвет для всей страницы, а можно ещё вместо сплошного цвета задать некое изображение, например маленькое изображение тетрадной клетки

На вашей странице получится так:

Если в коде поставить и изображение и цвет, то фон страницы в клетку можно изменить на жёлтый:

При таком варианте кода изображение повторяется на странице по вертикали и горизонтали.

Вставка изображений

Вставлять изображения на задний план мы научились, а теперь вставим картинку после текста. Напечатайте следующий код:

images/pic.gif - путь к картинке с названием pic

Теперь можно посмотреть как отображается картинка на странице. Вокруг картинки вы увидите чёрную рамку, чтобы её убрать добавьте в HTML-код атрибут, который сделает рамку толщиной в ноль пикселей:

Изменяя значение атрибута border можно управлять толщиной рамки.

Изображение можно выравнивать по центру, левому и правому краю:

На этом мы закончим изучение создания сайта и перейдём к следующему шагу:

Как разместить сайт в Интернете бесплатно

Поскольку наше обучение имеет ознакомительный характер, то мы не будем регистрировать домен (имя сайта) и не будем покупать хостинг (место на диске), обойдёмся бесплатными услугами от Яндекса, который предоставляет услуги бесплатно на сайте www.Narod.ru

Народ.ру - это место где можно бесплатно получить и домен и хостинг, но без поддержки многих полезных функций. Для того, чтобы научиться делать сайты и размещать их в Интернете Народ.ру очень даже необходим.

Регистрация домена

Домен - это имя вашего сайта. Народ.ру раздает домены 3-го уровня, например computerlessons.narod.ru - как правило домены 3-го уровня раздаются бесплатно, а 2-го уровня стоят денег, например: computerlessons.mega8.ru

Чтобы получить домен на Народе, нужно там зарегистрироваться, для этого идём на сайт www.Narod.ru, находим там ссылку "Зарегистрироваться". Если у вас есть почта на Яндексе, то регистрироваться вам не нужно, достаточно просто авторизоваться и пройти по ссылке "Создайте свой сайт" далее по ссылке "Создать". После создания вы попадёте в мастерскую сайта, найдите там ссылку "Загрузка файлов на сайт", вам будет предложено выбрать файлы для загрузки. Через кнопку "Обзор..." найдите на вашем компьютере файлы сайта и загрузите их на Народ.

Теперь можно посмотреть как выглядит ваш сайт в Интернете. Возможно сразу после загрузки файлов на Народ вы не сможете посмотреть свой сайт, браузер выдаст ошибку 404 (нет страницы), тогда придётся некоторое время подождать пока сайт начнет работать, это время может составить от 10 минут до 24 часов и более.

Доменное имя сайта на Народе будет выглядеть так computerlessons.narod.ru

На этом урок заканчиваю, если будут проблемы с созданием сайта, то заходите на форум.

Уроки HTML (как сделать сайт)