Embed Size (px)
Citation preview
HTML – drugi dio
Osnovni tagovi
Komentar <!-->
Horizontalana linija<hr>
prelazak u novi red<br>
Definira paragraf<p>
Definira naslove<h1> to <h6>
Definira tijelo dokumenta<body>
Definira HTML dokument<html>
Opis tagaTag
Jednostavan primjer HTML
Formatiranje teksta
Deprecated. Use styles instead<u>
Deprecated. Use <del> instead<strike>
Deprecated. Use <del> instead<s>
Defines deleted text<del>
Defines inserted text<ins>
Defines superscripted text<sup>
Defines subscripted text<sub>
Defines strong text<strong>
Defines small text<small>
Defines italic text<i>
Defines emphasized text<em>
Defines big text<big>
Defines bold text<b>
DescriptionTag
Primjeri formatiranja teksta
“Computer output” tagovi
Deprecated. Use <pre> instead<xmp>
Deprecated. Use <pre> instead<plaintext>
Deprecated. Use <pre> instead <listing>
Defines preformatted text<pre>
Defines a variable<var>
Defines teletype text<tt>
Defines sample computer code<samp>
Defines keyboard text<kbd>
Defines computer code text<code>
DescriptionTag
“Computer output” tagovi
Citati, definicije,...
Defines a definition term<dfn>
Defines a citation<cite>
Defines a short quotation<q>
Defines a long quotation<blockquote>
Defines the text direction<bdo>
Defines an address element<address>
Defines an acronym<acronym>
Defines an abbreviation<abbr>
DescriptionTag
Citati, definicije,...
Entiteti• Neki znakovi (poput <) imaju posebno
značenje u HTML-u
• Da bi se prikazali na web stranici koistimoentitete
• Entitet se sastoji od:
Primjer:
;Ime ili # i broj&
Često korišteni entiteti
'' (does not work in IE)apostrophe'
""quotation mark"
&&ampersand&
>>greater than>
<<less than<
  non-breaking space
