☰ 4. osztály - Számítástechnika és informatika

4. osztály - Számítástechnika és informatika

3. Web oldalak tervezése és kidolgozása - Elmélet

HTML haladó technikái


HTML színek

A mai korszerű képernyők a színeket úgy mutatják mint a piros, zöld és kék szinek keverékét (Red Green Blue - RGB).

Három módja van a színek megadásánál:

  • RGB (Red, Green, Blue)
  • Hexadecimális színek
  • Színek nevei

RGB (Red, Green, Blue)

A színeket a következő formátumban adják meg: rgb(R, G, B). Mindegyik szám a zárójelben (R, G, B) felveheti bármelyik értéket 0 és 255 között. A számok mutatják a piros, zöld és kék szín intenzitását 0 és 255 között. A legsötétebb a 0, amíg a 255 a legvilágosabb. Például a rgb(255,0,0) piros szín, mivel a piros 255 amíg a zöld és a kék 0.

Color RGB
  rgb(255,0,0)
  rgb(255,255,0)
  rgb(0,255,0)
  rgb(0,255,255)
  rgb(0,0,255)

A szürke szín árnyalatainál a három összetevő szín egyforma intenzitásokkal járul hozzá:

Color RGB
  rgb(0,0,0)
  rgb(64,64,64)
  rgb(128,128,128)
  rgb(192,192,192)
  rgb(255,255,255)

A 256 * 256 * 256 = 16.777.216 megadja a színek számát.


Hexadecimális színek

A színek megadása megegyezik az előző módszerrel. Mindegyik a három szín közül 256 különböző értékkel van megadva. Az eltérés az előző színmegadás formától az hogy a színeket nem tizedes hanem hexadecimális számrendszerben adják meg. Az rgb(R, G, B) színmegadásnál a három szám R, G és B tizedes számrendszerben vannak megadva, 0 és 255 között. E módszernél a számok hexadecimális számrendszerben vannak megadva a következő formátumban: #RRGGBB, ahol az RR, GG és BB értékei 0 és FF között vannak.

Az előző példában a piros szín meg van adva mint rgb(255,255,255), ez esetben #FF0000 lenne.

Color RGB
  #FF0000
  #FFFF00
  #00FF00
  #00FFFF
  #0000FF

A szürke szín árnyalatainál a három összetevő szín egyforma intenzitásokkal járul hozzá:

Color RGB
  #000000
  #404040
  #808080
  #C0C0C0
  #FFFFFF

A 256 * 256 * 256 = 16.777.216 megadja a színek számát.


A színek nevei

A színeket a nevük alapján is meg lehet adni. Mindegyik mai korszerű böngésző program támogatja a következő 140 szín nevet.

