Los marcos HTML se utilizan para dividir la ventana del navegador en varias secciones donde cada sección carga un documento HTML separado. En este proyecto, vamos a crear una página web que encenderá y apagará una bombilla con el clic del usuario. Usaremos la función de marco y conjunto de marcos HTML y algo de CSS para diseñar nuestro botón de ENCENDIDO y APAGADO.
Acercarse:
- Para usar marcos, hemos usado la etiqueta <frameset> en lugar de la etiqueta <body> . La etiqueta <frameset> define cómo dividir la ventana en marcos. El atributo de filas de la etiqueta <frameset> define los marcos horizontales y el atributo cols define los marcos verticales. Dentro del marco, hemos usado el atributo src que se usa para dar el nombre del archivo que debe cargarse en el marco.
- Por separado, hemos creado dos archivos: ON.html y OFF.html, que tienen imágenes de bombillas encendidas y apagadas, respectivamente. Cada vez que el usuario presiona, el archivo ON se carga en el cuadro y cada vez que se presiona off, se carga el archivo OFF.
Ejemplo:
index.html
<!DOCTYPE html> <html lang="en"> <!--Setting the frames and opening on and off html-pages--> <frameset cols="25%,75%"> <frame src="main.html" name="left-frame"></frame> <frame src="off.html" name="right-frame"></frame> </frameset> </html>
main.html
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
/* Styling the anchor tag */
a {
font-weight: bold;
text-decoration: none;
font-size: 2rem;
display: inline-block;
}
/* Styling the on button */
#on {
background-color: chartreuse;
color: black;
width: 75px;
text-align: center;
margin-bottom: 25px;
margin-top: 70%;
margin-left: 40%;
}
/* Styling the off button */
#off {
background-color: orangered;
color: black;
width: 75px;
text-align: center;
margin-left: 40%;
}
</style>
</head>
<body>
<p>
<a href="on.html" target="right-frame"
id="on">ON</a>
</p>
<p>
<a href="off.html" target="right-frame"
id="off">OFF</a>
</p>
</body>
</html>
on.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Styling the image */
img {
margin-left: 30%;
margin-top: 15%;
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210324132942/on.png"
height="350px" width="350px">
</body>
</html>
off.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Styling the image */
img {
margin-left: 30%;
margin-top: 15%;
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210324132941/off.png"
height="350px" width="350px">
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por imsushant12 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA