Веб-программирование. Как создать свой сайт?

Веб-программирование- это сфера деятельности, в которой занимаются созданием различных сайтов.
Звучит это не особо сложно, но подождите немного. Вы, наверное, можете подумать, что сделать сайт это просто, взять картинки, текст и поместить на страницу. Это заблуждение. Часто для этого не достаточно одного человека.

Процесс создания Web-страницы очень не прост.
Во-первых, надо создать макет сайта (нарисовать его внешний вид).
Во-вторых, уже по макету создавать структуру сайта, используя при этом языки программирования.
В-третьих, надо поместить уже готовый сайт на сервер, чтобы другие пользователи могли посетить его.

Давайте по порядку. Что нужно для создание несложного веб сайта:
 1. Знание Html
 2. Знание CSS
 3. Тема для самого сайта

Давайте разберем все пункты.
Html— HyperText Markup Language- язык гипертекстовой разметки. Посредством языка создается скелет сайта . Иными словами, вы с помощью Html создаете области сайта: шапку сайта, новостной блок, сайдбары и т.д.

CSS-Cascading Style Sheets- каскадные таблицы стилей. Этот язык программирования служит для качественного оформления.
Снизу приведен пример простого сайта-блога. В будущих статьях, если вы поддержите тему, мы будем продолжать рассказывать вам о создании сайтов, но более расширенно.

Здесь представлен шаблон сайта: html
<!DOCTYP html>
<html>
 <head> <meta charset="utf-8">
  <title>Название вкладки</title>
  <link rel="icon" href="Иконка папки вставьте свое изображение">
  <link rel="stylesheet" type="text/css" href="test_style1.css">
  <style> .fig { text-align: center;  } </style>
 </head>
<body>
 <header class="section">
  <p class="fig">
  <img class="img-circle" src="20_$AD_17.png" width="600" height="500" alt="" align= center>
  </p>
 </header>
<div class= "section1">
 <h1 align= center></h1>
 <h1 align= center>Свой текст</h1> </div>
<div class= "content">
 <div style="width: 1000%;" ></div>
  <div class="section6">
   <div class= "section2" style="float: left;height:;" >
    <p alt="" align= center>
     <a href="Ссылка"><img src="Картинка" width="200px"   height="200px" alt="">
     </a>
    <h1 align= center>Свой текст</h1>
   </div>
  <div class= "section3" style="float: left;height:;">
   <h1 align= center>Свой текст</h1>
   <h2 align= center>Свой текст</h2>
   <h2 align= center>Свой текст</h2>
  </div>
 </div>
<div class="section7" float:  right;> <div class= "section4" style="float: left ;height:;">
 <h1 align= center>Свой текст</h1>
 <h2 align= center>Свой текст</h2>
 <h2 align= center>Свой текст</h2>
 </div>
 <div class= "section5" style="float: left; height:400Px;">
  <h1 align= center>Свой текст</h1>
  <iframe width="100%" height="75%" src="Ссылка на видио" frameborder="0" allowfullscreen></iframe>
 </div>
 </div>
 </div>
 <div class="footer">
 <div>
  <p>
   <a href="https://vk.com/about_1_everything"><img src="112.png" width="50"    height="50" alt="Пример"></a>
   <a href="Ссылка на инстаграмм"><img src="icon-inst.png" width="50"    height="50" alt="Пример"></a>
   <a href="mailto:Гугл"> <img src="icon-Gmail.png" width="50"    height="50" alt="Пример"></a>
 </p>
<div id= "prava">
 <h4 align= right>Все права защищены '2016'</h4>
</div>
</div>
</div>
</div>
</body>
</html>
CSS файл сохранить, как test_style1.css
body {
 h1color: black;}
body {
h1color: black;
color:black ;
background: url(glass.jpg) no-repeat;
-moz-background-size: 100%;
/* Firefox 3.6+ */ -webkit-background-size: 100%;
/* Safari 3.1+ и Chrome 4.0+ */ -o-background-size: 100%;
/* Opera 9.6+ */ background-size: cover; /* Современные браузеры */
background-attachment: fixed }
h2{color:white;}
.section {
background:rgba(255, 255, 255, 0.4);
padding: 8px;
margin-bottom: 1px;
border-radius: 25px;
width:1000px;
margin:0 auto;
margin-bottom: 10px;
}
.section1 {
background:rgba(255, 255, 255, 0.4);
padding: 8px;
margin-bottom: 1px;
border-radius: 25px;
width: 1000px;
margin:0 auto;
margin-bottom: 10px;
}
/*НОВОСТНЫЕ СЕКЦИИ*/
.section2 {
background:rgba(255, 255, 255, 0.4);/* цвет фона! 0.7- его прозрачность*/
padding: 3px;
margin-bottom: 1px;
border-radius: 25px;
width:500px;
margin:0 auto;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 10px;
display: inline-block;
}
.section3 {
background:rgba(255, 255, 255, 0.4);
padding: 3px;
margin-bottom: 1px;
border-radius: 25px;
width:500px;
margin:0 auto;
margin-bottom: 10px;
display: inline-block;
}
.section4 {
background:rgba(255, 255, 255, 0.4);
padding: 3px;
margin-bottom: 1px;
border-radius: 25px;
width:500px;
margin:0 auto;
margin-bottom: 10px;
display: inline-block;
}
.section5 {
background:rgba(255, 255, 255, 0.4);
padding: 3px;
margin-bottom: 1px;
border-radius: 25px;
width:500px;
margin:0 auto;
margin-bottom: 10px;
display: inline-block;
}
/*КОНЕЦ НОВОСТНЫХ СЕКЦИЙ*/
.content {
margin:0 auto;
overflow: hidden; /*Силой магии держит футер в низу, а не на новостях*/
width: 1025px;
margin:0 auto; }
.section6{
/*background:rgba(255, 98, 0, 0.7); ЭТО ЦВЕТ ДЛЯ НАГЛЯДНОСТИ*/
margin-bottom: 1px;
border-radius: 25px;
width:512px;
margin:0 auto;
display: inline-block;
height:;
vertical-align:top;
}
.section7{
/*background:rgba(255, 98, 0, 0.7); ЭТО ЦВЕТ ДЛЯ НАГЛЯДНОСТИ*/
margin-bottom: 1px;
border-radius: 25px;
width:512px;
margin:0 auto;
display: inline-block;
height:;
float: right;
}
/*Начинается футтер*/
.footer {
background:rgba(170, 170, 170, 0.6); /* Цвет фона */
position: relative; /* Фиксированное положение */
left: 0; bottom: 0; /* Левый нижний угол */
padding: 10px; /* Поля вокруг текста */
color: #fff; /* Цвет текста */
width: 100%; /* Ширина слоя */
margin-left: 0px;}
body, html {
/*ЭТО ПРИЖИМАЕТ ФУТЕР ПО ВСЕМУ НИЗУ*/
margin:0px;
padding:0px;
height: 100%;
width: 100%;
}
.content {
min-height: calc(50vh - 80px);/*Тоже прижимает футер к низу.*/
}#prava{ margin-right: 1%;}

© 2017 — 2018, 20_SAD_17. Все права защищены.

Стрижка пикси http://ketrin-moda.ru/stilnaya-strizhka-piksi-2018-obrazy-foto/ . Новинки 2018 года с фото

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