Bevezetés a weboldalkészítésbe

A modern digitális világban egy weboldal létrehozása elengedhetetlen tudás lehet, legyen szó személyes blogról, vállalkozási oldalról vagy oktatási platformról. Ahhoz, hogy egy weboldal helyesen működjön és a böngészők megfelelően jelenítsék meg, egy speciális leíró nyelvet, a HTML-t kell használnunk.

Mi az a HTML?

A HTML (HyperText Markup Language, magyarul Hiperszöveg Jelölési Nyelv) a weboldalak alapvető váza, amely lehetővé teszi a tartalom strukturált megjelenítését. A hiperszöveg közötti hivatkozásokkal az olvasó tetszőleges sorrendben navigálhat az oldalak között, ami a világháló (World Wide Web) alapműködésének lényeges eleme.

Fontos tudni:

• A HTML nem programozási nyelv, hanem egy jelölő nyelv.
• 1994-ben Tim Berners-Lee megalapította a World Wide Web Consortiumot (W3C), amely szabványosította a HTML nyelvet, hogy a böngészők egységesen értelmezzék azt.
• Egy oldal HTML kódjának megtekintéséhez nyomd meg a CTRL+U billentyűkombinációt vagy kattints az egér jobb gombjával, majd válaszd az „Oldal forrásának megtekintése” opciót.

Mi az a CSS?

A CSS (Cascading Style Sheets, magyarul Egymásba ágyazott Stíluslapok) a weboldalak megjelenésének formázására szolgál. Segítségével meghatározhatjuk az oldalon szereplő elemek (szövegek, címsorok, képek, gombok stb.) színét, méretét, elhelyezkedését, margóit és sok egyéb vizuális tulajdonságát.

Weboldal elkészítésének főbb lépései:

1. Tervezés: Meghatározzuk a weboldal célját és célközönségét, majd kialakítjuk annak struktúráját, menüpontjait és főbb tartalmi elemeit.
2. Tartalomkészítés: Elkészülnek a szövegek, képek, videók és egyéb multimédiás elemek, amelyeket a weboldalon meg szeretnénk jeleníteni.
3. Arculattervezés: Meghatározzuk az oldal színvilágát, betűtípusait és vizuális stílusát.
4. Kódolás: A tervek alapján HTML és CSS segítségével megvalósítjuk az oldalt, valamint beépítjük a keresőoptimalizálási (SEO) és marketing eszközöket.
5. Tesztelés: Ellenőrizzük az oldal helyes működését, a betöltési sebességet, a reszponzivitást (mobilbarát kialakítás), valamint javítjuk az esetleges hibákat.
6. Működtetés: Az elkészült weboldalt feltöltjük egy webszerverre, és innentől kezdve mindenki számára elérhetővé válik.

Mire lesz szükséged?

• Szerkesztőprogram: Olyan kódszerkesztő, amely megfelelő formában kezeli a HTML és CSS kódot. (Pl. Notepad++, Visual Studio Code)
• Képszerkesztő program: Segítségével optimalizálhatod és szerkesztheted a weboldalon megjelenő képeket. (Pl. Photoshop, GIMP)
• Böngészőfejlesztő eszközök: Az olyan böngészők, mint a Google Chrome és a Mozilla Firefox fejlesztői eszközökkel segítik a hibakeresést és az oldal tesztelését.

SEO: Hogyan teheted sikeressé a weboldalad?

A keresőoptimalizálás (SEO) nélkül egy weboldal nehezen található meg a Google keresőben. Az alábbi lépések segítenek abban, hogy weboldalad minél jobb helyezést érjen el:

• Kulcsszavak kiválasztása: Olyan kulcsszavakat használj a címekben és szövegekben, amelyekre az emberek valóban rákeresnek.
• Metaadatok optimalizálása: Használj releváns címet (title tag) és leírást (meta description).
• Reszponzivitás biztosítása: Mobilbarát kialakítás nélkül a keresők hátrányosan sorolják be az oldaladat.
• Gyors betöltés: Optimalizáld a képeket és a kódot a gyorsabb betöltés érdekében.

Ezzel az alapismeretekkel elindulhatsz a saját weboldalad készítésében!

1. feladat

Ha belevágsz, töltsd le a mappát, amit küldtem neked. Találsz benne egy html fájlt és egy képet. Mentsd le őket, majd nyisd meg a böngésződben (dupla kattintás)

Ez egy kezdetleges oldal, ugye? De most nyisd meg ezt egy notepad++-ban:

Nézzük meg pontosan, mit is látsz:

<h1> címke – meghatározza a főcímet. Próbáld meg a <h1> -et mindkét oldalon kicserélni <h2>-re. Mentsd el, majd frissítsd a böngésződben az oldalt. Mit látsz?

Kép módosítása

<img src=”img/avatar-merci.jpg” alt=”Merci”> – ez a kód jeleníti meg a képet. Cseréld le egy tetszőleges képre. Mentsd a képet az img mappába és nevezd el pl.: profilom.jpg-nek. Ezután módosítsd a kódsort:
<img src=”img/profilom.jpg” alt=”Saját profilkép”>
Mentsd el, majd frissítsd az oldalt.

Bemutatkozó szöveg szerkesztése

A <p> cimke egy bekezdést határoz meg. Jelenleg így néz ki:
<p>Szia! Az én nevem <strong>Merci</strong>, és most próbálom neked megtanítani a HTML szerkesztést.</p>
Feladat: írd át a szöveget úgy, hogy saját magadról írj pár mondatot. Ha szeretnéd, használd a félkövér <strong> és dőlt <i> kiemeléseket.

<p>Szia! Az én nevem <strong>Emma</strong>, és imádom a könyveket. <i>Kedvenc hobbim a rajzolás és a videojátékok.</i></p>

Lista készítése

HTML-ben a listák így néznek ki: 
<ul>
<li>Imádok olvasni</li>
<li>Szeretek kirándulni</li>
<li>Érdekel a programozás</li>
</ul>
Feladat: készíts egy listát három érdekességgel magadról. Használj <ul> elemet, és minden új pontot <li> címkék közé írj. 

Ha elkészültél, a teljes bemutatkozas.html fájlt és az img mappát töltsd fel a Google Drive-ra (a digitális kultúra mappádba) Oszd meg velem a linket: 
Google Drive-ban jobb klikk a fájlon > Share > Anyone with the link (ezt állítsd át Viewer-re, majd mentsd le és küldd el a linket. 

Jó munkát hozzá!