jueves, 13 de marzo de 2014

Ingresar Sonidos en HTML

La presencia de archivos sonoros en forma de MIDI o WAV puede servir como agradable banda sonora mientras se navega por el web, pero también puede ser un pesado fardo que sirve sólo para hacer más lento el cargado y poner nervioso al visitante. Como repetiremos a menudo en esta guía, no podemos olvidar que aunque, sin lugar a dudas, una atractiva impostación gráfica y musical de las páginas web es importante, es fundamental que la navegación no llegue a ser lenta o incluso, en última instancia, imposible si nos preocupa mínimamente nuestra cuenta de teléfono. Nuestro consejo es, por tanto, evitar archivos MIDI grandes (60Kb de archivos MIDI, por ejemplo, resultan exagerados) y enormes WAVE (que podemos sustituir con otros archivos más ligeros, como veremos a continuación).

Tomemos un archivo MIDI; imaginemos que se llama "imagine.mid"; y consideremos que queramos insertarlo como fondo de la página web nada más abrirse ésta, automáticamente por tanto.
Antes de nada, debemos pensar que Navigator y MSIE utilizan marcas diversas para llamar automáticamente un archivo MIDI de fondo.

Por ejemplo, la marca <BGSOUND> funciona sólo con MSIE pero no con Navigator (LOOP indica el número de veces que debe repetirse el midi):

<BGSOUND SRC="imagine.mid" LOOP=INFINITE> 

Además de los archivos MIDI, con la marca <BGSOUND> es posible insertar archivos .WAV y .AU

Para permitir la apertura automática de un archivo audio también con Netscape, hay que usar la marca <EMBED>:

<EMBED SRC="imagine.mid" AUTOSTART=true LOOP=true VOLUME="80" WIDTH="0" HEIGHT="0"> 

También en este comando además de los archivos MIDI es posible insertar archivos .WAV y .AU

Una de las rémoras para la inserción de archivos midi en las propias páginas, obedece al hecho de que, cada vez que se cambia página, el archivo musical se interrumpe bruscamente. El problema no subsiste en los sitios divididos en marcos (frames), ya que el archivo musical se carga en el marco fijo y, por tanto, no cambia cuando se pasa página en los otros marcos. ¿Y por lo que respecta a los sitios sin marco? Una pequeña estratagema que toma piede los marcos puede ser la de construir una página con un marco "invisible".
Para ello, se crea una página con el siguiente código:

<FRAMESET rows="0,*" border=0 frameborder="0" framespacing="0"><frame me name="alto" src="top.htm" noresize><frame me name="centrale" src="central.htm" noresize></FRAMESET> 

donde en el marco "alto" insertaremos el código que invoca el archivo audio:

<EMBED SRC="imagine.mid" AUTOSTART=true LOOP=true VOLUME="80" WIDTH="0" HEIGHT="0">

Otra "estratagema" para escuchar un archivo audio (SÓLO CON NETSCAPE) de manera continua incluso cuando se cambia página, es el de cargar dicho archivo en una ventana alternativa del navegador.
Para hacer esto, es necesario utilizar un pequeño pero importantísimo TARGET.
Los TARGET se usan sobre todo en los marcos pero pueden usarse también en otros casos. Así, por ejemplo, si queremos que una página asociada a un enlace se cargue en una ventana distinta del navegador, tendremos que insertar el TARGET="_new".

miércoles, 5 de marzo de 2014

TABLE Gestionar tablas

La altura y anchura global de una tabla se indica dentro del atributo <TABLE>, que señala la apertura y cierre de una tabla. Las dimensiones se definen mediante WIDTH (ancho) y HEIGHT (alto) y pueden expresarse en píxel o en tantos por ciento respecto a la página:

<TABLE WIDTH=500>
</TABLE>

En este ejemplo de código, la anchura de la tabla está expresada en píxel (500). Si se elige esta opción, sea cual sea la resolución con la que venga vista la página, la medida de la tabla no sufrirá variaciones, es decir, en nuestro caso será siempre de 500 píxel.
No sucederá lo mismo, sin embargo, si decidimos expresar el tamaño mediante un porcentaje:

