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>

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.