HTML feladatok (77 feladat)

Feladat leírás:

ul - számozás nélküli listák (Unordered List)
ol - számozott listák (Ordered List)
li - lista elem (List Item)
type="A" - a lista típusát meghatározó attribútum
list-style-type: square; - a listaelemek előtti jelölőt négyzetre beállító CSS kód

Egy példa nagybetűkkel számozott listára:
<ol type="A">
 <li>Első elem</li>
 <li>Második elem</li>
 <li>Harmadik elem</li>
</ol>

Az eredménye:

1. Első elem
2. Második elem
3. Harmadik elem

A listaelemek jelölőjét saját képre az alábbi módon lehet CSS-sel lecserélni:
 ul {
  list-style: none; /* Kikapcsoljuk az alapértelmezett jelölést */
 }
 li::before { /* Így hivatkozunk a "li" elem előtti jelölőre */
  content: url("saját_kép.png"); /* A jelölő "tartalma" egy képfájlban levő kép */
 }

A jelölők módosítása piros hópihére ⁕, amely a \2055 Unicode karakter:
 ul {
  list-style: none; /* Kikapcsoljuk az alapértelmezett jelölést */
 }

 li::before { /* Így hivatkozunk a "li" elem előtti jelölőre */
  content: "\2055 "; /* A jelölő "tartalma" a \2055-ös Unicode karakter és még két szóköz */
  color: red; /* Beállítjuk a jelölő színét */
 }


W3Schools: HTML Lists

Oldd meg az alábbi űrlap feladatait: 02 HTML Listák - teszt

Feladat leírás:
Készíts el egy szabványos HTML fájlt "12-01 Felsorolasok.html" néven, amely tartalmazza az alábbi elemeket: ul, ol, li, div, strong, em

Az oldal a mintának megfelelően tartalmazzon rendezetlen és rendezett, nagybetűkkel jelölt és kombinált listákat is.

Az eredményt ellenőrizd le egy online HTML validátorral!

Feladat leírás:
Készíts el egy szabványos HTML fájlt "12-02 Lista jelolo.html" néven
- Az oldal nyelve legyen magyar, a kódolása pedig UTF-8
- A böngésző fülszövege: Lista jelölő
- A főcím "Lista jelölő" és egyes címsorral formázott
- Készíts két rendezetlen (unordered) listát három-három elemmel. Az egyik: Piros, Fehér, Zöld. A másik: Duna, Tisza, Maros.

Internal CSS-sel állítsd be az alábbiakat:
- Az első lista elemek jelölője négyzet (square)
- A második lista elemek jelölője kör (circle)

Az eredményt ellenőrizd le egy online HTML validátorral!

Feladat leírás:
Készíts el egy szabványos HTML fájlt "12-03 Unicode jelolo.html" néven
- Az oldal nyelve legyen magyar, a kódolása pedig UTF-8
- A böngésző fülszövege: Unicode lista jelölő
- A főcím "Unicode lista jelölő" és egyes címsorral formázott
- Készíts egy rendezetlen (unordered) listát három elemmel: Első, Második, Harmadik

Internal CSS-sel állítsd be az alábbiakat:
- A lista elemek jelölője zöld végtelen jel (Unicode kódja: \221E)
- A jelölő mérete 120%

Az eredményt ellenőrizd le egy online HTML validátorral!

Feladat leírás:
Készíts el egy szabványos HTML fájlt "12-04 Csillagok.html" néven, a mellékelt fájlból kiindulva
- Az oldal nyelve legyen magyar, a kódolása pedig UTF-8
- A böngésző fülszövege: Csillagok
- A főcím "Csillagnevek" és egyes címsorral formázott
- Készíts egy rendezetlen (unordered) listát öt ismertebb csillag nevével: Nap, Szíriusz, Vega, Capella, Altares

Internal CSS-sel állítsd be az alábbiakat:
- Az oldal alapértelmezett betűmérete 1.5rem
- A listaelemek jelölője a mellékelt "csillag.png" kép

Az eredményt ellenőrizd le egy online HTML validátorral!

Feladat leírás:
Adott a mellékelt HTML fájl "12-05 Hibajavitas.html" néven, amelyben van 10 hiba illetve hiányosság.
A megoldás során csak internal CSS-t szabad használni, azaz inline és external CSS-t nem.
Javítsd a hibákat és pótold a hiányosságokat, ha az alábbi előírásoknak kell megfelelni:

- Az oldal nyelve magyar, a kódolása pedig UTF-8
- Böngésző fülszövege "HTML Listák" és ugyanez a szövege az egyes címsorral formázott címnek is.
- A mintának megfelelően legyen egy három elemű "I. Sorszámozott lista": Első, Második, Harmadik
- Utána egy "II. Nem rendezett lista", ugyanazzal a három elemmel.
- Utána egy "III. Nagybetűkkel jelölt lista", ugyanazzal a három elemmel.
- Utána egy "IV. Négyzetekkel jelölt lista", ugyanazzal a három elemmel.
- Utána egy "V. Kék kettőskereszttel jelölt lista", ugyanazzal a három elemmel, amely listának a belső bal margója 20px;

Az eredményt ellenőrizd le egy online HTML validátorral!