SlideShare a Scribd company logo
1 of 7
“Año de la diversificación productiva y del fortalecimiento de la educación”
INSTITUTO DE EDUCACIÓN SUPERIOR
TECNOLÓGICO PRIVADO
“TECNOTRONIC”
COMPUTACIÓN E INFORMÁTICA
UNIDAD DIDACTICA : DISSEÑO WEB
DOCENTE : HANCCO QUISPE, Elar E.
ESTUDIANTE : QUISPE APAZA, Mery.
CICLO ACADÉMICO : V
SEMESTRE : 2015 III
Juliaca - Puno – Perú.
2015
COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 2
VISIÓN
En el 2018, El IESTP TECNOTRONIC es un Modelo Empresarial
Educativo de Excelencia Académica que lidera la
Educación Superior Tecnológica de la región sur del país.
MISIÓN
Formar profesionales competitivos en un ambiente de
Emprendimiento, Innovación, Eficiencia y Valores.
COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 3
EJERCICIO 2
Maquete utilizando CSS externo.
Primero lo tenemos abierto el programa dreamweavern para así podertrabajar,
los pasos sonlos siguientes.
Paso N°1:Trabajaremos en el archivo CSS.
Para esto es los siguientes códigos que nos servirán para poderhacerlo el
ejercicio N°2
Paso N°2:codificamos los siguientes códigos css.
#header{
width:720px;
height:100px;
border: solid 1px #000;
background-color: #F9F;
text-align: center;
}
COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 4
Paso N°3:codificamos los siguientes códigos css.
#capa1{
position: absolute;
width: 150px;
height: 200px;
border: solid 1px #000;
background-color: #FCC;
text-align: center;
float: left;
}
Paso N°4:codificamos los siguientes códigos css.
#capa2{
position: absolute;
width: 560px;
height: 400px;
background: #6FF;
border: solid 1px #000;
padding: 5px 7px 10px 15px;
padding: 5px;
text-align: center;
float: left;
left: 159px;
top: 109px;
}
Paso N°5:codificamos los siguientes códigos css.
#capa3{
position: absolute;
width: 140px;
height: 200px;
background: #669;
border: solid 1px #000;
padding: 5px 7px 10px 15px;
padding: 5px;
text-align: center;
top: 307px;
left: 8px;
}
COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 5
Paso N°6:codificamos los siguientes códigos css.
#footer{
position: absolute;
width: 725px;
height: 100px;
border: solid 1px #000;
background-color: #FCC;
text-align: center;
float: left;
left: 6px;
top: 519px;
}
Paso N°8:Trabajaremos en el archivo HTML.
Para esto es los siguientes códigos que nos servirán para poderhacerlo el
ejercicio N°2
Paso N°9:codificamos los siguientes códigos para la práctica 2 (HTML)
asignado que es lo siguiente.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 6
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link rel="stylesheet" href="css2.css" type="text/css"/>
</head>
<body>
<div id="header">
HEADER
</div>
<div id="capa1">
<p>NAVIGATION </p></div>
<div id="capa3">
LINKLIST
</div>
<div id="capa2">
CONTENT
</div>
<div id="footer">
FOOTER
</div></body></html>
COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 7
Paso N° 10:Es el resultado ejecutado en el navegador (ejercicio N°2)

More Related Content

Viewers also liked

Communique de presse : le Premier Ministre accélère l’agenda des réformes en...
Communique de  presse : le Premier Ministre accélère l’agenda des réformes en...Communique de  presse : le Premier Ministre accélère l’agenda des réformes en...
Communique de presse : le Premier Ministre accélère l’agenda des réformes en...Nina Abouna
 
Communique de presse de valerie corre
Communique de presse de valerie correCommunique de presse de valerie corre
Communique de presse de valerie correhenri-claude corré
 
DanutZbarcea-article-Vision no 67
DanutZbarcea-article-Vision no 67DanutZbarcea-article-Vision no 67
DanutZbarcea-article-Vision no 67Danut Zbarcea
 
Education & Technology : a worldwide love affair
Education & Technology : a worldwide love affairEducation & Technology : a worldwide love affair
Education & Technology : a worldwide love affairL'Atelier BNP Paribas
 
Aplicaciones multimedia en la educación
Aplicaciones multimedia en la educaciónAplicaciones multimedia en la educación
Aplicaciones multimedia en la educaciónEstefani Sansor
 
