Para poder incluir imágenes y gráficos en nuestras páginas disponemos de una única etiqueta: <IMG>.
<IMG> dispone de diversos atributos que nos permiten especificar qué fichero de imagen queremos usar, las medidas de ésta, etc. El atributo que nos permite especificar qué imagen debemos mostrar es SRC. Con dicha etiqueta podemos especificar una URL de fichero de imagen que será el que el navegador solicitará al servidor para mostrárnoslo.
Las imágenes que referenciemos con el atributo SRC pueden estar en cualquier directorio del servidor, en otros servidores, etc. El valor que pasemos a SRC debe ser una URL.
Disponemos, además, de un atributo ALT que nos permite asignar un texto alternativo a la imagen para el caso de que el navegador no pudiese mostrar la imagen que enseñase ese texto al usuario.
Disponemos asimismo de un par de atributos que nos permiten especificar las medidas de la imagen, WIDTH (anchura) y HEIGHT (altura). En caso de no especificarlos, el navegador mostrará la imagen con el tamaño que tenga el archivo de ésta. En caso de especificarlos, el navegador redimensionará la imagen adecuadamente. Usar los parámetros de medida de imagen permite al navegador dejar el espacio que ocupará la imagen y mostrar el resto de la página mientras se descarga éstas.
Un uso habitual de las imágenes es como botones para enlaces, en cuyo caso el navegador generalmente le añadirá un borde para diferenciarlo del resto. Podemos evitar este efecto añadiendo un atributo adicional, BORDER, que nos permite especificar el grosor de este borde o eliminarlo poniéndolo a cero.
CODIGO DE IMAGEN:
<HTML>
<HEAD>
<TITLE>Título del documento</TITLE>
</HEAD>
<BODY>
<p><img border="0" src="anibugs.gif" width="115" height="188" alt ="Mensaje de ayuda al no aparecer la imagen"></p>
HTML nos permite definir listas y enumeraciones de tres tipos principales:
• Listas no ordenadas.
• Listas ordenadas (numeradas).
• Listas de definiciones.
7.1.- Listas no ordenadas
Para introducir listas no ordenadas disponemos de la etiqueta <UL>, que nos indica el inicio de la lista, de </UL>, que nos indicará el final de la lista y de <LI>, que nos indica cada uno de los elementos de la lista.
Disponemos además de un atributo TYPE que nos indica el marcador que hay que usar para señalar los diferentes elementos: DISC, CIRCLE, SQUARE.
Debemos introducir todos los elementos entre <LI> y</LI>.
7.2.- Listas ordenadas (numeradas)
El funcionamiento de las listas ordenadas es muy similar al de las listas no ordenadas. Para éstas disponemos de la etiqueta <OL>, que nos indica el inicio de la lista, de </OL> que nos indicará el final de la lista y de <LI> que nos indica cada uno de los elementos de la misma.
Disponemos, además, de un atributo TYPE que nos indica el marcador que conviene usar para enumerar los diferentes elementos:
TYPE=1 Números (la elegida por defecto).
TYPE=A Letras mayúsculas.
TYPE=a Letras minúsculas.
TYPE=I Numeración romana en mayúsculas.
TYPE=i Numeración romana en minúsculas.
Disponemos también de un atributo START que nos indica en qué punto debe comenzar la numeración de la línea. El atributo TYPE también puede usarse en los elementos individuales.
Debemos introducir todos los elementos entre <LI> y </LI>.
7.3.- Listas de definiciones
Una lista de definiciones es una lista no numerada que nos permite dar una descripción o definición de cada elemento. Las listas descriptivas están formadas con las etiquetas: <DL> y </DL> para definir la lista, <DT> para indicar el término que hay que definir y <DD> para indicar la definición.
Disponemos para DL de un atributo, COMPACT, que indica al navegador que muestre la lista de la forma más compacta posible, incluyendo el término y su definición en la misma línea.
CODIGO DE LISTAS:
<HTML>
<HEAD>
<TITLE>Título del documento</TITLE>
</HEAD>
<BODY>
<UL type =square >
<LI>Primer elemento
<LI>Segundo elemento
<LI>Tercer elemento
</UL>
<P>
<OL>
<LI>Primer elemento
<LI>Segundo elemento
<LI TYPE=A>Tercer elemento
</OL>
<P>
<dl compact>
<dt>ASCII <dd>
Juego de caracteres de 7 bits. Sólo permite 127 caracteres.
<dt>EPS <dd>
Formato Postscript encapsulado.
<dt>PNG<dd>
Portable Network Graphics,
formato gráfico de alta eficiencia.</dl>
</BODY>
</HTML>
Podemos ver diferentes ejemplos de listas de HTML:
Una de las características más destacadas y de mayor influencia en el éxito de la Web ha sido su carácter hipertexto, es decir, la posibilidad de que podamos enlazar documentos que pueden residir en diferentes servidores de forma intuitiva y transparente. Cabe destacar que los enlaces no sólo llevan a páginas Web, sino también a imágenes, audio, vídeo, etc.
Disponemos para realizar los enlaces de una etiqueta <A>, que con su conjunto de atributos, NAME, HREF, TARGET, nos permite un total control a la hora de crear enlaces en los documentos.
Disponemos de cuatro tipos de enlaces principales:
• Enlaces dentro de la misma página.
• Enlaces a otras páginas de nuestro sistema.
• Enlaces a páginas de otros sistemas.
• Enlaces documentos consultados a través de otros protocolos (correo electrónico, etc.).
6.1 Los Enlaces
Para crear un enlace utilizaremos la etiqueta A con el atributo HREF. Como valor de dicho atributo pasaremos el destino del enlace:
<A HREF=“destino”>Texto o imagen</A>
El contenido de la etiqueta se considerará como especial. Será visualizado de forma diferente por el navegador (generalmente subraya- do). Al pulsar sobre él saltaremos al destino indicado por el valor del atributo HREF, que debe ser una URL.
6.2.- Los Destinos
Un destino es una dirección URL que nos indica un servicio que deseamos obtener o un recurso al que deseamos acceder. Existen diversos servicios que podemos indicar en la URL y que serán aceptados por la mayoría de navegadores:
• http: indica el servicio de transferencia de páginas web y es el usado habitualmente.
• https: indica el servicio HTTP seguro y cifrado.
• ftp: indica que debemos usar el protocolo de transferencia de archivos, FTP. Si no indicamos usuario y contraseña, se intentará la transferencia anónima. En caso de que ésta no fuese aceptada, se nos pediría usuario y contraseña.
• mailto: indica que se debe enviar un correo electrónico a la dirección especificada.
Una de las posibilidades que nos ofrece HTML consiste en saltar a destinos dentro de una página. Para ello debemos definir en la página los destinos con nombre, anchors o anclas. Para realizar dicha definición, disponemos del atributo NAME de la etiqueta A.
Por ejemplo:
<A NAME=“ancla”>
Una vez definidas las anclas dentro de nuestros documentos, podemos navegar e ir directamente a ellas. Para navegar a estas anclas usaremos una extensión de la URL.
HTML proporciona una serie de códigos especiales, llamados entidades de carácter, que nos permiten introducir caracteres que no podamos meter desde el teclado, como acentos, circunflejos, símbolos especiales, etc. Además, podemos introducir cualquier carácter de la tabla de caracteres de ISO-Latín1 con una entidad de carácter especial.
HTML proporciona etiquetas que nos permiten modificar el tipo de letra, los colores, etc., de nuestros textos. Además, HTML proporciona unos marcadores especiales, llamados entidades de carácter, que permiten introducir caracteres especiales, como el símbolo de copyright, acentos, y otros, para aquellos casos en los que nuestro teclado o nuestro editor de texto no lo soportan, para cuando el juego de caracteres no lo soporta, etc.
4.1.- Cabeceras
Disponemos de un elemento <Hx> donde x puede ser (1, 2, 3, 4, 5, 6) que podemos utilizar para definir qué partes de nuestro texto deben ser consideradas como encabezados (de sección, capítulo, etc.). La etiqueta asigna un mayor tamaño de texto a los caracteres (en función de x, como veremos). Además, utiliza un tipo de letra en negrilla para la cabecera e incluye un salto de párrafo después de esta cabecera.
4.2.- Tipo de letra
HTML proporciona una etiqueta <FONT> para gestionar la tipografía. FONT nos permite especificar:
• Medidas, con el atributo SIZE.
• Colores, con el atributo COLOR.
• Tipografías, con el atributo FACE.
Debemos utilizar esta etiqueta con mucha precaución. Al especificar tipografías debemos tener en cuenta que quizás el cliente no tenga dicha tipografía instalada, con lo que la visión que obtendrá de la página no corresponderá a la deseada.
Los atributos soportados por FONT y que nos permiten definir las características del tipo de letra son:
• SIZE: tamaño de los caracteres, con valores de 1 a 7, o valores relativos (-7 a +7).
• COLOR: color de los caracteres.
• FACE: tipografía que vamos a usar. Podemos especificar más de una, separadas por comas.
4.3.- Estilos de letra
HTML nos proporciona un conjunto de etiquetas que permiten definir diferentes estilos de letras para el texto contenido entre las marcas. Las etiquetas disponibles son:
·B (negrilla).
·I (itálica).
·U (subrayado).
·STRIKE (tachado).
·SUP (superíndice).
·SUB (subíndice).
·BLINK (parpadeo).
·TT (teletipo).
·BIG (grande).
·SMALL (pequeño).
Además de estos tipos físicos de letra, disponemos también de algunos tipos lógicos de letra, que los navegadores pueden preferir representar de otra forma:
·EM (enfatizado).
·STRONG (destacado).
·CODE (código de programa).
·CITE (cita).
·KBD (entrada por teclado).
·SAMP (ejemplos).
·VAR (variables de programa).
HTML permite mezclar diferentes estilos, como negrilla y cursiva (itálica), etc. En ese caso se anidarían las etiquetas de HTML correspondientes:
<B><I>Negrilla y cursiva</I></B>
EJEMPLO DE TIPO DE LETRA:
<HTML>
<HEAD>
<TITLE>Título del documento</TITLE>
</HEAD>
<BODY>
<h1>Cabecera H1</h1>
<h2>Cabecera H2</h2>
<h3>Cabecera H3</h3>
<h4>Cabecera H4</h4>
<h5>Cabecera H5</h5>
<h6>Cabecera H6</h6>
<b>Tamaño de letra</b> <BR>
<font SIZE=1>1</font> <font SIZE=2>2</font>
<font SIZE=3>3</font> <font SIZE=4>4</font>
<font SIZE=5>5</font> <font SIZE=6>6</font>
<font SIZE=7>7</font> <font SIZE=6>6</font>
<font SIZE=5>5</font> <font SIZE=4>4</font>
<font SIZE=3>3</font> <font SIZE=2>2</font>
<font SIZE=1>1</font>
<P>
<b>Colores</b>
<font COLOR=#800000>C
<font COLOR=#000080>O
<font COLOR=#000080>L
<font COLOR=#008000>O
<font COLOR=#00FFFF>R
<font COLOR=#FF0000>E
<font COLOR=#C0C0C0>S
<font COLOR=#800080>D
<font COLOR=#008080>E
<font COLOR=#FF0000>L
<font COLOR=#808080>E
<font COLOR=#FF00FF>T
<font COLOR=#00FF00>R
<font COLOR=#808000>A
<font COLOR=#FFFF00>S
<P> <b>Negrilla <br>
<i>Cursiva<br> <u>Subrayado<br>
<strike>Tachado<br>
A<sup>Superíndice<br>
B<sub>Subíndice<br>
<br> <blink>Parpadeo</blink> <br>
<tt>Máquina de escribir(Teletipo)<br>
<big>Texto grande<br>
<small>Texto pequeño</small>
</BODY>
</HTML>
El resultado de la visualización de este código HTML es el siguiente:
