Tilføjelse af billeder til websider ved hjælp af HTML

Se på nogen hjemmeside online i dag, og du vil bemærke, at de deler visse ting til fælles. Et af disse delte 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 til din fysiske virksomhed.

Sådan tilføjes et billede til en webside ved hjælp af HTML

For at tilføje et billede, et ikon eller en 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 vist. Den webbrowser, der gengiver sidens kode, erstatter dette tag med den passende grafik, når siden er vist. Gå tilbage til vores firma-logo eksempel, her er hvordan du kan tilføje dette billede til dit websted:

SRC-attributten

Når man ser på HTML-koden ovenfor, vil du se, at elementet indeholder to attributter. Hver af dem kræves til billedet.

Den første attribut er "src". Dette er bogstaveligt talt den billedfil, du vil have vist på siden. I vores eksempel bruger vi en fil kaldet "logo.png". Dette er den grafik, som webbrowseren ville vise, når den gengav webstedet.

Du vil også bemærke, at vi før dette filnavn tilføjede nogle yderligere oplysninger, "/ images /". Dette er filstien. Det oprindelige skråstreg fremad fortæller serveren at se på roden til biblioteket. Derefter ser den efter en mappe kaldet "images" og til sidst filen "logo.png". Brug af en mappe kaldet "billeder" til at gemme al grafik på et sted er en ret almindelig praksis, men din filsti vil blive ændret til det, der er relevant for dit websted.

Alt-attributten

Den anden krævede attribut er "alt" -teksten. Dette er den "alternative tekst", der vises, hvis billedet af en eller anden grund ikke indlæses. Denne tekst, som i vores eksempel læser "Firmalogo", vises, hvis billedet ikke indlæses. Hvorfor skulle det ske? En række forskellige grunde:

• Forkert filsti
• Forkert filnavn eller stavefejl
• Transmissionsfejl
• Filen blev slettet fra serveren

Dette er blot nogle få muligheder for, hvorfor vores specificerede billede muligvis mangler. I disse tilfælde vises vores alt-tekst i stedet.

Hvad bruges Alt Text til?

Alt-tekst bruges også af skærmlæser-software til at "læse" billedet til en besøgende, der er synshæmmet. Da de ikke kan se billedet som vi gør, lader denne tekst dem vide, hvad selve billedet er. Det er derfor, alt tekst er påkrævet, og hvorfor det tydeligt skal angive, hvad billedet er!

En almindelig misforståelse af alt-tekst er, at den er beregnet til søgemaskinsformå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), skal du ikke skrive alt-tekst for kun at appellere til søgning motorer. Forfatter klar alt-tekst, der er beregnet til mennesker. Hvis du også kan tilføje nogle nøgleord i tagget, der appellerer til søgemaskiner, er det fint, men sørg altid for det alt-teksten tjener sit primære formål ved at angive, hvad billedet er for alle, der ikke kan se grafikken fil.

Andre billedegenskaber

Det.

IMG. 

tag har også to andre attributter, som du muligvis ser i brug, når du lægger en grafik på din webside - bredden og højden. For eksempel, hvis du bruger en WYSIWYG-editor som Dreamweaver, tilføjer den automatisk denne info for dig. Her er et eksempel:

Det.

BREDDE. 

og.

HØJDE. 

attributter fortæller browseren størrelsen på billedet. Browseren ved så nøjagtigt, hvor meget plads i layoutet der skal tildeles, og den kan gå videre til det 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, at dit billede skal vises i den nøjagtige størrelse. For eksempel, hvis du har en.

lydhør hjemmeside

hvis størrelse ændres baseret på en besøgende skærm og enhedens størrelse, vil du også have dine billeder til at være fleksible. Hvis du angiver i din HTML, hvad den faste størrelse er, vil du finde det meget svært at tilsidesætte med lydhør.

CSS medieforespørgsler

. Af denne grund og for at opretholde en adskillelse af stil (CSS) og struktur (HTML) anbefales det, at du IKKE føjer bredde- og højdeattributter til din HTML-kode.

En note: Hvis du ikke lader disse størrelsesinstruktioner være slået fra og ikke angiver en størrelse i CSS, vil browseren alligevel vise billedet i sin standardstørrelse.

Redigeret af Jeremy Girard