5. HTML Intermedio: Enlaces, Imágenes, Tablas y Estructuras

Diseño de Sitios Web

HTML Intermedio: Enlaces, Imágenes, Tablas y Estructuras

W3Schools

Links HTML

Los enlaces HTML son hipervínculos. Puede hacer clic en un enlace y saltar a otro documento (página) La etiqueta HTML <a> define un hipervínculo. Tiene la siguiente sintaxis:<a href="url">texto del enlace</a>

• El atributo más importante del elemento <a> es el atributo href, que indica el destino del enlace.
• El texto del enlace es la parte que será visible para el lector.
• Al hacer clic en el texto del enlace, el lector será enviado a la dirección URL especificada.

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

Imágenes HTML

<img src="pic_trulli.jpg" alt="Italian Trulli"> La etiqueta HTML <img> se utiliza para insertar una imagen en una página web. Las imágenes no se insertan técnicamente en una página web; las imágenes se vinculan a páginas web. La etiqueta <img> crea un espacio de almacenamiento para la imagen a la que se hace referencia. La etiqueta <img> está vacía, solo contiene atributos y no tiene una etiqueta de cierre. La etiqueta <img> tiene dos atributos obligatorios:

• src: especifica la ruta a la imagen
• alt: especifica un texto alternativo para la imagen

Imágenes HTML - Width y Height

Puede utilizar el atributo de estilo para especificar el ancho y la altura de una imagen. <img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;"> Alternativamente, puede utilizar los atributos de ancho y alto: <img src="img_girl.jpg" alt="Chica con chaqueta" width="500" height="600"> Los atributos de ancho y alto siempre definen el ancho y alto de la imagen en píxeles.

Width y Height vs Style

La mejor práctica es utilizar widht y height en hojas de estilo y no en el atributo estilo de HTML: img { width: 100%;} ----------------------------------------------------------------------------------------------------------------------------------------------------- <img src="html5.gif" alt="HTML5 Icon">

Imágenes como Links

Para utilizar una imagen como enlace, se coloca la etiqueta <img> dentro de la etiqueta <a>: <a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;"> </a>

Imágenes Flotantes

Utilice la propiedad flotante CSS para permitir que la imagen flote hacia la derecha o hacia la izquierda de un texto: <p><img src="smiley.gif" alt="Cara sonriente" style="float:right;width:42px;height:42px;">La imagen flotará a la derecha del texto.</p> <p><img src="smiley.gif" alt="Cara sonriente" style="float:left;width:42px;height:42px;">La imagen flotará a la izquierda del texto.</p>

Imágenes de fondo HTML

Para agregar una imagen de fondo a un elemento HTML, se utiliza la propiedad background-image de CSS: En CSS:p { background-image: url('img_girl.jpg'); }

Background Repeat

Si la imagen de fondo es más pequeña que el elemento, la imagen se repetirá, horizontal y verticalmente, hasta llegar al final del elemento:body { background-image: url('example_img_girl.jpg'); } Para evitar que la imagen de fondo se repita, establezca la propiedad background-repeat en no-repeat.body { background-image: url('example_img_girl.jpg'); background-repeat: no-repeat; }

Background Cover

Para que la imagen de fondo cubra todo el elemento, se configura la propiedad background-size en cover. Además, para asegurarse de que todo el elemento esté siempre cubierto, configure la propiedad background-attachment en fixed, la imagen de fondo cubrirá todo el elemento, sin estirarse (la imagen mantendrá sus proporciones originales) body { background-image: url('img_girl.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; }

Background Stretch

Para que la imagen de fondo se estire para ajustarse a todo el elemento, se debe establecer la propiedad background-size al 100% Al cambiar el tamaño de la ventana del navegador y verás que la imagen se estirará, pero siempre cubrirá todo el elemento.body { background-image: url('img_girl.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; }

HTML Favicon

Un favicon es una pequeña imagen que se muestra junto al título de la página en la pestaña del navegador. Para agregar un favicon a su sitio web, se guarda como una imagen en la carpeta raíz.<!DOCTYPE html> <html><head><title>Título de mi página</title><link rel="icon" type="image/x-icon" href="/images/favicon.ico"></head><body><h1>Este es un encabezado</h1><p>Este es un párrafo.</p></body></html>

Tablas HTML

Las tablas HTML permiten organizar datos en filas y columnas. Una tabla en HTML consta de celdas de tabla dentro de filas y columnas.<table><tr><th>Empresa</th><th>Contacto</th><th>País</th></tr><tr><td>Alfreds Futterkiste</td><td>Maria Anders</td><td>Alemania</td></tr><tr><td>Centro comercial Moctezuma</td><td>Francisco Chang</td><td>México</td></tr></table>

Tablas HTML: Celdas

Cada celda de la tabla está definida por una etiqueta <td> y una </td>.<table> <tr> <td>Emil</td> <td>Tobias</td> <td>Linus</td></tr></table>

Tablas HTML: Filas

Cada fila de la tabla comienza con una etiqueta <tr> y termina con una etiqueta </tr>. <table> <tr> <td>Emil</td> <td>Tobias</td> <td>Linus</td> </tr> <tr> <td>16</td> <td>14</td> <td>10</td> </tr></table>

Tablas HTML: Headers (Encabezados)

Para colocar un encabezado en una celda, se utiliza etiqueta <th> en lugar de la etiqueta <td>:<tabla><tr><th>Persona 1</th><th>Persona 2</th><th>Persona 3</th></tr><tr><td>Emil</td><td>Tobías</td><td>Linus</td></tr><tr><td>16</td><td>14</td><td>10</td></tr></table>

Div HTML

El elemento <div> se utiliza como contenedor para otros elementos HTML. El elemento <div> es por defecto un elemento de bloque, lo que significa que ocupa todo el ancho disponible y viene con saltos de línea antes y después. Un elemento <div> ocupa todo el ancho disponible:Hola <div>Soy un div</div>, es una molestia.

El elemento <div> se utiliza a menudo para agrupar secciones de una página web. Un elemento <div> con elementos HTML:<div> <h2>London</h2> <p>London is the capital city of England.</p> <p>London has over 13 million inhabitants.</p> </div>

Centrar un Div

Si hay un elemento <div> que no tiene un ancho del 100 % y se desea alinearlo al centro, configure la propiedad de margen CSS en automático. div { width:300px; margin:auto;}

Múltiples elementos <div>

Puedes tener muchos contenedores <div> en la misma página.<div> <h2>London</h2> <p>London is the capital city of England.</p> <p>London has over 13 million inhabitants.</p></div> <div> <h2>Oslo</h2> <p>Oslo is the capital city of Norway.</p> <p>Oslo has over 600.000 inhabitants.</p></div> <div> <h2>Rome</h2> <p>Rome is the capital city of Italy.</p> <p>Rome has almost 3 million inhabitants.</p></div>

Atributo Class HTML

El atributo de clase se utiliza a menudo para señalar un nombre de clase en una hoja de estilo. .city { background-color: tomato; color: white; border: 2px solid black; margin: 20px; padding: 20px;}

<div class="city"> <h2>London</h2> <p>London is the capital of England.</p></div> <div class="city"> <h2>Paris</h2> <p>Paris is the capital of France.</p></div> <div class="city"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p></div>

Atributo id HTML

El atributo id especifica un identificador único para un elemento HTML. El valor del atributo id debe ser único dentro del documento HTML. La sintaxis para id es: escriba un carácter numeral (#), seguido de un nombre de identificador. Luego, defina las propiedades CSS entre llaves {}. #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center;} ----------------------------------------------------------------------------------------------------------------------------------------------------- <h1 id="myHeader">My Header</h1>

Class vs Id

Un nombre de clase puede ser utilizado por varios elementos HTML, mientras que un nombre de identificación solo debe ser utilizado por un elemento HTML dentro de la página:/* Estiliza el elemento con el id "myHeader" */ #myHeader {background-color: lightblue;color: black;padding: 40px;text-align: center;}/* Estiliza todos los elementos con el nombre de clase "city" */ .city {background-color: grape;color: white;padding: 10px;}</style> <!-- Un elemento con un id único --> <h1 id="myHeader">Mis ciudades</h1> <!-- Varios elementos con la misma clase --> <h2 class="city">Londres</h2> <p>Londres es la capital de Inglaterra.</p> <h2 class="city">París</h2> <p>París es la capital de Francia.</p> <h2 class="city">Tokio</h2> <p>Tokio es la capital de Japón.</p>

<!-- Un elemento con un id único --> <h1 id="myHeader">Mis ciudades</h1> <!-- Varios elementos con la misma clase --> <h2 class="city">Londres</h2> <p>Londres es la capital de Inglaterra.</p> <h2 class="city">París</h2> <p>París es la capital de Francia.</p> <h2 class="city">Tokio</h2> <p>Tokio es la capital de Japón.</p>

Ejercicio: HTML Intermedio

Instrucciones en Actividad 5

¡Gracias!