Mindent, amit a látogató a webhely oldalain lát, a böngésző a kiszolgáló által neki elküldött részletes utasítások alapján jeleníti meg. Ezeket az utasításokat az oldal html-kódjának hívják, és külön "tagekből" állnak, amelyek az egyes elemek típusát, megjelenését és helyét külön-külön leírják. Bármely új elem (például kép) elhelyezéséhez egy oldalon hozzá kell adnia egy megfelelő utasítást - egy címkét - a forráskódjához. Fontolja meg ennek legegyszerűbb módját.
Utasítás
1. lépés
Ha bármilyen tartalomkezelő rendszert használ, akkor nagyon valószínű, hogy tartalmaz egy oldalszerkesztőt. Először meg kell nyitnia a kívánt oldalt ebben a szerkesztőben. További lehetőségek is lehetségesek. A legjobb esetben az oldalszerkesztőnek "vizuális üzemmódja" lesz, más szavakkal - "WYSIWYG mód" (amit lát, azt kapja - "amit lát, azt kapja"). Ebben a módban egyáltalán nem kell foglalkoznia az eredeti html-kóddal! A szerkesztő oldala ugyanúgy fog kinézni, mint a webhelyen, elég lesz az egeret a kívánt helyre bökni, és megnyomni a "kép beszúrása" gombot a szerkesztő panelen.
2. lépés
Ennek eredményeként megnyílik egy párbeszédpanel, amelyben ki kell választania a kívánt képet. Ha még nem töltötte fel, akkor van egy gomb, amely kiválasztja a képet a számítógépén, és feltölti a szerverre. Ezen felül ebben a párbeszédpanelen beállíthatja a kép körüli keret színét és szélességét, a keret és a kép közötti kitöltés távolságát és színét, az eszköztipp szövegét. Itt nem szükséges meghatározni a méreteket, de az oldalbetöltés felgyorsítása és a tervezés torzulásának elkerülése érdekében mégis jobb ezt megtenni. Amikor a párbeszédpanel összes szükséges mezője kitöltésre került, kattintson az "OK" gombra, majd mentse a szerkesztett oldalt.
3. lépés
Annak a ténynek köszönhetően, hogy nincs egyetlen szabvány a vezérlőrendszerekre, a kép vizuális módba történő beszúrásának eljárása kissé eltérhet, de az elv ugyanaz lesz. Ugyanezen okból előfordulhat, hogy a WYSIWYG mód nem jelenik meg a webhelye irányító rendszerében. Ezután még mindig HTML-ben kell szerkesztenie az oldal forráskódját (HyperText Markup Language - "hipertext jelölő nyelv"). Be kell illesztenie egy címkét a megfelelő helyre a kódba, amely azt mondja a böngészőnek, hogy itt jelenítse meg a képet. A legegyszerűbb formájában a következőképpen kell kinéznie: Itt van a kép "relatív címe" - ezen a címen a böngészőnek kapcsolatba kell lépnie a szerverrel, hogy megszerezze a képfájlt belőle. Ha a cím relatív, akkor a böngésző feltételezi, hogy a fájl ugyanabban a szerver mappában van, mint maga az oldal (vagy egy almappában). De azért, hogy ne tévedjünk, jobb megadni az "abszolút címet" - például így: Természetesen ahhoz, hogy a szerver megtalálja és elküldje a képet a böngészőbe, fel kell tölteni a megadott elhelyezkedés. Ennek legegyszerűbb módja a fájlkezelő, amely minden tartalomkezelő rendszerben található, valamint a tárhelytársaság vezérlőpultján keresztül. Ezt megteheti az FTP-protokoll (File Transfer Protocol - "fájlátviteli protokoll") használatával, egy speciális program - FTP-kliens - használatával is. Sok közülük, fizetős és ingyenes is - például Cute FTP, FlashFXP, WS FTP stb. De természetesen a program telepítése, elsajátítása és konfigurálása időbe fog telni, ezért egy fájlkezelővel mindent le lehet tölteni a böngésző könnyebb lehetőség.
4. lépés
A kép html-tag-jében szereplő címen kívül további információkat is megadhat - a címke "attribútumait". Például az alt="Kép" attribútum tartalmazza az eszköztipp szövegét, amely akkor jelenik meg, amikor az egérmutatót a kép fölé viszi: Helyettesíthető a - title attribútummal: - A téglalap mérete, amelyben a böngészőnek A képet a szélesség és a magasság attribútumok határozzák meg: - A szegély attribútum határozza meg a kép körüli szegély szélességét (pixelben): Ha a kép linkre kerül, a böngésző kék szegélyt rajzol körülötte. Megszabadulásához állítsa a határértéket nulla értékre: - A másik két attribútum a szomszédos elemekből (szövegsorokból, egyéb képekből stb.) Származó kép behúzásának mértékéről tartalmaz információt - a hspace a mélyedés vízszintesen (bal és jobb), vspace - függőlegesen (alul és felül):