Автор: admin

Урок 2. PHP. Структура проекта. Как правильно давать имена папкам и файлам. Списки и роли пользователей. Создаем собственный движок на PHP с нуля

Ссылка для скачивания материалов урока 2.

engine2.com

Видео урока.

22.05.2018
Урок 1. PHP. Форма входа. Создание своего движка на PHP.

Архив файлов урока можно скачать по ссылке ниже.

engine.com
Видео с урока.

18.05.2018

Категории

<?
include 'includes/sql.php';
$a=explode(',',$_POST['cat']);
print_r($a);
foreach($a as $k=>$v){
$d=mysql_query("insert into `cat` (`name`,`parent`) values ('$v','0') ");}
if ($d==true) echo 'true';

$d=mysql_query("select `id`,`name`,`parent` from `cat` where `parent`='0'");
var_dump($d);
while($l=mysql_fetch_assoc($d)){

?>
<ul>
<li><?= $l['name'];?></li>
<?$d2=mysql_query("select `id`,`name`,`parent` from `cat` where `parent`='{$l['id']}'");
while($l2=mysql_fetch_assoc($d2)){ ?>
<ul><li><?= $l2['name'];?>
<?$d3=mysql_query("select `id`,`name`,`parent` from `cat` where `parent`='{$l2['id']}'");
while($l3=mysql_fetch_assoc($d3)){ ?>
<ul><li><?= $l3['name'];?></li></ul>
<?}?>
</li></ul>
<?}?>
</ul>
<?}?>

<form method="post">
<input type='text' name='cat'>
<input type='submit' name='send'>
</form>

28.05.2016

Удаление пользователя с БД не подтвердивших email

$result4 = mysql_query ("SELECT avatar FROM users WHERE activation='0' AND UNIX_TIMESTAMP() - UNIX_TIMESTAMP(date) > 3600");//извлекаем аватарки тех пользователей, которые в течении часа не активировали свой аккаунт. Следовательно их надо удалить из базы, а так же и файлы их аватарок

if (mysql_num_rows($result4) > 0) {
$myrow4 = mysql_fetch_array($result4);	
do
{
//удаляем аватары в цикле, если они не стандартные
if ($myrow4['avatar'] == "avatars/net-avatara.jpg") {$a = "Ничего не делать";}
else {
  unlink ($myrow4['avatar']);//удаляем файл
  }
}
while($myrow4 = mysql_fetch_array($result4));
}
mysql_query ("DELETE FROM users WHERE activation='0' AND UNIX_TIMESTAMP() - UNIX_TIMESTAMP(date) > 3600");//удаляем пользователей из базы

28.05.2016

Загрузка аватарки на страницу

if (empty($_FILES['fupload']['name']))
{
//если переменной не существует (пользователь не отправил изображение),то присваиваем ему заранее приготовленную картинку с надписью "нет аватара"
$avatar = "avatars/net-avatara.jpg"; //можете нарисовать net-avatara.jpg или взять в исходниках
}

else 
{
//иначе - загружаем изображение пользователя
$path_to_90_directory = 'avatars/';//папка, куда будет загружаться начальная картинка и ее сжатая копия

  
if(preg_match('/[.](JPG)|(jpg)|(gif)|(GIF)|(png)|(PNG)$/',$_FILES['fupload']['name']))//проверка формата исходного изображения
   {	
   	 	
    $filename = $_FILES['fupload']['name'];
    $source = $_FILES['fupload']['tmp_name'];	
    $target = $path_to_90_directory . $filename;
    move_uploaded_file($source, $target);//загрузка оригинала в папку $path_to_90_directory

  if(preg_match('/[.](GIF)|(gif)$/', $filename)) {
  $im = imagecreatefromgif($path_to_90_directory.$filename) ; //если оригинал был в формате gif, то создаем изображение в этом же формате. Необходимо для последующего сжатия
  }
  if(preg_match('/[.](PNG)|(png)$/', $filename)) {
  $im = imagecreatefrompng($path_to_90_directory.$filename) ;//если оригинал был в формате png, то создаем изображение в этом же формате. Необходимо для последующего сжатия
  }
  
  if(preg_match('/[.](JPG)|(jpg)|(jpeg)|(JPEG)$/', $filename)) {
    $im = imagecreatefromjpeg($path_to_90_directory.$filename); //если оригинал был в формате jpg, то создаем изображение в этом же формате. Необходимо для последующего сжатия
  }
  
//СОЗДАНИЕ КВАДРАТНОГО ИЗОБРАЖЕНИЯ И ЕГО ПОСЛЕДУЮЩЕЕ СЖАТИЕ ВЗЯТО С САЙТА www.codenet.ru

// Создание квадрата 90x90
// dest - результирующее изображение 
// w - ширина изображения 
// ratio - коэффициент пропорциональности 

$w = 90;  // квадратная 90x90. Можно поставить и другой размер.

// создаём исходное изображение на основе 
// исходного файла и определяем его размеры 
$w_src = imagesx($im); //вычисляем ширину
$h_src = imagesy($im); //вычисляем высоту изображения

         // создаём пустую квадратную картинку 
         // важно именно truecolor!, иначе будем иметь 8-битный результат 
         $dest = imagecreatetruecolor($w,$w); 

         // вырезаем квадратную серединку по x, если фото горизонтальное 
         if ($w_src>$h_src) 
         imagecopyresampled($dest, $im, 0, 0,
                          round((max($w_src,$h_src)-min($w_src,$h_src))/2),
                          0, $w, $w, min($w_src,$h_src), min($w_src,$h_src)); 

         // вырезаем квадратную верхушку по y, 
         // если фото вертикальное (хотя можно тоже серединку) 
         if ($w_src<$h_src) 
         imagecopyresampled($dest, $im, 0, 0, 0, 0, $w, $w,
                          min($w_src,$h_src), min($w_src,$h_src)); 

         // квадратная картинка масштабируется без вырезок 
         if ($w_src==$h_src) 
         imagecopyresampled($dest, $im, 0, 0, 0, 0, $w, $w, $w_src, $w_src); 
     

$date=time(); //вычисляем время в настоящий момент.
imagejpeg($dest, $path_to_90_directory.$date.".jpg");//сохраняем изображение формата jpg в нужную папку, именем будет текущее время. Сделано, чтобы у аватаров не было одинаковых имен.

//почему именно jpg? Он занимает очень мало места + уничтожается анимирование gif изображения, которое отвлекает пользователя. Не очень приятно читать его комментарий, когда краем глаза замечаешь какое-то движение.

$avatar = $path_to_90_directory.$date.".jpg";//заносим в переменную путь до аватара.

$delfull = $path_to_90_directory.$filename; 
unlink ($delfull);//удаляем оригинал загруженного изображения, он нам больше не нужен. Задачей было - получить миниатюру.
}
else 
         {
     //в случае несоответствия формата, выдаем соответствующее сообщение
         
exit ("Аватар должен быть в формате <strong>JPG,GIF или PNG</strong>"); //останавливаем выполнение сценариев

       }
//конец процесса загрузки и присвоения переменной $avatar адреса загруженной авы
}

28.05.2016

Как сделать форму обратной связи во всплывающем окне
На многих сайтах устанавливаются формы обратной связи, чтобы пользователи могли оставить сообщение администратору не покидая сайт. Самым популярным, качественным и удобным в настройке и использовании является плагин Contact Form 7 — с его помощью можно создать любые контактные формы и не только. Поскольку плагин имеет большое количество различных форм и полей, то его можно использовать для многих задач. Я, например, использовал его для создания анкеты работодателя и соискателя на рекрутинговом сайте, для создания формы заказа товара на сайте по продаже только одной линии продукта, использовал этот плагин для создания сложной и объемной расчетной формы для строительного сайта, для самых различных форм обратной связи и прочих форм. Но речь не об этом, а о том, как же сделать, чтобы форма связи появлялась во всплывающем окне, чтобы можно было сделать кнопку вызова контактной формы на каждой странице, а не только на странице «Контакты»?

Все на самом деле не сложно, но понадобится еще один плагин с эффектом FancyBox, мне лично нравятся эти два плагина: Easy FancyBox или FancyBox for WordPress, есть различные похожие плагины, но любой из этих подходит отлично и еще позволяет открывать в popup изображения.

В общем, установлены два плагина: Contact Form 7 и Easy FancyBox, создана контактная форма, осталось добавить код в шаблон.

од вставляется в шаблон сайта в файлы .php!

