HTML alapok - Képek megjelenítése

• Lehet 18, 2024

Miután elküldte és meg formázta webhelyének szövegét, itt az ideje, hogy néhány képet feltöltsön az oldalról. A képek nemcsak színt és életet adnak az oldalakhoz, hanem szöveges effektusok létrehozására is felhasználhatók, amelyeket a szokásos szöveg és formázás esetén nehéz vagy lehetetlen megtenni. Például, a betűkészlet-választás általában arra a kis betűkészletre korlátozódik, amelyben biztos lehet benne, hogy telepítve van a látogatók számítógépére, mivel ha nincsenek telepítve a betűtípusuk, akkor nem látják azt az Ön webhelyén! Bármikor, amikor nem elérhető betűtípust tesz közzé, a látogatók számítógépei bármilyen elérhető betűtípussal megjelenítik, amely stílusához legközelebb esik, ami gyakran elpusztíthatja webhelyének kialakítását.

Másrészt, ha egy képszerkesztő programot használ egy képzeletbeli szöveg elfogására, és GIF vagy JPEG formátumban feladja webhelyére, akkor minden látogató pontosan úgy látja, ahogy tervezi - mivel ez most inkább szöveg, mint szöveg képe maga a szöveg. Ez megszabadíthatja a képzeletbeli betűtípusok használatát a fejlécekben, és szokatlan módon csoportosíthatja őket.

A képek megjelenítéséhez használt alapcímke a következő:



A fenti kód tökéletesen működik HTML-ben. Ha XHTML-t használ, vagy biztos akar lenni abban, hogy webhelye készen áll az XHTML-re, akkor hozzá kell adnia egy perjelet a címke bezárásához, mivel az XHTML-ben nem használhat nyílt végű címkéket:



Az 'Src' rövid a forrásra, és ezt használja a kép fájl elérési útjának meghatározására - más szóval, hogy megmondja böngészőjének, hol található a kép az Ön webhelyén. Ha a képeket ugyanabban a mappában tartja, mint a weboldalait, akkor nem kell felsorolnia a mappát az 'src' szövegben - csak be kell írnia a képfájl nevét.

Miután megadta a képforrást, továbbfejlesztheti ezt az alapkeretet különféle opcionális attribútumokkal, hogy a lehető legtöbbet hozza ki a képeiből. Az egyik attribútum, amelyet szinte mindig használnia kell, az „alt” attribútum. Ez lehetővé teszi annak meghatározását, hogy a böngésző milyen szöveget jelenítsen meg, ha valamilyen okból nem tudja megjeleníteni a képet. Az „alt” szöveg a következőképpen készül:



Egy másik hasznos attribútumkészlet a 'szélesség' és 'magasság' címkék. Ezek lehetővé teszik a tényleges képmérettől eltérő méretű képek megjelenítését. Használhatja őket a kép átalakításához, hogy ez tökéletesen illeszkedjen az általános oldaldizájnhoz. Általában azonban előnyösebb a tényleges képméretet megváltoztatni képszerkesztő programok segítségével, majd két okból on-line módon elküldeni a képet. Először is, a képszerkesztő szoftver szinte mindig jobb megjelenést fog elérni, mint a méret kézi finomítása. Másodszor, a „szélesség” és a „magasság” címkék megváltoztatása nem változtatja meg a kép tényleges fájlméretét, tehát ha hatalmas képe van, amelyet miniatűrként jelenít meg, akkor a kép ugyanolyan hosszú ideig tart, míg betöltődik, ugyanúgy rágja fel. sok sávszélességet, mintha teljes méretben jelenítené meg.

A kép méretének meghatározásakor felsorolhatja a magasságot, a szélességet vagy mindkettőt. A méreteket a pixel határozza meg, amint az alább látható:



A képeket „össze is igazíthatja”, hogy azok simán működjenek a szöveg folyamatával. Ha a bal oldali igazítást választja, a szöveg a kép jobb oldalán kezdődik. Ha a jobb igazítást választja, a kép az oldal jobb oldalán jelenik meg, a szövege pedig a kép bal oldalán jelenik meg, majd új sorra szakad.

A kép igazítása a következőképpen történik:



Azt is beállíthatja, hogy az igazítás legyen "felső", "alsó" vagy "középső", hogy a képet egy sorba állítsák a szövegsor felső vagy alsó részével. Ha nem adja meg az igazítást, akkor a kép alapértelmezés szerint "alsó" lesz.

Kiegészítő megjegyzésként bármilyen sorrendben beillesztheti a képcímkéket (src, igazítás, alt stb.). Személyes preferenciám az, hogy először felsorolom az 'src' attribútumot, mivel ez a legalapvetőbb attribútum, amelyet minden képcímkébe bele kell foglalni, de bármilyen szekvenciát használhat, amely számodra a legtermészetesebb.

Video Utasításokat: HTML - Képek beillesztése a weboldalunkba (Lehet 2024).