Institute of Information Science - University of Miskolc

User Tools

Site Tools

Trace: • css • feleves_feladat • operatorok • html • python_gyakorlatok • halozatok • uezenetsorok-rabbitmq_2 • grpc • graphql_integracio • xml-rpc_minta_feladat
tanszek:oktatas:web_technologia_alapjai:html

Differences

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

Link to this comparison view

Next revision		Previous revision
tanszek:oktatas:web_technologia_alapjai:html [2025/02/11 10:11] – created kissatanszek: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. 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.+<code XML> 
 +<!-- 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> </code> 
 + 
 +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 ==== ==== Címsorok és bekezdések ====
  
-Címsorokat ''''-'''' elemekkel, bekezdéseket pedig '''' elemmel hozhatunk létre.+A címsorok a ''<h1>''–''<h6>'' elemekkel vannak meghatározva, míg a bekezdéseket a ''<p>'' elem határozza meg. 
 + 
 +<code XML> 
 +<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> 
 +</code>
  
 ==== Szövegformázás és szerkezet ==== ==== 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 ==== ==== 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é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 ==== ==== 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 ==== ==== 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!
tanszek/oktatas/web_technologia_alapjai/html.1739268712.txt.gz · Last modified: 2025/02/11 10:11 by kissa