NOVENO 3 PERIODO

SEMANA DEL 06 AL 10 DE ABRIL DEL 2026
PROPÓSITO: conocer los temas a desarrollar en el TERCER periodo y fortalecer los conocimientos previos
1.       Realizar el separador TERCER periodo
2.       Escribir los temas a desarrollar en el 3 periodo
3.       Realizar prueba diagnóstica en quiziz
TEMAS DEL TERCER PERIODO
COMPONENTES
•     NATURALEZA Y EVOLUCIÓN T&T
•     USO Y APROPIACIÓN T&T
•      SOLUCIÓN DE PROBLEMAS T&T
•     TECNOLOGÍA INFORMÁTICA Y SOCIEDAD
INDICADOR COGNITIVO:
En un ambiente lúdico y práctico, las características del HTML y CSS.
OBJETOS DE APRENDIZAJE
1.NATURALEZA Y EVOLUCIÓN T&T
HTML y CSS
•     Concepto
•     Historia y evolución
•     Editores de texto para lenguaje de etiquetas
•     Lenguaje de etiquetas
2.USO Y APROPIACIÓN T&T
•     Estructura semántica de HTML 5 y CSS3
•     Integración de objetos y multimedia en HTML
•     Integración de CSS3 en HTML
3.SOLUCIÓN DE PROBLEMAS T&T
Diseño y construcción de una página WEB en HTML con hojas de estilo.
4. TECNOLOGÍA INFORMÁTICA Y SOCIEDAD
Sensibilización de la protección del medio ambiente por medio de publicaciones WEB.

SEMANA DEL 13 AL 17 DE ABRIL DEL 2026

PROPÓSITO: conocer la historia y uso en la actualidad de HTML

HISTORIA DEL HTML

La primera versión de este código apareció en 1991 y fue escrita por Tim Berners-Lee (TBL), siendo poco más que un diseño inicial de 18 elementos, 13 de los cuales aún se conservan. Se lo consideró poco más que una variante del Lenguaje de Marcado General Estándar (SGML) en uso y consistente en un lenguaje de etiquetas, pero ya en 1993 se reconocieron sus virtudes y su potencia en la estandarización de los lenguajes de la Red.
Entonces se inició el trabajo en Html+, una versión más desarrollada, y en 1995 se obtuvo la tercera versión del estándar: HTML 3.0, cuyas sucesivas actualizaciones (3.1 y 3.2) fueron de gran éxito en los primeros navegadores populares de Netscape y Mosaic. En 1997 aparecería el HTML 4.0, ya como recomendación de la W3C, y finalmente en 2006 la versión más reciente, HTML 5.0.
HTML EN LA ACTUALIDAD
Actualmente, la historia de HTML ha llevado a este lenguaje a estar vinculado a JavaScript y CSS3, en lo que la W3C ha denominado Plataforma Web Abierta, que permite que estos lenguajes puedan usarse en el desarrollo de aplicaciones multiplataforma, es decir, tanto en iOS o Windows como Linux o Android.
En cuanto a la versión más reciente de HTML, no olvides que se trata de HTML 5.3, que se emitió en el año 2021, pero sin duda experimentaremos más y más actualizaciones a lo largo de los años. Sobre todo porque tanto la W3C como la WHATWG continúan realizando un arduo trabajo para establecer las recomendaciones y cambios pertinentes.
ACTIVIDAD EN CLASE
1. Realizar en el entorno de Canva una línea de Tiempo sobre la historia y evolución de HTML, se pueden guiar sobre lo visto en el video.

SEMANA DEL 20 AL 24 DE ABRIL DEL 2026

PROPÓSITO: conocer el concepto, función y estructura de HTML

CONCEPTOS BÁSICOS DE HTML 5.0

HTML

El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para estructurar y desplegar una página web y sus contenidos. Por ejemplo, sus contenidos podrían ser párrafos, una lista con viñetas, o imágenes y tablas de datos.

ANATOMÍA DE UN ELEMENTO HTML
LAS PARTES PRINCIPALES DEL ELEMENTO SON:

1.    La etiqueta de apertura: consiste en el nombre del elemento (en este caso, p), encerrado por paréntesis angulares (< >) de apertura y cierre. Establece dónde comienza o empieza a tener efecto el elemento —en este caso, dónde es el comienzo del párrafo—.
2.    La etiqueta de cierre: es igual que la etiqueta de apertura, excepto que incluye una barra de cierre (/) antes del nombre de la etiqueta. Establece dónde termina el elemento —en este caso dónde termina el párrafo—.
3.    El contenido: este es el contenido del elemento, que en este caso es sólo texto.
4.  El elemento: la etiqueta de apertura, más la etiqueta de cierre, más el contenido equivale al elemento.

