HTML i CSS – Osnove za početnike

by

Praktični vodič za učenje web dizajna

HTML Osnove CSS Stilizovanje Layout i Responsive Dizajn Tabele Linkovi i Navigacija

HTML Osnove

HTML (HyperText Markup Language) je standardni jezik za kreiranje web stranica.

Osnovna struktura HTML dokumenta:

<!DOCTYPE html>
<html>
<head>
    <title>Naslov stranice</title>
</head>
<body>
    <h1>Moj prvi naslov</h1>
    <p>Moj prvi paragraf.</p>
</body>
</html>

Ključni HTML elementi:

  • <h1>-<h6> – Naslovi različitih nivoa
  • <p> – Paragraf teksta
  • <a> – Linkovi
  • <img> – Slike
  • <div> – Kontejnerski element

CSS Stilizovanje

CSS (Cascading Style Sheets) se koristi za stilizovanje HTML elemenata.

Tri načina primene CSS-a:

  1. Inline stilovi – direktno u HTML tagu
  2. Interni stilovi – u <style> tagu unutar <head> sekcije
  3. Eksterni stilovi – u posebnom .css fajlu

Primer CSS selektora:

/* Selektuje sve paragrafe */
p {
    color: blue;
    font-size: 16px;
}

/* Selektuje element sa ID-jem "header" */
#header {
    background-color: #f0f0f0;
}

/* Selektuje elemente sa klasom "button" */
.button {
    padding: 10px 20px;
    border-radius: 5px;
}

Layout i Responsive Dizajn

Moderni web dizajn zahteva prilagodljivost različitim veličinama ekrana.

Flexbox primer:

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.item {
    flex: 1 0 200px;
    margin: 10px;
}

Media queries za responsive dizajn:

@media screen and (max-width: 768px) {
    .menu {
        flex-direction: column;
    }
    
    .content {
        padding: 10px;
    }
}

Tabele

Tabele se koriste za prikaz struktuiranih podataka.

Primer HTML tabele:

Tag Opis
<table> Definiše tabelu
<tr> Definiše red u tabeli
<td> Definiše standardnu ćeliju
<th> Definiše zaglavlje ćelije

CSS za stilizovanje tabela:

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

tr:hover {
    background-color: #f5f5f5;
}

Linkovi i Navigacija

Linkovi su osnova web navigacije.

Vrste linkova:

  • Apsolutni linkovi – Puni URL (npr. https://example.com/stranica.html)
  • Relativni linkovi – Putanja u odnosu na trenutnu lokaciju (npr. ../slike/slika.jpg)
  • Anchor linkovi – Veza ka određenom delu stranice (npr. #sekcija)

Primeri linkova:

<!-- Standardni link -->
<a href="https://example.com">Posetite primer</a>

<!-- Link koji se otvara u novom tabu -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Novi tab</a>

<!-- Email link -->
<a href="mailto:ime@example.com">Pošaljite email</a>

<!-- Anchor link -->
<a href="#sekcija">Idi na sekciju</a>
...
<div id="sekcija"></div>