Sesion Nº8 Html Avanzado Frames En El Www
-
Upload
edgar-cruz -
Category
Education
-
view
1.867 -
download
1
description
Transcript of Sesion Nº8 Html Avanzado Frames En El Www
Sesión Nº 08:
Ing. Edgar A. Cruz Huaman
INSTITUTO SUPERIOR TECNOLÓGICO INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”“SAN PEDRO”
HTML Avanzado, Frames
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
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"?>
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.
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.
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“
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
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
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
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
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
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
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.
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)
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.
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, ...">
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">
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
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
EjemploEjemplo
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
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)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
EjemploEjemplo
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>
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman