HTML визитка

К оглавлению

Итак! Сейчас Мы с Вами сделаем простую, но симпатичную визитку ;)

Начнем с HTML - верстки нашей визитки. Но, т.к. мы с Вами обучаемся, этот урок, отличный шанс использовать комбинацию HTML + PHP. Так мы и поступим:

<?
// Переменные с данными для визитки
$company_logo = 'img/logo_black.png'; // Не забываем закачать картиночку
$company_description = 'Создание любых видов сайтов';
$company_site = 'DKrylov.com';
$company_email = 'mail@dkrylov.com';
?>
<HTML>
	<HEAD>
		<TITLE>DKrylov.com - Создание любых видов сайтов</TITLE>
		<!--В данном примере, нам понадобятся только CSS стили-->
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<!--Мета тэг, для определения кодировки сайта, об этом поговорим позже-->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</HEAD>
	<BODY>
		<!--Общий контейнер, в который мы обертываем все остальные-->
		<div class="wrap">
			<img src="<?echo $company_logo;?>">
				<span class="company_description">
					<?echo $company_description;?>
				</span>
			<!--Тэг <hr /> создает линию-->
			<hr />
			<!--
				Блок, который располагается под блоком с логотипом и описанием
				В нем мы будем писать информацию о компании :D
			-->
			<div class="main_info">
				<span class="site">
					<?echo $company_site;?>
				</span>
				<span class="info">
					<span class="sized">
						E-mail:
					</span>
					<strong><i>mail@dkrylov.com</i></strong>
					<br />
				</span>
			</div>
		</div>
	</BODY>
</HTML>

Шаг 2. CSS стили. Зададим стили для нашей визитки. В написании CSS стилей, Вам наверняка понадобится очень полезный инструмент - HTML коды цветов.

/*-----Делаем фон нашего-----*/
body {
	background: #E6E6E6;
}
/*-----Главный контейнер-----*/
.wrap {
	margin: 20% auto; /* Делаем визитку по центру страницы */
	width: 500px; /* Ширина визитки */
	height: 200px; /* Высота визитки */
	padding: 30px; /* Внутренние отступы для красоты */
	background: #FFFFFF; /* Фон визитки, в данном случае - белый */
	/*
	3 строчки ниже это тень вокруг визитки
	Каждая строчка для разных браузеров, использование этих 
	строк делает тень кроссбраузерной
	*/
	-webkit-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 1);
	-moz-box-shadow:    0px 0px 30px 0px rgba(50, 50, 50, 1);
	box-shadow:         0px 0px 30px 0px rgba(50, 50, 50, 1);
	/*
	Так же 3 строчки для обеспечения кроссбраузерности
	свойства закругленных углов
	*/
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}
/*-----Стили логотипа-----*/
.wrap img {
	vertical-align: middle; /* Для отображения описания по центру от изображения */
	width: 150px;
}
/*-----Разделяющая линия-----*/
.wrap hr {
	margin-top: 20px; /* Делаем отступ сверху для линии */
}
/*-----Блок с описанием компании-----*/
.company_description {
	margin-left: 100px; /* Отступ слева(от изображения) */
	font-size: 18px; /* Размер шрифта */
	font-weight: 900; /* Жирность шрифта */
	font-style: italic; /* Наклон шрифта */
}
/*-----Блок основной информации-----*/
.main_info {
	margin-top: 20px;
}
/*-----Блок со ссылкой на сайт-----*/
.site {
	font-weight: 900;
	font-size: 30px;
}
/*-----Позиционирование блока с информацией-----*/
.info {
	float: right; /* Прижать к правому краю */
}
/*-----Стиль для увеличения текста надписи "E-mail"-----*/
.sized {
	font-size: 18px;
}

Не забывайте одну вещь: Обязательно! комментируйте свой код. Приучайтесь это делать с самого начала, потому что потом, когда будут большие проекты, Вы сами запутаетесь в своем коде.

Вот так получиться если у Вас будет не верная кодировка:

А вот так должно получиться если все сделано правильно, и кодировка установлена верная:

Очень важно научиться изначально ставить одинаковые кодировки во всех файлах.

Более подробно читайте в уроке: Что такое кодировка файла.

Скачать коды урока