Код с всплывающей контактной формой, установленный в коде файла шаблона:
```
<a href="#contact_form_pop" class="fancybox">заказать звонок</a>
<div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop">
        <?php echo do_shortcode('[ contact-form-7 id="420" title="Заказать звонок" ]'); ?>
    </div>
</div>
```
Это код самой кнопки вызова окна с формой, для этой кнопки можно задавать любые стили, и вставлять ее в любом месте шаблона:
```
<a href="#contact_form_pop" class="fancybox">заказать звонок</a>
```
Это код самого всплывающего окна, его можно оставить под кнопкой вызова окна, а можно убрать в футер для того, чтобы код контента был чище:
```
<div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop">
        <?php echo do_shortcode('[ contact-form-7 id="420" title="Заказать звонок" ]'); ?>
    </div>
</div>
```
Чтобы вызывать на одной странице несколько форм, нужно использовать различные id для вызова формы.

Пример вызова двух форм обратной связи в pop-up окне:
```
<a href="#contact_form_pop_1" class="fancybox">Вызываем форму 1</a>
<div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop_1">
        <?php echo do_shortcode('[ contact-form-7 id="420" title="Заказать звонок" ]'); ?>
    </div>
</div>
 
<a href="#contact_form_pop_2" class="fancybox">Вызываем форму 2</a>
<div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop_2">
        <?php echo do_shortcode('[contact-form-7 404 "Not Found"]'); ?>
    </div>
</div>
```
В данном случае для вызова нескольких форм обратите внимание на эти части кода:
```
<a href="#contact_form_pop_1" ...
<div id="contact_form_pop_1"> ...
 
и для второй формы:
 
<a href="#contact_form_pop_2" ...
<div id="contact_form_pop_2"> ...
```
13.05.2016

к 5 уроку

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>Блочная верстка</title>
  </head>
  <body>
  <div class="wrapper">
    <div id="header">
      <div class="logo"><a href="index.html">Ikurs</a></div>
    </div>
    <div id="nav">
      <nav>
        <ul>
          <li><a href="index.html">Главная</a></li>
          <li><a href="#">Услуги</a></li>
          <li><a href="#">Контакты</a></li>
        </ul>
      </nav>
    </div>
    <div id="content">
    
      <div class="sqr"></div>
    
    </div>
    <div id="sidebar">sidebar</div>
    <div id="footer">footer</div>
  </div>	
  </body>
</html>

style.css

/*Универсальный селектор 0 б*/
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body{
  font-family:Calibri,sans-serif;
  background:pink url(images/symphony.png) repeat;
  background-position:100% 50%;
}
/*Селекторы тегов (элементов) 2 б*/

.wrapper{
  max-width:960px;
  margin:0 auto;
}
#header,#footer,#nav{
  width:100%;
  float:left;
  background: rgba(0, 0, 0, 0.70);
  padding:10px 20px;
  border-bottom:#fff solid 2px;
}
#content{
  width:calc(100% - 300px);
  float:left;
  background:#eee url(images/webmaster.jpg) no-repeat;
  background-size:cover;
  background-position: 50% 50%;
  background-attachment:fixed;
  padding:10px 20px;
  height:700px;
  
}
#sidebar{
  width:300px;
  float:left;
  background:#ddd;
  padding:10px 20px;
}
/*Селекторы классов 10 б*/
.logo{
  text-align:center;
}
.logo a{
  color:#fff;
  font-size:30px;	
  text-decoration:none;
}
#nav li{
  float:left;
  margin: 10px 0;
}
#nav a{
  color:#000;
  padding:10px;
  text-decoration:none;
  background:#fff;
  border:2px transparent solid;
  
}
#nav a:hover{
  /*background:#fff;*/
  border:2px #333 solid;
}
#content{
  position:relative;
}
.sqr{
  width:100px;
  height:100px;
  background:red;
  position:absolute;
}


/*Селекторы идентификаторов 100 б*/

02.04.2016

Добавление и вывод постов в бд

Добавление Записи в базу данных postinput.php

if($_POST['send']=="отправить"){
$c=mysql_real_escape_string($_POST['content']);
//mysql_real_escape_string Экранирует специальные символы в строке, используемой в SQL-запросе, принимая во внимание кодировку соединения.
$query=mysql_query("INSERT INTO `posts` (`title`,`content`) VALUES ('{$_POST['title']}','{$c}') ");
if($query==true){
  $msg="Запись добавлена!";
}	

}  
?>
<?echo $msg;?>
<form action="" method="post">
<p>Заголовок: <input type="text" name="title"></p>
<p>Описание: <textarea cols="40" rows="20" name="content"></textarea></p>
<p><input type="submit" name="send" value="отправить"></p>
</form>