¿CÓMO FUNCIONA EL HTML?

El lenguaje html opera en base a marcadores escritos (que aparecen entre comillas angulares: <html>), a partir de las cuales se cifra la apariencia y orden interno de una página web, así como los scripts o rutinas que operan dentro de ellas.

· ELEMENTOS. Los ladrillos básicos del lenguaje html, sirven para representar el contenido y sus atributos, así como marcar los parámetros del propio lenguaje, como el punto de inicio de la cadena de comandos y el punto de cierre, o las necesidades especiales.
· ATRIBUTOS. Las especificaciones respecto a valor, color, posición, etc. de los elementos incorporados en el código. Por lo general consisten en una serie de instrucciones lógicas o numéricas.

ESTRUCTURA BÁSICA DE HTML

La estructura HTML de una página web se compone de las etiquetas <html>, que indica el comienzo de la página; <head>, que contiene información más descriptiva sobre el sitio; y <body>, que conforma todos los elementos visibles de la página.

ACTIVIDAD EN CLASE

1. Realizar los siguientes ejercicios en el entono del blog de notas, escribiendo las etiquetas y atributos que a continuación se presentan, para la creación de una pagina web con HTML:

SEMANA DEL 27 AL 30 DE ABRIL DEL 2026

PROPOSITO: conocer el concepto y función de HTML

EDITORES DE TEXTO PARA HTML

Un editor HTML: es un software para editar y crear código HTML que se utiliza para sitios web u otros documentos web. Con los editores HTML basados en texto, el código fuente puede ser editado directamente.

¿QUÉ ES EL SUBLIME TEXT?

Sublime Text es un editor de texto para escribir código en casi cualquier formato de archivo. Está especialmente pensado para escribir sin distracciones. Es decir, que visualmente ofrece un entorno oscuro donde las líneas de código que escribas resaltarán para que puedas centrarte exclusivamente en ellas.

VENTAJAS DE SUBLIME TEXT

· Es uno de los editores de código más utilizados.

· Infinidad de extensiones: Dispones de un gran número de herramientas adicionales que facilitan nuevas funciones al editor de código

· Gestión de proyectos y navegación eficiente: Facilita la gestión de proyectos mediante la barra lateral, que muestra la estructura de archivos y carpetas.

· Soporte nativo para más de 40 lenguajes de programación: incorpora de manera nativa 43 lenguajes de programación diferentes además del texto plano, es decir, solo con instalarlo podremos trabajar en todos esos lenguajes de programación y cambiar entre uno y otro con un simple clic.

· Personalización completa de Keybindings: Las llamadas Keybindings son los métodos abreviados de teclado para diferentes comandos.

· Mapa de navegación: Sublime Text te ofrece la posibilidad de utilizar un minimapa que representa la estructura del archivo sobre el que estás trabajando.

· Resaltado de llaves, sintaxis y autocompletado: Sublime Text gestiona muy bien estos conceptos ofreciéndote de una manera clara y directa dónde comienza y termina un párrafo, realizando sugerencias para completar una línea de código, etc.

· Estabilidad y rendimiento: Son características esenciales de Sublime Text. Aunque es ligero en recursos, puede manejar proyectos grandes sin sacrificar la velocidad.

BLOC DE NOTAS PARA LA GENERACIÓN DE CÓDIGO.

Microsoft Bloc de notas: es una herramienta de procesamiento de texto incluida con Windows. Puede usarla para crear un archivo de registro que agrega la fecha y hora actual cada vez que se abre el archivo de Bloc de notas. A continuación se explica cómo crear un archivo de registro en Bloc de notas:

1.    Seleccione Inicio, escriba Bloc de notas y selecciónelo de los resultados.
2.    Escriba las etiquetas necesarias.
3.    En el menú Archivo, haga clic en Guardar como, escriba un nombre descriptivo para el archivo en el cuadro Nombre de archivo y, a continuación, haga clic en Aceptar.

NOTA:

Siempre los ejercicios realizados en cualquiera de estos dos editores de texto se deben guardar de la siguiente manera:

Archivo-guardar como-nombre del ejercicio-seguido del .html

Ejemplo: ejercicioestructurabasica.html

ACTIVIDAD EN CLASE

Realizar el siguiente ejercicio en el entono del blog de notas, utilizando as etiquetas del lenguaje html:

En este ejercicio, crearemos un documento HTML para iniciarnos con el tamaño de la fuente. Para profundizar un poco más sobre lo que hemos visto en este tema, hemos utilizado también un encabezado y un efecto de letra un poco peculiar. Procure que el ejercicio quede lo más parecido a la imagen final

1. La cabecera del documento junto con la etiqueta de apertura sería:

<html>

<head>

<title>Ejercicio sobre tamaños y formatos</title>

</head>

2. El cuerpo del documento quedaría como el siguiente:

<body>

<p style="font-size: 40px;">Esto está a un tamaño de 40px</p>

<p style="font-size: small;">Esto está a un tamaño small</p>

<p style="font-size: medium;">Esto está a un tamaño medium</p>

<p style="font-size: large;">Esto está a un tamaño large</p>

<p style="font-size: xx-large;">Esto está a un tamaño xx-large</p>

<p style="font-size: xx-small;">Esto está a un tamaño xx-small</p>

<p style="font-size: 2%;">Esto está a un tamaño 2%</p>

<p style="font-size: 20%;">Esto está a un tamaño 20%</p>

<p style="font-size: 80%;">Esto está a un tamaño 80%</p>

<p style="font-size: 200%;">Esto está a un tamaño 200%</p>

<p style="font-size: 300%;">Esto está a un tamaño 300%</p>

<h2>Pruebas de formatos</h2>

Esto es normal

<sub>y esto es subíndice: sub </sub><br>

Esto es normal <sup>y esto es superíndice: sup </sup><br>

<br>

</body>

</html>

4.El ejercicio debe de quedar de la siguiente manera:

SEMANA DEL

PROPÓSITO: conocer el concepto y estructura semántica de los elementos en HTML

ESTRUCTURA BÁSICA Y SEMÁNTICA DE HTML

¿QUÉ SON LOS ELEMENTOS SEMÁNTICOS?

Los elementos semánticos HTML son aquellos que describen claramente su significado de una manera legible por humanos y máquinas.

Elementos tales como <header>, <footer> y <article> son considerados semánticos porque describen con precisión el propósito del elemento y el tipo de contenido que hay dentro de ellos.

Elementos estructurales HTML

Los elementos estructurales HTML5 mejoran tanto la organización como la estructura de nuestro sitio web. También reciben el nombre de etiquetas o elementos semánticos.

A continuación, algunos de los más utilizados:

· <header>: es el elemento que determina el encabezado de una sección o página.

· <article>: es la etiqueta que determina las diferentes secciones de contenido.

· <section>: es el elemento que se utiliza para agrupar contenidos de temática similar.

· <nav>: es el elemento para la barra de navegación principal de un sitio.

· <aside>: es el elemento que contiene información accesoria, que no suele añadir un valor significativo a la temática del sitio. Por ejemplo, es habitual usar para la barra lateral con una serie de banners o widgets sociales.

· <footer>: es el elemento que determina el pie de página. Generalmente incluye la información de contacto y avisos legales.

Etiquetas semánticas de texto

Las etiquetas semánticas de texto sirven para poder darle un significado semántico a un fragmento de texto seleccionado.

· <h1>: es la etiqueta utilizada para indicar el encabezado principal.

· <h2> a <h6>: son las etiquetas utilizadas para organizar el contenido en diferentes niveles de importancia. A diferencia de H1, estas etiquetas sí pueden repetirse en una misma página.

· <strong>: es la etiqueta utilizada para resaltar un fragmento de texto.

· <a>: es la etiqueta utilizada para enlazar un fragmento de texto a otra página diferente.

· <mark>: es la etiqueta utilizada para resaltar un fragmento de texto en amarillo.

· <code>: es la etiqueta utilizada para indicar un bloque de código.

· <span>: es la etiqueta utilizada para un fragmento de texto genérico.

· <s>: es la etiqueta utilizada para tachar un fragmento de texto

ESTRUCTURA HTML5

Un documento html5 se divide en dos partes:

· HEAD: Contiene la información sobre el documento HTML. Por ejemplo, título de la página, versión de HTML, metadatos, enlaces, etc.

· BODY: Incluye todo el contenido que se muestra en la página web.

La estructura básica de html luce así y es el código que toda página web debe tener:

· <!DOCTYPE html>: se utiliza para indicar la versión HTML 5.0 (la usada actualmente).

· <html> </html>: es el elemento raíz y es el más importante dentro de la estructura HTML, pues es el que contendrá el resto de las etiquetas de atributos de la página web.

