Webszerkesztés

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 • <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 • 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

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

Webszerkesztés

Webszerkesztés

Presentation Transcript