sábado, 30 de noviembre de 2024

Párrafos (etiqueta

) y Formato del Texto:

 La etiqueta <p> define un párrafo. Puedes usar otras etiquetas dentro de los párrafos para dar formato, como negrita, cursiva o subrayado.

Negrita (Etiqueta <strong> o <b>):

  • <strong>: Indica texto importante (semánticamente relevante).
  • <b>: Solo aplica el estilo visual sin semántica.

Ejemplo:

<p>Este es un texto <strong>importante</strong>.</p> <p>Este texto está en <b>negrita</b>.</p>

Cursiva (Etiqueta <em> o <i>):

  • <em>: Indica énfasis en el texto.
  • <i>: Solo aplica el estilo visual.

Ejemplo:

<p>Este texto tiene un <em>énfasis especial</em>.</p> <p>Este texto está en <i>cursiva</i>.</p>

Subrayado (Etiqueta <u>):

Para subrayar texto.

<p>Este texto está <u>subrayado</u>.</p>

Combinación de estilos:

Puedes combinar varias etiquetas para un formato más complejo.

<p>Texto <strong>en negrita</strong> y <em>cursiva</em>, además de estar <u>subrayado</u>.</p>

viernes, 29 de noviembre de 2024

Estructura Básica de un Documento HTML

El código de una página HTML sigue un esquema jerárquico, en el que cada sección tiene una función específica. Una estructura básica se ve así:

<!DOCTYPE html> <html> <head> <title>Mi Página Web</title> </head> <body> <header> <h1>Bienvenido a Mi Página</h1> </header> <main> <p>Este es el contenido principal.</p> </main> <footer> <p>© 2024 Mi Sitio Web</p> </footer> </body> </html>

Explicación de las Secciones Principales

1. <head>: La Información para el Navegador

El <head> contiene metadatos, que no se muestran directamente en la página pero son esenciales para el navegador y los motores de búsqueda.


Incluye:

  • Título de la página: Lo que aparece en la pestaña del navegador.
  • Hojas de estilo y scripts: Archivos externos de diseño (CSS) o interactividad (JavaScript).
  • Metadatos: Información como la codificación del texto o descripciones para SEO.

Ejemplo:

<head>
<title>Mi Página Web</title> <meta charset="UTF-8"> <link rel="stylesheet" href="estilos.css"> </head>

2. <body>: El Contenido Visible

El <body> contiene todo lo que los usuarios ven e interactúan en la página, como:

  • Texto, encabezados, imágenes, videos y enlaces.
  • Botones, formularios y cualquier elemento interactivo.

Ejemplo:

<body>
<h1>Bienvenido</h1> <p>Este es el contenido principal de mi página.</p> </body>

3. <footer>: El Pie de Página

El <footer> es una sección especial que se ubica al final del documento. Contiene:

  • Información adicional como derechos de autor o enlaces legales.
  • Enlaces a redes sociales, contacto o créditos.

Ejemplo:

<footer>
<p>© 2024 Mi Sitio Web. Todos los derechos reservados.</p> </footer>

Relación Entre las Secciones

El <head> prepara la página para el navegador, el <body> muestra el contenido principal y el <footer> cierra con información adicional. Juntas, forman un documento HTML completo y funcional.

Conclusión

Con una estructura básica y el uso de <head>, <body> y <footer>, puedes empezar a construir páginas web bien organizadas. Este es solo el primer paso para adentrarte en el desarrollo web. ¡Manos a la obra!

jueves, 28 de noviembre de 2024

Encabezados HTML

Encabezados (etiquetas <h1> a <h6>):


Los encabezados se utilizan para jerarquizar el contenido, desde el título principal hasta subtítulos menos relevantes.

  • <h1> es el más importante (normalmente único en la página).
  • <h6> es el menos importante.

Ejemplo:

<h1>Título Principal</h1>
<h2>Subtítulo Nivel 2</h2> <h3>Subtítulo Nivel 3</h3> <h4>Subtítulo Nivel 4</h4> <h5>Subtítulo Nivel 5</h5> <h6>Subtítulo Nivel 6</h6>

Los navegadores aplican estilos predeterminados a los encabezados, como tamaños de fuente y negritas, pero puedes personalizarlos con CSS.

miércoles, 27 de noviembre de 2024

Ejemplo Práctico: Receta con HTML, CSS y JavaScript


HTML:

<div id="receta"> <h1>Arroz con Leche</h1> <ul> <li>1kg de arroz blanco</li> <li>3 litros de leche</li> <li>1 limón</li> <li>2 palos de canela</li> </ul> <button onclick="mostrarMensaje()">Ver Consejo</button> </div>

CSS:

#receta { background-color: #fff8e1; border: 1px solid #ddd; padding: 20px; font-family: 'Verdana', sans-serif; }

JavaScript:

function mostrarMensaje() { alert("Recuerda remover la canela antes de servir."); }

Estas ideas no solo enseñan las bases de cada tecnología, sino que también muestran cómo combinarlas para crear páginas funcionales y atractivas.

martes, 26 de noviembre de 2024

JavaScript: Comportamiento e Interactividad

JavaScript es el lenguaje que da vida al HTML. Permite añadir interactividad a las páginas web.

Ejemplo de interacción:

var numClicks = 0; function contarClicks() { numClicks++; if (numClicks > 3) { alert("¡Deja de hacer click!"); } }

Casos de uso:

  • Validar formularios antes de enviarlos.
  • Crear efectos visuales, como animaciones.
  • Cambiar el contenido de la página dinámicamente.

lunes, 25 de noviembre de 2024

CSS: Estilización del Contenido

CSS (Cascading Style Sheets) complementa el HTML definiendo cómo se verá el contenido. Nos permite personalizar colores, tipografía, tamaños, bordes y espacios.

Ejemplo básico:

p { color: red; /* Cambia el color del texto */ }

Aplicaciones comunes:

  • Colores de fondo y texto:
    body { background-color: #f4f4f4; color: #333; }
  • Bordes y márgenes:
    div { border: 2px solid #000; margin: 10px; padding: 5px; }
  • Tipografía:
    h1 { font-family: Arial, sans-serif; font-size: 24px; }

domingo, 24 de noviembre de 2024

HTML: Estructura y Contenido en las Páginas Web

El HTML (HyperText Markup Language) es el lenguaje fundamental de las páginas web. Su objetivo principal es estructurar el contenido que vemos en el navegador, estableciendo relaciones con otros recursos como estilos (CSS), imágenes, sonidos y scripts (JavaScript).

Características principales:

  • Es el documento base desde el que se llaman otros recursos.
  • Sus unidades básicas son las etiquetas, que definen el tipo de contenido.
    <p>Este es un párrafo en HTML.</p>

Atributos:

Las etiquetas pueden incluir atributos para aportar más información al navegador:

  • ID: Identifica un elemento único dentro del documento.
    <h1 id="titulo-principal">Bienvenidos</h1>
  • Class: Aplica estilos a múltiples elementos con la misma clase.
    <p class="texto-destacado">Este párrafo es importante.</p>

Comentarios:

Son útiles para incluir notas sin que se muestren en la página.

<!-- Este es un comentario -->

Imágenes:

Usamos la etiqueta <img> para insertar imágenes. Es crucial que el atributo src sea correcto y el atributo alt describa la imagen para accesibilidad.

<img src="img/gato.jpg" alt="Imagen de un gato feliz">