Idi nazad   Croportal Forum > Tehnologija i Tehnika > Nauči nešto više > Programiranje
Registracija FAQ Lista korisnika Kalendar Pretraži Današnje Poruke Označi forume pročitanima Online igre


Programiranje Raspravljate o temi HTML i CSS u Nauči nešto više forumu; Ovo je skraćeni tutorijal HTML-a...vidjela sam da nema takve teme, pa sam ju otvorila. Možda nekom pomogne ...

Odgovor
 
Opcije Teme
Star 27-07-07, 14:20   #1 (permalink)
prof. Foruma
 
Avatar od korisnika icegirl
 
Datum registracije: 26-06-06
Lokacija: Slavonski Brod
Godina: 13
Poruka: 1,971
icegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svima
Pošalji poruku preko MSN-a korisniku icegirl Pošalji poruku preko Skype-a korisniku icegirl
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
icegirl je offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Odgovori sa citatom
Star 27-07-07, 14:21   #2 (permalink)
prof. Foruma
 
Avatar od korisnika icegirl
 
Datum registracije: 26-06-06
Lokacija: Slavonski Brod
Godina: 13
Poruka: 1,971
icegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svima
Pošalji poruku preko MSN-a korisniku icegirl Pošalji poruku preko Skype-a korisniku icegirl
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
icegirl je offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Odgovori sa citatom
Star 09-08-07, 19:39   #3 (permalink)
Starter
 
Datum registracije: 08-08-07
Godina: 19
Poruka: 38
sime_zd se izdvaja iz mase
Re: HTML i CSS

Ljepo!
__________________
-
sime_zd je offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Odgovori sa citatom
Star 08-09-07, 14:54   #4 (permalink)
Regularni forumas
 
Avatar od korisnika xlimit
 
Datum registracije: 05-09-07
Lokacija: SK
Godina: 18
Poruka: 155
xlimit se izdvaja iz mase
Pošalji poruku preko MSN-a korisniku xlimit
Re: HTML i CSS

Eh bar sam nešta naučio kroz ovo...
__________________
Tko rano rani,zahebo je pjevca
xlimit je offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Odgovori sa citatom
Star 09-09-07, 16:17   #5 (permalink)
prof. Foruma
 
Avatar od korisnika icegirl
 
Datum registracije: 26-06-06
Lokacija: Slavonski Brod
Godina: 13
Poruka: 1,971
icegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svima
Pošalji poruku preko MSN-a korisniku icegirl Pošalji poruku preko Skype-a korisniku icegirl
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
icegirl je offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Odgovori sa citatom
Star 10-10-07, 17:09   #6 (permalink)
Starter
 
Datum registracije: 02-06-07
Godina: 23
Poruka: 7
blackstone se izdvaja iz mase
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
blackstone je offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Odgovori sa citatom
Star 09-05-08, 14:04   #7 (permalink)
Starter
 
Datum registracije: 09-05-08
Poruka: 14
prisuda se izdvaja iz mase
Re: HTML i CSS

Citat:
Pravi autor: blackstone Pogledaj Poruke
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.
prisuda je offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Odgovori sa citatom
Star 09-05-08, 18:34   #8 (permalink)
Regularni forumas
 
Avatar od korisnika Ineluki
 
Datum registracije: 10-01-08
Lokacija: Krapinsko - zagorska županija
Godina: 22
Poruka: 258
Ineluki se izdvaja iz mase
Pošalji poruku preko MSN-a korisniku Ineluki
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.
Ineluki je offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Odgovori sa citatom
Star 09-05-08, 19:19   #9 (permalink)
prof. Foruma
 
Avatar od korisnika icegirl
 
Datum registracije: 26-06-06
Lokacija: Slavonski Brod
Godina: 13
Poruka: 1,971
icegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svimaicegirl je poznat svima
Pošalji poruku preko MSN-a korisniku icegirl Pošalji poruku preko Skype-a korisniku icegirl
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
icegirl je offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Odgovori sa citatom
Odgovor
Tagovi: css, html



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

Pravila poruka
Vi smijete ne otvarati nove teme
Vi smijete ne odgovarati na poruke
Vi smijete ne slati privitke
Vi smijete ne urediti vašu poruku

vB Kod je Uključen
Smajlići Kod je Uključen
[IMG] kod je Uključen
HTML kod je Isključen
Trackbacks are Isključen
Pingbacks are Isključen
Refbacks are Isključen


Trenutno vrijeme na forumu: 23:58.


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103