Hoe om beelde met HTML in te voeg

Om beelde op jou webwerf of profiel op sosiale netwerke by te voeg, is `n uitstekende manier om jou bladsy te verbeter. Die HTML-kode om beelde by te voeg is eenvoudig en dit is gewoonlik een van die eerste lesse wat geleer word deur diegene wat dit net begin gebruik het.

conținut

Stappe
Metode 1voeg die prent in
Metode 2opsionele instellings
Wenke
Waarskuwings

stappe

Metode 1
Voeg die prent in

Prent getiteld Voeg prente in met HTML Stap 1

Laai jou prent op Daar is verskeie gratis beeld hosting dienste, soos Picasa Web Albums, Imgur, Flickr of Photobucket. Lees die terme noukeurig. Sommige dienste sal die kwaliteit van jou prent verminder of dit uitvee as baie mense dit sien (aangesien dit die bandwydte van die bediener gebruik).

Sommige blog hosting dienste laat jou toe om jou beelde op te laai deur gebruik te maak van die administrateur gereedskap van die blog.
As jy vir `n bediener betaal het, laai die prent op jou eie webwerf op met `n FTP-diens. Ons beveel aan dat jy `n gids van beelde om jou lêers georganiseer te hou.
As jy `n prent van `n ander webwerf wil gebruik, vra vir toestemming van die skepper. As jy dit kan gebruik, laai die prent af en laai dit dan op na `n beeldwebwerf.

Prent getiteld Voeg prente in met HTML Step 2

Maak jou HTML-lêer oop. Open die HTML-dokument vir die webblad waar die prent vertoon sal word.

As jy probeer om `n prent in `n forum in te voeg, kan jy direk in die inskrywing skryf. Verskeie forums gebruik `n persoonlike stelsel in plaas van HTML. Vra ander forumlede vir hulp as dit nie werk nie.

Prent getiteld Voeg prente in met HTML Stap 3

Begin met die prentetiket. Vind `n punt in die liggaam van jou HTML waar jy `n prent wil plaas. Skryf die etiket hier. Dit is `n leë tag, dit is, dit is enkel, sonder `n afsluitingsetiket. Alles wat jy nodig het om jou beeld te wys, gaan binne die twee hoek hakies.

Prent getiteld Voeg prente in met HTML Step 4

Vind die URL van jou prent. Besoek die webblad waar jou prent aangebied word. Regskliek (beheer - klik op Mac) en kies Kopieer die ligging van die prent. U kan ook op klik Sien prent om die enkel prent op die bladsy te sien en kopieer dan die URL in u adresbalk.

As jy die prent na `n prentgids op jou eie webwerf opgelaai het, skakel dit met / beelde /Ek elnombredetuarchivo. As dit nie werk nie, dan is die prentgids waarskynlik in `n ander gids. Skuif dit na die wortelgids.

Prent getiteld Voeg prente in met HTML Stap 5

Plaas die URL in `n src-kenmerk. Soos u behoort te weet, gaan HTML-eienskappe binne `n merker om veranderinge aan te bring. Die kenmerk src is die verkorte vorm van "bron" en vertel die blaaier waar om te kyk om die prent te vind. Skryf src =" " en plak die URL van die prent tussen die aanhalings. Hier is `n voorbeeld:

Prent getiteld Voeg prente in met HTML Stap 6

Voeg `n alt attribuut by. Tegnies, jou HTML het alles wat jy nodig het om die prent te wys, maar dit is beter om ook `n kenmerk by te voeg alt. Dit vertel die blaaier watter teks om te wys wanneer die prent nie laai nie. Bowendien help dit soekenjins ook om te weet waaroor jou prentjie handel, en kan skermlesers jou beeld vir besoekers met visuele probleme beskryf. Volg hierdie voorbeeld deur die teks binne die aanhalings te verander:

As die prentjie nie belangrik is vir die inhoud van die bladsy nie, bevat dit die alt-kenmerk sonder teks ().

Prent getiteld Voeg prente in met HTML Stap 7

Stoor jou veranderinge Slaan jou HTML-lêer op jou webwerf op. Besoek die bladsy wat jy net gewysig of opgedateer het as jy dit reeds oopgemaak het. Kyk nou na jou prentjie. As dit nie die korrekte grootte het nie, of as jy dit nie vir `n ander rede hou nie, gaan na die volgende afdeling.

Metode 2
Opsionele instellings

Prent getiteld Voeg prente in met HTML Stap 8

Verander die grootte van die prent. Vir die beste resultate, verander die grootte van die prent met behulp van gratis redigering sagteware en laai dan die nuwe weergawe op. Stel die wydte en die hoë met HTML vertel die blaaier om die prent te verminder of te vergroot, wat teenstrydig is tussen blaaiers en oorsaak (skaars) vertoonfoute. As jy `n vinnige en nuttige instelling soek, gebruik hierdie formaat:

(Aantal pixels of "CSS pixels" meer gefokus op fone in HTML5)
of (Persentasie van die afmetings van die webbladsy of persentasie van die HTML-element wat die prent bevat)
As jy slegs een kenmerk (breedte of hoogte) invoer, moet die leser die breedte: hoogteverhouding behou.

Prent getiteld Voeg prente in met HTML Stap 9

Voeg `n beskrywing by Die kenmerk titel Dit kan gebruik word om bykomende kommentaar of inligting oor die prent by te voeg. Byvoorbeeld, jy kan die kunstenaar hier aanhaal. In die meeste gevalle sal hierdie teks verskyn wanneer die besoeker die wyser oor die prentjie slaag.

Prent getiteld Voeg prente in met HTML Deel 2 Stap 3

Maak dit `n skakel. Om `n prent ook `n skakel te maak, plaas `n prentetiket binne die hyperlink-tag. Hier is `n voorbeeld:

wenke

Maak seker dat die URL die lêerformaat van die beelde bevat (.jpg, .jpg, ens.).
GIF beelde werk die beste vir logo`s of spotprente, terwyl JPEG beelde die beste werk vir komplekse beelde, soos foto`s.
In die meeste gevalle is dit die beste om slegs beelde met die .jpg, .jpeg, .jpg of .jpg-formate te gebruik. Waarskynlik word ander formate nie korrek in alle blaaiers vertoon nie.
Hou `n rugsteun van die prent op u rekenaar, net as `n voorsorgmaatreël.

waarskuwings

Moenie `n "hotlink" maak deur die URL van `n ander persoon se webblad in te voeg nie, aangesien dit die bandwydte van jou werf gebruik sonder om nuwe besoeke aan jou bladsy te gee. Benewens die feit dat dit verkeerd is, sal die "warm-gekoppelde" prent verdwyn as die werf waaraan dit gekoppel is verdwyn. As die administrateur van die bladsy sien wat jy doen, kan jy selfs die prentjie wat op jou webwerf verskyn, verander.

Deel op sosiale netwerke:

Verwante