Þá er bara ekkert annað en að drífa í þessu..
Undirbúningurinn:
Opnaðu Notepad eða eitthvað sambærilegt forrit. Og mundu að save-a fælinn sem eitthvað.html svo þegar þú ret búinn að gera eitthvað þá geturðu bara save-að og klikkað á fælinn og skoðað.
1.partur - Grunntögin
Á bakvið allar heimasíður liggja þessi tög:
<html>
<title></title>
<head>
</head>
<body>
</body>
</html>
Þetta er semmsagt venjuleg grunn heimasíða.
Prufum nú að skrifa einhvern texta og bæta við titli einnig.
<html>
<title>Heimasíðan mín!</title>
<head>
</head>
<body>
Vertu hjartanlega velkomin/nn á heimasíðuna mína!
</body>
</html>
Þetta semmsagt skrifar út “Vertu hjartanlega velkomin/nn á heimasíðuna mína!” og titillinn á síðunni er þá “Heimasíðan mín!”
Þá erum við semmsagt búin að ná því að allt sem við skrifum inn í <body> tagið það kemur fram á síðunni og allt sem við skrifum inn í <title> tagið það kemur sem titillinn á síðunni efst í browsernum.
Hvað geri ég ef ég vill nú hafa fleiri en eina línu? Það þýðir ekkert að ýta bara á enter og halda síðan áfram heldur er það <br> tagið sem þýðir einfaldlega break á hinu enska tungumáli.
…
<body>
Vertu hjartanlega velkomin/nn á heimasíðuna mína!<br>
vonandi skemmtirðu þér vel hérna.
</body>
…
það sem þetta <br> tag gerði var semmsagt bara nákvæmlega það sama og eins og þú ýtir á enter í Notepad eða einhverju öðru þannig að ef þú vilt hafa bil á milli línanna þá bara bætirðu við <br> tagi o.s.frv.
Jæja núna vill ég fá mynd inná þessa blessuðu heimasíðu. Það er gert með því að nota <img> tagið en það er notað svona <img src=“myndinþín.jpg” border=“0”> þú getur ráðið því hvort þú notar border eða ekki með því að skrifa 0, 1, 2 eða hvað sem þú vilt þarna í border línuna.
…
<body>
Vertu hjartanlega velkomin/nn á heimasíðuna mína!<br>
vonandi skemmtirðu þér vel hérna.<br>
<img src="http://www.mediatheque-rueilmalmaison.fr/images_up/Chaplin.jpg“ border=”0">
</body>
…
Þarna vísa ég beint í Chaplin mynd sem ég fann á netinu og þú getur einnig notað hana ef þú vilt.
Jæja núna viltu kannski hafa þennan texta fyrir miðju á síðunni og til þess notarðu <center> tagið og þeir sem eitthvað kunna í ensku vita að það þýðir náttúrulega bara “miðja”.
…
<body>
<center>
Vertu hjartanlega velkomin/nn á heimasíðuna mína!<br>
vonandi skemmtirðu þér vel hérna.<br>
<img src="http://www.mediatheque-rueilmalmaison.fr/images_up/Chaplin.jpg“ border=”0">
</center>
</body>
…
Núna er allt miðjað!
Næsta sem við ætlum að gera er að linka Chaplin myndina inn á eina góða Chaplin síðu. Og til þess notum við <a href> tagið. Sem er notað svona <a href=“síðanþín.html” border=“0”>
…
<body>
<center>
Vertu hjartanlega velkomin/nn á heimasíðuna mína!<br>
vonandi skemmtirðu þér vel hérna.<br>
<a href=“www.charliechaplin.com” border=“0”><img src="http://www.mediatheque-rueilmalmaison.fr/images_up/Chaplin.jpg“ border=”0"></a>
</center>
</body>
…
Einnig geturðu linkað á texta og hefur þá bara texta á milli en ekki mynd, svona <a href=“www.charliechaplin.com” border=“0”>texti</a>
Mikilvægt er að setja alltaf </a> fyrir aftan það sem maður vill linka til að loka því. Annars linkast allt sem eftir kemur inn á www.charliechaplin.com
Jæja þá er það spurning hvort þú viljir eitthvað vera að breyta stöfunum? Það eru til venjuleg html tög fyrir það en annars er lang best að nota styles í það og mæli ég með því að þú lærir það strax á eftir eða emð html. En hérna koma samt font tögin.
Ef þú vilt breyta texta þá seturðu bara font tagið fyrir framan textann og lokar síðan á eftir, svona <font face=“Verdana”></font> notum bara verdana sem dæmi. Einnig geturðu breytt bakgrunninum á síðunni með því að setja bara bgcolor inn í body tagið, svona <body bgcolor=“c0c0c0”>En þarna nota ég svona windows gráan lit og er liturinn táknaður í hex tölum og eru litir eins og hvítur og svartur táknaðir svona, #FFFFFF og #000000 en þú getur séð litatöfluna alla á webmonkey.com. Lítum aðeins á þetta.
…
<body bgcolor=“#c0c0c0”>
<center>
<font face=“Verdana”>
Vertu hjartanlega velkomin/nn á heimasíðuna mína!<br>
vonandi skemmtirðu þér vel hérna.<br>
<a href=“www.charliechaplin.com” border=“0”><img src="http://www.mediatheque-rueilmalmaison.fr/images_up/Chaplin.jpg“ border=”0"></a>
</font>
</center>
</body>
…
Núna Er allt font á síðunni orðið að “Verdana”. Nú viljum við kannski hafa fyrirsögnina aðeins stærri og það er gert með <font size=“4”> þú mátt ráða hvaða töu þú notar þarna (frá 1-7) en ég notaði 4.
…
<body bgcolor=“#c0c0c0”>
<center>
<font face=“Verdana”>
<font size=“4”>
Vertu hjartanlega velkomin/nn á heimasíðuna mína!</font><br>
vonandi skemmtirðu þér vel hérna.<br>
<a href=“www.charliechaplin.com” border=“0”><img src="http://www.mediatheque-rueilmalmaison.fr/images_up/Chaplin.jpg“ border=”0"></a>
</font>
</center>
</body>
…
jææææææja þá erum við komin með ótrúlega einfalda heimasíðu en það eru ennþá fullt af tögum sem ég hef ekki ennþá notað og þú getur séð þau með því að fara inn á http://hotwired.lycos.com/webmonkey/reference/html_cheatsheet/index.html
2.partur - Töflur
Jæja förum þá aðeins að bæta við síðuna. Í þessu parti tölum við aðeins um töflur. Það er hægt að nota töflur í margt og eru þær mjög gagnlega oft á tíðum. Við skulum byrja á því að adda einni einfaldri töflu inn á síðuna. Við skulum hafa smá border fyrst svo það sé einfaldara að sjá hana.
…
<body bgcolor=“#c0c0c0”>
<center>
<font face=“Verdana”>
<font size=“4”>
Vertu hjartanlega velkomin/nn á heimasíðuna mína!</font><br>
vonandi skemmtirðu þér vel hérna.<br>
<a href=“www.charliechaplin.com” border=“0”><img src="http://www.mediatheque-rueilmalmaison.fr/images_up/Chaplin.jpg“ border=”0“></a>
</font>
</center>
<table border=”1">
<tr>
<td>
1.td í 1.tr
</td>
<td>
2.td í 1.tr
</td>
<tr>
<tr>
<td>
1.td í 2.tr
</td>
<td>
2.td í 2.tr
</td>
<tr>
</table>
</body>
…
Jæja þarna sérðu einfalda töflu sem er með svona skýringum hvað er hvað. Og þegar þú lýtur á töfluna þá sérðu að það er <tr> sem gerir “rows” og <td> sem gerir “cells” (kann ekki íslenskuna fyrir þetta :)
Setjum núna chaplin inn í töfluna, skrifum smá um Chaplin við hana og centerum töfluna. Það er gert með því að skrifa <table align=“center”>
…
<body bgcolor=“#c0c0c0”>
<center>
<font face=“Verdana”>
<font size=“4”>
Vertu hjartanlega velkomin/nn á heimasíðuna mína!</font><br>
vonandi skemmtirðu þér vel hérna.<br>
</font>
</center>
<table border=“1” align=“center”>
<tr>
<td>
<a href=“www.charliechaplin.com” border=“0”><img src="http://www.mediatheque-rueilmalmaison.fr/images_up/Chaplin.jpg“ border=”0"></a>
</td>
<td>
Chaplin var mjög fyndinn leikari og bla bla bla..
</td>
<tr>
<tr>
<td>
1.td í 2.tr
</td>
<td>
2.td í 2.tr
</td>
<tr>
</table>
</body>
…
Jæja nú viljum við að taflan sé alveg klínd upp við Chaplin myndina en það gerum við með því að nota cellpadding tagið. <table border=“1” align=“center” cellpadding=“0”> einnig vill ég að það sé meira bil á milli “cella” þannig að ég nota cellspacing í það.<table border=“1” align=“center” cellpadding=“0” cellspacing=“6”> Og við skulum eyða bordernum á töflunni um leið.
…
<body bgcolor=“#c0c0c0”>
<center>
<font face=“Verdana”>
<font size=“4”>
Vertu hjartanlega velkomin/nn á heimasíðuna mína!</font><br>
vonandi skemmtirðu þér vel hérna.<br>
</font>
</center>
<table border=“0” align=“center” cellpadding=“0” cellspacing=“6”>
<tr>
<td>
<a href=“www.charliechaplin.com” border=“0”><img src="http://www.mediatheque-rueilmalmaison.fr/images_up/Chaplin.jpg“ border=”0"></a>
</td>
<td>
Chaplin var mjög fyndinn leikari og bla bla bla..
</td>
<tr>
<tr>
<td>
1.td í 2.tr
</td>
<td>
2.td í 2.tr
</td>
<tr>
</table>
</body>
…
Þú hefur kannski tekið eftir því að það er ekki Verdana fontið sem er notað í töflunni þannig að þú verður að define-a það bara með font taginu.
Jæja núna er ég búinn með svona STARTUP pakka. Þannig að fólk sem ekkert veit getur komið sér upp einfaldri heimasíðu. Ég tek það fram að þetta eru ekki öll grunntögin. Þannig að ef þú vilt læra meira þá endilega skelltu þér inn á webmonkey.com :)
kv. <a href=“mailto:gummi@fask.org”>quashey</a>
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. 