Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Web Con HTML Uji PDF
Web Con HTML Uji PDF
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>
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.
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.
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
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
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>
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.
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:fabregat@icc.uji.es>Envía un correo a tu profesor</a>
<a href=”mi_imagen.jpg” target=”blank”>Si quieres ver la foto a
pantalla completa</a>
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.