tankönyv html

Képek hozzáadása a weboldal
Ha a weboldal nem lesz semmi más, mint a szöveges információk, úgy tűnhet, és valaki érdekes, köszönhetően a bemutatott információk rajta, de nem valószínű, hogy valaki bekapcsolja a nyelv nevezni vonzó. Add képeket egy internetes oldalon nagyon könnyen. Ahhoz, hogy az grafika, amely meg tudja adni az oldal professzionális megjelenést, igényel némi tudást. Mi az, sőt, és elkötelezett a mai leckét.

A két leggyakrabban használt internetes GIF és JPEG formátumban. Format egy csoportja fejlesztett ki a JPEG (Joint Photographic Experts Group - közös szakértői csoport a gépi feldolgozás fotografikus kép) és kapta nevét, jellemzően használt képek tárolásához a színátmeneteket, mint a fényképek.

Gyakorlatilag az összes egyéb grafikai elemeket menti GIF (Graphics Interchange Format) formátumban - GIF. Jelenleg van egy másik új grafikus formában, egyre népszerűbb: PNG (Portable Network Graphics - Portable Network Graphics). Ez idővel várhatóan helyettesíti a GIF formátum. Azonban nem rohan egy visszaállítási az összes képfájlok ebben a formában, de ez nem minden böngésző támogatja.

Az összes kép adunk egy weblapot ugyanazt a címkét, az úgynevezett képforrás tag

. Talán most meg tudja határozni, hogy a rekord egy címke
, jellemzőtípusának (SCR) és a attribútum értékét (helye). Azonban, mivel az alkalmazás scr attribútum megadása nem kötelező, ez sokkal kényelmesebb, hogy beszéljen a rekordot arról, hogy egy közös tag. Valószínűleg akkor is figyelni, hogy mi nem biztosított a megfelelő záró teg kép forrása tag. Ez egy külön önálló teg, ezért ne felejtsd el hozzáadni a végén az ő záró perjel:
.

Hozzáadása alternatív címkék
Szörfözés az interneten, akkor már valószínűleg észrevette, újra és újra a szavakkal, hogy megjelenik, ha lebeg az egeret bármely grafikai elemeket weboldalakat. Ezek a feliratok gyakran jelentettek néhány további információt a kép az oldal vagy területet foglal el.

A példában képviselt NTML következő kód azt mutatja, hogyan alt attribútumot adunk a címkét

. Mint az attribútum src, alt attribútum azt mondja a böngésző néhány további információt a kép, és azt is mindig együtt használják tegom
.

Az alt attribútum adja hozzá a weblap grafikai elem alternatív szöveg. Ez a szöveg az úgynevezett alternatív, mert akkor megjelenik a képernyőn, mint alternatívát a kép maga. Az alt attribútum egy másik nagyon fontos célja. Sok online látogatói az elérhető csatornákat a kis adatsebesség, jelezhetik a böngésző nem tölti le, vagy kijelző képe információkat. Ez lehetővé teszi számukra, hogy gyorsítsák fel a terhelési weboldalak a számítógépükön.

Továbbá ne feledjük, hogy nem minden böngésző képes megjeleníteni, a Windows grafikus. Például Lynx böngésző nem támogatja ezt a funkciót. Így a képek, alt attribútum lehetővé teszi a web designer, hogy biztos, hogy ha a látogató weboldalak nem látja a képet a képernyőn, akkor legalább tudja olvasni a szöveget adunk a képi információ.

Bár alt attribútum lehet meghatározni az egyes tag

, legyen óvatos, ne rendeljen egyes grafikai elemek nekik megfelelő szöveges üzenetek. Például nincs értelme felvenni alternatív szöveg címkék különböző elemeit külső design a weboldal. Ahhoz, hogy elkerüljük az ilyen hibákat, akkor lehet rendelni az attribútum alt ezen elemek null (alt = »»). Ha nincs beállítva más attribútumok értékei, a böngésző reprodukálni a képet az eredeti méretben ego összehangolja a felső széle a kép felső pereme szöveges részben. Meg lehet változtatni Mindkét paraméter használatával stíluslap címkéket.

Képtulajdonságok
címke

előírja attribútumok segítségével módosíthatja a kép méretét. Néhány ezek a tulajdonságok az alábbiak.
magasság - Meghatározza pixelben vagy százalékban - Meghatározza a kép magasságát
szélesség - Meghatározza pixelben vagy százalékban - Meghatározza a kép szélességét.

