Škola Web programiranja: HTML – 2.nastavak

NASLOVJelena4

Linkovi

Na red su došli i linkovi.  Sintaksa linka je <a href=“adresa„>Tekst linka</a>

  • Za početak, napravimo link ka Google pretraživaču. U primjeru ćemo koristiti strukturu HTML fajla iz prošlog broja, a nadalje ćemo kao i ranije pokazivati promjene samo u BODY dijelu.
<HTML>
 <HEAD>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <TITLE>Moja prva web strana</TITLE>
 </HEAD>
 <BODY style="background-color:#cc66cc">
   <a href="http://www.google.com">Google</a>
 </BODY>
</HTML>

 

Untitled

Tag koji se koristi za linkove je <a> i on ima obavezni krajnji tag </a>. Atribut unutar koga ćemo pisati web adresu sajta na koji želimo link da vodi je href. Adresu sajta uvijek pišemo sa obaveznim http:// ili https:// dijelom. Dalje, klikom na tekst koji smo upisali između tagova, otvoriće nam se Google sajt, ali u istom tab-u u kome nam je naš prvi sajt bio. Ako želimo da se otvori u drugom tab-u dodaćemo atribut target=”_blank”, kao u donjem kodu:

 <BODY style="background-color:#cc66cc">
   <a href="http://www.google.com" target="_blank">Google</a>
 </BODY>

 

 

  • Link može voditi i na neku web stranicu našeg web sajta (a ne samo na neke druge sajtove). Tada bismo u href atributu napisali samo ime te stranice, npr. pocetna.html, koja bi se nalazila u istom folderu kao i ova index.html. Ako se nalazi u nekom drugom folderu, treba napisati putanju do nje. Bitno je da samo ispred imena tog fajla tad ne dodajemo ono prethodno postavljano http:// ili https:// . Ovo adresiranje ka fajlu, recimo, pocetna.html nazivamo relativnim. To bi izgledalo ovako:
 <BODY style="background-color:#cc66cc">
   <a href="pocetna.html">Google</a>
 </BODY>

 

  • Link može pokazivati i na neki dio unutar naše web stranice. Neophodno je taj dio na koji želimo pokazivati prethodno označiti sa anchor-om (sidrom). Pogledajte primjer koji će vam to sve ilustrovati.
<BODY style="background-color:#ffffff">
   <b><a name="vrh">JADRANSKO MORE</a></b><br />
   <a href="#1">1. Ime i etimologija</a><br />
   <a href="#2">2. Zemljopis</a><br />
   <a href="#3">3. Zemlje sa izlazom na jadransko more</a><br /><br />
   <b><a name="1">Ime i etimologija</a></b><br />
   <p>Ime Jadranskog mora postoji još od antičkih vremena. Na latinskom je
glasilo Mare Hadriaticum.
Ime vjerojatno potiče od grada Adrije ili Hadrije, što je bio naziv samo za sjeverni dio zaliva.
Poslije je počelo označavati cijeli
zaliv.Balkanski Sloveni su prvobitno zaliv nazivali
Sinje more.</p><a href="#vrh">vrh</a><br /><br />
   <b><a name="2">Zemljopis</a></b><br />
   <p>Jadransko more je pretežno zatvoreno more povezano s Jonskim morem i
preko njega Sredozemnim
morem. Granica Jadranskog i Jonskog mora su Otrantska vrata široka 75 km između Italije i Albanije.<br />
Jadransko more je pretežno plitko. Sjeverno od Pule mu dubina ne prelazi
 50 m, a sjeverno od Zadra 100 m (taj prostor je za vrijeme ledenog doba bio na kopnu). U južnom dijelu
Jadranskog mora se nalazi udubina u kojoj dubine
naglo padaju (najveća dubina je 1233 m).<br />
Jadran je relativno toplo more - temperatura mu ne pada ispod 11°C. Prozirnost
mu je također velika. Važno svojstvo morske vode je i slanost ili salinitet kojom se iskazuje ukupna
količina svih otopljenih soli u 1000g
morske vode.</p><a href="#vrh">vrh</a><br /><br />
   <b><a name="3">Zemlje s izlazom na Jadransko more</a></b><br />
   <p>Crna Gora, Bosna i Hercegovina, Hrvatska, Slovenija,
