Embedded Files
Segunda práctica de Compositor de Programas
MI Robot empaquetado en un html
Entra en Chat GPT (o en cualquier otro chatbot).
Teclea el prompt "Quiero un html que me dibuje un robot"
Copia el código generado y lo pegas en un fichero .txt y lo guardas.
En tu explorador de archivos, en opciones, configura para que se vean las extensiones.
Llama al fichero robot.html
Ábrelo con un navegador en tu ordenador, tablet, móvil...
Analiza el código de programación de robot.html y cambia los colores y tamaños para modificar el aspecto del robot.
Código
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Robot Drawing</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.robot {
display: flex;
flex-direction: column;
align-items: center;
}
.head {
width: 150px;
height: 150px;
background-color: #888;
border: 5px solid #666;
border-radius: 10%;
position: relative;
}
.eye {
width: 30px;
height: 30px;
background-color: #fff;
border: 3px solid #333;
border-radius: 50%;
position: absolute;
top: 40px;
}
.eye.left {
left: 30px;
}
.eye.right {
right: 30px;
}
.mouth {
width: 80px;
height: 15px;
background-color: #000;
border-radius: 10px;
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
}
.body {
width: 180px;
height: 250px;
background-color: #aaa;
border: 5px solid #666;
border-radius: 10px;
margin-top: 10px;
display: flex;
justify-content:center;
align-items: center;
position: relative;
}
.arm {
width: 40px;
height: 120px;
background-color: #888;
border: 5px solid #666;
border-radius: 20px;
position: absolute;
}
.arm.left {
left: -50px;
top: 30px;
}
.arm.right {
right: -50px;
top: 30px;
}
.leg {
width: 50px;
height: 100px;
background-color: #888;
border: 5px solid #666;
border-radius: 20px;
margin: 10px;
}
.legs {
display: flex;
justify-content: center;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="robot">
<div class="head">
<div class="eye left"></div>
<div class="eye right"></div>
<div class="mouth"></div>
</div>
<div class="body">
<div class="arm left"></div>
<div class="arm right"></div>
</div>
<div class="legs">
<div class="leg"></div>
<div class="leg"></div>
</div>
</div>
</body>
</html>
Page updated
Google Sites
Report abuse