HTML


<!DOCTYPE html>

<html lang="hu" >
<head><title> Az oldal címe </title></head>
<body>
Az oldal tartalma.
</body>
</html>


<HTML> :Azt jelzi, hogy a közte lévő szöveget a HTML szabvány szerint kell értelmeznie a böngé-szőnek. Ennek a tag-nek nincsenek paraméterei, és mindig kötelező lezárni.

<HEAD> :Ez a HTML oldal fejrésze. Sok hasznos információt elhelyezhetünk benne, de egyelőre még csak a következő tag-et tegyük bele:

<TITLE> :A HTML oldal címe, vagy ha úgy tetszik fejléce, ami a böngésző fejlécében jelenik meg.Paraméterei nincsenek, és mindig kötelező lezárni!

<BODY> :A HTML oldal törzse. A nyitó és záró tag közé beírt szöveget a böngésző megpróbálja értelmezni, majd megjeleníteni. Mindig le kell zárni.

Lehetőség van az írt kódba megjegyzést tenni, hogy akinek átadod a kódot vagy esetleg magadnak emlékeztetőül, hogy mit is jelent az adott kód... <!--  Ide jön a megjegyzés szövege  -->

Oldal felépítésének megtervezése - drótváz (wireframe)
Nagyobb egységek egymáshoz viszonyított helyzetének felvázolása

Tartalmi egységek, azaz a <div></div> tag
Különböző tartalmi egységeket (division, section) lehet belecsomagolni, csoportosítva. A weblapok kialakításánál leggyakrabban a <div> tag-eket méretezzük és pozícionáljuk CSS segítségevel, hogy létrejöjjön a weboldal alapvető váza.

Azonosító hozzáadása, avagy az 'id' attribútum:

<div></div>

Bármelyik html tag-nek adható. Ez az azonosítója (identifier), így tudsz majd rá hivatkozni a CSS szabályoknál és a Javascript kódban is.

A CSS-ben az id elé egy kettőskeresztet (#) kell írnod, hogy a program megértse, mire szeretnél szabályt létrehozni:

#azonosíto-elnevezese {
...
}

Egy adott id attribútumot csak egy elemnek adhatunk meg, ettől lesz egyedi, ezért tudjuk azonosításra használni. Például a most használt "azonosíto-elnevezese" id-t másik elem már nem kaphatja meg az oldalunkon. Ehhez kapcsolódóan, egy elemnek egy id-t adjunk. Persze jól tesszük, ha ékezetek nélküli azonosítót választunk, és ha több szóbol áll az azonosítók, érdemes kötőjellel elválasztani.


Új div tag beágyazása:

<div>
<div></div>
</div>

Az új div elemet beleágyaztuk a már korábban elhelyezett másik div elembe (a már elkészített vásznunkra festünk). Így a <div id="azonosito-elnevezese"> elem lett a szülő (parent element) és a <div> lett a gyermek elem (child element).

A gyermek elem "örökli" (inherit) a szülő elem egyes tulajdonságait (például ha már megadtad a szülő elemnek a betűtípusát, nem kell újra megadnod a gyermek elemnél is, csak ha ettől eltérőt szeretnél használni).


Osztályok (class) hozzáadása, avagy a 'class' attribútum:
A class="osztaly-neve" attribútum ugyanúgy adható a HTML elemeknek, mint az id. A különbség az, hogy ugyanazt a class-t több elemnek is megadhatjuk, míg egy adott id csak egy adott elemhez tartozhat. A többször előforduló, több elemre is felhasználható dolgokat szoktuk jelölni azonos osztállyal.

A tagok tartalmazhatnak tulajdonságokat (más néven attribútumokat, jellemzőket) is. Ezek a jellemzők járulékos információk az elem egészére nézve.

Kép beillasztése weboldalba:
Az img tag segítségével képet tudunk az oldalunkkal beilleszteni. Ehhez azonban meg kell mondanunk, hogy hol találja a böngésző a kép állományt. Például, ha szeretnénk egy logót (logo.png) megjeleníteni a weboldalunkon, a következő szöveget kell begépelnünk:

<img src="logo.png">

A tulajdonságok név-érték párokkal (src="logo.png") adhatók meg, egymástól szóközzel elválasztva akár több is.


style: soron belüli stílus definíció.
<p style="color: darkblue; font-family: Arial; font-size: 24pt; text-align: center; "> A CSS alapjai</p>