Tutorial básico de HTML
HTML es el lenguaje de marcado que se utiliza para crear páginas web. HTML significa HyperText Markup Language, que significa lenguaje de marcado de hipertexto. El hipertexto es el texto que contiene enlaces a otras páginas o recursos. El marcado es la forma de indicar cómo se debe mostrar el texto o los elementos en la página.
En este tutorial, aprenderás los conceptos básicos de HTML, cómo crear una página web simple y cómo añadir contenido y estilo a tu página.
¿Qué necesitas para crear una página web con HTML?
Para crear una página web con HTML, solo necesitas un editor de texto y un navegador web. Un editor de texto es un programa que te permite escribir y guardar código. Puedes usar cualquier editor de texto que te guste, como Notepad, Sublime Text, Visual Studio Code o Atom. Un navegador web es un programa que te permite ver las páginas web que creas o visitas. Puedes usar cualquier navegador web que te guste, como Chrome, Firefox, Edge o Safari.
¿Cómo crear una página web con HTML?
Para crear una página web con HTML, debes seguir estos pasos:
1. Abre tu editor de texto y crea un archivo nuevo. Guarda el archivo con la extensión .html, por ejemplo, index.html.
2. Escribe el código HTML básico para tu página. El código HTML se compone de etiquetas, que son palabras o símbolos entre corchetes angulares (< y >). Las etiquetas indican al navegador cómo interpretar el contenido de la página. Algunas etiquetas tienen una etiqueta de apertura y una etiqueta de cierre, como <p> y </p>, que indican el inicio y el fin de un párrafo. Otras etiquetas son autocontenidas, como <img>, que indica una imagen.
3. El código HTML básico para una página se compone de cuatro etiquetas principales: <html>, <head>, <body> y <title>. La etiqueta <html> indica el inicio y el fin del documento HTML. La etiqueta <head> contiene información sobre la página, como el título o los enlaces a otros archivos. La etiqueta <body> contiene el contenido visible de la página, como el texto o las imágenes. La etiqueta <title> indica el título de la página, que aparece en la pestaña del navegador.
4. Dentro de la etiqueta <body>, puedes añadir el contenido que quieras para tu página, usando otras etiquetas HTML. Por ejemplo, puedes usar la etiqueta <h1> para crear un encabezado principal, la etiqueta <p> para crear párrafos, la etiqueta <a> para crear enlaces o la etiqueta <img> para insertar imágenes.
5. Guarda tu archivo y abrelo con tu navegador web. Verás tu página web tal como la has creado con HTML.
¿Cómo añadir estilo a tu página web con HTML?
Para añadir estilo a tu página web con HTML, puedes usar atributos o CSS. Los atributos son propiedades que se añaden a las etiquetas HTML para modificar su apariencia o comportamiento. Por ejemplo, puedes usar el atributo style para añadir estilo directamente a una etiqueta HTML, como cambiar el color o el tamaño del texto. El atributo style se escribe dentro de la etiqueta HTML, después del nombre de la etiqueta y seguido de un signo igual (=). El valor del atributo style se escribe entre comillas dobles («) y se compone de propiedades y valores separados por dos puntos (:). Por ejemplo:
HTML
<p style=»color: red; font-size: 20px;»>Este es un párrafo rojo y grande.</p>
CSS significa Cascading Style Sheets, que significa hojas de estilo en cascada. CSS es un lenguaje que se utiliza para definir el estilo de las páginas web, como los colores, las fuentes, el diseño o las animaciones. CSS se puede escribir en un archivo aparte con la extensión .css, o dentro de la etiqueta <style> en el documento HTML.
Para usar CSS en un archivo aparte, debes crear un archivo nuevo con tu editor de texto y guardarlo con la extensión .css, por ejemplo, style.css. Luego debes enlazar el archivo CSS con tu documento HTML usando la etiqueta <link>. La etiqueta <link> se escribe dentro de la etiqueta <head> del documento HTML y tiene dos atributos principales: rel y href. El atributo rel indica la relación entre el documento HTML y el archivo CSS, que en este caso es stylesheet. El atributo href indica la ruta o la dirección del archivo CSS, que puede ser relativa o absoluta. Por ejemplo:
HTML
<head>
<title>Mi página web</title>
<link rel=»stylesheet» href=»style.css»>
</head>
Para usar CSS dentro de la etiqueta <style>, debes escribir el código CSS entre las etiquetas <style> y </style>, que se colocan dentro de la etiqueta <head> del documento HTML. Por ejemplo:
HTML
<head>
<title>Mi página web</title>
<style>
/* Aquí va el código CSS */
</style>
</head>
El código CSS se compone de selectores y declaraciones. Los selectores indican a qué elementos HTML se les aplica el estilo. Los selectores pueden ser el nombre de la etiqueta HTML, una clase, un id o un pseudoelemento. Las declaraciones indican el estilo que se aplica a los elementos seleccionados. Las declaraciones se escriben entre llaves ({ y }) y se componen de propiedades y valores separados por dos puntos (:). Por ejemplo:
css
p {
color: blue;
font-family: Arial;
}
Este código CSS aplica el estilo de color azul y fuente Arial a todos los párrafos (<p>) del documento HTML.
Conclusión
En este tutorial, has aprendido los conceptos básicos de HTML, cómo crear una página web simple y cómo añadir contenido y estilo a tu página. HTML es un lenguaje muy fácil de aprender y te permite crear páginas web con el contenido que quieras. Con HTML puedes crear páginas web estáticas, que no cambian según la interacción del usuario. Para crear páginas web dinámicas, que cambian según la interacción del usuario, necesitas usar otros lenguajes como JavaScript o PHP.
Espero que este tutorial te haya sido útil y que te animes a seguir aprendiendo más sobre HTML y otros lenguajes de programación web. Si tienes alguna duda o sugerencia, puedes dejar un comentario abajo. ¡Gracias por leer!