Sådan tilføjes billeder til dine HTML5- og CSS3-baserede websider - dummier

Hver gang du udforsker internettet, er du nødt til at løbe ind i tonsvis af billeder på næsten hver HTML5 og CSS3-side, du besøger. Billederne bruges typisk på fire måder på websider:

• Eksternt link: Siden har tekst med et link indlejret i det. Når brugeren klikker på linket, erstatter billedet siden i webbrowseren. For at lave et eksternt koblet billede skal du bare lave et almindeligt link, men pege mod en billedfil, snarere end en HTML-fil (HyperText Markup Language).

• Embedded images: Billedet er indlejret i siden. Tekstens side strømmer normalt rundt om billedet. Dette er den mest almindelige type billede, der bruges på internettet.

• Baggrundsbilleder: Et billede kan bruges som baggrund for hele siden eller til en bestemt del af siden. Billeder kræver normalt en særlig manipulation for at gøre dem egnede til baggrundsbrug.

• Brugerdefinerede kugler: Med CSS kan du tildele et lille billede til en kugle for en bestilt eller uordnet liste. Dette giver dig mulighed for at lave enhver form for tilpassede listemarkører, du kan tegne.

Sådan linkes til et billede

Den nemmeste måde at indarbejde billeder på er at forbinde dem. Tag et kig på externalImage. html side.

Sidens kode er ikke meget mere end et simpelt link:

externalImage. html

Link til et eksternt billede
Susan B. Constant

Href peger på en billedfil, ikke en HTML-side. Du kan pege på en hvilken som helst type fil du ønsker i et anker tag. Hvis browseren kender filtypen, viser browseren filen. Hvis browseren ikke kender filformatet, forsøger brugerens computer at vise filen ved hjælp af det program, det normalt bruger til at åbne den pågældende filtype.

Dette virker fint for de fleste billeder, fordi billedet vises direkte i browseren.

Du kan bruge dette ankertrick med enhver form for fil, men resultaterne kan være meget uforudsigelige. Generelt gem dette trick til meget almindelige formater, som GIF og JPG.

De fleste browsere ændrer automatisk billedet, så det passer til browsers størrelse. Det betyder, at et stort billede kan synes at være mindre end det egentlig er, men brugeren skal stadig vente på hele billedet, der skal downloades.

Da dette er en relativ reference, skal det angivne billede være i samme mappe som HTML-filen. Når brugeren klikker på linket, erstattes siden af ​​billedet.

Eksterne links er nemme at oprette, men de har nogle problemer:

• De forhåndsviser ikke billedet. Brugeren har kun tekstbeskrivelsen til at finde ud af, hvad billedet kan være.

• De afbryder strømmen. Hvis siden indeholder en række billeder, skal brugeren fortsat forlade siden for at se billeder.

• Brugeren skal sikkerhedskopiere for at vende tilbage til hovedsiden. Billedet ligner en webside, men det er det ikke. Intet link eller anden forklarende tekst på billedet angiver, hvordan man kommer tilbage til websiden. De fleste brugere ved at klikke på browserens Tilbage-knap, men antager ikke, at alle brugere ved hvad de skal gøre.

Sådan tilføjes inlinebilleder ved hjælp af

taggen

Alternativet til at give links til billeder er at indlejre dine billeder på siden.

Koden viser, hvordan dette billede var inkluderet i siden:

embeddedImage. html

Susan B. Constant

Susan B. Constant var flagskibet i flåden af ​​tre små skibe, der bragte bosættere til Jamestown, den første succesrige engelske koloni i den nye verden. Dette er en replik indeholdt i nærheden af ​​Jamestown, Virginia. Billedetiketten er stjernen på denne side. Dette tag giver dig mulighed for at gribe en billedfil og indarbejde den direkte i siden. Billedetiketten er et one-shot-tag. Det slutter ikke med. Brug i stedet tegnene i slutningen af ​​definitionen for at angive, at dette mærke ikke har indhold.

Du har måske bemærket, at

Susan B. Konstant er kursiv på siden brugt mærket for at få denne effekt. står for vægt, og betyder stærk vægt. Som standard er enhver tekst inden for et par kursiv og tekst er boldfaced. Du kan ændre denne adfærd med CSS. src (kilde)

Med src-attributten kan du angive webadressen for billedet. Dette kan være en absolut eller relativ reference. Kobling til et billede i din egen katalogstruktur er generelt bedst, fordi du ikke kan være sikker på, at et eksternt billede stadig vil være der, når brugeren kommer til siden.

højde og bredde

Egenskaberne for højde og bredde bruges til at angive billedets størrelse. Browseren bruger disse oplysninger til at angive, hvor meget plads der skal reserveres på siden.

Egenskaberne for højde og bredde skal

beskrive størrelsen af ​​et billede. Du kan bruge disse attributter til faktisk at ændre størrelsen på et billede, men det er en dårlig idé. Ændre billedstørrelsen med dit billedredigeringsprogram. Hvis du bruger disse attributter, skal brugeren vente på det fulde billede, selvom hun får vist en mindre version. Lad ikke brugeren vente på oplysninger, hun ikke kan se. alt (alternativ tekst)

Alt-attributten giver dig mulighed for at angive alternativ tekst, der beskriver billedet. Alternativ tekstinformation bruges, når brugeren har billeder slukket og af skærmlæsere. Oplysninger i alt-tags bruges også i billedsøgningsoftware som Google Images.

Altattributten er påkrævet på alle billeder.

Derudover er tagget et inline-tag, så det skal indlejres inde i et blokniveau-tag.