Папярэдні занятак

Пратакол HTTP

Як мы ўжо далёка! Ці памятаеце Вы з чаго ўсё пачыналася? :) Мы ўжо шмат чаго можам: пабудавалі шмат прыкладаньня, практыкавалі аб’ектна-арыентаваны падыход пры разпрацоўцы, ведаем што такое тэсты, выкарыстоўвалі базы дадзеных для захаваньня дадзеных. Шмат карацей. Прыйшоў час рухацца далей – паказаць свае прыкладаньні ўсяму сьвету. Але каб гэта зрабіць нам трэба разабрацца як працуе Сеціва.

Калі Вы сёрфіце ў Сеціве Ваш браўзер дасылае запыт вэб-сэрверу, які ў адказ дасылае старонку. Гэтак жа будзем рабіць і мы – дасылаць старонку ў адказ.

Старонка дасылаецца ў выглядзе HTML – гэта такая мова праграмаваньня (таксама, як і SQL дэкляратыўная) якая кажа, як мусіць выглядаць старонка.

Калі Вы не знаёмы з HTML, Вы можаце праглядзець яго калі зойдзеце на старонку, напрыклад, course.by і цісніце Ctrl + U. Гэта вось HTML. Выглядае трохі складана, але будзьце ўпэўнены, нічога складаней, за тое, што мы ўжо ведаем, ня будзе. Перад тым як адлюстраваць старонку браўзер дасылае запыт (request) вэб-сэрверу, які вяртае адказ (response) які трымае HTML (і CSS і javascript і яшчэ што-небудзь) які Ваш браўзер пераўтварае ў старонку. Пратакол, па якому браўзер і сэрвер камунікуюць завецца HTTP, або Hypertext Transfer Protocol. Ваш браўзер выкарыстоўвае мэтад GET пратакол HTTP каб атрымаць інфармацыю з вэб-сервера.

Мы можам самі выканаць такі запыт з дапамогай Рубі. Усталюйце гем faraday і потым у кансолі выканайце:

  • require 'faraday'
  • response = Faraday.get 'http://course.by/'

Мы Выканалі get запыт на сервер course.by і ён вярнуў нам вялікі адказ у аб’екце response.

Мэтады HTTP вызначаюць тое дзеяньне, якое мусіць быць выканана. Ёсьць некалькі тыпаў мэтадаў HTTP, але толькі яшчэ адзін зь іх выкарыстоўваецца браўзерамі – POST. GET – бярэ інфармацы, POST – кладзе. Напрыклад, калі Вы рэгіструецеся на яком-небудзь сайце ці дадаеце каментар на course.by.

Калі б Вы не дасылалі HTTP запыт, Вы заўсёды завецеся кліентам (client), ня гледзячы на тое, браўзер Вы або праграма. Сэрвіс які адказвае на запыт завецца server.

Адказ HTTP падзяецца на тры часткі: status, headers, and body. Паглядзіце што мы толькі што атрымалі:

  • response.status
  • response.headers
  • response.body

Зараз выканайце GET запыт на http://course.by/test (Такой старонкі не існуе). На што зьмяніўся статус адказа?

Мінулы запыт меў статус 200. 200 значыць усё ОК; 404 значыць што такой старонкі не існуе. Вось невялічкі сьпіс самых частых кодаў:

  • 200 OK (successful)
  • 201 Created
  • 301 Moved Permanently
  • 302 Moved Temporarily
  • 400 Bad Request
  • 403 Forbidden (старонка існуе, але Вам не дазволена праглядаць яе)
  • 404 Not Found
  • 422 Unprocessable Entity
  • 500 Internal Server Error
  • 503 Service Unavailable (сэрвер вельмі загружаны)

Статусы пачынаючыеся з 2 пасьпяховыя, 3xx – гэта перанакірункі, 4xx значыць кліент зрабіў нешта ня так і 5xx значыць нешта ня тое зрабіў сэрвер.

Асновы HTML

Як Вы ўжо заўважылі response.body трымае HTML код, які браўзер пераўтварае ў старонку.

HTML значыць Hypertext Markup Language (Мова Разьметкі Гіпэртэксту) – асноўная мова разьметкі вэб-старонак у Інтэрнэце. course.by, ўкантакце, фэйсбук – 99.9% сайтаў у Інтэрнэце пабудаваны з дапамогай гэтай мовы.

