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.

  • 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.