HTML 5

HTML 5.
0
1. Introducción a HTML
Este curso ha nacido con la intención de complementar a aquellos interesados
en crear y diseñar páginas en Internet. Así podrás comprender mejor de
donde surge una página de internet comenzando desde cero.
Lo primero que hay que decir es que este curso no explica ningún estándar
específico, ni examina exhaustivamente todos los parámetros de las etiquetas
HTML. Intenta ser una guía práctica, de modo que incluirá todas las cosas que
yo crea importantes y que me han provocado algún dolor de cabeza mientras
realizó páginas de internet. El curso y sus ejemplos los he probado con
Explorer 4-6 y Firefox. Hay que entender que cada navegador interpreta el
código HTML diferente y puede que el resultado visual sea diferente en cada
uno.
Requisitos
Si estás viendo este curso ya tienes en tus manos el requisito más difícil de
cumplir: un navegador (browser) y saber usar un mouse. El otro requisito es
un editor de textos con el que hacer las páginas. Da lo mismo cual. Para hacer
este curso yo utilicé el notepad, por ejemplo. Sin embargo, es posible
entender el curso sin hacer una sola página, aunque siempre es
recomendable practicar.
Puedes hacer páginas con algún editor específico de páginas web, pero no es
necesario. Es más, algunos de esos editores esconden las etiquetas HTML al
usuario, de modo que posiblemente lo que aprendas aquí te sería de poca
utilidad.
Agradecimientos
Aparte de dar las gracias a todos aquellos que visitan la web y en especial a
los que se toman la molestia de trabajar conmigo, quiero agradecer
especialmente a todos ustedes que han colaborado en participar de este
curso. Si ustedes el curso no se hubiese podido realizar, aprendo cada vez
que llega un día de clase y trato de mejorar mi prácticas de enseñanza para
poder llgar a ti.
2. Versiones del HTML
Las siglas HTML significan HyperText Markup Language, lo que para nosotros
quiere decir que es un lenguaje de hipertexto. Existen múltiples formatos de
hipertexto (por ejemplo, el prorama de ayuda en Windows “Help Center”), una
seria de páginas con instrucciones del sistema y lo que tienen en común es
que todos poseen enlaces a otros temas más especificos.
HTML 2.0
Cuando se produjo la explosión de Internet, el estándar de HTML que

circulaba era el 2.0 (establecido en noviembre del 95), de modo que cualquier
navegador que encontremos será capaz de interpretarlo hoy día.
Prácticamente todo lo que veamos en los próximos capítulos está
contemplado por este estándar.
HTML 3.0 y 3.2
Aunque la versión 2.0 cumplía bien el objetivo para el que se creó, carecía de
herramientas para tener un control en las páginas. No se consideró necesario
que lo tuviera, ya que por aquel entonces Internet era un fenómeno más bien
a la actividad académica y el contenido se basaba sobre el diseño. Debido a
ello, Netscape (líder del mercado de navegadores por aquel entonces)
empezó a incluir etiquetas nuevas no incluidas en ningún estándar.
Por estos problemas, el IETF, (el comité que suele decidir todos los
estándares dentro de Internet) comenzó a elaborar el borrador del HTML 3.0,
que resultó ser demasiado grande para la época, lo que atrasó su aceptación
en el mercado.
Esto llevó a una serie de compañías (entre ellas Netscape, Microsoft, IBM,
Sun, etc.) a crear un nuevo comité llamado W3C y 508, que es el que
actualmente elabora las nuevas versiones del HTML. Su primer trabajo
consistió en crear el borrador del HTML 3.2, que incluía muchas de las
mejoras que los principales navegadores (Netscape y Explorer) habían
introducido en Internet, como son las tablas, los applets, etc.
Este borrador fue aprobado en enero de 1997 e inmediatamente el W3C se
puso a trabajar en la elaboración del siguiente estándar: el 4.0.
HTML 4.0
En julio de 1997 se presenta el borrador de este estándar. Por fin se
estandarizan los marcos (frames), las hojas de estilo y los scripts (entre otras
cosas). El 17 de diciembre de 1997 dicho borrador fue finalmente aprobado.
HTML5.0
Primeros pasos 25 Introducción a HTML5 HTML (Hypertext Markup

Language) es un lenguaje de marcado (que no es lo mismo que un lenguaje
de programación) que sirve para definir la estructura y la semántica de nuestra
página web (luego veremos que significa esto). HTML fue creado y es
mantenido por una organización sin ánimo de lucro llamada W3C. El W3C es
un consorcio formado por más de 400 empresas (entre ellas las que
desarrollan los principales navegadores como Google, Microsoft, Mozilla,
Apple...), etc. Desde el consorcio trabajan continuamente en definir cómo
debe evolucionar este lenguaje y otros estándares que conforman la web.
Posteriormente los fabricantes de navegadores preparan los mismos
intentando conseguir que un código funcione igual en todos los navegadores.
Aunque desafortunadamente no siempre es así, cada vez es una realidad más
cercana. Por tanto, a lo largo de los años las versiones de HTML han
evolucionado: HTML 2.0 (1995), HTML 4.0 (1997), XHTML (2000), HTML5
(2014), etc. con el objetivo de adaptarse a los nuevos tiempos y así dar
soporte a nuevas necesidades (estandarización de los sistemas de audio,
vídeo, etc). Snippets interactivos Vamos a ver una breve introducción al
funcionamiento de la interfaz: Introducción a HTML5 26 1. Permite navegar
entre las diferentes lecciones 2. Permite navegar entre los diferentes snippets
3. Ejemplo de código HTML (con la sintaxis resaltada) 4. Resultado del código
(3) en embebido en la página 5. Nos permite abrir la previsualización a
pantalla completa 6. Nos permite usar el editor web Codepen.io, un editor
bastante popular para experimentar con el código. 7. Enlace a los issues de
Github donde podremos publicar cualquier duda o problema sobre los
ejemplos. Puedes acceder a esta interfaz a través de la siguiente URL:
http://libro.cursohtml5desdecero.com/snippets/html/ Introducción a HTML5 27
Etiquetas En el último estándar de HTML (HTML5) existen más de 100
elementos que nos permitirán crear etiquetas. Como comentaba al inicio del
curso no los veremos todos, de hecho no es habitual encontrar a nadie que
los conozca todos, ni siquiera los que llevamos tantos años haciendo webs, lo
importante es saber dónde buscarlos y saber cómo usarlos
3. Mi primera página
El código
Nuestra primera página se guardará con el nombre index.html
<HTML>
<HEAD>
<TITLE>Mi primera pagina</TITLE>
</HEAD>
<BODY>
<CENTER><H1>Mi Primera pagina</H1></CENTER>

<HR>
<P>Esta es mi primera pagina. Por el
momento no se que tendra, pero dentro de poco
pondre aqui muchas cosas interesantes.
</BODY>
</HTML>
La explicación
Lo primero que conviene explicar es, en qué consisten todos esos símbolos
de mayor y menor que están distribuidos por ahí. El lenguaje HTML se basa
en la sintaxis SGML (Standard Generalized Markup Language ). Esto quiere
decir que cualquier cosa que hagamos en HTML estará encerrada entre dos
etiquetas de esta manera:
<ETIQUETA parámetros> ... </ETIQUETA>
Hay ocasiones en que no es necesario cerrar la etiqueta. Mirando el código

puedes ver un par de ejemplo que ya explicaré más adelante. Lo primero que
debemos indicar es que el texto que estamos creando es un documento
HTML pues lo indicamos así:
<HTML> ... </HTML>

Un documento HTML tiene una estructura que lo separa en dos partes: cuerpo y
encabezados. En la primera estará la página en sí, mientras que en la segunda
incluiremos algunas cosas que no se ven al principio pero que pueden llegar a ser
muy importantes. Lo primero que hay que incluir en el código son los
encabezados. Lo escribimos de esta manera:
<HEAD>
</HEAD>
Dentro de los encabezados sólo hay otra etiqueta. Es la única imprescindible:

el título de la página. Es lo que veremos como título de la ventana en los
navegadores que lo permitan. Es como se conocerá nuestra página en
algunos buscadores y en los (bookmarks) de cada browser.
El cuerpo del documento

En esta área vamos a indicar el contenido de nuestra página de internet. Lo
primero será indicar que estamos en el cuerpo del documento:
<BODY> ... </BODY>
Luego pondremos el título algo recalcado:
<CENTER> <H1> ... </H1> </CENTER>
Con esto colocaremos el texto centralizado (<CENTER>) y en formato <H1>

que nos asegura que aumentará el tamaño del tipo de letra lo suficiente como
para que se vea bastante resaltado. Luego separamos ese título que le hemos
puesto a la página del texto por medio de una línea horizontal:
<HR>
La línea horizontal carece de etiqueta de cierre. Esto es normal en etiquetas

que no varían los atributos de un texto, sino que insertan un elemento. Por
ejemplo, para indicarle que queremos separar el texto de la línea horizontal
con un espacio vertical correspondiente a un párrafo nuevo le decimos:
<P>Esta es mi primera pagina. Por el

momento no se que tendra, pero dentro de
poco pondre aqui muchas cosas
interesantes.
4. Formato básico
Se pueden establecer varias categorías dentro de las etiquetas usadas para
formatear el texto. Nosotros las dividiremos entre aquellas que sirven para
cambiar párrafos enteros y las que son capaces de formatear ciertos
caracteres dentro del párrafo.
Formato del párrafo

Estas son las etiquetas más importantes (excluyendo algunas que veremos
más adelante):
Etiqueta Utilidad Resultado
Sirve para delimitar un párrafo. “Equivale a dos
<P> Inserta una línea en blanco antes del espacios”
texto.
Sirve para saltar a otra línea “Equivale a Enter”

<BR>
Permite centrar todo el texto del Yo soy normal
<CENTER> ... párrafo. Yo estoy en el centro
</CENTER>
Representa el texto encerrado en ella Esta es mi primera pagina. Por

el momento no se que tendra,
<PRE > ... con un tipo de letra fijo. Muy útil a la pero dentro de poco pondre
</PRE>
hora de escribir un párrafo. aqui muchas cosas
interesantes.
Permite justificar el texto del párrafo a Yo estoy a la izquierda

la izquierda (ALIGN=LEFT), derecha Yo al centro
<DIV (RIGHT), al centro (CENTER) o a ambos Y yo a la derecha
ALIGN=x>
márgenes (JUSTIFY )
... </DIV>
Para escribir direcciones (de esas Efraín Morales
<ADDRESS> ... donde vive la gente, no electrónicas). HC 03 BOX 24405
</ADDRESS>
Lajas PR 00667
La razón por la que se usa es para Me gustaría esto es

<BLOCKQUOTE> ...
</BLOCKQUOTE> citar un texto. Se suele implementar un párrafo con
dejando márgenes tanto a izquierda márgenes a ambos
como a la derecha, lados,
Ejemplo de justificaciones:
<HTML>
<HEAD>
</HEAD>
<BODY>
<CENTER><H1>Mi Primera pagina</H1></CENTER>

<HR
<p>
<DIV ALIGN=LEFT> Esta es mi primera pagina. Por el momento no
se que tendra,</DIV>
<DIV ALIGN=center>pero dentro de poco pondre aqui muchas cosas
interesantes.</DIV>
</BODY>
</HTML>
Los 6 formatos tamaños de letras más comunes
El HTML nos ofrece seis etiquetas distintas para mostrar tamaños. Son éstas:
Etiqueta Resultado
<H1> ... </H1>
Letra de nivel 1
<H2> ... </H2> Letra de nivel 2
Estas etiquetas se pueden definir como de formato de párrafo pero por su

importancia he preferido tratarlas aparte. No resulta recomendable utilizarlas
para aumentar o disminuir el tamaño del tipo de letra, ya que cada navegador
los muestra de manera diferente. Se usan para dividir correctamente en
secciones nuestra página, tal y como se hace en un documento de texto
normal.
Cambiando el tipo de letra
Todas estas etiquetas nos permiten cambiar de una manera u otra el aspecto
del tipo de letra que estemos utilizando y se pueden utilizar con tiras de
caracteres dentro de un párrafo.
<B> ... </B> Pone el texto en negritas. Soy un texto en Bold
Representa el texto en Estoy ladeado

<I> ... </I> cursiva.
Para subrayar algo. Como soy muy

<U> ... </U> importante estoy
subrayado
Para tachar. A mí, en cambio, nadie

<S> ... </S> me quiere
Permite representar el No soy variable

<TT> ... </TT> texto en un tipo de letra fija
más pequeño.
<SUP> ... </SUP> Letra superíndice. E=mc2
<SUB> ... </SUB> Letra subíndice. ai,j=bi,j+1
Incrementa el tamaño del Soy GRANDE

<BIG>...</BIG> tipo de letra.
Disminuye el tamaño del Creí ver un lindo gatito

<SMALL>...</SMALL> tipo de letra.
Hace parpadear el texto. ¿Molesto?

