Slik legger du til bilder på HTML5 og CSS3-baserte websider - dummies

Hver gang du undersøker nettet, er du nødt til å kjøre inn tonnevis av bilder på omtrent alle HTML5- og CSS3-sider du besøker. Vanligvis brukes bilder på fire måter på nettsider:

• Ekstern lenke: Siden har tekst med en kobling innebygd i den. Når brukeren klikker på koblingen, erstatter bildet siden i nettleseren. For å lage et eksternt koblet bilde, bare lage en vanlig kobling, men pek mot en bildefil, snarere enn en HTML (HyperText Markup Language) -fil.

• Embedded Images: Bildet er innebygd på siden. Teksten på siden flyter vanligvis rundt bildet. Dette er den vanligste typen bilde som brukes på nettet.

• Bakgrunnsbilder: Et bilde kan brukes som bakgrunn for hele siden eller for en bestemt del av siden. Bilder krever vanligvis noen spesiell manipulasjon for å gjøre dem egnet til bakgrunnsbruk.

• Tilpassede kuler: Med CSS kan du tilordne et lite bilde til å være en kule for en bestilt eller uordnet liste. Dette lar deg lage noen form for tilpassede listemarkører du kan tegne.

Slik kobler du til et bilde

Den enkleste måten å innlemme bilder på er å koble til dem. Ta en titt på externalImage. html side.

Sidens kode er ikke mye mer enn en enkel lenke:

externalImage. html

Kobling til et eksternt bilde
Susan B. Constant

Href peker på en bildefil, ikke en HTML-side. Du kan peke på hvilken type fil du vil ha i en ankermerke. Hvis nettleseren kjenner filtypen, viser nettleseren filen. Hvis nettleseren ikke kjenner filformatet, forsøker brukerens datamaskin å vise filen ved hjelp av hvilket program det vanligvis bruker for å åpne den typen fil.

Dette fungerer fint for de fleste bilder fordi bildet vises direkte i nettleseren.

Du kan bruke dette ankertricket med noen form for fil, men resultatene kan være svært uforutsigbare. Vanligvis lagre dette trikset for svært vanlige formater, som GIF og JPG.

De fleste nettlesere endrer størrelsen på bildet automatisk slik at det passer til nettleserens størrelse. Dette betyr at et stort bilde kan synes å være mindre enn det egentlig er, men brukeren må fortsatt vente på hele bildet som skal lastes ned.

Fordi dette er en relativ referanse, må det angitte bildet være i samme katalog som HTML-filen. Når brukeren klikker på koblingen, erstattes siden av bildet.

Eksterne koblinger er enkle å lage, men de har noen problemer:

• De forhåndsviser ikke bildet. Brukeren har kun tekstbeskrivelsen for å finne ut hva bildet kan være.

• De avbryter strømmen. Hvis siden inneholder en serie bilder, må brukeren fortsette å forlate siden for å vise bilder.

• Brukeren må sikkerhetskopiere for å gå tilbake til hovedsiden. Bildet ser ut som en nettside, men det er det ikke. Ingen lenke eller annen forklarende tekst i bildet angir hvordan du kommer tilbake til nettsiden. De fleste brukere vet at du klikker på nettleserens Back-knapp, men antar ikke at alle brukere vet hva de skal gjøre.

Slik legger du til inlinebilder ved hjelp av

taggen

Alternativet til å gi linker til bilder er å legge inn bildene dine i siden.

Koden viser hvordan dette bildet ble inkludert i siden:

embeddedImage. html

Susan B. Constant

Susan B. Constant var flaggskip av flåten av tre små skip som tok bosetterne til Jamestown, den første vellykkede engelske kolonien i den nye verden. Dette er en kopi som ligger i nærheten av Jamestown, Virginia. Bildetiketten er stjernen på denne siden. Denne taggen lar deg ta en bildefil og inkorporere den direkte i siden. Bildetiketten er en en-taggetikett. Det slutter ikke med. I stedet bruker tegnene på slutten av definisjonen for å indikere at denne taggen ikke har innhold.

Du har kanskje lagt merke til at

Susan B. Konstant er kursiv på siden brukt taggen for å få denne effekten. står for vekt, og betyr sterk vekt. Som standard er noen tekst innenfor et par kursiv og tekst er fet. Du kan endre denne oppførselen med CSS. src (kilde)

Med src-attributtet kan du angi URL-adressen til bildet. Dette kan være en absolutt eller relativ referanse. Kobling til et bilde i din egen katalogstruktur er generelt best fordi du ikke kan være sikker på at et eksternt bilde fortsatt vil være der når brukeren kommer til siden.

høyde og bredde

Egenskaper for høyde og bredde brukes til å indikere størrelsen på bildet. Nettleseren bruker denne informasjonen for å angi hvor mye plass som skal reserveres på siden.

Egenskaper for høyde og bredde skal

beskrive størrelsen på et bilde. Du kan bruke disse attributter til å endre størrelsen på et bilde, men det er en dårlig ide. Endre bildestørrelsen med bildeditoren din. Hvis du bruker disse attributter, må brukeren vente på hele bildet, selv om hun får se en mindre versjon. Ikke la brukeren vente på informasjon hun ikke vil se. alt (alternativ tekst)

Alt-attributtet gir deg mulighet til å angi alternativ tekst som beskriver bildet. Alternativ tekstinformasjon brukes når brukeren har bilder slått av og av skjermlesere. Informasjon i alt-tagger brukes også i bildesøkingsprogramvare som Google Images.

Altattributtet er påkrevd på alle bilder.

I tillegg er taggen en inline-tag, så den må legges inn i et blokknivå-tag.