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.