HTML semántico

HTML semántico

HTML semántico es el uso de etiquetas de HTML que describen el significado del contenido que contienen, en lugar de solo estructurarlo visualmente. Esto mejora la accesibilidad, el SEO (posicionamiento en buscadores), y la mantenibilidad del código.

Ejemplo de HTML no semantico

<div class="header">Mi sitio</div>
<div class="nav">Inicio | Contacto</div>
<div class="content">Bienvenidos a mi página...</div>
<div class="footer">© 2025</div>

Ejemplo de HTML semántico

<header>Mi sitio</header>
<nav>Inicio | Contacto</nav>
<main>
  <section>
    <h1>Bienvenidos a mi página</h1>
    <p>Contenido principal...</p>
  </section>
</main>
<footer>© 2025</footer>

 

 

Beneficios del HTML semántico

✅ Mejora el SEO: Google entiende mejor el contenido.

 ♿ Accesibilidad: lectores de pantalla pueden navegar mejor.

🧹 Código limpio y mantenible: más fácil de entender para otros desarrolladores.

🧠 Buena práctica profesional: demuestra conocimiento técnico.

Etiquetas semánticas mas comunes

Etiqueta     Uso
    
    <header>     Encabezado del sitio o de una sección
    <nav>     Área de navegación (menú)
    <main>     Contenido principal de la página
    <section>     Sección de contenido relacionada
    <article>     Contenido independiente (como un post de blog)
    <aside>     Información secundaria o complementaria
    <footer>     Pie de página o sección
    <figure>     Contenedor de imagen o gráfico
    <figcaption>     Título o descripción de una imagen
    <time>     Representa una fecha u hora
    <mark>     Texto resaltado o marcado
    <address>     Información de contacto     

Fuente:

https://www.w3schools.com/html/html5_semantic_elements.as

https://validator.w3.org/#validate_by_upload+with_options

https://gsnedders.html5.org/outliner/

    

 

TP N° 7 Mantenimiento de software Gparted segunda parte

Para el alumno JMG (cambiar por sus iniciales) realizar los siguientes ejercicios y documentarlos 

5. Redimensionar una partición existente sin pérdida de datos (sin aplicar los cambios)

• Simulá la reducción de una partición existente (por ejemplo ext4 o NTFS) que tenga como etiqueta Datos_JMG.

• Capturá pantalla del tamaño original y del nuevo tamaño propuesto (sin aplicar los cambios).

• Escribí los pasos que realizaste y explicá qué precauciones tomarías si esto se hiciera en una computadora con datos reales.

---

6. Eliminar y recrear una tabla de particiones (sin aplicar los cambios)

• Simulá eliminar todas las particiones de un dispositivo (como un pendrive de prueba).

• Creá una nueva tabla de particiones GPT y luego una partición primaria de tipo ext4 con etiqueta Backup_JMG.

• Capturá el proceso y explicá brevemente qué diferencia hay entre una tabla GPT y una MBR.

• Escribí para qué usarías esta nueva partición como alumno (por ejemplo: backups de proyectos de programación).

---

7. Cambiar el sistema de archivos de una partición (sin aplicar los cambios)

• Seleccioná una partición llamada Trabajo_JMG en formato NTFS.

• Simulá convertirla a ext4 y capturá el proceso (sin aplicar).

• Explicá en una oración por qué podrías querer hacer esto si decidieras usar Linux como único sistema operativo.

---

8. Verificar y reparar errores en una partición

• Insertá un pendrive con una partición llamada USB_JMG.

• Usá GParted para ejecutar la función “Check”.

• Capturá pantalla del análisis y anotá si hubo errores.

• Escribí una breve conclusión sobre la importancia de esta herramienta.

---

9. Cambiar el nombre (etiqueta) y el UUID de una partición

• Seleccioná una partición y cambiá su nombre a Proyectos_JMG.

• Simulá cambiar el UUID (sin aplicar).

• Explicá qué es el UUID y por qué puede generar problemas si se cambia sin cuidado.

Transformación Digital en la UNSa: Menos Papel, Más Eficiencia y Sostenibilidad

 

Desde la implementación de Sudocu (Sistema Único Documental) en la UNSa, hemos logrado crear 751.751 páginas de documentos digitales, generando un impacto positivo en el medio ambiente y optimizando la gestión administrativa.
 

📉 Ahorro significativo:
📄 1.503 resmas de papel menos en uso.
🌳 93 árboles salvados.
💧 Más de 7,5 millones de litros de agua conservados.
 

Estos números reflejan cómo la transformación digital no solo mejora la eficiencia, sino que también tiene un impacto ambiental directo.

 

 (1) Especificaciones resma: formato hoja A4, dimensión 210 x 297 x 55 mm de 75grs / m2. Hojas 500. Peso: 2,464 kgrs.
(2) 1 árbol cada 16 resmas. Fuente: https://www.lavoz.com.ar/espacio-de-marca/cuanto-papel-usas/
(3) 10 litros de agua aproximados son necesarios para producir 1 hoja de papel A4. Fuente: https://www.conagua.gob.mx/CONAGUA07/Contenido/Documentos/Infograf%C3%ADa%20Huella%20H%C3%ADdrica.pdf

hashtag#TransformaciónDigital hashtag#Sustentabilidad hashtag#Innovación hashtag#GestiónDocumentalDigital hashtag#UNSa hashtag#Sudocu

Etiqueta id en html

 Estructura básica

Crea una página HTML básica. Incluye las etiquetas necesarias (<html>, <head>, <body>).

Secciones identificadas
Dentro del <body>, crea tres secciones principales:

• header con id="header"
• main con id="content"
• footer con id="footer

 Encabezado y Contenido

En el header, incluye un título <h1> con el texto "Bienvenidos al Trabajo Práctico".
En main, crea una lista <ul> con id="topics" con tres temas a eleccion.

Pie de página
En el footer, agrega un <p> con un texto.

 

Ejercicio 2: Estilizado con CSS y id

1. Estilos básicos
   En el <head>, incluye una etiqueta <style> y aplica estilos a cada sección usando su id:

   • header: Fondo de color claro y texto centrado.
   • content: Color de fondo suave y un borde alrededor.
   • footer: Texto en cursiva y fondo de color más oscuro.

2. Estilo de lista
   Usa el id="topics" para dar un estilo específico a los elementos de la lista (ej., color de texto, márgenes o viñetas personalizadas).

    

   Ejercicio 3: Referencia y Navegación con id

3. Crear una barra de navegación
   Añade al header una barra de navegación con tres enlaces (<a>) para navegar entre secciones dentro de la misma página:

   • Enlace al header (usa href="#header")
   • Enlace al content (href="#content")
   • Enlace al footer (href="#footer")

4. Efecto de desplazamiento
   Opcional: Usa CSS para añadir un efecto visual (por ejemplo, color o subrayado) cuando los enlaces de la barra de navegación se desplazan hacia sus respectivas secciones.

5.