En este taller básico de HTML y CSS, dirigido por Antonio Tempestili, docente de desarrollo web en un instituto de Educación Tecnológica, aprenderemos a crear una estructura básica de una página web desde cero. El taller está diseñado para quienes no tienen conocimiento previo o tienen conocimientos mínimos en diseño web.
¿Qué es HTML?
HTML significa Hypertext Markup Language. Es el lenguaje de marcado estándar utilizado para crear y diseñar páginas web. A través de etiquetas y atributos, HTML estructura el contenido de la web.
Etiquetas básicas de HTML
Para comenzar, abriremos un simple bloc de notas y escribiremos nuestro primer código HTML. La etiqueta más básica es la h1, que se utiliza para los títulos principales. Aquí un ejemplo:
<h1> Nuestro primer código </h1>Todas las etiquetas en HTML deben tener una etiqueta de apertura y una de cierre. Por ejemplo, la etiqueta p para párrafos se ve así:
<p> Este es un párrafo de ejemplo. </p>HTML y SEO
Las etiquetas HTML no solo estructuran el contenido, sino que también ayudan en el SEO (Search Engine Optimization). Las etiquetas h1 tienen mayor relevancia que las h2, por lo tanto, deben usarse adecuadamente para títulos y subtítulos.
Añadiendo imágenes y enlaces
Para agregar una imagen, utilizamos la etiqueta img, y para crear enlaces utilizamos la etiqueta a. Aquí un ejemplo de ambos:
<img src="harry.jpg" alt="Harry Potter">
<a href="http://www.google.com" target="_blank">Más info</a>Formularios en HTML
Los formularios permiten a los usuarios interactuar con la página web, enviando datos como nombre, email, y consultas. Un formulario básico en HTML se estructura de la siguiente manera:
<form>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<label for="apellido">Apellido:</label>
<input type="text" id="apellido" name="apellido">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="consulta">Consulta:</label>
<textarea id="consulta" name="consulta"></textarea>
<button type="submit">Enviar</button>
</form>
CSS: Estilizando tu página web
CSS (Cascading Style Sheets) es el lenguaje que utilizamos para estilizar y diseñar las páginas web. Un archivo CSS define cómo se mostrará el HTML en pantalla. Para conectar un archivo CSS a nuestro HTML, utilizamos la etiqueta link en el head del documento HTML.
<link rel="stylesheet" href="estilos.css">Un ejemplo básico de CSS para estilizar un botón puede ser el siguiente:
.boton {
color: white;
background-color: red;
padding: 10px;
font-size: 20px;
border-radius: 10px;
}
Conclusión
Hemos visto los fundamentos de HTML y CSS, desde crear etiquetas básicas hasta estilizar elementos de una página web. Para más información y continuar aprendiendo, pueden visitar el sitio de Tecnoeducación. Esperamos que este taller les haya sido útil para comenzar su camino en el desarrollo web. Recuerden practicar y experimentar con diferentes etiquetas y estilos para mejorar sus habilidades. ¡Hasta la próxima!
