Atributos HTML

← Diseño Web ⌂ Home

¿Qué son los atributos de HTML?

Los atributos son valores agregados a las etiquetas (tags) html que extienden su habilidad o funcionalidad con información específica.

A continuación, un ejemplo de los atributos más comunes y usados en algunas etiquetas:

Para img

Para link:

Para meta:

Para a:

Agregar imágenes con la etiqueta <img>

Usaremos los atributos html para poder agregar las imágenes a nuestro sitio. Primero agregaremos un logo en el menú:

... 

<header>
    <figure>
        <img src="img/tshirt.png" alt="Playeras Geek">
    </figure>
    <nav>
        <ol>
            <li>Sección principal</li>
            <li>Las más vendidas</li>
            <li>Más modelos</li>
            <li>Promociones</li>
            <li>Preguntas frecuentes</li>
            <li>Contacto</li>
        </ol>
    </nav>
</header>

...

Como puedes observar agregamos contenido a los atributos src y alt. Observemos que el de src hace referencia a una imagen llamada tshirt.png que se encuentra dentro de la carpeta img. Así que haremos eso, crear una carpeta al nivel de nuestro archivo index.html y dentro guardamos una imagen de una playera. Y listo, ahora podremos visualizar nuestra imagen.

Cambiemos ahora el tamaño de la imagen con ayuda de los atributos width y/o height

<figure>
    <img src="img/tshirt.png" alt="Playeras Geek" width="40px">
</figure>

Agregar favicon con la etiqueta <link>

Ahora agregaremos un favicon, es el icono que aparece en la pestaña del navegador, y lo haremos con ayuda de la etiqueta <link> dentro de la sección <head>.

Nota: usaré la misma imagen del logo, pero eres libre de cambiarla.

...

<head>
    <meta charset="utf-8">
    <title>Playeras Geek</title>
    <link rel="icon" href="img/tshirt.png" type="img/png">
</head>

...

Agregar enlaces a la etiqueta <a>

Tenemos que hacer funcionar los enlaces del menú para poder desplazarnos dentro de nuestra página web. Y lo haremos con ayuda de la etiqueta <a> y sus atributos. En cada elemento del menú agreguemos un ancla.

...

<nav>
    <ol>
        <li><a href="#inicio">Inicio</a></li>
        <li><a href="#mas-vendidas">Las más vendidas</a></li>
        <li><a href="#promociones">Promociones</a></li>
        <li><a href="#mas-modelos">Más modelos</a></li>
        <li><a href="#faq">Preguntas frecuentes</a></li>
        <li><a href="#contacto">Contacto</a></li>
    </ol>
</nav>

...

Y en las playeras cambiaremos el enlace de ¡La quiero! en cada playera

<article>
    <h3>Playera de HTML</h3>
    <figure>
        <img src="" alt="">
    </figure>
    <p><strong>Precio:</strong> $300.00 MXN</p>
    <p><strong>Tallas disponibles en</strong>: CH / M / G / XL</p>
    <a href="playera-html.html">¡La quiero!</a>
</article>

<article>
    <h3>Playera de Star Wars</h3>
    <figure>
        <img src="" alt="">
    </figure>
    <p><strong>Precio:</strong> $350.00 MXN</p>
    <p><strong>Tallas disponibles en</strong>: CH / M / G / XL</p>
    <a href="playera-star-wars.html">¡La quiero!</a>
</article>

<article>
    <h3>Playera de NASA</h3>
    <figure>
        <img src="" alt="">
    </figure>
    <p><strong>Precio:</strong> $350.00 MXN</p>
    <p><strong>Tallas disponibles en</strong>: CH / M / G / XL</p>
    <a href="playera-nasa.html">¡La quiero!</a>
</article>

Cosas a observar, ¿notas alguna diferencia? <a href="#faq">Preguntas frecuentes</a> y <a href="playera-nasa.html">¡La quiero!</a>

Pero ¿por qué aún no funciona?

Nos falta crear los enlaces internos y los archivos externos. Para crear los enlaces internos basta con agregar un atributo id en la sección a la que queremos desplazarnos. Por ejemplo a la de promociones:

... 

<section id="promociones">
    <h2>Promociones</h2>
    <p>
        En la compra de 2 playeras llévate la tercera <strong>¡GRATIS!</strong>
    </p>
</section>

...

Ejercicio

Completar el sitio web con las imágenes faltantes y los archivos faltantes de las playeras, con su estructura nueva de HTML.

Nota: tendrás que crear varios archivos nuevos html y guardarlos en la misma ruta que tu archivo principal index.html, recuerda revisar bien los nombres con los que guardas cada archivo.

Recursos