Back to site
Since 2004, our University project has become the Internet's most widespread web hosting directory. Here we like to talk a lot about web servers, web development, networking and security services. It is, after all, our expertise. To make things better we've launched this science section with the free access to educational resources and important scientific material translated to different languages.

Amittai Aviram - HTML Tutorijal

HTML za engleski: Tutorijal

Ovaj dokument predstavlja nekoliko osnovnia HTML. HTML HTML je metod za markiranje dokumenata za stvaranje njihove eksplicitne strukture, da bi mašine mogle da ih čitaju. HTML je prošao kroz razne verzije od svog nastanka pre jedne decenije. Ovaj tutorijal predstavlja poslednju i najbolju verziju HTMLa koja se širom koristi, nazvana XHTML 1.0 Strict. Ovaj tutorijal je pisan za netehničke čitače i predstavlja pomoć najvažnije markup elemente. Ovaj dokument takodje demonstrira sve njegove principe: sve što je spomenuto je korišćeno i svi strukturni elementi su objašnjeni u sadržaju. Da bi stvari bije jednostavne, nema mnogo grafike. Upotreba Cascading Style Sheets (CSS) za poboljšavanje izgleda dokumenta će biti pokriveno u posebnom tutorijalu. Samo mali delić CSS će biti predstavljen na kraju ovog tutorijala, da bi neke karakteristike HTML imale smisla.

Koncept HTML u "Nutshell"

HTML je skraćenica od Hypertext Markup Language. On nije kompjuterski jezik. HTML je mali set simbola korišćenih u text dokumentu da bi se pojasnila struktura dokumenta na način da softver kao što je web pretraživačmože predstaviti tu strukturu.Npr. paragraph je strukturalni element dokumenta. Većina pretraživača ćel, po defaultu, prestaviti paragraph sa wordwrapom do poslednjeg reda i sa redom vertikalnog prostora iznad i ispod paragrafa. Drugi elementi dokumenta uključuju headere, liste, i tabele.

HTML ne može kontrolisati kako će dokument ispasti u prozoru web pretraživača zbok pretraživača, medija, hardvera, brzine konekcija, i korisničkih potreba. HTML pojašnjava strukturu dokumenta.

Pretraživači ignorišu svaki dodatni prostor koji imate u vašem HTML kodu, kao što su kartice ili dodatne linije, tako da možete da formatirate vaš HTML kod na bilo koji način želite da to ne utiče na izgled dokumenta u prozoru. Pretraživač koristi HTML simbole same za odredjivanje kako bi se prikazao sadržaj. Razmak je dobro koristiti u vašem kodu za sopstvene potrebe, jer će vam pomoći da pronađete i druge šifrirane elemente prilikom revizije dokumenta.

HTML treba smatrati produžetkom interpunkcije. Tokom vekova, interpunkcija je razvijena zarad pismene strukture jezika koja se ne može predstaviti slovima. Slovo označava početak rečenice i period prestanka. Zarezi odredjuju klauzalne i zagradne fraze. Ali, iza rečenice nivoa, pisanje se oslanja na razmak i slova selekcije na izražavanje strukturalnih odnosa. Ove stvari se znatno razlikuju od računara do računara, u zavisnosti od veličine ekrana, memorije, grafičkih resursa, itd. Dakle, HTML ne koristi prostor da izraze strukturu, ali, umesto toga, simboličke naznake koje svaki računar može pravilno protumačiti. I baš kao što vam u španskom interpunkcije omogućavaju da znate gde pitanje ili uzvik počinje, tako prilažemo u ¡...! Ili ¿..., Isto tako HTML priložena struktura elemenata u parovima simbola, jedna na početku i jedna na kraju. HTML je konvencionalan i dosledan dovoljno da ga računar pročita mehanički.

Elementi se mogu podeliti u dve grupe: Oni koji sadrže i i oni koji su prazni, ili samostalni , elementi. Većina elemenata i dokumenta su sadržajni - oni sadrže tekst i neke druge elemente. Na primer, paragraf sadrži običan tekst i može sadržati nedvosmislen i snažan tekst ili čak sliku. Ostali uključuju tabele, zahtevane i nezahtevane liste, lista stvari koje ti spiskovi sadrže i nedvosmislen tekst, koji sadrži tekst koji treba naglasiti. Prazni element uključuju slike, horizontalnih pravila (horizontalne linije razdvajanja) i redova koji se mogu pojaviti unutar pasusa za posebne namene, kao što su stih ili adrese.

Postoje pravila šta može da sadrži šta. Paragrafi ne smeju da sadrže paragrafe unutar njih. Tabela ćelije i lista stvari mogu da sadrže paragrafe i sve pasuse , ali paragrafii ne mogu da sadrže tabele ili liste. Liste mogu da sadrže samo stavke listi. Lista predmeta, zauzvrat, može da sadrži i razne druge elemente. (Ovo je bolje objašnjeno u nastavku, pod "Naručene liste.")

HTML simboli koji označavanje strukturalne elemente dokumenta se nazivaju oznake. Elementi koji sadrže tekst ili druge elemente početi sa tagom otvaranja i završavaju sa završnom oznakom. Tag za otvaranje se sastoji od simbola za elemente umetnutog u < and > znakove: <p> za paragraf, <table> za tabelu. Tag zatvaranja ima dodatni / karakter da ga razlikujete od taga za otvaranje: </p> i </table>. Dakle, stav počinje sa simbolom <p> i završava sa simbolom </p>, uz njegov sadržaj dolazi između dve oznake. Prazni elemente, sastoje od pojedinačnih oznaka koje se otvaraju sa < karakterom i završavaju sa prostorom (ili zagradom u vašem kodu, kojase tumači kao prostor), zatim />:

	<hr />
		
	<img
		src="fun.gif"
		title="Slika nas kako se zabavljamo"
		alt="Zabavljali smo se"
	/>
		

Bilo koji tag otvaranja ili samostalni tag može da sadrži, po imenu elementa (kao što je p ili img) jedan ili više modifikovanih atributa. Atribut precizira neke... atribute elementa. U drugom primeru, img element ima tri atributa: src, naslov , i alt. Src atribut, u ovom slučaju, daje ime (a možda i put, ili lokacija) na fajl koji sadrži slike kod. Naslov atributa obezbeđuje tekst ako slučajno slika ne stigne do grafičkog pretraživača, ili kada korisnik pređe mišem iznad slike. Alt Alt atribut obezbeđuje da tekst bude izrečen u negrafičkom pretraživača, kao što su tekstualni pretraživači, Brajevi pretraživači ili audio pretraživača.

Imajte na umu da je uvek atribut naveden po imenu i znaku jednakosti, a zatim vrednost atributa, u navodnicima. Ne postoje izuzeci.

HTML elementi dokumenata mogu biti podeljeni između onih koji definišu oblast dokumenta i onih koji okružuju reč ili frazu. Prvi tip elementa se zove zove element blok nivoa. Pragrafi, liste , i tabele su slementi blok nivoa. Drugi tip elementa se naziva inline element. Primeri inline elemenata su naglašeni tekst, jaki tekst, naslovi knjiga, i linkovi. Inline elementi moraju uvek biti sadržani u elementima blok nivoa.blok na nivou kontejnera elemenata. Na primer nedvosmislen tekst se mora uvek pojaviti u paragrafu ili listi stavki ili nekoj većoj strukturi.

Nazad na sadržaj.

Početak

Pre nego što pogledamo elemete koji čine HTML document, možda biste voleli da iamte prvo iskustvo stvaranja i pregledanja HTML. Narvno, to će značiti da ćete raditi neke stvari koje još uvek ne razumete. Ali usput će vam svaka od tih stvari postati jasnija-nadam se!

Prvo treba da otvorite pure text editor na vašem kompjuteru. Na Windows mašinama će to biti Notepad, a na Macintosh mašinama , Simple Text ili možda BBEdit. Zatim mehanički označite tekst ispod, sa desna gde piše "start copying" do gde piše "stop copying" (ne uključujući te dve rečenice). Ovo radite tako što držite desno dugme miša i vučete ga preko teksta. Ako to ne radi, ili nemate miš, moraćete sve da kopirate ručno, što će dugo trajati. U svakom slučaju, pretpostavimo da možete označiti tekst sa mišem, kopirajte ga i ubacite (paste) u vaš editor prozor. Na većini mašina ovo možete uraditi klikom vašeg miša editor prozor, zatim selektujete prozor pretraživača, zatim "Paste" iz Edit menija. Zatim pratite instrukcije odmah ispod "stop copying" rečenice.

Počnite kopiranje (ispod ove rečenice).

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
  <head>
    <title>Prva HTML Strana</title>
  </head>
  <body>

    <h1>Radi!</h1>

    <p>Ovo je HTML dokument i ja ga mogu videti bez
    gobbledy-gook koda u mom prozoru. </p>

  </body>
</html>
	

Zaustavite kopiranje (iznad ove rečenice).

Kada stavite tekst iznad u vaš editor prozora, sačuvajte ga kao novi dokument. Ime pod kojim ga sačuvate mora imati posebnu formu. Prvi deo — svrha imena — ne sme imati prostir izmedju, i mora se sastojati samo iz slova, brojeva, donje crte (_), ili gornje crte (-), u bilo kojoj kombinaciji. Zatim tačka ("dot"), i četiri slova "html." Sačuvajte dokument na mesto gde ga možete naći odmah! U Windows, to može biti u My Documents direktorijumu.

Zastanite na sekund i primetite tagove i uredjenje HTML koda.

Zatim ostavite vaš editor prozor otvorenim, otvorite bilo koju fajl listu, kao Windows Explorer u Windowsu, i nadjite listing za vaš fajl. Otvorite ga duplim klikom. Ako je sve kako treba, pretraživač kao što je Explorer ili Netscape Navigator, će se otvoriti i pokazati vam lepo, bez šifre pretraživanje HTML koju ste upravo napravili.

Slobodno promenite tekst izmedju <p> i </p> simbola u vašem editoru. Možete dodati koliko želite teksta, dokle god zadržite <p> na početku i </p> na kraju i ne radite ništa drugim delovima koda. Sačuvajte fajl u vašem editoru, predjite sa prozora na pretražiavač, refreshujte pretraživač (ili reload stranice). Da biste ovo uradili idete na View meni i nadjete "Refresh" ili "Reload." Trebali biste da vidite promene koje ste napravili reflektovane u pretraživaču.

Sada kada ste videli nešto od HTML u akciji, pogledajmo elemente koji čine dobar HTML dokument. Ovo neće dugo trajati i uskoro ćete moći da stvarate HTML dokumente kako želite.

Nazad na sadržaj.

Elementi koji sadrže blok nivo

  • <p>Paragraph</p>
  • <h1>Top-Level Header</h1>, <h2>Sub- Header</h2>, <h3>Sub-Sub-Header</h3>, etc.
  • <ol>Ordered List</ol>
  • <ul>Unordered List</ul>
  • <li>List Item</li>
  • <table>Table</table>
  • <tr>Table Row</tr>
  • <td>Table Cell (Also Called "Table Data")</td>

Nazad na sadržaj.

Paragrafi

Paragrafi su objašnjeni iznad. HTML ne pruža neke druge korisne block elemente, kao poetic stanza. Iz ovog razloga završićete tako što ćete mnoge svari zvati paragrafima iako neće izgledati kao paragrafi. Ne zaboravite da uvek imate otvarajući <p> i </p> tag.

Nazad na sadržaj.

Header-i

Header-i je element teksta koji se koristi za početak dela dokumenta. Grafički pretraživač generalno izaziva header-e da se pojavljuju boldirani i veći od ostatka teksta. HTML vas snabdeva sa celom serijom numerisanih header-a, tako da header prvog prioriteta je označen sa tagovima <h1> ... </h1>, i prioritet važnosti se smanjuje kako se brojevi povećavaju. Ne treaba da pratite numerički redosled sa header-ima iako je to u ovom tekstu uradjeno. Npr. iznad stavke pridodate <h1>H1 Element</h1> elementu, možete imati sa malim header-om, tj. <h4>H4 Element</h4>. Header uvek preokupira svoju sopstvenu rečenicu teksta u prozoru pretraživača i većina pretraživača takodje ubacuju vertikalni prostor iznad i spod headera, bez obzira koliko je visok ili nizak broj ispred.

Nazad na sadržaj.

Naručene liste i liste stavki

Naručena lista je lista numerisanih stavki. Lista počinje sa tagom <ol> i završava se sa tagom </ol>. Unutar ovih tagova, svaka stavka na listi počinje sa <li> tag om i završava se sa </li> (za "lstavke na listi"). Stavke na listi, zauzvrat mogu sadržati razne druge argumente kao što su paragrafi, ali naručena lista možda neće sadržati ništa drugo sem liste stavki.Drugim rečima ne sme biti tag izmedju otvarajućeg <ol> taga i prvog <li> taga.

Ne kucate brojke u naručenu listu. Umesto toga, pretraživač automatski stavlja brojke u pravi redosled. Ako pomerite stavke, pretraživač će ponovo dodeliti brojke. Dobra vežba je pisati listu sa uvučenim redom, iako to nema nikakve veze kako će se pojaviti u prozoru pretraživača:

	<ol>
		<li>Prva stavka</li>
		<li>Druga stavka</li>
		<li>Treća stavka</li>
	</ol>
		

Ovako će se kod iznad prikazati u prozoru pretraživača:

  1. Prva stavka
  2. Druga stavka
  3. Treća stavka

Ako možete da ugradite listu unutar liste da to uratite bilo kojem nivou hijerarhije, sa tim da ugradjena lista se nalazi unutar liste stavki. Tabela sadržaja na početku ovog dokumenta je primer ugradjivanja. Evo jednostavniji primer:

	<ol>
		<li>Prva stavka</li>
		<li>Druga stavka
			<ol>
				<li>Prva podstavka</li>
				<li>Druga podstavka</li>
			</ol>
		</li>
		<li>Treća stavka</li>
	</ol>
		

Ovo je rezultat koda iznad kako ga je vaš pretraživač protumačio za prezentaciju:

  1. Prva stavka
  2. Druga stavka
    1. Prva podstavka
    2. Druga podstavka
  3. Treća stavka

Primetite kako podstavka poručene liste je ugradjena u listu stavki na roditeljskoj listi.

Cascading Style Sheets ( CSS), koji će biti pokriven u posebnom tutorijalu, omoguća vam da menjate stvari kao što je brojčani metodto — za npr. rimske brojke (velike ili male), ili za slova umesto brojeva

Nazad na sadržaj.

Nenaručene liste i lista stavki

Nenaručena lista je kao naručena lista, ali se ne pojavljuje sa brojkama. Zato je pretraživač ugravnom prikazuje kao liste sa tačkama, ovako:

  • Prva stavka
  • Druga stavka/li>
  • Treća stavka

Da bi se stvorila nenaručena lista, jednostavno koristite <ol> i </ol>. tagove umesto

    i
. Možete ugraditi naručene ili nenaručene liste u bilo koju permutaciju u koju želite.

Nazad na sadržaj.

Tabele, redovi tabela i ćelije tabela (or "Tabela Podataka")

Tabela je struktura koja ima kolone i redove i najbolja je za korišćenje četvrtastih informacija koje prate takvu strukturu, kao npr. tabela fakultetskih email adresa i telefonskih brojeva:

Lista Odeljenja Engleskog Fakulteta
Ime E-Mail Telephone
Amittai Aviram avirama@gwm.sc.edu 777-2058
Stan Dubinsky dubinsk@vm.sc.edu 777-2056
Judith James jamesj@gwm.sc.edu 777-5063
William Richey richeyw@gwm.sc.edu 777-2054

Da biste napravili tabelu, otvorite element sa <table> tagom. Možete odrediti širinu border width u pikselima, kao i prostor i veličinu ćelija. Ćelijski prostor je količina prostora izmedju teksta u ćeliji i bordera oko njega i jako je koristan atribut. (U tabeli iznad, ćelijski prostor je namešten na "5.") Veličina ćelije je veličina prostora izmedju ćelija i po piščevom iskustvu, potpuno beskoristan atribut, jer bilo koja veličina "0" uvek izgleda čudno. (Ali isprobajte brojke.) Ova tri atributa tabele elemenata udaraju po prezentaciji više nego strukturalne brige kako stvari izgledaju pre nego šta su one — ali su izuzetak u strukturi duha XHTML..

Takodje,XHTML vam dozvoljava da promente širinu tabele, ako je to potrebno. Ako nije, većina grafičkih pretraživača će proširiti tabelu koliko je potrebno da bi svi podaci bili smešteni u njoj, smanjujući tekst do potrebne veličine. Na primeru kada želite da odredite širinu tabele, pretpostavimo da imate stranicu sa dve tabele, jednu ispod druge. Moža poželite da tabele budu kompatibilne jedna sa drugom, i zato moraju da imaju istu širinu. Ako odredite širinu sa brojem i znacima navoda (width="500"), to će naterati grafički pretraživač da nacrta tabelu u odredjenoj širini u pikselima — ali trebalo bi da izbegavate ovo. Uvek je bolje odrediti širinu tabele u procentima od totalne širine prozora: width="85%". Odredjivanje širine ima prednost pomaganja pretraživaču pri crtanju tabele tako što uklanja jedan deo kakulacija iz procesa crtanja, koji ponekada može rezultirati u bržim performansama kada se pregledaju stranice.

Zatim izborno, možete odrediti caption element za vašu tabelu. Ovo će se pojaviti po defaultu odmah iznad tabele, uglavnom centrirano. Ovo je jako koristan element, ne samo za grafičke i tekstualne pretraživače već i za audio pretraživače, pošto je jasnija svrha tabele.

Zatim i dalje izmedju otvaranja <table> i zatvaranja </table> tagova, morate imati makar jedan red tabele elemenata i taj red mora imati makar jednu ćeiju. Red tabele je označen sa <tr> i </tr> tagovima. Ćelija počinje sa <td> i završava se sa </td>. "td" je skraćenica od table data. (tabela podataka). (TNisu me pitali za mišljenje kada su ovo pravili!) Umesto regularne ćelije tabele "table data" tipamožete koristit th element za red ili kolonu. ("th" je skraćeno od "table header,".)Po defaultu, pretraživači uglavnom prikazuju boldiran tekst u th elementu, što je korisno.

Ako koristite th header element za kolonu ili red, dobra je vežba odrediti obim atributa kao "col" ili "row." Ovo govori audio pretraživačima da li se header odnosi na njegove kolone ili redove i sprečava dezorijentaciju kada neko sluša čitanje tabele naglas.

