Elementos

Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades
básicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para
que se considere válido al documento HTML. Un elemento generalmente tiene una
etiqueta de inicio (p.ej. <nombre-de-elemento>) y una etiqueta de cierre (p.ej.
</nombre-de-elemento>). Los atributos del elemento están contenidos en la etiqueta de
inicio y el contenido está ubicado entre las dos etiquetas (p.ej. <nombre-de-
elemento atributo="valor">Contenido</nombre-de-elemento>). Algunos elementos,
tales como <br>, no tienen contenido ni llevan una etiqueta de cierre. Debajo se listan
varios tipos de elementos de marcado usados en HTML.

Estructura general de una línea de código en el lenguaje de etiquetas HTML

El marcado estructural describe el propósito del texto. Por ejemplo, <h2>Golf</h2>

establece a "Golf" como un encabezamiento de segundo nivel, el cual se mostraría en un
navegador de una manera similar al título "Marcado HTML" al principio de esta
sección. El marcado estructural no define cómo se verá el elemento, pero la mayoría de
los navegadores web han estandarizado el formato de los elementos. Un formato
específico puede ser aplicado al texto por medio de hojas de estilo en cascada.

El marcado presentacional describe la apariencia del texto, sin importar su función. Por
ejemplo, <b>negrita</b> indica que los navegadores web visuales deben mostrar el
texto en negrita, pero no indica qué deben hacer los navegadores web que muestran el
contenido de otra manera (por ejemplo, los que leen el texto en voz alta). En el caso de
<b>negrita</b> e <i>itálica</i>, existen elementos que se ven de la misma manera pero
tienen una naturaleza más semántica: <strong>enfásis fuerte</strong> y
<em>énfasis</em>. Es fácil ver cómo un lector de pantalla debería interpretar estos dos
elementos. Sin embargo, son equivalentes a sus correspondientes elementos
presentacionales: un lector de pantalla no debería decir más fuerte el nombre de un
libro, aunque éste esté en itálicas en una pantalla. La mayoría del marcado
presentacional ha sido desechada con HTML 4.0, en favor de Hojas de estilo en
cascada.

El marcado hipertextual se utiliza para enlazar partes del documento con otros
documentos o con otras partes del mismo documento. Para crear un enlace es necesario
utilizar la etiqueta de ancla <a> junto con el atributo href, que establecerá la dirección
URL a la que apunta el enlace. Por ejemplo, un enlace a la Wikipedia sería de la forma
<a href=”es.wikipedia.org”>Wikipedia</a>. También se pueden crear enlaces sobre
otros objetos, tales como imágenes <a href=”enlace”><img src=”imagen” /></a>.
Atributos

La mayoría de los atributos de un elemento son pares nombre-valor, separados por un

signo de igual "=" y escritos en la etiqueta de comienzo de un elemento, después del
nombre de éste. El valor puede estar rodeado por comillas dobles o simples, aunque
ciertos tipos de valores pueden estar sin comillas en HTML (pero no en XHTML). De
todas maneras, dejar los valores sin comillas es considerado poco seguro. En contraste
con los pares nombre-elemento, hay algunos atributos que afectan al elemento
simplemente por su presencia (tal como el atributo ismap para el elemento img)

Párrafos y alineación
En la lección anterior hemos visto como formatear un sencillo texto en HTML. Ahora
nos centraremos en cómo disponer, dividir y colocar el texto y demás objetos de una
página HTML dentro del documento.

Crear párrafos con <P>

La marca <P> sirve para definir un nuevo párrafo de texto, indicando al navegador que
el mismo debe empezar en una nueva línea y colocarse a la derecha, a la izquierda o
centrado. Si no se especifica otra cosa, la marca <P> alinea el texto por defecto a la
izquierda. Para indicar otros tipos de alineación, existen atributos específicos:

<P ALIGN=left>

Define un párrafo y alinea el texto a la izquierda(left).

<P ALIGN=right>

Define un párrafo y alinea el texto a la derecha (right).

<P ALIGN=center>

Define un párrafo y centra el texto (center).

Para un ejemplo práctico, haz clic aquí

Salto de línea con <BR>

<BR> es una marca de interrupción de línea. Tiene un funcionamiento similar a la

marca de párrafo vista anteriormente, pero se diferencia porque no indica el inicio de un
nuevo párrafo.

Dicho de otro modo, su función es parecida a la de la tecla "enter" del teclado.

Se usa sin marca de cierre.

Disponer el texto con <DIV ALIGN> y <CENTER>

El elemento <DIV> se utiliza para alinear horizontalmente el texto a la izquierda, a la

derecha o en el centro de la página. El atributo ALIGN es fundamental a este respecto.
<DIV ALIGN=left>Texto e imágenes a la izquierda</DIV>

Mueve a la izquierda los elementos contenidos dentro de sus marcas.

<DIV ALIGN=right>Texto e imágenes a la derecha</DIV>

Mueve los elementos a la derecha.

<DIV ALIGN=center>Texto e imágenes centrados</DIV>

Centra los elementos.

Para un ejemplo práctico, haz clic aquí

La marca <CENTER> tiene un funcionamiento idéntico al de <DIV ALIGN=center>

pero su uso ha sido depreciado por el estándar 4 de HTML. El uso de <CENTER> fue
introducido por Netscape, justo cuando el HTML preveía la salida de DIV. La enorme
difusión inicial de Netscape ha hecho que el uso de esta marca esté también muy
difundido, por lo que todavía los navegadores la utilizan y reconocen (incluido MsIe).
El uso de <CENTER> es muy simple:

<CENTER>Texto para centrar</CENTER>

Líneas horizontales con <HR>

Las líneas horizontales constituyen un instrumento idóneo para dividir partes del
documento y hacer más legible el texto. La sintaxis necesaria para su inserción en un
documento HTML es la siguiente:

<HR align="CENTER" size="2" width="400" color="Red" noshade>

La marca HR (acrónimo de Horizontal Rule) no necesita cierre. Consta de diversos

atributos:

• aling="CENTER": define la alineación de la línea (center, right, left).

• size="2": define el grosor, en píxel, de la línea.

• width="400": define la longitud horizontal, en píxel, de la línea. Puede también

expresarse en tanto por cien respecto al espacio a disposición: width=80%.

• color="RED": define el color de la línea.

• noshade: si este atributo está presente, elimina el efecto 3D de la línea. Si no está

presente, produce dicho efecto.

LISTAS Y BIÑETAS

Con frecuencia se usan listas en los documentos. El lenguaje HTML incorpora unas
listas con viñetas sencillas o también letras o números. Para dar más vistosidad a las
páginas, se suelen emplear también imágenes que se colocan delante de cada párrafo.
Vamos a ver algunas de las posibilidades que tenemos.
Listas con viñetas desordenadas

He aquí el ejemplo más sencillo de una de estas listas:

escribimos en html se verá como

<ul>

<li>Primer término de la lista

<li>Segundo término

<li>Tercer término

</ul> • Primer término de la lista

• Segundo término

• Tercer término

Como ves, la lista se declara con la etiqueta <UL> y finaliza con el cierre de la misma
</UL>. También podemos modificar las viñetas por medio del atributo TYPE= circle,
disc o square (círculo, disco o cuadrado) y añadir sublistas.

escribimos en html se verá como

<ul>

<li type= disc>Primer término de la lista

<ul>

<li>Sublista

<li>Otro elemento

</ul>

<li type=circle>Segundo término

<li type=square>Tercer término

</ul> • Primer término de la lista

o Sublista

o Otro elemento

o Segundo término

 Tercer término

Otro atributo interesante es compact para reducir el espacio entre los elementos
Listas con viñetas ordenadas

Estas listas se caracterizan porque aparecen números o ciertos caracteres que ordenan
sus elementos. La etiqueta usada es <OL> junto con su correspondiente de cierre
</OL>. El atributo TYPE toma ahora los valores 1, a, A, i, I. Un ejemplo de estas listas
es el siguiente

i. Listas de definición

Estas listas se forman con el elemento que se define y su definición. Las etiquetas son
<DL> y </DL> para la lista y <dt> y <dd> para los elementos y sus definiciones. Un
ejemplo:

escribimos en html se verá como

<dl>

<dt >Término 1º

<dd>Definición del elemento 1º

<dt>Término 2º

<dd>Definición del elemento 2º

<dt>Término 3º

<dd>Definición del elemento 3º

</dl> Término 1º

Definición del elemento 1º

Término 2º

Definición del elemento 2º

Término 3º

Definición del elemento 3º

Manejo de texto en lenguaje HTML
En este capítulo se describe la manera de manejar textos utilizando el código del
lenguaje HTML. Analizamos los vínculos, estilos de caracter, alineación de texto,
tamaño y tipo de fuentes y en general, como dar formato al texto.

3.1 Formateo de texto

Cuando se utilizan etiquetas HTML de párrafo, encabezado y listas, estas etiquetas

afectan al bloque de texto completo. Pero los estilos de carácter afectan a palabras o
caracteres dentro de otras entidades HTML y modifican su aspecto para que de algún
modo sea diferente del demás texto que les rodea (por ejemplo negritas o subrayado).

a) Estilos lógicos

Indican cómo se usa el texto, no cómo se despliega.

<EM> Indica que los caracteres se resaltarán de algún modo (por lo

general en cursivas)

<STRONG> Los caracteres tendrán mayor resaltado que con <EM> (por ejemplo en
negritas)

<CODE> Indica una muestra de código (en un tipo de letra de ancho fijo, como
Courier en navegadores gráficos)

<SAMP> Indica texto de muestra y es similar a <CODE>

<KBD> Indica texto que escribirá el usuario

<VAR> Indica el nombre de una variable o entidad que se reemplazará por un

valor real.

<DFN> Se usa para destacar una palabra que se definirá o que acaba de ser
definida

<CITE> Esta etiqueta indica una cita breve

b) Estilos físicos
Se puede usar un conjunto de etiquetas de estilos físicos, para modificar el estilo de
presentación real del texto. Las etiquetas de estilos físicos indican exactamente la
manera como se debe formatear el texto, ya sea en negritas, subrayado, etcétera.

<B> Negritas

<I> Cursivas

<TT> Tipo de letra monoespaciada de máquina de escribir

<U> Subrayado (descontinuado en HTML 4.0)

<S> Tachado (descontinuado en HTML 4.0)

<BIG> Tamaño más grande que el del texto circundante

<SMALL> Tamaño más pequeño

<SUB> Subíndice

<SUP> Superíndice

<SUP> Exponente

Nota: Tenga en cuenta que si un navegador no puede manejar alguna de las etiquetas
físicas la cambiará por otro formato o de plano la pasará por alto, aunque la mayoría de
los navegadores actuales las aceptan. Además las etiquetas de carácter se pueden anidar.

c) Texto preformateado

Este tipo de texto lo muestra tal y como el usuario lo introduce en el editor de texto.
Para utilizar texto preformateados, utilice <PRE>.

c) Líneas horizontales y saltos de línea

La etiqueta <HR> (que no tiene parte de cierre ni lleva texto asociado) crea una línea
horizontal en la página ideal para separar secciones de una página web.

La etiqueta <BR> produce un salto de línea en el punto donde aparece.

<NORB> hace que el texto siempre esté en una misma línea.

<WBR> indica un punto adecuado de salto dentro de una línea. Se usa sólo cuando es
apropiado hacerlo. Si la línea cabe bien en la pantalla se pasa por alto.

d) Direcciones y citas

La etiqueta <ARDES> se usa para las entidades de firma en las páginas web. Por lo
general van al final de una página e indican quién la escribió, cómo ponerse en contacto
con él, fecha, cualquier información de derechos de autor, etcétera.
La etiqueta <BLOCKQUOTE> se usa para crear citas extensas.

e) Alineación de texto

Para alinear un solo elemento o párrafo use el atributo ALIGN con la etiqueta de dicho
elemento. Puede tomar tres valores: LEFT (izquierda), RIGHT (derecha) o CENTER
(centro). Ejemplo: <H1 ALIGN=CENTER>.

Para alinear un conjunto de elementos utilice la etiqueta <DIV> (que también cuenta
con el atributo ALIGN).

f) Tamaño y tipos de fuentes

La etiqueta <FONT> (descontinuado en HTML 4.0) se utiliza para controlar las

características de una cadena de caracteres dada, no cubiertas por los estilos de carácter.

Utilice el atributo SIZE para indicar el tamaño como aparecerán las letras. Los valores
son del 1 al 7, en donde el 3 es el predeterminado.

El atributo FACE toma como valor un conjunto de nombres de tipos de letra, escritos
entre comillas y separados por comas. Cuando el navegador soporta el atributo busca en
el sistema el primer tipo de letra indicado, si no lo encuentra busca el segundo y así
hasta que encuentre uno especificado en la lista.

<BLINK> hace intermitente una parte del texto que se quiera llamar la atención dentro
de una página. Pero ¡Cuidado!, y es que esta etiqueta llama demasiado la atención y a
muchos les puede llegar a parecer irritante, feo y agresivo.

3.2 Vínculos

Para crear vínculos se utiliza la etiqueta <A>, y se utilizan los atributos NAME, HREF
y TITLE. El que más utilizará será HREF que especifica la dirección URL a la que
queremos que el texto cree el vínculo. Ejemplo: <A HERF= “menu.html”> Ir al
menú</A>.

Cuando especifica entre comillas el nombre de la ruta de acceso de un archivo

vinculado, el visualizador lo busca en el mismo directorio en que se encuentra el
archivo actual.

Sin embargo puede especificar la ruta de acceso de dos maneras: utilizando rutas de
acceso relativas y rutas de acceso absolutas.

Las rutas absolutas solo indican los niveles en los que se encuentran los documentos a
los que queremos vincularnos, sin especificar exactamente el nombre de los mismos. En
cambio las rutas absolutas señalan los directorios y los nombres de estos donde se
encuentra ubicado el archivo al que se establece el vínculo.
Ejemplo de ruta de acceso relativa: HREF=../../archivos/archivo.html” (El documento
“archivo.html” está localizado dos niveles de directorio hacia arriba, en el directorio
archivos: los dos puntos seguidos de diagonal significan que el documento está situado
un subdirectorio arriba del nivel actual).

Ejemplo de ruta de acceso absoluta: HREF=”/Disco1/cluster/archivo.htm” (El

documento “archivo.htm” está localizado en el directorio /Disco1/cluster).

Para hacer un vínculo a otra página de Internet (llamados documentos remotos) utilice
de igual manera la etiqueta <A> y en el atributo HREF en lugar de poner la ubicación
del archivo escriba la dirección URL del documento de web. Ejemplo: <A HREF=
“http://www.éstapáginanoexiste.com.ab> Ir a ésta página no existe </A>.