ALAPFOKÚ HTML TANFOLYAM 1. rész
A legegyszerűbb bemutatkozó oldal például úgy készíthető el, hogy egy egyszerű szövegszerkesztővel - mint például a Windows Notepad (Jegyzettömb) című programja az alábbi szöveget gépeljük be és a fájlnak ".htm" kiterjesztésű nevet adunk (például hello1.htm).
Helló!
Látható, hogy dokumentumunk elejére -t és a végére -t kell írni. ez jelzi a Netscape vagy az Ex- plorer számára, hogy a dokumentum HTML nyelven van írva.Hamar elragadtathatjuk magunkat és az alábbi szöveget gépeljükbe, akkor meglepődünk.
Helló világ!
Mindenkit üdvözlök.
Árpád
Ugyanis a szépen egymás alá írt szöveg egymás mellé került. Ha képernyőn is úgy szeretnénk látni,ahogy begépeltük, akkora szöveget tegyük a
és a
jelek közé. (A "PRE" a PREFORMATTED = "előre formázott" rövi- dítése.)
Helló világ!
Mindenkit üdvözlök.
Árpád
Ezzel rendben is volna a szövegszerkesztés,ha nem volna egy kis probléma.Ez a szöveg tényleg mindig így fog ki- . nézni.Hosszabb sorok esetén nem fér el a képernyőn és egyéb kínos tünetek. Ezért sokkal kulturáltabban járunk el,
ha sorvége gyanánt -t bekezdés gyanánt
Árpád
ALAPFOKÚ HTML TANFOLYAM 2. rész
Ezen a héten a betűtípusok, stílusok között barangolunk.Ha kövéríteni, aláhúzni, dönteni stb. szeretnénk szövegünket, akkor a megfelelő szövegrész elé és után kell beírni a megfelelő jeleket.
Kövér (bold) betűk Dőlt (italic) betűk Aláhúzott (underlined)betűk
Persze az előbbi parancsok kombinálhatók is.
Kövér aláhúzott betűk Dőlt aláhúzott betűk
A betű mérete is növelhető és csökkenthető valamint abszolút mértékben is megadható.
Eggyel növeltük a betűméretet.
2-vel csökkentettük a betűméretet.
6-os betűméret
Normál betűméret
A betű típusa is változtatható:
Arial betűtípus.
Times New Roman CE betűtípus Ha a gépén nincs ilyen, akkor az alapértelmezés szerinti betűtípus jön elő.
Könnyen készíthetünk különféle fejléceket az alábbi parancsokkal, az alábbi parancsok automatikusan új bekezdést is létrehoznak:
1-es fejléc
2-es fejléc
3-as fejléc
4-es fejléc
5-ös fejléc
6-os fejléc
ALAPFOKÚ HTML TANFOLYAM 3. rész
A HTML dokumentumok leghasznosabb tulajdonsága a hiperlinkek adta gazdag kapcsolat¬rendszer. A hiperlinkekre
SZÖVEG
típusú formula begépelésével hivatkozhatunk. A "KAPCSOLAT" kifejezésbe írva kell meghatároznunk, hogy a "SZÖVEG" mezőre rákattintva milyen kapcsolat (levél, másik HTML dokumentum, stb) jöjjön létre.
(A"href" a hyperlink reference - hiperkapcsolat referencia rövidítése )
Az alábbi szöveg begépelésével olyan linket hozunk létre, hogy e sorok szerzőjének nevére rákattintva levelet küldhetünk neki. A "mailto:" (levélküldés) szöveg után a címzett e-mail címét kell beírnunk.
Szemők Árpád
Ha egy másik web-dokumentumra hivatkozunk, akkor a KAPCSOLAT mezőbe a "http:" után kell írnunk a kívánt do- kumentum címét. Az alábbi példában az iNteRNeTTo Szeged címlapjára ugorhatunk.
Az iNteRNeTTo Szeged címlapja
Ha a másik web-dokumentum ugyanabban a könyvtárban található, akkor csak a fájl nevét kell beírnunk. Példánkban tanfolyamunk bevezető oldalára ugrunk, ami a "html.htm" nevet viseli.
A HTML tanfolyam bevezető oldala
Ha a másik könyvtárban, de ugyanazon a szerveren van a fájl, akkor a jól ismert DOS-ra emlékeztető szintaxis alkal- mazható.
Címlapunk kettő könyvtári szinttel feljebb van. A moziműsor.
Egy dokumentumon belül is ugorhatunk, illetve egy másik dokumentum adott pontjára is ugorhatunk, ha megfelelő címkéket helyezünk el.
SZÖVEG
A "CIMKE" kifejezés egy tetszőleges karakteres kifejezés lehet. A címkére így hivatkozhatunk.
SZÖVEG Ezen oldal tetején elhelyeztünk egy címkét: Így ugorhatunk fel. Vagy így. Esetleg így.
Alapfokú html tanfolyam 4. Rész
A listakészítéshez több eszköz áll rendelkezésünkre. Rendezés nélküli listát az alábbi módon készíthetünk:
első elem
második elem
harmadik elem
Az
jelzi, hogy rendezetlen lista (ul = unordered list) kezdődik, a
a lista egy elemét jelöli (li = list item), a rendezetlen listát egy
zárja le.
Az eredmény:
• első elem
• második elem
• harmadik elem
A rendezett listánál az
helyett (ol = ordered list) kerül:
első elem
második elem
harmadik elem
Az eredmény:
1. első elem
2. második elem
3. harmadik elem
Definíciós listát is készíthetünk, ekkor rövid fogalmakat magyarázunk meg. A definíciós lista a
parancs (dl = defintion list) és a
parancs közé kerül:
fogalom
az első fogalom magyarázata
fogalom
a második fogalom magyarázata
A
az fogalom (dt = definition term) elé kerül, míg a
a fogalom leírása elé.
fogalom
az első fogalom magyarázata
fogalom
a második fogalom magyarázata
ALAPFOKÚ HTML TANFOLYAM 5. rész
Ha "rendet akarunk teremteni" a képernyőm,akkor igen korlátozottak a lehetőségeink,hiszen nem tudhatjuk ki milyen képernyőfelbontással, milyen Web-böngészővel, mekkora ablakot használva tekinti meg munkánkat. A táblázazatok használata igen hatékony lehetőséget jelent. Táblázat készítéséhez a
parancsot kell kiadni a sorokat a
jelek közé kell helyeznünk (tr=table row=tábla sor),a cellákat a
(td=table data=tábla adat) szim- bólumoknak kell határolniuk. Az alábbi példa egy 2x3-as táblázatot állít elő:
I. sor 1. elem
I. sor 2. elem
I. sor 3. elem
II. sor 1. elem
II. sor 2. elem
II. sor 3. elem
Melynek eredménye:
I. sor 1. elem
I. sor 2. elem I. sor 3. elem
II. sor 1. elem II. sor 2. elem II. sor 3. elem
A rend kétségtelen, de jó volna a cellákat vonallal elválasztani. Ezt a border (határ) paraméter megváltoztatásával te- hetjük meg. Ez alaphelyzetben 0.
I. sor 1. elem
I. sor 2. elem
I. sor 3. elem
II. sor 1. elem
II. sor 2. elem
II. sor 3. elem
Melynek eredménye:
I. sor 1. elem
I. sor 2. elem I. sor 3. elem
II. sor 1. elem II. sor 2. elem II. sor 3. elem
Kicsit szorosan vannak az adatok, ezen a cellpading (cellabélelés) paraméter megváltoztatása segít, ami a cellahatár és az adatok távolságát mutatja meg. Ez alaphelyzetben 0-2 között lehet.
I. sor 1. elem
I. sor 2. elem
I. sor 3. elem
II. sor 1. elem
II. sor 2. elem
II. sor 3. elem
Melynek eredménye:
I. sor 1. elem
I. sor 2. elem I. sor 3. elem
II. sor 1. elem II. sor 2. elem II. sor 3. elem
A cellspacing, a cellák távolságát jelöli. Ez alaphelyzetben 0-1 között lehet.
I. sor 1. elem
I. sor 2. elem
I. sor 3. elem
II. sor 1. elem
II. sor 2. elem
II. sor 3. elem
Melynek eredménye:
I. sor 1. elem
I. sor 2. elem I. sor 3. elem
II. sor 1. elem II. sor 2. elem II. sor 3. elem
ALAPFOKÚ HTML TANFOLYAM 6. Rész
A táblázatnak nevet is adhatunk, melyet a
(caption=felirat) szimbólumok közé kell elhelyez- nünk. Azt, hogy a név a táblázat alá vagy fölé kerüljön az align=top illetve align=bottom opcióval dönthetjük el. (align=elrendezés, top=felül, bottom=alul). Ha az alignt nem tüntetjük fel, az alaphelyzetben top. Az alábbi példák egy 1x2-es táblázatot állítanak elő alsó és felső feliratozással:
név felül
1. elem
2. elem
Az eredmény:
név felül
1. elem
2. elem
A fenti eredmény nem változott volna, ha kiírjuk, hogy align=top.
név alul
1. elem
2. elem
Az eredmény:
név alul
1. elem
2. elem
A cella tartalma alaphelyzetben balra záródik.Ha középre vagy jobbra akarjuk zárni, azt külön kell parancsba adnunk. adnunk.Ezért az előbb már látott align opció felelős.Az align alaphelyzetben left (bal), de lehet center (közép) és right (jobb) is.
cellaelem
cellaelem
közép
jobb
Az eredmény:
cellaelem
cellaelem
közép jobb
Gyakran fordul elő - különösen az első sorban, hogy a cella elemeit kövér betűkkel szeretnénk írni és középre akarjuk rendezni. Ehhez már minden eszközt ismerünk, hiszen az align=center opciót választva és a szöveget közé helyezve ez meg is történik, de mindezt egyszerűbben is elérhetjük: a
jelek helyett a
szimbólu- szimbólumok közé kell helyezni a cellát. (th=table header=táblázat fejléc)
1.
2.
cellaelem
cellaelem
1.
2.
cellaelem cellaelem
Különösen hosszabb szövegeknél fordul elő, hogy nemcsak vízszintesen, hanem függőlegesen is szeretnénk rendezni a szöveget. Ekkor a valign (vertical align= függőleges elrendezés) opciót kell állítani. A valign alaphelyzetben center (közép) állítható még felülre (top) és alulra (bottom).
az első cellaelem egy viszonylag hosszú szöveg, így egészen biztosan nem fér el egy sorban
felül
alul
alaphelyzet
Melynek eredménye:
az első cellaelem egy viszonylag hosszú szöveg, így egészen biztosan nem fér el egy sorban felül alul alaphelyzet
Természetesen az eddig ismertetett opciók és parancsok kombinálhatók is.
ALAPFOKÚ HTML TANFOLYAM 7. rész
Gyakran előfordul, hogy a táblázat néhány celláját egyesíteni szeretnénk vízszintesen vagy függőlegesen. Erre célra a colspan és a rowspan opciókat kell megváltoztatnunk.(colspan=column span=oszlopfeszítés, rowspan=row span=sor- feszítés). Ezen változók értéke alaphelyzetben 1. Amennyiben más értéket állítunk be, ennek hatására az adott cella több (a megadott értéknek megfelelő számú cella) helyét foglalja el.
I.1.
I.2.
I.3.
II.1.
II.2-3.
III.1.
III.2.
III.3.
A fenti utasítássor egy három sorból és három oszlopból álló táblázatot készít, ahol a második sor második és harma- dik elem helyett alkottunk egy cellát a colspan opció 2-re történő állításával.
I.1.
I.2. I.3.
II.1. II.2-3.
III.1. III.2. III.3.
Függőlegesen is megtehetjük ugyanezt.
I.-II.1.
I.2.
I.3.
II.2.
II.3.
III.1.
III.2.
III.3.
A fenti parancssor az első sor és a második sor első eleme helyett hoz létre új cellát.
I.-II.1.
I.2. I.3.
II.2. II.3.
III.1. III.2. III.3.
A böngészők a meglevő adatok alapján egy optimális táblát kísérelnek meg elkészíteni.Újabb paraméterek segítségé- vel újabb tulajdonságokat változtathatunk meg. A táblázat szélességét is megváltoztathatjuk a width (=szélesség) op- cióval.Ennek értékét pixelben és százalékban is megadhatjuk.A 100% a rendelkezésre álló területet jelenti,ha az adott értékekkel lehetetlen táblázatot készíteni, akkor a böngésző megpróbálja a lehető legjobb közelítést adni.
I.1.
I.2.
I.3.
I.1.
I.2.
I.3.
Az eredmény:
I.1.
I.2. I.3.
I.1. I.2. I.3.
A cellák szélességét is állíthatjuk:
I.1.
I.2.
I.3.
I.1.
I.2.
I.3.
Az eredmény:
I.1.
I.2. I.3.
I.1. I.2. I.3.
ALAPFOKÚ HTML TANFOLYAM 8. rész
A HTML nyelv gondolt a magyarokra... legalábbis ami az ékezetes betűket illeti. PC-s magyar Windows-os fájlkészí- tés esetén nem feltétlenül szükséges rendelkezni az alábbi ismeretekkel, de minden más esetben igen. (Gondoljunk a Mac-ekre az NT-kre a DOS-ra UNIX-ra és külföldi barátainkra).Kedvenc kis "á"-nk és nagy "Á"-nk úgy állítható elő, hogy az "a" illetve az "A" betűket az ´ szimbólummal kombináljuk (acute az adott ékezet angol neve), ugyan- így készül az "é", "É", "í". "Í", "ó", "Ó", "ú", "Ú".
á= á
Á= Á
é= é É= É
í= í Í= Í
ó= ó Ó= Ó
ú= ú Ú= Ú
Az "ö", "Ö", "ü", "Ü" előállításakor az ¨ szimbólumot kell alkalmazni.
ö= ö
Ö= Ö
ü= ü Ü= Ü
Az "ő", "Ő" csak megfelelő karakterkészlet (pl. CE kiterjesztésű fontkészlet) választása esetén lesz "szép".Előállítása- kor a ˜ szimbólumot kell alkalmazni.
õ= ő
Õ= Ő
Azt gondolhatnánk,hogy az "ű", "Ű" ugyanígy készül,de sajnos nem.Ez esetben a ˆ szimbólumot kell alkalmaz- ni.
û= ű
Û= Ű
Természetesen más (Amerikából nézve) egzotikus nyelv speciális karakterei is előállíthatók,amivel nem foglalkozunk most. Nem tűnik nagy igénynek hogy pl. a "<" (lt= less than = kisebb mint) vagy a ">" (gt = greater than= nagyobb mint) szimbólumokat előállítsuk, de ha ezeket begépeljük parancssorként fogja a böngésző értelmezni és nem jelenik meg a képernyőn.Ebben az esetben az "<", ">" szimbólumok alkalmazása segít.Jó-jó! De hogy állítható elő a "&" szimbólum, hisz a fentiek értelmében az is speciális karakter. Ekkor az &" (angolul ampersand=és) jelsort kell al- kalmaznunk, az idézőjelhez a " (quotation mark=idézőjel) szimbólumot kell begépelnünk.
<= <
>= >
&= & "="<>
ALAPFOKÚ HTML TANFOLYAM 9. rész
Bemutatkozó oldal képek nélkül? Szó sem lehet róla! Az paranccsal helyezhetünk el egy képet az oldalunkon. (img=image=kép) A kép .gif vagy .jpg kiterjesztésű (illetve formátumú) lehet. Ez a két fájltípus bizto- sítja a legtömörebb képpontonkénti ábrázolási lehetőséget.Ha van olyan rajzolóprogramunk, ami ismeri ezen fájltipu- kat, nézzük meg vele, hogy a különböző típusú képek mérete mennyire eltérő.Nem hiszem, hogy magyarázni kellene, hogy a méret milyen fontos szempont az internetes adatátvitelnél. Példánkban a HTML-verseny első feladványának kicsinyített képét mutatjuk be. Ha azt szeretnénk, hogy a képre kattintva a versenyfelhívás jelenjék meg, akkor a már jól ismert formulát alkalmazzuk.Az "aktív" képet a kéken világító szegély jelzi.Ha nem akarjuk, hogy ez jól látszódjék, akkor a border=0 (a szegély szélessége=0) értéket kell beállítanunk.
htmlver.htmhtmlver.htm
htmlver.htmhtmlver.htm
A képet követő szöveg helyzetét az align paranccsal tudjuk rendezni felülre középre vagy alulra.
Ha igazán szépen elrendezett képeket akarunk, akkor táblázatba kell tennünk őket. A képek pontosan úgy viselkednek a táblázat elemeiként, mintha szöveget írtunk volna be.Ha használjuk az ALT opciót, akkor nevet adhatunk a képünk- nek.Ez akkor hasznos,ha valaki úgy böngészi az oldalunkat,hogy nem nézi a képeket. (Például a Lynx nevű program- mal.)
A képek méretét is megváltozathatjuk a height és a width (height=magasság, width=szélesség) értékek beállításával.
A height és a width értékét akkor is érdemes beállítani, ha nem akarunk a kép méretében változást, ugyanis az előre beállított képméret a letöltést gyorsítja,hiszen a böngészőnek nem kell a letöltést megvárnia ahhoz,hogy a kép helyét kiszámítsa.
ALAPFOKÚ HTML TANFOLYAM 10. rész
(A továbbiakban egyre több olyan utasítást mutatunk be, ami csak a Navigator vagy az Explorer 3.0-ás változatával élvezhető. Kérjük töltse le ezek valamelyikét!)
Egy pillanat alatt meg lehet változtatni egy oldal arculatát, ha megváltoztatjuk a háttérszínét. A színekre vonatkozó utasítások közül ez azon kevesek egyike, ami a böngészők szinte mindegyikével alkalmazható.A háttérszínt a doku- mentum bevezető részében kell definiálnunk az alábbi módon.Példaként egy fehér háttérszínű dokumentumot muta- tunk be, melyhez az alábbiakat kell begépelnünk.
Ez egy fehér háttérszínű dokumentum
Vajon mit jelent az "FFFFFF"? Ez a 6 karakterből álló szimbólum a szín úgynevezett RGB kódja. Az első két karak- ter a vörös (R=red) szín erősségét mutatja 16-os számrendszerben (hexadecimálisan). A leggyengébb a 00, a legerő- sebb az FF. (a számok növekvő sorrendben: 00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 0A, 0B, 0C, 0D, 0E, 0F, 10, ..., FE, FF). A 3. 4. karakter a zöld szín erőssége (G=green), az 5. 6. a kéké (B=blue). Ennyi előismerettel persze már kikísér-letezhetnénk az összes színt, de nem árt, ha néhány színt példaként megmutatunk.
000000
444444
888888
BBBBBB
FFFFFF
B00000
D00000
E00000
F00000
FF0000
00B000
00D000
00E000
00F000
00FF00
0000B0
0000D0
0000E0
0000F0
0000FF
00FFFF
800080
FFFF00
FF00FF
008080
Néhány szabály tisztán látszik. A vörös és a zöld keveréke a sárga, a kéké és a zöldé a türkiz, a vörösé és a kéké a lila. Alkossunk további színeket kedvünk szerint! Az előző táblázatot úgy készítettük, hogy kihasználtuk, hogy egy táblá-
zat háttérszínét is be lehet állítani.
sárga színű táblázat
Eredménye:
sárga színű táblázat
A betűk színe is állítható.
lila színű betűk
Eredménye:
lila színű betűk
ALAPFOKÚ HTML TANFOLYAM 11. rész
Framek 1. rész
(A továbbiakban egyre több olyan utasítást mutatunk be, ami csak a Navigator vagy az Explorer 3.0-ás változatával élvezhető. Kérjük töltse le ezek valamelyikét!)
A Netscape 2.0 és az Explorer 3.0 már képes a HTML nyelv egyik leglátványosabb eszközét kezelni, az osztott kép- ernyőt. (Angol nevén frame = keretről beszélünk). Nagyon sok paraméter állítható be, így nem azzal kezdjük, hogy ezeket felsoroljuk,hanem jó néhány példán keresztül illusztráljuk a lehetőségeket,és csak utána rendszerezzük. A fra- me-ek segítségével egyszerre jeleníthetünk meg több html dokumentumot. Példáinkban az első dokumentum a tanfo- tanfolyam első leckéje,a második a második leckéje lesz stb.Készítsünk olyan dokumentumot, aminek a tetején az el- ső lecke az alján a második lecke lesz!
Eredménye: a következő dokumentum A frameset parancs mondja meg,hogy osztott képernyőről lesz szó, a rows (so- rok) paraméter az oszlopok szerkezetét írja le. A frame src="" paraméterek a beágyazott dokumentumok nevét mond- ják meg. Csináljuk meg ugyanezt úgy, hogy függőlegesen felezzük meg a képernyőt! (A "cols" a columns=oszlopok
rövidítése.)
Eredménye: a következő dokumentum Persze nem csak százalékban, hanem képpontban (pixelben) is megadható a szélesség vagy a hosszúság. Az alábbi példában az első dokumentum 100 pixel magas a második 150 pixel, a harma- dik pedig kitölti a maradék helyet, amit a csillag jelez.
Eredménye: a következő dokumentum. Bizonyos dolgokat táblázatok segítségével is megoldhatnánk, de a táblázatok (minél bonyolultabb annál inkább) lassítják az oldal letöltését. Ez az oka a framek rohamos elszaporodásának illetve az a tény, hogy úgy alkalmazhatunk menüket, hogy nem kell minden oldalon újból és újból letölteni. A jobboldalon megjelenő gördülőmenü (scroll) is gazdagítja lehetőségeinket.
ALAPFOKÚ HTML TANFOLYAM 12. rész
Framek 2. rész
(A továbbiakban egyre több olyan utasítást mutatunk be, ami csak a Navigator vagy az Explorer 3.0-ás változatával élvezhető. Kérjük töltse le ezek valamelyikét!)
Alaphelyzetben a jobboldali gördítősávot (scrollbar) automatikusan megjelenik, ha a dokumentum nagyobb, mint a rendelkezésre álló hely. Ha le akarjuk tiltani a gördítősávot, akkor a SCROLLING=NO paramétert kell beállítanunk. Példánkban a felső frameben letiltottuk a gördítősávot.
Eredménye: a következő dokumentum. Ha a NO helyett YES-t állítunk be, akkor mindig megjelenik a scrollbar, ha AUTO-t, (alaphelyzet), akkor csak akkor, ha a méret miatt szükséges. A frameket elválasztó határ helyét megváltoz- tathatjuk, ha az egérrel azt megragadjuk. Ha ezt a lehetőséget (elsősorban esztétikai okokból) meg akarjuk tiltani,ak-
kor a NORESIZE opciót választjuk. Ekkor az adott framet határoló vonalakat nem tudjuk elmozdítani. (resize=újra- méretezés.) Alábbi példánkban a felső frame esetében letiltjuk a határ mozgatását.
Eredménye: a következő dokumentum. Ha csak kétfelé osztjuk a képernyőt, mindegy hova tesszük a NORESIZE pa- ramétert, lévén egy határ.Ha a framek egyik fontos trükkjét szeretnénk alkalmazni, nevezetesen azt, hogy valamelyik
frame-ben levő linkek valamelyik frame-be mutassanak, ahhoz először el kell neveznünk a frameket a NAME="" je- lölés segítségével, utána a TARGET="" utasítás segítségével tudathatjuk a böngészővel, hogy melyik frame-ben kell hatását kifejtenie a parancsunknak.Alábbi példánkban a képernyőt három részre osztjuk,és a részeknek értelemszerű- en az "also", "kozepso", "felso" nevet adjuk.
ALAPFOKÚ HTML TANFOLYAM 13. rész
Framek 3. rész
(A továbbiakban egyre több olyan utasítást mutatunk be, ami csak a Navigator vagy az Explorer 3.0-ás változatával élvezhető. Kérjük töltse le ezek valamelyikét!)
Ha a frame-es dokumentumban egy olyan címre szeretnénk hivatkozni, amelyet nem akarunk beilleszteni egyik keret- be sem, hanem az összes frame helyett, (azok fölé) akarjuk betölteni, akkor a "target=_top" célt kell megjelölni. Lássunk két példát!
Első példánkban az iNteRNeTTo Szeged címlapját hívjuk be a jól ismert
paranccsal. Ugye milyen csúnya?
Második példánkban a címlapot a
paranccsal hívjuk meg. Így már mindjárt más.
Ha azt szeretnénk, hogy a kívánt dokumentum egy új böngészőablakban jelenjen meg, akkor a "_blank" (blank=üres) paramétert kell választanunk:
Ha a célnak (véletlenül) olyan nevet adunk meg, ami nem létezik, akkor az úgy fog viselkedni, mintha a "_blank"-ot írtuk volna be. (Erre azért nem mutatok példát, mert aki már gyártani próbált ilyen HTML-fájlt, az már úgyis valószí- nűleg észrevette ezt.)
Ha a "_self"-et írjuk be, akkor maga helyett tölti be a kívánt oldalt. Erre már láttunk példát. A
és a
utasítások között semmi különbség nincs - jelen esetben.Akkor miért van rá szükség? Azért, mert a legtöbb paraméter alapértelmezését - beleértve a target-ét is - megváltoztathatjuk. A "_parent" paraméter (parent=szülő) a "szülő" doku- mentumba hívja be a kívánt oldalt.Ez így elég talányosan hangzik ráadásul nem is olyan könnyű kiróbálni.A jelen do-
kumentum (az index.htm) szülője ha Ön "normális úton érkezett hozzánk" a legfelső szint lesz. Azaz olyan mintha a "_top" paramétert állította volna be. Próbálja ki!
Ha ki akarja próbálni,mi a különbség a "_parent" és a "_top" között,akkor hívja be az alábbi paranccsal jelen ablakba a HTML tanfolyam címlapját majd 13. leckéjét és újból kattintson a "_parent" paramétert tartalmazó utasításra!.
Összegezve ismereteinket egy hierarchiát állíthatunk fel:
• A "_self" paraméter esetén a megfelelő frame helyébe töltődik az oldal.
• A "_parent" paraméter esetén a megfelelő frame fölé töltődik az oldal.
• A "_top" esetén legfölülre.
• A "_blank" paraméter esetén egy vadonatúj böngészőablakba.
ALAPFOKÚ HTML TANFOLYAM 14. rész
Szövegelemek
Bekezdéseinket könnyedén zárhatjuk balra, jobbra vagy középre a parancs segítségé- vel. (p=paragraph=bekezdés): Alaphelyzetben a szöveg balra zárt.
Ez egy jobbra zárt bekezdés.
Ez egy jobbra zárt bekezdés.
Ha el akarjuk kerülni azt, hogy sorainkat a nem kívánt helyen törje el a böngésző, akkor a jelek közé helyezzük a "törhetetlen" szöveget.
Alábbi példánkban akárhogy is választjuk meg a dokumentum szélességét a nevet nem törjük el.
Kovács JánosKovács JánosKovács JánosKovács JánosKovács JánosKovács JánosKovács JánosKovács János
Kovács János Kovács János Kovács János Kovács János Kovács János Kovács János Kovács János Kovács János
Szövegünket ízlésesebbé, még könnyebben áttekinthetővé tehetjük, ha vízszintes elválasztó vonalakat húzunk. Ezt a utasítás (hr = horizonat ruler = vízszintes vonal) segítségevel tehetjük meg. Állíthatjuk a vonal vastagságát (si- ze),helyzetét (align), és azt, hogy van e a vonalnak árnyéka vagy nincs. (shade=árnyék).Alaphelyzetben van árnyéka, középre rendezett, és 100%széles.
Lássunk egy-két példát:
:
:
:
:
:
Azt már korábban láttuk,hogy a betűtipusokat is lehet állítani,ami igen veszélyes lehet,ha olyan betűtipust adunk meg,
ami nem minden gépen fordul elő. (A Mac-esek regényeket tudnának írni erről.) Ezért ha más stílusú szöveget aka- runk megadni, akkor a betű méretével, az aláhúzással, a döntéssel , a kövérítésselilletve a színnel operáljunk csak. Ha ez mind nem elég, akkor további segítséget jelenthet például az írógép típus. (tt=typewriter type):
:
Az itt látható szöveg olyan, mintha írógéppel készült volna
Az itt látható szöveg olyan, mintha írógéppel készült volna
A címzés akkor a legstílusosabb (a HTML nyelv megalkotói szerint), ha dőlt betűvel és írógépszerű betűvel készül és előtte-utána sorköz van. Nincs más teendőnk, mint a szöveget az jelek közé tenni.
:
iNteRNeTTo Szeged Szerkesztősége
Szeged
Feketesas u. 28.
iNteRNeTTo Szeged Szerkesztősége
Szeged
Feketesas u. 28.
ALAPFOKÚ HTML TANFOLYAM 15. rész
Frame - nem frame
Azt már tudjuk, hogyan kell frame-es dokumentumokat gyártani,de még nem tudjuk, mi a teendő akkor,ha azt szeret- nénk, mindenki élvezze a dokumentumunkat, függetlenül attól, hogy böngészője képes mutatni a frameket vagy nem.
Ezt a feladatot legelegánsabban a parancs segítségével oldhatjuk meg.
újabb böngészőt!
Az eredmény az új böngészőkkel a közé eső rész lesz, a régiekkel a közé eső rész. Mi most csak azt a kiábrándító tényt közöltük a böngésző emberrel, hogy "Használjon újabb böngészőt!",de akár egy komplett web-dokumentumot is elhelyezhettünk volna.Ez utóbbi megoldással csak
az a gond, hogy a frame-es olvasók is le fogják ezt tölteni, noha ez nekik nem jelenik meg, ami a műveletet kicsit lassabbá teheti. Ekkor megtehetjük azt, hogy noframe esetben a dokumentumunk hívjon meg egy másik dokumen- tumot. Az ehhez szükséges trükköt framek nélkül mutatjuk meg.
A legtöbb HTTP-szerver felismeri a utasítást. Ennek eredménye az, hogy x másodperc múlva letöltődik a dok.htm dokumentum. Az alábbi példa ezt illusztrálja.
Az alábbi dokumentum, ha az ön böngészője támogatja, öt másodperc múlva meghívja a tanfolyam főoldalát.
Próbálja ki!
Tehát a frame - nemframe esetben "energiatakarékos" megoldást kaphatunk,ha előre elkészítünk egy nem frames do- kumentumot, és azt nem illesztjük be a frames dokumentumba, hanem meghívjuk néhány másodperc múlva.
ALAPFOKÚ HTML TANFOLYAM 16. rész
Űrlapok
Az űrlap (form) segítségével adatokat továbbíthatunk.Az űrlap kitöltése önmagában nem elegendő,az adott szerveren egy programnak (többnyire cgi-scriptnek) kell kezelnie a kitöltött űrlapot. Ezen ok miatt mi csak azzal foglalkozunk, hogyan lehet kitölteni egy űrlapot, használni valaki csak akkor tudja,ha gépének rendszergazdájával konzultál. Az űr-
lapot a jelek közé kell tennünk.Elsőként tisztáznunk kell a módszert (method),ahogy a szerver kezeli az űrlapot.A POST (postázás a leggyakoribb), az ACTION (akció) azt a programot jelzi, amelyik az űrlapot fogja fel- dolgozni.A probléma az szokott lenni,hogy ilyen programok elhelyezésére legtöbb helyen csak a rendszergazda jogo-sult. Ezen két szerverspecifikus dologgal bővebben nem foglalkozunk,helyette sorra vesszük a szerverfüggetlen lehe- tőségeket. Először az egyszerű adatbeviteli mezőt tanulmányozzuk; ezt az jelek közé helyezzük.
Meg kell adnunk a nevét (name), méretét (size).
Melynek eredménye:
Top of Form 1
Bottom of Form 1
Top of Form 2
Adat:
Bottom of Form 2
A mező típusát (type) is beállíthatjuk a jelszó (password) típusúnál a bevitt adat helyett csak csillagok jelennek meg.
Gépeljünk be valamit, és láthatjuk, hogy valóban csillagok jelennek meg:
Top of Form 3
Bottom of Form 3
Top of Form 4
Jelszó:
Bottom of Form 4
Ha hosszabb szöveget szeretnénk bevinni, akkor az input helyett a parancsot kell használnunk tisztázva a sorok (rows) és oszlopok (cols=column) számát.
Példánk 5 sor és 20 oszlop méretű szövegterületet állít elő.
Top of Form 5
Bottom of Form 5
Top of Form 6
Vélemény:
Bottom of Form 6
ALAPFOKÚ HTML TANFOLYAM 17. rész
Űrlapok II.
Az űrlapok sok egyéb funkcióval felruházhatók,melyeket manapság egy windows-os programtól elvárunk.A kiválasz-
tás (selection) úgy valósítható meg, hogy a jelek közé elhelyezzük a választási lehetőségeket (opti- on). Az
AJÁNLOM AZ OLDALT