<TABLE WIDTH=50%>
</TABLE>

En este caso, la anchura de la tabla será distinta según sea la resolución del vídeo del usuario.
Así, por ejemplo, quien tenga un vídeo con resolución 640x480 verá una tabla de unos 320 píxel (porque hemos impostado un ancho de tabla equivalente al 50% de la página), mientras quien tenga un vídeo con resolución 800x600 verá una tabla de 400 píxel.
En nuestra opinión, es preferible mantener el control absoluto sobre la dimensión de la tabla utilizando, por tanto, la medición en píxel y no en tanto por ciento.

Ahora echemos un vistazo a la manera en que debe estructurarse una tabla. Para ello utilizaremos algunas imágenes:

Como vemos por esta imagen, el atributo <TABLE> genera la tabla, mientras que <TD> sirve para definir los campos presentes dentro de esta tabla.
He aquí cómo el diseño puede ser transformado en código y, por tanto, en una tabla propiamente dicha: 

<TABLE BORDER=1 WIDTH=300>
<TD WIDTH=100>
</TD>
<TD WIDTH=100>
</TD>
<TD WIDTH=100>
</TD>
</TABLE
pruebapruebaprueba
En el siguiente ejemplo, consideraremos que queremos elaborar una tabla de este tipo:


Como podemos observar, hemos introducido una nueva marca <TR>, que es una especie de "salto" de fila dentro de la tabla. He aquí cómo el diseño puede ser transformado en código y, por tanto, en una tabla propiamente dicha: 

<TABLE BORDER=1 WIDTH=300><TR> 
<TD WIDTH=100></TD> 
<TD WIDTH=100></TD> 
<TD WIDTH=100></TD> 
</TR> 
<TR><TD WIDTH=100></TD> 
<TD WIDTH=100></TD> 
<TD WIDTH=100></TD> 
</TR> 
</TABLE>
pruebapruebaprueba
pruebapruebaprueba
 El espacio entre los diversos campos de una tabla se define dentro de la marca </TABLE> con CELLSPACING=X y CELLPADDING=X (donde X es la distancia en píxel):

<TABLE CELLPADDING=10 CELLSPACING=10></TABLE> 

La colocación del texto y de las imágenes dentro de los distintos campos <TD> de la tabla puede ser modificada de varias maneras:


<TABLE WIDTH=300 HEIGHT=200>
<TD width=100VALIGN=TOP>
prueba </TD>
<TD WIDTH=100VALIGN=BOTTOM>
prueba </TD>
<TD WIDTH=100VALIGN=MIDDLE>
prueba </TD>
</TABLE>
pruebapruebaprueba
 

<TABLE WIDTH=300 HEIGHT=200>
<TD width=100 ALIGN=RIGHT>
prueba </TD>
<TD WIDTH=100 ALIGN=CENTER>
prueba </TD>
<TD WIDTH=100 ALIGN=LEFT>
prueba </TD>
</TABLE>
pruebapruebaprueba
 Cada campo puede tener un color de fondo distinto de los otros e, incluso, un fondo como los de las páginas web normales (los fondos pueden ser sustituidos con GIF animadas):


<TABLE WIDTH=300 HEIGHT=200>
<TD width=100 BGCOLOR="red">
prueba </TD>
<TD WIDTH=100BGCOLOR="yellow">
prueba </TD>
<TD WIDTH=100BGCOLOR="gray">
prueba </TD>
</TABLE>
pruebapruebaprueba
<TABLE WIDTH=300 HEIGHT=230>
<TD width=100 BACKGROUND="sfondo15.jpg">
prueba </TD>
<TD WIDTH=100 BACKGROUND="sfondo26.jpg">
prueba </TD>
<TD WIDTH=100 BACKGROUND="sfondo61.jpg">
prueba </TD>
</TABLE>
pruebapruebaprueba

Propiedades de IMG, MAP Y AREA

