Змест

  1. Html5. Уводзіны. Занятак 1.
  2. Html5. Асноўныя элементы. Занятак 2.
  3. Html5. Пазыцыя. Макет.
  4. Html5. Вітанне css. Занятак 4. Частка 1.
  5. Html5. Вітанне css. Занятак 4. Частка 2.
  6. HTML5. Css прыгажосці. Занятак 5. Частка 1.
  7. HTML5. Css прыгажосці. Занятак 5. Частка 2.
  8. HTML5. Css прыгажосці. Занятак 5. Частка 3.
  9. HTML5. Формы. Занятак 6.
  10. Html5. Адаптыўнасць. Занятак 7. Частка 1.
  11. Html5. Адаптыўнасць. Занятак 7. Частка 2.
  12. Html5. Карысныя спасылкі.

Для чаго гэты курс?

Курс накірован на тое, каб Вы змаглі хутка стартануць свой it шлях. Гэта значыць, што пасля курсу – Вы будзеце пачынаючым, але ўжо цэласным спецыялістам, гатовым самастойна спраўляцца з задачамі. То бок Вам ня трэба адразу вывучыць яшчэ і php, базы дадзеных і г.д. каб пачаць рабіць рэальныя праекты, нам хопіць html, css і трошкі js.

Кім жа я буду ці хто такі вярстальшчык сення?

Калі груба, то вярстальшчык – гэта чалавек, які пераводзіць малюнак(jpg, psd) у html код, які ўжо адчыняецца браўзерам.

Навошта браўзеру патрэбен html? Таму што сайт павінен рэагаваць на дзеянні карыстальніка(пераходзіць па спасылкам, рэгістравацца і г.д.). Канешне браўзер выдатна адчыніць і малюнак, але на яго не паціскаешь, не скапіюешь тэкст і г.д., вынік – малюнак не актыўны. Прыклад сайта-малюнка нам прадаставіла студыя Ліхтар(паспрабуйце скапіяваць email). Перакладчык з малюнка ў html гучыць сумна, але ж на сення навыкі html, css – гэта ня проста “кодер”, магчымасці сапраўды ўраджваюць:

1. Робім свой прадукт, то бок свой макет сайта, і потым выкладаем яго на сусветныя пляцоўкі для продажу. Пляцоўка1 і Пляцоўка2.

2. Фрылансім. Раз, два, тры

3. Шукаем работу.

0. Выкарыстоўваць веды ў сваім праекце/бізнесе.

Каб зразумець падабаецца гэта ці не, варта спачатку гэтаму навучыцца.

Ваша задача на курс

Зарабіць сваёй работай >= 1$.

Займець першы прыклад для вашага партфоліо.

Навучыцца самастойнасці!

Усе што вам трэба – гэта пісаць код, гугл і сайты-даведнікі(1, 2, 3).

Дык навошта Вам настаўнік? Даказаць што ўсё вельмі проста і зусім ня страшна.

Сайт, браўзер

Што такое сайт?

Гэта проста праграма(як word ці фаташоп), толькі работае яна ў браўзары. Браўзер проста чытае наш html код і пасвойму яго адлюстроўвае. Напрыклад, мы зробім наступнае:

1. Адчынем блякнот і пішам там

<a href=”vk.com”> site vk.com </a$gt;</p>

2. Заховаем як файл html(замест txt)

3. Адчынем гэты файл браўзерам.

Мы пабачым блакітны надпіс vk.com і калі націснем на яго перайдзем на сайт ўкантакце.

Вось і ўся магія. Браўзер прачытаў(інтэрпрэтаваў) наш код <a href=”vk.com”>site vk.com</a> як звычайную спасылку.

Вынік: браўзер чытае наш код, радок за радком і адлюстроўвае яго па нейкім правілам.

Дык тады пытанне, калі мы заходзім на любы сайт, што адбываецца па-за сценай? Адкуль браўзер бярэ файлы, каб іх прачытаць? Разябромся. Калі мы зайшлі на course.by, мы проста спампавалі неабходныя файлы з інтернету(сервера) і адчынілі браўзерам іх на сваім кампе. Наш комп лічацца кліентам, комп адкуль спампавалі файлы – сервер. Вось і ўсё.

Адказнасці html, css, js

Html(разметка) код адказвае за структуру старонкі і семантыку.

Css(стылі) адказвае за знешні выгляд(напрыклад колер), памеры(шырыня/вышыня) і пазыцыю элементаў.

