Scribd
Cargar
25 vistas7 páginas

Codigo # 24

Este documento presenta la estructura básica de una página web utilizando HTML y CSS. Define las secciones principales como cabecera, menú de navegación, contenido principal con varios artículos, barra lateral y pie de página. Además, incluye estilos CSS para dar formato y posicionar los diferentes elementos de la página.

Cargado por

Daniel Romero
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
25 vistas7 páginas

Codigo # 24

Este documento presenta la estructura básica de una página web utilizando HTML y CSS. Define las secciones principales como cabecera, menú de navegación, contenido principal con varios artículos, barra lateral y pie de página. Además, incluye estilos CSS para dar formato y posicionar los diferentes elementos de la página.

Cargado por

Daniel Romero
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 7

<!

DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>CSS Introducción </title>

<!--<link rel="stylesheet" href="estilos.css" /> ink para llamar a la página de estilos creada-->

<style>

body{

background: #FCCECE;

font-family: Arial, Helvetica, sans-serif;

header{

background: red;

height: 100px;

width: 100%;

text-align: center; /* centradoo horizaontnal*/

line-height: 100px; /* centrar o posicionar algo verticalmente en esa cantidad de px*/

color: white;

border-bottom: 6px dashed black;

nav{

background-color: lightblue;

height: 40px;

border-bottom: 6px solid black;


}

a{

float: left; /* Flotar, acomodar el menu a la izquierda, superior*/

/*list-style: none;*/

margin-top: 10px; /* Margen de la barra de menú de arriba hacia abajo*/

line-height:20px; /* Altura a la cual posicional el menu */

padding: 5px; /*Margen interno del texto del menu*/

#container{

/* width: 70%; esto es un comentario en css*/

width: 1100px;

margin: 0px auto;

border: 1px solid black;

#content{

float: left;

width: calc(80% - 80px);

background: green;

min-height: 500px; /*altura del content*/

padding: 40px;

}
.article{

color: white;

margin-top: 15px;

margin-bottom: 15px;

border-bottom: 3px solid #eee;

padding-bottom: 10px;

.article:first-child{

border-top: 1px solid #eee;

padding-top: 5px;

.article h2{

font-size: 25px;

aside{

float: left;

width: calc(20% - 20px);

background: orange;

min-height: 680px;

padding: 10px;
}

footer{

background: black;

color: white;

text-align: center;

line-height: 50px;

height: 50px;

.clearfix {

clear: both;

</style>

</head>

<body>

<div id="container"> <!--etiqueda con id para indicar despues en css cambios. Dentro del
container hacer todo el html-->

<header>

<h1>EJERCICIO DE CSS</h1>

</header>
<nav> <!--para definier el menu. Etiqueta semantica para barra de navegación-->

<a href="index.html">Inicio </a>

<a href="index.html"> Página 1 </a>

<a href="index.html"> Blog </a>

<a href="index.html"> Contacto </a>

<!--Hasta aqui esta hecho el menu a nivel de html-->

</nav>

<div class="clearfix"></div>

<section id="content"> <!--definir el cuerpo de la pagina y despues seleccionar desde css-->

<article class="article"> <!--Etiqueta par definir varios articulo; Clase article se llama igual
que la etiqueta-->

<h2>Título el Artículo 1 "Calentamiento global"</h2>

<P>Texto del artículo</P>

</article>

<article class="article"> <!--Etiqueta par definir varios articulo; Clase article se llama igual
que la etiqueta-->

<h2>Título el Artículo 2 "Eleciones 2021"</h2>

<P>Texto del artículo</P>

</article>
<article class="article"> <!--Etiqueta par definir varios articulo; Clase article se llama igual
que la etiqueta-->

<h2>Título el Artículo 3 regreso a clases"</h2>

<P>Texto del artículo</P>

</article>

<article class="article"> <!--Etiqueta par definir varios articulo; Clase article se llama igual
que la etiqueta-->

<h2>Título el Artículo 4</h2>

<P>Texto del artículo</P>

</article>

<article class="article"> <!--Etiqueta par definir varios articulo; Clase article se llama igual
que la etiqueta-->

<h2>Título el Artículo 5</h2>

<P>Texto del artículo</P>

</article>

</section>

<aside> <!--sirve para hacer una caja pero representará la barra lateral-->

<h2>Barra lateral</h2>

<form>

<label>Busqueda</label>

<input type="text">

<input type="submit" value="Buscar"/>

</form>
</aside>

<div class="clearfix"></div>

<footer>

Módulo 3 WEB &copy; 2022

</footer>

</div>

</body>

</html>

También podría gustarte