.HTML alapok || #2 linkek és képek

Már el is érkeztünk a második részhez. Remélem lassan kitisztul mindenkinek minden, viszont ha mégsem, akkor nyugodtan írjatok, hogy mit ...

Már el is érkeztünk a második részhez. Remélem lassan kitisztul mindenkinek minden, viszont ha mégsem, akkor nyugodtan írjatok, hogy mit és hol nem értetek! 
Mint mondtam az előző részben, még rengeteg dolog hátra van, de legelsőnek is a képek és linkek használata.
A két dolog kifejezetten hasonló, főleg hogy mindkettőhöz szükségünk van egy úgynevezett URL-kódra, elérési útvonalra. 
Kezdjük elsőnek is a linkeléssel. 
Igen egyszerű folyamat, kijelöljük a szöveget, ráklikkelünk a link ikonra, beírjuk az URL-t és készen is vagyunk. HTML nézetben a dolog egy kicsit más, de ugyanúgy elég egyszerű és kényelmes. A link kódja a <a href="URL kód">Linkelt szöveg</a>. Nem igazán lehet hova színesíteni, a href= hasonló jellemző, mint a style= volt és maga az <a></a> a divhez hasonlóan páros, szóval mindenképp 2-3x olvassátok át a linkeket, nehogy valami lemaradjon. Ezen kívül az URL címeket mindig pontosan másoljátok ki és ne hagyjátok el a http:// előtagot, e nélkül csak bizonyos esetekben hozza be a kívánt tartalmat a link. 

Most pedig a képekről. Igen egyszerű, egyetlen tagból álló címke, tehát minden egy <> csomagban helyezkedik el és ennek a végén zárjuk is le.
Erősen észrevehető, hogy a HTML nyelvezetét nem éppen a mongolok írták, ugyanis a legtöbb betű és kifejezés visszavezethető egy angol szóra. Ebből kifolyólag a kép címkéjét kiváltképp könnyű megtanulni: <img>, azaz:
<img src="URL kód" />
Illetve még egyebeket is megadhatunk, mint pl a kép méretét, a buborékszövegét és ha esetleg nem lehet megjeleníteni a képet, mit üzennénk a látogatóknak. Ezek mind ugyanolyan jellemzők, mint az src="", tehát külön kell mindegyiket bírni és utána passzintani. 
  • width="" pixelben, tehát px-ben megadott szélesség (pl. 100px), de lehet auto is
  • height="" pixelben, tehát px-ben megadott magasság (pl. 100px), de lehet auto is
  • title="" buborékszöveg szövege, tehát a szöveg ami előugrik, ha a képre viszed az egered
  • alt="" amennyiben nem lehet megnyitni a képet, ez a szöveg jelenik meg a helyén. 
<img src="http://valami.hu/valami.png" width="200px" height="400px" title="valami" alt="valami"/>
Így néz ki tehát egy teljesen fullosan jellemzett kép, de persze ez nagyon ritka és többnyire csak a szélességen szoktunk babrálni. c: 

Legvégül pedig milyen is az, ha egy képet linkelünk be? Igazából elég logikus. Megadjuk a céloldalt a href="" után, majd mikor a link szövegét írnánk le, szimplán beillesztjük a kép kódját. Ez így leírva elsőre biztos, hogy furcsa és érthetetlen, de akkor nézzük a gyakorlatban:
<a href="http://valami.hu"><img src="http://akepnekahelye.hu/akep.png"/></a>
Igazából ennyi az egész, nem valami hihetetlen nagy ördöngösség.:) Remélem tudtam segíteni és egy fokkal barátságosabban tudtok erre a sok szörnyű kódra tekinteni. Ha bármi kérdésetek lenne, akkor ne felejtsetek el kommentelni vagy emailen is megkereshettek. c: 

You Might Also Like

1 komment

  1. Szia! zt szeretném megkérdezni, hogy a blogcímem mellé hogy tudok mini képet (clip art)-ot tenni? Egyébként nagyon ó ez a bejegyzés :)

    VálaszTörlés