Hogyan írjunk weblapot? HTML
HTML, I. Fejezet
Csapjunk a lecsóba:
Kezdjük akkor teljesen az elején, hogy aki még sohasem csinált ilyet és soha nem is olvasott erről, az is megértse. Egy egyszerű html weboldal megírásához bármilyen szövegszerkesztő programot használhatsz, akár egy sima jegyzettömb is megteszi. Nyitsz egy új fájlt és beleírod a következőket:
<!DOCTYPE html>
<html>
<head>
<title>Lap címe</title>
</head>
<body>
<p>Ez a szöveg pedig megjelenik a weblapon.</p>
</body>
</html>
(ezt a kódot hívják forráskódnak)
Most egészítsük ki még néhány dologgal, hogy illeszkedjen a magyar nyelvhez, pl.: Karakterkódolás: UTF8, egy kis szövegformázás és középre igazítás..
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>Minta</title>
</head>
<body>
<br/> <!--ez itt egy sortörés-->
<center><!--ez itt középre igazítja a szöveget-->
<h1>Ez a szöveg megjelenik a weblapon. :)</h1>
<!--A H1 adja meg a betűméretet-->
<br/> <!-- ez itt egy sortörés-->
</center><!--az igazítást mindig le kell zárni-->
</body>
</html>(vagy akár innen ki is másolhatod és később módosíthatod a saját igényed szerint)
Mutat
Ezt a fájlt fogod és elmented HTML kiterjesztéssel
Legyen a neve például: minta.html Ha ezzel megvagy a gépeden ott van a minta.html nevű fájl és ha erre duplán rákattintasz már a böngésződ fogja megnyitni és megjelenik benne a saját weblapod.
Amikor eddig a pontig eljutottál, már van a saját gépeden egy saját weblapod!
Látjátok, ennyire egyszerű.
Most az egészhez adjunk egy képet, egy linket és egy kattinható képlinket:
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>Minta</title>
</head>
<body>
<br/> <!--ez itt egy sortörés-->
<center><!--ez itt középre igazítja a szöveget-->
<h1>Ez a szöveg megjelenik a weblapon. :)</h1>
<!--A H1 adja meg a betűméretet-->
<br/> <!-- ez itt egy sortörés-->
<a href="https://demonic.hu">DEMONIC CHAT</a> <!--ez egy egyszerű szöveges link-->
<br/> <!-- ez itt egy sortörés-->
<img src="../styles/Absolution/theme/images/logo.png"><!--ez egy egyszerű kép-->
<br/> <!-- ez itt egy sortörés-->
<a href="https://demonic.hu"><img src="../styles/Absolution/theme/images/logo.png"></a>
<!--ez pedig már egy kattinható képlink-->
</center><!--az igazítást mindig le kell zárni-->
</body>
</html>Tárhely:
Ha most ezt az egészet az Interneten publikálni akarod szükséged lesz egy tárhelyre. Én kezdetnek egy ingyeneset javaslok, ilyet regisztrálhatsz például az atw.hu oldalán. De keresővel persze kismillió ingyenes tárhely fellelhető. Ezek általában kis méretűek, nem túl megbízhatóak és teli vannak reklámmal, de első weboldalhoz, gyakorlásra tökéletesen megfelelnek. Másik hátrányuk, hogy nem lesz ilyen szép címed mint a demonic.hu hanem demonic.atw.hu vagy ehhez hasonló, függően attól melyik szolgáltatónál regisztrálsz, a szolgáltató domain nevét is hordozni fogja.
A feltöltés:
A tárhely szolgáltatódtól meg fogod kapni az FTP hozzáférés adatait ez a tárhely címe egy felhasználónév, egy jelszó és szükség estén a port száma. A feltöltéshez szükséged lesz egy FTP kliensre, ez egy program. Ilyen lehet például a FileZilla.
A struktúra:
A tárhely gyökér könyvtárában kell lennie egy INDEX fájlnak, ez index.html vagy index.php ez lesz a kezdőlapod. Mikor a böngészőbe azt írod, demonic.atw.hu akkor ez az oldal fog megjelenni. Tehát fogod és az így megírt minta.html-t átnevezed index.html -re. Innen aztán a látogató a kezdőlapon elhelyezett linkeken át jut el az aloldalakra. Írsz például egy magamrol.html oldalt aminek a linkjét az index.html fájlban helyezed el. Ha azonos könyvtárban vannak, ez a link nem kell hogy a teljes urlt tartalmazza (demonic.uw.hu/magamrol.html) hanem elég csak maga a file neve, magamrol.html. Ha különböző könyvtárban foglalnak helyet akkor is elég csak a könyvtárnév és a fájl neve: aloldalak/magamrol.html.
Ha most innen visszafelé akarsz hivatkozni, tehát az aloldalak könyvtárból az index fájlra ami a gyökérkönyvtáradban van, akkor két ponttal léphetsz feljebb egy szintet, így: ../index.html
Kezdésnek azt javaslom az összes HTML állományt a gyökérkönyvtárba pakold, így nem lesz gondod a hivatkozásokkal elég csak a fájlok nevét beírni. Legfeljebb a képeknek nyitsz egy alkönyvtárat, így nincs az egész túlbonyolítva.
HTML, II. Fejezet
Ha ezt végig olvasod, még nem fog programozó válni belőled, de önállóan meg fogsz tudni írni egy weblapot.
A történet lényege, hogy amit a <body> és </body> tag közé írsz az fog az oldalon megjelenni.
Magával a body taggal pedig megadhatod a háttér és az alapértelmezett szövegszínt.
<body text=”green” bgcolor=”orange”>
Itt a színek neveit, de akár színkódokat is használhatsz.
Szövegformázás:
Erre számtalan lehetőséged van, én itt most csak a teljesség igénye nélkül mutatnék be néhányat.
Amit <b> és </b> tagek közé írsz vastag betűs szövegként fog megjelenni.
A <H1>és <H6> tagek közt adhatod meg a fejléc betűméretét. Mindig olyannal zárd le, amilyennel kezdted!
<H6>Szöveg</H6>
Legnagyobb betűméretet a H1 adja, legkisebbet pedig a H6. Természetesen használhatsz ettől eltérő formázást is. Pixelben és százalékban is megadhatod.
<p style=”font-size:30px;”>Szöveg</p>
<p style=”font-size:160%;”>Szöveg</p>
Képek:
A kép beszúrásához be kell írni az <IMG> tag-et, ezt nem kell lezárni </IMG> taggel!
Benne kell megadni a kép elérési útvonalát, ami lehet abszolút útvonal:
<img src=”http://demonic.hu/konyvtar/kepneve.jpg” alt=”html kep”/>
vagy relatív útvonal is: <img src=”konyvtar/kepneve.jpg” alt=”html kep”/>
Képek méretét is megadhatod:
<img src=”kep.jpg” alt=”html kep” style=”width:100px;height:150px;”>
Így fog megjelenni
Linkek:
Linkekben a targettel megadhatod, hogy azonos (_self) vagy új ablakban (_blank) nyíljon meg.
<a target=”_blank” href=”http://demonic.hu”>Link szövege.</A>
Az írás célja nem az hogy itt tanulj meg programozni, de ha idáig megírtad, talán kedvet kaptál, hogy részletesebben is belemélyedj. 