Uvod u HTML i CSS

by **Admin Marijo** pon vel 09, 2009 4:24 pm

Uvod u HTML i CSS

HTML - HyperText Markup Language, CSS - Cascading Style Sheets.

Ovaj tutorijal je napisan za početnike koji se po prvi puta susreću sa nazivima HTML i CSS. Opisat ću HTML i CSS značenje te nekoliko kratkih primjera. Uvod u HTML

HTML je kratica za HyperText Markup Language što znači prezentacijski jezik za
izradu web stranica. HTML služi za definiranje izgleda dokumenta, poravnanje i veličine teksta, boja teksta, boja
pozadine i još mnogo toga. Ukratko, HTML čini strukturu svake web stranice. HTML kod se sastoji od tagova, a tag je
najmanja jedinica, to je dio koda. Tagovi se pišu unutar oznaka "<" i ">". Većina tagova ima početni i završni
tag. Evo jedan opširniji primjer:
<html>
<head>
<title>Uvod u HTML i CSS</title>
</head>
<body>
Ovo je tijelo <b>HTML</b> dokumenta.<br />
Ovo je novi redak.
</body>
</html>

<html> tag označava početak HTML dokumenta i on govori našem internet pregledniku da je počeo učitavati HTML
dokument. <head> je zaglavlje HTML dokumenta u kojem se nalazi <title> tag. Unutar <title> taga
se inače nalazi ime web stranice ili bloga te neki kratki opis koji se prikazuje u naslovnoj liniji vašeg internet
preglednika. <body> je tijelo dokumenta i unutar njega stavljamo sadržaj naše web stranice. <b> tag služi
za podebljavanje teksta a <br /> za novi redak.

HTML tagove možete pisati velikim ili malim slovima npr. <body> i <BODY>, ali ja bih preporučio
da pišete malim slovima.

HTML kod možete pisati u bilo kojem tekstualnom editoru kao što je Notepad na Windows platformi.
Kada napišete kod u nekom tekstualnom editoru, dokument spremite sa nastavkom .html ili .htm te taj dokument
možete otvoriti sa vašim internet preglednikom. Ručno pisanje koda nije baš najbolje za početnike no po meni je to najbolji
način učenja jer tako ćete naučiti osnove i shvatiti srž HTML-a te ćete znati šta se događa "ispod haube".

Nakon što naučite osnove HTML-a možete se pozabaviti nekim WYSIWYG editorima. WYSIWYG je skraćeni od What
You See Is What You Get. Ima raznih WYSIWYG editora, jedan od njih je i Microsoft FrontPage.
Iako
ga neće preporučiti niti jedan ozbiljniji web dizajner, dobar je za
neki početak. Ako želite nešto ozbiljnije tu je najbolji i
najčešče korišteni WYSIWYG editor - Macromedia Dreamweaver koji je jednostavan i za početnike.

Uvod u CSS

CSS je kratica za Cascading Style Sheets.
CSS služi za uređivanje izgleda HTML elemenata.
Sa CSS-om možete poboljšati izgled i funkcionalnost web stranice i
bloga i može Vam uštedjeti puno vremena. Evo jednog konkretnog
primjera:
body {
color: #FFFFFF;
background-color: #000000;
font-family: Verdana;
font-size: 13px;
font-weight: bold;
}

body je prva riječ koja označava tag koji se
formatira. Iza slijedi vitičasta zagrada iza koje počinjemo
sa atributima. Atributi su engleske riječi koje logično objašnjavaju o
kakvom se formatiranju radi. Iza atributa dolazi
dvotočka, a poslije nje pišemo vrijednost (boja, veličina). Na kraju
dolazi točka zarez što znači da smo gotovi sa ovim atributom
i prelazimo na slijedeći. Atribut color služi za promjenu boje teksta, background-color za promjenu boje pozadine,
font-family za promjenu fonta (Verdana, Arial, Times New Roman), font-size je veličina font (u pixelima) a font-weight označava debljinu
slova (normal, bold, bolder, lighter).

Ima tri načina da se CSS kod integrira sa HTML kodom:

1. Izravno na HTML tag
Ovaj način se ne preporuča u formatiranju cijelog HTML dokumenta nego možda za samo jedan element i kada je to baš potrebno.
<body style="color: #FFFFFF; background-color: #000000; font-family: Verdana; font-size: 13px; font-weight: bold;">

2. Unutar zaglavlja dokumenta
CSS kod ubacimo unutar <head> taga na slijedeći način:
<head>
<style type="text/css">
body {
color: #FFFFFF;
background-color: #000000;
font-family: Verdana;
font-size: 13px;
font-weight: bold;
}
</style>
</head>

3. Eksterna datoteka
Ovo je vjerovatno najbolja varijanta i najpreglednije izvedeno. Uđete u neki tekstualni editor, napišete CSS kod, spremite
dokument sa nastavkom .css te ga uploadate na neki server kao što je BlogSpremnik.com.
Za spajanje tog dokumenta sa ostatkom HTML koda koristite slijedeći kod:
<link href="http://www.stranica.com/stil.css" rel="stylesheet" type="text/css" />

Ovo bi bio nekakav uvod u HTML i CSS, najosnovnije stvari. U
daljnjim tutorijalima ću se pozabaviti konkretnijim stvarima kao što je
dodavanje slika i video isječaka na blog, mjenjanje nekih CSS stilova...