Link
A link esetén lehetséges értékek:
- abszolút hivatkozás
- relatív hivatkozás
- elemre hivatkozás
- egyéb protokoll (mailto: )
- program hivatkozás
adható értékek:
- target (blank,parent, self,top)
- href
- hreflang
Mik azok a hivatkozások?
A hivatkozások a weblap részei (melyeket a legtöbb esetben HTML-ben hoznak létre, de nem mindig), és valamilyen másik erőforrásra mutatnak — más HTML dokumentumokra, szöveges fájlokra, PDF fájlokra, stb. Vannak olyan hivatkozások, amelyeket a böngésző automatikusan követni szokott, ilyenek például a link elem hivatkozásai (ezekkel már találkozhattál néhány korábbi leírásban, ezt használtuk például a CSS fájlok importálására a HTML dokumentumban), míg más hivatkozásokat a felhasználó aktiválhat tetszés szerint. Ezeket kapcsoknak nevezzük, és az a elem segítségével adhatod hozzá a dokumentumhoz.
Egy hivatkozás felépítése
Bármilyen soron belüli (inline) elemet átalakíthatsz kapcsolt hivatkozássá, ha köré teszed az a elemet. Például az alábbi HTML dokumentumban a Yahoo Developer Network szöveg hivatkozássá alakul
Azok a látogatók, akik aktiválják ezt a hivatkozást (rákattintva az egérrel, kiválasztva a billentyűzettel vagy hanggal) el fogják hagyni az aktuális oldalt, és átkerülnek a YDN oldalára. A hivatkozással sok mindent lehet csinálni, de a stílusozásáról csak később fogunk részletesebben is beszélni.
A hivatkozáshoz több attribútumot is megadhatsz:
href — az erőforrás, amire mutat (ez egy külső fájl vagy egy azonosító).
id — az azonosító, ha ez a kapocs egy cél, és nem egy hivatkozás.
title — további információk a külső erőforrásról.
Először is vegyük sorra a legfontosabb attribútumokat, majd nézzük meg, hogyan könnyítheted meg a látogatóid dolgát.
<h2>Példa a lapon belüli navigációra szakasz azonosítókkal, hivatkozásokkal és kapcsokkal</h2>
<div id="nav">
<ul id="toc">
<li><a href="#sec1">Első szakasz</a></li>
<li><a href="#sec2">Második szakasz</a></li>
<li><a href="#sec3">Harmadik szakasz</a></li>
<li><a href="#sec4">Negyedik szakasz</a></li>
<li><a href="#sec5">Ötödik szakasz</a></li>
</ul>
</div>
<div id="content">
<div>
<h2><a id="sec1">Szakasz #1</a></h2>
<p><a href="#toc">Vissza a menühöz</a></p>
</div>
<div>
<h2><a id="sec2">Szakasz #2</a></h2>
<p><a href="#toc">Vissza a menühöz</a></p>
</div>
<div>
<h2><a id="sec3">Szakasz #3</a></h2>
<p><a href="#toc">Vissza a menühöz</a></p>
</div>
<div>
<h2><a id="sec4">Szakasz #4</a></h2>
<p><a href="#toc">Vissza a menühöz</a></p>
</div>
<div>
<h2><a id="sec5">Szakasz #5</a></h2>
<p><a href="#toc">Vissza a menühöz</a></p>
</div>
</div>
<h2>Néhány más hivatkozás példa</h2>
<ul>
<li><a href="http://developer.yahoo.com">Yahoo Developer Network</a></li>
<li><a href="http://dev.opera.com/articles/view/the-freelancing-business-part-1-pricing/#marketing">Önmarketing tippek</a></li>
<li><a href="ftp://get.opera.com/pub/opera/win/">Az Opera különböző verzióinak letöltése</a></li>
<li><a href="http://farm1.static.flickr.com/56/188791635_0b8bdd808d.jpg?v=0">Képek a könyvemről</a></li>
</ul>
A link esetén lehetséges értékek:
- abszolút hivatkozás
- relatív hivatkozás
- elemre hivatkozás
- egyéb protokoll (mailto: )
- program hivatkozás
adható értékek:
- target (blank,parent, self,top)
- href
- hreflang
Mik azok a hivatkozások?
A hivatkozások a weblap részei (melyeket a legtöbb esetben HTML-ben hoznak létre, de nem mindig), és valamilyen másik erőforrásra mutatnak — más HTML dokumentumokra, szöveges fájlokra, PDF fájlokra, stb. Vannak olyan hivatkozások, amelyeket a böngésző automatikusan követni szokott, ilyenek például a link elem hivatkozásai (ezekkel már találkozhattál néhány korábbi leírásban, ezt használtuk például a CSS fájlok importálására a HTML dokumentumban), míg más hivatkozásokat a felhasználó aktiválhat tetszés szerint. Ezeket kapcsoknak nevezzük, és az a elem segítségével adhatod hozzá a dokumentumhoz.
Egy hivatkozás felépítése
Bármilyen soron belüli (inline) elemet átalakíthatsz kapcsolt hivatkozássá, ha köré teszed az a elemet. Például az alábbi HTML dokumentumban a Yahoo Developer Network szöveg hivatkozássá alakul
Azok a látogatók, akik aktiválják ezt a hivatkozást (rákattintva az egérrel, kiválasztva a billentyűzettel vagy hanggal) el fogják hagyni az aktuális oldalt, és átkerülnek a YDN oldalára. A hivatkozással sok mindent lehet csinálni, de a stílusozásáról csak később fogunk részletesebben is beszélni.
A hivatkozáshoz több attribútumot is megadhatsz:
href — az erőforrás, amire mutat (ez egy külső fájl vagy egy azonosító).
id — az azonosító, ha ez a kapocs egy cél, és nem egy hivatkozás.
title — további információk a külső erőforrásról.
Először is vegyük sorra a legfontosabb attribútumokat, majd nézzük meg, hogyan könnyítheted meg a látogatóid dolgát.
<h2>Példa a lapon belüli navigációra szakasz azonosítókkal, hivatkozásokkal és kapcsokkal</h2>
<div id="nav">
<ul id="toc">
<li><a href="#sec1">Első szakasz</a></li>
<li><a href="#sec2">Második szakasz</a></li>
<li><a href="#sec3">Harmadik szakasz</a></li>
<li><a href="#sec4">Negyedik szakasz</a></li>
<li><a href="#sec5">Ötödik szakasz</a></li>
</ul>
</div>
<div id="content">
<div>
<h2><a id="sec1">Szakasz #1</a></h2>
<p><a href="#toc">Vissza a menühöz</a></p>
</div>
<div>
<h2><a id="sec2">Szakasz #2</a></h2>
<p><a href="#toc">Vissza a menühöz</a></p>
</div>
<div>
<h2><a id="sec3">Szakasz #3</a></h2>
<p><a href="#toc">Vissza a menühöz</a></p>
</div>
<div>
<h2><a id="sec4">Szakasz #4</a></h2>
<p><a href="#toc">Vissza a menühöz</a></p>
</div>
<div>
<h2><a id="sec5">Szakasz #5</a></h2>
<p><a href="#toc">Vissza a menühöz</a></p>
</div>
</div>
<h2>Néhány más hivatkozás példa</h2>
<ul>
<li><a href="http://developer.yahoo.com">Yahoo Developer Network</a></li>
<li><a href="http://dev.opera.com/articles/view/the-freelancing-business-part-1-pricing/#marketing">Önmarketing tippek</a></li>
<li><a href="ftp://get.opera.com/pub/opera/win/">Az Opera különböző verzióinak letöltése</a></li>
<li><a href="http://farm1.static.flickr.com/56/188791635_0b8bdd808d.jpg?v=0">Képek a könyvemről</a></li>
</ul>
Nincsenek megjegyzések:
Megjegyzés küldése