Wku

Hur man infogar bilder med HTML

Lägga bilder till din hemsida eller sociala nätverk profil är ett bra sätt att piffa upp din sida. HTML (HyperText Markup Language) kommer med många funktioner webbutveckling, men den kod som krävs för att lägga till bilder är ganska okomplicerad.

Steg

Hur man infogar bilder med HTML. Ladda upp din bild till en fri bild fientlig webbplats, t.ex. photobucket eller TinyPic, som låter varm-länkning.
Hur man infogar bilder med HTML. Ladda upp din bild till en fri bild fientlig webbplats, t.ex. photobucket eller TinyPic, som låter varm-länkning.

Infoga bilder med HTML

  1. 1
    Ladda upp din bild till en fri bild fientlig webbplats, t.ex. photobucket eller TinyPic, som låter varm-länkning. Hot-länkning är att länka till bilden direkt från den mottagande webbplats server, vissa webbplatser har förbjudit det eftersom hot-länka använder sin bandbredd och tar upp utrymme på sina servrar.
    • Om du har en betald webbhotell konto, ladda upp din bild till den värden istället. Det kommer att bli mer tillförlitlig än en gratis webbplats.
  2. 2
    Öppna ett nytt dokument i en textredigerare (e. G., Notepad) eller sida på din hemsida / profil där du kan ändra HTML.
  3. 3
    Börja med img-taggen. Img-taggen är tom, vilket betyder att den inte behöver en sluttagg. Men för XHTML giltighet, kan du lägga till ett mellanslag och snedstreck före större-än-tecken.
    • <img />
  4. 4
    Det finns många tillgängliga attribut, men bara en är absolut nödvändigt: src. Detta är platsen, eller URL, din image.
    • <img src="VVJMIG9mIGltYWdl" />
  5. 5
    Därefter ska du lägga till alt-attributet. Detta anger alternativ text, om bilden inte laddas. Den alternativa texten läses också till blinda besökare som använder skärmläsare.
    • Om du håller muspekaren över bilden, kommer den alternativa texten visas i ett verktygstips, men bara i Internet Explorer. The cross-browser-lösning (fungerar i Firefox et al.) Är att använda titel-attribut förutom alt. (Lägg ut det här om du inte vill att bilden ska ha ett verktygstips.)
    • Till exempel:
      <img src="VVJMIG9mIGltYWdl" alt="Just i case" title="Tooltip"/>
  6. 6
    Nu kan du valfritt ange storleken på din bild, med hjälp av höjd och attribut bredd och anger vilka pixlar eller procent. Observera att genom att ändra storleken så här, du bara ändrar storleken att bilden visas. Webbläsaren laddar fortfarande den faktiska storleken på bilden, så om du har en onödigt stor bild, är det bättre att ändra storlek med hjälp av ett fotoredigeringsprogram eller PicResize.com snarare än att bara ändra skärmstorleken.
    • <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

  • Värdet för dessa attribut är antingen ett positivt pixel värde eller ett procentvärde 1-100 procent.
  • Bilden eller bilden kan placeras var som helst på webbsidan med en align-attribut såsom topp, botten, mitten, höger, vänster etc.
  • Den hspace attributet används för att infoga en buffert av horisontellt utrymme till vänster och höger om en bild, där som vspace attributet används för att infoga en buffert av vertikalt utrymme mellan toppen och botten av bilden och andra ändamål.
  • Gå inte överbord med bilder. Det ser bara rörigt och oprofessionellt.
  • För logotyper eller tecknade serier GIF-bilder är bra, medan för komplexa bildspråk såsom fotografier JPEG-bilder är bra.
    • GIF-bilder stöder endast 8-bitars färg för högst 256 färger med i bilden. Så en viss grad av förlust är oundviklig när de representerar sanna färgbilder exempelvis fotografier.
    • GIF-bilder stödjer också transparens. En bit av öppenhet är tillåtet vilket innebär att en färg kan ställas in för att vara transparent.
    • Interlacing stöds också av GIF-bilder, vilket betyder att interlacing effekt tillåter en användare att få en uppfattning om vad ett avbildat ser ut innan hela bilden har hämtat.
    • GIF format stöder också animering.

Varningar