Curso de HTML básico – Lección #001

En este capítulo mostraremos algunos ejemplos básicos de HTML. No se preocupe si usamos etiquetas que aún no conoce.

Un poco de teoría

El lenguaje de programación HTML son las siglas en inglés de HyperText Markup Language, hace referencia al lenguaje de marcado para la elaboración y programación de páginas web.

El lenguaje de programación HTML y/o HTML5 se “escribe” anidando entre etiquetas de apertura (<html>) y etiquetas de cierre (</html>). Si te fijas puedes ver que la diferencia entre la etiqueta de apertura y la de cierre es el slash o barra diagonal (alt gr + tecla del 7). No te preocupes si utilizamos etiquetas que aún desconoces. Aún así, te puedes ir familiarizando con ellas.

Documentos HTML

Todos los documentos HTML deben comenzar con una declaración de tipo de documento: <!DOCTYPE html>. Como muchas otras etiquetas, esta no tiene su homóloga de cierre.

Tras declarar el tipo de documento, el archivo HTML en sí comienza con la etiqueta <html> y termina con </html>.

La parte visible del documento HTML (lo que es el contenido de tu web) se debe escribir entre las etiquetas <body> y </body>.

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
Ben Kolde profile on unsplash.com

La Declaración <!DOCTYPE>

La declaración <!DOCTYPE> representa el tipo de documento sobre el que trabajamos y ayuda a los navegadores a mostrar correctamente las páginas web.

Solo debe aparecer una vez en la parte superior de la página (antes de cualquier etiqueta HTML).

La declaración <!DOCTYPE> no distingue entre mayúsculas y minúsculas.

La declaración <!DOCTYPE> para HTML5 es:

<!DOCTYPE html>

Encabezados HTML

Los encabezados HTML se definen con las etiquetas <h1> a <h6>.

<h1> define el encabezado más importante. <h6> define el encabezado menos importante:

Ejemplo:

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

HTML en acción:

Esto es una cabecera H1

Esto es una cabecera H2

Esto es una cabecera H3

“Los encabezados HTML se definen con las etiquetas <h1> a <h6>.”

W3Schools

We all know everyone has many stuff on the table.

Párrafos HTML

Los párrafos HTML se definen con la etiqueta <p>:

Ejemplo:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML en acción:

This is a paragraph.

This is another paragraph.

Enlaces HTML

Los enlaces HTML se definen con la etiqueta <a>:

Ejemplo:

<a href="https://www.w3schools.com">This is a link</a>

HTML en acción:

Esto es un enlace

El destino del enlace se especifica en el atributo href.

Los atributos se utilizan para proporcionar información adicional sobre los elementos HTML.

Aprenderás más sobre los atributos de los enlaces en un capítulo posterior.

Imágenes HTML

Las imágenes HTML se definen con la etiqueta <img>.

El archivo de origen (src), el texto alternativo (alt), el ancho y el alto se proporcionan como atributos:

Ejemplo:

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

En acción

¿Cómo ver la fuente HTML? (Tip/truco/consejo)

¿Alguna vez has visto una página web y te has preguntado “¡Oye! ¿Cómo hicieron eso?”

Ver código fuente HTML:

Haga clic derecho en una página HTML y seleccione “Ver código fuente” (en Chrome) o “Ver código fuente” (en Edge), o similar en otros navegadores. Esto abrirá una ventana que contiene el código fuente HTML de la página.

Inspeccionar un elemento HTML:

Haga clic con el botón derecho en un elemento (o en un área en blanco) y elija “Inspeccionar” o “Inspeccionar elemento” para ver de qué están compuestos los elementos (verá tanto el HTML como el CSS). También puede editar HTML o CSS sobre la marcha en el panel Elementos o Estilos que se abre.

Fuente original (en inglés): W3Schools

Leave a Comment

1