El arte de construir una página Web

¡Bienvenidos a Ratones programadores el blog donde la magia del desarrollo web se hace realidad! Aquí, no solo aprenderás sobre HTML, CSS y JavaScript, sino que también descubrirás cómo estos tres lenguajes se combinan para crear experiencias web interactivas, atractivas y funcionales.

Prepárate para un viaje lleno de etiquetas, selectores, funciones y proyectos emocionantes. ¡Desata tu creatividad y comencemos!

HTML: La Estructura de la Web

¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje de marcado estándar para crear la estructura de las páginas web. Define los elementos que componen una página, como encabezados, párrafos, listas, enlaces, imágenes y más. HTML utiliza etiquetas para indicar cómo debe interpretarse el contenido.

Elementos Clave de HTML

Etiquetas: Las etiquetas HTML son palabras clave encerradas entre corchetes angulares (< y >). La mayoría de las etiquetas vienen en pares: una etiqueta de apertura (<etiqueta>) y una etiqueta de cierre (</etiqueta>).
Atributos: Los atributos proporcionan información adicional sobre los elementos HTML. Se especifican dentro de la etiqueta de apertura y consisten en un nombre y un valor (nombre="valor").
Elementos: Un elemento HTML es todo lo que está entre la etiqueta de apertura y la etiqueta de cierre, incluyendo el contenido y otros elementos anidados.

Estructura Básica de un Documento HTML:

<!DOCTYPE html>: Declara el tipo de documento como HTML5.
<html lang="es">: Define el idioma del documento como español.
<head>: Contiene metadatos sobre el documento (título, configuración, enlaces a CSS, etc.).
<meta charset="UTF-8">: Define la codificación de caracteres como UTF-8.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Configura la ventana gráfica para dispositivos móviles.
<title>Título de la Página</title>: Define el título que se muestra en la pestaña del navegador.
<body>: Contiene el contenido visible de la página.

Etiquetas HTML Comunes

<h1> a <h6>: Define los encabezados de diferentes niveles.
<p>: Define un párrafo de texto.
<ul>: Define una lista no ordenada.
- <li>: Define un elemento de la lista.
<ol>: Define una lista ordenada.
- <li>: Define un elemento de la lista.
<a>: Define un enlace.
- href: Especifica la URL del enlace.
<img>: Define una imagen.
- src: Especifica la URL de la imagen.
- alt: Define un texto alternativo para la imagen (importante para accesibilidad y SEO).
<div>: Define una división o sección en un documento HTML.
<span>: Define una sección en línea en un documento HTML.
<form>: Define un formulario HTML para la entrada del usuario.
<input>: Define un campo de entrada en un formulario.
<button>: Define un botón.
<textarea>: Define un área de texto de múltiples líneas.
<select>: Define una lista desplegable.
<label>: Define una etiqueta para un elemento de formulario.
<table>: Define una tabla.
- <tr>: Define una fila en una tabla.
- <td>: Define una celda en una tabla.
- <thead>: Define la cabecera de una tabla.
- <tbody>: Define el cuerpo de una tabla.
- <tfoot>: Define el pie de una tabla.

Semántica HTML5

Las etiquetas semánticas de HTML5 ayudan a definir la estructura de tu página web de manera más clara y significativa.

<article>: Representa un artículo independiente en un documento.
<aside>: Representa contenido relacionado pero secundario al contenido principal.
<nav>: Define una sección de navegación.
<header>: Define la cabecera de un documento o sección.
<footer>: Define el pie de página de un documento o sección.
<figure>: Representa contenido auto-contenido, como una imagen, un diagrama o un video.
<figcaption>: Define una leyenda para un elemento <figure>.
<main>: Define el contenido principal de un documento.
<section>: Define una sección genérica en un documento.

CSS: El Estilo de la Web

¿Qué es CSS?

CSS (Cascading Style Sheets) es el lenguaje utilizado para definir el estilo y la presentación de los elementos HTML en una página web. CSS permite controlar colores, fuentes, márgenes, padding, diseño y más.

Principales Editores de HTML

Visual Studio Code (VS Code): Es considerado la opción más poderosa y flexible actualmente, con gran cantidad de extensiones gratuitas.

Sublime Text : Conocido por ser ligero, rápido y minimalista, ideal para edición rápida.

Brackets : Enfocado en diseño web con una "vista previa en vivo" que permite ver los cambios en el navegador instantáneamente.

Atom : Editor de código abierto desarrollado por GitHub, altamente personalizable.

Notepad++ : Editor gratuito y muy ligero, exclusivo para Windows, ideal para principiantes.

Adobe Dreamweaver : Una herramienta profesional de pago, útil para quienes prefieren un entorno más visual o integrado.

Bluefish : Una opción de código abierto, ligera y rápida, potente para desarrolladores avanzados.

Ratones programadores

Buscar este blog