página de germán fabregat - introducción: páginas web y...

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.


<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>




</tr>

<tr>





</tr>

<tr>





</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, columna 1

y 2</td>



</tr>

<tr>


<td rowspan=2 bgcolor=”green”>Fila 2 y 3, columna 4</td>

</tr>

<tr>




</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.


<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.

página de germán fabregat - introducción: páginas web y...

Documents