HTML Jegyzetek

<html>

Ez a gyökér elem minden HTML dokumentumban. Minden más elem ezen belül helyezkedik el.

<html>
    <!-- Itt van minden tartalom -->
</html>

<head>

A fej (head) elem tartalmazza a metaadatokat és a dokumentum beállításait, mint például a cím és stíluslapok.

<head>
    <meta charset="UTF-8">
    <title>Oldal címe</title>
</head>

<title>

Ez az elem határozza meg az oldal címét, amely a böngésző fülén jelenik meg.

<title>Ez az oldal címe</title>

<body>

A body elem tartalmazza az oldal látható tartalmát, mint szöveg, képek és linkek.

<body>
    <p>Ez itt a látható tartalom.</p>
</body>

<p>

A bekezdés elem szövegrészek megjelenítésére szolgál.

<p>Ez egy bekezdés.</p>

<h1> - <h6>

Ezek a fejléc elemek címsorok létrehozására szolgálnak, ahol az <h1> a legfontosabb, és az <h6> a legkevésbé fontos.

<h1>Ez a legfontosabb címsor</h1>
<h2>Ez egy alcím</h2>
<h3>Ez egy még kisebb cím</h3>

<a>

A linkek létrehozására szolgáló tag. A href attribútummal adhatjuk meg a link célját.

<a href="https://example.com">Kattints ide!</a>

<img>

Képek beillesztésére használjuk. Az src attribútum adja meg a kép elérési útját.

<img src="image.jpg" alt="Leírás a képről">

<ul>, <ol>, <li>

A felsorolásokat ezekkel a tagekkel hozhatjuk létre. Az <ul> a rendezetlen listát, az <ol> a rendezett listát, és az <li> a listatételt jelenti.

<ul>
    <li>Első elem</li>
    <li>Második elem</li>
</ul>

<ol>
    <li>Első elem</li>
    <li>Második elem</li>
</ol>

<div> és <span>

A <div> egy blokkszintű elem, amely nagyobb szakaszokat jelöl, míg a <span> inline elem, kisebb szövegrészekre.

<div>Ez egy nagy szakasz</div>

<span>Ez egy kis részlet egy mondatban.</span>

<form>

Űrlapok létrehozására szolgál, amelyeket adatbevitelre használunk. Tartalmazhat különféle bemeneti elemeket, mint a szövegdobozok, jelölőnégyzetek, stb.

<form action="/submit" method="post">
    <label for="name">Név:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Küldés">
</form>

<input>

Bemeneti elemek létrehozására szolgál. Különböző típusok vannak, mint például text, password, radio, checkbox, stb.

<input type="text" name="username">
<input type="password" name="password">

<textarea>

Több soros szövegbevitelre használjuk, például üzenetekhez vagy megjegyzésekhez.

<textarea name="comments" rows="4" cols="50"></textarea>

<button>

Gombok létrehozására szolgál. A gombokra lehet eseményeket vagy akciókat programozni, például kattintásra műveletet végezni.

<button type="button">Kattints ide!</button>

<label>

Az űrlap elemekhez tartozó címkék létrehozására szolgál. Segít az elemek beazonosításában és jobb használhatóságot nyújt.

<label for="email">Email:</label>
<input type="email" id="email" name="email">

<select>

Legördülő menü létrehozására szolgál, amely lehetőségeket kínál a felhasználónak.

<select name="cars">
    <option value="volvo">Volvo</option>
    <option value="bmw">BMW</option>
</select>

<option>

Legördülő menük (<select>) elemeit képviseli. Minden <option> egy választási lehetőséget jelöl.

<option value="audi">Audi</option>

<table>

Táblázatok létrehozására használjuk, amelyek sorokból és oszlopokból állnak.

<table>
    <tr>
        <th>Fejléc 1</th>
        <th>Fejléc 2</th>
    </tr>
    <tr>
        <td>Tartalom 1</td>
        <td>Tartalom 2</td>
    </tr>
</table>

<tr>

Táblázat sorának meghatározására szolgál. Minden sor tartalmazhat több oszlopot (<td> vagy <th>).

<tr>
    <td>Tartalom 1</td>
    <td>Tartalom 2</td>
</tr>

<td>

Táblázat egy celláját jelöli, amely egy soron belül helyezkedik el.

<td>Cellatartalom</td>

<th>

Táblázat fejlécét jelöli, amely az oszlopok elején helyezkedik el.

<th>Fejléc 1</th>

<caption>

Táblázat címsorának meghatározására szolgál. A táblázat tetején jelenik meg.

<caption>Táblázat címe</caption>

<iframe>

Külső weboldalak beágyazására szolgál egy másik weboldalon belül.

<iframe src="https://example.com" width="600" height="400"></iframe>

<strong>

Szöveg erősebb (félkövér) kiemelésére szolgál.

<strong>Ez fontos szöveg!</strong>

<em>

Szöveg kiemelésére szolgál, általában döntött betűtípusban.

<em>Ez kiemelt szöveg.</em>

<br>

Új sort hoz létre, anélkül hogy új bekezdést nyitna.

<br>

<hr>

Vízszintes vonalat hoz létre az oldalon, amely tartalmak elválasztására használható.

<hr>

<blockquote>

Idézetek megjelenítésére szolgál, általában behúzással.

<blockquote>
    Ez egy idézet valahonnan.
</blockquote>

<code>

Kódrészletek megjelenítésére szolgál, monospace betűtípussal.

<code>console.log("Hello, world!");</code>

<pre>

Előre formázott szöveg megjelenítésére szolgál, ahol a szóközök és sortörések megmaradnak.

<pre>
/* 1. Alapstílus, sorközi margó */
body {
    margin: 20px;
    font-family: 'Arial', sans-serif;
}

/* 2. H2 szöveg aláhúzása */
h2 {
    text-decoration: underline;
    color: #2c3e50;
}

/* 3. Párbeszéd szöveg kiemelése */
p {
    padding: 10px;
    background-color: #f9f9f9;
    border-left: 5px solid #3498db;
    border-radius: 5px;
}

/* 4. Kódrészletek szövegszínének megváltoztatása */
code {
    background-color: #ecf0f1;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 1.1em;
}

/* 5. Előre formázott szöveg szegélyezése */
pre {
    border: 1px solid #bdc3c7;
    padding: 10px;
    background-color: #f1f1f1;
    border-radius: 5px;
    overflow-x: auto;
}

/* 6. Hozzáadott árnyék az  elemekhez */
h2 {
    text-shadow: 1px 1px 2px #888888;
}

/* 7. Kódrészletek szövegformázása */
code {
    font-family: 'Courier New', Courier, monospace;
    color: #e74c3c;
}

/* 8. Sorközi távolság a bekezdések között */
p + p {
    margin-top: 15px;
}

/* 9. Részletes margó és padding beállítás */
div.tag-description {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* 10. Kódrészletek szövegkiemelése */
pre code {
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 5px;
    border-radius: 3px;
    display: block;
}

HTML Jegyzetek az Alapvető Tagekről