1. Kezdetek kezdete

Kezdeném teljesen a 0-ról 🙂
Egy nagyon kezdetleges honlap két fájlból is állhat: egy index.html és egy style.css fájlból. Természetesen ezeket máshogy is elnevezhetjük a lényeg a kiterjesztés legyen megfelelő. A főoldalunknak célszerű az index elnevezést adni, mert a böngészők ezt veszik alapértelmezett főoldalnak.

Az html fájlban lesz a honlapnak a váza, a css pedig a kinézetet szolgálja. Megmutatom majd, hogy lehet html fájlba is css kódot tenni, de az átlátható kód a jó kód, ezért legyen meg mindennek a saját helye, és a saját fájlja.

Nyissunk meg jegyzettömböt, vagy inkább egy Notepad ++-t. Én utóbbit ajánlanám, szépen színez és tagol mindent.

Írjuk fel a következőket:

<html>

 

<head>
</head>

 

<body>
</body>

 

</html>

Csináljunk valahol egy üres mappát neki, és mentsük bele a fájlt index.html néven. Ha most megnyitjátok a mappát ahova mentettétek, látni fogjátok benne a fájlt, és az ikonja olyan lesz mint az alapértelmezett böngészőtöké. Ez bizony már egy weboldal, amit ha rákattintasz megnyitja a böngésződbe 🙂 Persze teljesen fehér, üres oldalt fogtok kapni, de ettől még ezt már lehet weboldalnak hívni.

Ezeket a formulákat: <html>,<head>,<body>   tag-eknek hívják (ejtsd: teg), mindennek van nyitó és záró tag-je. Fontos, hogy mindig minden tag le legyen zárva, ami meg van nyitva, különben összefolynak a dolgok!

Töltsük fel adatokkal!

Nyissuk meg az index.html fájlunkat Notepad-ban, és adjunk a honlapunknak címet! Egészítsük ki a következőkkel:

<html>

 

<head>
<title>Első honlapom</title>
</head>

 

<body>
</body>

 

</html>

Mivel magyarok vagyunk, és használunk ékezetes betűket, ezért, hogy ne jelenjenek meg kriksz-kraksz betűk az ékezetes helyett, tegyük bele a következő kódot is!

<html>

 

<head>
<title>Első honlapom</title>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-2″>
</head>

 

<body>
</body>

 

</html>

Most ha nyomtok egy mentést, és megnyitjátok a fájlt, a böngészőtökben felül kiírja hogy “Első honlapom”. Ha még mindig nem alakítja át megfelelő magyar betűkre a karaktereket, akkor Notepad++-ban felül Kódolás–>Átalakítás UTF-8-ra, majd mentsétek el újra, és így próbáljátok újra megnyitni az index.html fájlt, vagy ha megvan nyitva, akkor nyomjatok egy frissítést.

Töltsük fel egy kis szöveggel! A body tag-ek közé írjatok be valamilyen szöveget!

<html>

 

<head>
<title>Első honlapom</title>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-2″>
</head>

 

<body>

Helló világ! Ez az én első honlapom!
</body>

 

</html>

Mentsük el és gyönyörködjünk az eredményben, ez már egy html-ben kódolt weboldal!

A 2. leckében kicsit belelendülünk a dolgokba, csinálunk linkeket, megmutatom miket lehet egyszerű paragrafusban csinálni, és hogy lehet html-be beépíteni stíluselemeket!