Kuidas Teha Lihtsat HTML Kodulehte

Kirjutas Fred
Article9032325275u2Hqy

 (20 korda hinnatud)

Sa saad teha omale kodulehte ilma HTML-i õppimata. Kas sa aga peaksid? EI, kuna mingil maal tehes HTML programmiga (Dreamweaver, Frontpage vms.) jõuad sa probleemini, mille lahendamiseks sa pead teadma mingil määral HTML-i. See artikkel räägib HTML-i põhitõdedest, juhindu nendest sammudest ja varsti suudad teha oma enda kodulehe nullist peale.

Juhised ja sammud

Raskusaste: Keskmiselt lihtne

Vajalikud asjad

  • Arvuti
  • Internet
  • Tekstiredaktor (Notepad, TextEdit, EditPad)
1
Lihtsa lehe loomiseks pead sa aru saama HTML-i põhitõdedest ja süntaksist kuidas seda kirjutada.

Mis on HTML?
HTML on lühend sõnadest Hypertext Markup Language, eesti keelde tõlgituna Hüperteksti Märkimise Keel. Pea meeles, et HTML ei ole programmeerimiskeel vaid nn. "märkimiskeel".

Kodulehtede HTML-i võid vaada Internet Exploreris (View -> Source), Mozilla FireFoxis (View -> Page source või vajuta CTRL+U) see tekst/kood mida sa näed seal ongi see mis teeb kodulehed ilusti vaadatavaks brauseris.
2
Võta lahti tekstiredaktor, notepad on kindlasti igas arvutis olemas (käivitamiseks mine Start -> Run -> kirjuta notepad ja vajuta ENTER) - tegelikult notepadi ei soovitaks, kuna see ei värvi koodi süntaksit ja kood võib tunduda nagu puder ja kapsad.

Internetis on tasuta kättesaadavad mitmed koodiredaktorid näiteks TextEdit, EditPad, Vim jms. need on paremad valikud, kuna värvivad koodi süntaksit ja sul on kergem koodist aru saada.

Mina kasutan näidetes phpDesigner 2008 koodiredaktorit (see on tasuline versioon)
3
Ava valitud koodi- või tekstiredaktoris uus dokument, salvesta fail .html laiendiga (näiteks index.html)

Esimene asi mis me kirjutame faili, määrab millist HTML standardit me hakkame kasutama, brauser saab selle järgi aru milliseid HTML elemente tuleb arvestada. Kuna me kirjutame hetkel lihtsat HTML lehte, siis kasutame selle HTML Doctype-i (praegu tegelikult kasutatakse XHTML standardeid aga sellest kirjutan mõnes teises artiklis)

Teeme siis brauserisele selgeks, et me hakkame kasutama HTML 4.01 Strict versiooni
Kood:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Järgmisena ütleme brauserile, et nüüd hakkame kirjutama HTML koodi. Esimene <html> element ütleb brauserile kuskohast HTML kood hakkab ja kaldkriipsuga </html> element näitab kus HTML kood lõppeb.
Kood:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

</html>
4
Määrame järgmisena dokumendi päise, dokumendi päist tuleb kirjutada ainult 1 korra ja selle sisse läheb hulk erinevaid teisi HTML koodi elemente nagu näiteks meta, title, style, script jms.
Kood:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>

</head>

</html>
5
Määrame järgmisene lehe tiitli, selleks kasutame title elementi.

Kood:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title> See on lehekülje pealkiri </title>
</head>

</html>
6
Nüüd määrame lehekülge sisu osa, kuhu edaspidi kirjutame kogu lehe tekstid, lisame pildid ja palju muudki. Sisu HTML keeles määratakse body elemendiga.

Kood:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title> See on lehekülje pealkiri </title>
</head>

<body>

</body>
</html>
7
Lisame nüüd mõne rea teksti värskesse kodulehte.
Et lisada uut rida (nagu ENTER tavaliselt) peame lisama br elemendi
Kood:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title> See on lehekülje pealkiri </title>
</head>

<body>
See on minu esimene lause HTML lehte kirjutades.
<br />
<br />
Lisasin 2 reavahetust ja jätkan teksti kirjutamist
</body>
</html>
8
Piltide lisamiseks kasutame img elementi, kus peame määrama pildi asukoha src atribuudiga. Pildi asukohta võib määrata täispika asukohaga või ainult serveri kausta järgi.

Täispikk pildi asukoht:
Kood:

<img src="http://www.kuidas.ee/images/frontend/kuid155.png"/>

Serveri kausta asukoht:
Kood:

<img src="/images/frontend/kuid155.png"/>
9
Kontrolli oma HTML kood üle. Vaata et elemendid (oleksid suletud korrekselt) v.a. need elemendid mis sulgevad ennast ise nt: br, img, hr jts.

Sinu kodulehe kood peaks välja nägema umbes selline:
Kood:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title> See on lehekülje pealkiri </title>
</head>

<body>
See on minu esimene lause HTML lehte kirjutades.
<br />
<br />
Lisasin 2 reavahetust ja jätkan teksti kirjutamist
<br />
<img src="http://www.kuidas.ee/images/frontend/kuid155.png"/>
</body>
</html>
10
Salvesta oma koduleht ja ava interneti brauseriga, vaata kas su koduleht näitab korrektselt.
Nüüd on sul näidis HTML kood olemas, proovi lisada teisi elemente ja pilte.

Loe juurde HTML-ist W3Schools HTML

Nipid ja hoiatused

  • Elementide sulgemine ei käi suvalisse kohta korrektne: <element1><element2>Sisu</element2></element1>
  • Kui sa "avad" elemendi siis ole tähelepanelik selle sulgemisel kui see element ei ole ise-sulguv nagu nt: <img> ja <hr>
  • Kui su koduleht ei tööta, siis kopeeri kood siit õpetusest. Vaata kuidas see tehtud on ja proovi muuta vastavalt vajadusele.
  • Vale elemendi sulgemise näidis: <element1><element2>Sisu</element1></element2>
  • Kui salvestad HTML lehte, siis pead kirjuta faililaiendi .html käsitsi kui sa ei tee kodulehte koodiredaktoriga.

Kommentaarid