<BLINK>...</BLINK>
Resulta algo irritante y
infantil.
Formato de frase
En estos elementos indicas el tipo de información que encierran las etiquetas,

pero no como se representan:
<CITE> ... Para citar un texto ajeno. Esta frase no es mía
</CITE>
Para escribir código fuente. int x=0;

<CODE> ...
</CODE>
<STRONG> ... La cosa es importante. Hay cosas importantes.

</STRONG>
<EM> ... Para dar énfasis. Hay que poner énfasis en

</EM> algunas cosas.
<KBD> ... Texto tecleado por el El usuario debe teclear

</KBD> usuario. Enter es el mejor.
<VAR> ... Representar variables de un La variable x, definida

</VAR> código. anteriormente...
<SAMP> ... Para representar una serie Estoy en un literal

</SAMP> de caracteres literalmente.
<ABBR> ... Abreviaturas. La WWW usa el protocolo

http
</ABBR>
No son muy utilizados, ya que no permiten tener un control exacto de la

manera en que la página se representará finalmente.
Otros elementos Importantes
Por último, debemos estudiar algunas cosas que no son texto y que podemos
incorporar a nuestra página.
Inserta una
<HR> barra
horizontal.
Salto de línea. Hay un antes y un

<BR> después de saltar a otra línea
Comentarios. Esto se escribe y esto

<!--
... --
>
5. Caracteres especiales
En los ejemplos anteriores los textos de los mismos no hay acentos, ni eñes,
ni símbolos de abrir como interrogación o exclamación. Esto es debido a los
distintos caracteres que manejan las computadoras.
Las computadoras manejan la información en formato binario (es decir, en

unos y ceros). Estos, a su vez, forman números, los cuales se traducen en
letras. ¿Cómo? Mediante tablas. Podemos asignar el valor 64 a la letra a, el
65 a la b, etc.
El problema está en que cada computadora es de un fabricante distinto y

puede adoptar una tabla diferente al resto. Para evitarlo existen diversos
estándares y el más extendido es el ASCII. De hecho, actualmente todos los
computadora tienen la misma tabla ASCII para los primeros 127 caracteres.
Pero esa tabla no contiene vocales con acento, ni eñes, ni símbolos de abrir
interrogación o exclamación. El HTML 2.0 eligió como tabla estándar la ISO-
Latín-1, que comparte con la ASCII los 127 caracteres e incluye unos cuantos
más hasta el número 255.
Caracteres extendidos en HTML
La manera de incluir los caracteres extendidos (cuyo número está más allá
del 127) consiste en encerrar el código entre los caracteres &# y ;. Así
pues, lo siguiente: ½
nos debería dar un medio (½). También existe una serie de sinónimos para
poder recordar con más facilidad estos caracteres. Así, por ejemplo, ½
también se puede escribir como ½. Vamos a ver algunos de estos
códigos, los más útiles a la hora de escribir en español:
Código Resultado
á, Á, á, Á, é, É, í, Í, ó, Ó, ú y Ú
é, É,...
ñ
¿ ñyñ
¡
¿
º
ª ¡!
™ o
º
©
® ª

™o™
Caracteres de control ©
(espacio en blanco que no puede ser usado

para saltar de línea)
En el HTML existen cuatro caracteres de control, que se usan para formar

etiquetas, establecer parámetros, etc. Para poder emplearlos sin riesgo
deberemos escribir el siguiente código:
Código Resultado
< <
> >
& &
" "
6. Enlaces
Un enlace es una zona de texto o gráficos que si son seleccionados nos
trasladan a otra página o a otra posición dentro del documento actual. Son los
enlaces lo que hacen de la telaraña del internet o mejor conocida como World
Wide Web.
Los Links <A>

Para incorporar un enlace hay que utilizar esta etiqueta. Todo lo que
encerremos entre <A> y </A>, ya sea texto o imágenes, será considerado
como enlace y sufrirá dos modificaciones:
1. Se visualizará de manera distinta en el navegador. El texto aparecerá

subrayado y de un color distinto al habitual, y las imágenes estarán
rodeadas por un borde del mismo color que el del texto del enlace.
2. Al pulsar sobre el enlace, seremos enviados al documento que

apuntaba el enlace.
Para que el enlace sirva para algo debemos especificarle una dirección o
referencia. Lo haremos de la siguiente manera:
<A HREF="direccion">Pulsame</A>
La dirección estará en formato URL (Uniform Resource Locator).

Las URLs
Una URL nos indica tanto una dirección de Internet como el servicio que
esperamos nos ofrezca el servidor al que corresponde la dirección. Tiene el
siguiente formato:
servicio://servidor:puerto/ruta/pagina.html
donde el servicio podrá ser uno de los siguientes:
http
Es el servicio para transmitir páginas web y el que usaremos
normalmente en los enlaces.
https
Es una innovación sobre el anterior, que nos permite acceder a
servidores (generalmente comerciales) que nos ofrecen el uso de
técnicas de encriptación para proteger los datos que intercambiemos
con terceras personas.
ftp
Permite trasmitir files desde una computadora a otra. En general el
navegador se encargará de mostrarnos el contenido del mismo para
que podamos transferir las páginas en internet cómodamente.
mailto
Para poder mandar un mensaje. Por ejemplo, la URL
mailto:efrain@uprm.edu me mandarías un mensaje a mí.
news
Para poder acceder a foros de noticias.
SSH
Nos permite conectarnos con otras computadoras y entrar en ellas
como si fuese la nuestra. Permite modificar privilegios y accesos a
nuestras páginas.
La dirección de la máquina puede ser, o bien una serie de cuatro números

entre 0 y 255 (123.3.5.65) o bien algo más fácil de recordar como es una serie
de palabras separadas por puntos (www.uprm.edu). El puerto generalmente
no se indica, ya que el servicio predetermina uno automáticamente. La ruta es
una serie de directorios separados por el símbolo /, que es el utilizado en
UNIX (el sistema operativo más usado en los servidores de Internet).Existe
otro formato de URL. Cuando queremos acceder a una página en nuestra
computadora:
C:\My Documents\html\index.html
Anclas
Como dijimos, es posible acceder a una posición en la misma página dentro
del mismo documento HTML. Para hacerlo, primero debemos especificar el
lugar del documento al que queremos acceder:
<A NAME="ancla">
Para poder acceder a ese lugar incluimos el enlace de esta manera:
<A HREF="#ancla">Regresa al comienzo</A>
También podemos acceder a anclas situadas en documentos remotos. Para