Html nos permite la opción de crear diferentes enlaces url dentro de una misma imagen. Es decir, podemos hacer que diferentes partes de una imagen tengan enlaces que nos permitan ir a diferentes destinos.
Las fotos en las que queramos introducir un mapa de imágenes deberán ser de uno de estos tres formatos: .jpg, .gif o .png, que son los tres formatos recomendables para todos los navegadores.

A continuación vamos a explicarte como podemos crear este tag html y los diferentes atributos que posee este tag. Como veremos a lo largo del artículo, lo difícil de crear un mapa de imágenes no es el mapa en sí, sino encontrar las coordenadas en la imagen. Aunque existen programas de edición de imágenes que nos ayudarían en esa tarea.

El tag map

Cómo ya podemos suponer, <map> es el tag necesario para poder crear un mapa de imágenes en html. Por supuesto, posee un cierre: </map>.

Este tag debe ir acompañado del atributo name= “x”, para indicar el nombre del mapa. Por tanto si queremos hacer un mapa que se llame ejemplo 1, escribiremos: <map name= “ejemplo1”>

Atributo area

El mapa de imágenes lleva un área dentro de la cual podremos pinchar para dirigirnos al destino que hayamos preestablecido. Pero, por supuesto, esa área se la tenemos que indicar al navegador para que la interprete.

La zona del enlace se indica dentro de la etiqueta, estableciendo las coordenadas de dicha área. También podemos escribirle un texto alternativo, un “alt”, al área.

Existen tres tipos de áreas. Vamos a explicártelas a continuación.

Atributo shape

Este atributo nos indicará el tipo de área que es. Como hemos dicho existen tres tipos: rectangular (rect), poligonal (poly) o circular (circle) y cada una de ellas tiene unas características diferentes. Vamos a profundizar un poco más en ellas.

shape=“rect” : Este tipo de área crea un mapa de imagen rectangular. Para definir la zona que incluirá ese mapa deberemos definir la esquina superior izquierda del área y la esquina inferior derecha.

shape=“circle” : Este tipo de área crea un mapa de imagen circular. Nosotros sólo debemos indicarle el centro de la circunferencia y el radio del mismo.

shape=“poly” : Este tipo de área es la más versátil de todas, la que más posibilidades nos ofrece, ya que nos permite crear una zona personalizada. Para crearla debemos indicarle los diferentes puntos del polígono que hagamos y de una forma ordenada, siguiendo el camino que nosotros hemos trazado para hacerlo.
Bien, pero…¿y cómo indicamos las coordenadas? Gracias al siguiente atributo.

Atributo coords

El atributo coords se escribe de la siguiente forma: coords= “x,x,x,x”, entendiendo que cada “x” representa un punto en la imagen. Cada coordenada debe ir separada por comas.

Y el dónde nos dirigirá esa área nos lo indicará el atributo “href”

Atributo href

Aquí deberemos indicar el destino del área.

usemap

Hasta ahora te habíamos indicado cómo podías escribir un mapa de imágenes y cómo definir su área, pero no te habíamos dicho cómo indicar qué imagen es la que llevará el mapa. Esta acción se hace gracias al atributo usemap.

Este atributo se escribe de la siguiente forma: usemap=“#x”, siendo x el nombre del mapa de imágenes que queramos utilizar.

Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver más abajo. Dentro de estas bolas de billar, nosotros hemos hecho un mapa de imágenes con un área circular que coincide con la bola amarilla. Nuestra “href” es la página de inicio de este tutorial. También hemos hecho un área poligonal en la bola negra del fondo que te llevará al inicio del tutorial de css y otro área rectangular en el centro de la imagen, que te redigirá al inicio del tutorial de php.

El código nos ha quedado de la siguiente manera:


