Betűk formázása
A dolog igen egyszerû, hiszen lehet egy betû félkövér (Bold = B), aláhúzott (Underlined = U), illetve döntött (Italic = I)
A megfelelõ tagek ezek szerint: <B>Bold</B>,<U>Underlined</U>, illetve <I>Italic</I>.
Az elõbbi parancsok persze kombinálhatók is: <B><I>Félkövér Dõlt </I></B>
Egyetlen dologra kell vigyázni csupán: A sorrendet mindig be kell tartani. Gyakorlatban ez azt jelenti, hogy mindig a legutoljára kinyitott tag zárótagját kell leírni. Nézzük a következõ - természetesen betûformázási - példát: (minta5.html)
| <HTML> <B>Vastag. <I>Ráadásul aláhúzott</I> Megint simán vastag</B> </HTML> |  Íme a file, ahogy az összetartozó tagek láthatóak. |
| <HTML> <FONT SIZE=0> Alapméret </FONT> </HTML> |
2. feladat: Írjon olyan fájlt, amelyben a betûméretek fokozatosan növekednek! (fel2.html)
Bár nem szerencsés, de a betûk típusa is változtatható. Ehhez szintén a <FONT> tagre van szükség, de ezúttal a paramétere a SIZE helyett a FACE-re lesz szükség, de szeretném kihangsúlyozni, hogy ez nem minden esetben szerencsés, mivel lehet, hogy a honlap készítõjének gépen éppen megvan az a betûtípus, de a leendõ felhasználóén nincsen! Mintapélda legyen a következõ: (minta7.html)
| <HTML> <font face="Arial">Arial</font> <font face="Times Nem Roman CE">Times New Roman CE</font> </HTML> |
Persze a fenti paramétereket lehet keverve is használni, ráadásul a sorrend is lényegtelen! Nézzük a következõ példát:
| <HTML> <font face="Arial" size="+3" color="yellow">Ez igen!</font> </HTML> |
Ha a hagyományos színek kevésnek bizonyulnak, akkor lehetõségünk van mesterségesen kevert színek elõállítására is. A módszer lényege a három alapszín (R=red; G=green; B=blue) keverése. Bármelyik szín erõssége 0-tól 255-ig állítható, sajnos hexadecimális kóddal. (00-tól FF-ig) A kódsor elejére egy "#" jelet kell rakni. Néhány hagyományos és érdekes szín kódja a következõ:
| black = "#000000" = fekete | green = "#00FF00" = zöld | blue = "#0000FF" = kék |
| gray = "#C0C0C0"= szürke | red = "#FF0000" = vörös | yellow = "#FFFF00" = sárga |
22.3.) Fejezetek és formázásaik
A böngészõkben vannak eleve beépített stílusok, amit érdemes ki is használni. Ezek a címformátumok, pontosabban - jobb magyar kifejezés híján - a "Heading"parancsok. 6 eleve beépített formátum van, sorszám szerint 1-tõl 6-ig. Az 1-es a legerõsebb bekezdés-formátum, míg a 6-os a legkisebb.
Nézzük az alábbi (bal oldali) példa megjelenését (a jobb oldalon). (minta9.html)
| <HTML> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </HTML> |  |
- Ha egy cím túl hosszúra sikeredik, de semmiképpen nem szeretnénk, ha megtörné a böngészõ, akkor érdemes használni a NOWRAP paramétert is,
pl.: <H1 NOWRAP> Ezt nem szabad megtörni! </H1> - Különleges lehetõség a <BANNER> is, mivel ez egy soha nem scrollozható címszalagot takar! </BANNER> Ezzel a tulajdonsággal nem szabad visszaélni, mert kisebb felbontású monitorokon lehet, hogy nem marad scrollozható rész! Csak Netscape-ben!
- Másik lehetõség a <DIV> használata, amely különbözõ részekre (fejezetekre, bekezdésekre) tagolja a szöveget. </DIV> Paraméterei: ALIGN="center/left/right" - igazítás; DATAFORMATAS="text/html" - adatformátum sima szöveg vagy html-kód; TITLE="mit írjon ki" az egér fölé érkezésekor.
- Az automatikus sortördelés letiltható a <NOBR> és a </NOBR> parancsokkal. Ez feloldható menet közben a <WBR> közben!
Ha már egy résznek címet adtunk, akkor érdemes megtölteni tartalommal is! Egy-egy külön gondolatot érdemes egy-egy külön bekezdésbe írni. Új sort már tudunk kezdeni a <BR> tag segítségével, de ez valamivel több, mint egy egyszerû új sor, mivel itt egész bekezdéseket lehet írni, ráadásul rendezni is lehet! Minden hagyományos szövegszerkesztõ és táblázatkezelõ programban megszokhattuk, hogy lehet balra (left), jobbra (right) és középre (center) rendezni. Az internet eleve a legkülönfélébb típusú gépekbe van bekötve, ezért igen gyakran elõfordulhat, hogy a legkülönfélébb képernyõfelbontású monitorokon jelenik meg az a - számunkra kiválóan elrendezett - szöveg, amit mi meg szeretnénk jeleníteni. Ekkor lesz értelme, hogy bekezdésekben gondolkozzunk, mivel minden egyes paragrafust másként tudunk elrendezni. A paragrafust keretbe záró tag a <P> és a </P>. Itt az új sorral ellentétben van lezárójel is! Automatikusan minden paragrafus balra zárt, de az ALIGN="hogyan" paraméter segítségével lehet másféleképpen is.
| Ez például balra van zárva. Alapértelmezés. Kódolása: <P ALIGN="left"> duma </P> | Kódolása: <P ALIGN="center"> centrum </P> | Ez például jobbra van zárva. Kódolása: <P ALIGN="right"> jobb </P> |
| <HTML> <p align="left"> bal </p> <p align="center"> centrum </p> <p align="right"> jobb </p> <p align="justify"> hasábosan </P> </HTML> |  |
Szintén lehet alkalmazni a vízszintes vonalakat. A legegyszerûbb <HR> tagnek nincsen záróeleme, mivel csak egy szimpla vízszintes vonalat húz. Paraméterei lehetnek többek között:
- COLOR="színkód". (vonal színe) - Csak az Explorerben!
- ALIGN="left/center/right" (merre rendezze a vonalat)
- NOSHADE (ne legyen 3-dimenziós árnyéka a vonalnak)
- SIZE=n (milyen vastag legyen a vonal - pixelben; alapértelmezés: 1)
- TITLE="kiírás" (mit írjon ki a böngészõ, amikor a vonal fölé kerül az egér)
- WIDTH="n" (milyen hosszú legyen a vonal százalékban vagy pixelben. Alapértelmezés: 100%)
Természetesen vannak még betûformázások, de az legyen kicsit késõbb!
4. fejezet: Kapcsolatok
Az egész internet lényege a kapcsolatok, avagy a hiperlinkek megléte. Ez a gyakorlatban azt jelenti, hogy egy sima egy objektumhoz (sima szöveg, kép vagy részlete, nyomógomb, stb) hozzárendelhetünk az egész internetrõl egy másik objektumot. Ha például a székesfehérvári Jáky József Mûszaki Szakközépiskola honlapjára akarunk hivatkozni, akkor a következõt kell beírni a weblap megfelelõ helyére: (minta11.html)
átalakul mutató kézzé: 
Tehát, mint a példán is látható, az<A> tag hivatkozást jelent. Ha simán egy egész webkikötõre szeretnénk hivatkozni, mint a fenti példában is, egyszerûen be kell írni a TELJES nevét. (Általában mûködik http és www nélkül is, de lehet, hogy némileg lassabban! Célszerű minden esetben a teljes verziót beírni, mivel így szinte biztosan jó lesz.)
Némileg módosul a helyzet, ha a webkikötő belsõ felépítését is ismerve nem az egész iskolára szeretnénk hivatkozni, hanem például a "Számítástechnika kezdõknek" könyv kezdetére. Ekkor a helyes hivatkozás a következõ lesz: (minta12.html)
| <HTML> <a name="teteje">Ez a file teteje.</a> <BR>Itt szöveg van. <BR>Itt is. <BR>Meg itt is. <a href="ftp://ftp.jaky.hu/">Jaky FTP-szerver.</a> <a href="mailto:hivatalos@tferi.hu">E-mail a szerzönek.</a> <A href="#teteje">Itt lehet a tetejére ugrani.</A> <A href="http://www.tferi.hu/konyv5/html/minta14.html#teteje">Ez picit bonyolultabb!</A> </HTML> |
4. feladat: Írjon egy olyan fájlt, melyben hivatkozik a Netscape FTP-re, valamint a szerzõnek küld E-mailt (hivatalos@tferi.hu)! (fel4.html)
22.5.) Listák
Az Internet kezdetekor szöveges volt szinte minden hozzáférés, éppen ezért az áttekinthetõség kedvéért rendkívüli fontossággal bír mindenféle lista és felsorolás.A legegyszerûbb a rendezés nélküli lista. (Unordered List = UL) Ennek minden egyes eleme a listatag. (List Item = LI) Ennek a tag-nek nincsen zárórésze.
Lássuk a következõ példát: (minta15.html)
| <HTML> <ul> <li> Elsö elem <li> Második elem <li> Harmadik elem </ul> </HTML> |  |
| <HTML> <ol> <li> Elsö elem <li> Második elem <li> Harmadik elem </ol> </HTML> |  |
Type = 1 - a listaelemek számok.
Type = a - a listaelemek kisbetûk.
Type = A - a listaelemek nagybetûk
Type = i - a listaelemek kicsi római számok.
Type = I - a listaelemek nagy római számok.
Ugyanezen paraméterek megjelenhetnek az <OL> elemnél is, ráadásul lehet egy START=n elem is, ami a kezdõértéket adja meg!
Definíciós listát is készíthetünk, ahol egyszerûbb fogalmakat lehet megmagyarázni. (Definition List = DL). Az egyes elemeket és fogalmakat<DT>-vel jelöljük, (Definition Term) míg magyarázatukat <DD>-vel. (Definition Description) (minta17.html)
| <HTML> <dl> <dt>1. fogalom <dd>az 1. fogalom magyarázata <dt>2. fogalom <dd>a 2. fogalom magyarázata </dl> </HTML> |  |
0 megjegyzés:
Megjegyzés küldése