HTML / CSS alapozó (teljesen kezdőknek)

HTML / CSS alapozó, helló világ!

Előző cikkeimben említettem, hogy elkezdünk egy html / css sorozatot.

Felhívnám a figyelmet, hogy ez a sorozat teljesen a kezdőkhöz fog szólni, ha valaki már jártas ilyen téren, annak nem tudok újat mondani.

A Weboldalkészítés alapok cikkemben volt már szó CMS rendszerekről, és saját magunk által megírt weboldalakról, ez a sorozat az utóbbiról fog szólni.

Tehát a célunk egy saját magunk által elkészített, egyedi design-al rendelkező, tartalommal ellátott egyszerű weboldal.

Amennyiben publikálni szeretnénk az oldalt szükségünk lesz egy domainre, továbbá egy webtárhelyre, ezekre egy másik cikkemben kitérek. A html / css lefuttatható a saját számítógépünkön, tehát jelen esetben nem lesz szükség ezekre.

Szükséges szoftverek

Szerencsénkre semmi fizetős, vagy esetleg nagy gépigényű szoftverre nem lesz szükségünk, csupán egy Notepad++-t kell letöltenünk, továbbá egy böngészőre lesz szükségünk, de gondolom az mindenki számára világos, hogy szükséges, ha weboldalt szeretnénk készíteni. 🙂

Az oldal felépítése

Erről nem kell sokat beszélni. Jelen esetben a HTML felelős a tartalomért, a CSS a kinézetért, ennyire egyszerű.

Ha valaki jobban benne van ezekben, az tudja, hogy később ha funkciókkal szeretnénk ellátni az oldalt, szükség lesz PHP-ra, és pár egyéb dologra, sőt, aki még jobban jártas ebben a témában az már az MVC szó fogalmával is tisztában van, de jelen esetben ez minket nem érint, mivel ez egy kezdőknek szánt sorozat.

Csapjunk a lecsóba!

Ebben a részben egyszerű feladatunk lesz. Ki kell íratnunk a böngészőbe a “Helló világ” szöveget.

A HTML rengeteg “tag”-et tartalmaz, ezeket én sem tudom mind fejből, de elég csak a fontosabbakat megtanulni. Egyébként w3schools-on fent van az összes, innen lehet tájékozódni.

A legfontosabb dolog, hogy a HTML blokkonként épül fel. Van egy nyitó tag, és egy zárótag (pl. <p></p> – ez a szöveg kiíratásának a tagja).

Én a továbbiakban a pastebin.com oldalt hívom segítségül, ti a notepad++-t használjátok, továbbá állítsátok át a fájl kódolását UTF-8-ra!

Az első és legfontosabb tag, a <html> tag, mint mondtam az előbb nyitunk egy tagot, ha vége zárunk.

Tehát az alap kódunk így fog kinézni:

A következő 2 tag, ami elengedhetetlen az a <head> és a<body>, ezeket is ugyanúgy nyitjuk és zárjuk.

head-ben az oldalon nem látható dolgok találhatók, a bodyban pedig az oldal tartalma, ami meg fog jelenni a böngészőnkben.

A továbbiakban jelöljünk be pár alap tagot a head részben, ilyen például a <title> tag, amely az oldal címe lesz, a böngészősáv tetején.

Következő lépésben térjünk át a body részére az oldalnak, ez az, ami meg fog jelenni nekünk az oldalon, eddig amit írtunk az egy fehér, üres oldal.

Adjunk egy címet és egy egyszerű szöveget, mondjuk a helló világot.

Ehhez két tagra lesz szükségünk, a <h1-6> tagra, és a <p> tagra. A h tagnál minél nagyobb az utána következő szám, annál kisebb a szöveg mérete.

Böngészőből megnyitva látszik az oldal címe, és a hozzárendelt szöveg.

Ezzel véget is érne a sorozat első része, sikerült kiírnunk a Helló világ szöveget HTML-el, a böngészőnkbe.

A következő részben találkozunk, addig is a megosztás ér! 😉

html

Kovács Attila adatlap-képe

Kovács Attila

Weboldal tulajdonos, adminisztrátor, karbantartó, designer és szerkesztő. Főként a Windows Mobile és a weboldalszerkesztésben (HTML, CSS, PHP) érzem otthon magam, de érdekel bármi, ami technológiával kapcsolatos. Célom, hogy cikkeim minél több emberhez eljussanak, ezáltal bevezetve őket a technológia újdonságaiba, érdekességeibe, továbbá saját írói készségem és nyelvtudásom javítása, továbbá tapasztalatszerzés weboldalszerkesztés, design-olás téren.

Szintén tetszeni fog...

Vélemény, hozzászólás?