APRENDIZAJE:
Conocer y usar los elementos básicos y necesarios en el diseño gráfico de una web utilizando software especializado para la creación de páginas web personales.
SEMANA 2 - DEL 16 AL 19 DE JULIO
FRAMES
Son todas y cada una de las divisiones que posee una web, se identifican acorde a su ubicacion:
Superior= banner o top frame
Izquierda = menú o left frame
Derecho= menú o right frame
Centro= contenido o main frame
PASOS PARA TENER EN CUENTA PARA LA ACTIVIDAD DE ESTA SEMANA:
1. Crea una carpeta con tu nombre
2. Crea el contenedor de las 5 pagínas, éste lo descargarás y guardarás como index.html.
3. Crea cada página por separado, descargalas y ponle el nombre acorde al tipo de página, asi:
pagina1.html
pagina2.html
pagina3.html
pagina4.html
pagina5.html, guardala en la carpeta creada. (5 páginas)
Sube la carpeta completa al drive
material de apoyo
ESTE ES EL CÓDIGO PARA LA PAGINA PRINCIPAL (index.html)
<!DOCTYPE html>
<html lang="es">
<body bgcolor="D6F1EB">
<marquee>TRABAJO REALIZADO POR EL PROFE KADI SIERRA</marquee>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TU NOMBRE VIENE AQUI</title>
<style>
main {
height: 500px;
width: 100%;
border: 1px solid #000;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
button {
margin: 5px;
padding: 10px 20px;
font-size: 16px;
}
</style>
<script>
function navigate(url) {
document.getElementById('main-frame').src = url;
}
</script>
</head>
<body>
<h1>TEMA DEL PROYECTO</h1>
<button onclick="navigate('pagina1.html')">Subtema1</button>
<button onclick="navigate('pagina2.html')">Subtema2</button>
<button onclick="navigate('pagina3.html')">Subtema3</button>
<button onclick="navigate('pagina4.html')">Subtema4</button>
<button onclick="navigate('pagina5.html')">Subtema5</button>
<main>
<iframe id="main-frame" src=""></iframe>
</main>
</body>
</html>
SEMANA 3 - DEL 22 AL 26 DE JULIO
Segundo paso, descarga 3 imagenes acorde al tema 1
Tercer paso subelas en el host
Cuarto paso:
Sigue las instrucciones
Páginas internas del sitio web
Código embed para agregar contenido externo
Copia y pega este código
EL CÓDIGO DE CADA UNA DE LAS 5 PÁGINAS ES ALGO BÁSICO COMO LA SIGUIENTE:
<html>
<head>
<body bgcolor="88F8AD">
<title>aqui va el titulo de la página uno</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
font-size: 24px;
font-weight: bold;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>aqui va el tema de la pagina uno</h1>
<p>
........ aqui va el texto del contenido de la página uno .......
</p>
<img src="..........." width="250"> <p>
<img src="..........." width="250"> <p>
<img src="..........." width="250"> <p>
</html>