Se på en webside online i dag, og du vil bemærke, at de deler visse ting til fælles. Et af de fælles træk er billeder. De rigtige billeder tilføjer så meget til et websteds præsentation. Nogle af disse billeder, som et firmas logo, hjælper med at mærke webstedet og forbinde den digitale enhed med dit fysiske firma.
For at tilføje et billede, ikon eller grafik til din webside skal du bruge tagget i en sides HTML-kode. Du placerer IMG tag i din HTML præcis, hvor du vil have grafikken til at vise. Webbrowseren, der gengiver sidens kode, erstatter dette tag med den relevante grafik, når siden er vist. Gå tilbage til vores firma logo eksempel, her er hvordan du kan tilføje det billede til dit websted:
Billedegenskaber
Når man ser på HTML-koden ovenfor, vil du se, at elementet indeholder to attributter. Hver af dem er påkrævet for billedet.
Den første attribut er "src". Dette er ret bogstaveligt billedfilen, som du vil blive vist på siden. I vores eksempel bruger vi en fil kaldet "logo.png". Dette er den grafik, som browseren ville vise, da den gav webstedet.
Du vil også bemærke, at før dette filnavn tilføjede vi yderligere oplysninger, "/ images /". Dette er filstien. Den oprindelige fremadrettede skråstreg fortæller serveren at se i mappen til mappen. Det vil derefter se efter en mappe kaldet "billeder" og endelig filen kaldet "logo.png". Brug af en mappe kaldet "billeder" til at gemme alle et websites grafik er en ret almindelig praksis, men din filsti vil blive ændret til det, der er relevant for dit websted.
Den anden nødvendige attribut er "alt" -teksten. Dette er den "alternative tekst", der vises, hvis billedet ikke kan læses af en eller anden grund. Denne tekst, som i vores eksempel læses "Company Logo" ville blive vist, hvis billedet ikke lykkes. Hvorfor skulle det ske? En række forskellige grunde:
- Forkert filsti
- Forkert filnavn eller stavefejl
- Overførselsfejl
- Filen blev slettet fra serveren
Dette er kun nogle få muligheder for, hvorfor vores specificerede billede mangler. I disse tilfælde vil vores alttekst vise i stedet.
Alt tekst bruges også af skærmlæseren software til at "læse" billedet til en besøgende, der er synshæmmede. Da de ikke kan se billedet som vi gør, lader denne tekst dem vide, hvad selve billedet er. Det er derfor, at alt tekst er påkrævet, og hvorfor det burde klart angive, hvad billedet er!
En almindelig misforståelse af alt-tekst er, at den er beregnet til søgemaskineformål. Det er ikke sandt. Mens Google og andre søgemaskiner læser denne tekst for at bestemme, hvad billedet er (husk, de kan heller ikke "se" dit billede), bør du ikke skrive alt tekst til at appellere udelukkende til søgemaskiner. Forfatter klare alt tekst, der er beregnet til mennesker. Hvis du også kan tilføje nogle søgeord i taggen, der appellerer til søgemaskiner, er det fint, men sørg altid for, at alt-teksten tjener sit primære formål ved at angive, hvad billedet er for alle, der ikke kan se grafikfilen.
Andre attributter
Det IMG tag har også to andre attributter, som du måske ser i brug, når du lægger en grafik på din webside - bredden og højden. Hvis du for eksempel bruger en WYSIWYG-editor som Dreamweaver, tilføjer den automatisk denne information til dig automatisk. Her er et eksempel:
Det BREDDE og HØJDE attributter fortæller browseren størrelsen af billedet. Browseren ved derefter præcis, hvor meget plads i layoutet der skal tildeles, og det kan gå videre til næste element på siden, mens billedet downloades. Problemet med at bruge disse oplysninger i din HTML er, at du måske ikke altid vil have dit billede vist i den nøjagtige størrelse. Hvis du f.eks. Har en lydhør hjemmeside, hvis størrelse ændres baseret på en besøgendes skærm og enhedsstørrelse, vil du også have, at dine billeder skal være fleksible. Hvis du angiver i din HTML, hvad den faste størrelse er, finder du det meget svært at tilsidesætte med responsive CSS-medieforespørgsler. Af denne grund og for at opretholde en adskillelse af stil (CSS) og struktur (HTML) anbefales det, at du IKKE tilføjer bredde- og højdeattributter til din HTML-kode.
En note: Hvis du forlader disse størrelsesbestemmelser og ikke angiver en størrelse i CSS, vil browseren alligevel vise billedet ved standardindstillingen.
Redigeret af Jeremy Girard
