Cómo insertar una imagen en html | la forma más sencilla!

Поделиться
HTML-код
  • Опубликовано: 11 сен 2024
  • Como insertar una imagen en html. A continuación les dejo el enlace para que lo utilicen e inserten sus imágenes en html.
    www.w3schools..... En esa página encontrarán todos los enlaces que se pueden utilizar para poner imágenes en html.
    Insertar una imagen en html es simplemente copiar y pegar un código que debes poner en tu documento de html.
    Pasos para poner una imagen en html:
    1:08 - Descargamos imagen en formato png. Puedes usar cualquier formato como: jpg, gif, png, ect.
    1:26 - Escribimos el nombre de la imagen en nuestro documento de html.
    1:58 - Cambiar las dimensiones de la imagen.
    Tipos de Imagenes en html.
    Existen varios formatos que son los más usados para poner imágenes en html. Los formatos de imágenes más usados son jpg, png y gif. Cada uno tiene su particularidad. El formato jpg las imágenes tienen mayor calidad. En cambio una imagen png no tiene tanto calidad pero es mucho más livianaY se pueden utilizar sin fondo. Es decir hay una transperencia en su background, no sale el color blanco.
    Las imágenes gif son mayormente imágenes en movimiento. aunque no todas las imágenes gif estan en movimiento. Pero este es el unico formato que admite imágenes con movimiento.
    Cuando hablamos de la etiqueta image source por sus abreviaciones.
    img src. Le estamos diciendo al documento de html que busque en mi computadora esa imagen con el nombre que yo le asigne. En nuestro ejemplo fue mario.png
    Cuando ponermos una imagen en html, también podemos ponerle dimensiones personalizadas. Donde width es el ancho y height es la altura de mi imagen.
    Si quieres aprender html te recomiendo, este sitio web:
    www.w3schools....
    Video Más completo sobre insertar imagenes en HTML.
    • Cómo insertar imágenes...
    Otros video de este canal
    • Cómo seleccionar todo ...
    • Como hacer un indice e...

