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> |
<p align=center> |
<p align=right> |
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!
URL: https://www.w3schools.com/cssref/css_units.asp
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!
- Előző
- Következő >>