marco teorico objetivos...como es una imagen con seis imágenes, usamos paint para construir nuestro...

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">

mailto:[email protected]

https://medium.com/@anhurtado/c%C3%B3mo-utilizar-la-%C3%B1-acentos-y-espacios-en-blanco-en-html-5-6f233fc5bf49


https://mpcarvaj.wixsite.com/informaticatecmpc

http://html.conclase.net/w3c/html401-es/present/frames.html



GRUPO 11

JORNADA UNICA


2




</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).








GRUPO 11

JORNADA UNICA


3




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:








GRUPO 11

JORNADA UNICA


4




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.








GRUPO 11

JORNADA UNICA


5




</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








GRUPO 11

JORNADA UNICA


6




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)








GRUPO 11

JORNADA UNICA


7




Ctrl + V (Pegar)








GRUPO 11

JORNADA UNICA


8




Seleccionamos otra imagen:

Guardar la imagen con el nombre:








GRUPO 11

JORNADA UNICA


9




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.








GRUPO 11

JORNADA UNICA


10




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






marco teorico objetivos...como es una imagen con seis imágenes, usamos paint para construir nuestro...

Documents