Table of Contents
HTML (HyperText Markup Language)
XML, mint strukturált adatleíró nyelv
Az XML (eXtensible Markup Language) egy univerzális adatleíró nyelv, amelyet emberek és gépek is könnyedén képesek olvasni. Elsősorban strukturált adatok tárolására és továbbítására használják.
Példa:
<mail id="00001"> <from>Alice</from> <to>Bob</to> <subject>Reminder</subject> <message>Meeting at 2 PM in office II.</message> </mail>
A mail, from, to és hasonló struktúrákat tag-eknek vagy elemeknek nevezzük.
A tag-ek rendelkezhetnek attribútumokkal is (pl. az üzenet azonosítója).
A HTML dokumentumok, melyek a weboldalak tartalmát írják le, szintén XML-alapúak. Szabványosított elemeket használnak a tartalom formázására és struktúrájának meghatározására.
Fejlesztőkörnyezet
A HTML gyakorlásához a Visual Studio Code (VSCode) szerkesztőt fogjuk használni, amely egy ingyenes, nyílt forráskódú eszköz a Microsofttól.
A VSCode telepítése és elindítása után a Live Server bővítményt kell telepíteni. Ehhez kattints a bal oldali eszköztáron az alábbi ikonra:
Ezután keresd meg a Live Server bővítményt, majd kattints az “Install” gombra:
Sikeres telepítés után a következő gomb fog megjelenni a VSCode jobb alsó sarkában:
Egy új projekt inicializálásához hozz létre egy új mappát valahol a fájlrendszeren, majd nyisd meg ezt a mappát a VSCode-ban (File > Open folder…).
Ezután hozz létre egy index.html nevű fájlt.
Másold be a következő részben található kódot, majd mentsd el a fájlt (Ctrl+S):
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>Heading 1</h1> <p>This is a paragraph.</p> <p>This is also a paragraph.</p> </body> </html>
Végül kattints a “Go Live” gombra, és nyisd meg a http://localhost:5500/ címet a böngésződben (a Live Server bővítmény ezt automatikusan megnyithatja). Ha módosítod a HTML fájlt, a változások azonnal megjelennek a böngészőben is.
HTML dokumentumok alapstruktúrája
Egy HTML dokumentum fő részeit a <html>, <head>, és <body> tag-ek képzik, ahogy az a fentebbi példában is látható.
A <!DOCTYPE> deklaráció megadja a HTML verzióját (pl. HTML5), így a böngésző helyesen jeleníti meg az oldalt. Erről több információ itt olvasható.
A html tag az egész dokumentumot egységbe záró gyökérelem.
A head rész tartalmazza az oldal metaadatait, például a címet (<title>) és az ikont (<link rel=“icon”>).
<head> <title>Hello World</title> <link rel="icon" href="favicon.ico" type="image/x-icon"> </head>
A body rész tartalmazza az oldal tényleges tartalmát.
A következő szakaszban megismerjük a body részben használható HTML elemeket.
Kommentek
A HTML-dokumentumok tartalmazhatnak kommenteket, amelyek a böngészőben nem láthatók a felhasználók számára, de a fejlesztők számára láthatók a HTML-kódban.
<!-- A Miskolci Egyetem ismertetése --> <p>A Miskolci Egyetem egy felsőoktatási intézmény Miskolcon. Az intézmény valódi egyetemként működik, széles körű képzési programokat kínálva nyolc karon...</p>
Ez segíthet abban, hogy a kódunk átláthatóbb és érthetőbb legyen a fejlesztők számára.
Címsorok és bekezdések
A címsorok a <h1>–<h6> elemekkel vannak meghatározva, míg a bekezdéseket a <p> elem határozza meg.
<h1>1. szintű címsor</h1> <p>Ez egy bekezdés.</p> <h2>2. szintű címsor</h2> <p>Ez egy bekezdés.</p> <p>Ez is egy bekezdés.</p> <h3>3. szintű címsor</h3> <p>Ez egy bekezdés.</p> <h4>4. szintű címsor</h4> <p>Ez egy bekezdés.</p>
Szövegformázás és szerkezet
Az olyan elemek, mint a <br>, <hr>, <small>, < sup> / < sub>, < span>, < div> segítenek a szöveg formázásában és szerkezetének kialakításában.
<p>Ez egy <small>kis méretű szöveg</small>.</p> <p>Ez egy második sor <br> sortöréssel.</p> <hr> <!-- ez egy vízszintes vonal --> <p>Alsó és felső index: P<sub>i</sub> = I<sup>2</sup>R </p> <!-- szövegformázás --> <p>Ez egy <span style="font-weight: bold">félkövér szöveg</span>.</p> <!-- az összes gyerek elem formázása --> <div style="font-style: italic"> <p>1. bekezdés</p> <p>2. bekezdés</p> <p>3. bekezdés</p> </div>
A <br> sortörést szúr be a szövegbe.
A <hr> egy vízszintes vonalat hoz létre, amelyet gyakran tartalmak elválasztására használnak.
A <small> csökkenti a szöveg méretét, általában lábjegyzetekhez vagy megjegyzésekhez használják.
A < sup> felső indexként jeleníti meg a szöveget, azaz megemeli az alapvonal fölé.
A < sub> alsó indexként jeleníti meg a szöveget, azaz az alapvonal alá helyezi.
A < span> inline elemeket csoportosít, hogy stílusokat alkalmazzunk rájuk vagy JavaScript segítségével manipuláljuk őket. Jól használható egy hosszabb szöveg rövidebb részeinek kiemelésére.
A < div> egy szakaszt vagy tartományt határoz meg egy HTML-dokumentumban, amelyet gyakran használnak több elem csoportosítására elrendezési vagy stílusbeli célokra (pl. az összes gyerek-bekezdés dőltbetűssé tétele).
Linkek
Weboldalakra, e-mail címekre, telefonszámokra mutató linkeket az <a> tag segítségével hozhatunk létre.
<a href="contact.html">Belső oldalra mutató link</a> <!-- Ennek működéséhez létre kell hoznunk egy másik HTML-dokumentumot, amelynek a neve contact.html. --> <a href="https://www.uni-miskolc.hu/">Külső weboldalra mutató link</a> <a href="mailto:info@example.com">E-mail címre mutató link</a> <a href="tel:+36301234567">Telefonszámra mutató link</a>
Képek
A képek beszúrásához a <img> elemet használjuk, ahol a src attribútum határozza meg a kép elérési útját, míg az alt attribútum egy magyarázó szöveget ad meg.
<img src="https://www.uni-miskolc.hu/wp-content/themes/uni-miskolc-wp/assets/img/header-logo.svg" alt="Miskolci Egyetem logója">
Ebben a példában a src egy abszolút URL-t tartalmaz, így a kép a www.uni-miskolc.hu domain mögött található szerverről kerül letöltésre.
Ezen kívül használhatunk relatív URL-eket is a HTML fájlhoz viszonyítva. Például, ha van egy imgs nevű mappa a saját szerverünkön, a HTML dokumentumunk mellett, és ebben a mappában található egy main_building.png nevű fájl, akkor így hivatkozhatunk rá:
<img src="imgs/main_building.png" alt="A Miskolci Egyetem főépülete">
Próbálj letölteni egy képet az internetről, és használj relatív URL-t a HTML dokumentumodban!
Rendezett és rendezetlen listák
A rendezett listákhoz az <ol> (ordered list) tag-et, míg a rendezetlen listákhoz az <ul> (unordered list) elemeket használhatjuk. A listaelemeket minden listatípusban <li> elemekkel jelöljük.
<!-- rendezett lista --> <p>A sportnap végeredménye:</p> <ol> <li>Mérnökinformatikusok</li> <li>Gépészmérnökök</li> <li>Vegyészmérnökök</li> </ol> <!-- rendezetlen lista --> <p>Ma ezt kell megvennünk:</p> <ul> <li>alma</li> <li>tej</li> <li>kenyér</li> </ul>
Táblázatok
Táblázatok létrehozásához az alábbi elemeket használjuk:
<table>: a fő táblázatelem<tr>: táblázat sor (table row)<th>: táblázat fejléc (table head)<td>: táblázat adatcella (table data)
<table> <tr> <th>Termék</th> <th>Ár</th> </tr> <tr> <td>Alma</td> <td>500 Ft</td> </tr> <tr> <td>Körte</td> <td>400 Ft</td> </tr> <tr> <td colspan="2">Összesen: 900 Ft</td> </tr> </table>
A colspan egy attribútum, amely itt arra szolgál, hogy egy sorban két cellát egyesítsen.
Feladat
Készíts bemutató oldalt a kedvenc témádról (zene, film, termék stb.), amely tartalmaz címsorokat, bekezdéseket, képeket, linkeket, táblázatokat és listákat.
Nyugodtan használj online forrásokat segítségként (pl. W3Schools HTML tutorial).
Az elkészült megoldást töltsd fel az 1. órán létrehozott GitHub repository-ba!