Color Name HEX RGB Color
AliceBlue #F0F8FF 240,248,255  
AntiqueWhite #FAEBD7 250,235,215  
Aqua #00FFFF 0,255,255  
Aquamarine #7FFFD4 127,255,212  
Azure #F0FFFF 240,255,255  
Beige #F5F5DC 245,245,220  
Bisque #FFE4C4 255,228,196  
Black #000000 0,0,0  
BlanchedAlmond #FFEBCD 255,235,205  
Blue #0000FF 0,0,255  
BlueViolet #8A2BE2 138,43,226  
Brown #A52A2A 165,42,42  
BurlyWood #DEB887 222,184,135  
CadetBlue #5F9EA0 95,158,160  
Chartreuse #7FFF00 127,255,0  
Chocolate #D2691E 210,105,30  
Coral #FF7F50 255,127,80  
CornflowerBlue #6495ED 100,149,237  
Cornsilk #FFF8DC 255,248,220  
Crimson #DC143C 220,20,60  
Cyan #00FFFF 0,255,255  
DarkBlue #00008B 0,0,139  
DarkCyan #008B8B 0,139,139  
DarkGoldenRod #B8860B 184,134,11  
DarkGray #A9A9A9 169,169,169  
DarkGrey #A9A9A9 169,169,169  
DarkGreen #006400 0,100,0  
DarkKhaki #BDB76B 189,183,107  
DarkMagenta #8B008B 139,0,139  
DarkOliveGreen #556B2F 85,107,47  
DarkOrange #FF8C00 255,140,0  
DarkOrchid #9932CC 153,50,204  
DarkRed #8B0000 139,0,0  
DarkSalmon #E9967A 233,150,122  
DarkSeaGreen #8FBC8F 143,188,143  
DarkSlateBlue #483D8B 72,61,139  
DarkSlateGray #2F4F4F 47,79,79  
DarkSlateGrey #2F4F4F 47,79,79  
DarkTurquoise #00CED1 0,206,209  
DarkViolet #9400D3 148,0,211  
DeepPink #FF1493 255,20,147  
DeepSkyBlue #00BFFF 0,191,255  
DimGray #696969 105,105,105  
DimGrey #696969 105,105,105  
DodgerBlue #1E90FF 30,144,255  
FireBrick #B22222 178,34,34  
FloralWhite #FFFAF0 255,250,240  
ForestGreen #228B22 34,139,34  
Fuchsia #FF00FF 255,0,255  
Gainsboro #DCDCDC 220,220,220  
GhostWhite #F8F8FF 248,248,255  
Gold #FFD700 255,215,0  
GoldenRod #DAA520 218,165,32  
Gray #808080 128,128,128  
Grey #808080 128,128,128  
Green #008000 0,128,0  
GreenYellow #ADFF2F 173,255,47  
HoneyDew  #F0FFF0 240,255,240  
HotPink #FF69B4 255,105,180  
IndianRed #CD5C5C 205,92,92  
Indigo #4B0082 75,0,130  
Ivory #FFFFF0 255,255,240  
Khaki #F0E68C 240,230,140  
Lavender #E6E6FA 230,230,250  
LavenderBlush #FFF0F5 255,240,245  
LawnGreen #7CFC00 124,252,0  
LemonChiffon #FFFACD 255,250,205  
LightBlue #ADD8E6 173,216,230  
LightCoral #F08080 240,128,128  
LightCyan #E0FFFF 224,255,255  
LightGoldenRodYellow #FAFAD2 250,250,210  
LightGray #D3D3D3 211,211,211  
LightGrey #D3D3D3 211,211,211  
LightGreen #90EE90 144,238,144  
LightPink #FFB6C1 255,182,193  
LightSalmon #FFA07A 255,160,122  
LightSeaGreen #20B2AA 32,178,170  
LightSkyBlue #87CEFA 135,206,250  
LightSlateGray #778899 119,136,153  
LightSlateGrey #778899 119,136,153  
LightSteelBlue #B0C4DE 176,196,222  
LightYellow #FFFFE0 255,255,224  
Lime #00FF00 0,255,0  
LimeGreen #32CD32 50,205,50  
Linen #FAF0E6 250,240,230  
Magenta #FF00FF 255,0,255  
Maroon #800000 128,0,0  
MediumAquaMarine #66CDAA 102,205,170  
MediumBlue #0000CD 0,0,205  
MediumOrchid #BA55D3 186,85,211  
MediumPurple #9370DB 147,112,219  
MediumSeaGreen #3CB371 60,179,113  
MediumSlateBlue #7B68EE 123,104,238  
MediumSpringGreen #00FA9A 0,250,154  
MediumTurquoise #48D1CC 72,209,204  
MediumVioletRed #C71585 199,21,133  
MidnightBlue #191970 25,25,112  
MintCream #F5FFFA 245,255,250  
MistyRose #FFE4E1 255,228,225  
Moccasin #FFE4B5 255,228,181  
NavajoWhite #FFDEAD 255,222,173  
Navy #000080 0,0,128  
OldLace #FDF5E6 253,245,230  
Olive #808000 128,128,0  
OliveDrab #6B8E23 107,142,35  
Orange #FFA500 255,165,0  
OrangeRed #FF4500 255,69,0  
Orchid #DA70D6 218,112,214  
PaleGoldenRod #EEE8AA 238,232,170  
PaleGreen #98FB98 152,251,152  
PaleTurquoise #AFEEEE 175,238,238  
PaleVioletRed #DB7093 219,112,147  
PapayaWhip #FFEFD5 255,239,213  
PeachPuff #FFDAB9 255,218,185  
Peru #CD853F 205,133,63  
Pink #FFC0CB 255,192,203  
Plum #DDA0DD 221,160,221  
PowderBlue #B0E0E6 176,224,230  
Purple #800080 128,0,128  
RebeccaPurple #663399 102,51,153  
Red #FF0000 255,0,0  
RosyBrown #BC8F8F 188,143,143  
RoyalBlue #4169E1 65,105,225  
SaddleBrown #8B4513 139,69,19  
Salmon #FA8072 250,128,114  
SandyBrown #F4A460 244,164,96  
SeaGreen #2E8B57 46,139,87  
SeaShell #FFF5EE 255,245,238  
Sienna #A0522D 160,82,45  
Silver #C0C0C0 192,192,192  
SkyBlue #87CEEB 135,206,235  
SlateBlue #6A5ACD 106,90,205  
SlateGray #708090 112,128,144  
SlateGrey #708090 112,128,144  
Snow #FFFAFA 255,250,250  
SpringGreen #00FF7F 0,255,127  
SteelBlue #4682B4 70,130,180  
Tan #D2B48C 210,180,140  
Teal #008080 0,128,128  
Thistle #D8BFD8 216,191,216  
Tomato #FF6347 255,99,71  
Turquoise #40E0D0 64,224,208  
Violet #EE82EE 238,130,238  
Wheat #F5DEB3 245,222,179  
White #FFFFFF 255,255,255  
WhiteSmoke #F5F5F5 245,245,245  
Yellow #FFFF00 255,255,0  
YellowGreen #9ACD32 154,205,50  