Magasságának beállítása és a kép szélessége
A méretei a tárolt képet egy weboldalon mogyt ellátni magasság és szélesség attribútumokat. 3nacheniya ezek a tulajdonságok vannak megadva akár fix pixelszám, vagy százalékosan viszonyítva az oldal mérete. Vessen egy pillantást a HTML kódot az alábbiak szerint. Az első TEGE eredeti képméret, hogy láttad az előző ábrákon lecke, állítsa 60 pixel függőlegesen és vízszintesen 60 képpont. Egy második szélessége TEGE ugyanazt a képet van beállítva egyenlő 6% az oldal szélessége és magassága - 10% relatív az oldal magassága. Az ábra azt mutatja, hogy ez a két kép jelenik meg a böngésző ablakában.

Reprodukálása a képen az ablak, a böngésző egyformán jól megbirkózni a feldolgozó a meghatározott értékeket pixel, és százalékban, Ne feledje azonban, hogy a számítógépek látogató a képernyő felbontását lehet állítani, hogy a weboldal más mint az, hogy telepítve van a monitor. Mi következik ebből? Például, hogy állítsa be a monitor felbontása 800x600. Az előző példában a adunk a weboldal minta szélességét lesz beállítva, hogy 6% -a a szélessége a oldalon, amely ebben felbontás 48 pixel. Ha ugyanaz a kép megtekinthető a monitor felbontás 1024h800 jelzett 6% az oldal szélességének meg kell egyeznie a szélessége már egyenlő 61 pixel.

Akkor a látszatot keltik, gyorsabb kép letöltése. Függetlenül attól, hogy a változás a képméret, vagy sem, vcegda értékét mutatja a magasság és a szélesség attribútumokat, hiszen tájékoztatják a böngésző a fontos információt, hogy mennyi hely kell felosztani az oldalt az elhelyezése a kép. Ebben az esetben a böngésző képes lesz azonosítani a szükséges helyet a képre, és továbbra is épít a többi elem az oldal megállás nélkül betölteni ezt a képet. Ily módon úgy tűnik, mintha az oldal betöltése gyorsabb, mert a látogatók nem kell várni a teljes terhelés a képre végül az egyéb információkat az oldalon.

Ha valóban szükséges, hogy a kép került egy jól meghatározott térben szélessége oldalon, használjon százalékok. Ebben az esetben a képernyő bármely monitor kép foglalja el ugyanazt a része az oldal, amely a képernyőn. Ha azt szeretnénk, hogy továbbra is tartósan felbontású kép (mérete pixel), kifejezett értékek pixel.

Igazítása szöveg és grafika
Az align tulajdonság címke

igazítja a kép jobb oldalán (jobb érték) vagy balra (bal érték) a szélén egy szövegből. Példák az ezzel a tulajdonság látható az ábrán.

Ez ugyanabban az attribútum változik, és igazítsa a képet függőlegesen (ismét képest szöveges vonal). Meg lehet venni a másik három érték felső, alsó, és a központ. Ha a tulajdonság értéke összehangolása top, felső széle a kép igazodik a felső széle a környező szöveget. Ha a tulajdonság értéke összehangolása alján, az alsó széle a kép egy vonalban van az alsó széle a környező szöveget. Ha az align attribútum értéke központtól, a kép közepén egy vonalban van a központja a szöveges részben.

Képek felhasználása linkek
A képek nem csak jó weboldalakat. Ezeket lehet sikeresen használják más dokumentumokra mutató hivatkozások. A HTML-ben, ez a probléma könnyen megoldható, mert a képek alakítjuk linkeket pontosan ugyanúgy, mint a feliratokat. Ehhez, akkor is alkalmazni kell teg <а>, arra a következtetésre jutott az ő weboldal elem, ami kell egy hivatkozást egy másik dokumentumba. Így, ha a ravaszt hivatkozást el kell végezni, ha rákattint a képre, amely teg <а> csatolniuk teg adott kép.

Mint látható, kattintson a képre miniatyura.jpg megnyitása kísérte a másik képfájlt (izobrazhenie.jpg). A szöveget úgy definiáljuk, mint az értéke alt attribútum szerint a látogató, hogyan kell megnyitni a fő kép.

Titkok a sikeres használata a képek
A képek érdekes és vonzó, készítsen egy csomó vizuális információ, és nagyon könnyű felvenni a weboldalakat, de még mindig be kell tartania bizonyos szabályokat, az alábbiakban ismertetett, ha igazán akarjuk, hogy hozzon létre egy honlapot, hogy lesz népszerű az internethasználók körében.

Minél nagyobb a képfájl, annál tovább tart, hogy töltse le a számítógépre. Mivel a legtöbb internet felhasználók számára a hálózat még mindig a kommunikációs csatornák kisebb sávszélességű, a méret a feltöltött fájlok még mindig alapvető fontosságú a számukra. Ügyeljen arra, hogy vegyék figyelembe ezt a tényt, és próbálja hozni a weboldalak, mint a kép kisebb lehet.

Kapcsolódó cikkek