Elementos básicos de HTML

En el capítulo anterior vimos la estructura más básica de un documento HTML usando las etiquetas html, head, body, title, etc.

En este capítulo vamos a ver y aprender a usar de forma básica, todo hay que decirlo, algunas etiquetas muy básica de HTML, son básicas por lo mucho que se usa.

  Párrafos:

La primera es la <p></p>, esta etiqueta nos permitirá escribir un párrafo dentro de ella, ejemplo:

<p>Párrafo.</p>

Cada vez que usemos esta etiqueta se abrirá un párrafo nuevo.

Headings o encabezados:

Los encabezados se utilizan para crear títulos y subtítulos(no te de traduccir, sino en el sentido de un períodico), los posibles encabezados van del 1 al 6 y se crean con la etiqueta h, por ejemplo: <h1>Se abre la Expo de Sevilla<h1>, un subencabezado o subtítulo sería el siguiente: <h2>La Expo de Sevilla será durará 3 semanas</h2>. El punto es que un encabezado, solo por ponerle la etiqueta h, el título contenido estará en negrita y en letras más grandes.

Otro dato a tener en cuenta que automáticamente el h1 será el título con letras más grandes, el h2 será un poco más petuqeño y el h3 menos grande aún y así seguimos hasta el h6.

El problema aquí es que a veces se puede querer mantener varios apartados en documento HTML con título de similar tamaño, para ello podremos editar títulos en negrita y aumtentando el tamaño sin necesidad de usar los encabezados, cosa que se verá más adelante. Ya que repetir h1 y de nuevo h1 o 2 veces h2 será un error de HTML(aunque he comprobado que los navegadores lo leen bien).

Links

Crear links es una de las funciones fundamentales de HTML, se podría decir que los enlaces es la base de internet.

Es muy sencillo: se usa la etiqueta «a», ejemplo:

<a href=»https://yourcodeweb.com»>Texto</a>

Como ves lo que va entre comillas es la dirección URL del enlace y lo contenido entre las etiquetas <a></a> es el texto que se va a ver en el enlace.

A continuación el mismo elemento anterior pero leído en HTML por tu navegador:

Texto

Muy importante no olvidar el http o en este caso el https, de lo contrario el link no funcionará.

Más adelante se verán link convertidos en botones con estilos, links que se abren en pestañas nuevas, links que te llevan a un partado de una misma página, etc.

Imágenes

Las imagenes son muy fáciles de representar en HTML:

<img src=»https://yourcodeweb.com/wp-content/uploads/2017/04/cropped-terminal-command-line-console-cmd-512-e1493162384432.png»>

La etiqueta <img>, como ves, es un ejemplo de etiqueta que no se cierra. No hay </img>.

Tal y como ha sido representada la imagen, se verá enorme en este caso, así que podemos usar atributos y definir el tamaño de la imagen en el documento así:

<img height=»100″ width=»120″ src=»https://yourcodeweb.com/wp-content/uploads/2017/04/cropped-terminal-command-line-console-cmd-512-e1493162384432.png»>

El atributo height definirá el número de píxeles de altura de la imagen mientras que width el número de píxeles de lado.

Además podremos añadir el atributo: alt, con él podremos cargar un texto si la foto no estuviera disponible o no se cargara por la mala conexión a internet del usuario que lo abra:

<img height=»100″ width=»120″ alt=»a imagen no está disponible» src=»https://yourcodeweb.com/wp-content/uploads/2017/04/cropped-terminal-command-line-console-cmd-512-e1493162384432.png»>

Te invito que abras el bloc de notas y pruebas a hacer todo esto, cambiando el tamaño de la foto(tendrás que usar una foto que tengas en tu escritorio, en el mismo archivo que tu documento HTML y la dirección de la foto no será igual que la URL de una foto que esté en una web).

Luego elimina la foto y verás como al cargar el documento HTML el elemento «alt» hará su función mostranddo el texto alternativo a la foto.