Van már tehát keretes hátterünk (táblázat) és tudunk írni is bele. Tegyük kicsit változatosabbá az oldalunkat képek beillesztésével. Válassz ki egy képet, amit fel szeretnél tenni. Ha eddig a saját gépeden egy külön könyvtárban dolgoztál, akkor célszerű a kiválasztott képet is abba a könyvtárba másolni. Természetesen a netről is választhatsz képet, akkor a kép URL címére lesz szükséged. Ha nem tudod, hogyan kell megtudni egy kép URL címét, olvasd el a "Kép beillesztése" cikk elejét!

Néhány szó a képfájlok kiterjesztéséről (fájlnév "." utáni része)

*.JPG, *.JPEG  - sima képfájl, ezt használjuk leggyakrabban, mert viszonylag kis helyet foglal

*.PNG             - ez is képfájl, akkor használjuk, ha tovább dolgozunk a képpel, átlátszó háttér

*.BMP            - bitmap kép, óriási helyet foglal érdemes JPG-re konvertálni

*.GIF                - "mozgó", animált képfájlok

Ennél sokkal többféle képfájl van, de ezek a leggyakoribbak.

Én most ezt a képet szeretném feltenni, a neve "Animation24.gif"

Akkor most lássuk a parancsot:

A kékkel jelölt szavak a kulcsszavak, melyek a kép tulajdonságait határozzák meg. Ha nincs szükség az adott tulajdonságra, egyszerűen elhagyható. Nézzük sorjában:

border                       - szegély vastagsága pixelben
src="....kép neve..." - a kép neve vagy URL címe (http://....)
width="..."               - a kép szélessége pixelben
height="..."              - a kép magassága
alt="...szöveg..."       - ha a kép fölé viszed az egeret, ez a szöveg jelenik meg (próbád ki)
style="....."              - szegély tulajdonságai
          border:2 px     - szegély vastagsága (pl.2 pixel)
          #FF0000         - szegély színe (színkód)
          dotted              - szegély stílusa (pontozott vonal)

Ugyanaz a kép szaggatott vonal-lal szegélyezve, a pirossal írt tulajdonság változik: dashed

Ugyanaz a kép dupla vonal-lal szegélyezve, a pirossal írt tulajdonság változik: double

Ugyanaz a kép bevágott vonal-lal szegélyezve, a pirossal írt tulajdonság változik: groove

Ugyanaz a kép kiálló vonal-lal szegélyezve, a pirossal írt tulajdonság változik: ridge

Ugyanaz a kép bemélyített vonal-lal szegélyezve, a pirossal írt tulajdonság változik: inset

Ugyanaz a kép kidomborodó vonal-lal szegélyezve, a pirossal írt tulajdonság változik: outset

Mint látod, sokféle szegélystílust megadhatsz:)) Erre a részre még visszatérünk a stílusoknál!

Tarts ki, már majdnem végeztünk ezzel a leckével:)))

Már csak igazítani kell a képet az előző leckéből megismert "align" paraméter segítségével.
Az alábbi kódokat próbálgasd a kódpróba ablakban (a kép neve helyére a sajátodat írd):

  Balra : align="left"

    Balra igazítva

Középre: align="center"

Középre

 Jobbra: align="right"

Jobbra igazítva

Jól látszik, hogy a <p>....</p> parancsba ágyaztuk be az <img ....> parancsot!

Itt próbálgathatod:

A következő leckében a link-kezelésről lesz szó.... ugye várod? :))))

 Egy klikkelés és már nyomatódik az oldal