PHP - gyakorlat - összeadógép

A mai gyakorlatunk is nagyon egyszerű lesz. Egy összeadógépet fogunk készíteni, amely a megadott két adatot összeadja. Kezdjünk bele...

PHP - gyakorlat - sör

A következő néhány leckében nagyon egyszerű kis gyakorlatokat fogunk megnézni. Tényleg nagyon egyszerűeket. Olyanokat, amik bemutatják az eddigi ismereteink gyakorlati használt. A mai napon sörözünk egy kicsit :D

PHP - Űrlapkezelés

Végre elérkeztünk a várva várt űrlapkezeléshez. Megismerkedünk a $_GET és a $_POSTváltozókkal és készítünk egy próbaoldalt is.

PHP - metódusok, függvények

Sokszor említettem a függvényeket, az előre megírt kódokat. Ezeket más néven metódusoknak nevezzük (angolul functions). A mai napon mi is létrehozunk néhány ilyen függvényt.

PHP - tömbök

A mai napon megismerkedünk a más sokszor említett tömbökhöz. A tömbökön kívül megismerkedünk a tömbök bejárásának módszerével is.

PHP - ciklusok

Sokszor akad olyan helyzet, amikor valamit addig kell csinálnunk, amíg valamilyen feltétel teljesül. Ehhez a ciklusok vannak a segítségünkre.

PHP - elágazások

Sokszor van rá szükségünk, hogy "valamit" csak akkor hajtsunk végre, ha egy feltétel teljesül. Tehát például csak akkor küldjön nekem elmailt az űrlap, ha a tárgy, az üzenet és a címzett is ki van töltve. A mai napon ezekkel az elágazásokkal ismerkedünk meg.

PHP - változók, stringek, operátorok

Most, hogy már ismerjük a PHP alapjait, beleugrunk a mély vízbe és belekezdünk a PROGRAMOZÁSBA.  A mai óra anyaga a változók, a stringek és az operátorok.

PHP - az alapok

A mai leckével elkezdjük a PHP tanulását. Terveim szerint először végigmegyünk a W3-as tananyagon, utána pedig néhány gyakorlati feladatot fogunk megnézni.

Gyakorlat - Az oldal "befejezése"

Elérkeztünk az utolsó gyakorlati leckéhez. A mai napon befejezzük az oldalunk formázását, csinosítunk rajta.

BUÉK - 2012

Boldog új évet kívánok minden olvasómnak. 2012-ben is jó HTML tanulást mindenkinek :D

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.