SlideShare una empresa de Scribd logo
Colegio Nacional Nicolás Esguerra
Edificamos futuro
Ricardo Andrés Meneses
Cordero
Sebastián Montañez López
905
MARCOS PAGINA WEB VI
Unidad 7. Marcos (I)
En este tema vamos a ver qué son los marcos, para qué se utilizan, y cómo insertarlos.
Conjunto de marcos <frameset>
Los marcos o frames
sirven para distribuir mejor
los datos de las páginas,
ya que permiten mantener
fijas algunas partes, como
pueden ser el logotipo y la
barra de navegación,
mientras que otras sí
pueden cambiar. Además
de mejorar la
funcionalidad, pueden
mejorar también la
apariencia.
Cada uno de los
marcos de una página,
contiene un documento
HTML individual. Por
ejemplo, en la imagen de
la derecha puedes ver
una página con dos
marcos. El marco
izquierdo contiene el
documento menu.htm y
el derecho el
documento perros.htm.
Para poder visualizar la
página de este modo,
hemos tenido que abrir en
el navegador el
documento marcos.htm,
que es el que en este
caso contiene el grupo de
marcos.
El trabajar con marcos puede resultar una tarea algo complicada, sobretodo al principio, por
lo que vemos solamente algunos conteptos básicos y ejemplos sencillos.
Como hemos visto si queremos utilizar marcos debemos crear una página con la definición
del conjunto de marcos (en el ejemplo anterior la página marcos.htm).
Los conjuntos de marcos se definen a través de las
etiquetas <frameset> y </frameset>, que van después de la etiqueta <head>. A través de
estas etiquetas se indica el número de marcos en que se dividirá la ventana, cada uno de los
cuales será una especie de subventana.
Cuando se insertan las etiquetas <frameset> y </frameset> no hay que insertar las
etiquetas <body> y </body>, ya que el cuerpo del documento será el cuerpo de las páginas
que se carguen en cada uno de los marcos del conjunto de marcos.
Los atributos que pueden especificarse sobre la etiqueta <frameset> son los siguientes:
Atributo Significado Posibles valores
cols
tamaño de cada una de las columnas en que se divide el documento
un número
(acompañado de %
cuando se desee que
sea en porcentaje)
por cada columna,
separados por
comas.
rows tamaño de cada una de las columnas en que se divide el documento
un número (acompañado
de % cuando se desee
que sea en porcentaje)
por cada fila, separados
por comas.
frameborder aparece o no el borde de los marcos
yes
no
framespacing separación entre los marcos un número
border grosor del borde
un número, acompañado
de % cuando se desee
que sea en porcentaje
bordercolor color del borde número hexadecimal
También es posible incluir asteriscos como valores para los atributos cols y rows. Este
valor indica que dicha fila o columna ocupará todo lo que quede de ventana o subventana.
Cuando existan varias columnas o filas con este valor, se repartirán de forma equitativa lo que
quede de ventana.
Por ejemplo, si insertáramos la siguiente línea de código:
<frameset rows="*" cols="142,*,25%">...</frameset>
Como el atributo rows tiene el valor asterisco, solo habría una fila, que ocuparía todo el
alto de la ventana. En este caso concreto no haría falta poner el atributo rows.
Como el atributo cols tiene tres valores, estaríamos dividiendo el documento en tres
columnas. La primera columna sería de 142 píxeles de ancho, la tercerá del 25% de la
ventana, y la segunda columna ocuparía lo que quedará de ventana (el 75% de la ventana
menos 142 píxeles).
También es posible anidar marcos. Es decir, es posible dividir marcos en otros marcos.
Por ejemplo, si insertáramos el siguiente código:
<frameset cols="142,*">
<frameset rows="80,*">...</frameset>
<frameset cols="25%,*,*">...</frameset>
</frameset>
Estaríamos dividiendo el documento en dos columnas. La primera sería de 142 píxeles, y la
otra abarcaría el resto de la ventana.
Al mismo tiempo, la primera columna o subventana estaría dividida en dos filas o
subventanas horizontales, la primera de ellas de 80 píxeles.
La segunda columna o subventana de la ventana principal se dividiría a su vez en tres
columnas, la primera de ellas del 25% de la subventana, y las otras dos se repartirían el resto
a partes iguales (se repartirían el 75% de la subventana).
Código:
MENU
<HTML>
<HEAD>
<TITLE>UNDER YOUR CELL</TITLE>
</HEAD>
<BODY bgcolor="black">
< a href="INDEX.HTML"target="marcoderecho"><FONTCOLOR="white"><CENTER><H1>Pagina
Pricipal</H1></CENTER></a>
<a href="APPLE.HTML"target="marcoderecho"><imgsrc="imagenes/namsana.gif"border="4"
width="200" height="200"></a>
<a href="samsungmobile.HTML"target="marcoderecho"><imgsrc="imagenes/galaxi.gif"
border="4" width="200"height="200"></a>
<a href="huawei.HTML"target="marcoderecho"><imgsrc="imagenes/huawei.jpg"border="4"
width="200" height="200"></a>
<a href=ASUS.HTML"target="marcoderecho"><imgsrc="imagenes/Asus.png"border="4"
width="200" height="200"></a>
</BODY>
</HTML>
MARCOS:
<HTML>
<HEAD>
<TITLE>UNDER YOUR CELL</TITLE>
</HEAD>
<framesetrows="*"cols"180,*" framespacing="0"frameborder="si"border="3">
<frame src="MENU.HTML" name="marcoizquierdo"frameborder="si"scrolling="Si"
noreize>
<frame src="paginawebindex.HTML"name="marcoderecho"frameborder="SI">
</frameset>
<noframes>
<bodybgcolor="#990000">
¡--Estapaginawebfue elaboradaporRicardoAndresMenesesCordero--Seastian
Montañes---!
</BODY>
</noframes>
</HTML>

Más contenido relacionado

La actualidad más candente

Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
Mateo Remolina
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
Mateo Torres
 
Inf2 exc15 p1a_adilene
Inf2 exc15 p1a_adileneInf2 exc15 p1a_adilene
Inf2 exc15 p1a_adilene
adilene11
 
Colegio nacional nicoles esguerra
Colegio nacional nicoles esguerraColegio nacional nicoles esguerra
Colegio nacional nicoles esguerra
Monsalve Sergio
 
Ejercicio 2 esquema numerado
Ejercicio 2  esquema numeradoEjercicio 2  esquema numerado
Ejercicio 2 esquema numeradowistonlopez
 
Trabajo 6
Trabajo 6Trabajo 6
Trabajo 6
Mateo Remolina
 
Html y css
Html y cssHtml y css
Html y cssisandy
 
Trabajo tablas
Trabajo tablasTrabajo tablas
Trabajo tablas
tecknopintos
 
Htmlexc15 unidad 3 html_mayrafranco
Htmlexc15 unidad 3 html_mayrafrancoHtmlexc15 unidad 3 html_mayrafranco
Htmlexc15 unidad 3 html_mayrafranco
Mayra Franco
 
Olivarko
OlivarkoOlivarko
Olivarko
Nikolas Avila
 
Pendejobnolll
PendejobnolllPendejobnolll
Pendejobnolll
REYMIS820
 
tablas
tablastablas
tablas
cpaz12345
 
HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.
HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.
HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.Jenny A
 

La actualidad más candente (15)

Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Inf2 exc15 p1a_adilene
Inf2 exc15 p1a_adileneInf2 exc15 p1a_adilene
Inf2 exc15 p1a_adilene
 
Colegio nacional nicoles esguerra
Colegio nacional nicoles esguerraColegio nacional nicoles esguerra
Colegio nacional nicoles esguerra
 
Ejercicio 2 esquema numerado
Ejercicio 2  esquema numeradoEjercicio 2  esquema numerado
Ejercicio 2 esquema numerado
 
Trabajo 6
Trabajo 6Trabajo 6
Trabajo 6
 
Html y css
Html y cssHtml y css
Html y css
 
Trabajo tablas
Trabajo tablasTrabajo tablas
Trabajo tablas
 
Htmlexc15 unidad 3 html_mayrafranco
Htmlexc15 unidad 3 html_mayrafrancoHtmlexc15 unidad 3 html_mayrafranco
Htmlexc15 unidad 3 html_mayrafranco
 
Etiquetas en HTML
Etiquetas en HTMLEtiquetas en HTML
Etiquetas en HTML
 
Tagshtml
TagshtmlTagshtml
Tagshtml
 
Olivarko
OlivarkoOlivarko
Olivarko
 
Pendejobnolll
PendejobnolllPendejobnolll
Pendejobnolll
 
tablas
tablastablas
tablas
 
HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.
HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.
HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.
 

Destacado

Taller 4
Taller 4Taller 4
Taller 4
sebastas07
 
taller V
taller Vtaller V
taller V
sebastas07
 
Taller dos paginaweb
Taller dos paginawebTaller dos paginaweb
Taller dos paginaweb
sebastas07
 
Taller 3
Taller 3Taller 3
Taller 3
sebastas07
 
Formularios
FormulariosFormularios
Formularios
menesesricardo79
 
Html.1
Html.1Html.1
Html.1
sebastas07
 

Destacado (6)

Taller 4
Taller 4Taller 4
Taller 4
 
taller V
taller Vtaller V
taller V
 
Taller dos paginaweb
Taller dos paginawebTaller dos paginaweb
Taller dos paginaweb
 
Taller 3
Taller 3Taller 3
Taller 3
 
Formularios
FormulariosFormularios
Formularios
 
Html.1
Html.1Html.1
Html.1
 

Similar a Marcos

Byb4
Byb4Byb4
Frameset
FramesetFrameset
Frames
FramesFrames
Frames
FramesFrames
Guía No.2 Grado 7
Guía No.2 Grado 7Guía No.2 Grado 7
Guía No.2 Grado 7gregoriopena
 
Frames
FramesFrames
Frames
JESYKITA
 
Frames Slideshare
Frames SlideshareFrames Slideshare
Frames Slideshare
Instituto Sudamericano
 
Frames slideshare
Frames slideshareFrames slideshare
Frames slideshare
Instituto Sudamericano
 
Presentación2
Presentación2Presentación2
Presentación2creto-96
 
Presentación1 de frames y marcos
Presentación1 de frames y marcosPresentación1 de frames y marcos
Presentación1 de frames y marcospachi-cualchi
 
Definicion de frames
Definicion de framesDefinicion de frames
Definicion de frames
vilpuldia
 
Definicion de frames
Definicion de framesDefinicion de frames
Definicion de frames
vilpuldia
 
Definicion de frames
Definicion de framesDefinicion de frames
Definicion de frames
vilpuldia
 
Frames
FramesFrames
Frames
vilpuldia
 
Frames-Formularios
Frames-FormulariosFrames-Formularios
Frames-Formularios
Andres Trejo
 
Etiquetas para tablas y sus propiedades
Etiquetas para tablas y sus propiedadesEtiquetas para tablas y sus propiedades
Etiquetas para tablas y sus propiedades
Jennifer Mejía D.
 

Similar a Marcos (20)

Byb4
Byb4Byb4
Byb4
 
Frameset
FramesetFrameset
Frameset
 
Frames
FramesFrames
Frames
 
Frames
FramesFrames
Frames
 
Guía No.2 Grado 7
Guía No.2 Grado 7Guía No.2 Grado 7
Guía No.2 Grado 7
 
Frames
FramesFrames
Frames
 
Frames
FramesFrames
Frames
 
Frames Slideshare
Frames SlideshareFrames Slideshare
Frames Slideshare
 
Frames slideshare
Frames slideshareFrames slideshare
Frames slideshare
 
Frames slideshare
Frames slideshareFrames slideshare
Frames slideshare
 
Presentación2
Presentación2Presentación2
Presentación2
 
Presentación1 de frames y marcos
Presentación1 de frames y marcosPresentación1 de frames y marcos
Presentación1 de frames y marcos
 
Definicion de frames
Definicion de framesDefinicion de frames
Definicion de frames
 
Definicion de frames
Definicion de framesDefinicion de frames
Definicion de frames
 
Definicion de frames
Definicion de framesDefinicion de frames
Definicion de frames
 
Frames of nicolas padilla
Frames of nicolas padillaFrames of nicolas padilla
Frames of nicolas padilla
 
Frames
FramesFrames
Frames
 
Frames-Formularios
Frames-FormulariosFrames-Formularios
Frames-Formularios
 
Capas en html
Capas en htmlCapas en html
Capas en html
 
Etiquetas para tablas y sus propiedades
Etiquetas para tablas y sus propiedadesEtiquetas para tablas y sus propiedades
Etiquetas para tablas y sus propiedades
 

Más de sebastas07

Evidencias
EvidenciasEvidencias
Evidencias
sebastas07
 
Evidencias
EvidenciasEvidencias
Evidencias
sebastas07
 
Taller final normas icontec
Taller final normas icontecTaller final normas icontec
Taller final normas icontec
sebastas07
 
Plantilla ic con formularios
Plantilla ic con formulariosPlantilla ic con formularios
Plantilla ic con formularios
sebastas07
 
plantilla icontec
plantilla icontecplantilla icontec
plantilla icontec
sebastas07
 
Actividad #2
Actividad #2Actividad #2
Actividad #2
sebastas07
 
Actividad #2
Actividad #2Actividad #2
Actividad #2
sebastas07
 
Unidad 10
Unidad 10 Unidad 10
Unidad 10
sebastas07
 
Presentacion smart art
Presentacion smart artPresentacion smart art
Presentacion smart artsebastas07
 
LA REVOLUCIÓN INDUSTRIAL
LA REVOLUCIÓN INDUSTRIALLA REVOLUCIÓN INDUSTRIAL
LA REVOLUCIÓN INDUSTRIALsebastas07
 
Actividad 1informatica (1)
Actividad 1informatica (1)Actividad 1informatica (1)
Actividad 1informatica (1)sebastas07
 
TRABJO
TRABJOTRABJO
TRABJO
sebastas07
 

Más de sebastas07 (13)

Evidencias
EvidenciasEvidencias
Evidencias
 
Evidencias
EvidenciasEvidencias
Evidencias
 
Taller final normas icontec
Taller final normas icontecTaller final normas icontec
Taller final normas icontec
 
Plantilla ic con formularios
Plantilla ic con formulariosPlantilla ic con formularios
Plantilla ic con formularios
 
plantilla icontec
plantilla icontecplantilla icontec
plantilla icontec
 
Actividad #2
Actividad #2Actividad #2
Actividad #2
 
Actividad1
Actividad1Actividad1
Actividad1
 
Actividad #2
Actividad #2Actividad #2
Actividad #2
 
Unidad 10
Unidad 10 Unidad 10
Unidad 10
 
Presentacion smart art
Presentacion smart artPresentacion smart art
Presentacion smart art
 
LA REVOLUCIÓN INDUSTRIAL
LA REVOLUCIÓN INDUSTRIALLA REVOLUCIÓN INDUSTRIAL
LA REVOLUCIÓN INDUSTRIAL
 
Actividad 1informatica (1)
Actividad 1informatica (1)Actividad 1informatica (1)
Actividad 1informatica (1)
 
TRABJO
TRABJOTRABJO
TRABJO
 

Último

PREVENCION DELITOS RELACIONADOS COM INT.pptx
PREVENCION DELITOS RELACIONADOS COM INT.pptxPREVENCION DELITOS RELACIONADOS COM INT.pptx
PREVENCION DELITOS RELACIONADOS COM INT.pptx
johnsegura13
 
plan contable empresarial para empresass
plan contable empresarial para empresassplan contable empresarial para empresass
plan contable empresarial para empresass
SUSANJHEMAMBROSIOSEV1
 
RESPUESTA DERECHO DE PETICION EN PROPIEDAD HORIZONTAL
RESPUESTA DERECHO DE PETICION EN PROPIEDAD HORIZONTALRESPUESTA DERECHO DE PETICION EN PROPIEDAD HORIZONTAL
RESPUESTA DERECHO DE PETICION EN PROPIEDAD HORIZONTAL
dorislilianagarb
 