Italija, Albanija.</p><a href="#vrh">vrh</a>
 </BODY>

 

Stranica će izgledati ovako:

Untitled

 

 

Smanjite, kao i ja, prozor, pa klikajte na ove linkove da vam bude uočljiviji prelazak sa jednog dijela na drugi dio stranice. U kodu možete vidjeti kako smo ovo izveli. Naime, prvo smo označili sa tagovima i anchor-ima naslove pojedinih poglavlja (označava se na način <a name=”ime_anchora”>tekst do kog zelimo da link pokaže</a>), dali smo imena anchora 1, 2 i 3. Potom smo u sadržaju napravili linkove ka njima na način: <a href=”#ime_anchora”></a>.

Na identičan način smo naslov “Jadransko more” označili sa anchor-om pod imenom “vrh”, a potom na kraju svakog pasosa na riječi “vrh” postavili link ka tom početku strane.

  • E-mail link  ima sintaksu <a href=”mailto:e-mail adresa”>Tekst</a>

Npr.

 <BODY style="background-color:#ffffff">
   <p><b>Kontakt:</b><br />
         Ministarstvo prosvjete i nauke<br />
         Odjeljenje za ICT<br />
         E-mail: <a href="mailto:ict@edu.me">ict@edu.me</a><br />
   </p>
 </BODY>

 

Untitled

Klikom na e-mail adresu automatski vam se otvara adresirana nova, prazna poruka u klijentskom programu za slanje i prijem pošte na vašem računaru (Outlook Express, Thunderbird, IncrediMail … ).

Liste

 

Razlikujemo tri vrste lista: uređene (numerisane), neuređene (sa bullets-ima) i definisane liste (lista pojmova i njihovih definicija).

Sintakse su jednostavne i ilustrovaćemo ih sljedećim primjerima:

  • uređena
<BODY>
   <ol>
      <li>kiša</li>
      <li>grad</li>
      <li>snijeg</li>
   </ol>
 </BODY>

 

Untitled
<ol> je tag za uređenu listu, a <li> definiše stavke liste.

 

  • neuređena
<BODY>
   <ul>
      <li>kiša</li>
      <li>grad</li>
      <li>snijeg</li>
   </ul>
 </BODY>

 

Untitled

<ul> je tag za neuređenu listu, a <li> definiše stavke liste.

  • definisana
 <BODY>
   <dl>
      <dt>kiša</dt>
      <dd>kiša je padavina tekuće vode u obliku kapljica<dd>
      <dt>grad</dt>
      <dd>grad je padavina u obliku ledenih oblutaka</dd>
      <dt>snijeg</dt>
      <dd>Snijeg je kristal smrznute vode</dd>
   </dl>
 </BODY>

Untitled

<dl> je tag definisane liste, <dt> definiše stavku liste, a <dd> opisuje tu stavku liste.

Slike

 

U HTML fajl sliku unosimo na način <img src=”putanja do slike” alt=”alternativno ime slike ako se slika iz nekog razloga ne prikaže”/>.

<img> je tag, a njega u ovom slučaju zatvaramo sa kosom crtom prije zatvorene zagrade. Tekst upisan u atributu alt nam se prikazuje dok god se slika ne učita, a kad se slika prikaže, taj tekst nestaje. Zgodno je, radi bolje indeksacije internet pretraživača, uvijek imati alt-ove.

Visinu i širinu slike i stil, boju i širinu okvira definišemo pomoću opcija height, width, border-style, border-color i border-width u style atributu. Ostale opcije za uređivanje izgleda slike posebno ćemo obrađivati u nastavcima posvećenim CSS-u.

Primjer 1:

 <BODY>
   <b>Boje</b><br />
   <img src="fotografija.jpg" alt="boje"/>
 </BODY>

 

