Imagenes y Listas

Imagenes

Como ingresar imagenes en codigo

Las imágenes en una página Html ayudan a que ésta se vea más llamativa y por supuesto ayuda a entender mejor sobre el tema que se está leyendo. Hay diferentes maneras de colocar una imagen en tu página:

1.Usando la etiqueta < img >: Esta es la forma más común. Se utiliza para incrustar imágenes en una página web. El atributo src especifica la ruta de la imagen y el atributo alt proporciona un texto alternativo para la imagen, que se muestra si la imagen no se puede cargar o para usuarios con discapacidad visual.

2.Usando CSS background-image: Puedes utilizar CSS para establecer una imagen de fondo en un elemento HTML, como un < div > o cualquier otro elemento. Esto es útil para diseños más complejos o cuando necesitas aplicar efectos como repetición, posición y tamaño.

3.Usando SVG: Si deseas incrustar gráficos vectoriales escalables (SVG) en tu página, puedes hacerlo directamente en el código HTML. Esto es especialmente útil cuando necesitas imágenes escalables que se ajusten a diferentes tamaños de pantalla sin perder calidad.

El código que vayas a usar será a tu elección en las situaciones que lo requiera ya que la etiqueta < img > es la más común para mostrar imágenes estáticas, mientras que CSS background-image es útil para fondos y diseño. SVG es ideal para gráficos vectoriales y animaciones.

Listas

Hay distintas formas de llevar la organizacion de las páginas web y una de éstas son las listas. Los tipos de listas son: las listas ordenadas (< ol >), listas desordenadas (< ul >), y listas de definición (< dl >).

Ejemplo de Listas en HTML

                <ul>
                    <li>Elemento 1</li>
                    <li>Elemento 2</li>
                    <li>Elemento 3</li>
                </ul>
                    

                <ol>
                    <li>Elemento 1</li>
                    <li>Elemento 2</li>
                    <li>Elemento 3</li>
                </ol>
                    

                <dl>
                    <dt>Término 1</dt>
                    <dd>Definición del Término 1</dd>
                    <dt>Término 2</dt>
                    <dd>Definición del Término 2</dd>
                </dl>
                    

Tipos de Listas

< ul > (unordered list). Son aquellas listas en las que el orden de los items no es relevante, como en una lista de compras. Estas son encerradas en un elemento < ul >  (Cada elemento de la lista se coloca dentro de un elemento < li > ).

 < ol > (ordered list). son aquellas listas en las que el orden sí es relevante, como en una receta. Estas son encerradas en un elemento < ol >  (Cada elemento de la lista se coloca dentro de un elemento < li > ).

< dl > (description list) Una lista de descripción es una lista de términos, con una descripción de cada término.