MEJOR SITIO PARA DESARROLLADORES WEB
HTML5 Lecciones para principiantes

Ua En De

HTML Ejemplos básicos


El primer paso para crear un sitio web es aprender a ver el mundo
a través de los ojos de un internauta.

En este capítulo, mostraremos algunos ejemplos básicos de HTML.

No se preocupe si utilizamos etiquetas que aún no conoce.


HTML Documentos

Todos los documentos HTML deben comenzar con una declaración de tipo de documento: <!DOCTYPE html>.

El documento HTML en sí comienza con <html> y termina con </html>.

La parte visible del documento HTML está entre <body> y </body>.

Ejemplo

<!DOCTYPE html>
<html>
<body>

<h1>Mi primer encabezado</h1>
<p>Mi primer párrafo.</p>

</body>
</html>
Inténtalo tú mismo »

La declaración <!DOCTYPE>

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

Sólo 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>

HTML Headings

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>Esto se dirige 1</h1>
<h2>Esto se dirige 2</h2>
<h3>Esto se dirige 3</h3>
Inténtalo tú mismo »

HTML Párrafos

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

Ejemplo

<p>Este es un párrafo.</p>
<p>Este es otro párrafo.</p>
Inténtalo tú mismo »

HTML Enlaces

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

Ejemplo

<a href="https://www.w3schools.com">Este es un enlace</a>
Inténtalo tú mismo »

El destino del enlace se especifica en el atributo href.

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

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


HTML Imágenes

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

El archivo fuente (src), texto alternativo (alt), width y height se proporcionan como atributos:

Ejemplo

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
Inténtalo tú mismo »

¿Cómo ver el código fuente HTML?

¿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 de la página" (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 derecho en un elemento (o en un área en blanco) y elija "Inspeccionar" o "Inspeccionar elemento" para ver de qué elementos están compuestos (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.


HTML Ejercicios

Ponte a prueba con ejercicios

Ejercicio:

Los elementos HTML están rodeados por un tipo específico de corchetes, ¿cuál?

p This is a paragraph./p