Trabajo "El Directorio- COncytec"
Trabajo "El Directorio- COncytec"Trabajo "El Directorio- COncytec"
Trabajo "El Directorio- COncytec"Jorge RO
 
Greenerwave is building a world where we can easily and safely connect people...
Greenerwave is building a world where we can easily and safely connect people...Greenerwave is building a world where we can easily and safely connect people...
Greenerwave is building a world where we can easily and safely connect people...French Tech Côte d'Azur
 
Automatiser la qualite
Automatiser la qualiteAutomatiser la qualite
Automatiser la qualiteDamien Seguy
 
Tic y edu_superior
Tic y edu_superiorTic y edu_superior
Tic y edu_superiorhemostatica
 
Des chercheurs en CM2 et sixième
Des chercheurs en CM2 et sixièmeDes chercheurs en CM2 et sixième
Des chercheurs en CM2 et sixièmeDFIE Lyon
 
Réseaux sociaux et business par ETO
Réseaux sociaux et business  par ETORéseaux sociaux et business  par ETO
Réseaux sociaux et business par ETOL'Atelier BNP Paribas
 
Reportaje turistico píllaro gloria taco
Reportaje turistico píllaro gloria tacoReportaje turistico píllaro gloria taco
Reportaje turistico píllaro gloria taco6acs
 
20150723 pitch 10 minutes kedge nursery ss
20150723 pitch 10 minutes kedge nursery ss20150723 pitch 10 minutes kedge nursery ss
20150723 pitch 10 minutes kedge nursery ssgift4elle
 
Atelier d'éveil musical
Atelier d'éveil musicalAtelier d'éveil musical
Atelier d'éveil musicalBinMolinel
 

Viewers also liked (20)

Forum_hotelier_Octobre2016
Forum_hotelier_Octobre2016Forum_hotelier_Octobre2016
Forum_hotelier_Octobre2016
 
Communique de presse : le Premier Ministre accélère l’agenda des réformes en...
Communique de  presse : le Premier Ministre accélère l’agenda des réformes en...Communique de  presse : le Premier Ministre accélère l’agenda des réformes en...
Communique de presse : le Premier Ministre accélère l’agenda des réformes en...
 
Communique de presse de valerie corre
Communique de presse de valerie correCommunique de presse de valerie corre
Communique de presse de valerie corre
 
LAS TIC
LAS TICLAS TIC
LAS TIC
 
DanutZbarcea-article-Vision no 67
DanutZbarcea-article-Vision no 67DanutZbarcea-article-Vision no 67
DanutZbarcea-article-Vision no 67
 
Education & Technology : a worldwide love affair
Education & Technology : a worldwide love affairEducation & Technology : a worldwide love affair
Education & Technology : a worldwide love affair
 
04 seccion 3
04 seccion 304 seccion 3
04 seccion 3
 
Coaching A2 O
Coaching A2 OCoaching A2 O
Coaching A2 O
 
Aplicaciones multimedia en la educación
Aplicaciones multimedia en la educaciónAplicaciones multimedia en la educación
Aplicaciones multimedia en la educación
 
Trabajo "El Directorio- COncytec"
Trabajo "El Directorio- COncytec"Trabajo "El Directorio- COncytec"
Trabajo "El Directorio- COncytec"
 
Greenerwave is building a world where we can easily and safely connect people...
Greenerwave is building a world where we can easily and safely connect people...Greenerwave is building a world where we can easily and safely connect people...
Greenerwave is building a world where we can easily and safely connect people...
 
Automatiser la qualite
Automatiser la qualiteAutomatiser la qualite
Automatiser la qualite
 
Tic y edu_superior
Tic y edu_superiorTic y edu_superior
Tic y edu_superior
 
Des chercheurs en CM2 et sixième
Des chercheurs en CM2 et sixièmeDes chercheurs en CM2 et sixième
Des chercheurs en CM2 et sixième
 
Réseaux sociaux et business par ETO
Réseaux sociaux et business  par ETORéseaux sociaux et business  par ETO
Réseaux sociaux et business par ETO
 
Reportaje turistico píllaro gloria taco
Reportaje turistico píllaro gloria tacoReportaje turistico píllaro gloria taco
Reportaje turistico píllaro gloria taco
 
Daily
DailyDaily
Daily
 
