Legg til et bilde med HTML

Forfatter: Christy White
Opprettelsesdato: 4 Kan 2021
Oppdater Dato: 1 Juli 2024
Anonim
15: How to Insert Images Using HTML and CSS | Learn HTML and CSS | HTML Tutorial | Basics of CSS
Video: 15: How to Insert Images Using HTML and CSS | Learn HTML and CSS | HTML Tutorial | Basics of CSS

Innhold

Å legge til bilder på nettstedet ditt eller profilen til det sosiale nettverket er en utmerket måte å kle på websiden din. HTML (HyperText Markup Language) har mange funksjoner for å lage websider, men heldigvis er ikke koden du trenger for å legge til bilder, for vanskelig.

Å trå

Metode 1 av 1: Sette inn bilder med HTML

  1. Last opp bildet ditt til et gratis hosting-nettsted, for eksempel Photobucket eller TinyPic, som tillater hot linking. Hot-linking tillater en direkte lenke av et bilde til nettserveren; noen leverandører har utestengt dette fordi hot-linking bruker båndbredden og tar plass på serverne sine.
    • Hvis du har en betalt hostingkonto, kan du laste opp bildene direkte til serveren der nettstedet ditt er plassert. Dette er alltid mer pålitelig enn et gratis nettsted og trenger ikke å være dyrt i det hele tatt.
  2. Åpne et nytt dokument i en tekstredigerer (f.eks., Notisblokk / Notisblokk) eller åpne siden på nettstedet / profilen din der du kan endre HTML-koden direkte.
  3. Start med img stikkord. De img taggen er tom, noe som betyr at det ikke er behov for en lukkemerke. For XHTML-validering kan du likevel sette et mellomrom og en skråstrek foran den større enn skilt.
    • img />
  4. Det er mange tilgjengelige attributter, men bare ett er nødvendig:src. Det er plasseringen / adressen, eller også URL-en, til bildet ditt.
    • img src = "URL for image" />
  5. Neste må du alt legg til attributt. Dette viser en alternativ tekst i tilfelle bildet ikke lastes inn. Dette er også en tjeneste for synshemmede som bruker skjermlesere.
    • Hvis du holder markøren over et bilde, vises denne teksten også som en verktøytips, men dette er bare tilfelle i Internet Explorer. Løsningen som fungerer med alle nettlesere (Firefox et al.) er til det tittel attributt å bruke i tillegg til alt. (Du kan utelate sistnevnte hvis du ikke vil at bildet skal ha en verktøytips.)

Som et eksempel:img src = "URL for image" alt = "Bare i tilfelle" title = "Tooltip" />


  1. Nå kan du indikere størrelsen på bildet med høyde og bredde attributt, og ved å spesifisere piksler eller en prosentandel. Merk at endring av størrelse på denne måten bare endrer størrelsen på visningen, ikke størrelsen på selve bildet. For å forkorte innlastingstiden til et bilde, er det bedre, spesielt med store bilder, å endre størrelsen på dem på forhånd med bilderedigeringsprogramvare eller med en online tjeneste som PicResize.com.
    • img src = "URL for image" alt = "Bare i tilfelle" title = "Tooltip" height = "50%" width = "50%" />
    • img src = "URL for image" alt = "Bare i tilfelle" title = "Tooltip" height = "25px" width = "50px" />

Tips

  • Verdien for disse attributtene er enten gitt i piksler, eller i prosent, fra 1-100%.
  • Bildet kan plasseres hvor som helst på websiden, ved hjelp av de forskjellige formateringsattributtene som topp, bunn, midt, høyre, venstre etc.
  • Hspace-attributtet brukes til å sette inn horisontalt mellomrom til venstre og høyre for et bilde, mens vspace-attributtet brukes til å gi plass øverst og nederst på bilder og andre objekter.
  • Ikke unn deg for mye med bilder. Det ser rotete og uprofesjonelt ut.
  • GIF-bilder passer bra til logoer eller tegneserier, men denne filtypen er mindre egnet for bilder og andre bilder med mange farger.
    • GIF-bilder støtter bare 8-biters farger med maksimalt 256 farger for et bilde. Det er derfor å forvente at reproduksjonen av en 16 eller 24 bit fargeillustrasjon eller et bilde ikke vil være like bra.
    • GIF-bilder støtter også gjennomsiktighet. En bit gjennomsiktighet er mulig, noe som betyr at en farge kan gjøres gjennomsiktig.
    • Interlacing støttes også av GIF-bilder, noe som betyr at besøkende på nettstedet får en ide om hvordan bildet vil se ut før det er fullstendig lastet.
    • GIF-formatet støtter også animasjon.
  • Forsikre deg om at URL-adressen angir filformatet til bildet (.webp .gif etc).

Advarsler

  • Ikke Hotlink!