Entity
NumberEntity NameDescriptionResult
Entiteti
÷÷division÷
××multiplication×
®®registered trademark®
©©copyright©
§§section§
¥¥yen¥
££pound£
¢¢cent¢
Entity NumberEntity NameDescriptionResult
Komentari
<a>• HTML koristi <a> (anchor) tag za kreiranje linka na
drugi dokument• Anchor može povezivati na bilo koji resurs na webu :
HTML stranicu, sliku, zvuk, film itd• Sitaksa za kreiranje linka je:
•<a href="url">Text to be displayed</a>
• <a> tag koristi se za kreiranje mjesta koje povezuje• href atribut se koristi za adresiranje dokumenta na
kojeg povezuje• Tekst između otvarajućeg i zatvarajućeg taga je
tekst koji će se prikazivati na dokumentu i predstavljati poveznicu (hyperlink)
• Npr:
<a href="http://www.w3schools.com/">Visit
<a> - target atributTarget atribut odrađuje gdje će se povezani dokument otvoriti.
<a href="http://www.w3schools.com/" target="_blank">Visit
W3Schools!</a>
the target URL will open in the full body of the
window _top
the target URL will open in the same frame as
it was clicked _self
the target URL will open in the parent frameset _parent
the target URL will open in a new window _blank
<a>• Name atribut koristi se da bi se kreiralo
imenovano sidro• Korištenjem sidra možemo kreirati linkove koji će
nas voditi do točno određenog mjesta na stranici• <a name="tips">Useful Tips Section</a> • Ne ispisuju se na poseban način kao linkovi• da bismo kreirali link na sekciju tips dodajemo # i
ime sekcije na kraj URLa• <a
href="http://www.w3schools.com/html_links.asp#tips"> Jump to the Useful Tips Section</a>
• Ako se sidro nalazi unutar iste stranice kao i link href atribut izgleda:
<a>
<img>• <img src="url"> • URL
• Apsolutni• Relativni
• Nema zatvarajućeg taga!• U skladu s xhtml <img src=“url” />
<img>• Required Attributes
• S=Strict, T=Transitional, and F=Frameset.
STFThe URL of the
image to
display
URLsrc
STFDefines a short
description of
the image
textalt
DTDDescriptionValueAttribute
<img> atributi
STFSets the width of an imagepixels
%
width
TFDefines white space on the top and bottom of the image. Deprecated.
Use styles instead
pixelsvspace
STFDefines the image as a client-side image map. Look at the <map> and
<area> tags to figure out how it works
URLusemap
STFA URL to a document that contains a long description of the imageURLlongdesc
STFDefines the image as a server-side image mapURLismap
TFDefines white space on the left and right side of the image. Deprecated.
Use styles instead
pixelshspace
STFDefines the height of an imagepixels
%
height
TFDefines a border around an image. Deprecated. Use styles insteadpixelsborder
TFSpecifies how to align the image according to surrounding text.
Deprecated. Use styles instead
top
bottom
middle
left
right
align
DTDDescriptionValueAttribute
<img> atributi• id, class, title, style, lang, xml:lang
• Events:– onclick, ondblclick, onmousedown, onmouseup,
onmouseover, onmousemove, onmouseout,
onkeypress, onkeydown, onkeyup
<img>
<img>
<img>
Image tags
• Odabrati komprimirane formate slike radibržeg učitavanja
Defines an area inside an image map<area>
Defines an image map<map>
Defines an image<img>
DescriptionTag
ListePreporuka : ne koristiti <br> umjesto listaSvaka stavka se uokviruje <li> tagom
VRSTE LISTA:• Nepobrojane - <ul>
– Type: disc | square | circle
• Pobrojane - <ol>– Start : redni broj prve stavke– Vrste A | a | I | i | 1
• Liste definicija - <dl>
Tagovi za liste
Deprecated. Use <ul> instead<menu>
Deprecated. Use <ul> instead<dir>
Defines a definition description<dd>
Defines a definition term<dt>
Defines a definition list<dl>
Defines a list item<li>
Defines an unordered list<ul>
Defines an ordered list<ol>
DescriptionTag
Nepobrojane liste
Pobrojane liste
Lista definicija
Forme• Obrasci ili forme predstavljaju načine
interakcije s korisnikom
• unos podataka od strane korisnika kod web
aplikacija.
• HTML tagovi omogućuju prikaz obrazaca
– da bi se podaci koje korisnik unese obradili
(memorirali u datoteku ili bazu podataka ili poslali
putem e-mail-a, ili obradili), potrebne su dodatne
skripte
• CGI, JavaScript, VBScript, ASP, PHP ...
Opći oblik forme• <FORM> -početak forme• <INPUT> -traži informaciju na različite načine• <SELECT> -izabire informaciju na različite
načine• </FORM> -završetak forme
– Postoji i <TEXTAREA> element koji omogućuje unos cijelog teksta
Form tagovi
Tag Description
<form> Defines a form for user input<input> Defines an input field<textarea> Defines a text-area (a multi-line text input control)<label> Defines a label to a control<fieldset> Defines a fieldset<legend> Defines a caption for a fieldset<select> Defines a selectable list (a drop-down box)<optgroup> Defines an option group<option> Defines an option in the drop-down box<button> Defines a push button<isindex> Deprecated. Use <input> instead
Atributi• <FORM> sadrži sljedeće atribute:
–ACTION = Specificira lokaciju programa koji će obraditi podatke unešene u formu• Email adresa može biti definirana ovdje
– ACTION=”MAILTO:[email protected]”
–METHOD= get / post – Specificira korištenje POST ili GET metoda HTML-a
–NAME= Imenovanje forme
<Input>• ALIGN = pozicioniranje• CHECKED = Za checkbox i radio input tipove
• MAXLENGTH = Maksimalan broj slova dozvoljen za upis
• NAME = Imenovanje polja u formi radi identificiranja
• SIZE = Širina polja (mjereno u broju slova)• SRC = Ako je input slika isto kao src kod
<img> taga• TYPE = ... (!!!)
TYPE atribut• Element <INPUT> kao osnovni atribut ima tip 'TYPE'
koji može biti:– TEXT - za upis informacije
– PASSWORD - za upis lozinke (umjesto utipkanih znakova pojavljuju se
'*').
– RADIO - okrugli gumb za izbor jednog od ponuđenih
– CHECKBOX - kvadratni gumb za izbor više (ili nijednog) od
ponuđenih
– FILE - za slanje (engl. upload) datoteke preko WEB-a
– SUBMIT - za tvorbu gumba na čiji pritisak (klik mišem) se podaci
uneseni preko forme daju skriptama na obradu
– IMAGE - umjesto gumba za 'SUBMIT' koristi se izabrana slika
– RESET - poništavanje informacije upisane u obrasce
– HIDDEN - za prijenos nevidljive informacije u skipta za obradu
TYPE=TEXT• <INPUT TYPE=TEXT NAME= “ADDRESS“ SIZE=30
MAXLENGTH=10>
–prikazat će na stranici polje duljine 30 znakova, u koji možemo upisati maksimalno 10 znakova, koji se spremaju pod imenom 'ADRESA'.
TYPE=TEXT
TYPE=RADIO• Omogućava izbor samo jedne od ponuđenih
opcija:
Tko je tvoj najbolji prijatelj?<BR>
<INPUT TYPE=RADIO NAME="NP"
VALUE=“Ivo" CHECKED> Ivo Ivić<BR>
<INPUT TYPE=RADIO NAME="NP"
VALUE=“Mate"> Mate Matić <BR>
<INPUT TYPE=RADIO NAME="NP"
VALUE=“Jure"> Jure Jurić<P>
TYPE=RADIO
TYPE=CHECKBOX• Omogućava izbor više ponuđenih opcija
Tko su tvoji prijatelji?<BR>
<INPUT TYPE=CHECKBOX NAME=“Ivo“
VALUE="YES" CHECKED> Ivo Ivić<BR>
<INPUT TYPE=CHECKBOX NAME=“Mate“
VALUE="YES"> Mate Matić <BR>
<INPUT TYPE=CHECKBOX
NAME=“Jure“VALUE="YES" CHECKED>
Jure Jurić<BR>
TYPE=CHECKBOX
TYPE=TEXTAREA• Omogućava unos teksta veće duljine (više
redaka)• <TEXTAREA NAME="Komentar"
ROWS=3 COLS=30 WRAP=PHYSICAL>• </TEXTAREA>
TYPE=TEXTAREA
TYPE=SUBMIT• Gumbi na formi omogućuju korisniku
pokretanje neke akcije (klikom na dugme nešto će se dogoditi)–neki skriptni jezik, tj. web aplikacija
<INPUT TYPE=SUBMIT VALUE="Šalji obrazac!"><BR>
TYPE=SUBMIT
TYPE=PASSWORD• Slova su prikazana sa “*”
Lozinka <INPUT TYPE="password" NAME=“lozinka" SIZE="40" MAXLENGTH="80">
TYPE=PASSWORD
TYPE=IMAGE• <INPUT TYPE="image" NAME="Submit"
SRC="submit.gif" WIDTH="70" HEIGHT="20">
TYPE=...• FILE
–<INPUT TYPE="file" NAME="file" SIZE="40">–Kasnije potrebno posebnim jezicima obraditi
zahtjev
• HIDDEN–<INPUT TYPE=”hidden” NAME=”subject”
VALUE=”feedback”>–Skriveno polje. Kad se koristi?
SELECT• Element <SELECT> brine se za popis (preko
podelementa <OPTION>) i izbor ponuđenih
podataka u obliku padajuće izborne liste• <SELECT>
– 'NAME' gdje se upisuje ime liste (potrebno za
obradu)
• <OPTION>
– 'VALUE' kojem se pridjeljuje vrijednost
• Izborom jedne od ponuđenih vrijednosti, te
klikom na 'SUBMIT' gumb, šalje se pripadna
vrijednost spremljena pod 'VALUE'
SELECT• <SELECT NAME="Najbolji prijatelj?">• <OPTION VALUE=“Ivo">Ivo Ivić• <OPTION VALUE=“Mate">Mate Matić• <OPTION VALUE=“Jure"
SELECTED>Jure Jurić• </SELECT>
SELECT
