Aprende HTML5
Hola amigo lector, estamos de regreso con la continuación de ¡Da tus primeros pasos en HTML5!, en esta ocasión entraremos un poco más en detalle con respecto a las etiquetas y su uso general. Pero haremos enfoque en lo que son los atributos de las etiquetas. ¡Entremos en materia!
Etiquetas y Atributos
Como ya habíamos mencionado en el post anterior, HTML5 cuenta con más de 100 elementos los cuales nos servirán de etiquetas usos específicos, si quieres dar un vistazo a este Post ; ya que aquí solo veremos se implementan las etiquetas con algunos atributos.
A pesar de que el número de etiquetas existentes en esta versión de HTML es bastante grande no es suficiente para crear paginas realmente complejas y para eso utilizaremos los atributos. Unos de los casos más utilizados en cuanto a etiquetas con atributos son los siguientes:
Primer ejemplo la etiqueta para imágenes se implementa de la siguiente manera:
<img src="img/myImage.jpg" width="500" height="333">
Como observamos la etiqueta es img y tenemos el atributo src etiqueta en la cual definimos la dirección de la imagen ya sea local o en la web, también tenemos dos atributos más en este caso los cuales son width y height estos atributos no son obligatorios debido a que estos se encargan de definir un tamaño para imagen, pero esto se puede hacer por medio de una clase en css, ¡pero hey eso es tema para otro post!, no perdamos el enfoque.
Segundo ejemplo la etiqueta para links se implementa de la siguiente manera:
<a href="https://www.google.com">Ir a Google</a>
En este ejemplo podemos ver que la etiqueta a contiene un texto para visualizar el cual es “Ir a Google” y en su atributo href contiene una liga al buscador de Google.
En estos ejemplos podemos ver que existen atributos que son necesarios implementar y existen otros que no, ya que pueden ser sustituidos de cierta manera. En el caso de la etiqueta img, el atributo src es necesario ya que tenemos que darle una dirección de donde traerá la imagen ya que como podemos observar y si recordamos el post pasado es una etiqueta con autocontenido.
Y en el caso del href dentro de la etiqueta a se puede agregar una liga a una web externa o una liga a una dirección dentro de nuestra misma web, así como hacer acciones un poco más imaginativas, pero que implican comportamiento con otras tecnologías como Javascript, solo por dar un ejemplo.
Para entrar un poco más en materia y dar más claridad a lo que ya vimos mencionaremos alguno de los atributos básicos y por obvias razones más utilizados.
|
Atributo |
Descripción |
| id = “texto” | Establece un identificador único a cada elemento. |
| class = “texto” | Establece la clase CSS que se aplica a los estilos de elementos. |
| style = “texto” | Establece de forma directa los estilos CSS de un elemento. |
| title = “texto” | Establece el título de un elemento. |
Hablando de estos atributos los dos primeros se utilizan principalmente para trabajar con CSS y Javascript, tanto para dar estilos CSS o comportamientos en los elementos.
Para ser un poco más claro con los atributos para comportamientos, es cuando hacemos referencia a atributo de eventos, estos atributos solo se utilizan cuando en un web estamos trabajando con Javascript. Si quieres dar una revisada a esos atributos puedes acceder aquí.
Se que hasta este punto te quedaras un poco confundido con respecto a CSS y Javascript, pero tranquilo son tecnologías que van por completo de la mano de HTML5 para la creación de web modernas y es algo que iremos llevando de la mano, conforme avancemos, pero esta serie de post esta enfocada para que aprendas a hacer un maquetado.
Veamos un ejemplo del tema aquí presentado.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo 2da parte</title>
</head>
<body>
<h1>¡Da tus primeros paso en HTML5!</h1>
<br>
<img src="imageHTML5.png" title="HTML5" height="90vh" width="auto">
<div style="width: 30%;">
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione repellat qui sit quisquam itaque expedita ad deserunt eveniet, optio incidunt accusamus unde cumque assumenda impedit, esse error reiciendis. Sapiente, aliquam?
</p>
</div>
<br>
<p>
Primer post de la serie
<a href="">Aquí</a>
</p>
</body>
</html>
Una vez ya visto el código intenta interpretar lo que se ve en pantalla con la siguiente imagen.
Como podemos observar en la salida en pantalla existe todo lo que en el código fue definido y podemos ver que se utilizaron los atributos width y height para la etiqueta img y tener una imagen mas acorde al tamaño de la pantalla y no dejar que el maquetado se desbordara por el tamaño original de dicha imagen.
También cabe mencionar que se utilizo el atributo style para el párrafo de texto como para div contenedor de dicho párrafo. en este ejemplo se utilizo un poquito de CSS aun que no es parte del tema principal pero era necesario para ver la implementación de los atributos y para tener un ejemplo visual mucho mas vistoso.
Al igual que en el post anterior agradezco tu atención y espero haberte ayudado con esta información, cualquier duda o recomendación puedes contactarme en mis redes sociales.
Facebok, Instagram y LinkedIn.
Cesar Flores