Tercer Portal
Este trimestre hemos aprendido hacer distintos tipos de portales. Vamos a mostrar como hicimos el un portal de los tres que hicimos.
A continuación vamos a mostrar el tercer portal:
-Este es el el código html que hicimos para hacer el portal web:
<!DOCTYPE html>
<html LANG="es">
<head><title>tercer portal</title> <link rel="stylesheet" type="text/css" href="css/miportal3.css" />
<meta charset="utf8">
<link href="https://fonts.google.apis.com/css?family=Indie+flowers" rel="stylesheet">
<link href="https://fonts.google.apis.com/css?family=Indie+flowers" rel="stylesheet">
</head>
<body>
<div id="contenedor">
<div id="cabecera"></div>
<h1> Mi tercer portal </h1> <pr> <h1> Inicio </h1>
<div id="menu"></div>
<div class="Naranja1">Categorías</div>
<div> <a class="Naranja2" href="documen" target="blank": >Inicio</a> </div>
<div> <a class="Naranja2" href="documen" target="blank": >Datos Personales</a> </div>
<div> <a class="Naranja2" href="documen" target="blank": >Docencia</a> </div>
<div> <a class="Naranja2" href="documen" target="blank": >Contacto</a> </div>
<div> <a class="Naranja2" href="documen" target="blank": >Acerca de</a> </div>
<div class="Naranja1">Archivos</div>
<div> <a class="Naranja2" href="documen" target="blank": >Enero</a> </div>
<div> <a class="Naranja2" href="documen" target="blank": >Febrero</a> </div>
<div> <a class="Naranja2" href="documen" target="blank": >Marzo</a> </div>
<div id="contenido">
<div id="Principal"><h1>Cuerpo de Texto</h1><p>El texto ocupa un 85% de la anchura de la página. La estructura de la página es a dos columnas con cabecera y pie. No tiene márgenes arriba y abajo y los tiene automáticos por la izquiersa y derecha.
El contenido tiene un margen de 5px y cada título de cada apartado tiene un tamaño de 2em y un color #fc9</p>
<h1>Cabecera</h1>La cabecera ocupa un 10% de la altura de la página y tiene color de fondo naranja
<h1>Menu</h1> <p> El menú está situado a la izquierda y tiene un ancho de un 15%. Tiene 10 elementos habiendo 2 que no son enlaces (Categorías y Archivos). Estos dos elementos tienen un color de fondo #f90. El resto son enlaces que no llevan a ningún sitio con color de fondo #fc9 y texto en negro. Todos los elementos del menú tienen un relleno de 5px.
Al pasar el ratón por encima deberá ponerse con color de fonfo blanco y color de fuente #fc9</p>
<h1>Pie de Página</h1>El pie de página tiene un color de fondo naranja
</div>
<div id="secundario"><span>Columna derecha</span><br></br>Esta columna tiene de ancho el 20% restante de la anchura del contenido. Aquí se suele poner alguna imagen o algún formulario para la introducción de datos <br></br><span>Imagen</span> <img class= "carrasco" src=https://www.google.es/search?q=el+coliseo&client=firefox-b-ab&dcr=0&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjPv4KIst_ZAhWLvxQKHWoBD7AQ_AUICigB&biw=1280&bih=889#imgrc=BINgjd2NLvCWcM:> Esta imagen tiene 200px de ancho<br></br></div>
<div id="pie" class="ppp">Portal creado por Miguel Labrador y Pablo Estrada</div>
</body>
-Este es el código css:
#contenedor {
width:100%;}
#cabecera {
background-color: orange;
color: white;}
#menu {
float: left;
width: 35%;
color:white;
background-color: orange;}
#contenido {
float:left;
width: 85%;}
#contenido #Principal{
float:left;
width:80%;}
#contenido #secundario{
float:left;
width:20%;}
#pie {clear: both;
background-color: orange;
color:white;
padding-left:250px;
font-size:1em;}
span {font-weight:bold; color:red; font-size:2em;}
.Naranja1{
background-color: orange;
color:black;}
.Naranja2{
background-color: orange;}
a{
display:block;
color:black;
text-decoration:none;}
a:hover{
background-color: white;
color:#fc9;}
.carrasco {width:200px;
height:200px;}
A continuación vamos a mostrar el tercer portal:
-Este es el el código html que hicimos para hacer el portal web:
<!DOCTYPE html>
<html LANG="es">
<head><title>tercer portal</title> <link rel="stylesheet" type="text/css" href="css/miportal3.css" />
<meta charset="utf8">
<link href="https://fonts.google.apis.com/css?family=Indie+flowers" rel="stylesheet">
<link href="https://fonts.google.apis.com/css?family=Indie+flowers" rel="stylesheet">
</head>
<body>
<div id="contenedor">
<div id="cabecera"></div>
<h1> Mi tercer portal </h1> <pr> <h1> Inicio </h1>
<div id="menu"></div>
<div class="Naranja1">Categorías</div>
<div> <a class="Naranja2" href="documen" target="blank": >Inicio</a> </div>
<div> <a class="Naranja2" href="documen" target="blank": >Datos Personales</a> </div>
<div> <a class="Naranja2" href="documen" target="blank": >Docencia</a> </div>
<div> <a class="Naranja2" href="documen" target="blank": >Contacto</a> </div>
<div> <a class="Naranja2" href="documen" target="blank": >Acerca de</a> </div>
<div class="Naranja1">Archivos</div>
<div> <a class="Naranja2" href="documen" target="blank": >Enero</a> </div>
<div> <a class="Naranja2" href="documen" target="blank": >Febrero</a> </div>
<div> <a class="Naranja2" href="documen" target="blank": >Marzo</a> </div>
<div id="contenido">
<div id="Principal"><h1>Cuerpo de Texto</h1><p>El texto ocupa un 85% de la anchura de la página. La estructura de la página es a dos columnas con cabecera y pie. No tiene márgenes arriba y abajo y los tiene automáticos por la izquiersa y derecha.
El contenido tiene un margen de 5px y cada título de cada apartado tiene un tamaño de 2em y un color #fc9</p>
<h1>Cabecera</h1>La cabecera ocupa un 10% de la altura de la página y tiene color de fondo naranja
<h1>Menu</h1> <p> El menú está situado a la izquierda y tiene un ancho de un 15%. Tiene 10 elementos habiendo 2 que no son enlaces (Categorías y Archivos). Estos dos elementos tienen un color de fondo #f90. El resto son enlaces que no llevan a ningún sitio con color de fondo #fc9 y texto en negro. Todos los elementos del menú tienen un relleno de 5px.
Al pasar el ratón por encima deberá ponerse con color de fonfo blanco y color de fuente #fc9</p>
<h1>Pie de Página</h1>El pie de página tiene un color de fondo naranja
</div>
<div id="secundario"><span>Columna derecha</span><br></br>Esta columna tiene de ancho el 20% restante de la anchura del contenido. Aquí se suele poner alguna imagen o algún formulario para la introducción de datos <br></br><span>Imagen</span> <img class= "carrasco" src=https://www.google.es/search?q=el+coliseo&client=firefox-b-ab&dcr=0&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjPv4KIst_ZAhWLvxQKHWoBD7AQ_AUICigB&biw=1280&bih=889#imgrc=BINgjd2NLvCWcM:> Esta imagen tiene 200px de ancho<br></br></div>
<div id="pie" class="ppp">Portal creado por Miguel Labrador y Pablo Estrada</div>
</body>
-Este es el código css:
#contenedor {
width:100%;}
#cabecera {
background-color: orange;
color: white;}
#menu {
float: left;
width: 35%;
color:white;
background-color: orange;}
#contenido {
float:left;
width: 85%;}
#contenido #Principal{
float:left;
width:80%;}
#contenido #secundario{
float:left;
width:20%;}
#pie {clear: both;
background-color: orange;
color:white;
padding-left:250px;
font-size:1em;}
span {font-weight:bold; color:red; font-size:2em;}
.Naranja1{
background-color: orange;
color:black;}
.Naranja2{
background-color: orange;}
a{
display:block;
color:black;
text-decoration:none;}
a:hover{
background-color: white;
color:#fc9;}
.carrasco {width:200px;
height:200px;}
Comentarios
Publicar un comentario