Uvod u HTML - vodič kroz HTML programski jezik | Marketing Srbija - Izrada Web Sajta

Uvod u HTML – vodič kroz HTML programski jezik

HTML tablice – HTML Tables

Tablice se koriste za prikazivanje podataka u stupcima.

Tablice se više ne koriste za izradu strukture web stranice jer je tu zadaću preuzeo css.

HTML tablica je upisana između početne i završne oznake <table> elementa. Tablica može imati željeni broj redaka a svaki redak upisujemo između početne i završne oznake <tr> elementa.

Svaki redak ima jednaki broj ćelija koje omeđujemo oznakom elementa <td>…</td>.

HTML tablice – osnovni elementi

Označavanje početka i kraja tablice: <table> … </table>

Početak i kraj dijela gdje se nalazi zaglavlje stupaca: <thead> … </thead>

Početak i kraj zaglavlja kolone: <th> … </th>

Početak i kraj tdela stranice unutar kojeg se nalazi podaci: <tbody> … </tbody>

Početak i kraj retka tablice: <tr> … </tr>

Početak i kraj polja s podacima: <td> … </td>

Primer tablice u HTML-u:

<table> 
<thead> 
<tr> 
<th>Naziv 1 </th> 
<th>Naziv 2 </th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>Ćelija 1 u 1. redu </td> 
<td>Ćelija 2 u 1. redu </td> 
</tr> 
<tr> 
<td>Ćelija 3 u 2. redu </td> 
<td>Ćelija 4 u 2. redu </td> 
</tr> 
</tbody> 
</table>

Naziv 1 Naziv 2
Ćelija 1 u 1. redu Ćelija 2 u 1. redu
Ćelija 3 u 2. redu Ćelija 4 u 2. redu

Svojstvo border elementa <table>

Želimo li prikazati rubove tablice koristimo svojstvo border i dodjeljujemo mu vrijednost debljine crte ruba tablice. Ako svojstvo border nije definirano rubovi tablice ne će biti prikazani.

Svojstvo širine tablice : width Attribute

Zadano tablica zauzima prostor koji je dostatan kako bi bio prikazan sadržaj svih stupaca tablice.

U slučaju da je širina sadržaja manja od roditeljskog elementa i želimo je povećati moramo koristiti svojstvo width.

Roditeljski element je element u kojem je definirana tablica, najčešće je to <body> element koji zauzima cijeli prozor web preglednika).

Svojstvo width može biti izraženo kao apsolutna vrijednost u pikselima ili kao relativna vrijednost u postotcima u odnosu na roditeljski element.

Svojstvo rowspan tablice : rowspan Attribute

Kada želimo protegnuti stupac kroz više redaka koristimo svojstvo rowspan <td> elementa. Dodjeljujemo mu vrijednost u kojoj određujemo broj redaka kroz koja se proteže stupac.

Primjer stupca koji se proteže kroz 3 retka:

<table border="10">
<tr>
  <td rowspan="3" width="160">Prva kolona</td>
  <td width="160">Prvi red</td>
</tr>
<tr>
  <td>Drugi red</td>
</tr>
<tr>
  <td>Treći red</td>
</tr>
</table>
Prva kolona Prvi red
Drugi red
Treći red
<table border="1"> 
<tr> 
<td rowspan="3" width="160">Prva kolona</td> 
<td width="160">Prvi red</td> 
</tr> 
<tr> 
<td>Drugi red</td> </tr> <tr> <td>Treći red</td> 
</tr> 
</table>
Prva kolona Prvi red
Drugi red
Treći red

Tekst elementi

Primer teksta je prikazan ispod, to je običan tekst element koji se nalazi na početku i kraju teksta na sajtu.

<p>Tekst odlomka</p>

Ako želimo da napravimo razmak odnosno prelazak u nov red koristimo:

<br />

Naslovi i podnaslovi html elementi

<h1>Naslov stranice</h1>
<h2>Pod naslov</h2>
<h3>Pod naslov</h3>
<h4>Pod naslov</h4>
<h5>Pod naslov</h5>
<h6>Pod naslov</h6>
<p>Običan tekst</p>

Naslov ima svoj prostor oko sebe i to u praksi izgleda ovako:

Naslov stranice

Pod naslov

Pod naslov

Pod naslov

Pod naslov
Pod naslov

Običan tekst

Slika html element

<img src="ovde kopiramo URL link slike" />

Evo konkretnog primera:

<img src="https://www.marketingsrbija.rs/wp-content/uploads/2019/03/WEBSAJT-BANER-min-594x405.png" />

Evo kako taj primer iznad izgleda u praksi:

Link html element

Ako želimo da linkujemo neki tekst to radimo uz narednu ispod, između navodnika kopiramo link a između elementa <a..> unosimo teks koji će pretvoriti u link <..a>

<a href="https://www.marketingsrbija.rs">Tekst linka</a>

U praksi to izgleda ovako:

Tekst linka

Sada možemo spojiti element sliku + link i linkovati sliku, da kada neko klikne na nju ode na određenu stranicu.

<a href="https://www.marketingsrbija.rs"><img src="https://www.marketingsrbija.rs/wp-content/uploads/2019/03/WEBSAJT-BANER-min-594x405.png" /></a>

Evo kako kod izgleda u praksi, za razliku od primera ranije ovaj baner nas vodi na link koji smo dodali.

Dugme html element

Evo kako primer izgleda u praksi, CSS kod izgleda dugmeta je preuzeo po default-u dizajn teme, te kada koristite različite teme dugme će pratiti taj dizajn.

<button>dugme klik</button>

Ako želimo da dugme bude klikatibilno i da vodi na neki link, dodamo da izmedju dela gde bi se nalazio “tekst linka” iz primera ranije.

<a href="https://www.marketingsrbija.rs"><button>dugme klik</button></a>

U praksi izgleda ovako i sada nas klik na dugme vodi na link

Call Now Button