1. Főoldal
  2. Cikkek
  3. Dev
  4. Legyen egyedi weboldalad - Második rész: Felépül az oldal

Legyen egyedi weboldalad - Második rész: Felépül az oldal

Dev

Jobb később, mint soha - úgyhogy itt is lenne a "Legyen egyedi weboldalad" cikksorozat második része!

Gondolom azt mindenki kiderítette, hogy ebben a cikkben az alap HTML oldal felépítésével fogunk foglalkozni. Nem is húznám a szót, mert egyszerű és érthető dologról van szó, nem lehet róla sokat írni.

Egy HTML oldalban (azaz fájlban) mindent <html> és </html> tagek közé teszünk. Az egész fájlt viszont a <!DOCTYPE html> sorral kezdjük (a böngésző ebből fogja tudni, hogy milyen típusú dokumentummal van dolga). Ezután jönnek az előbb említett <html> és </html> tagek:

<!DOCTYPE html>
<html>

</html>

Az oldalnak 2 fő része van: a head és a body. A head rész az oldal címének megadására, meta adatok beírására, valamint CSS és JavaScript fájlok meghívására szolgál. A body nyitó- és zárótagja közé kerül az oldalunk - amit a felhasználó lát. No, de mielőtt tovább mennénk, írjuk is be ezeket a tageket a fájlunkba:

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>       

A és tagek közé egyelőre az oldal címét és a CSS fájlunk forrását írjuk be, valamint a karakterkódolást is megadjuk (ez esetben UTF-8).

UTF-8 karakterkódolás:
Oldal címe (title tagek közé): Oldal címe
CSS forrása (a style.css helyére akár teljes link is mehet, ez attól függ, hogy hol található a CSS fájlunk):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Oldal címe</title>
<link rel="StyleSheet" href="style.css" />
</head>

<body>

</body>
</html>

A <body> és <body> tagekre a sorozat következő részében szeretnék kitérni, ott már kicsit megnézzük a CSS fájlunkat is!

Jó webszerkesztést kívánok mindenkinek! :)

kovjonas profilképe
Kovács Jónás @kovjonas +86 Hobbi web-designer, kezdő 3D modellező, LEGO őrült.
2 hozzászólás
Hozzászóláshoz jelentkezz be vagy Regisztrálj!
Jó lett, várjuk a következőt! :D
2015.01.24 16:59
Ó, köszi! :D Remélem jövő hét folyamán érkezik a kövi.... :)
2015.01.24 23:21