· <head> </head>: es la etiqueta principal que incluye metadatos; son atributos que no se muestran al usuario, solo describen referencias de la página, por ejemplo, título o página CSS.

· <body> </body>: es la etiqueta para desarrollar todo el cuerpo de la página web y engloba datos desde textos hasta enlaces.

· Dentro de la etiqueta <body> se desglosan más etiquetas y elementos como:

· <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: que representan las etiquetas de títulos.

· <p>: sirve para indicar la apertura y cierre de un párrafo.

· <div>: significa «división» y funciona para crear secciones o agrupar contenidos.

· <span>: su traducción es «abarcar» y sirve para aplicar estilo al texto o agrupar elementos en línea.

· <b>, <i>, <u>: para agregar un texto en negritas, cursiva y subrayado, correspondientemente.

· <a>: permite agregar un vínculo o enlace.

· <img>, <audio>, <video>, <iframe>: dentro de la estructura HTML estas etiquetas sirven para insertar una imagen, audio, video o incrustar un documento HTML.

· <form>: funciona para insertar un formulario.

· <label>: representa la etiqueta para un elemento en una interfaz de usuario.

· <input>: crea controles interactivos para formularios, con el fin de recibir datos del usuario.

ACTIVIDAD EN CLASE:

Realizar el siguiente ejercicio en el entono del blog de notas, utilizando as etiquetas del lenguaje html:

1. Subtítulos en HTML

2- RECETA DE VAINILLA

<head>

<title>Página de Vainilla</title>

</head>

<body>

<h1>Recetas de Vainilla</h1>

<nav>

<ul>

<li><a href="#">Inicio</a></li>

<li><a href="#">Recetas</a></li>

<li><a href="#">Contacto</a></li>

</ul>

</nav>

</header>

<main>

<h2>Receta de Pastel de Vainilla</h2>

<p>Disfruta de nuestro delicioso pastel de vainilla. Es fácil de hacer y perfecto para cualquier ocasión.</p>

</section>

<h2>Galletas de Vainilla</h2>

<p>Prepara estas galletas suaves y llenas de sabor a vainilla. Son ideales para acompañar tu café.</p>

</section>

</main>

<aside>

<h2>Artículos Relacionados</h2>

<ul>

<li><a href="#">Cómo hacer extracto de vainilla en casa</a></li>

<li><a href="#">Historia de la vainilla</a></li>

</ul>

</aside>

</footer>

</body>

</html>

3.HIPERVINCULOS

SEMANA DEL 10 AL 14 DE FEBRERO DEL 2025

Propósito: Identificar la etiquetas básicas para crear un pagina web de manera ordenada y diferentes estilos.

LAS ETIQUETAS HTML

son bloques de código que dan formato, funcionalidad y estructura al contenido de las páginas web. Estos fragmentos sirven como indicadores o instrucciones para que un navegador muestre de forma adecuada la información contenida en tus documentos.

PARTES BÁSICAS DE LAS ETIQUETAS HTML

· ELEMENTO

Es el nombre de la etiqueta, generalmente pareada (es decir: con apertura y cierre, como lo acabamos de mencionar), y aparece entre los signos de apertura. Por ejemplo: <title>Partes básicas de etiquetas HTML</title>, que indica que esa frase es un título.

· ATRIBUTO

Es lo que diferencia a un elemento y que le da ciertas características, como tamaño, color, tipo de fuente. Se escribe antes del signo de igual (=), junto al elemento de la etiqueta, únicamente en la apertura y antes de la variable. Por ejemplo: <font face="Arial">. Este texto aparecerá en tipografía Arial</font>. El atributo es el tipo letra, es decir: face.

· CONTENIDO

Es el texto que modifica las etiquetas, lo que aparece entre las etiquetas y atributos.

· VARIABLE

Es la característica del atributo de una etiqueta: color, tamaño, tipo de letra, y se escribe generalmente entrecomillado después del signo de igual. En el ejemplo de atributo, la variable es Arial.

ETIQUETAS BASICAS

<font> </font>: Esta etiqueta básica sirve para indicar la fuente que se utilizará en una selección de texto. Por sí sola no funciona, pues necesita atributos y variables que indiquen cuál tipografía será, tamaño y colores.
Las etiquetas de <font> y </font> señalan el tamaño, color o fuente del documento. Por ejemplo, si debes indicar la fuente, la etiqueta se escribe asi:
TIPO DE FUENTE
COLOR DE FUENTE
TAMAÑO DE FUENTE

