Jednostavni HTML kodovi koje možete naučiti za vrlo kratko vrijeme!

Jednostavni HTML kodovi koje možete naučiti za vrlo kratko vrijeme!

09/04/2023

Iako su moderne internet stranice dizajnirane tako da imaju korisničko sučelje koje je prijateljsko korisniku, ne škodi poznavanje osnova HTML-a. Ako nastavite čitati ovaj članak i naučite sve o čemu govorimo u nastavku, moći ćete kreirati vlastite web stranice za vrlo kratko vrijeme.

U nastavku slijede primjeri HTML koda koje možete sami testirati – dovoljno je da ih kopirate u svoj HTML dokument i otvorite u pregledniku.

html web dizajn

Osnovne HTML oznake

1. <!DOCTYPE html>

Ova oznaka uvijek stoji na početku HTML dokumenta i govori pregledniku da čita dokument kao HTML5 (najnovija verzija HTML-a).

2. <html> ... </html>

Ova oznaka obavještava preglednik da se radi o HTML dokumentu.
Sve što napišete unutar dokumenta nalazi se između otvarajuće <html> i zatvarajuće </html> oznake.

3. <head> ... </head>

Označava sekciju zaglavlja dokumenta. Sadržaj ovdje nije vidljiv na stranici, već sadrži metapodatke koje koriste pretraživači i preglednici.

4. <title> ... </title>

Postavlja naslov web stranice. Primjer:

<title>Moja prva stranica</title>

5. <meta>

Meta oznake sadrže podatke o web stranici (ključne riječi, opis, kodiranje znakova i dr.).
Primjer za prikaz ispravne širine stranice na svim uređajima:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

6. <body> ... </body>

Ovdje se nalazi sav vidljiv sadržaj stranice – tekst, slike, linkovi i drugi elementi.

Naslovi i paragrafi

<h1> do <h6>

Koriste se za naslove različitih razina.
<h1> je najveći i koristi se jednom po stranici.
Primjer:

<h1>Glavni naslov</h1>
<h2>Podnaslov</h2>

<p> – paragraf

Označava odlomak teksta:

<p>Vaš prvi odlomak.</p>
<p>Vaš drugi odlomak.</p>

<br> – prijelom reda

Koristi se za novi red bez praznog prostora:

Prvi red koda.<br>Drugi red koda.

<hr> – vodoravna linija

Dodaje liniju za odvajanje sadržaja:

<hr>

Isticanje teksta

<b> i <strong>

Oba označavaju podebljan tekst, s tim da <strong> dodatno označava važnost:

<strong>Važne stvari koje želimo istaknuti.</strong>

<i> i <em>

Koriste se za kurziv i naglašavanje:

<em>Označeni red koda.</em>

Linkovi i slike

<a> – poveznica

Dodaje link na drugu web stranicu:

<a href="https://example.com">Posjeti Example</a>

<img> – slika

Dodaje sliku na web stranicu:

<img src="slika.jpg" alt="Opis slike" width="300">

Atribut alt prikazuje tekst ako se slika ne može učitati.

Liste

Uređena (numerisana) lista:

<ol>
<li>Prva stavka</li>
<li>Druga stavka</li>
<li>Treća stavka</li>
</ol>

Neuređena (bullet) lista:

<ul>
<li>Prvi predmet</li>
<li>Drugi predmet</li>
<li>Treći predmet</li>
</ul>

Tabele

Primjer jednostavne tabele:

<table border="1">
<tr>
<th>1. stupac</th>
<th>2. stupac</th>
</tr>
<tr>
<td>Red 1, kolona 1</td>
<td>Red 1, kolona 2</td>
</tr>
<tr>
<td>Red 2, kolona 1</td>
<td>Red 2, kolona 2</td>
</tr>
</table>

  • <table> i </table> – početak i kraj tabele

  • <tr> – red

  • <th> – zaglavlje kolone

  • <td> – ćelija s podacima

Autor: Ivan Hečimović
Izvor: pcchip.hr

Preporučeni članci

Kako povećati broj posetilaca na sajtu

Na Windows 10 dobijate obaveštenje da se određena aplikacija ne može pokrenuti na vašem računaru? U nastavku nudimo rješenja za otklanjanje ove greške!