2010. december 12., vasárnap

Fejezetek és formázásaik


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!
Ezeket az eleve beépített mintákat persze módosíthatjuk is, de ez csak pár fejezettel késõbb kerül sorra!
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>

Ez például középre van rendezve (zárva).
Kódolása:
<P ALIGN="center"> centrum </P>
Ez például jobbra van zárva.
Kódolása:
<P ALIGN="right"> jobb </P>
Bár az internettõl sokáig idegen volt, de megjelent a hasábszerû elrendezés. (ALIGN="justify") Ezt is lehet alkalmazni, de ettõl sajnos relavív lassabb lehet a weblap megjelenése egy kisebb számítási képességû lapon. Az egész file (és képe) egybefüggõen a következõ lesz: (minta10.html)
<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 javasolt néha napján alkalmazni a <nobr> és a </nobr> tag-eket, melyek segítségével megakadályozhatjuk, hogy egy fontos szöveg (például név) belsejét megtörje a böngészõ.
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)

<A HREF="http://www.tferi.hu/"> Hivatkozás </A>
Megjelenéskor ez a "Hivatkozás" nevû szöveg általában aláhúzva jelenik meg és a már jól ismert Windows-cursor  á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)

<A HREF="http://www.tferi.hu/konyv5/tftanul.html"> Könyv legeleje </A>
Ha azon az adott könyvtáron belül szeretnénk hivatkozni, ahol a kiindulási file található, akkor elegendõ a file nevét megadni. Például, ha az alábbi minta13.html-bõl szeretnénk hivatkozni az elõzõ fejezet végén lévõ minta10.html-re, akkor a következõ kódot kell használni: (minta13.html)

<A HREF="minta10.html"> Azonos könyvtárban </A>
Egy adott (nagyméretû) file-on belül is tudunk ugrani, de itt picivel bonyolultabb a dolog, ugyanis a file-on belül kell létrehozni egy "címkét". Ez tulajdonképpen egy láthatatlan könyvjelzõ, amit bármikor fel tudunk lapozni. Kódja: <A NAME="könyvjelzõnév"></A> Nézzünk egy példát: (minta14.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>
Természetesen nem csak http- szabvány szerinti file-ra utalhatunk, hanem ftp-re, illetve E-mail-re is. Ezen kívül ha ismerjük az adott szerver DOS-struktúra szerinti felépítését, akkor hivatkozhatunk rá a jó öreg DOS szerint is, mint a CD-parancsnál. Persze még van számos kisebb szabvány is (gopher, news, ...), de ezek mostanra már szinte teljesen kikoptak a hétköznapi használatból. 3. feladat: Írjon egy olyan fájlt, amelyben link van a szerző honlapjára (tferi.hu), a Microsoft-ra (microsoft.com) és a Netscape-re (netscape.com)! (fel3.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>
Természetesen lehet rendezett is a lista (Ordered List = OL). Ha az elõbbi file-ban kicseréljük az <ul> taget <ol>-re, akkor a következõ lesz a lista! (minta16.html)
<HTML>
<ol>
   <li> Elsö elem
   <li> Második elem
   <li> Harmadik elem
</ol>
</HTML>
 Rendezett lista esetén az <LI> egyik paramétere megszabja a lista típusát.
    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>
Természetesen ezeket a mintákat némi kiegészítõ tudással kicsit át is variálhatjuk, (lásd CSS-file-ok), de ez nem egy ilyen alapfokú tanfolyam dolga!

0 megjegyzés:

Megjegyzés küldése

 

Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com