design_head_left_top Prva Stran O podjetju Zemljevid strani Stopite v takojšen stik z nami design_head_left_top
 

Carpe Diem d.o.o, Kranj

 Izdelava spletnih strani

design_head_left		 design_head_right
O podjetju Povezave Podpora design_menu_right
menu_content

 Izdelava spletnih strani: Mala šola HTML

Kako izdelati spletno stran?

Spletna stran je sestavljena iz medsebojno povezanih HTML dokumentov, ki jih lahko pišete tudi sami, v katerekoli urejevalniku besedila, torej npr. Notepad-u (beležnici), pomembno je le, da ima shranjena datoteka končnico .html, ne .txt, kot je pogosta privzeta nastavitev beležnice.

Če želite, da ves Internet vašo stran vidi enako, se morate potruditi in slediti določenim pravilom. Ta pravila, ki jih bomo uporabljali so:

  • HTML pravila zapisa strani (različica XHTML 1.0)
  • CSS pravila oblikovanja strani (različica 2)
  • JavaScript za dinamičnost strani (različica 1.2)

Kazalo:

  1. HTML
  2. CSS
  3. JavaScript



HTML

HTML je opisni jezik z označbami (HyperText Mark-up Language) Označbe so posebne besede med parom znakov "<" in ">" (<označba>). Besedilo, ki je označeno s tako označbo, dobi posebne lastnosti, odvisne od vrste označbe.
Primer za označbo i - italic: <i>Poševno besedilo</i>.

Po standardu XHTML, katerega je vredno spoštovati, mora vsaka označba imeti svoj začetek in konec. Konec označbe ki oblikuje besedilo, je ista označba, s predpono "/" - glej prejšnji primer za označbo i.

Nekatere označbe niso namenjene oblikovanju vsebovanega besedila, torej nimajo končne označbe (<hr>, <br>, <img> ...). Standard XHTML vseeno predpisuje, da morajo tudi te označbe imeti svoj konec, zato jih je potrebno implicitno zaključiti (<hr />, <br />, <img />, ...).

Nekatere označbe imajo tudi lastnosti, ki posebej določajo delovanje označbe. Na primer označba <img> ne more delovati, če ji ne povemo, katero sliko naj prikaže. Zato ji dodamo lastnost src (source - izvor): <img src="slika.jpg" />.

<img> ima tudi lastnost alt (alternate - nadomestno), ki ni nujno potrebna, a se prikaže v primeru, da slike ni bilo mogoče prikazati, oziroma, če je uporabljeni brskalnik namenjen slepim, ki slike ne morejo videti, zato jo standard zateva.

