Képek és linkek beillesztése
Képek beillesztése
Egy HTML dokumentumba egy képet az <img> taggal illeszthetsz be. Nincs zárótagja. Példa:
<img src="logo.jpg" width="380" height="51" alt="Logó" title="Logó">
Attribútumai:
src: a kép elérési útja. Ugyan úgy adható
meg, mint a link href attribútuma.
width: a kép szélessége.
height: a kép magassága.
alt: azt a szöveget
tartalmazza, ami akkor jelenik meg, ha nem töltődött le a
felhasználó számítógépére a kép.
title: a kép
címe. Ha az egér a kép fölött áll,
akkor ezt kiírják a böngészők. Itt ugyan
azt a szöveget szoktam megadni, mint amit az alt értékeként.
(Sajnos a böngészők egy része „keveri”
a két attribútum funkcióját.)
Link megadása
Link az <a> és </a> tagok közötti tartalom, ami általában szöveg vagy kép szokott lenni. Példa:
<a href=”http://www.webkalap.hu/index.html”>A webkalap.hu nyitó oldala.</a>
ami így jelenik meg: A webkalap.hu nyitó oldala.
Legfontosabb attribútuma a href, ami az
URL-t, vagyis a hivatkozott fájl
elérési útját adja meg. Az URL lehet
abszolút vagy relatív. A fenti példában
abszolút módon adtam meg a weblapom nyitó
oldalát.
A relatív hivatkozás esetén az állomány helyét ahhoz képest adod meg, hogy éppen melyik könyvtár tartalmát jeleníti meg a böngésző. Egy könyvtárt visszalépni a „../”megadásával lehet. Ennek az oldalnak a forráskódjában a fenti példával teljesen egyenértékű link megadás lenne:
<a href=”../index.html”>A webkalap.hu nyitó oldala.</a>
Egy másik példa link megadására relatív URL-el:
<a href=”../../sablonok/minta1/index.html”>Sablon fölső menüvel.</a>
Egy ilyen linkre rákattintva a böngésző két könyvtárat visszalép, majd a sablonok nevű könyvtár minta1 alkönyvtárában az index.html fájlt megnyitja.
Tipp: A weblapodon belül mindig relatív URL-t használj. Áttekinthetőbb a forráskód, valamint feltöltés előtt a weblapodat a saját számítógépeden tesztelve már működni fognak a linkjeid.