Day 03: HTML Basic
Tags: spanish, html, htmlbasic, w3schools
Published: 2023-06-24 02:47:17

> 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:**

```html
<!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>
```

##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:**

```html
<!DOCTYPE html>
```

##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:**

```html
<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>
```

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

**Ejemplo:**

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

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

**Ejemplo:**

```html
<a href="/signup">Try Notion free</a>
```

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:**

```html
<img src="imagen-notion.png" alt="Image for Notion">
```

##¿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](https://www.w3schools.com/html/default.asp)_

<a href="https://www.buymeacoffee.com/xantosromero" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-yellow.png" alt="Buy Me A Coffee" height="41" width="174"></a>