20150723 pitch 10 minutes kedge nursery ss
20150723 pitch 10 minutes kedge nursery ss20150723 pitch 10 minutes kedge nursery ss
20150723 pitch 10 minutes kedge nursery ss
 
Memoria RAM
Memoria RAMMemoria RAM
Memoria RAM
 
Atelier d'éveil musical
Atelier d'éveil musicalAtelier d'éveil musical
Atelier d'éveil musical
 

Similar to Diversificación productiva y educación Tecnotronic

Ejercicio4
Ejercicio4Ejercicio4
Ejercicio4Merly QA
 
Ejercicio 4-maquete-utilizando-css-externo.
Ejercicio 4-maquete-utilizando-css-externo.Ejercicio 4-maquete-utilizando-css-externo.
Ejercicio 4-maquete-utilizando-css-externo.yuris666
 
Ejercicio 4-maquete-utilizando-css-externo.
Ejercicio 4-maquete-utilizando-css-externo.Ejercicio 4-maquete-utilizando-css-externo.
Ejercicio 4-maquete-utilizando-css-externo.carlos_yurema
 
Ejercicio 4-maquete-utilizando-css-externo.
Ejercicio 4-maquete-utilizando-css-externo.Ejercicio 4-maquete-utilizando-css-externo.
Ejercicio 4-maquete-utilizando-css-externo.Ru Vilca
 
Ejercicio 4 maquete utilizando css externo.
Ejercicio 4 maquete utilizando css externo.Ejercicio 4 maquete utilizando css externo.
Ejercicio 4 maquete utilizando css externo.mayumi_noemi
 
Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.rogelioapaza04
 
Ejercicio 1-maquete-utilizando-css-externo
Ejercicio 1-maquete-utilizando-css-externoEjercicio 1-maquete-utilizando-css-externo
Ejercicio 1-maquete-utilizando-css-externocarlos_yurema
 
Ejercicio 1-maquete-utilizando-css-externo
Ejercicio 1-maquete-utilizando-css-externoEjercicio 1-maquete-utilizando-css-externo
Ejercicio 1-maquete-utilizando-css-externoRu Vilca
 
Ejercicio 1-maquete-utilizando-css-externo
Ejercicio 1-maquete-utilizando-css-externoEjercicio 1-maquete-utilizando-css-externo
Ejercicio 1-maquete-utilizando-css-externoyuris666
 
Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.Carlos Ccalla
 
Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.mamanieli
 
Practica 2
Practica 2Practica 2
Practica 2gabypaye
 
Practica 2
Practica 2Practica 2
Practica 2gabypaye
 
Practica 3
Practica 3Practica 3
Practica 3gabypaye
 

Similar to Diversificación productiva y educación Tecnotronic (20)

Ejercicio 4
Ejercicio 4Ejercicio 4
Ejercicio 4
 
Ejercicio4
Ejercicio4Ejercicio4
Ejercicio4
 
Ejercicio 4-maquete-utilizando-css-externo.
Ejercicio 4-maquete-utilizando-css-externo.Ejercicio 4-maquete-utilizando-css-externo.
Ejercicio 4-maquete-utilizando-css-externo.
 
Ejercicio 4-maquete-utilizando-css-externo.
Ejercicio 4-maquete-utilizando-css-externo.Ejercicio 4-maquete-utilizando-css-externo.
Ejercicio 4-maquete-utilizando-css-externo.
 
Ejercicio 4-maquete-utilizando-css-externo.
Ejercicio 4-maquete-utilizando-css-externo.Ejercicio 4-maquete-utilizando-css-externo.
Ejercicio 4-maquete-utilizando-css-externo.
 
Ejercicio 4 maquete utilizando css externo.
Ejercicio 4 maquete utilizando css externo.Ejercicio 4 maquete utilizando css externo.
Ejercicio 4 maquete utilizando css externo.
 
Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.
 
Ejercicio 1-maquete-utilizando-css-externo
Ejercicio 1-maquete-utilizando-css-externoEjercicio 1-maquete-utilizando-css-externo
Ejercicio 1-maquete-utilizando-css-externo
 
Ejercicio 1-maquete-utilizando-css-externo
Ejercicio 1-maquete-utilizando-css-externoEjercicio 1-maquete-utilizando-css-externo
Ejercicio 1-maquete-utilizando-css-externo
 
