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

Visitas el mes pasado: 73

logo

Donativos

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




6. Retoques finales (V)

6.5 Código de la página.

Código HTML

Nuestra primera página está ya compeltada. En este paso vamos a ver los códigos completos, para ver qué hemos hecho hasta ahora. Así podrás repasar el código por si tuvieras algún fallo, o simplemente para ver si coincide con el tuyo.

Este es el código HTML que debes tener al abrir el archivo index.html con el bloc de notas


<!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> &nbsp; &nbsp; 
      <a href="http://www.google.com" target="_blank" > www.google.com. </a></li>

      <li>El segundo buscador más usado es <b>Yahoo:</b> &nbsp;
      <a href="http://www.yahoo.es" target="_blank" > www.yahoo.es. </a></li>

      <li>Le sigue el buscador <b>MSN:</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp&nbsp;&nbsp;
      <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> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;
      <a href="http://www.altavista.com" target="_blank" > www.altavista.com. </a></li>

      <li>Otro buscador bastante conocido es <b>Terra:</b> &nbsp;&nbsp;
      <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>

Código CSS

Este es el código del archivo estilo.css que debes ver al abrirlo con el bloc de notas.


* {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 }

En el navegador

Nuestra página tendrá el siguiente aspecto al abrirla con el navegador:


esta es mi página

Comprueba que tus archivos son iguales que éstos, para que tu página funcione correctamente. Y ahora que hemos acabado la página de la portada, haremos una segunda página que servirá de plantilla para las demás páginas de nuestro sitio.

Pero antes de seguir trabajando en la segunda página, en la lección siguiente veremos cómo meter nuestra página en la red, para verla por Internet.


Ir al siguiente tema: Subir a la red



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