Блог

  • Php урок 12. Функция замены строк.

    Функция замены строк str_replace()

    str_replace Заменяет все вхождения строки поиска на строку замены.

    Описание функции:

    mixed str_replace ( mixed $search , mixed $replace , mixed $subject [, int &$count ] )

    Эта функция возвращает строку или массив, в котором все вхождения search в subject заменены на replace.

    search

    Искомое значение, также известное как needle (иголка). Для множества искомых значений можно использовать массив.

    replace

    Значение замены, будет использовано для замены искомых значений search. Для множества значений можно использовать массив.

    subject

    Строка или массив, в котором производится поиск и замена, также известный как haystack (стог сена).

    Если subject является массивом, то поиск с заменой будет осуществляться над каждым элементом subject, а результатом функции также будет являться массив.

    count

    Если передан, то будет установлен в количество произведенных замен.

    Возвращаемые значения

    Эта функция возвращает строку или массив с замененными значениями.

    Примеры использования функции:

    <?
    $name = "Александр";
    $str = "Здравствуйте &n. Спешим вас обрадовать что ваш заказ был успешно оформлен.<br> &n, если вы хотите учавствовать в акции нашего магазина пройдите по <a href=''>ссылке</a>.<br> &n, мы всегда рады вам в нашем магазине, ждем вашего визита :)";
    echo str_replace('&n', $name, $str);
    ?>

    Этот код выведет:

    Здравствуйте Александр. Спешим вас обрадовать что ваш заказ был успешно оформлен.
    Александр, если вы хотите учавствовать в акции нашего магазина пройдите по ссылке.
    Александр, мы всегда рады вам в нашем магазине, ждем вашего визита :)

    Создание поискового робота

     

    <?php
    mysql_connect("localhost","root","");
    mysql_select_db("google");
    
    $doc = new DOMDocument();
    
    $doc->loadHTMLFile("http://personal24.kz/karaganda/");
    //Навигация по аттрибутам
    $elements=$doc->getElementsByTagName('a');
    
    if(!is_null($elements))
    {
      foreach($elements as $element){
        
      echo $href=$element->getAttribute("href");
      if(strpos($href,"#")===false)
        mysql_query("insert into `links` (`link`) values ('{$href}');");
      }
    }
    
    $table=mysql_query("select * from `links`");
    
    while($r=mysql_fetch_array($table))
    {
    $doc->loadHTMLFile($r['link']);
    //Навигация по аттрибутам
    $elements=$doc->getElementsByTagName('a');
    
    if(!is_null($elements))
    {
      foreach($elements as $element){
        echo $href=$element->getAttribute("href");
        if(strpos($href,"#")===false)
          mysql_query("insert into `links` (`link`) values ('{$href}');");
      }
    }
    
    
    $elements = $doc->getElementsByTagName('title');
    $title="";
    if(!is_null($elements))
    {
      foreach($elements as $element){
        $nodes=$element->childNodes;
        foreach ($nodes as $node){
          echo $title.=$node->nodeValue;
        }
      }
    }	
    $elements = $doc->getElementsByTagName('h1');
    
    $h1="";
    if(!is_null($elements))
    {
      foreach($elements as $element){
        $nodes=$element->childNodes;
        foreach ($nodes as $node){
          echo $h1.=$node->nodeValue;
        }
      }
    }	
    
      
    mysql_query("update `links` set `h1`='{$h1}',
    `title`='{$title}',`status`='1' where `id`='{$r['id']}'");
    
    }
    
    
    ?>
    

     

     

  • HTML Урок 6. Работа с фоном css

    При помощи CSS-позиционирования вы можете разместить элемент точно в нужном месте страницы. Вместе с поплавками позиционирование даёт вам большие возможности для создания точного и навороченного дизайна.В этом уроке мы обсудим следующее:

    Принципы CSS-позиционирования
    Абсолютное позиционирование
    Относительное позиционирование

    Принципы CSS-позиционирования

    Представим окно браузера как систему координат:

    figure017

    Принципы CSS-позиционирования — в том, что вы можете расположить бокс в

    системе координат где угодно.
    Скажем, мы хотим позиционировать заголовок. При использовании боксовой модели (см.
    Урок 9) заголовок выглядит так:

    figure018

    Если мы хотим расположить его на 100px от верхней границы документа и на 200px
    слева, мы должны ввести следующий код CSS:

    h1 {
    position:absolute;
    top: 100px;
    left: 200px;
    }

    Вот результат:

    figure019

    Как видите, Позиционирование с помощью CSS — очень точная техника приразмещении элементов. Это намного проще, чем использовать таблицы, прозрачные изображения или ещё что-нибудь подобное.

    Абсолютное позиционирование

    Элемент, позиционированный абсолютно, не получает никакого пространства в
    документе. Это означает, что после позиционирования он не оставляет после себя
    пустое пространство.
    Для абсолютного позиционирования элемента свойство position
    должно иметь значение absolute. Вы можете использовать значения left, right, top
    и bottom для размещения бокса.
    В качестве примера абсолютного позиционирования мы разместим 4 бокса в углах
    документа:

    #box1 {
    position:absolute;
    top: 50px;
    left: 50px;
    }
    
    #box2 {
    position:absolute;
    top: 50px;
    right: 50px;
    }
    
    #box3 {
    position:absolute;
    bottom: 50px;
    right: 50px;
    }
    
    #box4 {
    position:absolute;
    bottom: 50px;
    left: 50px;
    }

    Относительное позиционирование

    Чтобы позиционировать элемент относительно, установите в свойстве position
    значение relative. Разница между относительным абсолютным
    позиционированием состоит в том, как обсчитывается позиционирование.
    Позиция элемента, размещаемого относительно, обсчитывается
    относительно его оригинальной позиции в документе. Это означает, что вы
    смещаете элемент вправо, влево, вверх или вниз. Таким образом, элемент всё ещё
    занимает в документе пространство после позиционирования.
    Как пример относительного позиционирования попробуем разместить три рисунка
    относительно их оригинального расположения на странице. Обратите внимание, что
    рисунки оставили после смещения пустое пространство на своих оригинальных
    позициях в документе:

    #dog1 {
    position:relative;
    left: 350px;
    bottom: 150px;
    }
    #dog2 {
    position:relative;
    left: 150px;
    bottom: 500px;
    }
    
    #dog3 {
    position:relative;
    left: 50px;
    bottom: 700px;
    }

    Наслоение с помощью z-index (Слои)

    CSS оперирует в трёх измерениях — высота, ширина и глубина. Мы работали в
    двух измерениях на протяжении всех предшествующих уроков.
    В этом уроке мы научимся создавать слои/layers. Коротко говоря — упорядочивать
    элементы так, чтобы они перекрывались.
    Для этого вы можете присвоит каждому элементу номер (z-index).
    Элемент с бóльшим номером перекрывает элемент с меньшим номером.
    Скажем, мы играем в покер и у нас — royal flush. Наша «рука» должна быть
    представлена так, чтобы каждая карта имела z-index:

    figure020

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

    #ten_of_diamonds {
    position: absolute;
    left: 100px;
    top: 100px;
    z-index: 1;
    }
    
    #jack_of_diamonds {
    position: absolute;
    left: 115px;
    top: 115px;
    z-index: 2;
    }
    
    #queen_of_diamonds {
    position: absolute;
    left: 130px;
    top: 130px;
    z-index: 3;
    }
    
    #king_of_diamonds {
    position: absolute;
    left: 145px;
    top: 145px;
    z-index: 4;
    }
    
    #ace_of_diamonds {
    position: absolute;
    left: 160px;
    top: 160px;
    z-index: 5;
    }

    Это относительно простой метод, но в нём заложены большие возможности. Вы
    можете размещать текст над изображением, изображение над текстом и т. д.

    Слои можно использовать в различных ситуациях. Например, попробуйте
    использовать z-index для эффектов с заголовками вместо создания
    этих заголовков как графических элементов. С одной стороны, текст загружается
    быстрее, а с другой — потенциально улучшается работа поисковых машин.

    ФОНОВОЕ ИЗОБРАЖЕНИЕ С РАЗМЫТИЕМ И ЗАТЕМНЕНИЕМ.

    Для работы с фоновым изображением к которому применены стили размытия прозрачности и изменена яркость необходимо создать div в котором будет размещено изображение. Див должен быть абсолютно позиционирован или fixed позиционирован. Для него необходимо использовать z-index =1. А для других дивов использовать z-index с большим значением.

     Z-index — это стиль, который позволяет задавать положение тегов одного над другим. Теги с большими значениями z-index располагаются выше остальных.

    opacity:0.8; -задает прозрачность объекта от 0 прозрачный до 1 не прозрачный.

      -webkit-filter: blur(5px) brightness(0.8);
      -moz-filter: blur(5px) brightness(0.8);
      -o-filter: blur(5px) brightness(0.8);
      -ms-filter: blur(5px) brightness(0.8);
      filter: blur(5px) brightness(0.8);

    blur  и brightness задают размытие и яркость изображения и являются значениями стиля  фильтр.

    Приставки webkit moz 0 ms используютя для совместимости с различнными браузерами.

    Используйте таблицу стилей для создания прозрачного затемненного фонового изображения.

    .background-image {
      position: absolute;
      left: 0;
      right: 0;
      z-index: 1;
      opacity:0.8;
      display: block;
      background-image: url('images/londres.jpg');
      background-size:100%;
      width: 100%;
      height: 1200px;
      background-color:black;	
      -webkit-filter: blur(5px) brightness(0.8);
      -moz-filter: blur(5px) brightness(0.8);
      -o-filter: blur(5px) brightness(0.8);
      -ms-filter: blur(5px) brightness(0.8);
      filter: blur(5px) brightness(0.8);
       }
    
  • HTML Урок 7. Транзакции и размеры

    transition

    Универсальное свойство, которое позволяет одновременно задать значения transition-property, transition-duration,transition-timing-function и transition-delay. Устанавливает эффект перехода между двумя состояниями элемента, они могут быть определены с помощью псевдоэлемента :hover или :active, а также динамически через JavaScript.

    <переход> = [ none | <transition-property> ] || <transition-duration> || 
    <transition-timing-function> || <transition-delay>
    
    transition:all 0s ease 0s - значение по умолчанию

    transition-property

    Устанавливает имя стилевого свойства, значение которого будет отслеживаться для создания эффекта перехода.

    transition-property: none | all | <свойство> [,<свойство>]*

    Значения

    none
    Никакое свойство не задано.
    all
    Все свойства будут отслеживаться.
    <свойство>
    Название стилевого свойства, регистр при его написании не учитывается. При указании нескольких свойств они перечисляются друг за другом через запятую.
    пример:
    -webkit-transition-property: top;

    transition-timing-function

    Устанавливает, насколько быстро должно изменяться значение стилевого свойство для которого применяется эффект перехода.

    transition-timing-function представляет собой математическую функцию, показывающую, как быстро по времени меняется указанное через transition-property значение свойства. Начальная точка имеет координаты 0.0, 0.0, конечная — 1.0, 1.0, при этом функция по оси ординат может превышать эти значения в большую или меньшую сторону

    Синтаксис

    transition-timing-function: ease|ease-in|ease-out|ease-in-out|linear|step-start|step-end|steps|cubic-bezier

    Значения

    ease
    Анимация начинается медленно, затем ускоряется и к концу движения опять замедляется. Аналогично cubic-bezier(0.25,0.1,0.25,1).
    ease-in
    Анимация медленно начинается, к концу ускоряется. Аналогично cubic-bezier(0.42,0,1,1).
    ease-out
    Анимация начинается быстро, к концу замедляется. Аналогично cubic-bezier(0,0,0.58,1).
    ease-in-out
    Анимация начинается и заканчивается медленно. Аналогично cubic-bezier(0.42,0,0.58,1).
    linear
    Одинаковая скорость от начала и до конца.
    step-start
    Как таковой анимации нет. Стилевые свойства сразу же принимают конечное значение.
    step-end
    Как таковой анимации нет. Стилевые свойства находятся в начальном значении заданное время, затем сразу же принимают конечное значение.
    steps
    Ступенчатая функция, имеющая заданное число шагов.

    transition-timing-function: steps(<число>, start | end)

     
    Здесь: <число> — целое число больше нуля; start — задаёт полунепрерывную снизу функцию;end — задаёт полунепрерывную сверху функцию.
     
    cubic-bezier
    Задаёт функцию движения в виде кривой Безье.
    Полное описание смотрите тут http://htmlbook.ru/css/transition-timing-function

    transition-delay

    Свойство transition-delay устанавливает время ожидания перед запуском эффекта перехода. Значение 0s или 0msзапускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации.

    Допустимо указывать несколько значений, перечисляя их через запятую. Каждое значение будет применяться к свойству, заданному в параметрах transition-property.

    Синтаксис

    transition-delay: <время> [,<время>]*

    transform

    Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций.

    Синтаксис

    transform: <функция> [<функция>]* | none

    Значения

    функция
    Функция трансформации.
    none
    Отменяет действие трансформации.

    Функции трансформации

    matrix

    Задаёт матрицу преобразований.

    rotate

    Поворот элемента на заданный угол относительно точки трансформации, задаваемой свойством transform-origin.

    transform: rotate(<угол>)

    пример

    div {
        -ms-transform: rotate(20deg); /* IE 9 */
        -webkit-transform: rotate(20deg); /* Safari */
        transform: rotate(20deg);
    }

    scale

    Масштаб элемента по горизонтали и вертикали.

    transform: scale(sx[, sy]);

    Значение больше 1 увеличивает масштаб элемента, меньше 1 — уменьшает масштаб.

    пример

    div {
        -ms-transform: scale(2,3); /* IE 9 */
        -webkit-transform: scale(2,3); /* Safari */
        transform: scale(2,3);
    }

    scaleX

    Масштабирует элемент по горизонтали.

    transform: scaleX(sx);

    scaleY

    Масштабирует элемент по вертикали.

    transform: scaleY(sy);

    skewX

    Наклоняет элемент на заданный угол по вертикали.

    transform: skewX(<угол>)

    пример

    div {
        -ms-transform: skewX(20deg); /* IE 9 */
        -webkit-transform: skewX(20deg); /* Safari */
        transform: skewX(20deg);
    }

    skewY

    Наклоняет элемент на заданный угол по горизонтали.

    transform: skewY(<угол>)

    пример

    div {
        -ms-transform: skewY(20deg); /* IE 9 */
        -webkit-transform: skewY(20deg); /* Safari */
        transform: skewY(20deg);
    }

    translate

    Сдвигает элемент на заданное значение по горизонтали и вертикали.

    transform: translate(tx[, ty])

    пример

    div {
        -ms-transform: translate(50px,100px); /* IE 9 */
       	-webkit-transform: translate(50px,100px); /* Safari */
        transform: translate(50px,100px);
    }

    translateX

    Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево.

    transform: translateX(tx)

    translateY

    Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх.

    transform: translateY(ty)

     

    CSS Единицы измерения

    CSS имеет различные единицы измерения.

    Единтца измерения Описание
    em Размер относительно размера шрифта. 2em означает что размер задан в два размера шрифта
    rem Размер шрифта body
    vw Один процент от ширины окна просмотра
    vh Один процент от высоты окна просмотра
    vmin Один процент от минимальной ширины окна просмотра
    vmax Один процент от минимальной высоты окна просмотра
    %
    px пиксели (1px = 1/96thот 1дюйма)

    Замечание:  em и rem очень часто применяются на практике

    Транзакции и анимация.

    Пример

    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="utf-8">
      <title>transition</title>
      <style>
       #bar {
        top:-5.5em; right:5em; /* Положение */
         padding: .5em; /* Поля */
         margin: 0; /* Отступы */
         position: absolute; /* Абсолютное позиционирование */
         width: 2em; /* Ширина */
         background: #333; /* Цвет фона */
         color: #fff; /* Цвет текста */
         text-align: center; /* Выравнивание по центру */
         /* Переход */
         -webkit-transition: top 1s ease-out 0.5s;
         -moz-transition: top 1s ease-out 0.5s;
         -o-transition: top 1s ease-out 0.5s;
         transition: top 1s ease-out 0.5s;
        }
       #bar:hover { top: 0; }
      </style>
     </head>
     <body>
      <ul id="bar">
       <li>1</li><li>2</li>
       <li>3</li><li>4</li>
       <li>&darr;</li>
      </ul>
     </body>
    </html>
    

    В данном примере при наведении курсора на стрелку, раскрывается блок с числами.

    Плавная трансформация | CSS свойство transition

    Псевдокласс :hover позволяет элементам быть менее статичными, изменяя их свойства при наведении мышки.

    <style>
    
    .blok {
      background: #808991;
      color: #FFF;
      cursor: pointer;
    }
    
    .blok:hover {
      background: #D0D941;
      color: #000;
    }
    
    </style>
    
    <div class="blok">при наведении мышки</div>

    Благодаря свойству transition можно сделать плавный переход между состояниями элемента.

    плавная смена цвета туда-обратно

    <style>
    .transition {
    transition: 3s;
    }
    </style>
    
    <div class="blok transition">плавная смена цвета туда-обратно</div>

    плавная смена при наведении на div

    <style>
    .transition2:hover {
    transition: 3s;
    }
    </style>
    
    <div class="blok transition2">плавная смена при наведении на div</div>

    плавная смена, когда курсор выведен за пределы div

    <style>
    .transition3:not(:hover) {  transition: 3s;}
    </style> 
    
    <div class="blok transition3">плавная смена, когда курсор выведен за пределы div</div>

    сохранение положения :hover

    <style>
    .transition4 {
    transition: 0s 9999999s;
    }
    .transition4:hover {
    transition: 3s;
    }
    </style>
    
    <div class="blok transition4">сохранение положения :hover</div>
    Свойство Описание
    transition-property свойство [список возможных], на которое распространяется трансформация. При необходимости воздействия на несколько свойств, они перечисляются через запятую.

    • all — все
    • none — никто

    all

    width, background

    width

    none

    transition-duration время, в течении которого происходит трансформация.

    0s

    0.5s

    1s

    5s

    transition-delay время, по истечении которого происходит трансформация.

    0s

    0.5s

    1s

    5s

    transition-timing-function указывает как должны изменяться промежуточные значения в кривой времени. Например, начинать развиваться медленно, а потом ускоряться. Трансформация может происходить и плавно на протяжении всего участка времени [cubic-bezier], и рывками в заданное количество шагов [steps].

    Untitled-11

    • ease, он же cubic-bezier(0.25, 0.1, 0.25, 1.0)
    • linear, он же cubic-bezier(0.0, 0.0, 1.0, 1.0)
    • ease-in, он же cubic-bezier(0.42, 0, 1.0, 1.0)
    • ease-out, он же cubic-bezier(0, 0, 0.58, 1.0)
    • ease-in-out, он же cubic-bezier(0.42, 0, 0.58, 1.0)
    • step-start, он же steps(1, start)
    • step-end, он же steps(1, end), он же steps(1)

    ease

    linear

    ease-in

    ease-out

    ease-in-out

    cubic-bezier(.1, .9, .9, 1.5)

    cubic-bezier(.1, .9, .9, .1)

    cubic-bezier(.1, .9, .9, -1.5)

    cubic-bezier(.1, -1.5, .1, 2.5)

    step-start

    step-end

    steps(4, end)

    steps(4)

    steps(4, start)

    плавная смена цвета CSS

    <style>
    
    .transition1 {  
    transition: background-color 3s cubic-bezier(0.1, 0.8, 0.5, 2), color 3s 1s linear;   /* или */   
    transition-property: background-color, color;  transition-duration: 3s;  transition-delay: 0s, 1s;  transition-timing-function: cubic-bezier(0.1, 0.8, 0.5, 2), linear;}
    
    </style> 
    
    <div class="blok transition1">плавная смена цвета CSS</div>

    Популярные сочетания transition с другими свойствами, например, opacity или transform.

    изменение ширины width

    <div class="transition-width">изменение ширины width</div>

    изменение прозрачности opacity

    <div class="transition-opacity">изменение прозрачности opacity</div>

    кручение CSS

    <div class="transition-rotate">кручение transform: rotate(360deg);</div>

    увеличивавшие объекта CSS

    <div class="transition-scale">увеличивавшие объекта в два раза transform: scale(2);</div>

    смещение вниз CSS

    <div class="transition-translate">смещение вниз position: relative;</div>

    Untitled-12

    <style>
      div.blok6 {
        cursor: pointer;
        position: relative;
        text-align: center;
      }
      div.blok6:before {
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 10px;
        box-shadow: 0 0 10px #A0A9B1 inset;
        content: attr(data-title);
        font-family: Tahoma;
        font-size: 32px;
        height: 48px;
        line-height: 48px;
        opacity: 0;
        padding: 0 10px;
        position: absolute;
        right: 50px;
        top: 20px;
        -moz-transition: all 1s;
        -webkit-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s;
      }
      div.blok6:hover:before {
        right: 160px;
        opacity: 1;
        top: 140px;
      }
      div.blok6 img {
        width: 400px;
        -moz-transition: all 1s;
        -webkit-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s;
      }
      div.blok6:hover img {
        width: 500px;
      }
      div.blok6:after {
        content: attr(data-zagolovok);
        display: block;
        font-weight: bold;
        font-family: Helvetica;
        font-size: 20px;
        text-align: center;
      }
    </style>
    <div class="blok6" data-title="всплывающий текст" data-zagolovok="подпись под изображением">
    <img src="адрес_изображения" /></div>
    

     

     

  • Задание к уроку 8 Php. Основные функции php

    Задание:

    1. С помощью функции очистки тегов, вывести очищенную строку от всех тегов и с исключением тега <p>:
    $text = '
    <p>Параграф.</p>
    <!-- Комментарий -->
    Здесь текст';

    2. С помощью функции очистки лишних пробелов в начале и в конце строки обработать и вывести следующую строку:

    $trim = " Очистка строки от лишних пробелов ";

    3. Обработать и вывести строку с помощью функции экранизации addslashes(), так же определить длину данной строки и вывести число:

    $str = "Is your name O'reilly?";

    4. Разбить строку, получив ее из глобального массива $_SERVER[‘DOCUMENT_ROOT‘],

    используя разделитель «/» и вывести результат с помощью функции var_dump();

    После чего вывести позицию первого вхождения символа «/».

    5. Вывести полученные подстроки из строки: $str = "abcdef";

    с позициями: -1; -3; -3,1;

     

    [spoiler title=»Решение»]

    <?
      $text = '
      <p>Параграф.</p>
      <!-- Комментарий -->
      Здесь текст';
    
      echo strip_tags($text);
      echo "\n\n-------\n";
      // не удалять <p>
      echo strip_tags($text, '<p>');
    ?>
    <hr>
    <?
    $trim = "      Очистка строки от лишних пробелов         ";
    echo trim($trim);
    ?><br><?
    $str = "Is your name O'reilly?";
    // выводит: Is your name O\'reilly?
    echo addslashes($str);
    echo '<br>Длина строки равна :'.strlen($str);
    ?>
    <br>
    <?
    $explode = explode('/', $_SERVER['DOCUMENT_ROOT']);
    var_dump($explode);
    echo "<br>Символ / встречается на позиции ".strpos($_SERVER['DOCUMENT_ROOT'], "/")."<br><br>";
    
    $str = "abcdef";
    echo "Cтрока: ".$str."<br>";
    $rest = substr($str, -1);    // возвращает "f"
    echo "pos=-1. Полученная строка: ".$rest."<br>";
    $rest = substr($str, -2);    // возвращает "ef"
    echo "pos=-3. Полученная строка: ".$rest."<br>";
    $rest = substr($str, -3, 1); // возвращает "d"
    echo "pos=-3,1. Полученная строка: ".$rest."<br>";
    ?>

    [/spoiler]

  • Задание к уроку 7 Php. .htaccess и $_SERVER

    Задание:

    В файле .htaccess установить кодировку по умолчанию на UTF-8 и написать правила перенаправления на  страницы ошибок:

    401.html,  403.html,  404.html,  500.html

    [spoiler title=»401.html»]

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <title>401 Нет авторизации</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    </head>
    <style>
     .notfound-401 {text-align: center;position: relative;top: 100px;}
     .notfound-401 span {font-size: 1000%;display: block;line-height: 1;}
     .notfound-401 i.fa {font-size: 1000%;}
     .notfound-401 p {font-size: 300%; margin: 0; padding: 0;}
    </style>
    <body>
    <div class="notfound-401">
     <i class="fa fa-paper-plane-o"></i>
     <span>401</span>
     <p>Нет авторизации.</p>
    
    </div>
    </body>
    </html>

    [/spoiler]

    [spoiler title=»403.html»]

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>403 Запрещено!</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    </head>
    <style>
      .notfound-403 {text-align: center;position: relative;top: 100px;}
      .notfound-403 span {font-size: 1000%;display: block;line-height: 1;}
      .notfound-403 i.fa {font-size: 1000%;}
      .notfound-403 p {font-size: 300%; margin: 0; padding: 0;}
    </style>
    <body>
    <div class="notfound-403">
      <i class="fa fa-paper-plane-o"></i>
      <span>403</span>
      <p>Запрещено!.</p>
    
    </div>
    </body>
    </html>

    [/spoiler]

    [spoiler title=»404.html»]

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>404 Страница не найдена</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    </head>
    <style>
      .notfound-404 {text-align: center;position: relative;top: 100px;}
      .notfound-404 span {font-size: 1000%;display: block;line-height: 1;}
      .notfound-404 i.fa {font-size: 1000%;}
      .notfound-404 p {font-size: 300%; margin: 0; padding: 0;}
    </style>
    <body>
    <div class="notfound-404">
      <i class="fa fa-paper-plane-o"></i>
      <span>404</span>
      <p>Страница не найдена.</p>
    
    </div>
    </body>
    </html>

    [/spoiler]

    [spoiler title=»500.html»]

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>500 Ошибка сервера</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    </head>
    <style>
      .notfound-500 {text-align: center;position: relative;top: 100px;}
      .notfound-500 span {font-size: 1000%;display: block;line-height: 1;}
      .notfound-500 i.fa {font-size: 1000%;}
      .notfound-500 p {font-size: 300%; margin: 0; padding: 0;}
    </style>
    <body>
    <div class="notfound-500">
      <i class="fa fa-paper-plane-o"></i>
      <span>500</span>
      <p>Ошибка сервера.</p>
    
    </div>
    </body>
    </html>

    [/spoiler]

    С помощью глобального массива $_SERVER вывести Имя хоста, IP сервера, Дирректория, Браузер.

    [spoiler title=»Решение»]

    AddDefaultCharset UTF-8
    
    ErrorDocument 401 /401.html
    ErrorDocument 403 /403.html
    ErrorDocument 404 /404.html
    ErrorDocument 500 /500.html
     <?
     echo "<br>Имя хоста: "
     .$_SERVER['SERVER_NAME'].
     "<br>IP Сервера: "
     .$_SERVER['SERVER_ADDR'].
     "<br>Дирректория: "
     .$_SERVER['DOCUMENT_ROOT'].
     "<br>Ваш браузер: "
     .$_SERVER['HTTP_USER_AGENT']."<br>";
     ?>

    [/spoiler]

     

     

     

  • Задание к уроку 6 php. Сессии и Куки

    Задание:

    Регистрация на сайте файл reg.php

    if($_POST['submit']=="Регистрация"){
      
    if($_POST['pass']==$_POST['pass2']){
      $pass=md5($_POST['pass']);
    }
    else{
      $msg="Введенные пароли не совпадают";
    }	
    if($pass!=0){	
    $res=mysql_query("SELECT * from `users` where `email`='{$_POST['email']}'");
    $data=mysql_fetch_assoc($res);
    if($data['id']){
      $msg="Пользователь с таким email уже зарегистрирован";
      }
    else{
      $insert=mysql_query("insert into `users` (`name`,`email`,`pass`) values ('{$_POST['name']}', '{$_POST['email']}','{$pass}')");
    }
    if ($insert=='TRUE'){
      $select=mysql_query("SELECT * from `users` where `email`='{$_POST['email']}'");
      $data1=mysql_fetch_array($select);
      $auth=md5($_POST['email']).md5($data1['id']);
      /*Отправка email*/
      $to=$_POST['email'];
      $subject="Подтверждение регистрации";
      $body="Для завершения регистрации пройдите по <a href='".$_SERVER['DOCUMENT_ROOT']."/11/aktiv.php?email=".$email."&auth=".$auth."'>ссылке </a>";
      require "sendmail.php";
      /********/
      $email=$_POST['email'];
      echo "/aktiv.php?email=".$email."&auth=".$auth;
      $msg="Для завершения регистрации проверьте почту!";
    }
    }
    }
    ?>
    
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <div id="content">
        <div class="center">
          <div class="row">
    <?echo $msg;?>
    <h1>Регистрация</h1>
      <form method="post">
        <p><input required type="text" name="name" placeholder="Имя"></p>
        <p><input required type="email" name="email" placeholder="email"></p>
        <p><input required type="password" name="pass" placeholder="пароль"></p>
        <p><input type="password" name="pass2" placeholder="повторите пароль"></p>
        <p><input type="submit" name="submit" value="Регистрация"></p>
      </form>
      <p><a  href="login.php">Войти</a></p>
    </div>
    </div></div>

    Подтверждение регистрации activ.php

    $res=mysql_query("SELECT * from `users` where `email`='{$_GET['email']}'");
    $data=mysql_fetch_array($res);
    if($data['id']){
      $auth=md5($_GET['email']).md5($data['id']);
      echo $auth . "<br>";
      if($auth==$_GET['auth']){
      $upd=mysql_query("update `users` set `auth`='1' where`email`='{$_GET['email']}'");	
      if($upd='TRUE'){
      echo 'Поздравляем, регистрация прошла успешно!';
      }
      }	
      else {echo 'Возникла ошибка, попробуйте зарегистрироваться заново!';}
    }

     

    2. По нажатию кнопки Добавить — создать сессию и куки с вашим именем, и по нажатию кнопки Удалить — удалить сессию и куки с вашим именем.

    Данные получить из формы.

    <?
    session_start();
    if(isset($_POST['submit_add'])) {
      /*
        создать сессию и куки с вашим именем
      */
    } elseif(isset($_POST['submit_del'])) {
      /*
        удалить сессию и куки с вашим именем
      */
    }
    ?>
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Сессии и Куки</title>
    </head>
    <body>
      <form action="index.php" method="post">
        <input type="text" name="name" placeholder="Напишите сюда ваше имя"><br>
        <input type="submit" value="Добавить" name="submit_add">
        <input type="submit" value="Удалить" name="submit_del">
      </form>
    </body>
    </html>

    [spoiler title=»Решение»]

    <?
    session_start();
    if(isset($_POST['submit_add'])) {
     // обрабатываем полученную строку, очищаем ее от лишних пробелов и удаляем теги если имеются
     $name = strip_tags(trim($_POST['name']));
     if(!isset($_COOKIE['name'])) {
     setcookie('name', $name);
     echo "Куки успешно сохранены, Хорошая работа " . $name . "<br>";
     } else {
     echo 'Здравствуй ' . $_COOKIE['name'] . ' Куки уже были сохранены, необходимо их удалить. <br>';
     }
     if(!isset($_SESSION['name'])) {
     $_SESSION['name'] = $name;
     echo "Сессия успешно создана, Хорошая работа " . $_SESSION['name'] . "<br>";
     } else {
     echo 'Здравствуй ' . $_SESSION['name'] . ' Сессия уже была создана, необходимо ее удалить. <br>';
     }
    } elseif(isset($_POST['submit_del'])) {
     if(isset($_SESSION['name']) or isset($_COOKIE['name'])) {$name = $_SESSION['name'] or $_COOKIE['name'];}
     setcookie('name', '');
     unset($_SESSION['name']);
     echo "Все данные были успешно удалены...<br>Хорошая работа $name";
    }
    ?>
    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <title>Сессии и Куки</title>
    </head>
    <body>
     <form action="index.php" method="post">
     <input type="text" name="name" placeholder="Напишите сюда ваше имя"><br>
     <input type="submit" value="Добавить" name="submit_add">
     <input type="submit" value="Удалить" name="submit_del">
     </form>
    </body>
    </html>

    [/spoiler]

  • HTML Урок 3. Ссылки и таблицы

    3 урок:

    • Ссылки
    • Относительный адрес
    • Абсолютный адрес
    • Открытие ссылки в новом окне браузера
    • Создание якоря (метки)
    • Ссылка на почтовый ящик
    • Ссылка картинка
    • тег NAV
    • тег SPAN
    • Таблицы в HTML

    Ссылки HTML

    В интернете размещены миллионы электронных документов часто схожих по тематике и ориентированных на одну и ту же пользовательскую аудиторию. Переход на другие документы казался бы делом трудным и утомительным, если бы не было возможности связывания HTML-документов между собой с помощью гипертекстовых ссылок.

    По сути, любая гипертекстовая ссылка является указателем адреса в глобальной сети, по которому можно моментально перейти в окне браузера. Успешный переход по ссылке возможен в двух случаях: если документ, на который ссылается документ, существует, и если синтаксис гиперссылки верен с точки зрения HTML.

    Синтаксис

    Для создания ссылок в HTML-документах используется элемент <a>, его содержимое выступает в качестве метки, с помощью которой и будет производится переход. Для того, чтобы из элемента <a> сделать активную гиперссылку, нужно добавить к нему атрибут href.

    Атрибут href в качестве своего значения содержит адрес (относительный или абсолютный), на который будет вести ссылка. При щелчке на ссылку браузер получает и отображает документ, адрес которого указан в атрибуте href.

    <html>
      <body>
     
        <p><a href="page.html">Ссылка</a></p>
        <p><a href="httр://www.manuscript.kz">Ссылка</a> на страничку в и-нете.</p>
     
      </body>
    </html>

    Результат данного примера в окне браузера:

    примеры ссылок

    Относительный адрес

    Относительный адрес означает, что указание пути на нужный файл или страницу вашего сайта начинается относительно страницы, на которой расположена ссылка, либо относительно корневого каталога сайта. Рассмотрим компоненты (части), из которых может состоять относительный путь:

    Части пути Описание Примеры значений
    имя_файла Если в качестве значения атрибута указать только имя файла это значит, что нужный файл находится в той же папке, где и страница со ссылкой. «page.html»
    каталог/ Если файл, к которому нужно указать путь, расположен в дочернем каталоге относительно файла с ссылкой, это означает, что нам надо спуститься на один уровень вниз (в дочернюю папку текущего каталога), в этом случае путь начинается с указания имени дочернего каталога, после его имени указывается прямой слэш «/», он служит для разделения частей пути, после него указывается имя нужного нам файла.

    Примечание: опуститься можно ровно на столько папок вниз, сколько вы их создали. К примеру, если вы создали папку на 10 уровней ниже корневой, то можете указать путь, который приведет вас вниз на 10 папок. Однако, если у вас так много уровней, это, скорее всего, означает, что организация вашего сайта излишне неудобно составлена.

    «каталог/page.html»

    «каталог1/каталог2/page.html»

    ../ Если нужно указать, что файл, на который вы ссылаетесь, находится в родительской папке, используйте символы .. (две точки), они означают подняться на один уровень вверх (в родительскую папку текущего каталога). Далее мы указываем прямой слэш «/», чтобы разделить части пути, и пишем имя нашего файла.

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

    «../page.html»

    «../../page.html»

    «../../../кат1/кат2/page.html» — поднимаемся из текущей папки на три каталога выше и уже из него спускаемся на два уровня ниже к требуемому файлу

    / Относительный путь не обязательно всегда должен начинаться относительно текущего расположения страницы со ссылкой, он также может начинаться относительно корневого каталога сайта. К примеру, если нужный файл находится в корневом каталоге, путь может начинаться с символа «/», после которого надо всего лишь указать имя нужного файла, который расположен в корневом каталоге.

    Примечание: когда символ «/» указывается первым, это означает начало пути от корневого каталога.

    «/page.html»

    «/кат1/кат2/car.png»

    Абсолютный адрес

    Абсолютный адрес обычно применяется для указания пути к файлу, который расположен на другом сетевом ресурсе. Он представляет из себя полный URL-адрес к файлу или странице. Первым делом в адресе указывается используемый протокол, после которого идет название домена (имя сайта). Например: http://www.пример.ру — так выглядит абсолютный путь к конкретному веб-сайту. http:// — это протокол передачи данных, а www.пример.ру — имя сайта (домен).

    Абсолютный адрес можно использовать и на собственном сайте. Однако внутри сайта рекомендуется использовать в качестве значения ссылок относительный путь.

    Теперь давайте рассмотрим, что такое URL-адрес. Каждая веб-страница в сети Интернет имеет свой собственный уникальный адрес, вот он как раз и называется URL. Аббревиатура URLрасшифровывается как Uniform Resource Locator (унифицированный адрес ресурса), проще говоря URL — это определитель местонахождения ресурса. Этот способ записи адреса стандартизирован в сети Интернет.

    Пара примеров URL адресов:

    "httр://www.manuscript.kz/"
     
    "httр://www.manuscript.kz/html/u1.php"

    Открытие ссылки в новом окне браузера

    Для того чтобы страница, на которую ведет ссылка, открывалась в новом окне, нужно будет сообщить браузеру имя окна, в котором нужно открыть страницу. Если вы не указываете браузеру использовать какое-то определенное окно, то он откроет страницу в текущем окне.

    Для указания браузеру, что при открытие страницы нужно использовать другое окно, вместо текущего, добавьте в элемент <a> атрибут target. Его значение сообщает браузеру о целевом окне для страницы. Если в качестве значения атрибута target вы используете _blank, то браузер для каждой новой страницы всегда будет открывать новое окно.

    Попробуйте сами:

    <html>
      <body>
     
        <p><a href="mypage.html" target="_blank">Другая страница</a>.
          Если вы установите для атрибута target значение _blank,
          то ссылка откроется в новом окне.
        </p>
     
      </body>
    </html>

    В таблице приведены все доступные значения для атрибута target.

    Значение Описание
    _blank Открывает документ в новом окне.
    _self Открывает документ в том же окне, где была нажата ссылка (значение по умолчанию).
    _parent Открывает документ в родительском окне.
    _top Открывает документ на весь экран.
    имя_фрейма Открывает документ в указанном фрейме.

    Создание якоря (метки)

    До сих пор всегда, когда вы создавали ссылки, то, переходя по ним на другую страницу, она загружалась, и браузер отображал ее с самого верха, но что, если вам нужно при переходе сразу видеть определенный раздел страницы вместо шапки сайта, в этом случае нужно просто воспользоваться якорем.

    Для начала вам нужно определиться с местом, это может быть любой текст на странице, но чаще всего применяется короткий фрагмент текста заголовка. Затем нужно заключить этот текст внутрь элемента <a>, добавить к нему глобальный атрибут id, выбрать идентификационное имя для этого фрагмента и это имя записать в качестве значения в атрибут id:

    <h2><a id="end">Заключение</a>.</h2>

    Итак, наш якорь готов, теперь осталось сослаться на него, для этого просто добавьте символ «#» в конец вашей ссылки, за которым укажите идентификационное имя вашего якоря:

    1
    <a href="other.html#end">Заключение</a>

    Основная польза от якорей в том, что с их помощью можно ссылаться на отдельные части длинных страниц, чтобы пользователю не приходилось проcматривать весь файл в поисках нужного раздела.

    Примечание: если якорь находится на одной странице с ведущей на него ссылкой, то имя документа в атрибуте href можно опустить, написав только идентификатор.

    Ссылка на почтовый ящик

    В создании ссылки на электронную почту нет ничего сложного, нужно просто в значении атрибута href ввести ключевое слово mailto, поставить после него двоеточие и написать адрес электронной почты, на который хотите сослаться:

    Попробуйте сами:

    <html>
      <body>
     
        <p>
          Это ссылка на почту:
          <a href="mailto:someone@someone.ru">моя почта</a>
        </p>
     
      </body>
    </html>

    Такая ссылка ничем не будет отличаться от остальных ссылок вашего документа. Только вместо другой страницы при нажатии на такую ссылку откроется установленная у вас по умолчанию программа почты.

    Ссылка картинка

    Вы наверное не раз замечали, что на многих сайтах в качестве ссылок используются различные изображения, которые по принципу работы ничем не отличаются от текстовых ссылок. Для того чтобы заменить обычную текстовую ссылку на изображение, нужно внутрь элемента <a> поместитьтег <img>, который указывает путь к изображению.

    Попробуйте сами:

    <html>
      <body>
     
        <p>Посетите наш сайт, кликнув по картинке:
          <a href="httр://www.manuscript.kz">
            <img src="logo.png" alt="ссылка" width="100" height="78">
          </a>
        </p>
     
      </body>
    </html>

    Тег <NAV>

    Тег <nav> задает навигацию по сайту. Если на странице несколько блоков ссылок, то в <nav> обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов <nav> в документе. Запрещается вкладывать <nav> внутрь <address>.

    Синтаксис

    <nav>ссылки</nav>

    Тег SPAN

    Описание

    Тег <span> предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как <table><p> или <div>, с помощью тега <span> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега <p>) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <span> и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.

    Синтаксис

    <span>...</span>

    Закрывающий тег обязателен.

    Атрибуты

    Для этого тега доступны универсальные атрибуты и события.

    Пример

    <!DOCTYPE HTML>
    <html> 
        <head>  
          <meta charset="utf-8">  
        <title>Тег SPAN</title>  
        <style>    
            body {      
              font-family: Arial, sans-serif; /* Рубленый шрифт */     }    
          .letter {      
              color: red; /* Красный цвет символов */      
            font-size: 200%; /* Размер шрифта в процентах */      
            font-family: serif; /* Шрифт с засечками */      
            position: relative; /* Относительное позиционирование */      
            top: 5px; /* Сдвиг сверху */     }  
        </style>  
      </head> 
      <body>   
          <p><span class="letter">Р</span>азумные люди приспосабливаются к окружающему миру.   Неразумные люди приспосабливают мир к себе. Вот почему прогресс определяется   действиями неразумных людей.</p>   
        <p>Бернард Шоу</p>  
      </body>
    </html>

    HTML таблицы

    Таблица — набор данных, распределенных по строкам и ячейкам. В большинстве ячеек размещаются табличные данные, остальные содержат заголовки для строк и столбцов, описывающие содержимое.

    Синтаксис

    Для создания таблицы в HTML-документе используется тег <table>, он представляет собой контейнер, в котором находится все содержимое таблицы.

    Создание таблицы всегда начинается со строк, которые определяются с помощью тега <tr>, каждая строка, в свою очередь, состоит из ячеек. Тег <tr> может содержать в себе только теги для создания ячеек.

    В HTML существует два разных тега для создания ячеек, первым из них является <td>, он создает обычные ячейки с данными. Второй вид — это тег <th>, он позволяет определять ячейки, которые содержат заголовки для столбцов или строк, содержимое таких ячеек отображается жирным начертанием и выравнивается по центру. Теги <td> и <th> могут включать в себя любые HTML-элементы, которые доступны для использования в теле документа.

    Примечание: количество столбцов в вашей таблице будет равно количеству ячеек с данными в каждой строке.

    <html>
      <body>
     
        <table border="1">
          <tr><th>Первый заголовок</th><th>Второй заголовок</th></tr>
          <tr><td>строка 1, ячейка 1</td><td>строка 1, ячейка 2</td></tr>
          <tr><td>строка 2, ячейка 1</td><td>строка 2, ячейка 2</td></tr>
        </table>
     
      </body>
    </html>

    Результат

    tabl11

    Рамка таблицы

    Тег <table> может иметь необязательный атрибут border, управляющий границами таблицы. По умолчанию браузеры не отображают рамку вокруг таблицы и ячеек, но присутствие атрибута border, указывает браузеру, что у таблицы должна быть рамка.

    По стандарту HTML5 значением атрибута border может быть либо 1, либо пустая строка (обозначается как пара двойных кавычек «»). Не важно, какое значение атрибута вы зададите, если он присутствует, то рамка будет отображаться.

    <html>
      <body>
     
        <h4>Таблица с нормальной рамкой:</h4>
        <table border="1">
          <tr><td>Первая</td><td>строка</td></tr>
          <tr><td>Вторая</td><td>строка</td></tr>
        </table>
        <h4>Таблица без рамки:</h4>
        <table>
          <tr><td>Первая</td><td>строка</td></tr>
          <tr><td>Вторая</td><td>строка</td></tr>
        </table>
     
      </body>
    </html>

    Результат

    tabl

    Если вам не нравится вид рамки у таблицы, заданный по умолчанию, т.е. двойные рамки, вы можете воспользоваться атрибутом style, прописав в нем свойство «border-collapse: collapse;», это придаст обычный вид рамке для таблицы.

    <html>
      <body>
     
        <table border="1" style="border-collapse: collapse;">
          <tr><td>ячейка 1</td><td>ячейка 2</td></tr>
          <tr><td>ячейка 3</td><td>ячейка 4</td></tr>
        </table>
     
      </body>
    </html>

    Результат

    tabl13

    Заголовок

    У всех таблиц обычно бывает заголовок, описывающий ее содержимое. Для создания заголовка таблицы используется тег <caption>, обычно он размещается сразу после открывающего тега <table>, но также он может располагаться практически в любом месте внутри таблицы между элементами строк.

    <html>
      <body>
     
        <table border="1">
          <caption>Моя первая таблица</caption>
          <tr><td>строка 1, ячейка 1</td><td>строка 1, ячейка 2</td></tr>
          <tr><td>строка 2, ячейка 1</td><td>строка 2, ячейка 2</td></tr>
        </table>
     
      </body>
    </html>

    tabl14

    Тег заголовка может содержать в себе любые элементы, которые можно использовать в теле HTML-документа. По умолчанию содержимое тега <caption> отображается над таблицей и выравнивается по ее центру. Расположение заголовка можно изменить применив к нему CSS свойство caption-side.

    Объединение столбцов или строк

    Смежные ячейки в таблице могут объединяться с целью размещения большего объема данных. Например, в таблице из четырех строк и четырех столбцов все ячейки в первой строке можно объединить и поместить в этой строке красивый заголовок. Возможно также объединение нескольких строк или столбцов.

    Для объединения смежных ячеек в строке таблицы используется атрибут colspan, в значении задается число ячеек в строке, которое вы хотите объединить.

    Для объединения смежных ячеек в столбце таблицы используется атрибут rowspan, в значении задается число ячеек столбца, которое вы хотите объединить.

    <html>
      <body>
     
        <h4>Объединим две ячейки в строке таблицы:</h4>
        <table border="1">
          <tr>
            <th>Имя</th><th colspan="2">Телефон</th>
          </tr>
          <tr>
            <td>Петя Иванов</td><td>123 45 67</td><td>234 56 78</td>
          </tr>
        </table>
         
        <h4>Объединим две ячейки в столбце таблицы:</h4>
        <table border="1">
          <tr>
            <th>Имя</th><td>Петя Иванов</td>
          </tr>
          <tr>
            <th rowspan="2">Телефон</th><td>123 45 67</td>
          </tr>
          <tr><td>234 56 78</td></tr>
        </table>
     
      </body>
    </html>

    tabl_obied

    Вложенные элементы внутри таблицы

    Как мы уже писали раньше, ячейки таблицы могут включать в себя любые HTML-элементы, даже элемент <table>, то есть существует возможность создания вложенных таблиц.

    <html>
      <body>
     
        <table border="1">
          <tr>
            <td><p>Абзац.</p><p>Другой абзац.</p></td>
            <td>В этой ячейке разместим таблицу:
              <table border="1">
                <tr><td>А</td><td>Б</td></tr>
                <tr><td>В</td><td>Г</td></tr>
              </table>
            </td>
          </tr>
          <tr>
              <td><a href="httр://www.puzzleweb.ru"> Ссылка </a></td><td>ПРИВЕТ!</td>
          </tr>
        </table>
     
      </body>
    </html>

    tabl15

    Теги таблицы

    Тег Описание
    <table> Создает таблицу.
    <th> Создает заголовочную ячейку в таблице.
    <tr> Создает строку в таблице.
    <td> Создает ячейку таблицы.
    <caption> Определяет заголовок для таблицы.
    <colgroup> Определяет одну или несколько колонок в таблице для форматирования.
    <col> Используется в таблице, определяет свойства для каждой колонки внутри элемента colgroup.
    <thead> Группирует заголовочные ячейки таблицы.
    <tbody> Группирует основное содержимое в таблице.
    <tfoot> Определяет нижнюю часть таблицы.

    Заключение:

    1. Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или hrefтег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.

      Синтаксис

      <a href="URL">...</a><a name="идентификатор">...</a>

      Атрибуты

       TitleДобавляет всплывающую подсказку к тексту ссылки.

      Href Задает адрес документа, на который следует перейти.

    2. Тег <nav> задает навигацию по сайту. Если на странице несколько блоков ссылок, то в <nav> обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов <nav> в документе. Запрещается вкладывать <nav> внутрь <address>.
      <nav>ссылки</nav>
    3.  С помощью тега <span> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега <p>) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <span> и определить для него стиль текста.
    4. Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы:

      Теги таблицы

      Тег Описание
      <table> Создает таблицу.
      <th> Создает заголовочную ячейку в таблице.
      <tr> Создает строку в таблице.
      <td> Создает ячейку таблицы.
      <caption> Определяет заголовок для таблицы.
      <colgroup> Определяет одну или несколько колонок в таблице для форматирования.
      <col> Используется в таблице, определяет свойства для каждой колонки внутри элемента colgroup.
      <thead> Группирует заголовочные ячейки таблицы.
      <tbody> Группирует основное содержимое в таблице.
      <tfoot> Определяет нижнюю часть таблицы.

      Таблицы с невидимой границей долгое время использовались для верстки веб-страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашел воплощение на многих сайтах, пока ему на смену не пришел более современный способ верстки с помощью слоев.

      Синтаксис

      <table border="1">
           <caption>Моя первая таблица</caption>
           <tr><td>строка 1, ячейка 1</td><td>строка 1, ячейка 2</td></tr>
           <tr><td>строка 2, ячейка 1</td><td>строка 2, ячейка 2</td></tr>
         </table>

    Для объединения смежных ячеек в строке таблицы используется атрибут colspan, в значении задается число ячеек в строке, которое вы хотите объединить.

    Для объединения смежных ячеек в столбце таблицы используется атрибут rowspan, в значении задается число ячеек столбца, которое вы хотите объединить.

    Онлайн сайты по генерации стилей.

    http://www.colorzilla.com/gradient-editor/

    http://enjoycss.com/

    http://css3generator.com/

    http://www.css3maker.com/

    http://www.csstablegenerator.com/

    http://tablestyler.com/

    http://html-generator.weebly.com/css-table-generator.html

    http://www.textfixer.com/tutorials/css-tables.php

    http://www.patterncooler.com/

    http://paletton.com/

    http://colorschemedesigner.com/csd-3.5/

    https://color.adobe.com/ru/

  • Задание к уроку 5 PHP. Загрузка файла и отправка email

    Задание:

    Написать обработчик загрузки изображения и отправить уведомление на почту.

    Загрузка файла.

    Подготовим наш документ:

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <title>Загрузка файла</title>
    </head>
    <body>
     <form action="upload.php" method="post" enctype="multipart/form-data">
     <input type="file" name="fileToUpload" id="fileToUpload">
     <input type="submit" value="Загрузить изображение" name="submit">
     </form>
    </body>
    </html>

    [spoiler title=»Решение»]

    Далее нужно написать скрипт обработки изображения и загрузки его на сервер:

    <?
    $type = explode('/', $_FILES['fileToUpload']['type'])[1];
    if($type == "jpeg" or $type == "png" or $type == "bmp" or $type == "gif") {
      $filename = 'my_first_uploaded_image.' . $type;
      $uploaddir = 'uploads/';
      $uploadfile = $uploaddir . $filename;
      if(!file_exists($uploaddir)) {
        mkdir($uploaddir);
      }
      if (move_uploaded_file($_FILES['fileToUpload']['tmp_name'], $uploadfile)) {
          echo "Файл корректен и был успешно загружен. <a href='index.php'>Вернуться.</a>\n";
      } else {
          echo "Во время загрузки произошла ошибка! <a href='index.php'>Попробуйте снова.</a>\n";
      }
    } else {
      echo "Неверный тип изображения, проверьте загружаемый файл и <a href='index.php'>попробуйте снова.</a>
      <br>Типы файлов которые могут быть загружены:<br> JPEG, JPG, PNG, BMP, GIF";
    }
    ?>

    Итак теперь по порядку:

    <form action="upload.php" method="post" enctype="multipart/form-data">

    Атрибуты формы следующие:

    Аттрибут Описание
    action=»upload.php» Устанавливает какой файл будет использоваться в качестве обработчика.
    method=»post» Устанавливает метод которым будет отправлена информация
    enctype=»multipart/form-data» Устанавливает тип отправляемого файла

    $type = explode('/', $_FILES['fileToUpload']['type'])[1];

    Функция explode($delimer, $string);

    Разбивает строку на массив.

    $delimer -> Разделитель, символ по которому будет разбита строка $string

    $_FILES[‘fileToUpload‘][‘type‘] -> Глобальный массив файлов, type определяет тип отправляемого изображения.

    if($type == "jpeg" or $type == "png" or $type == "bmp" or $type == "gif") {
    ... 
    } else { echo "Неверный тип изображения, проверьте загружаемый файл и <a href='index.php'>попробуйте снова.</a> <br>Типы файлов которые могут быть загружены:<br> JPEG, JPG, PNG, BMP, GIF"; }

    Условие проверки типа  загружаемого файла, в нашем случае изображения. если условие не выполняется выводим сообщение с ошибкой, иначе загружаем файл.

      $filename = 'my_first_uploaded_image.' . $type;
      $uploaddir = 'uploads/';
      $uploadfile = $uploaddir . $filename;

    $filename -> Название нашего изображения, устанавливает статическое.

    $uploaddir -> Директория куда будем сохранять изображение

    $uploadfile -> Полный путь для сохранения изображения

    if(!file_exists($uploaddir)) {
        mkdir($uploaddir);
      }

    Проверяем существует ли наша директория, если нет то создаем ее.

    if (move_uploaded_file($_FILES['fileToUpload']['tmp_name'], $uploadfile)) {
          echo "Файл корректен и был успешно загружен. <a href='index.php'>Вернуться.</a>\n";
      } else {
          echo "Во время загрузки произошла ошибка! <a href='index.php'>Попробуйте снова.</a>\n";
      }

    Заливаем изображение на сервер, и если все прошло успешно выводим соответствующее сообщение.

    С загрузкой изображения все.

    Идем дальше отправляем уведомление на почту о том что был загружен файл и его оригинальное название.

    ...
    if (move_uploaded_file($_FILES['fileToUpload']['tmp_name'], $uploadfile)) {
          echo "Файл корректен и был успешно загружен. <a href='index.php'>Вернуться.</a>\n";
          $message = 'Загружено новое изображение с названием: ' . $_FILES['fileToUpload']['name'];
          send_email('Твой раб', $message);
      } else { ...

    Добавляем 2 строчки в условие если загрузка прошла успешно:

          $message = 'Загружено новое изображение с названием: ' . $_FILES['fileToUpload']['name'];
          send_email('Твой раб', $message);

    и дописываем в конец нашего скрипта вот такую функцию:

    function send_email($name = 'Аноним', $message = 'Я дефолтное сообщение, кажется мой хозяйн забыл меня исправить :с') {
      $subject = 'Уведомление о загрузке изображения';
      $name = "=?UTF-8?B?".base64_encode($name)."?=";
      $subject = "=?UTF-8?B?".base64_encode($subject)."?=";
      $to = 'mail@my-site.ru';
      #$to = 'alex@goldstudio.kz';
      $headers = "From: $name\r\n";
      $headers .= "MIME-Version: 1.0" . "\r\n";
      $headers .= "Content-type: text/html; charset=UTF-8" . "\r\n";
      //var_dump($to, $subject, $message);
      $message = wordwrap($message, 70);
      $send = mail($to, $subject, $message, $headers);
    }

    Она то и будет отвечать за отправку сообщения на почту.


    Собственно вот наш готовый скрипт:

    <?
    $type = explode('/', $_FILES['fileToUpload']['type'])[1];
    if($type == "jpeg" or $type == "png" or $type == "bmp" or $type == "gif") {
      $filename = 'my_first_uploaded_image.' . $type;
      $uploaddir = 'uploads/';
      $uploadfile = $uploaddir . $filename;
      if(!file_exists($uploaddir)) {
        mkdir($uploaddir);
      }
      if (move_uploaded_file($_FILES['fileToUpload']['tmp_name'], $uploadfile)) {
          echo "Файл корректен и был успешно загружен. <a href='index.php'>Вернуться.</a>\n";
          $message = 'Загружено новое изображение с названием: ' . $_FILES['fileToUpload']['name'];
          send_email('Твой раб', $message);
      } else {
          echo "Во время загрузки произошла ошибка! <a href='index.php'>Попробуйте снова.</a>\n";
      }
    } else {
      echo "Неверный тип изображения, проверьте загружаемый файл и <a href='index.php'>попробуйте снова.</a>
      <br>Типы файлов которые могут быть загружены:<br> JPEG, JPG, PNG, BMP, GIF";
    }
    function send_email($name = 'Аноним', $message = 'Я дефолтное сообщение, кажется мой хозяйн забыл меня исправить :с') {
      $subject = 'Уведомление о загрузке изображения';
      $name = "=?UTF-8?B?".base64_encode($name)."?=";
      $subject = "=?UTF-8?B?".base64_encode($subject)."?=";
      $to = 'mail@my-site.ru';
      #$to = 'alex@goldstudio.kz';
      $headers = "From: $name\r\n";
      $headers .= "MIME-Version: 1.0" . "\r\n";
      $headers .= "Content-type: text/html; charset=UTF-8" . "\r\n";
      //var_dump($to, $subject, $message);
      $message = wordwrap($message, 70);
      $send = mail($to, $subject, $message, $headers);
    }
    ?>
    

    Enjoy 🙂

    [/spoiler]

  • Php урок 9. Сжатие изображений

    PHP и GD library — работа с графикой

    В этой статье рассмотрены вопросы работы в PHP c графической библиотекой GD library — открытие, вывод на экран и сохранение изображений.

    Вступление

    Обработка изображений сейчас очень востребована в скриптах языка программирования PHP. Рассмотрим наиболее частые случаи работы с графическими файлами.

    Для начала убедитесь, что у вас установлена библиотека GD library — просто запустите скрипт с функцией phpinfo(); В результате выполнения скрипта будет выведена информация об этой библиотеке (содержится в блоке gd):

    Чтение изображений

    Нашими первыми функциями будут создание нового изображения или открытие уже существующего. Пока рассмотрим лишь открытие существующего изображения:

    // переменная, которая указывает на путь к нашему изображению
    $im = @imagecreatefromjpeg('test.jpg'); 
    if ($im === false) {   
     die ('Не удается открыть изображение');
    }
    echo 'Изображение успешно открыто';

    Как видите, функция imagecreatefromjpeg() используется просто для открытия изображения типа JPEG, но не вывода его на дисплей. Переменная $im содержит путь к изображению. Если указанного файла не существует, то выдается сообщение «Не удается открыть изображение».

    Если же вы хотите открыть изображение не JPEG, а, к примеру, GIF, то нужно вызвать другую функцию:

    // переменная, которая указывает на путь к нашему изображению
    $im = @imagecreategif('test_gif.gif'); 
    if ($im === false) {
        die ('Не удается открыть изображение');
    }
    echo 'Изображение успешно открыто';

    Но может вы уже догадались, что у данного метода открытия файлов есть один недостаток. Проблема в том, что не всегда есть возможность знать тип открываемого файла, что снижает функциональность скрипта.

    Но это преодолимо. Для решения подобной проблемы мы рассмотрим универсальную функцию, которая будет открывать графические файлы всех самых распространенных типов.

    Открытие файлов разных типов

    Наша универсальная функция может открывать разные типы графических файлов путем определения расширения файла:

    $image = open_image('test_jpg.jpg'); 
    if ($image === false) {
        die ('Не удается открыть изображение');
    }
    echo 'Изображение успешно открыто'; 
    function open_image ($file) {
        // Получаем информацию об расширении файла
        $extension = strrchr($file, '.');
        $extension = strtolower($extension);
        switch($extension) {
            case '.jpg':
            case '.jpeg':
                $im = @imagecreatefromjpeg($file);
                break;
            case '.gif':
                $im = @imagecreategif($file);
                break;
             // ... и так далее
             default:
                $im = false;
                break;
        }
        return $im;
    }

    Но даже это решение не решает всех проблем: а что делать, если у файла расширение задано неправильно? Ведь JPG картинке можно запросто дать расширение GIF (test_jpg.gif) или GIF картинку назвать ‘test_gif.txt’.

    Решение будет следующее — перебор возможных способов открытия файл функциейimagecreate(). Ведь типов графических файлов (наиболее распространенных) не так и много, что позволяет довольно быстро точно определить этот самый тип.

    Вот пример такого скрипта:

    $image = open_image('test_jpg.jpg'); 
    echo 'Изображение успешно открыто'; 
    function open_image ($file) {
        # JPEG:
        $im = @imagecreatefromjpeg($file);
        if ($im !== false) { return $im; }
        # GIF:
        $im = @imagecreategif($file);
        if ($im !== false) { return $im; }
        # PNG:
        $im = @imagecreatepng($file);
        if ($im !== false) { return $im; }
        # GD File:
        $im = @imagecreategd($file);
        if ($im !== false) { return $im; }
        # GD2 File:
        $im = @imagecreategd2($file);
        if ($im !== false) { return $im; }
        # WBMP:
        $im = @imagecreatewbmp($file);
        if ($im !== false) { return $im; }
        # XBM:
        $im = @imagecreatexbm($file);
        if ($im !== false) { return $im; }
        # XPM:
        $im = @imagecreatexpm($file);
        if ($im !== false) { return $im; }
        # Попытка открыть со строки:
        $im = @imagecreatestring(file_get_contents($file));
        if ($im !== false) { return $im; }
        return false;
    }

    Как видите, идея довольно просто — мы просто по очереди вызываем функциюimagecreate() до тех пор, пока не определим тип графического файла.

    Еще можно определить тип файла через функцию getimagesize() — она возвращает массив, который содержит информацию о файле — [width, height, imageType] (ширина, высота, тип файла) — более подробно об этой функции — getimagesize.

    Теперь, когда мы знаем как правильно открыть изображение, рассмотрим функции его обработки.

    Вывод на экран и сохранение изображения

    После того, как вы откроете изображение и произведете с ним манипуляции, естественно есть желание посмотреть результаты работы. Для этого существуют специальные функции, такие как imagegif() и imagejpeg().

    Вот пример их использования:

    // Открываем изображение
    $image = open_image('test_jpg.jpg');
    // Некоторые манипуляции с изображением (изменение размера, цвета и т.п.) 
    // Вывод изображения на экран
    imagejpeg($image); 
    function open_image ($file) {
        // полный листинг функции приведен выше
    }

    Если вы выполните этот скрипт по указанной выше ссылке, то результат вас удивит: вместо изображения вы можете увидеть лишь набор непонятных символов — это будет в браузере Opera и Mozilla Firefox, браузеры на движке IE (cам Internet Explorer, Avant и Maxton) умеют корректно определять тип открываемого файла.

    Происходит это по той простой причине, что мы не отправили в браузер корректного поля заголовка Content-Type header. Ведь по умолчанию стоит тип ‘text/html‘, вот поэтому браузеры неправильно определили тип файла — вместо изображения вывели на экран текстовый файл. Что из этого получилось, вы уже видели.

    Для решения этой проблемы необходимо задать формат данных явно с помощью поля заголовка Content-Type:

    // Открываем изображение
    $image = open_image('test_jpg.jpg'); 
    // Некоторые манипуляции с изображением (изменение размера, цвета и т.п.) 
    // Отправляем поле заголовкаheader ('Content-Type: image/jpeg'); 
    // Выводим изображение на экранimagejpeg($image); 
    function open_image ($file) {
        // полный листинг функции приведен выше
    }

    Если вы теперь запустите этот скрипт, то увидите, что изображение отображается корректно во всех браузерах. Также есть возможность сохранить картинку на жесткий диск. Еще можно явно задать имя сохраняемой картинки — для этого используется второй аргумент в функции imagejpeg().

    Вот как это выглядит:

    // Открываем изображение
    $image = open_image('test_jpg.jpg');
    if ($image === false) {
     die ('Не удается открыть изображение'); 
    } 
    // Некоторые манипуляции с изображением (изменение размера, цвета и т.п.) 
    // Сохранение изображения в той же папке, что и файл test_jpg.jpg
    imagejpeg($image, 'my_image.jpg'); 
    function open_image ($file) {
        // полный листинг функции приведен выше
    }

    В результате выполнения скрипта в вашей папке появится файл my_image.jpg. Поскольку в данном случае мы не выводим изображение на дисплей, то и отправлять явно поле заголовка не обязательно.

    Вот еще несколько практических примеров использования библиотеки GD library

    Рисование полигонов

    С помощью функции imagepolygon() можно создавать полигон (многоугольник).

    Описание функции

    bool imagepolygon (resource image, array points, int num_points, int color)

    imagepolygon() создаёт многоугольник на изображении.

    image — указывает на изображение, на котором будет нарисован многоугольник

    points — это PHP-массив, содержащий вершины полигона, т.е. points[0] = x0, points[1] = y0, points[2] = x1, points[3] = y1, и т.д.

    num_points это общее количество вершин.

    color — цвет линий многоугольника, задается функцией imagecolorallocate()

    Также нам потребуется использовать функцию imagecreate () для создания изображения, задать координаты многоугольника в виде массива, количество координат и цвет линий многоугольника.

    Вот сам скрипт:

    // создаем холст (чистое изображение)
    $image = imagecreate(200, 110); 
    // цвет фона
    $bg = imagecolorallocate($image, 10, 129, 239); 
    // цвет линий
    $color = imagecolorallocate($image, 255, 255, 255); 
    // рисуем многоугольник (полигон)
    imagepolygon($image,array (0, 0,100, 90,180, 100,100,10 ),4,$color);
    // выводим изображение на экран
    header("Content-type: image/gif");
    imagegif($image);

    Поворот изображения

    Используя библиотеку GD Library с помощью функции imagerotate () можно вращать изображение на заданный угол.

    Описание функции

    resource imagerotate (resource src_im, float angle, int bgd_color)

    Осуществляет поворот изображение src_im на угол angle.

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

    // Изображение, которое мы будем переворачивать
    $image = 'ice_age.jpg'; 
    // На какое количество градусов
    // (положительные числа - против часовой, отрицательные - против нее)
    $degrees = 90; 
    // Указываем поле заголовка для типа файлов .jpg,
    // если используются другие типы заменяем на png или gif
    header('Content-type: image/jpeg'); 
    // Создаем холст (пустую картинку)
    $source = imagecreatefromjpeg($image); 
    // Поворачиваем изображение
    $rotate = imagerotate($source, $degrees, 0); 
    // Выводим повернутое изображение в браузер
    imagejpeg($rotate);

    Конвертирование изображения в серый цвет (полутоновое)

    Немного теории, чтобы были понятными алгоритмы преобразования изображения из цветного (RGB) в серое (YIQ):

    Цветовая модель – Способ распределения и задания цвета в конкретной программе или системе. Наиболее используемые в компьютерной графике и видео цветовые модели: RGB (красный, зелёный, синий), YUV (Y – сигнал, определяющий полутон или яркость, U и V – сигналы, определяющие цветность) и YIQ (цветовая модель, применяемая в видеосигналах NTSC).

    YIQ цветовая модель (YIQ color model)

    Каждый цвет в модели YIQ задается с помощью установки значений трех параметров: Y — интенсивности (luminance,) и двух цветностей I и Q, позволяющих совместно управлять созданием цвета с помощью зеленого, синего, желтого и пурпурного цветов.

    Так установка минимальных значений I и Q (0, 0) приводит к получению зеленого цвета, а установка их максимальных значений (255,255) дает пурпурный цвет. Каждая из компонент YIQ модели может изменяться в диапазоне от 0 до 255.

    Подготавливаем холст

    Первая часть скрипта выполняет функции подготовки изображения к конвертированию цвета:

    //Файл, который мы будет конвертировать
    $file = 'cat_1.jpg'; 
    // Поле заголовка
    header('Content-type: image/jpeg'); 
    // Размеры изображения
    list($width, $height) = getimagesize($file); 
    // Создаем изображение JPEG из файла
    $source = imagecreatefromjpeg($file); 
    // Создаем холст
    $bwimage= imagecreate($width, $height); 
    // Создаем 256-цветную палитру
    for ($c=0;$c<256;$c++){
      $palette[$c] = imagecolorallocate($bwimage,$c,$c,$c);
    } 
    //Функция yiq для преобразования в серый цвет
    function yiq($r,$g,$b){
      return (($r*0.299)+($g*0.587)+($b*0.114));
    }

    Генерация черно-белой картинки

    В коде присутствует два цикла for для обхода всего изображения по координатам Y и X.

    С помощью функции imagecolorat () возвращаем индекс цвета пикселя в цветовой палитре, который находится на изображении (переменная $source) в точке с координатамиxy (переменные $x$y).

    Далее идет вызов функции yiq() для преобразования цветов изображения в серые тона. В самом конце используется функция imagesetpixel() для рисования пикселя заданным цветом в точке с координатами xy на изображении image.

    // Считываем оригинальное изображение по пикселям
    for ($y=0;$y<$height;$y++){
      for ($x=0;$x<$width;$x++){
        $rgb = imagecolorat($source,$x,$y);
        $r = ($rgb >> 16) & 0xFF;
        $g = ($rgb >> 8) & 0xFF;
        $b = $rgb & 0xFF; 
        // Используем функцию yiq для изменения rgb-палитры
        // нашего цветного изображения, чтобы преобразовать его в серое
        $gs = yiq($r,$g,$b);
        imagesetpixel($bwimage,$x,$y,$palette[$gs]);
      }
    } 
    // Выводим в браузер преобразованное изображение
    imagejpeg($bwimage);

    И на последок  сжатие изображений

     

    <?
    function compress($path,$file)
    {
    $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
    //error_reporting(0);
    ini_set('memory_limit', '512M');
    if($ext=='jpg' || $ext=='jpeg'|| $ext=='png')
    {
     $sfile=$path."s_".$file;
     $lfile=$path."l_".$file;
     $fullfile=$path.$file;
     if(!($im = imagecreatefromjpeg($fullfile)))
     $im = imagecreatefrompng($fullfile);
     if($im)
     {
     $iw = imagesx($im); $ih = imagesy($im);
     $k = 650 / $iw;
     if($k>1)$k=1;
     $sx = floor($iw * $k); $sy = floor($ih * $k);
     $im_m = imagecreatetruecolor($sx, $sy);
     imagealphablending( $im_m, false );
     imagesavealpha( $im_m, true );
     $transparent = imagecolorallocatealpha($im_m, 255, 255, 255,255);
    
     imagefilledrectangle($im_m, 0, 0, $sx, $sy, $transparent); 
     imagecopyresampled($im_m, $im, 0, 0, 0, 0, $sx, $sy, $iw, $ih);
     $r_l = imagejpeg($im_m,$lfile);
    
     $iw = imagesx($im); $ih = imagesy($im);
     $k = 100 / $iw;
     if($k>1)$k=1;
     $sx = floor($iw * $k); $sy = floor($ih * $k);
     $im_m = imagecreatetruecolor($sx, $sy);
     imagealphablending( $im_m, false );
     imagesavealpha( $im_m, true );
     $transparent = imagecolorallocatealpha($im_m, 255, 255, 255, 127);
     imagefilledrectangle($im_m, 0, 0, $sx, $sy, $transparent); 
     imagecopyresampled($im_m, $im, 0, 0, 0, 0, $sx, $sy, $iw, $ih);
     $r_s = imagejpeg($im_m,$sfile);
     }
    else
     {
     copy($fullfile, $lfile);
     copy($fullfile, $sfile);
     }
    }
    error_reporting(1);
    }
    ?>

    ссылка для закачки проекта. http://ikurs.kz/alexey.zip

     

  • JS Урок 2. Javascript — примеры скриптов

    Введение в JS в примерах

    Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) — объектная модель, используемая для XML/HTML-документов.

    Согласно DOM-модели, документ является иерархией.
    Каждый HTML-тег образует отдельный элемент-узел, каждый фрагмент текста — текстовый элемент, и т.п.

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

    Простейший документ

    Построим, для начала, дерево для следующего документа.


    Самый внешний тег — <html>, поэтому дерево начинает расти от него.

    <html>
    <head>
    <title>Заголовок</title>
    </head>
    <body>
      Прекрасный документ
    </body>
    </html>

    Внутри <html> находятся два узла: <head> и <body> — они становятся дочерними узлами для <html>.

    Теги образуют узлы-элементы (element node). Текст представлен текстовыми узлами(text node). И то и другое — равноправные узлы дерева DOM.

    Пример посложнее

    Рассмотрим теперь более жизненную страничку:

    <html>
        <head>
            <title>
                О лосях
            </title>
        </head>
        <body>
            Правда о лосях.
            <ol>
                <li>
                    Лось - животное хитрое
                </li>
                <li>
                    .. И коварное
                </li>
            </ol>
        </body>
    </html>
    

    Корневым элементом иерархии является html. У него есть два потомка. Первый -head, второй — body. И так далее, каждый вложенный тег является потомком тега выше:

    На этом рисунке синим цветом обозначены элементы-узлы, черным — текстовые элементы.

    Дерево образовано за счет синих элементов-узлов — тегов HTML.

    А вот так выглядит дерево, если изобразить его прямо на HTML-страничке:

    Кстати, дерево на этом рисунке не учитывает текст, состоящий из одних пробельных символов. Например, такой текстовый узел должен идти сразу после <ol>. DOM, не содержащий таких «пустых» узлов, называют «нормализованным».

    Пример с атрибутами и DOCTYPE

    Рассмотрим чуть более сложный документ.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
        <head>
            <title>Документ</title>
        </head>
        <body>
            <div id="dataKeeper">Data</div>
            <ul>
                <li style="background-color:red">Осторожно</li>
                <li class="info">Информация</li>
            </ul>
            <div id="footer">Made in Russia &copy;</div>
        </body>
    </html>
    

    Это свойство управляет стилем. Оно аналогично установке стиля в CSS.Верхний тег — html, у него дети head и body, и так далее. Получается дерево тегов:

    Атрибуты

    В этом примере у узлов есть атрибуты: style, class, id. Вообще говоря, атрибуты тоже считаются узлами в DOM-модели, родителем которых является элемент DOM, у которого они указаны.

    Однако, в веб-программировании в эти дебри обычно не лезут, и считают атрибуты просто свойствами DOM-узла, которые, как мы увидим в дальнейшем, можно устанавливать и менять по желанию программиста.

    Свойства элементов

    У элементов есть масса свойств. Обычно используется максимум треть из них. Некоторые из них можно читать и устанавливать, другие — только читать.

    Есть еще и третий вариант, встречающийся в IE — когда устанавливать свойство можно только во время создания элемента.

    Рассмотрим здесь еще некоторые (не все) свойства элементов, полезные при работе с DOM.

    tagName

    Атрибут есть у элементов-тегов и содержит имя тега в верхнем регистре, только для чтения.

    Например,

    alert(document.body.tagName) // => BODY

    Например, можно установить element.style.width:style

    Исходный код этой кнопки:

    <input type="button" style="width: 300px" onclick="this.style.width = parseInt(this.style.width)-10+'px'" value="Укоротить на 10px" />
    Когда-то это свойство поддерживалось только в IE. Теперь его поддерживают все современные браузеры.Обработчик события onclick обращается в этом примере к свойствуthis.style.width, т.к значением this в обработчике события является текущий элемент (т.е сама кнопка). Подробнее об этом — во введении в события.

    Есть общее правило замены — если CSS-атрибут имеет дефисы, то для установкиstyle нужно заменить их на верхний регистр букв.

    Например, для установки свойства z-index в 1000, нужно поставить:

    element.style.zIndex = 1000

    Оно содержит весь HTML-код внутри узла, и его можно менять .innerHTML

    Свойство innerHTML применяется, в основном, для динамического изменения содержания страницы, например:

    document.getElementById('footer').innerHTML = '<h1>Bye!</h1> <p>See ya</p>'

    Пожалуй, innerHTML — одно из наиболее часто используемых свойств DOM-элемента.

    className

    Это свойство задает класс элемента. Оно полностью аналогично html-атрибуту «class».

    elem.className = 'newclass'
    
    
    
    Для того чтобы получить доступ к определенному элементу используйте document.getElementById.
    
    element = document.getElementById(id);
    

    События JavaScript

    В JavaScript, как и других объектно ориентированных языках, определен ряд событий, связанных с элементами документа. Обработчики дают возможность организовать реакцию на возникновение событий из сценария. При этом соответствующий обработчик указывается как атрибут элемента HTML-документа; значением этого атрибута является выражение JavaScript. Например,

    <div onmouseOver="this.style.bgColor='#CCCCCC'" 
               onmouseOut="this.style.bgColor='#EEEEEE'
          ">
          Наведите курсор мыши
          </div>

     

     

    — наведение и увод курсора мыши на элемент сопровождаются изменением цвета фона.

    <body onUnLoad="alert('окно закрывается!'">
    — при попытке пользователя закрыть окно и выгрузить документ выводится сообщение

    <img src="cat.jpg" onClick="showPict()">
    — при щелчке мышью по изображению выполняется некая функция showPict()

    Половина обработчиков поддерживаются практически всеми HTML-элементами ( * ). Некоторые события можно имитировать с помощью соответствующих методов. Ниже приводится список событий согласно спецификации HTML 4.0 и некоторые события, поддерживаемые MS IE. Трактовка браузеров может отличаться от стандарта и в плане применимости обработчика к тем или иным элементам

    Обработчик события Поддерживающие HTML-элементы Описание Метод
    имитации
    onAbort IMG Прерывание загрузки изображения
    onBlur A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA Потеря текущим элементом фокуса, т.е. переход к другому элементу. Возникает при щелчке мышью вне элемента либо нажатии клавиши табуляции blur()
    onChange INPUT, SELECT, TEXTAREA Изменение значений элементов формы. Возникает после потерей элементом фокуса, т.е. после события blur change()
    onClick   Практически все HTML-элементы Одинарный щелчок (нажата и отпущена кнопка мыши) click()
    onDblClick   Практически все HTML-элементы Двойной щелчок
    onError IMG, WINDOW Возникновение ошибки выполнения сценария
    onFocus A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA Получение элементом фокуса (щелчок мышью на элементе или очередное нажатие клавиши табуляции) focus()
    onKeyDown   Практически все HTML-элементы Нажата клавиша на клавиатуре
    onKeyPress   Практически все HTML-элементы Нажата и отпущена клавиша на клавиатуре
    onKeyUp   Практически все HTML-элементы Отпущена клавиша на клавиатуре
    onLoad BODY, FRAMESET Закончена загрузка документа
    onMouseDown    Практически все HTML-элементы Нажата кнопка мыши в пределах текущего элемента
    onMouseMove   Практически все HTML-элементы Перемещение курсора мыши в пределах текущего элемента
    onMouseOut    Практически все HTML-элементы Курсор мыши выведен за пределы текущего элемента
    onMouseOver   Практически все HTML-элементы Курсор мыши наведен на текущий элемент
    onMouseUp   Практически все HTML-элементы Отпущена кнопка мыши в пределах текущего элемента
    onMove WINDOW Перемещение окна
    onReset FORM Сброс данных формы ( щелчок по кнопке
    <input type=»reset»> )
    reset()
    onResize WINDOW Изменение размеров окна
    onSelect INPUT, TEXTAREA Выделение текста в текущем элементе
    onSubmit FORM Отправка данных формы ( щелчок по кнопке
    <input type=»submit»> )
    submit()
    onUnload BODY, FRAMESET Попытка закрытия окна браузера и выгрузки документа

    *  Практически все HTML-элементы :  все, за исключением APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE

    Математические операторы и их использование.

    ОПЕРАТОР рекомендуемое использование Стандартное использование
    = x = y x = y
    += x += y x = x + y
    -= x -= y x = x — y
    *= x *= y x = x * y
    /= x /= y x = x / y
    %= x %= y x = x % y

    Логические операторы.

    Operator Description
    == Равно
    === Равные значения/ Равные типоы
    != Не равно
    !== Не равные значения/ не равные типы
    > Больше чем
    < Меньше чем
    >= Больше или равно чем
    <= Меньше или равно чем

     

     

    setTimeout и setInterval

    Почти все реализации JavaScript имеют внутренний таймер-планировщик, который позволяет задавать вызов функции через заданный период времени.

    setTimeout

    Синтаксис:

    var timerId = setTimeout(func/code, delay[, arg1, arg2...])

    func/codeПараметры:

    Функция или строка кода для исполнения.
    Строка поддерживается для совместимости, использовать её не рекомендуется.

    delay

    Задержка в милисекундах, 1000 милисекунд равны 1 секунде.

    arg1arg2

    Аргументы, которые нужно передать функции. Не поддерживаются в IE9-.

    Исполнение функции произойдёт спустя время, указанное в параметре delay.

    Например, следующий код вызовет alert(‘Привет’) через одну секунду:

    function func() {
      alert('Привет');
    }
    setTimeout(func, 1000);

    Если первый аргумент является строкой, то интерпретатор создаёт анонимную функцию из этой строки.

    То есть такая запись работает точно так же:

    setTimeout("alert('Привет')", 1000);

    Использование строк не рекомендуется, так как они могут вызвать проблемы при минимизации кода, и, вообще, сама возможность использовать строку сохраняется лишь для совместимости.

    Вместо них используйте анонимные функции:

    setTimeout(function() { alert('Привет') }, 1000);

    Параметры для функции и контекст

    Во всех современных браузерах, с учетом IE10, setTimeout позволяет указать параметры функции.

    Пример ниже выведет «Привет, я Вася» везде, кроме IE9-:

     

    function sayHi(who) {
      alert("Привет, я " + who);
    }
    setTimeout(sayHi, 1000, "Вася");

    …Однако, в большинстве случаев нам нужна поддержка старого IE, а он не позволяет указывать аргументы. Поэтому, для того, чтобы их передать, оборачивают вызов в анонимную функцию:

    function sayHi(who) {
      alert("Привет, я " + who);
    }
    setTimeout(function() { sayHi('Вася') }, 1000);


    Отмена исполнения

    Функция setTimeout возвращает идентификатор timerId, который можно использовать для отмены действия.

    Синтаксис: clearTimeout(timerId).

    В следующем примере мы ставим таймаут, а затем удаляем (передумали). В результате ничего не происходит.

    var timerId = setTimeout(function() { alert(1) }, 1000);
    clearTimeout(timerId);

    Следующий пример при запуске станет выводить сообщение каждые две секунды, пока вы не нажмете на кнопку «Стоп»:setInterval

    Метод setInterval имеет синтаксис, аналогичный setTimeout.

    var timerId = setInterval(func/code, delay[, arg1, arg2...])

    Смысл аргументов — тот же самый. Но, в отличие от setTimeout, он запускает выполнение функции не один раз, а регулярно повторяет её через указанный интервал времени. Остановить исполнение можно вызовом clearInterval(timerId).

    <input type="button" onclick="clearInterval(timer)" value="Стоп">
    <script>
      var i = 1;
      var timer = setInterval(function() { alert(i++) }, 2000);
    </script>