Продолжуваме со ден 3 од бесплатниот воведен курс за фронт-енд.
Приказната продолжува со изучување на HTML Lists , HTML Tables, HTML Form, HTML Div / Section / Article и HTML Text Style.
HTML Lists
HTML листите се поделени во два тага односно unordered list или <ul> и ordered list или <ol> . Како што и самиот збор кажува unordered list се неподредени листи додека ordered list се подредени листи. Разликата е во покажувањето на вашата страна. Доколку се користи unordered list пред продуктот ќе стојат знаци, а во спротивно ако се користи ordered list пред продуктот ќе стои број.
Кај <ul> тагот и <ol> тагот како и кај сите тагови има отварачки и затварачки таг. Овие листи се зависни од внатрешните тагови и мора тука да се стави <li> тагот што означува list. Продуктот што сакаме да го излистаме се става помеѓу <li></li> . Колку продукти сакаме да ставиме толку <li> тагови треба да ставиме внатре во листата.
Пример:
<li> Item one </li>
<li> Item two </li>
<li> Item three </li>
Овие тагови по дифолт кога доаѓаат до пребарувачот тој ги заменува со точки.
HTML Tables
Овој таг се користи за рендерирање на табела во постарите веб страни што биле статични. Кај тие страни доста се користеле табелите затоа што целата страна била фактички табела поделена на две колони или три колони во зависност од тоа каков бил дизајнот. Но, подоцна откако излегле одредени CSS properties што помагаат за колумно структурирање на страните table веќе не се користи за layout на страната. Сега се користи само кога треба да се рендерира некоја табела.
Кај tables има неколку внатрешни тагови што всушност ја формираат целата табела. Кои се тие?
Првиот таг е table head или <thead> и во него влегуваат сите тагови кои сакаме да ни се во хедерот на табелата односно обично се пишуваат имињата на колоните во thead. Table row тагот или <tr> означува еден ред во табелата. Потоа во првиот ред на табелата треба да се стават сите имиња на колони што сакаме да ги покажеме во табелата на екранот кои се означени со th.
Пример:
<table>
<thead>
<tr>
<th> Username </th>
<th> Email </th>
<th> Phone </th>
</tr>
</thead>
</table>
Кога сакаме да внесеме информации во колоните се користи <tbody> таг. Во <tbody> се става уште еден <tr> таг. Колку колони имаме толку <td> тагови треба да ставиме. Секој <td> таг претставува податоци за одредена колона.
HTML Form
Form тагот во html се користи за дефиниција на форми. Овој таг мора да се затвори </form>. Внатре во формата обично има input полиња. Input тагот е таг кој е самозатварачки. Има одредени атрибути според кои се пополнува input полето. Најкористени атрибути се type и name.
Најкористени input полиња се: text, email, number, password и date.
Placeholder атрибутот се користи да даде помош на корисникот за што се однесува тоа поле.
Над секое input поле се става label додека кај копче не се става label, а кај textarea исто така се става label.
Аплицирај!
HTML Div / Section / Article
Div тагот е празен таг и тој не испишува ништо туку само го реперзентира тоа што е внатре. Сличен на него е и section тагот кој се користи да одделите некоја секција.
Section тагот не прикажува ништо на екранот и е ист како div тагот, се користи само за групирање, но може многу да помогне за Google да го индексира вашиот сајт.
Сличен на овие два тагови е и article тагот кој се користи кога треба да се рендерираат одредени артикли. Article тагот обично се користи кај блогови и долги текстови кои може да се стилизираат со CSS.
HTML Text Style
Тагови што го стилизираат текстот се:
<em> Emphasized text </em>
<strong> Strong text </strong>
<u> Underline </u>
<mark> Highlighted text </mark>
Домашна задача
Присутните добија задача да креираат листа со производи и табела во која за секој производ ќе биде назначена цената и статусот на производот. Додека другиот дел од домашната е да креираат форма која ќе содржи инпут полиња за: име (text), емаил (email), лозинка (password) и една textarea за слободен текст. Секое од полињата да содржи соодветна лабела.
Доколку сеуште не се приклучи на овој бесплатен курс тоа можеш да го направиш сега. Вечерашниот час можеш да го следиш на следниот линк.
Ако сакаш да дознаеш повеќе за програмата на Академијата за фронт-енд и начините за плаќање закажи разговор со нашиот координатор тука.
