SlideShare una empresa de Scribd logo
1 de 7
Colegió nacional Nicolás Esguerra
Ronald sarmiento
Sergio valdechocha
Unidad 7. Marcos (I)
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.
Por ejemplo, si insertáramos el siguiente código:
<frameset cols="142,*">
<frameset rows="80,*">...</frameset>
<frameset cols="25%,*,*">...</frameset>
</frameset>
Marcos (II)
Marco <frame>
Ya hemos visto cómo dividir un documento en varias subventanas o marcos,
pero no hemos visto cómo hacer que se carguen las distintas páginas en cada
uno de los marcos.
Para indicar qué documento se cargará en cada uno de los marcos habrá que
insertar la etiqueta <frame> por cada uno de los marcos de la ventana. Estas
etiquetas estarán entre las etiquetas <frameset> y </frameset>, y no
necesitan etiqueta de cierre.
Es posible modificar los siguientes atributos de un marco:
Por ejemplo,para crear el conjunto de marcos de la página que aparece si pulsasaquí,
tendríamosque escribir:
<framesetcols="150,*" frameborder="yes"framespacing="3" border="3"
bordercolor="#FF9900">
<frame src="izquierdo.htm"name="marcoizquierdo"frameborder="no"scrolling="no"noresize>
<frame src="derecho.htm"name="marcoderecho"frameborder="no"scrolling="auto">
</frameset>
Marcos (III)
Destino del enlace
Como recordarás, en el tema de hipervínculos vimos los posibles destinos de los enlaces.
Estos destinos podían ser _blank, _parent, _self, y _top. Vamos a recordar para qué servía
cada uno de ellos, ya que ahora que sabes trabajar con marcos te serán más fáciles de
entender.
_blank:
Abre el documento vinculado en una ventana nueva del navegador.
_parent:
Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el
conjunto de marcos padre.
_self:
Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana
que el vínculo.
_top:
Abre el documento vinculado en la ventana completa del navegador, lo cual quiere decir
que los marcos de la ventana desaparecerán al abrir el vínculo en ella.
Además de estos destinos para los enlaces, también podrás utilizar los nombres de los
distintos marcos de la página. Por ejemplo, si tuvieramos un marco con el nombre
marcoderecho, podríamos insertar el enlace:
<a href="http://www.aulaclic.com" target="marcoderecho">Aulaclic en el marco
derecho</a>
Captura de pantalla
Código:
<html>
<head>
<title>moldea tu cuerpo 905</title>
</head>
<¡--ESTA WEB FUE ELABORADA POR ronald sarmiento y sergio valderrama 905 //-->
<body BGCOLOR="green">
<HR>
<marquee>
<h2>BIENVENIDOS A MOLDEA TU CUERPO *-* </h2>
</marquee>
<HR>
<font color="red"size="6" face=" Arial"><b>CAMINADORA</b></font>
<p>
La caminadora aún es una de las piezas más populares del equipo para ejercicio, pero
aunque tiene algunas características atractivas, es importante darse cuenta de que podría
estar renunciando a
muchos beneficios de salud importantes por parte del ejercicio si todo lo que hace es
caminar o trotar en una caminadora.
<img src="imagenes/CAMINADORA.jpg"border="4" width="200" height="150" >
<img src="imagenes/barra.jpg"border="4" width="200" height="150" >
<img src="imagenes/PIERNA.jpg"border="4" width="200" height="150" >
</p>
<HR>
<font color="GREEN"size="6" face=" Arial"><b>BICICLETA ESTATICA</b></font>
<P>La bicicleta estática es, junto a la cinta, la máquina cardiovascular más usada en los
gimnasios o centros de fitness, ya que permite quemar calorías y es fácil de utilizar,
aunque también
podemos encontrar algunas desventajas en la misma.
<img src="imagenes/BICICLETA.jpg"border="4" width="200" height="150" >
<img src="imagenes/PESAS.jpg"border="4" width="200" height="150" >
<img src="imagenes/abdominal.jpg"border="4" width="200" height="150" >
<img src="imagenes/dorsalera.jpg"border="4" width="200" height="150" >
</P>
<hr aling="CENTER" width="50%" size="5"BLACK="RED"noshade>
<HR>
<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000"
bgcolor="#blue">
<tr align="center" bgcolor="green">
<td>maquinas</td>
<td bgcolor="green">Ventas</td>
<td>zona de fortaleciminento</td>
</tr>
<tr>
<td>caminadora</td>
<td>$499.998</td>
<td>piernas</td>
</tr>
<tr>
<td>bicicleta</td>
<td>$300.999</td>
<td>piernas</td>
</tr>11:05 a.m. 30/10/2015
<tr>
<td>pesas</td>
<td>$150.000</td>
<td>brazos y espalda</td>
</tr>
<td>Dorsalera</td>
<td>230.999</td>
<td>espalda</td>
</tr>
</table>
<blockquote>
<HR>
2015
COLEGIO NACIONAL NICOLAS ESGUERRA
CL 68 80 - 96 BOGOTA COLOMBIA
</pre>

