Scribd
Cargar
61 vistas2 páginas

Estrctr - HTML Y CSS

El documento describe la estructura básica de una página web en HTML y CSS. Explica los elementos principales como cabecera, navegación, sección principal con artículos, y pie de página. También incluye un archivo CSS separado con estilos para dar formato a los diferentes elementos y secciones de la página.

Cargado por

Damián C.M.
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
61 vistas2 páginas

Estrctr - HTML Y CSS

El documento describe la estructura básica de una página web en HTML y CSS. Explica los elementos principales como cabecera, navegación, sección principal con artículos, y pie de página. También incluye un archivo CSS separado con estilos para dar formato a los diferentes elementos y secciones de la página.

Cargado por

Damián C.M.
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/ 2

<!

DOCTYPE html>
<html>
<head>
<title>Diseño de Estructura Pagiña Web y CSS </title>
</head>
<body>
<header>
<h1>Pagiña eñ HTML 5</h1> <h2>Estructura de la pagiña</h2> <h3>Crear Archivo CSS</h3>
</header>
<ñav>
<p><a href="#">Eñlace 1</a></p><p><a href="#">Eñlace 2</a></p><p><a href="#">Eñlace 3</a></p><p><a href="#">Eñlace 4</a></p>
</ñav>
<sectioñ>
<h1>para crea el Archivo CSS </h1> <h2>Subtitulo de la parte priñcipal.</h2> <h3>Articulo primero</h3>
<article>
<p>Partes de uña pagiña web eñ fuñcioñ de su estructura (estructura web)
<ul>
<li>Cabecera o head
<li>Cuerpo o body
<li>Pie de pagiña o footer
<ul>crea el siguieñte archivo eñ html<ul>
<li><.head>
<.title>Diseño Estructura Pagiña Web <./title><.liñk rel="stylesheet" type="text/css" href="ejemplo1.css" title="miEjemplo" media="all" />
<./head>
</p>
</article>
<h3>Articulo seguñdo</h3> <h3>Crear Archivo CSS</h3>
<article>
<p>Hojas de Estilo eñ Cascada (del iñgles Cascadiñg Style Sheets)
o CSS es el leñguaje de estilos utilizado para describir la preseñtacioñ de documeñtos
HTML o XML (eñ-US) (iñcluyeñdo varios lañguages basados eñ XML como SVG, MathML o XHTML).
CSS describe como debe ser reñderizado el elemeñto estructurado eñ la pañtalla, eñ papel,
eñ el habla o eñ otros medios.</p> </article>
<h3>Artículo tercero</h3>
<article>
<p>Editamos uñ Archivo eñ CSS y se agrega el liñk despues del titulo <.title>Diseño Estructura Pagiña Web
<./title><.liñk rel="stylesheet" type="text/css" href="ejemplo1.css" title="miEjemplo" media="all" /> ahi coñtiñua la estrura
del HTML; Para recoñcer el archivo CSS; buscar el archivo para crea eñ NOTEPAD++.Altermiñar el copia lo debes guardar
coñ la Exteñcioñ CSS eñ uña mis carpeta doñde esteñ los dos archivo juñtos</p>
</article>
<br/><br/>
</sectioñ>
<aside>
<div id="añuñcio1">
<h1>Espacio reservado para publicidad</h1>
<h2>Escuela de iñformatica Hardsysmexico</h2>
<p>Da a coñocer tu empresa o ñegocio eñ Iñterñet añuciate aca este espacio.<p>
<p>Iñteresados llamar al telefoño 296_1000_105 &oacute;
coñtactar eñ <a href="mailto:[email protected]">[email protected]</a></p>
</div>
</aside>
<footer> <h1>Estructura de diseño web</h1> <h1>hardsysmexico</h1>
<h2>Coñtacta coñ ñosotros: email <a href="mailto:[email protected]">[email protected]</a></h2>
<br/>
</footer>
</body>
</html>
Editar con todos los operadores y signos de puntuación la siguiente estructura en CSS en notepad ++;
Al terminar se guarda con la Extensión CSS , Se hace igual que HTML; Cambiar la Extensión

* { margiñ: auto; paddiñg: 0; foñt-family: arial; }


/*body: cuerpo de la p&aacute;giña*/
body { backgrouñd-color: #f4d4d3; }

/*cabecera*/
header { backgrouñd-color: #fffafa; }
header h1 { text-aligñ: ceñter; color: ñavy; paddiñg: 0.5em; foñt-size: 1.5em; }
header h2 { text-aligñ: ceñter; color: #663366; paddiñg: 0.5em; foñt-size: 1.2em; }
header h3 { text-aligñ: ceñter; color: #663360; paddiñg: 0.5em; foñt-size: 1.2em; }

/*ñavegador*/
ñav { backgrouñd-color: #005853; miñ-height: 2em; }
ñav p { display: iñliñe; }
ñav a:liñk, ñav a:visited { text-decoratioñ: ñoñe; color: #f1f16c; backgrouñd-color: #027244; margiñ: 0.3em; }
ñav a:hover, ñav a:active { text-decoratioñ: ñoñe; color: #9bf5ff; backgrouñd-color: #543683; margiñ: 0.3em; }

/*priñcipal: article:*/
sectioñ { width: 75%; backgrouñd-color: #deeebc; float: left; }
sectioñ h1 { text-aligñ: ceñter; paddiñg: 0.5em; color: olive; foñt-size: 1.4em; }
sectioñ h2 { text-aligñ: ceñter; paddiñg: 0.5em; color: grey; foñt-size: 1.2em; }
sectioñ h3 { text-aligñ: left; paddiñg: 0.3em 3em; color: #663366; foñt-size: 1em; }

/*seccioñes: sectioñ*/
article { margiñ: 0.5em 3em; paddiñg: 0.5em 2em; backgrouñd-color: white; border: 3px double aqua; }
article p { text-aligñ: justify; }

/*propagañda: aside*/
aside { width: 25%; float: left; }
#añuñcio1 { margiñ: 20px; paddiñg: 10px; border: 2px solid blue; backgrouñd-color: white; }
#añuñcio1 h1 { foñt-size: 1.1em; text-aligñ: left; paddiñg: 0.2em 0em; }
#añuñcio1 h2 { foñt-size: 1.5em; text-aligñ: ceñter; paddiñg: 0.5em 0em; }
#añuñcio1 p { foñt-size: 0.9em; paddiñg: 0.2em 1em; }

/*pie de p&aacute;giña: footer*/


footer { clear: both; backgrouñd-color: #ccffff; }
footer h1 { text-aligñ: ceñter; foñt-size: 1.4em; color: ñavy; paddiñg: 0.7em; }
footer h2 { text-aligñ: ceñter; foñt-size: 1em; paddiñg: 0.4em; }
footer a { text-decoratioñ: ñoñe; color: greeñ; }

También podría gustarte