Kihagyás

2. gyakorlat

W3Schools HTML

Yay, VS Code

  • A feladatokat szemantikailag megfelelő tagek és paraméterek segítségével kell megoldani
    • Előnyei:
      • Számítógépek által feldolgozható
      • Egyenlő esélyű hozzáférés elősegítése

HTML5 alapstruktúra

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

A fenti kód VSCode-ban a html:5 vagy ! Emmet paranccsal elérhető.

Fő részei:

  • Fej (tulajdonságok, pl. karakterkódolás, cím)
  • Törzs (maga a tartalom)

Viewport fogalma

A mobil eszközök "virtuális ablakokban" jelenítik meg a weboldalakat. Ez általában szélesebb, mint a weboldal.

A virtuális ablak méretét a viewport metataggel lehet állítani.

Tulajdonságait a <meta> taggal adhatjuk meg

Weboldal készítése

A főoldal fájl neve: index.html.

<title> tag

Az oldal címének megadására. A head-be kerül. Ez jelenik meg felül a böngészőben.

<pre> tag

Általában a HTML fájlban lévő tördelések nem befolyásolják a weboldal tördelését.

Ez, bizonyos esetekben megváltozhat, pl. a <pre> tagek között.

<p> tag

Paragraph - bekezdés

<abbr> tag

Rövidítések megadására szolgál

A rövidítést a title tagben lehet kibővíteni

Pl:

<abbr title="Informatikai Kar">IK</abbr>

Címsorok

A <h1>, <h2>, ..., <h6> tagekkel különböző szintű címsorokat lehet írni.

Fontos, hogy a címsorok legyenek következetesek, hiearchikus felépítésűek.

<a> tag

Hivatkozások

  • A hivatkozást a href paraméterrel lehet megadni
  • Beállítható az is, hogy az oldal hol nyíljon meg a target paraméterrel:
    • _blank: új fülön nyílik meg
  • Ha egy elemnek ismert az id-je, akkor lehet az adott elemre is ugrani.
    • Pl: az ide idjű elemre a következő a taggel lehet ugrani: <a href="#ide">

Egyéb tagek

Tag Leírás
<br> Új sor. (Ennek nincs záró párja)
<i> dőlt betű
<em> hangsúlyos kiemelés
<b> félkövér betű
<strong> erős kiemelés

Paraméterek

Minden HTML taghez hozzá lehet rendelni paramétereket.10p

Pár paraméter, amely bármely tagre használható:

Paraméter Leírás
title Elemhez tartozó felirat, ami akkor jelenik meg, ha a kurzort az elem fölé visszük
accesskey Gyorsbillentyű megadására szolgál. Bármilyen karaktert megadhatunk.
id Az elemet egyedi azonosítóval látjuk el
class Az elemet stípusosztályhoz rendeljök
lang Megadhatjuk az adott elem nyelvét