Introducción: páginas web y navegadores El editor Notepad++

IB14 Informática Aplicada a la Construcción
Creación de páginas web con HTML
Introducción: páginas web y navegadores
Una página web, pese a la gran cantidad de colores, imágenes e información que
puede mostrarnos cuando accedemos a ella, es simplemente un fichero de texto que
contiene solamente información textual y órdenes de cómo representarla gráficamente,
añadiendo posiblemente ficheros externos con imágenes, sonidos, etcétera.
Los navegadores son programas cuya misión fundamental, además de
conectarse al servidor a través de Internet y obtener la página y los ficheros que esta
indique, es entender la información escrita en la página web y presentarla por pantalla
de forma adecuada.
Para que todos los navegadores puedan entender la información de todas las páginas
web es necesario que la información contenida en la página se ajuste a unas normas
estandarizadas, conocidas por los diseñadores de páginas y los programadores de
navegadores y otras aplicaciones capaces de entender las páginas web. Aunque hoy
en día existen muchos lenguajes de descripción o de programación estandarizados y
que entienden los navegadores o sus ampliaciones –plugins-, tales como el php,
javascript, etcétera, el lenguaje estándar de descripción que utilizan las páginas web
es el Hypertext Markup Language o HTML.
Como su nombre indica con la palabra hypertext, se trata de un lenguaje que
define textos y su representación en pantalla; enlaces entre documentos, textos u
otros formatos de información, etcétera, gracias a un sistema de marcas o etiquetas
que indican cómo tratar el texto que encierran.
Este documento va a presentar de forma sencilla las características y funciones
del lenguaje HTML necesarias para realizar páginas web simples como las que se
proponen en las prácticas. Existen numerosos cursos completos de HTML en Internet.
En la página web de la asignatura, http://mermaja.act.uji.es, existen enlaces a algunos
cursos y al manual de referencia del lenguaje HTML.
El editor Notepad++
Los documentos HTML se pueden crear con cualquier editor de texto que no añada
información de formato, como el programa Notepad que se distribuye con los sistemas
operativos Windows. Sin embargo existen editores que, manteniendo esa
característica, entienden el lenguaje HTML coloreando las etiquetas reconocidas,
detectando errores de sintaxis y facilitando enormemente la tarea de edición del texto
HTML.
De entre estos editores se recomienda el programa gratuito Notepad++, que
además de HTML entiende una gran cantidad de lenguajes, es configurable, carga
poco el ordenador y es, en definitiva, muy cómodo de usar. Este programa se ha
desarrollado bajo la modalidad Open Source, por lo que cualquiera está autorizado
para utilizarlo sin coste alguno. Se encuentra disponible en Internet en la dirección
http://notepad-plus.sourceforge.net.
La figura inferior muestra el aspecto de un fichero HTML editado con el
programa Notepad++.
Conceptos básicos de HTML
Como se ha dicho más arriba, el lenguaje HTML consiste en una serie de etiquetas o
marcas que indican qué debe hacer el navegador. Muchas veces estas marcas
encierran texto y su función es indicar cómo se debe mostrar por pantalla. En este
caso, la marca inicial tiene la forma <marca> y la final, que indica límite de su acción,
</marca>. Por ejemplo la expresión
<b>Este texto aparecerá en negrita</b>
generaría por pantalla una salida como
Este texto aparecerá en negrita
Otras etiquetas no se aplican al texto encerrado entre su inicio y final, sino que
indican efectos o modificaciones en ellas mismas. Por ejemplo <br> inserta un salto
de línea, <hr> una línea de separación horizontal, etcétera.
Muchas etiquetas admiten calificadores que añaden información u opciones al
modo básico de tratar el texto. Así por ejemplo, si la etiqueta <div></div> trata
como un bloque el texto encerrado, <div align=”center”></div> indicará que
ese texto debe mostrarse centrado en la pantalla.
A lo largo de los siguientes apartados se describirán las etiquetas necesarias para
realizar la práctica, con sus calificadores más útiles. Para una descripción completa la
referencia más autorizada es la especificación del lenguaje HTML.
Una forma sencilla de empezar a familiarizarse con el código HTML y sus
efectos es observar el código fuente de las páginas web que visitamos. Los
navegadores más populares nos lo muestran seleccionando en la barra de menú la
opción Ver -> Código fuente de la página.
En las dos figuras siguientes aparece la opción en el menú del navegador
Firefox y la ventana que muestra el código HTML de la página.
Estructura de un archivo HTML
Un archivo con código HTML comienza con una etiqueta –opcional- que indica la
versión del lenguaje que se está usando y la marca <html></html> que indica al
navegador que se utiliza código HTML, que vendría encerrado entre inicio y final de
marca. Así nuestro documento tendrá el aspecto
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
…
Aquí en medio se pondrán las líneas necesarias para crear nuestra
página web.
…
</html>
El código HTML encerrado entre las marcas se divide en dos partes bien
diferenciadas: la cabecera y el cuerpo. La primera va encerrada entre las etiquetas
<head></head> y contiene el nombre de la página, que puede ser mostrado por el
navegador mientras la carga, información de estilos a utilizar en la página, scripts en
otros lenguajes de programación, etcétera.
El cuerpo viene encerrado entre <body></body> y contiene la información
que servirá para mostrar la página: textos, formatos, enlaces, etcétera. Esta etiqueta
admite varios calificadores para indicar el color del fondo (bgcolor), texto (text),
enlaces (link, vlink, alink), etcétera, o para indicar una imagen de fondo
(background). Los colores se especifican mediante palabras reservadas (black,
red, blue…) o indicando en hexadecimal sus tres componentes RGB (en la ventana
de selección de color del programa GIMP, nos aparecen como notación html).
A continuación aparece un ejemplo que es ya un texto HTML completo y
generaría la página correspondiente al cargarlo en un navegador.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>Ejemplo HTML completo</title>
</head>
<body bgcolor=”yellow” text=”#0202E4”>
Primer documento HTML
</body>
</html>
Tipos de letra
Aunque existen formas de definir tipos de letra y formatos más completos para los
caracteres, sólo vamos a comentar las etiquetas básicas de que disponemos para
modificar el tipo de letra.
La etiqueta <b></b> hace que el texto que encierra se represente en negrita,
<i></i> en itálica, <u></u> sirve para representar texto subrayado y <s></s> texto
tachado. Además disponemos de <tt></tt> para texto monoespacio o en formato
teletipo, <big></big> para representar texto de mayor tamaño y <small></small>
para texto menor. Se pueden también indicar subíndices y superíndices con
<sub></sub> y <sup></sup> respectivamente.
Estas etiquetas se pueden mezclar en distintas letras de una palabra y se
pueden además combinar, incluyendo varios modificadores. Por ejemplo
<b>T<i>e<u>xto</u></i></b> r<u>a</u><i>r</i><b>o</b>
se representaría como
Texto raro
Existe un conjunto de etiquetas, desde <h1></h1> hasta <h6></h6> que nos
permite definir hasta 6 niveles de título distintos, siento el 1 el más importante. Cómo
se representen estos niveles depende del estilo aplicado o del navegador.
Formateando el texto
Una vez visto cómo podemos definir la apariencia de los caracteres en pantalla, queda
por estudiar como dar formato a os párrafos e incluir otros elementos tales como listas,
tablas etcétera.
La etiqueta más útil para definir trozos de texto con un formato común es
<div></div>. Admite el atributo align con los valores center, justify, left y
right que indican de manera evidente el tipo de alineamiento del texto encerrado. De
esta forma, para incuir texto centrado podríamos usar
<div align=”center”>Este texto aparecerá centrado</div>
Además, al organizar texto común, la etiqueta fuerza un salto de línea antes y
después del texto encerrado. Es interesante comentar que HTML ignora los caracteres
de formato introducidos en el propio fichero, tales como saltos de línea y espacios. Si
se quiere forzar un salto de línea para separar párrafos se debe hacer con la etiqueta
<br>. Si se quieren insertar manualmente espacios entre palabras, se hará con
 . Otro elemento interesante para el formato es la línea horizontal. Generada