Вывод анонсов постов blog.php

<?echo $msg;?>
    <?	
    if(isset($_GET['id'])) $page=$_GET['id'];
        if($page<1){ $page=1;}
    $row=mysql_query("SELECT * FROM `posts`");
      $max_posts=3;
      $num_posts=mysql_num_rows($row);
      $num_pages=intval(($num_posts-1)/$max_posts)+1;
      /*кнопочки*/
      for($i=1;$i<=$num_pages;$i++){
        $i1="";
          if($i>1)$i1="?id=".$i;
        if($page==$i){
          
        echo "<a href='blog.php{$i1}' style='color:red;'>{$i} </a>";}
        else {echo "<a href='blog.php{$i1}' >{$i} </a>";}
        
      }
      /*****/
      
        if($page>$num_pages){ $page=$num_pages;}
        $c=($page-1)*$max_posts;
      $row1=mysql_query("SELECT * FROM `posts` ORDER BY `id` DESC LIMIT {$c},{$max_posts}");
        $res=mysql_fetch_assoc($row1);
      do {
        mb_internal_encoding("UTF-8");
        $content=mb_substr($res['content'],0,303) . "...";
          ?>
      <div class="anons">
      <div class="imgb"><img src="<?echo $res['img']?>"></div>
      <div class="r">
      <h3 class="titlea"><a href="<?echo "post.php?id=".$res['id']?>"><?echo $res['title'];?></a></h3>
      <div class="contenta"><?echo $content;?></div>
      <div class="bot"><div class="author"><a href=""><?echo $res['author']?></a></div><div class="date"><?echo $res['date']?>
    ><a href="<?echo "update.php?id=".$res['id']?>">Редактировать</a>
      <a href="<?echo "delete.php?id=".$res['id']?>&&del=1">Удалить</a>

Вывод одного поста post.php

<?$row=mysql_query("SELECT * FROM `posts` WHERE `id`='{$_GET['id']}'");
      $res=mysql_fetch_assoc($row);
if($_GET['del']=="1"){
$query1=mysql_query("DELETE FROM `posts` WHERE `id`='{$_GET['id']}'");
if($query1=true){
  $msg="Запись удалена!";
}	

} 				
          ?>
    <div id="content">
      <div class="block2">
      <div class="center">
      <div class="row fon2">
        <h1><span class="titl"><?echo $res['title'];?></span></h1>
      </div>
      </div>
      </div>
      
      <div id="block2">
      <div class="center">
      <div class="row">
      <div class="content">
    
    
      
      <div class="imgb"><img src="<?echo $res['img']?>"></div>
      
      
      <div class="contenta"><?echo $res['content'];?></div>
      <div class="bot"><div class="author"><a href=""><?echo $res['author']?></a></div><div class="date"><?echo $res['date']?>
      <a href="<?echo "update.php?id=".$res['id']?>">Редактировать</a>
      <a href="<?echo "delete.php?id=".$res['id']?>&&del=1">Удалить</a>
      </div>
      </div>
      
      
      
      </div>
      
      </div>
      </div>
      </div>
      
      
      
      
      
    </div>

14.03.2016

Шаблон главной страницы

@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css";
@import "animate.css";
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
body{
  background:url(images/crossword.png);
  font-family: 'calibri',sans-serif;
  font-size:1.25em;
  line-height:1.5em;
}
a{
  text-decoration:none;
}
#header,#content,#footer{
  width:100%;
  float:left;
  border:1px solid #FFF;
}
#header,#footer{
  background:rgba(0,0,0,0.7);
  
}
#content{
  margin-top:67px;
}
#up{
  position:fixed;
  width:50px;
  right:5%;
  bottom:5%;
}
.fix{
  position:fixed;
  top:0;
  left:0;
  width:100%;
}
h1,h2{
  text-align:center;
  margin:40px 0;
  border-bottom: 2px solid #ff0;
    line-height: 0;
  
}
.titl{
  background:#ff0;
  color:#000;
}
img{max-width:100%;
width:auto;
}

