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!
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 saját honlapomra akarunk írni egy hivatkozást, akkor a következőt kell beírni a weblap megfelelő helyére: (htmlpelda13.html)
<a href="http://www.tferi.hu/">Adott link</a>
Megjelenéskor ez az "Adott link" nevű szöveg általában aláhúzva jelenik meg és a már jól ismert Windows-cursor átalakul mutató kézzé: . (Képek: http://tferi.hu/konyv5/html/minta12a.gif és http://tferi.hu/konyv5/html/minta12b.gif )
Tehát, mint a példán is látható, az <A> tag hivatkozást jelent. Ha simán egy egész weblapra 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 weblap belső felépítését is ismerve nem az egész lapra szeretnénk hivatkozni, hanem például a "Weblapkészítés HTML alapokon" könyv kezdetére. Ekkor a helyes hivatkozás a következő lesz:
<a href=”http://tferi.hu/weblapkeszites-html-alapokon-1”>Link szövege</a>
Valamivel egyszerűbb a dolgunk, ha azon az adott könyvtáron belül szeretnénk hivatkozni, ahol a kiindulási file található, akkor elég a fájl nevét megadni. Például, ha az alábbi htmlpelda13.html-ből szeretnénk hivatkozni a korábban található htmlpelda10.html-re, akkor a következő kódot kell használni:
<a href=”htmlpelda10.html”>Azonos könyvtárban</a>
Egy adott nagyméretű fájlon belül is lehet hivatkozni, ám ekkor a sima horgonyt (anchor) kell használni. Ezt mutatja be az alábbi példa (htmlpelda14.html)
<html>
<a name=szoveg_eleje></a>Ez a szöveg eleje<br>
1.sor<br>
2.sor<br>
3.sor<br>
<a href="#szoveg_eleje">Ugrás a tetejére</a>
</html>
Ilyen esetben a fájl egy adott helyén címkét kell létrehozni (<a name=”címke”></a>), majd a kívánt helyen lehet hivatkozni erre a címkére. Fontos, hogy a hivatkozási link elé tegyünk egy # jelet.
A fenti linkeket lehet kombinálni is, így például a következő link az iskolám 2014-es végzős osztályaira mutat: http://jaky.hu/evkonyv/vegzett-tanulok#2014. Itt legelöl az iskola webhelye van (jaky.hu), majd azon belül a könyvtár (evkonyv/vegzett-tanulok), míg legvégül jön a címke. (#2014).
Kiegészítés: nem csak a megszokott html-lapokra lehet hivatkozni, hanem például képre, videóra, illetve FTP-szerverre vagy E-mail címre is. Ezen lehetőségeket mutatja be a következő fájl:
Megjegyzés! A fenti űrlapot a Google Chrome biztonsági beállításai miatt kénytelen voltam képpé alakítani, így nem lehet HTML-formátumban letölteni!
7. feladat: Írjon egy olyan fájlt, amelyben link van a szerző honlapjára (tferi.hu), a Microsoft-ra (microsoft.com) és a Google-ra (google.com)!
5. fejezet: Listák
Sokszor van szükségünk ilyen-olyan felsorolásra, ilyenkor jól jöhet a felsorolás.
Alapvetően két típusú lista van: a számozott lista (= Ordered List = OL), illetve a nem számozott lista. (= Unordered List = UL) A listán belül minden egyes elem egy-egy listatag. (= List Item = LI) Ennek a tagnek nincsen zárórésze a HTML4-ben. Nézzük a következő egyszerű példát! (htmlpelda16.html)
<HTML> <ul> <li>elsö elem <li>második elem <li>harmadik elem <li>negyedik elem <li>ötödik elem </ul> </HTML> |
Látható a bal oldali kód megvalósulása a jobb oldalon. Ha az <UL>-t lecseréljük <OL>-re, akkor sorszámozott listát kapunk. Érdemes kipróbálni!
8. feladat: Az előző feladatban a linkeket cserélje ki nem sorszámozott listára!
Rendezett lista esetén az <LI> egyik paramétere egyben megszabja a lista típusát is.
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! A HTML5-ös szabványnál ráadásul engedélyezett egy „reversed” paraméter is, ami a fordított sorszámozást teszi lehetővé. Persze lehet kicsit cifrázni a nem sorszámozott lista egyes elemeit is, de ehhez már némi CSS-ismeret szükséges. (Pár fejezet múlva már sorra is kerül!)
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) Íme egy egyszerű példa: (htmlpelda17.html)
<HTML>
<dl>
<dt>1. fogalom
<dd>az 1. fogalom magyarázata
<dt>2. fogalom
<dd>a 2. fogalom magyarázata
</dl>
</HTML>
9. feladat: Készítsen egy definíciós listát például 3-4 matematikai definícióról. (Pitagorasz-tétel, Thalész-tétel, prímszámok fogalma, stb.)
10. feladat: Elevenítse fel saját ismerőseinek névsorát, melyben legalább 15 ismerősét felsorolja egy nem sorszámozott listában!
11. feladat: Csináljon egy sorszámozott listát a budapesti hidakról (északról délre), majd minden egyes hídnál nem sorszámozott módon írja ki egy listában azt is, hogy melyik kerületeket köti össze!
Felhasznált szakirodalom: