HTML i CSS

icegirl · 27-07-07, 14:20

Ovo je skraćeni tutorijal HTML-a...vidjela sam da nema takve teme, pa sam ju otvorila. Možda nekom pomogne kao što pomaže i meni...

Ovo je obavezno štivo za sve one koji se prvi put susreću s HTML kodom. Ovaj tutorial nije o dizajniranju, već, kao što naslov kaže, uvod

HTML prema Riječniku komunikacijske tehnologije znači hipertekstualni (tekst čitljiv u više dimenzija) označeni jezik. Zanemarimo sad informatička objašnjenja, najjednostavnije bi bilo reći da se radi o običnoj tekstualnoj datoteci, koju Internet browseri "vide" kao malo manje običnu tekstualnu datoteku, tj. interpretiraju kod u tekst, slike i zvuk. Cijela stranica, koliko god multimedijalnih dodataka imala, nije ništa drugo nego tekst. Kliknite desnom tipkom miša i na meniju odaberite View Source - vidjet ćete kako zapravo izgleda ova stranica.

HTML možete pisati u bilo kojem tekst-editoru, počevši od Notepada.

Dakako, Notepad nije najbolje rješenje za početnike. Postoje brojni programi koji vam omogućuju izradu odličnih stranica, bez da napišete ijednu liniju koda, takozvani WYSIWYG programi. Ipak, savjetujem vam da proučavate kod dok ga pišete, jer tako mnogo toga možete upamtiti i znatno ubrzati svoj rad.
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.

Kako izgleda HTML kod?
HTML kod sastoji se od mnoštva tagova. Tag je najmanja jedinica, dio koda. Možete prepoznati tag po tome što se nalazi unutar matematičkih operatora za veće i manje <> .
Na početku svake HTML stranice nalazi se tag <HTML>. On označava početak stranice. Na kraju dokumenta naći ćete </HTML> - on označava kraj stranice. Sve što se nalazi unutar tih dviju oznaka, browser će interpretirati kao HTML stranicu, a ono što se nalazi izvan neće.
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...
Ovdje je primjer je najjednostavnije HTML stranice. Ako kopirate ovaj kod i pasteate ga u Notepad te stranicu spremite sa završetkom .html umjesto .txt, stranicu možete otvoriti u browseru (npr. Internet Explorer) i vidjeti kako izgleda. Za početak možete vježbati na ovom jednostavnom kodu dodajući mu razne druge sadržaje. Primjetite <br /> tag. On označava prekid retka (linebreak), što znači da tekst iza njega slijedi u drugom retku. Postoje i brojni drugi tagovi koje ovdje nisam spomenula, a trebati će vam u izradi stranice. Ali, njih ćete naučiti u drugim tutorialima.
NAPOMENA: svejedno je pišete li HTML kod velikim ili malim slovima, ali odlučite se za jedno i držite se toga. Ako se odlučite za XHTML poželjno je da pišete tagove malim slovima.

<html>
<head>
<title>Ovo je naslov stranice</title>
</head>
<body>
Ovo je najjednostavnija HTML stranica.<br />Obogatite je onime što naučite

</body>
</html>

icegirl · 27-07-07, 14:21

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.
Pisanje CSS koda nije teško, a danas je najbolje i najprihvaćenije rješenje - mislim da su to dovoljni razlozi da čitate dalje.

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

Najprije pogledajte kako uopće CSS izgleda. U slijedećem primjeru prikazano je oblikovanje za BODY tag.

body {
background: blue;
font-family: Arial;
font-size: 12px;
color: #000000;
margin: 0px;
padding: 20px;
}

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.
Na ovom primjeru možemo vidjeti kako se definira boja pozadine, font, veličina teksta, boja teksta, margine i pomak od ruba - padding (slično kao margine, ali poslije ćete vidjeti da nije isto).

Već sam navela kako postoje tri načina za pridavanje CSS-a dokumentu. Sada ću to na primjeru detaljnije objasniti.

1. Izravno na 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">

2. Unutar HEAD tag-a dokumenta
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

<html>
<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>
Sadržaj stranice
</body>
</html>

Ovaj način dati će isti rezultat kao i gore spomenuti. Korisnici bloga u uređivanju svog dizajna najčešće će se služiti ovim načinom.

3. 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" />

