Как создать сайт, не используя языки программирования

В сети интернет существует просто безумно огромное количество сайтов. И поэтому сегодня я напишу о том, как самому создать сайт за пару часов, не зная языков программирования и не используя ucoz, wix и прочие конструкторы сайтов.

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

У себя на компьютере создайте папку и назовите ее сайт, в этой папке будут хранится файлы вашего сайта. В папке, которую вы создали, создайте текстовый документ и назовите его index, после чего вам необходимо изменить разрешение на html, т.е. у вас был index.txt, а станет index.html Правой кнопкой мыши нажмите на этот файл и откройте его с помощью блокнота.

Вообще рекомендую вам скачать notepad++ и открывать файлы через него, в нем ваш код будет выглядеть более понятно. Для тех кто скачал notepad++ выберите в верхней строке синтаксисы наведите курсор на букву H и выберите "html".

Теперь самое интересное, вставьте код который я написал в файл index.html, после кода я дам пояснение, что есть что.

<html>
	<head>
		<meta name="keywords" content="натяжные потолки, потолки в Москве, заказать натяжной потолок, сделать потолок" />
		<meta name="description" content="Мы компания, которая занимается установкой натяжных потолков в вашем городе." />
		<title>Натяжные потолки</title>
	</head>
	<body>
		<div class="logo">
			Клевый потолок
		</div>
		<ul>
			<li><a href="index.html">Главная</a></li>
			<li><a href="services.html">Услуги</a></li>
			<li><a href="contacts.html">Контакты</a></li>
		</ul>
		<h1>Натяжные потолки в Москве</h1>
		<div class="content">
			Наши потолки самые лучшие в мире, покупайте и заказывайте только у нас. 
			Мы лидеры в этом деле, ознакомьтесь с нашей системой скидок. Мы предлагаем наши услуги по привлекательным ценам.
			У нас есть ряд преимуществ по сравнению с конкурентами. Вообщем друзья звоните нам быстрей.
		</div>
	</body>
</html>

Слова в таких скобках < > называют тегами, в первой строчке мы видим тег <html>. Этот тег в документе не обязателен, но если вы хотите следовать "хорошему стилю" написания вашего кода, то его лучше написать. Он заключает в себе содержимое веб страницы. Обратите внимание на последнею строчку кода, вы увидите закрывающий тег </html>.

На второй строчке кода мы видим тег <head> чуть ниже вы также увидите закрывающий тег </head>. В нем как правило пишут подключения файлов css и js, в нашем случае таких подключений нет. Также в нем можно прописать ключевые слова, краткое описание страницы и название странициы, это как раз в нашем случае есть.

На третей строчке кода у нас мета тег "keywords". В нем вы можете увидеть content="" между кавычками вы прописываете через запятую ключевые слова вашей страницы. Это необходимо для продвижения вашей веб страницы в сети интернет, т.е. вы указываете те ключевые слова по которым хотите, чтобы вас находили в поисковиках. Но помните, что они должны соответствовать содержанию, если к примеру у вас сайт о машинах, а вы укажите в ключевых словах: "холодильник, микроволновка, кухня", то вас никто не найдет по этим запросам.

Идем дальше и видим мета тег "description". В нем также где content="" вы указываете краткое описание вашей страницы, это тоже нужно для продвижения. Вы можете увидеть это краткое описание в поисковой выдаче яндекса и гугла. Как и в случае с ключевыми словами это описание также должно соответствовать содержанию. С <title> думаю все понятно, он содержит название веб-страницы, не забудьте его закрывать </title>.

В теге <body> содержится следует располагать основную информацию, которую вы собираетесь выводить. Далее мы видим <div class="logo"> это блочный элемент, предназначенный для вывода фрагмента страницы. Вы наверное заметили у него атрибут class в нем можно задать название селектора например logo и в дальнейшем по этому селектору изменить внешний вид фрагмента "Клевый потолок". Как менять внешний вид, я расскажу чуть попозже, а пока вернемся к нашему коду.

Тег <ul> содержит список, соответственно в теге <li> находится элемент списка. У нас этот список представляет меню сайта, <a href="index.html"> это ссылка, атрибут href содержит ссылку. <h1> - это заголовок, может также быть заголовок <h2> <h3> и.т.д. Затем у нас снова идет фрагмент заключенный в контейнер <div class="content"> с ним вы уже знакомы, в этот раз изменилось имя селектора, т.к. этот фрагмент текста будет иметь другой внешний вид.

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

Комменатрии
Добавить комментарий