Untitled

Primjer 2:

<BODY>
   <b>Boje</b><br />
   <img src="fotografija.jpg" alt="boje"
style="height:100px; width:80px;
border-color:#00ffff; border-width:3px;
border-style:solid"/>
</BODY>
Untitled

Slika kao link

 

Osim teksta, vrlo je lijepo, a i jednostavno, koristiti sliku kao link.

 <BODY>
   <p>Slika kao link:
    <a href="http://en.wikipedia.org/wiki/List_of_colors" target="_blank">
      <img src="fotografija.jpg" alt="Lista boja" width="50" height="50" />
    </a>
   </p>
 </BODY>
Untitled

 

Tabele

 

Tabele se pišu između tagova <table> i </table>. Redovi tabele se označavaju tagovima <tr> i </tr>, a ćelije unutar redova tagovima <td> i </td>. Tabeli, redovima i ćelijama mogu se mijenjati visina, širina, boje, …. Ćelije mogu sadržati tekst, slike, linkove i sve ostale pomenute elemente.

Primjer:

 <BODY>
   <table>
  <tr>
   <td>A11</td>
   <td>A12</td>
   <td>A13</td>
   <td>A14</td>
  </tr>
  <tr>
   <td>A21</td>
   <td>A22</td>
   <td>A23</td>
   <td>A24</td>
  </tr>
  <tr>
   <td>A31</td>
   <td>A32</td>
   <td>A33</td>
   <td>A34</td>
  </tr>
</table>
 </BODY>

image

Ako želimo tabelu sa ivicama, unutar taga table dodaćemo atribut  border=”1” (ili već koliko želite da bude debljina ivice) i rezultat je sljedeći:

image

Zaglavlje tabele možemo istaći tako što ćemo ćelije pisati unutar <th> tagova:

<BODY>
   <h4>Naslovi:</h4>
   <table border="1">
    <tr>
      <th>Ime</th>
      <th>Telefon</th>
      <th>E-mail</th>
    </tr>
    <tr>
      <td>Marko Marković</td>
      <td>067 777 777</td>
      <td>mm@live.com</td>
    </tr>
   </table>

   <h4>Vertikalni naslovi:</h4>
   <table border="1">
    <tr>
      <th>Ime:</th>
      <td>Marko Marković</td>
    </tr>
    <tr>
      <th>Telefon:</th>
      <td>067 777 777</td>
    </tr>
    <tr>
      <th>E-mail:</th>
      <td>mm@live.com</td>
    </tr>
   </table>
</BODY>

image

Željeni izgled neke tabele se ipak najbolje postiže uz korišćenje CSS-a. Stoga, o tome više u nekom narednom broju.

Forme

 

Html forme se koriste za prenos podataka na server.

Forme mogu sadržati elemente poput tekstualnih polja, radio button-a, checkbox-ova, dugmadi i ostalih (select liste, textarea-e, labele …) .

<form> i </form> tagovi služe za pisanje formi. Forma bez ijednog elementa unutar sebe nije vidljiva.

Tekstualna polja

<input type=“text“ /> definiše tekstualno polje.

<BODY>
   <form>
     Ime: <input type="text" name="ime" /><br />
     Prezime: <input type="text" name="prezime" />
   </form>
</BODY>

 

image

Polje za lozinku

<input type=“password“ /> definiše polje za lozinku, koje će prilikom kucanja teksta zamaskirati sam tekst crnim kružićima ili kvadratićima.

 <BODY>
   <form>
     Stara lozinka: <input type="password" name="p1" /> <br />
     Nova lozinka: <input type="password" name="p2" /> <br />
     Potvrdi novu lozinku: <input type="password" name="p3" />
   </form>

image

Textarea

Za unos dužeg teksta, koristimo polja koja definišemo sa tagom <textarea>. Unutar ovog taga možemo definisati i broj linija teksta (sa atributom rows), kao broj karaktera u jednoj liniji (atributom cols).

