arquer.netarquer en la red
arquer.netEscribir páginas web puede ser una tarea sencilla o convertirse en una auténtica pesadilla para el autor y para los visitantes.
En esta sección trataremos de algunas cuestiones elementales que sirven para iniciarse en la edición de páginas web de forma sencilla y clara.
Una página web es un archivo de texto, se puede preparar con un editor sencillo como el bloc de notas de Windows. De hecho un editor de texto simple es probablemente la única herramienta imprescindible para el autor de páginas Web.
Vamos a preparar paso a paso un 'esqueleto' que nos sirva para todas nuestras páginas, una plantilla.
El contenido de un documento html se escribe entre etiquetas; la sintaxis de las etiquetas es sencilla, se abre con el nombre escrito entre los signos 'menor que' y 'mayor que' y se cierra exactamente igual pero añadiendo el signo de división al principio del nombre de la etiqueta con la que cerramos.
Para empezar vamos a abrir y cerrar el documento html; abrimos un documento de texto nuevo con nuestro 'bloc de notas' y escribimos:
<html> </html>
Ahora lo podemos guardar con un nombre; por ejemplo 'index.html' y abrirlo con nuestro navegador favorito; como que no tiene nada no veremos nada, pero según avancemos podremos ir viendo el resultado al actualizar la página.
Dentro de la página debe haber dos secciones, la cabecera y el cuerpo; la cabecera la vamos a encerrar entre unas etiquetas apropiadas que llamaremos HEAD y el cuerpo en otras que llamaremos BODY; nuestro esqueleto va a quedar así:
<html> <head> </head> <body> </body> </html>
Podemos actualizar el navegador para comprobar que no ha pasado nada, en realidad todavía estamos con la parte elemental de la estructura.
Vamos a ponerle a la página un título y lo pondremos en la cabecera de la página; el título sirve entre otras cosas para 'ilustrar' al visitante, pero muchos motores de búsqueda, robots, índices, etc. lo utilizan cuando almacenan nuestras páginas así que vamos a ponerle un título que tenga relación con el contenido, obviamente el título lo pondremos entre dos etiquetas TITLE:
<html> <head> <title>Aprendiendo HTML</title> </head> <body> </body> </html>
Al actualizar el navegador ya vemos un pequeño cambio; el título de nuestra página está en la barra de título de la ventana.
Ahora vamos a poner un poco de contenido en el cuerpo de la página, un título de nivel 1 (H1) y un párrafo (P), abrimos y cerramos los contenedores exactamente igual:
<html> <head> <title>Aprendiendo HTML</title> </head> <body> <h1>Aprendiendo HTML</h1> <p>Esta plantilla servira como referencia para mis paginas.</p> </body> </html>
Podemos hacer unas pruebas con los niveles de los títulos para ver como queda la clasificación el contenido.
<html>
<head>
<title>Aprendiendo HTML</title>
</head>
<body>
<h1>Aprendiendo HTML</h1>
<p>Esta plantilla servira como referencia para mis paginas.</p>
<h2>Primeros pasos</h2>
<p>Algunas cosas a tener en cuenta al comenzar.</p>
<h3>Referencias esenciales</h3>
<p>Seguro que ya hay muchas cosas escritas que pueden servirme.</p>
<h3>Los enlaces, lo mas esencial</h3>
<p>HTML sirve para enlazar paginas, aprendamos como.</p>
<h2>Los estandares</h2>
<p>La sintaxis de HTML esta consensuada en estandares.</p>
</body>
</html>
Las siglas HTML significan precisamente 'lenguaje de marcas de hipertexto', en palabras sencillas esto quiere decir que es una forma de escribir que permite poner enlaces a otros documentos.
Los enlaces se ponen encerrando entre determinadas etiquetas un texto para que al pulsarlo saltemos al documento al que nos referimos.
Las etiquetas son anclas, es decir abrimos con <a> y cerramos con </a>.
Y el documento al que nos enlazamos se incluye en la primera etiqueta como valor del parámetro 'HREF', esta es la sintaxis de un enlace que nos manda a esta misma página:
<a href="http://www.arquer.net/web001.html"> Enlace a la primera leccion </a>
El enlace que vemos se llama absoluto porque contiene la direccion completa de la página. Es el más directo y efectivo y el que menos problemas nos crea, pero es un poco largo.
Si queremos enlazar a una página de nuestro mismo sitio web basta con poner una ruta relativa como esta:
<a href="web001.html"> Enlace a la primera leccion </a>
Esta última forma de hacer enlaces tiene el inconveniente de que si cambiamos la página a otra carpeta tendremos que cambiar la ruta relativa del enlace, en cambio es muy fácil cambiarla de servidor y también es posible visitar los enlaces de nuestras páginas localmente sin servidor web.
Los enlaces no son parte de la estructura del documento sino del contenido; se pueden poner en cualquier sitio, dentro de los párrafos, de las listas e incluso de los títulos
En las primeras versiones de HTML no se consideraba mas que la funcionalidad elemental, posteriormente se añadieron elementos decorativos (colores, tipos de letra, etc.) y finalmente, en las últimas versiones, se recomienda encarecidamente separar el contenido de la presentación.
Los adornos se escriben en hojas de estilo. Esto permite preparar un sitio con un diseño homogeneo y consistente.
En la próxima entrega escribiremos una hoja de estilo completa para nuestra página de ejercicios y cambiaremos radicalmente su aspecto pero ahora vamos a hacer una pequeña introducción.
Los estilos podemos escribirlos en un archivo independiente, de esta forma estará disponible para todas las páginas de nuestro sitio, pero también podemos ponerlo dentro de la página.
Incluso tenemos la opción de escribir algunas declaraciones de estilo para toda la página o tan solo para una parte. Ahora vamos a hacer las dos cosas.
Quiero que toda la página tenga un fondo de color azul claro y la letra negra, pero quiero que el título 'Los estandares' sea de color rojo.
Primero pondré el estilo que se aplica a toda la pagina en una sección de estilo que escribo en la cabecera (HEAD):
<html>
<head>
<title>Aprendiendo HTML</title>
<style type="text/css">
body {background-color:#CCF; color:#000;}
</style>
</head>
<body>
<h1>Aprendiendo HTML</h1>
<p>Esta plantilla servira como referencia para mis paginas.</p>
...
Hemos escrito una etiqueta de apertura STYLE explicando que lo que sigue es texto y una etiqueta de cierre; a continuación escribimos el nombre de un elemento, en este caso el cuerpo del documento, y a continuación, entre corchetes y separados por comas, los estilos que se aplican. En este caso solo especificamos el color de fondo y el color de primer plano.
Para asegurarnos la accesibilidad de nuestra página cuidaremos de poner siempre dos colores (de fondo y primer plano) que sean lo suficientemente distintos para no provocar dificultades de lectura.
Ahora vamos a añadir estilo sólo a un elemento; lo haremos con un estilo en línea.
...
<h2 style="color:#F00;background-color:#FFF;">Los estandares</h2>
<p>La sintaxis de HTML esta consensuada en estandares.</p>
...
Es el momento de explicar que los colores se definen con sus valores RGB (Red, Green, Blue o en castizo: RVA - Rojo, Verde Azul) y que podemos hacerlo con valores entre 0 y 255 pero escritos en hexadecimal (desde 000000 hasta FFFFFF).
¿Complica esto las cosas? bueno, un poco sí pero buscaremos la forma de hacerlo muy sencillo. Para empezar se puede escribir el color abreviado con solo tres digitos (con esto nos limitamos a 4096 colores).
Estos son los numeros hexadecimales: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
y luego 10, 11, ... 1E, 1F, 20, 21, ... hasta FC, FD, FE y FF.
Como que no todo el mundo utiliza el mismo navegador ni el mismo sistema operativo, algunos colores no se ven en todos los equipos.
Hay un conjunto limitado de colores que se llaman 'paleta web', 'paleta segura' o cosas así que sólo utiliza los colores comunes para todos los sistemas.
La gran ventaja de estos colores es que se componen con cualquier combinación de las cifras 0, 3, 6, 9, C y F. Esto nos deja solo 216 colores.
Para una explicación más detallada sobre colores se ofrecen algunos enlaces:
Web de Carlos Benavidez
Colores HTML en Wikipedia (inglés)
Colores HTML en WikiPedia (español)
En esta primera lección hemos aprendido que los documentos HTML son simples documentos de texto, que tienen una estructura bastante sencilla y que sus elementos por lo general se encierran entre etiquetas.
Además hemos aprendido a poner enlaces en los documentos HTML y que pueden ser absolutos o relativos.
Para terminar vimos dos formas de añadir estilos dentro del documento y tuvimos la oportunidad de introducirnos superficialmente en el mundo del color.
Si hemos hecho los deberes tendremos una página de prácticas parecida a esta algo primitiva pero estupenda para ser un primer paso.
Si te quedan fuerzas esta es la segunda parte de este sencillo tutorial
Busca en Google evitando contenidos inadecuados desde esta página
La búsqueda segura en Google te ayuda a encontrar paginas con contenidos adecuados para toda la familia