Differences

This shows you the differences between two versions of the page.

--- tanszek:oktatas:web_technologia_alapjai:html [2025/02/11 10:15] – [Címsorok és bekezdések] kissa
+++ tanszek:oktatas:web_technologia_alapjai:html [2025/02/17 09:03] (current) – [Gyakorlat] kissa
@@ Line 80: / Line 80: @@
 A következő szakaszban megismerjük a ''body'' részben használható HTML elemeket.
-==== Megjegyzések (Kommentek) ====
+==== Kommentek ====
-A HTML dokumentumok tartalmazhatnak megjegyzéseket, amelyeket a böngésző nem jelenít meg, de a fejlesztők számára láthatóak a kódban.
+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.
-Megjegyzések használatával átláthatóbbá és érthetőbbé tehetjük a kódot.
-A HTML-dokumentumok tartalmazhatnak megjegyzéseket, 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.
 <code XML>
@@ Line 94: / Line 90: @@
 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 ====
@@ Line 109: / Line 106: @@
 <p>Ez egy bekezdés.</p>
 </code>
 ==== Szövegformázás és szerkezet ====
-Szövegformázási elemek:
+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.
+<code XML>
+<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>
+</code>
+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 ====
-Linkeket az '''' elem segítségével hozhatunk létre:
+Weboldalakra, e-mail címekre, telefonszámokra mutató linkeket az ''<a>'' tag segítségével hozhatunk létre.
+<code XML>
+<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>
+</code>
 ==== Képek ====
-Képeket az '''' elem segítségével illeszthetünk be:
+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.
+<code XML>
+<img src="https://www.uni-miskolc.hu/wp-content/themes/uni-miskolc-wp/assets/img/header-logo.svg" alt="Miskolci Egyetem logója">
+</code>
+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á:
+<code XML>
+<img src="imgs/main_building.png" alt="A Miskolci Egyetem főépülete">
+</code>
+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.
+<code XML>
+<!-- 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>
+</code>
 ==== Táblázatok ====
-==== Gyakorlat ====
+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)
+<code XML>
+<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>
+</code>
+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.
-Készíts egy bemutató oldalt 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]]).
-Használj online forrásokat segítségként ([[https://www.w3schools.com/html/|W3Schools HTML oktatóanyag]]).
+Az elkészült megoldást töltsd fel az 1. órán létrehozott GitHub repository-ba!