TFeri.hu

Weblapkészítés HTML alapokon 2. PDF Nyomtatás E-mail
  
Tartalomjegyzék
Weblapkészítés HTML alapokon 2.
Kapcsolatok
Listák
Minden oldal

Tamás Ferenc: Weblapkészítés HTML alapokon – 2. rész

3. fejezet: Fejezetek és formázásuk

A böngészőkben vannak eleve beépített stílusok, amit érdemes ki is használni. Ezek a címformátumok, pontosabban a "Heading" parancsok (magyarul kb. címsor). 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. Apró megjegyzés: a gyakorlatban 2-3 szintű fejezetcímnél csak ritkán alkalmazunk többet! Nézzük az alábbi példa megjelenését! (htmlpelda10.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 ezt böngészőben elindítjuk, akkor egyből látható a megjelenése. A címsor-tageknek egyetlen paramétere van, ami az elhelyezést biztosítja:

align=”left/center/right/justify”

Jelentésük: igazítás balra/középre/jobbra/hasábszerűen. Értelemszerűen csak az egyiket lehet beilleszteni a címsor után. Sokszor zavart okozhat az az (angol/amerikai) szokás, hogy a címsorokat eleve balra illesztik, míg nálunk ezek általában középen vannak.

Megjegyzés: ezt a paramétert a HTML5 már nem támogatja!

Konkrét példa az igazítás használatára:

<h1 align=center”>1-es címsor</h1>

A képernyőre szánt szöveget másképpen is tagolhatjuk. Az egyik legegyszerűbb és legnépszerűbb a paragrafus, azaz bekezdés. Ennek tagje: <p>.

Itt is érvényes a klasszikus hármas igazítás. Álljon itt példaként a következő táblázat:

<p align=left>
Balra zárt</p>
<p align=center>
Középre zárt</p>
<p align=right>
Jobbra zárt</p>

Az egyes bekezdéseken belül is kezdhetünk új sort (lásd <BR>), de elegáns megjelenést érünk el a 4. lehetséges paraméterrel, a hasábszerű megjelenést biztosító „justify” értékkel. Érdemes megfigyelni, hogy a címsorok, illetve a paragrafusok után mindenképpen új sort tesz ki a böngésző.
Megjegyzés: az egyes paramétereknél nem feltétlenül kell az idézőjelet használni. Általános szabályként érvényes, ha csak egyetlen szó vagy szám a paraméter értéke, akkor nem kell idézőjel, viszont ha hosszabb, mint egyetlen karakterlánc, akkor szükséges az idézőjel. Még valami: ha használjuk az idézőjelet, azzal nem ártunk.

Ha nem akarunk a paragrafussal járó sortörést, csak simán szöveget, akkor a <div> taget érdemes használni. Itt ugyanolyan paraméterek vannak, mint a <p> esetén, csak nincs a végén sortörés. A gyakorlatban a legtöbb szöveg <div> taggel kerül fel a világhálóra. Az eddigi pár paraméter mellé érdemes megjegyezni a „title”-t is, mivel ezzel jön elő a kívánt szöveg, ha az adott egység fölé megy az egér. Példa: (htmlpelda12.html)
<html>
<div title="egérfelirat">A felirat csak egérrel jön elő!</div>
</html>


A következő elem a díszítésként, illetve elválasztásként egyaránt alkalmazható vízszintes vonal következik: =Horizontal Rule = <HR>.

Fontosabb paraméterei:
-    Align, azaz igazítás. Lehetséges értékei: left/center/right.
-    Noshade, azaz árnyékmentésség. Értéke nincs, csak magában használható.
-    Size, azaz méret. Lehetséges értékei: százalékban, képpontban vagy centiméterben megadott szám.
-    Width, azaz szélesség Lehetséges értékei: képpontban vagy centiméterben megadott szám.
A fenti paraméterek sorrendje tetszőleges. Lehetséges mértékegységekért forduljon a referenciához! Link: ITT! (Minta: htmlpelda11.html)
Megjegyzés: a fenti paraméterek egyikét sem támogatja a HTML5!

<html>
Ez egy sima szöveg.
<hr align=center noshade size="3px" width="75%" color=red>
Ez a vonal 75% szélességű, középre igazított, 3 pixel vastag és piros színű.
</html>


6. feladat: Készítsen 10 ismerőséről egy mini telefonkönyvet! Az ismerősök neve mellett szerepeltesse a telefonszámokat, illetve (2-3 esetben) a lakcímet/munkahelyet. A 3., a 6. és az utolsó név után húzzon egy-egy vízszintes vonalat. Mindegyiket más színűre, méretűre formázza!



 
Ulti Clocks content

Hirdetés