Wkuno

Hvordan sette inn bilder med HTML

Legge bilder til din nettside eller sosiale nettverk profil er en fin måte å gran opp siden. HTML (HyperText Markup Language) kommer med mange webutvikling funksjoner, men den koden som kreves for å legge til bilder er ganske grei.

Trinn

Hvordan sette inn bilder med HTML. Last opp bildet til en gratis image hosting nettsted, for eksempel photobucket eller TinyPic, som gjør at hot-linking.
Hvordan sette inn bilder med HTML. Last opp bildet til en gratis image hosting nettsted, for eksempel photobucket eller TinyPic, som gjør at hot-linking.

Sette inn bilder med HTML

  1. 1
    Last opp bildet til en gratis image hosting nettsted, for eksempel photobucket eller TinyPic, som gjør at hot-linking. Hot-linking er knytte til bildet direkte fra verten nettsted server, og noen nettsteder har forbudt det fordi hot-linking bruker deres båndbredde og tar opp plass på sine servere.
    • Hvis du har en betalt web hosting konto, laste opp bildet ditt til den verten stedet. Det vil være mer pålitelig enn et fritt område.
  2. 2
    Åpne et nytt dokument i en tekst editor (e. G., Notisblokk) eller side på ditt nettsted / profil der du kan endre HTML.
  3. 3
    Begynn med img-taggen. Den img tag er tomme, hvilket betyr at det ikke trenger en avsluttende koden. Men for XHTML gyldighet, kan du legge til et mellomrom og skråstrek før den større-enn-tegn.
    • <img />
  4. 4
    Det er mange tilgjengelige attributter, men bare en er helt nødvendig: src. Dette er plasseringen, eller URL, i bildet.
    • <img src="VVJMIG9mIGltYWdl" />
  5. 5
    Deretter bør du legge alt-attributtet. Dette angir alternativ tekst, i tilfelle bildet ikke lastes. Den alternative teksten er også lest for blinde som bruker skjermlesere.
    • Hvis du holder markøren over bildet, vil den alternative teksten vises i et verktøytips, men kun i Internet Explorer. Den kryss-nettleser løsning (fungerer i Firefox et al.) Er å bruke tittelen attributt i tillegg til alt. (La dette ut hvis du ikke vil at bildet skal ha et verktøy tips.)
    • For eksempel:
      <img src="VVJMIG9mIGltYWdl" alt="Just i case" title="Tooltip"/>
  6. 6
    Nå kan du eventuelt angi størrelsen på bildet, ved hjelp av høyde og bredde attributter, og angi hvilke piksler eller prosent. Vær oppmerksom på at ved å endre størrelsen som dette, du bare endrer størrelsen at bildet vises. Nettleseren laster fortsatt den faktiske størrelsen på bildet, så hvis du har et unødvendig stort bilde, er det bedre å re-størrelse bruker den et fotoredigeringsprogram eller PicResize.com snarere enn bare å endre skjermstørrelsen.
    • <img src="VVJMIG9mIGltYWdl" alt="Just i case" title="Tooltip" height="50%" width="50%" />
    • <img src="VVJMIG9mIGltYWdl" alt="Just i case" title="Tooltip" height="25px" width="50px" />

Tips

  • Verdien for disse attributtene er enten en positiv pixel verdi eller en prosentvis verdi 1-100 prosent.
  • Bildet eller bilde kan plasseres hvor som helst i nettside med en justere attributt som topp, bunn, midten, høyre, venstre osv.
  • Den hspace attributtet brukes til å sette inn en buffer på horisontal plass på venstre og høyre side av et bilde, hvor som vspace attributtet brukes til å sette inn en buffer på vertikale avstanden mellom toppen og bunnen av bildet og andre objekter.
  • Ikke gå over med bilder. Det ser bare rotete og uprofesjonelt.
  • For logoer eller tegneserier GIF-bilder er gode, mens for komplekse bilder, for eksempel fotografier JPEG-bilder er bra.
    • GIF-bilder støtter bare 8-bits farger for maksimalt 256 farger med i bildet. Så viss grad av tap er uunngåelig når som representerer ekte fargebilder, for eksempel fotografier.
    • GIF-bilder også støtter gjennomsiktighet. En bit av åpenhet er tillatt som betyr at én farge kan settes til å være gjennomsiktig.
    • Interlacing er også støttet av GIF-bilder som betyr at interlacing effekten lar brukeren få en idé om hva en avbildes ser ut før hele bildet er lastet ned.
    • GIF-formatet støtter også animasjon.

Advarsler