Ako radite na ovaj način, biti će lako mijenjati dizajn - trebate promijeniti samo ime.css datoteku, uploadati je na server, a sve HTML datoteke će poprimiti novo formatiranje

sime_zd · 09-08-07, 19:39

Ljepo!

xlimit · 08-09-07, 14:54

Eh bar sam nešta naučio kroz ovo...

icegirl · 09-09-07, 16:17

Ako jesi, drago mi je...
ali meni nešto zabušava pa kad napišem neće otvoriti pravilno

blackstone · 10-10-07, 17:09

mislim da ovo više niko ne uči jer šta će ti to ako imaš program. Ja osobno znam to i mislim da bi bilo dobro da to zna svako bar ono osnovno

prisuda · 09-05-08, 14:04

Citat:

Pravi autor: blackstone

mislim da ovo više niko ne uči jer šta će ti to ako imaš program. Ja osobno znam to i mislim da bi bilo dobro da to zna svako bar ono osnovno

Glupo je radit s WYSIWYG programima. Najbolje uzet Notepad i pisat cijeli kod.

Ineluki · 09-05-08, 18:34

Jednom kada budete web dizajneri ili programeri. WYSIWYG neće postojati u vašim svijetovima. Nego samo kod, kod, kod.. PHP, JavaScrtipt, HTML,CSS, ASP.net i da ne nenabrajam...
Naučite se to. HTML nije težak za shavatiti. Izviježbaš ga dosta brzo.

icegirl · 09-05-08, 19:19

WYSIWYG programi su bezvezni. učimo iz informatike trenutačno, i ne znam šta je od čega dosadnije

27-07-07, 14:20	#1 (permalink)
icegirl prof. Foruma Datum registracije: 26-06-06 Lokacija: Slavonski Brod Godina: 13 Poruka: 1,971	HTML i CSS Ovo je skraćeni tutorijal HTML-a...vidjela sam da nema takve teme, pa sam ju otvorila. Možda nekom pomogne kao što pomaže i meni... Ovo je obavezno štivo za sve one koji se prvi put susreću s HTML kodom. Ovaj tutorial nije o dizajniranju, već, kao što naslov kaže, uvod HTML prema Riječniku komunikacijske tehnologije znači hipertekstualni (tekst čitljiv u više dimenzija) označeni jezik. Zanemarimo sad informatička objašnjenja, najjednostavnije bi bilo reći da se radi o običnoj tekstualnoj datoteci, koju Internet browseri "vide" kao malo manje običnu tekstualnu datoteku, tj. interpretiraju kod u tekst, slike i zvuk. Cijela stranica, koliko god multimedijalnih dodataka imala, nije ništa drugo nego tekst. Kliknite desnom tipkom miša i na meniju odaberite View Source - vidjet ćete kako zapravo izgleda ova stranica. HTML možete pisati u bilo kojem tekst-editoru, počevši od Notepada. Dakako, Notepad nije najbolje rješenje za početnike. Postoje brojni programi koji vam omogućuju izradu odličnih stranica, bez da napišete ijednu liniju koda, takozvani WYSIWYG programi. Ipak, savjetujem vam da proučavate kod dok ga pišete, jer tako mnogo toga možete upamtiti i znatno ubrzati svoj rad. 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. Kako izgleda HTML kod? HTML kod sastoji se od mnoštva tagova. Tag je najmanja jedinica, dio koda. Možete prepoznati tag po tome što se nalazi unutar matematičkih operatora za veće i manje <> . Na početku svake HTML stranice nalazi se tag <HTML>. On označava početak stranice. Na kraju dokumenta naći ćete </HTML> - on označava kraj stranice. Sve što se nalazi unutar tih dviju oznaka, browser će interpretirati kao HTML stranicu, a ono što se nalazi izvan neće. 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... Ovdje je primjer je najjednostavnije HTML stranice. Ako kopirate ovaj kod i pasteate ga u Notepad te stranicu spremite sa završetkom .html umjesto .txt, stranicu možete otvoriti u browseru (npr. Internet Explorer) i vidjeti kako izgleda. Za početak možete vježbati na ovom jednostavnom kodu dodajući mu razne druge sadržaje. Primjetite <br /> tag. On označava prekid retka (linebreak), što znači da tekst iza njega slijedi u drugom retku. Postoje i brojni drugi tagovi koje ovdje nisam spomenula, a trebati će vam u izradi stranice. Ali, njih ćete naučiti u drugim tutorialima. NAPOMENA: svejedno je pišete li HTML kod velikim ili malim slovima, ali odlučite se za jedno i držite se toga. Ako se odlučite za XHTML poželjno je da pišete tagove malim slovima. <html> <head> <title>Ovo je naslov stranice</title> </head> <body> Ovo je najjednostavnija HTML stranica.<br />Obogatite je onime što naučite </body> </html> __________________ This day will never happen again