Más contenido relacionado

La actualidad más candente (15)

Ultimo trabajo
Ultimo trabajoUltimo trabajo
Ultimo trabajo
 
Frames
FramesFrames
Frames
 
Marcos HTML
Marcos HTMLMarcos HTML
Marcos HTML
 
Trabajop final
Trabajop finalTrabajop final
Trabajop final
 
Presentación2
Presentación2Presentación2
Presentación2
 
Menu
MenuMenu
Menu
 
Frames
FramesFrames
Frames
 
Presentacion
PresentacionPresentacion
Presentacion
 
Elultimo 131104194810-phpapp02
Elultimo 131104194810-phpapp02Elultimo 131104194810-phpapp02
Elultimo 131104194810-phpapp02
 
dfghdfghdfg
dfghdfghdfgdfghdfghdfg
dfghdfghdfg
 
Elultimo 131104194810-phpapp02
Elultimo 131104194810-phpapp02Elultimo 131104194810-phpapp02
Elultimo 131104194810-phpapp02
 
Definicion de frames
Definicion de framesDefinicion de frames
Definicion de frames
 
Semana 3 Maquetación CSS
Semana 3   Maquetación CSSSemana 3   Maquetación CSS
Semana 3 Maquetación CSS
 
Trabajo 6
Trabajo 6Trabajo 6
Trabajo 6
 
etiquetas HTML
etiquetas HTMLetiquetas HTML
etiquetas HTML
 

Destacado

Teknologi Pendidikan Islam
Teknologi Pendidikan IslamTeknologi Pendidikan Islam
Teknologi Pendidikan Islamzana liyaa
 
Presentation providers 2012
Presentation providers 2012Presentation providers 2012
Presentation providers 2012Alex Kharchyshyn
 
A9 racb7
A9 racb7A9 racb7
A9 racb7suslik6
 
Aprendizaje en las materias durate el semestre
Aprendizaje en las materias durate el semestreAprendizaje en las materias durate el semestre
Aprendizaje en las materias durate el semestremarioblog
 
Discussion Leader
Discussion LeaderDiscussion Leader
Discussion Leaderldpalmer
 
CANgur
CANgurCANgur
CANgurUOC
 
Blogs i xarxes socials
Blogs i xarxes socialsBlogs i xarxes socials
Blogs i xarxes socialsNoemí Roig
 
TARGETINGTHETEAMEXECUTIVESUMMARY (1)
TARGETINGTHETEAMEXECUTIVESUMMARY (1)TARGETINGTHETEAMEXECUTIVESUMMARY (1)
TARGETINGTHETEAMEXECUTIVESUMMARY (1)Sophia Pierce
 
Presentación gobierno en línea marisolcubillosméndez
Presentación gobierno en línea marisolcubillosméndezPresentación gobierno en línea marisolcubillosméndez
Presentación gobierno en línea marisolcubillosméndez08082014
 
Energy & Nuclear
Energy & NuclearEnergy & Nuclear
Energy & NuclearAssystem
 
Octapharma le groupe
Octapharma le groupeOctapharma le groupe
Octapharma le groupeLJBO
 
Geografia do paraná
Geografia do paranáGeografia do paraná
Geografia do paranáTânia Maria
 
Direct variations and Indirect variations
Direct variations and Indirect variationsDirect variations and Indirect variations
Direct variations and Indirect variationsJeremy De Rueda
 

Destacado (20)

Kelompok 1 11.2
Kelompok 1 11.2Kelompok 1 11.2
Kelompok 1 11.2
 
Teknologi Pendidikan Islam
Teknologi Pendidikan IslamTeknologi Pendidikan Islam
Teknologi Pendidikan Islam
 
Redux
ReduxRedux
Redux
 
Presentation providers 2012
Presentation providers 2012Presentation providers 2012
Presentation providers 2012
 
A9 racb7
A9 racb7A9 racb7
A9 racb7
 
Aprendizaje en las materias durate el semestre
Aprendizaje en las materias durate el semestreAprendizaje en las materias durate el semestre
Aprendizaje en las materias durate el semestre
 
