Crear páginas Web con el bloc de notas: HTML
Todas las páginas Web están escritas con un sencillo lenguaje de programación, el lenguaje HTML y son un archivo de tipo .html o .htm. Estos archivos se pueden enlazar para saltar de uno a otro con los enlaces o links. Después de visulizar con un navegador como Microsoft Internet Explorer o Netscape Navigator.
Por comodidad utilizamos diferentes programas para crear páginas web de forma visual, como FrontPage Express, FrontPage o DreamWeaver.
Vamos a crear una sencilla página web directamente en HTML, utilizando cualquier editor de texto que no introduzca ningún código especial de formato, como por ejemplo el Bloc de Notas de Windows.
Antes de comenzar a crear las páginas debes pensar en la organización de los archivos, recuerda que las imágenes, sonidos, etc., son archivos independientes. Es una buena idea crear una estructura de directorios para organizarlos.
Lenguaje HTML
Se caracteriza por el uso de etiquetas, una de inicio y otra de fin, de forma que lo que aparece en medio se ve afectado por el significado de la etiqueta. La etiqueta suele ser una palabra en inglés, entre < > cuando aparece y entre </ > al final.
Por ejemplo:
<CENTER>Mi primera Página Web chispas</CENTER>
centra en la pantalla el texto entre las etiquetas.
Algunas etiquetas no tienen etiqueta final, como la de insertar una línea, <HR>, o salto de línea <BR>, párrafo <P>, etc.
Estructura de una página Web
Todas las páginas Web tienen la siguiente estructura:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Insertar texto
Si escribimos un texto, se mostrará con las características por defecto del navegador.
Para modificar alguna de las propiedades debemos usar etiquetas específicas:
<H1> </H1>: tamaño máximo del navegador. El 2, 3, 4 y 5 los siguientes tamaños.
<P>: salto de párrafo.
<BR>: salto de línea.
<HR>: dibuja en la pantalla una línea de un extremo al otro.
<BLOCKQUOTE>: justifica el texto.
Etc....
Insertar imágenes
La etiqueta para insertar una imagen es <IMG>, el resto son parámetros:
<IMG SRC = “imagen.jpg” ALT = “Texto al colocar el ratón sobre la imagen” ALIGN = “Top|Bottom|Left|Right” BORDER = “2” >
Insertar enlaces
Un enlace nos permite “saltar” de una página a otra, ya sea dentro de nuestro sitio web o a una página remota. La etiqueta es:
<A HREF = “otra_pag.html”>Texto del hiperenlace</A>
En este caso la página está en la misma carpeta que la actual. Otras posibilidades son:
“..\pag_val\altra_p.html”: la página está en un directorio “hermano” del actual.
“http://www.elpais.es/index.html”: la página está en un servidor de páginas web de Internet.
“mailto:usuario@ordenador.es”: activa el programa de correo y escribe el campo dirección.
En lugar de un texto, también puede funcionar como hiperenlace una imagen:
<A HREF = “otra_pag.html”><IMG SRC = foto.jpg></A>
Insertar tablas
Las tablas nos permiten organizar los contenidos de la página web. Se crean así:
<TABLE BORDER COLS = “2” WIDTH = “80%”>
<TR ALIGN = “CENTER” VALIGN = “CENTER”>
<TD ALIGN = “LEFT” WIDTH = “ 30%”> </TD>
<TD WIDTH = “ 70%”> </TD>
</TR>
</TABLE>
