HTML - Órai tananyag

Szent Angéla Általános Iskola és Gimnázium web-programozási szakkör.
2. órának a jegyzete - HTML
Készítette: Sztanka-Tóth Tamás, 2012 március

Bevezetés

HTML = HyperText Markup Language, azaz hiperszöveg jelölő nyelv

index.html, mi ez?

A HTML állomány egy olyan szöveges állomány, amely különböző formázóutasításokat (úgynevezett tageket (ejtsd: tegeket)) és a megjelenítendő, letöltendő, stb. objektumokra mutató hivatkozásokat tartalmaz.

Hogyan készítünk .html fájlokat?

Ilyen állományt egy nagyon egyszerű szövegszerkesztő programmal is készíthetünk, ha már ismerjük a megfelelő HTML utasításokat.

Kezdetek

Bár léteznek olyan programok ( pl.: netscape compozer ) amellyekkel lehet honlapokat készíteni grafikusan, ez a módszer kezdőknek nem ajánlott. A kezdetekben fontos, hogy megismerkedjünk a HTML kódírás több elemével.

A html elemei

A html elemei = A HTML oldal, úgynevezett tag-ekből epül fel.
egy ilyen tag-et a következő módon kell definiálni = <tagnév tulajdonság1=”érték1” tulajdonság2=”érték2”>
FONTOS, hogy a legtöbb tag-et be is kell szárni.
pl.: a bekezdés tag = <p>Ide kell írni a bekezdésbe kerülő szöveget</p>
A leggyakoribb tag, amit nem kell bezárni a sortörés = <br />

Az XHTML szabvány

Ez egy újabb szabvány, mely több megkötést tartalmaz a sima HTML szabványhoz képest. Ezt a szabványt azért hozták létre hogy a .html oldalak megfeleljenek az XML szabványnak is.

Az XHTML szabvány főbb szabályai:

Fontosabb tag-ek

Név Kód Megjelenés
Sörtorés Hol volt hol nem volt, <br /> volt egyszer egy házikó. Hol volt hol nem volt,
volt egyszer egy házikó.
Címsorok <h6>6-os szintű címsor</h6>
<h5>5-ös szintű címsor</h5>
<h4>4-es szintű címsor</h4>
<h3>3-as szintű címsor</h3>
<h2>2-es szintű címsor</h2>
<h1>1-es szintű címsor</h1>
6-os szintű címsor
5-ös szintű címsor

4-es szintű címsor

3-as szintű címsor

2-es szintű címsor

1-es szintű címsor

Felsoroló lista <h4>Kocsik:</h4>
<ul>
 <li>BMW</li>
  <li>Ford</li>
  <li>Mercedesz</li>
  <li>Skoda</li>
  <li>Audi</li>
  <li>Renault</li>
  <li>Peugeot</li>
</ul>

Kocsik:

  • BMW
  • Ford
  • Mercedesz
  • Skoda
  • Audi
  • Renault
  • Peugeot
Számozó lista <h4>A verseny végeredménye:</h4>
<ol>
  <li>Hamilton</li>
  <li>Vettel</li>
  <li>Raikonen</li>
  <li>Webber</li>
  <li>Schumaher</li>
  <li>Massa</li>
  <li>Alonso</li>
</ol>

A verseny végeredménye:

  1. Hamilton
  2. Vettel
  3. Raikonen
  4. Webber
  5. Schumaher
  6. Massa
  7. Alonso
Bekezdések <p>Ez az első bekezdés</p><p>Ez a második bekezdés</p>

Ez az első bekezdés

Ez a második bekezdés

Képek <img src="felho.jpg" alt="ez egy felhő" /> ez egy felhő
Hivatkozások <a href="http://www.google.com">Google</a><br /><br />

<a href="mailto:sztankatt@gmail.com">Sztanka-Tóth Tamás</a>
Google

Sztanka-Tóth Tamás
Táblázatok <table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="2"></td>
    <td rowspan="2"></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="2" rowspan="2"></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>

Első feladat

Csináljuk meg kedvenc könyveinknek a gyűjteményét. Először soroljuk fel számozott listában az első 5 kedvenc könyvünket, majd bekezdésekben, sortöréseket használva írjuk le a szerzőt és a mű keletkezésének a dátumát.

A feladat megoldása

Kedvenc könyveim:

  1. Harry Potter és titkok kamrája
  2. 1984
  3. A Gyűrűk Ura
  4. A Pendragon legenda
  5. Iskola a Határon

Harry Potter és a titkok kamrája:
Szerző: J. K. Rowling
Első kiadás dátuma: 1998. július 2.

1984:
Szerző: George Orwell
Első kiadás dátuma: 1949. június 8.

A Gyűrűk Ura:
Szerző: J. R. R. Tolkien
Első kiadás dátuma: 1954

A Pendragon legenda:
Szerző: Szerb Antal
Első kiadás dátuma: 1934

Iskola a határon:
Szerző: Otlik Géza
Első kiadás dátuma: 1959

Második feladat

Csináljuk egy táblázatot különböző autókról. A táblázat legyen öt oszlopos. Az első oszlop tartalmazza az autó márkáját, a második a típusát, a harmadik gyártás megkezdésének évét a negyedik pedig az árát, az ötödik oszlopban helyezzük el az autó fényképét 200 képpont szélességgel.

A feladat megoldása

Gyártó Típus Gyártás évének kezdete Ár Kép
Audi A8 D4 2010 15 millió forint
Ford Focus 1998 5 millió forint
Skoda Octavia 1996 4 millió forint
Renault Megane 1995 7 millió forint
VolksWagen Passat 1973 11,5 millió forint
BMW M5 1985 20 millió forint