Hola
Aquí les traigo una explicación sobre como tener tu primera página web
Código sobre el que hablaremos:
<HTML>
<HEAD>
<TITLE>Mi primera pagina web </TITLE>
</HEAD>
<BODY>
<H1 align="center" >Mi Primera pagina web </H1>
<HR>
<P>Esto tan sencillo es una verdadera página web, aunque le falta el contenido,
pero todo llegará.</P>
</BODY>
</HTML>
Explicación
Si te fijas en la página que ves con el explorador solo se ve parte de lo que has escrito, concretamente todo lo que no está encerrado entre los símbolos < y >. Eso es el contenido de la página, pero ¿y lo que está entre esos paréntesis angulares? pues esas son las etiquetas que le dicen al explorador como mostrar el contenido: en grande, con colores, centrado, el título de la página, etc. Si te fijas cada etiqueta tiene un comienzo y un fin:
<ETIQUETA parámetros> ... </ETIQUETA>
Como ves una apertura y un cierre. Algunaas etiquetas (como <BR> cambio de línea o <HR> linea horizontal) no llevan cierre. Fijaros que lo primero que tenemos es la etiqueta <HTML> cerrda al final del documento con </HTML>, eso quiere decir que estamos ante un HTML:
<HTML> ... </HTML>
Dentro de ese documento vemos una parte llamada cabecera, que la reconocerás porque está limitada con la etiqueta <HEAD> </HEAD>. Él contenido de esta parte no siempre es visible, y si lo es nunca se muestra en la página en si. Contiene por ejemplo el título que se ve en la ventana del explorador, arriba a la izquierda. La cabecera queda por tanto :
<HEAD>
<TITLE>Mi página web</TITLE>
</HEAD>
Puede contener muchas otras cosas, pero eso lo dejamos para más adelante.
El cuerpo del Documento:
La otra parte es el cuerpo o <BODY> </BODY>, es el contenido de la página web. Tiene una etiqueta con cierre:
<BODY> ... </BODY>
Y ahora el contenido:
<H1 align="center"> Mi primera página web</H1>
Con esto colocaremos el texto en formato <H1> (o cabecera 1) y centrado (align="center"), o sea, en tamaño grande y centrado en la página, una forma de resaltar la frase. Ahora separamos esa frase por medio de una línea horizontal:
<HR>
Como ves este es un ejemplo de etiqueta sin cierre. Y por último colocamos un texto escplicativo en un párrafo (<P></P>), o sea, un bloque de texto con un espacio por delante y otro por detrás :
<P>Esto tan sencillo es una verdadera página web, aunque
le falta el contenido, pero todo llegará.</P>
Para empezar no está mal, por supuesto existen muchas más etiquetas con misiones diferentes a la de mostrar texto, pero eso lo iremos viendo poquito a poco.
Hoja de Estilo Cascada (CSS)
Las hojas de estilo intentan separar el contenido de un página de la forma de presentarlo en pantalla. Esto lo hacen personificando los cambios que las etiquetas de formato HTML realizan en nuestro texto. Por ejemplo, sabemos que usando <P> tendremos una párrafo nuevo con una separación del anterior determinada, etc.. Con las hojas de estilo también podremos decirle a un párrafo que todo su texto sea verde y que además va a tener un margen izquierdo de 30 pixels. Por ejemplo.
El primer navegador en soportar hojas de estilo fue el Explorer 3.0. Utiliza la llamada sintaxis en cascada. El Communicator acepta esa sintaxis e introduce una nueva basada en JavaScript. Sin embargo, como el estándar más comunmente aceptado de sintaxis de hojas de estilo es el de cascada, será este el único que veamos. Vamos a empezar con un ejemplo:
<STYLE TYPE="text/css">
P {color: green; margin-left: 30;}
</STYLE>
Vamos a detenernos en todos los elementos. Para empezar, la etiqueta HTML con la que deberemos englobar las hojas de estilo será <STYLE>, que sólo podrá estar situada en la cabecera de la página. Su parámetro TYPE indica la sintaxis que utilizaremos para definirlas. En el caso de las hojas en cascada deberá ser text/css.
Ahora examinemos la hoja de estilo propiamente dicha. Indicaremos primero la etiqueta que deseamos personalizar. Será <P>. Después, entre llaves, pondremos una lista de las cosas que queremos modificar. En nuestro caso son dos, el color (en el formato habitual) y el margen, que se define en pixels.
Hay que destacar que, aunque muchas veces los navegadores tengan una cierta manga ancha, la sintaxis CSS (Cascading Style Sheet) es sensible a la diferencia entre mayásculas y minúsculas. Conviene tener cuidado.
El HTML 4.0 permite declarar fuera de la página las hojas de estilo, llevando de este modo al extremos su filosofía de separar forma y contenido. Si colocamos nuestras hojas de estilo en un fichero llamado estilos.css (solo las hojas, no la etiqueta <STYLE>) no tendremos más que incluir la siguiente línea en la cabecera de nuestro documento HTML para incluirlas en nuestras páginas:
<LINK REL="stylesheet" HREF="estilos.css" TYPE="text/css">
Vamos a ver cómo quedaría un párrafo que siguiese la hoja de estilo anterior
Si la cosa va bien, este párrafo estará escrito en verde y con un margen izquierdo de 30 pixels. Precioso, ¿no? embargo, estoy convencido de que los más avispados se habrán dado cuenta de que les estoy ocultando algo. Por lo que he dicho hasta ahora la personalización de una etiqueta debería ser general y en esta página sólo este párrafo está modificado. No os preocupéis demasiado, ahora os cuento como se hace.
Los estilos CSS son una forma de separar el contenido de la página web de su formato. Es decir por un lado nos preocupamos de dar contenido a la página y por otro de definir como se deberá ver. Es una idea magnífica que nos permite, por ejemplo, cambiar el estilo de diseño de todo un sitio web sin necesidad de reeditar todas sus páginas: solo modificaríamos el archivo donde se desribe el formato de las páginas, como esquemas de color, imágenes de fondo, etc. Pero no todo es perfecto: los navegadores Explorer y Netscape no entienden los estilos exactamente igual por lo que es conveniente probar las cosas en ambos para asegurarnos que todo se verá como nosotros queremos.
arriba
Fuente: Espacio Latino Link:
http://creatuweb.espaciolatino.com
