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.

Aplicación de Css a una estructura de Html

. ¿Qué es CSS? CSS ( Cascading Style Sheets u Hojas de Estilo en Cascada) es un lenguaje de estilo que se utiliza para describir la presentación de documentos HTML (o XML, incluyendo lenguajes como SVG o XHTML). CSS define cómo deben mostrarse los elementos HTML en la pantalla, en papel, o en otros medios. En otras palabras, HTML proporciona la estructura de la página web, mientras que CSS controla su apariencia visual 6 9 .CSS permite separar el contenido de la presentación, lo cual facilita la accesibilidad del contenido, ofrece mayor flexibilidad y control sobre las características de presentación, permite que múltiples páginas web compartan el mismo formato (reduciendo la complejidad y repetición), y mejora la velocidad de carga de las páginas gracias al almacenamiento en caché del archivo CSS 7 . Métodos para aplicar CSS Hay tres formas principales de aplicar CSS a un documento HTML: Hojas de estilo externas : Se define en un archivo .css separado y se vincula al documento HTML...

Ratones programadores

Buscar este blog