37. fejezet - A Body és a Form elemek

Tartalom

A Html_004_BodyDemo projekt
Bekezdések tagolása
Címsor tag-ek: <h1></h1>, …, <h6></h6>
Paragrafus tag: <p></p>
Soremelés tag: <br />
Előformázás tag: <pre></pre>
Quotations tag: <q></q>
Blokkidézet tag: <blockquote></blockquote>
Rövidítés (abbrevation) tag: <abr></abr>
Elérési adatok tag: <address></address>
Kiemelés (bold) tag: <b></b>
Kétirányú megjelenítés: <bdi></bdi> (nem támogatott)
Szövegirány beállítás tag: <bdo></bdo>
Betűméret-növelés tag: <big></big> (nem támogatott)
Hivatkozás tag: <cite></cite>
Számítógép-kód frázis tag: <code></code>
Szövegelem törlése tag: <del></del>
Definícó frázis tag: <dfn></dfn>
Kiemelés/Hangsúlyozás tag: <em></em>
Dőltbetüs (italic) szedés tag: <i></i>
Beillesztés (insert) tag: <ins></ins>
Billentyű input frázis tag: <kbd></kbd>
Kiemelésmegjelölés tag: <mark></mark>
Arányok szemléltetése tag: <meter></meter>
Előformázás tag: <pre></pre>
Folyamat indikátor tag: <progres></progres>
Idézőjel blokk megjelenítés tag: <q></q>
Kelet ázsai karakteres szöveg-helyettesítő megadása tag: <rp></rp>
Kelet ázsai karakteres szöveg értelmezési megadása tag: <rt></rt>
Kelet ázsai karakteres szöveg tag: <ruby></ruby>
Áthúzott szöveg megjelenítés tag: <s></s>
Kimeneti szövegtartalom megjelenítése tag: <samp></samp>
Kis betű használata tag: <small></small>
Hangsúlyos kijelzés tag: <strong></strong> tag
Aláírt pozíciójú kijelzés tag: <sub></sub> tag
Föléírt megjelenítés tag: <sup></sup> tag
Időkijelzés tag: <time></time> (datetime még nem működik)
Aláhúzás tag: <u></u>
Változó megjelenítés tag: <var></var>
Feltételes soremelés tag: <wbr></wbr>
Horizontális elválasztás tag: <hr />
Formázási előtér és háttér színkódok (Hex és RGB)
Html_006_FormDemo projekt
Űrlap tag: <form></form>
Input tag: <input></input>
Textarea tag: <textarea></textarea>
Nyomógomb tag: <button></button>
Combobox tag: <select></select>
Label tag: <label></label>
Fieldset tag: <fieldset></fieldset>
Legend tag: <legend></legend>
Datalist tag: <datalist></datalist>
Keygen tag: <datalist></datalist>
Output tag: <output></output>

A Html_004_BodyDemo projekt

A <head></head> szekcióhoz hasonlóan szenteljünk komoly figyelmet a <body></body> tag-ek közötti résznek is, már csak azért is, mert a weblapunk tartalma valójában ebben a szakaszban található. Mivel már korábban gyakoroltuk a css szabványnak a megjelenítési készletek hatókörére vonatkozó alapszabályát, ezért nem meglepő, hogy az itt rögzített stílus készlet a <body></body> tag-ek gyerek-objektumaira is öröklődik, sőt általában ebben a címkepárban helyezzük el a hátteret is.

Nézzünk rögtön gyakorlai példát! Készítsünk egy új projektet, amelynek neve Html_004_BodyDemo legyen. A projekt indulásakor csak azokból az elemekből indulunk ki, melyek használata nem ismeretlen a számunkra. Mivel nincs általános szabály, mely előírná egy weblap szerkezetét (még csak az hiányozna), a kötelező szerkezeti elemeken kívül nagyon nehéz megadni egy olyan „template” szerkezetét, mely alkalmazásával a dokumentum világos és könnyen áttekinthető, ugyanakkor elegendően esztétikus is. A weben nagyon sok olyan lap található, mely vagy a látvány, vagy a tartalom vonatkozásában eltúlzott. Nagy „művészet” a két tervezői igény harmóniájának megteremtése. Induljunk ki az alábbi „klasszikus” body vázból és nézzük, milyen elemekből áll:

Ha figyelmesen megnézzük az egyes tagolt egységeket (más-más színnel jelezve), akkor láthatjuk, hogy az alapvető tagolás egy dokumentum esetében a <body></body> tartalmára az, hogy az egész tartalom először egy wrapper div-ben van, majd azon belül egy header, illetve egy main részre tagolódik. Ezen belül a main div is tagolt a nav, a content, és a footer div-ekre.