Javascript адказвае за дынамічнасць сайту – паведамленні карыстальніку, водгук калі мы ціскаем кнопкі і нейкую логіку(напрыклад валідацыя форм).

Знаёмціся html

Разглядзім html элемент спасылку(тэг а). Спасылка – надпіс, па ціску на які мы пераходзім на адпаведную старонку.

 <a href="vk.com">site vk.com</a>

 

<a> – адчыняем тэг а

href – атрыбут тэга

vk.com – значэнне атрыбута

site vk.com – тое, што змяшчае тэг а, яго змест(кантэнт) </a> зачыняем тэг а

Тэг <а> з’яўляецца парным – адчыняецца <а> і зачыняецца </a>.

Існуюць і не парныя тэгі, напрыклад </br> – перавод радку.

Структура html

<!DOCTYPE html> <!-- кажа што гэта html5(а не html4 напрыклад)-->
<html> <!--адчыняем наш html дакумент, які змяшчае <head> і <body>.-->
<head> <!--адчыняем тэг head(галава дакумента), якая змяшчае наступныя тэгі-->
<title>Мая першая старонка</title> <!--назва старонкі, якая адлюстроўваецца у вокладке браўзера-->
<meta charset="utf-8" /> <!--кадыроўка старонкі, каб браўзер зразумеў якія адлюстроўваць сымбалі-->
<meta name="title" content="Загаловак старонкі" /> <!--загаловак, мета тэг для SEO (інфармацыя выклычна для пашукавіка гугл, не паказваецца карыстальніку-->
<meta name="description" content="Апісанне зместу старонкі." /> <!--апісанне, мета тэг для SEO-->
<meta name="keywords" content="ключавыя словы старонкі" /> <!--ключавыя словы, мета тэг для SEO-->
<style>мой css</style> <!--змяшчае css стылі-->
<script>мой javascript</script> <!--змяшчае код javascript-->
</head> <!--канец "галавы" дакумента-->
<body> <!--адчыняем цела дакумента - асноўная частка, тое што будзе бачыць карыстальнік-->
Мой першы html5!
</body> <!--канец "цела"-->
</html> <!--канец дакумента html-->

Разглядзім тыповую старонку. Звычайна, яна складаецца з шапкі(header або div), асноўнага кантэйнера(section або div) і футэра(footer). Шапка будзе змяшчаць лагатып, навігацыю, галоўны загаловак.

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

Футэр(падвал) будзе змяшчаць тэкст з назвай і годам выпуска.

Пачнем.

<body>
    <header>Шапка сайту</header>
    <section>Асноўны кантэнт старонкі(яго цэнтральная частка)</section>
    <footer>Падвал</footer>
</body>

Дададзім кантэнт кожнаму элементу. У шапку(header) дадаем- галоўны загаловак(h1), лога(img), навігацыю(a).

<header>
<h1>Наша старонка</h1>
<img alt="" src="http://flipstorm.co.uk/bwb/img/logo-med.png" />
<a href="contactus.html">звяжыся з намі!</a>
<a href="about.html">пра нас</a>
<a href="blog.html">наш блог</a>
</header>

У асноўны кантэйнер(section) – запісы блога

<section>
<article>Артыкул 1</article>
<article>Артыкул 2</article>
<article>Артыкул 3</article>
</section>

І ў футэр(footer):

<footer>Superblog 2013.</footer>

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

<style>
    header { background: yellow;}</p>
</style>

Агулам у нас атрымалася наступная старонка:

<!DOCTYPE html>
<html>
<head>
<title>Мая першая старонка</title>
<meta charset="utf-8" />
<meta name="title" content="Загаловак старонкі" />
<meta name="description" content="Апісанне зместу старонкі." />
<meta name="keywords" content="ключавыя словы старонкі" />
<style>
header { background: yellow;}
</style>
</head>
<body>
<header>
<h1>Наша старонка</h1>
<img alt="" src="http://flipstorm.co.uk/bwb/img/logo-med.png" />
<a href="contactus.html">звяжыся з намі!</a>
<a href="about.html">пра нас</a>
<a href="blog.html">наш блог</a>
</header>
<section>
<artice>Артыкул 1</artice>
<artice>Артыкул 2</artice>
<artice>Артыкул 3</artice>
</section>
<footer>Superblog 2013.</footer>
</body>
</html>

Хатняе заданне: усталяваць web-storm, зрабіць шапку(+навігацыя), галоўную секцыю(малюнак + спасылка), футэр. Поспехаў, да сустрэчы!

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