DEV Community

Cover image for Day 03: HTML Basic
Santos Romero
Santos Romero

Posted on • Updated on

Day 03: HTML Basic

En este artículo, mostraremos algunos ejemplos básicos de HTML.
No se preocupe si usamos etiquetas que aún no ha visto hasta el momento.

Documentos HTML

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

El documento HTML por sí mismo empieza con una etiqueta de apertura <html> y termina con etiqueta de cierre </html>.

La parte visible del documento va entre <body> y </body>.

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
  <!-- Información meta para el navegador -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Titulo pagina</title>
</head>
<body>
  <!-- Información visible para el usuario -->
  <h1>Hola mundo HTML</h1>
  <p>Mi primer párrafo.</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

La declaración DOCTYPE

La declaración <!DOCTYPE> representa el tipo de documento y ayuda a los navegadores a mostrar las páginas correctamente. Debería aparecer una sola vez en la parte superior de la página.

La declaración <!DOCTYPE> no es case-sensitive (sí diferencia entre minúsculas y mayúsculas).

<!DOCTYPE html> es la declaración para HTML5.

Ejemplo:

<!DOCTYPE html>
Enter fullscreen mode Exit fullscreen mode

Encabezados

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

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

Ejemplo:

<h1>Notion for education</h1>
<h2>Trusted by thousands of students & schools</h2>
<h3>Encabezado h3</h3>
<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6</h6>
Enter fullscreen mode Exit fullscreen mode

Párrafos

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

Ejemplo:

<p>Your notes, research, tasks, and more — all in one place. Free for students and teachers, with discounts for teams and schools.<p>
Enter fullscreen mode Exit fullscreen mode

Enlaces

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

Ejemplo:

<a href="/signup">Try Notion free</a>
Enter fullscreen mode Exit fullscreen mode

El enlace de destino se especifica en el atributo href.

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

Imágenes

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

El archivo fuente (src) y el texto alternativo (alt) son atributos:

Ejemplo:

<img src="imagen-notion.png" alt="Image for Notion">
Enter fullscreen mode Exit fullscreen mode

¿Cómo ver la fuente HTML?

¿Alguna vez viste una página web y te preguntaste? "¡Guau! ¿Cómo hicieron eso?"

Ver el código fuente

En Google Chrome, haga clic derecho en una página y seleccione Ver código fuente de la página.

Inspeccionar un elemento

En Google Chrome, haga clic derecho y seleccione Inspeccionar.

Resumen

Un documento HTML siempre debe comenzar con la declaración <!DOCTYPE html>. HTML tiene muchas etiquetas como: <h1> -<h6>, <p>, <img>, <a>, etc. Para definir el encabezado más importante de la página, use la etiqueta <h1>.


Traducido con 💚 desde W3Schools.com

Buy Me A Coffee

Top comments (0)