Download Barcelona Activa Cibernàrium

Barcelona Activa
Cibernàrium
Crea tu website
1. Introducción
En el lenguaje coloquial se utiliza muy a menudo la expresión “me he
conectado a una página web”. Pero en realidad eso es inexacto. No nos
conectamos a una página web sino a un website o sitio web.
Una página web es un fichero informático (generalmente en formato .html)
que contiene información y que podemos ver con un navegador: es un
archivo individual. Un website o sitio web es un conjunto de páginas web
relacionadas entre ellas según una estructura determinada. Las relaciones
entre las páginas web se llaman enlaces.
A través de los enlaces los usuarios podemos saltar de una página web a
otra: es lo que llamamos navegar
1. Cómo voy a realizar mi website
La mayoría de páginas web están construidas con un lenguaje de
programación llamado HTML (Hypertext Markup Language-Lenguaje de
marcas de Hipertexto). Más que un lenguaje de programación en sentido
estricto consiste en una serie de códigos llamados etiquetas (tags) que
indican al navegador las modificaciones de estilo, del texto o del contenido
que está escrito entre dos de estas etiquetas HTML.
Para hacer una página web profesional o bien hemos de programar con el
código HTML o bien utilizar programas de edición web como Dreamweaver
que nos facilita mucho la labor, por su interfaz intuitiva, más parecido a
editores de textos o a programas de maquetación. Dreamweaver es un
CI-011 v.01 Dossier / 1
Barcelona Activa
Cibernàrium
gestor de lenguaje HTML: convierte automáticamente lo que hacemos en
lenguaje HTML evitándonos tener que escribir el código.
Otros programas editores de HTML son: Frontpage, Composer, Golive o
aplicaciones gratuitas en software libre como Nvu 1.0 o Amaya en su
versión 9.4.
Trabajar con el código HTML puede resultar un poco complejo al principio
por la cantidad de etiquetas que hay, por los atributos que puede tener
cada etiqueta y por los valores que pueden acompañar a cada atributo. En
cualquier caso hay que conocer los elementos básicos del lenguaje porque
nos permitirán trabajar mejor aunque utilicemos algún programa editor.
Además conociendo el HTML podemos ver el código fuente de los sitios web
que visitemos y entender su estructura.
Hay otros lenguajes que se pueden utilizar también para construir una web
o partes de esta:

XHTML (Extensible HyperText Markup Language – Lenguaje Extensible
de Marcado de Hipertexto). Es el lenguaje avanzado pensado para
sustituir en un futuro al HTML como estándar para las páginas web.

Javascript. HTML sirve para dar formato al contenido de una página web
y para crear enlaces pero no permite realizar acciones dinámicas ni
cálculos matemáticos. Javascript (desarrollado por Sun Microsistems) es
un
lenguaje
que
hace
posible
utilizar
algunos
elementos
de
programación de algoritmos tradicionales de la informática. Las acciones
programadas en Javascript se introducen dentro de los documentos
HTML y el navegador las lee directamente (por ejemplo incluir en la web
una calculadora, un simulador de hipotecas, etc).

VBScript. Es un lenguaje similar a Javascript desarrollado por Microsoft.

CSS (Cascade Style Sheets – Hojas de Estilo en Cascada): se utiliza para
definir estilos en una página web o en un conjunto de páginas. Así si
definimos unas CSS en el inicio de nuestro proyecto web (tipo de letra,
CI-011 v.01 Dossier / 2
Barcelona Activa
Cibernàrium
tamaño, interlineados, márgenes, colores, etc) no será necesario
programar estas características en cada una de las páginas. Las CSS
también se pueden exportar en un website a otro si queremos darles un
aspecto gráfico homogéneo.

DHTML (Dynamic HTML- HTML dinámico). Designa el conjunto de
técnicas que permiten crear sitios web interactivos utilizando una
combinación de HTML estático, lenguajes como Javascript y hojas de
estilo en cascada (CSS).

Flash. Es un programa de animación gráfica desarrollado por las
empresas Macromedia. Es posible diseñar sitios web enteros con Flash
pero es una práctica que está cayendo en desuso por los problemas que
puede dar a la navegación. Se utiliza Flash fundamentalmente para
incluir
en
la
web
elementos
ornamentales,
anuncios,
demos,
simuladores, etc… animados.
En esta cápsula veremos solamente las características principales de HTML
estático, la base para construir un sitio web sencillo.
3. Webs estáticas vs Webs dinámicas
Las páginas web pueden ser estáticas o dinámicas. Llamamos estáticas a
aquellas que simplemente están alojadas en el servidor y no cambian su
contenido a no ser que las actualicemos nosotros de manera manual. Así
eran al principio la mayoría de páginas de Internet
Son
páginas
web
dinámicas
las
que
mediante
unas
tecnologías
determinadas modifican de manera automática su contenido en el servidor
para dar respuesta a un requerimiento del visitante. Son ejemplos de
páginas web dinámicas el sitio web de una agencia de noticias (que va
modificando automáticamente las informaciones según le llegan, sin
intervención humana) o la de los buscadores de Internet que cuando les
hacemos una petición nos devuelven una página generada especialmente
para responder a la búsqueda que estamos realizando.
CI-011 v.01 Dossier / 3
Barcelona Activa
Cibernàrium
A veces se confunde dinamismo con animación, música, sonido o videos.
Esto es dinamismo sino incorporación de multimedia. Pero los elementos ya
están incluidos dentro de la web en su diseño original. Los elementos
dinámicos se generan especialmente a petición del usuario de le web.
Una web estática puede contener audio, animaciones, vídeo. Además puede
incorporar
programación
en
Javascript
o
VBScript
para
abrir
pop
ups(ventanas emergentes) o elementos animados que avisen de algún error
que estemos cometiendo, por ejemplo. El navegador reconocerá todos estos
elementos que están incorporados al código HTML y los ejecutará: es decir
que se ejecutarán dentro de nuestro propio ordenador.
Las web dinámicas por el contrario no se ejecutarán en nuestro ordenador
sino en el servidor y serán servidas al usuario con un contenido u otro
según lo que nos pidan. Para hacer posible esto la página web incorpora un
código de servidor que contiene las instrucciones necesarias que el
servidor interpreta para ejecutar en cada momento una acción u otra. El
código de servidor forma parte de la página web pero sólo se ejecuta en el
momento en que se solicita esta página. El código de servidor no es visible
en la página que visualiza el usuario: el internauta sólo ve el HTML
resultante de las operaciones que ha efectuado este código.
Hay diversos estándares para programar el código de servidor, dependiendo
del tipo de servidor con el que trabajemos. Si nuestro website está alojado
en un servidor que funciona con programas de Microsoft la tecnología de
servidor para páginas dinámicas se llama ASP (Active Server Pages). Si
tenemos el sitio web en un servidor basado en Java la tecnología
equivalente
es
la
JSP
(Java
Server
Pages).
En
cualquier
caso,
independientemente del código de servidor que utilicemos, el resultado para
el usuario será siempre un documento HTML.
Las web dinámicas nos permiten incorporar aplicaciones como buscadores,
bases de datos, catálogos, “carritos de la compra”, etc.
CI-011 v.01 Dossier / 4
Barcelona Activa
Cibernàrium
4. Lenguaje HTML
Vamos a analizar a partir de aquí algunas de las etiquetas más importantes
del HTML, no con la finalidad de tener un dominio exhaustivo sino para
poder reconocerlas en los códigos fuente de las páginas web o optimizar el
trabajo con programas gestores de este lenguaje (como Dreamweaver o
Frontpage).
Como ya hemos mencionado el HiperText Markup Language (lenguaje de
marcas de hipertexto) funciona a partir de una serie de marcas, también
conocidas como etiquetas o tags que se enmarcan entre los signos < >
que suelen ir en parejas de apertura y cierre. Una etiqueta de cierre se
diferencia de una de apertura en que la de cierre siempre lleva el nombre
precedido de la barra “/” por ejemplo <body> sería una etiqueta de
apertura y </body> sería una etiqueta de cierre.
La diferencia entre ambas es que la primera (la de apertura) indica que
empezamos a trabajar con un elemento y la segunda, la de cierre, indica
que dejamos de trabajar con ese elemento. Existen algunas excepciones en
algunas etiquetas que no se cierran que mencionaremos a lo largo de este
dossier.
4.1. Posibilidades del HTML

Dar forma al texto que hay en pantalla. Es decir tipo de letra, tamaño,
color, color de fondo, alineación de textos, marcos, subrayados,
negritas, cursivas, etc.

Insertar elementos multimedia. Audio, vídeo, imágenes, animaciones.

Posibilidad de realizar enlaces o links a otras páginas. Es decir unir
páginas para crear el sitio web.
CI-011 v.01 Dossier / 5
Barcelona Activa
Cibernàrium
4.2. Partes de una página web
Las
páginas
web
tienen
dos
partes
diferenciadas,
primero
está
el
encabezado (head) y después el cuerpo (body)
4.2.1. <head> el encabezado
En el encabezado <head> se incluye el título de la página que aparecerá en
la barra azul de la ventana de Windows y toda aquella información que el
usuario no ve en pantalla, como la descripción de la página o las palabras
clave (keywords). Estos dos elementos son fundamentales no a la hora del
diseño pero si en el momento de publicar el sitio en Internet y atraer
visitas.
El cuerpo de las páginas web <body> es aquello que el visitante puede ver
en pantalla. Por lo tanto, todo el contenido que introduzcamos después de
esta se verá en el navegador
A las etiquetas suelen acompañarles atributos y a los atributos valores. Los
atributos son indicaciones de alguna acción que queremos realizar con la
etiqueta y los valores son la especificación de la acción a realizar. Iremos
viendo sucesivos ejemplos de estos temas a lo largo de este dossier.
NOTA: los valores los pondremos siempre entre comillas para que
cualquier ordenador, navegador, sistema operativo los reconozca
4.2.2. <body>: el cuerpo de la página
El fondo de la página por defecto es blanco, pero si queremos añadirle color
pondremos el atributo “bgcolor” acompañado del valor que queramos
establecer es decir del color de fondo que le queramos poner. Quedará una
etiqueta como la siguiente:
<body bgcolor=”red”>
CI-011 v.01 Dossier / 6
Barcelona Activa
Cibernàrium
Con esta etiqueta estamos cambiando el color de fondo de la web a rojo.
Podemos expresar los colores con su nombre en inglés o mediante las
combinaciones hexadecimales RGB.
4.2.3. RGB
El RGB corresponde a las siglas de Red, Green y Blue es decir rojo, verde y
azul. El RGB sirve para crear matices de colores, es decir para darle más o
menos intensidad a un color. Si sólo ponemos su nombre en inglés
tendríamos una variante del color a la máxima intensidad posible, pero no
colores matizados. Para definir un color mediante este sistema utilizaremos
6 dígitos de la siguiente escala:
0 1 2 3 4 5 6 7 8 9 A B C D E F.
El 0 equivaldría a la ausencia de color y la F a la saturación de color.
Crearemos un código hexadecimal, es decir de 6 dígitos de los cuales dos
corresponderán a cada color. Es decir, dos para el rojo (Red), dos para el
verde (Green) y dos para el azul (Blue). Es indiferente la combinación de
números con números, números y letras o letras solamente. Siguiendo con
el ejemplo anterior si escribimos:
<body bgcolor=”#ff0000”>
lo que estaría haciendo es definir el rojo en su máxima intensidad, pues hay
ausencia de verde y de azul.
Así pues un código “#ffffff” equivale al blanco, pues el color blanco es la
máxima saturación de color posible y un código “#000000” equivale al
negro que es la ausencia de color total.
NOTA: ponemos el signo “#” delante del código de color para que
cualquier ordenador, navegador, sistema operativo lo reconozca.
CI-011 v.01 Dossier / 7
Barcelona Activa
Cibernàrium
NOTA: cuando abrimos cualquier etiqueta que contenga atributos
como por ejemplo <body bgcolor=”#ff0000”> al cerrarla no hemos
de cerrarla con sus atributos sino que basta con cerrarla con el
nombre de etiqueta es decir poniendo </body>. Esto sirve para
cualquier etiqueta que tenga atributos y valores.
4.3. <font> trabajando con las fuentes
Para trabajar con los tipos de letra, el tamaño y el color partiremos de la
etiqueta <font> acompañada de los atributos:
Face para indicar qué tipo de letra queremos. Es decir el nombre de la
fuente que queremos utilizar en la página que estamos creando. Así para
utilizar la fuente Verdana escribiríamos:
<font face=”verdana”>. Es importante poner el nombre exacto de la
fuente o no nos lo reconocerá como tal
Size para indicarle el tamaño. El tamaño de la letra lo expresaríamos en
valores que van del 1 al 7 ”, siendo el 1 el más pequeño y el 7 el más
grande. Por ejemplo:
<font size=”5”>
Color para el color de fuente, expresándolo con su respectivo nombre en
inglés o bien con la combinación RGB. Por ejemplo:
<font color=”red”> o <font color=”#ff0000”>
No hemos de abrir una etiqueta <font> para cada atributo sino que con una
sola que incluya los tres atributos es suficiente, así con los ejemplos
anteriores lo adecuado sería escribir:
<font color=”#ff0000 size=”5” face=”verdana”>
CI-011 v.01 Dossier / 8
Barcelona Activa
Cibernàrium
siendo indiferente el orden en que pongamos los atributos.
4.4. <br> y/o <p> saltos de línea
Para realizar una salto de línea, o sea, el equivalente a “ENTER” utilizamos
la etiqueta <br>. Una etiqueta hace un salto de línea. Podemos poner
tantas como saltos de línea queramos obtener y <P> para un salto más
grande de aproximadamente un espacio y medio o cambio de párrafo. Sólo
podemos indicar una <P>, pues en caso de poner dos o más seguidas, no
obtendremos más que el primer salto de párrafo. En este caso ninguna de
las dos etiquetas tiene un equivalente de cierre
4.5. Otros elementos para la edición de textos
Para centrar un texto o un elemento utilizamos el tag <center>
</center>
Para poner un texto o una palabra en negrita utilizamos <b> </b>, en
cursiva <i> </i> y en subrayado <u> </u>
Para alinear un texto con respecto a los márgenes utilizaremos:
<p align=”left”> para alinear el texto a la izquierda
<p align=”right”> para alinear el texto a la derecha y
<p align=”justify”> para que el texto quede alineado justificado, aunque
con este formato lo que puede pasar es que los espacios entre las palabras
a
veces
se
hagan
más
grandes
o
mas
pequeños,
creando
cierta
irregularidad que no a todas las personas les gusta.
4.6. Trabajando con imágenes
A la hora de trabajar con imágenes lo correcto sería trabajar con formatos
de compresión digital como son el “Gif” (256 colores) y el “Jpg” (millones de
colores).
CI-011 v.01 Dossier / 9
Barcelona Activa
Cibernàrium
Estos formatos son los adecuados pues pesan muy poco y evitarán que la
descarga se vuelva demasiado lenta, como lo pasaría con otros formatos de
imagen como el “bmp” o el “psd” que no son de compresión digital. La
resolución de GIF o JPG es más que suficiente para trabajar y publicar en la
red.
Por otro lado también deberíamos tener en cuenta que lo más adecuado
antes de publicar las imágenes en la web es trabajarlas con programas
específicos para el tratamiento digital de imágenes como “Photoshop”,
“Corel” o “Irfanview” o “GIMP”. Estos dos últimos son de carácter gratuito.
Una vez se han preparado y definido las imágenes se insertan en la web con
la etiqueta: <img src=“flor.gif”> teniendo en cuenta que donde pone
“flor.gif” iría el nombre de la imagen o la ruta en caso de estar en alguna
carpeta. Si tuviéramos la imagen en un directorio diferente a donde
estuviera la página deberíamos indicárselo por ejemplo de esta forma
<img src=“imagenes\flor.gif”> escribiendo donde dice “imágenes” el
nombre real de la carpeta que las contiene.
La etiqueta de imagen es de las que no se cierran.
A las imágenes les podríamos añadir Width (anchura), Height (altura), para
modificar su apariencia, aunque como hemos dicho antes lo más lógico sería
definir desde el programa de tratamiento de imágenes todos los aspectos
de resolución, definición, altura, anchura…
La imagen suele definirse en función de la definición de pantalla, es decir en
píxeles. Hemos de tener cuidado al definir la resolución de pantalla, porque
no todo el mundo tienen o trabaja con la misma. Una resolución más alta da
la sensación de que todo se ve más pequeño en pantalla. Generalmente la
mayoría de
páginas suelen estar optimizadas para trabajar a 800x600 o
superior. Esto es algo que tenemos que tener en cuenta a la hora de colocar
elementos como las imágenes dentro de la página web.
CI-011 v.01 Dossier / 10
Barcelona Activa
Cibernàrium
Las imágenes por defecto se alinean con el texto por la parte inferior de
manera que se pueden comer espacio. Si queremos que el texto envuelva a
la imagen hemos de colocar los atributos de alineación left o right en
función de la alineación (derecha o la izquierda) que queramos para la
imagen. <img src="mena.jpg align="left"> por ejemplo.
Ejemplo de imagen sin el atributo de alineación en la etiqueta:
Ejemplo de imagen con el atributo de alineación a la izquierda:
CI-011 v.01 Dossier / 11
Barcelona Activa
Cibernàrium
4.7. <a> Links o enlaces
Podemos realizar enlaces a páginas propias dentro de un directorio o
carpeta o a páginas ya existentes y colgadas en Internet. En ambos casos el
elemento o las palabras que están entre la etiqueta de apertura <a> y la de
cierre </a> serán lo que actúe de enlace
<a href=“paginanueva.html”>palabra</a>en este caso entenderíamos
como “paginanueva.html” el nombre del archivo con el que queremos
enlazar la página en la que estamos y como “palabra” el elemento o palabra
que queremos que actúe de enlace.
<a href=“http://www.yahoo.es”>palabra</a> en este caso “palabra”
actuaría de enlace al sitio web de Yahoo.
Una imagen también podría hacer de enlace otras páginas propias o
externas. Bastaría con poner entre la etiqueta de apertura y de cierre la
etiqueta de imagen como por ejemplo:
<a href=“paginanueva.html”><img src="mena.jpg”> </a>
Los elementos marcados como enlaces (link) por defecto adquieren un color
azul, mientras que aquellos enlaces ya visitados (vlink) adquieren un color
fucsia. Si por cuestiones de diseño fuera necesario que esto se cambiara, en
la etiqueta <body> añadiremos nuevos atributos y valores para especificar
que colores queremos que tengan los elementos que actúan de enlace. Por
ejemplo: <body link=”#009900” vlink=”#445599”>
Los enlaces por defecto se abren en la misma ventana activa en la que
estamos situados. Si queremos que se abran en ventanas nuevas (algo
adecuado sobre todo cuando enlazamos a sitios web externos), añadiremos
target=”blank” a la etiqueta <a href…>.
Por ejemplo: <a href=http://www.yahoo.es target=”blank”>
CI-011 v.01 Dossier / 12
Barcelona Activa
Cibernàrium
4.8. <table> Usando las tablas para la organización del contenido
Una manera de presentar los datos dentro de una página y facilitar la
estructuración del contenido sería en forma de tablas que podrían ser
visibles o no en función de añadir el atributo border al tag <table>.
Por ejemplo:<table border=“2”> </table> daría una tabla con borde
visible.
Hemos de tener en cuenta que las tablas se construyen por filas y después
colocando las celdas que queramos dentro de cada fila.
Las tablas pueden tener anchura y altura con los atributos Width (anchura),
Height (altura) acompañados de un valor en píxeles. Si no ponemos nada,
siempre podemos definir la anchura desde las celdas con los mismos
atributos. En caso de no poner nada en las celdas la tabla simplemente se
adaptaría al tamaño de aquellos elementos que insertáramos dentro o al
texto que fuéramos colocando dentro de las celdas.
Las tablas también pueden tener un color de fondo colocando en su etiqueta
el atributo “bgcolor” y el color que queramos. Si no lo hacemos, la tabla
será del mismo color de fondo de la página. También podemos añadir un
color de fondo diferente en cada celda
Para construir una tabla hemos de hacer lo siguiente:
<table> Indica que empezamos a crearla
<tr>indica una fila, es decir indica que empezamos la construcción
de la primera fila: las filas no tienen ningún tipo de formato
<td> empieza la celda</td>fin de la celda
<td> empieza la celda</td>fin de la celda
</tr> final de la primera fila
CI-011 v.01 Dossier / 13
Barcelona Activa
Cibernàrium
<tr>empezamos la segunda fila
<td> una celda 2 </td> fin de la celda
<td> otra celda 2 </td> fin de la celda
</tr> final de la segunda fila
</table>fin de la tabla
4.9. Otras etiquetas de interés
<!--............--> esta etiqueta es conocida como la etiqueta de comentario.
Es una etiqueta más visual que no aporta nada más allá de ser una guía
para leer el código fuente y ayudar en caso de que las páginas sean o se
hagan muy complejas.
Se pueden colocar en cualquier lugar del documento y aunque se coloquen
en el BODY serán ignoradas de manera que no serán mostradas en pantalla.
<H1>...</H1> - <H6>...<H6>
Estas etiquetas son las de cabecera y se utilizan para destacar un texto.
Se caracterizan porque la etiqueta tiene una H acompañada de un rango
que va del 1 al 6, siendo 1 el formato de cabecera más grande y 6 el más
pequeño.
Se recomienda utilizar solo entre el 1 y el 3 pues los otros pueden resultar
algo ilegibles.
<SMALL>...</SMALL> pequeño
<BIG>...</BIG> grande
<SUP>…</SUP> superíndice <SUB>…</SUB> subíndice
<STRIKE>…</STRIKE> tachado
<UL>......</UL> es la etiqueta que introduce una lista no numerada, o
sea de boliches
<OL>.....</OL> es la etiqueta que introduce una lista numerada
CI-011 v.01 Dossier / 14
Barcelona Activa
Cibernàrium
<LI> introduce cada nuevo elemento de una lista
<DL>.....</DL> es la etiqueta que introduce una lista de definición
<DT>.....</DT> es el término a definir
<DD>....</DD> introduce la definición del término a definir
Imaginemos que queremos empezar una lista numerada pero en lugar de
empezar por el número 1 quisiéramos empezar a partir del 30, 31, 32... y
así sucesivamente.
Al primer valor de lista le añadiríamos el atributo Value y el valor 30:
<OL>
<LI value=”30”> este sería el valor 30
<LI>este sería el 31
<LI>y así sucesivamente
</OL>
CI-011 v.01 Dossier / 15
Barcelona Activa
Cibernàrium
Algo que también podemos hacer es definir mediante HTML un elemento
que actúe como enlace al programa de correo, de manera que al hacer clic
sobre él, se abra el gestor de correo predeterminado y de esta forma la
gente pueda escribirnos un correo electrónico partiendo desde nuestra
propia página web.
Utilizaremos el atributo mailto: acompañando a la etiqueta ancla. Por
ejemplo:
Para contactar con nosotros
<A href=mailto:[email protected]>escríbeme</A>.
CI-011 v.01 Dossier / 16
Barcelona Activa
Cibernàrium
GUíA DE RECURSOS
“Crea tu website”
Fundamental
W3C: World Wide Web Consortium: Oficina española.
http://www.w3c.es/
Sitio web del consorcio de la World Wide Web en España. Este consorcio se
encarga de la creación de los estándares del HTML entre otros lenguajes. En
la web encontraréis las novedades y la información más actualizada.
HTML: Cursos, manuales, tutoriales
Cursos y manuales gratuitos sobre el diseño y planificación de páginas web.
Navegando por la Red encontraréis muchos más.
SOLOCURSOS
http://www.solocursos.net/guia_para_el_diseño_de_paginas_en_internetslccurso604825.htm
http://www.solocursos.net/manual_de_html_y_trucos_de_diseño_webslccurso1029310.htm
http://www.solocursos.net/construyendo_paginas_webslccurso1026421.htm
Aulaclic
http://www.aulaclic.es/html/f_html.htm
Webmaestro
http://www.ldc.usb.ve/~vtheok/webmaestro/
LOGRATIS
http://www.logratis.info/manuales.asp
EVIDALIA
http://www.evidalia.com/tutoriales/subcategoria4.html
Aplicaciones de software libre
Programas para la creación de páginas web de Software libre
AMAYA
CI-011 v.01 Dossier / 17
Barcelona Activa
Cibernàrium
http://www.w3.org/Amaya/
Quanta
http://quanta.kdewebdev.org/
NVU
http://nvu.com/
Bluefish
http://bluefish.openoffice.nl/index.html
Programes para el tratamiento de imágenes
GIMP
http://www.gimp.org/
Irfanview
http://www.irfanview.com/
CI-011 v.01 Dossier / 18