Mikið hefur verið rætt um það hérna á vefsíðugerðinni að hér væri of mikið af pro umræðu og greinum þannig að þeir sem væru að byrja á þessu hrökluðust í burtu. Því fannst mér tilvalið að reyna kippa því í liðinn og settist niður til þess að skrifa grein sem ætti að höfða til byrjenda og þá er ég að tala um þá sem langa að kynna sér HTML
Það eina sem þarf til þess að gera heimasíðu er textaritill. Textaritill sem er standard í windows er notepad og því tilvalið að nota hann. Áður en við byrjum er þó nauðsynlegt að útskýra nokkur hugtök.
HTML stendur fyrir HyperText Markup Language. Semsagt HTML er merkjamál. “Skipun” eða merki í html kallast tag. Tag er skrifað á eftirfarandi hátt <tag>. Í html opnar þú tag og lokar samsvarandi tagi með skástriki og þar afleiðandi er uppbygging skjalsins alltaf:
<opnatag> </lokatagi>. Skástrikið þýðir semsagt að þú lokir taginu. HTML hefur ákveðin merki t.d. <img> Sem stendur fyrir image, það þýðir að þú viljir setja inn mynd.
Jæja fyrst að grunnhugmyndin er komin á hreint byrjum við.
Byrjum á að ræsa notepad. Í skjalið byrjum við síðan að skrifa <html> til þess að segja forritum sem lesa skjalið eins og til dæmis Internet Explorer að þetta sé HTML skjal. Og að sjálfsögðu verðum við síðan að loka því: </html>. Inn á milli þeirra kemur síðan vefsíðan okkar. Vefsíðan skiptist upp í tvo hluta: haus eða <head> og líkamann <body>. Þannig að þá skrifum við
<html>
<head>
</head>
<body>
</body>
</html>
<hr>
Tip: Það er góð regla að draga inn tög sem eru undir öðrum tögum - upp á læsileika.
<hr>
Í hausnum geymum við upplýsingar um síðuna svo sem titil og fleira. Í líkamann setjum við síðan það sem á að sjást: texta, myndir, töflur og svo framvegis.
Setjum þá titilinn á síðuna okkar. Titill er það sem birtist í “Title Bar” eða bláa hausnum efst í forritum. Sbr Internet Explorer.
<html>
<head>
<title>Fyrsta heimasíðan mín</title>
</head>
<body>
</body>
</html>
<hr>
Tip: Athugið að titillinn er innan hausins og því drögum við hann inn.
<hr>
Þá er komið að útliti heimasíðunnar þinnar. Það kemur eins og áður kom fram í líkamanum eða <body>.
Þar getum við til dæmis skrifað.
<html>
<head>
<title>Fyrsta heimasíðan mín</title>
</head>
<body>
Heimasíðan mín
</body>
</html>
Til þess að sjá hvernig heimasíðan lítur út verðuru að vista (File -> Save As), velja “all documents” og gefa skjalinu nafnið index.html Index þýðir að þetta er upphafssíðan. Síðan ræsiru vafrann (t.d Internet Explorer eða Netscape) og opnar skrána þína (File -> Open).
Aftur að kóðuninni: Til þess að fara á næstu línu eða byrja nýja málsgrein dugar ekki að ýta á enter. Til eru sérstök tök fyrir það <br> eða break fer yfir á næstu línu og <p> sem stendur fyrir paragraph býr til nýja málsgrein.
<html>
<head>
<title>Fyrsta heimasíðan mín</title>
</head>
<body>
Heimasíðan mín
<p>
Fyrst að öllu vil ég bjóða ykkur velkomin á síðuna mína.<br>
Næst vill ég bjóða ykkur að sjá mynd af hamstrinum mínum.
</p>
</body>
</html>
<hr>
Tip: Taginu <br> þarf ekki að loka. Það inniheldur ekki neitt.
<hr>
Þá er komið að því að setja inn mynd. Ég fór lauslega í það áðan, tagið fyrir mynd er <img>. Við það komum við að öðru í HTML-i og það eru attribute og value. Eða einkenni og gildi.
Ef við setjum inn <img> veit browserinn ekki hvaða mynd þú villt setja inn. Þess vegna er til attribute-ið src eða Source. Það hefur síðan slóðina að myndinni sem gildi.
<html>
<head>
<title>Fyrsta heimasíðan mín</title>
</head>
<body>
Heimasíðan mín
<p>
Fyrst að öllu vil ég bjóða ykkur velkomin á síðuna mína.<br>
Næst vill ég bjóða ykkur að sjá mynd af hamstrinum mínum.
<img src=“myndir/hamstur.jpg”>
</p>
</body>
</html>
Og voila myndina af hamstrinum birtist (þ.e.a.s ef hún er til í möppunni myndir)
<hr>
Tip: <img> tagið lokast heldur ekki. Allar upplýsingarnar eru innan tagsins.
<hr>
Ég ætla ekki að fara út í öll og tög og attribute og læt þetta því duga. Þetta ætti að geta hjálpað ykkur að fikta ykkur áfram.
Þá vill ég benda á síðuna <a href="http://werbach.com/barebones/ice_barebone.html“ target=”_blank">html í hnotskurn</a> en hún fer yfir hvaða tög er til og hvað hvert tag gerir. Endilega kíkjið í tenglasafnið til þess að finn síður sem hjálpa ykkur.
Verið síðan óhrædd við að spyrja og láta flakka korkunum.
kv.
ask
Hugi notar vefkökur til að bæta notendaupplifun á vefsíðunni og greina umferð um hana.
Einnig hefur Hugi uppfært persónuverndarstefnu sína.