.center{
  max-width:1140px;
  margin:0 auto;
}
.font{
  font-size:1.5em;
  margin:5%;
  color:#ff0;
}
.cntr{
  text-align:center;
}
.row{
  padding:20px;
  width:100%;
  float:left;
}
.logo{
  float:left;
}
.logo a{
  color:#fff;
}
.menu{
  float:right;
}
.menu li{
  float:left;
}
.menu a{
  padding:25px 20px;
  /*background:#888;*/
  color:#fff;
}
.menu a:hover{
  background:#ff0;
  color:#000;
  
}
.block{
  background:url(images/02.jpg) no-repeat;
  background-attachment:fixed;
  background-size: cover;
  float: left;
    width: 100%;
  /*height: 100vh;*/
}
.block2{
  background:url(images/02.jpg) no-repeat;
  background-attachment:fixed;
  background-size: cover;
  float: left;
    width: 100%;
  /*height: 100vh;*/
}
.col-2{
  width:50%;
  padding:1%;
  float:left;
}
.col-3{
  width:33.3%;
  padding:1%;
  float:left;
}
.col-4{
  width:25%;
  padding:1%;
  float:left;
}
.fon{background:rgba(0,0,0,0.5);
  color:#fff;
  box-shadow: 0 0 109px rgb(0, 0, 0);
  height:100vh;
}
.fon2{background:rgba(0,0,0,0.5);
  color:#fff;
  box-shadow: 0 0 109px rgb(0, 0, 0);
  
}
.head{
  margin:15vh 0;
}
.btnred{
  text-align: center;
    background: #EA1124;
    padding: 10px 20px;
    width: 200px;
    margin: 0 auto;
  transition:0.5s;
}
.btndark{
  text-align: center;
    background: #484848;
    padding: 10px 20px;
    width: 200px;
    margin: 0 auto;
  transition:0.5s;
}
.btnred:hover,.btndark:hover{
  background: #eee;
  color:#000;
  
}
#zakaz{
  padding:20px 0;
  background:url(images/12.jpg) no-repeat;
  background-size:cover;
  background-attachment:fixed;
  float:left;
  width:100%;
}
#portfolio .col-4{
  height:150px;
  transition:3s;
}
#block2{
  text-align:center;
  }
#block3{
  margin: 40px 0;
    text-align: center;

}
input{
  width:100%;
  height:50px;
  font-size:20px;
  padding:10px;
  
}
input[type=submit]{
  background: #EA1124;
    padding: 10px 20px;
    width: 100%;
    margin: 0 auto;
  transition:0.5s;
  color:#fff;
  font-size:20px;
}
.blur img,.bw img,.sepia img,.contrast img
{transition:3s;position:relative;-webkit-filter: grayscale(80%);}
.blur img:hover {
-webkit-filter: grayscale(0%);
transform:rotate(360deg) scale(2) translate(100px);
z-index:1;
}
.bw img:hover {
-webkit-filter: grayscale(0%);
transform:rotateY(360deg) scale(4) translate(-100px);
z-index:1;
}

.icon{
  font-size:50px;
  margin:20px;
  text-align:center;
}

.i1{
  animation:i1 3s 0s;
  
  
}
.i2{
  
  animation:i2 3s 0s;
}
.i3{
  
  animation:i3 3s 0s;
}
@keyframes i1{
  0%{transform:translate(-100%);}
  100%{transform:translate(0%);}
}
@keyframes i2{
  0%{transform:translateY(-100%);}
  100%{transform:translateY(0%);}
}
@keyframes i3{
  0%{transform:translate(100%);}
  100%{transform:translate(0%);}
}
.sidebar{
  float:left;
  width:300px;
}
.contentr{
  float:left;
  width:calc(100% - 300px);
}
ul{list-style:none;}

.ms a{
  background:#444;
  padding:10px 20px;
  color:#FFF;
  display:block;
  border-bottom:1px solid #eee;
  transition:0.5s;
}
.ms a:hover{
  padding:10px 20px 10px 40px;
  background:#666;
}
.mslist{
  position:relative;
  transition:3s;
}
.mslist:after{
  content:" ";
  border-left:10px solid #fff;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  position:absolute;
  top:20px;
  right:10px;
  transition:0.5s;
  
}
.mslist:hover:after{
  transform:rotate(180deg);
}
.msdrop{
  position:absolute;
  top:0;
  left:100%;
  width:100%;
  display:none;
}
.mslist:hover .msdrop {
  display:block;
}

