HTML alapok
Kód tördelése és a megjelenés
A HTML oldalak készítésénél meg kell szoknunk azt, hogy a HTML kód tördelése (mennyi üres helyet teszünk, hol nyomunk entert) nem befolyásolja az oldal megjelenését. Ez alól kivételt jelent, ha a<pre> taget használjuk. A
<pre> tag tartalmaként megadott szöveget a böngésző azonos szélességű betűkkel jeleníti meg. Hagyományos szöveg írásához ne használjuk, de például programkód megjelenítésére jó lehet. Ha tehát a szöveget bekezdésekre kívánjuk tagolni, ahhoz egy újabb taget kell megtanulnunk.
Bekezdések <p>
A<p> tag segítségével a szöveget bekezdésekre oszthatjuk. Az adott bekezdés tartalmát a <p> és </p> elemek közé kell tenni. A záró </p> tag elvileg nem kötelező, de mi azt ajánljuk, hogy mindig szerepeltessük azt.A böngészőprogramok a bekezdések előtt és után - a tagolás érdekében - nagyobb helyet hagynak, ennek mértékét is a stíluslapok segítségével adhatjuk meg.
| Paraméter | Érték | Leírás | Megj. |
|---|---|---|---|
| align | left | center | right | justify | A bekezdés igazítását állíthatjuk be. left: balra center: középre right: jobbra justify: sorkizárt |   |
| CSS alternatíva text-align | left | center | right | justify | A bekezdés igazítását állíthatjuk be. left: balra center: középre right: jobbra justify: sorkizárt |  |
Ügyeljünk arra, hogy a HTML paraméter esetén a HTML tagben kell szerepeltetni a paramétert és az értéket, ahol a paraméter után egyenlőségjelet kell tennünk, a paraméter értékét pedig idézőjelek közé kell tennünk. Például:
<p align="left"> Amennyiben több paramétert is megadunk, azokat üres hellyel kell elválasztani. Például:
<p align="left" title="Üdvözlő szöveg"> A stíluslapos megoldás esetén a kívánt stílust a tag style paraméterében kell megadni. A CSS paraméter megadása után egy kettőspontot kell tennünk, majd meg kell adnunk a paraméter értékét. Például:
<p style="text-align: left"> Amennyiben több paramétert is megadunk, azokat pontosvesszővel kell elválasztani. Például:
<p style="text-align: left; color:red"> | Kód | <p align="left"> Balra igazított bekezdés</p> |
|---|---|
| Eredmény | Balra igazított bekezdés |
| Kód | <p align="center"> Középre igazított bekezdés</p> |
| Eredmény | Középre igazított bekezdés |
| Kód | <p align="right"> Balra igazított bekezdés</p> |
| Eredmény | Jobbra igazított bekezdés |
| Kód | <p align="justify"> Sorkizárt bekezdés. Sorkizárt bekezdés. Sorkizárt bekezdés. Sorkizárt bekezdés. Sorkizárt bekezdés.</p> |
| Eredmény | Sorkizárt bekezdés. Sorkizárt bekezdés. Sorkizárt bekezdés. Sorkizárt bekezdés. Sorkizárt bekezdés. |
| Kód | <p style="text-align: left"> Balra igazított bekezdés</p> |
|---|---|
| Eredmény | Balra igazított bekezdés |
| Kód | <p style="text-align: center"> Középre igazított bekezdés</p> |
| Eredmény | Középre igazított bekezdés |
| Kód | <p style="text-align: right"> Jobbra igazított bekezdés</p> |
| Eredmény | Jobbra igazított bekezdés |
| Kód | <p style="text-align: justify"> Sorkizárt bekezdés</p> |
| Eredmény | Sorkizárt bekezdés |
Sortörés <br>
Amennyiben a szövegen belül egy sortörést szeretnénk elhelyezni, a<br> taget kell használnunk. Ez is egy olyan tag, amelynek nincs záró párja. | Kód | Eredmény |
|---|---|
| Ez az első sor<br> Ez pedig a második | Ez az első sor Ez pedig a második |
<br> tagnek is vannak paraméterei, de azokkal kicsit később, a képek témakörben fogunk megismerkedni. Hogy miért pont a képeknél? Majd kiderül...Feladat
Próbáld ki az összes igazítási módot, HTML paraméterrel és stílusmegadással is! Próbáld ki a <br> tag hatását is!
Címsorok <h1> ..<h6>
A címsorok (heading) - mint ahogy a szövegszerkesztésnél is megszokhattuk - az oldalak logikai felosztását teszik lehetővé. A HTML nyelvben ezeket a<h1> <h2> <h3> <h4> <h5> <h6> tagekkel adhatjuk meg. Például h1 az oldal címe, h2 egy alcím, h3 egy mélyebb szintű alcím és így tovább. A HTML oldalak esetén 6 címsort használhatunk.| Kód | Eredmény |
|---|---|
| <h1> 1-es címsor </h1> | 1-es címsor |
| <h2> 2-es címsor </h2> | 2-es címsor |
| <h3> 3-as címsor </h3> | 3-as címsor |
| <h4> 4-es címsor </h4> | 4-es címsor |
| <h5> 5-ös címsor </h5> | 5-ös címsor |
| <h6> 6-os címsor </h6> | 6-os címsor |
Szövegformázás
Nézzük, hogy a szöveg formázására milyen lehetőségeink vannak. Itt találunk fizikai és logikai formázást lehetővé tévő tageket is. Nem ismertetünk minden taget, csak a gyakrabban használtakat.Fizikai formázás
Az itt található tagek a szövegek fizikai formázását teszik lehetővé.| Tag | Leírás | példa | Megj. |
|---|---|---|---|
| b | félkövér szöveg | félkövér szöveg | |
| big | nagyobb szöveg | nagyobb szöveg | |
| i | dőlt szöveg | dőlt szöveg | |
| pre | előre formázott szöveg | előre formázott szöveg | |
| small | kisebb szöveg | kisebb szöveg | |
| strike | áthúzott szöveg | | |
| alternatíva: | text-decoration: line-through; | | |
| sub | alsó index | alsó index a szövegben | |
| sup | felső index | felső index a szövegben | |
| u | aláhúzott szöveg | aláhúzott szöveg | |
| alternatíva: | text-decoration: underline; | | |
Logikai formázás
A logikai formázás esetén a szöveget tartalmi szempontok szerint csoportosítjuk. Vagyis itt nem kifejezetten a szöveg kinézetét állítjuk be, az ilyen jellegű formázás eredménye böngészőfüggő.| Tag | Leírás | példa | Megj. |
|---|---|---|---|
| cite | idézet | idézet | |
| code | programkód | programkód | |
| em | kiemelt szöveg | kiemelt szöveg | |
| strong | erősen kiemelt szöveg | erősen kiemelt szöveg |
Szöveg betűtípusának, méretének, színének megadása <font>
Láttuk, hogy alap formázásokat el tudunk végezni különböző tagekkel. De mi van, ha mi szeretnénk meghatározni, hogy a megjelenő szöveg betűtípusa milyen legyen? Erre használhatnánk a <font> taget, de ezt már nem javasolják a szabvány készítői, inkább a stíluslapokkal történő megadás a követendő. | Paraméter | Érték | Leírás | Megj. |
|---|---|---|---|
| size | abszolút: 1..7 relatív: +szám -szám | a betű méretének megadása. Ez történhet abszolút módon, amikor egy konkrét betűméretet állítunk be, 1-től 7-ig A relatív méretbeállításnál azt adhatjuk meg, hogy az alapként beállított betűmérethez képest mennyivel nagyobb, illetve kisebb betűméretet akarunk látni. Ha pl. 2-el nagyobbat, akkor a +2, ha 1-el kisebbet, akkor a -1 méretmegadást kell alkalmaznunk. Megjegyzés: Az alap betűméret beállítására a <basefont> tag szolgál. Ennek a tagnek nincs záró párja.Példa <basefont size="2"> | |
| CSS alternatíva font-size | abszolút: xx-small x-small small medium large x-large xx-large érték [pt,pc, in,cm,mm] relatív: larger smaller érték [em,ex, px] érték % | Az abszolút megadásánál választhatunk a 7 fokozat közül (nagyság szerinti sorrendben: xx-small, x-small, small, medium, large, x-large, xx-large ), vagy különböző mértékegységek szerint adhatjuk meg a méretet. A használható mértékegységek: pt: pont (1/72 inch) pc: pica (12 pont) in: inch (hüvelyk) cm: centiméter mm: milliméter A relatív megadásnál használhathatjuk a larger (nagyobb) és smaller (kisebb) betűtípust is, valamint a következő relatív mértékegységeket: em: valahányszoros magasság ex: x-magasság (az x-betű magasságának valahányszorosa) px: pixel (képpont) Ezen felül pedig %-os formában is megadhatjuk a méretet. A relatív méretmegadásnál az elem (az őt tartalmazó elemétől) örökölt értékéhez képest kerül megállapításra a méret. Ha az lap teljes egészére vonatkozóan akarjuk megadni az alapméretet, akkor a body tagnél meg kell adnunk a font-size paramétert. Például: <body style="font-size:12pt"> | |
| Kód | <font> Alapértelmezett méret </font> <br> <font size="2"> 2-es méret </font> <br> <font size="4"> 4-es méret </font> <br> <font size="+2"> 2-el növelt méret </font> <br> <font size="-1"> 1-el csökkentett méret </font> <br> <font size="-2"> 2-vel csökkentett méret /font> |
|---|---|
| Eredmény | Alapértelmezett méret 2-es méret 4-es méret 2-el növelt méret 1-el csökkentett méret 2-vel csökkentett méret |
| Kód | <p style="font-size:xx-small"> Szöveg 1</p> <p style="font-size:x-small"> Szöveg 2</p> <p style="font-size:small"> Szöveg 3</p> <p style="font-size:medium"> Szöveg 4</p> <p style="font-size:large"> Szöveg 5</p> <p style="font-size:x-large"> Szöveg 6</p> <p style="font-size:xx-large"> Szöveg 7</p> |
| Eredmény | Szöveg 1 Szöveg 2 Szöveg 3 Szöveg 4 Szöveg 5 Szöveg 6 Szöveg 7 |
| Kód | <p style="font-size:12pt"> Példa (12pt)</p> <p style="font-size:2pc"> Példa (1pc)</p> <p style="font-size:2em"> Példa (2em)</p> <p style="font-size:0.75em"> Példa (0.75em)</p> <p style="font-size:3ex"> Példa (3ex)</p> <p style="font-size:14px"> Példa (14px)</p> <p style="font-size:75%"> Példa (75%)</p> <p style="font-size:100%"> Példa (100%)</p> <p style="font-size:150%"> Példa (150%)</p> |
| Eredmény | Példa (12pt) Példa (1pc) Példa (2em) Példa (0.75em) Példa (3ex) Példa (14px) Példa (75%) Példa (100%) Példa (150%) |
Figyelem!
Ne használj különleges, egyedi betűtípusokat, mert azon betűtípusok, amelyek nincsenek az adott gépre felinstallálva, nem fognak megjelenni. Ezeket a szöveget a böngésző egy másik (alap) betűtípussal jeleníti meg.
| Paraméter | Érték | Leírás | Megj. |
|---|---|---|---|
| face | betűtípus | betűcsalád betűtípus1 (betűcsalád1), betűtípus2 (betűcsalád2), ... | A szöveg betűtípusát állíthatjuk be. Ha a megadott betűtípus telepítve van a számítógépen (kliensen), akkor a böngésző aszerint jeleníti meg a szöveget, különben pedig egy alapértelmezett betűtípust használ. Vesszővel elválasztva több betűtípust is felsorolhatunk. Ha egyik betűtípus sincs telepítve a gépen, akkor a böngészőben beállított alapértelmezett betűtípus szerint történik a megjelenítés. A beállítható általános betűcsaládok, amelybe tartozó betűtípust fog választani a böngésző. serif (pl: Times) sans-serif (pl: Helvetica) cursive (pl: Zapf-Chancery) fantasy (pl: Western) monospace (pl: Courier) | |
| CSS alternatíva font-family | betűtípus | betűcsalád betűtípus1 (betűcsalád1), betűtípus2 (betűcsalád2), ... | Itt is betűtípust és betűcsaládot adhatunk meg. Ha a betűtípus neve üres helyet tartalmaz, akkor idézőjelek közé kell tenni. pl. font-family: "Times New Roman" | |
| Kód | <font face="Times New Roman, Times, serif"> Serif (talpas) betűtípus használata </font> |
|---|---|
| Eredmény | Serif (talpas) betűtípus használata |
| Kód | <p style="font-family: Arial, Helvetica, sans-serif"> Sans-serif (talpnélküli) betűtípus használata</p> |
| Eredmény | Sans-serif (talpnélküli) betűtípus használata |
| Paraméter | Érték | Leírás | Megj. |
|---|---|---|---|
| color | szín színkód [#RRGGBB] | A betűk színét is többféleképpen be lehet állítani. Az első esetben a szín nevét használjuk, természetesen angolul. pl.: red, yellow, black, white, stb... A második esetben egy kóddal adjuk meg a színt. A 6 jegyű kódot a # jel vezeti be. Például #898134. A #898134 a szín úgynevezett RGB kódja. Az első két karakter a vörös (R=red) szín erősségét mutatja 16-os (hexadecimális) számrendszerben. A leggyengébb fokozat a 00, a legerősebb az FF. A harmadik és negyedik karakter a zöld szín (G=green) erőssége, az ötödik és hatodik pedig a kéké (B=blue). A #898134 kód eredménye pedig ez a szín lesz. | |
| CSS alternatíva color | szín színkód [#RRGGBB, rgb(0-255,0-255,0-255), rgb(%,%,%)] | Itt is használhatóak a fenti színnevek és színkódok. Ezen kívül lehetőségünk van arra, hogy tízes számrendszerben adjuk meg a színkódot, az rgb(szám,szám,szám) formában, ahol a számok 1 és 255 közöttiek lehetnek. Például az rgb(137,129,52) színkód eredménye ugyanaz a szín, amit az imént 16-os számrendszerben adtunk meg. Ezen kívül a színkódot megadhatjuk százalékos formában is, például az rgb(50%,50%,50%) szín eredménye egy szürke árnyalat lesz. Amíg a HTML kód esetén a szöveg színét a font tag paramétereként állíthattuk be, a stíluslapoknál számos tag esetén beállíthatjuk a színt, akár egy teljes bekezdésre vonatkozóan is ( <p> ) . Ha csak néhány karakter tulajdonságát akarjuk megváltoztatni, akkor használhatjuk a <span> taget, lásd a példákat. Ha pedig egy szakasz tulajdonságait akarjuk beállítani, amelyben több bekezdés, táblázat, kép, stb. is lehet, használhatjuk a div taget. Ekkor a kívánt tartalmat <div> és </div> elemek közé kell zárni, majd meg kell adni a szakaszra vonatkozó stílusdefiníciót. | |
Tipp!
A színek kódját a grafikai programok többsége megmutatja az adott színt kiválasztva. De az Color Schemer segítségével on-line módon is megtudhatod a színek kódját.
| Kód | <font color="red"> Piros szöveg</font> <br> <font color="#FF0000"> Ez is piros szöveg</font> <br> <font color="#0000FF"> Ez már kék</font> <br> <font color="#FF00FF"> Ez pedig lila</font> <br> <font color="#800080"> Ez pedig sötétlila</font> |
|---|---|
| Eredmény | Piros szöveg Ez is piros szöveg Ez már kék Ez pedig lila Ez pedig sötétlila |
| Kód | <p style="color:red"> A teljes bekezdés piros</p> <p style="color:#0000FF"> A teljes bekezdés kék</p> <p style="color:rgb(40%,40%,40%)"> A teljes bekezdés szürke</p> <p style="color:rgb(40%,40%,40%)"> A kedvenc színeim: <span style="color:#FF0000"> vörös</span> és <span style="color:#008000"> zöld</span> . |
| Eredmény | A teljes bekezdés piros A teljes bekezdés kék A teljes bekezdés szürke A kedvenc színeim: vörös és zöld. |
A paraméterek kombinálása
Most, hogy már több paraméterrel is megismerkedtünk, nézzünk példát arra is, hogy a fenti tulajdonságokat hogyan állíthatjuk be egyszerre egy adott szövegre vonatkozóan. Korábban már szóltunk arról, hogy a HTML paraméterek esetén üres hellyel kell elválasztani egymástól a paramétereket, stíluslapok esetén pedig pontosvesszőt kell tennünk az egyes paraméterek közé, most nézzük meg ezt a gyakorlatban is.| Kód | <p> <font size="3" color="#FF0000" face="Arial, Verdana, sans-serif"> HTML paraméterekkel formázott szöveg</font> </p> |
|---|---|
| Eredmény | HTML paraméterekkel formázott szöveg |
| Kód | <p style="font-size:large; font-family: Arial, Helvetica, sans-serif; color: rgb(50,20,80);"> Stílussal formázott bekezdés </p> |
| Eredmény | Stílussal formázott bekezdés |
0 megjegyzés:
Megjegyzés küldése