EJEMPLO SOLICITUD CERTIFICADO DE INFORMES PREVIOS
EJEMPLO SOLICITUD CERTIFICADO DE INFORMES PREVIOSEJEMPLO SOLICITUD CERTIFICADO DE INFORMES PREVIOS
EJEMPLO SOLICITUD CERTIFICADO DE INFORMES PREVIOS
ArquitecturaClculoCe
 
capitulo-5-libro-contabilidad-costo-volumen-utilidad.pdf
capitulo-5-libro-contabilidad-costo-volumen-utilidad.pdfcapitulo-5-libro-contabilidad-costo-volumen-utilidad.pdf
capitulo-5-libro-contabilidad-costo-volumen-utilidad.pdf
cessarvargass23
 
VISIÓN MISIÓN VALORES EMPRESARIALES EN EL
VISIÓN MISIÓN VALORES EMPRESARIALES EN ELVISIÓN MISIÓN VALORES EMPRESARIALES EN EL
VISIÓN MISIÓN VALORES EMPRESARIALES EN EL
LilianBaosMedina
 
Karla_Meza_Catedra_Morazanica_TEC18NOV_CAP_3.pptx
Karla_Meza_Catedra_Morazanica_TEC18NOV_CAP_3.pptxKarla_Meza_Catedra_Morazanica_TEC18NOV_CAP_3.pptx
Karla_Meza_Catedra_Morazanica_TEC18NOV_CAP_3.pptx
LibreriaOrellana1
 
Capacitación chatbot Wapi para enviar por whatsapp
Capacitación chatbot Wapi para enviar por whatsappCapacitación chatbot Wapi para enviar por whatsapp
Capacitación chatbot Wapi para enviar por whatsapp
acastropu
 
MODELO CONS1 NOTA1.pptx.....................................................
MODELO CONS1 NOTA1.pptx.....................................................MODELO CONS1 NOTA1.pptx.....................................................
MODELO CONS1 NOTA1.pptx.....................................................
75254036
 
Enfoque Estructuralista de la Administración.docx
Enfoque Estructuralista de la Administración.docxEnfoque Estructuralista de la Administración.docx
Enfoque Estructuralista de la Administración.docx
mariferbonilla2
 
niif 15 ejemplos esenciales para su entendimiento
niif 15 ejemplos esenciales para su entendimientoniif 15 ejemplos esenciales para su entendimiento
niif 15 ejemplos esenciales para su entendimiento
crimaldonado
 
U1. C2. TIPOS DE INSTITUCIONES FINANCIERAS.pptx
U1. C2. TIPOS DE INSTITUCIONES FINANCIERAS.pptxU1. C2. TIPOS DE INSTITUCIONES FINANCIERAS.pptx
U1. C2. TIPOS DE INSTITUCIONES FINANCIERAS.pptx
fernfre15
 
MODELO DE REGLAMENTO INTERNO DE TRABAJO DE UNA EMPRESA
MODELO DE REGLAMENTO INTERNO DE TRABAJO DE UNA EMPRESAMODELO DE REGLAMENTO INTERNO DE TRABAJO DE UNA EMPRESA
MODELO DE REGLAMENTO INTERNO DE TRABAJO DE UNA EMPRESA
PETRAESPINOZASALAZAR1
 
Trigonometria Plan-el mejor.pptxssssssss
Trigonometria Plan-el mejor.pptxssssssssTrigonometria Plan-el mejor.pptxssssssss
Trigonometria Plan-el mejor.pptxssssssss
QuerubinOlayamedina
 
INFORME ADMINISTRACIÓN EN PROPIEDAD HORIZONTAL
INFORME ADMINISTRACIÓN EN PROPIEDAD HORIZONTALINFORME ADMINISTRACIÓN EN PROPIEDAD HORIZONTAL
INFORME ADMINISTRACIÓN EN PROPIEDAD HORIZONTAL
dorislilianagarb
 
Solicitud de cambio de un producto, a nivel empresarial.
Solicitud de cambio de un producto, a nivel empresarial.Solicitud de cambio de un producto, a nivel empresarial.
Solicitud de cambio de un producto, a nivel empresarial.
femayormisleidys
 
SESION N° 01.pptx GESTION PROYECTOS UCV 2024
SESION N° 01.pptx GESTION PROYECTOS UCV 2024SESION N° 01.pptx GESTION PROYECTOS UCV 2024
SESION N° 01.pptx GESTION PROYECTOS UCV 2024
auyawilly
 
Informe del banco centra de Honduras trabajo de estudiantes
Informe del banco centra de Honduras trabajo de estudiantesInforme del banco centra de Honduras trabajo de estudiantes
Informe del banco centra de Honduras trabajo de estudiantes
LibreriaOrellana1
 
DDF Luis GIl Diagrama de flujo (1).pptx
DDF Luis GIl Diagrama de flujo  (1).pptxDDF Luis GIl Diagrama de flujo  (1).pptx
DDF Luis GIl Diagrama de flujo (1).pptx
giltoledoluis123
 
Presentación Óxido Cuproso Nordox 75 WG.pptx
Presentación Óxido Cuproso Nordox 75 WG.pptxPresentación Óxido Cuproso Nordox 75 WG.pptx
Presentación Óxido Cuproso Nordox 75 WG.pptx
endophytsanidad
 

Último (20)

PREVENCION DELITOS RELACIONADOS COM INT.pptx
PREVENCION DELITOS RELACIONADOS COM INT.pptxPREVENCION DELITOS RELACIONADOS COM INT.pptx
PREVENCION DELITOS RELACIONADOS COM INT.pptx
 
plan contable empresarial para empresass
plan contable empresarial para empresassplan contable empresarial para empresass
plan contable empresarial para empresass
 
RESPUESTA DERECHO DE PETICION EN PROPIEDAD HORIZONTAL
RESPUESTA DERECHO DE PETICION EN PROPIEDAD HORIZONTALRESPUESTA DERECHO DE PETICION EN PROPIEDAD HORIZONTAL
RESPUESTA DERECHO DE PETICION EN PROPIEDAD HORIZONTAL
 
EJEMPLO SOLICITUD CERTIFICADO DE INFORMES PREVIOS
EJEMPLO SOLICITUD CERTIFICADO DE INFORMES PREVIOSEJEMPLO SOLICITUD CERTIFICADO DE INFORMES PREVIOS
EJEMPLO SOLICITUD CERTIFICADO DE INFORMES PREVIOS
 
capitulo-5-libro-contabilidad-costo-volumen-utilidad.pdf
capitulo-5-libro-contabilidad-costo-volumen-utilidad.pdfcapitulo-5-libro-contabilidad-costo-volumen-utilidad.pdf
capitulo-5-libro-contabilidad-costo-volumen-utilidad.pdf
 
VISIÓN MISIÓN VALORES EMPRESARIALES EN EL
VISIÓN MISIÓN VALORES EMPRESARIALES EN ELVISIÓN MISIÓN VALORES EMPRESARIALES EN EL
VISIÓN MISIÓN VALORES EMPRESARIALES EN EL
 
Karla_Meza_Catedra_Morazanica_TEC18NOV_CAP_3.pptx
Karla_Meza_Catedra_Morazanica_TEC18NOV_CAP_3.pptxKarla_Meza_Catedra_Morazanica_TEC18NOV_CAP_3.pptx
Karla_Meza_Catedra_Morazanica_TEC18NOV_CAP_3.pptx
 
Capacitación chatbot Wapi para enviar por whatsapp
Capacitación chatbot Wapi para enviar por whatsappCapacitación chatbot Wapi para enviar por whatsapp
Capacitación chatbot Wapi para enviar por whatsapp
 
MODELO CONS1 NOTA1.pptx.....................................................
MODELO CONS1 NOTA1.pptx.....................................................MODELO CONS1 NOTA1.pptx.....................................................
MODELO CONS1 NOTA1.pptx.....................................................
 
Enfoque Estructuralista de la Administración.docx
Enfoque Estructuralista de la Administración.docxEnfoque Estructuralista de la Administración.docx
Enfoque Estructuralista de la Administración.docx
 