<img src="http://html.hazunaweb.com/html/imagenes/prueba-mapa.jpg" alt="Prueba de mapa de imágenes" width="300" height="214" border="0" usemap="#billar"> <map name="billar"><area alt="Si clícas aquí irás a la página de inicio del tutorial de html" shape="circle" coords="148,154,44" href="http://www.hazunaweb.com"><area alt="Si clías aquí irás a la página de inicio del tutorial de css" shape="poly" coords="148,59,142,49,135,41,128,38,121,34,125,25,135,16,155,11,177,19,188,27,187,36,177,39,168,46,162,52,160,61" href="http://css.hazunaweb.com/"><area alt="Si clías aquí irás a la página de inicio del tutorial de php" shape="rect" coords="11,77,288,105" href="http://php.hazunaweb.com/"></map>

Y el resultado lo verás si clícas en las zonas adecuadas:

miércoles, 26 de febrero de 2014

HREF Crear enlaces

Habrás oído muchas veces hablar de hipertextos y de cómo éstos sustenten el web. Un hipertexto es un modo de formatear documentos de manera no secuencial. Para comprender esta característica, podemos pensar en un libro impreso en papel cuya estructura fuera índice, capítulos y glosario. Dicha estructura es secuencial en el sentido de que se lee el índice para pasar después a los capítulos (yendo del primero al último) y acabar con el glosario de términos. Al lector, en este caso, se le marca un recorrido que le lleva a leer el primer capítulo para llegar al último. Con el hipertexto esta estructura secuencial desaparece gracias a los enlaces hipertextuales, que permiten leer el documento sin seguir necesariamente un orden predeterminado. La peculiaridad de saltar de un punto a otro del documento es típica del WWW, donde a menudo siguiendo un documento saltamos de un sitio a otro.

Los documentos HTML son hipertextos cuyo funcionamiento se debe, en su mayor parte, a los hiperenlaces o anclajes, cuya marca específica es <A>.

<A HREF>

El elemento <A> (la A corresponde al inglés Anchor) necesita una marca de apertura y una de cierre y entre ellas podemos insertar texto, imágenes y otros elementos multimedia.
Para que funcione, el elemento <A> debe estar asociado a otros atributos. De éstos, el más importante es HREF (abreviatura del inglés Hypertext Reference), que contiene el URL o página donde ir. La sintaxis es:


<A HREF="http://www.htmlpoint.com">Visita HTMLpoint</A>


En el código antes citado, si hacemos clic en el texto "Visita HTMLpoint" (comprendido entre las marcas de apertura y cierre), llegamos al URL http://www.htmlpoint.com indicado por el atributo HREF.

Es posible sustituir el texto con una imagen obteniendo un efecto idéntico.

HREF puede contener tanto enlaces a recursos externos (como en este caso), como enlaces a otros documentos de la misma dirección. Por ejemplo, si nos encontraramos en la página 1.htm y quisiéramos incluir un enlace a la página 2.htm presente en la misma carpeta, el código correcto sería:


<A HREF="2.htm">Haz clic aquí para llegar a la nueva página</A>


TARGET


TARGET es un atributo implementado por exigencias relacionadas con la gestión de los marcos. En una página dividida en marcos, este atributo indica en cuáles de ellos debe quedar visualizado el documento. No entraremos aquí en detalles sobre los marcos ya que comentaremos este tema más adelante.

Sin embargo, sí nos ocuparemos aquí de otro uso de este atributo: gracias a TARGET podemos cargar una página asociada a HREF en otra ventana del navegador usando la siguiente sintaxis:


<A HREF="http://www.htmlpoint.com" TARGET="_new">Visita HTMLpoint</A>



El atributo TARGET="_new" indica al navegador que debe cargar el enlace con http://www.htmlpoint.com en una nueva (_new) ventana.

El empleo de distintas ventanas para cada enlace es muy útil cuando se manda a recursos externos ya que nos permite no perder al visitante: el usuario de este modo tendrá abiertas dos ventanas y no dejará de tener disponible nuestra página.


TITLE

Al igual que para el elemento IMG, también en el caso de los enlaces hipertextuales podemos definir un texto con un comentario que se activará cuando pasemos el ratón por encima del enlace. La sintaxis es:


<A HREF="http://www.htmlpoint.com" TITLE="El sitio italiano sobre el web publishing">Visita HTMLpoint</A>



MAILTO (enlace a e-mail)


Es posible asimismo incluir enlaces con direcciones de correo electrónico utilizando una sintaxis algo distinta de la indicada para los URL. El código es:


<A HREF="mailto:webmaster@html.it">Escribe a HTMLpoint</A>



Haciendo clic en este enlace se abre automáticamente tu programa de correo electrónico predefinido con el campo TO ya impostado en webmaster@html.it.


Enlaces con partes de un mismo documento


Hasta ahora hemos analizado los enlaces con recursos externos o con páginas diversas de un mismo sitio. Sin embargo, podemos asimismo crear enlaces con puntos específicos de un mismo documento gracias al código <A NAME="ancora">. En otras palabras, si con los enlaces examinados hasta ahora llegamos a un documento, con <A NAME> llegamos a una parte concreta del documento.
A continuación, figura el procedimiento que hay que seguir para crear enlaces con puntos internos del documento:

Inserta la marca <A NAME="ancora"> en el punto del documento al que quieres que se llegue (.ANCORA es un identificador del punto en el que el navegador deberá visualizar la página. Obviamente puedes sustituirlo con otros términos).

En el enlace desde el que quieres llegar al punto del nuevo documento, inserta la siguiente sintaxis: 
<A HREF="#ancora">Visita HTMLpoint</A>