ello añadiremos el nombre del ancla al URL así:
<A HREF="enlaces.html#ancla">Otra vez</A>
7. Listas
Existen varios tipos de listas en HTML. Todas ellas se pueden mezclar unas
dentro de. Todos los tipos siguen el siguiente formato:
<ul>
<LI>Primer elemento
<LI>Segundo elemento
</ul>
ul puede ser una de las siguientes: DIR, OL y UL.
Listas desordenadas
La etiqueta <UL> nos permite presentar listas de elementos sin orden alguno.
Cada elemento de la lista irá normalmente precedido por un círculo (bullets).
Por ejemplo,
<UL>
<LI>Primer elemento
</UL>
se verá como
• Primer elemento
• Segundo elemento
La etiqueta <UL> admite estos parámetros:
Parámetro Utilidad Resultado

Indica al navegador que debe • Primer
COMPACT elemento
representar la lista de la manera
más compacta posible. • Segundo
elemento
TYPE="disc", Indica al navegador el dibujo que • Tipo disc o

"circle", precederá a cada elemento de la Tipo circle ß
lista. Para mayor flexibilidad se Tipo square
"square" admite también como parámetro
de <LI>.
Listas ordenadas por números
La etiqueta <OL> nos permite presentar listas de elementos ordenados de

menor a mayor. Normalmente cada elemento de la lista irá precedido por su
número en el orden. Por ejemplo,
<OL>
<LI>Primer elemento
</OL>
se verá como
1. Primer elemento
2. Segundo elemento
La etiqueta <OL> admite estos parámetros:
Parámetro Utilidad Resultado
Indica al navegador que debe 1. Primer
COMPACT
representar la lista de la manera elemento más compacta posible. 2.
Segundo
elemento
TYPE="1", "a", Indica al navegador el tipo de 1. Tipo 1 b.
numeración que precederá a cada Tipo a
"A", "i", "I" C. Tipo A iv.
elemento de la lista. Para mayor
flexibilidad se admite también Tipo i
como parámetro de <LI>. V. Tipo I
Indica al navegador el número 3. Primer

START="num"
por el que se empezará a contar elemento los
elementos de la lista. 4. Segundo elemento
Atributo de <LI>, actúa 1. Primer elemento
VALUE="num"
como START pero a partir
1. Segundo
de un elemento elemento
predeterminado.
2. Tercer elemento
Listas de definiciones
Este es el único tipo de lista que no utiliza la etiqueta <LI>. Al tener como
objetivo presentar una lista de definiciones, de modo que tiene que
representar de manera distinta el objeto definido y la definición. Esto se hace
por medio de las etiquetas <DT> y <DD>:
<DL> <DT>Primer
elemento<DD>Lista #1.
<DT>Segundo elemento<DD>Lista #2.
</DL>
se verá como
Primer elemento
Lista #1.
Segundo elemento
Lista # 2.
8. Imágenes
Para incluir gráficos e imágenes en nuestras páginas utilizaremos la etiqueta
<IMG>
de esta manera:
<IMG SRC="referencia" ALT="descripcion">
El parámetro SRC especifica el nombre de referencia que contiene el

gráfico. Los formatos estándar en la red son el GIF y el JPG. Las últimas
versiones de browsers aceptan también el formato PNG.
El parámetro ALT especifica el texto que se mostrará en lugar del gráfico en

aquellos navegadores que no sean capaces de mostrarlos (como el Lynx) y
cuando el usuario los haya desactivado. Algunos navegadores muestran la
descripción cuando pasamos el mouse por encima de la imagen. Es por eso
que, aunque algunos usuarios no lo lleguen a ver nunca, conviene ponerlo
siempre. De hecho, el estándar HTML 4.0 obliga a hacerlo.
Existen dos atributos que, aunque opcionales, conviene indicar siempre: la

altura y la anchura del gráfico en píxeles. De este modo, el navegador puede
mostrar dibujar el la imagen correctamente mientras la va leyendo de la red y
así poder mostrar el resto de la página.
<IMG SRC=http://www.uprm.edu/media/homebdg1.gif" ALT="RUM"

WIDTH=73 HEIGHT=36>
Se ve así:
Para los menos avezados en inglés, decir que WIDTH es la anchura y

HEIGHT la altura.
Imágenes y enlaces
Suele ser común incluir enlaces dentro de un gráfico. En ese caso, los
navegadores le pondrán un borde al gráfico para indicar que efectivamente es
un enlace. Práctico, pero la mayoría de las veces bastante poco estético. Por
medio del parámetro BORDER podremos alterar el borde o incluso
esconderlo.
<A HREF="http://www.uprm.edu">
<IMG SRC=" http://www.uprm.edu/media/homebdg1.gif "
ALT="RUM" WIDTH=73 HEIGHT=36>
</A>
Sin embargo,
<A HREF="http://www.uprm.edu ">

ALT="RUM" WIDTH=73 HEIGHT=36 BORDER=0>
</A>
Se ve así:
Alineación respecto al texto
Para poder organizar conjuntamente texto y gráficos, el HTML proporciona,

por medio del parámetro ALIGN, las siguientes maneras de alinear una
imagen respecto del texto que la acompaña:
Valor de Utilidad Resultado
ALIGN
TOP Coloca el punto más alto de la
Este es el texto arriba
imagen coincidiendo con más alto de
la línea de texto actual.
MIDDLE Alinea el punto medio (en altura) de
la imagen con la base del texto. El texto centralizado
BOTTOM(Por Alinea el punto más bajo de la imagen

defecto) con la base del texto. El texto debajo
LEFT
Coloca la imagen a la izquierda Este es el texto
del texto.
RIGHT
Coloca la imagen a la derecha del Este es el texto
texto.
9. Imágenes
Para incluir gráficos e imágenes en nuestras páginas utilizaremos la etiqueta
<IMG>
de esta manera:
ALT="descripcion">
El parámetro SRC especifica el directorio que contiene el gráfico. Los

formatos estándares en la internet son el GIF y el JPG. Las últimas versiones
de navegadores aceptan también el formato PNG.
El parámetro ALT especifica el texto que se mostrará en lugar del gráfico en

aquellos navegadores que no sean capaces de mostrarlos y si el usuario los
haya desactivado. Algunos navegadores lo muestran cuando pasamos el
ratón por encima de la imagen. Es por eso que, aunque algunos usuarios no
lo lleguen a ver nunca, conviene ponerlo siempre. De hecho, el estándar
HTML 4.0 obliga a hacerlo.
Existen dos atributos que, aunque opcionales, conviene indicar siempre: la

