A gyakorlat anyaga¶

Ezen a gyakorlaton átismételjük a HTML és CSS nyelvek kapcsán tanult fontosabb ismereteket, majd megismerkedünk a JavaScript nyelv alapjaival.

HTML ismétlés¶

Ezen a gyakorlaton a JavaScript hagyományos, böngészőbeli alkalmazásáról fogunk tanulni. Ehhez viszont először érdemes átismételni a HTML-ről és a CSS-ről tanultakat.

Emlékeztetőül a HTML weboldalak és webes alkalmazások készítésére szolgál. Ezeknek a weboldalaknak a tartalmát CSS segítségével formázhatjuk.

A HTML és CSS értelmezéséhez és megjelenítéséhez egy webböngészőt használunk. Érdemes megjegyezni, hogy előfordulhat, hogy különböző böngészők (illetve böngészőverziók) ugyanazt a HTML+CSS kódot másképp jelenítik meg.

HTML ismétlés¶

Tagek, attribútumok¶

A HTML dokumentumot < és > közé írt, speciális jelentésű objektumok, tagek alkotják.

Ezeknek a tageknek a többsége páros tag, tehát egy nyitótagből és egy zárótagből áll.

<p>Ide jön valami szöveg...</p>

Vannak viszont páratlan tagek (vagy másnéven üres tagek) is. Ezek csak nyitótagből állnak, amihez nem tartozik lezáró tagpár. A páratlan tagek végére perjelet is tehetünk, viszont ez a HTML5-ös szabványban elhagyható (tehát pl. <br/> és <br> egyaránt helyes).

Első sor <br/>Második sor <br/>Harmadik sor

A HTML dokumentum lényegében tagek egymásba ágyazásából áll. Több tag egymásba ágyazása esetén az a szabály, hogy a megnyitott tageket belülről kifelé haladva zárjuk le.

Az alábbi példában először lezárjuk a legbelső <span> taget, majd az eggyel korábban megnyitott <p> taget, végül pedig a legkülső helyen szereplő <div> tag kerül lezárásra.

<div><p><span>Ide jön valami szöveg...</span></p></div>

A tagekhez tartozhatnak speciális, előre definiált tulajdonságok, attribútumok. Ezeket, értékükkel együtt a nyitótag neve után soroljuk fel, szóközzel elválasztva.

Az alábbi példában az <a> tag két attribútummal rendelkezik: a href és a class attribútumokkal.

<a href="https://www.google.com" class="my-link">Google</a>

A HTML dokumentum felépítése¶

A HTML dokumentumunk megírását jellemzően az alábbi néhány sorral kezdjük:

<!DOCTYPE html>
<html lang="hu">
    <head>
        <title>Az én klassz weboldalam</title>
        <meta charset="UTF-8"/>
    </head>
    <body>

    </body>
</html>

Amint láthatjuk, a HTML dokumentumunk két fő részből áll.

A <head>-ben úgynevezett metainformációkat szoktunk megadni (ilyenek például a weboldal szerzője, a karakterkódolás, a weboldal leírása, kulcsszavak stb.).

A <body>-ba a weboldalon közvetlenül megjelenő tartalmi elemek (pl. szövegek, képek, táblázatok, multimédia, űrlapok) kerülnek. Ezt a tartalmat lehetőségünk van strukturálni is különböző oldalszerkezeti elemek, szakaszok kialakításával.

Fontosabb HTML elemek¶

Az alábbiakban áttekintjük a leggyakrabban használt HTML elemeket. Aki részletesebben szeretne a HTML elemekről olvasni, az a webtervezés gyakorlati jegyzetből megteheti ezt.

Kommentek¶

A HTML kódba kommentet az alábbi szintaxissal írhatunk:

1	`<!-- Ez egy komment a HTML kódban -->`

A head fontosabb elemei¶

<title>...</title>: böngészőfülön megjelenő cím
<meta charset="UTF-8"/>: UTF-8-as karakterkódolás beállítása (páratlan tag)
<style>...</style>: CSS megadása
<script>...</script>: szkript (JavaScript) megadása
<link rel="stylesheet" href="my_file.css"/>: külső CSS fájl beágyazása (páratlan tag)