Kod za stvaranje tabele je ovde iznad:

	<table border="1" cellpadding="5" cellspacing="0">
		<caption>Lista Odeljenja Engleskog Fakulteta</caption>
		<tr>
			<th scope="column">Ime</th>
			<th scope="column">E-Mail</th>
			<th scope="column">Telefon</th>
		</tr>
		<tr>
			<th scope="row">Amittai Aviram</th>
			<td>avirama@gwm.sc.edu</td>
			<td>777-2058</td>
		</tr>
		<tr>
			<th scope="row">Stan Dubinsky</th>
			<td>dubinsk@vm.sc.edu</td>
			<td>777-2056</td>
		</tr>
		<tr>
			<th scope="row">Judith James</th>
			<td>jamesj@gwm.sc.edu</td>
			<td>777-5063</td>
		</tr>
		<tr>
			<th scope="row">William Richey</th>
			<td>richeyw@gwm.sc.edu</td>
			<td>777-2054</td>
		</tr>
	</table>
		

Primetite uvučeni red, koji pomaže koderu da najde put do koda. Nema se pojma kakvi će se rezultati pojaviti na prozoru pretraživača.

Nazad na sadržaj.

Block quotation

Ako imate produženo citiranje, možete ga staviti u blockquote element okružujući ga sa <blockquote> i </blockquote> tagovima. Blockquote elementmože sadržati paragrafe, ali paragraf ne može sadržat blockquote. Normalno ako imate block quotation, završićete paragraf pre sa </p> tagom, i zatim stavite citirani paragraf unutar vaše <blockquote>... </blockquote> tagova. Grafički pretraživači uglavnom predstavljaju block quotations po defaultu sa identičnom lvom marginom i redom vertikalnog prostora iznad i ispod. Autori ne bi trbali da koriste ove elemente da bi nešto uvukli. Ako imate tekst koji nije citran, ali želite da uvučete, stavite ga u odgovarajući element, kao npr paragraf , sa odgovarajućom klasom atributa i zatil ili napišite CSS klasu ili neka vaš webmaster to uradi.

Nazad na sadržaj.

Prazni (Standalone) Elementi

  • Slike: <img /> (inline)
  • Horizontalni lenjir: <hr /> (block)
  • Zagrade <br /> (inline)

Ova kategorija je kombinacija dve stvari, pošto su neki elementi u nivou bloka a drugi inline. Inline elementi moraju biti sadržani unutar elemenata dlok nivoa. Slike i zagrade su inline elementi, sa se možda neće pojaviti van sadržujućeg elementa, kao što je paragrap ili division. (Pogledajte dalje ispod o <div> tagu i division elementu.)

Nazad na sadržaj.

Slike

Kada ugradite sliku u HTML dokument, sama slika nije zapravo deo koda dokumenta. Umesto toga, HTML izvorni kod ima img element u njemu, koja sadrži podatke koji povezuje trenutni dokument sa drugom datotekom, koja sama po sebi, ima kod za slike. Zaista, slika datoteke i HTML fajlovi dokumenata su veoma različiti po svojoj prirodi: HTML datoteka se sastoji isključivo od teksta znakova i simbola, dok slikovne datoteke se sastoji od binarnog koda koji ljudi ne mogu pročitati. U img tag elementa sadrži informacije koje omogućavaju pretraživaču da zatraži datoteku slike kao posebnu stavku i prikaže je na pravom mestu u pravom iznosu od prostora rezervisanog za to. (Odeljak u nastavku o serverima objašnjava više o ovom "zahtevajućem" procesu.)

Datoteka sadrži stvarni binarni kod za sliku zvani izvor slike. Pošto tekst i audio pretraživači ne prikazuju slike, takođe treba da bude neka vrsta teksta u img elementu da stoji u mestu slike u tim kontekstima. Shodno tome, slika oznaka mora navesti, u najmanju ruku, dva atributa: (1) izvor izvor slike, i (2) alternativni tekst. Takođe je dobra ideja da navedete (3) naslov slike. Konačno, svakom img elementu takođe treba navesti širinu i visinu u pikselima, da pomogne pretraživaču pri raspodeliti prostora za to.

Izvorni atribut se piše src u <img> tagu. Njegova vrednost je ime posebnog fajla koji sadrži kod slike. Bez obzira da li kreirate sopstvenu sliku ili je uzimate (legalno!) iz nekog drugog izvora, uvek bi trebalo otvoriti prvo u grafičkom uređivanja programa kao što su Adobe Photoshop ili Jasc Paint Shop Pro. Onda treba da ga promenite veličinu na onu koju želite da imate na svojoj web stranici, a zatim sačuvate pod željenim imenom i na mestu gde možete da ga pronađete. Mesto slova će biti vrednost vašeg src atributa, dok će veličine dimenzije biti potrebne za širine i visine dimenzije. Evo nepotpuni img element, navodeći samo src atribut:

(Nepotpuno — nemojte da kopirate ovaj primer!)

	<img src="http://www.cla.sc.edu/engl/faculty/faculty.jpg" />
		

Ako su HTML dokument datoteka i datoteka slike su na istoj mašini, adresa može biti relativna. U drugom slučaju, ako je dokument bio u istom direktorijumu na istoj mašini kao na slici, src može da uzme jednostavno "faculty.jpg.” kao svou vrednost.

Alternativni tekst atribut pojavljuje u tagu kao alt, a njegova vrednost treba da obezbedi ekvivalent tekst informativne vrednosti slike, ako postoji. Vrednost alt atributa koristi tekst pretraživač poput Linx-a umesto slike aaudio ili Brajevi pretraživači mogu koristiti isti tekst za istu svrhu. Slt atribut je obavezan , i komponovanjem njegove vrednosti vam daje priliku da razmislite o tome zašto vi stavljate sliku tamo na prvom mestu. Da li vaša fotografija fakulteta na Univerzitetu ministarstva pokazuju njegovu različitost i broj? Da li vaša fotografija studenta koji čitaju knjigu na otvorenom pokazuje nadahnutost vaših studenata? Ako vaša slika zaista ne doprinosi nikakvu informaciju i čistoje dekorativna, možete staviti alt="" u oznaci. Posebno je važno da informativni tekst u alt atributu bilo koje slike služi kao link, kao što je custom- made dugme.

Takođe je mudro da navedete naslov. Ovo bi trebalo da bude više od opisnog naziva slike. Pre nego što se slika učita na grafičkom pretraživaču, ili ako slika ne može da se učita na nekog razloga - kao što je problem sa serverom ili linkom - pretraživač može da prikaže naslov u kutiji na mestu gde bi slika se pojavila. Takođe, mnogi grafički pretraživači omogućavaju da vidite tekst alt atribut kao alatku poput teksta koji iskače sa strane kada korisnik pomera miš preko slike. Generalno, ako je naslov izostavljeno, grafički pretraživač će koristiti alt tekst za ove namene.

Konačno, dimenzije slike u pikselima su navedene. Ovo može da zvuči kao pitanje kako nešto izgleda nego što je, to, pa još prezentaciona funkcija se nalazi u XHTML, ali slika je, budimo iskreni, u suštini vizuelna, tako da njene dimenzije su zaista deo njene prirode. Dimenzije su širina i visina. Obično možete dobiti ove dimenzije precizno iz vašeg programa za editovanje slika, kao što je upravo pomenuto.

Dakle, gore img img tag mora biti revidiran kako bi izgledala ovako:

	<img
		src="http://www.cla.sc.edu/engl/faculty/faculty.jpg"
		title="Slika Odeljenja Engleskog Fakulteta"
		alt="Naš raznovrsan fakultet ima preko 50 članova"
	/>
		

Dalji detalji o prikazu slike bi trebali biti kontrolisani od strane style sheet-a.Upotreba style sheet-a za kontrolisanje izgleda HTML dokumenata će kasnije biti pokrivena u posebnom tutorijalu.

Kao inline element, slika mora biti sadržana u nekom drugom elementu blok nivoa kao što je paragraf, lista, tabela, division, ili čak header.

Nazad na sadržaj.

Horizontalni lenjir

Horizontalni lenjir je horizontalna linija koja se pojavljuje povučena preko ekrana u delu gde je tekst dodeljen poziciji taga u HTML kodu. Korisno je separatisati divisions. Horizontalni lenjir nije inline elementveć element blok nivoa, paralelan sa paragrafom, listama, i tablelama, tako da ne mora da bude sadržan u bilo kom drugom blok elementu i ne treba da bude sadržan u nijednom osim u ćeliji tabele. Tag horizontalnog lenjira izgleda ovako: <hr />. U akciji horizontalni lenjir izgleda ovako:


Nazad na sadržaj.

Zagrade

Zagrada je tačka gde je reč privremeno zadržana i rečenica teksta ne radi, da bi nastavilana sledeći niz. Ovo je jako korisno za pregledanje poezije ili adresa. Može se pojaviti sa header-om, sa header-om polomljenim na dva reda, bez vertikalnog prostora. Tag se uvek pojavljuje ovakva: <br />.

Zagrada je inline element, što znači da mora biti sadržan u većem elementu blok nivoa ,kao što je paragrapf ili header.

Evo primer nekoliko stihova, prvo označenih onda pregledanih od strane pretraživača:

Označeno

	<blockquote>
	<p>
	Jednostavni Simon je upoznao burekdžiju<br />
	Odlazak na sajam<br />
	Rekao je Jednostavni Simon burekdžiji<br />
	"Dozvoli mi da probam tvoj proizvod!"<br />
	</p>
	<p>
	Rekao je burekdžija Jednostavnom Simonu,<br />
	"Pokaži mi prvo tvoj dinar"<br />
	Rekao je Jednostavni Simon burekdžiji<br />
	"Istina, nemam ni jedan"<br />
	</p>
	<blockquote>

		