altura y la anchura del gráfico en píxeles. De este modo, el navegador puede
mostrar un recuadro del tamaño de la imagen mientras la va leyendo y así
poder mostrar el resto de la página correctamente mientras carga las
imágenes.
<IMG SRC= http://www.uprm.edu/media/homebdg1.gif "

Se ve así:
Imágenes y enlaces
Suele ser común incluir enlaces dentro de un gráfico. En ese caso, los
navegadores le pondrán un borde al gráfico para indicar que efectivamente es
un enlace. Práctico, pero la mayoría de las veces bastante poco estético. Por
medio del parámetro BORDER podremos alterar el grosor de ese borde o
incluso eliminarlo poniéndolo en cero.
<A HREF=" http://www.uprm.edu/media/homebdg1.gif ">

</A>
Se ve así:
Sin embargo,
<A HREF=" http://www.uprm.edu">

ALT="RUM" WIDTH=73 HEIGHT=36 BORDER=0>
</A>
Se ve así:
Alineación respecto al texto
Para poder organizar conjuntamente texto y gráficos, el HTML proporciona,

por medio del parámetro ALIGN, las siguientes maneras de alinear una
imagen respecto del texto que la acompaña:
Valor de Utilidad
ALIGN
TOP Coloca el punto más alto de la imagen coincidiendo con más
alto de la línea de texto actual.
MIDDLE Alinea el punto medio (en altura) de la imagen con el texto.
BOTTOM Alinea el punto más bajo de la imagen con el texto.
LEFT
Coloca la imagen a la izquierda del texto.
RIGHT
Coloca la imagen a la derecha del texto.
Hay que aclarar que la base del texto es la línea donde descansan casi todas
las letras del alfabeto excepto algunas como la p, la g o la j.
10. Formato de Letras

Lo ideal cuando trabajas con texto sería poder cambiarlo al tamaño que te
viniese bien, ponerlo en colores y cambiar el tipo de letra. Todo esto puedes
hacerlo gracias a la etiqueta <FONT>.
Cambio de color
Para hacerlo vamos a utilizar el parámetro COLOR. La manera más fácil de

especificarle el color es común en todas las etiquetas HTML: o bien indicando
el nombre, si es un color normal, o bien especificando el porcentaje de rojo,
verde y azul (código RGB) del mismo. Los colores reconocidos son los
siguientes:
Black Silver Gray White Maroon Red Purple Fuchsia Green Lime
Olive Yellow Navy Blue Teal Aqua
<FONT color="red">Estoy en rojo</FONT>
El modo de indicar el color RGB es el siguiente:
<FONT COLOR="#FF0000">D</FONT>
La primera componente en hexadecimal es el rojo, la segunda el verde
y la tercera el azul (Red, Green, Blue, RGB).
Tamaños del texto

El parámetro utilizado para indicar el tamaño es SIZE. Puede utilizarse para
indicar tamaños absolutos:
SIZE=1 SIZE=2 SIZE=3 SIZE=4 SIZE=5 SIZE=6 SIZE=7

El tamaño normal es 3. También se puede utilizar los modificadores + y - para
indicar un incremento (o decremento) relativo del tamaño del tipo de letra. Así,
por ejemplo, si indicamos que queremos un tamaño de -2 estaremos pidiendo
al navegador que nos muestre el tipo de letra dos veces más pequeño.
<FONT SIZE=2>Tamaño 2</FONT>
Tipo de letra
Por último, podemos especificar el nombre del tipo de letra que queremos
utilizar gracias al parámetro FACE. Como en principio no tenemos manera de
saber que tipo de letra tiene instalado la computadora del usuario que está
viendo nuestras páginas, podemos indicar más de uno separado por comas.
Si el navegador no encuentra ninguno seguirá utilizando el que tiene por
estándar:
<FONT FACE="Helvetica, Arial, Times"> RUM </FONT>
De todos modos es recomendable no utilizar con fe ciega este atributo en

Internet, ya que impide que todos puedan ver nuestras páginas como nosotros
queremos. El Internet debería ser lo más estándar posible.
11. Estructura del documento

La estructura de un documento HTML se puede resumir así:
tipo de documento
<HTML>
<HEAD>
<TITLE>titulo de la página</TITLE>
cosas que afectan a la página pero no a su contenido
</HEAD>
<BODY parámetros>
contenido de la página
</BODY>
</HTML>
En el tipo de documento deberemos especificar a que estándar del

HTML responde nuestra página entre una de las siguientes opciones:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
Cumple el estándar HTML 2.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

Cumple el estándar HTML 4.0 y no contiene además
elementos desaconsejables
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">

Es una definición de marcos que cumple el estándar
HTML 4.0
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
El HTML 4.0 considera aquellos elementos de las primeras versiones

soportados, aunque muchos han sido sustituidos por otros más potentes y es
posible que sean eliminados del estándar HTML en el futuro.
Encabezados
Suele ser el lugar más indicado para colocar aquellos elementos de la página
que no alteren el contenido de la misma, aunque si la forma de presentar la
página y su comportamiento en internet. Es por eso que es el lugar más
recomendable para colocar los scripts y algunos estílos, como veremos en los
capítulos correspondientes.
Además del título de la página, uno de los elementos que se pueden incluir
aquí son los META. Entre otras cosas, sirven para indicar propiedades de la
página como pueda ser el nombre de su autor.
<META NAME="GENERATOR" CONTENT="Mozilla/4.03 [es] (WinXP;

I) Author=”Efrain Morals">
Por ejemplo, nos indicaría la herramienta con que hemos creado la página (en
este caso la versión 4.03 en español para Windows XP y el autor. Estas son
las propiedades más comunes:
Propiedad Utilidad
AUTHOR Autor de la página.
GENERATOR Herramienta utilizada para hacer la página.
CLASSIFICAT Palabras que permite clasificar la página dentro de un
ION
buscador (como Google).
KEYWORDS Palabras clave por las que encontrarán la página en los buscadores.
DESCRIPTI Descripción del contenido de la página.
ON
Hay también otro elemento interesante que podremos incluir en nuestros
encabezados. Cuando especificamos un URL relativo en un enlace, el
principio es para acceder a una página situada en nuestro mismo servidor. Sin
embargo, si especificamos:
<BASE HREF="http://www.uprm.edu/news">
Ahora todas nuestras URLs relativas se referirán al directorio /news dentro del
servidor http://www.uprm.edu
El cuerpo <BODY>
Obviamente no voy a explicar lo que entra dentro del cuerpo
(prácticamente todos los capítulos del curso intentan
hacerlo), sino los parámetros que admite la etiqueta
<BODY>:
BACKGROUND Permite definir un gráfico de fondo para
la página.
BGCOLOR Permite definir el color de fondo de la
página.
Cuando es igual a FIXED el gráfico
BGPROPERTIES definido como fondo de la página
permanecerá inmóvil aunque utilicemos las
barras de desplazamiento.
TEXT Cambia el color del texto.
LINK Cambia el color de un enlace no visitado
(por estándar es azul).
VLINK Cambia el color de un enlace ya visitado
(por estándar púrpura).
ALINK Cambia el color que toma un enlace
mientras lo estamos pulsando (por estándar
rojo).
LEFTMARGIN y Especifican el número de píxeles que
dejará de margen entre el borde de la
ventana y el contenido de la página. Se
TOPMARGIN suelen utilizar para dejarlos a cero.
MARGINWIDTH y Más o menos equivalentes a los anteriores,
pero éstos funcionan en Netscape.
MARGINHEIGHT
No resulta recomendable cambiar los colores del texto y
enlaces a no ser que exista alguna dificultad al leerlos
por haber cambiado el fondo, ya que en muchas ocasiones
el usuario ha podido cambiarlos en las opciones de su
navegador y estarán ya a su gusto.
12. Tablas
Las tablas son posiblemente la manera más clara de organizar la información.
También es el modo más adecuado de organizar texto y gráficos de una
manera algo más controlada que con los parámetros ALIGN.
Las tablas se definen de la siguiente manera. Primero, las características de la

tabla, luego las de cada fila y dentro de ésta, cada celda. Así pues, una tabla
con 2 filas y 3 columnas se declarará así:
<TABLE> 1,2 1,3
<TR> 1,1
<TD>1,1</TD> 2,2 2,3
<TD>1,2</TD> 2,1
<TD>1,3</TD>
</TR>
<TR>
<TD>2,1</TD>
<TD>2,2</TD>
<TD>2,3</TD>
</TR>
</TABLE>
Como puedes ver (o mejor no ver) la tabla no tiene mucho aspecto de tabla.
Quedaría mejor con unos bordes, ¿no? Puede que tampoco le viniese mal un
mayor espacio entre celdas o mayor anchura. Estas son las cosas que
podremos cambiar con los atributos de TABLE:
BORDER Especifica el grosor del borde que se dibujará alrededor de las
celdas. Por estándar es cero, lo que significa que no dibujará
borde alguno.
CELLSPACING Define el número de píxeles que separarán las celdas.
CELLPADDING Especifica el número de píxeles que habrá entre el borde de una
celda y su contenido.
WIDTH Especifica la anchura de la tabla. Puede estar tanto en píxeles
como en porcentaje de la anchura total disponible.
(Pondremos "100%" si queremos que ocupe todo el ancho de la
ventana del navegador).
ALIGN Alinea la tabla a izquierda (LEFT), derecha (RIGHT) o al centro
(CENTER).
Ahora si, por ejemplo definimos la tabla anterior como <TABLE BORDER=1
WIDTH="50%" ALIGN=CENTER> veremos lo siguiente:
1 ,1 1 ,2 1 ,3
2 ,1 2 ,2 2 ,3
Definir las filas <TR>
Ahora que hemos definido la tabla nos toca hacer lo mismo con las filas. Cada
fila se define con una etiqueta TR, que tiene los siguientes atributos:
ALIGN Alinea el contenido de las celdas de la fila horizontalmente a
izquierda (LEFT), derecha (RIGHT) o centro (CENTER).
VALIGN Alinea el contenido de las celdas de la fila verticalmente arriba (TOP),
abajo (BOTTOM) o centro (MIDDLE).
Definir las celdas <TD>
Por último, nos queda definir cada celda gracias a la etiquetas TD y TH. Estas
etiquetas son equivalentes, pero la última se utiliza para encabezados, de
modo que su interior se escribirá por estándar en negrita y centrado. Estos
son los atributos de ambas:
ALIGN Alinea el contenido de la celda horizontalmente a izquierda (LEFT),
derecha (RIGHT) o centro (CENTER).
VALIGN Alinea el contenido de la celda verticalmente arriba (TOP), abajo
(BOTTOM) o centro (MIDDLE).
WIDTH Especifica la anchura de la celda. También se puede especificar tanto
en píxeles como en porcentaje, teniendo en cuenta que, en este
último caso, será un porcentaje respecto al ancho total de la tabla (no
de la ventana del navegador).
NOWRAP Impide que, en el interior de la celda, se rompa la línea en un espacio.
COLSPAN Especifica el número de celdas de la fila situadas a la derecha de la
actual que se unen a ésta (incluyendo la celda en que se declara
este parámetro). Es por estándar uno. Si se pone igual a cero, se
unirán todas las celdas que queden a la derecha. (Join)
ROWSPAN Especifica el número de celdas de la columna situadas debajo de la
actual que se unen a ésta.
Posiblemente los dos últimos parámetros no puedan quedar

claros sin ejemplos. De hecho, aún entendiendo
perfectamente su función es habitual que confundamos a
uno con otro. Pero bueno, vamos a ver una tabla de 3x3
con una celda que se une a una de la derecha y otra que
se une a otra de debajo:
<TABLE BORDER=1> 1,1 y 1,2 1,3
<TR>
<TD COLSPAN=2>1,1 y 1,2</TD> 2,2 2,3
<TD>1,3</TD> 2,1 y 3,1
</TR> 3,2 3,3
<TR>
<TD ROWSPAN=2>2,1 y 3,1</TD>
<TD>2,2</TD>
<TD>2,3</TD>
</TR>
<TR>
<TD>3,2</TD>
<TD>3,3</TD>
</TR>
</TABLE>
Como podemos ver, cuando declaramos una celda con ROWSPAN o COLSPAN,
no debemos declarar las celdas "absorbidas" o la creación de la tabla se nos
complicará de horrible manera.
Título de la tabla
Por último, vamos a ver como definir un título a la tabla. Esto se hace por
medio de la etiqueta CAPTION. Para ver cómo funciona, vamos a incluirlo en
la declaración de la tabla anterior:
<TABLE BORDER=1>
<CAPTION> Ejemplo de tablas
Ejemplo de 1,1 y 1,2
tablas 2, 1 , 3
1 y 3,1 2,2 2,3
</CAPTION> ...
</TABLE> 3,2 3,3
Esta etiqueta admite sólo un parámetro: ALIGN, que es por defecto TOP. Si lo
definimos como BOTTOM el título se colocará al final de la tabla en lugar del
comienzo
Estructura de una tabla
1. La etiqueta general, que engloba a todas las demás

es <TABLE> y </TABLE>. Es decir:
<TABLE>
[resto de las etiquetas]
</TABLE>
2. En el siguiente nivel, dentro de la anterior, están las etiquetas para formar

cada fila (row) de la tabla, que son <TR> y </TR>. Hay
que repetirlas tantas veces como filas queremos que tenga la tabla. Es
decir, para una tabla con dos filas, sería:
<TABLE>
<TR>
[etiquetas de las distintas celdas de la primera fila]
</TR>
<TR>
[etiquetas de las distintas celdas de la segunda fila]
</TR>
</TABLE>
3. En el último nivel (dentro de las anteriores) están las etiquetas de

cada celda, que son <TD> y </TD>, que engloban el contenido de cada celda
concreta (texto, imágenes, etc.). Hay que repetirla tantas veces como
celdas queremos que haya en esa fila.
Veamos un ejemplo de una tabla con dos filas. Cada fila va a tener tres
celdas. Dentro de cada celda vamos a poner un texto indicativo de la
posición de dicha celda:
<TABLE>
<TR>
<TD>fila1-celda1</TD> <TD>fila1-celda2</TD> <TD>fila1-celda3</TD>
</TR>
<TR>
<TD>fila2-celda1</TD> <TD>fila2-celda2</TD> <TD>fila2-celda3</TD>
</TR>
</TABLE>
Que resulta:
fila1-celda1 fila1-celda2 fila1-celda3
Filas con desigual número de celdas
En este ejemplo hemos puesto dos filas con igual número de celdas. ¿Qué pasa si ese
número es distinto? Pues el navegador forma el número de filas y columnas que haga falta,
dejando espacios en blanco en las filas que tengan menos celdas.
Si en el ejemplo anterior eliminamos la tercera celda de la segunda fila, es decir si

borramos <TD>fila2-celda3</TD>, resultará:
fila2-celda1 fila2-celda2
Variando el espesor de los bordes
El atributo BORDER permite establecer el espesor del borde de la tabla:
<TABLE BORDER=número deseado>
Si en el ejemplo anterior ponemos:
<TABLE BORDER=5>
Resultará:
Contenido de las celdas
Hasta ahora, en todos los ejemplos se ha puesto un texto normal dentro de las
distintas celdas. Pero se puede poner en ellas cualquier otro elemento de los
que van en un documento HTML, como imágenes, enlaces, etc. No hay más que
poner dentro de la etiqueta de la celda la etiqueta correspondiente a una
imagen, un enlace, etc.
Ejemplo con una imagen:
<TABLE BORDER=2>
<TR><TD><IMG SRC="imagenes/babe.gif"></TD></TR>
</TABLE>
Ejemplo con un enlace:
<TABLE BORDER=2>
<TR><TD><A HREF="index.html">Página principal </A></TD></TR>
</TABLE>
Página principal
Posicionamiento del contenido dentro de la celda
Normalmente, el contenido de una celda está alineado a la izquierda. Pero se

puede cambiar esto añadiendo dentro de la etiqueta de la celda los siguientes
atributos:

Al centr
<TD ALIGN=CENTER> Al centro </TD>
<TD ALIGN=RIGHT> A la derecha </TD>
A la derec
El alineamiento por defecto en el sentido vertical es en el medio. También se

puede cambiar, añadiendo dentro de la etiqueta de la celda los siguientes atibutos:
<TD VALIGN=TOP> Arriba </TD>
<TD VALIGN=BOTTOM> Abajo </TD>
Arriba
Abajo
Variando las dimensiones de la tabla
El navegador da tamaño a la tabla de acuerdo con el número de filas, de

columnas, por el contenido de las celdas, espesor de los bordes, etc.
A veces nos puede convenir forzarle para que la tabla tenga unas dimensiones
totales mayores que las que le corresponden, tanto en anchura como en longitud.
Esto se consigue añadiendo dentro de la etiqueta de la tabla los
atributos WIDTH y HEIGHT igual a un porcentaje de la dimensión de la pantalla,
o a una cifra que equivale al número de pixels.
Por ejemplo, si en el último ejemplo ponemos:
<TABLE WIDTH=60%>
Arriba
Abajo
O, si en ese mismo ejemplo, ponemos:
<TABLE HEIGHT=200>
Arriba
Abajo
Celdas que abarcan a otras varias
A veces puede interesarnos que una celda se extienda sobre otras varias.
Esto se consigue añadiéndo dentro de la etiqueta de la celda los
atributos COLSPAN=número para extenderse sobre un número determinado de
columnas, o ROWSPAN=número para extenderse verticalmente sobre un número
determinado de filas.
Por ejemplo, en la primera tabla de este capítulo vamos a añadir una fila con una
sola celda, que abarca a dos columnas:
<TR> <TD COLSPAN=2> Celda sobre 2 columnas </TD> <TR>
Celda sobre 2 columnas

O, en la misma tabla, vamos a añadir una celda en la primera fila. pero que abarque
también a la siguiente:
<TD ROWSPAN=2> Celda junto a 2 filas </TD>

Celda junto a 2 filas
Color de fondo en las tablas
Podemos conseguir que las tablas tengan un color de fondo, siguiendo un

procedimiento totalmente análogo al empleado para que una página tenga un color
de fondo uniforme. Para ello debemos utilizar el atributo BGCOLOR="#XXYYZZ".
Se puede conseguir:
1. Que la totalidad de la tabla tenga un color de fondo. Para ello, colocamos

el atributo dentro de la etiqueta TABLE. Por ejemplo, vamos a hacer que la
tabla tenga un fondo verde (#00FF00):
2. <TABLE BORDER BGCOLOR="#00FF00">
3. <TR> <TD>fila1-celda1</TD> <TD>fila1-celda2</TD> </TR>
5. </TABLE>
Que resulta:
6. Que sólamente una celda determinada tenga un color de fondo. Para ello,

colocamos el atributo dentro de la etiqueta de la celda correspondiente. Por
ejemplo, vamos a hacer que sólo la celda 1 de la fila 1 tenga un color verde:
7. <TABLE BORDER>
8. <TR><TD BGCOLOR="#00FF00">fila1-celda1</TD><TD>fila1-
celda2</TD></TR>
10. </TABLE>
Que resulta:
11. Que la generalidad de las celdas tenga un color, pero que alguna celda tenga
uno particular. El atributo del color general se coloca en la etiqueta TABLE, y
el del color particular en la etiqueta de la celda en cuestión
(una combinación de los dos casos anteriores). Por ejemplo, vamos a hacer
que la generalidad de la tabla sea de color rojo (#FF0000), pero que la celda
1 de la fila 1 sea de color verde (#00FF00):
12. <TABLE BORDER BGCOLOR="#FF0000">
13. <TR><TD BGCOLOR="#00FF00">fila1-celda1</TD><TD>fila1-
celda2</TD></TR>
15. </TABLE>
Que resulta:
Imágenes de fondo en las tablas
El Explorer de Microsoft soporta la colocación de imágenes de fondo en el

interior de las tablas, de una manera análoga a como se hace en una página.
Para ello debemos utilizar el
atributo BACKGROUND="imagen.gif" o BACKGROUND="imagen.jpg",
visto en dicho capítulo.
Si se utiliza dentro de la etiqueta <TABLE> la imagen en cuestión se multiplicará detrás de

todas las celdas.
Por ejemplo, si ponemos:
<TABLE BORDER BACKGROUND="nubes.jpg">

(Se omite el resto de las etiquetas de la tabla)
Obtenemos:
(Con el Netscape no se verá ninguna imagen de fondo, sólo con el Explorer)
Si, por el contrario, sólo se pone este atributo dentro de la etiqueta de una celda
concreta (<TD>), entonces la imagen de fondo se verá sólo en esa celda, como por
ejemplo:
Separación entre las celdas de una tabla
Por defecto, la separación entre las distintas celdas de una tabla es de dos

pixels. Pero se puede variar esto con el atributo CELLSPACING, que se pone
dentro de la etiqueta TABLE.
Por ejemplo, para obtener una separación de 20 pixels entre celdas ponemos:
<TABLE BORDER CELLSPACING=20>

Con lo que se obtiene:
A primera vista parece como si esto fuera lo mismo que si hubiéramos aumentado
el espesor de los bordes. Pero para comprobar que no es así, hagamos que en el
caso anterior, tenga además unos bordes de 5 de espesor:
<TABLE BORDER=5 CELLSPACING=20>

Separación entre el borde y el contenido dentro de las celdas
Por defecto, la separación entre el borde y el contenido dentro de las celdas

es de un pixel. Se puede cambiar esto con el atributo CELLPADDING, que se
pone dentro de la etiqueta TABLE.
Por ejemplo, para obtener una separación de 20 pixels entre el contenido y los
bordes, dentro de cada celda:
<TABLE BORDER CELLPADDING=20>

Se puede combinar este atributo con CELLSPACING.
Por ejemplo, una tabla con bordes de 5 de espesor, separación entre celdas de 15
y separación del contenido con respecto a los bordes de las celdas de 20, lo
obtendríamos con:
<TABLE BORDER=5 CELLSPACING=15 CELLPADDING=20>

HTML 5

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML 5

Cargado por

Copyright:

Formatos disponibles

HTML 5.

Cuando se produjo la explosión de Internet, el estándar de HTML que

HTML 3.0 y 3.2

puso a trabajar en la elaboración del siguiente estándar: el 4.0.

Primeros pasos 25 Introducción a HTML5 HTML (Hypertext Markup

<CENTER><H1>Mi Primera pagina</H1></CENTER>

<ETIQUETA parámetros> ... </ETIQUETA>

Hay ocasiones en que no es necesario cerrar la etiqueta. Mirando el código

<HTML> ... </HTML>

<TITLE>Mi primera pagina</TITLE>

Dentro de los encabezados sólo hay otra etiqueta. Es la única imprescindible:

El cuerpo del documento

<BODY> ... </BODY>

Luego pondremos el título algo recalcado:

<CENTER> <H1> ... </H1> </CENTER>

Con esto colocaremos el texto centralizado (<CENTER>) y en formato <H1>

La línea horizontal carece de etiqueta de cierre. Esto es normal en etiquetas

<P>Esta es mi primera pagina. Por el

Formato del párrafo

Sirve para saltar a otra línea “Equivale a Enter”

Representa el texto encerrado en ella Esta es mi primera pagina. Por

Permite justificar el texto del párrafo a Yo estoy a la izquierda

La razón por la que se usa es para Me gustaría esto es

<CENTER><H1>Mi Primera pagina</H1></CENTER>

Los 6 formatos tamaños de letras más comunes

<H6> ... </H6> Letra de nivel 6

Estas etiquetas se pueden definir como de formato de párrafo pero por su

Representa el texto en Estoy ladeado

Para subrayar algo. Como soy muy

Para tachar. A mí, en cambio, nadie

Permite representar el No soy variable

<SUP> ... </SUP> Letra superíndice. E=mc2

<SUB> ... </SUB> Letra subíndice. ai,j=bi,j+1

Incrementa el tamaño del Soy GRANDE

Disminuye el tamaño del Creí ver un lindo gatito

Hace parpadear el texto. ¿Molesto?

En estos elementos indicas el tipo de información que encierran las etiquetas,

Para escribir código fuente. int x=0;

<STRONG> ... La cosa es importante. Hay cosas importantes.

<EM> ... Para dar énfasis. Hay que poner énfasis en

<KBD> ... Texto tecleado por el El usuario debe teclear

<VAR> ... Representar variables de un La variable x, definida

<SAMP> ... Para representar una serie Estoy en un literal

<ABBR> ... Abreviaturas. La WWW usa el protocolo

No son muy utilizados, ya que no permiten tener un control exacto de la

Salto de línea. Hay un antes y un

Comentarios. Esto se escribe y esto

Las computadoras manejan la información en formato binario (es decir, en

El problema está en que cada computadora es de un fabricante distinto y

(espacio en blanco que no puede ser usado

En el HTML existen cuatro caracteres de control, que se usan para formar

Los Links <A>

1. Se visualizará de manera distinta en el navegador. El texto aparecerá

2. Al pulsar sobre el enlace, seremos enviados al documento que

La dirección estará en formato URL (Uniform Resource Locator).

donde el servicio podrá ser uno de los siguientes:

La dirección de la máquina puede ser, o bien una serie de cuatro números

Para poder acceder a ese lugar incluimos el enlace de esta manera:

<A HREF="#ancla">Regresa al comienzo</A>

También podemos acceder a anclas situadas en documentos remotos. Para

<A HREF="enlaces.html#ancla">Otra vez</A>

ul puede ser una de las siguientes: DIR, OL y UL.

La etiqueta <UL> admite estos parámetros:

Parámetro Utilidad Resultado