Tako dobimo naslednjo označbo <img src="slika.jpg" alt='Opis slike' />. Vrstni red lastnosti ni pomemben, prav tako ni pomembno, ali uporabljate enojne (') ali dvojne (") narekovaje.

Prav tako ni pomembno, koliko presledkov damo v besedilo, ali koliko praznih vrstic; HTML upošteva le prvi presledek, zato lahko HTML kodo oblikujemo tako, da je bolj prijetna za pogled (zamiki gnezdenih označb, prazne vrstice med logično različnimi deli...)



Na vrh Na vrh

Struktura HTML dokumenta

Sledi minimalna vsebina veljavnega HTML dokumenta:

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

Prvo vrstico (DOCTYPE deklaracijo) zaenkrat izpustimo. Bistvo dokumenta je označba HTML, ki vsebuje označbi head in body. V head lahko vgnezdimo druge označbe, ki niso del prikaza dokumenta - ključne besede in opis za iskalnike, naslov dokumenta, avtorja, razna navodila za prikaz... Kar pa vpišemo v body se bo prikazalo v brskalniku.



Na vrh Na vrh

Seznam uporabnih HTML označb

P (paragraph - odstavek)

Besedilo, ki tvori odstavek zaprite med par <p> in </p>. Ta par poskrbi za presledek pred in po odstavku ter omogoča smiselno organiziranje vsebine
Primer:

<p>Besedilo</p>
BR (line break - prelom vrstice)

Ni nujno pisati v odstavkih. Lahko zahtevate prelom vstice - z označbo <br />
Primer:

prelom<br />
vrstice
Osnovno oblikovanje : B, I (bold - krepko, italic - nagnjeno)

Za poudarjanje in izpostavljanje uporabite te označbe.
Primera:

<i>Nagnjeno</i>

<b>Krepko</b>

Na vrh Na vrh
IMG (image - slika)

Prikaže sliko po vaši izbiri. Pomembno je, da določite Opis slike (lastnost ALT), širino in višino slike (da lahko brskalnik stran pravilno prikaže, še preden se slike naložijo), ter širino obrobe (če je slika vgnezdena v označbo <A>, se okoli nje pojavi okvir, ki ga verjetno nočete)
Dva primera:

<img src="slika.jpg" alt="Opis slike" />

<img src="/potDoSlike/slika.jpg" alt="Opis slike" style="width:100px;height:25px;border:none;" />

Opomba: lastnost style je del CSS pravil. Uporabljena je zato, ker je bolje določiti širino, višino in obrobo slike, ne pa prepustiti brskalniku, da jih določi. Uporabljajte, če le morete.

DIV

Div je splošna označba, ki naj ne bi vplivala na izgled dokumenta, temveč služi le za smiselno ločitev delov strani. Temu ni vedno tako, saj nekateri brskalniki z določenimi nastavitvami privzamejo, da je lahko v eni vrstici le en div. Drugi primer uporabe pokaže, kako to napako odpravimo.

Primera:

<div>To ni v</div><div> isti vrstici</div>

<div style="display:inline;">To je v</div><div style="display:inline;">isti vrstici</div>
Tabele : TABLE, TR, TD, CAPTION (Table Row - Vrstica tabele, Table Data cell - celica tabele s podatki, Caption - naslov)

Tabele so koristne za prikaz serij podatkov ali druge namene, velikokrat celo za postavitev spletne strani v celoti.

Vsaka tabela mora imeti začetni in končni TABLE, kakšno vrstico (TR) in kakšno celico (TD). Po želji lahko dodate tudi naslov (CAPTION), ki se pokaže nad tabelo.

Lastnosti TABLE:

  • cellspacing - razmak med celicami
  • cellpadding - razmak med vsebino celice in okvirjem celice
  • border - okvir celotne tabele

Lastnosti TD:

  • rowspan - koliko vstic se razpoteza celica
  • colspan - koliko stolpcev se razpoteza celica


Na vrh Na vrh Primeri:

<table>
<caption>Primer tabele:</caption>
<tr>
  <td>a1</td>
  <td>a2</td>
</tr>
<tr>
  <td>b1</td>
  <td>b2</td>
</tr>
</table>

prikaže:

Primer tabele:
a1 a2
b1 b2

Primer 2:

<table border="5" cellspacing="50" cellpadding="10">
<tr>
  <td>a1</td>
  <td>a2</td>
  <td rowspan="2">a3</td>
  <td>a4</td>
</tr>
<tr>
  <td colspan="2">b1</td>
  <td>b2</td>
</tr>
</table>

prikaže:

a1 a2 a3 a4
b1 b2


Na vrh Na vrh
A (Anchor - povezave)

Povezave omogočajo delovanje svetovnega spleta - izpostavljeno besedilo vodi na drug dokument ali izvede neko akcijo. Obstajajo tri vrste povezav:

  • na elektronsko pošto (<A href="mailto:ime.priimek@domena.org">Besedilo povezave</a>)
  • na drugo stran (<A href="http://www.a.x/dokument.html">Besedilo povezave</a>)
  • na del strani (<A href="http://www.a.x/dokument.html#sidro">Besedilo povezave</a> in v ciljnem delu dokumenta <A name="sidro" />). Če ne navedemo dokumenta, temveč le npr. <a href="#cilj">vrh</a>, se "sprehajamo" po dokumentu


Pogosta vprašanja

Sledi seznam nekaj najpogosteje opaženih vprašanj:



Na vrh Na vrh
Šumniki

V: Šumniki ne delujejo! Vidim čudne znake ali pa ni strešic.
O: Zaradi različnosti računalnikov se posebni znaki (šumniki niso del angleške abecede) prikazujejo drugače. To težavo rešimo s posebno označbo v glavi dokumenta (head):

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

ali, odvisno od operacijskega sistema in nastavitev

<meta http-equiv="Content-Type" content="text/html;charset=windows-1250" />

ali (predvsem unix)

<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-2" />

Na vrh Na vrh
Izgled strani

V: Moja stran je tako pusta. Hočem barve, okvirje, različne pisave in na splošno lepši izgled. Po spletu je mnogo strani, ki so pestrejše in tudi sam sem opazil posebno označbo <font>, lastnosti color="red" in bgColor="blue" ipd. Zakaj v mali šoli ni govora o tem?
O: HTML je zadnje čase namenjen predvsem postavitvi besedila, manj pa oblikovanju, ki naj bi bilo čim bolj ločeno od vsebine. Označbe in lastnosti o katerih govorite so nestandardne, in se opuščajo, saj ne pokrivajo vseh možnosti in niso splošno podprte. Oblikovanje je najbolje jemati v celoti - že veliko let se za oblikovanje uporabljajo CSS - Cascading Style Sheets, ki bodo obdelani v posebnem tečaju. Z označbami, ki so del te šole, in CSS pravili lahko posnamete izgled večine strani na spletu, razen flasha, slik in dinamičnega HTML-ja (Kombinacija HTML, CSS, JavaScript).



Na vrh Na vrh

DOCTYPE deklaracija

DOCTYPE zapis pove brskalnikom, kako naj prikazujejo dokument. Zaenkrat uporabljamo standard XHTML 1.0 Strict

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


Na vrh Na vrh

Povezave



Na vrh Na vrh

CSS

Povezave

JavaScript
Prva stran    ::   O podjetju    ::   Kontaktne informacije    ::   Zemljevid strani    ::   Internet

©2007 Carpe Diem d.o.o., Kranj       Izjava o varovanju zasebnosti