Az internet elterjedésének elején a HTML weboldalak voltak túlnyomó többségben. A dinamikus honlapkészítés, a PHP kódok miatt mára elavult a HTML weboldal készítés. A gyakorlatban azonban még mindig vannak olyan előnyei, amelyek miatt érdemes megfontolni a használatát. A CSS és HTML programozási alapismeretek pedig az olyan nyílt forráskódú weboldalaknál is jól jöhetnek, mint pl. a WordPress.
Tartalomjegyzék
HTML és CSS: a weboldal készítés alapvető nyelvei
Az online marketing világában a weboldal készítés egyik legfontosabb eszköze az HTML és a CSS.
Az HTML kódolás, vagyis a Hypertext Markup Language, az interneten található tartalmak struktúrájának meghatározására szolgál. A böngészők értelmezik az HTML kódokat, és ezek alapján jelenítik meg a weboldalakat.
A CSS, vagyis Cascading Style Sheets, pedig a formázást segíti elő. Ezzel határozzuk meg például azt, hogy milyen színű legyen a szövegünk, milyen betűtípust használjunk, vagy hogy hol helyezkedjen el egy elem a honlapon.
A weboldal készítés során tehát fontos, hogy tisztában legyünk ezeknek a nyelveknek az alapjaival. Az HTML segítségével hozzuk létre a honlapunk szerkezetét: definiáljuk az egyes elemeket (pl. címek, bekezdések), amelyek aztán megjelennek a böngészőben. A CSS-sel pedig ezeket az elemeket formázzuk, adunk nekik stílust.
HTML elemek használata
Egy egyszerű példa segíthet abban, hogy jobban megértsük, hogyan működnek ezek a nyelvek. Tegyük fel, hogy szeretnénk létrehozni egy weboldalt, amelyen egy cím és alatta egy bekezdés található. A legfontosabb, hogy létre kell hoznunk tartalmi elemeket. Az HTML kódunk így nézhet ki:
<h1>Cím</h1><p>Bekezdés</p>.
A HTML kód nyitó tag a „<” jel, a lezáró tag pedig a „>”.
A CSS kódunk pedig lehet például ez:
h1 {color: red;} p {font-size: 18px;}.
Ezzel pedig meghatároztuk, hogy a cím piros színű legyen, a bekezdés betűmérete pedig 18 pixel.
A weboldalak felépítése: a HTML nyelv alapjai
A weboldal készítés során az első lépés gyakran az, hogy megismerkedünk az HTML nyelv alapjaival. Az HTML fájl minden oldala három fő részből áll:
<!DOCTYPE html>deklaráció
Azt jelzi a böngészőnek, hogy például HTML 5 dokumentumot fog megjeleníteni.- Head:
<head>
Olyan információkat tartalmaz, mint például a honlap címe vagy karakterkódolása. - Body:
<body>
A honlapon megjelenő, látható tartalmat foglalja magába.
Az HTML elemek (tag-ek) a weboldal készítés alapjait képezik. Minden elem egy nyitó és egy záró tagből áll, például:
<p>ez egy bekezdés kezdete</p>ez a bekezdés végét jelöli.
Az elemek között lehetnek más elemek is, így létrehozva egy fa-szerű struktúrát. A leggyakoribb HTML elemek
- a címek (
<h1>–<h6>), - a bekezdések (
<p>), - a linkek (
<a>) és - a képek (
<img>).
Az HTML tehát egy nagyon erős eszköz a kezünkben, amellyel szinte bármilyen weboldalt létrehozhatunk. De ahhoz, hogy ezt hatékonyan tudjuk használni, fontos, hogy megértsük az alapjait. Érdemes például megtanulni, hogyan hozhatunk létre listákat (számozott vagy felsorolásos), hogyan illeszthetünk be képeket vagy videókat, vagy hogyan hozhatunk létre űrlapokat.
A legegyszerűbb módszer HTML fájl kódok írásához: Ingyenes HTML szerkesztők használata
Ha már megvan az alapvető ismereteink az HTML-ről és a CSS-ről, akkor elkezdhetünk saját weboldalakat készíteni. Ehhez először is szükségünk lesz egy szerkesztőprogramra. A leggyakoribb, és legegyszerűbb eszköz a Windowsban is megtalálható Jegyzettömb.
Bár a jegyzettömböt használjuk weblap szerkesztésre, de nem ad semmi segítséget a kód hibáinak feltárására. A HTML szerkesztők előnye, tartalmaznak olyan funkciókat, amelyek megkönnyítik a munkánkat. Ilyen például az automatikus kódkiegészítés, a szintaxis kiemelés vagy a hibakeresés. Emellett sok esetben lehetőség van közvetlenül a böngészőben való előnézetre is, így azonnal láthatjuk, hogy milyen változásokat eredményeznek a kódunkban végrehajtott módosítások.
Az ingyenes HTML szerkesztők között számos jó opció található.
Egy másik népszerű választás a Visual Studio Code. Ez egy ingyenesen elérhető kódszerkesztő a Microsoft-tól, de vannak hozzá fizetős bővítmények is. A Visual Studio Code előnye, hogy nagyon jól integrálódik más Microsoft termékekkel (például az Azure-rel), így ha ezeket használod, akkor ez lehet a legjobb választás számodra.
Jó alternatíva még a Brackets. Ez kifejezetten webfejlesztőknek lett tervezve és nagyon hasznos funkciókkal rendelkezik, mint például az élő előnézet.
Fizetős, professzionális HTML szerkesztő programok
Természetesen nem csak ingyenes opciók léteznek a weboldal készítés terén. Ha komolyabban foglalkoznál a témával, akkor érdemes lehet beruházni egy fizetős, professzionális HTML szerkesztő programra. Ezek gyakran még több funkcióval rendelkeznek, és jobban testreszabhatók az egyéni igényekhez.
Az egyik legismertebb ilyen program például a Sublime Text. Ez egy nagyon gyors és hatékony szerkesztő, ami számos nyelvet támogat, beleértve az HTML-t és a CSS-t is. Emellett rengeteg bővítménnyel rendelkezik, amelyek segítségével még produktívabbá tehetjük a munkánkat.
Asztali programok között a legjobb választás az Adobe Dreamweaver. Ez komplett HTML weboldalak létrehozását is biztosítja.
A vevőszerző weboldal formázása CSS segítségével
A weboldal készítés során nem elég csak létrehozni az oldal struktúráját az HTML segítségével, fontos a megfelelő formázás is. Ebben segít nekünk a CSS, amivel meghatározhatjuk az oldalunk stílusát.
A CSS segítségével például beállíthatjuk a szöveg színét, méretét és betűtípusát, meghatározhatjuk az elemek elhelyezkedését és méretét, vagy akár animációkat is hozzáadhatunk az oldalhoz. Mindezekkel együtt egy jól formázott weboldal sokkal professzionálisabb benyomást kelt, és jobban vonzza a látogatókat.
A CSS használata nem csak a kinézet miatt fontos. A megfelelő formázás segít abban is, hogy weboldalunk könnyen érthető és használható legyen. Például ha jól elkülönítjük egymástól a különböző tartalmi részeket (pl. menü, fő tartalom, lábléc), akkor a látogatók könnyebben navigálhatnak az oldalon.