con <hr> muestra por pantalla una línea que divide horizontalmente la página.
Otro elemento de formato muy usado es la lista. HTML permite generar listas sin
orden, es decir, cuyas opciones no van numeradas, con la etiqueta <ul></ul> y listas
ordenadas con <ol></ol>. Dentro de cada lista, los elementos se delimitan con
<li></li>. Por supuesto, está permitido incluir listas dentro de otras listas como aparece
en el ejemplo siguiente.
<ol>
<li>Primer elemento de la lista con orden.</li>
<li>Este segundo elemento es más raro.<br>Incluye un salto de
ínea sólo para liar.</li>
<li>El tercero muestra cómo se pueden hacer listas anidadas.
<ul>
<li>Elemento de la lista de la lista.</li>
<li>Otro.</li>
<li>Así hasta cansarnos…</li>
</ul>
</li>
<li>Este, que es el último, nos devuelve a la normalidad.</li>
</ol>
La salida por pantalla generada, que aparece en la fgura siguiente, se puede
comprobar fácilmente copiando el texto en un archivo HTML y abriéndolo con un
navegador. Como se puede ver en el ejemplo, se ha mantenido la estructura más o
menos esperada organizando con tabuladores el texto introducido. Esta forma de
estructurar los textos, llamada indentación, se utiliza al escribir programas y es una
buena práctica para evitar confundirse al ver el texto tal como lo vamos escribiendo,
sin formato.
El último elemento de formato que vamos a considerar en este documento es la tabla.
Es un instrumento de una gran potencia porque permite organizar de forma muy
versátil y completa la información en las dos dimensiones de la pantalla.
La etiqueta que define una tabla es <table></table> y admite varios
atributos. Algunos de ellos, ya vistos como align y bgcolor, tienen el efecto
esperado. El primero nos indica el alineamiento de la tabla en la página y el segundo
su color de fondo.
Otro conjunto de atributos definen el tamaño y apariencia de la tabla en
pantalla. Así border nos permite definir el ancho en píxeles de los bordes de la tabla.
Un valor de 0 (border=0) los ocultará, permitiendo organizar la información en
pantalla sin que parezca tabulada. Los atributos frame y rules indican además qué
líneas alrededor de la tabla y entre las celdas se muestran. El atributo width ajusta el
ancho de la tabla en pantalla, bien en píxeles bien en porcentaje de la anchura
disponible, si se añade el símbolo % tras el valor numérico (width=25%). Por último,
cellspacing y cellpadding indican, respectivamente, la distancia, en píxeles o
porcentaje, entre las celdas y desde el extremo de la celda hasta el principio de su
contenido.
El número de filas y columnas de la tabla no se especifica. El navegador lo
obtiene contando las definiciones de filas, identificadas por la etiqueta <tr></tr> que
aparecen dentro de la tabla y las de columnas, con <td></td>, que encuentra dentro
de cada fila. Una tabla con 3 filas y 4 columnas sería
<table bgcolor=”cyan” cellspacing=1 cellpadding=2 border=3>
<tr>
<td>Fila 1, columna 1</td>
<td>Fila 1, columna 2</td>
<td>Fila 1, columna 3</td>
<td>Fila 1, columna 4</td>
</tr>
<tr>
<td>Fila 2, columna 1</td>
<td>Fila 2, columna 2</td>
<td>Fila 2, columna 3</td>
<td>Fila 2, columna 4</td>
</tr>
<tr>
<td>Fila 3, columna 1</td>
<td>Fila 3, columna 2</td>
<td>Fila 3, columna 3</td>
<td>Fila 3, columna 4</td>
</tr>
</table>
Y su apecto en el navegador:
La etiqueta <tr></tr> admite los atributos bgcolor y align, ya descritos
anteriormente, y valign que indica la posición del texto en vertical (top, middle,
bottom y baseline). La marca <td></td> admite los mismos atributos, además de
otros muy interesantes para definir tamaños y agrupaciones de celdas. height y
width permiten definir la altura y anchura de las celdas en píxeles o porcentaje, como
se ha visto anteriormente. Por otra parte, colspan y rowspan indican que la celda
actual se expande por el número de columnas y filas especificado. En este caso, la
expansión se debe tener en cuenta en las siguientes definiciones de fila, que tendrán
menos elementos.
El ejemplo siguiente muestra el uso de estos atributos.
<table bgcolor=”cyan” align=”center” cellspacing=5 cellpadding=5
border=1>
<tr>
<td colspan=2 rowspan=2 bgcolor=”yellow”>Fila 1
y 2</td>
y 2, columna 1
<td>Fila 1, columna 3</td>
<td>Fila 1, columna 4</td>
</tr>
<tr>
<td>Fila 2, columna 3</td>
<td rowspan=2 bgcolor=”green”>Fila 2 y 3, columna 4</td>
</tr>
<tr>
<td>Fila 3, columna 1</td>
<td>Fila 3, columna 2</td>
<td>Fila 3, columna 3</td>
</tr>
</table>
Y la imagen obtenida en pantalla:
Aunque no se ha comentado explícitamente, la potencia de las tablas viene de la
propia naturaleza recursiva del lenguaje HTML. Un elemento de datos de una tabla,
encerrado entre <td></td>, puede ser casi cualquier elemento del lenguaje, por
ejemplo una lista u otra tabla. Y esto se aplica también dentro de la nueva lista o la
nueva tabla.
La imagen siguiente nos muestra cómo se puede utilizar esta etiqueta para
organizar distintos elementos en las dos dimensiones de la pantalla. El código que se
ha utilizado para generarla aparece después (¡para no asustar a nadie antes de
tiempo!)
<table bgcolor="white" border=0 cellspacing=50>
<tr bgcolor="cyan">
<td align="center" colspan=2><h1>Ejemplo de tabla
potente</h1>
</tr>
<tr>
<td height=100 align="center">Aquí va una tabla</td>
<td align="left">Aquí va una lista</td>
</tr>
<tr>
<td valign="middle" align="center">
<table bgcolor="pink" border=2>
<tr bgcolor="cyan" align="center">
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
<tr>
<td bgcolor="cyan">F1</td>
<td>Texto1</td>
<td>Texto2</td>
<td>Texto3</td>
</tr>
<tr>
<td bgcolor="cyan">F2</td>
<td>Texto4</td>
<td>Texto5</td>
<td>Texto6</td>
</tr>
</table>
</td>
<td valing="middle" align="left">
Ahora viene la lista
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
<li>Elemento 5</li>
</ol>
</td>
</tr>
</table>
Enlaces
Hasta ahora hemos visto funciones de HTML para el formato de los textos y su
representación en pantalla. Sin embargo, su característica principal como lenguaje de
hipertexto es su capacidad para incorporar en los textos otro tipo de información:
imágenes, vídeo, sonidos u otros textos, y permitirnos navegar de unos a otros con
facilidad. Estas funciones del lenguaje se consiguen mediante etiquetas que
constituyen enlaces a otros ficheros o páginas.
El primer elemento que nos puede interesar incluir es una imagen. Esto se
consigue con la etiqueta <img> que requiere el atributo src para indicar dónde se
encuentra el fichero que contenga la imagen. Los tipos de ficheros que pueden ser
representados dependen del navegador. Normalmente los formatos de imagen más
comunes (.jpg, .bmp, .gif, .png…) pueden ser utilizados. Otros atributos interesantes
son los ya vistos height y width para indicar el tamaño, align para indicar la
posición con respecto a la página y border para situar, si se desea, un marco de los
píxeles indicados alrededor. Además, hspace y vspace nos permiten indicar el
espacio libre a dejar alrededor de la imagen, tanto en horizontal como en vertical. Por
último vale la pena comentar la etiqueta alt que permite definir un texto que
aparecerá en lugar de la imagen mientras esta se carga o cuando pasemos el puntero
del ratón sobre ella. A continuación aparece un ejemplo de cómo incluir una imagen en
una página:
<img src=”mi_imagen.jpg” alt=”Foto de mis vacaciones” align=”middle”>
Es necesario indicar que los navegadores pueden interpretar de formas distintas el
alineamiento de las imágenes. Una buena forma de situarla correctamente es incluirla
dentro de un bloque <div></div> con el alineamiento horizontal deseado.
Se recomienda así mismo leer detenidamente el apartado de este documento acerca
de la ubicación de los ficheros en el disco y de cómo referirse a ellos en los enlaces.
El enlace por excelencia en las páginas web, el que nos permite enlazar otras páginas,
otras zonas de la propia página, ficheros, enviar correo electrónico, etcétera es el
etiquetado con <a></a> (del inglés, anchor). El atributo más importante es href, que
indica la dirección de la hiper-referencia y por construcción de esta, su tipo.
De esta manera, para enlazar una página web de Internet el texto que
utilizamos para el atributo será “http://direccion_web”; si queremos enlazar un
fichero en nuestro servidor, pondremos “nombre_de_fichero”. Si queremos enviar
un
correo
electrónico
mediante
el
enlace
usaremos
la
expresión
“mailto:dirección_de_correo”. Los siguientes ejemplos sirven para mostrar
estos distintos tipos de enlaces y su uso.
<a href=”http://www.uji.es”>Página de la Universitat Jaume I</a>
<a href=”mailto:[email protected]>Envía un correo a tu profesor</a>
<a href=”mi_imagen.jpg” target=”blank”>Si quieres ver la foto a
pantalla completa</a>
El atributo target, que aparece en el último ejemplo, permite definir cómo se va a
realizar el enlace. Si indicamos blank este se realizará en una nueva ventana abierta
por el navegador. En el caso de utilizar marcos, como se explicará a continuación,
especificaremos el marco en el que se va a cargar la página enlazada.
Páginas con varios marcos
HTML nos permite dividir la pantalla en varias zonas que pueden tratarse y enlazarse
individualmente pero que forman la misma página web. Esto se consigue mediante el
uso de marcos. La etiqueta <frameset></frameset> nos permite dividir la pantalla
en secciones horizontales o verticales que se podrán luego tratar individualmente.
Especificando como atributos rows o cols con una lista de tamaños, determinaremos
la estructura resultante. Como esta estructura define toda la página web, una
definición de marcos aparece en una página web en lugar del cuerpo de la misma,
reemplazando a la etiqueta antes vista <body></body>.
Dentro de un frameset se utiliza la etiqueta <frame></frame> para
especificar los contenidos y otros aspectos de cada uno de los marcos. Sus atributos
más interesantes son frameborder que admite los valores 1 ó 0 para indicar que se
representa o no con borde, src que nos indica la página que se cargará inicialmente y
name, que nos servirá para dirigir los enlaces al marco que se desee, según se ha
dicho antes.
Como siempre, HTML permite definir elementos dentro de otros elementos
idénticos. Así el siguiente ejemplo muestra cómo, mediante dos definiciones de
marcos, creamos una página versátil con tres marcos efectivos.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>Ejemplo de marcos</title>
</head>
<frameset rows=”20%, 80%”>
<frame src=”titulo.html” name=”titulo”>
<frameset cols=”15%, 85%”>
<frame src=”margen.html” name=”margen”>
<frame src=”principal.html” name=”principal”>
</frameset>
</frameset>
</html>
La página resultante se vería:
Para saber más
Además de estas breves notas, se recomienda leer los tutoriales en línea que existen
en la página web de la asignatura y consultar el código HTML de las páginas que nos
gusten. Para resolver cualquier duda la referencia mejor es el manual del lenguaje
HTML.
Acerca de los ficheros y sus referencias
Cuando se quiere hacer una referencia a un fichero desde un enlace en una página
web, además de indicar su nombre, incluyendo extensión, es necesario indicar el
camino a seguir en el sistema de ficheros para encontrarlo. Esto siempre se puede
hacer de dos formas. La primera consiste en dar la referencia absoluta desde el origen
del sistema de ficheros. En los sistemas operativos Windows sería, por ejemplo
“C:\dir1\dir2\nombre.ext”. Esta referencia sin embargo tiene el inconveniente
de no ser correcta si cambiamos de lugar la página y todos los archivos enlazados, por
ejemplo para publicarla.
Se recomienda por ello utilizar referencias relativas al archivo desde el que se
hace el enlace. Si nuestra página desea enlazar un archivo en su propia carpeta,
pondremos simplemente el nombre del archivo en el enlace. Si, por el contrario, el
archivo se encuentra en un subdirectorio llamado por ejemplo img, escribiremos en el
enlace “img/nombre_de_fichero”. Si ocurre al contrario, que queremos
referenciar un archivo en el directorio padre de aquél en que se encuentra la página, lo
indicaremos mediante ../, de la forma “../nombre_de_fichero”.
En general, si queremos descender varias carpetas que son subdirectorios de
subdirectorios de aquélla en la que está la página, pondremos sus nombres hasta
obtener algo como “subdir1/subdir2/subdir3/imagen.jpg”. Este sería el
caso que se ilustra en la figura, con nuestra página HTML residiendo en la Origen,
Si por el contrario queremos remontarnos varios directorios por encima del actual nada
nos impide poner “../../../imagen.jpg”. si, como en la figura inferior, la página
estuviera en subdir3 y el fichero imagen.jpg en Origen.
Y si queremos descender por otros subdirectorios de alguno por encima del actual, la
expresión quedará cómo “../../subdir2_2/subdir2_22/imagen.jpg” si,
como aparece en esta última figura, la página se encuentra en subdir2_12 e
imagen.jpg en subdir2_22.
Para comprender las referencias relativas basta con tener en cuenta que cada ../
asciende una carpeta desde la que estamos, y cada nombre de carpeta desciende. Así
../../ nos sitúa en subdir2 y de allí vamos a subdir2_2 y subdir2_22.
En el fichero comprimido ejemploHTML.zip aparecen todos los ejemplos de este
texto, incluyendo el uso de referencias relativas. Para verlo con un navegador entrar
en la carpeta primera y hacer doble clic en primera.html.