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>
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>
Encabezados HTML
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:
<!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>Notion for education</h1>
<h2>Trusted by thousands of students & schools</h2>
<h3>Encabezado h3</h3>
</body>
</html>
Párrafos HTML
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>
Enlaces HTML
Los enlaces HTML se definen con la etiqueta <a>.
Ejemplo:
<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 HTML
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">
¿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 HTML
En Google Chrome, haga clic derecho en una página y seleccione Ver código fuente de la página.
Inspecciona un elemento HTML
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