Aprende HMTL desde cero
¡Hola! Bienvenido/a
Vamos a descubrir el mundo del HTML desde cero.
¿Qué es HTML?
HTML significa HyperText Markup Language, y es lenguaje para escribir texto con formato.
HTML es el lenguaje básico para construir páginas web. Te permite decir “aquí pongo un texto, aquí una imagen”.
Es como construir la estructura de una casa: ¡necesitas las paredes y el techo!
Instalar un editor de texto
Para escribir HTML, solo necesitas un editor de texto. ¡Puedes usar uno simple como el bloc de notas!
Sin embargo, lo normal es que uses un editor de código como Visual Studio Code.
Es gratis, proporciona ayudas para que escribir HTML sea más fácil y organizado.
Escribe tu primera página
¡Es hora de escribir tu primer código HTML!
- Abre tu editor y escribe lo siguiente:
- Ahora guárdalo como
index.html - Abrelo en tu navegador web para verlo en acción
Comienza creando una simple página con un título, un párrafo y una imagen. ¡Es un gran primer paso para aprender HTML!
¡Vas muy bien!
Ahora vamos a hablar de la sintaxis de HTML
Estructura básica de HTML
Todo documento HTML sigue una estructura básica. Estas son las partes clave que una web debe tener.
<!DOCTYPE html>: Define el tipo de documento<html>: La raíz del documento<head>: Información sobre la página<body>: El contenido visible de la página
Etiquetas HTML
HTML usa etiquetas para marcar y organizar el contenido. Las etiquetas se indican entre < > y </ >.
Por ejemplo así:
<p>Este es un párrafo</p>Cada etiqueta tiene un propósito específico. En este caso <p> está definiendo un párrafo.
Etiquetas habituales
En HTML hay muchas etiquetas. Por ejemplo, algunas de ellas son:
<div>: Para crear secciones<p><h1>a<h6>: Para definir párrafos y títulos<span><strong><em>: Para dar formato al texto<ul><ol><li>: Para crear listas
Aunque tranquilo en el mundo “real” solo se usan unas 20-30 ¡no son tantas!
Atributos de las etiquetas
Las etiquetas pueden tener atributos que les dan características adicionales. Por ejemplo, el atributo src define la fuente de una imagen, o el atributo href que indica a qué página te llevará el enlace.
```html
<a href="https://www.google.com">Ir a Google</a>Dos atributos muy habituales son id o class, que sirven para seleccionar un elemento desde CSS o JS.
¡Ya casi lo tienes!
Solo nos falta ver como hacer aplicaciones web con HTML
Formularios en HTML
Los formularios permiten a los usuarios ingresar información que luego será enviada.
Usamos etiquetas como <form>, <input> y <button> para crear formularios interactivos. Pueden ser algo complicados ¡pero les pillarás el truco!
Añadir estilos con CSS
CSS y HTML trabajan juntos para crear sitios web atractivos. Puedes agregar tu fichero CSS a tu web así:
<head>
<link rel="stylesheet" href="styles.css">
</head>HTML crea la estructura, y CSS agrega el estilo (tipografias, colores, layout). Juntando a ambos puedes para ¡crear sitios web impresionantes!
Añadir programación con JavaScript
Además también puedes añadir JavaScript para hacer que tu página sea interactiva. Así puedes agregar tu fichero JavaScript a tu web.
<head>
<script src="script.js"></script>
</head>Con JavaScript puedes hacer casi lo que quieras. ¡Haz que tus páginas cobren vida!
¡Bien hecho!
¡Has aprendido lo básico de HTML! ¡Sigue practicando y experimenta!
