HTML

A HTML nyelvvel kapcsolatos ismeretek megszerezhetők az itt elérhető Youtube videóból. A gyakorlati órákon feltételezzük ennek ismeretét, és készítünk el különböző HTML példákat. Az alábbiak az órákon elhangozottak emlékeztetői.

A HTML forráskódok szerkesztése során különösen hasznosak az alábbi VSCode műveletek, ezeket érdemes memorizálni, és a gyakorlás során a megtanulásukat erőltetni.

Billentyű

Hatás

Alt-Click

Többszörös kurzor elhelyezése vagy törlése.

Alt-Kurzor fel/le

Újabb kurzor elhelyezése egy sorral feljebb/lejjebb.

Ctrl-d

Újabb kurzor létrehozása a kijelölt szöveg újabb pédányán.

Ctrl-F2

Újabb kurzor létrehozása a kijelölt szöveg összes példányán.

Ctrl-Shift-L

Multikurzor létrehozása az aktuális szó vagy kijelölés összes példányán.

F3

Ugrás a következő kijelölt elemre.

Shift-F3

Ugrás az előző kijelölt elemre.

Ctrl-L

Sor kijelölése.

Shift-Alt fel/le

Aktuális sor/blokk duplázása.

Ctrl-Shift-K

Aktuális sor törlése.

Ctrl-Enter

Üres sor beszúrása a kurzortól függetlenül.

Ctrl-k, c

A sor/kijelölt blokk megjegyzéssé alakítjása és viszont.

Alt-Kurzor fel/le

Az akutális sor/kijelölt blokk mozgatása fel/le.

Ctrl-z

Hosszú sorok tördelésének be- illetve kikapcsolása.

Egy HTML oldal nak vannak kötelező (illendő) minimális elemei. Egy ilyen „csontvázat” a Visual Studio Code-ban a fájl html típusúra állítása után után egy ! karakter leütésével automatikusan létre lehet hozni. Mivel a weboldalak általában sok fájlból állnak össze, e kezdő fájlnak speciális neve van, ez az index.html.

 1  <!DOCTYPE html>
 2  <html lang="hu">
 3  <head>
 4      <meta charset="UTF-8">
 5      <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6      <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7      <title>Első HTML oldalam</title>
 8  </head>
 9  <body>
10      Ez az első html oldalam!
11  </body>
12  </html>

Az oldal megtekintéséhez kattintson ide. A html kódot a megjelenő oldal helyi menüjében, az Oldal forrásának megjelenítése pontban ellenőrizheti.

HTML Elemek

Az oldalakat HTML nyelven írjuk meg, melyek alapeleme az ún. tag. Ezek olyan speciális szövegrészek, melyeket < és > jelek fognak közre, ezek a bögésző számára nem megjelenítendő szöveget, hanem utasítást jelentenek. Egyes tagek önállóan működnek, pl a <br> tag után pl. új sorban folytatódik a szöveg, míg mások közrezárnak egyes elemeket, pl. egy címsor elejét a <h1> jelzi, amit maga a cím követ, majd egy </h1> zár. Egy tag számos esetben nem áll magában, annak kiegészítő paraméterei lehetnek, amelyek meghatározzák vagy módosítják annak működését, pl. a <hr color="red"> egy vízszintes vonalat rajzol, aminek színét a color="red" paramétere piros színűre állítja.

HTML Fejléc

Már egy alap HTML oldal is tartalmaz tageket, jórészük jelentése most még nem annyira fontos, de néhányat érdemes már most megemlíteni. A teljes oldalt <html> és </html> tagek közé kell tennünk, ez jelzi a böngésző számára az oldal elejét és végét. A <html> tagnek van egy paramétere, az oldal nyelve, amit a VsCode alapértelmezésben angolra (en) állít be, ezt érdemes kicserélni magyarra (hu). Ez láthatpó az alábbi példában, illetve az első példa 2. sorában.

<html lang="hu">