Pregledano

Jednostavni Simon je upoznao burekdžiju
Odlazak na sajam.
Rekao je Jednostavni Simon burekdžiji,
"Dozvoli mi da probam tvoj proizvod!"

Rekao je burekdžija Jednostavnom Simonu,
"Pokaži mi prvo tvoj dinar."
Rekao je Jednostavni Simon burekdžiji,
"Istina, nemam ni jedan."

Kod iznad bi radio dobro i bez<br /> na kraju svake strofe prošle linije, neposredno pred zatvaranje </p>. Stavaio sam je tamo samo zbog opsesije prema konzistenciji i ona ništa ne menja

Nazad na sadržaj.

Inline Container Elementi

Svi inline elementi su potrebni da se zadrže unutar elemenata blok nivoa. Ovo pravilo uključuje linkove: link mora biti sadržan unutar paragrafa, ćelije tabele, ili divizije. Elementi pokriveni u ovom delu su inline elementi koji takodje sadrže nešto. Empatičan tekst, jak tekst, i citati naslova mogu sadržati tekst ili linkove koji sadrže tekst. Link može sadržati samo tekst,ili ceo paragraf ili header, ili sliku.

  • <em>Emphatic Text</em>
  • <strong>Strong Text</strong>
  • <cite>Title Citations</cite>
  • <a href="some_url.html">Links</a>

Nazad na sadržaj.

Nedvosmislen tekst, jaki tekst i citiranje naslova

