como colocar imágenes en un sitio web con html

View this thread on: d.buzz | hive.blog | peakd.com | ecency.com
·@ederaleng·
0.000 HBD
como colocar imágenes en un sitio web con html
<div class="text-justify"> 

>If you speak English translate my post just by giving right click and translate

Hola compañeros de steemit continuando con el curso que estoy escribiendo en steemit sobre la creación y diseño de sitios web hoy les enseñare a publicar o insertar imágenes dentro de su sitio web como ya saben los sitios web general mente tienen imágenes para mejorar la apariencia y darle vida a los sitios por eso es una parte importante de el diseño web  por eso le día de hoy vamos a ver como colocarlas  usando la etiqueta "img" sin nada mas que decir veamos la etiqueta imagen y alguno de sus atributos mas importantes.

<center>
![imagen](https://cdn.pixabay.com/photo/2014/04/05/11/19/internet-315132_960_720.jpg )
<sub>Imagen de uso libre tomada del sitio[pixabay.com](https://pixabay.com/es/internet-contenido-portal-búsqueda-315132/)</sub>
</center>

 <h2>Etiqueta img y atributo src</h2>
Bueno primero que nada esta etiqueta como ya se dijo es una etiqueta para publicar imágenes en su sitio web  usando la etiqueta "img" esta etiqueta no tiene cierre su cierre esta en el mismo código de el que se abre aunque no es necesario tener que colocar el signo de cierre para que esta funcione pero es recomendable esta etiqueta puede soportar diferentes formatos de imágenes como lo son JPEG, GIF ,PNG , SVG entre otros mas.  Su uso es sencillo se utiliza con la etiqueta "img" y se usa el atributo src para para indicar el ligar donde esta la imagen veamos un ejemplo.

>https://2.bp.blogspot.com/-GQmQnuS84oQ/Ws-Tdhe-FmI/AAAAAAAAAZ4/17W7BSOH8oMRTYc2NGWR8UEg07BOvTG2ACLcBGAs/s1600/imagen.PNG

El resultado seria
<center>![imgresul](https://2.bp.blogspot.com/-n-n3ENjSxEI/Ws9-A0vcRrI/AAAAAAAAAZQ/4ZYiVwfMsQ8Fnf4l6w_0ehi3L5AUn3ScgCLcBGAs/s1600/img%2Bhmtl.PNG
)
<sub>Imagen propia</sub>
</center>



Como se puede ver se uso la imagen de perfil de mi canal de steemit y esta se muestra por que es identificada por el atributo "src"  el cual indica la dirección de donde se esta tomando la imagen y eso seria todo para publicar imágenes dentro de un documento html.
<center>![separador](https://steemitimages.com/DQmUWMWCtcj7MoLW2jdruvew1U8hu1LApdXKqxz8kP8hqST/U5drBv8yhaeq7Uk738q5mFjbCLkQPdU_1680x8400.png)</center>


<h2>atributos width y height</h2>

estos atributos lo que hacen es cambiar el tamaño en cuanto a alto y ancho que se ve una imagen dentro de nuestro sitio web estos tamaños son definidos por nosotros en  las medidas de "Pixeles" pero como se divide el tamaño es muy sencillo los tamaños cambian dependiendo e los valores como se dijo pero para se mas exactos width cambia los tamaños de manera horizontal y height de manera vertical veamos un ejemplo recuerda que para que el método funcione deben estar usando los dos .

</div>

>https://4.bp.blogspot.com/-S7kHSxLKitU/Ws-T_E77uUI/AAAAAAAAAaE/HwpiJMX_MdUa5mDRgfVzwnGGAHQ3s_nFACLcBGAs/s1600/iamgen.PNG


El resultado seria 

<center>

![steemit](https://4.bp.blogspot.com/-vbK7F5NmIVk/Ws-DErA17XI/AAAAAAAAAZo/Zt9K_j2BsZkyhVZqiKKugdOR7JJbUy2rQCLcBGAs/s1600/steemit.PNg)

<sub>Imagen propia</sub>
</center>

como se puede ver en la imagen esta cambio su tamaño de forma vertical ya que la imagen es cuadrada pero como los tamaños colocados de manera horizontal son mayores a los verticales esta se modifico de manera automática.



<div class="text-justify"> 

<center>
![separador](https://steemitimages.com/DQmUWMWCtcj7MoLW2jdruvew1U8hu1LApdXKqxz8kP8hqST/U5drBv8yhaeq7Uk738q5mFjbCLkQPdU_1680x8400.png)
</center>

En el post de hoy no se verán mas atributos puesto a que son demasiados los que tiene la etiqueta "img" y se haria un post demacrado largo así que te dejare con un link de [mozilla](
https://developer.mozilla.org/es/docs/Web/HTML/Elemento/img) en donde podrás encontrar los demás atributos de esta etiqueta  sin nada mas que decir gracias por leer mi post de ser así dame tu apoyo dejando tu uptove si te gusto mi post si no deja tu comentario compartiendo tu información para saber que cambios hacer para los siguientes post también te dejo el link de [pastebin](https://pastebin.com/RmKBvBv7) en el cual se hace un recuento de todos los post de el curso.  

<center>
![follow](https://steemit-production-imageproxy-thumbnail.s3.amazonaws.com/DQmRLDKZ5xZTTHMYVAAvK4T282K484CrLSHvBN3UZTpKC4g_1680x8400)
</center>
</div>
👍 , , , , , , , , , , ,