Комментарии • 177

  • @armandosiliceolaffont7913
    @armandosiliceolaffont7913 2 года назад +103

    Hay que aclarar que la imagen debe estar en la misma carpeta que el documento o que el editor de código este en la carpeta correcta, soy un total novato jeje pero me sirvió, muchas gracias :D

    • @patpechoscarguillermo493
      @patpechoscarguillermo493 2 года назад +8

      Literal acabas de comentar hace una hora y me salvaste, hice lo que dice tu comentario y salio la imagen y yo pensando que era el texto que hice mal

    • @armandosiliceolaffont7913
      @armandosiliceolaffont7913 2 года назад +3

      @@patpechoscarguillermo493 Que bueno que te sirvió amigo :)

    • @NeverKraken
      @NeverKraken 2 года назад

      @@armandosiliceolaffont7913 estaba buscando lo mismo, muchas gracias KSJKD

    • @YamiRulo
      @YamiRulo 2 года назад +2

      amigo gracias, llego mucho mirando por que no podia tener acceso a la imagen y la ubique en la misma carpeta y hay si pude! gracias

    • @s.m.i.t.a3279
      @s.m.i.t.a3279 2 года назад +3

      Eres un grande, gracias por aclarar eso;D

  • @fannyhernandez912
    @fannyhernandez912 4 года назад +9

    Gracias
    Fue de mucha ayuda vi demaciados tutoriales de comandos de como insertar imagenes y solo el suyo me funciono😊

  • @meca9486
    @meca9486 3 года назад +11

    amigo voy a ser sincero...
    me re salvaste de mi examen, te amo muchisimas gracias de verdad enserio :D habia visto tantos tutoriales y el unico buen tutorial es el tuyo

  • @marcelofmaturana
    @marcelofmaturana 4 года назад +12

    Excelente video!!, me ayudó mucho en mis clases de informática.

  • @santiagoromeropena2895
    @santiagoromeropena2895 3 года назад +5

    me salvaste la vida bro, con la explicación de .png o .jpg gracias :'3

  • @jero-cav0966
    @jero-cav0966 2 года назад

    GRACIAS!!!! Muchas gracias!! Te lo agradezco ya me estaba empezando a desesperar te lo agradezco muchisimo y aqui tu like!!!!

  • @javierdominguez2065
    @javierdominguez2065 6 лет назад +17

    Tengo un problema, hice todo el procedimiento y puse el tipo de imagen (la cual era .jpg) pero cuando abrí la página de HTML en vez de que me aparezca la imagen me aparecía un cuadro pequeño con un taché

    • @mineesp6159
      @mineesp6159 5 лет назад +2

      igual que a mi :'v

    • @CreadoresenFacebook
      @CreadoresenFacebook 5 лет назад

      A veces sucede eso cuando la ruta del archivo esta mal,o la memoria caché del navegador aun no actualiza..

    • @cristopherbarrientos5889
      @cristopherbarrientos5889 5 лет назад +1

      Tienes que ver las propiedades de la imagen, si en realidad es PNG o JPG Saludos!

  • @bayronduran3535
    @bayronduran3535 4 года назад +7

    Buen video y directo, me ayudo muchisimo en mi tarea, gracias!🇭🇳

    • @AVANCEIT
      @AVANCEIT  4 года назад +1

      En este video explico todo lo que necesitas saber sobre insertar imágenes en HTML
      VIDEO NUEVO Como insertar imágenes en HTML
      ruclips.net/video/NWil5bx8FQA/видео.html

  • @patriayvida4209
    @patriayvida4209 2 года назад +1

    Saludos hermano. Gracias por compartir tus conocimientos con nosotros. Exitos!

  • @alondramartinez215
    @alondramartinez215 5 месяцев назад

    Eres el primero que me lo explica bien gracias
    (*-*)
    /. >❤

    • @AVANCEIT
      @AVANCEIT  4 месяца назад

      Gracias que bueno!

  • @joseulisesrojassantiago515
    @joseulisesrojassantiago515 3 года назад +1

    Me ayudo mucho

  • @ochouve1723
    @ochouve1723 4 года назад +39

    Si lo van a compartir no sirve, tienen que poner en lugar de la dirección (C:archivos/ blablaba...) copiar la url de la imagen en google sin descargar y ponerla en lugar de eso e irá perfecto, ya que si ponen una imagen descargada al quien le compartes no lo verá, porque es sacado de tus archivos.

  • @carlosandreseraso1236
    @carlosandreseraso1236 5 лет назад +18

    que hago me aparece un recuadro en blanco y no se mira la imagen

    • @foxel__
      @foxel__ 4 года назад +4

      Lo que tienes que hacer es guardar la imagen en la carpeta del proyecto

    • @fabiogomez4906
      @fabiogomez4906 4 года назад

      @@foxel__ como sería el comando?

    • @foxel__
      @foxel__ 4 года назад

      @@fabiogomez4906

    • @tenguz9970
      @tenguz9970 3 года назад +3

      indica al editor de texto donde se encuentra la carpeta y o el lugar en donde este la imagen asi con el codigo ese que te enseñan img src="carpeta donde este"/ " nombre de la imagen" recuerda siempre indicarle al editor texto donde se encuentra la imagen luego al lado el nombre saludos!

  • @kerensofia7617
    @kerensofia7617 3 года назад

    Gracias me salvaste de perder informatica

  • @tomasherrera985
    @tomasherrera985 2 года назад

    pooooor fin alguien que explica claro y diafano

  • @heatbillies
    @heatbillies 3 года назад +1

    Gracias, buen video! :D
    Me sirvio mucho...

  • @marcelicorteslarios1769
    @marcelicorteslarios1769 6 лет назад +43

    A mí no me funciona cuando ingreso la imagen, me aparece es un cuadro pequeño con una x en el medio, será que estoy haciendo algo mal

    • @BenSaga280
      @BenSaga280 5 лет назад +4

      no te preocupes lo que pasa es que debes colocar el .jpg o .png y cuando los colocar ahi aparece la imagen.
      y si aun no te funciona debes de ver el codigo a ver si esta bien (=

    • @tqxhiro5210
      @tqxhiro5210 4 года назад +2

      @@BenSaga280 que codigo?

    • @sergiogabriel9275
      @sergiogabriel9275 4 года назад

      @@tqxhiro5210 lo que puso el señor del vídeo lo de

    • @jonathanfrancosantana2905
      @jonathanfrancosantana2905 3 года назад

      No tienes activo el internet o el formato no es compatible

    • @tenguz9970
      @tenguz9970 3 года назад +1

      hola xd me paso recuerda tener una carpeta en donde tengas todas las imagenes junto con tus archivos html index y css con una carpeta creada por ti mismo image o imagenes como quieras pero recuerda tener siempre organizado todo , indica al editor de texto donde se encuentra la carpeta y o el lugar en donde este la imagen asi con el codigo ese que te enseñan img src="carpeta donde este"/ " nombre de la imagen" recuerda siempre indicarle al editor texto donde se encuentra la imagen luego al lado el nombre saludos!

  • @ilayfutbol
    @ilayfutbol 4 года назад +2

    Muchas Gracias BREOOO

  • @katherinflorez2981
    @katherinflorez2981 3 года назад

    GRACIASSSSS
    ME SALVOO LLEVABA COMO 2 HORAS PERO NO ME DABA GRACIASSSSSSS

  • @danielnavarro8373
    @danielnavarro8373 2 года назад

    Gracias bro buen video

  • @evelioflorez6522
    @evelioflorez6522 2 года назад +1

    existe alguna forma de llevar el tamaño de la imagen al de un pixel? si es así, explícame, por favor.

  • @abi5133
    @abi5133 3 года назад

    Gracias man :D!! Me sirvió mucho guardar en el escritorio

  • @ingsmannymlml2104
    @ingsmannymlml2104 6 лет назад +8

    Buen video gracias
    Amigo como hago para poner unas 30 imagenes pero que esten formadas y ellas cambian de pocion osea q cambien de lugares una con la otra gracias espero me ayudes solo quiero saber el codigo para moverlas

  • @GloriSprks
    @GloriSprks 4 года назад +5

    Muy bien explicado el vídeo, directo y fácil de entender!!
    Aunque en mi equipo con el volumen al 100% apenas se te escucha, el audio es muy bajo.
    Utilizo el editor online de HTML y no consigo añadir la imagen. He seguido los pasos tal y como indicas, foto de Mario incluida, la guardo en el escritorio, en .png, y nada.
    ¿Crees que el fallo estar en el editor?

    • @DavidCaos
      @DavidCaos 4 года назад +2

      conseguiste la solucion:(?

    • @GloriSprks
      @GloriSprks 4 года назад +1

      @@DavidCaos no...no lo conseguí

    • @DavidCaos
      @DavidCaos 4 года назад +1

      @@GloriSprks yosi lo quieres :v?

    • @GloriSprks
      @GloriSprks 4 года назад +1

      @@DavidCaos si, si me la puedes pasar

    • @vv-kj9kt
      @vv-kj9kt 4 года назад

      @@DavidCaosCuál es brother yo uso CODEMASTER en ios y cada que añado una imagen se me desaparece todo el código

  • @tifanymendez2908
    @tifanymendez2908 3 года назад +3

    Hola disculpa a mi la imagen no se me muestra o sea me sale como si estuviera ahí pero no se muestra que por que es ?? que hago?

    • @nykom
      @nykom 3 года назад

      me pasa lo mismo no tengo ni idea

  • @hayshidominguez3364
    @hayshidominguez3364 2 года назад

    Buen video bro, gracias

  • @jaykoavila1121
    @jaykoavila1121 4 года назад

    hermano al fin entendi esto, de verdad bro muchisimas gracias

  • @francheskaangelinavasquezo559
    @francheskaangelinavasquezo559 6 лет назад +3

    muchas gracias me fue de mucha ayuda

    • @AVANCEIT
      @AVANCEIT  6 лет назад

      Siempre a la orden! Saludos y gracias a ti.

  • @yi3184
    @yi3184 5 лет назад +6

    buenas no me sale la imagen solo un recuadro blanco diganme si estoy haciendo algo mal esta es mi ruta

    • @AVANCEIT
      @AVANCEIT  5 лет назад +4

      Necesitas tener la imagen y el documento html en la misma carpeta. Intenta quitarle umaru.png a ver que tal te va.

    • @AVANCEIT
      @AVANCEIT  5 лет назад

      También revisa si estas poniendo el formato de la imagen correcto. (jpg, png, gif, etc.)

  • @staliiartistry
    @staliiartistry 2 года назад

    Gracias pa 🧐

  • @jesusandresrodriguezvargas3568
    @jesusandresrodriguezvargas3568 4 года назад +2

    Bro no me deja ya intente de todas las formas pero sigue sin dejarme me aparece un cuadrito con una X

  • @justburrrito6216
    @justburrrito6216 2 года назад

    Muchas gracias

  • @antonydanieloceguedaruelas6539
    @antonydanieloceguedaruelas6539 4 года назад

    Muchas gracias, me has ayudado un montón :D

  • @N0TLIK3
    @N0TLIK3 3 года назад

    Me funciono muchas gracias

  •  4 года назад

    muy bueno

  • @josecarloszamoragomez9529
    @josecarloszamoragomez9529 4 года назад

    gracias bro al fin me salio me suscribo

    • @AVANCEIT
      @AVANCEIT  4 года назад

      Gracias, y que bien que te sirviera.

  • @jeremiascardenas5058
    @jeremiascardenas5058 2 года назад

    "Eso es fácil y sencillo"
    Lo dijo con una voz good, debe ser locutor

  • @brianayala2005
    @brianayala2005 2 года назад

    Muchas gracias!!!

  • @carolestefaniherrerarodrig5032
    @carolestefaniherrerarodrig5032 3 года назад

    Gracias me ayudaste

  • @DomaMasterOfFlashGames
    @DomaMasterOfFlashGames Год назад

    gracias mi estimado me pidieron de tarea de hacer un sitio web con 5 presidentes de mi pais y no pedian imagenes pero le pondre para tener la mejor calificacion

  • @mangekyou6439
    @mangekyou6439 4 года назад

    buen video bro

  • @PlumpyBunny
    @PlumpyBunny 2 года назад

    Ya lo logré :D
    Pero tuve que copiar directamente la dirección de la imagen desde el buscador

  • @adanemilmartinezmercedes5121
    @adanemilmartinezmercedes5121 5 лет назад

    GRACIAS BRO ME FUNCIONO AL EXITO

  • @enzoterol9583
    @enzoterol9583 6 лет назад

    no sabia que residente hacia video tutoriales

  • @EleazarCrucesOchoa
    @EleazarCrucesOchoa 6 лет назад +1

    Hola amigo, como inserto una imagen dentro del bloc de notas?

  • @joseandreylopezmendoza2649
    @joseandreylopezmendoza2649 6 лет назад

    muchas gracias fue de mucha ayuda

    • @AVANCEIT
      @AVANCEIT  6 лет назад

      que bueno me alegra jose

  • @andresvegaasencio1178
    @andresvegaasencio1178 5 лет назад +2

    muy bueno...
    pero no veo que va despues de Style

  • @juliomendoza8419
    @juliomendoza8419 3 года назад

    Hola pero cuendo lo pongo ya en una pagina web no sale la imagen
    en el src sale amarillo me puedes ayudar?

  • @headlook6666
    @headlook6666 4 года назад +4

    a mi no me sale bien:
    cuando pongo la imegen me sale como una especie de foto archivo

    • @lncaste587
      @lncaste587 4 года назад +3

      Eso es por que pusiste mal la URL.
      Te recomiendo que pongas TODA la url, por ejemplo: "c:/escritorio/Mario.png"

    • @KSOR08
      @KSOR08 4 года назад

      a mi me pasa lo mismo

    • @AVANCEIT
      @AVANCEIT  4 года назад

      Otra recomendación seria poner todo dentro de una misma carpeta.

    • @cletomedel8228
      @cletomedel8228 4 года назад

      @@lncaste587 no me funciono haci :(

    • @lncaste587
      @lncaste587 4 года назад

      @@cletomedel8228 en el nombre de tu imagen no utilizes espacios, ojalá te funcione

  • @arielbenitez1707
    @arielbenitez1707 4 года назад

    Lo mejor es que lo explico 800 beses mejor que mi profesor

  • @melgozagarciamarioandres6432
    @melgozagarciamarioandres6432 3 года назад

    a mi no me carga la imagen me aparece que si esta pero falta cargarla me pueden explicar por que

  • @angielisethriveragallego2778
    @angielisethriveragallego2778 4 года назад

    MUCHAS GRACIASSSS

  • @obitouchiha9034
    @obitouchiha9034 5 лет назад +2

    y como le ago en caso de que use un Servidor Virtual LINUX ??? un vps.
    como puedo mover la imagen al Vps para poder aser ese paso ??

    • @jose26829
      @jose26829 5 лет назад

      podrias descargarlo, subirlo a mediafire, mega o algo de eso

    • @obitouchiha9034
      @obitouchiha9034 5 лет назад

      @@jose26829 hola ya resolvi por ftp se trasladan las imagenes o videos a usar.

  • @heidyjohannaesparzadiaz4889
    @heidyjohannaesparzadiaz4889 3 года назад

    Donde esta el código q usas en el video para copiarlo?

  • @rockstaraliasrosca5469
    @rockstaraliasrosca5469 Год назад

    yo estoy practicando en mi bloc de notas inserte la imagen cuando la abro en mi computadora funciona pero intenté abrirlo en un celular para ver si se veía la imagen y no me aparece Entonces cuál es la forma o qué se debe de hacer para que pueda verse la imagen desde otro dispositivo, si alguien me puede ayudar se lo agradecería mucho

  • @VenusinaAmanecer
    @VenusinaAmanecer 4 года назад

    Hola disculpa y como la puedo publicar en blogger

  • @erzebehtpostmortem4520
    @erzebehtpostmortem4520 6 лет назад +1

    ayuda aunque guarde las imágenes en una misma carpeta, pero en la pagina no se visualizan

    • @AVANCEIT
      @AVANCEIT  6 лет назад

      Debes verificar si el código está correcto. Cuando guardas en la misma carpeta no necesitas usar ningún /

  • @tecnoyappsdeluxe4377
    @tecnoyappsdeluxe4377 3 года назад +1

    Espérate vas muy rápido apenas estoy aprendiendo

  • @tzeitzelaguilar8442
    @tzeitzelaguilar8442 5 лет назад +3

    ya traté de todas las formas pero no me sale, me podrías ayudar?

    • @CreadoresenFacebook
      @CreadoresenFacebook 5 лет назад

      Hola coloca tu código en codepen y con gusto te podemos ayudar

    • @CreadoresenFacebook
      @CreadoresenFacebook 5 лет назад

      @@imotie4066 hola,pueden ser varios factores,uno quiza la ruta esta mal,quiza la extensión no es la correcta,etc,debes revisar bien,para mas info contactate a la fanpage de facebook con studio web,y con gusto te ayudaré personalmente

    • @CreadoresenFacebook
      @CreadoresenFacebook 5 лет назад

      @@imotie4066 con errores se aprende,sigue asi..cuando necesites ayuda ya sabes..

    • @diosito111
      @diosito111 4 года назад

      @@CreadoresenFacebook hola yo uso bloc de notad como podria insertar una imagen?

  • @alejandrovelezarenas4588
    @alejandrovelezarenas4588 3 года назад

    Nicky Jam eres tú?

  • @PKMina
    @PKMina 2 года назад

    Es que quiero poner la imagen de fondo para la página, ayudaaa 🥺

  • @Oweenm_
    @Oweenm_ 5 лет назад

    Eres de República Dominicana ?

    • @AVANCEIT
      @AVANCEIT  5 лет назад +2

      Si. Saludos

    • @Oweenm_
      @Oweenm_ 5 лет назад +1

      @@AVANCEIT Men gracias por el vídeo y espero que sigas creciendo

  • @miguelmarte1810
    @miguelmarte1810 4 года назад

    Diabbb men de la que me sacastes 🦾🦾🦾🦾

  • @alexanderperes10
    @alexanderperes10 4 года назад +2

    eh a mi no me funciono

  • @jancelantoniogarciavillanu2689
    @jancelantoniogarciavillanu2689 4 года назад

    si pero como lo haria si yo quiere mandar el html sin tener que mandarle la imagen

  • @juanvasallo5118
    @juanvasallo5118 4 года назад +4

    mañana tengo examen de esto.... alguien tiene el codigo para poner la imagen?

  • @Gerson_castellanos7856
    @Gerson_castellanos7856 3 года назад

    hable duroioooooo

  • @carlosandreseraso1236
    @carlosandreseraso1236 5 лет назад +1

    que hago

  • @lucahdz2930
    @lucahdz2930 5 лет назад

    Gracias!

  • @nayelyvalderramaccopa3264
    @nayelyvalderramaccopa3264 3 года назад

    me sale fondo en blanco , ayuda :c

  • @PlumpyBunny
    @PlumpyBunny 2 года назад

    Ya lo intente :)
    No me abre la imágen 😭😭

  • @andresrsanchezf8766
    @andresrsanchezf8766 6 лет назад +1

    amigo si la imagen la deje en una carpeta como hago hay pd) para mantener ordenado

    • @AVANCEIT
      @AVANCEIT  6 лет назад +4

      Para más facil debes tener tu documento html y todas tus imágenes dentro de la misma carpeta. Poniendote un ejemplo para que me entiendas mejor. Soponiendo que mi archivo html está en el escritorio y la imagen se llama mario.jpg y la tengo dentro de una carpeta que se llama animados. Simplemente cuando hagas el cádigo donde va la url pondrás lo siguiente:
      Espero esto te sirva. y recuerda es mejor que todo esté dentro en la misma carpeta.

    • @andresrsanchezf8766
      @andresrsanchezf8766 6 лет назад

      avanceit gracias amigo

  • @realgeneracion1361
    @realgeneracion1361 4 года назад +1

    Eee me reventaste los oídos jajajaja

  • @christianmedina5947
    @christianmedina5947 2 года назад

    No había puesto JPG y por eso no me salía.

  • @adanaragon8869
    @adanaragon8869 2 года назад

    Suerte con la demanda

  • @Arnad7_7507
    @Arnad7_7507 Год назад +1

    Para los vagos copien el comando

  • @MaykolRamosCastillo
    @MaykolRamosCastillo 3 года назад

    ami no me funciono que paso

  • @zalexku
    @zalexku 4 года назад

    capo, dónde están las etiquetas?

    • @AVANCEIT
      @AVANCEIT  4 года назад

      Las etiquetas las puedes encotrar en este sitio web
      www.w3schools.com/html/html_images.asp

  • @samuelelnazaj.l2002
    @samuelelnazaj.l2002 3 года назад

    amigo no me funciono aún
    2021 :(

  • @arelock8881
    @arelock8881 6 лет назад

    Oye tengo un problema lo qué pasa es que pongo la imagen pero en la,página para un archivo como puedo hacer para que si se vea la imagen

    • @AVANCEIT
      @AVANCEIT  6 лет назад

      saludos. Debes revisar bien como estás poniendo el código.

  • @adrianramirez1401
    @adrianramirez1401 6 лет назад +3

    Mikel tube

  • @trainingforchampions8757
    @trainingforchampions8757 4 года назад

    volumen muy bajo

  • @jamesguzmanmendez3347
    @jamesguzmanmendez3347 6 лет назад +2

    Cordial saludo, ¿como alinear horizontalmente y centrado 4 imagenes con código HTML?....gracias

  • @iamvaleeen
    @iamvaleeen 3 года назад

    No me funcionó ayyda

  • @chr1z617
    @chr1z617 Год назад

    ok

  • @mijailmurzha3381
    @mijailmurzha3381 2 года назад

    NO ME ANDA

  • @zetagamer0114
    @zetagamer0114 4 года назад

    amigo porque tienes hax hahahah

  • @ramirezjuarezagustin7086
    @ramirezjuarezagustin7086 4 года назад

    Alguien sabe porque no me sale?

    • @AVANCEIT
      @AVANCEIT  4 года назад

      Trata de poner la imagen y el archivo html en la misma carpeta

  • @ssupnxggx
    @ssupnxggx 4 года назад +1

    Viva la verga!

  • @sergioortiz8557
    @sergioortiz8557 5 лет назад

    gg ez :v

  • @CarolineA-os1ib
    @CarolineA-os1ib 2 года назад

    No le entiendo para nada

  • @alltutos3501
    @alltutos3501 6 лет назад +3

    ruclips.net/video/jqdGf1mAgRE/видео.html como insertar la imagen bien explicado

  • @Brauta123
    @Brauta123 4 года назад

    PH

  • @yaelabisayhernandezrobles7517
    @yaelabisayhernandezrobles7517 2 года назад

    =

  • @hafed1491
    @hafed1491 2 года назад

    JPEG

  • @ErickDanielRamos-gn5gl
    @ErickDanielRamos-gn5gl 10 месяцев назад

    E

  • @enzoterol9583
    @enzoterol9583 6 лет назад

    no sabia que residente hacia video tutoriales