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: 3
Visitas el mes pasado: 10
GRACIAS
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
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>
<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>
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:
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
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