niif 15 ejemplos esenciales para su entendimiento
niif 15 ejemplos esenciales para su entendimientoniif 15 ejemplos esenciales para su entendimiento
niif 15 ejemplos esenciales para su entendimiento
 
U1. C2. TIPOS DE INSTITUCIONES FINANCIERAS.pptx
U1. C2. TIPOS DE INSTITUCIONES FINANCIERAS.pptxU1. C2. TIPOS DE INSTITUCIONES FINANCIERAS.pptx
U1. C2. TIPOS DE INSTITUCIONES FINANCIERAS.pptx
 
MODELO DE REGLAMENTO INTERNO DE TRABAJO DE UNA EMPRESA
MODELO DE REGLAMENTO INTERNO DE TRABAJO DE UNA EMPRESAMODELO DE REGLAMENTO INTERNO DE TRABAJO DE UNA EMPRESA
MODELO DE REGLAMENTO INTERNO DE TRABAJO DE UNA EMPRESA
 
Trigonometria Plan-el mejor.pptxssssssss
Trigonometria Plan-el mejor.pptxssssssssTrigonometria Plan-el mejor.pptxssssssss
Trigonometria Plan-el mejor.pptxssssssss
 
INFORME ADMINISTRACIÓN EN PROPIEDAD HORIZONTAL
INFORME ADMINISTRACIÓN EN PROPIEDAD HORIZONTALINFORME ADMINISTRACIÓN EN PROPIEDAD HORIZONTAL
INFORME ADMINISTRACIÓN EN PROPIEDAD HORIZONTAL
 
Solicitud de cambio de un producto, a nivel empresarial.
Solicitud de cambio de un producto, a nivel empresarial.Solicitud de cambio de un producto, a nivel empresarial.
Solicitud de cambio de un producto, a nivel empresarial.
 
SESION N° 01.pptx GESTION PROYECTOS UCV 2024
SESION N° 01.pptx GESTION PROYECTOS UCV 2024SESION N° 01.pptx GESTION PROYECTOS UCV 2024
SESION N° 01.pptx GESTION PROYECTOS UCV 2024
 
Informe del banco centra de Honduras trabajo de estudiantes
Informe del banco centra de Honduras trabajo de estudiantesInforme del banco centra de Honduras trabajo de estudiantes
Informe del banco centra de Honduras trabajo de estudiantes
 
DDF Luis GIl Diagrama de flujo (1).pptx
DDF Luis GIl Diagrama de flujo  (1).pptxDDF Luis GIl Diagrama de flujo  (1).pptx
DDF Luis GIl Diagrama de flujo (1).pptx
 
Presentación Óxido Cuproso Nordox 75 WG.pptx
Presentación Óxido Cuproso Nordox 75 WG.pptxPresentación Óxido Cuproso Nordox 75 WG.pptx
Presentación Óxido Cuproso Nordox 75 WG.pptx
 

