Differences

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

--- tanszek:oktatas:web_technologia_alapjai:html [2025/02/11 10:24] – [Képek] 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 ====
@@ Line 174: / Line 172: @@
 ==== 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!