HTML stílusok - CSS

CSS a Cascading Style Sheets rövidítése. A stílusokat a HTML-ben háromféleképpen lehet definiálni:

  • Inline - a style attribútum használata a HTML elemekben
  • Internal - a <style> tag használata a HTML <head> szekcióban
  • External - egy vagy több CSS fájl alkalmazása

A legelterjedtebb stílus megadása a CSS fájlokban van.


CSS helyesírás

A CSS stílusok megadása a következőképpen történik:
elem { tulajdonság:érték; tulajdonság:érték; ... }

Az elem a HTML elem neve. A tulajdonság CSS tulajdonság. Az érték CSS érték. A különböző stílusok pontosvesszőkkel vannak elválasztva (;).


Inline styling (Inline CSS)

Inline styling hasznos az egyéni HTML elemek stílusmegadásánál. Az Inline stylingnál a style attribútumot kell használni. Ez az inline stil a cím színét változtatja:

...
<h1 style="color:blue">This is a Blue Heading</h1>
...


E html kód kinézete a böngészőben:



Internal styling (Internal CSS)

Internal style leggyakrabban az összes HTML elem stílusmegadására az adott oldalra vonatkozik. Internal styling a <head> részben a HTML oldalon kell megadni, a <style> tag használatával:

<head>
...
   <style>
      body{background-color:lightgray;}
      h1{color:blue;}
      p{color:green;}
   </style>
...
</head>
...
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
...


E html kód kinézete a böngészőben:



External Styling (External CSS)

A CSS fájlok melyekben a stílusok vannak definiálva hasznosak amikor több oldalra kell alkalmazni őket. A CSS fájlok segítségével a teljes weboldal kinézetét néhány lépésben lehet megtenni, módosítva a CSS fájlt. A CSS fájlok megadását a <head> részben kell megadni a HTML kódban.

...
<head>
   <link rel="stylesheet" href="styles.css">
</head>
...



CSS fontok

CSS color tulajdonság megadja a HTML elem szöveg színét.

CSS font-family tulajdonság megadja a HTML elem fonttipusát.

CSS font-size tulajdonság megadja a HTML elem szöveg méretét.

...
<style>
   h1{
      color:blue;
      font-family:verdana;
      font-size:300%;
   }
   p{
      color:red;
      font-family:courier;
      font-size:160%;
   }
</style>
...
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
...


E html kód kinézete a böngészőben:



CSS box model

Minden HTML elem körül keret van mégha láthatatlan is.


CSS border tulajdonság megadja a keret láthatóságát a HTML elem körül:

...
<style>
   p {
      border:1px solid gray;
   }
</style>
...
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
...


E html kód kinézete a böngészőben:



CSS padding tulajdonság megadja a padding-et (területet) a kereten belül:

...
<style>
   p {
      border:1px solid gray;
      padding:10px;
   }
</style>
...
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
...


E html kód kinézete a böngészőben:



CSS margin tulajdonság megadja a margót (területet) a körvonalon kívül:

...
<style>
   p {
      border:1px solid gray;
      padding:10px;
      margin:50px;
   }
</style>
...
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
...


E html kód kinézete a böngészőben:



Áttekintés

  • style attribútumot alkalmazni az inline stílusoknál
  • <style> tagot alkalmazni az internal CSS megadásánál
  • <link> tagot alkalmazni CSS fájl iránti kapcsolat létrehozásához
  • <head> tagot alkalmazni a <style> és <link> elemek megadásánál
  • CSS color tulajdonságot alkalmazni a szöveg színének megadásánál
  • CSS font-family tulajdonságot alkalmazni a fontok kiválasztásánál
  • CSS font-size tulajdonságot alkalmazni a fontok méretének megadásánál
  • CSS border za tulajdonságot alkalmazni a kőrvonal megjelenítésénél
  • CSS padding tulajdonságot alkalmazni a terület megadásánál a kőrvonalon belül
  • CSS margin tulajdonságot alkalmazni a margó megadásánál a kőrvonalon kívül


HTML táblázatok

A táblázatokat a <table> tag segítségével kell megadni. Az új sor megnyitását a <tr> (table row) definiálja. Az új oszlopot a <td> (table data) tag nyitja. A táblázat fejlécét a <th> (table header) adja meg. A táblázatok tartalmazhatnak minden fajta HTML elemet: szöveg, képek, listák, másik táblázatok és hasonló elemeket.

...
<table>
   <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
   </tr>
   <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
   </tr>
   <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
   </tr>
   <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
   </tr>
</table>
...


E html kód kinézete a böngészőben:



HTML táblázat border attribútummal

Amennyiben a border (kőrvonal) nincs megadva, nem lesz látható. A border attribútum alkalmazásával a kőrvonalak láthatóvá válnak. Erre a célra ajánlott a CSS border tulajdonságot alkalmazni a <style> tag-on belül:

...
<style>
   table, th, td {
      border: 1px solid black;
   }
</style>
...


E html kód kinézete a böngészőben:

A táblázatnak is meg a cellának is szükséges megadni a kőrvonalát.



HTML táblázat egy vonalból álló kőrvonalal

Amennyiben a kőrvonal egy vonalból áll, meg kell adni a border-collapse CSS tulajdonságot:

...
<style>
   table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
   }
</style>
...


E html kód kinézete a böngészőben:



A szöveg és a kőrvonal közotti tér megadása a HTML táblázatoknál

A padding adja meg a teret a cella tartalma és a kőrvonal között. Amennyiben a padding nincs megadva a cella üres tér nélkül jelenik meg (a tartalom és a kőrvonal között). Az üres tér megadására a CSS padding tulajdonság van előrelátva:

...
<style>
   table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
   }
   th, td {
      padding: 15px;
   }
</style>
...


E html kód kinézete a böngészőben:



A HTML táblázat fejléce

A fejléceket a <th> taggal kell megadni. A böngészők többnyire alapértelmezetten a fejléc szövegét vastgított betűkkel és a cella közepén jeleníti meg:

...
<style>
   table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
   }
   th, td {
      padding: 5px;
   }
</style>
...


E html kód kinézete a böngészőben:


Balra zárt táblázat fejléchez a CSS text-align tulajdonságot kell alkalmazni:

...
<style>
   table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
   }
   th, td {
      padding: 5px;
   }
   th {
      text-align: left;
   }
</style>
...


E html kód kinézete a böngészőben:



A HTML táblázat cellák körüli terület

A Border spacing a cellák közötti terület. A cellák közötti terület beállításához a CSS border-spacing tulajdonságot kell alkalmazni:

...
<style>
   table, th, td {
      border: 1px solid black;
      padding: 5px;
   }
   table {
      border-spacing: 15px;
   }
</style>
...


E html kód kinézete a böngészőben:



A cellák melyek több oszlopon át terjednek

A cellák terjedésére több oszlopon át a colspan attribútumot kell alkalmazni:

...
<table>
   <tr>
      <th>Name</th>
      <th colspan="2">Telephone</th>
   </tr>
   <tr>
      <td>Bill Gates</td>
      <td>555 77 854</td>
      <td>555 77 855</td>
   </tr>