Maga az oldal két nagy blokkból áll, a fejlécet, mely az oldalra vonatkozó általános leírásokat tartalmazza, a <head> és </head> tagek közé kell írni. Itt közöljük, hogy a szöveg milyen karakterkódolást használ, mi a címe, és még néhány, jelen pillanatban még nem igazán fontos beállítást. A cím a böngésző fejlécében vagy az oldalt tartalmazó lap fülén jelenik meg, és a <title> és </title> között kell megadni. A title beállítása a fenti példa 7. sorában történt meg.

<title>Első HTML oldalam</title>

Végül, az oldal tartalmának blokkja következik, ezt a <body> és </body> tagek közt kell megadni, ez az első példánkban a 9-11 sor között helyezkedik el.

Bekezdés

<p align="center">lorem ipsum dolor...</p>

lorem ipsum dolor...

Sortörés

<p>Mauris vulputate justo id pharetra condimentum.<br>
   Class aptent taciti sociosqu ad litora torquent per conubia</p>

Mauris vulputate justo id pharetra condimentum.
Class aptent taciti sociosqu ad litora torquent per conubia

Vízszintes elválasztó

<p>Mauris vulputate justo id pharetra condimentum.</p>
<hr noshade color="red" align="center" size="4" width="50%">
<p>Mauris vulputate justo id pharetra condimentum.</p>

Mauris vulputate justo id pharetra condimentum.

Mauris vulputate justo id pharetra condimentum.

Megjegyzés

https://www.lipsum.com

Betűtípus

<p>Mauris vulputate justo
  <font size="5" color="navy" face="arial">id pharetra</font>
  condimentum.</p>

Mauris vulputate justo id pharetra condimentum.

A színekről

Színeket a html oldalban és a később ismertetésre kerülő css-ben is számos helyen kell majd használnunk, ezért nézzük meg, hogy hogyan lehet ezeket megadni!

  • Szín megadása névvel. Ez tűnik a legegyszerűbb megoldásnak, csak a szín angol nevét kell leírni, pl. így: color="blue". Sajnos a gyakorlatban ez csak részben működik, mivel rengetek szín áll rendelkezésre, és a neveik megjegyzése sokak számára reménytelen. Ezen a webhely számos szín nevét tartalmazza.

  • Szín megadása összetevőivel. Ez a forma bonyolultabb, mert a három színt három 16-os számrendszerbeli számmal kell megadni, melyből az első a vörös, a második a zöld, a harmadik pedig a kék összetevő mennyiségét írja le. A 0 az adott szín hiányát, a maximális értéket leíró FF pedig annak maximális jelenlétét definiálja. Az FF0000 tehát csak piros összetevőből áll, a züld és a kék hiányzik belőle, tehát egy erős piros színt ad. Ez a megadási forma a gyakorlatban egy kettőskereszt megadását is igényli, és így használandó: color="#FF0000". Az előző pontban említett oldalon ezek a fajta színkódok is leolvashatók.

  • Mivel a 16-os számrendszerben írt számok értelmezése nem feltétlenül triviális egy web designer számára, ezért egy alternatív leírás is alkalmazható. A rgb(255, 0, 0) jelentése megegyezik az előzővel: a vörös összetevő értéke 255 (ez a legnagyobb érték), a zöld és a kék mennyisége pedig 0.

  • A Visual Studio Code felismeri a színek megadási módjait, és a kódban magát a színt is láthatóvá teszi a fejlesztő számára.

Megjegyzés

  • Egy interaktív HTML színválasztót könnyű a Google-lal találni, elég a „html color selector” kereső kifejezést használni, vagy benézni a https://htmlcolorcodes.com oldalra.

  • Több oldal is ajánl harmonikus színkombinációkat, melyek együtt alkalmazva kellems színvilágú weboldalak alakíthatók ki. Egy példa erre itt található.

Karakterek formázása

A html nyelvben is van lehetőség különböző szövegformázásokra, melyekre az alábbiakban láthatunk példákat.

<b>félkövér</b>
<strong>félkövér</strong>
<i>dőlt</i>
<u>aláhúzott</u>
H<sub>2</sub>U
3 m<sup>2</sup>
<code>for i in seq 1 1 10 ; do</code>
félkövér félkövér dőlt aláhúzott H2U 3 m2 for i in seq 1 1 10 ; do

Megjegyzések

