< WebKészítés /> interaktív webszerkesztő tananyagok
Színek megadása
Először is színezném kicsit az eddig elhangzottakat... A színek meghatározása 2 féle képen is történhet a (X)HTML-ben. Az egyik mód, hogy a szín angol megfelelőjét alkalmazzuk, viszont ekkor csak 16 féle színt különböztethetünk meg. A másik lehetőség az ún. színkódok használata. Itt a színt számokkal (hexadecimálisan) adhatjuk meg. Minden, az RGB (Red,Green,Blue azaz Piros,Zöld,Kék) additív színkeveréssel előállítható színt átírhatunk ilyen formába is. A három alapszínnek a tartománya 0-255 ig terjedhet. (Ez pontosan egy byte.) Így tehát a kikeverhető színek száma 16,7 milliót éri el (True Color). Ami az emberi szemnek már bőségesen elég. :) Tehát például ha fehér színt akarunk előállítani, akkor átszámolhatjuk a 255,255,255 GRB arányt és akkor #FFFFFF színkódot kapunk, vagy beírjuk angolul, hogy white. Ez az átszámolásos cucc gondolom, senkinek sem megy fejből, így az EditPlus-t használóknak ott a kis paletta ikon a második sorban, vagy használhatja bárki a WebKészítés kódjegyzékét is. A profiknak pedig létezik egy ügyes kis program, a Color Cop, mi kielégít minden szín igényt! Igyekeztem kihagyni, de szót kell ejteni a color (szövegszín) és bgcolor (háttérszín) attribútumról, ennek segítségével adhatjuk meg egy címkére vonatkozóan az előbb tanult színeket. Az XHTML-ben már ne használjuk ezeket!
KódJegyzék a színmegadáshoz...
Képek beszúrása
Manapság szinte nincs is olyan honlap, amin ne lennének képek. Őket az <img címkével szúrhatjuk be. XHTML-ben a src="elérésiút" width="széles" height="hossz" alt="helyettesítőszöveg" />border="0" helyett a stíluslapban fogjuk megadni, hogy a keretet levegye hivatkozások esetén. Jut eszembe, a kép egy sorbeli elem, tehát egy blokkon (pl: <p> </p>) belül kell alkalmaznunk, illetve így a szintén sorbeli <a> </a> közé is tehetjük.
Teszek egy gyors kitérőt a képformátumok irányába. Nem biztos, hogy mindenki ismeri a formátumok adta különbségeket. Kezdjük a BMP-vel (bitmap). Ez a Ms Paint-ból ismert formátum hatalmas mérete (pixelenként tárolt színadat) miatt kerülendő. A honlapokban általában tömörített (JPG, GIF, PNG) képeket használunk. JPG (Joint Photographic Experts Group) előnye a meglepően kicsi méret viszont csekély mértékben torzul a kép. Fotókhoz javasolt. A GIF (Graphics Interchange Format) szintén kicsi és már az átlátszóságot is támogatja, viszont kevés (max 8 bit) színt tud tárolni. Ez a honlap grafikájához ajánlott. A kettő ötvözése a PNG (Portable Network Graphics), ami kicsi is, átlátszóságot is támogat és TrueColor-t is torzulásmentesen. Régen kevés böngésző ismerte, manapság egyre jobban terjed.
Ha egy képet több hivatkozásra akarunk osztani anélkül, hogy szétvágnánk, szükségünk lesz egy képre a usemap="azonosito"<map></map> azonosítójára hivatkozik.
<map id="azonosito">
<area href="link" title="gyorstipp" alt="helyettesítő" shape="alakzat" coords="koordináták" />
...
</map>
Itt az <area>-k jelölik az egyes helyeket. A shape (alakzat) értéke lehet: rect (ekkor a coords koordináták: "bal-x,fent-y,jobb-x,lent-y"), circle ("közép-x,közép-y,sugár"), poly (jellemző pontok egymás után "x1,y1,x2,...") és default, ami az egész régiót jelenti. Ha pedig nem kívánunk hivatkozást rendelni hozzá, akkor a nohref="nohref"-et kell a href helyére tennünk. Természetesen a normál hivatkozásból ismert attribútumok is érvényesek itt. Pl.: tabindex és accesskey...
Tuti mindenki látott már a böngészők címsorában lévő domain mellett egy kis ikont, ún. favicon-t. Ez a kis képecske valójában egy 16x16px-es .ico formátumú (mime: image/x-icon) fájl. Elhelyezni úgy tudjuk, hogy elnevezzük favicon.ico-nak, és a gyökér könyvtárba tesszük, majd használjuk a következő címkét a <head></head> részben: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
Eddig még senki sem írt hozzászólást... Légy te az első!
Új hozzászólás írásához lépj be fiókodba vagy regisztrálj oldalunkon!