Marcos

  • 1. Colegio Nacional Nicolás Esguerra Edificamos futuro Ricardo Andrés Meneses Cordero Sebastián Montañez López 905
  • 2. MARCOS PAGINA WEB VI Unidad 7. Marcos (I) En este tema vamos a ver qué son los marcos, para qué se utilizan, y cómo insertarlos. Conjunto de marcos <frameset> Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia. Cada uno de los marcos de una página, contiene un documento HTML individual. Por ejemplo, en la imagen de la derecha puedes ver una página con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documento perros.htm. Para poder visualizar la página de este modo, hemos tenido que abrir en el navegador el documento marcos.htm, que es el que en este
  • 3. caso contiene el grupo de marcos. El trabajar con marcos puede resultar una tarea algo complicada, sobretodo al principio, por lo que vemos solamente algunos conteptos básicos y ejemplos sencillos. Como hemos visto si queremos utilizar marcos debemos crear una página con la definición del conjunto de marcos (en el ejemplo anterior la página marcos.htm). Los conjuntos de marcos se definen a través de las etiquetas <frameset> y </frameset>, que van después de la etiqueta <head>. A través de estas etiquetas se indica el número de marcos en que se dividirá la ventana, cada uno de los cuales será una especie de subventana. Cuando se insertan las etiquetas <frameset> y </frameset> no hay que insertar las etiquetas <body> y </body>, ya que el cuerpo del documento será el cuerpo de las páginas que se carguen en cada uno de los marcos del conjunto de marcos. Los atributos que pueden especificarse sobre la etiqueta <frameset> son los siguientes: Atributo Significado Posibles valores cols tamaño de cada una de las columnas en que se divide el documento un número (acompañado de % cuando se desee que sea en porcentaje) por cada columna, separados por comas. rows tamaño de cada una de las columnas en que se divide el documento un número (acompañado de % cuando se desee que sea en porcentaje) por cada fila, separados por comas. frameborder aparece o no el borde de los marcos yes no
  • 4. framespacing separación entre los marcos un número border grosor del borde un número, acompañado de % cuando se desee que sea en porcentaje bordercolor color del borde número hexadecimal También es posible incluir asteriscos como valores para los atributos cols y rows. Este valor indica que dicha fila o columna ocupará todo lo que quede de ventana o subventana. Cuando existan varias columnas o filas con este valor, se repartirán de forma equitativa lo que quede de ventana. Por ejemplo, si insertáramos la siguiente línea de código: <frameset rows="*" cols="142,*,25%">...</frameset> Como el atributo rows tiene el valor asterisco, solo habría una fila, que ocuparía todo el alto de la ventana. En este caso concreto no haría falta poner el atributo rows. Como el atributo cols tiene tres valores, estaríamos dividiendo el documento en tres columnas. La primera columna sería de 142 píxeles de ancho, la tercerá del 25% de la ventana, y la segunda columna ocuparía lo que quedará de ventana (el 75% de la ventana menos 142 píxeles). También es posible anidar marcos. Es decir, es posible dividir marcos en otros marcos. Por ejemplo, si insertáramos el siguiente código: <frameset cols="142,*"> <frameset rows="80,*">...</frameset> <frameset cols="25%,*,*">...</frameset> </frameset> Estaríamos dividiendo el documento en dos columnas. La primera sería de 142 píxeles, y la otra abarcaría el resto de la ventana. Al mismo tiempo, la primera columna o subventana estaría dividida en dos filas o subventanas horizontales, la primera de ellas de 80 píxeles. La segunda columna o subventana de la ventana principal se dividiría a su vez en tres columnas, la primera de ellas del 25% de la subventana, y las otras dos se repartirían el resto a partes iguales (se repartirían el 75% de la subventana).
  • 5. Código: MENU <HTML> <HEAD> <TITLE>UNDER YOUR CELL</TITLE> </HEAD> <BODY bgcolor="black"> < a href="INDEX.HTML"target="marcoderecho"><FONTCOLOR="white"><CENTER><H1>Pagina Pricipal</H1></CENTER></a>
  • 6. <a href="APPLE.HTML"target="marcoderecho"><imgsrc="imagenes/namsana.gif"border="4" width="200" height="200"></a> <a href="samsungmobile.HTML"target="marcoderecho"><imgsrc="imagenes/galaxi.gif" border="4" width="200"height="200"></a> <a href="huawei.HTML"target="marcoderecho"><imgsrc="imagenes/huawei.jpg"border="4" width="200" height="200"></a> <a href=ASUS.HTML"target="marcoderecho"><imgsrc="imagenes/Asus.png"border="4" width="200" height="200"></a> </BODY> </HTML> MARCOS: <HTML> <HEAD> <TITLE>UNDER YOUR CELL</TITLE> </HEAD> <framesetrows="*"cols"180,*" framespacing="0"frameborder="si"border="3"> <frame src="MENU.HTML" name="marcoizquierdo"frameborder="si"scrolling="Si" noreize> <frame src="paginawebindex.HTML"name="marcoderecho"frameborder="SI"> </frameset> <noframes> <bodybgcolor="#990000"> ¡--Estapaginawebfue elaboradaporRicardoAndresMenesesCordero--Seastian Montañes---! </BODY> </noframes> </HTML>