Uvod u HTML kod
HTML je skraćenica od
Hyper
Text
Markup
Language.
To je jezik koji nam služi za formatiranje dokumenata Internet stranica. Sastoji se od koda (tagova) koji su utkani u tekst.
Svaka web stranica mora imati sljedeći kod da bi sve drugo funkcioniralo...
<>html>
<>head>
<>title>Naslov Stranice<>/title>
<>/head>
<>body>
Ovo je najednostavnija Web Stranica <>br>
<>hr>
<>br>
Created by: Domo
<>/body>
<>/html>
Na svaku stranicu je potreban kod
<>HTML> koji označava početak stranice a na kraju, završni kod je
<>/HTML>.
Prvi tag unutar stranice je
<>HEAD>. On sadrži stvari koje određuju stranicu, kao naslov stranice, encoding, meta tagove i slično - taj tekst nećete vidjeti u browseru, ali sve što je ovdje napisano od velike je važnosti za stranicu.
Negdje između
<>HEAD> i
<>/HEAD> treba smjestiti
<>TITLE> <>/TITLE>. Između se upisuje naslov stranice, koji će se prikazati u naslovnoj traci (title bar).
Nakon head taga, slijedi
<>BODY> <>/BODY>. Sve što upišete u taj tag bit će vidljivo na stranici. Ovdje ide tekst, slike, tablice, zvuk...
Tag
<>br> označava prekid reda (linebreak) što znači da će iza tog koda sav tekst ići u red ispod
Tag
<>hr> (Horizontal Ruler) rezultira postavljanjem vodoravne linije na mjestu na kojem se nalazi kod...
Svaki odjeljak počima s početnim kodom (npr:
<>HEAD>), a kraj HEAD dijela označava se završnim kodom
<>/HEAD>.
Već unutar Microsoft Office-a možete naći program FrontPage. Iako vam ga nijedan ozbiljni web dizajner neće preporučiti, i to je dobro za početak. Moj osobni favorit je Macromedia Dreamweaver...
Nije bitno pišete li kodove malim ili velikim slovima ali već ako ste počeli pisati malim tako i nastavite, pogotovo za XHTML kodove...
[
Natrag]
Uvod u CSS kod
CSS je skup pravila formatiranja koji se pridodaju HTML dokumentu. CSS nam omogućuje lakšu i bolju kontrolu nad HTML-om, te ubrzava uređivanje više dokumenata za koje primjenjujemo isto formatiranje.
Ovo je jedan primjer CSS-a:
body {
background: black;
font-family: Shangai;
font-size: 12px;
color: #ffffff;
margin: 0px;
padding: 10px;
}
Prva riječ označava tag na koji se formatiranje odnosi (u ovom slučaju na BODY). Iza nje slijedi otvorena vitičasta zagrada, što znači da sada počinjemo nizati atribute. Atributi su određeni engleskom riječi (ili više njih), koje prilično logično objašnjavaju o kakvom se formatiranju radi. Ako je više riječi, povezane su crticom.
Iza naziva formata slijedi dvotočka, a poslije nje pišemo vrijednost (boja, veličina itd.). Na kraju ide točka-zarez, što znači da je ovaj atribut gotov i prelazimo na slijedeći. Atribute smijemo pisati u istom redu, ali bitno je da ih odvojimo točka-zarezom! Nakon svih navedenih atributa, moramo zatvoriti vitičastu zagradu. To znači da smo završili formatiranje body taga i nakon toga možemo prijeći na slijedeći.
CSS se u dokument može integrirati na 3 načina:
- izravno na određeni tag
- na cijeli dokument unutar HEAD tag-a
- na cijeli dokument, likanjem eksterne (vanjske) CSS datoteke
- Izravno na određeni tag:
Ovaj način se ne preporuča u formatiranju cijelog dokumenta, ali ako imamo samo jedan element na stranici kojeg želimo formatirati, onda može poslužiti.
<>body style="background: blue; font-family: Arial; font-size: 12px; color: #000000; margin: 0px; padding: 20px">
- Na cijeli dokument unutar HEAD tag-a
Unutar HEAD taga obično se pišu informacije o dokumentu i dodaju se skripte i slično. To što napišemo u HEAD-u, vrijedi za cijeli dokument. Ovdje je prikazano kako izgleda HEAD tag dokumenta sa CSS-om
<>head>
<>title> naslov stranice <>/title>
<>style type="text/css">
body {
background: blue;
font-family: Arial;
font-size: 12px;
color: #000000;
margin: 0px;
padding: 20px;
}
<>/style>
<>/head>
<>body>
Ovo je web stranica
<>/body>
<>/html>
- Eksterna datoteka
Ovo je najbolji način, jer se tako može primjenjivati isti format na više datoteka. To se radi na jednostavan način: u Notepadu napišete CSS i spremite pod nazivom ime.css. Uploadate datoteku na server i zatim je linkate u sve dokumente za koje želite da sadrže taj CSS, a to radite pomoću ovog koda:
<>link href="http://www.server.com/files/ime.css" rel="stylesheet" type="text/css" />
[
Natrag]
Linkovi
Osnovni kod za linkove je:
<>a href="http://www.server.com/ime_stranice.html" target="_blank">ime linka<>/a>
Klikom na "ime linka" otvorit će se "http://www.server.com/ime_stranice.html" u novom prozoru jer je target postavljen na "_blank".
Target određuje gdje će se link otvoriti, u kojem prozoru ili frame-u.
_blank - link se otvara u novom prozoru
_self - link se otvara u prozoru u kojem jeste tj. u postojećem
_parent - ako stranica ima više frameova (okvira), otvara u glavnom prozoru a ne u frame-u
ime - link se otvara u frame-u koji ima to ime
Za slanje maila koristi se ovaj kod za link:
<>a href="mailto:ime@server.com">Mail!<>/a>
Ovaj link se koristi samo ako korisnici imaju registriran svoj E-mail klijent, npr. Outlook...
[
Natrag]