===== 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: Alice Bob Reminder Meeting at 2 PM in office II. 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 [[https://code.visualstudio.com/|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: {{:tanszek:oktatas:techcomm:pasted:20240923-091837.png}} Ezután keresd meg a Live Server bővítményt, majd kattints az "Install" gombra: {{:tanszek:oktatas:techcomm:pasted:20240923-092114.png}} Sikeres telepítés után a következő gomb fog megjelenni a VSCode jobb alsó sarkában: {{:tanszek:oktatas:techcomm:pasted:20240923-092231.png}} 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): Page Title

Heading 1

This is a paragraph.

This is also a paragraph.

 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 '''', '''', és '''' tag-ek képzik, ahogy az a fentebbi példában is látható. A '''' 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ó [[https://www.w3schools.com/tags/tag_doctype.asp|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 () és az ikont (<link rel="icon">). <code XML> <head> <title>Hello World 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 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...

 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 ''

''–''

'' elemekkel vannak meghatározva, míg a bekezdéseket a ''

'' elem határozza meg.

1. szintű címsor

Ez egy bekezdés.

2. szintű címsor

Ez egy bekezdés.

Ez is egy bekezdés.

3. szintű címsor

Ez egy bekezdés.

4. szintű címsor

Ez egy bekezdés.

 ==== Szövegformázás és szerkezet ==== Az olyan elemek, mint a ''
'', ''
'', '''', ''< sup>'' / ''< sub>'', ''< span>'', ''< div>'' segítenek a szöveg formázásában és szerkezetének kialakításában.

Ez egy kis méretű szöveg.

Ez egy második sor
sortöréssel.

Alsó és felső index: Pi = I2R

Ez egy félkövér szöveg.

1. bekezdés

2. bekezdés

3. bekezdés

 A ''
'' sortörést szúr be a szövegbe. A ''
'' egy vízszintes vonalat hoz létre, amelyet gyakran tartalmak elválasztására használnak. A '''' 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 '''' tag segítségével hozhatunk létre. Belső oldalra mutató link Külső weboldalra mutató link E-mail címre mutató link Telefonszámra mutató link ==== Képek ==== A képek beszúrásához a '''' 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. 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á: 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 ''
    '' (ordered list) tag-et, míg a rendezetlen listákhoz az ''
      '' (unordered list) elemeket használhatjuk. A listaelemeket minden listatípusban ''
    • '' elemekkel jelöljük.

      A sportnap végeredménye:

      1. Mérnökinformatikusok
      2. Gépészmérnökök
      3. Vegyészmérnökök

      Ma ezt kell megvennünk:

      • alma
      • tej
      • kenyér
       ==== Táblázatok ==== Táblázatok létrehozásához az alábbi elemeket használjuk: * '''': a fő táblázatelem * '''': táblázat sor (table row) * ''
      '': táblázat fejléc (table head) * '''': táblázat adatcella (table data)
      Termék Ár
      Alma 500 Ft
      Körte 400 Ft
      Összesen: 900 Ft
      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. [[https://www.w3schools.com/html/|W3Schools HTML tutorial]]). Az elkészült megoldást töltsd fel az 1. órán létrehozott GitHub repository-ba!