Osnove HTML
PHP tečaj: Osnove HTML
V uvodnem poglavju smo že omenili, da se lahko v besedilnih datotekah s končnico .php poleg PHP programske kode nahaja tudi HTML koda.
V vsaki PHP datoteki imamo lahko več "kosov" oziroma blokov PHP kode.
Posamezne bloke PHP kode zapišemo med oznaki <?php (ta oznaka označuje začetek PHP kode) in ?> (ki označuje konec PHP kode). Izven blokov PHP kode pa lahko pišemo navadno HTML kodo.
Kakšen pa je sploh namen HTML kode?
HTML kodo pišemo z značkami (ang. tag). S temi značkami definiramo posamezne odseke strani, označimo odebeljene dele besedila, vstavljamo slike in povezave, oblikujemo tabele ter ustvarjamo obrazce.
Vsak HTML dokument začnemo ter zaključimo z značkama <html> ter </html>. Znotraj sekcije, ki jo uokvirjata ti dve znački, pa imamo dva glavna dela:
Glava <head>: Znotraj glave dokumenta z značko <title> določimo naslov strani, ki bo prikazan v spletnem brskalniku oziroma na zavihku. Z značko <meta> pa na prikazani način določimo uporabljeni nabor znakov — v našem primeru je to nabor znakov utf-8, ker ima odlično podporo za šumnike.
Telo <body>: Ta sekcija vsebuje dejansko vsebino strani, ki nam jo bo prikazal spletni brskalnik. Tukaj gre lahko za odstavke <p>, prehode v novo vrstico <br />, slike, povezave, menuje, gumbe in tako naprej.
Vse značke pišemo med levo kazalko (ang. caret) < in desno kazalko >. Znotraj značk imamo lahko tudi poljubno število atributov in njihovih vrednosti, pri navajanju katerih lahko uporabimo enojne narekovaje ' ali dvojne narekovaje ".
HTML značke lahko nastopajo v parih, pri čemer drugi znački rečemo zapiralna značka in ji pred ime dodamo desno poševnico /. Značke so lahko tudi enojne, pri čemer znak za zapiranje postavimo pred desno kazalko.
Primer:
Pri uporabi značk moramo upoštevati naslednja tri pravila:
Nekoliko bolj napredni sta "enojna" značka <img> za vstavljanje slik ter "dvojna" značka <a> za vstavljanje povezav, ki za pravilno delovanje potrebujeta tudi dodatne atribute.
Kako pa je s prikazom podatkov v tabeli? Če želimo v spletno stran vstaviti tabelo, to naredimo s kombinacijo značk <table>, <tr> in <td>:
HTML koda iz zgornjega primera na spletni strani prikaže sledečo tabelo:
V spletno stran lahko vstavimo tudi oštevilčene sezname <ol> (ordered list) in neoštevilčene sezname <ul> (unordered list). Elemente posameznega seznama navedemo med značkama <li> (list item) ter </li>.
Primer:
HTML koda iz zgornjega primera na spletni strani prikaže sledeči seznam:
V vsaki PHP datoteki imamo lahko več "kosov" oziroma blokov PHP kode.
Posamezne bloke PHP kode zapišemo med oznaki <?php (ta oznaka označuje začetek PHP kode) in ?> (ki označuje konec PHP kode). Izven blokov PHP kode pa lahko pišemo navadno HTML kodo.
Kakšen pa je sploh namen HTML kode?
Kaj je HTML?
Preden začnemo pisati spletne strani v PHPju, moramo spoznati osnove HTML jezika, s katerim brskalniku povemo, kako naj naša spletna stran izgleda.HTML kodo pišemo z značkami (ang. tag). S temi značkami definiramo posamezne odseke strani, označimo odebeljene dele besedila, vstavljamo slike in povezave, oblikujemo tabele ter ustvarjamo obrazce.
Osnovna HTML stran
HTML koda, s katero prikažemo zelo osnovno spletno stran, izgleda takole:<!DOCTYPE html>
<html>
<head>
<title>Prva spletna stran</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<p>Pozdravljen, svet!</p>
<p>To je spletna stran.<br />Naša prva!</p>
</body>
</html>Vsak HTML dokument začnemo ter zaključimo z značkama <html> ter </html>. Znotraj sekcije, ki jo uokvirjata ti dve znački, pa imamo dva glavna dela:
Glava <head>: Znotraj glave dokumenta z značko <title> določimo naslov strani, ki bo prikazan v spletnem brskalniku oziroma na zavihku. Z značko <meta> pa na prikazani način določimo uporabljeni nabor znakov — v našem primeru je to nabor znakov utf-8, ker ima odlično podporo za šumnike.
Telo <body>: Ta sekcija vsebuje dejansko vsebino strani, ki nam jo bo prikazal spletni brskalnik. Tukaj gre lahko za odstavke <p>, prehode v novo vrstico <br />, slike, povezave, menuje, gumbe in tako naprej.
Poskusite: V obstoječo datoteko index.php iz uvodnega poglavja prekopirajte zgornjo HTML kodo in jo shranite. Potem z brskalnikom obiščite naslov http://localhost/ in videli boste svojo prvo spletno stran.
Osnovna HTML sintaksa
Posamezne HTML elemente tvorijo značke in njihova vsebina.Vse značke pišemo med levo kazalko (ang. caret) < in desno kazalko >. Znotraj značk imamo lahko tudi poljubno število atributov in njihovih vrednosti, pri navajanju katerih lahko uporabimo enojne narekovaje ' ali dvojne narekovaje ".
HTML značke lahko nastopajo v parih, pri čemer drugi znački rečemo zapiralna značka in ji pred ime dodamo desno poševnico /. Značke so lahko tudi enojne, pri čemer znak za zapiranje postavimo pred desno kazalko.
Primer:
<znacka ime-atributa="vrednost-atributa">Vsebina</znacka>
<enojna-znacka ime-atributa="vrednost-atributa" />
<!-- to je komentar v HTML kodi, ki ne vpliva na delovanje -->Pri uporabi značk moramo upoštevati naslednja tri pravila:
- Pravilo 1: Vse značke morajo biti pravilno gnezdene.
Primer:
<z1> <z2> ... </z1> </z2> <!-- nepravilno --> <z1> <z2> ... </z2> </z1> <!-- pravilno --> - Pravilo 2: Vse značke moramo zapreti.
Primer:
<z1> <p>Prvi odstavek.</z1> <!-- nepravilno --> <z1> <p>Drugi odstavek.</p> </z1> <!-- pravilno --> Prva vrstica besedila.<br>Druga vrstica po prehodu. <!-- nepravilno --> Prva vrstica besedila.<br />Druga vrstica po prehodu. <!-- pravilno --> - Pravilo 3: Vse značke morajo biti zapisane z malimi črkami.
To pravilo je izredno enostavno, zato smo ga prihranili za konec. :)
Najpogosteje uporabljane značke
Omenili smo že znački za odstavek besedila in prehod v novo vrstico, zdaj pa si poglejmo nekoliko daljši nabor pogosto uporabljanih značk.- Odebeljeno besedilo: <strong> ali <b> (bold)
Primer uporabe značke za prikaz odebeljenega besedila:
<strong>To je odebeljeno besedilo</strong>
- Poševno besedilo: <em> (emphasis) ali <i> (italics)
- Odstavek: <p> (paragraph)
- Različno pomembni naslovi: <h1> (heading 1) do <h6> (heading 6)
- Vrstični element: <span> — z vrstičnim elementom označimo npr. nekaj besed znotraj stavka
- Bločni element: <div> — z bločnimi elementi določimo postavitev strani (npr. menu na levi, header, footer, ...) ter večje samostojne bloke
- Nova vrstica: <br /> — primer enojne značke, ki se drži zgoraj omenjenega pravila številka 2
Nekoliko bolj napredni sta "enojna" značka <img> za vstavljanje slik ter "dvojna" značka <a> za vstavljanje povezav, ki za pravilno delovanje potrebujeta tudi dodatne atribute.
- Slika: <img> (image)
Primer:
<img src="http://www.primer.si/slika.jpg" alt="Opis slike" />
Z atributom src navedemo URL pot do slike. Z atributom alt pa navedemo opis slike, ki jo bodo uporabili spletni brskalniki, ki ne morejo prikazovati slik (npr. namenski brskalniki za slabovidne). - Povezava: <a> (anchor)
Primer:
<a href="http://www.primer.si/zemljevid.php">Kliknite za ogled zemljevida</a>
Z atributom href določimo spletni naslov (URL) povezave. Med samima značkama <a> in </a> pa vnesemo vsebino, na katero bomo kliknili za obisk prej navedenega spletnega naslova.
Kako pa je s prikazom podatkov v tabeli? Če želimo v spletno stran vstaviti tabelo, to naredimo s kombinacijo značk <table>, <tr> in <td>:
- Znački <table> in </table> tvorita tabelo.
- Znački <tr> in </tr> (table row) tvorita vrstico v tabeli.
- Znački <td> in </td> (table data cell) tvorita celico v tabeli.
<table>
<tr>
<td>Ime</td>
<td>Poklic</td>
</tr>
<tr>
<td>Janez</td>
<td>programer</td>
</tr>
</table>HTML koda iz zgornjega primera na spletni strani prikaže sledečo tabelo:
| Ime | Poklic |
| Janez | programer |
V spletno stran lahko vstavimo tudi oštevilčene sezname <ol> (ordered list) in neoštevilčene sezname <ul> (unordered list). Elemente posameznega seznama navedemo med značkama <li> (list item) ter </li>.
Primer:
<ul>
<li> Prvi element seznama </li>
<li> Drugi element seznama </li>
<li> Tretji element seznama </li>
</ul>HTML koda iz zgornjega primera na spletni strani prikaže sledeči seznam:
- Prvi element seznama
- Drugi element seznama
- Tretji element seznama
Poskusite: Predlagamo, da v obstoječi datoteki index.php poskusite tudi sami uporabiti HTML značke, ki smo jih obdelali v tem poglavju. Ko vam bo uporaba HTML značk domača, boste optimalno pripravljeni na naslednje poglavje.