Как создать сайт, не используя языки программирования
В сети интернет существует просто безумно огромное количество сайтов. И поэтому сегодня я напишу о том, как самому создать сайт за пару часов, не зная языков программирования и не используя 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.