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

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