<html>
<head>
</head>
<body>
</body>
</html>
Donde:
Html nos indica que esta escrito en ese lenguaje. Head es uno de los tags que van dentro de nuestro html, en esta se ponen el titulo de la paguina con el tag <title></title>; los estilos de nuestra pagina que van en nuestra hoja de estilos <style type=text/css> </style>estas son: el color, tamaño y fuentes de texto, tamaños y posiciones de nuestras cajas o divisiones. Body es tambien uno de los tags que estan dentro de html, en esta ponemos el contenido principal de nuestra paguina.
Para saber como se hace esto e iniciarse en el mundo de las paguinas web, haremos los siguientes pasos:
1.- Copiaremos el siguiente codigo.
<html>
<head>
<title>Mi primera página web</title>
<style type=text/css>
body{
background:#eaeaea;}
#div_estatico{
color:#FFF;
width:200px;
height:600px;
background:#1a1a1a;
position:fixed;
border-radius:10px;
border: 5px dotted #0ff;
margin-top:-15px;
}
#normal{
text-align:justify;
padding:20px;
font-family:"Times New Roman", Times, serif;
font-size:30px;
margin-left:200px;
}
h1{
text-align:center;
}
ul, li{
color:#CCCCCC;
text-align:left;
}
a:link{
font-size:18px;
color:#CCC;
}
a:hover{
color:#FFF;;
}
</style>
</head>
<body>
<div id="div_estatico">
<h1>Mi primera paguina<h1>
<hr />
<ul>
<li><a href="#">Reflexiones</a></li>
<li><a href="#">Poemas</a></li>
<li><a href="#">Frases</a></li>
<li><a href="#">Cacnciones</a></li>
</ul>
</div>
<div id="normal">
<h1>El murciélago</h1>
<h2>(Leyenda juchiteca)</h2>
<p>Las mariposas que hoy vemos, ingrávidas, que se pueden posar en las flores, en la superficie de las aguas y hasta en las trémulas ramas del aire, no son otra cosa que una fracasada imagen de lo que el murciélago fue en otro tiempo: el ave más bella de la creación. Pero no siempre fue así. Cuando la luz y la sombra hecharon a andar, era como ahora la conocemos y se llama biguidibela: biguidi, mariposa; y bela, carne: mariposa de carne, es decir, desnuda.</p>
<p>La más fea y desventurada de todas las criaturas era entonces el murciélago. Y un día acosado por el frío, subió al cielo y le dijo a Dios:</p>
<p>-Me muero de frío. Necesito plumas.
Y como Dios, aunque no cesa de trabajar, no vuelve las manos a tareas ya cumplidas, no tenía ni una pluma. Así fue que le dijo que volviera a la tierra y suplicara en su nombre una pluma a todas las aves; porque Dios da más de lo que se le pide. Y el murciélago vuelto a la tierra, recurrió a aquellos pájaros de más vistoso plumaje.<p>
<p>La pluma verde de los loros, la azul de la paloma azul, la blanca de la paloma blanca, la tornasol de la chuparrosa, su más próxima imagen actual: todas las tuvo el murciélago; y orgulloso volaba por las cimas de la montaña, y las otras aves, refrenando su vuelo, se detenían para admirarlo.<p>
<p>Y había una emoción nueva, plástica sobre la tierra.
A la caída de la tarde, volando con el viento del Poniente, coloraba el horizonte; y una vez viniendo de más allá de las nubes, creó el arcoíris, como un eco de su vuelo; sentado en las ramas de los árboles, abría alternativamente sus alas, sacudiéndolas en un temblor que alegraba el aire.</p>
<p>Todas las aves comenzaron a sentir envidia de él; y el odio se volvió unánime, como un día lo fue la admiración.</p>
<p>Otro día subió al cielo parvada de pájaros, el colibrí adelante. Dios escucho su queja. El murciélago se burlaba de ellos; además con una pluma menos, padecían de frío; y ellos mismos trajeron el mensaje celestial en que se llamaba al murciélago. Cuando estuvo en la casa de allá arriba, Dios le hizo repetir los ademanes que de aquel modo habían ofendido a sus compañeros; y agitando las alas, se quedó otra vez desnudo. Se dice que todo un día llovieron plumas del cielo. Y desde entonces solo vuela en los atardeceres en rápidos giros, cazando plumas imaginarias, y no se detiene, para que nadie advierta su fealdad.</p>
Andres Henesterosa
</div>
</body>
</html>
<head>
<title>Mi primera página web</title>
<style type=text/css>
body{
background:#eaeaea;}
#div_estatico{
color:#FFF;
width:200px;
height:600px;
background:#1a1a1a;
position:fixed;
border-radius:10px;
border: 5px dotted #0ff;
margin-top:-15px;
}
#normal{
text-align:justify;
padding:20px;
font-family:"Times New Roman", Times, serif;
font-size:30px;
margin-left:200px;
}
h1{
text-align:center;
}
ul, li{
color:#CCCCCC;
text-align:left;
}
a:link{
font-size:18px;
color:#CCC;
}
a:hover{
color:#FFF;;
}
</style>
</head>
<body>
<div id="div_estatico">
<h1>Mi primera paguina<h1>
<hr />
<ul>
<li><a href="#">Reflexiones</a></li>
<li><a href="#">Poemas</a></li>
<li><a href="#">Frases</a></li>
<li><a href="#">Cacnciones</a></li>
</ul>
</div>
<div id="normal">
<h1>El murciélago</h1>
<h2>(Leyenda juchiteca)</h2>
<p>Las mariposas que hoy vemos, ingrávidas, que se pueden posar en las flores, en la superficie de las aguas y hasta en las trémulas ramas del aire, no son otra cosa que una fracasada imagen de lo que el murciélago fue en otro tiempo: el ave más bella de la creación. Pero no siempre fue así. Cuando la luz y la sombra hecharon a andar, era como ahora la conocemos y se llama biguidibela: biguidi, mariposa; y bela, carne: mariposa de carne, es decir, desnuda.</p>
<p>La más fea y desventurada de todas las criaturas era entonces el murciélago. Y un día acosado por el frío, subió al cielo y le dijo a Dios:</p>
<p>-Me muero de frío. Necesito plumas.
Y como Dios, aunque no cesa de trabajar, no vuelve las manos a tareas ya cumplidas, no tenía ni una pluma. Así fue que le dijo que volviera a la tierra y suplicara en su nombre una pluma a todas las aves; porque Dios da más de lo que se le pide. Y el murciélago vuelto a la tierra, recurrió a aquellos pájaros de más vistoso plumaje.<p>
<p>La pluma verde de los loros, la azul de la paloma azul, la blanca de la paloma blanca, la tornasol de la chuparrosa, su más próxima imagen actual: todas las tuvo el murciélago; y orgulloso volaba por las cimas de la montaña, y las otras aves, refrenando su vuelo, se detenían para admirarlo.<p>
<p>Y había una emoción nueva, plástica sobre la tierra.
A la caída de la tarde, volando con el viento del Poniente, coloraba el horizonte; y una vez viniendo de más allá de las nubes, creó el arcoíris, como un eco de su vuelo; sentado en las ramas de los árboles, abría alternativamente sus alas, sacudiéndolas en un temblor que alegraba el aire.</p>
<p>Todas las aves comenzaron a sentir envidia de él; y el odio se volvió unánime, como un día lo fue la admiración.</p>
<p>Otro día subió al cielo parvada de pájaros, el colibrí adelante. Dios escucho su queja. El murciélago se burlaba de ellos; además con una pluma menos, padecían de frío; y ellos mismos trajeron el mensaje celestial en que se llamaba al murciélago. Cuando estuvo en la casa de allá arriba, Dios le hizo repetir los ademanes que de aquel modo habían ofendido a sus compañeros; y agitando las alas, se quedó otra vez desnudo. Se dice que todo un día llovieron plumas del cielo. Y desde entonces solo vuela en los atardeceres en rápidos giros, cazando plumas imaginarias, y no se detiene, para que nadie advierta su fealdad.</p>
Andres Henesterosa
</div>
</body>
</html>
2.- Abrimos el blog de notas que se encuentra por lo regular en accesorios.
3.- Pegamos el codigo en el blog de notas.
4.- Guardaremos nuestro archivo en Mis Documentos con el nombre que queramos y la extención .html por ejemplo:
miprimerapagina.html
5.- El siguiente paso sera abrir nuestros documento .html en donde lo guardamos y le daremos click derecho>abrir con>El navegador que utilicen(chrome, mozilla firefox, Internet Explorer, etc.)
Y listo tendremos nuestra primera paguina web; podemos cambiar y jugar con nuestro codigo, si vemos nuestra caja o división llamada div_estatico, se encuentra en posicion fija, esto se logra posicionandola con position:fixed y esta caja tiene un ancho y una altura width:200px , height:700px que nos permitira verla como una cinta; border-radius:10px, border: 5px dotted #0ff son nuestros estilos de borde redondos -borremos estos para ver lo que sucede-. En nuestra division normal, lo unico que hacemos , es darle un margen izquierdo de 200px margin-left:200px, el tamaño de nuestra división fija, para que así quede recorrida hacia la derecha.
Para finalizar ponemos los comentarios de todos nuestros estilos CSS que utlizamos y su funcionamiento dentro de ella, que van adentro de nuestro tag head y que son encerradas por los tags siguientes: <style type=text/css></style> . . En nuestros div pusimos una id con su nombre declarado, para hacerlo llamar despues con el numeral # en nuestros estilos CSS entre llaves #div_estatico{} .
<style type=text/css>
body{/*BODY Es la pagina principal*/
background:#eaeaea;/*El color de toda nuestra paguina*/
}
#div_estatico{
color:#FFF;
/*El color de nuestra fuente*/
width:200px;
/*El ancho de nuestra caja o división*/
height:600px;
/*La altura de la división*/
background:#1a1a1a;
/*El color de nuestro fondo de nuestra caja o division*/
position:fixed;
/*Para que nuestra caja no se pueda mover*/
border-radius:10px;
/*El radio de nuesta caja para no tener una vista cuadrada, sí se le quita, los bordes seran cuadrados.*/
border: 5px dotted #0ff;
/*El tamaño de nuestro borde, el estilo y el color.*/
margin-top:-15px;
/*Para situarla hasta la parte de arriba, borrar esta parte y se dara cuenta lo que pasa.*/
}
#normal{
text-align:justify;
/*Nuestro texto justificado*/
padding:20px;
/*El margen de nuestra caja con respecto al texto, esto se vera más adelante.*/
font-family:"Times New Roman", Times, serif;
/*la fuente de nuestra division normal.*/
font-size:25px;
/*El tamaño de la fuente.*/
margin-left:200px;
/*Para que no se interponga con nuestra división estatica.*/
}
h1{
text-align:center;
/*Alinear nuestras etiquetas h1 en el centro*/
}
ul, li{
color:#CCCCCC;/*El colo de nuestros listas*/
text-align:left;/*Alineamos hacia la izquierda*/
}
a:link{
font-size:18px;
/*La fuente de del tamaño de link y el color*/
color:#CCC;
}
a:hover{
/*Al pasar el puntero de nuestro raton nuestra fuente es de color blanco*/
color:#FFF;;
}
em,b,big{
color:#0FF;}
</style>
body{/*BODY Es la pagina principal*/
background:#eaeaea;/*El color de toda nuestra paguina*/
}
#div_estatico{
color:#FFF;
/*El color de nuestra fuente*/
width:200px;
/*El ancho de nuestra caja o división*/
height:600px;
/*La altura de la división*/
background:#1a1a1a;
/*El color de nuestro fondo de nuestra caja o division*/
position:fixed;
/*Para que nuestra caja no se pueda mover*/
border-radius:10px;
/*El radio de nuesta caja para no tener una vista cuadrada, sí se le quita, los bordes seran cuadrados.*/
border: 5px dotted #0ff;
/*El tamaño de nuestro borde, el estilo y el color.*/
margin-top:-15px;
/*Para situarla hasta la parte de arriba, borrar esta parte y se dara cuenta lo que pasa.*/
}
#normal{
text-align:justify;
/*Nuestro texto justificado*/
padding:20px;
/*El margen de nuestra caja con respecto al texto, esto se vera más adelante.*/
font-family:"Times New Roman", Times, serif;
/*la fuente de nuestra division normal.*/
font-size:25px;
/*El tamaño de la fuente.*/
margin-left:200px;
/*Para que no se interponga con nuestra división estatica.*/
}
h1{
text-align:center;
/*Alinear nuestras etiquetas h1 en el centro*/
}
ul, li{
color:#CCCCCC;/*El colo de nuestros listas*/
text-align:left;/*Alineamos hacia la izquierda*/
}
a:link{
font-size:18px;
/*La fuente de del tamaño de link y el color*/
color:#CCC;
}
a:hover{
/*Al pasar el puntero de nuestro raton nuestra fuente es de color blanco*/
color:#FFF;;
}
em,b,big{
color:#0FF;}
</style>
No hay comentarios:
Publicar un comentario