HTML para principiantes: Crea tu primera página web
En este tutorial aprenderás los conceptos básicos de HTML, el lenguaje de marcado que se utiliza para crear páginas web. Al finalizar este tutorial, serás capaz de crear tu propia página web con encabezado, cuerpo y pie de página.
Al finalizar este tutorial, serás capaz de:
- Comprender los conceptos básicos de HTML
- Crear un archivo HTML
- Utilizar la estructura básica de una página web
- Utilizar elementos básicos de HTML, como encabezados, párrafos, imágenes, enlaces y tablas
- Crear una página web para un negocio, usaremos como ejemplo una lavandería
Este tutorial se divide en cinco secciones:
- Introducción a HTML
- Creación de un archivo HTML
- Estructura de una página web
- Elementos básicos de HTML
- Ejemplo práctico
1. Introducción a HTML
¿Qué es HTML?
HTML, o HyperText Markup Language, es un lenguaje de marcado que se utiliza para crear páginas web. Es un lenguaje de texto que utiliza etiquetas para definir el contenido y la estructura de una página web.
¿Para qué se utiliza HTML?
HTML se utiliza para crear el contenido visible de una página web, como texto, imágenes, enlaces y tablas. También se utiliza para definir la estructura de una página web, como el encabezado, el cuerpo y el pie de página.
Características de HTML
HTML es un lenguaje de marcado relativamente simple, con un conjunto de reglas básicas. Estas reglas se utilizan para definir el contenido y la estructura de una página web.
Algunas de las características básicas de HTML incluyen:
- Etiquetas: HTML utiliza etiquetas para definir el contenido y la estructura de una página web. Las etiquetas se utilizan para abrir y cerrar un elemento HTML.
- Atributos: Los atributos proporcionan información adicional sobre un elemento HTML. Los atributos se colocan entre corchetes angulares después del nombre de la etiqueta.
- Comentarios: Los comentarios se utilizan para ocultar texto del navegador web. Los comentarios se inician con el símbolo «.
Sintaxis de HTML
La sintaxis de HTML es sencilla y fácil de aprender. Los elementos HTML se definen utilizando etiquetas. Las etiquetas se utilizan para abrir y cerrar un elemento HTML.
La estructura básica de una etiqueta HTML es la siguiente:
<etiqueta atributo1="valor1" atributo2="valor2"> contenido </etiqueta>
Por ejemplo, la siguiente etiqueta define un encabezado de nivel 1:
<h1>Encabezado de nivel 1</h1>
Ejercicio
Para practicar la sintaxis de HTML, intenta crear una página web simple con un encabezado de nivel 1 y un párrafo. Puedes utilizar el siguiente código como punto de partida:
HTML
<!DOCTYPE html> <html lang="es"> <head> <title>Mi primera página web</title> </head> <body> <h1>Encabezado de nivel 1</h1> <p>Este es un párrafo.</p> </body> </html>
Guarda el archivo con la extensión .html. Puedes abrirlo en un navegador web para ver el resultado.
2. Creación de un archivo HTML
Para crear un archivo HTML, necesitarás un editor de texto o un IDE. Cualquier editor de texto puede utilizarse para crear un archivo HTML, pero un IDE puede proporcionarte algunas funciones adicionales, como la autocompletación y la validación de código.
Para crear un archivo HTML con un editor de texto:
- Abre un editor de texto.
- Escribe el código HTML que desees.
- Guarda el archivo con la extensión
.html.
Para crear un archivo HTML con un IDE:
- Abre un IDE.
- Crea un nuevo proyecto.
- Selecciona el tipo de proyecto «HTML».
- Escribe el código HTML que desees.
- Guarda el archivo con la extensión
.html.
Ejemplo:
Para crear una página web simple con un encabezado de nivel 1 y un párrafo, puedes utilizar el siguiente código:
HTML
<!DOCTYPE html> <html lang="es"> <head> <title>Mi primera página web</title> </head> <body> <h1>Encabezado de nivel 1</h1> <p>Este es un párrafo.</p> </body> </html>
Crear un archivo HTML con Bloc de notas es un proceso sencillo. Aquí tienes los pasos básicos:
- Abre Bloc de notas:
- Haz clic derecho en el escritorio o en la carpeta donde desees guardar el archivo.
- Selecciona «Nuevo» y luego «Documento de texto» (puede aparecer como «Archivo de texto» en algunos sistemas).
- Escribe el código HTML:
- Escribe o copia y pega tu código HTML en el Bloc de notas.
- Guarda el archivo:
- Haz clic en «Archivo» en la esquina superior izquierda.
- Selecciona «Guardar como…»
- En el cuadro de diálogo, elige la ubicación donde deseas guardar el archivo.
- En el campo «Nombre de archivo», escribe un nombre seguido de «.html» (por ejemplo, «miarchivo.html»).
- En el campo «Guardar como tipo», selecciona «Todos los archivos».
- Haz clic en «Guardar».
Ahora has creado tu archivo HTML con Bloc de notas. Puedes abrirlo en un navegador web para ver cómo se renderiza tu página web. Ten en cuenta que el Bloc de notas no ofrece funciones avanzadas de desarrollo web, por lo que es recomendable utilizar un editor de código más avanzado para proyectos más grandes.
3. Estructura de una página web
Una página web tiene una estructura básica que se compone de tres partes principales:
- Encabezado (head): El encabezado contiene información sobre la página web, como el título, los metadatos y los estilos.
- Cuerpo (body): El cuerpo contiene el contenido visible de la página web, como texto, imágenes, enlaces y tablas.
- Pie de página (footer): El pie de página contiene información adicional sobre la página web, como los derechos de autor, la dirección del sitio web y los enlaces a otras páginas.
Encabezado (head)
El encabezado se utiliza para proporcionar información sobre la página web, como el título, los metadatos y los estilos.
Título (title)
El título es el texto que aparece en la pestaña del navegador web. Se define utilizando la etiqueta title.
HTML
<title>Mi primera página web</title>
Metadatos
Los metadatos son datos que proporcionan información adicional sobre la página web. Se definen utilizando las etiquetas meta.
HTML
<meta charset="UTF-8"> <meta name="description" content="Esta es la descripción de mi página web."> <meta name="keywords" content="HTML, CSS, JavaScript">
Estilos
Los estilos se utilizan para modificar el aspecto de la página web. Se definen utilizando las etiquetas link y style.
HTML
<link rel="stylesheet" href="style.css">
<style>
body {
background-color: #ffffff;
color: #000000;
}
</style>
Cuerpo (body)
El cuerpo contiene el contenido visible de la página web, como texto, imágenes, enlaces y tablas.
Texto
El texto se define utilizando la etiqueta p.
HTML
<p>Este es un párrafo.</p>
Imágenes
Las imágenes se definen utilizando la etiqueta img.
HTML
<img src="image.jpg" alt="Esta es una imagen.">
Enlaces
Los enlaces se definen utilizando la etiqueta a.
HTML
<a href="https://www.google.com">Google</a>
Tablas
Las tablas se definen utilizando las etiquetas table, tr y td.
HTML
<table>
<tr>
<td>Encabezado 1</td>
<td>Encabezado 2</td>
</tr>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
</tr>
</table>
Pie de página (footer)
El pie de página contiene información adicional sobre la página web, como los derechos de autor, la dirección del sitio web y los enlaces a otras páginas.
HTML
<footer> <p>© 2023 Lavandería ABC</p> <p>www.lavanderiaabc.com</p> </footer>
Ejemplo:
Para crear una página web simple con un encabezado de nivel 1, un párrafo, una imagen y un enlace, puedes utilizar el siguiente código:
HTML
<!DOCTYPE html> <html lang="es"> <head> <title>Mi primera página web</title> </head> <body> <h1>Encabezado de nivel 1</h1> <p>Este es un párrafo.</p> <img src="image.jpg" alt="Esta es una imagen."> <a href="https://www.google.com">Google</a> </body> </html>
Guarda el archivo con la extensión .html. Puedes abrirlo en un navegador web para ver el resultado.
En esta sección has aprendido sobre la estructura básica de una página web. En la siguiente sección aprenderás sobre los elementos básicos de HTML.
4. Elementos básicos de HTML
HTML tiene una serie de elementos básicos que se utilizan para crear el contenido visible de una página web. Algunos de los elementos básicos de HTML incluyen:
- Encabezados (h1 al h6): Los encabezados se utilizan para resaltar el texto y organizar el contenido de una página web.
- Párrafos (p): Los párrafos se utilizan para organizar el texto en bloques.
- Imágenes (img): Las imágenes se utilizan para agregar imágenes a una página web.
- Enlaces (a): Los enlaces se utilizan para crear hipervínculos a otras páginas web o recursos.
- Tablas (table): Las tablas se utilizan para organizar datos en filas y columnas.
Encabezados (h1-h6)
Los encabezados se utilizan para resaltar el texto y organizar el contenido de una página web. Se definen utilizando las etiquetas h1 a h6, donde h1 es el encabezado de mayor nivel y h6 es el encabezado de menor nivel.
HTML
<h1>Encabezado de nivel 1</h1> <h2>Encabezado de nivel 2</h2> <h3>Encabezado de nivel 3</h3> <h4>Encabezado de nivel 4</h4> <h5>Encabezado de nivel 5</h5> <h6>Encabezado de nivel 6</h6>
Párrafos (p)
Los párrafos se utilizan para organizar el texto en bloques. Se definen utilizando la etiqueta p.
HTML
<p>Este es un párrafo.</p> <p>Este es otro párrafo.</p>
Imágenes (img)
Las imágenes se utilizan para agregar imágenes a una página web. Se definen utilizando la etiqueta img.
HTML
<img src="image.jpg" alt="Esta es una imagen.">
Enlaces (a)
Los enlaces se utilizan para crear hipervínculos a otras páginas web o recursos. Se definen utilizando la etiqueta a.
HTML
<a href="https://www.google.com">Google</a>
Tablas (table)
Las tablas se utilizan para organizar datos en filas y columnas. Se definen utilizando las etiquetas table, tr y td.
HTML
<table>
<tr>
<td>Encabezado 1</td>
<td>Encabezado 2</td>
</tr>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
</tr>
</table>
Ejemplo:
Para crear una página web simple con un encabezado de nivel 1, un párrafo, una imagen y un enlace, puedes utilizar el siguiente código:
HTML
<!DOCTYPE html> <html lang="es"> <head> <title>Mi primera página web</title> </head> <body> <h1>Encabezado de nivel 1</h1> <p>Este es un párrafo.</p> <img src="image.jpg" alt="Esta es una imagen."> <a href="https://www.google.com">Google</a> </body> </html>
5. Ejemplo práctico: Página web para una lavandería
Para crear una página web para un negocio de lavandería, necesitarás los siguientes elementos:
- Encabezado de nivel 1: El encabezado de nivel 1 debe contener el nombre del negocio de lavandería.
- Párrafos: Los párrafos deben contener información sobre los servicios que ofrece el negocio de lavandería, sus precios, su ubicación y sus horarios de atención.
- Imágenes: Las imágenes pueden utilizarse para mostrar los servicios que ofrece el negocio de lavandería, su ubicación o sus horarios de atención.
- Enlaces: Los enlaces pueden utilizarse para conectar a los visitantes con otras páginas web, como su página de contacto o su página de precios.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<title>Lavandería ABC</title>
</head>
<body>
<h1>Lavandería ABC</h1>
<p>Lavandería ABC es una lavandería autoservicio que ofrece los siguientes servicios:</p>
<ul>
<li>Lavandería</li>
<li>Secado</li>
<li>Planchado</li>
<li>Limpieza de alfombras</li>
</ul>
<p>Nuestros precios son los siguientes:</p>
<table>
<tr>
<th>Servicio</th>
<th>Precio</th>
</tr>
<tr>
<td>Lavandería</td>
<td>\$10 por carga</td>
</tr>
<tr>
<td>Secado</td>
<td>\$5 por carga</td>
</tr>
<tr>
<td>Planchado</td>
<td>\$10 por prenda</td>
</tr>
<tr>
<td>Limpieza de alfombras</td>
<td>\$20 por metro cuadrado</td>
</tr>
</table>
<p>Estamos ubicados en la siguiente dirección:</p>
<p>Calle 123, número 456</p>
<p>Nuestros horarios de atención son los siguientes:</p>
<p>Lunes a viernes de 8:00 a 20:00 horas</p>
<p>Sábados de 9:00 a 14:00 horas</p>
<a href="contacto.html">Contacto</a>
<a href="precios.html">Precios</a>
</body>
</html>
Guarda el archivo con la extensión .html. Puedes abrirlo en un navegador web para ver el resultado.
Este es solo un ejemplo básico de una página web para un negocio de lavandería. Puedes personalizarlo para incluir la información y los elementos que sean más relevantes para tu negocio.
Consejos para crear una página web para un negocio de lavandería:
- Utiliza imágenes de alta calidad para mostrar tus servicios y tu ubicación.
- Escribe un texto claro y conciso que sea fácil de entender.
- Incluye información sobre tus precios y horarios de atención.
- Proporciona enlaces a otras páginas web, como tu página de contacto o tu página de precios.
Aquí te dejo un ejemplo de cómo podrías agregar estilos CSS para darle un aspecto más profesional a tu HTML. He creado un estilo básico para mejorar la apariencia de los elementos. Puedes ajustar y personalizar según tus necesidades:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Lavandería ABC</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: #333;
text-align: center;
}
p {
color: #555;
margin-bottom: 15px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 5px;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
a {
display: block;
margin-top: 10px;
text-decoration: none;
padding: 10px;
background-color: #4CAF50;
color: #fff;
text-align: center;
}
a:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>Lavandería ABC</h1>
<p>Lavandería ABC es una lavandería autoservicio que ofrece los siguientes servicios:</p>
<ul>
<li>Lavandería</li>
<li>Secado</li>
<li>Planchado</li>
<li>Limpieza de alfombras</li>
</ul>
<p>Nuestros precios son los siguientes:</p>
<table>
<tr>
<th>Servicio</th>
<th>Precio</th>
</tr>
<tr>
<td>Lavandería</td>
<td>\$10 por carga</td>
</tr>
<tr>
<td>Secado</td>
<td>\$5 por carga</td>
</tr>
<tr>
<td>Planchado</td>
<td>\$10 por prenda</td>
</tr>
<tr>
<td>Limpieza de alfombras</td>
<td>\$20 por metro cuadrado</td>
</tr>
</table>
<p>Estamos ubicados en la siguiente dirección:</p>
<p>Calle 123, número 456</p>
<p>Nuestros horarios de atención son los siguientes:</p>
<p>Lunes a viernes de 8:00 a 20:00 horas</p>
<p>Sábados de 9:00 a 14:00 horas</p>
<a href="contacto.html">Contacto</a>
<a href="precios.html">Precios</a>
</body>
</html>
Este código CSS agrega estilos básicos, como colores, márgenes y bordes, para mejorar la presentación de tu página HTML. Puedes ajustar estos estilos según tus preferencias y necesidades de diseño.
Agregando imagenes quedaria así:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Lavandería ABC</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: #333;
text-align: center;
}
p {
color: #555;
margin-bottom: 15px;
}
ul {
list-style-type: none;
padding: 0;
display: flex;
justify-content: space-between;
}
li {
width: 25%;
margin-bottom: 5px;
text-align: center;
}
table {
width: 80%; /* Ancho del 80% del contenedor */
margin: 0 auto; /* Centra la tabla horizontalmente */
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
img {
max-width: 100%;
height: auto;
}
a {
display: block;
margin-top: 10px;
text-decoration: none;
padding: 10px;
background-color: #4CAF50;
color: #fff;
text-align: center;
}
a:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>Lavandería ABC</h1>
<p>Lavandería ABC es una lavandería autoservicio que ofrece los siguientes servicios:</p>
<ul>
<li><img src="https://cdn2.iconfinder.com/data/icons/laundry-18/64/Laundry-03-2-256.png" alt="Icono Lavandería" width="64" height="64"> Lavandería</li>
<li><img src="https://cdn2.iconfinder.com/data/icons/laundry-18/64/Laundry-02-512.png" alt="Icono Lavandería" width="64" height="64"> Secado</li>
<li><img src="https://cdn4.iconfinder.com/data/icons/laundry-time/100/Ironing-256.png" alt="Icono Lavandería" width="64" height="64"> Planchado</li>
<li><img src="https://cdn4.iconfinder.com/data/icons/laundry-time/100/perfume-512.png" alt="Icono Lavandería" width="64" height="64"> Limpieza de alfombras</li>
</ul>
<p>Nuestros precios son los siguientes:</p>
<table>
<tr>
<th>Servicio</th>
<th>Precio</th>
<th></th>
</tr>
<tr>
<td>Lavandería</td>
<td>$10 por carga</td>
<td><img src="https://cdn2.iconfinder.com/data/icons/laundry-18/64/Laundry-03-2-256.png" alt="Icono Lavandería" width="64" height="64"></td>
</tr>
<tr>
<td>Secado</td>
<td>$5 por carga</td>
<td><img src="https://cdn2.iconfinder.com/data/icons/laundry-18/64/Laundry-02-512.png" alt="Icono Lavandería" width="64" height="64"></td>
</tr>
<tr>
<td>Planchado</td>
<td>$10 por prenda</td>
<td><img src="https://cdn4.iconfinder.com/data/icons/laundry-time/100/Ironing-256.png" alt="Icono Lavandería" width="64" height="64"></td>
</tr>
<tr>
<td>Limpieza de alfombras</td>
<td>$20 por metro cuadrado</td>
<td><img src="https://cdn4.iconfinder.com/data/icons/laundry-time/100/perfume-512.png" alt="Icono Lavandería" width="64" height="64"></td>
</tr>
</table>
<p>Estamos ubicados en la siguiente dirección:</p>
<p>Calle 123, número 456</p>
<p>Nuestros horarios de atención son los siguientes:</p>
<p>Lunes a viernes de 8:00 a 20:00 horas</p>
<p>Sábados de 9:00 a 14:00 horas</p>
<a href="contacto.html">Contacto</a>
<a href="precios.html">Precios</a>
</body>
</html>
En este tutorial has aprendido los conceptos básicos de HTML, cómo crear un archivo HTML y cómo utilizar la estructura básica de una página web. También has aprendido a crear una página web para un negocio de lavandería.
Con estos conocimientos, podrás crear tu propia página web para tu negocio de lavandería.
Siguientes pasos
Para seguir aprendiendo sobre HTML, puedes consultar los siguientes recursos:
- W3Schools: W3Schools es un sitio web que ofrece tutoriales, referencias y ejercicios sobre HTML, CSS y JavaScript.
- Codecademy: Codecademy es un sitio web que ofrece cursos interactivos sobre HTML, CSS y JavaScript.
- FreeCodeCamp: FreeCodeCamp es una organización sin fines de lucro que ofrece cursos gratuitos sobre programación.
También puedes encontrar muchos recursos en línea, como libros, artículos y videos.
¡Buena suerte con tu página web!