<BODY>
   <form>
       <h3>Komentar:</h3><br />
       <textarea rows="5" cols="20">
       </textarea>
   </form>
 </BODY>
image

Radio dugme

<input type=“radio“ />definiše radio dugme. Radio dugmad koristimo kad od više nekih opcija želimo da odaberemo SAMO JEDNU!

 <BODY>
  <form>
   Pol: <br />
   <input type="radio" name="pol" value="M" />M<br />
   <input type="radio" name="pol" value="Z" />Ž
  </form>
 </BODY>

 

image

Checkbox-ovi

<input type=“checkbox“ /> definiše checkbox-ove. Oni su slični radio dugmićima, s tim da se može čekirati jedna, ali i više opcija od ponuđenih.

<BODY>
  <form>
    <input type="checkbox" name="v" value="biciklo" /> Imam biciklo<br />
    <input type="checkbox" name="v" value="auto" /> Imam auto<br />
    <input type="checkbox" name="v" value="nista" /> Ni jedno ni drugo<br />
  </form>
 </BODY>

 

image

Combo Box-ovi

<select> definiše combo box-ove (padajuće liste opcija).

<BODY>
  <form>
    <select name="predmeti">
    <option value="m">Matematika</option>
    <option value="e">Engleski jezik</option>
    <option value="b">Biologija</option>
    <option value="f">Filozofija</option>
    </select>
  </form>
 </BODY>

image

 

 

Ukoliko želimo da neka od ovih opcija bude u startu selektovana (po default-u, ali se i dalje može promjeniti), iako nije prva na listi, to ćemo učiniti ubacivanjem atributa selected=“selected“ u odgovarajuću opciju.

<BODY>
  <form>
    <select name="predmeti">
    <option value="m">Matematika</option>
    <option value="e">Engleski jezik</option>
    <option value="b">Biologija</option>
    <option value="f" selected="selected">Filozofija</option>
    </select>
  </form>
 </BODY>

image

Dugme za potvrđivanje (Submit button)

<input type=“submit“ /> definiše submit dugme.

Klikom na submit dugme šalju se podaci iz forme na server. Stranicu na koju šaljemo podatke upisujemo u atribut action.

<BODY>
   <form name="input" action="druga_strana.asp" method="get">
        Korisničko ime:<br /><input type="text" name="k" /><br />
        Lozinka:<br /><input type="password" name="l" /><br />
        <input type="submit" value="OK" />
  </form>
 </BODY>

 

 

image

Slanje E-mail-a

Sljedeći primjer prikazuje e-mail formu u HTML-u:

<BODY>
   <h3>Slanje mail-a na adresu ime.prezime@live.edu.me:</h3>

   <form action="MAILTO:ime.prezime@live.edu.me" method="post" enctype="text/plain">
       Vaše ime:<br />
       <input type="text" name="ime" /><br />
       Vaš E-mail:<br />
       <input type="text" name="mail" /><br />
       Komentar:<br />
       <input type="text" name="comment" size="50" />
       <br /><br />
       <input type="submit" value="Pošalji">
       <input type="reset" value="Reset">
   </form>
 </BODY>
image

U sljedećem broju vas očekuju neke naprednije opcije, a do tada iscrpite sve mogućnosti dosad naučenih.

 

Ovaj unos je objavljen pod Šesti broj i označen sa . Zabeležite stalnu vezu.

Jedno reagovanje na Škola Web programiranja: HTML – 2.nastavak

  1. Povratni ping: Časopis Prozor | Rankov blog

Ostavite odgovor

Popunite detalje ispod ili pritisnite na ikonicu da biste se prijavili:

WordPress.com logo

Komentarišet koristeći svoj WordPress.com nalog. Odjavite se / Promeni )

Slika na Tviteru

Komentarišet koristeći svoj Twitter nalog. Odjavite se / Promeni )

Fejsbukova fotografija

Komentarišet koristeći svoj Facebook nalog. Odjavite se / Promeni )

Google+ photo

Komentarišet koristeći svoj Google+ nalog. Odjavite se / Promeni )

Povezivanje sa %s