Alt, hvad den besøgende ser på siderne på webstedet, vises af browseren baseret på detaljerede instruktioner, der sendes til ham af serveren. Disse instruktioner kaldes sidens html-kode og består af separate "tags", der beskriver typen, udseendet og placeringen af hvert element individuelt. For at placere et nyt element (for eksempel et billede) på en side skal du tilføje en tilsvarende instruktion - et tag - til dets kildekode. Overvej den nemmeste måde at gøre dette på.
Instruktioner
Trin 1
Hvis du bruger nogen form for indholdsstyringssystem, er det meget sandsynligt, at det inkluderer en sideditor. Først skal du åbne den ønskede side i denne editor. Yderligere - muligheder er mulige. I bedste fald vil sideeditoren have en "visuel tilstand", med andre ord - "WYSIWYG-tilstand" (Hvad du ser er hvad du får - "hvad du ser er hvad du får"). I denne tilstand behøver du slet ikke at behandle den originale html-kode! Siden i editoren ser ud som på webstedet, det vil være nok til at stikke musen på det ønskede sted og trykke på knappen "indsæt billede" på editorpanelet.
Trin 2
Som et resultat åbnes en dialogboks, hvor du skal vælge det ønskede billede. Hvis du ikke har uploadet det endnu, er der også en knap til at vælge et billede på din computer og uploade det til serveren. Derudover kan du i denne dialog indstille rammens farve og bredde omkring billedet, afstanden og farven på fyldet mellem rammen og billedet, teksten til værktøjstip. Det er ikke nødvendigt at specificere dimensionerne her, men af grunde til at fremskynde sideindlæsning og for at forhindre forvrængning af designet er det stadig bedre at gøre dette. Når alle de krævede felter i dialogboksen er udfyldt, skal du klikke på "OK" og derefter gemme den redigerede side.
Trin 3
På grund af det faktum, at der ikke er nogen standard for kontrolsystemer, kan proceduren for at indsætte et billede i den visuelle tilstand på dit system variere lidt, men princippet vil være det samme. Af samme grund vises WYSIWYG-tilstand muligvis ikke i dit websteds administrationssystem. Så er du stadig nødt til at redigere kildekoden på siden i HTML (HyperText Markup Language - "hypertext markup language"). Du bliver nødt til at indsætte et mærke på det rigtige sted i koden, der fortæller browseren at vise billedet her. I sin enkleste form skal det se sådan ud: Her er billedets "relative adresse" - på denne adresse skal browseren kontakte serveren for at få billedfilen fra den. Hvis adressen er relativ, antager browseren, at filen er i den samme servermappe som selve siden (eller i en undermappe). Men for ikke at tage fejl, er det bedre at specificere den "absolutte adresse" - for eksempel på denne måde: Naturligvis, for at serveren kan finde og sende billedet til browseren, skal det uploades til det angivne Beliggenhed. Den nemmeste måde at gøre dette på er via filhåndteringen, der findes i ethvert indholdsstyringssystem såvel som i dit hostingfirmas kontrolpanel. Du kan også gøre dette ved hjælp af FTP-protokollen (File Transfer Protocol - "filoverførselsprotokol") ved hjælp af et specielt program - FTP-klient. Der er mange af dem, både betalte og gratis - for eksempel Cute FTP, FlashFXP, WS FTP osv. Men det tager selvfølgelig tid at installere, mestre og konfigurere programmet, så en filhåndtering til download af alt, hvad du har brug for gennem en browser er en lettere mulighed.
Trin 4
Ud over adressen i billedets html-tag kan du angive yderligere oplysninger - "attributter" for tagget. F.eks. Indeholder attributten alt="Image" teksten til værktøjstip, der dukker op, når du holder musemarkøren over billedet: Den kan erstattes med attributten - title: - Størrelsen på det rektangel, som browseren skal bruge i vis billedet er indstillet efter attributterne for bredde og højde: - Attributten border angiver bredden af rammen omkring billedet (i pixels): Hvis billedet er lavet et link, tegner browseren en blå ramme omkring det. For at slippe af med det skal du indstille kantværdien til nul: - De to andre attributter indeholder oplysninger om størrelsen af billedets indrykning fra tilstødende elementer (fra tekstlinjer, andre billeder osv.) - hspace indstiller størrelsen på fordybning vandret (venstre og højre), vspace - lodret (nederst og øverst):
