Tilføje billeder til din hjemmeside eller social networking profil er en fantastisk måde at fikse op din side. HTML (HyperText Markup Language) kommer med mange webudvikling funktioner, men den kode, der kræves for at tilføje billeder er forholdsvis ligetil.
Steps
Indsættelse af billeder med HTML
- 1Upload dit billede til en gratis billede hosting hjemmeside, såsom Photobucket eller TinyPic, der tillader hot-linking. Hot-sammenkædning er at linke til billedet direkte fra værten hjemmeside server, og nogle hjemmesider har forbudt det, fordi hot-linking bruger deres båndbredde og optager plads på deres servere.
- Hvis du har en betalt web-hosting-konto, uploade dit billede til den host i stedet. Det vil være mere pålidelige end en gratis hjemmeside.
- 2Åbn et nyt dokument i en tekst editor (e. G., Notesblok), eller den side på din hjemmeside / profil, hvor du kan ændre HTML.
- 3Begynd med img tagget. Det img tag er tom, hvilket betyder at den ikke har brug for en afsluttende tag. Men for XHTML gyldighed, kan du tilføje et mellemrum og skråstreg før større end-tegn.
- <img />
- 4Der er mange tilgængelige attributter, men kun den ene er absolut nødvendigt: src. Det er den placering, eller en URL, af dit billede.
- <img src="VVJMIG9mIGltYWdl" />
- 5Dernæst bør du tilføje attributten alt. Dette angiver alternativ tekst, hvis billedet ikke indlæses. Den alternative tekst også læse for blinde besøgende, der bruger skærmlæsere.
- Hvis du holder markøren over billedet, vil den alternative tekst vises i et værktøjstip, men kun i Internet Explorer. Den cross-browser løsning (virker i Firefox et al.) Er at bruge titlen attribut foruden alt. (Lad det ud, hvis du ikke ønsker, at billedet skal have et værktøjstip.)
- For eksempel:
<img src="VVJMIG9mIGltYWdl" alt="Just i case" title="Tooltip"/>
- 6Nu kan du eventuelt angive størrelsen på dit billede, ved hjælp af højde og bredde attributter, og specificere de pixels eller procent. Bemærk, at ved at ændre størrelsen som dette, er du kun ændre størrelsen, at billedet vises. Browseren stadig indlæser den faktiske størrelse af billedet, så hvis du har et unødigt stort billede, er det bedre at re-size det ved hjælp af et fotoredigeringsprogram program eller PicResize.com snarere end blot at ændre skærmstø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
- Værdien for disse attributter er enten en positiv pixelværdi eller en procentdel værdi 1-100 procent.
- Billedet eller billede kan placeres hvor som helst i den webside med et justere attribut såsom top, bund, midten, højre, venstre osv.
- Den hspace attribut anvendes til at indsætte en buffer af horisontal plads på venstre og højre side af et billede, hvor som vspace attribut anvendes til at indsætte en buffer lodret mellem toppen og bunden af billedet og andre genstande.
- Må ikke gå overbord med billeder. Det bare ser rodet og uprofessionelt.
- For logoer eller tegnefilm GIF-billeder er gode, mens der for komplekse billedsprog såsom fotografier JPEG-billeder er gode.
- GIF-billeder kun støtte 8-bit farver for højst 256 farver med i billedet. Så en vis grad af tab er uundgåeligt, når der repræsenterer ægte farvebilleder såsom fotografier.
- GIF-billeder understøtter også gennemsigtighed. Én bit gennemsigtighed er tilladt, hvilket betyder, at en farve kan indstilles til at være gennemsigtig.
- Interlacing er også støttet af GIF-billeder, hvilket betyder sammenfletning effekten giver brugeren mulighed for at få en idé om, hvad et afbildet ser ud, før hele billedet er hentet.
- GIF-format understøtter også animation.