A continuación vamos a realizar el ejercicio de manejo de Franks con HTML.
Están listos.
Vamos
el objetivo del ejercicio es crear un proyecto para poner en práctica los frames con HTML y al finalizar
deberemos observar lo siguiente según se muestra
como primer paso vamos a crear nuestro proyecto.
El nombre del proyecto se va a llamar manejo Freinet HTML y lo depositamos en la ruta mostrada y damos
clic en Finalizar.
Como siguiente paso vamos a crear un nuevo archivo este nuevo archivo va a ser de tipo HTML y el nombre
del archivo se va a llamar navegación y damos clic en Finalizar
ahora vamos a crear un nuevo archivo también de tipo HTML y se va a llamar título y damos clic en Finalizar
ahora creamos un archivo Damin de tipo HTML llamado contenido inicial y damos clic en Finalizar
y también creamos un archivo llamado Contacto y damos clic en Finalizar.
También agregamos un archivo HTML llamado información y damos clic en Finalizar cada uno de los archivos
HTML que hemos creado anteriormente van a ser parte del Freund que vamos a crear a continuación así
que este frame o marco de HTML va a utilizar estas páginas HTML y va a mostrar la información de cada
una de estas páginas.
Todo englobado a través de un FRAVM de HTML así que a continuación vamos a modificar nuestro archivo
índex punto HTML el cual va a contener el marco o frame de HTML y posteriormente vamos a modificar cada
uno de los archivos HTML que hemos creado anteriormente
así que comenzamos a modificar nuestro archivo índex punto HTML.
Agregamos el Doctrine abrimos nuestro elemento HTML y agregamos también nuestro G.T.
Como ya hemos trabajado anteriormente el título es ejercicio Franks y cerramos nuestro G.T ahora vamos
a agregar el elemento de frente externo.
Creamos un frente externo de dos columnas podemos trabajar Frings dentro de Frings que es precisamente
lo que vamos a hacer.
Por lo tanto vamos a definir en primer lugar un frame que va a ser nuestro frente externo.
En este caso para definir un frente vamos a utilizar la etiqueta Freund Zet y en este caso vamos a indicar
que va a tener dos columnas para definir un frame.
Vamos a utilizar la etiqueta Frenzel y vamos a indicar por medio del atributo Cols que va a tener dos
columnas.
En este caso la primer columna va a tener el 25 por ciento del espacio que tengamos disponible en nuestro
navegador y la siguiente columna va a abarcar el espacio restante que tengamos en nuestro navegador.
Así que esta primera columna va a ocupar el 25 por ciento y el espacio restante lo va a ocupar la segunda
columna también posteriormente indicamos que tanto el Border el frame pacing y el borde de nuestro Freinet
va a ser igual a cero pero si quisiéramos ver la separación de cada uno de los elementos de nuestro
Fring podemos modificar aquí el valor para que tengamos un borde por ejemplo de un píxel y con esto
podemos observar también los bordes de nuestro.
Así que la etiqueta Ephraim set que hemos declarado va a contener internamente a un Freinet.
En este caso vamos a definir un frame en la parte izquierda y en la parte derecha va a ser otro frame
set así que vamos a ir anidando estos elementos para ir conformando el marco que queremos trabajar.
En este ejercicio así que vamos a utilizar ahora la etiqueta Freinet para agregar del lado izquierdo
el contenido del frame ya que hemos definido si recordamos dos columnas en este caso la primera columna
de la columna de la parte izquierda va a mostrar el contenido del archivo navegacion punto HTML y el
nombre de este frame va a ser navegacion así que podemos observar que para manejar un frame primero
vamos a indicar vamos a conformarlo por medio de un elemento Francesc.
Esto va a definir el número de columnas que va a tener nuestro frame y posteriormente por medio del
elemento Fring vamos a ir agregando los archivos HTML que van a mostrar estas columnas así que en este
caso la columna izquierda va a tener el elemento Freinet y por lo tanto va a mostrar el contenido del
archivo navegacion punto HTML y del lado derecho.
Vamos a conformar otro Freund set el cual también se va a subdividir para agregar otro contenido con
archivos HTML así que este nuevo set del lado derecho va a tener dos renglones por lo tanto vamos a
agregar un frame set el cual va a indicar por medio del atributo Rous que en su primer renglón va a
tener definido el 30 por ciento y el segundo renglón va a ocupar el espacio restante que tengamos en
el navegador así que nuestro primer renglón de este segundo set vamos a agregar el contenido del archivo
título punto HTML.
El nombre de este Efren es título y vamos a indicar que no haga scrolling esto para que quiten las barras
de scrolling.
En dado caso de que se lleguen a mostrar en este caso únicamente queremos mostrar el contenido en esta
parte de este.
Y el segundo renglón de este frame set vamos a agregar otro Freinet y el contenido de este Ephraim va
a ser el archivo contenido inicial punto HTML y el nombre de este frame va a ser contenido.
Es importante que vayamos definiendo por cada uno de los frames que vayamos agregando que indiquemos
un nombre.
Por ello en cada que hemos agregado hemos indicado un nombre ya que posteriormente podremos hacer referencia
a estos frames por medio de su nombre con eso cerramos nuestro Ephraim set el cual va a tener dos renglones
y finalmente agregamos la etiqueta no frames y este elemento se va a agregar en caso de que el navegador
que estemos utilizando no soporte frames y agregamos el texto.
Este es una página que no pudo mostrar los frames y cerramos la etiqueta así que esta etiqueta no se
va a mostrar en caso de que se soporten los frames pero si el navegador no soporta frames entonces se
va a desplegar este texto y finalmente cerramos el set más externo.
Y también cerramos nuestro documento HTML con esto prácticamente ya tenemos conformado nuestro Freinet
ahora vamos a agregar el contenido de los archivos restantes.
Navegación punto HTML título punto HTML y contenido inicial punto HTML
agregamos el contenido a nuestro archivo navegación puntu HTML el título es navegación menús y vamos
a agregar un estilo para poder diferenciar este contenido del documento HTML cuando lo mostremos en
los frames así que agregamos en este caso un contenido un color distinto al body de nuestro documento
HTML de esta página recordemos que estamos utilizando la etiqueta estáel necesitamos agregar entre comentarios
los estilos que definamos en este documento HTML ya que en caso de que el navegador no lo soporte entonces
no se afecte el contenido de nuestro documento HTML y simplemente va a ignorar los estilos que estemos
definiendo.
Por ello es que estamos cargando entre comentarios estos estilos para la etiqueta de Body cerramos nuestra
etiqueta está él y también nos etiqueta de Get y posteriormente el contenido de este documento HTML
agregamos el body y agregamos un título llamado menú y una lista en este caso va a ser una lista hacia
los elementos de tipo HTML.
Ahora aquí lo interesante es que vamos a agregar un hipervínculo pero el hipervínculo una vez que demos
clic sobre este texto en este caso el texto de información se va a mostrar la información del archivo
información punto HTML pero esta información se va a descargar sobre la parte del frente que hemos llamado
contenido así que esta información HTML del archivo información punto HTML se va a mostrar en la parte
del frente que hemos llamado contenido.
De esta manera es que es importante que vayamos definiendo las secciones de nuestro marco de nuestro
Freinet para que podamos ir vaciando la información conforme vayamos necesitando.
En este marco así que en este caso este es el objetivo del elemento target.
La información del documento HTML se va a vaciar dentro de la sección que hemos definido como contenido
en nuestro Freinet como siguiente elemento de nuestro listado.
Vamos a agregar la página de contacto punto HTML y también cuando se dé click a esta página se va a
descargar este contenido en la sección de contenido de nuestro fring y con eso cerramos nuestro listado.
En este caso son las opciones que vamos a agregar pero así podríamos agregar más opciones a nuestro
listado y cada vez que demos clic el contenido del documento HTML se va a vaciar en la sección de contenido
ya que así lo estamos especificando por medio del atributo target cerramos la etiqueta de Bodhi y cerramos
nuestro documento HTML así que esta sección de navegación puntu HTML es una de las más importantes ya
que como hemos observado va a tomar información de documentos HTML y lo va a vaciar sobre cierta sección
del Freinet que hemos definido continuando con nuestro archivo título punto HTML.
Ahora vamos a agregar lo siguiente Vamos a definir el elemento HTML y agregamos el jet agregamos un
título y también vamos a modificar.
En este caso el background el color de fondo para que podamos identificar el contenido HTML que vamos
a vaciar sobre nuestro Freinet cerramos nuestro cabecero y agregamos el siguiente contenido.
En este caso únicamente vamos a agregar lo siguiente un título indicando que es el título de nuestra
página pero aquí podríamos agregar cualquier información referente al contenido del título de nuestro
Freund cerramos nuestro documento HTML y si revisamos el Freund que hemos definido podemos observar
que hemos definido una sección también para este documento HTML llamado título punto HTML.
Así que esto es lo que se va a vaciar dentro de Ephraim que hemos definido en la página de índex punto
HTML.
Cualquier duda puede volver a revisar este archivo para que quede claro en qué punto es que se va a
vaciar este contenido del archivo título apuntó HTML.
Ahora vamos a definir la página de contenido inicial abrimos nuestro documento HTML cargamos el título
de contenido por default y también vamos a modificar el Bagram en el color de fondo y también el color
de nuestra fuente cerramos el estilo y también el elemento de Y agregamos el body en este caso únicamente
vamos a agregar el texto de contenido por default.
Este es el archivo que se va a mostrar en primer lugar en la sección de contenido.
Esto conforme a lo que hemos definido en nuestro Freund pero conforme demos clic en la sección de menú
entonces se va a modificar el contenido y se va a quitar este contenido por default y se va a cargar
el contenido del archivo HTML según sea seleccionado en la opción de menú y por último tenemos la sección
de contacto agregamos lo siguiente agregamos el título de contacto y también un estilo modificamos el
color de fondo y el color de nuestra fuente
y el contenido simplemente va a ser el título de contacto y terminamos nuestro documento HTML
y por último vamos a agregar el contenido de información puntuó HTML agregamos el título de información
y también el estilo modificamos el color de fondo y el color de nuestro texto cerramos nuestro G.T y
abrimos el body y agregamos el título de información y cerramos nuestro documento HTML
ahora vamos a ejecutar nuestro proyecto y podemos observar lo siguiente podemos observar que hemos definido
nuestro Freinet en primer lugar definimos un frame set el cual son dos columnas por un lado hemos definido
que la primer columna va a ocupar el 25 por ciento del espacio que tengamos en nuestro navegador web
y el espacio restante lo va a ocupar la segunda columna.
Posteriormente definimos un frame.
En este caso indicamos qué se va a descargar la información del menú y como segunda columna hemos definido
otro Frenzel y en este caso este segundo set indicamos que va a tener dos renglones el primer renglón
indicamos que va a tener el 30 por ciento del espacio que tengamos disponible para estos renglones y
el segundo renglón va a tener todo el espacio disponible restante y a cada una de estas secciones de
nuestros frames les hemos asignado un nombre.
Por lo tanto cuando demos clic por ejemplo en la opción de información el contenido de este archivo
de información punto HTML se va a descargar en la sección de contenido por default y si damos clic en
contacto entonces de nueva cuenta esa información del archivo contacto punto HTML se va a vaciar dentro
de la sección de contenido y podemos observar que las otras secciones son más estáticas.
Tanto la sección de menú como la sección de título de página la sección que es más dinámica es la sección
de contenido.
Sin embargo segregamos más links y quisiéramos modificar de manera dinámica la información del título
de la página.
También podríamos hacerlo simplemente modificando el target e indicando que la información de cierto
archivo se va a vaciar en la sección de título de nuestro Freund.
Sin embargo estamos tratando de simular las opciones que tenemos por ejemplo como el menú título y el
contenido de una página.
Por lo tanto el contenido es el que va a ser más dinámico y una vez que el usuario vaya dando clic en
los elementos que tenga en el menú se va a ir modificando la sección de contenido.
Pero los demás elementos se van a mantener fijos así que esta es una manera en que podemos trabajar
nuestros frames con HTML como ejercicio extra pueden dar clic derecho sobre alguna sección de este frame
y empezar a inspeccionar cada uno de los elementos que hemos trabajado en este ejercicio de Frings HTML
como conclusión.
Con este ejercicio hemos puesto en práctica el concepto de frente con HTML.
Hemos creado varias páginas HTML con el objetivo de administrarlas desde el frame inicial.
Si bien este concepto se considera obsoleto en la versión más reciente de HTML es posible que encontremos
este concepto aplicado en otras aplicaciones legadas o heredadas con HTML.
Por ello es importante que tengamos las bases y sepamos el uso básico del manejo de frente con HTML.
Con eso terminamos los ejercicios de manejo Freundt HTML.