Kako kreirati jednostavnu web stranicu
U web dizajnu, HTML i CSS su osnovni alati koje morate znati ako želite da kreirate web stranice. Dok je HTML zadužen za strukturu i sadržaj, CSS se koristi za stilizaciju i raspored elemenata na stranici. U ovom tutorijalu ćemo vas provesti kroz proces izrade jednostavne web stranice, korak po korak.
Ovaj blog će biti jednostavan uvod u osnove HTML-a i CSS-a, pogodan za početnike koji tek ulaze u svet web dizajna.
Šta je HTML?
HTML (HyperText Markup Language) je jezik za izradu web stranica. Koristi se za organizovanje i prikazivanje sadržaja na webu. Svaka web stranica koju posetite koristi HTML kako bi definisala svoj sadržaj, od naslova, paragrafa, slika do linkova i tabela.
Osnovna struktura HTML dokumenta izgleda ovako:
<html lang="sr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moja prva web stranica</title>
</head>
<body>
<h1>Zdravo, sveta!</h1>
<p>Ovo je moja prva web stranica napravljena u HTML-u i CSS-u.</p>
</body>
</html>
Šta je CSS?
CSS (Cascading Style Sheets) je jezik koji se koristi za stilizaciju HTML elemenata. Pomoću CSS-a možemo odrediti boje, fontove, veličine, margine, rasporede elemenata i mnogo drugih vizuelnih karakteristika web stranice.
Primer osnovne CSS stilizacije:
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
margin: 0;
padding: 0;
}color: #0056b3;
text-align: center;
margin-top: 50px;
}
font-size: 18px;
text-align: center;
margin: 20px;
}
Kreiranje jednostavne web stranice
Krenimo sa izradom jednostavne web stranice koja će imati naslov, paragraf i stilizovan tekst.
1. Prvi korak: Kreiranje HTML fajla
Prvo ćemo napraviti HTML fajl koji će sadržati osnovnu strukturu naše stranice.
- Otvorite tekst editor (kao što je Notepad++ ili Visual Studio Code).
- Napravite novi fajl i sačuvajte ga kao
index.html. - U fajl unesite sledeći kod:
<html lang="sr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moja prva web stranica</title>
</head>
<body>
<h1>Dobrodošli na moju prvu web stranicu!</h1>
<p>Ovo je moj prvi korak u učenju HTML-a i CSS-a.</p>
</body>
</html>
Ovo je osnovna struktura HTML dokumenta. Tagovi poput <html>, <head>, i <body> su obavezni za svaki HTML fajl. Sadržaj koji želite da prikažete na stranici smeštate unutar <body> tagova.
2. Drugi korak: Dodavanje CSS-a
Sada ćemo dodati stilove kako bi naša stranica izgledala lepše. Postoji više načina da dodate CSS u HTML, ali mi ćemo koristiti ugrađeni CSS za ovaj primer.
- Unutar
<head>sekcije vašeg HTML dokumenta, dodajte sledeći CSS kod između<style>tagova:
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
margin: 0;
padding: 0;
}color: #0066cc;
text-align: center;
margin-top: 50px;
}
font-size: 20px;
text-align: center;
margin: 20px;
}
</style>
Ovaj CSS kod menja boju pozadine stranice, postavlja fontove i stilizuje naslov i tekst.
3. Treći korak: Dodavanje slike
Svaka dobra web stranica treba slike! Dodajmo sliku unutar našeg HTML dokumenta. Pretpostavimo da imate sliku pod imenom slika.jpg u istom folderu gde se nalazi vaš HTML fajl.
Unutar <body> tagova, ispod paragrafa, dodajte sledeći HTML kod:
<img src="slika.jpg" alt="Primer slike" style="display: block; margin: 0 auto; width: 300px;">
Ovaj kod dodaje sliku sa specifikovanom širinom od 300px, postavljajući je u centar stranice.
4. Četvrti korak: Dodavanje linka
Sada ćemo dodati link ka nekoj drugoj stranici ili resursu. Linkovi su važan deo web stranica jer omogućavaju navigaciju ka drugim stranama ili eksternim sadržajima.
Dodajte ovaj kod ispod slike:
<p>Posetite <a href="https://www.google.com" target="_blank">Google</a> za više informacija.</p>
Ovaj kod kreira link koji će korisnike odvesti na Google, otvarajući stranicu u novom prozoru zahvaljujući atributu target="_blank".
5. Peti korak: Dodavanje liste
Da bismo pokazali kako funkcionišu liste u HTML-u, dodajmo numerisanu listu koja prikazuje korake izrade ove stranice.
Dodajte sledeći kod ispod paragrafa sa linkom:
<ol>
<li>Kreiranje HTML fajla</li>
<li>Dodavanje CSS stilova</li>
<li>Umetanje slike</li>
<li>Dodavanje linkova</li>
<li>Pravljenje liste</li>
</ol>
Ovaj kod kreira numerisanu listu koraka koje smo do sada prošli.
Konačni izgled stranice
Sada, kada smo dodali sve elemente, vaša stranica bi trebala da izgleda ovako:
<html lang="sr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moja prva web stranica</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
margin: 0;
padding: 0;
}color: #0066cc;
text-align: center;
margin-top: 50px;
}
font-size: 20px;
text-align: center;
margin: 20px;
}
display: block;
margin: 0 auto;
width: 300px;
}
text-align: center;
}
</style>
</head>
<body>
<h1>Dobrodošli na moju prvu web stranicu!</h1>
<p>Ovo je moj prvi korak u učenju HTML-a i CSS-a.</p>
<img src="slika.jpg" alt="Primer slike">
<p>Posetite <a href="https://www.google.com" target="_blank">Google</a> za više informacija.</p>
<ol>
<li>Kreiranje HTML fajla</li>
<li>Dodavanje CSS stilova</li>
<li>Umetanje slike</li>
<li>Dodavanje linkova</li>
<li>Pravljenje liste</li>
</ol>
</body>
</html>
Zaključak
Čestitamo! Kreirali ste svoju prvu jednostavnu web stranicu koristeći HTML i CSS. Ovaj tutorijal je bio kratak uvod u osnove, ali daje solidnu osnovu za dalje učenje. Sledeći korak može biti dodavanje složenijih elemenata, kao što su tabele, forme, ili interaktivni sadržaj pomoću JavaScript-a.
Nastavite da vežbate, eksperimentišite sa različitim stilovima i rasporedima, i uskoro ćete moći da kreirate profesionalno dizajnirane web stranice.