A HTML kódban helyezhetünk el megjegyzéseket, ezeket a böngésző nem jeleníti meg. Érdemes azonban óvatosnak lenni: az oldal forrásának megtekintését minden böngésző lehetővé teszi, ahol már látszanak a kommentek, így bizalmas információk, vagy negatív mentális állapotunk kifejezésére nem egy html forráskód az alkalmas hely.

<!-- Ez egy megjegyzés a HTML kódban. -->

Javaslat

A VSCode-ban a kijelölt szövegrész minden sorának kommentezése a [CTRL]-K + [CTRL]-C, a kommentezés megszüntetése a [CTRL]-K + [CTRL]-U billentyűkkel történik. A szerkesztő az adott nyelvnek megfelelő kommentezési eljárást alkalmazza.

A Body Tag

Már láttuk, hogy a body tag az oldal teljes tartalmát körefogja, így annak beállításai az oldal egészére érvényesek lesznek. Az alábbi példában az oldal háttere fehér (minden szín maximális jelenléte fehéret eredményez), a hátterét a h1.jpg kép tölti ki, a szövegek színe szürke (#AAAAAA), a linkek színe sötétkék, a már korábban meglátogatott linkeké piros, az aktívaké pedig sárga lesz. Az oldal felső és bal margója 10 pixel szélességűre lesz beállítva.

<body bgcolor="#FFFFFF" background="h1.jpg"
      text="#AAAAAA" link="darkblue"
      vlink="red" alink="yellow"
      topmargin="10" leftmargin="10">

Címsorok

A címsorok a többszintű címstruktúra felépítését teszik lehetővé pontosan úgy, ahogyan azt a szövegszerkesztőkben már megszoktuk. A h1 az első szintű, a h2 a második, a h3 pedig a harmadik szintet jelenti. Bár maga a html hat szintig kínál címsorokat, a gyakorlatban nem érdemes a harmadiknál mélyebb struktúrát felépíteni.

<h1>Címsor1</h1>
<h2>Címsor2</h2>

<h6>Címsor6</h6>

Címsor1

Címsor2

Címsor6

Listák

A listák szintén a szövegszerkesztőknél megszokott módon működnek, felsorolás és számozott listák is alkalmazhatók. A felsorolásokat az <ul> (unordered list), a számozottakat pedig az <ol> (ordered list) vezeti be. Az egyes elemeket mindkét esetben a <li> és </li> tagek közé kell írni. Az alábbi példa egy felsorolást mutat:

<ol start="10">
  <li>Kávé</li>
  <li>Tea</li>
  <li>Tej</li>
</ol>
  1. Kávé
  2. Tea
  3. Tej

Ez pedig egy sorszámozott listát:

<ul>
  <li>Kávé</li>
  <li>Tea</li>
  <li>Tej</li>
</ul>
  • Kávé
  • Tea
  • Tej

Az egyes listalemek helyére újabb listák is írhatók, ezzel többszintű listák képezhetők:

 1 <!DOCTYPE html>
 2 <html lang="hu">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Többszintű lista</title>
 8 </head>
 9 <body>
10     <ul>
11         <li>Levesek</li>
12         <ol>
13             <li>Húsleves</li>
14             <li>Zöldésgleves</li>
15             <li>Csípős-savanyú leves</li>
16         </ol>
17         <li>Desszertek</li>
18         <ol>
19             <li>Túrótorta</li>
20             <li>Echler fánk</li>
21             <li>Rákóczi túrós</li>
22         </ol>
23     </ul>
24 </body>
25 </html>

Ennek eredménye:

  • Levesek
    1. Húsleves
    2. Zöldésgleves
    3. Csípős-savanyú leves
  • Desszertek
    1. Túrótorta
    2. Echler fánk
    3. Rákóczi túrós

Az oldal megtekintéséhez kattintson ide.

Képek

Képek elhelyezéséhez ai <img> taget kell használni. Ebben meg kell adni a kép forrását, ami egyaránt lehet egy helyben tárolt áfjl, vagy egy külső forrásra mutató link. A forrás megadása a tag src paraméterében történik az alábbi példában látható módon. Az alt tag megadása sok esetben elvárás, az ott megadott szöveg jelenik meg, ha az egérkurzort a képen hagyjuk, és ezt olvassák fel a vakok és csökkentlátók számára készített segédprogramok is. Megadható a kép magassága és szélessége is a height és a width paraméterekkel. Ebben sok esetben csak az egyiket szokás használni azért, mert pl. a szélesség megadásakor a böngésző kiszámítja az arányos magasságot, ettől eltérő érték megadásakor pedig torzítani fogja a képet. Az align értéke left vagy right lehet, ekkor az alábbi ábrán látható módon a képet körbeveszi a szöveg.

<img
  src="https://api.spgnordic.com/wp-content/uploads/2021/04/nvh2q1tu03-01-s.png"
  alt="Vespa"
  width="300px"
  height="300px"
  align="right"
>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget erat nisl.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
curae; Praesent commodo nisl quis pharetra dignissim. Aenean quis nisl sagittis,
dignissim sem vel, tristique turpis. Vestibulum at ex eu purus efficitur mollis.
Nullam tristique odio in mauris ullamcorper, ut varius odio luctus. Aliquam
hendrerit libero eget nunc fringilla, eget laoreet nisi laoreet. Donec pulvinar
mattis arcu, a maximus tellus finibus sed. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas.</p>
Vespa

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget erat nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent commodo nisl quis pharetra dignissim. Aenean quis nisl sagittis, dignissim sem vel, tristique turpis. Vestibulum at ex eu purus efficitur mollis. Nullam tristique odio in mauris ullamcorper, ut varius odio luctus. Aliquam hendrerit libero eget nunc fringilla, eget laoreet nisi laoreet. Donec pulvinar mattis arcu, a maximus tellus finibus sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Igazítások

Az egyes elemek igazítását az őket befogadó elem igazítás paramétere határozza meg. A középre, illetve jobbra igazítást a <center>, </center>, illetve a <right>, </right> tagekkel lehet megadni.

<center>
<img
  src="https://api.spgnordic.com/wp-content/uploads/2021/04/nvh2q1tu03-01-s.png"
  alt="Vespa"
  width="300px"
  height="300px"
>
</center>
Vespa

Linkek

Egy kivatkozás megadásakor az a taget kell használni. A href paraméterében meg kell adni annak az oldalnak a címét, vagy annak a html fájlnak a nevét, amelyre a linknek el kell vezetnie. A target=_blank megadásakor a böngésző a cél oldalt egy új lapon fogja megjeleníteni.

<p>A továbblépéshez kattintson <a href="https://vespanordic.com/no/products/gts-300"
  target="_blank">ide</a><p>!

A továbblépéshez kattintson ide!

A könyvjelzők a linkek speciális formái, melyek egy oldalon belül jelölnek ki pontokat úgy, hogy azok az a tag href paraméterében használhatók. Bármilyen tag szolgálhat könyvjezőként, ha annak az id paramétere egy szöveget tartalmaz. Az alábbi példában ez egy bekezdés (p tag), mely id-je a bookmark szó. A példa elejében szereplő a tag href paraméterének értéke szintén a bookmark, amit egy # karakter előz meg; erre azért van szükség, hogy egyértelművé tegyük: könyvjelzőről és nem egy hivatkozott fájlról vagy másik weblapról van szó. A linkre kattintással a megadott könyvjezővel jelült szüveg az oldal tetején lesz olvasható.

<p>További információk olvashatók a <a href="#bookmark">lábjegyzetekben.</a></p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies euismod mi,
at fermentum lectus accumsan eget. Maecenas maximus fermentum sapien a pulvinar.
Nam vestibulum euismod est. Etiam fermentum leo id neque mollis venenatis. Fusce at
risus vitae ipsum varius ultricies sit amet ac nunc. Suspendisse mattis, diam non
venenatis accumsan, orci mi lobortis metus, ac varius tellus mauris eu nunc. Sed ut
libero nec turpis viverra hendrerit et sed arcu. Fusce consectetur sodales ante id
congue. Quisque rutrum purus justo, sit amet eleifend purus ornare at. Donec a
ullamcorper nibh. Integer tortor erat, finibus nec efficitur sed, fermentum non diam.</p>

<p id="bookmark">Lábjegyzetek</p>
<p>Sit amet eleifend purus ornare at.</p>

További információk olvashatók a lábjegyzetekben.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies euismod mi, at fermentum lectus accumsan eget. Maecenas maximus fermentum sapien a pulvinar. Nam vestibulum euismod est. Etiam fermentum leo id neque mollis venenatis. Fusce at risus vitae ipsum varius ultricies sit amet ac nunc. Suspendisse mattis, diam non venenatis accumsan, orci mi lobortis metus, ac varius tellus mauris eu nunc. Sed ut libero nec turpis viverra hendrerit et sed arcu. Fusce consectetur sodales ante id congue. Quisque rutrum purus justo, sit amet eleifend purus ornare at. Donec a ullamcorper nibh. Integer tortor erat, finibus nec efficitur sed, fermentum non diam.

Lábjegyzetek

Sit amet eleifend purus ornare at.

Táblázatok

<table border="1" width="80%">
  <tr>
    <th>Név</th>
    <th>Osztály</th>
  </tr>
  <tr>
    <td align="center">Kiss Lajos</td>
    <td align="right">2.a.</td>
  </tr>
  <tr>
    <td>Szabó József</td>
    <td>2.b.</td>
  </tr>
  <tr>
    <td bgcolor="red" align="center" colspan="2">Kivételek</td>
  </tr>
  <tr>
    <td>Kiss István</td>
    <td>N/A</td>
  </tr>
</table>

Emlékeztető a vscode-hoz:

Megjegyzés

A VSCode alkalmazása esetén az alábbi példák alapján készíthetsz üres táblázatokat:

  • table>tr>td

  • table>tr*2>td*4

  • table>(tr*2>td*3)*2

  • table.center>tr>td*2

  • table.default>((tr>th*2)(tr*2>td*2))*2

table>tr>td

<table>
  <tr>
      <td></td>
  </tr>
</table>

table.center>tr>td*2

<table class="center">
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

table>(tr*2>td*3)*2

<table>
  <tr>
      <td></td>
      <td></td>
      <td></td>
  </tr>
  <tr>
      <td></td>
      <td></td>
      <td></td>
  </tr>
  <tr>
      <td></td>
      <td></td>
      <td></td>
  </tr>
  <tr>
      <td></td>
      <td></td>
      <td></td>
  </tr>
</table>
Név Osztály
Kiss Lajos 2.a.
Szabó József 2.b.
Kivételek
Kiss István N/A

Űrlapok

<form method="post" action="processit.php">
  Név: <input type="text" name="nev" value="Kiss Lajos"><br>

  Jelszó: <input type="password" name="jelszo" value=""><br>

  Renault: <input type="radio" name="marka" value="renault" selected>
  Dacia: <input type="radio" name="marka" value="dacia"><br>

  Vegetariánus: <input type="checkbox" name="vega" value="t" checked><br>

  Lakhely: &nbsp;
  <select name="lakohely">
    <option>Főváros</option>
    <option>Megyeszékhely</option>
    <option>Község</option>
    <option>Falu</option>
    <option>Egyéb</option>
  </select><br>

  Megjegyzés:<br>
  <textarea name="megjegyzes">Adja meg a megjegyzést!</textarea><br>

  <input type="hidden" name="rejtett_ertek" value="23">
  <input type="submit" name="submit" value="Beküldés">
  <input type="reset" name="reset" value="Törlés">
</form>
Név:
Jelszó:
Renault: Dacia:
Vegetariánus:
Lakhely:  
Megjegyzés:

Beágyazott oldalak (IFrame)

Az <iframe> tag lehetővé teszi egy keretben egy másik weboldal tartalmának megjelenítését. Bár használhatósága biztonsági okok miatt az utóbbi időben jelentősen visszaesett, egyes alkalmazási területeken még mindig jól használható. Az alábbi példában az NKE weboldalát próbáljuk meg a sajátunkba illeszteni:

<iframe width="600px" height="300px" src="https://www.uni-nke.hu"></iframe>

Az üres képernyő jelzi, hogy az NKE megtiltotta, hogy oldalai más weboldalakba beágyazhatók legyenek.

Veszély

Az oldalak beágyazása számos, a felhasználókat megtévesztő támadás alapjául szolgálhat, így mára a legtöbb esetben az oldalak tulajdonosai az nem teszik lehetővé.

A Youtube és egyéb videostreaming szolgáltatók videóinak beágyazása viszont épp az <iframe> alkalmazásával egyszerű (az <iframe> tartalmát a Youtube megosztás menüpontjában lehet kimásolni):

<iframe width="560" height="315"
src="https://www.youtube.com/embed/rSNxKL6Bngw?si=6hbGG7238GGV7Znp"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media;
gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Multimédia

Multimédia fájlok (videó és hangfájlok) weboldalba ágyazása szintén egyszerű feladat, melyeket az alábbi példák demonstrálnak. A <video> és <audio> tagekben szereplő controls engedélyezi a felhasználónak, hogy a lejátszás menetét szabályozza, ellenkező esetben erre nincs ráhatása. Mindkét esetben meg kell adni a src paramétert, mely a video vagy hangfájl helyét tartalmazza.

<video width="600" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

<audio controls>
  <source
    src="https://ia601506.us.archive.org/3/items/onkenyes-20170320/onkenyes-20170320.mp3"
    type="audio/mpeg">
</audio>

Meta tagek

Az ún. meta tagek a html oldal fej részében, a <head> és </head> között foglalnak helyet. Ezek nem jelennek meg az oldalon, de számos információt adhatnak a böngészőnek vagy a kereső motoroknak. Ilyen pl. a copyright információk, de itt tüntethető fel az oldal szerzője vagy a keresők számára továbbítani kívánt kulcsszavak is. Az expires értéke pl. azt mondja meg, hogy a böngészőnk meddig tárolhatja az oldalt anélkül, hogy azt újra lekérné a forrástól. A charset a használt karakterkészletről ad át információt, tipikus értéke at UTF-8.

<meta charset="UTF-8">

Egy oldal áirányítása is elvégezhető a meta taggel. Az alábbi példában szereplő meta tag a látogatót 5 másodperc elteltével átirányítja az NKE weboldalára.

 1<!DOCTYPE html>
 2<html lang="hu">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7    <meta http-equiv="REFRESH" content="5; URL=http://www.uni-nke.hu">
 8    <title>Redirect</title>
 9</head>
10<body>
11    <p>
12        5 másodperc elteltével átirányítjuk a Nemzeti Közszolgálati Egyetem odalára.
13    </p>
14</body>
15</html>

Kipróbálásához kattintson ide, és várjon 5 másodpercet az automatikus átirányításra.

HTML Validátorok

Egy weboldal vagy HTML fájl helyesége a html validátorokkal ellenőrizhető, mely listázza a szabálytalanul elkészített elemeket, hibás részeket. Főleg kezdetben javasolt az elkészített oldalak validátorral történő vizsgálata.

Feladatok

  • Készítsen egy egyoldalas weblapot a saját önéletrajzával! Az oldal tartalmazzon egy képet is önről! A kép igazításához használja az align paramétert!

  • Készítse el a heti órarendjének táblázatát! A dupla órákhoz használja a rowspan attribútumot!

  • Készítsen egy három lapból (fájlból) álló szöveget, melyben alkalmazza a címsorokat, a karakterstílusokat, valamint helyezzen el benne felsorolást is! Az oldalba illesszen be képet, egy videót és egy mp3 fájlt is! A szövegeket a Lorem Ipsum generátorral, vagy a Visual Studio Code lorem makrójával hozza létre! Az oldal alján szepepeljen egy link, amely az oldal tetejére viszi az olvasót, valamint adjon meg egy-két kapcsolódó külső linket is!

  • Készítsen egy űrlapot, melyet kitöltve egy céges vacsorára lehet jelentkezni! Az űrlap tartalmazza a beküldő nevét, e-mail címét, egy legördülő listát a megyékkel (megyek.txt) lehessen kiválasztani, hogy az illető vegetariánus, vagy vegán menüt kér, és írhasson egy pár soros szabad szöveget is megjegyzésként. Az űrlapot a processit.php nevű programnak kell majd feldolgoznia.

  • Validálja az elkészíett lapok tartalmát, és javítsa az esetleges hibákat!