HTML – гэта мова, якая ўяўляе старонку ў выгладзе дрэва. То бок, спачатку ідзе як бы корань – сама старонка, потым, напрыклад, дзьве сэкцыі, кожна сэкцыя мае загаловак і тэкст. Так усе й будзе выглядаць:

<html>
<section>
    <h1>How to feed cat</h1>
    <p>
        Despite being solitary hunters, cats are a social species, and cat communication
        includes the use of a variety of vocalizations (meowing, purring, trilling, hissing,
        growling and grunting) as well as cat pheromones and types
        of cat-specific body language.
    </p>
</section>
<section>
    <h1>Cat evolution</h1>
    <p>
        There are two main theories about how cats were domesticated. In one, people
        deliberately tamed cats in a process of artificial selection, as they were
        useful predators of vermin.
    </p>
</section>
</html>

html,section,h1,p – завуцца элементамі HTML. html – сам дакумант, section – элемент для групоўкі лягічна злучаных элементаў, h1 – загаловак першага ўзроўня (самы галоўны, ёсьць яшчэ h2, h3 і г.д.) і p – параграф тэксту.

Стварыце новы праект і ў галоўнай тэчцы новы файл – test.html (.html – гэта пашырэньне файлаў HTML). Скапіюйце туды гэтый код і адчыніце ў браўзеры. Што атрымалася?

Дакумант HTML

Існуе такая арганізацыю – w3c, якая ўсталюе правілы таго, як мусіць выглядаць Сеціва. Накот HTML таксама ёсьць такія правілы. Вось як мусіць выглядаць валідны html-дакумант:

<!DOCTYPE html>
<html>
<head>
    <title>Title of the page</title>
</head>
<body>
    <section>
        <h1>How to feed cat</h1>
        <p>
            Despite being solitary hunters ...
        </p>
    </section>
    <section>
        <h1>Cat evolution</h1>
        <p>
            There are two ...
        </p>
    </section>
</body>
</html>

Давайце зноў разглядзім што робіць кожны элемент:

  • <!DOCTYPE html> – вызначае якую вэрсію HTML трэба выкарстоўваць пры адпрацоўцы дакуманта. У дадзеным выпадку – html5.
  • head – элемент, які трымае ўсялякую дадатковую інфармацыю пра дакумант. Накшталт яго назвы. Тут таксама можа быць аўтар, мова, апісаньне й шмат шмат чаго яшчэ.
  • body – цела html-дакуманта. Сам яго зьмест.

Перарабіце свой файл. Дадайце туды гэты слушны html. Паглядзіце. Асабліва нічога не зьмянілася. Хіба? Назва зьмянілася! Зьмяніце назву, на тую, якая Вам падабаецца.

Існуе выдатны даведнік па html элементам на беларускай мове, якія мае сьпіс усіх і што робіць кожны. Варта праглядзець.

Два галоўных тыпа элемантаў

Перад тым як рушыць далей, давайце разглядзім самы галоўны элемент, які злучае ўсё Сеціва – спасылка.

Спасылка мае асобны тэг – a і звычайна выглядае вось так:

    <a href="http://example.com">Some site<a>

Дадайце ў параграф спасылку на Вашую старонку ў Інтэрнэце. Павінна атрымацца нешта такое:

<section>
    <h1>How to feed cat</h1>
    <p>
        Despite being solitary hunters ...
        <a href="http://example.com">My website!!</a>
    </p>
</section>

Куды яна дадалася? Запомніце месца.

Зараз паспрабуйце пасьля апошняга параграфа p дадаць яшчэ адзін. Паглядзіце як ён адлюстраваўся. Потым пасьля (не ўнутр!) параграфа дадайце спасылку, потым яшчэ адну й яшчэ. Нешта такое:

<section>
    <h1>How to feed cat</h1>
    <p>
        Despite being solitary hunters ...
        <a href="http://example.com">My website!!</a>
    </p>
    <p>
        Some text
    </p>
    <a href="http://course.by">course.by</a>
    <a href="http://nn.by">Nasha Niva</a>
    <a href="http://google.by">Google</a>
</section>

Ці адчуваеце Вы розніцу паміж a й p? Паспрабуйце сфармуляваць у чым адрозьненьне перад тым як чытаць далей.

Адрозьненьне ў тым, што p завецца разьметачным (flow) элементам (блёчным да html5), у той час як aтэкставы (phrasing) (inline-элемэнтам да html5).

Галоўнае адрозьненьне паміж разьметачнымі й тэкставымі элементамі ў тым, што разьметачныя займаюць 100% шырыні, таго кантэйнера, дзе яны знаходзяцца. Тэкставыя жа займаюць столькі месца па шырыні колькі ім патрэбна й ня больш.

Пачытайце падрабязьней пра разьметачныя й тэкставыя элементы.

Галоўныя разьметачныя элементы

Вось сьпіс з тлумачэньнямі самых распаўсюджаных разьметачных элементаў, якія будуць Вам найчасьцей сустракацца:

  • article – элемент, які пазначае артыкул. Напрыклад артыкул блога, або навіны. Галоўны крытэр – зьмест такога элемента зьяўляецца незалежным ад старонкі, на якой адлюстроўваецца.
  • nav – элемент, які трымае ў сябе набор спасылак для навігацыі па сайту.
  • aside – элемент, які ня мае прамога дачыненьня да асноўнага тэксту дакумэнту ці сайту. Напрыклад рэкляма.
  • section – Лагічна згрупаваны кантэнт. Напрыклад вынік пошуку, або рэклямная абвестка, або вялікая сэкцыя ў газеце (напрыклад фінансы). Галоўны крытэр – наяўнасьць загалоўка.
  • header – ужываецца для групаваньня элементаў, якія мусяць быць у загалоўцы старонцы або ў загалоўцы секцыі.
  • footer – уяўляе footer сэкцыі або старонцы, у якой ужываецца, – інфармацыя пра аўтарства, капірайт, злучаныя спасылкі або інш.
  • div – кантэйнер агульнага назначэньня.
  • p – параграф тэксту.
  • table – табліца.
  • ul, ol – непранумараваны й пранумараваны сьпісы адпаведна.

Магчыма ў Вас узьнікне пытаньне – навошта так шмат? Магчыма й div бы хапіла. Хапіла б, але як для нас людзёў, так і для машын прыемней чытаць семантычны код. Гэта значыць, што ня толькі зьмест стронкі нясе інфармацыю, але й яе код. То бок можна адрозьніць, напрыклад пошукавай сістэме, што датычыцца старонцы, а што проста зьяўляецца рэклямай.

Галоўныя тэкставыя элементы

  • a – спасылка. Мае абавязковы атрыбут href, які пазначае спасылку на іншую старонку.
  • strong – тлусты шрыфт.
  • img – малюнак. Таксама мае абавязковы атрыбут src – спасылку на малюнак.
  • span – гэтакі ж, як і div, толькі тэкставы. Кантэйнер агульнага назначэньня, які можа мець унутры толькі тэкставыя элементы

Блог

Давайце пачнем практыкавацца з html са спробы падубаваць разметку невялічкага блога. Спачатку вызначым што мы хочам.

Наш блог мусіць мець: назву, навігацыйнае меню, сам артыкул й месца дзе разьмесьціць воблака тэгаў. Пачынаем з назвы й меню:

<!DOCTYPE html>
<html>
<head>
    <title>My awesome blog</title>
</head>
<body>
<header>
    <h1>My awesome blog</h1>
    <p>Welcome!</p>
</header>
<nav>
    <ul>
        <li>Home</li>
        <li>Blog</li>
        <li>About</li>
    </ul>
</nav>
</body>
</html>

Канешне ня супер, але даволі нармалёва для першага разу. Ці зразумела Вам як працуе сьпіс? Калі не, пачытайце дакумэнтацыю.

Рушым далей. Дададзім сам артыкул і месца для воблака тэгаў:

<!DOCTYPE html>
<html>
<head>
    <title>My awesome blog</title>
</head>
<body>
<header>
    <h1>My awesome blog</h1>
    <p>Welcome!</p>
</header>
<nav>
    <ul>
        <li>Home</li>
        <li>Blog</li>
        <li>About</li>
    </ul>
