HTML-ben felsorolást és számozást készíteni szerkesztése
Innen: Hogyankell.hu
Figyelem: Nem vagy bejelentkezve. Ha szerkesztesz, az IP-címed nyilvánosan látható lesz a laptörténetben. Ha bejelentkezel vagy regisztrálsz, a szerkesztéseid a felhasználónevedhez lesznek társítva, egyéb hasznos dolgok mellett.
A szerkesztés visszavonható. Kérlek ellenőrizd alább a változásokat, hogy valóban ezt szeretnéd-e tenni, majd kattints a lap mentése gombra a visszavonás véglegesítéséhez.
| Aktuális változat | A te változatod | ||
| 1. sor: | 1. sor: | ||
== Hogyan kell {{PAGENAME}}? == | == Hogyan kell {{PAGENAME}}? == | ||
| − | + | Programozási ismeretek nélkül is könnyedén készíthetünk felsorolást HTML kódolásban. | |
| + | |||
== Lépések == | == Lépések == | ||
# '''Döntsük el, hogy milyen felsorolást szeretnénk készíteni!''' Az egyik verzió, ahol nem fontos az elemek sorrendje (rendezetlen lista), így egy pont lesz a felsorolásjel. A másik verzió a számozott felsorolás (rendezett lista), ahol arab számokkal kezdődnek a felsorolás egyes sorai. | # '''Döntsük el, hogy milyen felsorolást szeretnénk készíteni!''' Az egyik verzió, ahol nem fontos az elemek sorrendje (rendezetlen lista), így egy pont lesz a felsorolásjel. A másik verzió a számozott felsorolás (rendezett lista), ahol arab számokkal kezdődnek a felsorolás egyes sorai. | ||
| − | # '''Készítsünk rendezetlen listát!''' Ez az angol unordered list szó szerinti fordítása, amelyből a HTML kód is ered. A szükséges HTML parancs az "ul", ezzel kell nyitni és zárni a taget, melyek közé a felsorolás egyes elemeit írjuk. A felsorolás egyes elemeit pedig az "li" parancsok közé kell beírni. Tehát ahhoz, hogy képileg a következő felsorolást kapjuk, a következő kódrészletet kell beillesztenünk.[[Fájl:Unordered.jpg | + | # '''Készítsünk rendezetlen listát!''' Ez az angol unordered list szó szerinti fordítása, amelyből a HTML kód is ered. A szükséges HTML parancs az "ul", ezzel kell nyitni és zárni a taget, melyek közé a felsorolás egyes elemeit írjuk. A felsorolás egyes elemeit pedig az "li" parancsok közé kell beírni. Tehát ahhoz, hogy képileg a következő felsorolást kapjuk, a következő kódrészletet kell beillesztenünk.[[Fájl:Unordered.jpg]] |
| − | # '''Készítsünk rendezett listát, azaz számozott felsorolást!''' Az ehhez szükséges HTML parancs az "ol", ezzel kell nyitni és zárni a taget, melyek közé a felsorolás egyes elemeit írjuk. Az egyes elemeket az előző felsoroláshoz hasonlóan itt is az "li" nyitó és záró parancsok közé írjuk! Tehát ahhoz, hogy képileg a következő számozott felsorolást kapjuk, a következő kódrészletet kell beillesztenünk.[[Fájl:Ordered.jpg | + | # '''Készítsünk rendezett listát, azaz számozott felsorolást!''' Az ehhez szükséges HTML parancs az "ol", ezzel kell nyitni és zárni a taget, melyek közé a felsorolás egyes elemeit írjuk. Az egyes elemeket az előző felsoroláshoz hasonlóan itt is az "li" nyitó és záró parancsok közé írjuk! Tehát ahhoz, hogy képileg a következő számozott felsorolást kapjuk, a következő kódrészletet kell beillesztenünk.[[Fájl:Ordered.jpg]] |
| − | # '''Hogyan készíthetünk többszintes felsorolást?''' Ennek eszköze az előző parancsok kombinált alkalmazása. Döntsük el, hogy melyik típusú legyen a magasabb rendű felsorolás és annak parancsával kezdjük el a taget pl. ha a ponttal jelölt felsorolással akarjuk kezdeni, akkor a kezdő parancs az "ul". Ezt követő sorba kell megadni ennek a felsorolási szintnek az első elemét vagy amennyit szeretnénk az "li" nyitó és záró parancsok közé. Majd amelyik elem alá be szeretnénk illeszteni a következő szintet, akkor a következő sorba írjuk be az "ol" parancsot, és ahogy az előbb is tettük alá az "li" paranccsal adjuk meg a felsorolás elemeit egymás alá. Majd, ha ezzel megvagyunk, először zárjuk be az alsóbb szintet "ol" paranccsal, majd ha nem akarunk többet hozzáadni a felsőbb szint elemeihez, akkor azt is zárjuk be az "ul" paranccsal. Tehát ahhoz, hogy képileg a következő felsorolást kapjuk, a következő kódrészletet kell beillesztenünk. | + | # '''Hogyan készíthetünk többszintes felsorolást?''' Ennek eszköze az előző parancsok kombinált alkalmazása. Döntsük el, hogy melyik típusú legyen a magasabb rendű felsorolás és annak parancsával kezdjük el a taget pl. ha a ponttal jelölt felsorolással akarjuk kezdeni, akkor a kezdő parancs az "ul". Ezt követő sorba kell megadni ennek a felsorolási szintnek az első elemét vagy amennyit szeretnénk az "li" nyitó és záró parancsok közé. Majd amelyik elem alá be szeretnénk illeszteni a következő szintet, akkor a következő sorba írjuk be az "ol" parancsot, és ahogy az előbb is tettük alá az "li" paranccsal adjuk meg a felsorolás elemeit egymás alá. Majd, ha ezzel megvagyunk, először zárjuk be az alsóbb szintet "ol" paranccsal, majd ha nem akarunk többet hozzáadni a felsőbb szint elemeihez, akkor azt is zárjuk be az "ul" paranccsal. Tehát ahhoz, hogy képileg a következő felsorolást kapjuk, a következő kódrészletet kell beillesztenünk. |
== Tippek == | == Tippek == | ||
| − | * Ha behúzást szeretnénk csinálni a felsorolásban, és ez más formázási paranccsal nincs definiálva, akkor a felsoroláson belül inkább a spacet használjuk, mint a tabot. | + | * Ha behúzást szeretnénk csinálni a felsorolásban, és ez más formázási paranccsal nincs definiálva, akkor a felsoroláson belül inkább a spacet használjuk, mint a tabot. |
* Hogyan ellenőrizhetjük, hogy helyes –e a megadott kód? A [http://validator.w3.org/ HTML Validator] segítségével többféle módon is ellenőrizhetjük egy HTML kód helyességét. | * Hogyan ellenőrizhetjük, hogy helyes –e a megadott kód? A [http://validator.w3.org/ HTML Validator] segítségével többféle módon is ellenőrizhetjük egy HTML kód helyességét. | ||
** Bemásoljuk a weboldal URL-jét, és az megmutatja a kódban lévő hibákat. | ** Bemásoljuk a weboldal URL-jét, és az megmutatja a kódban lévő hibákat. | ||
| 25. sor: | 26. sor: | ||
== Kapcsolódó források, hivatkozások == | == Kapcsolódó források, hivatkozások == | ||
| − | * [ | + | * [http://www.standardsmode.hu/html-css/listak/ HTML, CSS listák] |
| − | |||
| − | |||
