Primera parte ------->http://www.taringa.net/posts/hazlo-tu-mismo/10524549/Como-hacer-una-pagina-web-facil.html
Segunda parte------>http://www.taringa.net/posts/hazlo-tu-mismo/10921171/Como-hacer-una-pagina-web-facil-parte-2.html
NOTA
ara ver los cambios echos en la pagina web primero debes de guardarlos en el archivo index.html y presionar F5 en tu navegador.Para abrir el archivo en tu navegador solo presiona ctrl+o y selecciona el archivo
En este post veremos como ponerle un menu a tu pagina web.
En el post anterior vimos como ponerle musica y videos a tu web y quedo asi:
index.html dijo:
<html>
<head>
<title>El titulo de tu web</title>
<LINK media=all href="estilo.css" type=text/css rel=stylesheet>
</head>
<body>
<DIV id=contenedor>
<DIV id=barra-lateral> Aqui ira tu menu </DIV>
<DIV id=cabecera>
<h1>Aqui puedes poner el titulo</h1>
</DIV>
<DIV id=contenido>
Esta es tu imagen
<img src="imagen.jpg">
ESta es tu cancion
<embed src="tucancion.mp3">
<embed src="tuvideo.3gp">
</DIV>
</DIV>
</body>
</html>
estilo.css dijo:
#contenedor { width: 900px; height: 400px; }
#cabecera { background-color: green; height:50px; padding:5px; }
#barra-lateral { background-color: orange; float: left; width:140px; height:100%; }
#contenido { background-color: gray; float:left; width:740px; height:100%; }
Ahora abrimos el index.html y escribimos entre la etiqueta Div barra lateral:
dijo:
<div id="menu">
<ul>
<li><a href="http://www.miweb.com" title="Pagina Principal">Home</a></li>
<li><a href="http://www.miweb.com/musica.html" title="Escuchame!">Musica</a></li>
<li><a href="http://www.miweb.com/programas.html" title="Descargame!">Programas</a></li>
</ul>
</div>
Ahora solo cambia tus enlaces y utiliza el index.html como molde para tus demas paginas (por ejemplo musica.html programas.html descargas.html etc etc etc).El texto que escribes en entre las comillas de title sera el que aparesca cuando pasas el mouse encima del boton, y el texto entre ></a></li> es el que dira en el boton.
Ahora abre el archivo estilo.css y escribe:
estilo.css dijo:
#menu ul { list-style-type: none; margin: 0px; padding: 0px; width: 150px; font-family: Arial, sans-serif; font-size: 11pt; }
#menu ul li { background-color: #666; }
#menu ul li a { color: #ccc; text-decoration: none; text-transform: uppercase; display: block; padding: 10px 10px 10px 20px; }
#menu ul li a:hover { background: #000; border-left: 10px solid #333; color: #fff; }
Ahora solo cambia los colores a tu preferencia.Como ya lo dije antes en Css puedes poner los colores en ingles o en hexadecimal (Recomiendo en hexadecimal por que hay mas variedades de colores.)
Y entonces quedaria:
Ejemplo del menu
(Asi es el menu de mi web.)
El html del archivo index.html dijo:
<html>
<head>
<title>El titulo de tu web</title>
<LINK media=all href="estilo.css" type=text/css rel=stylesheet>
</head>
<body background ="musica-online.gif" text="FFF3FF">
<DIV id=contenedor>
<DIV id=barra-lateral>
Aqui ira tu menu
<div id="menu">
<ul>
<li><a href="http://www.miweb.com" title="Pagina Principal">Home</a></li>
<li><a href="http://www.miweb.com/musica.html" title="Escuchame!">Musica</a></li>
<li><a href="http://www.miweb.com/programas.html" title="Descargame!">Programas</a></li>
</ul>
</div>
</DIV>
<DIV id=cabecera>
<h1>el titulo de tu web titulo</h1>
</DIV>
<DIV id=contenido> Esta es tu imagen <img src="musica-online.gif"> ESta es tu cancion <embed src="Prison Song.mp3">
<embed src="Baby I love you Subtitulado (The ramones ).3gp">
</DIV>
</DIV>
</body>
</html>
El archivo estilo.css dijo:
#cabecera { background-color: green; height:50px; padding:5px; }
#barra-lateral { background-color: orange; float: left; width:140px; height:100%; }
#contenido { background-color: gray; float:left; width:740px; height:100%; }
#menu ul { list-style-type: none; margin: 0px; padding: 0px; width: 150px; font-family: Arial, sans-serif; font-size: 11pt; }
#menu ul li { background-color: #666; }
#menu ul li a { color: #ccc; text-decoration: none; text-transform: uppercase; display: block; padding: 10px 10px 10px 20px; }
#menu ul li a:hover { background: #000; border-left: 10px solid #333; color: #fff; }
Les dejo la pagina con el ejemplo que hice este post.
http://lamusicademiradio.netai.net/
Ahora lo unico que necesitan es un bueno HOSTING les recomiendo el 000webhost, y comprar un DOMINIO.En otro post les ensenare como subir su web a ese Host y Como conseguir un Domio gratis.Les dejo mi pagina web que utilizo,esta aun en construccion y en constante crecimiento si les gusta el Metal recomiendenla.
Eso fue todo ahora saben lo basico sobre hacer paginas web.
Alguna duda o algo en especial mandeme un MP.