Discussion Leader
Discussion LeaderDiscussion Leader
Discussion Leader
 
C.v
C.vC.v
C.v
 
CANgur
CANgurCANgur
CANgur
 
Cr2 30 interp-notc022210
Cr2 30 interp-notc022210Cr2 30 interp-notc022210
Cr2 30 interp-notc022210
 
Blogs i xarxes socials
Blogs i xarxes socialsBlogs i xarxes socials
Blogs i xarxes socials
 
TARGETINGTHETEAMEXECUTIVESUMMARY (1)
TARGETINGTHETEAMEXECUTIVESUMMARY (1)TARGETINGTHETEAMEXECUTIVESUMMARY (1)
TARGETINGTHETEAMEXECUTIVESUMMARY (1)
 
El plagio
El plagioEl plagio
El plagio
 
Presentación gobierno en línea marisolcubillosméndez
Presentación gobierno en línea marisolcubillosméndezPresentación gobierno en línea marisolcubillosméndez
Presentación gobierno en línea marisolcubillosméndez
 
Energy & Nuclear
Energy & NuclearEnergy & Nuclear
Energy & Nuclear
 
Octapharma le groupe
Octapharma le groupeOctapharma le groupe
Octapharma le groupe
 
Positive Attitude
Positive AttitudePositive Attitude
Positive Attitude
 
Geografia do paraná
Geografia do paranáGeografia do paraná
Geografia do paraná
 
RとIoT
RとIoTRとIoT
RとIoT
 
Direct variations and Indirect variations
Direct variations and Indirect variationsDirect variations and Indirect variations
Direct variations and Indirect variations
 

Similar a Colegió nacional nicolás esguerra (20)

Marcos HTML
Marcos HTMLMarcos HTML
Marcos HTML
 
Colegionacionalnicolsesguerra 150917155628-lva1-app6892-150924155136-lva1-app...
Colegionacionalnicolsesguerra 150917155628-lva1-app6892-150924155136-lva1-app...Colegionacionalnicolsesguerra 150917155628-lva1-app6892-150924155136-lva1-app...
Colegionacionalnicolsesguerra 150917155628-lva1-app6892-150924155136-lva1-app...
 
Marcos
MarcosMarcos
Marcos
 
Menu
MenuMenu
Menu
 
Presentación1
Presentación1Presentación1
Presentación1
 
U2
U2U2
U2
 
Frames
FramesFrames
Frames
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Unidad 2
Unidad 2Unidad 2
Unidad 2
 
Codigo html
Codigo htmlCodigo html
Codigo html
 
Dreamweaver cs5 naty
Dreamweaver cs5 natyDreamweaver cs5 naty
Dreamweaver cs5 naty
 
Byb4
Byb4Byb4
Byb4
 
Cuales son las etiquetas de HTML y su función
Cuales son las etiquetas de HTML y su funciónCuales son las etiquetas de HTML y su función
Cuales son las etiquetas de HTML y su función
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Oscar trujillo
Oscar trujilloOscar trujillo
Oscar trujillo
 
Karina
KarinaKarina
Karina
 
Hipervinculos en html
Hipervinculos en htmlHipervinculos en html
Hipervinculos en html
 
Html.pptx
Html.pptxHtml.pptx
Html.pptx
 

Más de Ronald Sarmiento Alzate (15)

Colegio nacional nicolas esgerra
Colegio nacional nicolas esgerraColegio nacional nicolas esgerra
Colegio nacional nicolas esgerra
 
Colegio nicolás esguerra
Colegio nicolás esguerraColegio nicolás esguerra
Colegio nicolás esguerra
 
Gyugugug
GyugugugGyugugug
Gyugugug
 
Sin título 1
Sin título 1Sin título 1
Sin título 1
 
corel draw x5 ag
 corel draw x5 ag corel draw x5 ag
corel draw x5 ag
 
Pendejo sanches
Pendejo sanchesPendejo sanches
Pendejo sanches
 
Sin título 1
Sin título 1Sin título 1
Sin título 1
 
Sin título 1
Sin título 1Sin título 1
Sin título 1
 
pantera rosa
pantera rosa pantera rosa
pantera rosa
 
Corel draw x5.rssa
Corel draw x5.rssaCorel draw x5.rssa
Corel draw x5.rssa
 
corel draw x5
corel draw x5corel draw x5
corel draw x5
 
trabajo
   trabajo    trabajo
trabajo
 
Variables scrath
Variables  scrathVariables  scrath
Variables scrath
 
