¿Qué es HTML y sus tags? Atributos de los elementos.
¿Que es HTML y sus tags? Atributos de los elementos
Este articulo compone una serie de cinco articulos sobre lo que es HTML y sus etiquetas:
- ¿Que és HTML y sus tags? Estructura básica
- ¿Que és HTML y sus tags? Elementos inline
- ¿Que és HTML y sus tags? Block-level
- ¿Que és HTML y sus tags? Elementos de un formulario
- ¿Que és HTML y sus tags? Atributos de los elementos
En el artículo anterior vimos los elementos de un formulario en HTML, en este artículo veremos por los atributos de los elementos.
Los atributos HTML son palabras especiales que se utilizan dentro de la tag de apertura para controlar el comportamiento del elemento. Los atributos HTML son un modificador de un tipo de elemento HTML. Con ellos podemos identificar mejor un elemento, informar qué archivo debe usar esa tag, indicar el tipo de campo de texto, etc...
Hay dos tipos de atributos en HTML, los globales que son aceptos por toda las etiquetas, como: class, id, lang, style y algunos otros que puedes consultar en la documentación también hay específicos que solo algunas etiquetas plantean, como, src, disabled, href, label,etc..
La estructura de un atributo es:
nombre = "valor"
Donde class es el nombre del atributo (como class, src, styled, id) y intro es el valor de ese atributo.
Son los principales atributos:
class = "NombreClase"
Las clases son como la clasificación de una tag/elemento, de modo que en estilo CSS una etiqueta específica o un conjunto de etiquetas. También es posible usar JavaScript para seleccionar una tag específica.
HTML:
< h1 class="titulo">Submerge en Tecnologia < / p >
CSS (No te preocupes por css, puedes aprenderlo en el curso HTML5 y CSS3 parte 1: Mi primera página web:
.titulo {
font-size: 21px;
color: #fff;
background: blue;
}
En el código superior, seleccionamos el css con el selector de clase usando un punto antes del nombre de la clase (.class), y luego aplicamos un tamaño de fuente, color y color de fondo.
Vea el resultado
id = "NombreDold"
Identificar de forma unica en elemento en aquella pagina HTML. Se utiliza para identificar el destino de enlaces, labels y otras funcionalidades en esto sentido
src = "Link o directorio de la midia"
Comúnmente usado para indicar a la tag qué archivo usará el medio. Recibe valores como links (https://google.com/miimagen.jpeg) o el nombre de un archivo que incluye en el proyecto (/miimagen.jpeg).
<img src = "https://i.ytimg.com/vi/aDhrEm-3kYY/mqdefault.jpg">
Vea el resultado.
alt = "Texto alternativo"
El atributo alt proporciona información alternativa para una imagen si el usuario por alguna razón no puede visualizarla (por una conexión lenta, un error en el atributo src o si el usuario usa un lector de pantalla).
<img src="https://caelum-online-public.s3.amazonaws.com/ESP-WD-43-alura-latam-ebook-html-css-javascript/alura_latam_logos-imagens/ALURA_LATAM_LOGO_LIGHT.png" alt=”Logo de alura”>
Vea el resulltado.
Nota: La imagen no carga a propósito para simular un link incorrecto (como en este caso) o una mala conexión donde la imagen no carga.
href = "Url"
Para la tag <a> , el atributo href especifica la URL de la página a la que va el link.
<p>Haga click <a href="https://www.alura.com.br/">aqui</a> para ir para el site de Alura Latam</p>
Vea el resultado.
Para los elementos <link>, el atributo href especifica la localización (URL) del recurso externo (geralmente un archivo de hoja de estilo).
lang = "Lenguaje"
El atributo lang especificado en el lenguaje del contenido de la tag.
Ejemplos comunes son "en" para inglés, "pt" para portugués, "fr" para francés y así para delante.
target = "blank"
Este atributo abre el link del documento en una nueva ventana o pestaña.
<p>Haga click <a href="https://www.alura.com.br/" target="blank">aqui</a> para ir para el site de Alura Latam</p>
Vea el resultado.
Conclusión
¡Ahora está contigo!
Aquí hemos terminado una serie de artículos sobre qué es html y sus etiquetas, desde la estructura básica hasta una explicación detallada de cada tipo de etiqueta.
Pero este intercambio no acaba aquí. ¡Ahora, queremos saber de ti!
Te recomendamos sumergirte y estudiar con nuestros cursos de Formación HTML y CSS Además, puedes utilizar los tutoriales de W3schools para aprender aún más.
Además, puedes usar los tutoriales de W3schools para aprender aún más.
¡Buenos estudios y hasta luego! :)
Escrito por Mateus Henrique
Traducido para Alura Latam por Ingrid da Silva.