|
|
|
Uvod u HTML HTML (Hypertext Markup Language) je jezik pomoću kojeg se stvaraju Internet stranice. Ovde ću izostaviti podatke o istorijatu i verzijama HTML-a, već ću se koncentrisati na praktičnu upotrebu ovog jezika.
• Par uvodnih napomena: da bi videli izvorni kod neke HTML, odn. web strane (kao što je uostalom i ova), možete uraditi desni klik na stranicu (ne na sliku) i iz kontekstnog menija odaberite View Source ili idite na meni i kliknite na Menu pa zatim selektujte Source, ili to isto preko tastature: ALT, zatim slovo V na tastaturi i na kraju C (ima još nekoliko načina, ali je ovo za sada dovoljno).
Dobar način za učenje HTML jeste da pogledate izvorni kod neke stranice koja Vam se dopada i da vidite kako je autor stranice to uradio.
Sve HTML stranice i slike (kao i eksterne skript ili CSS datoteke) treba da se nalaze u istom folderu radi lakšeg linkovanja, odn. povezivanja.
Za neke reči na ovoj stranici, koje možda nisu svima jasne, pojaviće se kratko objašnjenje ako stavite miša na tu reč i sačekate malo (reči kao što su onload, onunload, Page-Enter i sl).
• Da bi krenuli sa izradom HTML dokumenta otvorite Notepad i unesite: <html><head>
<title>Ovo je naslov</title></head>
<body bgcolor="red">
Ovde unesite neki tekst
</body></html>
Sada idite na File > Save As..., u polju Save as filetype izaberite All files, a u polju iznad unesite neko ime za fajl, stavite tačku i dodajte htm ili html (npr: "nekoime.html" - bez navodnika ).
Svaki HTML dokument mora da ima tagove koji su navedeni u primeru (osim ako je u pitanju dokument sa okvirima - tada se umesto body koristi frameset). U prethodnom primeru imate HTML dokument sa crvenom pozadinom (to je odredjeno atributom bgcolor) i tekstom koji ste uneli. Da bi promenili boju pozadine treba promeniti vrednost atributa bgcolor (naziv boje na engleskom - npr. green, azure, magenta itd. ili u heksadecimalnom obliku - "#000000" za crnu, "#FFFFFF" za belu, "#FF0000" za crvenu itd.). Brauzer će koristiti svoju standardnu boju ako izostavite atribut bgcolor u body tagu (a u njemu osim navedenog atributa možete koristiti još neke atribute: text, link, alink, vlink, background, onload, onunload itd.
Za promenu boje ili veličine teksta na stranici koristi se <font> tag (mada se preporučuje korišćenje kaskadnih stilova (CSS) umesto ovog taga). Primer: <body bgcolor="red"><font color="white" size="4">Ovde ide sadržaj...</font>. Veličina fonta ide od 1 do 7 (standardna veličina je 3), a za boju fonta važi isto što i kod boja za pozadinu.
Zaglavlje dokumenta : U <head> elementu se može naći 6 aktivnih elemenata: <title>, <base>, <meta>, <script>, <link> i <style>. Dva od ovih elemenata, <link> i <style>, su vezani sa datotekama sa stilom (CSS), dok je <script> vezan za skriptove. Zato samo ukratko o ostala tri. <title> se koristi da bi se u naslovnoj liniji pojavio naslov stranice, a <base> uspostavlja na Internetu lokaciju stranice koju ste napravili. <meta> element je, izmedju ostalog, koristan za mašine za pretraživanje Interneta, kako bi našle neki sajt i onda ga indeksirali. Dva primarna atributa ovog elementa su name (ime) i content (sadržaj). Primer:
<meta name="description" content="Kratak uvod u HTML">
<meta name="keywords" content="html, hypertext markup language, tagovi, zaglavlje, meta">
Keywords i Description su dve name vrednosti koje bi trebalo koristiti da bi pomogli pretraživačima da nadju i indeksiraju Vaše stranice.
U Internet Explorer-u može se postići zanimljiv efekat korišćenjem Page-Enter i Page-Exit vrednosti za http-equiv u META elementu (primer ovog efekta vidite kad dolazite na ovu stranicu, odlazite sa nje ili kliknete "Refresh"). Za taj efekat je potrebno:
<meta http-equiv="Page-Enter" content="RevealTrans(Duration=3,Transition=2)">
<meta http-equiv="Page-Exit" content="RevealTrans(Duration=3,Transition=21)">
Dužina promene se kontroliše sa duration, a transition odredjuje tip prelaznog efekta. Ako imate IE poigrajte se sa ovim vrednostima (vrednosti za transition idu od 0 do 23).
Telo dokumenta : Svi ostali elementi HTML-a idu u ovaj deo dokumenta, a svakako najvažniji element ovde i uopšte celog HTML-a i njegova glavna karakteristika jeste hiperveza (link). Zato najpre o tome. Link se pravi pomoću a taga uz korišćenje atributa href u koji se stavlja naziv stranice prema kojoj se uspostavlja veza. Primer: <a href="nekastranica.html">Link</a>. Na samoj stranici se vidi samo reč Link i kad se postavi miš na link pojavljuje se kažiprst kao kursor, a standardno su svi linkovi podvučeni i imaju različitu boju u odnosu na ostali tekst (mada se CSS-om podvlačenje ispod linka može ukloniti). Tag za zatvaranje (</a>) je obavezan i u samom imenu veze (nekoime.html) ne sme postojati razmak. Ako se uspostavlja veza sa dokumentom unutar samog sajta koristi se relativni URL (odnosno samo naziv dokumenta), a ako se veza uspostavlja sa dokumentom koji se nalazi izvan sajta onda treba navesti absolutni URL, odnosno kompletnu adresu (na primer, <a href="https://dinkosta.tripod.com/shiper.html">Uvod u HTML</a>).
Za stavljanje slike na stranicu se koristi tag img sa atributom src. Primer: <img src="nekaslika.jpg">. Ovaj element nema tag za zatvaranje, a ostali mogući atributi unutar taga su width, height, border, align, alt itd.
Za pozicioniranje elemenata u HTML-u koriste tabele (table), elementi DIV i P uz korišćenje atributa align. Moguće vrednosti za ovaj atribut su left, right i center. Primer: <DIV align="center">Ovde ide sadržaj ovog elementa. Tu se mogu uključivati svi ostali elementi: tekst, slike, linkovi itd. </DIV>.
Primer jednostavne tabele:
<TABLE align="left" bgColor="azure" border="0">
<TR><TD>
Sadržaj se stavlja između TD tagova
</TD></TR></TABLE>
Za prelazak u novi red se koristi tag <BR>: to je prazan tag, tj. ne traži tag za zatvaranje i on nema nikakve atribute. I tag P otvara novi red, ali s tom razlikom da on pravi veći razmak i može da sadrži atribut align (tu se mogu upotrebiti i zajednički atributi za rad sa CSS-om ili skriptovima - id, class, style, title, onmouseover, onclick itd.). On ne zahteva tag za zatvaranje, ali se ipak preporučuje.
Postoje znaci koji ne mogu da se unesu sa tastature te se za to koriste specijalni znaci (entiteti). Neki znaci imaju i HTML naziv i kodni broj: npr, za znak 'copyright' © HTML naziv je © a kodni broj ©, ali neki imaju samo kodni broj. Ovde navodim samo decimalne vrednosti za srpska slova: Ć za Ć, ć za ć, Č za Č, č za č, Đ za Đ, đ za đ, ž za ž, Ž za Ž, Š za Š i š za š. Da bi se na HTML stranici pojavila, npr., reč češće u Notepadu treba napisati češće. Treba reći da srpska slova nisu pouzdano podržana u HTML-u, ali je ovo rešenje svakako pouzdanije nego da kucate srpska slova sa tastature (ako imate tastaturu za srpski jezik), jer nemaju svi oni koji treba da vide Vaše stranice srpsku tastaturu.
Primer jednostavnog HTML dokumenta:
<html><head><title>Naslov</title>
<meta name="description" content="Osnove HTML-a">
<meta name="keywords" content="html,hipertekst,tag">
</head>
<body bgColor="azure">
<h2 align="center">Uvod u HTML</h2>
Ovo je prvi red.<br>Ovo je drugi red.
Naglašena <b>reč</b>
<p align="center">Ovo je novi pasus.
<div align=left>
Sledi slika <img src="imeslike.jpg" width=50 height=60>
</div>
<TABLE align="left" width="50%" bgColor="yellow" border="2">
<TR><TD>
Stavite ovde tekst
</TD></TR></TABLE>
<TABLE align="right" width="40%" bgColor="beige" border="0">
<caption><font color="blue">Naslov tabele</font></caption>
<TR><TD>
Stavite i ovde nekoliko redova teksta.
</TD></TR></TABLE>
</body></html>
Ukucajte ili prekopirajte ovo u Notepad, snimite kao test.html i otvorite da ga pogledate. Nađite odgovarajuću sliku, otvorite izvorni kod i ubacite u img tag umesto imeslike.jpg naziv Vaše slike i prilagodite dimenzije. Zatvorite Notepad, na pitanje da li želite da snimite promene odgovorite sa 'Yes' i pritisnite F5 ili Refresh. Sada možete da počnete da eksperimentišete sa vrednostima i tagovima u dokumentu: menjajte dimenzije, dodajte nove tagove, promenite boje itd. Sa malo vežbe brzo ćete savladati HTML.
| |
| |