HTML-ben kell létrehozni az oldal alapját, ebbe tudjuk kialakítani a megjeleníteni kívánt részeket. Nagy vonalakban ez így néz ki:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>A weboldal címe</TITLE>
<STYLE>Stílus-definíciók</STYLE>
<META HTTP-EQUIV="...">
</HEAD>
<BODY>
Ide ír jön a megjeleníteni kívánt tartalom
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>A weboldal címe</TITLE>
<STYLE>Stílus-definíciók</STYLE>
<META HTTP-EQUIV="...">
</HEAD>
<BODY>
Ide ír jön a megjeleníteni kívánt tartalom
</BODY>
</HTML>
Mindig a dokumentum típus definíciójával kezdődik. A DOCTYPE,
másnéven DTD azért szükséges, mert ez alapján határozzák meg a böngészők
a renderelési módot, valamint a validátorok , hogy milyen szabályokat
kell ellenőrizniük. Ez felel meg a HTML5-ös szabványnak, mely számos új elemet tartalmaz, melyet egy másik részben részletezni fogok.
A dokumentumot a html tagek fogják össze, azon belül található a head, melybe számos fontos információt lehet feltüntetni honlapunkkal kapcsolatban, így a weboldal címét, mely a böngészőben való megnyitáskor lapfülön olvasható lesz.
Az oldal kinézetét stíluslapokkal fogjuk meghatározni, melyet általában külön dokumentumban fogunk megírni, de meg meg lehet adni a head részben, valamint a dokumentumtörzsben is.
A meta tagok kitöltése fontos feladat, alapos átgondolást igényel, mert a keresőrobotok az alapján tájékozódnak főként oldalunkról.
Karakterkészlet megadása:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
A descripton tagben kell 2-3 mondatban összefoglalni az oldal lényegét, körülbelül 255 karakterben.
<meta name="description" content="Oldal leírása...">
A keywords tagben az oldalra vonatkozó kulcsszavakat kell megadni vesszővel elválasztva. Nem szabad túlzásokba esni, mert a túlzsúfolás kitiltást is eredményezhet bizonyos keresőkben.
<meta name="keywords" content="Kulcsszavak listája...">
A body tagek közé kerül a tartalmi rész, melybe tehetünk illusztrációt kép, videó formájában.
<h1></h1>...<h6></h6> - címet definiál.
<p></p> - tag határoz meg egy bekezdést.
<ul></ul> - lista megjelenítésére alkalmas, mely lehet számozott <ol></ol>, vagy számozatlan <li></li>
<img src="fajlnev.jpg" alt="kép szövege" title="kép címe"> - így adhatunk meg egy képet.
A következő részben egy kétoszlopos minta sablont fogunk elkészíteni dives kialakítással.
Nincsenek megjegyzések:
Megjegyzés küldése