mhtml:file://d:\vizsga\html\hogyan szerkeszteni weboldalt - HTML alapok.mht

Méret: px

Mutatás kezdődik a ... oldaltól:

Download "mhtml:file://d:\vizsga\html\hogyan szerkeszteni weboldalt - HTML alapok.mht"

Viktória Illésné
8 évvel ezelőtt
Látták:

1 1. oldal, összesen: 6 oldal Webírás Útmutatók Hogyan csinálni weboldalt HTML alapok HTML 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. Dokumentum szerkezete HTML Fej Altalános attribútumok Entitás karakterek Szaknyelv 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

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.

2 2. oldal, összesen: 6 oldal 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 <head> <title>az első weboldalam </title> </head> <body> Az első HTML oldalam. És valamilyen további szöveg. </body> 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: a dokumentum kezdete

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.

3 3. oldal, összesen: 6 oldal 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 <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>

Ezzel a példával leírtam dokumentum alap szerkezetét. Fent említett tagoknak minden HTML dokumentumban van helye.

4 4. oldal, összesen: 6 oldal 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. <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>

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.

5 5. oldal, összesen: 6 oldal <p>egyszerű szöveg.</p> <p>hivatkozás a <a href=" </p> <p><a href="pelda2.php">hivatkozás a 2, példára.</a></p> </body> 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 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 é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 (backgroundcolor) 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

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

6 6. oldal, összesen: 6 oldal 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  jelek közt beillesztjük  Copyright 2009, Ervin Linszter

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

Hasonló dokumentumok

ÁLTALÁNOS WEBLAPSZERKESZTÉSI TUDNIVALÓK ÁLTALÁNOS HTML KÓDOLÁSI TUDNIVALÓK

ÁLTALÁNOS WEBLAPSZERKESZTÉSI TUDNIVALÓK HTML dokumentum = weblap = weboldal = webpage Egy HTML dokumentum kiterjesztései: HTM vagy HTML STÍLUSLAP = Egy vagy több HTML utasítás, értékekkel ellátott paramétereinek