Преодолеть барьер очень просто:
1) загрузить и установить PSPad
2) открыть и написать первые два тега
<html></html>сразу возьмите за правило - парные теги писать сразу
3) в середине этих тегов напишите еще пару тегов:
<head></head>
<body></body>
1 В начале сотворил Бог небо и землю.
2 Земля же была безвидна и пуста, и тьма над бездною, и Дух Божий носился над водою.
3 И сказал Бог: да будет свет. И стал свет.
4 И увидел Бог свет, что он хорош, и отделил Бог свет от тьмы.
5 И назвал Бог свет днем, а тьму ночью. И был вечер, и было утро: день один.
в блоке тегов
head
напишите еще пару тегов
style
и у вас получится:
<html>
<head>
<style>
</style>
</head>
<body></body>
</html>
И задайте как Бог ваш свет, т.е. в CSS поиграйтесь с цветами и "фокусами"
<html>
<head>
<style>
* {
word-wrap: break-word;
margin: 0px;
padding: 0px;
}
html, body{
width: 100%;
height: 100%;
margin:0;
padding:0;
}
body {
position: fixed;
background: linear-gradient(top, #418ac7 0%, #fafeff 100%);
background: -moz-linear-gradient(top, #418ac7 0%, #fafeff 100%);
background: -o-linear-gradient(top, #418ac7 0%, #fafeff 100%);
background: -ms-linear-gradient(top, #418ac7 0%, #fafeff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#418ac7), color-stop(100%,#fafeff));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#418ac7), to(#fafeff));
background: -webkit-linear-gradient(top, #418ac7 0%, #fafeff 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#418ac7', endColorstr='#fafeff');
}
</style>
</head>
<body></body>
</html>
Теперь пора создавать "землю" ))
в
style измените css body добавьте картинку вашей Земли:
body {
background: #635328 url('http://img.urodaizdrowie.pl/wp-content/uploads/2013/03/globe.jpg') fixed top center no-repeat;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-khtml-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
}
теперь озвучьте ваш проект, что-то написав на своей странице, но сразу возьмите за правило, любой текст, должен быть читаемым. Поэтому надо задать цвет. И не просто цвет, но и тень (иначе текст может слится с фоновой картинкой).
в css добавьте для текста оформление:
p {
color: white;
text-shadow: 0 0 2px #000;
}
Используйте резко контрастирующие цвета текста и обводки, например черный текст - белая обводка, белый текст - черная обводка, желтый текст - синяя обводка.
ну и так далее…
Верстка это творчество, лишь слегка притянуто к математике ))
Всего вам доброго, новый Бог!
