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:

Összefoglaló

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

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>

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>

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.