Scribd Logo
Upload

Welcome to Scribd!

  • HTML Tutorijali

    Uploaded by

    Iva Waya Vasiljev
    32 views10 pages
    html

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    html

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    32 views10 pages

    HTML Tutorijali

    Uploaded by

    Iva Waya Vasiljev
    html

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 10

    HTML TUTORIJALI Uvod u HTML Prvo da kaemo to je to HTML. HTML je skraenica od HyperText Markup Language.

    To je opisni jezik za stvaranje web stranica. Njime se opisuje izgled dokumenta, pozicije slika, veliina teksta, boja pozadine, boja slova itd. HTML stranice nisu nita drugo nego obine tekstualne datoteke koje sadravaju upute kako prikazati stranicu. Za opis stranica se koriste tagovi koji se piu unutar znakova < i >. Evo primjera: Ovo je <b> tekst </b> za web stranicu.

    Ta reenica bi bila prikazana ovako: Ovo je tekst za web stranicu. Kako su HTML stranice nita drugo nego obine tekstualne datoteke moete ih izraivati u bilo kojem tekstualnom editoru pa ak i u najjednostavnijem Notepadu koji dolazi s Windowsima. Umjesto tekstualnih editora, kao to je Notepad, moete koristititi vizualne editore za izradu web stranica kao to su Macromedia Dreamweaver ili Microsoft Frontpage. Vizualni editori web stranica se nazivaju i WYSIWYG editori. What You See Is What You Get Sa WYSIWYG editorima nemate neku veliku potrebu za uiti HTML, ali svatko tko se eli imalo ozbiljnije baviti izradom web stranica mora nauiti HTML jer je HTML majka svih web stranica i sve poinje od njega. Sve html stranice koje napravite moraju imati ekstenziju .html ili .htm (npr. mojastranica.html)

    Elementi Html elementi se sastoje od 3 osnovna dijela: 1. tag koji otvara neki element 2. sadraj elementa 3. tag koji zatvara taj element <b> ovo je podebljani tekst </b>

    ELEMENTI: <HTML> -sa ovim elementom poinje i zavrava svaka web stranica <HEAD> -ovaj element se treba nalaziti unutar <html> elementa -browser ne prikazuje sadraj unutar ovog elementa <TITLE> -ovaj element se treba nalaziti unutar HEAD elementa -rijei koje napiete unutar ovog elementa e biti prikazane na vrhu web browsera <BODY> -sadraj napisan unutar ovog elementa e se prikazivati na web stranici, to znai tu idu tekst, slike...

    PRIMJER: <html> <head> <title>moja stranica</title> </head> <body> moj tekst </body> </html>

    Komentari Sa komentarima moete pisati bilo gdje unutar skripte a taj tekst nee biti prikazivan na stranici, tj. moi e se vidjeti samo ako otvorite skriptu sa code editorom. Na ovaj nain moete ostavljati sebi poruke unutar skripte i sa njima npr. skrenuti pozornost na jedan dio skripte, ili sa ovime moemo jedan dio skripte iskljuiti, a sauvati kod tog dijela, kojeg moemo ponovno aktivirati ako izbriemo sljedee: <! -- sa ovim otvaramo komentar --> sa ovim zatvaramo komentar <html> <head> <body> ovo je tekst <! --kojeg cu izbrisati --> </body> </head> </html>

    Formatiranje U HTML-u se formatira uz pomo tagova. Evo popisa najpoznatijih tagova za formatiranje: <p> tag za odlomak </p> <b> podebljani tekst </b> <em> nakrivljen tekst </em> <strong> "jaki" tekst </strong> <i> nakrivljen tekst </i> <sup> podignut tekst </sup> <sub> spusten tekst </sub> <del> precrtan tekst </del> <code> tekst kompjuterskog koda </code> -veliina fonta: <font size="6"> velicina fonta 6</font>

    veliina od 1-7 -boja fonta: -boju fonta moemo mijenjati na vie naina: <font color="#770000">ovaj tekst je u hexaboji #770000</font>

    koristei hexa zapis boja <font color="blue">ovaj tekst je plav</font>

    ili koristei ime boje -takoer boju fonta moemo zapisati i u rgb zapisu ali taj zapis nije uobiajen -vrsta fonta: <font face="Bookman Old Style, Book Antiqua, Garamond">ovom paragrafu je promijenjen font</font>

    -poetno slovo: <font size="5" face="Georgia, Arial" color="blue">P</font>ocetno slovo

    Linkovi Vai linkovi mogu voditi na unutranjost stranice(internal) ,na kojoj se nalaze (npr. link "na vrh"), na stranicu unutar vae domene(local) ili na neku drugu stranicu izvan vae domene(global). O tome ovisi koji ete href atribut koristiti: internal href="#strelica" local href="../slike/slika.jpg" global href="http://www.hotmail.com" (href- Hypertext Reference) Tekst linkovi <a href="http://www.tutorijali.net/" target="_blank" >Tutorijali.net</a>

    Ovako izgleda kod za link u obliku teksta. Sada emo se posvetiti ovom dijelu koda: target="_blank"

    ovaj dio govori na koji nain e se otvoriti taj link: _blank" otvara novu stranicu u novom prozoru _self" otvara novu stranicu u trenutanom prozoru _parent" otvara novu stranicu u okvir koji je "nadreen" linku _top" otvara novu stranicu u trenutano otvorenom prozoru, ponitavajui sve ostale okvire Strelice <b>linkovi<a name="top"></a></b> <a href="#top">na vrh</a>

    sa ovim kodom korisnika e se vratiti na vrh stranice kada on stisne link "na vrh". Prva linija koda se stavlja ondje gdje elimo da nas stranica odvede kada kliknemo na link "na vrh"; "linkovi" e biti prikazano na browseru, ali e do njega biti skriven dio "top" i onda kada kliknemo na link "na vrh" ta linija koda e potraiti koju e varijablu traiti, u naem sluaju pronai e "top", i odvest nas na taj dio teksta.

    Email linkovi <a href="mailto:tutor@tutorijali.net?subject=pomoc&body=trebam pomoc">tutor@tutorijali.net</a>

    sa ovim kodom ,kojeg moemo staviti bilo gdje na stranicu, otvorit emo va email klijent na pisanju nove email poruke sa naslovom "pomoc" i sadrajem poruke "trebam pomoc" Download linkovi <a href="http://www.tutorijali.net/tekst.txt">tekst dokument</a> sa ovim kodom moete stavljati link na vae datoteke u domeni (ili datoteke na internetu). Baza Dobra je ideja odrediti defaultnu stranicu na koju e ii svi linkovi ako oni ne rade, tj. ako nemogu pronai stranicu na koju se odnose. <head> <base href="http://www.tutorijali.net/"> </head>

    Slikovni linkovi Slikovne linkove ete dobiti tako da napiete ovakav kod: <a href="http://www.tutorijali.net" target="_blank> <img src="neka-slika.jpg"> </a>

    Uklonite rub tih slika ovako: <a href="http://www.tutorijali.net" target="_blank> <img src="neka-slika.jpg" border="0"> </a>

    Slike Slike se mogu dodati na vau stranicu sa ovim kodom: <img src="XXX" />

    XXX zamijenite sa jednim od sljedeega src="pas.gif" slika se nalazi u istom direktoriju kao i HTML stranica src="../pas.gif" slika se nalazi u prijanjem direktoriju od HTML stranice src="../slike/pas.gif" slika se nalazi u direktoriju "slike" , prijanjem direktoriju od HTML stranice Alternativni atribut <img src="slomljenlink/pas.gif" alt="pas" /> u sluaju da se slika nemoe uitati, biti e prikazana rije "pas" unutar okvira slike. Formatiranje slike

    -VISINA I IRINA <img src="pas.gif" height="100" width="100"> ako elite vi odrediti veliinu slike a ne da vam browser to odredi koristite kod iznad. Ovo moe biti korisno kada vam se stranica pone "raspadati" zbog veliine slika i teksta. -VERTIKALNO I HORIZONTALNO PODE ENJE align (horizontalno) -right -left -center valign (vertikalno) -top -bottom -center Ovo je popis moguih podeenja slika. Primjer koda u kojem je slika podeena: <p>Ovo je neki tekst</p> <p> <img src="pas.gif" align="left"> ovo je opet neki tekst koji e se nalaziti na desno od slike </p>

    Linkovi na slike <a href="http://www.tutorijali.net" target="_blank> <img src="pas.gif"> </a> sa ovim kodom e browser prikazati sliku koja e voditi na neku stranicu kada kliknete na nju. <a href="http://www.espn.com" target="_blank> <img src="ahman.gif" border="0"> </a> sa ovim kodom odredili ste da nee biti okvira oko slike. Ako elite da slike imaju okvir, zamijenite 0 sa nekim brojem. <a href="sunset.gif"> <img src="thmb_sunset.gif"> </a> ovaj kod e prikazati manju verziju slike koja e biti link na veu stranicu. Naravno, manju sliku vi morate napraviti. Thumbnails-to je naziv za smanjene verzije slika, napravljene da bi se stranica bre uitavala ili zbog estetskih razloga. Thumbnail ima link na sliku u punoj kvaliteti. Slike kao linkovi <a href="http://www.tutorijali.net/"> <img src="pas.gif"> </a> primjer koda koji e pretvoriti sliku u link na neku stranicu. <a href="pas.gif"> <img src="thmb_pas.gif"> </a> primjer koda koji e prikazati na stranici umanjenu sliku koja e biti link na veu sliku.

    Liste Postoje 3 razliite vrste lista. <ol>, <ul> i <dl>. <ul> - unordered list; tokice <ol> - ordered list; brojevi <dl> - definition list; tokice Npr. Ordered lista Izmeu <ol> i </ol> stavljate <li> tekst </li> Znai Proizvodi: <ol> <li> DVD </li> <li> CD </li> <li> Tipkovnica </li> <li> Monitor </li> <li> Mi </li> </ol>

    Rezultat e biti: Proizvodi: 1. DVD 2. CD 3. Tipkovnica 4. Monitor 5. Mi Moete i odabrati to e biti umjesto brojeva ovako: <ol <ol <ol <ol type="a"> type="A"> type="i"> type="I">

    U prvom primjeru pomou ovoga <ol type="a"> bi se ispisalo a. DVD b. CD c. Tipkovnica d. Monitor e. Mi Za <ul> moete birati izmeu izgleda tokica. <ul type="square"> <ul type="disc"> <ul type="circle">

    Tablice Tablice su moda i najzbunjenije za poetnike i neki kad to vide pobjegnu od HTML-a jer misle: " ta e mi to kad imam Dreamweaver koji to umjesto mene obavi". E pa to nije ba tako. Ako budete moda nekad radili sa PHP-om ili ASP-om trebat e vam znanje "rune" izrade tablica u HTML-u. Za poetak tablice koristimo <table>. U tom elementu postoje tagovi <tr> (redak) i <td> (stupac). Evo primjera jedne tablice sa dva reda i dva stupca. <table border="1"> <tr> <td> Prvi red i prvi stupac </td> <td> Prvi red i drugi stupac </td> </tr> <tr> <td> Drugi red i prvi stupac </td> <td> Drugi red i drugi stupac </td> </tr> </table>

    Ovako pravimo ako imamo npr. jedan redak sa u prvom stupcu a u istom tom redku u drugom stupcu imamo dva redka. Evo primjera: <table border="1"> <tr> <td rowspan="2">Jedan redak </td> <td>Prvi redak</td> </tr> <tr> <td>Drugi redak </td> </tr> </table>

    Primjetite Rowspan s brojem 2. Taj broj oznaava koliko se redaka nalazi u drugom stupcu.

    Kada imate dva redka i u prvom 1 stupac a u drugom 2 stupca. Onda koristite Colspan. Evo primjera: <table border="1"> <tr> <td colspan="2">Jedan redak </td> </tr> <tr> <td>Prvi stupac </td> <td>Drugi stupac </td> </tr> </table>

    Cellspacing Koristite cellspacing za razmak izmeu rubova tablice. Pogledajmo primjer: <table border="1" cellspacing="6"> <tr> <td colspan="2">Jedan redak </td> </tr> <tr> <td>Prvi stupac </td> <td>Drugi stupac </td> </tr> </table>

    Cellpadding Cellpadding koristite kada elite odvojiti tekst od rubova tablice. Pogledajmo primjer: <table border="1" cellpadding="15"> <tr> <td colspan="2">Jedan redak </td> </tr> <tr> <td>Prvi stupac </td> <td>Drugi stupac </td> </tr> </table>

    Boja pozadine Boja pozadine odnosno bgcolor atribut se koristi za promijenu boje pozadine cijele stranice ili pojedinih elemenata kao to su tablice. Bgcolor moete staviti na vie mjesta u HTML elemente ali mi vam prporuamo da bgcolor koristite samo za boju pozadine stranice a za tablice koristite CSS. Evo primjera kako promijeniti boju pozadine stranice: <body bgcolor="blue"> Boja pozadine je postavljena. </body>

    HTML sistem bojanja - imena boja Sada emo nauiti neke boje koje koristimo u HTML-u.

    Postoje 3 razliite metode postavljanja pozadinske boje. Najjednostavniji je openiti nain (primjer: blue, green, red, silver, black, yellow...) Evo 16 osnovnih boja:

    Drugi nain je Hexadecimalni nain bojanja. Evo primjera: <body bgcolor="#006699"> Boja pozadine je postavljena. </body>

    Ovdje moete vidjeti primjere boja. Trei nain bojanja je sa RGB vrijednostima. Pogledajmo primjer: <body bgcolor="rgb(0,0,255)"> Boja pozadine je postavljena. </body>

    Trei nain bojanja nije preporuljiv. Primjer dodavanja pozadinske boje tablici <table bgcolor="#006699" border="1"> <tr> <td> Neka vrsta plave boje </td> </tr> </table>

    Slika kao pozadina Pozadinsku sliku moete koristiti u bilo kojem elementu (tablicama, odlomcima, body tablice...) Ovdje emo nauiti kako pomou HTML-a napraviti da slika bude kao pozadina ali inae kada nauite HTML radite to CSS-om. Evo primjera kako pomou HTML-a postaviti neku sliku kao pozadinu u tablici. <table height="200" width="500" background="http://www.nekastranica.com/slike/slika.jpg" > <tr> <td>Ova tablica ima pozadinsku sliku </td> </tr> </table>

    Za pozadinske slike, zbog veliine slika, vam je najbolje koristiti tzv.Patterne odnosno minijaturene sliice koje se stalno ponavljaju koliko je god iroka tablica. U sljedeem tutorijalu emo nauiti kako napravit Layout stranice pomou tablica.

    Meta Oznake Meta tagovi se uvijek postavljaju izmedju <head></head>! Na pocetku svakog html dokumenta,ovisi o programu u kojem pisete vas html kod, prvu liniju zauzima ova linija koda: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - OPIS KODA - Oznacuje vrstu browsera namjenjenog za pregled stranice <meta http-equiv=REFRESH content=60;url=http://www.net.hr> - OPIS KODA - Refresh stranice svakih 60 sekundi,zelite li mjenjati vrijeme za koje ce se vasa stranica refreshati promjenite broj 60 u bilo koji broj.To ce se samo dogoditi ako izbrisete url=http://www.net.hr,inace bi vas nakon 60 sekundi preusmjerilo na net.hr stranicu.Takodjer ako zelite da se vasa stranica nakon 60 sekundi prebaci na neku drugu stranicu promjenite url=vasaStranica.com <meta http-equiv=KEYWORDS content=more,plaza,odmor> - OPIS KODA - Kljucne rijeci na koje reagira web pretrazivac,u content= upisite kljucne rijeci koje karakteriziraju vas site. - Nemojte misliti da cete odmah dospjeti na neki poznatiji web pretrazivac <meta http-equiv=Content-Type content=text/html;charset=windows-1250> - OPIS KODA - Upisujuci ovo u <head> stranica omogucavate sebi pisanje na hrvatskom jeziku,te slova <meta name=author content=Vase ime > - OPIS KODA - Upisite vase ime ,ili osobne podatke <meta name=DESCRIPTION content=Opis vase web stranice> - OPIS KODA Opis vase web stranice

    You might also like