Secuencias scratch
Secuencias scratchSecuencias scratch
Secuencias scratch
 
Juan el pspi
Juan el pspiJuan el pspi
Juan el pspi
 

Último

-PEIC-NUEVO de plantel educativo Venezuela
-PEIC-NUEVO de plantel educativo Venezuela-PEIC-NUEVO de plantel educativo Venezuela
-PEIC-NUEVO de plantel educativo VenezuelaJESUS341998
 
CONTRATO DE TRABAJO, remuneraciones y otros datos
CONTRATO DE TRABAJO, remuneraciones y otros datosCONTRATO DE TRABAJO, remuneraciones y otros datos
CONTRATO DE TRABAJO, remuneraciones y otros datosJENNIFERBERARDI1
 
GUIA DOCENTE NEUMOLOGIA 2024 guia guia.pdf
GUIA DOCENTE NEUMOLOGIA 2024 guia guia.pdfGUIA DOCENTE NEUMOLOGIA 2024 guia guia.pdf
GUIA DOCENTE NEUMOLOGIA 2024 guia guia.pdfIsaacRobertoRamrezLe
 
¡Explora el boletín del 29 abril de 2024!
¡Explora el boletín del 29 abril de 2024!¡Explora el boletín del 29 abril de 2024!
¡Explora el boletín del 29 abril de 2024!Yes Europa
 
FASES DE LA CONSULTORÍA- parte 1aa.pptx
FASES DE LA CONSULTORÍA- parte 1aa.pptxFASES DE LA CONSULTORÍA- parte 1aa.pptx
FASES DE LA CONSULTORÍA- parte 1aa.pptx10ColungaFloresJosSa
 
NOM-011-STPS-2001 NORMATIVA PRESENTACION
NOM-011-STPS-2001 NORMATIVA PRESENTACIONNOM-011-STPS-2001 NORMATIVA PRESENTACION
NOM-011-STPS-2001 NORMATIVA PRESENTACIONKarina224599
 
EMBARQUE Y DESEMBARQUE VEHICULOS MILITARES .pptx
EMBARQUE Y DESEMBARQUE VEHICULOS MILITARES .pptxEMBARQUE Y DESEMBARQUE VEHICULOS MILITARES .pptx
EMBARQUE Y DESEMBARQUE VEHICULOS MILITARES .pptxdaryel2
 

Último (7)

-PEIC-NUEVO de plantel educativo Venezuela
-PEIC-NUEVO de plantel educativo Venezuela-PEIC-NUEVO de plantel educativo Venezuela
-PEIC-NUEVO de plantel educativo Venezuela
 
CONTRATO DE TRABAJO, remuneraciones y otros datos
CONTRATO DE TRABAJO, remuneraciones y otros datosCONTRATO DE TRABAJO, remuneraciones y otros datos
CONTRATO DE TRABAJO, remuneraciones y otros datos
 
GUIA DOCENTE NEUMOLOGIA 2024 guia guia.pdf
GUIA DOCENTE NEUMOLOGIA 2024 guia guia.pdfGUIA DOCENTE NEUMOLOGIA 2024 guia guia.pdf
GUIA DOCENTE NEUMOLOGIA 2024 guia guia.pdf
 
¡Explora el boletín del 29 abril de 2024!
¡Explora el boletín del 29 abril de 2024!¡Explora el boletín del 29 abril de 2024!
¡Explora el boletín del 29 abril de 2024!
 
FASES DE LA CONSULTORÍA- parte 1aa.pptx
FASES DE LA CONSULTORÍA- parte 1aa.pptxFASES DE LA CONSULTORÍA- parte 1aa.pptx
FASES DE LA CONSULTORÍA- parte 1aa.pptx
 
NOM-011-STPS-2001 NORMATIVA PRESENTACION
NOM-011-STPS-2001 NORMATIVA PRESENTACIONNOM-011-STPS-2001 NORMATIVA PRESENTACION
NOM-011-STPS-2001 NORMATIVA PRESENTACION
 
EMBARQUE Y DESEMBARQUE VEHICULOS MILITARES .pptx
EMBARQUE Y DESEMBARQUE VEHICULOS MILITARES .pptxEMBARQUE Y DESEMBARQUE VEHICULOS MILITARES .pptx
EMBARQUE Y DESEMBARQUE VEHICULOS MILITARES .pptx
 

