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!

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:

htmlpelda13

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:

https://www.w3schools.com/tags/default.asp

Folytatása következik!