ПРОСТОЙ САЙТ HTML С НУЛЯ

Сегодня мы сделаем свой первый простенький сайт. Этот процесс займет совсем немного времени, не потребует никаких финансовых затрат, скачивания и установки каких либо программ. Мы напишем этот сайт в простом блокноте, и установим его прямо на нашем компьютере.
Цель этой статьи заключается в том, что бы Вы удостоверились, что написать сайт не так уж и сложно.
ПРИСТУПИМ?

Делаем главную страницу сайта

На рабочем столе создаем папку с названием ms. В этой папке и будет размещаться наш сайт.
Далее открываем блокнот и пишем текст. <!DOCTYPE html> <html> Это мой сайт </html> Это и есть главная страница нашего сайта. Нужно ее сохранить в ранее созданную папку ms
. Имя файла - index.html. Кодировка - UTF-8. Смотрите рисунок.

Ну вот и все. Страничка нашего сайта готова. Заходим в папку "ms", и открываем файл index при помощи браузера. Открыли? Дааа... Получилось не очень... Но ничего страшного. Давайте украшать наш сайт.

Заголовок сайта

Надпись "Это мой сайт" сделаем заголовком главной странички. Для этого изменим наш код. Теперь он будет выглядеть так: <!DOCTYPE html> <html> <h6>Это мой сайт</h6> </html> Сохраняем. Открываем файл "index" и видим, что тэг "h1" сделал наш текст намного крупнее.
А теперь давайте разместим наш заголовок по центру при помощи тэга "center". У нас получилось: <!DOCTYPE html> <html> <center> <h1>Это мой сайт</h1> </center> </html> Снова сохраняем и открываем в браузере. Теперь наш заголовок крупный и по центру странички. Так симпатичнее.

Устаналиваем фон странички

И все же страничка наша довольно скучная. Довайте изменим ее цвет. Вносим изменения в наш код: <!DOCTYPE html> <html> <head> <style> body { background-color: #FFD700 } </style> </head> <center> <h1>Это мой сайт</h1> </center> </html> Сохраняем. Открываем в браузере. Результат? Довольно прилично.

Устаналиваем на сайт изображение

Ничто не украшает сайт так как картинки, рисунки, фото. Давайте и мы добавим изображение на наш сайт.
Для этого внутри папки "ms" создадим папку для изображений и назовем ее "img". Вы можете скачать изображение из интернета, нарисовать сами. А можете взять картинку, которую использовал я для примера. Просто нажмите на нее правой кнопкой мышки и сохраните.

Наше изображение должно быть в папке "img".
Добавляем картинку в код и заодно выравниваем ее по центру. <!DOCTYPE html> <html> <head> <style> body { background-color: #FFD700 } </style> </head> <center> <h1>Это мой сайт</h1> </center> <center> <p><img src="адрес картинки"></p> </center> </html> Как узнать адрес картинки? Нажмите правой кнопкой мышки на картинку, нажмите "свойства", потом "безопасность". Вверху увидете "имя объекта". Скопируйте адрес вашей картинки и вставьте в код.
Снова сохраняем файл и открываем его в браузере. Получилось совсем не плохо.

Делаем меню сайта

Сайт из одной странички - это не сайт. Поэтому мы создадим еще две странички. А для того, что бы перемещаться по сайту сначала сделаем меню сайта. Вот теперь код стал таким. <!DOCTYPE html> <html> <head> <style> body { background-color: #FFD700 } </style> </head> <center> <h1>Это мой сайт</h1> </center> <h4>МЕНЮ САЙТА</h4> <a href="путь к файлу">Вторая страница</a><br> <a href="путь к файлу">Третья страница</a> <center> <p><img src="адрес картинки"></p> </center> </html>

Создаем дополнительные странички

Меню сайта готово. Есть две ссылки для перехода на другие странички. Но нет самих страничек. Давайте создадим их.
Не станем ничего придумывать. Просто берем код главной странички и меняем заголовок (Это мой сайт) на другой (Вторая страница) и (Третья страница). Сохраняем их в папку "ms" как str2.html и str3.html.
Вот так выгладит код странички str3.html: <!DOCTYPE html> <html> <head> <style> body { background-color: #FFD700 } </style> </head> <center> <h1>Третья страница</h1> </center> <h4>МЕНЮ САЙТА</h4> <a href="путь к файлу">Главная</a><br> <a href="путь к файлу">Вторая страница</a><br> <a href="путь к файлу">Третья страница</a> <center> <p><img src="адрес картинки"></p> </center> </html> Путь к файлу определяем точно так же, как и адрес картинки через свойства.

Ну вот и все. Если Вы все сделали правильно, то у вас должно получиться вот так:

Дальше сами.
ЖЕЛАЮ УДАЧИ.