Создание сайта html в блокноте. Основы

От автора: все когда-то начинали изучение html с создания простейшего сайта в блокноте. Хотя эта программа совсем не подходит для разработки веб-сайтов, но создать в ней что-то примитивное все же можно.

Итак, как создать сайт в блокноте на html? Это является вполне выполнимой задачей. Конечно, намного удобнее и правильнее использовать для этого специальные программы, вроде Notepad++, но для первого раза можно обойтись и блокнотом. Я не буду вас отговаривать – хотите создать сайт в блокноте? Создавайте. Как? А вот об этом давайте поподробнее.

С чего нужно начинать для создания сайта html в блокноте

Любой сайт создается в первую очередь с помощью html-тегов. Это язык, который используют для разметки веб-страниц. Зачем он нужен? Он необходим браузерам, которые умеют читать и понимать его, формируя страницу в согласии с тем, какой код написан.

К примеру, захотите вы на вашей страничке вывести список. А как собственно сказать браузеру, что это должен быть именно список, а не обычный текст? В ворде, например, есть кнопки маркированного и нумерованного списков. В html специально для этого есть свои теги. Заключив нужный текст в эти теги, браузер уже понимает, что это список. Естественно, такая же логика и с размещением других элементов.

Для начала нам нужно создать в блокноте два файла. Один нужно назвать index.html, а второй – style.css. Заметьте, .html и .css должны быть расширениями файла, а не его именем. То есть не style.css.txt, а именно style.css. Сами имена файлов могут быть и другими, просто я взял самые популярные.

Зачем эти самые файлы нужны? В html-файлы мы будем описывать структуру сайта, а в style.css – его внешний вид. Html и css – это языки, которые обязательно нужны для создания сайта. Как для человека иметь и правую руку, и левую. Скажет ли он, что ему хватит одной руки? Конечно, нет. Так же и с этими двумя языками, но которых стоит все сайтостроение.

Начинаем создавать сайт

Итак, это уже небольшой код, который и создаст нашу первую веб-страничку. Как видите, он почти полностью состоит из тегов.

Рис. 1. Сравнение внешнего кода в блокноте и Notepad++. Как видите, левее все гораздо понятней и красочней.

Самые основные теги

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

Первая строка просто указывает тип документа. Рекомендуется ее указывать, чтобы все правильно работало.

На этом наш тег head закрывается. Кстати, вы заметили, что тег meta мы не закрыли? Все потому, что в html есть как парные, так и одинарные теги. В парные можно записать какое-то содержимое, в отличие от одинарных.

Далее открывается тег body. Если вы хоть немного в ладах с английским, то понимаете, что это переводится как тело. То есть в body мы размещаем информацию, которая непосредственно будет выведена на экран – тело страницы. Напишем здесь стандартную фразу. Теперь самое время проверить нашу страничку. Откройте index.html в любом браузере. Если вы видите там пустой экран и фразу: “Привет, мир!”, значит, все получилось. Осталось только проверить подключение файла style.css.

Этот файл у нас все еще пустой. Скопируйте туда такой код:

Рис. 2. Это уже, по сути, веб-страничка, хоть и самая примитивная.

Сохраняйте и опять открывайте страницу в браузере. Если вы видите фразу на фоне красного цвета – все работает. Можно начинать работу над созданием своего сайта. В css мы указали команду сделать красный цвет фоном всей нашей страницы. Теперь понимаете для чего он нужен, этот css?

Вот так вот мы и будем создавать сайт: формировать элементы в html, потом оформлять их через css и в конце концов получим что-то, похожее на сайт.

Структура сайта

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

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

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

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

Комментарии Вконтакте: