Kihagyás

3. gyakorlat

Validáció

Itt

accesskey paraméter

Gyorsbillenytűket tudunk rendeli linkekhez

Google Chrome: Ctrl + bill

Google Chrome Mac: Control + Option + bill

Például:

<a accesskey="x">Ezt a ctrl+x kombináció aktiválja</a>

Stíluslap csatolása

<link href="css/alap.css" rel="stylesheet">
  • A <link>-nek nincs záró párja!
  • Ha nem azonos mappában van, mint az a fájl, amiből hivatkozunk rá, akkor meg kell adni az elérési útvonalat (almappát, ahol van)

Listák

<li> - list item

Felsorolás lista

<ul> - unordered list

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

Sorszámozott lista lista

<ol> - ordered list

<ol>
    <li>Első elem</li>
    <li>Második elem</li>
    <li>Harmadik elem</li>
</ol>
  1. Első elem
  2. Második elem
  3. Harmadik elem

Csoportosító elemek

Tag Leírás
<p> bekezdés
<div> blokkszintű elemek csoportosítása
<span> soron belüli elemek csoportosítása
<hr> vízszintes elválasztó vonal (nincs záró pár!)

<span>

Példa: szöveg nyelvének beállítása

<span lang="en">The Social Network</span>
Tag Leírás
<main> Fő tartalmi egység meghatározása
<article> Tartalmi egység (pl. cikk) elhelyezése
<header> Fejléc megadása
<footer> Lábléc
<section> Szakasz
<nav> Navigációs elemek
<aside> Kapcsolódó, járulékos információ (jellemzően oldalsáv)
<address> Kontakt információ megadása

Ábrák, illusztrációk

  • <figure> - ábrák, illusztrációk
  • <figcaption> - ábrák, illusztrációk leírása

Például:

<figure>
    <pre>
        <code>
            //Kód
        </code>
    </pre>
    <figcaption>ez a leírás</figcaption>
</figure>

Képek beillesztése

<img> tag

Paraméterei:

  • src - a kép forrása
  • alt - a kép rövid szöveges leírása (akadálymentesség)
  • title - ez jelenik meg, ha a kurzort a kép fölé visszük
  • width - szélesség
  • height - magasság