</table>
...


E html kód kinézete a böngészőben:



A cellák melyek több soron át terjednek

A cellák terjedésére több soron át a rowspan attribútumot kell alkalmazni:

...
<table>
   <tr>
      <th>Name</th>
      <td>Bill Gates</td>
   </tr>
   <tr>
      <th rowspan="2">Telephone</th>
      <td>555 77 854</td>
   </tr>
   <tr>
      <td>555 77 855</td>
   </tr>
</table>
...


E html kód kinézete a böngészőben:



A HTML táblázat címe

A cím (magyarázat) hozzáadásához a <caption> tag-ot kell használni:

...
<table style="width:100%">
<caption>Number of earned points</caption>
...


E html kód kinézete a böngészőben:

A <caption> tagot a <table> tag után kell megadni.



Áttekintés

  • HTML <table> tagot alkalmazni a táblázat megadásánál
  • HTML <tr> tagot alkalmazni a táblázat sorainak megadásánál
  • HTML <td> tagot alkalmazni a táblázat adatainak megadásánál
  • HTML <th> tagot alkalmazni a táblázat fejlécének a megadásánál
  • HTML <caption> tagot alkalmazni a táblázat címénak megadásánál
  • CSS border tulajdonságot alkalmazni a cella kőrvonal megadásánál
  • CSS border-collapse tulajdonságot alkalmazni az egyvonalas kőrvonal megadásánál
  • CSS padding tulajdonságot alkalmazni a távolság beállításánál a cella tartalma és a kőrvonal között
  • CSS text-align tulajdonságot alkalmazni a szöveg beállításánál a cellában
  • CSS border-spacing tulajdonságot alkalmazni a cellák közötti távolság beállításánál
  • colspan atrribútumot alkalmazni a cella terjedelmére több oszlopon át
  • rowspan atrribútumot alkalmazni a cella terjedelmére több soron át

A táblázatokhoz használható HTML tagok

TagJelentés
<table>A táblázat megadása
<th>A táblázat fejlécének a megadása
<tr>A táblázat sorának a megadása
<td>A táblázat cellájának a megadása
<caption>A táblázat címének a megadása
<colgroup>Formázás céljából egy vagy több oszlop kiválasztása
<col>Column tulajdonság megadása a <colgroup> elemen belül
<thead>A táblázat fejlécének megadása
<tbody>A táblázat tartalmának megadása
<tfoot>A táblázat láblécének megadása



HTML listák

A listák a <ul> taggal kezdődnek, minden lista eleme a <li> taggal kezdődik.

...
<h4>Unordered List with Default Bullets</h4>
<ul>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ul>
...


E html kód kinézete a böngészőben:



HTML listák - style attribútum

A felsorolás jelek kiválasztása céljából a Style attribútumot hozzá lehet rendelni a listához:

StyleOpis
list-style-type:discOznaka elementa liste crna tačka (podrazumevano)
list-style-type:circleOznaka elementa liste krug
list-style-type:squareOznaka elementa liste kvadrat
list-style-type:noneOznaka elementa neće biti prikazana


list-style-type:disc

...
<h4>Unordered List with Disc Bullets</h4>
<ul style="list-style-type:disc">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ul>
...


E html kód kinézete a böngészőben:



list-style-type:circle

...
<h4>Unordered List with Circle Bullets</h4>
<ul style="list-style-type:circle">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ul>
...


E html kód kinézete a böngészőben:



list-style-type:square

...
<h4>Unordered List with Square Bullets</h4>
<ul style="list-style-type:square">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ul>
...


E html kód kinézete a böngészőben:



list-style-type:none

...
<h4>Unordered List Without Bullets</h4>
<ul style="list-style-type:none">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ul>
...


E html kód kinézete a böngészőben:




HTML felsorolások

A felsorolások a <ol> taggal kezdődnek, minden felsorolási elem a <li> taggal kezdődik.

...
<h4>Ordered List</h4>
<ol>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ol>
...


E html kód kinézete a böngészőben:



HTML felsorolások - type attribútum

A felsorolás jel kiválasztása céljából a Type attribútumot hozzá lehet rendelni a felsoroláshoz:

TypeOpis
type="1"Oznaka elementa nabrajanja broj (podrazumevano)
type="A"Oznaka elementa nabrajanja velika slova
type="a"Oznaka elementa nabrajanja mala slova
type="I"Oznaka elementa nabrajanja rimski brojevi velikim slovima
type="i"Oznaka elementa nabrajanja rimski brojevi malim slovima


type="1"

...
<h4>Ordered List</h4>
<ol type="1">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ol>
...


E html kód kinézete a böngészőben:



type="A"

...
<h4>Ordered List with Letters</h4>
<ol type="A">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ol>
...


E html kód kinézete a böngészőben:



type="a"

...
<h4>Ordered List with Lowercase Letters</h4>
<ol type="a">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ol>
...


E html kód kinézete a böngészőben:



type="I"

...
<h4>Ordered List with Roman Numbers</h4>
<ol type="I">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ol>
...


E html kód kinézete a böngészőben:



type="i"

...
<h4>Ordered List with Lowercase Roman Numbers</h4>
<ol type="i">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ol>
...


E html kód kinézete a böngészőben:




HTML listák magyarázattal

A HTML támogatja a magyarázattal ellátott listákat. Ezeknél a listáknél minden elemhez hozzá lehet rendelni a magyarázatot. A listát a <dl> tag adja meg, minden felsorolt elem a <dt> taggal van megadva, amíg a <dd> tag megadja a magyarázatot.

...
<h4>A Description List</h4>
<dl>
   <dt>Coffee</dt>
   <dd>- black hot drink</dd>
   <dt>Milk</dt>
   <dd>- white cold drink</dd>
</dl>
...


E html kód kinézete a böngészőben:



Beágyazott HTML listák

Kiépíthetőek beágyazott listák is (listán belüli listák):

...
<h4>A Nested List</h4>
<ul>
   <li>Coffee</li>
   <li>Tea
      <li>Black Tea</li>
      <li>Green Tea</li>
   </li>
   <li>Milk</li>
</ul>
...


E html kód kinézete a böngészőben:



Vízszintes listák

A listákat sokféleképpen lehet stilizálni a CSS segítségével. Az egyik népszerű lista megjelenítése vízszintes formában:

...
<style>
   ul#menu li {
      display:inline;
   }
</style>
...
<h4>Horizontal List</h4>
<ul id="menu">
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
   <li>PHP</li>
</ul>
...


E html kód kinézete a böngészőben:


Stílus alkalmazásával lehetséges menüt is kiépíteni:

...
<style>
   ul#menu {
      padding: 0;
   }
   ul#menu li {
      display: inline;
   }
   ul#menu li a {
      background-color: black;
      color: white;
      padding: 10px 20px;
      text-decoration: none;
      border-radius: 4px 4px 0 0;
   }
   ul#menu li a:hover {
      background-color: orange;
   }
</style>
...
<h2>Horizontal List</h2>
<ul id="menu">
   <li><a href="#">HTML</a></li>
   <li><a href="#">CSS</a></li>
   <li><a href="#">JavaScript</a></li>
   <li><a href="#">PHP</a></li>
</ul>
...


E html kód kinézete a böngészőben:



Áttekintés

  • Alkalmazni a HTML <ul> elemet a lista megadásához
  • Alkalmazni a HTML style attribútumot a felsorolás jel kiválasztásához
  • Alkalmazni a HTML <ol> elemet a felsorolás megadásához
  • Alkalmazni a HTML type attribútumot a felsorolás jel kiválasztásához
  • Alkalmazni a HTML <li> elemet a felsorolandó elemek megadásához
  • Alkalmazni a HTML <dl> elemet a magyarázatos listák megadásához
  • Alkalmazni a HTML <dt> elemet a felsorolandó elemek megadásához
  • Alkalmazni a HTML <dd> elemet a magyarázatokhoz
  • A listák beágyazottak is lehetnek
  • A listák tartalmazhatnak más HTML elmeket is
  • Alkalmazni a CSS tulajdonságot display:inline a vzszintes list megjelenítéséhez

Listák és felsorolások tagjai

TagOpis
<ul>Lista megadása
<ol>Felsorolás megadása
<li>Listák elemeinek a megadása
<dl>Magyarázattal ellátott lista megadása
<dt>Magyarázattal ellátott lista eleme
<dd>Magyarázattal ellátott lista magyarázata