Üdvözöllek a webfejlesztés izgalmas világában! Valaha is álmodoztál arról, hogy saját weboldalt készíts, de nem tudtad, hol is kezdd? Ne aggódj, jó helyen jársz! Ez a cikk egy átfogó, lépésről lépésre útmutatót kínál, amelynek segítségével te is képes leszel elkészíteni az első saját weboldaladat. Nem kell előzetes tudás, csak egy kis lelkesedés és nyitottság a tanulásra!
A mai digitális korban egy saját weboldal nem csak a cégek kiváltsága. Legyen szó személyes portfólióról, blogról, egy hobbi bemutatásáról vagy egy egyszerű online névjegykártyáról, a weboldalkészítés alapjai mindenki számára elsajátíthatók. És mi az alapja mindennek? Természetesen a HTML!
Mi is az a HTML? – A web nyelve
A HTML (HyperText Markup Language) nem egy programozási nyelv, hanem egy jelölőnyelv. Ez jelenti a weboldalak szerkezetét és tartalmát. Gondolj rá úgy, mint egy épület alapjaira és vázára. A HTML mondja meg a webböngészőnek, hogy mi a szöveg, mi a kép, hol van egy link, egy címsor vagy egy bekezdés. Nélküle a weboldalak csak formázatlan szöveghalmazok lennének.
A webfejlesztés során a HTML-t általában a CSS-szel (Cascading Style Sheets) és a JavaScripttel együtt használjuk. A CSS felel a weboldal megjelenéséért, stílusáért (színek, betűtípusok, elrendezés), míg a JavaScript az interaktivitást (animációk, dinamikus tartalom, felhasználói interakciók) biztosítja. De ma csak a HTML-re koncentrálunk, hiszen ez az alapja mindennek.
Mire lesz szükségünk?
A jó hír az, hogy nem sok mindenre! Az első weboldalad elkészítéséhez mindössze két dologra lesz szükséged:
- Szövegszerkesztő: Ide írod a HTML kódodat. A legegyszerűbb is megteszi (pl. Jegyzettömb Windows-on, TextEdit macOS-en), de a fejlesztők körében népszerűbbek az olyan speciális szerkesztők, mint a Visual Studio Code (ingyenes, platformfüggetlen, rengeteg hasznos funkcióval), a Sublime Text vagy az Atom. Én a Visual Studio Code-ot ajánlom a kényelmesebb munkafolyamat érdekében.
- Webböngésző: Ez jeleníti meg a kódodat weboldalként. Bármely modern böngésző megfelel (Google Chrome, Mozilla Firefox, Microsoft Edge, Safari).
Ennyi. Semmi drága szoftver, semmi bonyolult telepítés. Kezdhetjük is!
Az alapok alapja: Mi az a HTML és hogyan működik?
A HTML dokumentumok egymásba ágyazott elemekből épülnek fel. Az elemeket tag-ekkel (címkékkel) jelöljük. A legtöbb HTML tag egy nyitó és egy záró részből áll, például: <p>Ez egy bekezdés.</p>. A nyitó taget <p>, a záró taget </p> jelöli, és a kettő között található a tartalom.
Vannak úgynevezett önzáró tag-ek is, amelyeknek nincs záró párjuk, mivel nincs tartalmuk. Ilyen például a képet beszúró <img> tag vagy a sortörést okozó <br> tag.
A tag-eknek lehetnek attribútumai is, amelyek extra információkat adnak meg az elemről. Ezeket a nyitó tagben adjuk meg. Például egy linknél: <a href="https://example.com">Látogass el az oldalra!</a>, ahol az href egy attribútum, értéke pedig "https://example.com".
A HTML dokumentum struktúrája
Minden HTML fájl egy alapvető struktúrával rendelkezik. Ez mondja meg a böngészőnek, hogy az adott fájl egy HTML dokumentum, és hol találja meg a tartalmát és a metaadatait:
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Az első weboldalam</title>
</head>
<body>
<!-- Ide jön a weboldal látható tartalma -->
</body>
</html>
<!DOCTYPE html>: Ez az első sor, és jelzi a böngészőnek, hogy HTML5 típusú dokumentumról van szó.<html lang="hu">: Ez a gyökérelem, ami az egész dokumentumot magába foglalja. Alang="hu"attribútum jelzi a böngészőnek és a keresőmotoroknak, hogy a dokumentum nyelve magyar.<head>: Ez a rész tartalmazza a weboldalra vonatkozó metaadatokat, amelyek nem jelennek meg közvetlenül az oldalon. Ide tartozik a karakterkódolás (<meta charset="UTF-8">, ami a magyar ékezetes betűk helyes megjelenítéséhez elengedhetetlen), a responszív megjelenítés beállításai (<meta name="viewport" ...>) és az oldal címe (<title>), ami a böngésző fülén jelenik meg.<body>: Ez a rész tartalmazza a weboldal *összes* látható tartalmát: a szöveget, képeket, linkeket, listákat, stb.
Az első lépések: Egy üres HTML fájl
Nyisd meg a szövegszerkesztődet (ajánlom a Visual Studio Code-ot). Másold be a fenti alapstruktúrát egy új fájlba. Mentsd el a fájlt index.html néven egy tetszőleges mappába a gépeden (pl. egy „elso_weboldal” nevű mappába). Fontos a .html kiterjesztés! Ez mondja meg a számítógépnek, hogy egy weboldalról van szó.
Most keresd meg a mentett index.html fájlt a mappádban, és duplán kattintva nyisd meg. Ez automatikusan megnyitja azt az alapértelmezett webböngésződben. Valószínűleg egy teljesen üres oldalt fogsz látni, csak a böngésző lapján fog megjelenni a „Az első weboldalam” felirat. Gratulálok, elkészült a nulladik lépés: létrehoztad az első üres weblapodat!
A tartalom építőkövei: Gyakori HTML elemek
Most, hogy van egy üres lapunk, kezdjük el feltölteni tartalommal! Nézzük meg a leggyakrabban használt HTML elemeket, amelyekkel felépíthetjük az oldalunkat.
Szöveges elemek
- Címsorok (Headings):
<h1>-től<h6>-ig vannak. Az<h1>a legfontosabb (általában az oldal fő címe), a<h6>pedig a legkevésbé fontos. Egy oldalon általában csak egy<h1>tag van, ami a fő témát jelöli.<h1>Ez az oldal fő címe</h1> <h2>Ez egy alcím</h2> <h3>Ez egy még kisebb alcím</h3> - Bekezdések (Paragraphs): A szöveges tartalom alapeleme, amit a
<p>tag-gel jelölünk.<p>Ez egy egyszerű szöveges bekezdés, amit a weboldalon szeretnénk megjeleníteni.</p> - Kiemelés (Emphasis and Strong Importance):
<em>: Jelentőséget ad a szövegnek (általában dőlt betűvel jelenik meg).<strong>: Fontos tartalmat jelöl (általában vastag betűvel jelenik meg).<p>Ez egy <em>kiemelt</em> szó, ez pedig egy <strong>nagyon fontos</strong> kifejezés.</p>
- Sortörés (Line Break): A
<br>tag új sort kezd a szövegben, de nem hoz létre új bekezdést. Ez egy önzáró tag.<p>Ez az első sor.<br>Ez pedig a második sor egy bekezdésen belül.</p> - Elválasztó vonal (Thematic Break): A
<hr>tag egy vízszintes vonalat jelenít meg, ami egy tematikus váltást jelöl az oldalon. Ez is önzáró.<p>Ez egy téma.</p> <hr> <p>Ez egy másik téma.</p>
Listák
Két fő típusa van a listáknak:
- Rendezett lista (Ordered List):
<ol>tag-gel kezdődik, elemei pedig számozva jelennek meg. Minden listaelem egy<li>tag.<ol> <li>Első elem</li> <li>Második elem</li> <li>Harmadik elem</li> </ol> - Rendezetlen lista (Unordered List):
<ul>tag-gel kezdődik, elemei pedig pontokkal (vagy más jelölővel) jelennek meg. Minden listaelem egy<li>tag.<ul> <li>Alma</li> <li>Körte</li> <li>Szilva</li> </ul>
Hivatkozások (Links)
A web lényege a hivatkozások rendszere. Egy linket az <a> (anchor) tag-gel hozunk létre. A href attribútum adja meg a link célját.
<p>Látogass el a <a href="https://google.com" target="_blank">Google</a> oldalára!</p>
<p>Ez egy <a href="elerhetoseg.html">belső link</a> az oldalon belül.</p>
Az target="_blank" attribútum azt jelenti, hogy a link új böngészőfülön nyílik meg. Belső linkeknél (másik HTML fájlra mutató linkek) általában elhagyjuk.
Képek
Képeket az <img> tag-gel szúrunk be. Ez is önzáró tag.
<img src="kep.jpg" alt="Egy gyönyörű táj" width="300">
src(source): A kép fájl elérési útja. Lehet relatív (kep.jpg, ha ugyanabban a mappában van, mint a HTML fájl) vagy abszolút (https://example.com/kepek/kep.jpg).alt(alternative text): Fontos attribútum! Akkor jelenik meg, ha a kép valamilyen okból nem töltődik be, vagy ha egy képernyőolvasó szoftver használja (pl. látássérültek számára). SEO szempontból is fontos!widthésheight: A kép szélességét és magasságát állíthatjuk be pixelben. Fontos: ezeket inkább CSS-sel szokás szabályozni, de az alapokhoz megteszi.
Szemantikus HTML – Jelentéssel bíró struktúra
Modern webfejlesztés során fontos a szemantikus HTML használata. Ez azt jelenti, hogy olyan HTML tag-eket használunk, amelyek a tartalom jelentését is hordozzák, nem csak a megjelenését. Régen sok mindent <div> tag-ekkel oldottak meg, de ma már sokkal specifikusabb tag-ek állnak rendelkezésre, amelyek javítják az SEO-t, az akadálymentességet és a kód olvashatóságát.
Néhány fontos szemantikus tag:
<header>: Az oldal fejlécét tartalmazza (logó, navigáció, fő cím).<nav>: A fő navigációs linkeket foglalja magába.<main>: Az oldal fő és egyedi tartalmát jelöli. Egy oldalon csak egy ilyen tag lehet.<article>: Egy önálló, teljes és önmagában is értelmezhető tartalmi egységet jelöl (pl. egy blogbejegyzés, hír).<section>: Az oldal egy tematikus szakaszát jelöli. Általában címmel rendelkezik.<aside>: A fő tartalomtól elkülönülő, de mégis ahhoz kapcsolódó tartalmat jelöl (pl. oldalsáv, reklám).<footer>: Az oldal láblécét tartalmazza (szerzői jogok, elérhetőségek, alsó navigáció).
Készítsük el az első weboldalunkat! – Egy személyes bemutatkozó oldal
Most, hogy ismerjük az alapvető építőköveket, építsünk fel együtt egy egyszerű, személyes bemutatkozó weboldalt. A témánk legyen: „Rólam”.
A weboldalunk struktúrájának tervezése:
- Fejléc (Header): Neved és egy rövid bemutatkozó cím.
- Navigáció (Navigation): Linkek: „Rólam”, „Hobbi”, „Kapcsolat”.
- Fő tartalom (Main):
- „Rólam” szekció: Egy bekezdés magadról.
- „Hobbi” szekció: Egy lista a hobbidról, esetleg egy kép.
- „Kapcsolat” szekció: Egy e-mail cím link.
- Lábléc (Footer): Szerzői jogok.
Nyisd meg az index.html fájlodat a szövegszerkesztődben, és vágj bele!
Lépésről lépésre kódolás:
1. Az alapszerkezet és a head rész:
Ez már megvan, de ellenőrizzük, hogy a <title> tag a nevedet tartalmazza:
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Példa Péter – Bemutatkozás</title> <!-- Itt a neved! -->
</head>
<body>
<!-- Ide jön a tartalom -->
</body>
</html>
2. A fejléc (header) és navigáció (nav) hozzáadása:
A <body> tag belsejébe illesszük be a következőket:
<body>
<header>
<h1>Üdvözöllek Példa Péter oldalamon!</h1>
<p>Webfejlesztő & Gitárrajongó</p>
</header>
<nav>
<ul>
<li><a href="#rolam">Rólam</a></li>
<li><a href="#hobbi">Hobbi</a></li>
<li><a href="#kapcsolat">Kapcsolat</a></li>
</ul>
</nav>
<!-- Itt folytatódik majd a main tartalom -->
</body>
Figyeld meg a navigációs linkeknél a #rolam, #hobbi, #kapcsolat értékeket. Ezek „horgonyok” vagy „anchor-ök”, amelyek az oldal egy adott részére mutatnak, ha az adott elemnek van egy megfelelő id attribútuma (ezt később adjuk hozzá).
3. A fő tartalom (main) és a „Rólam” szekció:
Most jöhet a <main> tag a <nav> után, és azon belül az első <section>.
<main>
<section id="rolam"> <!-- Fontos az ID! -->
<h2>Rólam</h2>
<p>Sziasztok, Példa Péter vagyok, egy kezdő <strong>webfejlesztő</strong> Budapestről. Mindig is lenyűgözött a web világa, és most belevágtam az első oldalam elkészítésébe! Szeretek új dolgokat tanulni, és folyamatosan fejleszteni a tudásomat.</p>
<p>A szabadidőmben szeretek túrázni, olvasni, és persze kódolni. Ezen az oldalon bemutatom, miket tanultam eddig, és miért szeretem a webfejlesztést.</p>
</section>
<!-- Ide jön majd a hobbi és kapcsolat szekció -->
</main>
4. A „Hobbi” szekció:
A „Rólam” szekció után illeszd be:
<section id="hobbi">
<h2>Hobbi</h2>
<p>A webfejlesztés mellett számos más dolog is leköt. Íme néhány kedvencem:</p>
<ul>
<li>Gitározás: Már gyerekkorom óta pengetem a húrokat.</li>
<li>Konyhai kísérletezés: Imádok új recepteket kipróbálni.</li>
<li>Túrázás a Börzsönyben: A friss levegő és a természet mindig feltölt.</li>
</ul>
<p>Itt van egy kép a kedvenc gitáromról:</p>
<img src="guitar.jpg" alt="Kedvenc akusztikus gitárom" width="400"> <!-- Cseréld le a képet és az elérési utat! -->
<p><em>Tipp: Tegyél egy képet a HTML fájl mellé, pl. guitar.jpg néven, hogy megjelenjen!</em></p>
</section>
5. A „Kapcsolat” szekció:
A „Hobbi” szekció után illeszd be:
<section id="kapcsolat">
<h2>Kapcsolat</h2>
<p>Ha szeretnél velem kapcsolatba lépni, küldj egy e-mailt a következő címre:</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</section>
A mailto: protokollnak köszönhetően rákattintva megnyílik a felhasználó alapértelmezett levelezőprogramja.
6. A lábléc (footer):
Végül, a </main> tag után, de még a </body> előtt illeszd be a láblécet:
<footer>
<p>© 2023 Példa Péter. Minden jog fenntartva.</p>
</footer<
Az © egy speciális HTML entitás, ami a © szerzői jogi jelet jeleníti meg.
Teljes kód (összefoglalva):
Itt van a kész HTML forráskód, amit beilleszthetsz az index.html fájlodba:
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Példa Péter – Bemutatkozás</title>
</head>
<body>
<header>
<h1>Üdvözöllek Példa Péter oldalamon!</h1>
<p>Webfejlesztő & Gitárrajongó</p>
</header>
<nav>
<ul>
<li><a href="#rolam">Rólam</a></li>
<li><a href="#hobbi">Hobbi</a></li>
<li><a href="#kapcsolat">Kapcsolat</a></li>
</ul>
</nav>
<main>
<section id="rolam">
<h2>Rólam</h2>
<p>Sziasztok, Példa Péter vagyok, egy kezdő <strong>webfejlesztő</strong> Budapestről. Mindig is lenyűgözött a web világa, és most belevágtam az első oldalam elkészítésébe! Szeretek új dolgokat tanulni, és folyamatosan fejleszteni a tudásomat.</p>
<p>A szabadidőmben szeretek túrázni, olvasni, és persze kódolni. Ezen az oldalon bemutatom, miket tanultam eddig, és miért szeretem a webfejlesztést.</p>
</section>
<hr> <!-- Kis elválasztó vonal a szekciók között -->
<section id="hobbi">
<h2>Hobbi</h2>
<p>A webfejlesztés mellett számos más dolog is leköt. Íme néhány kedvencem:</p>
<ul>
<li>Gitározás: Már gyerekkorom óta pengetem a húrokat.</li>
<li>Konyhai kísérletezés: Imádok új recepteket kipróbálni.</li>
<li>Túrázás a Börzsönyben: A friss levegő és a természet mindig feltölt.</li>
</ul>
<p>Itt van egy kép a kedvenc gitáromról:</p>
<img src="guitar.jpg" alt="Kedvenc akusztikus gitárom" width="400">
<p><em>Ne feledd: Tegyél egy <strong>guitar.jpg</strong> nevű képet ugyanabba a mappába, ahol az <strong>index.html</strong> fájl található, hogy megjelenjen!</em></p>
</section>
<hr>
<section id="kapcsolat">
<h2>Kapcsolat</h2>
<p>Ha szeretnél velem kapcsolatba lépni, küldj egy e-mailt a következő címre:</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</section>
</main>
<footer>
<p>© 2023 Példa Péter. Minden jog fenntartva.</p>
</footer>
</body>
</html>
Mentsd el a fájlt (Ctrl+S vagy Cmd+S), majd frissítsd a böngésződet. Látnod kell az elkészült weboldaladat! Gratulálok, megépítetted az első weblapodat!
A következő lépések: CSS és JavaScript
Ahogy látod, az oldalad működik, de még elég egyszerűen néz ki. Itt jön képbe a CSS! A CSS felelős azért, hogy az oldalad jól nézzen ki, színes legyen, megfelelő betűtípusokkal, elrendezéssel. Például a fenti kódhoz adhatnánk egy kis stílust:
/* Ez egy példa CSS kód, nem kell beilleszteni a HTML-be,
csak illusztrációként szolgál. */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
background-color: #f4f4f4;
color: #333;
}
header {
background: #333;
color: #fff;
padding: 1rem 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
text-align: center;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav a {
color: #333;
text-decoration: none;
}
main {
padding: 20px;
background: #fff;
margin-top: 20px;
}
img {
max-width: 100%; /* Kép ne lógjon ki a konténeréből */
height: auto;
display: block; /* Középre igazítás */
margin: 15px auto;
}
footer {
text-align: center;
padding: 20px;
background: #333;
color: #fff;
margin-top: 20px;
}
Ezt a CSS kódot egy külön fájlba (pl. style.css) mentve, majd a HTML <head> részébe belinkelve (<link rel="stylesheet" href="style.css">), máris sokkal profibbá varázsolhatod az oldaladat. Ez azonban már egy következő téma.
A JavaScript pedig ahhoz kell, hogy az oldalad interaktív legyen. Például, ha egy kattintásra valami történjen, egy menü kinyíljon, vagy egy űrlap ellenőrizze az adatokat. Ez a webfejlesztés harmadik alappillére.
Összefoglalás
Gratulálok! Átmentünk a HTML alapjain, megismertük a legfontosabb tag-eket és elemeket, és ami a legfontosabb, sikeresen elkészítettük az első saját weboldaladat! Láthatod, hogy a weboldalkészítés nem ördöngösség, csak egy kis logikus gondolkodásra és gyakorlásra van szükség.
Ne állj meg itt! Kísérletezz a tanultakkal, próbálj meg új elemeket hozzáadni, változtasd meg a szövegeket, keress más tag-eket online (pl. HTML táblázatok, űrlapok). A webfejlesztés egy folyamatos tanulási folyamat, de a HTML a szilárd alap, amire építhetsz. A következő lépésként bátran merülj el a CSS és JavaScript világába, hogy még szebb és interaktívabb oldalakat hozhass létre!
Sok sikert a további tanuláshoz és a kreatív alkotásához!
Leave a Reply