Afegiu una imatge amb HTML

Autora: Christy White
Data De La Creació: 4 Ser Possible 2021
Data D’Actualització: 1 Juliol 2024
Anonim
The Complete Guide to Google Forms - Online Survey and Data Collection Tool!
Vídeo: The Complete Guide to Google Forms - Online Survey and Data Collection Tool!

Content

Afegir imatges al vostre lloc web o al perfil de la xarxa social és una manera excel·lent de vestir la vostra pàgina web. HTML (HyperText Markup Language) té moltes funcions per crear pàgines web, però afortunadament el codi que necessiteu per afegir imatges no és massa difícil.

Per trepitjar

Mètode 1 d'1: inserir imatges amb HTML

  1. Pengeu la vostra imatge a un lloc web d'allotjament gratuït, com ara Photobucket o TinyPic, que permeti enllaços en directe. L’enllaç en calent permet un enllaç directe d’una imatge al servidor del lloc web; alguns proveïdors ho han prohibit perquè l'enllaç en calent utilitza el seu ample de banda i ocupa espai als seus servidors.
    • Si teniu un compte d’allotjament de pagament, pengeu les imatges directament al servidor on es troba el lloc web. Això sempre és més fiable que un lloc gratuït i no ha de ser gens car.
  2. Obriu un document nou en un editor de text (per exemple,, Bloc de notes / Bloc de notes) o obriu la pàgina del vostre lloc web / perfil on podeu canviar el codi HTML directament.
  3. Comenceu amb el fitxer img etiqueta. El img l’etiqueta està buida, és a dir, no cal fer cap etiqueta de tancament Tanmateix, per a la validació XHTML, encara podeu posar un espai i una barra inclinada al davant més gran que signe.
    • img />
  4. Hi ha molts atributs disponibles, però només cal un:src. Aquesta és la ubicació / adreça, o també l’URL, de la vostra imatge.
    • img src = "URL de la imatge" />
  5. A continuació, cal alt afegir atribut. Es mostra un text alternatiu, en cas que la imatge no es pugui carregar. Aquest també és un servei per a persones amb discapacitat visual que utilitza lectors de pantalla.
    • Si passeu el cursor per sobre d’una imatge, aquest text també es mostra com a descripció d’informació, però només és el cas a Internet Explorer. La solució que funciona amb tots els navegadors (Firefox et al.) ho és títol atribut a utilitzar a més de alt. (Podeu ometre aquest últim si no voleu que la imatge tingui una descripció emergent.)

Com un exemple:img src = "URL de la imatge" alt = "Per si de cas" title = "Tooltip" />


  1. Ara podeu indicar la mida de la imatge amb el fitxer alçada i amplada i especificant els píxels o un percentatge. Tingueu en compte que canviar la mida d’aquesta manera només canvia la mida de la vista, no la mida de la imatge en si. Per escurçar el temps de càrrega d’una imatge, és millor, sobretot amb imatges grans, redimensionar-les per endavant amb el programari d’edició de fotos o amb un servei en línia com PicResize.com.
    • img src = "URL de la imatge" alt = "Per si de cas" title = "Tooltip" height = "50%" width = "50%" />
    • img src = "URL de la imatge" alt = "Per si de cas" title = "Tooltip" height = "25px" width = "50px" />

Consells

  • El valor d’aquests atributs es dóna en píxels o bé en percentatge, entre l’1 i el 100%.
  • La imatge es pot col·locar a qualsevol lloc de la pàgina web, utilitzant els diversos atributs de format, com ara part superior, inferior, central, dreta, esquerra, etc.
  • L'atribut hspace s'utilitza per inserir espai horitzontal a l'esquerra i a la dreta d'una imatge, mentre que l'atribut vspace s'utilitza per fer espai a la part superior i inferior de les imatges i altres objectes.
  • No us deixeu gaudir massa amb les imatges. Sembla desordenat i poc professional.
  • Les imatges GIF són adequades per a logotips o dibuixos animats, però aquest tipus de fitxer és menys adequat per a fotos i altres imatges amb molts colors.
    • Les imatges GIF només admeten colors de 8 bits amb un màxim de 256 colors per a una imatge. Per tant, és d’esperar que la reproducció d’una il·lustració o fotografia en color de 16 o 24 bits no sigui tan bona.
    • Les imatges GIF també admeten transparència. És possible una mica de transparència, cosa que significa que es pot fer transparent un color.
    • L'entrellaçat també és compatible amb imatges GIF, cosa que significa que el visitant del lloc tindrà una idea de com serà la imatge abans de carregar-la completament.
    • El format GIF també admet animacions.
  • Assegureu-vos que l'URL indiqui el format de fitxer de la imatge (.webp .gif, etc.).

Advertiments

  • No feu enllaços directes