Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

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++


logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 25

Visitas el mes pasado: 27

logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




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í:

Ver archivo index.html

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í:

Ver archivo plantilla.html

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



Mi primera web

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com