La almohadilla (#) indica que se trata de un enlace interno. En este ejemplo se manda a un punto de la misma página, porque a la derecha de la almohadilla aparece el nombre del enlace interno, mientras que a su izquierda no hay nada escrito. Si quisiéramos llegar a un punto concreto de un documento externo, la sintaxis correcta sería: <A HREF="nome_file.htm#ancora">Visita HTMLpoint</A>, donde "nome_file.htm" es el nombre del documento al que hay que llegar, y "ancora" es el punto preciso de dicho documento.

Propiedades de Imágenes HTML

IMG

Antes de describir en detalle la marca principal de inserción de imágenes en los hipertextos, es conveniente precisar algunos conceptos de HTML. A diferencia de muchos procesadores de texto (Ms Word, por ejemplo), los hipertextos no se "funden" con las imágenes que les sirven de acompañamiento gráfico, sino que se limitan a invocarlas desde un recorrido específico in situ o en el web. Dicho de otro modo, existe una división muy clara entre archivo .htm e imágenes (y también sonidos, apliques, etc.). Los documentos HTML se limitan a prever dentro de ellos un espacio en el que se insertan las imágenes solicitadas.

La marca <IMG> no necesita cierre y su sintaxis correcta es:

<IMG SRC="immagine.gif">

donce SRC corresponde al inglés Search y es el recorrido del que el navegador saca la imagen (en este caso "immagine.gif"). Como hemos señalado, esta marca es única en el sentido de que NO lleva como cierre el correspondiente </IMG>.

Los navegadores (Netscape, MsIe, Opera etc.) reconocen numerosos formatos gráficos, aunque los más utilizados son dos: GIF (Graphics Interchange Format) y JPEG (Joint Photographics Experts Group). En los últimos meses, asistimos a la difusión a nivel internacional de otro formato:PNG (Portable Network Graphics).

El elemento <IMG> va acompañado de diversos atributos que facilitan su uso. Veamos ahora juntos cuáles son.

ALT

El uso de texto para comentar las imágenes es una regla fundamental que debemos observar en la creación de sitios web por varias razones:

algunos navegadores pordrían estar impostados para no invocar las imágenes;
los navegadores textuales para invidentes no conseguirían interpretar las imágenes si carecieran de comentario;
es posible evitar pies de imagen incluyendo comentarios dentro de la imagen misma.

En todos estos casos, el uso de comentarios resuelve el problema y permite optimizar la página web. La sintaxis correcta de los comentarios es la siguiente:

<IMG SRC="immagine.gif" ALT="Obra de K. Haring">

WIDTH y HEIGHT

En los ejemplos vistos hasta ahora, no hemos especificado las medidas de la imagen que el navegador se ha encargado de buscar automáticamente. Es posible definir la anchura y la altura de la imagen gracias a los atributos width y height, respectivamente:

<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 ALT="Obra de K. Haring">

donde WIDTH=178 es la dimensión horizontal (ancho) de la imagen expresada en píxel, y HEIGHT=180 la dimensión vertical (alto).

Mediante estos atributos podemos definir dimensiones diferentes de las que realmente tiene la imagen. En cualquier caso, es aconsejable insertar imágenes con su tamaño efectivo sobre todo si están en formato GIF, dado que, cuando se cambian las medidas, este formato pierde mucha calidad.

BORDER

Con el atributo BORDER podemos aplicar un borde a la imagen. Los valores son numéricos y van expresados en píxel. Si impostamos el valor BORDER en 0, la imagen no va recuadrada. Cuando omitimos este atributo, el navegador no aplica ningún borde, pero si la imagen es también un enlace automáticamente se le asignará un BORDER=1. La sintaxis correcta es:

<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 ALT="Obra de K. Haring">

HSPACE y VSPACE

Con estos dos atributos podemos establecer la distancia en píxel de la imagen a los objetos que se encuentran a los cuatro lados de la misma.
HSPACE define la distancia de los lados derecho e izquierdo de la imagen a los objetos más cercanos (texto, imágenes, apliques, etc.).
VSPACE define la distancia de los lados superior e inferior de la imagen a los objetos más cercanos (texto, imágenes, apliques, etc.). La sintaxis correcta es:

<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 VSPACE=3 HSPACE=3 ALT="Obra de K. Haring">

Estos atributos resultan útiles cuando queremos distanciar la imagen de los objetos más cercanos.

ALIGN

El atributo ALIGN define la posición de la imagen respecto al texto colocado inmediatamente antes o después de la misma. Existen varias opciones para el atributo ALIGN:

ALIGN=top: alinea la primera línea de texto con la parte superior de la imagen.

ALIGN=middle: alinea la primera línea del texto con el centro de la imagen.

ALIGN=bottom: alinea la primera línea de texto con la parte inferior de la imagen.

ALIGN=left: el texto se coloca a la derecha de la imagen empezando desde la parte superior de la misma.

ALIGN=right: el texto se coloca a la izquierda de la imagen empezando desde la parte superior de la misma.

<HTML>
<HEAD>
<META name="keywords" Content="HTML, realizacion de paginas web, portada">
<META name="description" content="Pagina web HTML">
<meta name="GENERATOR" content="Bloc de notas">
<META name="author" content="Kevin Ortiz Flores">
<TITLE>Imagenes</TITLE>
<BODY BGCOLOR="white">
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 ALT="Obra de K. Haring" align=right>
Esta lección enseña cómo insertar imágenes en los documentos HTML,
gracias al elemento IMG y a todos los atributos que se pueden aplicar.<br>
En particular, estamos tratando de la colocación del texto respecto a las imágenes con el atributo ALIGN.
</HEAD>
</HTML>

miércoles, 19 de febrero de 2014

Propiedades del tag LISTA

Junto con encabezados y párrafos, son otro de los elementos HTML más comunes. Pueden darse cinco tipos diferentes de listas, cada uno con tags distintas aunque con alguna en común:

   1.- Listas numeradas u ordenadas: Se engloban por las tags <ol>.....</ol> y cada elemento de la lista estará encabezado por la tag<li> que puede o no llevar la tag de cierre </li>. Es conveniente que cada elemento de la lista esté en una línea nueva aunque todo seguido consiga en la presentación el mismo efecto. Cuando el navegador interpreta una lista ordenada, numera y sangra cada elemento en forma secuencial, aunque se introduzcan modificaciones.

   2.- Listas con viñetas o sin orden: Se engloban por las tags <ul>.....</ul> y cada elemento de la lista, también estará encabezado por la tag <li>. El resultado es que el navegador inserta viñetas (marcadores) delante de cada elemento.

   3.- Listas de menú y de directorio: Están en desuso puesto que su resultado suele ser, prácticamente, idéntico al de las listas con viñetas.
Menú: Englobadas por las tags <menu>.....</menu> y cada elemento encabezado por la tag <li>.
Directorio: Englobadas por las tags <dir>.....</dir> y cada elemento encabezado por la tag <li>.

   4.- Listas de glosario: Cada elemento de la lista está compuesto por un término y una definición y cada una de estas partes tiene su propia tag. Estas listas se engloban con las tags <dl>.....</dl>. Para el término se usa la tag <dt> y para la definición la tag <dd>. Generalmente el navegador colocará término y definición en dos líneas diferentes pero esto se puede evitar añadiendo a la tag de apertura el atributo compact: <dl compact>.

   5.- Listas anidadas: Consiste en poner una lista dentro de otra, de manera que la lista secundaria sangre respecto a la principal. Puede jugar con los diferentes tipos de lista pero recuerde estructurar bien las tags: Las tags de la lista principal englobarán todo el conjunto de las listas y las tags de las listas secundarías se cerraran antes de volver a la lista principal. Ahora quizá le empiece a convenir sangrar el propio código conforme lo va escribiendo en HTML. 
<HTML>
<HEAD>
<TITLE>Propiedades del tag LISTA</TITLE>
</HEAD>
<BODY>
<font face="verdana" size="3">
<H1>LISTAS</H1>
<b>-Una lista ordenada</b>
<ol>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ol>
<b>-Una lista sin ordenar </b>
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
<b>-Una lista de glosario </b>
<dl>
<dt><u>T&eacute;mino 1</u></dt>
<dd><i>Definici&oacute;n 1</i></dd>
<dt><u>T&eacute;mino 2</u></dt>
<dd><i>Definici&oacute;n 2</i></dd>
</dl>
<b>-Listas anidadas </b>
<ul>
<li>Uno
   <ul>
   <i><li>Uno</li>
   <li>Dos</li>
   <li>Tres</li></i>
   </ul>
</li>
<li>Dos</li>
<li>Tres</li>
</ul>
</font>
</BODY>
</HTML>
  

Tags de control de texto

<B>, <I>, <U> son tres de las marcas de formatación tipográfica más usadas del HTML. Todas ellas deben constar de apertura y cierre:

<B> Texto en negrita </B>
El texto comprendido entre estas marcas queda formateado en negrita (la B corresponde al inglés BOLD).

<I> Texto en cursiva </I>
El texto comprendido entre estas marcas queda formateado en cursiva (la I corresponde al inglés ITALIC)

<U> Texto subrayado </U>
El texto comprendido entre estas marcas queda subrayado aun sin ser un enlace (la U corresponde al inglés UNDERLINE).

Existe también la marca STRIKE para el texto tachado:
<STRIKE> Texto tachado </STRIKE>


<HTML>

<HEAD>

<TITLE>Tags de control de texto</TITLE>

<BODY BGCOLOR="white">

<FONT FACE="arial" SIZE=7 COLOR=blue>

<B> Texto negrita con B </B><br><br>

<I> Texto cursiva con I </I><br><br>

<U> Texto subrayado con U </U><br><br>

<STRIKE> Texto tachado con STRIKE </STRIKE></FONT>

</BODY>

</HEAD>

</HTML>

 



<SUP> y <SUB>
Estas dos marcas tipográficas crean respectivamente superíndices(SUP), en los que el texto está en posición ligeramente superior respecto al texto normal, y subíndices (SUB), posición ligeramente inferior respecto al texto normal. Es posible anidar diversas marcas a fin de obtener efectos de superposición sucesiva. Estos elementos se usan, sobre todo, en las notas o en las fórmulas matemáticas.

<HTML>

<HEAD>

<TITLE>Superíndice y Subíndice</TITLE>

<BODY BGCOLOR="white">

<FONT FACE="arial" SIZE=7 COLOR=blue>

<SUP>&copy;</SUP>Superíndice<br><br>

<SUB>&copy;</SUB>Subíndice

</FONT>

</HEAD>

</HTML>