Postavljanje CSS-a i HTML-a za vašu web stranicu: Vodič

Preslav Dobrev2022-10-28 · 4 min read

Postavljanje CSS-a i HTML-a za vašu web stranicu: Vodič

Izrada web stranica početni je korak u bavljenju web razvojem. Jedna od prvih stvari koje entuzijasti za web razvoj moraju naučiti jest kako postaviti CSS i HTML za web stranicu. Postavljanjem osnovne uvodne stranice, početnik se može pripremiti s osnovama dizajna web stranica, usavršiti svoje vještine web razvoja i naučiti surađivati s programerima.

Ovaj vodič će provesti vas kroz osnove postavljanja HTML i CSS datoteka za vašu web stranicu. Krenimo!

Preduvjeti

Osnovno razumijevanje HTML-a i CSS-a.

Korak 1 - Početno postavljanje

Najprije ćemo stvoriti novi direktorij projekta i nazvati ga demo-projekt :

mkdir demo-project

1	mkdir demo-project

Zatim prijeđite u trenutni direktorij pomoću naredbe cd :

cd demo-project

1	cd demo-project

U mapu projekta dodajmo sljedeće datoteke koje će nam trebati za pokretanje naše osnovne web stranice:

index.html : Ova će datoteka sadržavati sav HTML kod.
styles.css : Ovdje ćemo držati sve CSS datoteke za oblikovanje naše web stranice.
images : Sve potrebne slike moraju se čuvati u ovoj mapi.

Sada kada smo stvorili naš direktorij projekta i dodali potrebne datoteke, krenimo dalje i dodajmo HTML sadržaj u naš index.html u sljedećem koraku.

Korak 2 - Dodavanje HTML sadržaja u index.html datoteku

U index.html datoteci koju smo stvorili u prethodnom koraku, dodat ćemo uvodne HTML kodove. Ove osnovne HTML linije služit će kao upute za preglednik, ali se neće prikazivati na web stranici.

Dodajte sljedeći blok koda u svoju index.html datoteku:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Welcome to CloudSigma!</title>
<link rel="stylesheet" href="css/styles.css">
</head>

<body>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Dobrodošli u CloudSigma!</title>

</head>

<body>

</body>

</html>

Napomena: Provjerite je li index.html datoteka prazna prije nego što dodate ove blokove kodova. Također, razmislite o promjeni naslova kako je istaknuto u <title> odjeljku.

Pojasnimo korištene pojmove:

<!DOCTYPE html> : To je deklaracija koja obavještava preglednik o vrsti HTML-a koji se koristi u HTML dokumentu.
- Budući da je dostupno više verzija HTML standarda, navođenje DOCTYPE olakšava preglednicima prepoznavanje verzije HTML-a bez napora. Na primjer, u ovom vodiču koristimo najnoviju verziju HTML5.
<html> : Ova oznaka obavještava preglednik da se sadržaj unutar nje mora tretirati kao HTML. Prilikom otvaranja <html> datoteke, svakako je zatvorite pomoću </html> oznake. Ova oznaka podržava lang atribute i možete odrediti jezik web stranice. U našem vodiču postavili smo jezik na engleski pomoću en oznake jezika.
- Posjetite IANA Language Subtag Registry kako biste provjerili ostale jezike dostupne za upotrebu.
<head> : Ovo stvara odjeljak u HTML dokumentu i sadrži informacije o web stranici. Međutim, nema detalja o sadržaju i preglednik ovdje ne prikazuje nikakve informacije u zaglavlju (head).
<meta charset="utf-8"> : Određuje skup znakova dokumenta. Mora biti u Unicode formatu, tj. UTF-8, podržavajući većinu priznatih pisanih jezika.
<title> : Oznaka <title> obavještava preglednik o nazivu web stranice. Naslov se pojavljuje na kartici preglednika kada se web stranica nađe u rezultatima pretraživanja.
<link rel="stylesheet" href="css/styles.css"> : Obavještava preglednik da identificira stilsku tablicu koja sadrži CSS stilove.
<body> : Ova oznaka sadrži glavni sadržaj web stranice. Kada koristite <body> oznaku, svakako je zatvorite pomoću </body> oznake.

Korak 3 - Oblikovanje pomoću CSS-a

U styles.css datoteku, dodajte stiliziranje prema potrebama vašeg projekta. U ovom primjeru dodajte sljedeće retke koda u svoju styles.css datoteku:

body {
background-color: red;
}

h1 {
color: yellow;
text-align: centre;
}

p {
font-family: verdana;
font-size: 25px;
}

body {

background-color: red;

}

h1 {

color: yellow;

text-align: centre;

}

p {

font-family: verdana;

font-size: 25px;

}

Napokon smo izradili osnovne HTML i CSS datoteke koje će nam trebati za pokretanje naše web stranice. Osim toga, možete dodati slike i spremiti ih u mapu images. Spremite i zatvorite datoteku. Nakon toga otvorite index.html datoteku u svom omiljenom web pregledniku i vidjet ćete osnovnu stranicu na svom zaslonu.

Conclusion

U ovom uvodnom vodiču naučili smo osnove postavljanja HTML-a i CSS-a te izradili rudimentarnu web stranicu. Sada je vrijeme za stvaranje novih stranica, njihovo dotjerivanje, dodavanje sadržaja i povezivanje svega iz navigacijske trake. Kao sljedeći korak, pokušajte dodati više sadržaja u index.html datoteku i stilizirajte je pomoću CSS-a.

Osim toga, postoje i drugi HTML i CSS vodiči koje možete pronaći na našem blogu:

Sretno kodiranje!

Preslav Dobrev

Autor · CloudSigma

Preslav Dobrev je kreativni dizajner u CloudSigma, usredotočen na dosljedan poslovni identitet korištenjem tradicionalnih i inovativnih marketinških kanala. Vješt je u spajanju umjetničke vizije sa strateškim marketingom kako bi stvorio dojmljive brendirane priče.