Gyakorlat - Menü kicsinosítása

A "menüsávunk" a jelenlegi állapotában elég ramatyul néz ki. A mai napon viszonylag "széppé" varázsoljuk. A végeredmény a következő lesz:

Gyakorlat - Fejléc finomítása

A mai leckében finomítunk a fejléc kinézetén. Az eredeti tervet megváltoztatjuk, mert nem úgy néz ki, hogy ... jól néz ki :D. Szerintem a fejlécnek ne legyen fehér színe, magasságát csökkentsük le, a szöveg függőlegesen és vízszintesen legyen középre igazítva és növeljük a betűméretet is.

A végeredmény így fog kinézni.

Gyakorlat - A CSS megírása

Üdvözlök minden olvasót újra. Elnézést, hogy ilyen sokáig nem volt új lecke, csak technikai gondok merültek fel. A mai leckében folytatjuk a félkész oldalunkat. Igazából a legfontosabb részeket be is fejezzük. Álljunk is neki!

Gyakorlat - A HTML kód megírása

Most, hogy az oldal kinézetét megterveztük, neki kell állnunk a váz felépítésének. Az oldal semleges témájú egyelőre, a szöveget a nemes és nagymúltú Lorem Ipsum szolgáltatja.

Gyakorlat - az oldal megtervezése

Rövid szünet után újra folytatódik a blog. Mint mondtam, a szünetig, a megszerzett tudásunkkal készítünk el 2 weboldalt. Minden oldal elkészítése a tervezéssel kezdődik. A mai rövid leckében az oldal kinézetét fogjuk megbeszélni, főbb részeit "felismerni".

CSS Átlátszóság, médiatípusok

Elérkeztünk az utolsó CSS leckénkhez, melyben az átlátszóságot és a különböző médiatípusokat foglyuk megnézni. Kezdünk is neki...

CSS Menüsáv és képgaléria

A mai nap elérkeztünk az utolsó előtti CSS leckéhez :D Jee, most mindenki boldog. Miről is fogunk ma beszélni? A W3-as tananyag egyetlen (igazából 2) olyan leckéje, amivel gyakorlatban is CSS-ezhetünk (:D). Egy menüsávot és egy nagyon kezdetleges képgalériát fogunk ma elkészíteni.

---

Egyelőre még ne a kódot nézzétek. Erről a menüsorról beszélek :D
Először is nézzük meg, hogy hogyan csinálnánk meg.
Menüket általában listával, felsorolással készítünk el. Minden listaelem egy link. A listánk vízszintes, a többi pedig formázás. Neki is állhatunk az elkészítésnek.

Tehát létrehozunk egy listát HTML-ben, ahol minden listaelem egy link.


<ul>
<li><a href="#">Kezdőoldal</a></li>
<li><a href="#">Hírek</a></li>
<li><a href="#">Kapcsolat</a></li>
<li><a href="#">Rólunk</a></li>
</ul>

Ezután pedig vízszintessé alakítjuk a listánkat CSS-ben. Ezt az lebegtetés leckében tanultuk.


li{
float:left
}


Ha ezzel megvagyunk, akkor nézzük meg az eredeti menüsoron a "gombokat". A linkek nem csak a szövegen kattinthatók, tehát a linkeket be kell dobozolnunk, hogy az egész területére kattinthassunk.


ul li a{
display:block;
}


A következő lépésben pedig formázzuk a menüpontokat.
Beállítunk neki egy háttérszínt, középre igazítjuk a szöveget, félkövérré tesszük, a szövegszínt fehérre állítjuk, arial betűtípusúra tesszük, eltüntetjük az aláhúzást:


ul li a{
display:block;
width:100px;
background-color:green;
color:white;
padding:10px 0; /*Így a szöveg függőlegesen is középre lesz igazítva*/
text-align:center;
text-decoration:none;
font-weight:bold;
font-family:arial;
font-size:18px;
}


A menüsor magassága a következő lesz: 18px a betű + alul, felül 10px eltartás --> 38px.

Tök más mint az eredeti, de színek, betűtípusok "másolásával" hasonlóvá tehető, de nem az volt a cél, hogy egyformát készítsünk.

---

A másik feladatunk egy képgaléria elkészítése. Pontosan erről beszélek :D
Nem valami látványos, de a célnak megfelel.
Nézzük meg, hogyan épül fel a galéria. Először is áll 4 részből, mindegyik ugyan az, csak a kép más. Tehát elemezzünk most csak egyet.
Van egy terület kék kerettel, benne egy kép, ami ha ki van választva, ugyan olyan keretet produkál, mint a terület. Meg persze van egy képleírásunk.

Készítsük el a HTML kódot. Egy terület kell, benne egy "linkképpel" és egy leírással.

<div id="terület">
<a href="#"><img src="kep"/></a>
<div id="felirat">Képaláírás HTML kezdőknek módra :D</div>
</div>


Formázzuk a "terület"-et 1px-es kék kerettel, automata szélességgel és magassággal (a kép szélességéhez és a kép+leírás magasságához igazodik). Lebegtessük balra, mert több kép lesz egymás mellett. A szöveg (és kép :D) legyen középre igazítva. Adjunk neki 10px margót is, hogy legyen köz a képek között.

#terület{
border:1px solid blue;
width:auto;
height:auto;
float:left;
text-align:center;
}


A "feliratnak" adjunk 130px szélességet, hogy elférjen a kép alatt. A kép meg legyen 110 px széles és 90px magas. A keret színe a képnek fehér és 1px-es.



img{
width:110px;
height:90px;
margin:3px;
border:1px solid #fff;
}
#felirat{
width:130px;
}


Ha ráviszem az egeret a képre, akkor a keret színe legyen kék.


img:hover{
border-color:blue;
}


A link helyének bármit megadhatunk.

A mai leckének ennyi :], holnap befejezzük CSS tanulmányainkat egy talán hosszabb leckével, a további tennivalókat majd akkor ismertetem :D

CSS látszólagos osztályok és elemek

A mai napon megismerkedünk az egyik "legbonyolultabb" CSS "dologgal". Ezek nem mások, mint a látszólagos osztályok és elemek. A linkek formázásánál beszéltünk a a :hover, :active, :visited stb. dolgokról. Akkor még nem tudtuk, hogy ezek látszólagos osztályok.

CSS Lebegtetés, Igazítás

A mi napon megismerkedünk részletesen a lebegtetéssel és az igazítással. A lebegtetéssel ebben a leckében már foglalkoztunk, de ma megnézzük részletesebben.

CCS Megjelenítés és Láthatóság, Pozicionálás

A cím mindent megmagyaráz. A mai leckében megnézzük a különbséget a két "dolog" közt, s részletesen meg is ismerkedünk vele.

CSS csoportosítás, nesting, dimenziók...

Folytatjuk CSS tanulmányainkat ott, ahol pénteken befejeztük. A mai nap témája a címből már kiderülhetett.
Sok formázási módot megtanultunk az utóbbi hetekben, s ezentúl áttérünk a további "formázásokhoz". Azért idézőjelben, mert nem igazán olyan formázás lesz ez, mint az eddigiek, hanem legfőképpen az elhelyezkedésen, s más érdekességeken fogunk változtatni. Kezdjünk is bele.

CSS Doboz modell - eltartás (padding)

A mai (a hét utolsó leckéjében) napon befejezzük a dobozz modell taglalásán és egyben elérkezünk a W3 Advanced szintjéhez. Mindenek előtt szeretném elmondani, hogy ha egyelőre nem érthető teljesen, hogy mi-miért van és hogyan működik, a gyakorló feladatokban biztos világos lesz.

CSS Doboz modell - körvonal (outline)

A mai napon megismerkedünk a körvonallal részletesen. Erről még nem beszéltünk, de a W3-as tananyag szerint meg kell említeni.

A körvonalról annyit kell tudnunk, hogy egy vonal a keret körül, mellyel kiemelhetjük az adott elemet. Azonban nem egyezik meg a border-rel, hiszen nem tartozik az elem méreteihez.

CSS Doboz modell - margók (margin)

A mai napon részletesebben megismerkedünk a margókkal.
Ugye már megtanultuk, hogy mi az margó (terület az elem körük), de most nézzük meg a formázási lehetőségeket.

CSS Doboz modell - keret (border)

Tegnap megbeszéltük a doboz modell alapjait. A hét folyamán részletesen végignézzük a modell elemeit. A mai napon megismerkedünk a keretekkel (border).

Tudjuk, hogy mi a keret ( egy sáv a tartalom és az eltartás körül). Most pedig megismerjük a formázásik lehetőségeket:

CSS A doboz modell

Elérkeztünk a CSS egyik legfontosabb részéhet. A mai napon megismerkedünk a doboz modellel.

A doboz modell lényege, hogy minden elemet értelmezhetünk egy dobozként. Mit is jelent ez? A következő kép jól illusztrálja a lényeget:

forrás: w3schools.com

Tehát egy elem  a következőkből áll:

• margó (margin) - meghatároz egy területet a kereten kívül. Nincsen háttérszíne, mindig átlátszó.
• keret (border) - az elem kerete a tartalom és az eltartás körül.
• eltartás (padding) - meghatároz egy területet a keret és a tartalom között (jól jöhet pl. táblázatoknál)
• tartalom (content) - az elem tartalma.

CSS Táblázatok formázása

Elérkeztünk a W3-as tananyag formázások részének a végére. A mai napon megismerkedünk a táblázatok formázásával. A lecke során a következő táblázatot fogjuk használni:

<table id="egesz"> <tr id="elsosor"> <td id="1elso">1elso</td> <td id="1masodik">1masodik</td> <td id="1harmadik">1harmadik</td> <td id="1negyedik">1negyedik</td> </tr> <tr id="masodiksor"> <td id="2elso">2elso</td> <td id="2masodik">2masodik</td> <td id="2harmadik">2harmadik</td> <td id="2negyedik">2negyedik</td> </tr> <tr id="harmadiksor"> <td id="3elso">3elso</td> <td id="3masodik">3masodik</td> <td id="3harmadik">3harmadik</td> <td id="3negyedik">3negyedik</td> </tr> <tr id="negyediksor"> <td id="2elso">4elso</td> <td id="2masodik">4masodik</td> <td id="2harmadik">4harmadik</td> <td id="2negyedik">4negyedik</td> </tr> </table>

CSS link és lista formázások

A mai napon a linkek és listán formázásával fogunk kicsit részletesebben megismerkedni. 


LINKEK FORMÁZÁSA:


Mindenek előtt meg kell ismerkednünk néhány elemmel:

• a:link - egy normális, még meg nem látogatott link
• a:visited - meglátogatott link
• a:hover - link, melyen éppen rajta van a kurzor
• a:active - kattintás pillanatában a link

Mindegyiket tudjuk külön formázni a CSS legtöbb tulajdonságával (background, color, font-family...)

