Webszerkesztés A HTML alapjai
A Hyper Text Markup Language A forráskódban alapvetően a lapon megjelenő szöveget és a megjelenést meghatározó utasításokat látjuk Az utasítások < > jelek között foglalnak helyet A megjelenő szöveg a < > jeleken kívül A HTML elemeket tag-nek is hívják Egyéb elemek (kép, hang) is található a weblapokon Ezek mindig külön fájlban vannak A forráskód hivatkozik rájuk
A HTML elemekről általában Egy lap forráskódja egyszerű szöveges állomány Bármilyen txt formátum létrehozására lépes szövegszerkesztővel készíthetünk, szerkeszthetünk HTML forráskódot HTML elemek általános alakja: <elemnév paraméter=érték>erre a szövegre hat az elem</elemnév> Az </elemnév> záró tag kikapcsolja a „/” jel nélküli nyitó pár által bekapcsolt funkciót Egy tag csak a nyitó és záró forma között elhelyezkedő tartalomra hat
Példák tag-ekre A paraméter értékét mindig idézőjelbe tesszük <font size=„5”>alma</font> Egy elemnek akár több paramétere is lehet <a target=„jobb” href=„jobbstart.htm”>Nyitólap</a> Vannak olyan elemek, amelyeknek nincs záró párjuk <br> <img> A HTML kódban nem, de az XHTML-ben akkor is le kell zárni őket: <br /> (üres tag-ek) A tag-ek egymásba ágyazva fordulnak elő lapjainkon <p align=„center”><font size=„5”>alma</font></p> Egy nyitó tag-et vagy egy másik nyitó tag követ, vagy a saját záró párja, tehát sohasem használhatjuk őket átlapoltan
Kisbetűk, nagybetűk a forráskódban A tag-ek írásmódja: A HTML nem érzékeny a kis- és nagybetűkre Mindegy, hogy Href, HREF, href XHTML-ben csak a kisbetűs írásmód helyes href Fájlnevek írásmódja Ha a webhelyünket kiszolgáló szerver megkülönböztet kis- és nagybetűket (pl.: Unix, Linux) akkor nem mindegy Eger.htm / eger.htm
A forráskód váza
Karakterformázás, a font tag paraméterei Size <font size=„5”>betűméret: 5</font> A méret 1-től 7-ig terjedő egész érték lehet Color <font color=„#0000FF”>kék szöveg</font> A karakterszín beállításhoz RGB kódolást használunk A színkód 16-os számrendszerben (hexadecimális) van megadva A színkód helyett használhatunk szabályos neveket is <font color=„blue”>kék szöveg</font> 216 Web Safe Color Chart: http://www.web-source.net/216_color_chart.htm Face <font face=„courier new”>courier betűk</font> Egyszerre több paraméter is megadható: <font face=„courier new” size=„5” color=„blue”>courier new, 5-ös méret, kék</font> A szöveg alapértelmezett betűszínét a <body> tag-gel is beállíthatjuk <body text=„green”>
Karakterstílusok A <big> és a <small> tag-ek az alapértelmezett betűmérethet képest értendő, nem az aktuálishoz képest Több szóköz nem használható a szavak közötti hézag növelésére ( )
Bekezdések formázása, címsorok A szövegszerkesztésben megszokott négyféle igazítást használhatjuk A sorkizárás a szöveg utolsó sorában nem érvényesül A sortörés helyén a <br> üres elemet kell használnunk, ez nem jelent új bekezdést is Címsorok: <hx> … </hx>, ahol x = 1.. 7 (betűméretek: 24, 18, 14, 12, 10, 8 félkövér) <h1 align=„center”><font face=„arial”> … </font></h1>
Képek a weblapon Az Interneten a gif és a jpg formátumú képek használatosak A gif formátum egyszerre csak 256 színt kezel, viszont az animált gif formátum segítségével rövid, rajzfilmjellegű alkotásokat illeszthetünk a lapokra a kis fájlméret megtartása mellett A jpg formátum adatvesztő tömörítő eljárással dolgozik, de megfelelően alkalmazva a kis veszteséget ellensúlyozza a kis fájlméret
Képek a weblapon Képek beillesztéséhez az <img> tag-et használjuk <img src=„macska.jpg”> Nincs záró párja XHTML: <img src=„macska.jpg” /> Az abszolút elérési úttal adódhatnak problémák, érdemes relatív elérési utat használni „../kep/kutya.jpg”
Az <img> tag paraméterei src A megjelenítendő kép elérési útvonala alt Az a szöveg, ami akkor jelenik meg, amikor megállunk az egérrel a kép felett width, height A kép szélességét és magasságát adhatjuk meg Paraméter nélkül eredeti méretben jelenik meg border A képek körbefogó szegélyének mérete Paraméter nélkül nincs szegély hspace, vspace A képek és a környező szöveg távolságát adhatjuk meg align Szöveghez viszonyított függőleges igazítás top center bottom
Háttér beállítása Szín beállítása háttérként Kép beállítása háttérként <body bgcolor=„#00ffff”> A szín megadása a korábban ismertetett módon történik Kép beállítása háttérként <body background=„levelek.gif”> A kép első példánya a bal felső sarokba kerül, majd a többi írásirányban folyamatosan kitölti a böngésző ablakát Görgetés esetén a kép a tartalommal együtt mozog <body background=„levelek.gif” bgproperties=„fixed”> Görgetés esetén a kép nem mozog együtt a tartalommal Háttérhang alkalmazása <bgsound src=„hang.wav” loop=„-1”> A loop paraméter határozza meg a hang ismátlődését A „-1” érték jelenti a folyamatos ismétlődést, különben az érték által megadott számban ismétlődik
Felsorolás Az <ul> elem nyitó és záró formája között kell elhelyeznünk A felsorolás elemeit a <li> tag jelöli, nincs záró párja A type paraméter lehetséges értékei: disc circle square
Többszintű felsorolás Nincs hozzá külön elem Egymásba ágyazott felsorolásokkal oldható meg
Sorszámozás <ol> tag-gel Paraméterei: type start A: nagybetűk a: kisbetűk I: nagy római számok i: kis római számok 1: arab számok start Hanyas sorszámmal kezdődik a sorszámozás
Többszintű sorszámozás
Hiperhivatkozások Általános alakja: <a>ide kattints</a> megfelelő paraméterezéssel Az ide kattints szöveg helyére feltétlen kell valamit írni (vagy egy képet beszúrni), hogy a böngészőben tudjunk hová kattintani Az <a> tag legfontosabb paramétere a href, ami különböző lehet funkciójának megfelelően Tartózkodjunk az abszolút hivatkozásoktól
href Webhelyünk egy adott oldalára hivatkozás <a href=„sonka.html”>link a sonka oldalára</a> Ez akár egy fájl is lehet: midi, jpeg, avi, stb. Egy interneten található oldalra való hivatkozás <a href=„http://www.origo.hu”>egy portáloldal</a> Kötelező a protokolljelölés Hivatkozás email címre <a href=„mailto:mekkelek@barkacs.hu”>Írj levelet</a> Hivatkozás FTP-re <a href=„ftp://ftp.valahol.hu”>ftp hely</a>
href Ha képhez szeretnénk hiperhivatkozást rendelni, akkor az <img> tag-et kell beágyazni az <a> … </a> elempárba <a href=„macska.htm”><img src=„macska.jpg”></a> Ha új ablakban szeretnénk megjeleníteni a hivatkozott oldalt <a target=„_blank” href=„sonka.html”>sonka</a>
Könyvjelzők A könyvjelző segítségével a lap egy megadott pontjára ugorhatunk, tehát előbb valamilyen módon meg kell jelölnünk ezt a helyet <a name=„italok”>Itt a jelölt pont</a> A lapon megjelenő szöveg és a könyvjelző neve között nincs összefüggés Könyvjelzőre hivatkozás <a href=„#italok>Ugrás az italok nevű pontra</a> <a href=„kerteszet.htm#viragok>Lássuk a virágokat</a>
Táblázatok Három tag-re van szükség <table> … </table> Jelzi, hogy egy táblázat fog következni <tr> … </tr> A táblázat egy sorának meghatározására <td> … </td> A soron belül az egyes cellákat adja meg
Táblázatok
A <table> tag paraméterei border A táblázat széleinek szegélyvastagsága bordercolor A táblázat szegélyének színe bordercolorlight 3D-s megjelenítésnél a bal szélső és felső szegélyek világosabb színe bordercolordark 3D-s megjelenítésnél a jobb szélső és alsó szegélyek sötétebb színe width A táblázat szélessége százalékban vagy képpontban height A táblázat magassága százalékban vagy képpontban align A táblázat vízszintes elhelyezkedése (left, right, center) bgcolor A táblázat háttérszíne background A táblázathoz rendelt háttérkép
A <tr> tag A <tr> … </tr> tag-ekkel definiáljuk a táblázat sorait Paraméterei: bordercolor A sor celláinak szegélyszíne bgcolor A sor celláinak háttérszíne align A szöveg vízszintes elhelyezkedése a cellában (left, right, center, justify) valign A szöveg függőleges elhelyezkedése a cellában (top, bottom, middle)
A <td> tag A <td> elem segítségével adjuk meg az egyes cellák jellemzőit. Paraméterei: bgcolor Az adott cellára vonatkozó háttérszín megadása background Az adott cellára vonatkozó háttérkép megadása align A szöveg vízszintes elhelyezése az adott cellán belül valign A szöveg függőleges elhelyezése az adott cellán belül
Keretek (frame) Egy keretes megjelenésű lap megalkotásához minimálisan eggyel több lapra lesz szükségünk, mint ahány keretet használunk Egy lap írja le a keretszerkezetet Ez a lap csak a böngészőablak részekre osztását írja le, illetve megadja, hogy melyik keretben melyik lap jelenjen meg Keretenként egy lap határozza meg a keretben megjelenő tartalmat
Keretek
Keretek
Hivatkozás keretben Alapértelmezésként a hivatkozott lap a hivatkozást tartalmazó lap/keret tartalmát cseréli le Ha szeretnénk megadni, hogy a hivatkozott oldal melyik keretben jelenjen meg, akkor be kell állítani a „cél”-keretet <a target=„jlent” href=„kifli.htm”>Ezt nézd meg</a> A target paraméter értékének annak a keretnek a nevét kell megadni, amelyben a hivatkozott lapot szeretnénk látni _top: a keretszerkezet eltűnik és teljes ablakban jelenik meg a hivatkozott lap _blank: a hivatkozott lap egy új böngészőablakban jelenik meg
Beágyazott keretek Dokumentum a dokumentumban A lapon megadunk egy téglalap alakú területet, amely önálló ablakként fog viselkedni Tetszőleges lapot jeleníthetünk meg benne Létrehozásához az <iframe> tag-et használjuk A beágyazott keret helyét nem paraméterrel adjuk meg A beágyazott keret helyét az adja meg, hogy melyik bekezdésbe illesztjük be Az is lehetséges, hogy egy táblázat egyik celláját beágyazott kerettel töltjük ki
Az <iframe> tag paraméterei name A beágyazott keretünk neve Ezt alkalmazzuk a hivatkozásokban width és height A beágyazott keretünk szélessége és magassága Megadhatjuk abszolút módon képpontban, vagy relatív módon százalékban src Annak a lapnak a neve és elérési útja, amelyet a beágyazott keretünkben szeretnénk megjeleníteni scrolling A görgetősáv viselkedését határozza meg Lehetséges értékei: no, yes, auto
Az <iframe> tag paraméterei frameborder Jelenjen meg szegély vagy nem Lehetséges értékei: 1, 0 marginwidth és marginheight A beágyazott keretben lévő tartalom milyen közel mehet a keret két széléhez, illetve az aljához és tetejéhez hspace és vspace Vízszintesen és függőlegesen a keret és az esetleges környező tartalmak közötti távolságot adja meg align A beágyazott keret lapon belüli elhelyezkedését szabályozza left, right, center top, bottom, absmiddle: a keret melletti szöveghez viszonyítva