COLEGIO 20 DE JULIO IED
AREA INFORMATICA Y TECNOLOGIAS - HTML
GRUPO 11
JORNADA UNICA
Docente: Ing. Mauricio Posse - [email protected] – 3133573780 (WhatsApp)
1
https://medium.com/@anhurtado/c%C3%B3mo-utilizar-la-%C3%B1-acentos-y-espacios-en-blanco-en-html-5-6f233fc5bf49 (Sobre las tildes y ñ, Ñ)
https://mpcarvaj.wixsite.com/informaticatecmpc (Material soporte Colegio 20 de Julio IED)
http://html.conclase.net/w3c/html401-es/present/frames.html (Marcos/Frames)
MARCO TEORICO Durante el transcurso de las sesiones de clase, sobre las etiquetas HTML; en específico, sobre
los tamaños, colores y fuentes aplicadas en un texto. Igualmente empezamos a realizar la
estructura básica de una página aplicando FRAME (Marcos/Divisiones).
La situación es organizar nuestra página, como corresponde a la guía virtual; es decir, distribuir
en varios programas con formato HTML. Muy importante utilizar el Bloc de Notas como editor
de nuestros scripts (programas fuente).
Objetivos Aplicar HTML con las etiquetas exigidas según la guía
Usar el código HTML, los caracteres especiales como las vocales con tilde y ñ, Ñ para
obtener la siguiente página aplicando FRAMESET y FRAME SRC (SRC:Source/Fuente)
PROCESO 1) Según la imagen anterior podemos observar un página seccionada en los siguientes
FRAMES
a. Fila-1: Título del Colegio y Datos del Alumno con el número del curso
b. Fila-2: Dos columnas. La columna izquierda que esta con dos filas y la columna
derecha con las seis (6) imágenes (Colash, Collage o Colage)
Este programa principal o de inicio se va a tener el nombre de Index.html y tiene el
siguiente código:
<HTML>
<FRAMESET ROWS = "20%,80%">
<FRAME SRC = "CABEZA.HTML">
<FRAME SRC = "COMPUTADORES.HTML">
COLEGIO 20 DE JULIO IED
AREA INFORMATICA Y TECNOLOGIAS - HTML
GRUPO 11
JORNADA UNICA
Docente: Ing. Mauricio Posse - [email protected] – 3133573780 (WhatsApp)
2
https://medium.com/@anhurtado/c%C3%B3mo-utilizar-la-%C3%B1-acentos-y-espacios-en-blanco-en-html-5-6f233fc5bf49 (Sobre las tildes y ñ, Ñ)
https://mpcarvaj.wixsite.com/informaticatecmpc (Material soporte Colegio 20 de Julio IED)
http://html.conclase.net/w3c/html401-es/present/frames.html (Marcos/Frames)
</FRAMESET>
</HTML>
Para guardar un archivo o programa (script) HTML, a partir del Bloc de Notas, realizamos
lo siguiente:
Siguiendo con nuestra explicación:
20% Para la cabeza o encabezado CABEZA.HTML, aquí está el nombre del colegio y
los datos del alumno
80% Para la temática Primera Generación de los computadores y el computador
Univac, este programa se llama COMPUTADORES.HTML
Estas dos Secciones o FRAMES deben sumar 100%. Bien, ahora el código de
COMPUTADORES.HTML es el siguiente:
<HTML>
<FRAMESET COLS = "50%,50%">
<FRAME SRC = "PRIMERAGENE.HTML">
<FRAME SRC = "IMAGENES.HTML">
</FRAMESET>
</HTML>
Que significa el programa COMPUTADORES.HTML tiene dos Columnas o FRAMESET
COLS; cada columna, le corresponde el 50% del 100% (en partes iguales).
COLEGIO 20 DE JULIO IED
AREA INFORMATICA Y TECNOLOGIAS - HTML
GRUPO 11
JORNADA UNICA
Docente: Ing. Mauricio Posse - [email protected] – 3133573780 (WhatsApp)
3
https://medium.com/@anhurtado/c%C3%B3mo-utilizar-la-%C3%B1-acentos-y-espacios-en-blanco-en-html-5-6f233fc5bf49 (Sobre las tildes y ñ, Ñ)
https://mpcarvaj.wixsite.com/informaticatecmpc (Material soporte Colegio 20 de Julio IED)
http://html.conclase.net/w3c/html401-es/present/frames.html (Marcos/Frames)
Esto quiere decir:
2) El primer FRAME de COMPUTADORES.HTML, según la imagen anterior podemos
observar que tiene dos columnas o COLS (en (1) Columna); vamos a señalar, de color
verde para su explicación las dos columnas:
COLEGIO 20 DE JULIO IED
AREA INFORMATICA Y TECNOLOGIAS - HTML
GRUPO 11
JORNADA UNICA
Docente: Ing. Mauricio Posse - [email protected] – 3133573780 (WhatsApp)
4
https://medium.com/@anhurtado/c%C3%B3mo-utilizar-la-%C3%B1-acentos-y-espacios-en-blanco-en-html-5-6f233fc5bf49 (Sobre las tildes y ñ, Ñ)
https://mpcarvaj.wixsite.com/informaticatecmpc (Material soporte Colegio 20 de Julio IED)
http://html.conclase.net/w3c/html401-es/present/frames.html (Marcos/Frames)
El código para esta sección de color verde es:
<HTML>
<FRAMESET ROWS = "50%,50%">
<FRAME SRC = "SUMARIOPRIMERAGEN.HTML">
<FRAME SRC = "SUMARIOUNIVAC.HTML">
</FRAMESET>
</HTML>
Este programa se va a llamar PRIMERAGENE.HTML, el mencionad programa se divide en dos
filas o ROWS, en dos partes iguales 50% y 50%. Podemos observar que vamos a usar dos HTML
que son:
SUMARIOPRIMERAGEN.HTML, su código es:
<HTML>
<P ALIGN = "JUSTIFY">
La primera generación de computadoras abarca desde el año 1940 hasta
el año 1952, aunque realmente estas fechas son de las m&aacte;quinas
comerciales que se podrían
llamar la primera generación de computadora. Características: Estaban
construidas con electrónica de válvulas de vacío. Se
programaban en lenguaje móquina.
COLEGIO 20 DE JULIO IED
AREA INFORMATICA Y TECNOLOGIAS - HTML
GRUPO 11
JORNADA UNICA
Docente: Ing. Mauricio Posse - [email protected] – 3133573780 (WhatsApp)
5
https://medium.com/@anhurtado/c%C3%B3mo-utilizar-la-%C3%B1-acentos-y-espacios-en-blanco-en-html-5-6f233fc5bf49 (Sobre las tildes y ñ, Ñ)
https://mpcarvaj.wixsite.com/informaticatecmpc (Material soporte Colegio 20 de Julio IED)
http://html.conclase.net/w3c/html401-es/present/frames.html (Marcos/Frames)
</HTML>
SUMARIOUNIVAC.HTML, su código es:
<HTML>
<P ALIGN = "JUSTIFY">
1951 UNIVAC I. Considerada la primera computadora comercial en ser vendida, aunque
se le adelantó la británica
Feranti Mark I por unos meses, y nunca se tuvo en cuenta la Z4 que se adelantó
casi un año. Los doctores Mauchly y Eckert
fundaron la compañía Universal Computer (Univac), y su primer
producto fue esta máquina.
El primer cliente fue la Oficina del Censo de Estados Unidos
</HTML>
3) Para finalizar, nos falta definir la columna de COMPUTADORES.HTML:
<HTML>
<FRAMESET COLS = "50%,50%">
<FRAME SRC = "PRIMERAGENE.HTML">
<FRAME SRC = "IMAGENES.HTML">
</FRAMESET>
</HTML>
El programa PRIMERAGENE.HTML, ya está definida y construida según el proceso que estamos
realizando. Nos falta IMÁGENES.HTML, cuyo código es:
<HTML>
<FRAMESET ROWS = "100%">
<FRAME SRC = "PRIMERAGENERACION.JPG">
</FRAMESET>
</HTML>
Le corresponde el 100% de la columna 2 del programa COMPUTADORES.HTML
COLEGIO 20 DE JULIO IED
AREA INFORMATICA Y TECNOLOGIAS - HTML
GRUPO 11
JORNADA UNICA
Docente: Ing. Mauricio Posse - [email protected] – 3133573780 (WhatsApp)
6
https://medium.com/@anhurtado/c%C3%B3mo-utilizar-la-%C3%B1-acentos-y-espacios-en-blanco-en-html-5-6f233fc5bf49 (Sobre las tildes y ñ, Ñ)
https://mpcarvaj.wixsite.com/informaticatecmpc (Material soporte Colegio 20 de Julio IED)
http://html.conclase.net/w3c/html401-es/present/frames.html (Marcos/Frames)
Como es una imagen con seis imágenes, usamos Paint para construir nuestro Colash
Programa Paint en el tapiz de la hoja de Paint copiamos y pegamos las seis (6) imágenes del
computador UNIVAC (Consultar Google pestaña Imágenes)
COLEGIO 20 DE JULIO IED
AREA INFORMATICA Y TECNOLOGIAS - HTML
GRUPO 11
JORNADA UNICA
Docente: Ing. Mauricio Posse - [email protected] – 3133573780 (WhatsApp)
7
https://medium.com/@anhurtado/c%C3%B3mo-utilizar-la-%C3%B1-acentos-y-espacios-en-blanco-en-html-5-6f233fc5bf49 (Sobre las tildes y ñ, Ñ)
https://mpcarvaj.wixsite.com/informaticatecmpc (Material soporte Colegio 20 de Julio IED)
http://html.conclase.net/w3c/html401-es/present/frames.html (Marcos/Frames)
Ctrl + V (Pegar)
COLEGIO 20 DE JULIO IED
AREA INFORMATICA Y TECNOLOGIAS - HTML
GRUPO 11
JORNADA UNICA
Docente: Ing. Mauricio Posse - [email protected] – 3133573780 (WhatsApp)
8
https://medium.com/@anhurtado/c%C3%B3mo-utilizar-la-%C3%B1-acentos-y-espacios-en-blanco-en-html-5-6f233fc5bf49 (Sobre las tildes y ñ, Ñ)
https://mpcarvaj.wixsite.com/informaticatecmpc (Material soporte Colegio 20 de Julio IED)
http://html.conclase.net/w3c/html401-es/present/frames.html (Marcos/Frames)
Seleccionamos otra imagen:
Guardar la imagen con el nombre:
COLEGIO 20 DE JULIO IED
AREA INFORMATICA Y TECNOLOGIAS - HTML
GRUPO 11
JORNADA UNICA
Docente: Ing. Mauricio Posse - [email protected] – 3133573780 (WhatsApp)
9
https://medium.com/@anhurtado/c%C3%B3mo-utilizar-la-%C3%B1-acentos-y-espacios-en-blanco-en-html-5-6f233fc5bf49 (Sobre las tildes y ñ, Ñ)
https://mpcarvaj.wixsite.com/informaticatecmpc (Material soporte Colegio 20 de Julio IED)
http://html.conclase.net/w3c/html401-es/present/frames.html (Marcos/Frames)
La extensión de la imagen es JPEG, como se puede apreciar en la imagen anterior.
Para la ejecución del programa, se ejecuta Index.html, que como lo explicamos es el
programa principal.
COLEGIO 20 DE JULIO IED
AREA INFORMATICA Y TECNOLOGIAS - HTML
GRUPO 11
JORNADA UNICA
Docente: Ing. Mauricio Posse - [email protected] – 3133573780 (WhatsApp)
10
https://medium.com/@anhurtado/c%C3%B3mo-utilizar-la-%C3%B1-acentos-y-espacios-en-blanco-en-html-5-6f233fc5bf49 (Sobre las tildes y ñ, Ñ)
https://mpcarvaj.wixsite.com/informaticatecmpc (Material soporte Colegio 20 de Julio IED)
http://html.conclase.net/w3c/html401-es/present/frames.html (Marcos/Frames)
LAS TILDES y ñ, Ñ á á
é é
í í
ó ó
ú ú
ñ ñ
Ñ Ñ
CONCLUSIONES Aplica HTML con las etiquetas exigidas según la guía
Usa correctamente el código HTML, los caracteres especiales como las vocales con tilde
y ñ, Ñ; igualmente aplica con criterio FRAMESET y FRAME SRC para el diseño de un sitio
Web