</nav>
<article>
    <h2>Some great article</h2>
    <div>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
        <p>Paragraph 3</p>
    </div>
</article>
<aside>
    Place for tag-cloud
</aside>
</body>
</html>

Так сабе. Ні калароў, ні вольнага месца, ні магчымасьці размесьціць штосьці злева, а штосьці справа. Усё выглядае аднолькава!

Вось такі ён html.

Але, не ўсё так дрэнна, бо ёсьць магічная рэч, якая завецца css.

CSS

CSS значыць Cascading Style Sheets. У 199Х годзе ён быў створан для таго, каб дапамагчы HTML выглядаць больш прыгожа. Кажучы больш канкрэтна існуе тры тэхналёгіі HTML, CSS і Java Script. Кожная адказвае за сваю частку. HTML за тое што будзе адлюстрована на старонцы. CSS за тое як гэта будзе адлюстрована. І Java Script за тое, як гэта ўсё будзе ўзаемадзейнічаць.

Паспрабуйце дадаць наступную элемент у тэг head:

<style>
    header{
        color: blue;
    }

    li{
       font-size: 28px;
    }
</style>

Праглядзіце старонку. Што зьмянілася?

Коляр! Клёва?

style – гэта такі спецыяльны элемент html, які выкарыстоўваецца для таго, каб унутры яго пісаць css. header і li- гэта CSS-selector. CSS-selector – гэта ключавы тэрмін CSS.

CSS-selector – гэта тая рэч, якая кажа браўзеру да якога элемента прымяняць стылі. То бок у гэтым выпадку Вы сказалі што ў элемента header коляр тэксту павінен быць блакітным, а ў элемента li памер шрыфта – 28 пікселяў.

Адразу ўзьнікае пытаньне: а што калі мы хочам адзін li размаляваць блакітным, а другі чырвоным? На гэтае пытаньне ёсьць адказ – спецыяльны атрыбут html элементаў class.

Класам элемента можа быць любое слова, напрыклад red-li. Тады нам трэба дадаць клас элементу:

<ul>
    <li class="red-li">Home</li>
    <li>Blog</li>
    <li>About</li>
</ul>

І стварыць сам клас:

.red-li{
   color: red;
}

Звярніце ўвагу на тое, што селектар класаў пачынаецца з кропкі.

Паглядзіце што адбудзецца. Коляр толькі першага элемента сьпіса зьмяніўся на чырвоны.

Мы даведаліся пра яшчэ адзін тып селектараў, які завецца – class-селектор. Іх існуе шмат, таму пачытайце пра іх.

Пазіцыяваньне кантэнта

Наш блог даволі дрэнна выглядае. Ці не было б лепей, каб, прынамсі, ўсё знаходзілася па цэнтру? Паспрабуем:

<div class="wrapper">
    <header>
        <h1>My awesome blog</h1>
        <p>Welcome!</p>
    </header>
    <nav>
        <ul>
            <li class="red-li">Home</li>
            <li>Blog</li>
            <li>About</li>
        </ul>
    </nav>
    <article>
        <h2>Some great article</h2>
        <div>
            <p>Paragraph 1</p>
            <p>Paragraph 2</p>
            <p>Paragraph 3</p>
        </div>
    </article>
    <aside>
        Place for tag-cloud
    </aside>
</div>

І дададзім наступны класс:

.wrapper{
    width: 940px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 0 5px gray;
}

Ну вось. Нешта лепей. Дык што ж мы зрабілі?

  • Першае. Мы абгарнулі ўвесь наш код у <div class="wrapper">;
  • Другое. Мы стварылі клас .wrapper, які мае ўласьцівасьці:
    • width – шырыня нашага div. Ці памятаеце Вы што па дэфолту разьметычныя элементы маюць шырыню 100%. А тут мы дакладна вызначылі, якая яна павінна быць, каб было што цэнтраваць. Нельга ж элемент які мае шырыню размесьціць па цэнтру – ён і так “па цэнтру”. Таму мы яе трохі абмежавалі.
    • margin-left – водступ злева мусіць аўтаматычна вызначацца.
    • margin-right – водступ зправа мусіць аўтаматычна вызначацца. То бок, браўзер думае, куды мне размесьціць такі элемент, які мае фіксаваную шырыню й яго водступы злева й справа вызначаюцца аўтаматычна. Напэўна па цэнтру. Куды ж яшчэ? Так і робіць.
    • box-shadow – а гэта стыль для прыгажосьці, каб наш блог меў цень, каб была магчымасьць пабачыць якія межы мае наш .wrapper.