HTML

<html>
 <head>
 <meta charset="utf-8">
 <title>Блочная верстка</title>
 <link rel="stylesheet" href="style.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 </head>
 <body>
 <div id="header" class="fix">
 
 <div class="center">
 <div class="row">
 <div class="logo animated bounceInLeft"><a href="index.html"><h3>IWebmaster.kz</h3></a></div>
 <div class="menu">
 <ul>
 <li><a href="">Меню1</a></li>
 <li><a href="">Меню2</a></li>
 <li><a href="">Меню1</a></li>
 <li><a href="">Меню1</a></li>
 </ul>
 </div>
 </div>
 </div>
 
 </div>
 <div id="content">
 <div class="block">
 <div class="center">
 <div class="row fon">
 <h1 class="head"><span class="titl">Академия IWebMaster.kz</span></h1>
 <h3 class="cntr">IWebMaster.kz - компания, обьединившая в себе талантливых профессиональных подрядчиков, они качественно и в срок исполнят любое задание по самым оптимальным ценам! <br></h3>
 <p class="cntr font"><span>Оставьте заявку и мы разработаем вам отличный сайт!</span></p>
 <div class="col-2"><div class="btnred i1">Заказать сайт</div></div>
 <div class="col-2"><div class="btndark i3">Вход/регистрация</div></div> 
 
 
 </div>
 </div>
 </div>
 
 <div id="block2">
 <div class="center">
 <div class="row">
 <div class="col-3">
 <div class="icon mov1"><i class="fa fa-envelope-o"></i></div>
 <h3>Оставьте заявку</h3>
 <p>Зарегестрируйтесь в профиле и оставьте заявку<p>
 </div>
 <div class="col-3">
 <div class="icon mov2"><i class="fa fa-cogs"></i></div>
 <h3>Конкурс</h3>
 <p>Web-мастера рассмотрят вашу заявку, предложат свою цену за разработку сайта!<p>
 </div>
 <div class="col-3">
 <div class="icon mov3"><i class="fa fa-check"></i></div>
 <h3>Свобода выбора</h3>
 <p>Выберите своего Web-мастера, учитывая предложенную им цену и его профиль!<p>
 </div>
 </div>
 </div>
 </div>
 
 <div id="portfolio">
 <div class="center">
 <div class="row">
 <h2><span class="titl">Наши работы</span></h2>
 <div class="col-2 mov1">
 <img src="images/2.jpg">
 </div>
 <div class="col-4 mov3">
 <img src="images/5.jpeg">
 </div>
 <div class="col-4 mov3">
 <img src="images/6.jpeg">
 </div>
 <div class="col-4 mov3">
 <img src="images/7.jpeg">
 </div>
 <div class="col-4 mov3">
 <img src="images/8.jpeg">
 </div>
 
 </div> 
 </div> 
 </div>
 <div id="block3">
 <div class="center">
 <div class="row">
 <div class="col-4">
 <div class="icon mov1"><i class="fa fa-envelope-o"></i></div>
 <h3>Оставьте заявку</h3>
 <p>Зарегестрируйтесь в профиле и оставьте заявку<p>
 </div>
 <div class="col-4">
 <div class="icon mov2"><i class="fa fa-cogs"></i></div>
 <h3>Конкурс</h3>
 <p>Web-мастера рассмотрят вашу заявку, предложат свою цену за разработку сайта!<p>
 </div>
 <div class="col-4">
 <div class="icon mov3"><i class="fa fa-check"></i></div>
 <h3>Свобода выбора</h3>
 <p>Выберите своего Web-мастера, учитывая предложенную им цену и его профиль!<p>
 </div>
 <div class="col-4">
 <div class="icon mov2"><i class="fa fa-cogs"></i></div>
 <h3>Конкурс</h3>
 <p>Web-мастера рассмотрят вашу заявку, предложат свою цену за разработку сайта!<p>
 </div>
 </div>
 </div>
 </div>
 <div id="zakaz">
 <div class="center fon2">
 <div class="row">
 <form>
 <div class="col-3"><input type="text" name="name" placeholder="Введите Имя"></div>
 <div class="col-3"><input type="tel" name="tel" placeholder="Введите телефон"></div>
 <div class="col-3"><input class="btnred" type="submit" name="submit" value="Заказать звонок"></div>
 </form> 
 
 
 
 </div>
 </div>
 </div>
 
 
 
 </div>
 <div id="footer">
 <div class="center">
 <div class="row">
 Футер
 </div>
 </div>
 </div>
 <div id="up"><a href="#"><img src="images/up.png"></a></div>
 <script>$(window).scroll(function() {
 $('.mov1').each(function(){
 var imagePos = $(this).offset().top;
 var topOfWindow = $(window).scrollTop();
 if (imagePos < topOfWindow+500) {
 $(this).addClass('i1');
 }
 });
 $('.mov2').each(function(){
 var imagePos = $(this).offset().top;
 var topOfWindow = $(window).scrollTop();
 if (imagePos < topOfWindow+500) {
 $(this).addClass('i2');
 }
 });
 $('.mov3').each(function(){
 var imagePos = $(this).offset().top;
 var topOfWindow = $(window).scrollTop();
 if (imagePos < topOfWindow+500) {
 $(this).addClass('i3');
 }
 });
 
 $('.mov4').each(function(){
 var imagePos = $(this).offset().top;
 var topOfWindow = $(window).scrollTop();
 if (imagePos < topOfWindow+500) {
 $(this).addClass('bounceInLeft');
 }
 });
 
 });
