2011. október 31., hétfő
2011. október 30., vasárnap
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>
2011. október 29., szombat
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>
2011. október 25., kedd
Táblázatok, felsorolások
A mai napon megismerkedünk a táblázatokkal és a felsorolásokkal.
Táblázatok:
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>
<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>
2011. október 21., péntek
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>
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>
2011. október 20., csütörtök
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:
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>
2011. október 19., szerda
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:
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>
2011. október 18., kedd
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>
2011. október 17., hétfő
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.
<html>
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".
<html>
<body>
</body>
</html>
</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.
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!
<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!
- - Írd be jegyzettömbbe a fentebb látható rövid kódot.
- - Mi történik, ha kitörlöd a </html> tag-et?
- - Mi történik, ha az előző pontot a </body>-val teszed meg?
- - 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.
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.
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:
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.
Feliratkozás:
Bejegyzések (Atom)