A body fontosabb elemei¶

<h1>...</h1>, <h2>...</h2>, ..., <h6>...</h6>: címsorok
- csökkenő fontosság (h1: legfontosabb, h6: legkevésbé fontos)
<p>...</p>: bekezdés
<br/>: sortörés (páratlan tag)
<img/>: kép (páratlan tag)
- src attribútum: a kép elérési útvonala
- alt attribútum: helyettesítő szöveg (ha a kép nem jelenik meg)
<a>...</a>: hivatkozás, link
- href attribútum: a cél, ahova a hivatkozásra kattintva jutunk

<h1>A macskák</h1>

<!-- A height attribútummal a kép magasságát adjuk meg pixelben -->
<img src="https://upload.wikimedia.org/wikipedia/commons/9/9b/Domestic_cat_cropped.jpg" alt="Macska" height="300">

<h2>Általános leírás</h2>
<p>A macska, más néven házi macska (Felis silvestris catus) kisebb termetű húsevő emlős, amely a ragadozók rendjén belül a macskafélék (Felidae) családjának Felis neméhez és Felis silvestris fajához tartozik.</p>
<p>Forrás: <a href="https://hu.wikipedia.org/wiki/Macska">Wikipédia</a></p>

<div>...</div>: blokkszintű (block) szakasz - új sorban kezdődik, szélessége kitölti a rendelkezésre álló helyet
<span>...</span>: sorszintű (inline) szakasz - nem kezdődik új sorban, szélességét a tartalom szélessége határozza meg

A <span>span tag</span> és a <div>div tag</div> szakaszok kialakítására alkalmas.

<ul>...</ul>: rendezetlen (sorszámozatlan) lista
<ol>...</ol>: rendezett (sorszámozott lista)
<li>...</li>: listaelem

<!-- Rendezetlen lista -->
<ul>
    <li>Kenyér</li>
    <li>Tej</li>
    <li>Felvágott</li>
</ul>

<!-- Rendezett lista -->
<ol>
    <li>Nyisd ki a szemed!</li>
    <li>Nyomd ki az ébresztőt!</li>
    <li>Aludj vissza!</li>
</ol>

<table>...</table>: táblázat
<tr>...</tr>: egy sor a táblázaton belül
<td>...</td>: egy oszlopcella a soron belül
<th>...</th>: egy fejléccella a soron belül

<table>
    <tr>
        <th>Hallgató neve</th>
        <th>Pontszám</th>
    </tr>
    <tr>
        <td>Techno Kolos</td>
        <td>70</td>
    </tr>
    <tr>
        <td>Pumpáló L. Emma</td>
        <td>100</td>
    </tr>
</table>

<button>...</button>: egyszerű nyomógomb

<button type="button">Kattints rám!</button>

A `class` és `id` attribútumok¶

Minden HTML objektumnak adható id, illetve class attribútum.

Az id (egyedi azonosító) egy objektum azonosítására szolgál. Értékének szabályosan egyedinek kell lenni a dokumentumon belül.

A class (osztály) ezzel szemben több objektum csoportosítására használatos (például ha több objektumot szeretnénk CSS-ben ugyanúgy formázni). A class értékének nem kell egyedinek lennie (sőt általában nem is az).

<!-- A "foo" egyedi azonosítóval rendelkező bekezdés -->
<p id="foo">Ide jön valami szöveg...</p>

<!-- Egy bekezdés és egy kép, amelyek a "bar" osztályhoz tartoznak -->
<p class="bar">Ide is jön valami szöveg...</p>
<img class="bar" src="cats.gif" alt="Cicák"/>

Utolsó frissítés: 2021-11-18 14:51:01

A gyakorlat anyaga¶

HTML ismétlés¶

HTML ismétlés¶

Tagek, attribútumok¶

A HTML dokumentum felépítése¶

Fontosabb HTML elemek¶

Kommentek¶

A head fontosabb elemei¶

A body fontosabb elemei¶

A class és id attribútumok¶

A `class` és `id` attribútumok¶