9 - CREACIÓN DE PÁGINAS WEB
Las páginas Web son ficheros de texto que llevan unas marcas especiales utilizadas para crear efectos como por ejemplo cambiar el tamaño de la letra, insertar imagenes en el texto y crear hipertexto. Estas marcas son reconocidas por los navegadores y nos presentan las páginas de la forma que habitualmente vemos, aunando el texto con las imágenes, sonido y video.
El lenguaje utilizado es el HTML (Hypertext Markup Language) y los ficheros se pueden escribir con cualquier editor de textos como el bloc de notas de Windows o con cualquier procesador, siempre que se guarden los ficheros en formato texto. Las extensiones de los ficheros suelen ser .htm o .html
Podemos confeccionar la página en nuestro ordenador. Si queremos hacerla accesible a todo el mundo, deberemos enviarla a nuestro servidor WWW para que pueda ser vista desde Internet por cualquier usuario. Una buena idea seria incluirla en unos cuantos buscadores. Dependerá de la manera de trabajar de nuestro proveedor la forma de colocar la página en internet. En algunos casos deberemos enviarsela por correo electrónico encargandose el de situarla. En otros casos, nosotros mismos la enviaremos al servidor haciendo un FTP a nuestro servidor Web.
Vamos a ver una introducción a la realización de páginas web. Quedarán pendientes cosas como mapas imagen, frames, formularios y programación CGI que no veremos.
Las marcas de las que hablábamos se denominan TAGs. En algunos casos son simples, pero en la mayoría son dobles: de inicio y fin. Por ejemplo, si queremos que la frase "Bienvenidos a mi servidor Web" aparezca en negrilla, deberemos escribir:
<b>Bienvenido a mi servidor Web</b>
Otros tags son <center> </center> que centran en pantalla el texto que pongamos entre los dos tags. Tags simples son <br> que produce un salto de línea o <hr> que dibuja una línea.
Algunos tag llevan atributos, como por ejemplo:
<hr align=right> dibuja una línea alineada a la derecha.
Es importante no olvidarse de poner las marcas de fin de tag. Por ejemplo, si no ponemos </b>, toda la página ira en negrilla desde el <b>, pero en otros casos los resultados pueden ser impredecibles.
Se pueden anidar tags, teniendo en cuenta cerrar siempre primero el último tag abierto, por ejemplo:
<center><b>Texto centrado y en negrilla</b></center>
9.1 ESTRUCTURA DE UNA PÁGINA
Todas las páginas deben de comenzar por <html> y terminar por </html>. La página se puede subdividir en cabecera y cuerpo del documento. La cabecera se indica con <head></head> y el cuerpo con <body></body>. En la cabecera se guarda información de por ejemplo, el título: <title></title>. Por tanto la estructura genreal de la página sería:
<html>
<head>
<title>AQUI PONDREMOS EL TITULO DE LA PAGINA</title>
</head>
<body>
AQUI IRA EL RESTO DE LA PAGINA
</body>
</html>
9.1.1 BODY
El tag <body> puede llevar una serie de atributos que afectarán a todo el documento. Los mas usados son:
- bgcolor: indica el color del fondo del documento
- text: color del texto normal del documento
- link: color de los enlaces de hipertexto
- vlink: color de los enlaces de hipertexto una vez visitados
- background: indica el fichero de imagen que se vera como fondo de la página
Por ejemplo:
<body background="fondo.jpg">
o tambien:
<body bgcolor="#0000FF">
El color 0000FF es el color AZUL.
Los dos primeros numeros indican la cantidad de rojo, los dos segundos, de verde y los dos últimos, de azul en la escala de 00 a FF en hexadecimal. Otro ejemplo sería:
<body bgcolor="#FF0000" link="#C0C0C0" vlink="#0000FF">
que indicaría un fondo rojo donde el hipertexto esta en gris y una vez visitado en azul.
9.1.2 SEPARADORES Y OTROS TAGS
Cuando queremos separar párrafos dentro de una página, no basta con dar al retorno de carro en nuestro editor, luego el browser no lo reconoce. Es necesario insertar en el documento el tag <br> de salto de línea.
Otros separadores son <p> </p> para párrafos y <hr> que dibuja una línea.
<hr> tiene los siguientes agtributos:
width:
define la longitud de la línea en tanto por ciento, por defecto es 100 <hr width=75%>
align:
la alinea a la izquierda, derecha o la centra con los atributos: left, rigth y center <hr align=center>
size:
define la anchura de la línea, por defecto es 1 <hr size=4>
Otros tag que afectan a la situación de un párrafo en la página son:
<pre> </pre>
Los browser ignoran los saltos de línea y si hay mas de un espacio entre palabras, tabuladores .... Usaremos este tag cuando queramos que lo escrito aparezca tal cual en pantalla.
<blockquote> </blockquote>
Indenta el texto encerrado
<center> </center>
centra todo tipo de párrafos, figuras, tablas ...
9.1.3 TAGS QUE AFECTAN AL TAMAÑO, ESTILO Y TIPO DE LETRA
<hn> </hn>
siendo n un número entre 1 y 6. Cambia el tamaño, siendo el mayor para n=1.
<b> </b>
Es el atributo de negrilla.
<i> </i>
Es atributo de itálica.
<tt> </tt>
para que aparezca una letra tipo maquina de escribir (teletipo).
<font> </font>
para cambiar el color y tipo de letra. Los atributos son:
size=n siendo n un número entre 1 y 7. Por defecto es 3
size+n o size-n aumenta o disminuye el tamaño respecto al base
color="#0000FF" o cualquier otro color
face="tipo de letra"
9.1.4 CARACTERES ESPECIALES
Para acentuar las vocales y para escribir la letra "ñ" debemos hacerlo de la siguente forma:
á para acentuar la a
Á para acentuar la A
é para acentuar la e
...........
ñ para escribir la ñ
Entonces para escribir la palabra "cañamo" deberemos poner:
cáñamo
9.1.5 LISTAS
Para enumerar o exponer datos en forma de lista lo haremos con los tag <ul> </ul> o con <ol> </ol>. En el primer caso los distintos datos se colocaran con un punto inicial y en el segundo caso se numerará automaticamente. A cada elemento de la lista se le pondra por delante el tag <li>. Por ejemplo
<ol>
<li>Priemer elemento de la lista
<li>Segundo elemento de la lista
<li>tercer elemento de la lista
</ol>
9.1.6 TABLAS
Las tablas se definen usando los tags <table> </table>. Una tabla esta formada por filas <tr> </tr> y cada una de estas por celdas <td> </td>
Por ejemplo para crear una tabla básica formada pro cuatro celdas haremos:
<table>
<tr>
<td> Fila 1 columna 1 </td>
<td> Fila 1 columna 2 </td>
</tr>
<tr>
<td> Fila 2 columna 1 </td>
<td> Fila 2 columna 2 </td>
</tr>
</table>
Visto en un navegador sería:
Dentro de cada celda luego podremos poner texto, imagenes o enlaces.
Los principales atributos son los siguientes:
Para <table>
border=n
siendo n el grosor del borde
align="..."
Siendo los valores posibles: LEFT, CENTER, RIGHT
cellspacing=n
indica el espaciado entre celdas
cellpadding=n
indica el espaciado entre el borde de las celdas y el contenido
Para <tr>
align=" ..."
Alineacion horizontal de los conteidos de las celdas. Los valores posibles son: left, right y center.
valign="..."
Alineación vertical. Los valores son: top, midle y bottom.
Para <td>
align="..."
alineación horizontal de una celda
valign="..."
alineación vertical de una celda
ropwspan="..."
número de filas que abarca esa celda
colspan="...."
número de columnas que abarca esa celda
