Aprende Web
Crea y diseña tus sitios en la Web.
Mi primera web
Aprender a hacer una sencilla web paso a paso partiendo de cero.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
RSS. Suscribir canal. Buscar en Aprende Web
Traducir página
Visita nuestro blog:
y entérate de las novedades o deja un comentario.
Dudas y sugerencias:
Sobre ésta página
última modificación: 13-07-2018.
Visitas este mes: 6
Visitas el mes pasado: 19

GRACIAS
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquà mismo se enseñan.
By Anyelguti
14. Final del curso (I)
14.1. Los códigos
Los archivos.
Esta página es un repaso de lo que hemos hecho hasta ahora. Vamos a ver qué archivos debemos tener y cuales son sus códigos. con ello podrás comprobar si lo tienes todo bien o si falla algo en tu Web. En tu Web debes tener los siguientes archivos
Archivos HTML: index.html, principal.html.
Archivos CSS: estilo.css, general.css
Dentro de la carpeta objetos: adelante.gif; atras.gif; buzon.gif, buzon2.gif, dibujo.gif, enconstruccion.gif, fondo.gif, fondomenu.jpg, logo.gif.
El código de index.html
Este es el código que debes tener en tu archivo index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> Mi Web</title>
<link rel="stylesheet" type="text/css" href="estilo26.css" />
</head>
<body>
<h1>Mi Primera Web</h1>
<h2>Bienvenido a mi Web</h2>
<div>
<h3>Secciones</h3>
<ul>
<li><a href="#">Seccion 1.</a> </li>
<li><a href="#">Seccion 2.</a> </li>
<li><a href="#">Seccion 3.</a> </li>
<li><a href="#">Seccion 4.</a> </li>
<li><a href="#">Seccion 5.</a> </li>
<li><a href="pagina41.html">Plantilla</a> </li>
</ul>
</div>
<p>Hola, estoy aprendiendo a hacer Webs y este es <i>mi primer párrafo,</i> no
es muy largo, pero es un párrafo.</p>
<p>Este ya es <i>mi segundo párrafo.</i> Procuraré que sea más largo que el primero,
así que os voy a contar qué he aprendido hasta ahora. De momento he aprendido
que el código de cualquier Web va encerrado dentro de la etiqueta HTML . Dentro
de esta etiqueta está en primer lugar la etiqueta HEAD , y dentro de ésta ponemos
el título en la etiqueta TITLE; y en segundo lugar la etiqueta BODY donde
ponemos lo que queremos que se vea en la Web: de momento el texto. </p>
<br/>
<h2>Buscadores en la Web.</h2>
<p>Voy a escribir la lista de los buscadores más usados en la World Wide Web.
Con este paso aprendo a escribir listas y a insertar enlaces a otras Webs.</p>
<img class="dibujo" src="objetos/dibujo.gif" alt="conexión a Internet" width="285px" height="238px" />
<ul>
<li>El primer buscador más usado es <b>Google:</b>
<a href="http://www.google.com" target="_blank" > www.google.com. </a></li>
<li>El segundo buscador más usado es <b>Yahoo:</b>
<a href="http://www.yahoo.es" target="_blank" > www.yahoo.es. </a></li>
<li>Le sigue el buscador <b>MSN:</b>
<a href="http://www.msn.es" target="_blank" > www.msn.es. </a></li>
<li>Y otro de los más usados es <b>Altavista:</b>
<a href="http://www.altavista.com" target="_blank" > www.altavista.com. </a></li>
<li>Otro buscador bastante conocido es <b>Terra:</b>
<a href="http://www.terra.es" target="_blank" > www.terra.es. </a></li>
</ul>
<p>Puedes mandar tus comentarios y sugerencias:
<a href="mailto:anyelguti@gmail.com"><img src="objetos/buzon.gif"
alt="manda un correo"></a>
</p>
</body>
</html>
En el navegador, el archivo index.html se debe ver así:
El código de estilo.css
Este es el código que debes tener en tu archivo estilo.css
* {padding: 0px; margin: 0px; }
h1 { text-align: center; font-size: 2.5em; font-family: verdana; color: purple }
h2 { text-align: center; font-size: 1.9em; font-family: "times new roman"; color: olive; }
p { text-align: justify; font-size: 1.1em; font-family: arial; color: navy ;
padding-left: 3em; padding-right: 3em; padding-top: 0.5em; text-indent: 2.5em; }
.dibujo { float: right; margin-left: 2em; margin-right: 3em; margin-bottom: 1em; }
body { background-color: rgb(239,226,254); background-image: url("objetos/fondo.gif");}
li { text-align: justify; font-size: 1.1em; font-family: arial; color: navy;
margin-left: 4em; padding-right: 3em; padding-top: 0.5em; }
ul { list-style-type: square; }
a {text-decoration: none}
a:link { color: rgb(69,69,159); }
a:visited { color: rgb(149,116,207); }
a:hover { color: rgb(175,54,93); }
a:active { color: rgb(175,54,93); }
div { float: left; width: 160px; border: 1px black solid; background-color: rgb(224,240,255);
margin-left: 3em; margin-right: 2em; margin-bottom: 1em ;padding-top: 1em; padding-bottom: 1em; }
h3 { font-size: 1.5em; font-family: "times new roman"; font-weight: bold; text-align: center;
color: purple }
div li { font-size: 1.1em; font-family: "times new roman"; margin: 0em;
padding-right: 0em; padding-left: 0em; text-align: left; }
div ul { list-style-type: none; }
div li a { padding-left: 1em }
div li a:link { color: rgb(204,32,239); }
div li a:visited { color: rgb(144,112,207); }
div li a:hover { color: rgb(32,112,63); background-color: rgb(224,224,255); display: block; }
div li a:active { color: rgb(32,112,63); }
img { border: none }
El código de plantilla.html
Este es el código que debes tener en tu archivo plantilla.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Plantilla</title>
<link rel="stylesheet" type="text/css" href="general27.css" />
</head>
<body>
<div id="cabecera">
<img src="objetos/logo.gif" alt="Imagen logo"/>
<div id="recuadro">
<h6> ¡HOLA! </h6>
<h6>Bienvenido a la Primera Web de Fulanit@ de Tal</h6>
</div>
<h1>Mi Primera Web</h1>
<h3>SECCIÓN ACTUAL</h3>
</div>
<div id="navegacion">
<ul>
<li><a href="paso43.html">Página Principal</a></li>
<li><a href="#">Enlace a Sección 1</a></li>
<li><a href="#">Enlace a Sección 2</a></li>
<li><a href="#">Enlace a Sección 3</a></li>
<li><a href="#">Enlace a Sección 4</a></li>
<li><a href="#">Enlace a Sección 5</a></li>
<li><a href="#">Enlace a Sección 6</a></li>
<li><a href="#">Enlace a Sección 7</a></li>
</ul>
</div>
<p class="situacion">Estás en: Mi Primera Web / Seccion x / Apartado y.</p>
<div id="menu">
<br/>
<h4>Sección X.</h4>
<br/>
<ul>
<li><a href="#">Apartado 1</a>
<li><a href="#">Apartado 2</a>
<li><a href="#">Apartado 3</a>
<li><a href="#">Apartado 4</a>
<li><a href="#">Apartado 5</a>
<li><a href="#">Apartado 6</a>
</ul>
<br/>
</div>
<div id="contenidos">
<h1>Título de Sección</h1>
<h2>Título de Apartado</h2>
<h4>Este será un Subtítulo </h4>
<p>Esta es una página de plantilla que servirá para hacer las páginas internas
de mi sitio Web. Es curioso cómo se parece esta página a la de Anyelguti.
Sin embargo, ahora puedo cambiar muchas cosas y personalizarla. Para ello
lo único que tengo que hacer es sustituir los textos que ahora ves escritos
por otros que yo quiera. Támbién puedo cambiar los colores de fondo.
Cambiar el tipo, tamaño y forma de la letra, la alineacion del texto
y otras cosas para ponerlo a mi gusto.</p>
<p>También debo cambiar los enlaces en cuanto tenga hechas varias páginas
de mi Web, para enlazarlas todas entre sí. Y si tengo alguna duda o quiero
poner alguna cosa más, siempre se puede consultar el "Curso de HTML" y el
"Curso de CSS" que hay en "Aprende Web".</p>
<p> Por último, como esta Web no la tengo todavía muy acabada,
le pondré un letrero que lo indique: Éste es el letrero:</p>
<br/>
<img src="../../objetos/enconstruccion.gif" alt="Página en Construcción"/>
<br/><br/><br/>
</div>
<div id="pie">
<div id="flechas">
<p>Ir al apartado</p>
<p>
<a href="#"><img src="objetos/atras.gif" alt="Anterior"/> Anterior </a>
<a href="#"> Siguiente <img src="objetos/adelante.gif" alt="Siguiente"/></a>
</p>
</div>
<h4> Página creada por FULANIT@. </h4>
<p>Manda tus sugerencias: <a href="mailto:mi_correo@servidor.com">
<img src="objetos/buzon2.gif" alt="manda un correo" /></a></p>
</div>
</body>
</html>
En el navegador, el archivo plantilla.html se debe ver así:
El código de general.css
Este es el código que debes tener en tu archivo general.css
* { margin: 0px auto; padding 0px ; text-align: center }
body { background-color: #ffffff; ;font-family : arial ; font-size : 1em ;
min-width: 800px; }
#cabecera { background-color: #ccffff; ;min-height: 60px; }
#navegacion { background-color: #ffff99 ; width: 100%; min-height: 65px; padding: 0px auto;}
#menu { background-color: #e2ffde; width: 20%;
border: 2px solid black; margin: 2% ; float: left;min-height: 150px;
background-image: url("../../objetos/fondomenu.jpg"); }
#contenidos { background-color: #ffffff; width: 75% ;float: left; }
#pie { background-color: #ffd08f ; clear: both; min-height: 60px;}
h1 { font-size : 2em ; font-family : Bookman old style ; font-style : italic ;
text-align: center ; padding :10px 0px 0px 0px ; margin : 0px }
h3 { font-size : 1.2em ; font-family : Bookman old style ; font-style : italic ;
text-align: center ; margin: 0px; padding :15px 0px 10px 0px ; }
#cabecera img { float: left; width:100px; height: 100px; margin-left: 30px}
#recuadro { float: right ; width: 200px; background-color: #993399; color: #99ff00 ;
padding: 10px; margin-right: 75px; margin-top: 15px; }
h6 { font-size: 0.9em; }
#navegacion ul li { display: inline; float: left;width: 200px ;
border: 1px solid #ffcc99 ;margin: 3px ; }
#navegacion ul { clear:both; }
#navegacion a { font-size: 0.8em ; font-weight: bold;text-decoration: none;
text-align: left;padding: 0.2em 1em 0.2em 1em; display:block; }
#navegacion a:link { color: #333333; background-color: #ffff99 ; }
#navegacion a:visited { color: #333333; background-color: #ffff99 ; }
#navegacion a:hover { color:#990099; background-color: #ffffcc; }
#navegacion a:active { color:#990099; background-color: #ffffcc; }
.situacion { background-color: #ccffff;font-size: 0.8em; font-weight: bold;padding: 0.1em 0em; }
#menu h4 { margin: 0px; padding : 0.5em 1em;; font-size : 1.1em ; font-family : verdana ;
font-weight: bold; ; text-align: left ; }
#menu ul {width: 100%; list-style: none; margin: 0px; padding: 0px;}
#menu a { padding : 0.3em 1em;display: block; text-align: left; font-weight: bold; }
#menu a:link { text-decoration: none; color:#330099; }
#menu a:visited { text-decoration: none; color:#330099; }
#menu a:hover { text-decoration: underline; color: #000099; background-color:#dcdcdc; }
#menu a:active { text-decoration: underline; color: #000099; background-color:#dcdcdc; }
#contenidos h1 { font-size: 1.7em; font-weight: bold; font-family: verdana ;
font-style: normal; color: navy; padding 1em; }
#contenidos h2 { font-size : 1.4em ;font-weight: bold; font-family: verdana;
padding : 1em; }
#contenidos h4 { font-size: 1.1em ; font-weight: bold; font-family: verdana ;
text-align: left; padding: 0.5em 3em; }
#contenidos p { text-align: justify ; padding : 0.5em 3em; text-indent: 3em; }
#flechas { float: left ; margin: 5px 15px; }
#flechas p { font-size: 0.9em;font-weight: bold;font-family: Europa; }
#flechas a { font-size: 1.1em;font-weight: bold;font-family: Europa;
text-decoration: none ; color: green; }
#flechas a img { width: 36px; height: 24px; border: 0;}
#pie h4 { font-size: 1.2em; font-family : comic sans ms ; }
#pie > p { font-family : courier ; text-align: center ; font-size: 1.2em;
padding-bottom: 0.2em; }
#pie p a img { border: 0px;}
Estos son los códigos que debes tener en los archivos de tu sitio Web. Puedes repasarlos con tu Web, si algo no te funciona o te has perdido en algún punto, o simplemente por curiosidad.
En el próximo paso vamos a ver qué es lo que hemos aprendido hasta ahora.
ir al próximo paso: Qué hemos aprendido
imprimir esta página
Página creada por ANYELGUTI.
Sugerencias:
aprendeweb@aprende-web.net. Envia un 
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com