Ejercicio 1-maquete-utilizando-css-externo
Ejercicio 1-maquete-utilizando-css-externoEjercicio 1-maquete-utilizando-css-externo
Ejercicio 1-maquete-utilizando-css-externo
 
Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.
 
Maquetado 01
Maquetado 01Maquetado 01
Maquetado 01
 
Maquetado 03
Maquetado 03Maquetado 03
Maquetado 03
 
Ejercicio3
Ejercicio3Ejercicio3
Ejercicio3
 
Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.
 
Javierqui-maquetados
Javierqui-maquetadosJavierqui-maquetados
Javierqui-maquetados
 
Practica 2
Practica 2Practica 2
Practica 2
 
Practica 2
Practica 2Practica 2
Practica 2
 
Maquetado 02
Maquetado 02Maquetado 02
Maquetado 02
 
Practica 3
Practica 3Practica 3
Practica 3
 

Diversificación productiva y educación Tecnotronic

  • 1. “Año de la diversificación productiva y del fortalecimiento de la educación” INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO “TECNOTRONIC” COMPUTACIÓN E INFORMÁTICA UNIDAD DIDACTICA : DISSEÑO WEB DOCENTE : HANCCO QUISPE, Elar E. ESTUDIANTE : QUISPE APAZA, Mery. CICLO ACADÉMICO : V SEMESTRE : 2015 III Juliaca - Puno – Perú. 2015
  • 2. COMPUTACION E INFORMATICA QUISPE APAZA, Mery Página 2 VISIÓN En el 2018, El IESTP TECNOTRONIC es un Modelo Empresarial Educativo de Excelencia Académica que lidera la Educación Superior Tecnológica de la región sur del país. MISIÓN Formar profesionales competitivos en un ambiente de Emprendimiento, Innovación, Eficiencia y Valores.
  • 3. COMPUTACION E INFORMATICA QUISPE APAZA, Mery Página 3 EJERCICIO 2 Maquete utilizando CSS externo. Primero lo tenemos abierto el programa dreamweavern para así podertrabajar, los pasos sonlos siguientes. Paso N°1:Trabajaremos en el archivo CSS. Para esto es los siguientes códigos que nos servirán para poderhacerlo el ejercicio N°2 Paso N°2:codificamos los siguientes códigos css. #header{ width:720px; height:100px; border: solid 1px #000; background-color: #F9F; text-align: center; }
  • 4. COMPUTACION E INFORMATICA QUISPE APAZA, Mery Página 4 Paso N°3:codificamos los siguientes códigos css. #capa1{ position: absolute; width: 150px; height: 200px; border: solid 1px #000; background-color: #FCC; text-align: center; float: left; } Paso N°4:codificamos los siguientes códigos css. #capa2{ position: absolute; width: 560px; height: 400px; background: #6FF; border: solid 1px #000; padding: 5px 7px 10px 15px; padding: 5px; text-align: center; float: left; left: 159px; top: 109px; } Paso N°5:codificamos los siguientes códigos css. #capa3{ position: absolute; width: 140px; height: 200px; background: #669; border: solid 1px #000; padding: 5px 7px 10px 15px; padding: 5px; text-align: center; top: 307px; left: 8px; }
  • 5. COMPUTACION E INFORMATICA QUISPE APAZA, Mery Página 5 Paso N°6:codificamos los siguientes códigos css. #footer{ position: absolute; width: 725px; height: 100px; border: solid 1px #000; background-color: #FCC; text-align: center; float: left; left: 6px; top: 519px; } Paso N°8:Trabajaremos en el archivo HTML. Para esto es los siguientes códigos que nos servirán para poderhacerlo el ejercicio N°2 Paso N°9:codificamos los siguientes códigos para la práctica 2 (HTML) asignado que es lo siguiente. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • 6. COMPUTACION E INFORMATICA QUISPE APAZA, Mery Página 6 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento sin título</title> <link rel="stylesheet" href="css2.css" type="text/css"/> </head> <body> <div id="header"> HEADER </div> <div id="capa1"> <p>NAVIGATION </p></div> <div id="capa3"> LINKLIST </div> <div id="capa2"> CONTENT </div> <div id="footer"> FOOTER </div></body></html>
  • 7. COMPUTACION E INFORMATICA QUISPE APAZA, Mery Página 7 Paso N° 10:Es el resultado ejecutado en el navegador (ejercicio N°2)