4-1. ábra -

kepek4/18fejezet-4-1.jpg


Mivel most elsősorban a <body></body> tagolásban használatos lehetőségeket vizsgáljuk, tekintsük át először a hátterek alkalmazásának lehetőségeit. Nézzünk egy egyszerű hátteret, mely csak egy színből áll. Ehhez a <body></body> tag-ban használható stílus-megadást alkalmazzuk. A színt a három összetevő „alapszín”, a red, green, blue/vörös, zöld, kék (assemblyben találkoztunk ezzel a fogalommal) pakolt formátumában kell megadni, úgy, ahogy például a Photoshop-ban a pipetta eszköz használatánál látjuk:

4-2. ábra -

kepek4/18fejezet-4-2.jpg


Vagyis a legmagasabb helyiértékű két tetrád a vörös, a következő a zöld, az utolsó a kék. A képen lévő beállítás hexadecimális formában a 0x00ff80 mintát adja, amit a <body></body> tag style attributumában a háttér színének beállításánal alkalmazunk (background-color:#00ff80).

A két háttérszín megadás azonos hatású, a weblap az ábrán látható háttér színnel jelenik meg:

4-3. ábra -

kepek4/18fejezet-4-3.jpg


Szokásos megadás még a közvetlen szín névvel történő hivatkozása az alábbi példa szerint:

A weblap címét követő navigációs lista arra ad lehetőséget, hogy erről az oldalról egyéb, a dokumentummal szorosan, vagy lazán összefüggő tárgyú egyéb lapokra jussunk. Mint látszik, az elemek balra rendezettek, ami azt eredeményezi, hogy megjelenítés felbontásától függően lesz egy minimális oldalszélesség, amin rendezett képet mutat a lap, de egy jóval nagyobb szélességű esetben is „csak” a Html5 logó jelenik meg kissé szokatlan helyen.

4-4. ábra -

kepek4/18fejezet-4-4.jpg


Az elhelyezések esztétikai stratégiájáról még lesz szó, most azonban jelezzük inkább, hogy a <body></body> tag korábban oly gyakori jellemzőit a html5 már nem javasolja, és a túlnyomóan színezésre használatos attributumok hatásainak megvalósítását css eszközökkel támogatja.

Bekezdések tagolása

A tartalom könnyen áttekinthető és olvasható tagolását néhány kifejezetten erre a célra tervezett html elem biztosítja. Használatuk rendkívül elterjedt, és nélkülözhetetlen, ezért már az elején ebben a fejezetben tekintjük át őket.

Címsor tag-ek: <h1></h1>, …, <h6></h6>

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

A címsorok olyan „előregyártott” formázási opciók, melyekkel az egyes szövegtörzs- elemek látványosan elkülöníthetőek. A címsor html elemek számozása a megjelenítés méretével fordítottan arányos, vagyis a <h1></h1> a legnagyobb a <h6></h6> a legkisebb. Tekintsük például a következő kódrészletet:

Megjelenítési képe az alábbi lesz:

4-5. ábra -

kepek4/18fejezet-4-5.jpg


A címsorok elhelyezhetők minden konténer, vagyis szövegtárolásra alkalmas címkében, mint azt később látni fogjuk.

Paragrafus tag: <p></p>

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

Tipikus szövegtároló, melyben a szövegtörzs egy logikailag összetartozó szakaszát van mód elhelyezni. Ez azzal az előnnyel is jár, hogy a paragrafus attributumainak beállításával a szövegtörzs adott része egységessé tehető.

Ha a fenti példában mondjuk a bevezetés paragrafus-határolt részébe egy összefüggő szövegrészletet emelünk, és azt szeretnénk, hogy ez egyes sorok között meghatározott helyen soremelések legyen, akkor használhatjuk a soremelés tag-et.

Soremelés tag: <br />

Amikor különösen fontos, hogy a megjelenítendő szöveg bizonyos sorai új sorban kezdődjenek, akkor alkalmazhatjuk a soremelés tag-et. Az előbbi példát folytatva, mondjuk József Attilla: „Születésnapomra” című versének megjelenítése a versek esetében oly kötött sorszerkezettel, csak a soremelés alkalmazásával mutatható helyesen.

Mivel minden versszak négysoros szerkezetének azonos a formázása, nézzük az első versszakot részletesen.

A versszakok elkülönült megjelenítését a paragrafus biztosítja, a soroknak a költemény szerinti tagolását pedig egy-egy soremelés tag. Az idéző jeleket például az „Ön, amíg szóból értek én..” esetében direkt karakterkódolással helyezzük el, melynek bevezető jele a &# karakterpáros. Itt jegyezzük meg, hogy van arra is mód, hogy egy, a forrásban már tagolt, vagy szerkesztett tartalmat az ott megadottak szerint jelezzünk ki. Erre szolgál a <pre></pre) html címke.

4-6. ábra -

kepek4/18fejezet-4-6.jpg


Előformázás tag: <pre></pre>

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

ogy az előformázás tag alkalmazásával a forráslista minden space és enter előfordulása megjelenik a kimeneten, sőt még az idézőjelek is.

4-7. ábra -

kepek4/18fejezet-4-7.jpg


Quotations tag: <q></q>

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

Gyakran szükséges, hogy az adott szöveget, mint idézetet jelenítsük meg. Ha például egy szövegkörnyezetben egy József Attilától származó idézetre hivatkozunk, akkor a fenti példát alkalmazva az idézet szöveg így citálható:

4-8. ábra -

kepek4/18fejezet-4-8.jpg


A <q></q> tag-ek között jelölt szöveg idézőjeleit a címkepár teszi ki, a tagolásra viszont nekünk kell továbbra is ügyelnünk.

Blokkidézet tag: <blockquote></blockquote>

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

Ha hosszabb idézetet szeretnénk megjeleníteni, akkor a <blockquote></blockquote> tag használata célszerű, mert ez egy külön bekezdésbe szedi a tartalmat. Nem teszi ki viszont az idézőjeleket, ezért célszerű, ha kombináljuk a <q></q> tag-el.

A cite attributum alkalmazásával az idézet webes elérése egy url-ben megadható.

4-9. ábra -

kepek4/18fejezet-4-9.jpg


Rövidítés (abbrevation) tag: <abr></abr>

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

A szövegtörzsekben gyakran fodul elő mozakiszó és rövidítés. Ha az <abr></abr> tag-el formázzuk, akkor az egérkurzort a rövidítés fölé mozgatva megjelenik a hozzátartozó tooltip, amit szintén a html tartalomban helyeztünk el.

4-10. ábra -

kepek4/18fejezet-4-10.jpg


Elérési adatok tag: <address></address>

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

Ha az <address></address> tag a <body></body> tag-ben helyezkedik el, akkor az egész lapra vonatkozó elérési adatokat, ha egy (később ismertetett) <article></article> tag-ben, akkor a cikk szerzőjének elérési adatait adja, általában dőlt (italic) betűtípussal szedve.

4-11. ábra -

kepek4/18fejezet-4-11.jpg


Kétirányú megjelenítés: <bdi></bdi> (nem támogatott)

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

Amikor egy egyébként mondjuk balról jobbra irányított megjelenítés olyan szöveget tartalmaz, melynek irányítottsága ellentés ezzel, akkor a <bdi></bdi> megfordítja az aktuális megjelenítési irányt.

4-13. ábra -

kepek4/18fejezet-4-13.jpg


Szövegirány beállítás tag: <bdo></bdo>

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

Az alkalmazott irány szerinti szöveg-kijelzés beállítása:

4-14. ábra -

kepek4/18fejezet-4-14.jpg


Betűméret-növelés tag: <big></big> (nem támogatott)

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

Az egyes szövegrészek kiemelésének a betűméret növelésével megvalósítható módja.

4-15. ábra -

kepek4/18fejezet-4-15.jpg


Hivatkozás tag: <cite></cite>

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

Egy konkrét hivatkozás és a hozzá tartozó literál összekapcsolására alkalmas tag.

4-16. ábra -

kepek4/18fejezet-4-16.jpg


Számítógép-kód frázis tag: <code></code>

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

Általános programkódok elkülönítésének megjelenítésése alkalmas tag:

4-17. ábra -

kepek4/18fejezet-4-17.jpg


Az eredeti tördelés megtartására a <pre></pre> előformázást figyelembe vevő tag-et használtuk.

Szövegelem törlése tag: <del></del>

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

A szövegtörzs egyes részeit töröltnek mutató tag.

4-18. ábra -

kepek4/18fejezet-4-18.jpg


Definícó frázis tag: <dfn></dfn>

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

Az egzakt rendbe szedhető tárgyú szövegtípusok (mint amilyen a matematika, fizika, szoftvertechnológia) leírására ún. frázis tag-ek állnak rendelkezésre. Korábban a <code></code> is ilyen volt. Az ilyen típusú szövegtartalom általában definíció, tétel, bizonyítás, példa, részletezés, kód stb. elemekből állnak. A definíció megadására alkalmas a <dfn></dfn> tag.

4-19. ábra -

kepek4/18fejezet-4-19.jpg


Kiemelés/Hangsúlyozás tag: <em></em>

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

A fenti példán a „számtani sorozat” szövegrészt kiemelhetjük, megjelenítését hangsúlyozhatjuk az <em></em> tag-el.

4-20. ábra -

kepek4/18fejezet-4-20.jpg


Dőltbetüs (italic) szedés tag: <i></i>

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

Dőltbetűvel való szedést állít be.

4-21. ábra -

kepek4/18fejezet-4-21.jpg


Beillesztés (insert) tag: <ins></ins>

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

A szövegtörzsbe utólag beillesztett szöveg jelzése tag.

4-22. ábra -

kepek4/18fejezet-4-22.jpg


Billentyű input frázis tag: <kbd></kbd>

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

Egy billenytűzet input jelzése a kód, vagy a metanyelvű specifikációban.

4-23. ábra -

kepek4/18fejezet-4-23.jpg


Kiemelésmegjelölés tag: <mark></mark>

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

A szövegtörzs színezett kiemelését valósítja meg a <mark></mark> tag.

4-24. ábra -

kepek4/18fejezet-4-24.jpg


Arányok szemléltetése tag: <meter></meter>

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

Arányok grafikus szemléltetésére alkalmas tag.

4-25. ábra -

kepek4/18fejezet-4-25.jpg


Folyamat indikátor tag: <progres></progres>

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

Dinamikus folyamatok vagy állapotok kijelzésére alkalmas tag.

4-27. ábra -

kepek4/18fejezet-4-27.jpg


A <meter></meter> tag-hoz képesti egyik különbség a folyamatjelző animálása.

Idézőjel blokk megjelenítés tag: <q></q>

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

4-28. ábra -

kepek4/18fejezet-4-28.jpg


Kelet ázsai karakteres szöveg-helyettesítő megadása tag: <rp></rp>

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

Kelet ázsiai írásjelek, vagy abban készült szövegrészek megjelenítési helyettesítése, adott magyarázata, illetve fordításának megadása. Általában a <ruby></ruby> tag-el együtt használatos.

4-29. ábra -

kepek4/18fejezet-4-29.jpg


Kelet ázsai karakteres szöveg értelmezési megadása tag: <rt></rt>

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

Kelet ázsiai írásjelek vagy abban készült szövegrészek magyarázata, illetve fordításának megadása. Általában a <ruby></ruby> tag-el együtt használatos:

4-30. ábra -

kepek4/18fejezet-4-30.jpg


Kelet ázsai karakteres szöveg tag: <ruby></ruby>

http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-ruby-element

Kelet ázsiai karaktereket tartalmazó szöveg megjelenítése:

4-31. ábra -

kepek4/18fejezet-4-31.jpg


Áthúzott szöveg megjelenítés tag: <s></s>

http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-s-element

Áthúzott szöveg megjelenítése:

4-32. ábra -

kepek4/18fejezet-4-32.jpg


Kimeneti szövegtartalom megjelenítése tag: <samp></samp>

http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-samp-element

A kimeneti adatok megjelenítésének előtervezett címkéje.

4-33. ábra -

kepek4/18fejezet-4-33.jpg


Kis betű használata tag: <small></small>

http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-small-element

Kis betűs megjelenítés.

4-34. ábra -

kepek4/18fejezet-4-34.jpg


Hangsúlyos kijelzés tag: <strong></strong> tag

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

4-35. ábra -

kepek4/18fejezet-4-35.jpg


Aláírt pozíciójú kijelzés tag: <sub></sub> tag

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

4-36. ábra -

kepek4/18fejezet-4-36.jpg


Föléírt megjelenítés tag: <sup></sup> tag

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

4-37. ábra -

kepek4/18fejezet-4-37.jpg


Időkijelzés tag: <time></time> (datetime még nem működik)

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

4-382. ábra -

kepek4/18fejezet-4-38.jpg


Változó megjelenítés tag: <var></var>

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

4-40. ábra -

kepek4/18fejezet-4-40.jpg


Feltételes soremelés tag: <wbr></wbr>

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

A túlságosan hosszú szövegrészek irányított helyen történő elválasztását teszi lehetővé ez a html tag a mellékelt példa szerint:

4-41. ábra -

kepek4/18fejezet-4-41.jpg


4-42. ábra -

kepek4/18fejezet-4-42.jpg


Horizontális elválasztás tag: <hr />

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents

Horizontális vonalhúzás / elválasztás tag:

4-43. ábra -

kepek4/18fejezet-4-43.jpg


Formázási előtér és háttér színkódok (Hex és RGB)