Как создать сайт, не используя языки программирования 3
Продолжаю рассказ, о том как быстро научиться делать простые веб-странички на html. Мы уже создали главную страницу, теперь создадим веб-страницу с услугами. Для этого создайте файл services.html в папке где лежат уже index.html и style.css В этот файл добавьте вот этот код:
<html> <head> <meta name="keywords" content="натяжные потолки, потолки в москве, заказать натяжной потолок, сделать потолок" /> <meta name="description" content="Мы компания, которая занимается установкой натяжных потолков в вашем городе." /> <link href="style.css" media="screen" rel="stylesheet" type="text/css" /> <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="usluga"> <span>1</span>Ваш текст об услуге под номером один, например: мы делаем бесплатный замер. </div> <div class="usluga"> <span>2</span>Ваш текст об услуге под номером два, например: мы делаем натяжные потолки с фотопечатью. </div> <div class="usluga"> <span>3</span>Ваш текст об услуге под номером три, например: монтаж до 4 углов бесплатный. </div> <img src="uslugi.png" /> </body> </html>
Тут незначительные изменения по сравнению с файлом index.html. А именно между тегом <h1> </h1> теперь надпись услуга и вместо одного <div class="content"> теперь три <div class="usluga"> Мы сделали три таких контейнера для того, чтобы их можно было отделить друг от друга. Отделим мы их с помощью margin-top: 20px; - отступ сверху 20 пикселей, но об этом чуть позже.
Вы наверное заметили новый элемент <img src="uslugi.png" /> он выводит картинку uslugi.png, для того, чтобы у вас отображалась картинка, вам надо в папку "сайт" скинуть какую нибудь картинку и назвать ее uslugi.png Атрибут src указывает путь к картинке, также вы можете задать размеры картинки добавив атрибут width и height, т.е. <img src="uslugi.png" width="20" height="20"/>.
Сохраните файл и откройте его с помощью браузера, вы увидите, что ваш текст об услугах выглядит не очень потому, что мы не прописали стили для этого текста. В файл style.css добавьте следующее:
.usluga {
display: block;
background: #009FFF;
margin-top: 20px;
color: #fff;
padding: 10px;
font-size: 20px;
border-radius: 5px;
}
.usluga span {
background: #fff;
color: #009FFF;
padding: 4px 10px;
margin-right: 10px;
border-radius: 100%;
}
У селектора usluga вы наверное уже заметили border-radius: 5px; - это свойство задает скругление углов у элемента, в данном случае на пять пикселей, padding: 10px; - задает внутренний отступ со всех сторон на 10 пикселей. Ниже вы увидите такую конструкцию .usluga span это означат, что стили будут применяться ко всем элементам span находящимся в контейнере usluga, тут padding: 4px 10px; - означает внутренний отступ по 4 пикселя сверху и снизу и по 10 пикселей слева и справа, border-radius: 100%; - означает сто процентное скругление элемента, т.е. у нас получится круг. Сохраните файл и откройте файл index.html при помощи браузера, вы попали на главную страницу, нажмите в меню на кнопку услуги вы попадете на страницу с услугами.
Вот пожалуй на этом я и закончу очень кратенький курс по тому как создать сайт за пару часов, не изучая программирование. Теперь можете потренироваться сами и создать страничку с контактами. Для тех кого заинтересовала тема создания веб сайтов, то могу для начала посоветовать изучить по лучше html и css, после чего можно начать уже изучать php. Если вы не хотите вникать в программирование, то можно начать освоение бесплатных cms например таких как джумала и вордпресс. Все свои вопросы, пишите в комментарии.