· <video> </video> Se usa para reproducir video en la página web junto a sus archivos de audio y capciones asociadas.
· <audio> </audio> Usada para cargar en una web un archivo de audio o stream de audio.
ETIQUETAS PARA LA CREACIÓN DE TABLAS

·         <table> </table> Etiquetas de apertura y cierre de una tabla. El resto de etiquetas de la tabla han de ir siempre recogidas entre estas dos etiquetas.
·         <caption> </caption> Usada para indicar el título de la tabla.
·         <colgroup> </colgroup> Etiqueta utilizada para agrupar dos o más columnas de una tabla.
·         <tbody> </tbody> Usada para describir los datos concretos de una tabla.
·         <thead> </thead> Indica el bloque de filas que describen las etiquetas de las columnas de la tabla.
·         <tfoot> </tfoot> Indica los bloques de filas que describen los resúmenes, o datos totales de una columna de una tabla.
·         <tr> </tr> Se usa para indicar una fila de celdas de una tabla.
·         <td> </td> Usada para definir una celda de una tabla.
·         <th> </th> Etiqueta que se usa para definir el encabezado de una celda

ACTIVIDAD EN CLASE:

Utilizando el entorno el blog de notas y las etiquetas de HTML, crear una página que contenga:

1. tabla con 3 columnas y 5 filas

2. imagen

3. un video

4. tipos de fuente, tamaño y color diferentes

Ejemplo de tablas y etiquetas para la creación:

SEMANA DEL 17 AL 21 DE FEBRERO DEL 2025

Propósito: Identificar las etiquetas básicas para crear un página con elementos multimedia.

INTEGRACIÓN DE OBJETOS Y DE MULTIMEDIA EN HTML

MULTIMEDIA

El término ‘multimedia’ hace referencia a la capacidad de presentar tipos variados de información; habitualmente se asocia con la reproducción de sonido e imágenes en movimiento, pero realmente se debe aplicar a la integración de diferentes tipos de datos en una misma presentación, que en algunos casos permite al usuario interaccionar con ellos.

Ejemplos serían: fotos, música, sonido, vídeos, discos, películas, animaciones y mucho más.

IMAGEN

En HTML, las imágenes son elementos en línea que se insertan a partir de la etiqueta <img> que está vacía y solo contiene atributos no siendo necesaria la etiqueta de cierre.

Los principales atriburos son src (indica la ruta donde se ubica el archivo), alt (texto alternativo si no se visualizase la imagen) , width (establece la anchura en pixeles) y height (define la altura de la imagen). Un ejemplo sería:

LA RUTA O URL PUEDE INCLUIRSE DE TRES FORMAS DIFERENTES:

· Ruta absoluta, imagen en un servidor externo: src=”http://dominio.com/ruta/imagen.jpg”

· Ruta absoluta , imagen en el subdiretorio : src=”img/imagen.jpg”

· Ruta relativa , imagen en el directorio anterior (padre) : src="../imagen.jpg”

LOS PRINCIPALES FORMATOS DE IMÁGENES SON:

SONIDO

HTML ha proporcionado un estándar para escuchar los ficheros de audio ya que en versiones anteriores era necesario un plug-in. Es importante ofrecer distintas alternativas de formato . Se inserta en HTML mediante la etiqueta <audio>. Un ejemplo sería para la misma canción ofrecer distintos formatos al navegador.

Your browser does not support the audio element.

</audio>

VÍDEO

El video en HTLM se puede insertar con la etiqueta <video> o <iframe> para vídeos de youtube. En el caso de <video> es importante ofrecer distintas alternativas de formato al igual que ocurría para el audio, ejemplo.

Your browser does not support the video tag.

</video>

ACTIVIDAD EN CLASE:

Realiza una página con diferentes tipos de multimedia, puedes tomar como guía el siguiente ejemplo:

<html>

<head>

<title>Paguina de esterenos de series y peliculas</title>

</head>

<body>

<h1>Nueva temporada del anime Demon slayer</h1>

<h2>Arco del entrenamiento del pilar</h2>

<p>La Nueva temporada mas esperada del 2024.</p>

src="https://www.youtube.com/embed/bgesBl2mF_M">

</iframe>

</html>

SEMANA DEL 24 AL 28 DE FEBRERO DEL 2025

Lic. Manuel Guerrero

Menu

NOVENO 3 PERIODO

No hay comentarios:

Publicar un comentario

Colarqui

Popular Posts

Blogger templates

Buscar este blog

Denunciar abuso

Datos personales

QUIZIZZ

Blogroll

About