HTML alapok
Forrás kód megjelenítése - HTML nulladik példa - Tagok = Jelek - Első példa, HTML szerkezet - Második példa, kinézet módosítása - Harmadik példa, hátterek, hivatkozások -
Ez a szöveg csak kitűzi a HTML alapokat. Egyenlőre nagyon egyszerűsítek.
Ha használsz valamelyik grafikus (wysiwyg) szerkesztőt mint például FrontPage-t, nem kell foglalkoznotok HTML-el. De csak amíg nem jelennek meg a problémák. Úgyhogy jobb rögtön megtanulni HTML nyelvet.
Forrás kód megjelenítése
Minden oldal egy lemezen vagy egy szerveren el van mentve forrás kód formában. Ez a kód HTML nyelvel van írva.
Ha meg akartok tekinteni forrás kódot vagy módosítani rajta, lépjetek be a böngésző menüben: Nézet > Forrás kód (vagy View > Source, de lehet más neve is). Kinyílik egy program és lesz benne forrás kód. Ez a program leggyakoribb esetben jegyzettömb (Notepad), de lehet az teljesen más program. Próbáljatok megnézni a forrás kódot, mondjuk most rögtön.
kettő nézet egy fáljra
Ahogy látjátok, egy fáljt két külömböző típusú programal lehet megtekinteni.
- böngészőben - ez megjelenítés
- editorban - ez szerkesztés
Gyakorlatban a dolog úgy nézz ki, hogy az oldalt kinyitom két programban - böngészőben és szerkesztő editorban.
Átírással módosul az oldal.
Ha kód forrás kinyílt a jegyzettömbben, átírással módosíthattok az oldalt. Természetesen az oldalnak lemezen kell lennie.
Ha nem tudjátok, hogy milyen módon létrehozni lemezen oldalt, olvassátok meg Haladás kezdőknek
HTML nulladik példa
Darab HTML kód:
<b>Fett szöveg</b>, <i>szöveg kurzívval</i>. Szép, nemde?
Megjelenik böngészőben így:
Fett szöveg,
szöveg kurzívval. Szép, nemde?
Jelek hegyes zárójelekben "tag"-nak hívunk és dokumentum jelentését vagy kinézetét szabályoznak.
Tip: hegyes zárójeleket a magyar billentyűzeten jobb ALT + < (í gomb) és > (y gomb) írunk.
Tagok = jelek
A HTML fájl egy szokásos szöveg borított HTML tagokkal.
- Tagok megállapítják, hogyan fog szöveg kinézni, azaz milyen lesz a formája.
- Minden tagot hegyes zárójelek zárják el.
Ami nincs hegyes zárójelekkel jelölve, az szöveg, amelyik megjelenik. Szimbolikusan leírva:
<tag> szöveg </tag>, <tag> és megint szöveg és <tag> és megint szöveg
Az első példa - HTML szerkezet
<html>
<head>
<title>Az első weboldalam </title>
</head>
<body>
Az első HTML oldalam.
És valamilyen további szöveg.
</body>
</html>
Ezt a példát
megjelenítheted a böngészőben. A színek csak jobb megértéshez vannak ott, nem fontosak. A tagok jelentése:
<html>
a dokumentum kezdete
</html>
a dokumentum befejezése
<head> és
</head>
elkezdi és befejezi a fejet, amely nem jelenik meg, de tartalmazza néhány fontos paramétert, például
<title> és
</title>
megadja dokumentum nevet (eltérhet a fájl névtől).
<body>
Ami <body> és a </body> között van, meg fog jelenni böngészőben. <body> egy tag, melyel kezdődik a dokumentum saját törzse (angol. body = törzs).
Ezzel a példával leírtam dokumentum alap szerkezetét. Fent említett tagoknak minden HTML dokumentumban van helye.
Ha játszani szeretnétek HTML oldallal, jó ötlet átmásolni fent megadott kódot valamilyen fájlba saját lemezre (hardiszk) és kisérletezni vele.
Páros tagok
Példából nem nehéz bekövetkezni, hogy a tagok párban szoktak lenni <valami> és </valami>.
- A <head> fej kezdete és </head> a befejezése
- A <body> oldal törzse kezdete és a </body> az oldal törzs befejezése
- A <b> fett szöveg kezdete és </b> a fett szöveg befejezése
És így tovább.
Páros tagok mellet még vannak nem páros tagok, melyeknek nincsenek záró befejező tagok. De ezekből nincs olyan sok. Példák nem páros tagokról:
- <img> egy kép tag és olyan mint </img> HTML-ben nem létezik.
- <br> egy sortörés tag, de </br> nem létezik.
Némi leírás nem páros tagokról lejjebb van.
Második példa - megjelenése változtatása
<html>
<head>
<title>A második weboldalom</title>
</head>
<body>
<h1>Cím</h1>
<p>Bekezdés <b>fett szöveggel </b>, s <i>kurzív</i>.
<span style="color: red;">Piros szöveg.</span></p>
<h2>Másodrangú cím</h2>
<p>Bekezdés <i><b>fett kurzív szöveggel. </b></i><br>
A szöveg sortörés után is ugyan abba a bekezdésbe tartozik.</p>
</body>
</html>
Ezt a példát is lehet megjeleníteni böngészőben. Ez itt már egy kicsit bonyolultabb de ehez agyatok van.
<h1></h1>
Elsődleges cím meghatározása.
<h2></h2>
Második szintű cím (fejezet cím, közcím). Lehet használni hat cím szintet (<h6>-ig). Megjeleníti különböző méretekben fontosság szerint.
<p></p>
Bekezdés meghatározása. Talán leghasználtabb tag. Vége mögé böngésző csinál egy törést és kihagy vertikálisan helyet.
<b></b>
Fett szöveg lesz tagok közt.
<i></i>
Kurzív.
<span></span>
Tag pár amely meghatározza különböző szöveget.
<span style="color: red;"> , </span>
Ebben az esetben a becsomagolt szövegnek a színe piros lesz. Ez az első tag, amelynek van úgynevezett
attribútuma. Attribútum egy "style" és az értéke "color: red" (angol. szín: piros). Ezzel az attribútum segítségével style= lehet meghatározni szöveg megjelenítését, becsomagolt bármilyen taggal. Gyakorlatban legtöbb tagnak van valamilyen attribútuma, eddig próbáltam kímélni ezeket.
<br>
Sor törés, úgynevezett puha enter. Ez a tag után szöveg mindig következő sorban fog kezdődni, de ez nem bekezdés. Figyelem, ez a tag nem páros, ez azt jelenti, hogy nem létezik semmilyen </br>.
Most már ismeritek minden szükséges taggot szöveg szerkesztéshez.
Harmadik példa - hátterek és hivatkozások
Ebben a példában próbálom leírni két össze nem függő dolgot, már egy kicsit nehezebb.
<html>
<head>
<title>Harmadik példa, háttérszín és a hivatkozások</title>
</head>
<body style="background-color: green; color: yellow;">
<h1>Háttér és hivatkozások</h1>
<p>Egyszerű szöveg.</p>
<p>Hivatkozás a
<a href="http://www.google.hu">Google-re
</a>. </p>
<p>
<a href="pelda2.php">Hivatkozás a 2, példára.
</a></p>
</body>
</html>
Jelenítsetek meg a példát böngészőben és próbáljátok ki a hivatkozás működését. Van itt nekünk egy új tag <a> és egy pár új attribútum.
<a href="cím"> </a>
Ezek a taggok közt szöveg (vagy kép) meg fog jelenni mint hivatkozásnak a szövege ("a" mint angol Anchor = hivatkozás).
href
Az "a" tag attribútum egyenlő úttal hivatkozott fájlhoz. Itt használják vagy relatív vagy abszolút címet.
abszolút cím
http://www.satöbbi.hu formában használunk. Példában Google címét használtam.
relatív cím
ha hivatkozni akarok saját fájlomra, felesleges odaírni azt a http:// és az egész utat. Legjobb az, hogyha fájl ugyanabban a könyvtárban van mint az aktuális weboldal. Ilyenkor relatívan lehet hivatkozni rá. Elég beírni csak fájl nevét és a böngésző ezt megérti (Példában ilyen módon van hivatkozva a másik fájlra pelda.php). Amennyiben a célzott fájl egy másik közeli könyvtárban tartózkodik, elég beírni href="könyvtár/fajl.html". Ha a könyvtár egyel magasabb van aktuális könyvtártól, használunk szokásszerűen két pontot.
<body style="background-color: green; color: yellow;">
egy módszer, hogyan megadni színeket a dokumentum egész törzsének.
style
<body> tag attribútuma, mely meghatározza az egész dokumentum
kinézetét. Ebben az esetbe beállítja az oldal hátterét (background-color) zöld színre és a szöveg színét (color) sárga színre. Style attribútumot már az előző példában használtam fel. Lényegében már a kaszkád stílusról van szó (CSS). Kaszkád stílusok alap eszköz az oldal kinézetének a megváltoztatásához. Style attribútummal lehet megváltozni a kinézetet.
HTML általános Szintaktika
HTML nyelvnek van egy pár alapelve, melyet jó megemlíteni:
- Betűk mérete nem lényeges, <body> ugyanaz mint a <BODY>
- Címekben és fájlnevekben lényeges a betű mérete, nem lehet itt se betűköz se magyar ékezetek
- Tagokat, melyeket böngésző nem ismeri fel, mintha nem léteznének
- Tag elején nem lehet betűköz, például <br> rosszul van.
- két betűköz egymás után (vagy több) ugyanolyan mintha csak egy lenne
- sor vége a kódba úgy értelmezhető mint egy betűközt
- Az attribútum neveket mindig jó idéző jelekbe rakni, de nem teljesen szükséges, ha belűl nincs betűköz
- © típusú szimbólumokat forráskódba &valami; szólánccal írunk
- Megjegyzés a forráskódba <!-- és --> jelek közt beillesztjük <!-- Ez itt egy megjegyzés, mely nem fog megjelenni. -->
