viernes, 31 de agosto de 2018
HTML: Práctica 25
PUEBLOS MÁGICOS DEL ESTADO DE MÉXICO
Deberás descargar todas las imágenes que utilizarás en cada uno de los links.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pueblos Mágicos</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
header {
background-color: #009688;
color: #fff;
text-align: center;
padding: 15px 0;
font-size: 24px;
font-weight: bold;
}
.container {
display: flex;
height: calc(100vh - 50px);
}
nav {
width: 20%;
background-color: #00796b;
color: #fff;
padding: 20px;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}
nav a {
display: block;
color: #fff;
text-decoration: none;
padding: 10px;
margin: 5px 0;
border-radius: 5px;
transition: background-color 0.3s;
}
nav a:hover {
background-color: #004d40;
}
.content {
flex: 1;
padding: 20px;
background-color: #e0f2f1;
}
.content h2 {
color: #00796b;
font-size: 28px;
}
.content img {
max-width: 100%;
height: auto;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-top: 10px;
}
.content p {
font-size: 18px;
line-height: 1.6;
color: #333;
margin-top: 15px;
}
</style>
</head>
<body>
<header>Pueblos Mágicos</header>
<div class="container">
<nav>
<a href="#" onclick="loadContent('Metepec', 'Metepec.jpg', 'Pueblo Mágico del Estado de México, conocido por su zona típica y sus artesanías, especialmente el famoso Árbol de la Vida.')">Metepec</a>
<a href="#" onclick="loadContent('Peña de Bernal', 'peñabernal.jpg', 'Famoso por su imponente monolito y sus encantadoras calles llenas de tradición.')">Peña de Bernal</a>
<a href="#" onclick="loadContent('Valle de Bravo', 'vallebravo.jpg', 'Un destino perfecto para deportes acuáticos y paisajes montañosos.')">Valle de Bravo</a>
<a href="#" onclick="loadContent('Real del Monte', 'realmonte.jpg', 'Cuna del paste, famoso por su encanto colonial y la minería.')">Real del Monte</a>
<a href="#" onclick="loadContent('Malinalco', 'malinalco.jpg', 'Destacado por su zona arqueológica y su atmósfera tranquila y mágica.')">Malinalco</a>
<a href="#" onclick="loadContent('Tepoztlán', 'tepoztlán.jpg', 'Lugar místico rodeado de montañas, famoso por su pirámide del Tepozteco.')">Tepoztlán</a>
<a href="#" onclick="loadContent('Tepotzotlán', 'tepotzotlán.jpg', 'Conocido por su impresionante museo virreinal y su arquitectura barroca.')">Tepotzotlán</a>
</nav>
<div class="content" id="content">
<h2>Haz clic en los hipervínculos de la izquierda</h2>
<img src="pueblos.jpg" alt="Pueblos Mágicos">
<p>Selecciona un pueblo mágico para ver su descripción.</p>
</div>
</div>
<script>
function loadContent(title, image, description) {
const contentDiv = document.getElementById('content');
contentDiv.innerHTML = `
<h2>${title}</h2>
<img src="${image}" alt="${title}">
<p>${description}</p>
`;
}
</script>
</body>
</html>
HTML: Práctica 10
INSERTAR IMÁGENES CON SUS CARACTERÍSTICAS
Para crear ésta página Web vas a necesitar imágenes
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tipos de Células</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: lightsteelblue;
margin: 0;
padding: 0;
}
header {
text-align: center;
background-color: cornflowerblue;
color: white;
padding: 20px 0;
}
h2 {
font-size: 24px;
color: darkturquoise;
}
.section {
margin: 20px;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.section img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
.table-container {
margin: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 2px solid black;
padding: 10px;
text-align: center;
}
th {
background-color: cornflowerblue;
color: white;
}
td img {
max-width: 100px;
height: auto;
}
footer {
background-color: cornflowerblue;
color: white;
text-align: center;
padding: 10px 0;
margin-top: 20px;
}
</style>
</head>
<body>
<header>
<h1>Tipos de Células</h1>
</header>
<div class="section">
<h2>Célula Animal</h2>
<img src="celulaanimal.jpg" alt="Célula Animal">
<p style="text-align: center;"><i>Célula Animal a través de microscopio</i></p>
</div>
<div class="section">
<h2>Célula Eucariota</h2>
<img src="eucariota.jpg" alt="Célula Eucariota">
<p style="text-align: center;"><i>Célula Eucariota a través de microscopio</i></p>
</div>
<div class="section">
<h2>Célula Procariota</h2>
<img src="procariota.jpg" alt="Célula Procariota">
<p style="text-align: center;"><i>Célula Procariota a través de microscopio</i></p>
</div>
<div class="table-container">
<table>
<caption><strong>En la tabla se describen algunos detalles de las células.</strong></caption>
<tr>
<th>Tipo de Célula</th>
<th>Características</th>
<th>Imagen</th>
</tr>
<tr>
<td><a href="Eucariota.html">Eucariota</a></td>
<td>
La membrana plasmática: estructura que envuelve y limita el contenido de la célula.
<br>El núcleo: organelo que encierra el material genético.
<br>El citoplasma: medio donde flotan organelos como las mitocondrias.
</td>
<td><img src="eucc.jpg" alt="Célula Eucariota"></td>
</tr>
<tr>
<td><a href="Procariota.html">Procariota</a></td>
<td>
Caracterizada por material genético disperso en el citoplasma.
<br>Distingue a los dominios Bacteria y Archaea.
</td>
<td><img src="celula-procariota.jpg" alt="Célula Procariota"></td>
</tr>
<tr>
<td><a href="Vegetal.html">Célula Vegetal</a></td>
<td>
Pared celular: recubre y da soporte a la célula.
<br>Cloroplastos: realizan fotosíntesis.
<br>Vacuola central: almacena agua.
</td>
<td><img src="vegetal.jpg" alt="Célula Vegetal"></td>
</tr>
<tr>
<td><a href="Animal.html">Célula Animal</a></td>
<td>
Membrana celular compuesta por colesterol.
<br>No posee pared celular.
<br>Posee centrosomas.
</td>
<td><img src="animal.jpg" alt="Célula Animal"></td>
</tr>
</table>
</div>
<footer>
© 2024 Tipos de Células. Todos los derechos reservados.
</footer>
</body>
</html>
HTML: Práctica 9
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Texto Circular Mejorado</title>
<style>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'Verdana', Arial, sans-serif;
color: #FFFFFF;
position: absolute;
top: 0;
left: 0;
z-index: 3000;
cursor: default;
pointer-events: none; /* Evita interferencia con el ratón */
}
#outerCircleText div {
position: relative;
}
#outerCircleText div div {
position: absolute;
top: 0;
left: 0;
text-align: center;
}
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #f093fb, #f5576c);
overflow: hidden;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<script>
(function () {
var msg = "¡ESTUDIA INGLÉS, COMPUTACIÓN, BACHILLERATO EN SUS DIFERENTES MODALIDADES, LOGRA EL ÉXITO!";
var size = 30;
var circleY = 0.75, circleX = 2.5;
var letter_spacing = 5;
var diameter = 5;
var rotation = 0.3;
var speed = 0.07;
if (!window.addEventListener || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.408333),
currStep = 20, ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode !== "BackCompat" ? document.documentElement : document.body,
mouse = function (e) {
e = e || window.event;
ymouse = !isNaN(e.pageY) ? e.pageY : e.clientY;
xmouse = !isNaN(e.pageX) ? e.pageX : e.clientX;
},
makecircle = function () {
currStep -= rotation;
for (var d, i = n; i > -1; --i) {
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
}
},
drag = function () {
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i) {
y[i] = Y[i] += (y[i - 1] - Y[i]) * speed;
x[i] = X[i] += (x[i - 1] - X[i]) * speed;
}
makecircle();
},
init = function () {
for (var d, i = n; i > -1; --i) {
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
}
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
o.style.backgroundImage = 'linear-gradient(to right, #ff9a9e, #fad0c4)';
o.style.color = 'white';
o.style.textShadow = '2px 2px 4px rgba(0,0,0,0.3)';
o.style.padding = '10px';
if (window.addEventListener) {
window.addEventListener('load', init, false);
document.addEventListener('mousemove', mouse, false);
}
})();
</script>
</body>
</html>
HTML: Práctica 8
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista de Cursos</title>
<link rel="stylesheet" href="styles4.css">
</head>
<body>
<div class="scroll-container" onmouseover="pauseScroll()" onmouseout="resumeScroll()">
<div class="scroll-content" id="scroll-content">
<a href="Enlace 1"><h2>BACHILLERATO ÚNICO</h2></a>
<a href="Enlace 2"><h2>INGLÉS</h2></a>
<a href="Enlace 3"><h2>INFORMÁTICA</h2></a>
<a href="Enlace 4"><h2>CURSO DE NIÑOS</h2></a>
<a href="Enlace 5"><h2>CURSO COMIPEMS</h2></a>
<a href="Enlace 6"><h2>REGULARIZACIÓN</h2></a>
</div>
</div>
<script src="scripts2.js"></script>
</body>
</html>
CÓDIGO PARA LA PÁGINA styles4.css
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #ff9a9e, #fad0c4, #fbc2eb);
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.scroll-container {
border: 5px solid #ff6347;
border-radius: 15px;
width: 350px;
height: 400px;
overflow: hidden;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
background: #fff;
position: relative;
}
.scroll-content {
display: flex;
flex-direction: column;
animation: scroll-up 8s linear infinite;
}
.scroll-content a {
text-align: center;
text-decoration: none;
font-weight: bold;
font-size: 20px;
margin: 10px;
color: #ffffff;
background: linear-gradient(135deg, #56ab2f, #a8e063);
padding: 15px 0;
border-radius: 10px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.scroll-content a:hover {
transform: scale(1.1);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
background: linear-gradient(135deg, #a8e063, #56ab2f);
}
@keyframes scroll-up {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(-100%);
}
}
CÓDIGO PARA LA PÁGINA scripts2.js
const scrollContent = document.getElementById('scroll-content');
function pauseScroll() {
scrollContent.style.animationPlayState = 'paused';
}
function resumeScroll() {
scrollContent.style.animationPlayState = 'running';
}
HTML: Práctica 27
CÓDIGO MULTICOLOR PARA FONDOS, EN UNA PÁGINA WEB
EL EJEMPLO CONSTA DE 6 COLORES, ELABORA 6 MÁS.
PARA REALIZAR LA PRÁCTICA NECESITAS CREAR CUADROS DE COLORES COMO SE VISUALIZAN.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imágenes con Cambio de Fondo</title>
<style>
/* Centrar la tabla y su contenido */
.n {
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
}
table {
border-collapse: collapse;
width: 80%;
}
td {
padding: 5px;
text-align: center;
}
img {
border: 2px solid transparent;
transition: transform 0.3s ease, border-color 0.3s ease;
max-width: 100%;
height: auto;
cursor: pointer;
}
/* Efecto al pasar el mouse sobre la imagen */
td span:hover img {
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="n">
<table>
<tr>
<td>
<span
onmouseover="document.body.style.backgroundColor='#d9d13f';"
onmouseout="document.body.style.backgroundColor='';">
<img src="Amarillo.png" alt="Amarillo" />
</span>
</td>
<td>
<span
onmouseover="document.body.style.backgroundColor='#3f6dd9';"
onmouseout="document.body.style.backgroundColor='';">
<img src="azul.png" alt="Azul" />
</span>
</td>
<td>
<span
onmouseover="document.body.style.backgroundColor='#d9993f';"
onmouseout="document.body.style.backgroundColor='';">
<img src="mostaza.png" alt="Mostaza" />
</span>
</td>
<td>
<span
onmouseover="document.body.style.backgroundColor='#cccccc';"
onmouseout="document.body.style.backgroundColor='';">
<img src="gris.png" alt="Gris" />
</span>
</td>
<td>
<span
onmouseover="document.body.style.backgroundColor='#000000';"
onmouseout="document.body.style.backgroundColor='';">
<img src="negro.png" alt="Negro" />
</span>
</td>
<td>
<span
onmouseover="document.body.style.backgroundColor='#279b1c';"
onmouseout="document.body.style.backgroundColor='';">
<img src="verde.png" alt="Verde" />
</span>
</td>
</tr>
</table>
</div>
</body>
</html>
HTML: Práctica 7
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Promoción Instituto</title>
<link rel="stylesheet" href="styles3.css">
</head>
<body>
<div class="banner-container">
<p class="banner-text">
¡¡INSTITUTO TECNOLÓGICO DE COMPUTACIÓN E INGLÉS!! EL MEJOR, ¡INSCRÍBETE AHORA!
</p>
</div>
</body>
</html>
CÓDIGO DE COMPLEMENTO PARA LA PRÁCTICA 7
llamada styles3.css
body {
font-family: 'Georgia', serif;
background-color: #f3f4f6;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.banner-container {
width: 100%;
overflow: hidden;
background-color: aqua;
padding: 20px 0;
border: 2px solid red;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.banner-text {
display: inline-block;
font-size: 2rem;
font-weight: bold;
color: red;
white-space: nowrap;
animation: scrollText 10s linear infinite;
}
@keyframes scrollText {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
HTML: Práctica 23
CREAR UN INFRAME PARA MOSTRAR LINKS EN MARCOS INDIVIDUALES
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de IFRAME Mejorado</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
font-size: 28px;
font-weight: bold;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 20px;
gap: 30px;
}
.iframe-container {
background-color: #fff;
border: 2px solid #ccc;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 15px;
width: 100%;
max-width: 600px; /* Aumentar el ancho máximo de los iframes */
text-align: center;
}
.iframe-container iframe {
width: 100%;
height: 400px; /* Aumentar la altura de los marcos */
border: none;
border-radius: 5px;
}
.iframe-container p {
margin-top: 15px;
font-size: 18px;
color: #333;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 15px 0;
position: fixed;
bottom: 0;
width: 100%;
}
/* Hacer que los iframes se adapten a pantallas pequeñas */
@media (max-width: 768px) {
.iframe-container iframe {
height: 300px;
}
.iframe-container {
max-width: 100%; /* Eliminar el ancho máximo para pantallas pequeñas */
margin: 10px;
}
}
@media (max-width: 480px) {
header {
font-size: 22px;
}
.iframe-container iframe {
height: 250px;
}
.iframe-container p {
font-size: 16px;
}
}
</style>
</head>
<body>
<header>
Ejemplo Mejorado de IFRAME
</header>
<div class="container">
<div class="iframe-container">
<iframe src="https://www.wikipedia.org" scrolling="auto"></iframe>
<p>Este es un marco de <strong>Wikipedia</strong>.</p>
</div>
<div class="iframe-container">
<iframe src="https://jorgecortazar.blogspot.com/" scrolling="auto"></iframe>
<p>Este es un marco de <strong>Blog de Jorge Cortázar</strong>.</p>
</div>
</div>
<footer>
© 2024 Ejemplo de Marcos con IFRAME. Todos los derechos reservados.
</footer>
</body>
</html>
Suscribirse a:
Entradas (Atom)