HTML (Hypertext Markup Language) i CSS (Cascading Style Sheets) su ključni alati u izradi web stranica. Prije nego što se dublje zaronimo u svijet HTML-a i CSS-a, važno je razumjeti osnove.

HTML se koristi za strukturiranje sadržaja na web stranici, dok se CSS koristi za stiliziranje tog sadržaja. HTML se sastoji od različitih oznaka koje označavaju elemente kao što su naslovi, paragrafi, slike i veze. CSS, s druge strane, omogućava vam da odredite izgled tih elemenata, uključujući boje, fontove i raspored.

Što je HTML?

HTML je standardni jezik za označavanje i strukturiranje sadržaja na web stranicama. To je osnova većine web stranica i omogućuje web preglednicima da interpretiraju i prikažu tekst, slike, multimedijske elemente i linkove na web stranici. Ovdje koristimo niz oznaka ili “tagova” koji se stavljaju oko različitih dijelova sadržaja kako bi ih definirali i stilizirali.

Na primjer, <p> oznaka označava početak odlomka teksta, a </p> označava njegov kraj. Oznaka <img> koristi se za uvođenje slika na web stranicu.

Ovo omogućuje web programerima da strukturiraju tekst, dodaju slike, stvaraju poveznice i oblikuju sadržaj kako bi stvorili web stranice koje su vizualno privlačne i funkcionalne.

Struktura HTML dokumenta

HTML  dokument ima specifičnu strukturu koja pomaže web preglednicima da razumiju kako treba prikazati sadržaj na web stranici. Evo osnovne strukture :

<!DOCTYPE html>: Ovaj deklaracijski tag na početku dokumenta obavještava preglednik da se radi o HTML5 dokumentu.

<html>: Ovaj element označava početak dokumenta i sadrži sve ostale elemente dokumenta.

<head>: Unutar ovog elementa nalaze se metapodaci i veze prema vanjskim resursima poput CSS datoteka, ikona i drugih važnih informacija. Također, ovdje se postavljaju naslovi i druge metapodatke.

<meta charset=”UTF-8″>: Ovaj element određuje karakternu enkodaciju dokumenta, obično se postavlja na UTF-8 za podršku različitim jezicima.

<title>: Ovaj element definira naslov stranice koji će se prikazati na kartici preglednika.

<link>: Element koji omogućuje povezivanje s vanjskim resursima poput CSS datoteka za stiliziranje stranice.

<body>: Unutar ovog elementa nalazi se glavni sadržaj web stranice, uključujući tekst, slike, poveznice i ostali multimedijski sadržaj.

Primjer HTML dokumenta:

<!DOCTYPE html>
<html>
<head>
    <title>Naslovnica</title>
</head>
<body>
    <h1>Dobrodošli na moju web stranicu</h1>
    <p>Ovo je primjer teksta na web stranici.</p>
    <img src="slika.jpg" alt="Opis slike">
    <a href="http://www.npr.com">Posjetite NPR</a>
</body>
</html>

HTML Elementi i Oznake

HTML koristi različite elemente i oznake kako bi strukturirao i oblikovao sadržaj web stranice. Evo nekoliko osnovnih elemenata i oznaka koje se često koriste:

Element <h1> – Naslovi: Element <h1> koristi se za označavanje glavnog naslova stranice. Također postoje i <h2>, <h3>, <h4>, <h5>, i <h6> za naslove manje važnih sekcija.
Element <p> – Paragrafi: Element <p> koristi se za označavanje odlomaka teksta na stranici.

Listama
Oznake <ul> i <ol> – Neuređene i uređene liste: Oznaka <ul> koristi se za stvaranje neuređenih lista (poput popisa s točkama), dok se oznaka <ol> koristi za uređene liste (poput popisa s brojevima).Element <li> – Stavke liste: Element <li> koristi se za označavanje pojedinačnih stavki unutar lista.

Dodavanje poveznica (linkova)
Oznaka <a> – Poveznica (link): Oznaka <a> koristi se za stvaranje teksutalnih poveznica na druge web stranice ili resurse. Možete postaviti atribut href kako biste odredili odredište poveznice.

Umetanje Slika
Oznaka <img> – Slike: Oznaka <img> koristi se za umetanje slika na web stranicu. Trebate postaviti atribut src kako biste naveli putanju do slike, i atribut alt za opis slike koji će se prikazati ako slika ne može biti učitana.

Što je CSS?

CSS (Cascading Style Sheets) je tehnologija koja se koristi za stiliziranje HTML elemenata na web stranicama. CSS omogućuje definiranje izgleda, boja, fontova i rasporeda elemenata na web stranici, čime se postiže estetski privlačan i dosljedan dizajn.

Primjer CSS koda

Inline, interni i eksterni CSS

  • Inline CSS: Inline CSS se primjenjuje izravno na pojedinačne HTML elemente putem atributa style. Ovo je najčešći način primjene stilova.
  • Interni CSS: Interni CSS se definira unutar HTML dokumenta, obično unutar <style> elementa unutar <head> sekcije. Ovo utječe na cijeli dokument.
  • Eksterni CSS: Eksterni CSS se pohranjuje u zasebnoj .css datoteci i uvozi se u HTML dokument putem <link> elementa. Ovo je najbolji način za održavanje dosljednih stilova na više stranica.

Selektori

Selektori u CSS-u određuju na koje HTML elemente će se primijeniti stilovi. Primjeri uključuju selektore za tagove, razrede, id-jeve i pseudo-klase. Deklaracije definiraju konkretne stilove koji će se primijeniti na odabrane elemente. Svaka deklaracija sastoji se od svojstva i vrijednosti, na primjer: color: blue;.

Stiliziranje teksta i fontova

CSS omogućuje promjenu fontova, veličine fontova, boje teksta, stilova teksta (npr. podebljano, kurzivno) te dodavanje ukrasa kao što su podcrtavanje ili precrtavanje. Pozadinske boje i slike mogu se dodati elementima, a također možete kontrolirati debljinu i stil obruba oko elemenata. Margine i razmaci definiraju prostor oko i unutar elemenata. Možete ih prilagoditi kako biste postigli željeni raspored elemenata.

Rad s bojama

CSS omogućuje precizno upravljanje bojama elemenata, uključujući upotrebu boja u RGB i HEX formatima. Putem CSS-a možete primijeniti gradijente na pozadine. Putem CSS media upita možete prilagoditi izgled web stranice na različitim uređajima i veličinama zaslona. To je ključno za izradu responzivnih (prilagodljivih) web stranica.

/* Ovo je CSS pravilo za naslov */
h1 {
    color: blue;               /* Postavlja boju teksta na plavu */
    font-size: 24px;           /* Postavlja veličinu fonta na 24 piksela */
    text-align: center;        /* Centrira tekst */
}

/* Ovo je CSS pravilo za paragraf */
p {
    color: #333;               /* Postavlja boju teksta na tamnosivu (#333) */
    font-family: Arial, sans-serif; /* Postavlja font na Arial ili bilo koji sans-serif font */
    margin-top: 10px;          /* Dodaje gornji razmak od 10 piksela */
}

Povezivanje CSS-a s HTML dokumentima

Povezivanje CSS-a  s HTML dokumentom ključan je korak u definiranju izgleda web stranice. To omogućuje web developerima da primijene stilove na različite elemente stranice. Evo kako se to radi:

  • Unutar HTML Dokumenta: Najčešći način povezivanja CSS-a je putem <link> elementa koji se obično smješta unutar <head> sekcije HTML dokumenta.
  • Vanjska CSS Datoteka: CSS pravila obično se pohranjuju u zasebnoj CSS datoteci (npr., “stil.css”). Ova datoteka sadrži definicije stilova koje će se primijeniti na HTML elemente.
  • Atribut href: Atribut href u <link> elementu određuje putanju do CSS datoteke. U ovom slučaju, “stil.css” je relativna putanja do CSS datoteke koja se nalazi u istom direktoriju kao i HTML dokument.
  • Tip medija (opcionalno): Možete dodati atribut media kako biste odredili za koje vrste uređaja ili medija se primjenjuju stilovi. Na primjer, možete koristiti media=”screen” za stilove prikazane na ekranima ili media=”print” za stilove koji će se primijeniti pri ispisu stranice.

Ovaj proces omogućuje odvajanje strukture od dizajna , što olakšava održavanje i ažuriranje web stranice. CSS datoteka se može primijeniti na više stranica, što mnogo olakšava stiliziranje kod većih web projekata.

Kompatibilnost s različitim preglednicima

Preglednici kao što su Chrome, Firefox, Safari i Internet Explorer mogu interpretirati CSS na različite načine zato je potrebno testirati web stranicu na različitim preglednicima kako bi se osiguralo da izgleda i funkcionira kako treba za sve korisnike.

Izrada web stranica zahtijeva temeljito razumijevanje HTML-a i CSS-a, kao i primjenu najboljih praksi. Da bismo napravili dobre web stranice, moramo dobro razumjeti HTML i CSS te se držati nekoliko važnih pravila.

Prvo, trebamo koristiti čisti HTML kako bismo jasno označili sve što je na web stranici. Drugo, organizacija i uređivanje CSS koda pomažu nam da bolje radimo na web stranici i čuvamo stvari urednima. I treće, moramo paziti da naša web stranica dobro izgleda i radi u svim različitim internetskim preglednicima.

Ako tražite stručnu pomoć u izradi web stranica, agencija Insieme nudi usluge dizajna i razvoja web stranica. Za više informacija o našim uslugama i cijenama izrade web stranica, možete posjetiti ovu web stranicu.