HTML hivatkozások és képek
1. HTML hivatkozások (linkek)
Mi a hivatkozás?
A hivatkozások teszik lehetővé, hogy:
- Más weboldalakra navigáljunk
- Ugyanazon weboldal különböző részeire ugorjunk
- E-mail címeket vagy telefonszámokat hívjunk meg
- Fájlokat töltsünk le
Hivatkozás alapszerkezete
<a href="cél">Link szövege</a>
Hivatkozás típusok
- Külső hivatkozás (más weboldalra)
<a href="https://www.pelda.hu">Példa weboldal</a>
- Belső hivatkozás (saját webhelyen belül)
<a href="kapcsolat.html">Kapcsolat oldal</a>
- Helyi hivatkozás (ugyanazon az oldalon belül)
<a href="#fejezet1">Ugrás az 1. fejezethez</a>
<!-- Az oldal egy másik részén: -->
<h2 id="fejezet1">1. fejezet</h2>
- E-mail hivatkozás
<a href="mailto:info@pelda.hu">Küldjön e-mailt</a>
Hivatkozás megnyitása új ablakban
<a href="https://www.pelda.hu" target="_blank">
Megnyitás új ablakban
</a>
2. Képek beillesztése
A kép elem alapszerkezete
<img src="kep-neve.jpg" alt="Kép leírása">
A kép elem fő attribútumai
- src (source = forrás)
- A kép fájl elérési útja
- Lehet relatív vagy abszolút útvonal
- alt (alternative text = helyettesítő szöveg)
- A kép szöveges leírása
- Akkor jelenik meg, ha a kép nem tölthető be
- Képernyőolvasók ezt a szöveget olvassák fel
- Nagyon fontos az akadálymentesítés szempontjából
Példák képek beillesztésére
- Helyi kép beszúrása
<img src="macska.jpg" alt="Egy szürke macska">
- Kép másik mappából
<img src="kepek/macska.jpg" alt="Egy szürke macska">
- Kép az internetről (nem ajánlott)
<img src="https://www.pelda.hu/macska.jpg" alt="Egy szürke macska">
Képek és hivatkozások kombinálása
<a href="macskak.html">
<img src="macska.jpg" alt="Egy szürke macska">
</a>
3. Fájl és mappa szerkezet
Relatív és abszolút útvonalak
- Relatív útvonal
weboldal/
├── index.html
├── kepek/
│ ├── macska.jpg
│ └── kutya.jpg
└── oldalak/
└── kapcsolat.html
Példák relatív útvonalakra:
<!-- index.html-ből -->
<img src="kepek/macska.jpg" alt="Macska">
<a href="oldalak/kapcsolat.html">Kapcsolat</a>
<!-- kapcsolat.html-ből -->
<img src="../kepek/macska.jpg" alt="Macska">
<a href="../index.html">Főoldal</a>
- Abszolút útvonal (nem ajánlott helyi fájlokhoz)
<img src="https://www.pelda.hu/kepek/macska.jpg" alt="Macska">
4. Jó gyakorlatok
Hivatkozásoknál
-
Használj beszédes link szövegeket
- JÓ:
<a href="arak.html">Nézze meg árainkat</a>
- ROSSZ:
<a href="arak.html">Kattintson ide</a>
- JÓ:
-
Jelezd, ha a link új ablakban nyílik meg
<a href="https://www.pelda.hu" target="_blank">
Példa weboldal (új ablakban nyílik meg)
</a>
Képeknél
- Mindig adj meg alt szöveget
- Az alt szöveg legyen informatív
- JÓ:
alt="Piros alma egy kosárban"
- ROSSZ:
alt="kép"
- JÓ:
- Ha a kép csak díszítő elem, használj üres alt attribútumot
<img src="diszito.jpg" alt="">
5. Gyakori hibák
-
Hivatkozásoknál
- Nem létező oldalra mutató linkek
- Rossz relatív útvonalak
- Nem beszédes linkszövegek
- Target attribútum helytelen használata
-
Képeknél
- Hiányzó alt szöveg
- Túl nagy méretű képek használata
- Rossz fájlformátum választása
- Nem létező képekre hivatkozás
6. Gyakorló feladatok
1. Alapszintű feladat
Készíts egy egyszerű navigációs menüt:
- Főoldal
- Termékek
- Kapcsolat (A hivatkozások mutathatnak nem létező oldalakra is)
2. Haladó feladat
Készíts egy képgalériát:
- Legalább 4 kép
- A képekre kattintva nyíljon meg egy részletes oldal
- Minden képnek legyen megfelelő alt szövege
7. Ellenőrző kérdések
- Mi a különbség a relatív és abszolút útvonal között?
- Mire szolgál az alt attribútum?
- Hogyan lehet egy képet hivatkozássá alakítani?
- Mikor használjunk target="_blank" attribútumot?
- Miért fontos a megfelelő könyvtárszerkezet kialakítása?
Most, hogy megtanultad a hivatkozások és képek használatát, a következő leckében a CSS alapjaival fogunk foglalkozni, ahol megtanuljuk, hogyan lehet ezeket az elemeket stílusosan megformázni.