Ня трэба ведаць усё.

Зірнем усе html элементы.Не пужайцеся, напамяць вучыць нічога ня трэба. Дастаткова азнаёміцца з спісам, каб ведаць аб іх існаванні і калі трэба залезці ў даведнік. Мы ж разглядзім найбольш папулярныя.

Загалоўкі, спісы, параграфы, малюнкі, спасылкі і блокі

h1, h2, h3, h4, h5, h6 – загалоўкі розных узроўняў.Напрыклад, h1 – галоўны загаловак старонкі, пажадана каб ён быў адзін на адну старонку.

<h1> Я адзіны і самы галоўны загаловак на старонке</h1>

Астатнія h2..h6 могуць прыменяцца на старонке колькі заўгодна разоў, адрозніваюцца толькі памерамі.

   <article>
       <header>
             <h3> Артыкул аб падзеях Менска</h3>
       <header>
   </article>

 

ul(ol) – спіс элементаў. li – элементы спісу. Можа быць маркерованы – ul і пранумараваны – ol. Напрыклад – маркерованы.(ul)

       <ul>
           <li>Беларусь</li>
           <li>Украіна</li>
           <li>Літва</li>
       </ul>

Тут жа – пранумараваны(ol)

       <ol>
           <li>Беларусь</li>
           <li>Украіна</li>
           <li>Літва</li>
       </ol>

 

img – малюнак. Прыклад.

    <img src="http://www.minsk.nemiga.info/gorod/troi.jpg">

 

a – спасылка. Ціскаем па зместу, пераходзім на заданы адрас Прыклад 1. Змест проста тэкст.

    <a href="http://course.by"> It адукацыя па-беларуску </a>

Прыклад 2. Змест – малюнак з тэкстам

    <a href="http://www.youtube.com/watch?v=m2TYMNftJFY">
        <img src="http://budzma.org/wp-content/uploads/2011/04/_bt2.jpg">
        Глядзець мульт пра Беларусь
    </a>

 

div – кантэйнер, змяшчае іншыя элементы. Будаўнічы блок старонкі. Напрыклад, блок навін, блок каментараў, блок банэраў. Прыклад1.

    <div >
       <div >
           Навіна 1.
       </div>
       <div >
           Навіна 2.
       </div>
    </div>

Звычайна назва css класа нясе сэмантэчнае значэнне.

    <div class="main-container">
         <div class="news">
             <div class="new">
                Навіна 1.
             </div>
             <div class="new">
                Навіна 2.
             </div>
         </div>
    </div>

 

p – параграф тэксту. Пачынаецца з новага радка. Прыклад.

    <p> Выдатны параграф пра Менск</p>
    <p> Выдатны параграф пра Віцебск</p>

 

span – абгортвае нейкую фразу ці слова, каб надаць css стыль. Не нясе семантэчнага сэнсу. Напрыклад зробік слова “памылка” чырвоным.

    <p> Нажаль вы дапусцілі <span style="color:red;">памылку</span></p>

 

Атрыбуты

Мы ўжо знаёмы з атрыбутамі. Гэта src у малюнка, ці class у любога html элемента. Атрыбуты бываюць 2 тыпаў, спецыфічныя і глабальныя.

Спецыфічныя маюць сэнс толькі для канкрэтных элементаў. Напрыклад элементу img неабходна указаць шлях да файла з малюнкам. То бок, атрыбут src прыменяецца толькі для элемента img. Атрыбут src – спецыфічны.

Глабальны атрыбуты могуць прыменяцца для любых html элементаў. Гэта id, class, style і г.д. Згадніцеся любы элемент можа мець свой ідэнтыфікатар і стыль.

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

Блочныя і ўбудаваныя элементы

Блочныя – гэта прамавугольнікі якія займаюць усю даступную шырыню. Да блочных элементаў адносяцца – div, h1-h6, p, form і г.д. Убудаваныя(inline) элементы займаюць толькі шырыню свайго зместа. Гэта span, a і г.д.

Разгедзім асноўныя адрозненні. Блокі 1. Займаюць усю даступную шырыню. 2. Заўсёды пачынаюцца з новага радку. 3. Змяшчаюць як блочныя, так і ўбудаваныя элементы.

Убудаваныя 1. Займаюць толькі шырыню зместа. 2. Пачынаюцца з свабоднага месца 3. Могуць змяшчаць толькі ўбудаваныя элементы.

Цалкам чытайце артыкулы пра блочныя і тэкставыя элементы.

Width, margin, padding, border

Разглядзім наступныя css уласцівасці. width – шырыня margin – знешні водступ padding – унутраны водступ border – мяжа элемента Пагуляем з імі над элементам div

<head>
<style type="text/css">
   div {
    width: 300px; /* Шырыня блока */
    margin: 7px; /* Значэнне знешніх водступаў */
    padding: 10px; /* Палі вакол зместу */
    border: 4px solid black; /* Параметры мяжы */
    background: #yellow; /* Колер фону */
   }
  </style>
 </head>
 <body>
  <div>Гуляем з css уласцівасцямі. Даведваемся з чаго складаецца шырыня ў браузеры</div>
 </body>

Таксама ўсю інфармацыю аб метрыках(шырыня, вотступы) можна паглядзець у кансолі гугл хрома – metrics.

Хатняе заданне: Скарыстацца ўсімі разгледжанамі элементамі. Зрабіць спісам навігацыю(спасылкі). Дадаць загалоўкі, параграфы, спаны ў кожны запіс блога. Зрабіць блок(div) каментараў. У гэта блок памясціць іншыя блокі-каментары. Пагуляцца з уласцівасцямі width, margin, border, padding у запісах блога і каментарах. Глядзець метрыку ў гугл хроме.

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