</script>
 </body>
</html>

17.02.2016

Теги HTML

Название	Свойство	Описание
<p> абзац </p>	блочный тег	Определяет текстовый абзац. Тег <p> является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.
<br>	Строчный тег	Тег <br> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега абзаца <p>, использование тега <br> не добавляет пустой отступ перед строкой. Если текст, в котором используется перевод строки, обтекает плавающий элемент, то с помощью атрибута clear тега <br> можно сделать так, чтобы следующая строка начиналась ниже элемента.
<strong>Жирный Текст</strong>	Строчный тег	Тег <strong> предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.
<em>Курсивный текст</em>	Строчный тег	Тег <em> предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.
<h1>Заголовок 1</h1> <h2>Заголовок 2</h2> <h3>Заголовок 3</h3> <h4>Заголовок 4</h4> <h5>Заголовок 5</h5> <h6>Заголовок 6</h6>	блочный тег	HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h1> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h1>,…,<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.
<ul> Маркированный список </ul>	блочный тег	Тег <ul> устанавливает маркированный список. Каждый элемент списка должен начинаться с тега <li>. Если к тегу <ul> применяется таблица стилей, то элементы <li> наследуют эти свойства. <ul> <li>элемент маркированного списка</li> </ul>
<ol>Маркированный список</ol>	блочный тег	Тег <ol> устанавливает нумерованный список. Каждый элемент списка должен начинаться с тега <li>. Если к тегу<ol> применяется таблица стилей, то элементы <li> наследуют эти свойства. <ol> <li>элемент нумерованного списка</li> <li>элемент нумерованного списка</li> </ol>
<li>список</li>	блочный тег	Тег <li> определяет отдельный элемент списка. Внешний тег <ul> или <ol> устанавливает тип списка — маркированный или нумерованный. <ul> <li>элемент маркированного списка</li> </ul> <ol> <li>элемент нумерованного списка</li> </ol>
<hr>	блочный тег	Рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера. Тег<hr> относится к блочным элементам, линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке.
<a>Ссылка</a>	Строчный тег	Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы. Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта. <a href=»tip.html»>Как сделать такое же фото?</a>
<img>	Строчный тег	Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border=»0″ в тег <img>.
<table>Таблица </table>	блочный тег	Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. <table> <tr> <td>…</td> </tr> </table>
<tr>Строка</tr>		Тег <tr> служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега <th> или <td>.
<td>Столбец</td>		Предназначен для создания одной ячейки таблицы. Тег <td> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.
<th>Заголовок</th>		Тег <th> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. Тег <th> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>. <table> <tr> <th>…</th> </tr> </table>
<caption>Название таблицы</captiom>	блочный тег	Тег <caption> предназначен для создания заголовка к таблице и может размещаться только внутри контейнера<table>, причем сразу после открывающего тега. Такой заголовок представляет собой текст, по умолчанию отображаемый перед таблицей и описывающий ее содержание.
<span>Выделенная информация</span>	Строчный тег	Тег <span> предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как <table>, <p> или <div>, с помощью тега <span> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега <p>) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <span> и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибутclass или id с именем селектора.

04.02.2016