Colegió nacional nicolás esguerra

  • 1. Colegió nacional Nicolás Esguerra Ronald sarmiento Sergio valdechocha Unidad 7. Marcos (I) 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.
  • 2. 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. Por ejemplo, si insertáramos el siguiente código: <frameset cols="142,*"> <frameset rows="80,*">...</frameset> <frameset cols="25%,*,*">...</frameset> </frameset>
  • 3. Marcos (II) Marco <frame> Ya hemos visto cómo dividir un documento en varias subventanas o marcos, pero no hemos visto cómo hacer que se carguen las distintas páginas en cada uno de los marcos. Para indicar qué documento se cargará en cada uno de los marcos habrá que insertar la etiqueta <frame> por cada uno de los marcos de la ventana. Estas etiquetas estarán entre las etiquetas <frameset> y </frameset>, y no necesitan etiqueta de cierre. Es posible modificar los siguientes atributos de un marco: Por ejemplo,para crear el conjunto de marcos de la página que aparece si pulsasaquí, tendríamosque escribir: <framesetcols="150,*" frameborder="yes"framespacing="3" border="3" bordercolor="#FF9900"> <frame src="izquierdo.htm"name="marcoizquierdo"frameborder="no"scrolling="no"noresize> <frame src="derecho.htm"name="marcoderecho"frameborder="no"scrolling="auto"> </frameset>
  • 4. Marcos (III) Destino del enlace Como recordarás, en el tema de hipervínculos vimos los posibles destinos de los enlaces. Estos destinos podían ser _blank, _parent, _self, y _top. Vamos a recordar para qué servía cada uno de ellos, ya que ahora que sabes trabajar con marcos te serán más fáciles de entender. _blank: Abre el documento vinculado en una ventana nueva del navegador. _parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. _self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo. _top: Abre el documento vinculado en la ventana completa del navegador, lo cual quiere decir que los marcos de la ventana desaparecerán al abrir el vínculo en ella. Además de estos destinos para los enlaces, también podrás utilizar los nombres de los distintos marcos de la página. Por ejemplo, si tuvieramos un marco con el nombre marcoderecho, podríamos insertar el enlace: <a href="http://www.aulaclic.com" target="marcoderecho">Aulaclic en el marco derecho</a>
  • 5. Captura de pantalla Código: <html> <head> <title>moldea tu cuerpo 905</title> </head> <¡--ESTA WEB FUE ELABORADA POR ronald sarmiento y sergio valderrama 905 //--> <body BGCOLOR="green"> <HR> <marquee> <h2>BIENVENIDOS A MOLDEA TU CUERPO *-* </h2> </marquee> <HR>
  • 6. <font color="red"size="6" face=" Arial"><b>CAMINADORA</b></font> <p> La caminadora aún es una de las piezas más populares del equipo para ejercicio, pero aunque tiene algunas características atractivas, es importante darse cuenta de que podría estar renunciando a muchos beneficios de salud importantes por parte del ejercicio si todo lo que hace es caminar o trotar en una caminadora. <img src="imagenes/CAMINADORA.jpg"border="4" width="200" height="150" > <img src="imagenes/barra.jpg"border="4" width="200" height="150" > <img src="imagenes/PIERNA.jpg"border="4" width="200" height="150" > </p> <HR> <font color="GREEN"size="6" face=" Arial"><b>BICICLETA ESTATICA</b></font> <P>La bicicleta estática es, junto a la cinta, la máquina cardiovascular más usada en los gimnasios o centros de fitness, ya que permite quemar calorías y es fácil de utilizar, aunque también podemos encontrar algunas desventajas en la misma. <img src="imagenes/BICICLETA.jpg"border="4" width="200" height="150" > <img src="imagenes/PESAS.jpg"border="4" width="200" height="150" > <img src="imagenes/abdominal.jpg"border="4" width="200" height="150" > <img src="imagenes/dorsalera.jpg"border="4" width="200" height="150" > </P> <hr aling="CENTER" width="50%" size="5"BLACK="RED"noshade> <HR> <table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#blue"> <tr align="center" bgcolor="green"> <td>maquinas</td> <td bgcolor="green">Ventas</td> <td>zona de fortaleciminento</td> </tr> <tr> <td>caminadora</td>
  • 7. <td>$499.998</td> <td>piernas</td> </tr> <tr> <td>bicicleta</td> <td>$300.999</td> <td>piernas</td> </tr>11:05 a.m. 30/10/2015 <tr> <td>pesas</td> <td>$150.000</td> <td>brazos y espalda</td> </tr> <td>Dorsalera</td> <td>230.999</td> <td>espalda</td> </tr> </table> <blockquote> <HR> 2015 COLEGIO NACIONAL NICOLAS ESGUERRA CL 68 80 - 96 BOGOTA COLOMBIA </pre>