Можна пачытаць абмеркаваньне як лепей цэнтраваць элемент. Існуе шмат спосабаў, але гэта лепшы.

Дадайце яшчэ ўласьцівасьць padding са значэньнем 40px ва .wrapper. Не забывайцеся пра ;. Паглядзіце што атрымалася? Як бы Вы сфармулявалі што зьмянілася? Болей пра padding.

Пазбаўляемся ад непатрэбнага.

Мы гулялі з CSS і напісалі шмат коду, які нам асабліва не патрэбен. Выдаліце тое што лічыце непатрэбным: коляры ў хэдэра, клас .red-li, вялікі памер шрыфта ў элементаў сьпіса.

Чорна-бела, але лепей.

Float

Паўстае наступнае пытаньне. Як жа нам зрабіць, каб наш aside насамрэч быў збоку? Ёсьць такая магчымасьць і завецца яна – float.

Галоўны сэнс уласьцівасьці float у тым, што яна прымушае любы элемент прыціскацца да левага або правага боку. Паспрабуйце дадаць яе да элемента aside са значэньнем right. Што атрымаецца?

float: right;

aside прыціснецца ў правы бок, але ці так як мы хочам? Ня вельмі. Паспрабуйце зараз зрабіць наступнае:

<div class="content">
    <nav>
        <ul>
            <li>Home</li>
            <li>Blog</li>
            <li>About</li>
        </ul>
    </nav>
    <article>
        <h2>Some great article</h2>
        <div>
            <p>Paragraph 1</p>
            <p>Paragraph 2</p>
            <p>Paragraph 3</p>
        </div>
    </article>
</div>
.content{
    float:left;
}

Ну вось падаецца атрымалася. Але наш артыкул чамусьці знаходзіцца паза межамі .content. Чаму?

Таму што float прыціскаючы элемент да левага боку пазбаўляе яго ягонай шырыні ў сто адсоткаў. Ён займае зараз столькі месца, колькі яму трэба. І як бы вымае яго са старонкі, нібыта яго й няма.

Таму пасвабаждаецца шмат месца справа ад яго, якое нібыта й ня занята. Таму .content займае яго. Каб “заняць” гэтае месца нам трэба дадаць яшчэ адзін div, які будзе дзейнічаць як падзяляльнік паміж .content і футэрам старонкі.

Дадайце пасьля .aside наступны код:

<div style="clear: both;"></div>

Атрымалася? Зараз так.

Атрыбут style – гэта яшчэ адзін са спосабаў запісу CSS у HTML, але ён ня самы лепшы. Спрабуйце пазьбягаць яго. У дадзеным выпадку лепей стварыце клас, напрыклад .clear, у які дадайце гэтый код.

HTML Самастойнасьць

Адпрыгажуйце Ваш блог так, каб ён Вам спадабаўся. Вы здолееце! Зрабіце каб навігацыйнае меню мела спасылкі й таксама было з правага боку ў хэдэры.

Пра CSS і HTML, а асабліва пра CSS, можна весьці шмат размоў, але, як з Рубі, – галоўнае практыкавацца. Чым больш – тым лепш. Чым больш памылак – тым лепш.

Падумайце як бы мог выгладаць Ваш сайт. Шукаеце крыніцу для натхненьня? Паспрабуйце – dribble. Гэта сайт, на якім можна праглядзець апошнія трэнды ў дызайне. Штосьці падглядзець і выкарыстаць у сваім сайце. Зрабіце пошук па, напрыклад, ключавым слове – metro. Шмат натхненьня атрымаецца.

Памятайце пра выдатны даведнік па CSS на беларускай мове. Калі паўнавартасны на ангельскай – тады дакуманэтацыя ад Mozilla. Карацей рухайце й фігачце. Усе атрымаецца. Больш пісаць, менш чытаць.

Наступны занятак