sesion nº8 html avanzado frames en el www
DESCRIPTION
Tópicos Especiales - Sesion Nº8 Html Avanzado, extension de listas, etiqueta meta, descriptor html, atributo target, etiqueta base, Frames.TRANSCRIPT
![Page 1: Sesion Nº8 Html Avanzado Frames En El Www](https://reader033.vdocuments.site/reader033/viewer/2022061302/5490825fb47959c2788b45ea/html5/thumbnails/1.jpg)
Sesión Nº 08:
Ing. Edgar A. Cruz Huaman
INSTITUTO SUPERIOR TECNOLÓGICO INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”“SAN PEDRO”
HTML Avanzado, Frames
![Page 2: Sesion Nº8 Html Avanzado Frames En El Www](https://reader033.vdocuments.site/reader033/viewer/2022061302/5490825fb47959c2788b45ea/html5/thumbnails/2.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
I. Practica Calificada 01I. Practica Calificada 01
![Page 3: Sesion Nº8 Html Avanzado Frames En El Www](https://reader033.vdocuments.site/reader033/viewer/2022061302/5490825fb47959c2788b45ea/html5/thumbnails/3.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
II. HTML AvanzadoII. HTML Avanzado
• Historia: 1990 - Tim Berners Lee.• Estándares y extensiones del lenguaje HTML.
– El estándar HTML 2.0: W3C.– El estándar HTML 3.2
• Nuevos elementos para introducir en la cabecera como <SCRIPT>, <STYLE> , <META>, <BASE > y <LINK>
• Nuevos atributos para la etiqueta BODY para poner color o imágenes de fondo y para cambiar el color del texto y links.
• La posibilidad de cambiar el tamaño y color del texto con la etiqueta <FONT>.
• la posibilidad de usar tablas.– HTML 4.0 y XHTML
• <?xml version="1.0"?>
![Page 4: Sesion Nº8 Html Avanzado Frames En El Www](https://reader033.vdocuments.site/reader033/viewer/2022061302/5490825fb47959c2788b45ea/html5/thumbnails/4.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
III. XHTMLIII. XHTML
• <?xml version="1.0"?>• Todas las etiquetas deben tener instrucción de
inicio e instrucción de fin.• Las etiquetas de una única instrucción deben
terminar con />.– <img src="img.gif"/>
• Todos los valores de los atributos deben ir entrecomillados.
![Page 5: Sesion Nº8 Html Avanzado Frames En El Www](https://reader033.vdocuments.site/reader033/viewer/2022061302/5490825fb47959c2788b45ea/html5/thumbnails/5.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
IV. El futuro de HTMLIV. El futuro de HTML
• Incorporación de nuevas tecnologías. Lenguajes de Script.– Mayor interactividad con el visitante.
• Uso de las hojas de estilo.
• Html Dinámico.
![Page 6: Sesion Nº8 Html Avanzado Frames En El Www](https://reader033.vdocuments.site/reader033/viewer/2022061302/5490825fb47959c2788b45ea/html5/thumbnails/6.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
V. Extensiones a las listasV. Extensiones a las listas
• Listas no ordenadas: Atributo “TYPE”– TYPE="Circle“– TYPE="Square“– TYPE="Disk“
![Page 7: Sesion Nº8 Html Avanzado Frames En El Www](https://reader033.vdocuments.site/reader033/viewer/2022061302/5490825fb47959c2788b45ea/html5/thumbnails/7.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
V. Extensiones a las listas (ii)V. Extensiones a las listas (ii)
• Listas Ordenadas
![Page 8: Sesion Nº8 Html Avanzado Frames En El Www](https://reader033.vdocuments.site/reader033/viewer/2022061302/5490825fb47959c2788b45ea/html5/thumbnails/8.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
Ejercicio: Lista OrdenadaEjercicio: Lista Ordenada
![Page 9: Sesion Nº8 Html Avanzado Frames En El Www](https://reader033.vdocuments.site/reader033/viewer/2022061302/5490825fb47959c2788b45ea/html5/thumbnails/9.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
VI. La etiqueta METAVI. La etiqueta META
• Carga automática de páginas
• Información para los buscadores
![Page 10: Sesion Nº8 Html Avanzado Frames En El Www](https://reader033.vdocuments.site/reader033/viewer/2022061302/5490825fb47959c2788b45ea/html5/thumbnails/10.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
VII. Descriptor HTMLVII. Descriptor HTML
![Page 11: Sesion Nº8 Html Avanzado Frames En El Www](https://reader033.vdocuments.site/reader033/viewer/2022061302/5490825fb47959c2788b45ea/html5/thumbnails/11.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
VIII. El atributo TARGETVIII. El atributo TARGET
![Page 12: Sesion Nº8 Html Avanzado Frames En El Www](https://reader033.vdocuments.site/reader033/viewer/2022061302/5490825fb47959c2788b45ea/html5/thumbnails/12.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
IX. La etiqueta BASEIX. La etiqueta BASE
![Page 13: Sesion Nº8 Html Avanzado Frames En El Www](https://reader033.vdocuments.site/reader033/viewer/2022061302/5490825fb47959c2788b45ea/html5/thumbnails/13.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
X. FramesX. Frames
• Sirven para dividir la pantalla en varios marcos con una página diferente en cada una.
![Page 14: Sesion Nº8 Html Avanzado Frames En El Www](https://reader033.vdocuments.site/reader033/viewer/2022061302/5490825fb47959c2788b45ea/html5/thumbnails/14.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
X. Creación de páginas con frames (ii)X. Creación de páginas con frames (ii)
![Page 15: Sesion Nº8 Html Avanzado Frames En El Www](https://reader033.vdocuments.site/reader033/viewer/2022061302/5490825fb47959c2788b45ea/html5/thumbnails/15.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
X. Creación del documento de definición de frames (iii)
X. Creación del documento de definición de frames (iii)
• Etiqueta: FRAMESET.
![Page 16: Sesion Nº8 Html Avanzado Frames En El Www](https://reader033.vdocuments.site/reader033/viewer/2022061302/5490825fb47959c2788b45ea/html5/thumbnails/16.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
XI. División en columnas (frame)XI. División en columnas (frame)
• <FRAMESET COLS="ancho_col1, ancho_col2, ...">
![Page 17: Sesion Nº8 Html Avanzado Frames En El Www](https://reader033.vdocuments.site/reader033/viewer/2022061302/5490825fb47959c2788b45ea/html5/thumbnails/17.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
XII. La etiqueta FRAMEXII. La etiqueta FRAME
• <FRAME SRC="docum.htm"
NAME="primer_frame">
![Page 18: Sesion Nº8 Html Avanzado Frames En El Www](https://reader033.vdocuments.site/reader033/viewer/2022061302/5490825fb47959c2788b45ea/html5/thumbnails/18.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
XIII. Página completa con framesXIII. Página completa con frames
![Page 19: Sesion Nº8 Html Avanzado Frames En El Www](https://reader033.vdocuments.site/reader033/viewer/2022061302/5490825fb47959c2788b45ea/html5/thumbnails/19.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
EjemploEjemplo
![Page 20: Sesion Nº8 Html Avanzado Frames En El Www](https://reader033.vdocuments.site/reader033/viewer/2022061302/5490825fb47959c2788b45ea/html5/thumbnails/20.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
XIV. Atributos de la etiqueta FRAMEXIV. Atributos de la etiqueta FRAME
![Page 21: Sesion Nº8 Html Avanzado Frames En El Www](https://reader033.vdocuments.site/reader033/viewer/2022061302/5490825fb47959c2788b45ea/html5/thumbnails/21.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
XIV. Atributos de la etiqueta FRAME (i)
XIV. Atributos de la etiqueta FRAME (i)
![Page 22: Sesion Nº8 Html Avanzado Frames En El Www](https://reader033.vdocuments.site/reader033/viewer/2022061302/5490825fb47959c2788b45ea/html5/thumbnails/22.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
EjemploEjemplo
![Page 23: Sesion Nº8 Html Avanzado Frames En El Www](https://reader033.vdocuments.site/reader033/viewer/2022061302/5490825fb47959c2788b45ea/html5/thumbnails/23.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
XV. Bordes de los framesXV. Bordes de los frames
• Cambiando el color del borde– <FRAME BORDERCOLOR="#FF0000">
• Como quitar el borde– <FRAME FRAMEBORDER="0"> (0 ó 1)
• Grosor del borde– <FRAMEBORDER BORDER=“10">
...
</FRAMEBORDER>
![Page 24: Sesion Nº8 Html Avanzado Frames En El Www](https://reader033.vdocuments.site/reader033/viewer/2022061302/5490825fb47959c2788b45ea/html5/thumbnails/24.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman