Weblaphoz html fájl létrehozása kezdőknek.

Weboldal alapja, a html fájl (file) létrehozása.

Weboldal készítéshez, ezen oldalt ajánlom minden olyan kezdőnek, melyek még nem készítettek, azaz nem rendelkeznek HTML fájltípussal.

A következő lépéseket kell megtenni: (Ha úgy gondolod, nyomtasd ki ezen oldal tartalmát.)

- A saját számítógépeden, készíts egy mappát tetszőleges elnevezéssel (Pl.: weblapom, vagy Weblapok, stb.)

- A saját számítógépeden nyisd meg a jegyzettömb programot.

- Helyezd le a monitor aljára.

- A most látott XHTML weboldalnál, kattints a nézet menüre, vagy a monitor tetszőleges részén,
kattints az egér jobbos billentyűjével, és kattints a forrás vagy oldal forrása témakörre.

- A most megnyíló fájl teljes tartalmát jelöld ki (szerkeszt menü - összes kijelölés)

- Tedd a másolóasztalra (szerkeszt menü - másol)

- A lehelyezett jegyzettömb programodra kattints

- Illeszd be a jegyzettömb programodba (szerkeszt menü - beillesztés)

- A jegyzettömb programod, mentsd el az előre elkészített mappádba így:
Fájl menü: Mentés másként...

```
Fájlnév:     index.html
```
```
Fájl típusa: Minden fájl
```
```
Kódolás:     UTF-8
```

Ha minden jól ment, akkor kész is van az első XHTML Weblapod, melyről meg is győződhetsz.

- Zárj be a számítógépeden minden jelenleg nyitva levő programot.
- Nyisd meg a számítógépeden található valamelyik Internet Böngésző programot (Pl.: Internet Explorer)
- Kattints a bal felső sarokban található fájl menüre, majd a megnyitás témakörre
- Kattints a Tallózás gombra
- Az ekkor megnyíló ablakban keresd meg a mappádat, (Pl.: weblapom) és nyisd meg
- Az ekkor megjelenő index nevű fájlt, jelöld ki, és kattints a megnyitás gombra
- A most megjelenő ablakban kattints az OK gombra, és már láthatod is, az első weblapodat.

Ne ijedj meg, ha ugyan ez a szöveg jelenik meg, amit éppen most olvasol. Ez is annak a jele, hogy mindent jól csináltál.

Kezdheted a gyakorlást:
- Lépj be azon mappádba, melybe az index.html fájlt elmentetted.
- Jobbos egérbillentyűvel, kattints az index.html fájlra.
- A megjelenő menü ablakban, kattints az Edit with Notepad++ programra. Ha nincs telepítve számítógépedre az Edit with Notepad++ program, akkor mozgasd az egeret, a Társit lehetőségre, és kattints a Jegyzettömb menüre.
- Megjelenik az index.html fájl tartalma.
- Az ott látott kódjelektől ne ijedj meg, keresd meg a kezdő <body> jelölőcímkét és a záró </body> jelölőcímkét
- Ezen két jelölőcímke között, ki is törölhetsz bármit, vagy beírhatsz bármilyen szöveget. Ugyanis a weblapokon, e két címke közé beírt dokumentum anyaga jelenik meg, a monitoron.

Az első módosításkor ne töröld ki azon jelölőcímkéket, melyek a kisebb mint < és a nagyobb mint > jelek között helyezkednek el.
- Ha módosítottad a html fájl tartalmát, mentsd el (fájl - mentés)
- Kattints a monitor alján lévő weblapodra
- Kattints a böngésződ - frissítés ikonjára, és már láthatod is, az általad végrehajtott módosításokat weblapodon

Amikor már tesztelgetted a szöveg beírásokat, módosításokat, készítsd el az első stílus, azaz CSS fájlodat is, jegyzettömb programoddal,
melybe a következő sorokat, írd, vagy másold be innen:

body {font-family: Arial, Helvetica, sans-serif; font-size: 100.01%; margin: 0.01px; background-color: #ccc;}
#container{width: 960px; top: 1px; margin-right: auto; margin-left: auto;}
h1{font-size: 33px; color: #363; text-align: center;}
p{font: 16px Ariel; color: #000;}
strong{font-weight: bold;}
em{font-style: italic;}

- Mentsd el css fájlodat, az előre elkészített mappádba így:

Fájlnév: stilus.css

Fájl típusa: Minden fájl

Weboldalad elején, a <head> elemmel jelölt területén találhatod, a következő meghatározást.
<link href="YYYYY.css" rel="stylesheet" type="text/css" />
Az YYYYY -ok helyére írd be a stilus szót.

Megjegyzés:
A HTML és CSS fájloknak, tetszőleges ékezetes karakter nélküli elnevezést adhatsz, és lehetőleg kisbetűkkel íródjanak.

Ha sikerült a stilus.css fájlodat létrehozni, és nevét "stilus" az YYYYY-ok helyére beírtad, akkor szürke háttérszínnel jelenik meg, weboldalad.

Ezen oldalról visszalépni további témakörökhöz, a böngészőablak vissza nyilára kattintva történik.

A html fájl mentésekor, jegyzettömb programmal UTF-8 kódolási formátumot választhatunk, de UTF-8 kódolás BOM nélkülit nem.
Az UTF-8 kódolás is megfelel addig, még szerveroldali programokat, melyek ékezetes karaktereket is tartalmaznak, nem kapcsolunk a weboldalunkhoz. (Például: PHP fájlt)
Ekkor a html fájlunkat, át kell kódolni UTF-8 kódolás BOM nélkülire, hogy az ékezetes karakterek minden böngészőben, helyesen jelenjenek meg.
HTML fáj kódolásához, fejlettebb szövegszerkesztő programok kellenek, mint a jegyzettömb program. Ilyen például a, NOTEPAD++ program is.

Sok sikert a Weblapod elkészítéséhez!

Sebestyén János
Janesz