a:link {color:#FF0000;}      /* még nem látogatott link */
a:visited {color:#00FF00;}  /* már meglátogatott link */
a:hover {color:#FF00FF;}  /* kurzor alatti link */
a:active {color:#0000FF;}  /* kiválasztott link */

Ilyenkor a még nem látogatott link piros, a meglátogatott zöld, a kurzor alatti lila, a kiválasztott pedig kék. 

Itt megnézhetitek működés közben.

Van néhány szabály is, melyeket be kell tartani:

• a:hover-t mindig az a:link és az a:visited után kell megadnunk.
• a:active-t mindig az a a:hover után kell megadni.

CSS betűtípusok és link formázások...

Ma megnézzük, hogy hogyan tudunk beállítani betűtípusokat és miképp tudjuk a linkeket formázni. Álljunk is neki!

Számítógépünkön 2 fajta betűtípust különböztetünk meg.

• talpas (serif) --> rövidebb szövegeknél hasnzáljuk
• talp nélküli (sans-serif) --> egyszerűbb olvasni --> hosszabb szövegeknél használjuk

A CSS-ben is 2 fajta betűtípusról beszélünk:

• általános betűcsaládok (generic family) --> pl.: talpas, talp nélküli
• talpas --> rövid vonal van a néhány betű alján
• talp nélküli --> nincsen rövid vonal az alján :D
• monoszkóp --> minden karakter azonos szélességű!!
• betűcsaládok (font family) -->Arial, Times New Roman

Akit jobban érdekel a téma, olvassa el ezt a cikket. A lecke folytatódik... 

CSS hátterek, szövegformázások...

Most hogy megismerkedtünk a CSS alapjaival, neki is állhatunk a részleteknek is. Tudjuk, hogy a CSS segítségével a HTML-kód elemeit formázhatjuk. Nézzük meg, hogy hogyan adhatunk egy elemnek hátteret és milyen módon alakíthatjuk azt.

CSS alapok

Most, hogy befejeztük a HTML-lel kapcsolatos tanulmányainkat (egyelőre), nekiállhatunk a CSS nyelv megismerésének. Egyik korábbi leckénkben már volt róla szó, szóval ha valami ismerős, akkor az ezért van.

Kezdjünk is neki:

A CSS egy stílusleíró nyelv. Segítségével a HTML kódból eltávolíthatunk minden formázást és a stíluslapot (ami a formázást tartalmazza) külön szerkeszthetjük. Szemléltetésképpen nézzük meg ezt az oldalt. Az oldal jobb oldalán kiválaszthatunk különböző dizájnokat. A szöveg mindig ugyan az, csak a dizájnelemek változnak. Miért jó? Hogyha esetleg megszeretnéd változtatni az oldalad kinézetét, akkor nem kell végigbogarászni a HTML-kódot, hanem egyszerűen csak a stíluslapon belül dolgozunk. Itt egy W3-as példa.

Az XHTML...

A mai leckénkben megismerkedünk az XHTML és a HTML közötti különbségekkel. Rövidke lecke lesz, hiszen csak a különbségeket nézzük meg.

• Mi az az XHTML? - Az XHTML (EXtensible HyperText Markup Language) a HTML tisztább és szigorúbb változata. Majdnem ugyanaz, mint a HTML 4.01. 

Az URL...

Mindannyian használtuk, de biztos sokan nem tudják, hogy mi micsoda.

• Mi az? - Az URL (Uniform Resource Locator, vagyis egységes erőforrás azonosító) a webcím másik neve. Kétféle lehet. Szám: 192.68.20.50 vagy szöveges: http://htmlkezdoknek.blogspot.com (elterjedtebb, hiszen egy szót könnyebb megjegyezni mint számokat)

Amikor egy oldalon egy linkre kattintunk az <a> tag rámutat a címre az interneten. Az URL arra szolgál, hogy az adatoknak címet adjunk (az interneten). Egyetlen címben összefoglalja a dokumentum megtalálásához szükséges 4 információt.

Head és meta...

A mai napon részletesen megnézzük a HTML-kód <head> részét.
A <head> foglalhatja magába a szkripteket, a stíluslapokat vagy azok elérési útvonalát, metaadatokat és sok mást is.
Ebben a leckében a következőkkel fogunk megismerkedni: <title>, <base>, <link>, <meta>.

DTD és egy kis CSS...

A mai napon megtudjuk, hogy mi az a DTD és egy kicsit a CSS-szel is megismerkedünk.

Hibák...

Fontosnak tartottam egy olyan bejegyzést, melyben a hibatípusokat vesszük át.
Szóval.
2 fajta hibáról beszélhetünk HTML, CSS (és más "programnyelvek") írása során.

• szintaktikai hibák - ebben az esetben a weboldal kódja (vagy a program) nem felel meg a nyelv előírásainak.
• szemantikai hiba - ebben az esetben a kód helyes, azonban eredményül nem azt kapjuk, amit szeretnénk.

Elrendezések

Ma egy nagyon érdekes és hasznos dologgal ismerkedünk meg. Ha az oldalunkat szeretnénk "dizájnolni", akkor a jelenlegi tudásunkkal <table> táblázattal készítenénk el. Az első gyakorló feladat is valami ilyesmi volt. Nézzünk is meg egy képet:

Űrlapok || formok...

Elérkeztünk a gyakorlás végéhez. Újra belevágunk az "elméletbe". Mivel már rengeteget foglalkoztunk a HTML-lel, nem fogom annyira elmagyarázni a kódokat, hiszen már magatoktól is rá tudtok jönni. Persze ha valami nem érthető, akkor írjatok egy hozzászólást. A W3-as kezdő szintből kimaradtak a formok, vagy űrlapok. Ezzel fogunk ma foglalkozni.

• Mikor használjuk? - Ha az olvasónak valamilyen módon lehetőséget szeretnénk adni visszajelzésre, adatok megadására.

A <form> definiál egy űrlapot. Leggyakoribb eleme az <input>, ennek a tag-nek a type attribútumának értéke adja meg a beviteli módot. Ezekből fogunk néhányat megnézni:

"text" - Ezzel az értékkel szövegmezőt adhatunk meg. Lényege, hogy segítségével számokat, betűket lehet begépelni.

PÉLDA:

<form>

       Vezetéknév:

       <input type="text" name="vezeteknev">

       <br>

       Keresztnév:

       <input type="text" name="keresztnev">

</form>

Eredmény

Az utolsó feladat

Elérkeztünk az utolsó feladathoz. Itt megtalálhatjátok. Már megint a hármas a miénk.A szükséges fájlok és a kész oldal innen letölthetők.
Álljunk is neki!

Az ötödik feladat...

És itt a mai feladatunk is. Ismét a hármas a miénk. Itt 2 oldalt kell létrehozni. Először csak az egyiket, utána a másikat nézzük meg. A szükséges fájlok és a kész oldalak innen letölthetők.
Álljunk is neki!

A negyedik...

A mai feladat ismét egy érettségi lesz... A hármas feladat a miénk. A szükséges fájlok és a kész weboldal innen letölthető!! Mivel az előző leckék tördelése nem az igazi,  ezentúl textarea-kat használok a kódok megjelenítésére. A textarea nagyon hasonlít egy iframe-ra, csak éppen nem weboldalt jelenítünk vele meg, hanem szöveget. Majd lesz róla lecke, de azért itt a szintaxis:
<textarea>Ide kerül a szöveg!</textarea>


Álljunk is neki:

A paprika csíp...

Folytatjuk az érettségi feladatok gyakorlását. Ezeknek nem az a célja, hogy átmenjünk az érettségin, hanem az eddig megtanult tag-ek, attribútumok és értékek gyakorlása. Jövő héttől folytatjuk a W3-as tananyagot. Utána pedig áttérünk a CSS-re.

A mai feladat itt található. A mi részünk a 2B. Álljunk is neki.

A második feladat

Ma megnézünk egy másik érettségi feladatot :)
Ha valami nem érthető  kódban, akkor először menj végig az eddig megtanult leckéken, ha utána sem érted, hogy miért van, akkor írj egy hozzászólást.
A feladat innen letölthető. A 3-as a miénk. Kezdjünk is neki:

Az első feladat...

A W3-as tananyag kezdő szintjének vége, de a tanulásnak koránt sem. Egy darabig még gyakorolni fogunk, hiszen weboldalt sem fejben szokás csinálni. Mivel sok ötletem nincs, az eddigi érettségi feladatokat fogjuk megnézegetni. Gyakorlásnak megfelel az is :D

Nézzük is meg a 2011. májusi feladatot.

Innen elérhető. A 2. feladat a miénk. 

Van benne egy kis grafika is. Azt nem csináljuk mi most meg. Ajánlom, hogy először mindenki mennyen végig a feladaton maga. Csak az után nézd meg a megoldást itt, ha már kész vagy, vagy ha tényleg nem tudod, hogy mit kell csinálni.

Összefoglaló

A mai lecke egy gyors áttekintés az eddig tanultakról.

Inline framek

Itt van a frames lecke folytatása. Ma az inline framekről, vagy röviden iframekről (apple-ösen iFrame) fogunk beszélni.

• Mi az? - Ugyan az, mint a frame, csak méretét teljes mértékben mi adjuk meg. Tehát olyan, mint egy szövegdoboz.
• Mikor használjuk? - Akkor, amikor a frame-ket. Persze fontos, hogy mikor, mire van szükségünk.

SZINTAXIS:

<iframe src="URL"></iframe>

PÉLDA:

<html>

        <body>

                <iframe src="demo_iframe.htm" width="200" height="200"></iframe>

        </body>

</html>

Framek

Kicsit megcsúszva, de itt a következő lecke is (ami egyébként a W3-as tananyag kezdő fokozatának az utolsó leckéje). A mai nap témája a FRAME (frém).

• Mi az? - A framek segítségével egy html oldalon beül elhelyezhetünk még egy html oldalt. Mindegy egyes html dokumentum különálló lesz a többitől.
• Mikor használjuk? - Frameket használunk például akkor, amikor YouTube videót akarunk beszúrni az oldalra.

SZINTAXIS:

<html>

        <head>

                <frameset>

                        <frame src = "frame.html"/>

                        <frame src = "frame2.html"/>

                </frameset>

        </head>

</html>

PÉLDA:

<html>

        <head>

                <frameset cols = "60%, 40%">

                        <frame src = "frame_a.htm"/>

                        <frame src = "frame_b.htm"/>

                </frameset>

        </head>

</html>

Táblázatok, felsorolások

A mai napon megismerkedünk a táblázatokkal és a felsorolásokkal.


Táblázatok:

• Mikor használjuk? - A modern HTML weboldalakon (a szabványok miatt) a táblázatokat NEM használhatjuk dizájnelemként (pl.: nem oszthatunk fel egy weboldalt táblázatok segítségével). ehhez az úgynevezett box-elvet, vagy doboz-elvet fogjuk alkalmazni. Csak akkor használhatunk táblázatokat, ha az a weboldal tartalmához szükséges. 

SZINTAXIS:

<table border="1">
        <tr>
                <td>1. sor, 1. cella</td>
                <td>1. sor, 2. cella</td>
        </tr>
        <tr>
                <td>2. sor, 1. cella</td>
                <td>2. sor, 2. cella</td>
        </tr>
</table>

PÉLDA:

<html>

        <body>

                <table border="1">

                        <tr>

                              <td>Ez a táblázat első sorának első oszlopa</td>

                              <td>Ez a táblázat első sorának második oszlopa</td>

                        </tr>

                        <tr>

                              <td>Ez a táblázat második sorának első oszlopa</td>

                              <td>Ez a táblázat második sorának második oszlopa</td>

                        </tr>                          

                </table>

        </body> 

</html>

Képek

A mai napon bevezetek egy szintaxis nevű részt is. Ha elértünk hozzá meglátjátok, hogy mit jelent.
Ebben a leckében a képek beillesztéséről fogunk beszélni. (ma csak egy téma a péntekre való tekintettel. Hétvégenként nem biztos, hogy lesznek leckék...)

Kezdjünk is neki a képek beillesztésével:

SZINTAXIS:
<img src="url" alt="valamilyen_szöveg">

PÉLDA:

<html>
        <body>
                <img src="smiley.gif" alt="valamilyenszöveg"/>
        </body>
</html>

Stílusok? Na ne...

Mindenek előtt szereznék elnézést kérni, de elfelejtettem leírni nektek, hogy a W3schools-nak van saját HTML szerkesztője. Amit itt elérhettek.

Az első leckében írtam róla, hogy a modern oldalak HTML kódja nem tartalmaz formázást. Ez így igaz (még mindig :D), azonban egy pár alap dolgot mégis meg kell beszélnünk ezzel kapcsolatban.

Szövegformázások:

• Mikor használjuk? - Biztosan használtatok már valamilyen szövegszerkesztőt. Na, pont akkor és arra használjuk a HTML-ben a szövegformázást, mint szövegszerkesztésben. Hogy mire, az mindenki döntse el maga :D (pl.: aláhúzás, áthúzás, félkövér, dőlt...)

Példa:

<html>

        <body>

                 <p><b>Ez a szöveg félkövér lesz</b></p>

        </body>

</html>

Bekezdések és linkek

Elérkezett a harmadik lecke ideje.
A mai nap a bekezdésekről és a linkekről fogunk beszélni.

Bekezdések:

• Mire is jó az? - A szövegrészek elkülönítéséhez használjuk. Később, ha a CSS-hez érünk, fontos szerepe lesz.

Jöjjön egy példa:

<html>

         <body>

                  <p>Ez egy bekezdés</p>

                  <p>Ez meg egy másik</p>

         </body>

</html>

Attribútumok, címek, bekezdések

A mai leckében folytatjuk tovább az elméleti ismereteinket.

Először is beszéljünk az attribútumokról.

• Mit is jelent? - az attribútum egy tulajdonság, mely egy elemhez hozzá tartozik.
• Mire is jó ez? - a későbbiek folyamán rengetegszer lesz ár szükségünk. Ezek segítségével fogunk képeket, linkeket (stb...) "beszúrni", ráadásul a CSS használatához is elengedhetetlen

Jöjjön egy gyors példa:

<html>

        <body>

                 <a href = "#">Ez egy link</a>

        </body>

</html>

Alapok

Elérkezett az első lecke ideje.
Sajnos az első néhány leckében elmélet lesz, szóval aki meg akar tanulni rendesen weboldalt készíteni, annak meg kell tanulnia ezeket.
Mindenek előtt beszéljünk néhány alap dologról.

• Mi az a HTML? - a HTML egy jelölőnyelv. Ez azt jelenti, hogy az egyes elemeket (képek, szövegek) megjelölünk, majd ezeket a forráskódban, a jel használatával "előhívunk".
• HTML? - Hyper Text Markup Language (hiperszöveges leírónyelv).
• Mit kell beszereznem? - A legtöbb programozási nyelvvel ellentétben nem kell külön programot leszedned ahhoz, hogy weboldalakat készíts. Egyszerűen csak a jegyzettömböt kell használnod. Az oldalon található forráskódokat másold be a jegyzettömbbe, majd mentsd el *.html vagy *.htm kiterjesztéssel. Ha ezt az elmentett fájlt megnyitod, a böngésződben megnyílik az oldalad. Én egyébként, ha nem is szükséges, de ajánlom a Notepad++ alkalmazást, mely nagyban megkönnyíti a munkát.
• FONTOS! - A modern HTML kódok (már csak a szigorúbb szabványok miatt is (pl.: XHTML)) nem tartalmaznak formázást (pl.: nincsen benne félkövér betű, középre igazítás, színezések...). Erre való a CSS. Éppen ezért nem nagyon fogunk formázással foglalkozni a HTML leckék során.
• Mi az a CSS? - Cascading Style Sheet (kaszkád stíluslapok). Ez adja meg a HTML kó egyes elemeinek "kinézetét". 

Most, hogy néhány dolgot megbeszéltünk, nézzünk meg egy forráskódot:

<html>

        <body>
        </body>
</html>

És akkor most elemezzük.
Nyilván ez egy nagyon rövid, egyszerű, semmit nem csináló "weboldal", tehát nincs sok elemezni való rajta. 

Mint láthatod, egy forráskód "párokból" épül fel. Egy pár általában áll egy nyitó <html> és egy záró </html> elemből. Ezeket TAG-eknek ("teg") hívjuk (pl.: html, body...).

<html> - ez a tag foglalja magába az egész oldalt.
<body> - ez pedig az oldal "törzse", vagyis az a része, amit az oldalon látsz. Később ide fognak kerülni a    
                különböző formázási, tagolási és egyéb "beállítások" :)

Próbáld ki! 

1. - Írd be jegyzettömbbe a fentebb látható rövid kódot.
2. - Mi történik, ha kitörlöd a </html> tag-et? 
3. - Mi történik, ha az előző pontot a </body>-val teszed meg?
4. - Mi történik, ha a <body> és a </body> közé beírsz valamit?

Válaszok:

2. Semmi. A weboldalt meg tudod nyitni, azonban a szabványnak nem felel meg. Erről majd később olvashatsz itt.
3. Ugyan az, mint az előző pontnál.
4. Mivel az oldal törzsébe írtál, az oldalon megjelenik a beírt szöveg.

Ezzel a rövid leckével kiveséztük a w3schools első 3 leckéjét.

A következő leckében megnézzük a Notepad++ használatát, majd megírjuk az első weboldalunkat.
Minden olvasónak ajánlott irodalom.

A kezdetek

Érdekel, hogy hogyan készül egy weboldal?
Netán te is meg szeretnéd tanulni, hogyan készül?
Ha igen, akkor jó helyen jársz.

Nem is olyan rég, amikor HTML-el akartam foglalkozni, meglepődve tapasztaltam, hogy nincs (vagy legalábbis ritka) az interneten olyan magyar nyelvű oktató oldal, ahol érthetően, részletesen, lépésről lépésre elmagyarázzák a dolgokat.

Persze angol nyelven elérhető néhány (pl.: http://w3schools.com/html/default.asp), de nem biztos, hogy ezt a tanulni vágyó megérti.

Néhány szó a jövőről:

• Kezdetekben elméleti dolgokról olvashattok, végig megyünk a w3schools HTML-es tananyagon kicsit részletesebben és persze magyarul. 
• Ezután megismerkedünk a CSS-el, s itt is megnézzük a w3schools-os tananyag ehhez tartozó részét.
• Később elemzünk néhány weboldalt. Megnézzük, hogy felismeritek-e a már megtanult attribútumokat, tag-eket (ezekről majd a következő leckében írok).
• A tananyagunk utolsó része egy saját weboldal megírása. 
• Ha már minden alap tudáshoz szükséges ismeretet elsajátítottatok, akkor hasznos tudnivalókat, érdekességeket olvashattok még itt.

Hozzáteszem, hogy a műSÖRváltozás jogát fenntartom :D

Előre is köszönök mindent, nemsokára újra találkozunk.