Uvod u HTML i CSS
Download
Report
Transcript Uvod u HTML i CSS
Uvod u HTML i CSS
OSNOVNI POJMOVI
HTML-osnovni pojmovi
HTML- HyperText Markup Language
HTML(jednostavno objasnjenje)-obična textualna datoteka
Verzije HTML jezika – prva verzija 1993, verzije 2.0,3.0, HTML 4, HTML 5
Struktura HTML dokumenta
Kako zapravo izgleda HTML kod?
Jednostavni primjeri HTML-a
Primjer jednog HTML elementa- <body></body>
Postoje i samozatvarajuci HTML elementi:
<link rel="stylesheet" type="text/css"
href="stil.css" />
WEB stranica
<html>
<head>
<title>Ovo je naslov stranice</title>
</head>
<body>
Ovo je najjednostavnija HTML stranica.<br />Obogatite je onime što
naučite
</body>
</html>
Osnovne operacije i rad sa HTML
Izrada naslova
Primjer:
<HTML>
<HEAD>
<TITLE>Kreiranje HTML naslova</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>1 Naslov</H1>
<H2 ALIGN=LEFT>2 Naslov</H2>
<H3 ALIGN=RIGHT>3 Naslov</H3>
<H4>4 Naslov</H4>
<H5 ALIGN=RIGHT>5 Naslov</H5>
<H6 ALIGN=CENTER>6 Naslov</H6>
</BODY>
</HTML>
Osnovno oblikovanje texta
</nowiki>
<big> veliki tekst </big>
<b> podebljani tekst </b>
<em> nakrivljen tekst </em>
<u> podcrtan text </u>
<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>
<hr> vodoravna crta </hr>
-veličina fonta:od 1 do 7
<font size="6"> velicina fonta 6</font>
-boja fonta:
-boju fonta možemo mijenjati na više načina:
koristeći hexa zapis boja:
<font color="#770000">ovaj tekst je u hexaboji #770000</font>
ili koristeći ime boje:
<font color="blue">ovaj tekst je plav</font>
-također boju fonta možemo zapisati i u rgb zapisu ali taj zapis nije uobičajen
- vrsta fonta:
<font face="Bookman Old Style, Book Antiqua, Garamond">ovom paragrafu je promijenjen font</font>
- Veliko početno slovo: <font size="5" face="Georgia, Arial" color="blue">P</font>ocetno slovo
Dodavanje zvuka,multimedije
U ovom primjeru koristimo EMBED oznaku:
<HTML>
<HEAD>
<TITLE>Zvuk i EMBED</TITLE>
</HEAD>
<BODY>
<P>Umetanje zvuka pomoću EMBED elementa: </nowiki>
<EMBED SRC="moja_pjesma.mp3" HEIGHT="60" WIDTH="144">
</BODY>
</HTML>
Mozemo jos koristiti i oznaku OBJECT vise na wikipediji
CSS stilovi
Dodavanje CSS stilova
Opčenito
CSS-Cascading Style Sheets
Nastaje 1996 gdje W3C prvi puta spominje ideju stilskih obrazaca
CSS-jezik za formatiranje izgleda sadržaja u HTML,XML-U
Tri vrste stilskih obrazaca ugrađeni,linijski i vezani
Opčenito i povezivanje
CSS (Cascading Style Sheets) koristi se za uređivanje HTML
elemenata, je predstavljen zajedno s HTML 4, da bi poboljšao
uređivanje HTML elemenata.
CSS može biti dodan HTML-u na određene načine:
Inline – koristeći stilove atributa HTML elemenata
Internal - koristeći <style> element u <head> dijelu
External – koristeći vanjski CSS file
Preferira se dodavanje CSS-a HTML-u dadavanjem CSS
Sintakse u odvojeni CSS file.
Primjeri
UGRAĐENI- Stil pridružen određenom tagu primjenjuje se na sve
tagove te vrste unutar dokumenta.
<style type="text/css"></nowiki>
.ime_stila { font-size: 36px;
color: #000;
background-color: #0F0;
font-family: Arial, Helvetica, sans-serif;}
.drugi_stil { color: #0F0; }
</style>
Primjeri
Linijski- Svakom pojedinom HTML tagu možemo pridružiti svoja
vlastita stilska obilježja
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 36px; color:
#F00;">Označeni tekst stylom</p>
Primjeri
VEZANI- Ta datoteka se može povezati s bilo kojim HTML
dokumentom koristeći tag <link> koji se smješta unutar <head>
taga.
<link href="http//www.pou.com/Unnamed Site 2/style.css"
rel="stylesheet" type="text/css">
HTML Styles – CSS
CSS background svojstva se koriste za definiciju pozadinskog efekta elemenata.
CSS svojstva korištena za background efekte:
background-color
background-image
background-repeat
background-attachment
background-position
HTML Styles- CSS
Background-color
Služi nam za postavljanje pozadinske boje elementa.
CSS boje http://www.w3schools.com/cssref/css_colors.asp
HTML Styles-CSS
Na sličan način možemo uređivati i naslove i paragrafe:
->html
<h1 id="n1">Uređivanje pomoću CSS-a</h1>
<p id="p1"> Prvi paragraf</p>
<p class="p2"> Drugi paragraf</p>
<p class="p2"> Treći paragraf</p>
->css
body{background-color:blue;}
#h1{background-color:red;}
#p1{ background-color:green;}
.p2{background-color:white;}
HTML Tablice
Definiraju se tagom <table>.
Tablica je podjeljenja u retke
( tag <tr> ), a svaki redak u
stupce, tag <td>.
Na sljedećoj slici prikazana je
tablica u tzv. kontejneru tj.
<div>-u.
Primjer
<table>
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td></td>
<td>row 2, cell 3</td>
</tr>
</table>
HTML liste
Neuređena lista
Počinje tagom <ul>, a svaki
član liste nalazi se u tagu <li>
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Uređena lista
Počinje tagom <ol>, a svaki
član liste nalazi se također u
tagu <li>
HTML blokovi
HTML elementi mogu biti zajedno grupirani pomoću<div>
i <span>.
<div> može koristiti kao kontejner grupi ostalih
elemenata.
Link za tutorial za pozicioniranje:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
HTML forme i elementi za unos
Formama se koristimo za slanje
podataka serveru. Najznačajniji je
<input> koji koristi korisnik pri
odabiru informacija.
<input type="text"> definira jednu
liniju polja za unos u koju korisnik
može unjeti neki tekst
npr:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
HTML forme i elementi za unos
<input type="password"> definira polje za šifru.
kod:
<form>
Password: <input type="password" name="pwd">
</form>
<input type="radio"> definira radio button. Radio buttons se korisei kako bi se omogućio
jedan od mogućih odabira.
kod:
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
HTML forme i elementi za unos
<input type="checkbox"> definira checkbox. Checkboxes omogućuje
korsniku da ne izabere ili izabere koliko god želi od ponuđenih izbora
kod:
<form>
<input type="checkbox" name="vehicle" value="Bike">imam bicikl<br>
<input type="checkbox" name="vehicle" value="Car">imam
auto<br>
<input type="checkbox" name="vehicle" value="Ship">imam brod
<br>
<input type="checkbox" name="vehicle" value="Sule">Imam Suleta
</form>
HTML forme i elementi za unos
HTML forme i elementi za unos
HTML Form Tags
Tag - Description
<form>Defines an HTML form for user input
<input>Defines an input control
<textarea>Defines a multiline input control (text area)
<label>Defines a label for an <input> element
<fieldset>Groups related elements in a form
<legend>Defines a caption for a <fieldset> element
<select>Defines a drop-down list
<optgroup>Defines a group of related options in a drop-down list
<option>Defines an option in a drop-down list
<button>Defines a clickable button
<datalist>NewSpecifies a list of pre-defined options for input controls
<keygen>NewDefines a key-pair generator field (for forms)
<output>NewDefines the result of a calculation
*New : New tags in HTML5.
ZAKLJUČAK
HTML je jednostavan za uporabu i lako se uči, što je jedan od razloga njegove opće
prihvaćenosti i popularnosti.
Svoju raširenost zahvaljuje jednostavnosti i tome što je od početka bio zamišljen kao
besplatan i tako dostupan svima.
IZRADILI: DRAZEN STJEPIC
DEMOKRAT SUFAY
HVALA