Nedvosmislen i snažan tekst i citirani naslov će se razmatrati zajedno, jer sva tri dela, manje ili više rade na isti način, označavanjem reči, fraza, rečenica ili nekih drugih tekstualnih jedinica za neku vrstu posebne obrade. Jaki tekst je najbolje koristiti da izazove tekst da se pojavi snažniji, i grafički pretraživači obično pružaju jak tekst po defaultu kao boldfaced. (Svaki put kad vidim izraz kao što je jak tekst po defaultu kao boldfaced. (Svaki put kad vidim izraz kao što je jak tekst boldfaced u ovom dokumentu, to je zato što je zapravo sadržan u jakom tekstu elementa.) Isto tako naglašeni tekst je za naglašavanje i obično se pojavljuje u italics-u u vašem grafičkom prozoru. Citirani naslov (okružen <cite> i </cite> tagovima) treba da se koristi za naslove knjiga, predstave, filmove, umetnička muzika, itd. Oni, takođe, se uglavnom pojavljuju kao italics u grafičkim pretraživačima, koji prate standarde modernog štampnja. Ovo je dobra instanca razlike između HTML i obrade teksta. HTML pravi razliku između naslova i naglašavanja jer su različite stvari, čak i ako su obično tretiraju vizuelno na isti način. Sa upotrebom Cascading Style Sheets (CSS) , pokrivenog u posebnom tutorijalu, vi (ili vaš webmaster) možete, zaista, da postavite prezentaciju ova dva elementa da bude drugačija. Ovo je dalje diskutovano u odeljku o <div> i <span> ispod.

U štampi, mi koristimo italics u nekoliko drugih svrha osim za akcentovanje ili naslov, a možete naći izbor <em> ... </em> i <cite> ... </cite> ograničavajući. A šta ćemo sa stranim rečima i izrazima? I šta sa tehničkim uslovima kada su prvo predstavljeni? Šta sa engleskim rečenicama se koriste kao jedinke - primeri dijalekta, gramatika, ili upotrba? Za ove svrhe, i element i njegovi <i> ... </i> tagovi mogu biti korisni. Oni su pokriveni u sledećem odeljku.

Nazad na sadržaj.

Ostatak <b>, dalje koristan <i>, i mali uvid u Cascading Style Sheets

XHTML 1.0 Strict dozvoljava upotrebu <b> ... </b> tagova za boldface tekst i <i> ... </i> tagove za italic tekst. To su ostaci iz starijih verzija HTML, koji nisu razlikovali strukturu o prezentacije dobro kao trenutne verzije. Upotreba ovih elemenata je nepotrebna pored strong i em elemenata kao i cite.

Ipak postoje neke instance gde je i element jako zgodan: naročito za strane izraze, za predstavljanje tehničkih termina, i za tekst koji se koristi kao uzorak dijalekta, rečnika, upotrebe ili sličnog:

Kod:
	<p>E - mail skraćenice, kao što <i>FWIW</i> znači "ono što je vredno" i 
		<i>AFAIK</i> za "koliko ja znam", postali su neka vrsta kompjuterskog <i>argot</i> — a
	<i>nestandardne</i> upotrebe - i nećete naći u
	<cite>Oxford English Dictionary</cite> i stoga ne baš
	<em>formali</em> Standardan Engleski.</p>
		
Rezultat:

E - mail skraćenice, kao što FWIW znači "ono što je vredno" i AFAIK za "koliko ja znam", postali su neka vrsta kompjuterskog argo — a nestandardne upotrebe - i nećete naći u Oxford English Dictionary.

Ali, u stvari, strani izrazi i primeri jezika se ne razlikuju samo d nedvosmislen izraza i titulu citata, oni se razlikuju jedni od drugih. Pretpostavimo da ćemo kasnije želeti da ih pretraživači donesu jasno. Dokle god sam koristio iste oznake za označavanje i stranih izrazai jezičkih primeraka, neću moći da nateram pretraživač da ih razlikuju vizuelno. Rešenje ovog problema je korišćenje class attribute u kombinaciji sa Cascading Style Sheet-a da stvore podelu unutar kategorije i elementa, tako da imamo jednu klasu i elemene za strane izraza, drugu za tehničke uslove, a treću za primerake jezika. Dok sam na tome, ja ću koristiti lang atribut da navedem jezik stranog izražavanja, u slučaju da kasnije želim da koristim ovu informaciju na neki poseban način u programu. Klasa i lang atributi su standardne osobine - za bilo koji element, u saradnji sa CSS, i poslednje za bilo koji element koji sadrži tekst (i stoga mogu imati jezik). Takođe sam napravio razlikovanje vrste citiranog naslova koji mi je dao atribut klase čija je vrednost knjiga. Ovde je isti prolaz, ali sa pridodatim atributima:

	<p>E - mail skraćenice, kao što
	<i class="specimen">FWIW</i>
	znači "ono što je vredno" i  <i class="specimen">AFAIK</i>
	za "koliko ja znam", postali su neka vrsta kompjuterskog
	<i class="foreign" lang="fr">argot</i> — a
	<i class="technical">nonstandard</i> upotreba- nije jos vidljiva u
	<cite class="book">Oxford English Dictionary</cite> i stoga ne baš u<em>formal</em> Standardnom
	Engleskom.</p>
		

Da bih pokazao korišćenje CSS sa klasom atributa - vrlo kratko - ja sam stvorio poseban fajl pod nazivom tutorial.css koji sadrži definicije mojih klasa. Odlučio sam da promenim boje pozadine za stranim izrazima, primerima jezika i naslova knjige, da bi svaki izgledao drugačije od drugog. Takođe sam povećao težinu u ovim elementima, kako bi se njihove boje lakše videle.Nedvosmislen tekst sam ostavio pod defaultom.

	cite.book {
		font-style: italic;
		font-weight: bold;
		color: blue;
		background-color: white;
	}

	i.foreign {
		font-style: italic;
		font-weight: bold;
		color: red;
		background-color: #99ff99; /* Numeric code for light blue. */
	}

	i.technical {
		font-style: italic;
		font-weight: bold;
		color: #009900; /* Dark green. */
		background-color: white;
	}

	i.specimen {
		font-style: italic;
		font-weight: bold;
		color: white;
		background-color: #009900; /* Numeric code for dark green. */
	}

		

HTML dokument koji čitate je povezan sa ovim CSS fajlom pomoću jednog link elementa, koji se javlja na vrhu izvornog koda ovog dokumenta u glavi elementa. I elementi glave i link elementi su objašnjene u daljem tekstu.

E - mail skraćenice, kao štoFWIW znači "ono što je vredno" i AFAIK za "koliko ja znam", postali su neka vrsta kompjuterskog argot — a nestandardne upotrebe - i nećete naći u Oxford English Dictionary.

Grafički pretraživači koji ne podržavajuCSS će verovatno pregledati sve i elemente kao italics.

Vrednost klase atributa ista kao reč koju prati tačka u CSS unošenju, koja se zove CSS class selector. Pravila za vrednost klase atributa i odgovarajućeg CSS class selector su izmešana: svaki pojedinačan selector-and-class-name mora biti samostalna reč, bez razmaka i da se sastoji samo od slova, brojki, ili hyphen, u bilo kojoj kombinaciji, Vrednost klase foreign ili foreign1 je OK, ali ne foreign? ili *123foreign.

Vrednost lang atributa mora biti izabrana iz skupa standardni dvoslovnih skraćenica kao što je en za engleski, fr za francuski, de za nemački, es za španski, i ru za ruski. Uglavnom su isti kao ona dva slova koja se nalaze na kraju Web adresa van SAD.

Nazad na sadržaj.

Linkovi ("Anchors")

Spisak iznad treba da se koristi pri upotrebi prve tri vrste inline elemenata. Linkovi, međutim, zahtevaju poseban način. Iz istorijskih razloga, link element nije tehnički naziva "link", ali je anchor, tako da je označen sa tagovima otvaranja <a> i zatvaranja </a> tagova. (Ne znam zašto se neko odlučio da ga zove "anchor" tj. sidro, ali sada smo zaglavili sa njim.) Baš kao element slike (img) mora imati najmanje izvor slike naveden kao vrednost src atributa meta linka (ili "anchor") mora biti naveden u oznaci otvaranja <a> koristeći href atribut. Meta linka je adresa na koju treba da ide sledeća pretraga kada kliknete na link, a href je skraćenica za "hypertext reference", koji je manje - više ono što jeste. Vrednost atributa href je adresa, takođe poznata kao URL, kao vrednost src atributa. Baš kao i sa src atributom img taga, tako i ovde možete koristiti relativnu adresu ako su dokument i meta linka na istoj mašini i samim tim imaju iste početaka do njihove adrese - na primer, http://www.cla.sc.edu/index.html i http://www.cla.sc.edu/departments.html. U takvom slučaju, link na prvoj stranici koji se odnosi na drugi bi mogao da izgleda ovako:

	<a href="departments.html">Departments</a>
		

Inače, ako se meta linka nalazi na drugom domaćinu - sve što dolazi odmah posle "http: //" je drugačije - onda morate navesti ceo URL, uključujući http:// na početku::

	<a href="http://www.amittai.com/">Amittai's Website</a>
		

Šta ide između tagova otvaranja <a> i zatvaranja </a> je tekst koji će se koristiti kao link. Po defaultu, pretraživači obično ističu ovaj tekst na neki način, obično kao podvučen plavi tekst.

Naglašavanje u druge svrhe, osim linkova se ne smatra stvar strukture, tako da nije podržano od strane verziji HTML u ovom uputstvu (XHTML 1. 0 Strict). Naglašavanje može da se pojavi na većini pretraživača označavanjem nekih drugi elemenata kao isticanje teksta pomoću Cascading Style Sheet ( CSS). Cascading Style Sheets je tehnika za vežbanje pretraživača da donese HTML strukture u skladu sa utvrđenim prezentacionim pravilima. Oni su tema sama za sebe i ovde se neće pokriti. Osim toga, ako kreirate web stranice za veći sajt koji ima web menadžera ili webmastera, verovatno je bolje samo da kažete webmasteru kako želite da se vaša struktura pojavi i da webmaster stvori style sheet za vas. Važno je da se odredi element strukturalno kako biste voleli da vidite istaknuti tekst. Pogledajte sledeći odeljak, o div i span elementima, kao mali uvod u ovu temu.

Meta linka može biti nešto drugo od spoljnog dokument. Umesto toga, ona može da bude drugi deo istog dokumenta. Na primer, možete imati tabelu sadržaja na vrhu dokumenta u obliku zahtevane ili nezahtevane liste, gde svaka stavka na listi je naslov sekcije a takođe je i link, tako da možete da kliknete na te naslove i dodjete na njih. Zatim, u samoj tački, možda postoji sličan link unazad do sadržaja. Linkovi koji se koriste za ovu svrhu su isti u obliku linkova koji ukazuju na spoljna dokumenta. Jedina razlika je u ciljnoj adresi. Za namera korišćenja URL adrese ili povezane adrese, koristite identifikator fragmenta. Identifikator fragmenta je ekvivalent adresi, ali se koristi za fragment ili deo dokumenta. On uvek ima simbol # ispred. Sledeće link ukazuje na odredjeni fragment "top":

	<a href="#toc">Jump to bottom of document</a>
		

Da bi ovo funkcionisalo, morate da identifikuju ono mesto u dokumentu na koje se povezuju tačke. Ovo se postiže tako što elemenatu dajete id atribut. Na primer, header može poslužiti kao ciljni fragment, a može da sadrži id: <h2 id="info">Info</h2>. Ovo je preferirani metod za određivanje mesta u dokumentu, kao prepoznatljivog fragmenta.

Ovaj dokument već demonstrira korišćenje ove tehnike za interne veze sa sadržajem na vrhu vezanog za sekcije i linkove ispod svakog dela koji omogućava korisniku da se vrati u sadržaj. Svi ciljni fragmenti se poistovećuju sa id atributa u headerima.

Možete kombinovati URL drugog dokumenta i identifikator fragmenta u tom drugom dokumentu, tako da vas link odvede na određeni deo tog drugog dokumenta. U tom slučaju, atribut href će imati svoje vrednosti i URL adresu, a zatim bez razmaka od strane identifikatora fragmenata, koji je odvojen od URL adrese # karakterom:

	<a href="another_document.html#part_in_middle">
		Idite na mesto u sredini drugog dokumenta.
	</a>
		

Pored povezivanja sa drugim dokumentom ili na drugom ili istom dokumentu, možete, konačno, koristite anchor da se poveže na e - mail adresu. Generalno, pretraživač korisnika će nositi link isti onom što će otvoriti podrazumevani poštansku program kada korisnik klikne na link, sa adrese primaoca već udje u "To" polje odlazne e - pošte. Da biste kreirali ovu vrstu veze, koristite href atribut kao pre, ali vrednost je reč mailto, praćeno dvotačkom, zatim e - mail adresu željenog:

	Kontaktirajte autora:
	<a href="mailto:amittai.aviram@yale.edu">
	amittai.aviram@yale.edu
	</a>
		

Postoji primer mail linka na samom dnu ovog dokumenta. Pošto tie - in za slanje zavisi isključivo od toga da li korisnik ima server slanja i server pretraživačana svom sistemu i da li njih dvojica rade zajedno, ne možete pretpostaviti da će mail link raditi. Dakle, uvek stavite stvarnu e - mail adresu između tagova za otvaranja i zatvaranja jednog elementa. Na taj način, ljudi koji ne mogu samo da kliknu i mail će znati željenu adresu i da poslati e - mail na neki drugi način..

Ako želite da imate link sa Usenet newsgroup, koristite istu tehniku kao i veoma za povezivanje na e - mail adresu, samo koristite prefiks news: umesto mailto:. Ista pravila važe o stavljanju na ime diskusione grupe u tekstu linka, u slučaju da korisnikov kompjuter nije podešen da automatsko otvoranje spiker programa - što je često slučaj. Druga tehnika za povezivanje sa Usenet newsgroup je korišćenje veze sa Google News Service na webu. Ako pogledate spisak resursa na kraju ovog uputstva, a zatim pogledate u svom izvornom kodu, videćete da je tehnika u akciji.

Nazad na sadržaj.

Skraćenice i akronimi

Ako ste čitali ovaj dokument u up-to-date grafičkom pretraživaču, možda ste primetili tooltip-tip teksta koji se pojavljuje kada predjete mišem preko teksta, pokazujući ili "Hypertext Markup Language" ili "Extensible Hypertext Markup Language," ili "Cascading Style Sheets." To će se desiti kad se pokazivač miša nalazi na vrhu jedne od tri skraćenica - odnosno, HTML, XHTML, ili CSS. HTML obezbeđuje dva zanimljiva ugnježdena elementa, jedan za skraćenicu i drugi za akronim: abbr i acronym. U oba slučaja, trebalo bi da podesite atribut naslova u vrednosti proširenog značenja skraćenica ili akronima. Ovaj postupak ne samo da omogućava usaglašene pretraživača za prikazivanje instant definiciju skraćenice ili akronim, već i da pretraživači ponude korisniku mogućnost širenja svih skraćenica i akronima u tekstu ili ih da ih vrati nazad, ili da prikaže proširenu verziju prvog pojavljivanja skraćenica i akronima. Ovo bi trebalo da rade za tekst, Brajevo pismo i audio pretraživač , kao i grafički pretraživač. Prema tome, ja sam priložio svaki slučaj svakog akronima u ovom dokumentu u <acronym> ... </acronym> tagovima, i postavio naslob na odgovarajući način. Da bih se sačuvao od dugačkog kucanja svaki put, u početku sam kucao sve akronime, a zatim koristio globalnu pretragu i zamenu funkcije u mom editoru da promeni sva pojavljivanja tih akronima u njihove tagove.

Neki okviri trenutne XHTML specifikacije jasno su zbunjeni sa rečju acronym, koji zaista znači izgovorljiv lettervords, kao što su radar, LAN, i UNICEF. Očigledna suvišnost abbr i acronym elemenata može dovesti više od konkurencije među kreatorima pretraživača - "ratovi pretraživača" - nego iz potrebe ili logike - tačka koja je u drastičnim razlikama u pretraživaču. Ukratko, ova dva elementa su deo HTML uvek u kretanju.

Nazad na sadržaj.

<div> i <span>

Ako imate određene strukturne elemente u dokumentu za čije oznake HTML vokabular to nije dovoljan, možete označiti svoj element na blok nivou sa <div> i </div> tagovima, a na ravnom nivou, sa <span> i </span> tagovima. Pošto ove oznake ne pokazuju nikakvu specifično značenje, njihova funkcija je potpuno prepuštena style sheet-u. Obično, div (podela) ili span element će imati atribut navedene klase.Naziv klase se zatim koristi u stilu da kontroliše prezentaciju elementa.

Na primer, pretpostavimo da imam književno - kritički esej u kome sam citiram blok teksta, a zatim komentar na prolaz u tom bloku. Možda želim da istaknem prolaz u drugoj boji. Ja ću pozvati taj pasus span i podesiti vrednost class da bude naglašena i onda koristiti definiciju CSS klase za promenu izgleda:

	<p>Chaucerov narator komentariše
       Monkove  preference o lovu 
       iznad života što zvuči kao
       odobravanje:</p>

	<blockquote lang="enm">
	<p>
	And I seyde that his opinion was good.<br />
	<span class="highlighted">What sholde he studie and make hymselven
	wood,<br />
	Upon a book in cloystre alwey to poure,<br />
	Or swynken with his handes, and laboure,<br />
	As Austyn bit?  How shal the world be served?<br /></span>
	</p>
	</blockquote>

	<p>U većini ovog odlomka, narator koristi
	<iclass="technical">free indirect discourse</i>,
	priča o  Monku u trećem licu 
           imitirajući šta su pretpostavljeni 
           Monkovi uslovi i argumenti, da 
           bi ga imitirao. Ovde se predlaže  
           mogućnost ironije, tako da narator 
           može konotirati kritički pogled
           bez izražavanja.</p>
		

Zatim se sledeći kod pojavljuje u mom style sheetu:

	span.highlighted: {
		font-weight: bold;
		color: black;
		background-color: yellow;
	}
		

HOvo su rezultati:

Chaucerov narator komentariše Monkove preference o lovu iznad života što zvuči kao odobravanje:

And I seyde that his opinion was good.
What sholde he studie and make hymselven wood,
Upon a book in cloystre alwey to poure,
Or swynken with his handes, and laboure,
As Austyn bit? How shal the world be served?

U većini ovih redova narator koristi slobodno indirektno zaključivanje, pričajući o Monku u trećem licu ali imitirajući šta su pretpostavljeni Monkovi uslovi i argumenti, da bi ga imitirao. Ovde se predlaže mogućnost ironije, tako da narator može konotirati kritički pogled bez izražavanja.

Evo primer kako je nonce div element u konjukciji sa CSS kodom:

	<div class="centered">
		<h4>Centered Text</h4>
		<p>Ovaj tekst je centriran
		ispod centriranog hedera.</p>
	</div>
		

Ovo je dodato tutorial.css fajl:

	div.centered {
		text-align: center;
	}
		

Evo ga rezultat:

Centrirani Tekstt

Ovaj tekst je centriran ispod centriranog headera.

Gledajete follow-up ovog tutorijala koji će vam objasniti osnove style sheets u više detalja.

div element je takodje koristan pri zatvaranju anchora u kontejneru ali paragraf ili takva druga tekstualna struktura nije odgovarajuća jer je anchoru zaista najbolje samom. Ovaj dokument koristi div element u ovu svrhu, tda bi sadržao ime <a name="top"></a> na vrhu dokumenta koji služi kao meta za linkove koji usmeravaju nazad na sadržaj.

Nazad na sadržaj.

Komentari

Često, je dobra ideja da ubacite neki tekst u dokument koji ne želite da svet vidi u prozoru, ali da vi i bilo koji drugi programer treba da vidi kad god pogledate kod izvorni dokument. Možete da ubacite podsetnike, na primer, da biste ažurirali neki deo periodično, ili neki tekst koji će vam pomoći da pronađete mesto koje vam je potrebno da se često revidira. HTML komentar je označen sa tagom za otvaranje <!-- i zatvaranje --> Sve između <!-- i --> se nikada neće pojaviti u prozoru, ali se, naravno, pojavljuju u izvornom kodu. Drugi način kojim komentari mogu biti korisni je da se omogući da se maskira u HTML sekciji. Na primer, neki deo stranice može biti privremeno nevažećom, ali možda ćete želeti da se zadržite tekst u slučaju da kasnije želite da ga ponovo prikažete. Možete jednostavno postaviti celu stvar u komentaru i ona će nestati iz pretraživača bez traga.

Nazad na sadržaj.

Glava i telo

Diskusija jvas je do sada obezbedila sa oznakama za tekst u dokumentu. HTML dokumenti takođe moraju imati malo naznaka okružujući ceo sadržaj, da bi omogućili softveru pretraživača da pravilno obradi dokument. Pre svega, ceo dokument se smatra jednim velikim html element. Mi takođe kažemo da je html element korena, iz kojeg se svi ostali elementi "granaju". (Metafora je malo apstraktna.) Dakle ceo dokument mora biti obeležen sa takovima otvaranja <html> i zatvaranja </html> Mora postojati samo jedan html element u dokumentu.

	<html>
	<!-- Vaš ceo dokument ide ovde. -->
	</html>
		

<html> tag treba da sadrži nekoliko specijalnih atributa,o kojima će kasnije biti reči.

Da biste sami videli<html> tag, možete da vidite izvorni kod iz vašeg pretraživača. Na grafičkom pretraživaču, kao što je Microsoft Internet Explorer ili Netscape Navigator, pronadjite "View Source" u View meniju i izaberite ga. To će otvoriti poseban prozor sa izvornim kodom ovog dokumenta, a zatim možete da vidite sve tagove, uključujući i one za otvaranje <html> i zatvaranje </html>. Slovo će biti poslednja stavka koju vidite, ali prethodna neće biti prva. Šta dolazi iznad njega će uskoro biti objašnjeno, zajedno sa tim atributima za otvaranje html tag.

Sadržane unutar html elementa su dve važne komponente glava i telo. Sadržaj elementa glave je uglavnom nevidljiv za korisnika i nalaže računaru na predmetima koji uslovljavaju pružanje dokumenta. Na primer glava je ta koja prikazuje style sheet appears , ili element koji povezuje dokument na spoljni fajl sa stilom. (Ova vrsta povezivanja elemenata, uzgred se zove link! To je navedeno u samostalnom <link /> tag.) Jedan element u okviru glave je prikazan i uvek treba da se pojavi u glavi: naslov. Tekst naveden u naslovu elementa pojavljuje se u naslovnoj traci, koja je, po pravilu, plava ili bela traka na vrhu grafičkog prozora pretraživača. Ako ne navedete naziv, naslov bar će obično samo pokazati URL, koji uvek izgleda jadno i neprofesionalno i omogućava svetu da zna da autor stranice ne zna HTML. Evo izgleda element glave ovog tutorijala:

	<head>
		<title>Short HTML
		Tutorial</title>
		<link rel="stylesheet" type="text/css" href="tutorial.css" />
	</head>
		

Ponovo pogledajte izvorni kod ovog dokumenta, da biste videli <head> i </head> tagove sadržane u <title> i </title> tagove i samostalni <link /> tag. Link element se povezuje sa spoljnim lstyle sheetom koji precizira kod za span i div elemente prikazane iznad. Obratite pažnju kako su elementi uvučeni da se lako čita šifra, i kako to nema uticaj na to kako tekst je prikazan u prozoru.

Ispod elementa glave dolazi element tela sa ničim između. Element tela sadrži sve podatke dokumenta, uključujući sve oznake o kojima smo razgovarali pre.

Nazad na sadržaj.

Document Type Declaration

Pre sve, pa čak i html korena elementa, ima nekoliko rečenica koda koji uslovljavaju čitanje ostatka dokumenta pretraživača, i glave i tela. Prvo dolazi XML declaration. deklaracija. Ovo se prvo stavlja, jer trenutna verzija HTML, zvana XHTML podskup XML i u skladu sa njenim pravilima. XML, Extensible Markup Language, nije stvarno jezik, već apstraktni sistem pravila koja regulišu označavanje jezika u celini. Pored XML verzije, XML deklaracija definiše kodiranje, odnosno skup znakova koji se koristi. Ovo je sve važno u novijim pretraživačima koji podržavaju mnoge skupove karaktera, uključujući kineski, tajlandski, hebrejski i arapski. Kodiranje ISO - 8859 - 1 podržava sve zapadne alfabet znakove, uključujući i one koji imaju akcente ili dijakritičkim oznake. Najveće inkluzivno kodiranje je UTF - 8, koje prihvata bilo koji jezik trenutno definisan za korišćenje interneta, uključujući i one bez zapadnih karaktera. UTF - 8 je kodiranje proglašeno za ovaj dokument. Ako pratite moj primer, vaš deklaracija XML treba da se pojavi na sledeći način:

	<?xml version="1.0" encoding="utf-8"?>
		

XML deklaracija nije tag. Otvara se i zatvara sa posebnim XML simbolima <? ... ?> pre nego < ... />.

Odmah ispode XML deklaracije dolazi deklaracija tipa dokumenta, koja takodje nije tag samo tako izgleda. Ovako se prikazuje:

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
		

Ima toliko mnogo informacija u ovoj stavki koje sam mogao podeliti u dve rečenice, ali takođe može biti napisano kao jedna. U suštini, ovo izjavljuje da koren elementa u dokumentu je html, da je tip dokumenta definisan i opisan na drugom mestu u javnom dokumentu, koji je napisan u XHTML 1. 0 Strict, da je njegova definicija je napisana na engleskom jeziku, i gde je definisanje pravila od 1, 0 XHMTL Strict se može naći online. Kao deo dobrog XHTML 1. 0 Strict prakse, otvaranje tagova HTML root elementa takođe treba navesti nekoliko atributa:

	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-
	US">
		

U slučaju da ste radoznali o njima, xmlns=" http://www.w3.org/1999/xhtml " označava XML namespace . je toliko apstraktan i fleksibilan da omogućava više od jednog seta imenovanih atributa u istom dokumentu, diferencirano njihovim namespaces. Namespace se signalizira prefiksom pre atributa, kao što su xhtml:id. Ovo može postati dosadno, pa umesto toga, trebalo bi proglasiti namespace podrazumevani za sve unutar korena elementa, a to je ono što xmlns atribut radi. Dalje treba da se podesi jezik dokumenta. XHTML se oslanja na jezik postavljen u XML namespace nego u sopstvenoj namespace, tako lang atribut snosi xml: prefix. Njegova vrednost je standardna skraćenica za jezik u dokumentu, zajedno sa regionalnom varijantom, kao što su en-US a američki engleski ili en- GB za britanski engleski. Nakon toga, običan stari lang atribut duplira iste informacije u korist starijih pretraživača koji se ne mogu tumačiti bilo XML simboli i nemaju odredbe za namespaces uopšte. Pa, pitali ste, zar ne?

Ako pišete dokument u XHTML 1. 0 Strict, kao što ovo uputstvo savetuje, onda možete samo da kopirate prvih nekoliko redova ovog dokumenta i ubacite ga na vrh bilo koje od vaših dokumenata. Kopirajte iz prve linije kroz otvaranje <html> taga. Ovo bi trebalo da vas poštedi neke nepotrebne čekanja.

Uzgred, svaki put kada predjete sa jezika dokumenta u celini na neki novi jezik, trebalo bi da to kažete u lang atributu na relevantnom elementu. Tipično, ovo može biti i element, kao što je ranije pomenuto, ili možda blockquote element ako imate čitav blok teksta na drugom jeziku. Takođe možete da koristite span ili div element za ovu svrhu. Jezik svakog delića dokumenta je korisna informacija za audio pretraživače između ostalog, jer će se primenjivati različita pravila za izricanje iste likove, u zavisnosti od jezika.

Nazad na sadržaj.

Entiteti karaktera

Ako ste bili na oprezu, možda se pitate o nečemu tokom ovog dokumenta: svaki put kada sam predstavio ilustraciju HTML koda, ja sam uključio oznake u njemu, tako da možete da ih vidite. Ali, ako oznake postoje, kako pretraživač "zna " da samo ja citiram oznake za vas da ih vidite nego da koristim oznake za organizovanje svog teksta? Kako zaustaviti pretraživač pri uzimanju <table> oznake i kreiranje tabele umesto da samo prikaže samu oznaku za vas da vidite? Odgovor se može naći ako ste videli izvor ovog dokumenta. Gde god je potrebno da predstavlim tag pre nego što ga idkoristim, ja sam izbegavao znakove otvaranja < i zatvaranja > Umesto toga, ja sam koristio posebno rešenje da prouzrokuje brower da prikaže te znakove na prozoru bez bukvalnog unošenja karaktere u moj kod. Za karakter otvaranje < ja koristim kombinaciju znakova &lt;. Ono što vidite kada napišem je < karakter, ali ono što pretraživač "vidi" je četiri karaktera koji čine rešenje. Ovaj tip alijasa za karakterese zove acharacter entiteta, i HTML definiše entitet karaktera za svaki znak i simbol koji se može prikazati u datom kodiranom sistemu. Svi entiteti karaktera počinju sa ampersand ( &) i završavaju sa zarezom (;).

Ali kako sam predstavljaju kombinaciju &lt; i &gt; na ekranu za vas, bez njihovog automatskog prevodjenja u odgovarajuće pojedinačne karaktere < i >? Kao što se dešava, entitet za ampersand se piše &amp;. Tako možete to da koristite da bi izazvati ampersand pojavu bez pisanja ampersand u vašem kodu, i to sprečava vašu sekvencu karaktera od toga da je tumači kao karakter subjekta.

Entiteti karaktera su takođe korisni za "specijalne karaktere" koji nisu uključeni u standardnom američko - engleskim tastaturama. Na primer, kombinacija á se koristi za naglašeni a karakter á. Isto tako, &ouml; daje ö, &ecirc; daje ê, and &ccedil; daje ç. Bilo koja standardna referenca na HTML - u će imati punu listu korisnih znakova entiteta. Pogledajte ispod za referentni link. Možda ćete smatrati daa je ova karakteristika za HTML toliko kul da nikada neće želeti da se vratite običnoj obradi reči ponovo.

Do sada sam samo spomenuo znakove entiteta koji imaju lepe, Mnemonic forme. Nemaju svi entiteti karaktera ove mnemotehnika, ali svi oni nemaju numeričke forme. U ovom dokumentu, ja koristim entitet — za dugo crtice — ovako. To je jako zgodno pri prepisivanju poezije Emily Dickinson.

Nazad na sadržaj.

Pisanje HTML

Pa kako treba da pišete HTML? Koje alatke bi trebalo da koristite? Da bi vaš HTML bio ispravan, morate da koristite neki metod koji vam omogućava da sačuvate datoteku kao čisti ASCII teksta. Najbolje je da koristite nešto poput Notepad na Windows mašini ili jednostavan tekst ili BBEdit na Mac računaru. Linux i FreeBSD mašine imaju mnogo dobrih tekst editora, kao što su vi, emacs, ili kate. Ako koristite program za obradu teksta, kao što je Microsoft Word, Corel WordPerfect ili Claris Works, vi rizikujete da u program ubacite sve vrste nevidljivog, nestandardnog, vlasničkog koda u tekst kako bi podržao vaš sistem formatiranja. Jednostavnom tekstualnom editoru, možete verovati da će tekst uvek biti šta god je to što ste uneli. Na Windows mašinama, možete naći Notepad pod Programs → Accessories. Ako vam ne smeta potrošnja od oko $ 28, možete dobiti super - duper - souped - up tekst editor za Windows mašine nazvan TextPad, dostupan na http://www.textpad.com. Ovo je sjajna alatka za razvoj HTML, i ja sam je koristio za pisanje ovog teksta.

Popularne programi za obrada teksta, kao što su Corel WordPerfect i Microsoft Word, će vam ponuditi opciju da sačuvate datoteku "kao HTML". To je gotovo uvek greška. Pretpostavimo da ste napisali nešto u italic-su. Kako da vaš procesor može znati , da li to znači podvčeno ili naslov knjige ili strani izraz ili tehnički termin? Staviće ih sve na isti tip elementa, kao što je onaj i element. Sada, pretpostavimo da želite nekoga da izgradi web prigram za vas koji pretražuje sve vaše stranice za knjigu naslova. To je sasvim prihvatljivo - to može biti pretraživač fakulteta publikacija ili za knjige razgovaranim na stranicama na sajtu. Pretraživač će se pokazati reči i fraze koje ste želeli samo da naglasite, pomešane sa naslovima. Isto važi i za headere i mnoge druge elemenate. Vi ne treba da koristite obradu teksta da napiše HTML jer HTML je daleko više nego što artikulisan od obrade teksta. Obrada reči je raspoređivanje reči da imaju određeni pogled na odštampanoj stranici. HTML proširuje pisanu interpunkciju da napravi strukturu dokumenta eksplicitnom. Bolje vam je da pišete dokumenta u HTML , a zatim da je vaš procesor za reči pretvoriti reči obrađenog teksta za štampu.

Mnogi komercijalni alati i softverski paketi su dostupni kojima bi trebalo da bude "lako" stvoriti HTML stranice. Ovo uključuje Microsoft FrontPage, Adobe GoLive,, Macromedia Dreamweaver i Netscape Navigator. Svi ovi proizvodi daju ozbiljne probleme, najgore i najzloglasniji je FrontPage. Oni imaju tendenciju da se uvedu u vašj kod različite nestandardne, vlasničke stavke koje čine nemogućim da ljudi ne koriste te proizvode za održavanje dokumenata. Takođe, oni imaju tendenciju da zaostaju iza vremena, a ljudi često imaju starije verzije ovih alata, pa kod koji oni proizvode je retko,po sadašnjim XHTML standardima. Ukoliko koristite bilo koji od ovih alata, važno da prvo razumete HTML. Na primer, ako ne poznajete HTML, možete misliti o headeru kao o većem i težem tipu nego kao o posebnom elementu. Ne možete tražiti opcije menija da biste kreirali header, a završiti sa stvaranjem velikog, težeg tipa. Vaš softver nije više u stanju da čita misli nego što je procesor reči. Pretpostavimo da vam, kasnije, padne na pamet da stavite veliki header preko cele stranice i podredite sve aktuelne headere na njega? Pošto prethodni headeri nisu označeni kao headeri, ne možete globalni pretragu i zamenu okrenuti <h1> u <h2> celom dokumentu. Umesto toga, moraćete da pročešljate kroz dokumenta red po red, u potrazi za velikim tipom! Ili pretpostavimo želite da promenite opšti stil i da svi headeri budu plavi. Kako se to može uraditi se headeri ne nalaze u nalaze u odgovarajućem h1 ili drugim elementima? HTML nije veoma komplikovan ni težak, i uz malo prakse, možda će vam biti lakše da ga pišete ručno nego da naučite sve menije, trikove i gore jednog proizvoda van ambalaže.. Da ne pominjemo da je samostalno pisanje HTML mnogo jeftinije!

Kako da sačuvate i pregledate dokument je pokriveno na početka ovog tutorijala, ali hajde da se podsetimo. Kada ste napisali neki HTML, sačuvajte datoteku pod valjanim imenom, ali sa ekstenzijom fajla .html. The name must contain only characters, numerals, the underscore, or the hyphen. HTTP, the rules for handling HTML Ime mora da sadrži samo znakove, cifre, donju ili gornju crtu. HTTP, pravila za rukovanje HTML fajlova na Internetu i u pretraživačima, je strožiji od mnogih operativnih sistema, tako da ne mogu imati nikakve razmake, navodnike, upitnike, uzvičnike, itd u svom imenu datoteke. (Zapravo, razlog za to je da su svi ti simboli rezervisani za posebne namene i funkcije. Znak pitanja, na primer, dolazi između URL pravilno i stringa ulaznih podataka koji dolaze iz nekog oblika online mreže.) Fajl ekstenzija .html obaveštava pretraživač da fajl treba da bude pre pretražen nego downloadovan i sačuvan i obaveštava operativni sistem da sa fajlom treba da se bavi pretraživač.

Tada bi trebalo da vidite rezultate svojih kodiranja otvaranjem fajla u vašem pretraživaču. Morate prvo da otvorite prrtraživač, a zatim, u okviru njega, otvorite lokalni fajl (obično preko File → Open menu selection). Ako dobijete dijalog koji vas pita da napiše adresu u prazno, pogledaj za "Brose" (Windows) , ili "Locate" dugme na dijalogu. To će otvoriti neku vrstu fajlova u listi i možete ići u potrazi za svojim dokumentom. Alternativno, možete da pronađete fajl u listi fajlova kao što je Windovs Explorer ili My Documents listi na Windows mašini jednostavno duplim klikom na listu.

To je generalno najbolje uraditi čim imate minimalnu napisanu količinu HTML koje se može vidjeti u pretraživaču - odnosno, čim imate svoje deklaracije na vrhu, otvaranje i zatvaranje oznake vašeg html root elementa, neki head element, a telo sa bar malo teksta u njemu. Neka vaš editor teksta radi u isto vreme. Nakon unošenja novog HTML, možete da pređete na prozor i videti rezultate. Da biste ažurirali prozor pretraživača svaki put kada ste sačuvali reviziju dokumenta, izaberite View → Refresh menu. Tako se vaš rad odvija u ciklusu: pisanje / uređuivanje, sačuvati, promena prozora, osvežiti, vidieti rezultate, promena prozora, pisati / urediti, čuvati, zameniti prozore, osvežiti, pogledati rezultate, zameniti prozore... Ovo se zove razvojni ciklus. Da bi razvojni ciklus bio lakši za vas, obično možete koristiti prečice na tastaturi za prelaženje između prozora. Na Windows mašini se prebacujete između prozora aplikacije držeći Alt taster na dole i pritiskom na taster Tab. Ovaj isti kombinacija radi na Linux mašinama sa KDE. Mnogi pretraživači na mnogim operativnim sistemima vam dozvoljavaju da držite Alt ili Command taster pritisnut dok pritiskom na taster R obavljate “refresh” ili "reload" stranice.

Nazad na sadržaj

Načinite ga validnim!!

Kad ste gotovi sa vašim HTML dokumentom i izgleda kao da je cela struktura dobro definisana po onome što se prikazuje na pretraživaču, pokušajte da dokument napravite validnim. World Wide Web Consortium, takodje znana kao W3C, pruža besplatnu upotrebu svojih softvera za validaciju, koji proveravaju vaš HTML u potrazi za greškama ili problemima i govore vam gde su oni nastali po broju reda i poziciji karaktera u redu. W3C HTML Validator možete naći na ovoj adresi: http://validator.w3.org. Pratite instrukcije da biste proverili fajl učitavajuči ga u Validator. Nemojte se nervirati ako imate neke greške (i ja sam ih imao u ovom dokumentu). Možete ih ispraviti i pokušavai iznova sve dok vam Validator ne čestita i ponudi privilegiju ubacivanja malog decalu u vaš tekst u šou koji je validan sa HTML.

Pošto je cela poenta pisanja HTML da ga mašine čitaju i pretraže, svaki detalj se računa. Mašine su jako glupe i ne znaju kako da se ponašaju sa pogrešnim spelovanjem. Više opraštaju od profesora engleskog. Zato svaki deo source koda mora biti tačan. Validator vam olakšava da nadjete greške i da ih ispravite jer vam automatski govori gde su u vašem kodu i čak predlaže vam šrta bi moglo da im fali. Ovo je mnogo bolje od gledanja u prazan ekran pitajući se gde je greška koja je naterala vaš tekst da nestane.

Nazad na sadržaj

"Kako uslužiti svet ?"

Kada je vaš dokument gotov i njegov HTML dokazan kao validan, možda je vreme da postane dostupan javnosti. Da biste to uradili treba da ga stavite na mestu gde Web server dobiti pristup da ga servira kompjuterima koji ga traže. Izraz server, na komjuteraškom, se odnosi na bilo koji program koji šalje podatke (elektronske signale) bilo kom drugom programu — zvanom client — kada client zahteva podatke iz server. U ovom kontekstu World Wide Web, program koji igra ulogu client je vaš pretraživač. Kada — je pozvan client — i da pruži mu podatke (jedinice i nule) kao odgovor na njegov zahtev. U Web kontekstu, klijent je pretraživač. Kada usmerite vaš pretraživač na Web adresu, vaš pretraživač — Web client — šalje zahtev preko žica i konekcija interneta do Web server. Server odgovara slanjem zahtevanog HTML document nazad do client-a, tj. vašeg pretraživača. Ovo niste morali do sada da radite da biste pregledali vaš dokument, jer ste do sada bili jedina osoba koja je to radila — još nije bio objavljen preko interneta za javnost.

Tipično, Web server radi na nekim kompjuterima — host — koji su konentovani sa internetom u svako vreme i koji takodje sadrže HTML fajlove ne njihovom hard drajvu. Normalno ovaj host je negde daleko, povezan za vaš kompjuter preko interneta a ne preko nekog kancelarijskog Ethernet kabla, tako da se server kompjutera naziva remote host. (Ljudi često zovu remote host serverom po metonymy.) Tako da zahtev vašek pretraživača (tj. klijenta) ide do remote hosta, i server koji radi na remote hostu šalje sredstva nazad — HTML dokumenta — ako su dostupna. Cela automatizovana interakcija je je regulisana po standardnim pravilima zvanim HTTP, Hypertext Transfer Protocol.

Skoro svi igrači u drami HTTP transakcije imaju razna tehnička imena. Web adresa se takodje zove URL, ili Uniform Resource Locator, takodje je znana kao URI, ili Uniform Resource Identifier. Vaš pretraživač se takodje zove user agent, pošto radi robotski za vas, korisnika. Ime koje možda najviše podseća je jedno od aliasa za Web server: HTTP daemon. Koliko ja znam Internet ise još uvek zvanično ne zove "dark Satanic mill."

Da bi Web server poslužio vašu stranicu, mora imati pristup njoj i to uglavnom znači da ga morate otpremiti od vaše lokalne mašine do remote hosta, i sačuvati ga u nekom direktorijumu na remote hostu specijalno odredjenom za server da pogleda u njega kada dodju zahtevi. Da biste to uradili, pošalite vaš HTML fajl do remote hosta koristeći softver koji prati File Transfer Protocol, ili FTP. Po metonymy, ime protokola se pretvatra u reč: you "FTP vaš fajl do servera." Da biste FTP vaš fajl, treba vam dozvola da sačuvate fajlove za vaš remote host Web direktorijum, i dobijate korisničko ime i šifru. Zatim možete koristiti odgovarajućo komercijalni FTP client — da, druga vrsta klijenta — ne pretraživač već program koji zahteva da se remote host konektuje za vaš lokalni kompjuter i dozvoljava vam da šaljete fajlove napred i nazad izmedju dva kompjutera).Dva popularna FTP klijenta su WS_FTP i CuteFTP (koji vam mogu izgledat jako slatki). Ako nemate dozvolu da montirate HTML fajlove u remote hostu, možda imate webmaster u kancelariji koji može to uraditi za vas.