27-07-07, 14:21	#2 (permalink)
icegirl prof. Foruma Datum registracije: 26-06-06 Lokacija: Slavonski Brod Godina: 13 Poruka: 1,971	Re: HTML i CSS 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. Pisanje CSS koda nije teško, a danas je najbolje i najprihvaćenije rješenje - mislim da su to dovoljni razlozi da čitate dalje. 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 Najprije pogledajte kako uopće CSS izgleda. U slijedećem primjeru prikazano je oblikovanje za BODY tag. body { background: blue; font-family: Arial; font-size: 12px; color: #000000; margin: 0px; padding: 20px; } 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. Na ovom primjeru možemo vidjeti kako se definira boja pozadine, font, veličina teksta, boja teksta, margine i pomak od ruba - padding (slično kao margine, ali poslije ćete vidjeti da nije isto). Već sam navela kako postoje tri načina za pridavanje CSS-a dokumentu. Sada ću to na primjeru detaljnije objasniti. 1. Izravno na 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"> 2. Unutar HEAD tag-a dokumenta 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 <html> <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> Sadržaj stranice </body> </html> Ovaj način dati će isti rezultat kao i gore spomenuti. Korisnici bloga u uređivanju svog dizajna najčešće će se služiti ovim načinom. 3. 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" /> Ako radite na ovaj način, biti će lako mijenjati dizajn - trebate promijeniti samo ime.css datoteku, uploadati je na server, a sve HTML datoteke će poprimiti novo formatiranje __________________ This day will never happen again

09-08-07, 19:39	#3 (permalink)
sime_zd Starter Datum registracije: 08-08-07 Godina: 19 Poruka: 38	Re: HTML i CSS Ljepo! __________________ -

08-09-07, 14:54	#4 (permalink)
xlimit Regularni forumas Datum registracije: 05-09-07 Lokacija: SK Godina: 18 Poruka: 155	Re: HTML i CSS Eh bar sam nešta naučio kroz ovo... __________________ Tko rano rani,zahebo je pjevca

09-09-07, 16:17	#5 (permalink)
icegirl prof. Foruma Datum registracije: 26-06-06 Lokacija: Slavonski Brod Godina: 13 Poruka: 1,971	Re: HTML i CSS Ako jesi, drago mi je... ali meni nešto zabušava pa kad napišem neće otvoriti pravilno __________________ This day will never happen again

10-10-07, 17:09	#6 (permalink)
blackstone Starter Datum registracije: 02-06-07 Godina: 23 Poruka: 7	Re: HTML i CSS mislim da ovo više niko ne uči jer šta će ti to ako imaš program. Ja osobno znam to i mislim da bi bilo dobro da to zna svako bar ono osnovno

09-05-08, 18:34	#8 (permalink)
Ineluki Regularni forumas Datum registracije: 10-01-08 Lokacija: Krapinsko - zagorska županija Godina: 22 Poruka: 258	Re: HTML i CSS Jednom kada budete web dizajneri ili programeri. WYSIWYG neće postojati u vašim svijetovima. Nego samo kod, kod, kod.. PHP, JavaScrtipt, HTML,CSS, ASP.net i da ne nenabrajam... Naučite se to. HTML nije težak za shavatiti. Izviježbaš ga dosta brzo. __________________ Ash nazg durbatulûk, ash nazg gimbatul, ash nazg thrakatulûk, agh burzum-ishi krimpatul.

09-05-08, 19:19	#9 (permalink)
icegirl prof. Foruma Datum registracije: 26-06-06 Lokacija: Slavonski Brod Godina: 13 Poruka: 1,971	Re: HTML i CSS WYSIWYG programi su bezvezni. učimo iz informatike trenutačno, i ne znam šta je od čega dosadnije __________________ This day will never happen again

Broj korisnika koji trenutno prate ovu Temu: 1 (0 članova i 1 gosta)

Opcije Teme
Pokaži Verziju za Ispis Pošalji E-Mailom ovu Stranicu