LINK : PENSAR 3
PLAN DE CURSO TECNOLOGÍA E INFORMÁTICA 2026
Introducción al Desarrollo Web con HTML
Objetivo General: Comprender los fundamentos de HTML y su aplicación en la creación de páginas web básicas, desarrollando habilidades de diseño y estructuración de contenido.
Inicio:
Pregunta Problematizadora: ¿Cómo se crean las páginas web que visitamos a diario?
Lluvia de ideas
Qué es Internet: Es una red de computadoras interconectadas a nivel mundial
Cómo funciona la web: La web funciona gracias a la comunicación entre los navegadores web y los servidores que alojan los sitios web.
Historia y evolución de HTML.
El HTML (HyperText Markup Language) es un lenguaje de etiquetas que permite estructurar y crear páginas web. Su historia se remonta a 1980, cuando el físico Tim Berners-Lee propuso un sistema de hipertexto para compartir documentos.
- En 1993, se reconocieron sus virtudes y se inició el trabajo en HTML+.
- En 1995, se obtuvo la tercera versión del estándar: HTML 3.0.
- En 1997, apareció el HTML 4.0.
- En 2006, se publicó la versión más reciente, HTML 5.0.
Qué es HTML y para qué se utiliza.
HTML son las siglas de HyperText Markup Language, que se traduce como Lenguaje de Marcado de Hipertexto. Vamos a desglosar esto:
Hipertexto: Es la capacidad de un texto para enlazar a otro texto o a otros recursos, como imágenes o videos. Cuando haces clic en un enlace en una página web, estás navegando a través de hipertexto.
Marcado: Se refiere a las "etiquetas" que se utilizan en HTML para estructurar y dar significado al contenido de una página web. Estas etiquetas le dicen al navegador qué tipo de contenido es (un párrafo, un encabezado, una imagen, etc.) y cómo debe mostrarse.
Lenguaje: En este contexto, HTML es un lenguaje que utilizan los desarrolladores web para "escribir" las instrucciones que el navegador interpreta para mostrar una página web.
¿Para qué se utiliza HTML?
Se utiliza para:
Estructurar el contenido: Define la organización de una página web, incluyendo encabezados, párrafos, listas, tablas y otros elementos.
Presentar información: Permite mostrar texto, imágenes, videos y otros contenidos multimedia en una página web.
Crear enlaces: Facilita la navegación entre diferentes páginas web y recursos.
Dar significado al contenido: Las etiquetas HTML ayudan a los motores de búsqueda y a otras herramientas a entender el contenido de una página web.
¿Cómo funciona HTML?
Escribes código HTML: Utilizando un editor de texto, creas un archivo con extensión ".html" que contiene las etiquetas y el contenido de tu página web.
El navegador interpreta el código: Cuando abres un archivo HTML en un navegador (como Chrome, Firefox o Safari), este lee el código y lo interpreta para mostrar la página web visualmente.
Ver la página web: El navegador muestra el contenido de la página web según las instrucciones que has dado en el código HTML.
Ejemplo básico de código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Mi primera página web</title>
</head>
<body>
<h1>¡Hola mundo! </h1>
<p>Este es un párrafo de texto. </p>
</body>
</html>
En este ejemplo:
<html> es la etiqueta raíz que contiene todo el contenido de la página.
<head> contiene información sobre la página, como el título.
<title> define el título que se muestra en la pestaña del navegador.
<body> contiene el contenido visible de la página.
<h1> es un encabezado de nivel 1.
<p> es un párrafo de texto.
Actividad práctica
1. Crear un archivo HTML básico con un encabezado y un párrafo.
2. Reflexión sobre la importancia de HTML en el desarrollo web.
Paso a paso para guardar
- Crear una carpeta para guardar el archivo
- Dar clic en Archivo y luego guardar como
- En Nombre colocar nombre del documento con la extensión HTML, Ejemplo Miprimerapagina.html
- En Tipo seleccionar todos los archivos
- Calentamiento global.
- La adaptación y mitigación al cambio climatico
- Contaminación (Aire, Agua, tierra)
- Deforestación.
- Pérdida de biodiversidad.
- Sequía.
- Consumo abusivo.
- Residuos.
- Superpoblación.
- La transición energetica y las energias renovables
type = tipo
Indica el tipo de numeración utilizada. Si no se indica se entiende que será una lista ordenada numéricamente.
Los tipos posibles son :
1 = Numéricamente. (1,2,3,4,... etc.)
a = Letras minúsculas. (a,b,c,d,... etc.)
A = Letras mayúsculas. (A,B,C,D,... etc.)
i = Números romanos en minúsculas. (i.ii,iii,iv,v,... etc.)
I = Números romanos en mayúsculas. (I,II,III,IV,V,... etc.)
Las viñetas se representan con la instrucción <UL></UL> para delimitar la lista, y <LI> para indicar cada uno de los elementos. En la instrucción <UL> se puede incluir el tipo de viñeta:
disk = Indica un punto
circle = Indica un punto sin relleno
square = Indica un cuadrado
Todas las listas se pueden "anidar", es decir incluir una lista dentro de otra, con lo que se consigue una estructura tipo "índice de materias".
Profundizacion
Nota 1: Darle formato a las páginas (color de fondo, tamaño del texto, color de texto, tamaño, marquesina, regleta, imagen, salto de linea).
ACTIVIDAD 1
Crear dos páginas web con los nombres : pagina1.html y pagina2.html. Configurar las páginas con todo lo visto en clase, cambiar los encabezados <h1> por <font>, size para el tamaño del texto.
pagina1.html
pagina2.html
- Margen establecida
- Tipografia permitida ( realizar diferencia entre los tipos de letras y su tamaño)
- Interlineado (Especificar cual es)
Las parejas deben listar y explicar brevemente las partes de un trabajo:
Portada (Estudiante vs. Profesional).
Resumen (Abstract).
Cuerpo del texto.
Referencias.
- Qué es el estado del Arte
- Escoger un tema de la siguiente lista y rastrear 3 proyectos o articulos cientificos usando Google Académico o SciELO estos temas estan relacionados con el proyecto de hábitos de vida saludable; ademas deben completar la siguiente ficha técnica o Matriz de datos para cada uno de los 3 proyectos.
- El Algoritmo del Insomnio: Impacto de la luz azul de los smartphones en la arquitectura del sueño adolescente.
- Bio-hacking y Wearables (Optimizando el cuerpo humano a través de dispositivos vestibles): ¿Pueden los relojes inteligentes realmente mejorar nuestra salud cardiovascular o solo generan ansiedad por los datos.
- FOMO (el temor a perderce de algo) y Salud Mental: La relación técnica entre el diseño de las redes sociales (scroll infinito) y los niveles de dopamina y ansiedad.
- Ergonomía del Teletrabajo/Estudio: Prevención de lesiones de columna y síndrome del túnel carpiano en la generación "siempre conectada".
- Nutrición Digital: Análisis de apps de conteo de calorías: ¿Herramienta de salud o detonante de trastornos alimenticios?
- Ciber-psicología: El efecto de los avatares y filtros de IA en la percepción de la imagen corporal y la autoestima.
- Gaming Saludable: ¿Es posible prevenir el sedentarismo mediante el uso de realidad aumentada y juegos tipo Exergaming?
- Desecho Electrónico (E-waste): Cómo la contaminación por metales pesados de nuestra tecnología vieja afecta la salud de las comunidades.
- Productividad y Ayuno Digital: Técnicas de "Deep Work" (Trabajo Profundo) para combatir la fatiga cognitiva por exceso de notificaciones.
- IA en el Diagnóstico Temprano: El uso de aplicaciones móviles para la detección de problemas de salud mental o enfermedades dermatológicas.
- La "Huella de Carbono Digital" y Salud Planetaria: Cómo los hábitos digitales tienen un impacto físico en el medio ambiente.
- Neurotecnología y la "Economía de la Atención": Cómo las aplicaciones están "hackeando" el cerebro humano.
| Campo APA | Información Encontrada |
| Nombre del Proyecto | (Título formal del estudio) |
| Autores | (Apellido, Inicial del nombre) |
| Fecha de Publicación | (Año entre paréntesis) |
| Resumen (Abstract) | (Máximo 150 palabras con sus propias ideas) |
| Palabras Clave | (3 términos que definan la investigación) |
5. Como cierre de la actividad cada pareja va a socializar su proyecto contando al grupo en 2 minutos por qué ese hábito de vida saludable es una "actualización necesaria" para un estudiante de grado Once.
No hay comentarios:
Publicar un comentario