Osim stvaranja novih dokumenata, druga upotreba HTMLa je struktuisanje porcija dokumenata koje možete uneti u polja sa formama za specijalne namere. Npr. kada stvarate stavku na Blackboard course websajtu, imate opciju ubacivanja tksta kao HTML. Blackboard pruža spoljni HTML code, uključujući html elemente otvaranja i zatvaranja tabova, cele glave, ili delova tela. Blackboard ubacuje vaš novi kod u telo elementa. U tom slučaju bi trebali da napišete vaš HTML lokalno sa svim potrebnim okvirima — deklaracija tipa dokumenta, elementi glave i tela, da biste ih validirali. Zatim označite kod u telu, kopirajte i ubacite (paste)ga u Blackboard formu polja, vodeći računa da markirate kutiju za HTML.

Nazad na sadržaj.

Sredstva za dalje informisanje

Nazad na sadržaj

Zahvalnost

Želim da iskažem veliku zahvalnost učesnicima na Usenet newsgroups comp.infosystems.www.authoring.html i comp.infosystems.www.authoring.stylesheets na njihovim komentarima,sugestijama, sugestijama i ispravkama na ovom dokumentu dok se razvijao (i dalje se razvija). Dali su mi jako veliko iskustvo prilikom vršenja pregleda i bili su mi dobar izvor tehničkih informacija. Uvek se sve mora proveriti sve što se nalazi napisano protiv oficijalnih dokumenata proglašeno od strane World Wide Web Consortium.

Nazad na sadržaj.

Prose Index stranca


Published (Last edited): 12-03-2013 , source: http://amittai.com/prose/tutorial.html