Formato plantilla base:
Código HTML / Fichero: index.html
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Estructuras de págians web</title>
<link href="CssPracticaIA.css" type="text/css" rel="stylesheet" rev="stylesheet">
</head>
<body>
<!-- HTML5 orientado a SEO - div id=contenedor para agrupar un conjunto de elementos y definir la estructura de página.
La etiqueta div es la herramienta para unir elementos cuando no podemos asociar significado semántico a un conjunto de partes. -->
<div id="contenedor">
<!--Cabecera -->
<header>
<!-- Contenido de la cabecera (tarjeta de visita que ofrece una primera impresión interesante): isologotipo
empresarial, enlace a la home page, slogan empresarial, imagen o imágenes representativas, datos de contacto como
teléfomo e email, caja de búsqueda, menú de navegación, otros elementos).
Uso de etiqueta header -->
<span> Cabecera </span>
</header>
<!--Fin Cabecera -->
<!-- Contenido de primer orden-->
<div id="contenidoPO">
<!-- Contenido específico de la página web (un texto o artículo de opinión, una entrada en un blog, un comentario
en un foro, una noticia, una descarga, etc. -->
<span class="clasePO"> Contenido primer orden </span>
</div>
<!-- Fin contenido de primer orden -->
<!-- Cambiar el orden de las divisiones y alterar la flotación y sus medidas (ancho y alto) -->
<!-- Contenido de segundo orden-->
<div id="contenidoSO">
<span class="claseSO"> Contenido segundo orden </span>
</div>
<!-- Fin contenido de segundo orden -->
<!-- Contenido de tercer orden-->
<div id="contenidoTO">
<span class="claseTO"> Contenido tercer orden </span>
</div>
<!-- Fin contenido de tercer orden -->
<!-- Pie de página -->
<footer>
<!-- Contenido del pie de página (enlaces - a otras webs relacionadas, al mapa de la web, a las políticas de seguridad, derechos de autor y avisos legales -, isologotipos de accesibilidad, seguridad, legalidad , formulario de contacto, acceso a las redes sociales, publicidad, otros elementos).
Uso de etiqueta footer-->
<span> Pie de página </span>
</footer>
<!-- Fin pie de página -->
</div>
</body>
</html>
Código Css / Fichero: CssPracticaIA.css
@charset "utf-8";
/* CSS Document */
#contenedor{
position: relative; // Relacionar con top y left
top: -10px; // Posicionamiento superior
left: 0px; // Posicionamiento inferior
margin: 0px auto; // Centrar
width: 860px; // Ancho contenedor de la plantilla
height: 760px; // Alto
background-color: rgb(255,255,255); //Fondo color blanco
}
header{
position: relative;
top: 0px;
left: 0px;
margin: 0px auto;
width: 860px;
height: 170px;
background-color: rgb(204,204,204); /* gris */
}
#contenidoPO{
position: relative;
top: 0px;
left: 0px;
margin: 0px auto;
width: 860px;
height: 250px;
background-color: rgb(255,153,153); /* rosado */
}
#contenidoSO{
position: relative;
top: 0px;
left: 0px;
margin: 0px auto;
width: 860px;
height: 150px;
background-color: #FFBE7D; /* naranja */
}
#contenidoTO{
position: relative;
top: 0px;
left: 0px;
margin: 0px auto;
width: 860px;
height: 100px;
background-color: #FF9; /* amarillo */
}
footer{
position: relative;
top: 0px;
left: 0px;
margin: 0px auto;
width: 860px;
height: 80px;
background-color: rgb(204,204,204); /* gris */
}
span{
display: block; // Convertir span en línea a elem. en bloque para centrar
width: 860px;
position: relative;
top: 10px;
font-family:Arial, Helvetica, sans-serif; // Fuentes: tipo.
font-size: 20px; // Fuentes: tamaño.
text-align:center; // Alineación
margin: 5px auto; // Ampliar margen en 5px para espaciado horizontal en blanco
}
0 comentarios:
Publicar un comentario
Ingresa tu consulta