1. Introducción a HTML
Qué es HTML
Editores
Etiquetas
2. Estructura de una página
Identificador del tipo de documento
Cabecera de la página
Título de la página
La etiqueta
Cuerpo del documento
Colores en hexadecimal
3. El texto
Caracteres especiales y espacios en blanco
Comentarios Saltos de línea
Texto preformateado
Separadores
Formatear el texto
Resaltado del texto
Párrafos
Marquesinas
4. Hiperenlaces
5. Imágenes
6. Tablas
7. Multimedia
Mi primera página
El código
Lo mejor para aprender a hacer algo es ... ¡hacerlo!. Así que vamos a la primera página
mipagina.htm
<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>
Si quieres ver como queda esto en el explorador solo tienes que pulsar aquí, y tranquilo que se abrirá en otra ventana
La 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.
Suscribirse a:
Entradas (Atom)