You are on page 1of 523

Como crear pginas web.

Manual: HTML: Introduccin

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Tercer paso: Aprender HTML

Declaracin
principios

Bienvenido al Tercer Paso. Estar aqu significa que


quieres tomarte un poco en serio la creacin de tus
webs. Vers que es muy fcil.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada

ADVERTENCIA: Este Manual/e-book es


bastante extenso. NO TE ASUSTES. He
querido incluir todos los Elementos y
Atributos del HTML 4.01, para que te pueda
servir de libro de Consulta. Esto, ya de por
si, ocupa buena parte del Manual. En el
listado de Elementos por orden alfabtico, te
indico con un cuadrado negro los
Elementos Bsicos, y que son los que
empezars a utilizar de una forma rpida y
fcil.
Indice reducido del Manual HTML
Indice ampliado del Manual de HTML
Indice de Elementos por orden alfabtico
Indice de Elementos Desaprobados

Colaboraciones

Indice reducido del Manual HTML


file:///D|/Manuales/Aprender%20HTML/Aprender%20HTML.htm (1 of 6) [27/02/2003 16:54:39]

Introduccin I
7 DIN-A4
Introduccin II
9 DIN-A4
Download
Bajar al disco
duro el
e-book completo.

Como crear pginas web. Manual: HTML: Introduccin

Vuestras
colaboraciones
Sugerencias
SALIDA

Qu es el HTML?
Definiciones
Leccin de anatoma
Una de geometra
Un poco de orden, por favor
Texto, texto, texto
Estructura Global
Las Listas
Hipervinclate
Las fuentes
Colores
Imgenes
Objects y Applets
Mapas de Imagen
Tablas
Marcos
Dale estilo y CSS
Formularios
Scripts
Despedida y Cierre

Indice ampliado del Manual de HTML


Qu es el HTML?
Definiciones
Leccin de anatoma
Una de geometra
Un poco de orden, por favor
Texto, texto, texto
file:///D|/Manuales/Aprender%20HTML/Aprender%20HTML.htm (2 of 6) [27/02/2003 16:54:39]

Como crear pginas web. Manual: HTML: Introduccin

Elemento P
Elemento BR
Elementos BLOCKQUOTE, Q
Elementos H1,H2,H3,H4,H5,H6
Elementos ACRONYM, ABBR, CITE, DFN
Elementos CODE, SAMP, KBD, VAR
Elementos EM, STRONG
Elementos SUB, SUP
Elemento PRE
Elemento BDO
Elementos
TT,I,B,BIG,SMALL,STRIKE,S,U
Elementos FONT, BASEFONT, CENTER
Elementos INS, DEL
Caracteres ESPECIALES
Elemento HR
Espacios en blanco

Estructura Global
Especificacin versin HTML
Elemento HTML
Elemento HEAD
Elemento TITLE
Elemento META
Elemento BODY
Elemento ADDRESS
Elementos DIV, SPAN

Las Listas
Listas: Elementos UL, LI, OL
Definiciones: Elementos DL, DT, DD

Hipervinclate
Elemento A
Vnculos Externos
Vnculos Internos
Vnculos a Marcadores
Elemento LINK
Elemento BASE
file:///D|/Manuales/Aprender%20HTML/Aprender%20HTML.htm (3 of 6) [27/02/2003 16:54:39]

Como crear pginas web. Manual: HTML: Introduccin

Las fuentes
Categoras, familias, estilos
Orientacin de las letras
Espacio entre lneas de texto

Colores
Imgenes
Elemento IMG
GIF, JPG, PNG
Alineacin de imgenes

Objects y Applets
Elemento OBJECT
Elemento PARAM
Elemento APPLET

Mapas de Imagen
Elemento MAP
Elemento AREA

Tablas
Elemento TABLE
Elemento CAPTION
Grupos de filas: THEAD, TFOOT, TBODY
Grupos de columnas: COLGROUP, COL
Filas: Elemento TR
Celdas: Elementos TH, TD
Comentarios sobre las Tablas
Cellspacing y Cellpadding
Colores de fondo y otras cosas 1
Colores de fondo y otras cosas 2
Colores de fondo y otras cosas 3
Tablas Fijas, Variables y Mixtas

Marcos
Elemento FRAMESET
Elemento FRAME
Elemento NOFRAMES
Ejemplos de marcos
Marcos: Name y Target
Elemento IFRAME: marcos en lnea
file:///D|/Manuales/Aprender%20HTML/Aprender%20HTML.htm (4 of 6) [27/02/2003 16:54:39]

Como crear pginas web. Manual: HTML: Introduccin

Dale estilo y CSS


Elemento STYLE
Conceptos Bsicos de las CSS
Pseudo Clases
CSS: Cascada: un poco de orden
Situacin de Estilos en un documento
HTML

Formularios
Elemento FORM
Elemento INPUT
Elemento BUTTON
SELECT, OPTION, OPTGROUP
Elemento TEXTAREA
Elemento ISINDEX
Elemento LABEL
Elementos FIELDSET, LEGEND
Ejemplos de Formularios

Scripts
Elemento SCRIPT
Sucesos intrnsecos
Elemento NOSCRIPT

Despedida y Cierre

Nota: En la mayora de pginas de WebAprendiz he


incluido una codificacin mixta, para que veas las
variaciones de cdigo que puedes encontrarte si miras
el cdigo fuente de las webs que visites en la Internet.
Aunque en este momento an no hemos visto el Estilo
y las Hojas de Estilo, en mi cdigo encontrars
diversas formas de aplicar estilo en los documentos,
alguna incluso utilizando Atributos desaprobados, y
que ya ir comentando. Tu debers hacerlo
correctamente.

Empezamos?

file:///D|/Manuales/Aprender%20HTML/Aprender%20HTML.htm (5 of 6) [27/02/2003 16:54:39]

Como crear pginas web. Manual: HTML: Introduccin

Segundo paso pag.6


ndice General

Empecemos

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/Aprender%20HTML.htm (6 of 6) [27/02/2003 16:54:39]

Como crear pginas web. Manual: HTML: Indice por Elementos

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

ndice de Elementos

Declaracin
principios

A la derecha de los Elementos figura el


Captulo en el que se encuentran. La letra D,
significa Desaprobado.
Los Elementos marcados a la izquierda, son
bsicos. Empieza por esos. Luego los
puedes ir ampliando e incluir los captulos de
Formularios, Marcos, Objects, y Mapas, si
quieres.
En los Elementos de Texto, los hay cuyo
efecto es muy parecido. He marcado alguno
al azar. Escoge el/los que tu quieras.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada

Indice alfabtico Elementos HTML 4.01


Transitional
Indice de Elementos Desaprobados

Puntos de Vista

Entrada
Colaboraciones

file:///D|/Manuales/Aprender%20HTML/introduc/indelem.htm (1 of 5) [27/02/2003 16:55:06]

Como crear pginas web. Manual: HTML: Indice por Elementos

Vuestras
colaboraciones
Sugerencias
SALIDA

Indice alfabtico Elementos HTML 4.01


Transitional
Elemento

Captulo del Manual

A
ABBR
ACRONYM
ADDRESS
APPLET
AREA
B
BASE
BASEFONT
BDO
BIG
BLOCKQUOTE
BODY
BR
BUTTON
CAPTION
CENTER
CITE
CODE
COL
COLGROUP
DD
DEL
DFN
DIR
DIV
DL
DT
EM
FIELDSET
FONT

Hipervnculos
Texto
Texto
Estructura Global
Objects y Applets
Mapas de Imagen
Texto
Hipervnculos
Texto
Texto
Texto
Texto
Estructura Global
Texto
Formularios
Tablas
Texto
Texto
Texto
Tablas
Tablas
Listas
Texto
Texto
Listas
Estructura Global
Listas
Listas
Texto
Formularios
Texto

file:///D|/Manuales/Aprender%20HTML/introduc/indelem.htm (2 of 5) [27/02/2003 16:55:06]

Como crear pginas web. Manual: HTML: Indice por Elementos

FORM
FRAME
FRAMESET
H1,H2,H3,H4,H5,H6
HEAD
HR
HTML
I
IFRAME
IMG
INPUT
INS
ISINDEX
KBD
LABEL
LEGEND
LI
LINK
MAP
MENU
META
NOFRAMES
NOSCRIPT
OBJECT
OL
OPTGROUP
OPTION
P
PARAM
PRE
Q
S
SAMP
SCRIPT
SELECT
SMALL

Formularios
Marcos
Marcos
Texto
Estructura Global
Texto
Estructura Global
Texto
Marcos
Imagen
Formularios
Texto
D Formularios
Texto
Formularios
Formularios
Listas
Hipervnculos
Mapas de Imagen
D Listas
Estructura Global
Marcos
Script
Objects y Applets
Listas
Formularios
Formularios
Texto
Objects y Applets
Texto
Texto
D Texto
Texto
Script
Formularios
Texto

file:///D|/Manuales/Aprender%20HTML/introduc/indelem.htm (3 of 5) [27/02/2003 16:55:06]

Como crear pginas web. Manual: HTML: Indice por Elementos

SPAN
STRIKE
STRONG
STYLE
SUB
SUP
TABLE
TBODY
TD
TEXTAREA
TFOOT
TH
THEAD
TITLE
TR
TT
U
UL
VAR

Estructura Global
D Texto
Texto
Hojas de Estilo
Texto
Texto
Tablas
Tablas
Tablas
Formularios
Tablas
Tablas
Tablas
Estructura Global
Tablas
Texto
D Texto
Listas
Texto

Indice de Elementos Desaprobados


Slo informativo
Elemento
APPLET
BASEFONT
CENTER
DIR
FONT
ISINDEX
MENU

Captulo del Manual


D
D
D
D
D
D
D

Objects y Applets
Texto
Texto
Listas
Texto
Formularios
Listas

file:///D|/Manuales/Aprender%20HTML/introduc/indelem.htm (4 of 5) [27/02/2003 16:55:06]

Como crear pginas web. Manual: HTML: Indice por Elementos

S
STRIKE
U

D
D
D

Texto
Texto
Texto

Introduccin HTML
Segundo paso pag.6
ndice General

Empezar el Manual

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/introduc/indelem.htm (5 of 5) [27/02/2003 16:55:06]

Cmo crear pginas web. Manual: HTML: LINKS: Elemento A

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Elemento A

Declaracin
principios

<a ...............>...</a>
Este Elemento constituye el origen del
Hipervnculo.
Fjate que he puesto unos puntitos en la
etiqueta de apertura. Esto es porque, como
veremos, en la etiqueta de apertura ir toda
la informacin que precisamos para definir el
vnculo: la direccin a la que apuntamos, y
el texto o imagen que vamos a utilizar para
"lanzar" el hipervnculo.
Todos lo vnculos que utilizan el Elemento A,
van en el BODY del documento, si bien
algunos Atributos se utilizan para vnculos
que van en la seccin HEAD del documento.
Requiere etiqueta de cierre.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Atributos
name
Sirve para asignar un nombre a Marcador,
es decir, al destino de otro vnculo. El
nombre de un Marcador debe ser nico en

file:///D|/Manuales/Aprender%20HTML/links/links1.htm (1 of 5) [27/02/2003 16:55:11]

Cmo crear pginas web. Manual: HTML: LINKS: Elemento A

Vuestras
colaboraciones

ese documento.

href
Lo utilizamos para especificar la direccin
del destino del vnculo. Es decir, el recurso
al que apuntamos: web, imagen, sonido,
etc.

Sugerencias
SALIDA

hreflang
Especifica el idioma del recurso indicado en
href.

type
Consiste en un trmino que describe el tipo
de contenido del destino del hipervnculo.

rel
Se utiliza para describir la relacin existente
entre el documento en el que figura, y el
ancla especificada en el atributo href.

rev
Se utiliza para describir un link inverso. Es
decir, explica la relacin existente entre el
documento al que apunta el vnculo, y el
documento actual. Es el inverso de rel.

charset
Especifica el "conjunto de caracteres" que
utiliza el recurso al que apunta un vnculo.
El "conjunto de caracteres" (character
encoding), es un sistema para convertir una
cadena de bytes a una cadena de
caracteres.

target
Especifica el nombre del lugar en que se
abrir el recurso al que apunta un vnculo.
Suele ser una ventana o un marco.

tabindex
Especifica el orden que ocupa el vnculo
actual, dentro de la tabulacin de un
documento. Debe ser un valor comprendido
entre 1 y 32.767. Sirve para cuando se
navega utilizando el teclado. Este atributo
indicara el nmero de veces que hay que
file:///D|/Manuales/Aprender%20HTML/links/links1.htm (2 of 5) [27/02/2003 16:55:11]

Cmo crear pginas web. Manual: HTML: LINKS: Elemento A

pulsar la tecla TAB, dentro de un


documento, para llegar al vnculo actual.

accesskey
Este atributo sirve para asignar "teclas de
acceso rpido", en este caso, para un
vnculo. Las "teclas de acceso rpido"
consisten en un carcter del teclado.
Presionando sobre la tecla definida, se
ejecuta una accin. En el caso presente, se
activara el vnculo.

shape
Especifica la forma geomtrica de una
regin de un mapa de imgenes.

coords
Especifica las coordenadas de forma y
posicin en pantalla, de cada zona activa en
un mapa de imgenes.

id, class, lang, dir, title, style.


on focus, onblur, y otros relativos a
"eventos" o "sucesos". Si tienes dudas,
consulta el Elemento P, para los primeros y el
Captulo SCRIPT para los relativos a
sucesos.

Valores
name="texto"
Nombre que queramos asignar al vnculo, para que
pueda ser el destino de otro. Tambin podemos utilizar
el atributo id, pero no los dos a la vez.

href="URL"
Aqu indicaremos la direccin del recurso al cual
apunta el vnculo.

type="tipo de contenido"
file:///D|/Manuales/Aprender%20HTML/links/links1.htm (3 of 5) [27/02/2003 16:55:11]

Cmo crear pginas web. Manual: HTML: LINKS: Elemento A

Por ejemplo, "text/html", "audio/basic", "video/mpeg",


"image/gif", "image/jpg" y "text/css". As, si indicamos
type="text/css", estamos diciendo que el contenido
del destino es una Hoja de Estilo; type="image/gif",
cuando el destino es una imagen en formato gif, etc.
Existen ms atributos type, pero no los veremos todos
en este Manual.

rel="una o varias clases de vnculos"


Aqu se especifica una o varias clases de vnculos,
separados por un espacio en blanco. Suele ir en la
seccin HEAD. Las clases existentes son: Alternate,
Stylesheet, Start, Next, Prev, Contents, Index,
Glossary, Copyright, Chapter, Section, Subsection,
Appendix, Help y Bookmark.
No voy a explicarlos todos. Se escapa del grado de
profundidad que quiero darle a este Manual. No quiero
que acabes como yo :-).
Slo te dir, por ejemplo, que si pones rel="prev",
ests haciendo referencia al documento anterior al
actual, en una serie ordenada de documentos, como
este Manual.

rev="una o varias clases de vnculos"


Al revs que el anterior. Si en el presente documento
has puesto la referencia "prev" del documento
anterior, en el anterior documento podras poner
rel="next", lo cual hara referencia al documento
actual, que es el "next" del "prev". Lo has cogido?.
Repito que esto se escapa un poco de lo que quiero
ensearte y, de todas formas, si lo vemos, ya lo
veremos.

target="nombre del marco o tipo de ventana"


_blank: el recurso llamado se mostrar en una nueva
ventana sin nombre.
_self: el recurso llamado aparecer en el propio marco
o ventana original, donde se encuentra el vnculo.
_parent: el recurso se presenta en el marco "padre"
del que contiene al vnculo. Si no existe, su resultado
es como "_self".
_top: el recurso se presenta en la ventana original
activa, anulando cualquier configuracin anterior.

shape="default", "rect", "circle", "poli".


Veremos la explicacin de cada uno de esos valores un
poco ms adelante.

file:///D|/Manuales/Aprender%20HTML/links/links1.htm (4 of 5) [27/02/2003 16:55:11]

Cmo crear pginas web. Manual: HTML: LINKS: Elemento A

coords="coordenadas"
Lo veremos un poco ms adelante.

Tal vez encuentres todo lo anterior un poco


liado. No te preocupes, iremos "Paso a
Paso". De momento, para los links ms
normalitos, te basta El Elemento A y el
Atributo href.
Para los Marcadores, el Atributo name.
Despus lo complicaremos un poquito, pero
no pasa nada.

Me crees?

LINKS Introduccin
ndice HTML
ndice General

Ciegamente

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/links/links1.htm (5 of 5) [27/02/2003 16:55:11]

Como crear pginas web. Manual: HTML: Elemento P p1

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Elemento P

Declaracin
principios

<p>...</p>
Sirve para separar prrafos de texto dentro
de un documento. Inserta una lnea en
blanco inmediatamente despus del texto del
prrafo.
No requiere etiqueta de cierre, a menos que
se definan atributos de prrafo. Pero yo te
recomiendo que, siempre que est permitido,
utilices la etiqueta de cierre en todos los
Elementos.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales

Atributos principales

Accesibilidad
Avanzando

Entrada

align
Desaprobado. Sirve para alinear el texto

style
Para definir estilo "en lnea". Pero mejor con
Hojas de Estilo (ya lo veremos)

Puntos de Vista

Entrada

lang

Colaboraciones

Para dar informacin sobre el idioma


mediante un cdigo

dir
file:///D|/Manuales/Aprender%20HTML/texto/ptext1.htm (1 of 5) [27/02/2003 16:55:12]

Como crear pginas web. Manual: HTML: Elemento P p1

Vuestras
colaboraciones
Sugerencias
SALIDA

Para especificar la direccin del texto.

title
Por si se quiere dar un ttulo al elemento

id, class.
onclick, ondblclick, onmousedown,
onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup.
Voy a hacer un inciso aqu, para dar una explicacin
ms amplia de los atributos id y class, de forma que
esta explicacin no la volver a repetir cada vez que
nos encontremos con estos atributos en otros
Elementos.
El resto de atributos que aparecen debajo de id y class,
se refieren a "sucesos". Har una mencin a su
existencia, cuando proceda, en el resto de Elementos,
pero su explicacin la dar cuando hablemos del
Elemento SCRIPT.
Si no quieres ver esa explicacin ahora, puedes seguir
tu lectura con el apartado Valores.

Ver explicacin de id y class

Valores
align="left", "center", "right", "justify"
Los valores que puede tomar son izquierda, centro,
derecha y justificar. Requiere el signo = y comillas.

Ejemplos:
Texto centrado
<p align="center">Texto
centrado</p>

file:///D|/Manuales/Aprender%20HTML/texto/ptext1.htm (2 of 5) [27/02/2003 16:55:12]

Como crear pginas web. Manual: HTML: Elemento P p1

Texto utilizando el valor "right"


<p align="right">Texto utilizando
el valor "right"</p>

Comentarios: El valor por defecto de <p> es la


alineacin izquierda. Este atributo todava se utiliza,
pero est desaprobado. Es mejor definir el
alineamiento a travs de Hojas de Estilo, como ya
veremos en su momento. He dejado ejemplos de este
atributo en el cdigo fuente de mis pginas para que lo
veas.

style="..............."
Se puede definir el estilo concreto de un prrafo
mediante este atributo. Mejor a travs de Hojas de
Estilo si es posible, aunque a veces se puede desear
variar el estilo de un prrafo especfico.

Ejemplo:

Prrafo con estilo propio


<p style="font-family: Times
New Roman; font-size: 12pt;
color: rgb(255,0,255); fontweight: bold; font-style:
oblique; text-decoration:
underline"
align="center">Prrafo con
estilo propio</p>
Vaya pasada!. No te asustes. Es el nico
prrafo con ese estilo que hay en
WebAprendiz.
Evidentemente, no voy a definir el estilo de
un nico prrafo en una Hoja de Estilo. Este
file:///D|/Manuales/Aprender%20HTML/texto/ptext1.htm (3 of 5) [27/02/2003 16:55:12]

Como crear pginas web. Manual: HTML: Elemento P p1

es uno de los casos en que se utiliza el


atributo style en lnea, con el elemento P.
Se utiliza tambin con otros elementos, que
ya veremos.
Bueno, no hace falta que te lo aprendas
ahora, pero voy a decirte rpidamente lo que
hace esa parrafada de cdigo:
Se abre etiqueta P. Recuerda que te dije que
los atributos van siempre en la etiqueta de
Apertura, nunca en la de cierre.
El atributo STYLE define primero una familia
de tipo de fuente (letra); su tamao 12
puntos; su color expresado en rgb (ya lo
veremos); el "peso" negrita; estilo de fuente
oblicuo (Netscape no lo ver); le aade una
decoracin que en este caso es el
subrayado.
Adems de todo eso, luego utiliza el atributo
que hemos visto antes, align, para decir
que el texto debe estar centrado.
Luego viene el contenido del prrafo (el texto)
y por fin un cierre de etiqueta que no es
necesario, pero que yo aconsejo.
Qu ms quieres?
Queda muy poquita P, acabamos la P?
ndice Elementos Texto
ndice HTML
ndice General

file:///D|/Manuales/Aprender%20HTML/texto/ptext1.htm (4 of 5) [27/02/2003 16:55:12]

Acabemos

Como crear pginas web. Manual: HTML: Elemento P p1

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/texto/ptext1.htm (5 of 5) [27/02/2003 16:55:12]

Cmo crear pginas web. Manual: HTML: Elemento SCRIPT y Sucesos o Eventos intrnsecos

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Elemento SCRIPT

Declaracin
principios

<script>.....</script>
Sirve de contenedor para un programa script,
que podemos incluir en el documento HTML.
Requiere etiqueta de cierre.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Atributos y Valores
src="URL"
Sirve para especificar la direccin donde se
encuentra un script externo,

type="Lenguaje del script"


Lo utilizaremos para especificar el lenguaje
del script, por ejemplo, "text/javascript".

language="Lenguaje del script"


Desaprobado. Est desaprobado en favor
de type.

defer
Cuando se incluye este trmino, sirve para
indicar al navegador o mecanismo
alternativo que interpreta el cdigo, que el
script no va a generar ningn tipo de
contenido en el documento y, por lo tanto,
puede seguir interpretando el resto de

file:///D|/Manuales/Aprender%20HTML/script/script2.htm (1 of 5) [27/02/2003 16:55:12]

Cmo crear pginas web. Manual: HTML: Elemento SCRIPT y Sucesos o Eventos intrnsecos

Vuestras
colaboraciones
Sugerencias
SALIDA

cdigo de la pgina y presentarlo al usuario.

charset
Especifica el "conjunto de caracteres" que
utiliza el recurso al que apunta un vnculo.
El "conjunto de caracteres" (character
encoding), es un sistema para convertir una
cadena de bytes a una cadena de
caracteres.

La forma correcta de indicar el tipo de


lenguaje utilizado en el script, es a travs del
Elemento META, o en la etiqueta de Apertura
del Elemento SCRIPT:
<meta http-equiv="ContentScript-Type" content=".....">
<script type="......">
Cdigo del script
</script>

Sucesos o Eventos intrnsecos


Los Sucesos o Eventos, tienen que ver con
los "Objetos" y los Elementos HTML (de
hecho muchos elementos son objetos). Son
objetos todos los elementos del navegador, la
ventana y todo su contenido, marcos,
formularios, botones, vnculos, etc.
Cuando se desencadena un Suceso, algo
tiene lugar con respecto a un Elemento u
Objeto.
Por ejemplo, el pulsar un botn, pasar el
ratn por encima de un texto, pulsar una
file:///D|/Manuales/Aprender%20HTML/script/script2.htm (2 of 5) [27/02/2003 16:55:12]

Cmo crear pginas web. Manual: HTML: Elemento SCRIPT y Sucesos o Eventos intrnsecos

tecla, etc., son Sucesos o Eventos


intrnsecos.
Cuando ocurren, se ejecuta un script. Este
script define la consecuencia del Suceso. Es
decir, indica qu debe ocurrir cuando, por
ejemplo, pulsamos un determinado botn.

onload="script"
El suceso tendr lugar al finalizar la carga
de la pgina o ventana, por parte del
navegador o mecanismo alternativo. Se
utiliza para la pgina web y los marcos.

onunload="script"
El suceso se dispara cuando el navegador o
"user agent" retira un documento de la
ventana o de un marco. Puede utilizarse
con los elementos BODY y FRAMESET.

onclick="script"
El suceso tiene lugar cuando se hace clic
con el ratn sobre un objeto. Se utiliza en
botones, casillas y otros muchos elementos.

ondblclick="script"
Los mismo, cuando se hace un doble clic.

onmousedown="script"
Cuando se presiona sobre un objeto o
elemento con el ratn. Se puede utilizar con
muchos elementos.

onmouseup="script"
Al liberar el ratn.

onmouseover="script"
Cuando se sita el ratn sobre un objeto.
Se utiliza mucho en los hipervnculos,

onmouseout="script"
Cuando se aleja el ratn de un objeto.

onfocus="script"
El suceso se dispara cuando se activa un
objeto, normalmente con el ratn o tecla de
file:///D|/Manuales/Aprender%20HTML/script/script2.htm (3 of 5) [27/02/2003 16:55:12]

Cmo crear pginas web. Manual: HTML: Elemento SCRIPT y Sucesos o Eventos intrnsecos

tabulacin. Se utiliza en campos y reas de


texto y otros elementos: A, AREA, LABEL,
INPUT, SELECT, TEXTAREA y BUTTON.

onblur="script"
El contrario de onfocus. Se utiliza con los
mismos elementos y el suceso tiene lugar
cuando se abandona el objeto o se activa
un objeto distinto.

onkeypress="script"
Cuando se pulsa y libera una tecla. Se
utiliza con muchos elementos, anclas,
selecciones, vnculos.

onkeydown="script"
Cuando se presiona una tecla y se
mantiene pulsada.

onkeyup="script"
Opuesto al anterior. El suceso tiene lugar al
liberar la tecla.

onsubmit="script"
Slo se utiliza en los Formularios. El suceso
se dispara al enviar un formulario.

onreset="script"
Slo se utiliza con el elemento FORM. El
suceso se dispara cuando se hace clic en el
botn Restablecer.

onselect="script"
Cuando el usuario selecciona texto dentro
de un campo de texto. Se utiliza con INPUT
y TEXTAREA.

onchange="script"
El suceso tiene lugar cuando se ha
modificado el valor de un campo. Se utiliza
con INPUT, SELECT y TEXTAREA.

Estas largas pginas llenas de sustancia me


encantan

file:///D|/Manuales/Aprender%20HTML/script/script2.htm (4 of 5) [27/02/2003 16:55:12]

Cmo crear pginas web. Manual: HTML: Elemento SCRIPT y Sucesos o Eventos intrnsecos

Introduccin a SCRIPT
ndice HTML
ndice General

A mi no

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/script/script2.htm (5 of 5) [27/02/2003 16:55:12]

Cmo crear pginas web. Manual: HTML: Introduccin a SCRIPT

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Qu es un Script

Declaracin
principios

El script es una programa que puede


acompaar o integrarse en un documento
HTML.
El lenguaje que predomina, hoy por hoy, y
que suele colocarse entre las etiquetas del
Elemento SCRIPT, es el Javascript. Aunque
hay otros, como el VBScript, Tcl, etc.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Este Captulo debers considerarlo


puramente de consulta, dado que
nicamente voy a describir los Elementos
SCRIPT y NOSCRIPT, como integrantes del
HTML.
Muchos de los Atributos de este Elemento,
son los que he ido denominando a lo largo
del Manual, como relativos a "eventos" e
indicando que ya los veramos.
Si quieres puedes leer la introduccin, o dejar
todo el Captulo para cuando precises
consultar algo concreto.

Introduccin
file:///D|/Manuales/Aprender%20HTML/script/script1.htm (1 of 3) [27/02/2003 16:55:13]

Script
4 DIN-A4

Cmo crear pginas web. Manual: HTML: Introduccin a SCRIPT

Vuestras
colaboraciones
Sugerencias
SALIDA

Las etiquetas del Elemento SCRIPT, suelen


situarse en la seccin HEAD del documento
HTML. Si recuerdas la Estructura Global del
documento de HTML, all te inclu este
Elemento en la seccin HEAD.
Tambin podemos encontrar las etiquetas de
este Elemento, dentro de la seccin BODY
del documento. En estos casos, sirven para
controlar lo que se llama sucesos o eventos
intrnsecos o internos.
Se pueden colocar varios programas en un
documento utilizando el Elemento SCRIPT, y
la sintaxis contenida entre sus etiquetas de
apertura y de cierre, depender del lenguaje
utilizado en cada caso. Actualmente, como ya
te he dicho, el ms utilizado es Javascript.
No todos los navegadores podrn reconocer
el lenguaje del script, o una versin concreta
de ese lenguaje, o el navegante puede tener
desactivado un lenguaje concreto.
En cualquier caso, siempre que utilices el
Elemento SCRIPT, debers incluir, despus
de su etiqueta de apertura, y antes del cierre,
las etiquetas de Comentario. De esta forma,
los navegadores que no lo admitan, no
escribirn el contenido del script en la
pantalla del usuario como si de simple texto
se tratara. Ignorarn el Script y seguirn
interpretando el resto del documento.
Las etiquetas de Comentario ya las vimos,
pero te las recuerdo y aplico a este Elemento:
<script language="Javascript">
<!--

file:///D|/Manuales/Aprender%20HTML/script/script1.htm (2 of 3) [27/02/2003 16:55:13]

Cmo crear pginas web. Manual: HTML: Introduccin a SCRIPT

Cdigo del script


//-->
</script>
En la etiqueta de apertura he definido el
lenguaje en cuestin. Si miras el cdigo
fuente de esta pgina, veras que en la
seccin HEAD hay un script en lenguaje
Javascript. Su estructura es la que te acabo
de indicar.
Por cierto, la utilizacin de "language=" ",
est Desaprobada, pero es la que vers ms
frecuentemente en los cdigos fuente, de
momento.

Bueno, te vienes conmigo?


Formularios: Ejemplo 2
ndice HTML
ndice General

Porqu no?
No, me salto este Captulo

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/script/script1.htm (3 of 3) [27/02/2003 16:55:13]

Cmo crear pginas web. Manual: HTML: Los Formularios: Ejemplo 2

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO

estudio/Cmo crear tu pgina web: Paso a Paso

Introduccin

Qu es el
Estudio?

Otro ejemplo de Formulario

Declaracin
principios

Bueno, aqu tienes un ejemplo con todos los controles.


Cada uno est en una Tabla de 1 pixel de borde, para
que puedas verlas.
Aqu cada control es un formulario, es decir, empieza con
<form> y termina con </form>. Por supuesto, al juntarlos
todos en un mismo Formulario, hay que eliminar esas
etiquetas parciales y poner una de apertura al inicio del
Formulario, y otra al final de todo, es decir, despus de
todos los controles.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales

Slo incluir el cdigo de los controles, dejando el de


Tabla. En la pgina siguiente te he preparado todos los
controles juntos en un mismo Formulario y todo en el
interior de una Tabla.

Accesibilidad
Avanzando

Entrada

Nombre:

Apellido 1:

Apellido 2:

Puntos de Vista

Entrada
Colaboraciones

Nombre:<form>
<p><input type="test" name="nombre"
file:///D|/Manuales/Aprender%20HTML/forms/exform2.htm (1 of 5) [27/02/2003 16:55:14]

Cmo crear pginas web. Manual: HTML: Los Formularios: Ejemplo 2

Vuestras
colaboraciones
Sugerencias
SALIDA

maxlength="15" size="15"></p>
</form>
Apellido 1:<form>
<p><input type="text" name="apellido1"
maxlength="15" size="15"></p>
</form>
Apellido 2:<form>
<p><input type="text" name="apellido2"
maxlength="15" size="15"></p>
</form>

Direccin e-mail:

Opinin de WebAprendiz:
No opino

Direccin e-mail:<form>
<p><input type="text" name="mail"
size="26"</p>
</form>
Opinin de WebAprendiz:<form>
<p class="mini"><select name="opinion"
size="1">
<option value>No opino</option>
<option
value="Fantstica">Fantstica</option>
<option
value="Maravillosa">Maravillosa</option>
<option value="Lamejorparaaprender">La
mejor para aprender</option>
<option value="Muybuena">Muy
buena</option>
file:///D|/Manuales/Aprender%20HTML/forms/exform2.htm (2 of 5) [27/02/2003 16:55:14]

Cmo crear pginas web. Manual: HTML: Los Formularios: Ejemplo 2

<option value="Tienefuturo">Tiene
futuro</option>
<option value="Noestamal">No est
mal</option>
<option value="Noesmuybuena">No es muy
buena</option>
<option value="Esmala">Es mala</option>
<option value="Novalenada">No vale
nada</option>
</select></p>
</form>

Seccin favorita:
Estudio

Almacn

Foros

Concurso

<Seccin favorita:<form>
<p class="mini"><input type="radio"
name="seccion" value="Estudio">Estudio
<input type="radio" name="seccion"
value="Almacn>Almacn
<input type="radio" name="seccion"
value=""Foros">Foros
<input type="radio" name="seccion"
value="Concurso">Concurso</p>
</form>
Fjate que las cuatro opciones comparten el mismo
nombre. Eso hace que el usuario slo pueda escoger
una entre las cuatro.

file:///D|/Manuales/Aprender%20HTML/forms/exform2.htm (3 of 5) [27/02/2003 16:55:14]

Cmo crear pginas web. Manual: HTML: Los Formularios: Ejemplo 2

Este Manual es:


Muy bueno

Muy completo

Muy largo

El mejor

Este Manual es:<form>


<p class="mini"><input type="checkbox"
name="mb" value="Muy bueno">Muy bueno
<input type="checkbox" name="mc"
value="Muy completo">Muy completo
<input type="checkbox" name="ml"
value="Muy largo">Muy largo
<input type="checkbox" name="tb"
value="El mejor">El mejor</p>
</form>
En cambio, en este caso, el Atributo name es diferente
para cada opcin. El usuario, podr elegir ms de una
opcin.

Comentarios:

Comentarios:<form>
<p><textarea name="comenta"
wrap="virtual" rows="3"
cols="30"></textarea></p>
</form>

file:///D|/Manuales/Aprender%20HTML/forms/exform2.htm (4 of 5) [27/02/2003 16:55:14]

Cmo crear pginas web. Manual: HTML: Los Formularios: Ejemplo 2

Enviar

Borrar

<form>
<p>input type="submit"
value="Enviar"></p>
</form>
<form>
<p><input type="reset"
value="Borrar"></p>
</form>

Ver ejemplo completo de Formulario

Slo nos queda ver SCRIPT y se acab el HTML


Formularios: Ejemplo 1
ndice HTML
ndice General

Qu bien!

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/forms/exform2.htm (5 of 5) [27/02/2003 16:55:14]

Cmo crear pginas web. Manual: HTML: Los Formularios: Ejemplo 2b

Aqu tienes una Tabla con el Formulario completo. El diseo del


Formulario depende de ti. He definido un borde de 1 pixel para que
puedas ver la Tabla y las celdas.
He situado cada control en dos celdas. Una para el ttulo y otra para
el control. Se podra situar todo en la misma celda, si quieres.
Excepto el botn de "Enviar", el resto del Formulario es operativo,
puedes poner texto, seleccionar opciones, y luego Borrar.
En el cdigo fuente vers todo el cdigo de Tabla y Formularios.
Nombre:

Apellido 1:

Apellido 2:

Seccin favorita:
Estudio

Direccin e-mail:

Almacn

Foros

Concurso

Muy completo

Muy largo

Este Manual es:


Muy bueno

Comentarios:
Enviar

Borrar

VOLVER AL MANUAL

Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4


fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/forms/exform2b.htm [27/02/2003 16:55:14]

El mejor

Cmo crear pginas web. Manual: HTML: Formularios: Ejemplo 1

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Ejemplos de Formularios

Declaracin
principios

El primer ejemplo ser de un Formulario que


seguro que vas a utilizar. Se trata de un
Formulario de envo de Correo Electrnico.
Este Formulario, lo nico que hace es enviar un
correo electrnico a la direccin indicada en el
cdigo del Formulario, utilizando el programa que
el usuario tenga como predeterminado para sus
e-mails.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada

He utilizado una Tabla de dos filas de una sola


celda, para su distribucin, y he aprovechado
dos definiciones bsicas de mi Hoja de Estilo.
He asignado un borde de 1 pixel a la Tabla para
que puedas verla, y he aadido un aviso,
conforme el Formulario es operativo, o sea que
t mismo!.

El cdigo utilizado es mnimo, y no se espera


realizar ningn tipo de proceso de la informacin
Entrada
obtenida del usuario que, en este caso, consistir
Colaboraciones en un simple texto.
Puntos de Vista

Por lo tanto, si utilizas un Formulario similar a


file:///D|/Manuales/Aprender%20HTML/forms/exform1.htm (1 of 7) [27/02/2003 16:55:15]

Cmo crear pginas web. Manual: HTML: Formularios: Ejemplo 1

Vuestras
colaboraciones
Sugerencias
SALIDA

ste en tu web, recibirs un e-mail que t mismo


debers leer y contestar.
Existen otras posibilidades, pero aqu ya
interviene el Servidor y dependers de tu
Proveedor (ISP), como he dicho al inicio de este
Captulo.

ESTE FORMULARIO ES OPERATIVO


Por favor indique la seccin a que hace
referencia
su sugerencia, comentario o artculo.
Gracias.

Enviar

Borrar

Tanto con Explorer como con Netscape, este


formulario debera verse exactamente igual. Si
no es as, por favor, aprovecha su operatividad y
envame un e-mail indicndomelo. ( Por esta vez,
no es broma).
Voy a describir el formulario y analizar su simple
cdigo, Paso a Paso :-).
file:///D|/Manuales/Aprender%20HTML/forms/exform1.htm (2 of 7) [27/02/2003 16:55:15]

Cmo crear pginas web. Manual: HTML: Formularios: Ejemplo 1

<div align="center">
<table border="1" width="100%"
cellspacing="3" cellpadding="3"
bgcolor="#fofofo">
Primero centro la Tabla mediante el Elemento
DIV. Esta es una forma correcta de hacerlo.
Recuerda que align como Atributo de TABLE
esta desaprobado.
Despus defino la etiqueta de apertura de
TABLE. En atencin a tu persona lleva el borde
de 1 pixel, como te he dicho. Su anchura es del
100% del espacio disponible que, en este caso,
es el 100% de la celda en la que estoy
escribiendo y que forma parte de mi Tabla
soporte de esta pgina.
Cellspacing y cellpadding son un pequeo detalle
para crear un poco de espacio interno en la
Tabla, aunque no son imprescindibles. En cuanto
al fondo de la Tabla es de un color grisceo
suave. (Este no es un color seguro, pero me
haca gracia lo de "fofofo".

<tr>
<td width="100%><div
align="center" class="azul">
<p><span class="rojo">ESTE
FORMULARIO ES OPERATIVO</span></p>
<p>Por favor indique la seccin a
que hace referencia<br>
su sugerencia, comentario o
artculo. Gracias.<br>
</p>
</div>
file:///D|/Manuales/Aprender%20HTML/forms/exform1.htm (3 of 7) [27/02/2003 16:55:15]

Cmo crear pginas web. Manual: HTML: Formularios: Ejemplo 1

</td>
</tr>
Esta es la primera fila, que contiene una nica
celda. Defino la anchura de la celda del 100% del
espacio disponible.
Con el Elemento DIV, centro el contenido de la
celda y utilizo el Atributo class, con un valor
igual a "azul". Esto requiere una explicacin:
En mi Hoja de Estilo, la clase .azul
est definida como: "fuente del tipo
Verdana, o Arial o Helvetica; en
negrita y color azul".
Por lo tanto, como he utilizado esta
clase en la etiqueta de apertura
<div>, hasta que no la cierre, si no
defino otro estilo "en lnea" que
contradiga a la clase "azul", todo el
texto tendr las caractersticas
indicadas.
Aunque no sea el lugar, esta es la codificacin
de la clase "azul" en mi Hoja de Estilo:
.azul {font-family: Verdana, Arial, Helvetica;
font-weight: bold; color: #3333cc}
A continuacin me cargo lo que acabo de decir,
porque decido utilizar otro estilo "en lnea" con el
Elemento SPAN. Me interesa que el Aviso est
en color rojo, para llamarte la atencin al
respecto. As que utilizo otra definicin de mi
Hoja de Estilo, igual a la anterior, pero de color
rojo.
Cierro la etiqueta de SPAN despus del aviso,
file:///D|/Manuales/Aprender%20HTML/forms/exform1.htm (4 of 7) [27/02/2003 16:55:15]

Cmo crear pginas web. Manual: HTML: Formularios: Ejemplo 1

pongo la frase respecto a lo de indicar la seccin


a la que corresponde el comentario, cierro la
etiqueta de DIV y cierro la celda y fila.
Por cierto, recuerdas la diferencia entre DIV y
SPAN?

<tr>
<td width="100%">
<form
action="mailto:fmabox@hotmail.com"
encType="text/plain"
method="post"
onsubmit="alert('Gracias por sus
comentarios')>
<div align="center">
<p>
<textarea rows="7"
name="comentarios" cols="50"
style="background-color:#fafafa">
</textarea>
<p>
<input type="submit"
value="Enviar">
<input type="reset"
value="Borrar">
</div>
</form>
</td>
</tr>
</table>
</div>
Este es el resto de la codificacin:
file:///D|/Manuales/Aprender%20HTML/forms/exform1.htm (5 of 7) [27/02/2003 16:55:15]

Cmo crear pginas web. Manual: HTML: Formularios: Ejemplo 1

Segunda fila de la Tabla, con una nica celda. Le


doy la anchura del 100% e inicio el Formulario
con el Elemento FORM.
En action, vers la direccin de correo
electrnico que, como te he dicho est operativa.
Como estoy utilizando el mtodo "post", indico
con el Atributo encType la clase de datos que
contiene el Formulario.
El onsubmit corresponde a los sucesos
intrnsecos que veremos en el prximo captulo.
Lo que hace aqu es que, despus de pulsar el
botn de Enviar y antes de remitir el e-mail,
aparece una pantallita de alerta que dice:
"Gracias por sus comentarios". Es un pequeo
detalle innecesario, pero en este caso, dada la
excelencia de este Manual, me interesaba recibir
tus comentarios de alabanza y profundo
agradecimiento a mi enorme esfuerzo, espalda
dolorida y las dos dioptras que me ha costado :-)
A continuacin centro el Area de Texto, que
defino como de 7 columnas y 50 filas y le pongo
un color de fondo gris, ms claro an que el de
antes, y que tampoco es un color seguro, pero
tambin me haca gracia lo de "fafafa".
Cierro el Area de Texto y defino los botones de
envo y restablecer como ya hemos visto en
algn ejemplo anterior.
Por fin, cierro todo. Fjate que el ltimo </div>
corresponde a la etiqueta de apertura de este
Elemento y que est antes de definir la Tabla.
Si juntas las tres partes de cdigo, tienes el
Formulario completo.
file:///D|/Manuales/Aprender%20HTML/forms/exform1.htm (6 of 7) [27/02/2003 16:55:15]

Cmo crear pginas web. Manual: HTML: Formularios: Ejemplo 1

Veamos otro ejemplo con todos los controles.


Esta pgina ha sido larga pero interesante, no?
Elementos FIELDSET y LEGEND
ndice HTML
ndice General

Si tu lo dices...

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/forms/exform1.htm (7 of 7) [27/02/2003 16:55:15]

Cmo crear pginas web. Manual: HTML: Estructura Global: Elementos DIV, SPAN

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso


a Paso

Qu es el
Estudio?

Elementos DIV y SPAN

Declaracin
principios

Esta es la sorpresa!. Qu te creas...!

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada

Prembulo
Entre los Elementos que hemos visto y los
que veremos, hay algunos que actan a
nivel de bloque, y hay otros que actan a
nivel de lnea.
Por ejemplo, de los Elementos que ya
hemos estudiado, EM, CODE, y STRONG
son lo que se llama "inline elements",
mientras que BLOCKQUOTE es un
Elemento de bloque, "block-level".
Conceptualmente, se considera que un
Elemento de bloque genera una
"estructura" ms larga que un Elemento de
lnea.
Slo un par de cosas ms:

Puntos de Vista

Entrada
Colaboraciones

Normalmente, los "Elementos de bloque"


pueden contener otros Elementos de
bloque y Elementos de lnea. Los
Elementos de lnea slo pueden contener
otros Elementos de lnea y datos.

file:///D|/Manuales/Aprender%20HTML/estructura/egdivspa.htm (1 of 8) [27/02/2003 16:55:16]

<html>
<head>
<title>
</title>
<meta>
<link>
<script>
</script>
<style>
</style>
</head>
<body>
<-- -->
<address>
</address>
</body>
</html>

Cmo crear pginas web. Manual: HTML: Estructura Global: Elementos DIV, SPAN

Vuestras
colaboraciones
Sugerencias

Normalmente, los Elementos de bloque


inician una nueva lnea de cdigo. Los
Elementos de lnea no necesariamente.

SALIDA

Dicho esto, sigamos:


<div>...</div>
Este Elemento es muy importante. Permite
definir caractersticas especficas para
determinadas zonas o secciones del
documento HTML. Adems, es un
Elemento bsico para las Hojas de Estilo
que, como ya sabes, veremos ms
adelante.
Acta a nivel de "bloque", y con l podemos
controlar secciones o partes del documento.
Normalmente provoca un salto de lnea
antes de la etiqueta de apertura, y otro
despus de la etiqueta de cierre.
Requiere etiqueta de cierre.

Atributos y Valores
id, class, lang, dir, title, style, align y los
relativos a "sucesos". Estos atributos ya
han sido explicados en el Captulo dedicado
al Texto. Si tienes dudas, vete al elemento
P y a SCRIPT para los sucesos.

<span>...</span>
Este Elemento, al igual que DIV, permite
file:///D|/Manuales/Aprender%20HTML/estructura/egdivspa.htm (2 of 8) [27/02/2003 16:55:16]

Cmo crear pginas web. Manual: HTML: Estructura Global: Elementos DIV, SPAN

definir caractersticas especficas, pero a


nivel de lnea.
Requiere etiqueta de cierre.

Atributos y Valores
Los mismos que el elemento DIV.
Ejemplos:

Ests en el Taller del Aprendiz

WebAprendiz
Estos no son los ejemplos que quera
poner. Adems si ests utilizando
Netscape, es posible que no veas nada
especial. Slo lo he hecho para tomarme un
respiro, por lo que no te pondr el cdigo.
En el primero se ha utilizado DIV, y en el
segundo SPAN.
Vamos a ver ejemplos ms serios:

Elementos DIV y SPAN


Esta es la cabecera principal de esta
pgina. La he alineado en el centro con el
file:///D|/Manuales/Aprender%20HTML/estructura/egdivspa.htm (3 of 8) [27/02/2003 16:55:16]

Cmo crear pginas web. Manual: HTML: Estructura Global: Elementos DIV, SPAN

elemento DIV:
<div align="center">
<h3>Elementos DIV y SPAN</h3>
</div>

Esta parrafada est definida con el


elemento DIV. Cuando veamos las LISTAS
y las TABLAS,tambin podrs incluirlas
dentro de las etiquetas DIV. Utilizando los
Atributos "id" y "class", se pueden hacer
cosas muy interesantes. De momento, esto
ya vale para que te hagas una pequea
idea. Pero piensa lo que puedes llegar a
hacer jugando con los diferentes Atributos
de forma adecuada y aplicndolos para
diferenciar secciones en tu documento.
Recuerda que la imaginacin es tu nico
lmite.
COMO era el dios de los banquetes,
de la alegra y de las danzas
nocturnas. No tena ni templo ni
sacerdotes. A COMO va normalmente
asociado MOMO, dios de los chistes,
de la burla y de las palabras alegres.
Lleva un gorro adornado de
cascabeles. En una mano sostiene
una careta y en la otra una mueca,
que es el smbolo de la locura.

Sabas todo esto?

file:///D|/Manuales/Aprender%20HTML/estructura/egdivspa.htm (4 of 8) [27/02/2003 16:55:16]

Cmo crear pginas web. Manual: HTML: Estructura Global: Elementos DIV, SPAN

La etiqueta genrica de este ejemplo es:


<div style="font-family:Arial,
Helvetica; font-size:11pt;
background-color: #99ffff;
color: rgb(0,0,255)">
Al segundo prrafo le he fijado unos
mrgenes de 25px a cada lado.
Fjate, en la forma de definir el atributo
style, que ya hemos visto antes. Se parece
bastante a la forma de definir el formato en
las Hojas de Estilo, que ya veremos.
Por cierto, los amigos de Netscape slo vern el color
de fondo en las zonas donde haya texto, pero no
pasa nada.

Esto es de color rojo y


grande, en cambio esto ya no lo es. Y
Y
esto otro tambin es diferente. Y esto ya
vuelve a ser normal. Y ya vale!.
esto es de otro color y tamao de letra diferente.

Este otro ejemplo est hecho con el


elemento SPAN:
<span style="font-family:
Arial, Helvetica; font-size:
14pt; color: #ff0000; fontweight: bold">Esto es de color
rojo y grande,</span> en
cambio esto ya no lo es. <span
file:///D|/Manuales/Aprender%20HTML/estructura/egdivspa.htm (5 of 8) [27/02/2003 16:55:16]

Cmo crear pginas web. Manual: HTML: Estructura Global: Elementos DIV, SPAN

style="font-family: Arial,
Helvetica; font-size: 8pt;
color: #996600">Y esto es de
otro color y tamao de letra
diferente.</span> <span
style="color: #009900">Y esto
otro tambin es
diferente.</span> Y esto ya
vuelve a ser normal. Y ya
vale!
Por supuesto, estos ejemplos son una
exageracin. Fjate en el ltimo. Aqu
estamos declarando un estilo "en lnea". No
podemos utilizar el elemento DIV, porque
provocara el inicio de un nuevo prrafo, es
decir, provocara un salto de lnea en
blanco y nos destrozara toda la parrafada
anterior. Est claro?
No quiero que pienses que lo nico para lo
que sirven estos dos Elementos es para
hacer tonteras con colorines y tipos de
letra.
Al contrario, son muy tiles para otras
cosas. Pero, como siempre te digo, eso ya
lo veremos con las Hojas de Estilo.
En mi cdigo hay otro ejemplo de utilizacin
del Elemento SPAN. Si te fijas
prcticamente todas las explicaciones sobre
los Valores de los Atributos de los
Elementos, las he hecho utilizando SPAN.
Primero he puesto el Atributo en negrita, y
debajo, en letra ms pequea, la definicin
o comentario sobre el Valor.
Esa "letra ms pequea" est definida
file:///D|/Manuales/Aprender%20HTML/estructura/egdivspa.htm (6 of 8) [27/02/2003 16:55:16]

Cmo crear pginas web. Manual: HTML: Estructura Global: Elementos DIV, SPAN

utilizando el Elemento SPAN y, en este


caso, mi hoja de estilo.
Otras opciones hubieran sido, por ejemplo:
Utilizar el Elemento SMALL.
Utilizar el Elemento DIV.
SMALL no me interesaba, primero porque
produca una letra demasiado pequea
para mi gusto. Segundo porque es mejor
utilizar Hojas de Estilo. En mi hoja tengo
definida una "clase" que produce una letra
de 9 puntos, ms adecuada para lo que yo
quera, que la producida por SMALL
DIV tampoco me interesaba, porque
produca una lnea en blanco, cosa que yo
no quera.

Bueno, ya hemos terminado el Captulo de


Estructura Global. Slo falta que veas el
Documento de Prctica 2,
correspondiente al final de captulo y que,
en este caso, incluye Elementos de Texto y
de la Estructura Global.

Ver Documento de Prctica 2

Bueno, ahora nos toca ver las LISTAS,


ests listo?

file:///D|/Manuales/Aprender%20HTML/estructura/egdivspa.htm (7 of 8) [27/02/2003 16:55:16]

Cmo crear pginas web. Manual: HTML: Estructura Global: Elementos DIV, SPAN

Elemento ADDRESS
ndice HTML
ndice General

Listo

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/estructura/egdivspa.htm (8 of 8) [27/02/2003 16:55:16]

Cmo crear pginas web. Manual: HTML: Documento de Prctica 2: Texto y E.G.: pantalla

Documento de Prctica 2: Texto: Pgina


Pantalla
Elementos de Texto + Estructura Global

Bueno, ya estamos en el segundo Documento de


Prctica. De entrada habrs observado que el fondo de
la pgina, sus mrgenes izquierdo y derecho, y el color
del texto normal han cambiado. Menos da una piedra.
Estos cambios los vers en la etiqueta <body> cuyos
atributos estrenamos hoy.
Como puedes imaginarte, y si no te lo digo yo, todo lo
que he escrito hasta ahora, est definido a travs del
elemento DIV y tambin he utilizado ya el elemento
SPAN.
Para que veas la diferencia, acabo de cerrar el elemento SPAN. Esta es la fuente
estndar, sin Spanes, ni Divs, ni Hojas de Estilo, ni nada. Pero an siguen
actuando las propiedades definidas en la etiqueta <body>. Recuerda que estas
propiedades son generales para todo el documento, a menos que sean modificadas
a nivel de bloque o a nivel de lnea, con DIV, SPAN, P, etc., utilizando el atributo
<style>.

Resumiendo:
Ya tienes ms elementos y atributos con los que
jugar o, ms bien, practicar un poco. Esto de poner
ejemplos se me da bastante mal. Es un rollo. Por
cierto, estoy utilizando el elemento <blockquote> a
pesar de que este prrafo no es ninguna cita ni nada
por el estilo. Pero da igual, ya has cogido la idea,
no?.

file:///D|/Manuales/Aprender%20HTML/estructura/docej2p.htm (1 of 2) [27/02/2003 16:55:17]

Cmo crear pginas web. Manual: HTML: Documento de Prctica 2: Texto y E.G.: pantalla

Bien, despus de toda esa parrafada no har falta que haga la pgina de
Comentarios, no te parece?

Y, como siempre, te recuerdo que

HOJAS DE ESTILO!!!

MEJOR CON

Ver Pgina de Cdigo


Volver al manual

Ferran Mart 2000 - WebAprendiz.com - Versin 1.0

file:///D|/Manuales/Aprender%20HTML/estructura/docej2p.htm (2 of 2) [27/02/2003 16:55:17]

Cmo crear pginas web. Manual: HTML: Documento de Prctica 2: Texto y E.G.: cdigo

DOCUMENTO DE PRCTICA 2: Texto: Pgina de cdigo.

<body text="ffffff" bgcolor="#cc3300 leftmargin="75" rightmargin="75"


link="#ffff00 alink="#ffffff" vlink="000000">
<h2 align="center">Documento de Prctica 2: Texto: Pgina
Pantalla</h2>
<hr size="2">
<p><font face="Arial" size="3" color"#0000ff"><strong>Elementos de
Texto + Estructura Global</strong></font></p>
<div style="font-family: Verdana, Arial, Helvetica; font-size: 11pt">
<p>Bueno, ya estamos en el segundo <span style="font-family: Arial,
Helvetica; font-size: 13pt; color: #99ff00">Documento de
Prctica.</span> De entrada habrs observado que el fondo de la
pgina, sus mrgenes izquierdo y derecho, y el color del texto normal
han cambiado. Menos da una piedra.<br>
Estos cambios los vers en la etiqueta <tt><body></tt> cuyos atributos
estrenamos hoy.</p>
<p>Como puedes imaginarte, y si no te lo digo yo, todo lo que he
escrito hasta ahora, est definido a travs del elemento DIV y tambin
he utilizado ya el elemento SPAN.</p>
</div>
<p>Para que veas la diferencia, acabo de cerrar el elemento SPAN. Esta
es la fuente estndar, sin Spanes, ni Divs, ni Hojas de Estilo, ni
nada. Pero an siguen actuando las propiedades definidas en la
etiqueta <tt><body></tt>. Recuerda que estas propiedades son generales
para todo el documento, a menos que sean modificadas a nivel de bloque
o a nivel de lnea, con DIV, SPAN, P, etc., utilizando el atributo
<tt><style></tt>.</p>
<p>&nbsp;</p>
<p align="left" style="font-family: Book Antigua, Verdana, sans-serif;

file:///D|/Manuales/Aprender%20HTML/estructura/docej2c.htm (1 of 2) [27/02/2003 16:55:17]

Cmo crear pginas web. Manual: HTML: Documento de Prctica 2: Texto y E.G.: cdigo

font-size: 14pt; color: rgb(192,192,192); font-weight:


bold">Resumiendo:</p>
<blockquote style="font-family: Verdana, Arial, Helvetica">
<p>Ya tienes ms elementos y atributos con los que jugar o, ms bien,
practicar un poco. Esto de poner ejemplos se me da bastante mal. Es un
rollo. Por cierto, estoy utilizando el elemento <tt><blockquote></tt>
a pesar de que este prrafo no es ninguna cita ni nada por el estilo.
Pero da igual, ya has cogido la idea, no?.</p>
</blockquote>
<p>&nbsp;</p>
<p>Bien, despus de toda esta parrafada no har falta que haga la
pgina de <span style="font-family: Arial, Helvetica; font-size: 13pt;
color: #99ff00">Comentarios</span>, no te parece?</p>
<div style="font-family: Verdana, Arial, Helvetica: font-size: 10pt">
<p>Y, como siempre, te recuerdo que <span style="font-size: 13pt;
color: #ff9900">MEJOR CON HOJAS DE ESTILO!!!</span></p>
</div>
<p>&nbsp;</p>
.............
.............
</body>

Ver Pgina de Pantalla


Volver al manual

Ferran Mart 2000 - WebAprendiz.com - Versin 1.0

file:///D|/Manuales/Aprender%20HTML/estructura/docej2c.htm (2 of 2) [27/02/2003 16:55:17]

Cmo crear pginas web. Manual: HTML: Estructura Global: Elemento ADDRESS

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso


a Paso

Qu es el
Estudio?

Elemento ADDRESS

Declaracin
principios

<address>..</address>
Este elemento normalmente se utiliza para
dar informacin sobre el autor, copyright,
etc. ya sea en pginas o formularios.
Requiere etiqueta de cierre.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales

Atributos principales
id, class, lang, dir, title, style y los
relativos a "eventos". Todos ellos ya han
sido comentados en el elemento P.

Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Valores
Los valores de los atributos ya han sido
comentados. En cuanto a su Contenido
habitual, suele ser texto o texto ms alguna
fecha y una URL.

file:///D|/Manuales/Aprender%20HTML/estructura/egaddres.htm (1 of 3) [27/02/2003 16:55:17]

<html>
<head>
<title>
</title>
<meta>
<link>
<script>
</script>
<style>
</style>
</head>
<body>
<-- -->
<address>
</address>
</body>
</html>

Cmo crear pginas web. Manual: HTML: Estructura Global: Elemento ADDRESS

Vuestras
colaboraciones
Sugerencias
SALIDA

Ejemplo:
Fjate en la informacin que hay al final de
cada pgina de WebAprendiz, justo debajo
del men de navegacin y de la lnea
horizontal.
Bien, ese puede ser un ejemplo tpico de la
utilizacin y contenido de este elemento.
Personalmente no utilizo este elemento
para colocar esa informacin, pero tu eres,
como siempre, libre de hacerlo. Si te
decides a utilizarlo, normalmente pondrs
esta informacin al final de la pgina y en
todas las pginas de tu web.
Por este motivo, porque es una informacin
fija de cada pgina, he incluido este
elemento en la Estructura Global.
En futuros ejemplos, en los que incluya la
Estructura del documento HTML, slo
utilizar la Estructura Bsica sin sombrero,
ms aquellos elementos necesarios para
ilustrar el ejemplo en cuestin. Vale?...De
acuerdo.
Utilices el sistema que utilices, es
importante que facilites este tipo de
informacin en todas tus pginas.

Bien, ya hemos terminado la Estructura


Global, pero te tengo reservada una
sorpresita.

file:///D|/Manuales/Aprender%20HTML/estructura/egaddres.htm (2 of 3) [27/02/2003 16:55:17]

Cmo crear pginas web. Manual: HTML: Estructura Global: Elemento ADDRESS

Quieres verla?
Elemento BODY
ndice HTML
ndice General

Qu remedio!

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/estructura/egaddres.htm (3 of 3) [27/02/2003 16:55:17]

Cmo crear pginas web. Manual: HTML: Estructura Global: Elemento BODY

El Estudio

El Almacn

El Archivo

Sugerencias

Recomendar

Web de contenido gratuito y formativo.


Qu ms quieres?. Recomendar Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML

estudio/Cmo crear tu pgina web: Paso a Paso

Elemento BODY
<body>.....</body>
Este Elemento contiene el documento propiamente dicho.
Es decir, todo el texto, imgenes, etc. que constituyen el
Contenido del documento html.
Era uno de los elementos ms importantes del HTML hasta
la aparicin de las Hojas de Estilo, ya que el estilo global de
la hoja se inclua en su etiqueta de apertura, como
veremos.
Sus etiquetas son opcionales, pero te recomiendo que las
uses siempre, an en el caso de que no definas ningn
formato dentro de su etiqueta de apertura.

Libro de Estilo

Principios
generales

Atributos principales

Accesibilidad
Avanzando

background
Desaprobado. Se utiliza en el caso de desear que el fondo
de la pgina sea una imagen.

Entrada
Puntos de Vista

text
Desaprobado. Sirve para determinar el color del texto en el
documento.

Entrada
Colaboraciones

Vuestras
colaboraciones

link
Desaprobado. Sirve para fijar el color de los enlaces de
texto no visitados.

vlink
Desaprobado. Sirve para determinar el color de los
enlaces de texto visitados.

Sugerencias
SALIDA

alink
Desaprobado. Sirve para determinar el color de los
enlaces de texto, cuando son seleccionados por el usuario.

bgcolor
Desaprobado. Sirve para fijar el color de fondo del
file:///D|/Manuales/Aprender%20HTML/estructura/egbody.htm (1 of 5) [27/02/2003 16:55:18]

<html>
<head>
<title>
</title>
<meta>
<link>
<script>
</script>
<style>
</style>
</head>
<body>
<-- -->
<address>
</address>
</body>
</html>

Cmo crear pginas web. Manual: HTML: Estructura Global: Elemento BODY

documento.

id, class, lang, dir, title, style ya comentados en el


elemento P.
onload, onunload y otros relativos a "sucesos" que los
comentar en el Captulo de SCRIPT.

Valores
background="URL"
bgcolor="un color"
text="un color"
El primer valor es el URL de la imagen que deseamos como fondo del
documento.
El segundo indica el color que deseamos como fondo del documento. El
valor por defecto es el blanco.
El tercero indica el color del texto del documento.

Ejemplo:
<body
background="../../../../images/cielo.gif">
El cdigo anterior selecciona como imagen de fondo
"cielo.gif", que se encuentra en el directorio "images"
situado cuatro niveles por encima del actual. Pero eso ya lo
veremos un da de estos.
<body bgcolor="#008000">
Aqu hemos fijado como color de fondo un verde oscuro.
<body text="#ffffff">

Nota: Nada nos impide poner los dos atributos de fondo a la vez.
Ganar la imagen, pero si el navegante tuviera anulada la opcin de ver
imgenes, entonces vera el color de fondo que hemos definido.
Segn el color de nuestro texto, es importante que el color seleccionado
para el fondo del documento, se corresponda aproximadamente con el
color general de la imagen, o sea un color que contraste con el color del
texto definido, de lo contrario, en el caso apuntado, el visitante podra
no ver el texto.

file:///D|/Manuales/Aprender%20HTML/estructura/egbody.htm (2 of 5) [27/02/2003 16:55:18]

Cmo crear pginas web. Manual: HTML: Estructura Global: Elemento BODY

<body text="#ffffff" bgcolor="#008000"


background="oscuridad.gif">
Esta podra ser una buena combinacin. El texto es blanco, el color de
fondo es verde oscuro, que da un buen contraste con el blanco del
texto. Aunque la imagen de fondo no se mostrara, se podra leer el
texto.
Imagnate el mismo cdigo pero SIN definir color de fondo. Si el
navegante hubiera optado por no ver imgenes, el fondo por defecto
sera blanco y el texto blanco tambin. Qu vera dicho navegante?
Nothing, nada, niente, res, rien du tout.
En realidad esta Nota debera estar en otro captulo de Diseo y Estilo,
pero voy un poco acelerado y aqu est.

link="un color"
alink="un color"
vlink="un color"
Hipervnculo estndar de WebAprendiz
Hipervnculo activo de WebAprendiz
Hipervnculo visitado en WebAprendiz
Nota: Cuando seleccionas un link, por ejemplo al final de esta pgina,
vers que a parte de cambiar de color, desaparece el subrayado. De
momento olvdate, ya te lo contar otro da.
Tambin habrs observado que los colores de mis links no se
corresponden con los considerados estndar: Azul, Rojo, Violeta. Olvida
esto tambin. Ya lo discutiremos en el Libro de Estilo o en la seccin
Puntos de Vista

Queda por hablar de varios atributos que son propios del


navegador, pero que se incluyen en la etiqueta de apertura
del elemento BODY:
topmargin. Fija el margen superior de la pgina en pixels.
bottommargin. Lo mismo para el margen inferior.
leftmargin. Puedes establecer el margen izquierdo en
pixels.
rightmargin. Permite determinar el margen de hecho en
pixels.
<body topmargin="0">
Este cdigo est determinando que el margen superior de
file:///D|/Manuales/Aprender%20HTML/estructura/egbody.htm (3 of 5) [27/02/2003 16:55:18]

Cmo crear pginas web. Manual: HTML: Estructura Global: Elemento BODY

toda la pgina sea de "cero" pixels. Si miras el cdigo


fuente de esta pgina, vers que ste es el nico atributo
que tengo definido en la etiqueta <body>.
Nota:Segn el navegador que utilices, puedes llevarte una sorpresa con
el tema de los mrgenes. Aunque definas el margen con el valor "cero",
puedes encontrarte con un margen predeterminado. Quien avisa no es
traidor.

Vamos a ver un ejemplo Desaprobado con todo lo que


hemos visto del elemento BODY:
<body topmargin="0" bottommargin="20"
leftmargin="5" rightmargin="5"
bgcolor="008000"
background="images/oscuridad.gif"
text="ffffff" link="ff0000" alink="33ff66"
vlink="fafafa">
Qu tal?. Seguro que t mismo puedes entender el
contenido de la etiqueta anterior. As que te dejo.

Aunque pueda parecerte pesado, te vuelvo a repetir que


hay muchos Elementos y/o Atributos que estn
Desaprobados en favor de las famosas Hojas de Estilo.
Bueno, el BODY ya no da para ms, y el mo tampoco. Nos
vemos maana.

De acuerdo?
Elemento META
ndice HTML
ndice General

file:///D|/Manuales/Aprender%20HTML/estructura/egbody.htm (4 of 5) [27/02/2003 16:55:18]

De acuerdo

Cmo crear pginas web. Manual: HTML: Estructura Global: Elemento BODY

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/estructura/egbody.htm (5 of 5) [27/02/2003 16:55:18]

Cmo crear pginas web. Manual: HTML: Estructura Global: Elemento META

El Estudio

El Almacn

El Archivo

Sugerencias

Recomendar

Web de contenido gratuito y formativo.


Qu ms quieres?. Recomendar Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos

estudio/Cmo crear tu pgina web: Paso a Paso

Elemento META
<meta.....>
Este elemento sirve para dar informacin diversa
sobre el documento html, a travs de sus Atributos.
Etiqueta de cierre prohibida.

PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Vuestras
colaboraciones

Atributos principales
name
Este atributo identifica el nombre de una propiedad
del documento.

content
Este atributo especifica el "valor" de la propiedad
definida en el atributo name.

scheme
Sirve para nombrar un sistema para interpretar el
valor de la propiedad. Puede servir de ayuda a los
mecanismos (user agents), para una mejor
interpretacin de los datos contenidos en el
elemento meta.

http-equiv
Nos permite poner informacin o mensajes que el
servidor procesa cada vez que se abre la pgina.
Este atributo puede sustituir al atributo name.

lang, dir. Ya han sido descritos en el elemento P.


Sugerencias
SALIDA
file:///D|/Manuales/Aprender%20HTML/estructura/egmeta.htm (1 of 4) [27/02/2003 16:55:19]

<html>
<head>
<title>
</title>
<meta>
<link>
<script>
</script>
<style>
</style>
</head>
<body>
<-- -->
<address>
</address>
</body>
</html>

Cmo crear pginas web. Manual: HTML: Estructura Global: Elemento META

Valores
Todos los valores de estos Atributos se presentan en
forma de texto. Por lo tanto los veremos a travs de
ejemplos.
Ejemplos:
Podemos utilizar este Elemento para identificar
diferentes propiedades de un documento. Por
ejemplo, su autor, una lista de palabras clave, una
fecha de caducidad del documento, etc.
Cada elemento META especifica una propiedad y su
correspondiente valor. La propiedad se define con
name y el valor se especifica con content.

<meta name="Author" content="Ferran


Mart">
<meta name="Author" lang="es"
content="TutankaFM">
<meta name="docprincipal" lang="es"
content="http://www.casa.org/dp.txt">
<meta name="description"
content="Cmo crear pginas web,
manual del principiante, recursos
gratuitos para pginas web, manual de
estilo, manual de HTML, concursos de
webs.">
<meta http.equiv="keywords"
content="estilo, web, recursos, html,
manual, principiante, aprendiz,
gua">

file:///D|/Manuales/Aprender%20HTML/estructura/egmeta.htm (2 of 4) [27/02/2003 16:55:19]

Cmo crear pginas web. Manual: HTML: Estructura Global: Elemento META

Creo que son suficientes. En los dos primeros


ejemplos, estamos definiendo la propiedad del
documento como "Autor" y su valor es el "nombre"
del autor en cada caso. Podemos poner el atributo
"lang" para definir el idioma en que se ha redactado
el documento.
El tercero incorpora un enlace a un documento
externo, y podra sustituirse por el elemento LINK.
Pero eso ya lo veremos.
El cuarto es tpico de la mayora de webs. Hace una
descripcin del sitio. Como si fuera un ttulo muy
largo.
El ltimo es la relacin de palabras clave, muy tpico
tambin en la mayora de webs. Fjate que he
utilizado "http.equiv". Podra haber usado "name".
Los dos ltimos son muy interesantes a efectos de
los denominados "motores de bsqueda", de los que
ya hablaremos.
Las palabras clave y la descripcin servirn para que
nuestra web pueda ser localizada por terceros, y
figure en determinados ndices.

Vamos con el Cuerpo?


Elemento TITLE
ndice HTML
ndice General

file:///D|/Manuales/Aprender%20HTML/estructura/egmeta.htm (3 of 4) [27/02/2003 16:55:19]

Vamos

Cmo crear pginas web. Manual: HTML: Estructura Global: Elemento META

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/estructura/egmeta.htm (4 of 4) [27/02/2003 16:55:19]

Como crear pginas web. Manual: HTML: Elemento P p2

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada

estudio/Cmo crear tu pgina web: Paso a


Paso

lang= "cdigo de idioma"


Sirve para especificar el idioma utilizado en el
contenido de un elemento y los valores de un atributo.
Es decir, el idioma del texto que ests escribiendo. Es
til para los "motores de bsqueda", sintetizadores de
voz, correctores de ortografa, etc. Puedes escribir una
pgina multilinge, especificando en cada momento el
idioma que vas a utilizar.

Ejemplos:
<p lang="es">Bla, bla, bla, en
castellano</p>
Algunos cdigos:
"en": Ingls
"en-US": Ingls de los EE.UU.
"fr": Francs
"de": Alemn
"i-navajo": Idioma Navajo
Estn expresamente excluidos los lenguajes
de ordenador.

Colaboraciones

file:///D|/Manuales/Aprender%20HTML/texto/ptext2.htm (1 of 4) [27/02/2003 16:55:20]

Como crear pginas web. Manual: HTML: Elemento P p2

Vuestras
colaboraciones
Sugerencias
SALIDA

dir="ltr", "rtl"
Adems de indicar el idioma con el atributo lang
anterior, se puede especificar la direccionalidad del
texto del documento y de las tablas, caso de
utilizarlas.
No hay que confundir este Atributo, con el Elemento
DIR, que ya veremos.
Este Atributo puede tomar los valores: "ltr" (Left-toright), de izquierda a derecha, y "rtl" (Right-to-left),
de derecha a izquierda.
Cuando un elemento admite el atributo "lang", tambin
admite el atributo "dir".

title="el ttulo que quieras"


Sirve para poner un ttulo, en este caso, al prrafo
(qu listo!). Eso normalmente significa que cuando
detengas el ratn sobre el prrafo se visualizar el
ttulo elegido. Aunque no se visualizara el ttulo, ste
figurara en el cdigo fuente del documento.
Ejemplo: (Con Netscape a m no me funciona)

Posa suavemente tu ratn encima


<p title="Me duele la espalda.
Son las 3 a.m, me voy a
dormir,">Posa suavemente el
ratn encima</p>

Buenos das. En qu parte del documento


HTML ponemos el Elemento P?.
Pues en el Cuerpo, es decir, dentro de las
etiquetas <BODY></BODY>. Vemoslo:
<html>
<head>
file:///D|/Manuales/Aprender%20HTML/texto/ptext2.htm (2 of 4) [27/02/2003 16:55:20]

Como crear pginas web. Manual: HTML: Elemento P p2

<title>La P y sus
circunstancias</title>
</head>
<body>
Empiezo a escribir algo y de
repente quiero empezar un nuevo
prrafo. Por lo tanto usar el
elemento P, que ya te he dicho
para qu sirve. Vamos all.
<p>Esto es un prrafo nuevo muy
corto.</p>
</body>
</html>
Verdad que es fcil?. Si haces un
documento HTML con ese cdigo puro y
duro, vers la frase en la parte superior de la
pgina, alineada a la izquierda y escrita en
Times New Roman tamao doce y color
negro, que es lo standard. Creo.
Veamos algunos ejemplos. (Un ratito
despus...Te han gustado?)

Ayudita: Cuando quieras intercalar una lnea en blanco


entre prrafos, si escribes <p></p>, no te va a
funcionar. Tienes que poner algo dentro que no se vea.
Lo mejor es poner &nbsp; que significa non-breaking
space. Creme.
Nota: Todos los Elementos en que no se especifique lo
contrario, consideraremos que su lugar normal de
emplazamiento es dentro del Cuerpo del Documento,
es decir, entre las etiquetas <body>...</body>

file:///D|/Manuales/Aprender%20HTML/texto/ptext2.htm (3 of 4) [27/02/2003 16:55:20]

Como crear pginas web. Manual: HTML: Elemento P p2

Bueno, suficiente con el P. Pasemos a otra


cosa.
Elemento P pag.1
ndice HTML
ndice General

Pasemos pues

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/texto/ptext2.htm (4 of 4) [27/02/2003 16:55:20]

Como crear pginas web. Manual. HTML: Ejemplo Elemento P

Ejemplos del Elemento P


Yo no me encuentro a m mismo donde me busco. Me encuentro por sorpresa cuando menos lo espero.
Esto lo dijo Montaigne. Ya vale.
Esto es un nuevo prrafo. Los ejemplos los pondr siempre en documentos separados. Podra abrir una
ventanita, pero prefiero no hacerlo. Aprovecha para ver el cdigo fuente de los ejemplos. Puedes hacer
"cortar y pegar" y guardarte el cdigo para tu propio uso. No esta tontera de parrafada, pero s cuando te
ponga diferentes tipos de Plantillas que, tal vez, te puedan interesar.

Prrafo centrado. Fjate el la lnea de cdigo anterior a sta. Luego hablamos.


Prrafo con alineacin derecha.
Este prrafo lleva un ttulo incorporado. Selalo con el ratn y espera. (Si utilizas Netscape, es posible
que tengas que esperar todo el da. Seguramente no te funcionar)

Otro prrafo con algo de estilo en lnea. Por cierto, fjate que esta
pgina utiliza la Estructura Bsica que vimos, a excepcin de la
informacin sobre el HTML utilizado. Este tipo de Plantilla la
usaremos mucho. Ms adelante ya veremos la Plantilla de la
Estructura Global del documento.
(Por cierto, si utilizas Netscape no vers toda la pastilla Verde, slo la parte que lleve texto.)
En cambio, este texto intermitente no lo vern los del Explorer, creo.
Bueno ya vale de tonteras

VOLVER AL TRABAJO

file:///D|/Manuales/Aprender%20HTML/texto/exp.htm [27/02/2003 16:55:20]

Como crear pginas web. Manual: HTML: Elemento BR

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Elemento BR

Declaracin
principios

<br>
Sirve para insertar un salto de lnea. El texto
que le siga, aparecer en la lnea siguiente.
Etiqueta de cierre prohibida. Se trata de uno
de los denominados Elementos "vacos", en
el sentido de que no existe contenido entre
etiquetas. Por eso no existe etiqueta de
cierre.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada

Atributos principales
clear
Se utiliza para especificar la forma en que
un texto se distribuir alrededor de un
objeto flotante. Lo veremos cuando
estudiemos las imgenes.

title, style, id, y class, que ya he


mencionado en el elemento P.

Colaboraciones

file:///D|/Manuales/Aprender%20HTML/texto/brtext.htm (1 of 3) [27/02/2003 16:55:20]

Como crear pginas web. Manual: HTML: Elemento BR

Vuestras
colaboraciones
Sugerencias
SALIDA

Valores
clear= "none", "left", "right", "all"
"none" es el valor por defecto, hace que el texto se
distribuya libremente ajustndose a la disposicin de
los otros elementos del documento.
"left", alinea el texto a la izquierda, por debajo del
objeto y hacia el lado izquierdo de la pantalla.
"right", a la inversa que el anterior.
"all", coloca el texto a continuacin del objeto flotante.
Como ya he dicho, veremos estos valores en el
captulo dedicado a las imgenes.

Ejemplo:
El ejemplo del elemento BR, es
muy fcil. Es un punto y aparte
normal y corriente. No inserta
una lnea en blanco despus del
texto.
Sino que el texto sigue el la
lnea inmediata siguiente (lo
has visto?).
<p>El ejemplo del elemento BR,
es muy fcil. Es un punto y
aparte normal y corriente. No
inserta una lnea en blanco
despus del texto.<br>
Sino que el texto sigue en la
lnea inmediata siguiente (lo
has visto?).</p>
Fulanito de Tal y Tal
Plaza Mayor, 75
00000 Compulandia
<p>Fulanito de Tal y Tal<br>
file:///D|/Manuales/Aprender%20HTML/texto/brtext.htm (2 of 3) [27/02/2003 16:55:20]

Como crear pginas web. Manual: HTML: Elemento BR

Plaza Mayor, 75<br>


00000 Compulandia</p>

Bueno, creo que est clarsimo, no?


Seguimos andando?
Elemento P pag.2
ndice Elementos Texto
ndice HTML
ndice General

Seguimos

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/texto/brtext.htm (3 of 3) [27/02/2003 16:55:20]

Como crear pginas web. Manual: HTML: Elemento BLOCKQUOTE

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Elementos BLOCKQUOTE y Q

Declaracin
principios

<blockquote>...</blockquote>
Se suele utilizar para citar textos de terceros
bastante largos. Produce un sangrado del
texto. La repeticin anidada de estas
etiquetas se utilizaba como elemento de
estilo o presentacin. Debe evitarse utilizarlas
en ese sentido, ya que disponemos de Hojas
de Estilo para ello.
Requiere etiqueta de cierre.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales

<q>.....</q>
Este Elemento tericamente pone "comillas"
en el texto comprendido entre sus dos
etiquetas.

Accesibilidad
Avanzando

Entrada

Atributos principales

Puntos de Vista

Entrada

cite
Sirve para especificar detalles en el cdigo
referentes, por ejemplo al origen del texto
que se est citando.

Colaboraciones

title
file:///D|/Manuales/Aprender%20HTML/texto/blquote.htm (1 of 3) [27/02/2003 16:55:21]

Como crear pginas web. Manual: HTML: Elemento BLOCKQUOTE

Al igual que vimos anteriormente, sirve para


dar un ttulo al bloque de texto. Aparece
cuando se posa el ratn en cualquier parte
del prrafo.

Vuestras
colaboraciones
Sugerencias
SALIDA

style
Al igual que vimos con el elemento P,
podemos definir estilo en lnea en la
etiqueta de apertura <blockquote>.

lang, dir, id, class, y los referidos a


"sucesos", que ya he mencionado en el
apartado del elemento P.

Valores
cite="texto que quieras poner"
title="texto que quieras poner"
style="el estilo que quieras definir"

Vemos algunos ejemplos?


No tengo mucho ms que decir sobre estos
dos Elementos as que terminemos con una:
Ayudita: Si te fijas detenidamente en el cdigo de los
ejemplos, vers que existen lneas en blanco entre
ellos. Sin embargo yo no he codificado ninguna lnea
en blanco, es decir, no vers esto <p>&nbsp;</p> en
mi cdigo.
Esto es debido a que el elemento BLOCKQUOTE es
muy suyo y, normalmente, inserta (por as decirlo) una
lnea en blanco antes de la etiqueta de apertura y otra
despus de la etiqueta de cierre. Curioso, no?

file:///D|/Manuales/Aprender%20HTML/texto/blquote.htm (2 of 3) [27/02/2003 16:55:21]

Como crear pginas web. Manual: HTML: Elemento BLOCKQUOTE

Ms madera?
Elemento BR
ndice Elementos Texto
ndice HTML
ndice General

Ms, ms!

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/texto/blquote.htm (3 of 3) [27/02/2003 16:55:21]

Como crear pginas web. Manual. HTML: Ejemplo Elemento BLOCKQUOTE

Ejemplos Elemento BLOCKQUOTE


Clebulo de Lidio dijo:
La abundancia de palabras y la ignorancia predominan en la mayor parte de los hombres;
si quieres sobresalir de la mayora intil, cultiva tu conocimiento y envulvete en nubes de
silencio.
(Por lo tanto yo debo ser muy ignorante porque estoy utilizando un exceso de palabras en este Manual).
Este en un <blockquote> con Ttulo. Si posas el ratn encima de este texto debera
aparecer un ttulo. Los Netscapistas es posible que no lo vean. Depende de la versin que
tengan para cuando este Manual se publique, y esto me parece que va para largo, porque
slo llevamos 3 Elementos y hay unos 90.

Este texto tiene el estilo definido en la etiqueta de apertura


del Elemento BLOCKQUOTE, es decir la <blockquote>. He
utilizado el mismo estilo que el del ejemplo del elemento P,
porque estoy cansado y es ms fcil "cortar y pegar" que
definir un estilo diferente. Tu me entiendes, verdad?. Pues
si tu ests cansado, imagnate yo !!!.
Bueno, creo que deberamos VOLVER AL TRABAJO, slo llevo 11 horas seguidas.

file:///D|/Manuales/Aprender%20HTML/texto/exblq.htm [27/02/2003 16:55:21]

file:///D|/Manuales/Aprender%20HTML/texto/cabetext.htm

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Elementos H1, H2, H3, H4, H5, H6

Declaracin
principios

<hn>...</hn> para n=1 a 6


Existen 6 cabeceras predefinidas, de la h1 a
la h6. Se pueden utilizar para poner ttulos de
diferentes niveles dentro del documento.
Provocan un salto de lnea en blanco antes
y despus de sus etiquetas.
Requieren etiqueta de cierre.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada

Atributos principales
align (desaprobada), title, style, lang, dir,
id, class, y las referidas a "sucesos". Los
primeros los encontrars en el Elemento P.
Los relativos a sucesos en le Captulo
SCRIPT.

Puntos de Vista

Entrada
Colaboraciones

Valores
Ver el elemento P.

file:///D|/Manuales/Aprender%20HTML/texto/cabetext.htm (1 of 3) [27/02/2003 16:55:22]

file:///D|/Manuales/Aprender%20HTML/texto/cabetext.htm

Vuestras
colaboraciones
Sugerencias
SALIDA

Ejemplos de cabeceras:

Para superttulos
h1
Para ttulos h2
Ttulos un poco ms pequeos
h3
An mucho ms pequeos h4
Para tituletes pequeos h5
Para encabezados ridculos h6

Aviso: El formato en el que ves estos encabezados no


es el estndar que obtendrs si copias el cdigo
correspondiente a esas lneas. Mis cabeceras estn
predefinidas en mi Hoja de Estilo, en cuanto a tipo de
fuente, color, etc. Adems, el H6 lo tengo definido
como alineacin "center", por eso aparece diferente a
los dems. Podra haber "anulado" el efecto de la hoja
de estilo, pero he preferido no hacerlo. De acuerdo?
Por cierto, Netscape o al menos su versin 4.5, no
distingue el H3 del H4.

El cdigo es muy fcil:


<hn>Texto de la cabecera</hn>
Recuerda que n puede tomar los valores de 1
a 6.
Por ltimo, se aconseja que para obtener una
buena Presentacin del documento, conviene
file:///D|/Manuales/Aprender%20HTML/texto/cabetext.htm (2 of 3) [27/02/2003 16:55:22]

file:///D|/Manuales/Aprender%20HTML/texto/cabetext.htm

seguir el orden numrico de las cabeceras.


Por ejemplo, si la cabecera ms destacada
de tu pgina la defines como una H3, el
siguiente subttulo o subcabecera en
importancia dentro del documento debera
ser una H4, la siguiente, si la hay, una H5,
etc.

Yo estoy listo, y tu?


Elemento BLOCKQUOTE
ndice Elementos de Texto
ndice HTML
ndice General
| arriba | Almacn | Archivo | Pgina Principal

Tambin

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/texto/cabetext.htm (3 of 3) [27/02/2003 16:55:22]

Cmo crear pginas web. Manual: HTML: Elemento ACRONYM y otros

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales

estudio/Cmo crear tu pgina web: Paso a


Paso

Elementos ACRONYM, ABBR,


CITE, DFN
<acronym>...</acronym>
<abbr>...</abbr>
<cite>...</cite>
<dfn>...</dfn>
Sus propios nombres indican su funcin. Los
dos primeros elementos, un acrnimo o una
forma abreviada.
CITE es para incluir una citacin o referencia
a terceros, dentro de un texto.
DFN, se utiliza para definir un texto contenido
entre sus etiquetas.
Requieren etiqueta de cierre.

Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Atributos principales
title, lang, style, id, class y las referidas a
"sucesos" que he mencionado en el elemento
P.

file:///D|/Manuales/Aprender%20HTML/texto/acrontext.htm (1 of 4) [27/02/2003 16:55:22]

Cmo crear pginas web. Manual: HTML: Elemento ACRONYM y otros

Vuestras
colaboraciones

Valores
Ver el elemento P.

Sugerencias
SALIDA

Veamos algunos ejemplos con el atributo


title:
SSI son determinados servicios
que ofrece el servidor.
<acronym title="Server Side
Includes">SSI </acronym> son
determinados servicios que
ofrece el servidor.
Si posas el ratn sobre las letras SSI, vers el Ttulo.
Con el permiso de tu navegador, claro.

WWW
<abbr title="World Wide
Web">WWW</abbr>
Ves algo?. Yo no.

Tal y como dijo Edward Young,


El tiempo perdido es
existencia, el usado es vida.
Tal y como dijo <cite
title="Tena razn">Edward
Young</cite>, El tiempo perdido
es existencia, el usado es
file:///D|/Manuales/Aprender%20HTML/texto/acrontext.htm (2 of 4) [27/02/2003 16:55:22]

Cmo crear pginas web. Manual: HTML: Elemento ACRONYM y otros

vida.
Si posas el ratn sobre el nombre en cuestin,
deberas ver el ttulo.

FTP significa File Transfer


Protocol.
<dfn
title="Definicin">FTP</dfn>
significa File Transfer
Protocol.
Si posas el ratn sobre FTP deberas ver el ttulo.
Siempre salvando problemas de navegadores,
versiones varias, etc. etc.

Slo fjate, que CITE y DFN ponen en letra


cursiva/oblicua?, el texto visible que se
coloca entre las etiquetas correspondientes.

Bueno, nos hemos comido cuatro de golpe,


eh?
Nos comemos cuatro ms?
Elementos Hn
ndice Elementos de Texto
ndice HTML
ndice General

file:///D|/Manuales/Aprender%20HTML/texto/acrontext.htm (3 of 4) [27/02/2003 16:55:22]

Valee, valee!

Cmo crear pginas web. Manual: HTML: Elemento ACRONYM y otros

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/texto/acrontext.htm (4 of 4) [27/02/2003 16:55:22]

Cmo crear pginas web. Manual: HTML: Elemento CODE y varios

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

estudio/Cmo crear tu pgina web: Paso a


Paso

Elementos CODE, SAMP, KBD,


VAR
<code>...</code>
<samp>...</samp>
<kbd>...</kbd>
<var>...</var>
CODE, sirve para delimitar cdigo fuente de
un programa, como por ejemplo las cuatro
etiquetas que estn justo encima.
SAMP, sirve para designar texto que
representa lo que resulta de ejecutar un
cdigo, programa, scripts, etc.
KBD, sirve para indicar texto que debe
introducir el usuario.
VAR, sirve para indicar un ejemplo de una
variable.
Requieren etiqueta de cierre.

Entrada
Puntos de Vista

Entrada
Colaboraciones

Atributos principales
title, lang, dir, style, id, class y las referidas
a "sucesos". Los primeros los puedes

file:///D|/Manuales/Aprender%20HTML/texto/codetext.htm (1 of 4) [27/02/2003 16:55:23]

Cmo crear pginas web. Manual: HTML: Elemento CODE y varios

Vuestras
colaboraciones

consultar en el elemento P. Los relativos a


sucesos en el Captulo SCRIPT.

Sugerencias
SALIDA

Valores
Ver el elemento P.
Ejemplos:
<code>Este texto representa
cmo se escribe el cdigo
fuente.</code>
Este elemento produce lo que se llama una fuente
monoespaciada, parecida a las antiguas mquinas de
escribir, y el texto aparece tal y como lo escribes,
incluyendo caracteres tpicos de cdigo como: ">",
"<", "/", etc.
Es el tipo de letra que aparece en los ejemplos de
cdigo que encontrars en este Manual, si bien yo
utilizo otro elemento que no es CODE. Pero el
resultado es el mismo. Vers que hay varios elementos
que producen fuente monoespaciada.

El resultado de mi primer script fue:


Soy un to estupendo!
El resultado de mi primer
script fue: <br>
<samp>Soy un to
estupendo!</samp>
Como vers, tambin produce una fuente
monoespaciada.

file:///D|/Manuales/Aprender%20HTML/texto/codetext.htm (2 of 4) [27/02/2003 16:55:23]

Cmo crear pginas web. Manual: HTML: Elemento CODE y varios

Introduzca en las siguientes casillas su


Contrasea y Nmero de Cliente
Introduzca en las siguientes
casillas su
<kbd>Contrasea</kbd> y
<kbd>Nmero de Cliente</kbd>
Otra ms que produce una fuente
monoespaciada. T mismo!.

La variable omega del cdigo


anterior...
La variable <var>omega</var>
del cdigo anterior...
Aqu la letra es cursiva. Al menos hemos
introducido un poco de variacin en el tema.

Bueno esto es todo referente a estos cuatro


Elementos. Tu decidirs los que utilizas. Es
conveniente, sin embargo, utilizar cada uno
para lo que est definido. De esta manera
facilitamos la labor a los mecanismos de
interpretacin de cdigo (user agents).

Matamos dos pjaros de un tiro?

file:///D|/Manuales/Aprender%20HTML/texto/codetext.htm (3 of 4) [27/02/2003 16:55:23]

Cmo crear pginas web. Manual: HTML: Elemento CODE y varios

Elemento ACRONYM y otros


ndice Elementos de Texto
ndice HTML
ndice General

S!, matar !!

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/texto/codetext.htm (4 of 4) [27/02/2003 16:55:23]

Como crear pginas web. Manual: HTML: Elementos EM y STRONG

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Elementos EM y STRONG

Declaracin
principios

<em>...</em>
<strong>...</strong>
EM se utiliza para enfatizar un texto
indicando, de esta manera, que se trata de
algo relevante y merece la atencin especial
del visitante.
STRONG indica lo mismo pero ms fuerte.
Es decir, el texto que delimitan sus etiquetas
se trata de algo de gran importancia y que no
debe pasarse por alto.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales

Atributos principales

Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada

title, lang, dir, style, id, class y las referidas


a "sucesos" que en encontrars en el
Captulo SCRIPT. Los primeros los he
mencionado en el elemento P.
Requieren etiqueta de cierre.

Colaboraciones

file:///D|/Manuales/Aprender%20HTML/texto/emtext.htm (1 of 3) [27/02/2003 16:55:23]

Como crear pginas web. Manual: HTML: Elementos EM y STRONG

Vuestras
colaboraciones
Sugerencias

Valores
Ver el elemento P.
Ejemplos:

SALIDA
WebAprendiz es uno de los
mejores sitios para aprender a
crear tu pgina web.
WebAprendiz es uno de <em>los
mejores sitios</em> para
aprender a crear tu pgina web.
Como ves, EM resalta el texto mediante letra
cursiva. No abuses de ella, o perder su
eficacia.

La etiqueta de cierre est


prohibida en el elemento BR.
La etiqueta de cierre est
<strong>prohibida</strong> en
el elemento BR.
STRONG genera normalmente, en pantalla,
la letra en negrita (puede depender del
navegador). Como antes, no abuses de ella,
o perder su eficacia.

Fcil, verdad?. Dos ms?

file:///D|/Manuales/Aprender%20HTML/texto/emtext.htm (2 of 3) [27/02/2003 16:55:23]

Como crear pginas web. Manual: HTML: Elementos EM y STRONG

Elemento CODE y otros


ndice Elementos Texto
ndice HTML
ndice General

Dos ms

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/texto/emtext.htm (3 of 3) [27/02/2003 16:55:23]

Como crear pginas web. Manual: HTML: Elementos SUB y SUP

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Elementos SUB y SUP

Declaracin
principios

<sub>...</sub>
<sup>...</sup>
SUB, se utiliza cuando hay que incluir un
subndice.
SUP, cuando hay que utilizar un superndice,
claro.
Requieren etiqueta de cierre.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada

Atributos principales
title, lang, dir, style, id, class y los referidos
a "sucesos". Los primeros, los he
mencionado en el elemento P. Los relativos a
sucesos, los encontrars en el Captulo
SCRIPT.

Puntos de Vista

Entrada
Colaboraciones

Valores
Ver el elemento P.

file:///D|/Manuales/Aprender%20HTML/texto/subptext.htm (1 of 2) [27/02/2003 16:55:24]

Como crear pginas web. Manual: HTML: Elementos SUB y SUP

Vuestras
colaboraciones
Sugerencias
SALIDA

Ejemplos:
Hay que beber dos litros de H2O
al da, por lo menos.
Hay que beber dos litros de
H<sub>2</sub>O al da, por lo
menos.

Creo que 42 es igual a 16, no?


Creo que 4<sup>2</sup> es igual
a 16, no?

Yo ya he terminado esta pgina, y t?


Elementos EM y STRONG
ndice Elementos Texto
ndice HTML
ndice General
| arriba | Almacn | Archivo | Pgina Principal

Yo tambin

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/texto/subptext.htm (2 of 2) [27/02/2003 16:55:24]

Como crear pginas web. Manual: HTML: Elemento PRE

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML

estudio/Cmo crear tu pgina web: Paso a Paso

Elemento PRE
<pre>...</pre>
Este elemento genera un texto monoespaciado, como
el que ya hemos visto en otros elementos. Sirve para
informar a los mecanismos visuales (user agents) de
que el texto incluido entre sus dos etiquetas, es texto
preformateado.
Requiere etiqueta de cierre.

Atributos principales

Libro de Estilo

Principios
generales
Accesibilidad

width
Desaprobado. Sirve para sugerir a los mecanismos
de lectura de cdigo, la anchura deseada para el
texto preformateado.

Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Valores
width="nmero"
El "nmero" informa del nmero de caracteres que contiene el
texto preformateado. El mecanismo visual lo que hace es
seleccionar un tamao de fuente apropiado o sangra el texto de
forma que se adapte a esa anchura.

file:///D|/Manuales/Aprender%20HTML/texto/pretext.htm (1 of 3) [27/02/2003 16:55:25]

Como crear pginas web. Manual: HTML: Elemento PRE

Vuestras
colaboraciones
Sugerencias

Ejemplos:
Este texto est preformateado
Y este tambin lo est

SALIDA
<pre>
Este texto est preformateado
Y este tambin lo est
</pre>

Esta

frase

est

pre for ma te a da

<pre>Esta frase est pre for ma te a


da</pre>
Como vers, este Elemento produce una letra
monoespaciada como la que vimos en otros
Elementos. Pero, adems este Elemento reproduce
cada pulsacin del teclado tal y como la realizas.
Fjate en los ejemplos anteriores. En el primero, hay
un salto de lnea. Sin embargo no vers la etiqueta
<br>. Simplemente he pulsado el Retorno de Carro
(Enter) de mi teclado.
En el segundo ejemplo, vers que hay espacios
"extra" entre las slabas de la palabra
"preformateada". Sin embargo, si mirs el cdigo
fuente, vers que no he utilizado ningn carcter
especial para conseguir ese espacio adicional.

Bueno, ser mejor que nos vayamos

file:///D|/Manuales/Aprender%20HTML/texto/pretext.htm (2 of 3) [27/02/2003 16:55:25]

Como crear pginas web. Manual: HTML: Elemento PRE

Elementos SUB y SUP


ndice Elementos Texto
ndice HTML
ndice General

Estoy de acuerdo

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/texto/pretext.htm (3 of 3) [27/02/2003 16:55:25]

Como crear pginas web. Manual: HTML: Elemento BDO

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Elemento BDO

Declaracin
principios

<bdo>...</bdo>
El elemento BDO (bidirectional algorithm
override), permite a los autores anular el
algoritmo bidireccional en determinados
fragmentos del texto del documento. Es decir,
permite cambiar la direccin del texto.
Requiere etiqueta de cierre.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales

Atributos principales
dir
Es obligatorio. Sirve para indicar la
direccin del texto.

Accesibilidad
Avanzando

lang
Informa del cdigo del idioma en cuestin.

Entrada
Puntos de Vista

Entrada

Valores

Colaboraciones

dir="ltr", "rtl"

file:///D|/Manuales/Aprender%20HTML/texto/bdotext.htm (1 of 2) [27/02/2003 16:55:25]

Como crear pginas web. Manual: HTML: Elemento BDO

Vuestras
colaboraciones

lang="cdigo del idioma"


Ya han sido descritos en el elemento P.

Sugerencias
SALIDA
Dudo que vayas a utilizarlo. Pero por si
acaso, fjate que el atributo "dir" es obligatorio
usarlo.
Ya que ha sido tan cortito, ahora vemos
OCHO, vale?
Elemento PRE
ndice Elementos Texto
ndice HTML
ndice General

Vale, hombre!

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/texto/bdotext.htm (2 of 2) [27/02/2003 16:55:25]

Como crear pginas web. Manual: HTML: Elementos varios de formato

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML

estudio/Cmo crear tu pgina web: Paso a


Paso

Elementos:
TT, I, B, BIG, SMALL, STRIKE, S,
U
Estos elementos forman parte del grupo que tiene que
ver ms con el formato del tipo de letra en s, que en
la formacin de la estructura o presentacin de texto
dentro de un documento.
Estos elementos dan informacin sobre la fuente o tipo
de letra.
Aunque no todos estn Desaprobados, es aconsejable
irlos abandonando para obtener esos mismos formatos
a travs de las Hojas de Estilo.

Libro de Estilo

Principios
generales

Todos requieren etiqueta de cierre.


Slo los elementos U, S, y STRIKE estn
Desaprobados actualmente.

Accesibilidad
Avanzando

Entrada

Atributos principales

Puntos de Vista

Entrada
Colaboraciones

id, class, lang, dir, title, style, y los relativos


a "sucesos". Los primeros los he comentado
en el elemento P. Los relativos a sucesos los
encontrars en el Captulo SCRIPT.

file:///D|/Manuales/Aprender%20HTML/texto/text8.htm (1 of 4) [27/02/2003 16:55:26]

Como crear pginas web. Manual: HTML: Elementos varios de formato

Vuestras
colaboraciones

Valores
Sugerencias
SALIDA

Ver el elemento P
Ejemplos:
Letra monoespaciada. Igual que
otros elementos.
<tt>Letra monoespaciada. Igual
que otros elementos.</tt>

Letra cursiva. Igual que algn otro


elemento.
<i>Letra cursiva. Igual que
algn otro elemento.</i>

Letra en negrita. Tambin la hemos


visto antes.
<b>Letra en negrita. Tambin la
hemos visto antes.</b>

Utiliza un tamao de fuente


grande.
<big>Utiliza un tamao de
file:///D|/Manuales/Aprender%20HTML/texto/text8.htm (2 of 4) [27/02/2003 16:55:26]

Como crear pginas web. Manual: HTML: Elementos varios de formato

fuente grande.</big>

Utiliza una fuente pequea.

<small>Utiliza una fuente


pequea</small>

Este elemento est Desaprobado.


<strike>Este elemento est
Desaprobado.</strike>

Este tambin est Desaprobado.


<s>Este tambin est
Desaprobado.</s>

Y este otro tambin est Desaprobado.


<u>Y este otro tambin est
Desaprobado.</u>

Cuando estudiemos las Hojas de Estilo, ya


veremos como podemos sustituir stos y
otros elementos que estn Desaprobados.

file:///D|/Manuales/Aprender%20HTML/texto/text8.htm (3 of 4) [27/02/2003 16:55:26]

Como crear pginas web. Manual: HTML: Elementos varios de formato

Bueno, yo sigo y t?
Elemento BDO
ndice Elementos Texto
ndice HTML
ndice General

Tambin

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/texto/text8.htm (4 of 4) [27/02/2003 16:55:26]

Como crear pginas web. Manual: HTML: Elementos FONT y BASEFONT

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales

estudio/Cmo crear tu pgina web: Paso a


Paso

Elementos FONT, BASEFONT y


CENTER
Los tres estn Desaprobados.
FONT, permite definir el tipo de fuente, su
color y tamao para el texto delimitado entre
sus dos etiquetas.
BASEFONT, se utiliza para definir un tipo de
fuente, su color y tamao, de forma genrica
para todo un documento. Todo texto que no
tenga definido un formato particular,
aparecer segn lo que hayamos definido en
este elemento.
CENTER, sirve para centrar el texto
delimitado por sus dos etiquetas.

Accesibilidad
Avanzando

Entrada
Puntos de Vista

Atributos de FONT
size
Desaprobado. Para fijar el tamao de la
fuente.

Entrada
Colaboraciones

color
Desaprobado. Para fijar el color del texto.

face
file:///D|/Manuales/Aprender%20HTML/texto/textfont.htm (1 of 4) [27/02/2003 16:55:26]

Como crear pginas web. Manual: HTML: Elementos FONT y BASEFONT

Vuestras
colaboraciones

Desaprobado. Para determinar el nombre


de la fuente.

Sugerencias
SALIDA

Valores
size= un nmero, incremento o decremento.
color= nombre de color o su cdigo.
face= nombre de los tipos de letra,
separados por comas.
El tamao suele ser un nmero del 1 al 7. Su tamao
real depender del mecanismo (user agent) que
interprete el cdigo. Tambin suele expresarse el
tamao de forma relativa, con incrementos o
decrementos respecto al tamao de la fuente base. Ya
hablaremos de esto.
El color suele denominarse por su nombre, si figura en
la lista de nombres autorizados, o por un cdigo. Esto
lo veremos ms detenidamente cuando hablemos de
los Colores.
El tipo de letra puede ser nico, o pueden expresarse
varios tipos, separados por una coma. El mecanismo
que interprete el cdigo (user agent) deber seguir ese
orden de preferencia. De esto ya hablaremos en Hojas
de Estilo y en el Libro de Estilo.

Ejemplos:
Prrafo con texto formateado utilizando el
elemento FONT, que est desaprobado, pero que
an abunda en el cdigo fuente de muchas
pginas.

<p><font face="Arial" size="3"


color="#008000">Prrafo con
texto formateado utilizando el
elemento FONT, que est

file:///D|/Manuales/Aprender%20HTML/texto/textfont.htm (2 of 4) [27/02/2003 16:55:26]

Como crear pginas web. Manual: HTML: Elementos FONT y BASEFONT

desaprobado, pero que an


abunda en el cdigo fuente de
muchas pginas.</font></p>
Fjate en el espacio en blanco entre "font" y "face", y el
espacio en blanco entre el resto de atributos, cuyo
valor va siempre entre comillas.
El color est en cdigo hexadecimal, pero de esto ya
hablaremos otro da.

FF

FF

FF F F F F

Aqu tienes un ejemplo usando Times New Roman y


variando colores, tamaos, peso y postura de la letra.
Ya hablaremos un poco ms de estos temas en el
Captulo Fuentes.
No debes abusar de los colores, ni utilizar ms de dos
o tres tipos de fuente, como mximo. Pero eso es otra
historia que ya te contar.

Con respecto a BASEFONT, slo decirte que


sus Atributos son color, name y size, todos
ellos tambin desaprobados. Se coloca en la
seccin HEAD del documento. Es decir, entre
las etiquetas <head>...</head>. La etiqueta
de cierre est prohibida.
<head>
<basefont size="2"
color="blue">
</head>
Este cdigo determina que el texto estndar del
documento tenga un tamao de 2 unidades y sea de
color azul.
file:///D|/Manuales/Aprender%20HTML/texto/textfont.htm (3 of 4) [27/02/2003 16:55:26]

Como crear pginas web. Manual: HTML: Elementos FONT y BASEFONT

En cuanto a CENTER, no tiene atributos. El


texto que figure entre sus dos etiquetas
quedar centrado horizontalmente en la
pantalla o tabla, en su caso. Te recuerdo que
est superDesaprobado. Ni se te ocurra
usarlo.

Ya falta muy poco para acabar con los


elementos de Texto!
TT, I, B, BIG, SMALL, STRIKE,
S, U
ndice Elementos Texto
ndice HTML
ndice General
| arriba | Almacn | Archivo | Pgina Principal

Qu bien!

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/texto/textfont.htm (4 of 4) [27/02/2003 16:55:26]

Como crear pginas web. Manual: HTML: Elementos INS y DEL

El Estudio

El Almacn

El Archivo

Sugerencias

Recomendar

Web de contenido gratuito y formativo.


Qu ms quieres?. Recomendar Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

estudio/Cmo crear tu pgina web: Paso a Paso

Elementos INS y DEL


<ins>...</ins>
<del>...</del>
INS, sirve para delimitar un texto nuevo que se ha insertado en
una nueva versin de un documento.
DEL, sirve para delimitar texto que estaba incluido en versiones
anteriores de un documento, y que ha sido eliminado en una
nueva versin de dicho documento.
Requieren etiqueta de cierre.

Atributos principales

Principios
generales

cite

Accesibilidad

daytime

Avanzando

Sirve para llamar a un documento fuente o a un mensaje.


Para indicar el da y hora en que se hizo el cambio.

Entrada

id, lang, title, style, y otros relativos a "sucesos". Los primeros ya


Puntos de Vista han sido comentados en el elemento P. Los relativos a sucesos
los encontrars en el Captulo SCRIPT.
Entrada
Colaboraciones

Vuestras
colaboraciones

Valores

Sugerencias

cite=" la direccin URL "


Normalmente este atributo contiene el URL del documento fuente que ya no
figura en la nueva versin del documento en cuestin.

file:///D|/Manuales/Aprender%20HTML/texto/textins.htm (1 of 2) [27/02/2003 16:55:27]

Como crear pginas web. Manual: HTML: Elementos INS y DEL

SALIDA
datetime="ao-mes-daThora:minutos:segundos"
Se indica en ese orden. Lo vers mejor en el ejemplo.

Ejemplo:
El texto que proceda.
<ins datetime="1998-10-23T09:25:30z"
cite="http://www.webaprendiz.com/manual.htm">El
texto que proceda</ins>
Fjate en el formato del atributo "daytime" que, como he dicho antes, es algo
especial. La verdad es que yo nunca he utilizado estos elementos. Son propios
de documentacin tcnica y de temas legislativos.
El URL que me he inventado para el ejemplo, podra contener comentarios
explicando porqu se inserta nueva informacin en la nueva versin del
documento.

Falta tan poco para acabar este captulo, que ni te lo imaginas.


Elementos FONT y BASEFONT
ndice Elementos Texto
ndice HTML
ndice General

A ver si es verdad!!

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/texto/textins.htm (2 of 2) [27/02/2003 16:55:27]

Como crear pginas web. Manual: HTML: Caracteres especiales y otros

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Caracteres Especiales

Declaracin
principios

En los ejemplos que he puesto a lo largo de


este primer captulo, habrs observado
caracteres como el signo mayor que >, el
signo menor que <, las comillas ", etc.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Bien, estos signos forman parte de los que se


denominan Caracteres Especiales.
Su representacin en cdigo se inicia con
una & y termina con un punto y coma ;
Ejemplo: &gt; representa el signo >
No te hablar ahora de la limitacin de los
caracteres ASCII ni de la sintaxis &#D, slo
que existen esos caracteres y que
precisamos utilizarlos.
Si vas a utilizar un software especfico para la
creacin de pginas web, es muy posible que
el propio teclado del ordenador ya te genere
algunos de esos caracteres en el cdigo
fuente, con su sintaxis correspondiente, y que
puedas insertar el resto a travs de
herramientas de la propia aplicacin.

file:///D|/Manuales/Aprender%20HTML/texto/especial.htm (1 of 5) [27/02/2003 16:55:28]

Como crear pginas web. Manual: HTML: Caracteres especiales y otros

Vuestras
colaboraciones
Sugerencias
SALIDA

De todas formas, te incluyo un enlace al final


de la pgina donde encontrars un listado de
Caracteres Especiales, para tu propio use y
disfrute, y que procede de nuestra amiga la
W3C, de la que ya te he hablado.

Elemento HR
He incluido este elemento aqu, por ponerlo
en alguna parte. As me olvido de l.
Si te fijas, al final de cada pgina de este
manual, y debajo del men de navegacin
inferior, aparece o debera aparecer una
lnea horizontal, fina, slida y de color
negro. Bien, esta lnea se forma con el
elemento HR (horizontal rule).
<hr>
Este elemento est Desaprobado, pero yo
seguir usndolo mientras pueda, aunque
slo lo utilizo espordicamente. Prefiero jugar
con el espacio en blanco.
La etiqueta de cierre esta prohibida.
Se suele utilizar para separar secciones de
texto, crear divisiones dentro de la pgina,
etc.

Atributos principales
file:///D|/Manuales/Aprender%20HTML/texto/especial.htm (2 of 5) [27/02/2003 16:55:28]

Como crear pginas web. Manual: HTML: Caracteres especiales y otros

align
Desaprobado. Sirve para alinearla.

noshade
Desaprobada. Sin sombra. Crea una lnea
slida.

size
Desaprobada. Para especificar la altura de
la lnea.

width
Desaprobada. Para especificar la anchura
de la lnea.

id, lang, dir, title, style y otros relativos a


"sucesos". Los primero estn comentados en
el elemento P. Los relativos a sucesos los
encontrars en el Captulo SCRIPT.
(A veces no entiendo el sentido de la existencia de
algunos Atributos para segn qu Elementos. Mira que
soy corto!)

Valores
align="left", "center", "right"
size="nmero de pixels"
width="un porcentaje o nmero de pixels".
Por defecto 100%.
Ejemplos:

<hr width="50%" noshade


size="5" color="#00cc00">

file:///D|/Manuales/Aprender%20HTML/texto/especial.htm (3 of 5) [27/02/2003 16:55:28]

Como crear pginas web. Manual: HTML: Caracteres especiales y otros

Anchura del 50% del espacio disponible. En este caso,


el 50% del tamao de la celda de una tabla. Si no
estuviera en una tabla sera el 50% de la anchura de la
ventana.
Lnea slida de 5 pixels de alto y color verde oscuro.

<hr width="100" size="10"


color="#ff0099" align="right">
En este caso la anchura es de 100 pixels, altura de 10
pixels, color fucsia y alineacin derecha.
Nota: Si ests usando Netscape, es posible que no
veas los colores.

<hr size="3">
Esta es una lnea de anchura estndar, pero con altura
de 3 pixels.

Estamos a punto de terminar el captulo


dedicado al Texto.
Terminamos?
Elementos INS y DEL
ndice Elementos Texto
ndice HTML
ndice General
Enlaces de esta pgina:
Lista de Caracteres Especiales

file:///D|/Manuales/Aprender%20HTML/texto/especial.htm (4 of 5) [27/02/2003 16:55:28]

Terminemos

Como crear pginas web. Manual: HTML: Caracteres especiales y otros

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/texto/especial.htm (5 of 5) [27/02/2003 16:55:28]

Como crear pginas web. Manual: HTML: Espacios en blanco

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Espacios en blanco

Declaracin
principios

Puede parecer que no vaya a hablar de


"Texto", pero s que lo voy a hacer, ya que en
cualquier texto de ms de una palabra existe
"espacio en blanco"; entre lneas y prrafos
existe "espacio en blanco", etc.
Y luego est el "espacio en blanco" como
elemento del Diseo de las pginas, pero eso
ya lo veremos en otro sitio.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Espacio predefinido
Cuando escribes en el teclado, t mismo
ests provocando el espacio en blanco
elemental, que es el que separan las
palabras. Nada nuevo que decir aqu.
Luego, existen Elementos que ya hemos
visto, que provocan espacio en blanco: el
elemento BR provoca cierto espacio en
blanco, ya que genera un salto de lnea; el
elemento P, al iniciar un nuevo prrafo de
texto, genera un mayor espacio en blanco, ya

file:///D|/Manuales/Aprender%20HTML/texto/textblanc.htm (1 of 5) [27/02/2003 16:55:28]

Como crear pginas web. Manual: HTML: Espacios en blanco

Vuestras
colaboraciones

que provoca una lnea entera en blanco; lo


mismo ocurre con las cabeceras Hn, etc.

Sugerencias
SALIDA

Espacio provocado
Qu pasa si quieres MS espacio en
blanco?
Hay varias formas de obtenerlo. Veremos las
principales.
Cuando hablamos del elemento P, ya te dije
que si queras intercalar una o varias lneas
en blanco debas utilizar el carcter &nbsp;
entre las etiquetas <p> y <p> recuerdas?.
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
Este cdigo provocar tres lneas en blanco.

Pero esta no es la nica aplicacin de


&nbsp;
Ests creando tu pgina web en un Editor de
texto puro. Pulsas dos o tres veces la barra
espaciadora para separar dos palabras.
Cuando visualizas esa pgina en tu
navegador, han desaparecido esos espacios
"extra" que tu habas tecleado. Porqu?: El
HTML no reconoce esos espacios a menos
que utilices el carcter &nbsp;.
Este prrafo de texto
tiene las
palabras
file:///D|/Manuales/Aprender%20HTML/texto/textblanc.htm (2 of 5) [27/02/2003 16:55:28]

Como crear pginas web. Manual: HTML: Espacios en blanco

separadas por dos espacios


en blanco,
en lugar de
un solo espacio, que es
lo habitual.
<p>Este&nbsp; prrafo&nbsp;
de&nbsp; texto&nbsp;
tiene&nbsp; las&nbsp;
palabras&nbsp; separadas&nbsp;
por dos&nbsp; ...etc. etc.
etc.</p>
Fjate que slo figura un carcter &nbsp;
extra por cada palabra, porque uno de los
dos "espacios" est ya predefinido al escribir
texto normal y ya lo admite el HTML de forma
automtica.
Nota: Si utilizas una aplicacin WYSIWYG para hacer
tu pgina, cuando pulses ms de una vez la barra
espaciadora, la propia aplicacin ya te generar el
carcter "&nbsp;". Haz la prueba y vers.

Este carcter se puede utilizar para otras


cosas. Por ejemplo, hay autores que les
gusta que la primera lnea de sus prrafos
tenga cierta sangra. Se puede conseguir con
este carcter:
Este es un prrafo que tiene
sangrado su inicio. Se puede
lograr utilizando el carcter
"&nbsp;". Hay otras formas, pero
no forman parte de este captulo,
as que nos olvidamos de ellas.

file:///D|/Manuales/Aprender%20HTML/texto/textblanc.htm (3 of 5) [27/02/2003 16:55:28]

Como crear pginas web. Manual: HTML: Espacios en blanco

<p>&nbsp;&nbsp;&nbsp; Este es
un prrafo que tiene sangrado
su inicio. Se puede lograr
utilizando ...etc. etc.</p>

Por ltimo, decirte que hay otras formas de


conseguir espacio en blanco, como la
utilizacin de tablas o de una imagen
transparente, provocando espacio en blanco
horizontal y/o espacio en blanco vertical.
Pero ese es otro tema.

Bien, ya slo te falta ver un ejemplo que


incluya lo que hemos visto hasta ahora. A
parte de los ejemplos individuales, al final de
algunos Captulos habr un Documento de
Prctica que incluir temas que vayamos
estudiando.
Cada Documento de Prctica constar de
dos o tres pginas. En la primera te mostrar
la vista de pantalla, en la segunda el cdigo
que hay detrs, y si existe una tercera, ser
de Comentarios. Si el ejemplo es reducido,
podr existir una nica pgina que incluir las
tres cosas.
Aviso: En los Documentos de Prctica, y en tanto no
veamos las Hojas de Estilo, observars que el tipo de
letra, formato de prrafos, etc. no se corresponde con
el texto del Manual. La idea es que en los Docs de
Prctica slo utilicemos los Elementos que ya hayamos
estudiado.

file:///D|/Manuales/Aprender%20HTML/texto/textblanc.htm (4 of 5) [27/02/2003 16:55:28]

Como crear pginas web. Manual: HTML: Espacios en blanco

Ver Documento de Prctica 1: Texto

Bueno, ya hemos terminado con los


Elementos referidos al Texto.
Ahora, haremos un receso para ver los
Elementos de la Estructura Bsica del
documento HTML, que comentamos al
principio del Manual.
Aadiremos algn elemento ms, y
tendremos la Estructura Global del
documento de HTML, con lo cual ya podrs
tener una plantilla mnima sobre la que
poder practicar lo que hemos visto hasta
ahora.

Te atreves?
Caracteres especiales
ndice Elementos Texto
ndice HTML
ndice General

Por supuesto

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/texto/textblanc.htm (5 of 5) [27/02/2003 16:55:28]

Cmo crear pginas web. Manual:HTML: Documento de Prctica 1: Texto: Pantalla

Documento de Prctica 1: Texto: Pgina Pantalla


Elementos de Texto
Bueno, aqu estamos con el Documento de Prctica 1, referido a elementos de Texto. Vamos a incluir
algunos de los ejemplos que hemos visto en pginas anteriores.
Lo importante ahora, a parte del uso de los Elementos, sus Etiquetas, Atributos y Valores, es que veas la
situacin de esos Elementos dentro de la Estructura del Documento HTML. Como observars, todos
los que estoy utilizando van en el Cuerpo del Documento, es decir, entre las etiquetas
<body></body>.
***
No estamos utilizando todos los Elementos estudiados, ya hemos visto ejemplos, y sera muy largo
volver a repetirlos.
Recuerda que hay Elementos y Atributos que estn Desaprobados, por lo tanto, aunque los utilicemos
ahora, no te acostumbres demasiado a su uso, pues intentaremos lograr sus mismos efectos a travs de las
Hojas de Estilo, como ya te he dicho unas 15 veces.
El texto que estoy utilizando de ejemplo no tiene excesivo sentido, ms que recordarte algunos
conceptos. El Contenido interesante, adecuado y definitivo de un documento lo pondrs t, cuando crees
tu web. Yo slo intento ayudarte un poco con la mecnica, de momento. Ya hablaremos de Diseo y
Estilo en otro sitio.

Supongo que te has ledo los Principios Bsicos y los 10 Mandamientos que me he impuesto para esta
web. Si es as, recuerda que el Contenido manda, y el nico lmite es tu propia imaginacin.
Como dijo alguien en "Sonata de Otoo": El suponer la existencia de lmites es una pedantera. Nada
tiene fin. Ni en el pensamiento, ni en los sentidos. Tu ansiedad es el nico lmite.

Nota: Este es un documento totalmente desordenado. Su nico propsito es que veas la utilizacin de algunos Elementos
que hemos visto. El hecho de no formatear la hoja, o no utilizar Tablas, Hojas de Estilo o atributos del elemento BODY,
hace que las lneas de texto sean muy largas, como habrs observado. En el Libro de Estilo, hablo de la longitud mxima
de lnea en webs en que predomina el texto, o contienen Manuales para leer en pantalla. Ya hablaremos de esto.

file:///D|/Manuales/Aprender%20HTML/texto/docej1p.htm (1 of 2) [27/02/2003 16:55:29]

Cmo crear pginas web. Manual:HTML: Documento de Prctica 1: Texto: Pantalla

Hasta luego!

Ver pgina de Cdigo


Ver Pgina de Comentarios
Volver al Manual

Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4


fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/texto/docej1p.htm (2 of 2) [27/02/2003 16:55:29]

Cmo crear pginas web. Manual:HTML: Documento de Prctica 1: Texto: codigo

Documento de Prctica 1: Texto: Pgina de cdigo


<html>
<head>
<title>Cmo crear pginas web. Manual:HTML: Documento de Prctica 1:
Texto: Pantalla</title>
<basefont size="4">
</head>
<body>
<h2 align="center">Documento de Prctica 1 </h2>
<hr size="2">
<p><font face="Arial, Helvetica," size="3"
color="#0000FF"><strong>Elementos de Texto</strong></font> </p>
<p>Bueno, aqu estamos con el <font color="#FF0000"><strong>Documento
de Prctica 1</strong></font>,
referido a elementos de Texto. Vamos a incluir algunos de los ejemplos
que hemos visto en
pginas anteriores.</p>
<p>Lo importante ahora, a parte del uso de los <em>Elementos</em>, sus
<em>Etiquetas</em>,
<em>Atributos</em> y <em>Valores</em>, es que veas la situacin de
esos Elementos dentro
de la <b>Estructura del Documento HTML</b>. Como observars,&nbsp;
todos los que estoy
utilizando van en el Cuerpo del Documento, es decir, entre las
etiquetas<code>
&lt;body&gt;&lt;/body&gt;</code>.</p>
<p align="center">***</p>
<p>&nbsp;&nbsp;&nbsp; No estamos utilizando todos los Elementos
estudiados, ya hemos visto
ejemplos, y sera muy largo volver a repetirlos.<br>
Recuerda que hay Elementos y Atributos que estn
<big>Desaprobados</big>, por lo tanto,
file:///D|/Manuales/Aprender%20HTML/texto/docej1c.htm (1 of 3) [27/02/2003 16:55:29]

Cmo crear pginas web. Manual:HTML: Documento de Prctica 1: Texto: codigo

aunque los utilicemos ahora, no te acostumbres demasiado a su uso,


pues intentaremos
lograr sus mismos efectos a travs de las Hojas de Estilo, como ya te
he dicho unas 15
veces.</p>
<p>&nbsp;&nbsp;&nbsp; El texto que estoy utilizando de ejemplo no
tiene excesivo sentido,
ms que recordarte algunos conceptos. El Contenido interesante,
adecuado y definitivo de
un documento lo pondrs t, cuando crees tu web. Yo slo intento
ayudarte un poco con
la mecnica, de momento. Ya hablaremos de Diseo y Estilo en otro
sitio.</p>
<p>&nbsp;</p>
<p>Supongo que te has ledo los <em>Principios Bsicos</em> y los
<em>10 Mandamientos</em>
que me he impuesto para esta web. Si es as, recuerda que el
<b>Contenido manda</b>, y el
nico lmite es tu propia imaginacin.<br>
Como dijo alguien en &quot;Sonata de Otoo&quot;: <cite title="Esto
es muy heavy!">El
suponer la existencia de lmites es una pedantera. Nada tiene fin. Ni
en el
pensamiento, ni en los sentidos. Tu ansiedad es el nico
lmite.</cite></p>
<hr width="50%" size="1" color="#0000FF">
<p><b>Nota:</b> <small>Este es un documento totalmente desordenado. Su
nico propsito
es que veas la utilizacin de algunos Elementos que hemos visto. El
hecho de no formatear
la hoja, o no utilizar Tablas,Hojas de Estilo o atributos del elemento
BODY, hace que las lneas de texto sean muy
largas, como habrs observado. En el Libro de Estilo, hablo de la
longitud mxima de
lnea en webs en que predomina el texto, o contienen Manuales para
leer en pantalla. Ya
hablaremos de esto.</small></p>
<p align="center"><font face="Verdana" size="4"
file:///D|/Manuales/Aprender%20HTML/texto/docej1c.htm (2 of 3) [27/02/2003 16:55:29]

Cmo crear pginas web. Manual:HTML: Documento de Prctica 1: Texto: codigo

color="#0000FF"><strong>Hasta luego!</strong></font></p>
<p>&nbsp;</p>
</body>
</html>

Ver pgina de Pantalla


Ver pgina de Comentarios
Volver al Manual

Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4


fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/texto/docej1c.htm (3 of 3) [27/02/2003 16:55:29]

Cmo crear pginas web. Manual:HTML: Documento de Prctica 1: Texto: Comentarios

Comentarios: Pgina de Prctica 1: Texto


Bueno, ya has visto la primera Pgina de Prctica. Es un poco
larga, pero como casi todo es texto, no tiene excesiva importancia.
Por ser la primera vez, he puesto algunos colorines en varias
etiquetas de entrada, y he marcado en color rojo los "miembros"
que componen la Estructura del Documento HTML. No te
acostumbres demasiado.
Los Editores de HTML te permiten definir el color de las etiquetas
cuando escribes el HTML, para permitir su rpida localizacin.
Bien, slo dos palabras ms. Aprovecha para recordar la leccin de
geometra que vimos al principio del Manual:
<p><font face="Arial, Helvetica," size="3"
color="#0000FF"><strong>Elementos de
Texto</strong></font></p>
La primera etiqueta <p> es la ltima en cerrarse. La segunda
<font> es la penltima en cerrarse y la tercera etiqueta <strong>, es
la antepenltima y, en este caso, la primera en cerrarse.
Te recuerdo, una vez ms, que algunos Elementos o Atributos
estn Desaprobados.

Ver pgina de Pantalla


Ver pgina de Cdigo
Volver al Manual
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/texto/docej1r.htm (1 of 2) [27/02/2003 16:55:29]

Cmo crear pginas web. Manual:HTML: Documento de Prctica 1: Texto: Comentarios

file:///D|/Manuales/Aprender%20HTML/texto/docej1r.htm (2 of 2) [27/02/2003 16:55:29]

Cmo crear pginas web. Manual: HTML: Estructura Global: Intro

El Estudio El Almacn El Archivo Sugerencias

Recomendar

Web de contenido gratuito y formativo.


Qu ms quieres?. Recomendar Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML

estudio/Cmo crear tu pgina web: Paso a Paso

Estructura Global del documento HTML


<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN"
"http//www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>

Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada

Recuerdas esto?. Es la Estructura Bsica del


documento HTML, que vimos al inicio del Manual.
An no hemos hablado de los Elementos que la
componen. De hecho, lo nico que hemos dicho hasta
ahora, es que la mayora de los elementos de texto
deban colocarse entre las etiquetas <body> y
</body>.

Puntos de Vista

Antes de empezar voy a complicar un poco ms esa


Estructura aadiendo alguna cosilla ms. Muy poco.
Colaboraciones Fjate en lo siguiente:
Vuestras
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
colaboraciones
HTML 4.01 Transitional//EN"
"http//www.w3.org/TR/html4/loose.dtd">
Sugerencias
Entrada

file:///D|/Manuales/Aprender%20HTML/estructura/estruct1.htm (1 of 3) [27/02/2003 16:55:30]

Estructura
Tardar unos
segundos
13 DIN-A4

<html>
<head>
<title>
</title>
<meta>
<link>
<script>
</script>
<style>
</style>
</head>
<body>
<-- -->
<address>
</address>
</body>
</html>

Cmo crear pginas web. Manual: HTML: Estructura Global: Intro

SALIDA

<html>
<head>
<title>
</title>
<meta>
<link>
<script>
</script>
<style>
</style>
</head>
<body>
<!-- aqu va todo el texto, imgenes,
etc. -->
<address>
</body>

</address>

</html>
No te asustes. A esto le llamaremos la Estructura
Global de un documento HTML. Contiene los
principales "miembros" de un documento. No los
veremos todos ahora, pero vete acostumbrando a esta
distribucin. Por cierto, no estn todos los que son,
pero son todos los que estn :-)
Continuamos teniendo el mismo sombrero que
tenamos antes, y que es la informacin de la
versin de HTML utilizada.
Hemos ampliado la seccin de la Cabeza, que
antes slo contena el Ttulo de la pgina, con
algunos elementos opcionales.
Al Cuerpo, le hemos aadido unas flechitas y un
Comentario. Y, por fin, al final del Cuerpo, justo
file:///D|/Manuales/Aprender%20HTML/estructura/estruct1.htm (2 of 3) [27/02/2003 16:55:30]

Cmo crear pginas web. Manual: HTML: Estructura Global: Intro

antes de la etiqueta de cierre, hemos puesto unas


etiquetas opcionales que tambin veremos.
Ahora comentar, uno a uno, los Elementos que
componen esa Estructura Global. Pero de entrada te
digo que dejar, para Captulos especficos, los
elementos LINK, SCRIPT y STYLE.

Te animas?
Espacios en blanco
ndice HTML
ndice General

Claro

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/estructura/estruct1.htm (3 of 3) [27/02/2003 16:55:30]

Cmo crear pginas web. Manual: HTML: Estructura Global: Especificacin

El Estudio

El Almacn

El Archivo

Sugerencias

Recomendar

Web de contenido gratuito y formativo.


Qu ms quieres?. Recomendar Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML

estudio/Cmo crear tu pgina web: Paso a Paso

Especificacin versin HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML


4.01 Transitional//EN"
"http//www.w3.org/TR/html4/loose.dtd">
Los primero que nos encontramos en la Estructura del
documento de HTML, es la informacin sobre la versin
utilizada en la codificacin. Tambin se le llama la
Declaracin del Tipo de Documento (document type
declaration).

Libro de Estilo

Principios
generales

Esta declaracin o especificacin indica la definicin del


tipo de documento utilizado (DTD) en el documento
HTML.

Accesibilidad

(posa el ratn sobre las letras DTD y vers el ttulo)

Avanzando

Entrada

El HTML 4.01 especifica tres tipos de Definicin de


Documento (DTD):

Puntos de Vista

Entrada
Colaboraciones

Vuestras
colaboraciones
Sugerencias
SALIDA

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML


4.01 //EN"
"http//www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN"
"http//www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Frameset//EN"
"http//www.w3.org/TR/html4/frameset.dtd">

file:///D|/Manuales/Aprender%20HTML/estructura/specif.htm (1 of 3) [27/02/2003 16:55:30]

<html>
<head>
<title>
</title>
<meta>
<link>
<script>
</script>
<style>
</style>
</head>
<body>
<-- -->
<address>
</address>
</body>
</html>

Cmo crear pginas web. Manual: HTML: Estructura Global: Especificacin

El primero es el strict.dtd. Se utilizar en los casos en


que al construir los documentos no se utilicen los que
estn Desaprobados o los que figuran en documentos con
Marcos. Por eso se le llama "estricto".
El segundo, es el que hemos utilizado en este Manual, el
loose.dtd. Cuando en la construccin del documento, se
utilizan los elementos del "estricto" ms los elementos y
atributos que estn Desaprobados, se utiliza el "holgado",
llamado "Transitional" o de Transicin. (un poco de manga
ancha, vamos!).
El ltimo, frameset.dtd, es para cuando se utiliza el de
Transicin y, adems, se utilizan Marcos.
La direccin de URL que figura debajo de lo que es
propiamente la definicin de la versin, conduce a la
pgina de la W3C donde se encuentran las
especificaciones del correspondiente DTD.
Una de las utilidades de la especificacin, es la validacin
de documentos, contra la versin de HTML que se
especifica (ya lo veremos).

Bueno, nada ms sobre este tema. Slo que como debe


figurar en cada documento (pgina) que construyas, es
bueno tenerlo en la "plantilla" genrica.

Procede seguir.
Estructura Global Intro.
ndice HTML
ndice General

file:///D|/Manuales/Aprender%20HTML/estructura/specif.htm (2 of 3) [27/02/2003 16:55:30]

Pues procedamos

Cmo crear pginas web. Manual: HTML: Estructura Global: Especificacin

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/estructura/specif.htm (3 of 3) [27/02/2003 16:55:30]

Cmo crear pginas web. Manual: HTML: Estructura Global: Elemento HTML

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso


a Paso

Qu es el
Estudio?

Elemento HTML

Declaracin
principios

<html> </html>
Es la primera y la ltima etiqueta del
documento propiamente dicho. Las dos
etiquetas son opcionales, si bien yo no
sabra hacer un documento sin ellas. Pero
yo soy un romntico, tu haz lo que quieras.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML

Atributos y Valores

Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

version
Desaprobado. El valor de este atributo
precisamente informaba de la versin de
HTML. Actualmente se utilizan las
especificaciones que hemos visto en la
pgina anterior.

Entrada
Puntos de Vista

lang, dir. A estas alturas ya sabes que se


encuentran explicados en el elemento P.

Entrada
Colaboraciones

As pues, todo el contenido de un


file:///D|/Manuales/Aprender%20HTML/estructura/eghtml.htm (1 of 2) [27/02/2003 16:55:31]

<html>
<head>
<title>
</title>
<meta>
<link>
<script>
</script>
<style>
</style>
</head>
<body>
<-- -->
<address>
</address>
</body>
</html>

Cmo crear pginas web. Manual: HTML: Estructura Global: Elemento HTML

Vuestras
colaboraciones
Sugerencias

documento HTML, a excepcin de la


Especificacin de Versin, se encuentra
comprendido entre las dos etiquetas <html>
y </html>.

SALIDA
Ojal todo fuera tan sencillo y cortito!
Especificacin versin
HTML
ndice HTML
ndice General

Si seor

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/estructura/eghtml.htm (2 of 2) [27/02/2003 16:55:31]

Cmo crear pginas web. Manual: HTML: Estructura Global: Elemento HEAD

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso


a Paso

Qu es el
Estudio?

Elemento HEAD

Declaracin
principios

<head> </head>
Increiblemente la Cabeza es tambin
opcional. Te digo lo mismo que antes. Aqu
dentro pondremos varias cosas que
veremos enseguida.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad

Atributos y Valores
profile
Este atributo especifica la localizacin de
uno o varios perfiles de datos para el
elemento META, que veremos muy
pronto. El valor de este atributo es un
URI.

Avanzando

Entrada
Puntos de Vista

Entrada

lang, dir. Explicados en el elemento P.


Como ya te he insinuado, la Cabeza puede
contener diferentes tipos de informacin:

Colaboraciones

Ttulo. Obligatorio. El ttulo no aparece en


el propio documento cuando lo visualizas
file:///D|/Manuales/Aprender%20HTML/estructura/eghead.htm (1 of 3) [27/02/2003 16:55:31]

<html>
<head>
<title>
</title>
<meta>
<link>
<script>
</script>
<style>
</style>
</head>
<body>
<-- -->
<address>
</address>
</body>
</html>

Cmo crear pginas web. Manual: HTML: Estructura Global: Elemento HEAD

Vuestras
colaboraciones
Sugerencias
SALIDA

en el navegador. Aparece en la barra de


interfaz del navegador. Es decir, la primera
cosa que aparece en la parte superior de la
pantalla. Es o no importante?
Meta. No tiene porqu aparecer en todas
las pginas de tu web. Pero es muy
importante para que tus documentos se
localicen a travs de los motores de
bsqueda. Tambin tiene otros usos.
Link. Tampoco es obligatorio, si consideras
que las Hojas de Estilo externas no son
obligatorias. Pero eso ya lo discutiremos...
Script. Por supuesto no es obligatorio
poner Scripts en tu web, faltara ms!.
Style. Lo mismo que Link. Lo utilizaremos
para darle estilo "incrustado" o "empotrado"
(tranquilo!) a los documentos e "importar"
Hojas de Estilo.

Sigamos que an queda la tira!


Elemento HTML
ndice HTML
ndice General

Vale, vale, tranquilo

file:///D|/Manuales/Aprender%20HTML/estructura/eghead.htm (2 of 3) [27/02/2003 16:55:31]

Cmo crear pginas web. Manual: HTML: Estructura Global: Elemento HEAD

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/estructura/eghead.htm (3 of 3) [27/02/2003 16:55:31]

Cmo crear pginas web. Manual: HTML: Estructura Global: Elemento TITLE

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso


a Paso

Qu es el
Estudio?

Elemento TITLE

Declaracin
principios

<title> </title>
Elemento obligatorio. El ttulo debe
expresar el contenido del documento de
una forma bastante amplia, pero no debera
exceder los 70 caracteres, ms o menos.
Los ttulos pueden contener Caracteres
especiales, pero no otras etiquetas html.
Requiere etiqueta de cierre.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad

Atributos y Valores
lang, dir. Ya han sido descritos en el
elemento P.

Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Es conveniente que el Ttulo sirva para que


el visitante se haga una idea bastante clara
de lo que va a encontrar en esa pgina o
web.
Ejemplos:

file:///D|/Manuales/Aprender%20HTML/estructura/egtitle.htm (1 of 3) [27/02/2003 16:55:32]

<html>
<head>
<title>
</title>
<meta>
<link>
<script>
</script>
<style>
</style>
</head>
<body>
<-- -->
<address>
</address>
</body>
</html>

Cmo crear pginas web. Manual: HTML: Estructura Global: Elemento TITLE

Vuestras
colaboraciones
Sugerencias
SALIDA

<title>Pgina
Principal</title>
Este ttulo no es muy bueno que digamos. Te
informa que ests en la Pgina Principal, bien.

<title>Cmo crear pginas web.


Manual: HTML: Estructura
Global: Elemento TITLE</title>
Este est algo mejor. Adems es el ttulo de la
pgina que ests leyendo. No te digo ms.

Por favor, no se te ocurra confundir el


Elemento TITLE con el Atributo title, que
es aquel que usbamos para dar
informacin sobre el contenido de una
etiqueta. Si tienes dudas, por favor, mira
este ejemplo de title como Atributo.

Me encantan estas pginas tan cortas!


Elemento HEAD
ndice HTML
ndice General

file:///D|/Manuales/Aprender%20HTML/estructura/egtitle.htm (2 of 3) [27/02/2003 16:55:32]

A m tambin

Cmo crear pginas web. Manual: HTML: Estructura Global: Elemento TITLE

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/estructura/egtitle.htm (3 of 3) [27/02/2003 16:55:32]

Como crear pginas web. Manual: HTML: ndice Elementos de Texto

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

ndice de Elementos de Texto

Declaracin
principios

Introduccin
Prrafos: Elemento P
Salto de lnea: Elemento BR
Elemento BLOCKQUOTE
Cabeceras: Elementos H1,H2,H3,H4,H5,H6
Citas: ACRONYM, ABBR, CITE, DFN
Elementos CODE, SAMP, KBD y VAR
Con nfasis: EM, STRONG
Superndices y subndices: SUP, SUB
Texto preformateado: PRE
Direccionamiento del texto: BDO
Formateando texto: TT, I, B, BIG, SMALL,
STRIKE, S, U
Elementos FONT y BASEFONT
Elementos INS y DEL
Caracteres Especiales
Espacios en blanco

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Dado que este Captulo contempla muchos


Elementos del HTML, he incluido este ndice
de las diferentes pginas que lo componen.
Al final de cada una de ellas, encontrars un

file:///D|/Manuales/Aprender%20HTML/texto/textindex.htm (1 of 2) [27/02/2003 16:55:33]

Como crear pginas web. Manual: HTML: ndice Elementos de Texto

Vuestras
colaboraciones
Sugerencias
SALIDA

enlace a este documento.


Introduccin Elementos de
Texto
ndice General
| arriba | Almacn | Archivo | Pgina Principal

Empecemos

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/texto/textindex.htm (2 of 2) [27/02/2003 16:55:33]

Como crear pginas web. Manual: HTML: Texto p1

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Texto, texto,

Declaracin
principios

(Nunca juegues con los colores como acabo de hacer


con el ttulo de esta pgina. Es horrible!)

Los 10
mandamientos

Bien, el HTML fue inicialmente pensado para


texto, por lo tanto es lgico que empecemos
a trabajar en serio con este tema: el texto y
sus circunstancias.

PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

texto,

texto

Voy a diferenciar los Elementos que tienen


que ver con la Presentacin o Estructura
global de texto en una pgina, de los que
definen el Formato del texto en s.
Me explico. Por ejemplo, la separacin de
texto en prrafos tiene que ver con la
Estructura. En cambio el que tu hagas que un
texto concreto aparezca en negrita, tiene que
ver con el Formato de ese texto.

Entrada
Puntos de Vista

Entrada
Colaboraciones

Me explico ms. La parrafada de arriba, a


efectos de cdigo HTML es un slo "prrafo".
Ya s que hay un punto y aparte, pero no
existe una lnea en blanco despus de ese
punto y aparte, por lo tanto es un slo
prrafo. Haz caso de lo que te digo.

file:///D|/Manuales/Aprender%20HTML/texto/texto1.htm (1 of 2) [27/02/2003 16:55:34]

Texto I
9 DIN-A4
Texto II
9 DIN-A4
Texto III
12 DIN-A4

Como crear pginas web. Manual: HTML: Texto p1

Vuestras
colaboraciones
Sugerencias
SALIDA

Ahora estoy empezando un nuevo "prrafo" a


efectos de cdigo HTML. Tranquilo, ya lo
vers con los ejemplos.
Todo esto tiene que ver con la
Estructura/Presentacin de texto, en cambio,
la palabra "negrita" que est ms arriba y que
est en "negrita", eso tiene que ver con el
Formato del texto. Est claro, no?
Uff!! Ya estoy agotado y todava no hemos
empezado.

En la pgina siguiente encontrars un ndice


de los Elementos relacionados con el Texto,
para tu comodidad y mayor trabajo para mi.
Vemos el ndice textindex?
Un poco de orden pag.2
ndice HTML
ndice General
| arriba | Almacn | Archivo | Pgina Principal

Vemoslo

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/texto/texto1.htm (2 of 2) [27/02/2003 16:55:34]

Como crear pginas web. Manual: HTML: Archivos y Directorios p2

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada

estudio/Cmo crear tu pgina web: Paso a


Paso

El mejor sistema de estructurar tu web,


ser el que a ti te funcione, que por
algo eres el webmaster.
Permteme slo dos palabras sobre como
organic WebAprendiz:
En primer lugar, existe una carpeta genrica
llamada WebAprendiz (cmo no?) que lo
contiene todo.
Dentro de esta carpeta hay algunos ficheros
sueltos y 7 Directorios. Estos
Directorios/Carpetas contienen, a su vez,
Subdirectorios.
En estos momentos en que an no he
publicado esta web, ya tengo un total de ms
de 1.100 ficheros y ms de 120 Carpetas.
Qu hara sin mis Carpetas y Subcarpetas?.
Ya he terminado, ves qu rpido?

Puntos de Vista

Entrada
Colaboraciones

Te aconsejo que organices tus Directorios y


Subdirectorios por temas o secciones de tu
web, tu vers.
De todas formas voy a decirte dos palabras

file:///D|/Manuales/Aprender%20HTML/introduc/orden2.htm (1 of 5) [27/02/2003 16:55:34]

Como crear pginas web. Manual: HTML: Archivos y Directorios p2

Vuestras
colaboraciones
Sugerencias

ms:

Directorios WA Fijos

SALIDA
Hay 5 Directorios fijos que siempre abro
cuando voy a empezar una web:
Imgenes. Este es muy obvio. Como te
habrs imaginado, aqu guardo mis
imgenes. Si hay muchas, abro
Subdirectorios por temas, o bien abro un
Subdirectorio (con nombres diferentes) en
cada seccin importante y que tenga su
propio Directorio.
Estilos. Aqu pongo mis hojas de estilo.
Comn. Si existen diferentes secciones bien
definidas en la web, con diferentes
Directorios, puede haber algunos ficheros
comunes. Los guardo aqu.
Pruebas. Como dice el nombre, aqu voy
guardando diferentes pruebas de diferentes
pginas o secciones de pginas. Ten en
cuenta que de algunas pginas hago ms de
40 versiones, a veces con pequeas
variaciones.
Este Directorio no lo paso al Servidor en el
momento de publicar la web. Lo mantengo en
mi disco duro junto con las copias de
seguridad de la web.
Destrozar. Aqu pongo los documentos que
estoy bastante seguro que no voy a utilizar y
file:///D|/Manuales/Aprender%20HTML/introduc/orden2.htm (2 of 5) [27/02/2003 16:55:34]

Como crear pginas web. Manual: HTML: Archivos y Directorios p2

que tendr que eliminar. La mayora


provienen del Directorio Pruebas, y son los
que ya doy por intiles. De todas formas an
no los elimino por si acaso.
Por lo tanto, esos 5 son fijos y pueden
repetirse en diferentes secciones de la web.

Ficheros sueltos WA
Adems de la Pgina Principal y los ficheros
de enlace a la primera pgina de algunas
secciones, tengo algunos ficheros que s
pueden interesarte:
Colores seguros. Ten siempre disponible
este fichero cuando empieces a trabajar en
una web. Contiene los llamados "colores
seguros". Ya hablaremos de ellos ms
adelante.
Paleta colores WA. Es una simple tabla con
los colores que he definido para la web en la
que estoy trabajando. Suelo poner un
pequeo comentario que me recuerda en qu
situaciones o elementos utilizo esos colores.
A medida que avanzo en la web, puedo
variar, aadir o quitar alguno de esos colores
(1).
Simulacin de Resoluciones. Suelo trabajar
a 1024x768, mi favorita, aunque muy a
menudo utilizo la 800x600, con otro
ordenador. De todas formas, tengo unos
ficheros que simulan pantallas a diferentes
file:///D|/Manuales/Aprender%20HTML/introduc/orden2.htm (3 of 5) [27/02/2003 16:55:34]

Como crear pginas web. Manual: HTML: Archivos y Directorios p2

resoluciones, incluyendo 640x480, de esta


forma puedo hacerme una idea de cmo se
ve una pgina sin tener que cambiar las
resolucin de mi pantalla o cambiar de
ordenador.
De la Resolucin de Pantalla ya hablaremos
otro da.

ltimas palabras, de verdad.


Guarda. Guarda tu trabajo a menudo. Es una
regla general si trabajas con un ordenador.
Copias de seguridad. Al final de cada
jornada, hago una copia de seguridad
interna, en el disco duro, y otra externa, ya
sea en diskette, Iomega, CD-ROM, etc.
Repito que esas son reglas generales para
cualquier persona que utilice un ordenador.

Sigues conmigo?
Un poco de orden pag.1
ndice HTML
ndice General
Enlaces de esta pgina:
Paleta de colores WebAprendiz

file:///D|/Manuales/Aprender%20HTML/introduc/orden2.htm (4 of 5) [27/02/2003 16:55:34]

De momento

Como crear pginas web. Manual: HTML: Archivos y Directorios p2

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/introduc/orden2.htm (5 of 5) [27/02/2003 16:55:34]

Como crear pginas web. Manual: HTML: Archivos y Directorios p1

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Un poco de orden, por favor

Declaracin
principios

Antes de seguir adelante creo que tenemos


que organizarnos un poquito, si no despus
es ms difcil y no hay quien se aclare.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada

Antes, cuando veamos la estructura bsica


de un documento html, te he dicho que si
queras podas guardarla como plantilla en un
fichero html.
Pero, ya sabes cmo es un fichero html?
Y, dnde lo vas a guardar?
Dnde guardars lo que vayas haciendo
mientras practicas, o las pginas que vayas
haciendo cuando empieces tu web?
Este captulo podra estar al final del Manual,
pero prefiero que lo leas ahora, antes de que
sea tarde. Antes de que empieces a hacer
pginas por tu cuenta, yo no me entere y te
encuentres perdido, si no eres una persona
organizada. Aunque estoy seguro que s lo
eres :-).

Colaboraciones

file:///D|/Manuales/Aprender%20HTML/introduc/orden1.htm (1 of 5) [27/02/2003 16:55:35]

Como crear pginas web. Manual: HTML: Archivos y Directorios p1

Vuestras
colaboraciones
Sugerencias
SALIDA

Archivos
Extensiones
Seguro que ya sabes que los documentos
html se guardan con la terminacin "html".
Bien, de hecho pueden terminar en .html o
bien .htm. Quien mandar al final ser el
servidor. El sufijo .htm es tpico del sistema
Windows.
Hay otras extensiones raras que no te ataen
de momento, ya que son cosa del servidor
(.cgi, .pl, .asp, etc.).
S que usars extensiones de imgenes
como .gif y .jpg y .png.
Para las Hojas de Estilo externas, vers que
crearemos archivos con extensin .css.
Si introduces algunos scripts de Javascript,
es posible que llames desde la pgina a
algn fichero con terminacin .js.
Si hay algo de lo anterior que no sabes lo que
es, no te preocupes, ahora no es el momento
de explicarlo. Ya llegar.
Lo importante, lo bsico, es que tus pginas
son ficheros con terminacin .html o .htm, y
que tus imgenes sern ficheros con sufijo
.gif o .jpg o bien .png.
Si ests utilizando alguna aplicacin de
software especfico para webs, la propia
aplicacin ya suele aadir la terminacin html
o htm.
Nombre de los archivos

file:///D|/Manuales/Aprender%20HTML/introduc/orden1.htm (2 of 5) [27/02/2003 16:55:35]

Como crear pginas web. Manual: HTML: Archivos y Directorios p1

Todo es subjetivo, pero hay un par de cosas


que deberas tener en cuenta:
- Procura que el nombre que des al archivo
tenga relacin con su contenido, y no slo
para ti sino para los navegantes. A veces no
es fcil, pero siempre que puedas, hazlo.
Hay gente que utiliza la barra superior del
navegador, donde aparece el URI de la
pgina que estn visualizando, para
moverse. Eso lo hacen eliminando partes
lgicas del URI, de forma que la direccin
que les queda en la barra, les lleve a otra
pgina.
No s si me he explicado muy bien, pero eso
que hacen o hacemos algunos navegantes
no debera quitarte el sueo.
Simplemente intenta que los nombres de los
archivos signifiquen algo.
- No utilices nombres demasiado largos. Yo
intento que sean lo ms cortos posible y
procuro que casi nunca superen las 8 letras.
A veces es difcil que mantengan un
significado coherente con pocas letras, pero
intntalo.
Lo de 8 letras me viene de los tiempos del
DOS en que usaba un programa muy
conocido para visualizar los archivos del
sistema, y slo aparecan las primeras 8
letras seguidas de un signo, si el nombre
original las superaba. Es posible que no
sepas de qu estoy hablando. Olvdalo, hoy
no tengo el da.
Ejemplos de nombre de archivos:

file:///D|/Manuales/Aprender%20HTML/introduc/orden1.htm (3 of 5) [27/02/2003 16:55:35]

Como crear pginas web. Manual: HTML: Archivos y Directorios p1

index.htm

Es el de mi pgina
principal

index.htm o html
default.html

Estos suelen aplicarse a


las Pginas Principales en
diferentes sistemas.

geometria.htm

Era el de la pgina
anterior a la que ests
leyendo.

intro.htm

Es el nombre de la
primera pgina de este
Manual de HTML.

logowa.gif

Imagen del logo de


WebAprendiz de la
esquina superior izquierda
de la pgina.

En fin, tu mismo, cuanto ms cortos mejor.

Directorios y subdirectorios
Bueno, ya tienes tus archivos con nombre
cortito y sus respectivas extensiones, dnde
guardarlos?. Te pill!.
Antes de crear los documentos, deberas
crear tu estructura de directorios y
subdirectorios (carpetas y subcarpetas).
Si tu web va a tener slo unas pocas pginas
y cuatro imgenes, no te compliques la vida,
gurdalo todo dentro de una sola
carpeta/directorio y tienes el problema
resuelto.
Ahora bien, si tu web crees que va a ser algo
mayorcita, con bastantes imgenes, o va a
tener varias secciones bien diferenciadas,
file:///D|/Manuales/Aprender%20HTML/introduc/orden1.htm (4 of 5) [27/02/2003 16:55:35]

Como crear pginas web. Manual: HTML: Archivos y Directorios p1

entonces deberas preocuparte de organizar


bien tus directorios, de acuerdo con tu sitio.

Te lo explico en la pgina siguiente, vale?


Una de Geometra
ndice HTML
ndice General

De acuerdo

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/introduc/orden1.htm (5 of 5) [27/02/2003 16:55:35]

Como crear pginas web. Manual: HTML: Geometra

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Una de Geometra

Declaracin
principios

Tal vez la palabra Geometra no sea la


correcta, pero s que tu me entenders.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

<html>
<head>
<title>
Mi Ttulo

</title>
</head>
<body>
Lo que quieras

</body>
</html>
Haca falta un poco de color, no?. Cuantos
colorines, eh?. Y qu es esto?

Entrada
Puntos de Vista

Entrada
Colaboraciones

Bien, fjate en cada etiqueta de apertura,


sigue su color y vulvete a fijar dnde va su
correspondiente etiqueta de cierre.
Haz lo mismo con cada elemento, sigue sus
etiquetas de apertura y cierre.
Te has dado cuenta?. Vers que en ningn

file:///D|/Manuales/Aprender%20HTML/introduc/geometria.htm (1 of 4) [27/02/2003 16:55:36]

Como crear pginas web. Manual: HTML: Geometra

Vuestras
colaboraciones
Sugerencias
SALIDA

momento se cruzan los diferentes colores.


La etiqueta <html> las contiene a todas. Es la
primera en abrirse y la ltima en cerrarse.
La etiqueta <head> contiene el Ttulo. Se
abre al inicio de la seccin Cabeza y se cierra
la ltima de la seccin, en este caso despus
del cierre del Ttulo.
Lo mismo con el Cuerpo. La etiqueta <body>
es la primera de la seccin Cuerpo y la ltima
en cerrarse de dicha seccin.
Esto es muy importante para generar buen
cdigo y evitarse problemas.
Vamos a hacer lo mismo, pero en plan
horizontal:

<E1> <E2>

</E2> </E1>

En este ejemplo se utilizan dos elementos


ficticios: E1 y E2, y sus correspondientes
etiquetas de apertura y de cierre. Fjate que
aqu tampoco se cruzan los colores.
Si se cruzaran, en muchos casos no pasara
nada, pero en otros podra haber problemas,
o no se vera lo que t quieres que se vea.
En el ejemplo, las cuatro etiquetas estn en
la misma lnea de cdigo. Esto no tiene
porqu ser as, segn lo que pongas en
medio, puede haber varias lneas, pero el
principio bsico es siempre el mismo:
file:///D|/Manuales/Aprender%20HTML/introduc/geometria.htm (2 of 4) [27/02/2003 16:55:36]

Como crear pginas web. Manual: HTML: Geometra

La primera de Apertura es la ltima de Cierre.


Itlica y Negrita, tal vez
<strong><em>Itlica y Negrita,
tal vez</em></strong>
Negrita e Itlica, tal vez
<em><strong>Itlica y Negrita tal
vez</strong></em>
Itlica y Negrita, tal vez
<strong><em>Itlica y Negrita tal
vez</strong></em>
Negrita e Itlica, tal vez
<em><strong>Itlica y Negrita,
tal vez</em></strong>
Habra mucho que decir aqu, pero slo
quiero que te fijes en los dos ltimos
ejemplos. Aparecen igual que los dos de
arriba, pero su cdigo en incorrecto.
En el tercer ejemplo la primera etiqueta
<strong> NO es la ltima en cerrarse.
Lo mismo ocurre en el cuarto ejemplo, la
etiqueta inicial <em> NO es la ltima en
cerrarse.
He quebrantado el principio bsico, suspenso
en geometra, o lo que sea.

<E1> <E2>

</E1> </E2>

file:///D|/Manuales/Aprender%20HTML/introduc/geometria.htm (3 of 4) [27/02/2003 16:55:36]

Como crear pginas web. Manual: HTML: Geometra

Verdad que se ve muy raro?. Pues claro,


porque est mal!
Bueno, ya vale de colorines, porqu no
seguimos?
Leccin de Anatoma
ndice HTML
ndice General

Bueno, si insistes

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/introduc/geometria.htm (4 of 4) [27/02/2003 16:55:36]

Como crear pginas web. Manual: HTML: Estructura bsica

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

estudio/Cmo crear tu pgina web: Paso a Paso

Leccin de Anatoma
Recuerdas lo de Cabeza, Cuerpo y Extremidades?
Bien, en HTML es ms fcil porque slo tienes la
Cabeza y el Cuerpo. La Cabeza la adornaremos con
un pequeo sombrero o gorra.

Estructura bsica
Esta es la estructura bsica de un documento html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN"
"http//www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
</head>

</title>

<body>
</body>
</html>

file:///D|/Manuales/Aprender%20HTML/introduc/anatomia.htm (1 of 4) [27/02/2003 16:55:37]

Como crear pginas web. Manual: HTML: Estructura bsica

Vuestras
colaboraciones
Sugerencias
SALIDA

El sombrero
Podramos prescindir de las dos o tres primeras lneas
(depende de la resolucin de tu pantalla) en este
momento, pero prefiero no hacerlo. Ya te dir porqu.
Lo que hacen esas lneas es dar informacin sobre la
Versin de HTML que se ha utilizado para hacer el
documento. En el ejemplo he puesto el 4.01 porque es
posible que cuando leas esto ya ests utilizando esa
versin. A continuacin se indica la "direccin" (URL)
del documento de la World Wide Consortium donde
figura la especificacin de la versin HTML 4.01 de
Transicin. Ya hablaremos de eso de Transicin,
Estricta, etc., ms adelante.
La Etiqueta html
El documento en s, lo iniciaremos con la etiqueta
<html> y lo terminaremos con la de cierre
correspondiente </html> que es la ltima de todas.
De hecho, el elemento HTML es opcional, pero yo te
aconsejo que lo utilices siempre.
La Cabeza
Con la etiqueta <head> se inicia el documento
propiamente dicho. Este elemento tambin es
opcional pero ponlo siempre.
Dentro de la cabeza se pone el Ttulo de la pgina,
elemento muy importante como ya veremos. Por
supuesto el Ttulo va entre su etiqueta de apertura
<title> y su correspondiente etiqueta de cierre </title>.
En la Cabeza pueden ir ms cosas, pero estamos en
la Estructura bsica, as que las dejamos de
momento.
Al final de la Cabeza tenemos que situar la
correspondiente etiqueta de cierre </head>.
El Cuerpo

file:///D|/Manuales/Aprender%20HTML/introduc/anatomia.htm (2 of 4) [27/02/2003 16:55:37]

Como crear pginas web. Manual: HTML: Estructura bsica

Aqu va todo lo dems: corazn, pulmones, tripas... En


serio, entre las etiquetas de apertura y cierre del
elemento BODY pondremos todo el resto del
documento: texto, imgenes y vnculos, bsicamente,
con todas las etiquetas de cdigo que quieras.
Bueno, ya tienes la estructura bsica de tu primer
documento. Si quieres puedes guardarla en un fichero
y utilizarlo como plantilla que te sirva cada vez que
inicies una nueva pgina. Este es el motivo por el que
he incluido el Sombrero, para que ya lo tengas en tu
plantilla y te olvides de l.
Un poco ms adelante ampliaremos esta Plantilla
Bsica con algn otro elemento, para que tambin
quede guardado y puedas olvidarte de l.
Otro poquito ms adelante aadiremos an ms cosas
y podremos crear, por ejemplo, una plantilla bsica
para todas las pginas secundarias de tu web o para
una de sus secciones. Pero como siempre, vayamos
paso a paso.
Por lo tanto, si quieres guardar la plantilla en este
momento hazlo, si la quieres ms completa esprate
un rato.
La explicacin de los Elementos que componen la
Estructura Bsica y lo que luego llamar la Estructura
Global los veremos en el apartado Elementos de
Estructura Global.
Nota: En el cdigo de la Estructura Bsica, ha puesto alguna
lnea en blanco para separar sus componentes y que pudieras
distinguirlos de una forma ms clara. Cuando codifiques no hace
falta que lo hagas, o hazlo para ver mejor tu cdigo. Tambin
podrs aadir Comentarios dentro del cdigo para que te aclares.
Pero eso ya lo veremos.

Suficiente Anatoma, cambiamos de asignatura?


file:///D|/Manuales/Aprender%20HTML/introduc/anatomia.htm (3 of 4) [27/02/2003 16:55:37]

Como crear pginas web. Manual: HTML: Estructura bsica

Definiciones
ndice HTML
ndice General

Cambiemos

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/introduc/anatomia.htm (4 of 4) [27/02/2003 16:55:37]

Como crear pginas web. Manual: HTML: Definiciones

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Definiciones

Declaracin
principios

El HTML se compone de una serie de


Elementos. La mayora de estos elementos
poseen unos Atributos, y la mayora de
estos atributos tienen unos Valores.
Al escribir el HTML, los Elementos se
representan mediante Etiquetas.
La expresin completa tpica de la mayora
de Elementos consta de tres partes: la
Etiqueta de apertura, el contenido que tu
colocas y finalmente la Etiqueta de cierre.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales

Vaya parrafada, no?. Y cuanta negrita!


Tranquilo, vers qu fcil es.

Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Elemento
Por ejemplo:
UL es un Elemento.
BODY es otro Elemento.
H4 es otro Elemento.
Antes te he dicho que el HTML consta de
unos 90 Elementos aproximadamente y que

file:///D|/Manuales/Aprender%20HTML/introduc/definir.htm (1 of 6) [27/02/2003 16:55:38]

Como crear pginas web. Manual: HTML: Definiciones

Vuestras
colaboraciones
Sugerencias
SALIDA

dudo que llegues a utilizarlos todos, y de los


que utilices, slo usars algunos de sus
Atributos.
Bien, cuando quieras usar los diferente
elementos para hacer algo en tu pgina,
tendrs que utilizar dos etiquetas:
Etiqueta de apertura
Por ejemplo:
<UL> es una etiqueta de apertura.
<BODY> es otra etiqueta de apertura.
<H4> es otra etiqueta de apertura.
Observa que las etiquetas de apertura se
forman con el nombre del Elemento,
contenido entre un signo "menor que" y un
signo "mayor que".
Etiqueta de cierre
Por ejemplo:
</UL> es una etiqueta de cierre.
</BODY> es otra etiqueta de cierre.
</H4> es otra etiqueta de cierre.
Observa que las etiquetas de cierre son
iguales que las de apertura, pero con una
barra oblicua justo antes del nombre del
elemento.
De momento no importa el significado de los
elementos que estoy utilizando. Quiero que te
limites a entender el concepto de estas
definiciones.
As, por ejemplo, para utilizar el elemento H4

file:///D|/Manuales/Aprender%20HTML/introduc/definir.htm (2 of 6) [27/02/2003 16:55:38]

Como crear pginas web. Manual: HTML: Definiciones

al escribir el cdigo de tu pgina debers


utilizar las dos etiquetas siguientes:
<H4></H4>, que son las de apertura y
cierre.
Pero con las dos etiquetas solas no hacemos
nada, no?. Falta algo en el medio. Falta el
Contenido, que es lo que t pones.
Por ejemplo:
<H4>WebAprendiz es
estupenda!</H4>
Y se vera as:

WebAprendiz es estupenda!
No me preguntes ahora porqu se ve en ese
color, en negrita, en ese tamao y con ese
tipo de fuente. Ya te lo explicar ms
adelante.
Por lo tanto, la frase "WebAprendiz es
estupenda", aparte de ser cierto, es el
Contenido que yo he puesto entre las
etiquetas de apertura y de cierre del
Elemento H4.

La mayora de Elementos suelen tener unos


Atributos y stos unos Valores, como ya he
dicho.
Por ejemplo:
file:///D|/Manuales/Aprender%20HTML/introduc/definir.htm (3 of 6) [27/02/2003 16:55:38]

Como crear pginas web. Manual: HTML: Definiciones

<BODY topmargin="0">
</BODY>
Fjate bien en lo siguiente: "topmargin" es el
Atributo, y "Cero" es el Valor del Atributo.
El Atributo se coloca dentro de la Etiqueta de
Apertura, dejando un espacio en blanco
despus del nombre del Elemento. Nunca se
coloca en la etiqueta de cierre.
El Valor sigue a un signo de "igual" y va entre
comillas.
Cuando estudiemos los diferentes Elementos
del HTML, primero definir el Elemento, a
continuacin indicar los Atributos de ese
Elemento y pondr ejemplos con Valores de
Atributo concreto.
Te ha quedado claro?.
Bien, creo que ya tienes suficiente, de
momento. Por cierto, si miras el Cdigo
Fuente de esta pgina, vers que el ltimo
ejemplo de Atributo y Valor forma parte de mi
etiqueta <BODY>
Nota 1: Habrs observado que he utilizado la palabra
"mayora" repetidas veces en esta pgina. Esto es
debido a que existen algunas excepciones. Hay
elementos que no precisan de etiqueta de cierre; hay
elementos que NO deben llevar etiqueta de cierre, y
hay etiquetas que carecen de Atributos. Tambin hay
Atributos que carecen de Valores. Pero todo esto ya lo
veremos.
Nota 2: Tambin habrs observado que he escrito en
maysculas los nombres de los elementos y sus
etiquetas. Bien, en HTML, puedes escribir el cdigo de
las dos maneras, no afecta, a excepcin de ciertos
Caracteres Especiales que tambin veremos. PERO, a
partir de este momento, y salvo error por mi parte,
file:///D|/Manuales/Aprender%20HTML/introduc/definir.htm (4 of 6) [27/02/2003 16:55:38]

Como crear pginas web. Manual: HTML: Definiciones

voy a escribir todo el cdigo en minsculas en el resto


del Manual.
Est surgiendo el XHTML, de hecho ya existe la
primera versin. El XHTML exige que todas las
etiquetas vayan en minsculas y si codificas en
minsculas, cualquier conversin que quieras hacer en
el futuro, te ser mucho ms fcil.
Mi consejo: si quieres y puedes codifica en minsculas.
Como siempre, t eliges.
Nota 3: Cuando veamos, ms adelante, los diferentes
Atributos de los Elementos del HTML, observars que
en muchos casos te indico que estn Desaprobados.
Esto no significa que no puedas utilizarlos en tu
codificacin. Significa, normalmente, que es
recomendable el definir esos Atributos a travs de
Hojas de Estilo, que ya veremos lo que son.
A efectos prcticos, mi recomendacin es que intentes
utilizar Hojas de Estilo lo antes posible. En una primera
etapa de aprendizaje y prctica del HTML, utiliza los
Elementos y sus Atributos como te parezca, pero
cuando empieces a trabajar en serio en tu web, utiliza
las Hojas de Estilo el mximo posible. Ten en cuenta
que lo que hoy est Desaprobado, es posible que en un
futuro no sea reconocido por los navegadores, si no es
a travs de Hojas de Estilo. Por lo tanto, cuando
empieces a trabajar en serio, recurre a las Hojas de
Estilo.

Asustado ya?
Qu es HTML?
ndice HTML
ndice General

Ni hablar

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/introduc/definir.htm (5 of 6) [27/02/2003 16:55:38]

Como crear pginas web. Manual: HTML: Definiciones

file:///D|/Manuales/Aprender%20HTML/introduc/definir.htm (6 of 6) [27/02/2003 16:55:38]

Como crear pginas web. Manual: HTML: Qu es?

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Qu es el HTML?

Declaracin
principios

El HTML es el idioma comn utilizado para


publicar informacin en la WWW.
Las letras corresponden, en ingls, a
"HyperText Markup Lenguaje".

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Tal vez hayas odo hablar de otras cosas


como: XHTML, DHTML, Javascript, Java,
Perl, XML, ASP, CGI-BIN, Flash, PHP, etc.
Algunos de esos son Lenguajes de
Programacin. El HTML no es propiamente
un lenguaje de alto nivel, sino un conjunto de
Elementos, que conforman una serie de
etiquetas para colocar texto, imgenes y
otras cosas, en lo que ser una pgina web.
Por eso es tan fcil de aprender.
De momento olvida todos esos nombres y
concntrate en el HTML, que es el soporte
bsico de todo lo dems y es el idioma inicial
que precisas para comenzar esta aventura.
Todo llegar, en su momento. Vayamos paso
a paso.
La versin que contempla este Manual es la

file:///D|/Manuales/Aprender%20HTML/introduc/quees.htm (1 of 6) [27/02/2003 16:55:39]

Como crear pginas web. Manual: HTML: Qu es?

Vuestras
colaboraciones
Sugerencias
SALIDA

4.01, recomendada por la W3C el 24 de


Diciembre de 1999 (1). Ya te digo de entrada
que la W3C es la mejor fuente de informacin
sobre la WWW, y la que marca las "pautas de
conducta" deseables para todos los que
intervienen en las diferentes reas
relacionadas con la Web. La enumeracin de
los diferentes Elementos y Atributos del
HTML que contempla este Manual, est
basada en la versin recomendada por la
W3C. No es una relacin completa, ni
pretende ser una traduccin parcial de esos
Elementos y Atributos.
El HTML est formado por tan slo 90
elementos, ms o menos. No son muchos,
verdad?. Adems estoy seguro que en una
primera etapa no vas a utilizar ms de 50, y
algunos tal vez no los utilices nunca.
Por lo tanto, mensaje positivo: Es

muy

fcil aprender el HTML

Ahora me doy cuenta de que he utilizado la


abreviacin WWW dos veces en esta pgina
y an no te he dicho lo que es.
Djame que te explique un par de cosas
antes de entrar de lleno en el HTML. Prometo
ser breve.
Qu es la WWW? - URL
Es la madre del cordero. World Wide Web.
Tela mundial. Red mundial. Es como una red
de emisores que transmiten archivos,
recursos o informacin, como quieras
file:///D|/Manuales/Aprender%20HTML/introduc/quees.htm (2 of 6) [27/02/2003 16:55:39]

Como crear pginas web. Manual: HTML: Qu es?

llamarle. Tambin se conoce como la Web,


con mayscula.
Esos recursos o archivos se identifican por
una cosa que se llama URI. Universal
Resource Identifier: Identificador Universal de
Recursos. Tambin vers que se le llama
URL. Uniform Resource Locator. De hecho
los URIs contienen a los URLs, pero dejemos
eso. Aqu les llamaremos de cualquiera de
las dos formas.
Cada documento, imagen, programa, vdeo,
archivo de sonido, etc., tiene su propia
"direccin", que se expresa mediante un
URL.
Por ejemplo la direccin de esta web tiene el
siguiente URL:
http://www.webaprendiz.com
Un URL tpico consta de tres partes:
-El nombre del protocolo o mecanismo
empleado para acceder a ese recurso:
(http.HyperText Transfer Protocol), seguido
de dos puntos y dos barras inclinadas.
- El nombre del tipo de servidor o mquina
que hospeda la informacin. En este caso es
www porque es un servidor Web y suelen
denominarse de esta manera.
- Un nombre que identifique especficamente
al servidor en cuestin, mediante lo que se
denomina "direccin del dominio". En este
caso webaprendiz.com. El dominio de
hecho es el com.

file:///D|/Manuales/Aprender%20HTML/introduc/quees.htm (3 of 6) [27/02/2003 16:55:39]

Como crear pginas web. Manual: HTML: Qu es?

Los URI tienen diversas aplicaciones:

Para enlazar con otros documentos o


recursos. Lo veremos cuando estudiemos
los llamados hipervnculos o links (A,
LINK).
Para incluir una imagen, un objeto o un
applet en un documento. Tambin lo
veremos (IMG, OBJECT, APPLET,
INPUT).
Para enlazar con una Hoja de Estilo
Externa o un Script (LINK, SCRIPT). La
expresin "Hoja de Estilo" la repetir
innumerables veces a lo largo del
Manual.
Para crear un Mapa de Imagen, que
tambin veremos (AREA, MAP).
Para enviar un Formulario (FORM).
Para las pginas con Marcos (FRAME,
IFRAME).
Para citar una referencia externa (Q,
BLOCKQUOTE, INS, DEL).
Para descripciones de documentos
(HEAD).

Pero todo eso ya lo iremos viendo poco a poco. No


intentes descubrir ahora, qu significan los trminos
que hay entre los parntesis. Ya llegar.

Por favor no confundas la Web con la


Internet. La Internet se remonta a 1961. La
Web es una parte de la Internet y, de hecho
el HTML es uno de los muchos lenguajes
utilizados en la Internet.
Cortsima historia del HTML
El culpable fue Tim Berners-Lee, quien
file:///D|/Manuales/Aprender%20HTML/introduc/quees.htm (4 of 6) [27/02/2003 16:55:39]

Como crear pginas web. Manual: HTML: Qu es?

desarroll el primer HTML mientras estaba en


el Centro Europeo de Fsica de Partculas
(CERN). El primer navegador que se utiliz
fue el Mosaic.
Fue durante la dcada de los 90 cuando se
produjo el desarrollo a nivel global de lo que
llamamos la Web. Por lo tanto, estamos
hablando de tan slo hace dos das.
Desde entonces el HTML se ha ido
modificando y mejorando a travs de varias
versiones. La ms actualizada, a la fecha en
que estoy escribiendo, que no publicando, es
la HTML 4.01, y ya existe una versin del
XHTML, pero olvdate de esto ya que an
tenemos HTML para rato.
Fin. Te promet que sera breve y creo que lo
he cumplido.

Entramos ya en materia?
ndice HTML
ndice General

S, pesado

Enlaces de esta pgina:


(1) Especificacin del HTML 4.01 de la W3C

file:///D|/Manuales/Aprender%20HTML/introduc/quees.htm (5 of 6) [27/02/2003 16:55:39]

Como crear pginas web. Manual: HTML: Qu es?

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/introduc/quees.htm (6 of 6) [27/02/2003 16:55:39]

Cmo crear pginas web. Manual: HTML: Listas: UL, LI, OL

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

estudio/Cmo crear tu pgina web: Paso a


Paso

LISTAS
Las LISTAS sirven para listar informacin. No
es que quiera hacerme el listo, pero as es.
Pero imagino que ya lo sabas. Las listas
deben tener como mnimo uno o ms
elementos que listar, sino no son listas. Sigo
sin hacerme el listo, es que es as.
Existen tres tipos de LISTAS:

Listas No ordenadas (unordered lists)


Listas Ordenadas (ordered lists)
Definiciones (definitions)

La lista previa es un ejemplo de Lista No


ordenada.

Entrada
Puntos de Vista

Entrada
Colaboraciones

Para sacar el mximo provecho de


WebAprendiz, deberas hacer varias cosas y
en el siguiente orden:
1. Leer las FAQ Qu es WebAprendiz?

file:///D|/Manuales/Aprender%20HTML/listas/list1.htm (1 of 5) [27/02/2003 16:55:42]

Listas
8 DIN-A4

Cmo crear pginas web. Manual: HTML: Listas: UL, LI, OL

Vuestras
colaboraciones
Sugerencias
SALIDA

2. Leer Imprimir WA y Visualizar WA


3. Estudiar el Manual PASO A PASO del
Estudio del Taller del Aprendiz
4. Leer el Libro de Estilo
5. Empezar tu propia web
6. Utilizar el Almacn, cuando lo precises
7. Enviar tu web al Concurso
La lista previa es un ejemplo de Lista
Ordenada.

En cuanto a ejemplos de Definiciones, en


todos los Elementos que hemos visto hasta
ahora, la informacin del apartado Atributos
Principales, est presentada en forma de
Definicin.
Lo veremos enseguida, y luego te ensear
el cdigo de los ejemplos anteriores.

Listas Ordenadas y No
ordenadas: UL, OL, LI
<ul>...</ul>
<ol>...</ol>
<li>...</li>
El elemento de lista UL se utiliza para abrir y
cerrar una Lista No ordenada.
El elemento de lista OL se utiliza para abrir y
cerrar una Lista Ordenada.
El elemento de lista LI encierra cada trmino
de la Lista, ya sea No ordenada u Ordenada.
file:///D|/Manuales/Aprender%20HTML/listas/list1.htm (2 of 5) [27/02/2003 16:55:42]

Cmo crear pginas web. Manual: HTML: Listas: UL, LI, OL

Todos requieren etiqueta de cierre.

Atributos principales
type
Desaprobado. Sirve para especificar el
estilo de los trminos de la lista (el tipo de
vieta que aparece delante de cada
trmino).

start
Desaprobado. Se utiliza slo para las listas
Ordenadas (OL) y especifica el nmero por
el que se debe iniciar la lista. Por defecto el
1.

value
Desaprobado. Slo para LI. Se utiliza para
poder fijar el nmero de orden de un
trmino de una lista Ordenada.

compact
Desaprobado. Cuando se utiliza, permite
que los mecanismos que interpretan el
cdigo (user agents), presenten la lista de
forma ms compactada. La apariencia final
depender de cada uno de esos "user
agents".

id, class, lang, dir, title, style y los relativos


a "eventos". Si tienes dudas puedes ir a la
explicacin del elemento P, para los
primeros, y al Captulo SCRIPT para los
relativos a sucesos.
La primera parte de este apartado es un ejemplo de
Definicin.

file:///D|/Manuales/Aprender%20HTML/listas/list1.htm (3 of 5) [27/02/2003 16:55:42]

Cmo crear pginas web. Manual: HTML: Listas: UL, LI, OL

Valores
type="disc", "circle", "square" para Listas No
ordenadas.
Determina el tipo de vieta que aparecer delante de
cada trmino de la lista No ordenada. Puede ser un
disco slido, un crculo, o un cuadrado.
En mi hoja de estilo tengo definida una clase de Lista
en la que el tipo de estilo de vieta es "none". En este
caso no aparece ninguna vieta delante de cada
trmino de la lista.

type= para Listas Ordenadas:


type=

Estilo de la numeracin

decimal

1, 2, 3, 4, ...

lower-alpha

a, b, c, d, ...

upper-alpha

A, B, C, D, ...

lower roman

i, ii, iii, iv, ...

upper-roman

I, II, III, IV, ...

none
(What's this?. This is a Table. But don't
pay any attention to it right now, OK?. NI
CASO.)

start="un nmero"
Se utiliza cuando no queremos que sea el nmero "1",
de un estilo de numeracin, el que inicie una lista
Ordenada. Por ejemplo, hemos iniciado una Lista
ordenada. Despus del trmino "2", por el motivo que
sea, cerramos la lista. Tal vez ya la damos por
terminada.
Seguimos trabajando en la pgina. De repente,
queremos continuar la lista que habamos iniciado. O
bien, nos vemos obligados a cambiar de pgina para
seguir con la lista que habamos empezado en la
pgina anterior. Solucin: podemos iniciar una nueva
Lista con el nmero "3".

file:///D|/Manuales/Aprender%20HTML/listas/list1.htm (4 of 5) [27/02/2003 16:55:42]

Cmo crear pginas web. Manual: HTML: Listas: UL, LI, OL

Cuidado con el prrafo anterior, o te vas a


liar. Me explicar mejor:
Ojo con lo de nmero "1", nmero "2" y
nmero "3". Lo voy a traducir:
El nmero "1" puede ser: 1, a, A, i, I
El nmero "2" puede ser: 2, b, B, ii, II
El nmero "5" puede ser: 5, e, E, v, V
Es decir, si has empezado una Lista
utilizando nuestro alfabeto en maysculas,
cuando digas start="3", estars diciendo que
empiece con la letra C. Me sigues?. Bien,
pues yo tambin sigo.

Lo que ocurre es que voy a seguir en otra


pgina, o se me acusar de hacer las
pginas excesivamente largas. Ya
discutiremos eso en El Libro de Estilo.
Pasamos pgina?
Elementos DIV y SPAN
ndice HTML
ndice General

Pasemos

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/listas/list1.htm (5 of 5) [27/02/2003 16:55:42]

Cmo crear pginas web. Manual: HTML: Listas: Ejemplos

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML

estudio/Cmo crear tu pgina web: Paso a Paso


Seguimos con los Atributos para los Elementos de
las Listas Ordenadas y No ordenadas.
value="un nmero"
Sirve para asignar el nmero de orden de numeracin a un
trmino concreto de la lista.

Aqu sirve el mismo comentario que para el atributo


"start". Cuidado con el "nmero" y el "estilo de
numeracin".
Recuerda que el atributo "start" es para la etiqueta
<ol>, y "value" es para la etiqueta <li>.

Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Ejemplos:
<p>Existen tres tipos de LISTAS:
<ul>
<li>Listas No ordenadas (unordered
lists)</li>
<li>Listas Ordenadas (ordered
lists)/li>
<li>Definiciones (definitions)</li>
</ul>
Este cdigo se corresponde con el ejemplo de lista No
ordenada del inicio del apartado LISTAS.

file:///D|/Manuales/Aprender%20HTML/listas/list2.htm (1 of 7) [27/02/2003 16:55:43]

Cmo crear pginas web. Manual: HTML: Listas: Ejemplos

Vuestras
colaboraciones

Fjate en las etiquetas del Elemento UL, que abren y cierran la


Lista. Por otra parte, las etiquetas del Elemento LI, encierran
cada trmino de la lista. Fcil, no?. Por supuesto, las Listas
van dentro de la Seccin BODY del documento.

Sugerencias
SALIDA
<html>
<head>
<title>Un ejemplo de Lista</title>
</head>
<body>
<p>Para sacar el mximo provecho de
WebAprendiz, deberas hacer varias
cosas y en el siguiente orden:
<ol>
<li>Leer las FAQ <i>Qu es
WebAprendiz?</i></li>
<li>Leer <i>Cmo imprimir en
WebAprendiz?</i></li>
<li>Estudiar el Manual <i>PASO A
PASO</i> del Estudio del Taller del
Aprendiz</li>
<li>Leer el <i>Libro de
Estilo</i></li>
<li>Empezar tu propia web</li>
<li>Utilizar el Almacn, cuando lo
precises</li>
<li>Enviar tu web al Concurso</li>
</ol>
</body>
</html>
Este es el segundo ejemplo, y era una lista Ordenada
estndar. Es decir, si no se especifica, cada trmino va
ordenado con nmeros del sistema decimal.
Fjate que es exactamente igual que la lista No ordenada. Lo
nico que ha variado es el Elemento cuyas etiquetas abren y
cierran la Lista, es decir, aqu es OL, y antes era UL. Est claro,
no?.
file:///D|/Manuales/Aprender%20HTML/listas/list2.htm (2 of 7) [27/02/2003 16:55:43]

Cmo crear pginas web. Manual: HTML: Listas: Ejemplos

Vamos a ver un corto ejemplo de lista Ordenada


utilizando un atributo "type" diferente de los nmeros
del sistema decimal:
<html>
<head>
<title>Otro ejemplo</title>
</head>
<body>
<ol type="i">
<li>Primer paso</li>
<li>Segundo paso</li>
<li>Tercer paso</li>
</ol>
</body>
</html>
i. Primer paso
ii. Segundo paso
iii. Tercer paso
Para variar el tipo de vieta, tienes que utilizar los caracteres
de la primera columna de la Tabla de la pgina anterior. Es
decir, "a", "A", "i", "I".

Bien, antes de pasar a las Definiciones, veamos


unos ejemplos de Listas anidadas:
1. Dormir
2. Trabajar:
I. Comer
II. Dormir
III. Internet:
file:///D|/Manuales/Aprender%20HTML/listas/list2.htm (3 of 7) [27/02/2003 16:55:43]

Cmo crear pginas web. Manual: HTML: Listas: Ejemplos

a. Trabajar en nueva web


b. Mirar e-mail
c. Contestar e-mails:
i. Agradecer
felicitaciones
ii. Pulverizar a los
criticones
3. Descansar
4. Volver al inicio
<html>
<head>
<title>Ejemplo de Lista
Anidada</title>
</head>
<body>
<ol>
<li>Dormir</li>
<li>Trabajar:
<ol type="I">
<li>Comer</li>
<li>Dormir</li>
<li>Internet:<ol type="a">
<li>Trabajar en nueva web</li>
<li>Mirar e-mail</li>
<li>Contestar e-mails:<ol type="i">
<li>Agradecer felicitaciones</li>
<li>Pulverizar a los criticones</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
<li>Descansar</li>
<li>Volver al inicio</li>
</ol>
file:///D|/Manuales/Aprender%20HTML/listas/list2.htm (4 of 7) [27/02/2003 16:55:43]

Cmo crear pginas web. Manual: HTML: Listas: Ejemplos

</body>
</html>
Te he coloreado un par de etiquetas para que te sea ms fcil
seguir el cdigo anterior. Fjate en la etiqueta de apertura y
cierre de Lista. Pero sobre todo fjate en la etiqueta "li" de color
azul y mira donde est su correspondiente etiqueta de cierre.

Este ejemplo lo he realizado con una Lista


Ordenada, pero lo mismo se puede hacer con una
No ordenada.
Tambin puedes hacer Listas anidadas,
combinando listas Ordenadas y No ordenadas.
Por ejemplo:
<html>
<head>
<title>Otro ejemplo de Lista
Anidada</title>
</head>
<body>
<ul>
<li>Captulo Primero
<ol>
<li>Cmo hacer un huevo frito</li>
<li>Cmo hacer un tortilla a la
francesa</li>
</ol>
</li>
<li>Captulo Segundo</li>
<li>Captulo Tercero</li>
</ul>
</body>
</html>

Captulo Primero
Captulo Segundo
1. Cmo hacer un huevo frito

file:///D|/Manuales/Aprender%20HTML/listas/list2.htm (5 of 7) [27/02/2003 16:55:43]

Cmo crear pginas web. Manual: HTML: Listas: Ejemplos

2. Cmo hacer una tortilla a la francesa


Captulo Tercero
Captulo Cuarto

Este es un ejemplo muy simple. Puedes complicarlo cuanto


quieras. Cuando le coges el tranquillo es muy fcil, slo hay
que tener presente, qu elementos van abriendo en cada
momento y cerrarlos en el momento adecuado. Recuerda la
Leccin de Geometra que vimos al principio del Manual.

Para terminar slo una cosa:

Fjate que las Listas provocan una sangra en el


texto, de forma que los trminos de la lista
aparecen sangrados con respecto al margen
izquierdo. Todos mis ejemplos del Manual estn
sangrados para diferenciarlos del texto normal,
pero en el caso de las Listas, el sangrado no lo
he provocado yo.

Por cierto, esto era una lista No ordenada con type="none".


Off the record: Puedes conseguir el mismo efecto anterior, es
decir, como si utilizaras el valor "none" para el atributo "type",
si en una Lista No ordenada, te "olvidas" de utilizar el elemento
LI, utilizando nicamente el elemento UL.
Ejemplo:
<ul>
Pelar las patatas<br>
Cortar las patatas<br>
Frer las patatas<br>
</ul>

Pelar las patatas


Cortar las patatas
Frer las patatas

Pero no se lo digas a nadie. Vale?

Cambiemos de pgina y veamos las Definiciones.


file:///D|/Manuales/Aprender%20HTML/listas/list2.htm (6 of 7) [27/02/2003 16:55:43]

Cmo crear pginas web. Manual: HTML: Listas: Ejemplos

Te parece?
Listas: UL, OL, LI
ndice HTML
ndice General

Me parece

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/listas/list2.htm (7 of 7) [27/02/2003 16:55:43]

Cmo crear pginas web. Manual: HTML: LISTAS: Definiciones: DL, DT, DD

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Definiciones: DL, DT, DD

Declaracin
principios

<dl>...</dl>
<dt>...</dt>
<dd>...</dd>
El Elemento DL ( definition list) sirve para
abrir y cerrar el cdigo. Hace la misma
funcin que veamos para OL y UL.
DT (definition term), incluir el trmino o
palabra que vamos a definir.
La definicin se expresar con las etiquetas
del Elemento DD (definition data).
Las etiquetas de cierre son opcionales, pero
utilzalas.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Atributos y Valores
id, class, lang, dir, title, style y las relativas
a "sucesos". Si tienes dudas, visita el
Elemento P, para los primeros y el Captulo
SCRIPT para los relativos a sucesos.

file:///D|/Manuales/Aprender%20HTML/listas/list3.htm (1 of 5) [27/02/2003 16:55:44]

Cmo crear pginas web. Manual: HTML: LISTAS: Definiciones: DL, DT, DD

Vuestras
colaboraciones
Sugerencias
SALIDA

Ejemplos:
Como te he dicho antes, la presentacin de
los diferentes Atributos de diversos
elementos, la he hecho utilizando la lista
Definicin. De todas formas veamos algn
ejemplo ms:
Pesado
Individuo plomfero, que continuamente te
recuerda que hay unas cosas que se llaman
Hojas de Estilo, y que es el sistema que hay
que utilizar, en la medida de lo posible, para
dar formato a las pginas web.

Plomo
Individuo muy pesado, que no cansa de
repetirte que hay muchos Elementos y
Atributos en el HTML que estn
Desaprobados y que, aunque pueden
utilizarse, es mejor utilizar las Hojas de
Estilo para obtener los mismos resultados

<dl>
<dt>Pesado</dt>
<dd>Individuo plomfero, que
continuamente te recuerda que hay
unas cosas que se llaman Hojas de
Estilo, y que es el sistema que
hay que utilizar............</dd>
<dt>Plomo</dt>
<dd>Individuo muy pesado, que no
se cansa de repetirte que hay
muchos Elementos y Atributos
.........</dd>
</dl>
Bien, fjate en dos cosas: Primero, las Definiciones no
causan sangra de texto en el trmino a definir.
file:///D|/Manuales/Aprender%20HTML/listas/list3.htm (2 of 5) [27/02/2003 16:55:44]

Cmo crear pginas web. Manual: HTML: LISTAS: Definiciones: DL, DT, DD

Segundo, la "negrita" en que aparece el trmino a


definir la he puesto yo, a travs de mi Hoja de Estilo.
Dependiendo del "user agent" puede variar la forma en
que se representan las Definiciones, as como el hecho
de destacar o no, el trmino que se est definiendo.

Por cierto, cuando me decida a publicar mi


novela en la Net, vers cosas como sta:
Clint:
- Cometiste dos errores forastero. Meterte conmigo y
mi Manual.

Chester:
- Oh, yeah?. Y, qu piensas hacer al respecto?
Bang! Bang!. Sonaron dos disparos que brillaron
como relmpagos en medio de la oscuridad de Main St.

Clint:
- Eso, you idiot!. Nadie juega conmigo.

Lo que quiero decir, es que las Definiciones


tambin pueden utilizarse para presentar
dilogos. As que ya lo sabes...

Off-the-record. Si quieres adornar los elementos de una


Lista con una imagen, la forma ms sencilla es
utilizando las Definiciones, aunque tambin se puede
hacer con otro tipo de Listas.

file:///D|/Manuales/Aprender%20HTML/listas/list3.htm (3 of 5) [27/02/2003 16:55:44]

Cmo crear pginas web. Manual: HTML: LISTAS: Definiciones: DL, DT, DD

Este Manual es para


principiantes
Te ests pasando de la raya
Este ejemplo "off the record",
no debera estar en este Captulo,
tal vez ni siquiera debera estar
en el Manual de HTML, sino en
otra seccin del Estudio.

Este ejemplo esta hecho con una Definicin. Slo has


de incorporar la imagen que desees, despus de la
etiqueta <dd>, justo antes del texto. Como siempre,
no le digas a nadie que he incluido este ejemplo en el
presente Captulo.

Bueno, para terminar, no te recordar lo de


las Hojas de Estilo, pero s te dir lo
siguiente:
Existen dos Elementos ms, DIR y MENU,
que junto con LI, funcionan exactamente
igual que las Listas No ordenadas, es decir
UL.
Estos dos Elementos estn Desaprobados.
Se recomienda no utilizarlos y usar la Lista
No ordenada. Si quieres hacer la prueba,
hazla. Yo no te pondr ejemplos, ni te dir los
Atributos y Valores, en este caso.
Adems, mralo de esta forma: te libras de
dos Elementos. Ya quedan menos!.

Se acab el Captulo dedicado a las LISTAS.


file:///D|/Manuales/Aprender%20HTML/listas/list3.htm (4 of 5) [27/02/2003 16:55:44]

Cmo crear pginas web. Manual: HTML: LISTAS: Definiciones: DL, DT, DD

No hay Documento de Prctica en este


Captulo. Con los ejemplos que hemos visto
es ms que suficiente. Recuerda que las
Listas van dentro del Elemento BODY.
Nos hipervinculamos?
Listas: UL,OL,LI pg.2
ndice HTML
ndice General

Hipervinculmonos

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/listas/list3.htm (5 of 5) [27/02/2003 16:55:44]

Cmo crear pginas web. Manual: HTML: LINKS: Intro

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad

estudio/Cmo crear tu pgina web: Paso a


Paso

Hipervnculo, vnculo, hyperlink,


link
Introduccin
Todo es lo mismo. An podras aadir
"enlace" y, tal vez, alguna ms.
Internet quizs no existira si no fuera por los
vnculos. Todo empez con texto y
hipervnculos. El tema es lo suficientemente
importante como para dedicarle unas
palabras previas, y no limitarme a describirte
los Elementos que intervienen en un "link".
De entrada te dir que dividir este Captulo
en dos partes:

Avanzando

Entrada

Puntos de Vista

Entrada
Colaboraciones

La parte dedicada al Hipervnculo, o link


en minsculas. Es decir la mecnica de
cmo se crea un enlace, ya sea de texto
o de imagen, y los llamados
"marcadores". Aqu utilizaremos el
Elemento A.

Y la parte dedicada al Elemento LINK (en

file:///D|/Manuales/Aprender%20HTML/links/links0.htm (1 of 3) [27/02/2003 16:55:44]

Links
Tardar unos
segundos
14 DIN-A4

Cmo crear pginas web. Manual: HTML: LINKS: Intro

Vuestras
colaboraciones
Sugerencias
SALIDA

maysculas) y el Elemento BASE.


Todos los vnculos, sean del tipo que sean,
tienen dos puntos de referencia:

El origen del vnculo, que suele ser un


texto o una imagen. Aqu pondremos la
direccin del:

Destino del vnculo, que es el recurso al


que apuntamos. El destino puede ser
muchas cosas: una pgina web, una
imagen, un sonido, una direccin de
correo, una seccin de una pgina, etc.

Al origen y al destino se les suele llamar


anclas.
Veremos que, a veces, un origen de vnculo
puede ser, a la vez, un destino de vnculo.
Veremos, tambin, que existen hipervnculos
Internos y Externos, y direcciones Absolutas
y Relativas.
No te asustes, vers que todo es muy fcil.

Entramos en materia?
Listas: Definiciones
ndice HTML
ndice General

file:///D|/Manuales/Aprender%20HTML/links/links0.htm (2 of 3) [27/02/2003 16:55:44]

Adelante!

Cmo crear pginas web. Manual: HTML: LINKS: Intro

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/links/links0.htm (3 of 3) [27/02/2003 16:55:44]

Cmo crear pginas web. Manual: HTML: Formularios: Elementos FIELDSET y LEGEND

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Elementos FIELDSET y LEGEND

Declaracin
principios

<fieldset>.....</fieldset>
<legend>.....</legend>
El primero nos permite agrupar controles que
guarden cierta relacin entre ellos. De esta
forma facilitamos el que el usuario pueda
entender la finalidad de dichos controles.
El segundo nos permite asignar un ttulo
descriptivo a ese grupo de controles formado
mediante el Elemento anterior, FIELDSET.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales

Atributos y Valores

Accesibilidad

FIELDSET no tiene Atributos.

Avanzando

LEGEND

Entrada
Puntos de Vista

Entrada
Colaboraciones

align="top; bottom; left; right"


Desaprobado. Especifica la posicin del
ttulo LEGEND, parte superior del grupo
formado por FIELDSET, debajo del grupo, a
la izquierda del grupo y a la derecha del
grupo.

file:///D|/Manuales/Aprender%20HTML/forms/forms8.htm (1 of 3) [27/02/2003 16:55:45]

Cmo crear pginas web. Manual: HTML: Formularios: Elementos FIELDSET y LEGEND

Vuestras
colaboraciones
Sugerencias
SALIDA

id, class, lang, dir, title, style, los puedes


consultar ene el Elemento P, accesskey lo
hemos visto en el Elemento INPUT.
Y, adems, los relativos a "sucesos"
intrnsecos, que veremos en el Captulo
SCRIPT.

Datos Personales Nombre:


Primer Apellido:
Telfono:

Edad:

e-mail:

Explorer: Veris algo semidecente, con


formato de letra de 8 puntos y color blanco,
sobre un fondo de formulario de color negro.
Netscape: Probablemente veris unos
campos de formulario desordenados. La letra
de dos tipos diferentes y de color blanco con
fondo negro. El fondo del formulario lo veris
blanco. Depende de la versin.

Bueno, ya vale de formularios, veamos algn


ejemplo y terminaremos el captulo.
Nos estamos acercando al final del Tercer
Paso, del Manual PASO a PASO.

file:///D|/Manuales/Aprender%20HTML/forms/forms8.htm (2 of 3) [27/02/2003 16:55:45]

Cmo crear pginas web. Manual: HTML: Formularios: Elementos FIELDSET y LEGEND

Elemento LABEL
ndice HTML
ndice General

Qu bien!

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/forms/forms8.htm (3 of 3) [27/02/2003 16:55:45]

Cmo crear pginas web. Manual: HTML: Formularios: Elemento INPUT

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Elemento INPUT

Declaracin
principios

<input......>
Lo utilizaremos para definir el tipo y
apariencia de los controles para la
introduccin de datos en un formulario. Se
trata de un Elemento de los llamados vacos.
Etiqueta de cierre prohibida.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML

Atributos y Valores

Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada

type="text; password; checkbox; radio;


submit; reset; file; hidden; image; button"
Sirve para especificar el tipo de control que
se va a crear. La mayora ya los hemos
visto en la pgina anterior:

Puntos de Vista

Entrada

Colaboraciones

text. Crea una control de una lnea de


texto.
password. Igual que el anterior, pero los
caracteres introducidos por el usuario son
remplazados por asteriscos o un carcter
similar.
checkbox. Crea una casilla de
verificacin.
radio. Crea un botn del tipo radio.
submit. Crea un botn de envo.
reset. Crea un botn de Restablecer, que

file:///D|/Manuales/Aprender%20HTML/forms/forms3.htm (1 of 5) [27/02/2003 16:55:46]

Cmo crear pginas web. Manual: HTML: Formularios: Elemento INPUT

Vuestras
colaboraciones

Sugerencias

SALIDA

al pulsarlo devuelve el formulario a su


estado inicial.
file. Crea un control de fichero, para que
el usuario pueda enviar un archivo desde
su ordenador al servidor.
hidden. Crea un control oculto.
image. Crea un botn de envo utilizando
la imagen indicada en la URL especificada
en el Atributo src. Al igual que con el
resto de imgenes, como ya vimos en su
da, hay que ofrecer un texto alternativo a
la imagen por razones de Accesibilidad.
button. Crea un botn normal.

name="texto"
Sirve para asignar el nombre del control.

value="valor"
Sirve para especificar el valor inicial del
control. Este Atributo es opcional, excepto
cuando el Atributo type tiene los valores
radio o checkbox.

size="medida de anchura"
Sirve para indicar al navegador o
mecanismo alternativo, la anchura inicial del
control.

maxlength="nmero"
Sirve para indicar el nmero mximo de
caracteres que puede introducir el usuario,
cuando el valor del Atributo type es text o
password.

checked
Sirve para indicar que un botn est en
activado en su estado inicial, cuando el
valor del Atributo type es radio o
checkbox.

src="URL"
Especifica la direccin de la imagen a
utilizar en un botn, cuando el valor del
Atributo type es image

readonly
Slo lectura. Cuando se utiliza este trmino
en un formulario, significa que los cambios
de valor del control estn prohibidos.
file:///D|/Manuales/Aprender%20HTML/forms/forms3.htm (2 of 5) [27/02/2003 16:55:46]

Cmo crear pginas web. Manual: HTML: Formularios: Elemento INPUT

disabled
Este trmino deshabilita el control y el
usuario no puede introducir ningn dato.

tabindex="numero"
Sirve para especificar el orden que ocupa el
elemento actual, en la tabulacin del
documento. Por ejemplo en un formulario
con diferentes casillas, se puede especificar
el orden que cada una de ellas ocupa
dentro del formulario.

accesskey="carcter"
Sirve para asignar una tecla de acceso a un
objeto o elemento. Al pulsar esa tecla la
accin que tenga lugar depender del tipo
de elemento de que se trate.
Por ejemplo, imaginemos un formulario con
muchas casillas que solicitan datos del
usuario. Podemos asignar como tecla de
acceso a cada una de las casillas, la
primera letra del nombre del campo. As,
asignaramos la tecla "N" para el campo
Nombre, la "A" para el de Apellido, de tal
forma que el usuario con slo pulsar la tecla
activara el campo correspondiente para
que pudiera introducir sus datos.

id, class, lang, dir, title, style, align,


accept, alt, usemap, ismap (imagen del lado
del servidor), y los referidos a "sucesos".
Estos ltimos los veremos en el Captulo
SCRIPT, accept lo hemos visto en el
Elemento FORM, el resto los hemos
comentado en el Elemento P, y en el
Elemento IMG.

file:///D|/Manuales/Aprender%20HTML/forms/forms3.htm (3 of 5) [27/02/2003 16:55:46]

Cmo crear pginas web. Manual: HTML: Formularios: Elemento INPUT

Enviar
Borrar

Para que no te aburras tanto, te he puesto,


de momento un par de botones. NO PULSES
EL BOTON ENVIAR.
<form method="post"
action="mailto:direccin email">
<input type="submit"
value="Enviar"><br>
<input type="reset"
value="Borrar">
</form>
Esto son slo dos botones que formaran
parte de un Formulario de envo de un correo
electrnico.
Acabo de descubrir algo que no saba. En mi
cdigo fuente, no he incluido el Atributo
"action", para que si se te ocurra pulsar el
botn "Enviar" no te saliera ningn mensaje
de error o no enviaras un e-mail, caso de
haber puesto una direccin autntica.
Bien, si ests usando el Explorer y pulsas el
botn, pasar una cosa, y si ests utilizando
Netscape, pasar otra cosa distinta.
PULSA EL BOTN ENVIAR

file:///D|/Manuales/Aprender%20HTML/forms/forms3.htm (4 of 5) [27/02/2003 16:55:46]

Cmo crear pginas web. Manual: HTML: Formularios: Elemento INPUT

Bien, sigamos. Antes de ir al prximo


Elemento, te dir que para distribuir los
diferentes controles que componen un
formulario, de forma que queden bien
alineados o en la posicin que desees,
puedes utilizar etiquetas HTML, Tablas,
Hojas de Estilo o el Elemento PRE, pero
como est desaprobado nos olvidamos.
Los dos botones anteriores, se encuentran
dentro de una Tabla de una sola celda.

Pasemos al Elemento BUTTON, si quieres...


Elemento FORM
ndice HTML
ndice General

Si quiero

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/forms/forms3.htm (5 of 5) [27/02/2003 16:55:46]

Cmo crear pginas web. Manual: HTML: Formularios: Elemento FORM

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Elemento FORM

Declaracin
principios

<form>.....</form>
Es el que abarca toda la codificacin del
formulario. Algo parecido a <table></table>.
Iniciaremos el formulario con su etiqueta de
apertura, y lo finalizaremos con su etiqueta
de cierre.
Requiere etiqueta de cierre.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Atributos y Valores
action="URL"
Sirve para especificar la direccin del
recurso al que accede el navegador una vez
que el formulario se ha enviado.

method="get; post"
Especifica el sistema utilizado para el envo
de los datos del formulario al programa CGI,
por ejemplo. Puede tomar dos valores:

get. Con este sistema, los datos del


formulario se anexionan a la URL indicada
en el Atributo action, con un interrogante
(?) como separador, y esta nueva URL se
enva al procesador. Este mtodo es el
valor por defecto.

file:///D|/Manuales/Aprender%20HTML/forms/forms2.htm (1 of 5) [27/02/2003 16:55:47]

Cmo crear pginas web. Manual: HTML: Formularios: Elemento FORM

Vuestras
colaboraciones

post. Con este mtodo, los datos se


incluyen en el cuerpo del formulario y se
envan al procesador.

enctype="tipo de contenido MIME"


Sugerencias
SALIDA

Sirve para especificar el formato y tipo de


los datos del formulario, si se utiliza el
mtodo "post".

accept-charset="texto"
Sirve para especificar la lista de caracteres
que reconoce el servidor que procesa el
formulario. La lista debe separarse
mediante un espacio y una coma(,) o por
slo una coma (,).

accept="lista de tipos de contenido MIME"


Especifica una lista de los tipos de
contenido, separada por una coma (,) que el
servidor que procese la informacin es
capaz de reconocer.

name="texto"
Asigna un nombre al Elemento FORM, para
que podamos referirnos a l desde una Hoja
de Estilo. Aunque no est desaprobado,
debera utilizarse el Atributo id.

id, class, lang, dir, style, title, estos los


vimos en el Elemento P, target que lo vimos
en el Elemento A, y los relativos a
"sucesos", que se encuentran en el Captulo
SCRIPT.

Controles
Antes de definir otros Elementos que se
utilizan en los Formularios, vamos a ver lo
que son los Controles.
Los controles son los elementos contenidos
en el Elemento FORM, mediante los cuales,
file:///D|/Manuales/Aprender%20HTML/forms/forms2.htm (2 of 5) [27/02/2003 16:55:47]

Cmo crear pginas web. Manual: HTML: Formularios: Elemento FORM

el usuario interacciona con los formularios. A


estos Controles se les asigna un nombre
mediante el Atributo name.
Estos Controles tienen un valor inicial, que
puede ser definido a travs del Atributo
value, y un valor actual. Este valor actual,
suele ser el valor inicial, hasta el momento en
que se modifica, ya sea por una accin del
usuario, ya sea mediante un script.
Existen los siguientes tipos de Controles:
buttons
Botones. Se parecen a un conmutador de
dos posiciones.Existen tres tipos:

submit. Cuando se activa, se enva un


formulario. Podemos incluir ms de un
botn submit en un formulario.
reset. Cuando se activa, devuelve el
valor inicial a todos los controles.
push. Su conducta depende del script al
que se le asocie. Es decir, no tienen una
reaccin predeterminada.

Se pueden crear botones con los


Elementos BUTTON e INPUT, que ya
veremos.
checkboxes
Casillas de verificacin. Estas casillas
pueden ser marcadas por el usuario. Para
crearlas utilizaremos el Elemento INPUT.
Una casilla se encuentra activada, cuando
el Atributo checked est definido. El valor
del Atributo name, puede ser compartido por
varias casillas. El usuario puede marcar
varias casillas y todas ellas son vlidas.

radio buttons
Botones tipo radio. Se parecen bastante a
file:///D|/Manuales/Aprender%20HTML/forms/forms2.htm (3 of 5) [27/02/2003 16:55:47]

Cmo crear pginas web. Manual: HTML: Formularios: Elemento FORM

las casillas. Lo nico es que si varios


botones de este tipo comparten el mismo
nombre, son exclusivos entre s. Es decir,
slo se puede seleccionar uno, dentro de
una opcin de varios botones.
Para crear estos botones, utilizaremos el
Elemento INPUT.

menus
Mens o Listas. Permiten al usuario elegir
varias opciones dentro de un "men". La
lista o men, se crea con los Elementos
SELECT, OPTGROUP y OPTION, que ya
veremos.

text input
Entrada de texto. Si queremos crear una
sola lnea para la entrada de texto,
utilizaremos el Elemento INPUT. Si lo que
deseamos son mltiples lneas, es decir, un
rea de texto, utilizaremos el Elemento
TEXTAREA.

file select
Seleccin de ficheros. Este control permite
que el usuario seleccione ficheros para que
su contenido pueda ser enviado con un
formulario. Utilizaremos el Elemento INPUT.

hidden controls
Controles ocultos. Sirven para guardar
informacin sobre el intercambio
cliente/servidor. Esta informacin se remite
con el formulario, pero no es visible o
accesible para el usuario. Usaremos el
Elemento INPUT.

object controls
Controles de objeto. Se pueden insertar
objetos genricos en los formularios, de
forma que los valores que les sean
file:///D|/Manuales/Aprender%20HTML/forms/forms2.htm (4 of 5) [27/02/2003 16:55:47]

Cmo crear pginas web. Manual: HTML: Formularios: Elemento FORM

asociados, se enven junto con otros


controles. Utilizaremos el Elemento
OBJECT.

Qu!, cmo va?. hola!. Sigues conmigo?.


Acabo de ver una peli sobre hackers y
crackers y no me he enterado de nada.
Veamos cosas ms simples, como INPUT
Formularios: Introduccin
ndice HTML
ndice General

S, ms vale

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/forms/forms2.htm (5 of 5) [27/02/2003 16:55:47]

Cmo crear pginas web. Manual: HTML: Formularios: Introduccin

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Formularios

Declaracin
principios

Los Formularios son una forma de interactuar


con el sitio web y, en definitiva, con el autor o
propietario de la web.
Existen muchas clases de formularios, que
sirven para obtener informacin de los
visitantes: nombre, direccin, preferencias
sobre un determinado producto, comentarios,
sugerencias, etc.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

El problema con los formularios es que,


adems de crearlos con los Elementos que
ya veremos, intervienen unos programas
script que residen en el Servidor que ests
utilizando.
El flujo bidireccional de informacin entre el
sitio web y el servidor, se realiza mediante un
proceso conocido como CGI (Common
Gateway Interface) o Interfaz de Puerta
Comn. La informacin pasa a travs de esa
Puerta Comn al servidor y a un programa
que la procesa. Este programa CGI suele
estar escrito en lenguaje Pearl.
Para complicarlo an ms, existen diferentes

file:///D|/Manuales/Aprender%20HTML/forms/forms1.htm (1 of 3) [27/02/2003 16:55:48]

Formularios I
Tardar unos
segundos.
8 DIN-A4
Formularios II
Tardar unos
segundos.
9 DIN-A4

Cmo crear pginas web. Manual: HTML: Formularios: Introduccin

Vuestras
colaboraciones
Sugerencias
SALIDA

tecnologas de servidor y otros mtodos, a


parte de la CGI, para procesar los
formularios. Por lo tanto, debers contactar
con tu Proveedor de Servicios de Internet
(ISP), para averiguar cmo procesa la
informacin de los formularios.
Normalmente, el propio Proveedor, tiene
previsto en sus servicios, el facilitar los scripts
necesarios para poder funcionar con su
sistema.

En cuanto a la construccin de los


Formularios, existen pginas que facilitan su
construccin "on-line" y Editores de HTML, y
aplicaciones WYSIWYG, que presentan
herramientas que permiten su creacin de
forma rpida y fcil.
Su codificacin puede ser algo engorrosa,
especialmente si pretendes incluir muchos
campos o tipos de informacin, aunque los
Formularios deberan ser lo ms breves
posible. Si un Formulario es opcional y muy
extenso, el visitante probablemente no har
ni caso.
De todas formas, crear tus propios
Formularios tampoco es tan complejo, as
que si te vienes conmigo vers que no te
engao.
CSS: Ejemplo 4 tipos de
Hoja de Estilo
ndice HTML
ndice General

file:///D|/Manuales/Aprender%20HTML/forms/forms1.htm (2 of 3) [27/02/2003 16:55:48]

Toca madera

Cmo crear pginas web. Manual: HTML: Formularios: Introduccin

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/forms/forms1.htm (3 of 3) [27/02/2003 16:55:48]

Cmo crear pginas web. Manual: HTML: CSS: Ejemplo 4 tipos de Hoja de Estilo

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada

estudio/Cmo crear tu pgina web: Paso a


Paso

Ejemplo: 4 tipos de definir Estilo


<html>
<head>
<title>.....</title>
<meta>
<link rel="stylesheet"
href="......." type="text/css"
title="...." media="screen">
<link rel="stylesheet"
href="....." type="text/css"
title="....." media="print">
<style type="text"css">
<!-@import url (.........);
@import url (............);
p {font-family: Arial,
Helvetica, sans serif; color:
blue}
h6 {text-align: center}
-->
</style>
</head>

Colaboraciones

<body>

file:///D|/Manuales/Aprender%20HTML/css/css8.htm (1 of 4) [27/02/2003 16:55:49]

Cmo crear pginas web. Manual: HTML: CSS: Ejemplo 4 tipos de Hoja de Estilo

Vuestras
colaboraciones
Sugerencias
SALIDA

<p style="font-size: 11pt;


color: blue; font-weight:
bold">Necesito un descanso</p>
</body>
</html>

Aqu tienes:
2 vnculos a dos Hojas de Estilo externas
(Hojas de Estilo Vinculadas).
2 Hojas de Estilo Importadas, dentro del
Elemento STYLE.
2 Reglas de Estilo dentro del Elemento
STYLE (Estilo Global, Incrustado o
Empotrado, como prefieras).
1 Estilo en Lnea. Definido mediante el
Atributo style, y afecta a un prrafo
concreto.

Bien, queda mucho por decir sobre las Hojas


de Estilo pero, como ya te he dicho, de
momento tienes suficiente para empezar.
Te recomiendo visites los enlaces que te
facilit al inicio del Captulo, para ver los
posibles Valores de las Propiedades, tanto
para la versin CSS1, como la CSS2.
Recuerda siempre:
file:///D|/Manuales/Aprender%20HTML/css/css8.htm (2 of 4) [27/02/2003 16:55:49]

Cmo crear pginas web. Manual: HTML: CSS: Ejemplo 4 tipos de Hoja de Estilo

Comprueba si funcionan en tu
navegador y otros navegadores. Luego
decide.
Si el Estilo va a ser repetitivo en toda tu
web o en secciones, utiliza una o varias
Hojas de Estilo Vinculadas. Creo que
son las ms verstiles. A veces te
interesar incluir alguna Importada para
anular parcialmente las Vinculadas.
Todo depende.
Repasa el efecto Cascada, si piensas
definir varios tipos de Estilo en tus
documentos.
Que tengas mucha suerte y paciencia.

Nota: Para que veas una aplicacin prctica, o uno de


los beneficios de utilizar las Hojas de Estilo, te dir lo
siguiente:
En todas las definiciones de mi Hoja de Estilo, tena
como Fuente preferente a Verdana (mi favorita), luego
Arial, Helvetica y sans-serif, y con un tamao de 10
puntos.
Si has ledo el captulo de Tablas, all he comentado
que he utilizado Tablas Variables en Webaprendiz, en
lugar de Tablas Fijas o Mixtas. Pues bien, al visualizar
Webaprendiz a una resolucin de 1024, he encontrado
que el tipo de letra standard quedaba algo pequeo
para mi gusto y no se lea con mucha facilidad. Al final
he decidido cambiar mi Fuente preferente a Arial y un
tamao de 11 puntos (Verdana no me gusta a 11 pt.),
que es el que est definida ahora, si es que no la he
vuelto a cambiar (soy Gminis).
La moraleja es la siguiente: Para cambiar el tipo de
letra en toda la Web (ms de 500 ficheros), he tardado
exactamente 90 segundos. Te imaginas que hubiera
pasado si no hubiera utilizado una Hoja de Estilo y
hubiera definido el tipo de fuente para cada prrafo?.

file:///D|/Manuales/Aprender%20HTML/css/css8.htm (3 of 4) [27/02/2003 16:55:49]

Cmo crear pginas web. Manual: HTML: CSS: Ejemplo 4 tipos de Hoja de Estilo

O si en lugar de utilizar una Hoja de Estilo Externa,


hubiera utilizado Estilo Incrustado en cada pgina?.

Aqu termino. Nos vamos a ver los


Formularios.
CSS: Situacin de Estilos
ndice HTML
ndice General

S, por favor

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/css/css8.htm (4 of 4) [27/02/2003 16:55:49]

Cmo crear pginas web. Manual: HTML: CSS: Situacin de Estilos en un documento

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

estudio/Cmo crear tu pgina web: Paso a Paso

Situacin de Estilos en un documento


Te recuerdo que tenamos: Estilo en Lnea,
Empotrado, Hoja Vinculada y Hoja Importada.

Estilo En Lnea
Es el que ya conoces sobradamente. Se sita en la
lnea de cdigo HTML correspondiente, en la
Etiqueta de Apertura de un Elemento.
Una gran mayora de los Elementos que hemos
visto en el Manual, tenan el Atributo style,
recuerdas?. Bien pues podras definir Estilo en su
etiqueta de apertura. Otra cosa es que debas
hacerlo de esta manera o utilizando una Hoja de
Estilo externa. (chale un vistazo al cdigo fuente
de mi Pgina Principal. Te he puesto mucho estilo
en lnea).

Entrada

Puedes, tambin, encontrarlo en muchas pginas


Puntos de Vista de esta web, excepto en este Captulo y el resto de
secciones del Estudio.
Entrada
Colaboraciones

Estilo Empotrado o Global


file:///D|/Manuales/Aprender%20HTML/css/css7.htm (1 of 7) [27/02/2003 16:55:50]

Cmo crear pginas web. Manual: HTML: CSS: Situacin de Estilos en un documento

Vuestras
colaboraciones
Sugerencias
SALIDA

Lo definiremos utilizando el Elemento STYLE y lo


situaremos en la Seccin HEAD del documento.
Te he puesto un ejemplo en mi Pgina Principal.
Podra haber utilizado mi Hoja de Estilo, por
supuesto, pero he preferido que vieras un ejemplo
real en una pgina.
<html>
<head>
<title>..........</title>
<meta>
<style type="text/css">
<!-XXX {.............................}
YYY { ............................}
etc., etc., etc.
-->
</style>
</head>
<body>
.........
.........
</body>
</html>
Acurdate de definir siempre el tipo de Hoja de
Estilo en la etiqueta de apertura del Elemento
STYLE, y de incluir los caracteres de Comentario
al principio y al final de la definicin.
Recuerda que esta forma de dar Estilo afecta
nicamente al documento en cuestin, y que si
pretendes utilizar ese mismo Estilo en diferentes
pginas, tendrs que incluir la definicin en cada

file:///D|/Manuales/Aprender%20HTML/css/css7.htm (2 of 7) [27/02/2003 16:55:50]

Cmo crear pginas web. Manual: HTML: CSS: Situacin de Estilos en un documento

pgina, o bien, utilizar una:

Hoja de Estilo Vinculada


Podrs encontrarla en prcticamente todas las
pginas de esta web. Es el sistema que ms utilizo.
Primero debers crear in fichero, con las Reglas
que desees y guardarlo con el nombre que elijas y
con extensin css.
Si utilizas un editor de texto, ten cuidado pues
puede que te guarde el fichero con extensin txt,
por ejemplo. Debers entonces modificarlo
manualmente.
Ese fichero es tu Hoja de Estilo. Utilizaremos el
Elemento LINK para llamarla, y la lnea de cdigo la
incluiremos dentro de la Seccin HEAD del
documento HTML.
<link rel="stylesheet"
href="../../../../estilos/basico.css
type="text/css" title="estilo
basico">
Este es el cdigo mnimo que te recomiendo:
En este caso estoy utilizando mi Hoja de Estilo de
nombre "Bsico", que tengo en un directorio
llamado "Estilos", situado a cuatro niveles por
encima de la pgina que ests leyendo. (todo esto
ya lo sabas, lo s).
El ttulo que le he puesto es "estilo bsico", por
supuesto.

file:///D|/Manuales/Aprender%20HTML/css/css7.htm (3 of 7) [27/02/2003 16:55:50]

Cmo crear pginas web. Manual: HTML: CSS: Situacin de Estilos en un documento

No olvides definir el tipo de Hoja de Estilo.


Nota:Podras incluir la definicin del tipo de "medio" con el
Atributo media del Elemento STYLE. Por ejemplo
media="screen, print". Pero tendrs problemas con
Netscape. No reconoce ms que screen.
Podras entonces definir dos hojas, una para la pantalla y otra
para la impresora, si sus Estilos son diferentes.
En este caso estoy utilizando el mismo Estilo para la pantalla
que para la impresin en papel. He optado por no incluir el
Atributo media. Tu haz lo que quieras.

<html>
<head>
<title>..........</title>
<meta>
<link rel="stylesheet" href="...."
type="text/css" title="..."
media="....">
</head>
<body>
.........
.........
</body>
</html>
La gran ventaja de la Hoja de Estilo Vinculada, es
que afecta a todos los documentos en los que
incluyas ese LINK, que puede ser toda tu web o
secciones concretas de tu sitio. Esta ventaja tiene
dos implicaciones positivas, por supuesto:

Uniformidad de Estilo en toda tu web.


Si quieres modificar alguna cosa a nivel de
web o de seccin, con un simple cambio en tu
Hoja de Estilo Vinculada, estars modificando
toda la web o toda esa seccin. Imagnate el
trabajo que te ahorras.

file:///D|/Manuales/Aprender%20HTML/css/css7.htm (4 of 7) [27/02/2003 16:55:50]

Cmo crear pginas web. Manual: HTML: CSS: Situacin de Estilos en un documento

Se pueden incluir Hojas de Estilo Alternativo, pero


eso lo dejamos para la Seccin Avanzando, del
Estudio.

Hoja de Estilo Importada


Se trata tambin de una hoja externa, por lo que
debers preparar el fichero en la misma forma que
en el caso de la Vinculada.
Para llamar a la Hoja utilizaremos el trmino
@import y, a continuacin el URL de la Hoja. El
cdigo lo emplazaremos en la Seccin HEAD del
documento, dentro de las Etiquetas del Elemento
STYLE y, antes que cualquier otra definicin de
Estilo que queramos incluir de forma Empotrada.
Dicho de otra manera, las llamadas de Importacin
de Hojas de Estilo, deben ser lo primero que
debemos colocar despus de la Etiqueta de
Apertura del Elemento STYLE, y de los caracteres
de Comentario.
<html>
<head>
<title>.....</title>
<meta>
<style type="text/css">
<!-@import url (............);
p {font-size: 12px}
h2 {font-size: 25px; color: blue}
-->
</style>
</head>

file:///D|/Manuales/Aprender%20HTML/css/css7.htm (5 of 7) [27/02/2003 16:55:50]

Cmo crear pginas web. Manual: HTML: CSS: Situacin de Estilos en un documento

<body>
.........
.........
</body>
</html>
Fjate en varias cosas:

Tenemos que incluir un punto y coma al final


de la lnea de cdigo.
La direccin del URL va entre parntesis.
La llamada a la Hoja de Estilo es la primera
definicin que hemos situado dentro del
Elemento STYLE.

Puedes Importar varias Hojas de Estilo, al igual que


podamos Vincular varias hojas de Estilo. El orden
de preferencia (cascada) empezar por la ltima
que hayas introducido (fifo).
Por supuesto, en el caso de las Importadas,
debers incluir su cdigo, utilizando el Elemento
STYLE, en cada pgina de tu web en la que
quieras importar esa o esas Hojas.
A continuacin del cdigo de importacin de Hojas,
puedes definir el Estilo Incrustado que quieras
dentro del Elemento STYLE.

Bueno, ahora te pondr un ejemplo de cdigo de


documento donde se incluyen las 4 formas de dar
Estilo.

file:///D|/Manuales/Aprender%20HTML/css/css7.htm (6 of 7) [27/02/2003 16:55:50]

Cmo crear pginas web. Manual: HTML: CSS: Situacin de Estilos en un documento

Piensas seguir conmigo?


CSS: Orden de Cascada
ndice HTML
ndice General

A estas alturas, ya...

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/css/css7.htm (7 of 7) [27/02/2003 16:55:50]

Cmo crear pginas web. Manual: HTML: CSS: Orden de Cascada

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

estudio/Cmo crear tu pgina web: Paso a


Paso

CSS: Cascada: un poco de


orden.
Cuando se utiliza ms de una forma de "dar
Estilo" a un documento, es lgico que surjan
enfrentamientos, luchas y batallas para ver
quien gana, a la hora de aplicar un Valor de
una determinada Propiedad, o de toda la
Hoja de Estilo, si a un mismo Selector (o
Elemento) se le han definido diferentes
Valores en las hojas de Estilo.
Tambin puede existir conflicto entre las
Reglas del Autor del documento o web y el
Lector, que tambin puede definir su propio
estilo de visualizacin. Adems, como ya
sabes, el navegador tiene sus propias
definiciones de Estilo.
Para resolver todos eso conflictos, se ha
definido un "orden de cascada" que afecta,
por un lado, a la relacin existente entre
Autor-Lector-navegador.
Y, por otro lado, a las cuatro formas (hojas de
estilo) de dar Estilo a un documento.

file:///D|/Manuales/Aprender%20HTML/css/css6.htm (1 of 6) [27/02/2003 16:55:50]

Cmo crear pginas web. Manual: HTML: CSS: Orden de Cascada

Vuestras
colaboraciones
Sugerencias

Orden de Cascada
Relacin: Autor-Lector-navegador

SALIDA
Las Hojas de Estilo del Autor y del
Lector tienen preferencia sobre la del
navegador.
Por lo tanto, en caso de conflicto en alguna
Regla, la Declaracin del navegador quedar
"anulada", por as decirlo, y no se aplicar.
Como norma general, las Reglas del
Autor, tienen preferencia sobre las
Reglas del Lector.
Sin embargo, aqu entra en juego un trmino
llamado ! important que, situado al final de
una Regla, antes de cerrar el corchete, hace
que esa Regla tenga preferencia sobre
cualquier otra.
Por ejemplo:
p {font-size: 10pt ! important}
Resumamos algunas situaciones posibles:
Ni el Autor ni el Lector utilizan !
important.
Siguiendo la norma general, predominar la
definicin del Autor.

Ambos utilizan ! important en una


misma Regla.
Siguiendo la misma norma general,
file:///D|/Manuales/Aprender%20HTML/css/css6.htm (2 of 6) [27/02/2003 16:55:50]

Cmo crear pginas web. Manual: HTML: CSS: Orden de Cascada

predomina la del Autor. (Esto es as en la


versin CSS1. En la versin CSS2, es todo
lo contrario, predomina la del usuario.)

Slo el Lector utiliza ! important en una


Regla o varias.
Predominar la del Lector, ya que el trmino
! important anula la del Autor.

Por lo tanto, evita la utilizacin de ese


trmino, ya que podras estar anulando
alguna definicin imprescindible para el
Lector. Por ejemplo el tamao o color de la
letra. Hay personas que, por problemas
visuales, precisan de un tamao de letra
superior, para poder leer con facilidad, o bien
tienen problemas con los colores (daltnicos).

Relacin: En lnea-Global-ImportadaVinculada
Por supuesto, si asignas el trmino que
hemos visto antes ! important, esa Regla
predominar sobre las dems, pero recuerda
lo que te he dicho al respecto.
Como norma general, el Selector ms
especfico, predominar sobre el que
sea menos especfico.
Por ejemplo:
El Selector ID, que hemos visto antes, es el
ms especfico, porque identifica a un
Elemento concreto en un lugar concreto.

file:///D|/Manuales/Aprender%20HTML/css/css6.htm (3 of 6) [27/02/2003 16:55:50]

Cmo crear pginas web. Manual: HTML: CSS: Orden de Cascada

El los Selectores que incluyen una Clase:


"TABLE H2 B.rojo" es ms especfico que el
Selector "TABLE B.rojo"
En los Selectores Contextuales, lo mismo, a
ms especificidad mayor predominancia:
"TABLE H2 EM B" y "TABLE H2 EM". Aqu
gana "B" por que es el ltimo y ms
especfico.
Como norma general, el ltimo es el
primero (LIFO).
El Estilo en Lnea predomina sobre los
dems. Es el ltimo en el documento
HTML, ya que lo defines a nivel de
lnea.
El Global o Empotrado, que se define
con el Elemento STYLE en la seccin
HEAD del documento, predomina sobre
el Importado y Vinculado.
El Vinculado predomina sobre el
Importado.
Y en cuando al Importado, si hay
varios, el orden es de ltimo a primero
(lifo).

Introduccin a las Mates 101


La 3WC, propone una frmula para calcular
esa "especificidad", y es ms o menos, la
siguiente:
A. Contar el nmero de IDs que hay en el
Selector.
file:///D|/Manuales/Aprender%20HTML/css/css6.htm (4 of 6) [27/02/2003 16:55:50]

Cmo crear pginas web. Manual: HTML: CSS: Orden de Cascada

B. Contar el nmero de CLASES que hay en


el Selector.
C. Contar el nmero de Elementos HTML del
Selector.
A continuacin, escribe los nmeros
correspondientes a A, B y C, en ese mismo
orden. La cifra mayor predominar sobre las
menores.
Ejemplo:
Imagnate que tienes las siguientes Reglas
en una Hoja de Estilo:
#idcoco {....}
ul ul li.azul {....}
li.azul {....}
li {....}
La primera Regla es un Selector ID.
La segunda tiene un Selector con una
Clase especfica para el Elemento LI,
cuando ste aparezca en el segundo nivel
de una Lista. Es decir en una Lista
Anidada No Ordenada.
La tercera, tiene un Selector con Clase,
menos especfico.
La ltima tiene un Selector simple.
#idcoco
ul ul li.azul
li.azul
li

A=1
A=0
A=0
A=0

B=0
B=1
B=1
B=0

file:///D|/Manuales/Aprender%20HTML/css/css6.htm (5 of 6) [27/02/2003 16:55:50]

C=0
C=3
C=1
C=1

>>>
>>>
>>>
>>>

100
013
011
001

Cmo crear pginas web. Manual: HTML: CSS: Orden de Cascada

Est clarsimo, no?


Pues vmonos a ver como se sitan las 4
hojas de estilo en un documento HTML.
Pseudo Elementos y Clases
ndice HTML
ndice General
| arriba | Almacn | Archivo | Pgina Principal

De acuerdo

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/css/css6.htm (6 of 6) [27/02/2003 16:55:50]

Cmo crear pginas web. Manual: HTML: CSS: Pseudo Elementos y Pseudo clases

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Pseudo Clases

Declaracin
principios

Son clases ficticias, que no existen en el


HTML, pero pueden utilizarse para dar Estilo.

Los 10
mandamientos

El nico motivo por el que he introducido este


tema, es por lo til que te puede ser con el
Elemento A (ancla de los hipervnculos).
Ya habrs visto multitud de hipervnculos, por
lo que seguro que has observado que los hay
de diferentes colores, subrayados, no
subrayados, y que el color de un vnculo
activo, no es el mismo que el de un vnculo
visitado, etc.

PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Bien, los ejemplos que veremos ahora con el


Ancla, forman parte de las llamadas Pseudo
Classes. Su sintaxis vara un poco, ya que
utilizaremos los dos puntos.
a: link {font-family:
Verdana, Arial, Helvetica;
color: #ff6600; textdecoration: underline}
a: active {font-family:
Verdana, Arial, Helvetica;

file:///D|/Manuales/Aprender%20HTML/css/css5.htm (1 of 4) [27/02/2003 16:55:51]

Cmo crear pginas web. Manual: HTML: CSS: Pseudo Elementos y Pseudo clases

Vuestras
colaboraciones
Sugerencias
SALIDA

color: #ff0000; textdecoration: underline}


a: visited {font-family:
Verdana, Arial, Helvetica;
color: #ff99cc; textdecoration: underline}
a: hover {font-family:
Verdana, Arial, Helvetica;
color: #ff0000; textdecoration: none}
Nota: Por si no lo sabas, hover tiene lugar en el
momento en que sitas el ratn encima del vnculo,
antes de hacer clic. Netscape no lo reconoce, pero si
has definido la decoracin del texto como subrayado,
no pasa nada, ya que el subrayado suele identificarse
con un vnculo.

Este es uno de los cuatro conjuntos de Estilo


que tengo definidos en mi Hoja de Estilo para
los hipervnculos. Dado que en este primer
tipo utilizo como Selector el Elemento A a
secas, para los otros tres conjuntos he
utilizado tres "classes" diferentes:
a.tipob: link { ....... }
a.tipob: active { ..... }
a.tipob: visited { ..... }
a.tipob: hover { ..... }
Lo mismo, pero con otros nombres de "clase"
para los otros dos conjuntos de Reglas para
los vnculos.
Aqu puedes hacer mltiples combinaciones.
Pero ten siempre en cuenta que debes definir
los Valores de las Propiedades de tal
manera, que el visitante pueda identificar de
file:///D|/Manuales/Aprender%20HTML/css/css5.htm (2 of 4) [27/02/2003 16:55:51]

Cmo crear pginas web. Manual: HTML: CSS: Pseudo Elementos y Pseudo clases

forma rpida y sin lugar a dudas que


"aquello" es un hipervnculo. Tambin, por
supuesto, que los diferentes estados por los
que pasa el texto de un vnculo (active,
visited, etc.) sean bien visibles y legibles.
Por supuesto, el fondo de la pgina, Tabla,
Celda, etc., va a determinar los colores que
escojas para tu o tus conjuntos de Estilo para
los hipervnculos.
En el Libro de Estilo hablar un poco ms de
los colores y apariencia de los hipervnculos
de texto.
Como has visto en el ejemplo superior, las
tres Propiedades que utilizamos son la
Fuente de la letra, su tamao, el Color, y la
Decoracin del Texto. Ante cualquier duda
respecto a los Colores, subraya siempre el
texto. As quedar bastante claro que el texto
se trata de un enlace.

Hay mucho ms que hablar sobre las Hojas


de Estilo: Colocacin absoluta, colocacin
relativa, Orden Z, separacin entre lneas,
elementos flotantes, de bloque y bastantes
cosas ms. Como te he dicho al inicio de este
Captulo, lo dejaremos para la Seccin
Avanzando. De todas formas puedes leerte
las especificaciones CSS1 y CSS2 que ya he
mencionado anteriormente.
Ahora veremos el efecto Cascada y como
definir o codificar las cuatro formas de dar
Estilo al documento.
file:///D|/Manuales/Aprender%20HTML/css/css5.htm (3 of 4) [27/02/2003 16:55:51]

Cmo crear pginas web. Manual: HTML: CSS: Pseudo Elementos y Pseudo clases

Vamos?
CSS: Selectores Class y Id
ndice HTML
ndice General
| arriba | Almacn | Archivo | Pgina Principal

Vamos

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/css/css5.htm (4 of 4) [27/02/2003 16:55:51]

Cmo crear pginas web. Manual: HTML: CSS: Selectores Class y Id

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Conceptos bsicos (cont.)

Declaracin
principios

Selectores Class y Id

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML

Te acuerdas de los Atributos Class y Id,


que se repetan prcticamente en casi todos
los Elementos del HTML?. Bien, pues ahora
vers lo tiles que son, especialmente Class.

Class

Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Puedes definir diferentes "Clases" en tu Hoja


de Estilo, con diferentes Declaraciones, y
luego aplicarlas en el documento HTML a
mltiples Elementos.
Con ejemplos lo vers mejor:
El Selector Class va siempre precedido de
un "punto".
.rojo {font-weight: bold; color:
#cc0000}

file:///D|/Manuales/Aprender%20HTML/css/css4.htm (1 of 8) [27/02/2003 16:55:52]

Cmo crear pginas web. Manual: HTML: CSS: Selectores Class y Id

Vuestras
colaboraciones
Sugerencias
SALIDA

La clase ".rojo" define la fuente como negrita


y de color rojizo. Todo Elemento al que
atribuyas la clase "rojo", en el documento
HTML, tendr color rojizo y estar en negrita.
De hecho, la Regla anterior est definida as
en mi Hoja de estilo, y en el ejemplo he
puesto <p class="rojo">.
<p class="rojo">Envame un email</p>
Me <span
class="rojo">gusta</span> el
HTML.
<h4 class="rojo">Ttulo en
rojo</h4>
Envame un e-mail
Me gusta el HTML.

Ttulo en rojo
Si ests utilizando el Explorer, vers los
ejemplos anteriores tal como estn definidos
en el cdigo y con un margen izquierdo, o
sangra de 40 pixels.
En el documento HTML, puedes asignar
varias "clases" a un mismo Elemento. Esto
es lo que he hecho en los ejemplos de arriba
y muchos otros a lo largo de este Manual.
El cdigo real de los ejemplos de arriba es:
<p class="rojo plm">Lo que
sea</p>
file:///D|/Manuales/Aprender%20HTML/css/css4.htm (2 of 8) [27/02/2003 16:55:52]

Cmo crear pginas web. Manual: HTML: CSS: Selectores Class y Id

<p class="plm">Me <span


class="rojo">gusta</span> el
HTML.</p>
<h4 class="rojo plm">Ttulo en
rojo</h4>
Fjate que el Elemento P del primer ejemplo y
el Elemento H4, tienen definidas dos clases,
separadas por un espacio en blanco.
La clase plm, est definida en mi Hoja, para
que deje un margen izquierdo de 40 pixels.
Qu pasa con Netscape?
Bien, al menos con la versin 4.5, si utilizas
ms de una clase, no te reconocer ninguna
de las dos.
Por lo tanto, cuidado. Haz caso de lo que te
he dicho antes. Comprueba los resultados en
diferentes navegadores, aunque tu Hoja est
validada. Luego decide lo que tu quieras.
Advertencia: No utilices nmeros, sobre todo al final de
un nombre de Clase. Netscape probablemente no
reconocer esa clase.

Imagnate la de cosas que puedes hacer


utilizando las Clases con los Elementos DIV y
SPAN. Puedes definir el Estilo de bloques o
secciones enteras de tu documento, con
slo utilizar una Clase, o varias, y el
Elemento DIV.
Por otro lado, dentro de cualquier bloque o
seccin, puedes variar el Estilo de una

file:///D|/Manuales/Aprender%20HTML/css/css4.htm (3 of 8) [27/02/2003 16:55:52]

Cmo crear pginas web. Manual: HTML: CSS: Selectores Class y Id

palabra o frase, mediante el Elemento SPAN


y una Clase, o varias. Todo sin tener que
escribir largas lneas de cdigo, en el propio
documento. No es fabuloso?.
Ms ejemplos:
.rojo {font-weight: bold; font-family:
Arial, Helvetica, sans-serif; color:
#cc0000}
.bold {font-weight: bold; font-family:
Arial, Helvetica, sans-serif}
.pc {font-family: Arial, Helvetica, sansserif; text-align: center}
.plm {font-family: Arial, Helvetica, sansserif; text-align: left; margin-left: 40px}
.norm {font-size: 11pt; font-family: Arial,
Helvetica, sans-serif}
.mini {font-size: 8pt; Font-family: Arial,
Helvetica, sans-serif}
Estas son algunas de las "clases" definidas
en mi Hoja de Estilo. Luego, en el documento
HTML, las utilizo, segn convenga, con
Elementos como P, Hn, DIV, SPAN, LI, etc.

Otra forma de utilizar class


A parte de definir "clases" genricas, como
las de arriba, puedes definir clases referidas
file:///D|/Manuales/Aprender%20HTML/css/css4.htm (4 of 8) [27/02/2003 16:55:52]

Cmo crear pginas web. Manual: HTML: CSS: Selectores Class y Id

a Elementos concretos. Por ejemplo:


p.normal {font-size: 10pt; font-family:
Verdana, Arial}
h1.princi {font-size: 24pt; font-family:
Impact}
Personalmente, utilizo nicamente la forma
genrica.

Id
Este Selector permite asignar una
Declaracin de Estilo a Elemento por
Elemento. Es decir puedes asociar un
Selector ID a un y slo a un Elemento por
documento. Hay que anteponer una
"almohadilla" al nombre del Selector.
Ejemplo:
#especial {font-color: red; background:
blue}
Luego, en el documento HTML, si utilizas
este Selector para el Elemento P, por
ejemplo, ya no podrs volver a utilizarlo,
dentro del mismo documento, para ningn
otro Elemento.
<p id="especial">Slo este
Elemento puede ser
identificado como especial en
este documento.</p>
file:///D|/Manuales/Aprender%20HTML/css/css4.htm (5 of 8) [27/02/2003 16:55:52]

Cmo crear pginas web. Manual: HTML: CSS: Selectores Class y Id

Selectores contextuales
Consisten en una cadena de Selectores
simples separados por un espacio en blanco.
El ltimo Selector de esa cadena es el que
tomar el Estilo especificado en la
Declaracin, pero slo si aparece en el
contexto del Selector o Selectores anteriores
a l en la mencionada cadena.
Con ejemplos lo veremos mejor:
Supn que tenemos definido en la Hoja de
Estilo lo siguiente:
h1{color: blue}
De acuerdo con esa Regla, siempre que
utilice el Elemento H1 en mi documento
HTML, su contenido ser de color azul.
Ahora bien, imagnate que hay determinados
casos en que no quiero que sea azul. Una
forma de "variar" el resultado de H1, sera:
div h1 {color: red}
A la cadena div h1, le llamaremos Selector
Contextual. Lo que esa Regla significa es:
cuando exista el Elemento H1 dentro del
Elemento DIV, H1 ser rojo, en lugar de azul.
En el ejemplo, el Selector Contextual se
compona de dos Selectores simples, pero
puede estar formado por ms de dos:
file:///D|/Manuales/Aprender%20HTML/css/css4.htm (6 of 8) [27/02/2003 16:55:52]

Cmo crear pginas web. Manual: HTML: CSS: Selectores Class y Id

div h2 b {color: red}


El texto contenido por las etiquetas <b></b>
ser de color rojo si se encuentra dentro de
las etiquetas del Elemento H2 y ste, a su
vez, se encuentra dentro del Elemento DIV.
<div>
<h2>Ejemplo de <b>Selector
Contextual</b>, formado por
tres Selectores simples</h2>
</div>
El trmino "Selector Contextual" estara en
negrita y de color rojo.

Puedes agrupar los Selectores Contextuales,


separndolos por una coma:
h1 b, h2 b, h3 b, h1 em, h2 em, h3 em
{color: red}
Seis Selectores Contextuales agrupados. Los
seis Selectores sin agrupar seran:
h1 b {color:red}
h2 b {color:red}
h3 b {color: red}
h1 em {color: red}
h2 em {color: red}
h3 em {color: red}
Como has visto, es ms fcil y ms corto
escribirlos agrupados que sueltos.

file:///D|/Manuales/Aprender%20HTML/css/css4.htm (7 of 8) [27/02/2003 16:55:52]

Cmo crear pginas web. Manual: HTML: CSS: Selectores Class y Id

Cambiemos de pgina, ya!


CSS: Reglas y Agrupacin
ndice HTML
ndice General
| arriba | Almacn | Archivo | Pgina Principal

Vale

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/css/css4.htm (8 of 8) [27/02/2003 16:55:52]

Cmo crear pginas web. Manual: HTML: CSS: Reglas y Agrupacin

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Conceptos bsicos (cont.)

Declaracin
principios

Reglas de las CSS. Agrupacin.

Los 10
mandamientos

Enseguida volvemos con las cuatro formas


de dar Estilo, pero antes se hacen necesarias
algunas definiciones.

PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Reglas
Una hoja de estilo se compone de Reglas.
Las Reglas son, ni ms ni menos, que las
lneas de cdigo que definen el estilo
deseado, siguiendo una sintaxis especfica.

Principios
generales

Regla = Selector + Declaracin(1)

Accesibilidad

(1) Declaracin = Propiedad + Valor

Avanzando

Regla = Selector + Propiedad + Valor

Entrada
Puntos de Vista

Entrada
Colaboraciones

Selector
Una gran mayora de los Selectores,
coinciden con los Elementos del HTML,
que ya hemos visto en este Manual.

Propiedad
file:///D|/Manuales/Aprender%20HTML/css/css3.htm (1 of 5) [27/02/2003 16:55:53]

Cmo crear pginas web. Manual: HTML: CSS: Reglas y Agrupacin

Vuestras
colaboraciones
Sugerencias
SALIDA

Una gran mayora de las Propiedades,


coinciden con los Atributos de los
Elementos del HTML, que tambin hemos
visto.

Valor
Una gran mayora de los valores, coinciden
con los Valores de los diferentes Atributos
de los Elementos del HTML, que tambin
hemos visto.

Sintaxis genrica de las Reglas:


selector {propiedad: valor}
p {font-size: 10pt}
Cada vez que se utilice el Elemento P en el
documento HTML, la fuente tendr un
tamao de 10 puntos.

Nota: Recuerda que el Estilo en Lnea se define con el


Atributo style. En este caso no usaramos los
corchetes, si no las comillas:
<p style="font-size: 10pt">

Agrupacin de Selectores y
Declaraciones
h1,h2,h3,h4 {font-color: blue}
Los Elementos h1 a h4, tendrn color azul.

h6 {font-size: 9pt; font-family:


file:///D|/Manuales/Aprender%20HTML/css/css3.htm (2 of 5) [27/02/2003 16:55:53]

Cmo crear pginas web. Manual: HTML: CSS: Reglas y Agrupacin

Verdana, Arial; color: #ff0000; textalign: center}


El Elemento h6, lo definimos como fuente de 9 puntos,
tipo Verdana o Arial, color rojo y centrado.

Puedes agrupar, tanto los Selectores, como


las Declaraciones.
Es ms sencillo el primer ejemplo, que no
tener que escribir:
h1 {font-color: blue}
h2 {font-color: blue}
h3 {font-color: blue}
h4 {font-color: blue}
Ests de acuerdo, no?. Pues lo mismo con
los otros dos ejemplos.
Fjate que he separado el grupo de
Selectores con una "coma", y el grupo de
Declaraciones con un "punto y coma".
An hay otro sistema de simplificar ms las
Declaraciones, pero no lo incluir aqu para
que no te les. El agrupamiento ya te va a
ahorrar bastante trabajo.
Ms Ejemplos:
body {font-size: 10pt; font-family:Verdana,
Arial, Helvetica; color: black; backgroundcolor: white; margin-top: 0; margin-left: 0}
dt {font-weight: bold; font-size: 10pt; fontfamily: Verdana, Arial, Helvetica}
file:///D|/Manuales/Aprender%20HTML/css/css3.htm (3 of 5) [27/02/2003 16:55:53]

Cmo crear pginas web. Manual: HTML: CSS: Reglas y Agrupacin

dd {font-size: 9pt; font-family: Verdana, Arial


Helvetica}

Herencia de los Valores


Como norma general, un Selector que est
contenido dentro de otro Selector, heredar
los Valores de las Propiedades definidas para
el Selector que lo contiene, a menos que
tenga definidos Valores propios.
Por ejemplo, si defines body {color: red},
todo el texto del documento tendr color rojo,
a menos que definas otro color para
diferentes Elementos, como P, Hn, etc.
Si tienes definida en tu Hoja la siguiente
Regla:
h1 {font-family: Verdana; color: blue},
y en el documento HTML figura la
siguiente lnea de cdigo:
<h1>Esto es lo ms
<em>importante</em> de este
Captulo</h1>
En este caso, la palabra importante, que se
encuentra entre etiquetas del Elemento EM,
para el que NO tienes definido ni tipo de
fuente ni color, tomar los Valores de H1.
Est bastante claro, no?
Hay excepciones, bastante lgicas, como por
file:///D|/Manuales/Aprender%20HTML/css/css3.htm (4 of 5) [27/02/2003 16:55:53]

Cmo crear pginas web. Manual: HTML: CSS: Reglas y Agrupacin

ejemplo las Propiedades referidas a


"mrgenes".

Qu tal, de momento?. Fcil, no?


Elemento STYLE. Conceptos
bsicos 1
ndice HTML
ndice General

Ms o menos

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/css/css3.htm (5 of 5) [27/02/2003 16:55:53]

Cmo crear pginas web. Manual: HTML: CSS: Elemento STYLE. Conceptos bsicos sobre las CSS.

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Elemento STYLE

Declaracin
principios

<style>.....</style>
<!--->
Las etiquetas del Elemento STYLE, se
colocan siempre en la seccin HEAD del
documento y, en su interior, situaremos las
"reglas" de Estilo pertinentes.
He incluido debajo de las etiquetas, los
signos de Comentario, porque, ante la
posibilidad de navegadores que no acepten
esta forma de dar Estilo, se salten su
codificacin y sigan leyendo el resto del
documento.
La apertura de Comentario ir situada justo
despus de la etiqueta de apertura <style>,
y el cierre, justo antes de la etiqueta
</style>. (Igual que el Elemento SCRIPT,
que ya veremos).

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Atributos y Valores
type="tipo de contenido de la hoja">
Lo utilizaremos para especificar el tipo de
lenguaje que utiliza la hoja de estilo. En el
presente caso, utilizaremos "text/css".

file:///D|/Manuales/Aprender%20HTML/css/css2.htm (1 of 4) [27/02/2003 16:55:54]

Cmo crear pginas web. Manual: HTML: CSS: Elemento STYLE. Conceptos bsicos sobre las CSS.

Vuestras
colaboraciones
Sugerencias
SALIDA

media="tipo/s de medio"
Tipos de medio a los que van dirigidas las
hojas de estilo. Los vimos en el Elemento
LINK.

lang, dir y title, comunes a la mayora de


Elementos. Puedes recordarlos en el
Elemento P.

Ya hemos visto el nico Elemento "propio"


del Estilo. Ahora entremos en materia.

Conceptos bsicos de las CSS


Por si no lo sabas, CSS es una abreviatura
de Cascading Style Sheets (Hojas de Estilo
en Cascada). Lo de "cascada" hace
referencia a que unas Hojas tienen
preferencia, o prioridad sobre otras, cual
cascada de aguas cristalinas, que desciende
desde lo alto y va cayendo, ordenadamente,
hasta morir en una balsa, que es el
Documento HTML. (Al menos, as lo veo yo).
Esta prioridad se extiende, tambin, a quien
tiene prioridad sobre el Estilo, el Autor de la
web, o el visitante de la misma.

Dale Estilo a tus pginas


Hay cuatro maneras de darle Estilo a tu web.
file:///D|/Manuales/Aprender%20HTML/css/css2.htm (2 of 4) [27/02/2003 16:55:54]

Cmo crear pginas web. Manual: HTML: CSS: Elemento STYLE. Conceptos bsicos sobre las CSS.

A las cuatro se las suele llamar Hojas de


Estilo, yo no, pero pobre de m, no voy a
discutir sobre eso.

Estilo En lnea (in line). Ya hemos visto


ejemplos en el Manual. Se define dentro
del BODY documento, mediante el
Atributo style., o en la propia lnea de
cdigo en que figure el Elemento al que
queremos aplicar un estilo determinado.
Estilo Global, Empotrado, o
Incrustado. Afecta al documento en
cuestin y se define, mediante el
Elemento STYLE, en la seccin HEAD
del documento.
Hoja de Estilo Vinculada, mediante el
Elemento LINK. Es una Hoja externa al
documento.
Hoja de Estilo Importada, mediante la
instruccin @import. Es una Hoja
externa al documento. La instruccin de
llamada a la hoja se sita entre las
etiquetas de STYLE, dentro de la
seccin HEAD del documento.

Vemos, pues, que tenemos dos formas que


yo llamo internas de definir Estilo (En lnea y
Global) y dos formas externas (Hoja
Vinculada y Hoja Importada), a las que se
llama desde el documento HTML.

Nota: Como ya te dije al comienzo de este Manual, he


estado utilizando diversas formas de definir estilo en
mis pginas. Algunas veces incluso he utilizado
Elementos o Atributos Desaprobados para que, si
mirabas el cdigo fuente de mis pginas, pudiera ver
file:///D|/Manuales/Aprender%20HTML/css/css2.htm (3 of 4) [27/02/2003 16:55:54]

Cmo crear pginas web. Manual: HTML: CSS: Elemento STYLE. Conceptos bsicos sobre las CSS.

ejemplos de cosas que puedes encontrarte cuando


navegues, o como ejemplos de Elementos que hemos
ido describiendo, aunque estuvieran Desaprobados en
favor de las Hojas de Estilo.
Dado que ahora vas a aprender cmo definir Hojas de
Estilo, ya slo voy a utilizar mi Hoja de Estilo y
Elementos y formas correctas, para dar estilo a este
Captulo, los siguientes, y al resto de WebAprendiz.
Hagamos las cosas bien, de una vez.

Supongo que ya has asimilado lo anterior, as


que cambiamos de pgina.
CSS: Introduccin
ndice HTML
ndice General

Lo que tu digas

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/css/css2.htm (4 of 4) [27/02/2003 16:55:54]

Cmo crear pginas web. Manual: HTML: LINKS: Elemento LINK

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Elemento LINK

Declaracin
principios

<link ..............>
Este Elemento define un hipervnculo. Slo
puede situarse en la seccin HEAD del
documento, y puede figurar cuantas veces se
desee.
Proporciona informacin sobre la relacin
existente entre el documento activo y otros
documentos o recursos.
La etiqueta de cierre est prohibida. Es uno
de los Elementos que se llaman "vacos", al
igual que vimos con el Elemento BR, por
ejemplo.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Atributos
media
Este Atributo especifica el tipo o tipos de
"medios" a los que va dirigidos una
informacin referente a "estilo". Por ejemplo,
la pantalla, la impresora, televisin, etc. El
valor por defecto es la pantalla.

file:///D|/Manuales/Aprender%20HTML/links/links6.htm (1 of 5) [27/02/2003 16:55:55]

Cmo crear pginas web. Manual: HTML: LINKS: Elemento LINK

Vuestras
colaboraciones
Sugerencias
SALIDA

id, class, lang, dir, title, style, href,


hreflang, type, rel, rev, target, charset y
otros relacionados con "eventos" o "sucesos".
Para los de sucesos, consulta el Captulo
SCRIPT. El resto ya se han comentado en el
Elemento P y el Elemento A.

Valores
media="tipo de medios"
Los Valores que puede tomar este Atributo
son, hoy por hoy, los siguientes:
screen

Para pantallas de ordenador.


tty

Teletipos, terminales o aparatos porttiles


con capacidades de visualizacin.
tv

Destinado a aparatos tipo Televisin, de baja


resolucin, color y en los que no se puede
hacer "scroll", es decir, desplazar
verticalmente una pgina que supere el alto
de pantalla.
projection

Para proyectores.
handheld

Destinado a aparatos de mano, pequeos,


monocromos y con limitada anchura de
banda.
print

Para imprimir y para documentos que


pueden visualizarse en pantalla en el modo
"vista previa", es decir la previsualizacin
antes de imprimir.
braille

Destinado a mecanismos tctiles de lenguaje


braille.
file:///D|/Manuales/Aprender%20HTML/links/links6.htm (2 of 5) [27/02/2003 16:55:55]

Cmo crear pginas web. Manual: HTML: LINKS: Elemento LINK

aural

Para sintetizadores de voz.


all

Apropiado para todos los mecanismos.

Veremos la utilidad de este Atributo, cuando


estudiemos las famosas Hojas de Estilo.

La informacin que facilita el Elemento LINK,


va bsicamente dirigida a los navegadores,
Servidores, Motores de bsqueda, etc.
El ejemplo ms claro de este Elemento lo
veremos, como te he dicho, con las Hojas de
Estilo.
Otras posibilidades son, por ejemplo, para
informar a los motores de bsqueda de:
El link a la primera pgina de una serie
de documentos relacionados.
Links a versiones alternativas del
documento en diferentes idiomas.
Links a diferentes versiones del atributo
media. Por ejemplo un link para la
informacin para imprimir el documento,
y otro link que conduzca a la informacin
para la presentacin del documento en
pantalla.
Por ejemplo:
<head>
<title>WebAprendiz. Manual HTML
en castellano</title>
<link title="WebAprendiz. HTML
file:///D|/Manuales/Aprender%20HTML/links/links6.htm (3 of 5) [27/02/2003 16:55:55]

Cmo crear pginas web. Manual: HTML: LINKS: Elemento LINK

Manual in English"
type=text/html hreflang="en"
href="../ingles/html/intro.htm">
</head>
En este ejemplo, el documento contiene o
inicia un Manual de HTML en castellano.
En la seccin HEAD, y a travs del elemento
LINK, al que titulamos "WebAprendiz. HTML
Manual in English", estamos informando de
que en el URL href="../ingles/html/intro.htm",
existe la versin en lengua inglesa y que se
trata de un documento de texto en html.
Te recuerdo que siempre hay que dejar un
espacio en blanco cuando se utilizan varios
Atributos dentro de la misma etiqueta.

Bueno, de momento es suficiente para este


Elemento. Ya veremos ms cosas en otros
sitios.
Ahora vemos el cortsimo Elemento BASE y
terminamos el Captulo de Hyperlinks, links,
hipervnculos, vnculos.
Cambiamos de pgina?
Ejemplos de links
ndice HTML
ndice General

file:///D|/Manuales/Aprender%20HTML/links/links6.htm (4 of 5) [27/02/2003 16:55:55]

S, por favor

Cmo crear pginas web. Manual: HTML: LINKS: Elemento LINK

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/links/links6.htm (5 of 5) [27/02/2003 16:55:55]

Cmo crear pginas web. Manual: HTML: LINKS: Ejemplos

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

estudio/Cmo crear tu pgina web: Paso a


Paso

Otros ejemplos de Hipervnculos

Hipervnculo con ttulo


Podemos usar el Atributo "title" para aadir
informacin referente a un vnculo.
<Trataremos sobre las CSS en el
Captulo: <a href="style.htm"
title="Ir a Hojas de
Estilo">Hojas de Estilo</a>
Trataremos sobre las CSS en el
Captulo:Hojas de Estilo
Si sealas el hipervnculo con el ratn, vers el
ttulo asignado.

Entrada
Puntos de Vista

Entrada
Colaboraciones

Hipervnculo con name y id


En la <a name="intro"
id="intro"
href="introduccion.htm"></a>

file:///D|/Manuales/Aprender%20HTML/links/links5.htm (1 of 4) [27/02/2003 16:55:55]

Cmo crear pginas web. Manual: HTML: LINKS: Ejemplos

Vuestras
colaboraciones

Introduccin a este Captulo,


vimos que ...

Sugerencias

En la Introduccin a este
Captulo, vimos que...

SALIDA
Fjate en el cdigo. Si queremos podemos usar los
Atributos name y id en un vnculo, pero deben tener
el mismo nombre, ya que ambos atributos comparten
el mismo "espacio de denominacin".
Por cierto, el Atributo "name" puede contener
Caracteres Especiales. El Atributo "id" no puede.

Hipervnculo con target


Vamos a ver un ejemplo de hipervnculo, que
al activarlo nos abrir una nueva ventana.
ventana
<a target="_blank"
href="ventana.htm">ventana</a>

Hipervnculos de Imagen
Aunque todava no hayamos visto las
imgenes, aqu va un ejemplo, para que
sepas que tambin existen los vnculos cuya
Lanzadera es una imagen.

file:///D|/Manuales/Aprender%20HTML/links/links5.htm (2 of 4) [27/02/2003 16:55:55]

Cmo crear pginas web. Manual: HTML: LINKS: Ejemplos

Esto es un hipervnculo
Esto es otro hipervnculo
de imagen. Si lo activas de imagen. Si lo activas
te llevar al inicio de este te llevar al inicio de este
apartado.
apartado.
<a
<a
href="#hiperimag"><img href="#hiperimag"><img
src="bebida5.gif"></a> src="archivo.gif"></a>

Fjate que las dos imgenes conducen a un


Marcador, que es el titulito de este apartado:
"Hipervnculos de Imagen".
La Lanzadera, en este caso, es una imagen
en formato gif, en lugar de un texto como
habamos visto hasta ahora.
Por lo dems nada vara. Slo la Lanzadera.
No te fijes en el cdigo del Elemento IMG, ya
lo veremos ms adelante.
Una imagen tambin puede ser el destino de
un hipervnculo:
<a href="../images/yo.gif">Mi
retrato</a>
Activa el hipervnculo y vers mi cara, claro. Para regresar
tendrs que usar el botn ATRS de tu navegador. Sorry.

Mi retrato
Fjate que esto ha sido un enlace a una imagen pura y
dura. No a una pgina que contiene una imagen, sino a
la imagen misma, que se encuentra en un fichero. Por
eso has tenido que usar el botn "Atrs" para regresar.

Hipervnculos de Correo Electrnico


file:///D|/Manuales/Aprender%20HTML/links/links5.htm (3 of 4) [27/02/2003 16:55:55]

Cmo crear pginas web. Manual: HTML: LINKS: Ejemplos

Se trata de un vnculo normal y corriente,


slo que el destino es una direccin de email:
<a href="mailto:direccin de
correo">Mndame un e-mail</a>
Fjate que hay que usar la expresin mailto:
en el valor del atributo.
Tambin puedes usar una imagen como
Lanzadera, es decir, en lugar del texto
"Mndame un e-mail".

Bueno, acabemos este Captulo de una vez!


Marcadores pg. 2
ndice HTML
ndice General

Totalmente de acuerdo

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/links/links5.htm (4 of 4) [27/02/2003 16:55:55]

Cmo crear pginas web. Manual: HTML: LINKS: Ejemplo ventana

HOLA !. ESTO ES UNA NUEVA VENTANA DE EJEMPLO, UTILIZANDO EL HTML.

HAY OTRAS FORMAS DE ABRIR VENTANAS, POR EJEMPLO CON JAVASCRIPT.


PUEDES DEFINIR EL TAMAO DE LA VENTANA; SI DESEAS INCLUIR ELEMENTOS
DE EXPLORACIN; BOTONES, ETC. ETC.
PERO EL JAVASCRIPT TAN SLO LO MENCIONAREMOS EN ESTE MANUAL. YA TE
INCLUIR EJEMPLOS DE SCRIPTS EN ALGUNA OTRA PARTE DE LA SECCIN
ESTUDIO.
YA VEREMOS. SUPONGO. DEPENDE. TAL VEZ. MAYBE. PERHAPS. PEUT TRE ?
BUENO, VOLVAMOS A LA SERIEDAD DEL MANUAL

Al hacer click sobre CERRAR, si utilizas el Explorer, te aparecer un "alert" que te


pedir confirmacin de cierre. Si utilizas Netscape, se cerrar sin confirmacin.
Cerrar

Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4


fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/links/ventana.htm [27/02/2003 16:55:56]

Cmo crear pginas web. Manual: HTML: Las Imgenes: p1: Intro: IMG

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Imgenes

Declaracin
principios

Las imgenes enriquecen y dan colorido a las


pginas y pueden servir de ilustracin al
contenido de un documento. A todos nos
gusta usarlas. Segn el tipo de web que
hagas, las imgenes se convertirn en un
aspecto poderoso y muy importante para tus
documentos. Y, tambin, segn el tipo de
web que hagas, podrs prcticamente
prescindir de ellas. TODO DEPENDE.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada

Slo ten en cuenta esto: No utilices imgenes


simplemente porque otros las utilizan, sino
porque representan un valor aadido a tu
contenido. Ya sea ste un valor ilustrativo,
complementario, de presentacin de
producto, publicitario, etc. Pero nunca por un
simple valor decorativo. (Es slo una opinin,
pero hazme caso).

Puntos de Vista

Entrada
Colaboraciones

En el Libro de Estilo y en la seccin


Avanzando, tratar ms extensamente el
tema de las imgenes. Slo recuerda, que
una imagen puede valer ms que mil
palabras...en tiempo de carga del documento.

file:///D|/Manuales/Aprender%20HTML/imagenes/imagen1.htm (1 of 6) [27/02/2003 16:55:56]

Imgenes I
6 DIN-A4
Imgenes II
4 DIN-A4

Cmo crear pginas web. Manual: HTML: Las Imgenes: p1: Intro: IMG

Vuestras
colaboraciones
Sugerencias
SALIDA

Las posicin de las imgenes dentro de un


documento se puede llevar a cabo travs de
Elementos tradicionales del HTML o a travs
de Hojas de Estilo.
Por supuesto, una imagen tambin puede
estar situada dentro de una Tabla.
En cuanto a la forma de incluir una imagen
en un documento, existen dos posibilidades:
a travs del Elemento IMG o utilizando el
Elemento OBJECT, que veremos ms
adelante.
Veamos en este Captulo la forma tradicional
de tratar las imgenes.

Elemento IMG
<img..........>
Este es el elemento principal para definir una
imagen. Es de los llamados elementos
"vacos", al igual que BR y META, por
ejemplo.
La etiqueta de cierre est prohibida.

Atributos principales
src
Sirve para especificar la localizacin del
archivo imagen. Este Atributo no se puede
omitir, o no hay imagen, claro.

alt
file:///D|/Manuales/Aprender%20HTML/imagenes/imagen1.htm (2 of 6) [27/02/2003 16:55:56]

Cmo crear pginas web. Manual: HTML: Las Imgenes: p1: Intro: IMG

Sirve para incluir un texto alternativo que


describe la imagen. Considerado de uso
obligatorio.

longdesc
Especifica un vnculo que conduce a una
amplia descripcin de la imagen, sirviendo
de complemento al atributo anterior.

height
Especifica la altura de la imagen.
Considralo obligatorio.

width
Especifica la anchura de la imagen.
Considralo tambin de uso obligado.

border
Sirve para indicar el grosor del borde
alrededor de la imagen. Para ti, obligatorio
(con valor "0").

name
Se utiliza para asignarle un nombre, para
que pueda servir de referencia en las Hojas
de Estilo y los scripts.

align
Se utiliza para especificar la alineacin de la
imagen con respecto al texto que la rodea.

hspace
Especifica el nmero de espacios en blanco
que existirn a la izquierda y a la derecha
de la imagen. Como si fuera un margen
invisible. Crea espacio horizontal.

vspace
Igual que el caso anterior, pero referido al
espacio vertical. Es decir, nmero de
espacios en blanco por encima y por debajo
de la imagen.

ismap
Se utiliza en mapas de imagen del lado del
Servidor. No lo veremos en este Manual.

usemap
Consiste en un URL que asocia un mapa de
file:///D|/Manuales/Aprender%20HTML/imagenes/imagen1.htm (3 of 6) [27/02/2003 16:55:56]

Cmo crear pginas web. Manual: HTML: Las Imgenes: p1: Intro: IMG

imagen con un elemento. Se utiliza en


mapas de imagen del lado del cliente.

id, class, lang, dir, title, y los referidos a


"eventos". Ya han sido descritos en
anteriores Elementos. Si tienes dudas repasa
el Elemento P. Los relativos a eventos o
sucesos los encontrars en el Captulo
SCRIPT.

Valores
scr="URL"
Es la direccin de la imagen. Por ejemplo: "casa.gif".

alt="texto"
Si posas tu ratn sobre la palabra "webaprendiz" o
sobre el logo, ambos situados en la barra superior de
esta pgina, podrs visualizar un "alt". Deberemos
usarlo siempre, para facilitar la Accesibilidad a
personas discapacitadas y las que puedan tener la
opcin de grficos desactivada.

longdesc="URL"
Conduce a una descripcin ms amplia de la imagen.
Se suele utilizar para explicar el contenido de un mapa
de imagen, de una forma ms detallada. Es
especialmente importante en el caso de mapas de
imagen del lado del Servidor. No veremos este tema.

height="pixels" width="pixels"
Definen el tamao de la imagen. Es muy conveniente
utilizarlos para facilitar la velocidad de presentacin(1)
en pantalla de un documento, una vez cargado. Nunca
hay que utilizarlos para variar el tamao de la imagen
al presentarla en pantalla.

border="nmero"
Define el grosor del borde alrededor de la imagen. Si
no deseamos ningn borde, deberemos igualmente
file:///D|/Manuales/Aprender%20HTML/imagenes/imagen1.htm (4 of 6) [27/02/2003 16:55:57]

Cmo crear pginas web. Manual: HTML: Las Imgenes: p1: Intro: IMG

utilizar este Atributo y asignarle el valor "0" cero. De lo


contrario, si la imagen es una Lanzadera de vnculo,
aparecer automticamente un borde no deseado, del
mismo color que tengamos definido para vnculos.

align="left, right, top, middle, bottom"


A pesar de que ya hemos visto este Atributo
anteriormente, volver a utilizarlo en este Captulo,
dada la importancia de la alineacin texto-imagen.

hspace="nmero" vspace="nmero"
Crean como un margen invisible alrededor de la
imagen. Pueden utilizarse por separado. Es decir,
puede que slo nos interese dejar espacio a la
izquierda y derecha o, por el contrario, slo por encima
y por debajo de la imagen.
Cada uno de ellos acta por pares, es decir, si
utilizamos hspace, el espacio se generar tanto a la
izquierda como a la derecha de la imagen. Lo mismo
ocurre en el caso de espacio vertical.

Veamos ms cosas sobre imgenes en la


pgina siguiente.
Los Colores
ndice HTML
ndice General

Vale

Enlaces de esta pgina:


Velocidad de Presentacin
| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/imagenes/imagen1.htm (5 of 6) [27/02/2003 16:55:57]

Cmo crear pginas web. Manual: HTML: Las Imgenes: p1: Intro: IMG

file:///D|/Manuales/Aprender%20HTML/imagenes/imagen1.htm (6 of 6) [27/02/2003 16:55:57]

Cmo crear pginas web. Manual: HTML: Los Colores

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Colores

Declaracin
principios

Mucho habra que hablar sobre la Teora del


Color, sus Categoras y Propiedades, pero
voy a dejar todo esto para el Libro de Estilo, y
aqu slo veremos el aspecto mecnico del
tema.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML

Si te paseas por la Internet y te fijas en el


Cdigo fuente de los documentos, tal y como
te dije que hicieras, te puedes encontrar tres
formas distintas de definir los colores:

Libro de Estilo

Principios
generales

Por un nombre de color


Por su cdigo hexadecimal
Por su valor RGB

Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

El color por su nombre.


Existen 16 nombres de colores que podemos
utilizar directamente en nuestros
documentos. Es decir, existen 16 casos en
los que podemos llamar a los colores por su
nombre. En ingls, claro.

file:///D|/Manuales/Aprender%20HTML/colores/color1.htm (1 of 4) [27/02/2003 16:55:57]

Captulo colores
2 DIN-A4

Cmo crear pginas web. Manual: HTML: Los Colores

Vuestras
colaboraciones

Nada ms que decir aqu. Ms abajo


encontrars una tabla con esos 16 colores y
su equivalencia en hexadecimal y RGB.

Sugerencias
SALIDA
Cdigo hexadecimal
No te explicar aqu como se forman esos
cdigos. Como te he dicho ya lo vers en el
Libro de Estilo o en la seccin Avanzando.
Slo te dir que estn formados por letras o
nmeros o por nmeros y letras, con un total
de 6 caracteres, a los que se antepone una
almohadilla #.
Este es el cdigo que ms se utiliza para
definir los colores.

Valores RGB
Red, Green, Blue. Rojo, Verde, Azul.
Aqu definimos los diferentes colores, por la
proporcin que tiene de cada uno de esos
tres.
La proporcin de cada uno de esos tres
colores consta de tres dgitos, separados por
una coma, y la definicin se pone dentro de
un parntesis: (RRR,GGG,BBB).

Black
"#000000" (000,000,000)
Silver "#C0C0C0" (192,192,192)
Gray
"#808080" (128,128,128)
White
"#FFFFFF" (255,255,255)
Maroon "#800000" (128,000,000)
Red
"#FF0000" (255,000,000)
file:///D|/Manuales/Aprender%20HTML/colores/color1.htm (2 of 4) [27/02/2003 16:55:57]

Cmo crear pginas web. Manual: HTML: Los Colores

Purple
Fuchsia
Green
Lime
Olive
Yellow
Navy
Blue
Teal
Aqua

"#800080"
"#FF00FF"
"#008000"
"#00FF00"
"#808000"
"#FFFF00"
"#000080"
"#0000FF"
"#008080"
"#00FFFF"

(128,000,128)
(255,000,255)
(000,128,000)
(000,255,000)
(128,128,000)
(255,255,000)
(000,000,128)
(000,000,255)
(000,128,128)
(000,255,255)

En los valores RGB, los tres 000 (ceros),


pueden reducirse a un solo 0 (cero).
(000,128,000) = (0,128,0).
En los cdigos hexadecimales, puedes
utilizar letras maysculas o minsculas.
Puedes utilizar indistintamente los cdigos
hexadecimales o los valores RGB.

Otras cosas
Cosas que slo mencionar:

Utiliza colores seguros. En el men Al


grano del Almacn, tienes dos links de
colores seguros a tu disposicin.

Cuidado con las combinaciones de


colores de Fuentes y del fondo de
pantalla.

file:///D|/Manuales/Aprender%20HTML/colores/color1.htm (3 of 4) [27/02/2003 16:55:57]

Cmo crear pginas web. Manual: HTML: Los Colores

Aunque se va a solucionar en un futuro


prximo, hoy por hoy los colores
definidos en la etiqueta de apertura de
BODY; los definidos con FONT, y con
bgcolor, que ya veremos en las Tablas,
se ven diferentes segn el tipo de
plataforma utilizada: Windows, Macs,
paneles LCd, etc.

Bueno, ya vale de colores. Veamos las


Imgenes y despus pasaremos a cosas
realmente serias.
Qu te parece?
FUENTES: Orientacin y
espacios
ndice HTML
ndice General

Qu me va a parecer!

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/colores/color1.htm (4 of 4) [27/02/2003 16:55:57]

Cmo crear pginas web. Manual: HTML: Fuentes: Orientacin y espacio

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Orientacin de las letras

Declaracin
principios

Con la orientacin de las letras se pueden


conseguir efectos bastante impactantes. Por
supuesto, todo depende del tipo de web que
ests haciendo, y de lo que quieras transmitir
y cmo lo quieras transmitir al visitante.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales

El texto horizontal representa estabilidad,


facilidad de lectura, etc., y podemos decir que
es "esttico".
El texto vertical, hacia atrs, en espiral,
formando figuras, etc., presenta un efecto
ms impactante, llama la atencin y puede
parecer que est vivo.

Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

La Orientacin de los tipos de letras puede


dar sensacin de movimiento, o hacer que el
visitante dirija su mirada directamente hacia
ese punto.
El cuerpo de texto deber ser, por supuesto
horizontal. Creo que sera bastante absurdo,
incmodo y contraproducente, si en esta web
utilizara diferentes orientaciones en mi texto.

file:///D|/Manuales/Aprender%20HTML/fuentes/fuentes2.htm (1 of 6) [27/02/2003 16:55:58]

Cmo crear pginas web. Manual: HTML: Fuentes: Orientacin y espacio

Vuestras
colaboraciones
Sugerencias
SALIDA

Con HTML puro y duro, no podrs obtener


orientaciones de letra distintas de la
horizontal, pero a travs de las Hojas de
Estilo y del DHTML, del que ya te hablar
algn da, si podrs variar la orientacin de
las letras.

Espacio entre lneas de texto


A travs de las Hojas de Estilo, tambin
podrs determinar el espacio entre lneas, la
altura de lnea (line height), si es que deseas
variar la altura predeterminada.
Lo "normal", es que el espacio entre lneas
sea muy similar al tamao de las Fuentes
utilizadas.

Este prrafo lo estoy escribiendo con


Times New Roman, y su tamao lo
he definido de 14 puntos. Si te fijas
en el espacio entre las lneas, vers
que es muy parecido al tamao que
tienen las letras. Su legibilidad es
buena.
Este otro, utiliza el mismo tipo de
Fuente, pero he reducido la altura
entra las lneas. Como vers, su
legibilidad ha variado
sensiblemente, especialmente si las
lneas fueran ms largas y ocuparan
file:///D|/Manuales/Aprender%20HTML/fuentes/fuentes2.htm (2 of 6) [27/02/2003 16:55:58]

Cmo crear pginas web. Manual: HTML: Fuentes: Orientacin y espacio

todo el ancho de pantalla. Pero de


eso ya hablaremos.
En determinadas ocasiones, para
textos muy, muy cortos, puedes
hacer lo contrario. Pero piensa que
todos los "efectos especiales", sean
del tipo que sean, impactan pero
tambin acaban cansando. Recuerda
uno de los Principios Bsicos de la
versin 1.0 de WebAprendiz: Lo
simple es casi siempre lo mejor.

Para estos ejemplos, he utilizado el "estilo en


file:///D|/Manuales/Aprender%20HTML/fuentes/fuentes2.htm (3 of 6) [27/02/2003 16:55:58]

Cmo crear pginas web. Manual: HTML: Fuentes: Orientacin y espacio

lnea", definiendo la altura de lnea (lineheight") a travs del Atributo style del
Elemento P.
Sin embargo, como te vengo diciendo en
todo el Manual, es mejor definir el estilo a
travs de las Hojas de Estilo, que por algo se
llaman as.

Espacio entre las letras


Para terminar, dos palabras sobre el espacio
entre letras.

Aqu he variado el espaciado entre


letras. La Fuente es la misma Times
New Roman, 14pt, espacio de 1px
entre las letras.

WebAprendiz
Existen Familias de Fuentes en las que de
por s, presentan o aparentan mayor o
menor espacio entre letras. Compara las dos
siguientes:
Este prrafo est escrito con Times New Roman.
Tamao de letra de 12pt. No se ha alterado ninguna
otra caracterstica.
Este otro est escrito en Verdana. Tamao de
10pt. Tampoco se ha alterado ninguna otra
caracterstica.

file:///D|/Manuales/Aprender%20HTML/fuentes/fuentes2.htm (4 of 6) [27/02/2003 16:55:58]

Cmo crear pginas web. Manual: HTML: Fuentes: Orientacin y espacio

Suponiendo que tengas instaladas ambas


Fuentes, podrs observar una notable
diferencia entre ambos ejemplos. No te
parece que Verdana tiene mayor espacio
entre letras?
Verdana, por otro lado, presenta unas letras
ms redondeadas, ms tpico de la Categora
Sans-serif.
Times New Roman, por otro lado, aparenta
una menor distancia entre letras y presenta la
serifa tpica de la Categora Serif.
Por supuesto cada Familia es diferente, y no
podemos generalizar.
Si no variamos el espaciado entre letras ni la
altura de lnea, sern el tamao y la
Categora de la Fuente, junto con la longitud
de las lneas, color de la Fuente y del fondo
de pgina, los factores que influirn en la
legibilidad de nuestros textos.
Pero todo esto ya lo veremos en El Libro de
Estilo.

Pongamos un poco de colorido en nuestra


pantalla.
Tipos de FUENTES
ndice HTML
ndice General
file:///D|/Manuales/Aprender%20HTML/fuentes/fuentes2.htm (5 of 6) [27/02/2003 16:55:58]

Me parece perfecto

Cmo crear pginas web. Manual: HTML: Fuentes: Orientacin y espacio

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/fuentes/fuentes2.htm (6 of 6) [27/02/2003 16:55:58]

Cmo crear pginas web. Manual: HTML: Fuentes: Cetogorias, familias, estilos

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Las Fuentes y el texto

Declaracin
principios

Ya vimos el Elemento FONT, con sus


respectivos Atributos y los Valores de stos.
Volveremos a tocar este Elemento y muchos
otros, cuando estudiemos las Hojas de Estilo.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Slo un breve resumen sobre las Fuentes, ya


que si tienes un programa de texto en tu
ordenador, ya habrs utilizado diferentes
clases de Fuentes.
Podemos agrupar las caractersticas de las
Fuentes en tres grupos:

Las Categoras
Las Familias
Los Estilos

Entrada
Puntos de Vista

Entrada
Colaboraciones

Categoras
Serif
Es un grupo que se caracteriza por "las
serifas", esos trazos que existen en los

file:///D|/Manuales/Aprender%20HTML/fuentes/fuentes1.htm (1 of 6) [27/02/2003 16:55:59]

Fuentes
5 DIN-A4

Cmo crear pginas web. Manual: HTML: Fuentes: Cetogorias, familias, estilos

Vuestras
colaboraciones
Sugerencias
SALIDA

extremos de las letras: F

Sans-serif
No poseen las serifas a que hemos aludido.

Monoespacio
Ya hemos visto el efecto monoespacio en el
Captulo de Texto. Cada letra ocupa el
mismo espacio que cualquier otra.

Script
Imitan la escritura a mano.

Fantasa
Se consideran decorativas. Utilizan diseos
especiales como, puntos, trazos, lazos, etc.

Familias
Se utilizan para nombrar a lo que
normalmente solemos llamar tipo de letra.
Por ejemplo: Verdana, Times New Roman,
Arial, etc.

Estilos
Dentro de cada Familia, pueden existir
diferentes Estilos. Los nombres pueden variar
segn la Familia, pero bsicamente tenemos:
Roman, Regular, Cursiva, Negrita, Negrita
Cursiva y Oblicua
A efectos prcticos, considera que Roman y
Regular son lo mismo, slo que en alguna
Familia se usa el trmino "Roman" y en otras
se usa "Regular".
file:///D|/Manuales/Aprender%20HTML/fuentes/fuentes1.htm (2 of 6) [27/02/2003 16:55:59]

Cmo crear pginas web. Manual: HTML: Fuentes: Cetogorias, familias, estilos

Cursiva y Oblicua tambin podemos


igualarlas, en la prctica.

Comentarios
Con respecto a las Categoras, a excepcin
de ocasiones muy concretas, (ttulos, diseos
impactantes, etc.) la eleccin para el cuerpo
de texto normal de tu web, estar entre
SERIF y SANS-SERIF.
Este tema lo trataremos ms a fondo en el
Libro de Estilo. De todas formas tiene mucho
que ver con el gusto personal y con la mayor
o menor facilidad de lectura de uno u otro
tipo.
Esto es un ejemplo de Categora Serif. He usado Times
New Roman, con un tamao de 12pt.
Este es un ejemplo con Century School Book y tamao
de 12 pt.
Este es un ejemplo con Arial y tamao de 12pt.
La Categora es Sans-serif.
Este es un ejemplo con Verdana y un
tamao de 12pt.

Pero, qu ocurre si los visitantes de tu web


no tienen instalado el tipo de Fuente que tu
has elegido para tu texto?
Hay varias soluciones que tan slo apuntar:
file:///D|/Manuales/Aprender%20HTML/fuentes/fuentes1.htm (3 of 6) [27/02/2003 16:55:59]

Cmo crear pginas web. Manual: HTML: Fuentes: Cetogorias, familias, estilos

Definir siempre varias fuentes.


Si te has fijado en mi cdigo, normalmente
hago una de estas dos definiciones:
Verdana, Arial, Helvetica
Verdana, Arial, Helvetica, sans-serif
Si el navegador no encuentra la primera
instalada, buscar la segunda, etc.
En el segundo caso, si no encuentra ninguna
de las tres primeras, escoger una que sea
de la Categora Sans-serif.
Arial, por ejemplo es tpica de Windows. En
cambio Helvtica es tpica de Makintosh.
Verdana puede que est instalada en ambos,
pero, por si acaso, pongo sans-serif, que es
el tipo que me gusta para texto puro y duro.
Incrustar fuentes.
Existe la posibilidad de incrustar fuentes
(embedded fonts). El tipo de fuente se carga
automticamente en el ordenador del
visitante.
En Explorer, el formato de fuente que se
utiliza para esos casos se denomina
OpenType. Y Netscape utiliza una tecnologa
llamada TrueDoc.
Que sepas que existe esa posibilidad, pero
no hablar de ella aqu.
Para ttulos cortos, Logos y el nombre de
la web.
En esos casos, si realmente deseas usar una
letra un poco especial, poco comn, y quieres
asegurarte de que tus visitantes vern ese
Ttulo, o eso Logo, tal y como t lo has
file:///D|/Manuales/Aprender%20HTML/fuentes/fuentes1.htm (4 of 6) [27/02/2003 16:55:59]

Cmo crear pginas web. Manual: HTML: Fuentes: Cetogorias, familias, estilos

concebido, entonces y slo entonces, puedes


utilizar una imagen en lugar de texto.
Algunos consideran que el utilizar una
imagen, cuando puede ser sustituida por
texto, es un pecado mortal. Y tienen bastante
razn de momento si, por otro lado, se
colocan otras muchas imgenes en el mismo
documento.
Esto tiene que ver con la velocidad de carga
de los documentos, ancho de banda,
conexin telefnica, tarifa plana, etc., etc., de
lo que ya hablar en el Libro de Estilo y en
Puntos de Vista.
Pero todos pecamos. Si te fijas vers que el
nombre de esta web y la frase "tu web paso a
paso", son imgenes en lugar de texto. Y el
men principal de la entrada en WebAprendiz
es un mapa de imagen.

Ya casi hemos acabado, pero no alarguemos


ms esta pgina.

Vmonos!
LINKS: Elemento BASE
ndice HTML
ndice General

file:///D|/Manuales/Aprender%20HTML/fuentes/fuentes1.htm (5 of 6) [27/02/2003 16:55:59]

Nos vamos

Cmo crear pginas web. Manual: HTML: Fuentes: Cetogorias, familias, estilos

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/fuentes/fuentes1.htm (6 of 6) [27/02/2003 16:55:59]

Cmo crear pginas web. Manual: HTML: LINKS: Elemento BASE

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML

estudio/Cmo crear tu pgina web: Paso a Paso

Elemento BASE
<base ............>
Este Elemento slo puede figurar en la seccin HEAD del
documento, y antes de cualquier otro Elemento que haga
referencia a una fuente externa. Es decir, inmediatamente
despus del elemento TITLE.
Sirve para definir ubicaciones Absolutas, en base a las
cuales, se resolvern las URL Relativas que se encuentren en
ese documento.
La etiqueta de cierre est prohibida.

Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Atributos y Valores
href
Este Atributo especifica un URL Absoluto, que servir de
base de referencia, para resolver los URL Relativos que haya
en el documento.

target. Ya lo hemos visto en el Elemento A.

Entrada

Este Elemento es opcional. Es decir, no hace falta


Colaboraciones especificarlo ya que, por defecto, los navegadores toman
como URL base, el del propio documento.
Vuestras
colaboraciones En un documento normal de html, el orden de preferencia para
determinar la base de los URL es el siguiente:
file:///D|/Manuales/Aprender%20HTML/links/links7.htm (1 of 3) [27/02/2003 16:56:00]

Cmo crear pginas web. Manual: HTML: LINKS: Elemento BASE

Sugerencias
SALIDA

1. El indicado por el Elemento BASE, si existe.


2. El que pueda existir como dato en la etiqueta del
Elemento META, que ya vimos.
3. Por defecto, el del propio documento.

Si recuerdas cuando hablbamos de vnculos Relativos,


decamos que haba que poner ../ esto o seguir un camino de
Directorios como manual/html/intro.htm este.
Bueno, pues esos URLs Relativos los estbamos definiendo
en base al URL del documento en el situbamos el origen del
hipervnculo.
Ponamos ../ por cada Directorio por encima del documento
actual, o bien, si el recurso al que apuntaba el vnculo estaba
por debajo del documento actual, el camino recorra todos
los directorios inferiores hasta llegar al recurso concreto.
Dado que en mis documentos no tengo definido ningn
camino especfico, porque no uso el Elemento BASE, se
interpreta, por defecto, que es el del propio documento activo.
Clarsimo, no?
Ejemplo:
<html>
<head>
<title>El que sea</title>
<base
href="http://www.webaprendiz.com/estudio/manual/intro.htm">
</head>
<body>
<p>chale un vistazo a la seccin <a
href="../../opino.htm">Cuestin de opiniones</a>
</body>
</html>
file:///D|/Manuales/Aprender%20HTML/links/links7.htm (2 of 3) [27/02/2003 16:56:00]

Cmo crear pginas web. Manual: HTML: LINKS: Elemento BASE

La direccin Relativa "../../opino,htm" tiene como equivalente


Absoluto, la siguiente:
http://www.webaprendiz.com/estudio/opino.htm
Ests de acuerdo?
Por cierto, ese es el URL que tendras que utilizar en tu web,
si quisieras crear un vnculo a ese supuesto documento
"opino.htm".

Bueno, se acab. La verdad, no creo que vayas a utilizar este


Elemento. Pero nunca se sabe.
Tampoco voy a ponerte aqu Documento de Prctica. Los
ejemplos de links que he incluido creo que son ms que
suficientes.
Slo recordarte que si practicas por tu cuenta, debers utilizar
la Estructura Bsica o Global, como soporte de tu cdigo.
Pasamos al Captulo de Fuentes (tipos de letra)?
Elemento LINK
ndice HTML
ndice General

De acuerdo
Quiero descansar un poco

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/links/links7.htm (3 of 3) [27/02/2003 16:56:00]

Cmo crear pginas web. Manual: HTML: Doc Prctica Links

DESCANSANDO DESCANSANDO
DESCANSANDO DESCANSANDO

DESCANSO
Quietud, reposo, tregua en el trabajo o fatiga.
|| Causa de alivio. || Descansillo. || Asiento
sobre el que se apoya una cosa.
Me parece muy bien que quieras
descansar. Yo tambin estoy bastante
agotado de tanto darle a las teclas y
repasar lo que escribo. Pero lo que
realmente me agota es pensar en lo que
an me falta para terminar este dichoso
Manual. :-))

Dicen que el color verde relaja la vista. As que


reljate un poquito.
Si quieres relajarte ms todava, mira esto, o
bien esto.
Te haba dicho que se pueden poner imgenes
como fondo de pantalla?
Si lo haces vigila con el tiempo de carga de la
pgina. Compara el tiempo de carga de los tres
ejemplos de RELAJACIN que he utilizado. Pero
de esto ya hablaremos en otro sitio.

file:///D|/Manuales/Aprender%20HTML/links/exlinkp1.htm (1 of 2) [27/02/2003 16:56:00]

Cmo crear pginas web. Manual: HTML: Doc Prctica Links

Para relajar an ms, chale un vistazo al cdigo


que hay detrs de sta pgina y de los tres
ejemplos de Relajacin.
Encontrars un Script en dos de la pginas, pero
no le prestes atencin. Ni lo mires.

Bueno, vamos a relajarnos del todo CON ESTO

file:///D|/Manuales/Aprender%20HTML/links/exlinkp1.htm (2 of 2) [27/02/2003 16:56:00]

Cmo crear pginas web. Manual: HTML: Doc Prctica: Relajacin

Cuando te hayas relajado lo suficiente, PUEDES


VOLVER

file:///D|/Manuales/Aprender%20HTML/links/exlinkp2.htm [27/02/2003 16:56:00]

Cmo crear pginas web. Manual: HTML: Links: Doc Prctica: Nubes

VOLVER

file:///D|/Manuales/Aprender%20HTML/links/exlinkp3.htm [27/02/2003 16:56:01]

file:///D|/Manuales/Aprender%20HTML/links/exlinkp4.htm

VOLVER

file:///D|/Manuales/Aprender%20HTML/links/exlinkp4.htm [27/02/2003 16:56:01]

file:///D|/Manuales/Aprender%20HTML/imagenes/imagen2.htm

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

GIF - JPG - PNG

Declaracin
principios

Formatos de imagen para la Web

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales

Sin duda los dos formatos de imagen ms


utilizados hoy en da, son el GIF y el JPG.

GIF
Este es, probablemente el que ms abunda,
seguramente porque es el ms verstil.
Graphics Interchange Format. Creado por
Compuserve en 1987. La versin que nos
interesa es la conocida como GIF89a.
Principales caractersticas:

Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Transparencia. Permite definir un color


transparente, normalmente el color sobre
el que se asienta la propia imagen, y que
suele ser blanco o negro. El definir ese
GIF como transparente, nos permitir que
el fondo del documento se visualice a
travs de la imagen, quedando sta
perfectamente integrada en la pgina.

file:///D|/Manuales/Aprender%20HTML/imagenes/imagen2.htm (1 of 5) [27/02/2003 16:56:02]

file:///D|/Manuales/Aprender%20HTML/imagenes/imagen2.htm

Vuestras
colaboraciones

Sugerencias
SALIDA

Entrelazado. Permite que la imagen


vaya apareciendo en pantalla a medida
que se carga. Primero aparecer borrosa,
y se va clarificando, ello permite al
visitante hacerse una idea de lo que se
ver en la imagen. Deja entrever la
imagen sin tener que esperar a su total
carga y que aparezca de golpe en
pantalla.

Permite mostrar imgenes de hasta 256


colores.

Se puede reducir el tamao del fichero


de una imagen GIF, reduciendo el
nmero de colores.

Imgenes animadas. Este formato


permite realizar imgenes animadas.

JPG
Fue creado por el Joint Photographic
Experts Group, JPEG, aunque el sufijo
utilizado es JPG.
Caractersticas principales:

Este formato puede mostrar hasta


16.777.216 colores.

Cuando se comprime se pierde calidad


de imagen.

No puede hacerse "transparente".

file:///D|/Manuales/Aprender%20HTML/imagenes/imagen2.htm (2 of 5) [27/02/2003 16:56:02]

file:///D|/Manuales/Aprender%20HTML/imagenes/imagen2.htm

Normalmente con una imagen con


muchos colores, obtendremos un fichero
inferior con JPG, que con GIF.

Permite un mayor grado de compresin


que GIF. Hay que jugar con las variables
"compresin" y "calidad de imagen". A
mayor compresin, menor calidad de la
imagen y menor tamao del fichero. Hay
que buscar la combinacin adecuada y
que ms nos interese.

Su carga se presenta en pantalla de


forma lineal. Es decir, la imagen va
apareciendo desde la parte superior de la
misma, lnea a lnea hasta que termina su
carga.

Como vers, cada formato tiene sus ventajas


y sus inconvenientes.
Qu formato utilizar?
DEPENDE. Depende del tipo de imagen de
que se trate.
Si hablamos de una fotografa, o de una
imagen con muchos colores, con diferentes
tonalidades que se mezclan, el formato
adecuado es JPG. El JPG admite muchos
ms colores y diseos ms complejos que el
GIF.
Si quieres un fondo transparente en una
file:///D|/Manuales/Aprender%20HTML/imagenes/imagen2.htm (3 of 5) [27/02/2003 16:56:02]

file:///D|/Manuales/Aprender%20HTML/imagenes/imagen2.htm

imagen, debers usar GIF.


Y si quieres una imagen animada, tambin
debers usar GIF.
Si es un imagen con grandes zonas de
colores sin mezclas, o que contiene pocos
colores, GIF la mostrar mucho mejor que
JPG.
Es ms, en esos casos es muy posible que el
fichero JPG sea de un tamao bastante
superior al GIF.

Formato GIF. (1.748


bytes)

Formato JPG. (5.464


bytes)

Si te fijas bien, la imagen GIF, adems de


ocupar menor espacio, es algo ms ntida
que la de formato JPG.

Me he pasado del tiempo mximo de carga


previsto, que tengo establecido para cada
documento.
Tenemos que cambiar de pgina.
Imgenes: Intro. Elemento IMG
ndice HTML

file:///D|/Manuales/Aprender%20HTML/imagenes/imagen2.htm (4 of 5) [27/02/2003 16:56:02]

Vale, vale

file:///D|/Manuales/Aprender%20HTML/imagenes/imagen2.htm

ndice General
| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/imagenes/imagen2.htm (5 of 5) [27/02/2003 16:56:02]

Cmo crear pginas web. Manual: HTML: Las Imgenes: p3: Formatos2

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?

estudio/Cmo crear tu pgina web: Paso a


Paso
Sorry, me he pasado del tiempo estipulado
de carga, pero como es por tu propio bien...

Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada

Formato JPG. (3,29 K)

Formato GIF. (9,23 K)

Como te deca antes, JPG es mejor para


fotos. Fjate en la prdida de calidad del
Formato GIF. La calidad de la foto JPG no es
que sea muy buena, pero eso ya es culpa del
fotgrafo.
Fjate tambin en los tamaos de Archivo. El
JPG es muy inferior al GIF, an siendo de
una calidad muy superior.

Puntos de Vista

Entrada
Colaboraciones

PNG
Portable Network Graphics. Es el tercer

file:///D|/Manuales/Aprender%20HTML/imagenes/imagen3.htm (1 of 2) [27/02/2003 16:56:03]

Cmo crear pginas web. Manual: HTML: Las Imgenes: p3: Formatos2

Vuestras
colaboraciones

formato de imgenes para la Web, si bien no


es compatible con todos los navegadores.

Sugerencias

Utiliza el mismo mtodo de compresin que


el formato GIF, es decir, sin prdidas, pero
as como GIF est limitado a 256 colores, el
PNG no tiene esa limitacin.

SALIDA

Permite el entrelazado de muchos colores,


cosa que no permite JPG.
Actualmente, an no es muy utilizado, pero
puede convertirse en un formato muy
interesante en un futuro prximo.

Veamos ms cositas.
Formatos Imagen pg.1
ndice HTML
ndice General
| arriba | Almacn | Archivo | Pgina Principal

De acuerdo

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/imagenes/imagen3.htm (2 of 2) [27/02/2003 16:56:03]

Cmo crear pginas web. Manual: HTML: Las Imgenes: p4: Ejemplos

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos

Aqu tienes la misma imagen repetida cuatro


veces. Vamos a ver las diferencias entre
ellas.

PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada

<img
src="../images/bebida10.gif"
alt="Imagen de dos botellas y
una copa" border="0" width="60"
height="60">
<img
src="../images/bebida10.gif"
border="2" width="60"
height="60">
<img
src="../images/bebida10.gif"
border="0" hspace="20"
width="60" height="60">

Colaboraciones

<img
src="../images/bebida10.gif"
file:///D|/Manuales/Aprender%20HTML/imagenes/imagen4.htm (1 of 3) [27/02/2003 16:56:03]

Cmo crear pginas web. Manual: HTML: Las Imgenes: p4: Ejemplos

Vuestras
colaboraciones
Sugerencias
SALIDA

alt="Imagen de bebidas"
width="60" height="60">
Fjate en las cuatros cadenas de cdigo. Los
cuatro atributos que aparecen en color rojo,
son los atributos mnimos que deberas incluir
en toda imagen, aparte de src, por supuesto.
El atributo src nos indica la direccin de la
imagen. Nos est diciendo que se trata de un
fichero de imagen, formato gif, denominado
"bebida10" y que dicho fichero se encuentra
en un directorio llamado "images". El Valor de
este atributo no vara, dado que se trata de la
misma imagen en los cuatro casos.
El primer atributo imprescindible es alt.
Como recordars aqu incluimos una breve
descripcin de la imagen.
Este atributo no se encuentra definido en la
segunda y tercera imagen, por lo tanto, no
son correctas.
Width y height debemos considerarlos
tambin obligatorios. Contribuyen a
optimizar la velocidad de presentacin del
documento en pantalla.
Otro Atributo que te recomiendo utilices
siempre es border. Si no deseas ningn
borde, especifcalo a "cero". La ltima imagen
no asigna ningn valor a este Atributo. Puede
no pasar nada, pero repito que es mejor
indicarlo siempre.
La segunda imagen especifica un borde de
"2" pixels. A veces te interesar utilizar un
valor diferente de "0", pero lo ms normal es

file:///D|/Manuales/Aprender%20HTML/imagenes/imagen4.htm (2 of 3) [27/02/2003 16:56:03]

Cmo crear pginas web. Manual: HTML: Las Imgenes: p4: Ejemplos

que desees que la imagen se "integre" en el


documento y se visualice el fondo de la
pgina a travs de la imagen. Por supuesto,
estoy refirindome a imgenes transparentes.
Fjate bien en la tercera imagen. He definido
un espacio horizontal de 20 pixels a travs
del Atributo hspace.
Comprueba lo que te dije antes, el espacio
que definas se crea a ambos lados de la
imagen.
As, vers que la tercera imagen est
separada de la segunda y de la cuarta
imagen por la misma distancia de 20 pixels.
Por cierto, hspace y vspace estn
Desaprobados, en favor de las Hojas de
Estilo.
Pero sigamos adelante.
Formatos de Imagen pg.2
ndice HTML
ndice General
| arriba | Almacn | Archivo | Pgina Principal

Ser mejor

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/imagenes/imagen4.htm (3 of 3) [27/02/2003 16:56:03]

Cmo crear pginas web. Manual: HTML: Las Imgenes: p5: Alineacin

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Alineacin de Imgenes

Declaracin
principios

Utilizaremos el Atributo align que, por


supuesto est Desaprobado en favor de las
Hojas de Estilo.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML

Lo que veremos es la alineacin de imgenes


con respecto al texto que las acompaa, que
es el aspecto ms interesante.
Utilizar los siguientes Valores del Atributo
align:

Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

bottom
La parte inferior de la imagen se alinea con la lnea de
texto que la rodea.

middle
El centro de la imagen se alinea con la lnea de texto
que la rodea.

top
La parte superior de la imagen es la que est lineada
con la lnea de texto.

left
La imagen queda alineada con el margen izquierdo, y
el texto se muestra en a la derecha de la imagen.

file:///D|/Manuales/Aprender%20HTML/imagenes/imagen5.htm (1 of 3) [27/02/2003 16:56:04]

Cmo crear pginas web. Manual: HTML: Las Imgenes: p5: Alineacin

Vuestras
colaboraciones
Sugerencias

right
La imagen est alineada con el margen derecho, y el
texto aparece en el espacio libre a la izquierda de la
imagen.

SALIDA

Vulcano, hijo de Jpiter y de Juno era, al venir al


mundo, tan deforme, que horrorizado su padre ante
tamaa fealdad lo precipit desde lo alto de los cielos.
El celeste aborto fue rodando durante un da por el
espacio y de torbellino en torbellino fue a parar, al caer
la tarde, a la isla de Lemmos, cuyos habitantes le
recibieron de tal forma que slo se rompi una pierna.
Vulcano, hijo de Jpiter y de Juno era, al venir al
mundo, tan deforme, que horrorizado su padre ante
tamaa fealdad lo precipit desde lo alto de los cielos.
El celeste aborto fue rodando durante un da por el
espacio y de torbellino en torbellino fue a parar, al caer
la tarde, a la isla de Lemmos, cuyos habitantes le
recibieron de tal forma que slo se rompi una pierna.
Vulcano, hijo de Jpiter y de Juno era, al venir al
mundo, tan deforme, que horrorizado su padre ante
tamaa fealdad lo precipit desde lo alto de los cielos.
El celeste aborto fue rodando durante un da por el
espacio y de torbellino en torbellino fue a parar, al caer
la tarde, a la isla de Lemmos, cuyos habitantes le
recibieron de tal forma que slo se rompi una pierna.
Vulcano, hijo de Jpiter y de Juno era, al venir al
mundo, tan deforme, que horrorizado su padre
ante tamaa fealdad lo precipit desde lo alto de
los cielos. El celeste aborto fue rodando durante un da
por el espacio y de torbellino en torbellino fue a parar,
al caer la tarde, a la isla de Lemmos, cuyos habitantes
le recibieron de tal forma que slo se rompi una
pierna.
Vulcano, hijo de Jpiter y de Juno era, al venir al
mundo, tan deforme, que horrorizado su padre

file:///D|/Manuales/Aprender%20HTML/imagenes/imagen5.htm (2 of 3) [27/02/2003 16:56:04]

Cmo crear pginas web. Manual: HTML: Las Imgenes: p5: Alineacin

ante tamaa fealdad lo precipit desde lo alto de los


cielos. El celeste aborto fue rodando durante un da por
el espacio y de torbellino en torbellino fue a parar, al
caer la tarde, a la isla de Lemmos, cuyos habitantes le
recibieron de tal forma que slo se rompi una pierna.

Veamos alguna cosita ms.

Ejemplos imgenes
ndice HTML
ndice General

Estoy de acuerdo

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/imagenes/imagen5.htm (3 of 3) [27/02/2003 16:56:04]

Cmo crear pginas web. Manual: HTML: Las Imgenes: p6: Alineacin2

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Qu tal esto?:
Vulcano, hijo de Jpiter y de Juno era, al venir al
mundo, tan deforme,que horrorizado su padre ante
tamaa fealdad lo precipit desde lo alto de los cielos.
El celeste aborto fue rodando durante un da por
el espacio y de torbellino en torbellino fue a
parar, al caer la tarde, a la isla de Lemmos, cuyos
habitantes le recibieron de tal forma que slo se
rompi una pierna. Con un poco de arcilla amasada
con agua form la primera mujer y supo embellecerla
con tales atractivos, que los dioses invitaron a esa
admirable criatura a que formara parte de su
asamblea, la colmaron de dones y le pusieron el
nombre de Pandora.

Y esto otro?:
Vulcano, hijo de Jpiter y de Juno era, al venir al
mundo, tan deforme,que horrorizado su padre ante
tamaa fealdad lo precipit desde lo alto de los cielos.
El celeste aborto fue rodando durante un da por
el espacio y de torbellino en torbellino fue a
parar, al caer la tarde, a la isla de Lemmos,
cuyos habitantes le recibieron de tal forma que slo se
rompi una pierna. Con un poco de arcilla amasada
con agua form la primera mujer y supo embellecerla
con tales atractivos, que los dioses invitaron a esa
admirable criatura a que formara parte de su
asamblea, la colmaron de dones y le pusieron el
nombre de Pandora.

file:///D|/Manuales/Aprender%20HTML/imagenes/imagen6.htm (1 of 5) [27/02/2003 16:56:05]

Cmo crear pginas web. Manual: HTML: Las Imgenes: p6: Alineacin2

Vuestras
colaboraciones
Sugerencias
SALIDA

En ambos casos he empezado a escribir y he


colocado la imagen despus de un par de
lneas y la he alineado a la izquierda. Si
quieres, tambin puedes alinearla a la
derecha.
En el segundo prrafo, adems, he colocado
8 pixels de espacio horizontal y 2 pixels de
espacio vertical. De esta forma el texto no se
"apretuja" alrededor de la imagen. Todo
queda ms holgado. No te parece?.

Nota: Si el texto, una vez pasada la imagen, no


regresara a su margen natural, es decir, al margen
izquierdo en una alineacin izquierda, o al margen
derecho en una alineacin derecha, puedes probar los
siguiente al final del texto:
<br clear="left"> si la imagen est alineada a
la izquierda.
<br clear="right"> si est alineada a la
derecha.
<br clear="all"> en cualquiera de los dos
casos.
Es muy posible que no necesites utilizarlo y que el
texto vuelva a su margen natural. Adems, puede no
funcionar en todos los navegadores. Prubalo slo si
tienes problemas con el texto.

Baco, el dios del vino, era hijo de Jpiter y Semel;


naci en la isla de Naxos y Mercurio le llev a Arabia a
la mansin de las ninfas de Nisa, que cuidaron de
alimentarle en aquellas montaas.

file:///D|/Manuales/Aprender%20HTML/imagenes/imagen6.htm (2 of 5) [27/02/2003 16:56:05]

Cmo crear pginas web. Manual: HTML: Las Imgenes: p6: Alineacin2

Baco, el dios del vino, era hijo de Jpiter y de Semel;


naci en la isla de Naxos y Mercurio le llevo a Arabia a
la mansin de las ninfas de Nisa, que cuidaron de
alimentarle en aquellas montaas.

Para alinear una imagen en el "centro" de la


pgina, tendrs que hacerlo a travs del
Elemento P: <p align="center"><img
src="....>
En el primer caso despus de la etiqueta
img, he puesto un salto de lnea <br>, con lo
que el texto tambin se alinea por el centro.
Para que el texto no quedara tan pegado a la
parte inferior de la imagen, a sta le he
definido un espacio vertical de 5 pixels.
En el segundo caso, despus de la etiqueta
img, he cerrado el prrafo </p>, lo que
provoca una lnea en blanco por debajo de la
imagen.
Prueba lo mismo, si quieres, con la imagen
alineada a la derecha y a la izquierda, y el
texto debajo, usando <br> y luego </p>.

Antes de irnos te recuerdo lo siguiente:

Hojas de Estilo. Ya sabes lo que quiero


decir.

No debes utilizar los Atributos width y

file:///D|/Manuales/Aprender%20HTML/imagenes/imagen6.htm (3 of 5) [27/02/2003 16:56:05]

Cmo crear pginas web. Manual: HTML: Las Imgenes: p6: Alineacin2

height para redimensionar el tamao de


la imagen en el momento que la incluyas
en un documento. La imagen que vas a
utilizar tiene que tener las mismas
medidas, que las que tendr el la pgina.
De lo contrario ralentizars el proceso de
presentacin en pantalla del documento.
Adems puede verse alterada la calidad
de la propia imagen.
Si el tamao de la imagen original no es
el deseado, modificado con un programa
de grficos, antes de incorporarlo a tu
Directorio de Imgenes. OK?.

Utiliza siempre los Atributos alt, width y


height.

Por ltimo, ya vimos cmo crear


hipervnculos con imgenes. Te vuelvo a
recordar que si utilizas una imagen como
Lanzadera de un vnculo, aparecer un
"borde" alrededor de la misma, del mismo
color que tengas definidos los links.
Si quieres evitar ese "borde", asegrate
de que has asignado el Valor "0" cero, al
Atributo border en la etiqueta del
Elemento IMG.

Bueno, vamos a ver el OBJECT y cosas


raras.
Te apetece?
Imgenes: Alineacin pg.1

file:///D|/Manuales/Aprender%20HTML/imagenes/imagen6.htm (4 of 5) [27/02/2003 16:56:05]

Muchsimo

Cmo crear pginas web. Manual: HTML: Las Imgenes: p6: Alineacin2

ndice HTML
ndice General
| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/imagenes/imagen6.htm (5 of 5) [27/02/2003 16:56:05]

Cmo crear pginas web. Manual: HTML: Elemento OBJECT

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Objetos, Imgenes y Applets

Declaracin
principios

El contenido de este Captulo sobrepasa el


nivel bsico para el que est pensado este
Manual.
De todas formas lo he incluido porque forma
parte del cdigo HTML si bien, en buena
medida, hacen referencia a efectos y objetos
que no pertenecen al HTML.
En una etapa inicial, dudo que vayas a utilizar
los Elementos que aqu se describen,
excepto en algn caso muy concreto, del que
ya veremos ejemplos, en su momento.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Cuando vimos las Imgenes, ya te coment


que, aparte del sistema tradicional utilizando
el Elemento IMG, podamos incluir imgenes
en nuestras pginas utilizando el Elemento
OBJECT.
Por otra parte, existe el Elemento APPLET,
que ha sido Desaprobado en favor del
Elemento OBJECT.
Tambin veremos otro Elemento, PARAM,
que se utiliza para la inicializacin de

file:///D|/Manuales/Aprender%20HTML/objectapplet/object1.htm (1 of 4) [27/02/2003 16:56:06]

Object-Applet
4 DIN-A4

Cmo crear pginas web. Manual: HTML: Elemento OBJECT

Vuestras
colaboraciones
Sugerencias

determinados Objetos.
Por lo tanto, vamos a ver los Elementos
OBJECT, PARAM y APPLET.

SALIDA

Elemento OBJECT
<object>.....</object>
El Elemento OBJECT, sirve de solucin
genrica para la incluir "objetos" en los
documentos. Estos "objetos" pueden ser:
imgenes, applets, otros documentos HTML,
etc.
Requiere etiqueta de cierre.

Atributos principales y Valores


classid="URL"
Sirve para especificar la localizacin de los
datos del objeto, para su evaluacin. Este
atributo puede utilizarse conjuntamente con
el atributo data o como alternativa a ste.
Depender del tipo de objeto.
Su Valor es una direccin URL.

codebase="URL"
Especifica el "camino" a utilizar para
resolver los URL Relativos especificados en
otros Atributos. Si no se especifica, el valor
por defecto es la base del URL del
documento activo.
Es muy parecido a lo que vimos en el
Elemento BASE. Te acuerdas?.
Su Valor es un URL.

codetype="tipo de medio"
file:///D|/Manuales/Aprender%20HTML/objectapplet/object1.htm (2 of 4) [27/02/2003 16:56:06]

Cmo crear pginas web. Manual: HTML: Elemento OBJECT

Sirve para especificar el tipo de medio o


datos esperados, cuando se descarga el
objeto especificado por el Atributo
classid, por ejemplo: "text/html";
"text/css"; "image/gif", etc.
Si no se incluye este Atributo, se toma por
defecto el Valor del atributo type.

data="URL"
Puede utilizarse para especificar la
localizacin de los datos del objeto. Si se
utiliza como direccin Relativa, se
interpretar en base al Atributo codebase.

type="tipo de medio"
Especifica el tipo de contenido especificado
por el Atributo data. Es opcional, pero se
recomienda su uso si se va a utilizar el
Atributo data, ya que evita la carga de tipos
de contenido que no sean soportados por el
navegador.

archive="lista de URLs"
Puede utilizarse para relacionar una serie
de URLs de archivos que contengan
recursos relativos al objeto en cuestin.
Puede incluir los recursos especificados en
los Atributos classid y data.
La lista debe ir separada por espacios en
blanco. Si se utilizan direcciones Relativas,
se resolvern en base al Atributo
codebase.

declare="declaracin de un objeto sin


activarlo"
Cuando se utiliza este Atributo, convierte la
definicin del Objeto en una simple
"declaracin". El objeto queda incrustado,
pero inactivo.
Para activar el objeto, deber utilizarse, con
posterioridad, otra definicin de Objeto que
haga referencia a esta declaracin.

stanby="texto"
Este Atributo especifica un mensaje que
file:///D|/Manuales/Aprender%20HTML/objectapplet/object1.htm (3 of 4) [27/02/2003 16:56:06]

Cmo crear pginas web. Manual: HTML: Elemento OBJECT

ser mostrado mientras se cargan los datos


del objeto.

usemap="URL"
Asocia un mapa de imagen con un
elemento. Lo veremos en el Captulo Mapas
de Imagen.

name="secuencia de caracteres"
Se utiliza en los Formularios. Ya lo veremos
en su momento.

id, class, lang, dir, title, style, tabindex,


align, width, height, border, hspace,
vspace, y otros referidos a "eventos".
Unos ya han sido tratados en el Elemento P.
Otros en el Captulo de Imgenes. El resto
los veremos en el Captulo SCRIPT.

Sigamos en otro pgina.


Imgenes: Alineacin pg.2
ndice HTML
ndice General
| arriba | Almacn | Archivo | Pgina Principal

De acuerdo

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/objectapplet/object1.htm (4 of 4) [27/02/2003 16:56:06]

Cmo crear pginas web. Manual: HTML: Elemento PARAM

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada

estudio/Cmo crear tu pgina web: Paso a


Paso

El Elemento OBJECT se utiliza normalmente


dentro del Cuerpo del documento, es decir,
entre las etiquetas <body> y </body>.
Hemos visto bastantes Atributos en la
descripcin del Elemento OBJECT.
Dependiendo del tipo de objeto usaremos
unos u otros.
Recordemos que este Elemento es
"genrico" para diferentes tipos de "objetos",
con diferentes necesidades de descripcin e
informacin para que puedan ser
visualizados, escuchados, etc.

Inicializacin de Objetos:

Elemento PARAM

Puntos de Vista

Entrada
Colaboraciones

Este Elemento sirve para especificar una


serie de valores que pueden ser necesarios
para la inicializacin de un Objeto, por
ejemplo un Applet. Estos Objetos no suelen
estar sujetos al estndar del protocolo HTTP.

file:///D|/Manuales/Aprender%20HTML/objectapplet/object2.htm (1 of 3) [27/02/2003 16:56:07]

Cmo crear pginas web. Manual: HTML: Elemento PARAM

Vuestras
colaboraciones

Se trata de un Elemento "vaco", la etiqueta


de cierre est prohibida.

Sugerencias
SALIDA

Atributos principales y Valores


name="texto"
Define el nombre de un parmetro conocido
por el Objeto insertado.

value="secuencia de caracteres"
Sirve para especificar el valor de un
parmetro especificado por el Atributo
name.

valuetype="data; ref; object"


Especifica el tipo del Atributo value. Puede
ser:

data: Es el valor por defecto. Se


utilizarn los datos indicados en el
Atributo value.
ref: Es un URL que define un recurso
donde se encuentran los valores de
ejecucin del Objeto.
object: En este caso es un URL que hace
referencia a una declaracin de Objeto,
contenida en el mismo documento.

type="clase de medio utilizado"


Especifica el tipo de medio utilizado por el
Atributo value, slo si el Atributo
valuetype tiene como valor "ref".

id, que ya ha sido definido en el Elemento P.

Como te he dicho, este Elemento sirve para


especificar una serie de valores que pueden
ser necesarios para que un Objeto se
visualice, vea, escuche, se inicialice, etc.
Depende del Objeto.
file:///D|/Manuales/Aprender%20HTML/objectapplet/object2.htm (2 of 3) [27/02/2003 16:56:07]

Cmo crear pginas web. Manual: HTML: Elemento PARAM

El Elemento PARAM puede aparecer


cuantas veces sean precisas, y en cualquier
orden, dentro del contenido de un Elemento
OBJECT o de un Elemento APPLET, que ya
veremos. Sin embargo, deben situarse al
inicio del contenido de ese Elemento
OBJECT o APPLET.

Yo estoy ms aburrido que una ostra, y t?


Elemento OBJECT
ndice HTML
ndice General

Yo tambin

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/objectapplet/object2.htm (3 of 3) [27/02/2003 16:56:07]

Cmo crear pginas web. Manual: HTML: Elemento APPLET

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Elemento APPLET

Declaracin
principios

<applet>......</applet>
El Elemento APPLET se viene utilizando para
insertar applets creados con el lenguaje Java.
Este Elemento est Desaprobado, en favor
del Elemento OBJECT.
Requiere etiqueta de cierre.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML

Atributos principales y Valores

Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

codebase="URL"
Sirve para especificar el URL base para el
applet. Si no se especifica, se toma por
defecto la misma base que el URL de la
pgina activa.
El Valor de este Atributo slo puede
referirse a subdirectorios o al directorio que
contiene el documento activo

code="texto"
Sirve para especificar o bien el nombre de
la clase de fichero que contiene la subclase
compilada del applet, o bien el camino a
seguir para llegar a dicha clase.

name="texto"
file:///D|/Manuales/Aprender%20HTML/objectapplet/object3.htm (1 of 3) [27/02/2003 16:56:07]

Cmo crear pginas web. Manual: HTML: Elemento APPLET

Vuestras
colaboraciones
Sugerencias
SALIDA

Especifica un nombre para el applet.

archive="lista de URLs"
Sirve para especificar una serie de URLs
que conducen a archivos que contienen las
clases u otros recursos que precisan ser
precargados antes de la ejecucin del
applet.
La lista de URLs se debe separar mediante
comas.

object="texto"
Sirve para asignar un nombre para un
recurso que contiene una representacin
del applet.
Ese recurso contiene el nombre de la clase
del applet pero no puede ejecutarse. Ese
nombre de clase se utiliza para llamar a un
fichero de clase o archivo, y obtener la
ejecucin del applet.

width="anchura en pixels o % del espacio


horizontal disponible."
Este Atributo sirve para definir la anchura
inicial del rea donde se mostrar el applet.

height="altura en pixel o en % de espacio


vertical disponible."
Especifica la altura inicial del rea donde se
mostrar el applet.

id, class, title, style, alt, align, hspace,


vspace. Ya han sido definidos en el
Elemento P y el Elemento IMG.

O bien el Atributo code o bien el Atributo


object deben ser especificados. Si se
incluyen los dos, ambos deben tener el
mismo nombre de clase.
Este Elemento esta soportado por todos los
navegadores que tienen habilitado el
file:///D|/Manuales/Aprender%20HTML/objectapplet/object3.htm (2 of 3) [27/02/2003 16:56:07]

Cmo crear pginas web. Manual: HTML: Elemento APPLET

lenguaje Java, y sirve, como ya he dicho,


para incrustar un applet Java en un
documento HTML.
Te recuerdo, que est Desaprobado en favor
del Elemento OBJECT.

En relacin a este Captulo y al Elemento


genrico OBJECT, queda por hablar del
Elemento IFRAME, pero prefiero dejarlo para
el Captulo dedicado a los Marcos.

Nos vamos a los Mapas de Imagen?


Elemento PARAM
ndice HTML
ndice General

Si, ser lo mejor

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/objectapplet/object3.htm (3 of 3) [27/02/2003 16:56:07]

Cmo crear pginas web. Manual: HTML: Mapas de Imagen: Elementos MAP y AREA

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?

estudio/Cmo crear tu pgina web: Paso a


Paso

Mapas de Imagen

Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Esto es una imagen. La iba a utilizar en la


Pgina Principal, pero al final la cambi por la
actual.
Antes de empezar te dir lo siguiente:
Es mejor que no intentes crear t mismo los
mapas de imagen. Tu salud mental podra
peligrar, especialmente si pretendes definir
zonas geomtricas irregulares.
Existen buenos programas que te ayudarn y
generarn el cdigo que proceda en cada
caso.
Si posees una aplicacin WYSIWYG, tienes
el problema solucionado, ya que suelen
incorporar la herramienta interna para
generar los mapas de imagen.
Si no dispones de ese tipo de aplicacin,
puedes utilizar alguno de los programas que
te he puesto al final de la pgina (1).

file:///D|/Manuales/Aprender%20HTML/mapaimagen/mapaim1.htm (1 of 5) [27/02/2003 16:56:08]

Mapas de
imagen
5 DIN-A4

Cmo crear pginas web. Manual: HTML: Mapas de Imagen: Elementos MAP y AREA

Vuestras
colaboraciones
Sugerencias
SALIDA

Qu es un Mapa de Imagen?
Es ni ms ni menos que una imagen dividida en
secciones de formas homogneas o distintas,
que se utiliza para la navegacin.
Cada una de esas secciones se usar para crear
un vnculo, normalmente a otro documento de la
propia web.
Las secciones pueden ser rectangulares,
circulares o poligonales.

Tipo de Mapas de Imagen


Existen dos clases:

Del lado del Servidor.


Del lado del Cliente.

Aqu slo veremos los del lado del Cliente, que


son los que te aconsejo.
Los del lado del Servidor, aparte de tener cierta
dependencia del tipo de Servidor y precisar
scripts especiales, no son tan rpidos como los
del lado del Cliente. Ello es debido a que la
informacin relativa al mapa no se encuentra, en
su totalidad, en el propio documento HTML, sino
que est localizada en el Servidor.
Por lo tanto, slo me referir a Mapas de Imagen
del lado del Cliente.

file:///D|/Manuales/Aprender%20HTML/mapaimagen/mapaim1.htm (2 of 5) [27/02/2003 16:56:08]

Cmo crear pginas web. Manual: HTML: Mapas de Imagen: Elementos MAP y AREA

Utilizaremos dos Elementos:

Elemento MAP
<map>......</map>
Sirve para especificar un mapa del lado del
Cliente, u otros mecanismos de navegacin, que
pueden ser asociados a otros Elementos (IMG,
OBJECT, INPUT). Para realizar esa asociacin
se utiliza el Atributo usemap, que ya vimos en el
Captulo Imgenes.
Requiere etiqueta de cierre.

Atributos principales y Valores


name="texto"
Asigna un nombre al mapa de imagen definido
por un Elemento MAP

Elemento AREA
Lo utilizaremos para definir las zonas activas de
la imagen que, como ya te he dicho, pueden ser
rectngulos, crculos o polgonos.
Se trata de uno de los Elementos denominados
"vacos", por lo tanto la etiqueta de cierre est
prohibida.

Atributos principales y Valores


shape="default; rect; circle; poli"
file:///D|/Manuales/Aprender%20HTML/mapaimagen/mapaim1.htm (3 of 5) [27/02/2003 16:56:08]

Cmo crear pginas web. Manual: HTML: Mapas de Imagen: Elementos MAP y AREA

Sirve para especificar la forma de la regin


activa:

default: Especifica toda la regin como


activa.
rect: Define una regin rectangular.
circle: Define una regin circular.
poly: Define un polgono.

coords="coordenadas"
Define las posiciones de pantalla que
dependern, evidentemente, del tipo de regin
que vayamos a definir. Existen las siguientes
combinaciones:

rect: left-x, top-y, right-x bottom-y


circle: center-x, center-y, radius
poly: x1, y1, x2, y2, ..., xN, yN. La primera
coordenada x, y y la ltima deben ser la
misma, a fin de que se cierre el polgono.

nohref
Sirve para indicar que una regin concreta no
tiene definido ningn hipervnculo.

id, class, lang, dir, title, style, name, alt, href,


target, tabindex, acceskey, y otros relativos a
"eventos", que ya veremos. Los primeros ya han
sido definidos en el Elemento P, en el Elemento
IMG, y en el Elemento A. Los relativos a
sucesos, los encontrars en el Captulo SCRIPT.

En los mapas de imagen, al igual que con todas


las imgenes, es muy importante utilizar el
Atributo alt, para describir el contenido del
mapa en forma de texto alternativo. Esto ya lo he
mencionado antes, y lo volveremos a ver cuando
hable de la Accesibilidad.

Veamos un ejemplo simple de Mapa de Imagen


file:///D|/Manuales/Aprender%20HTML/mapaimagen/mapaim1.htm (4 of 5) [27/02/2003 16:56:08]

Cmo crear pginas web. Manual: HTML: Mapas de Imagen: Elementos MAP y AREA

Elemento APPLET
ndice HTML
ndice General

Vale

Enlaces de esta pgina:


Mapedit de Boutell
Webhotspots Imagemap Editor
| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/mapaimagen/mapaim1.htm (5 of 5) [27/02/2003 16:56:08]

Cmo crear pginas web. Manual: HTML: Mapas de Imagen: Ejemplo

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Ejemplo de Mapa simple

Declaracin
principios

Vamos a ver un ejemplo de Mapa de Imagen de


formas rectangulares, que son las ms fciles.
Utilizar la imagen que pensaba utilizar en la
pgina principal y definir un nuevo mapa.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML

Partimos de una imagen que mide un total de 362


pixels de anchura por 35 pixels de alto. Le he
aadido un "borde" de 1 pixel para que puedas ver
el contorno de la imagen.

Libro de Estilo

Principios
generales

362 x 35

Esta imagen la constru con imgenes parciales


de las siguientes medidas:
Avanzando
Imagen Estudio: 75 x 35
Imagen Almacn: 75 x 35
Entrada
Imagen Archivo: 75 x 35
Puntos de Vista
Imagen Foros: 57 x 35
Entrada
Imagen Concurso: 80 x 35
Accesibilidad

Colaboraciones

Nota: En un primer momento haba pensado hacer el men


principal con cinco imgenes colocadas una a continuacin
de la otra. Luego observ, que incluyndolas todas en una

file:///D|/Manuales/Aprender%20HTML/mapaimagen/mapaim2.htm (1 of 6) [27/02/2003 16:56:09]

Cmo crear pginas web. Manual: HTML: Mapas de Imagen: Ejemplo

Vuestras
colaboraciones
Sugerencias
SALIDA

sola imagen, el tamao del archivo y el tiempo de carga,


eran inferiores. Por eso decid hacer un Mapa de Imagen y
aprovecharlo a efectos didcticos. Este Men podra haber
tenido la misma apariencia y utilidad, simplemente
colocando las imgenes una al lado de otra, y asignando un
link a cada una de ellas. No utilices un Mapa de Imagen
rectangular para la navegacin. Es un poco absurdo, entre
otras cosas. Te repito que he incluido ste slo para que
vieras un ejemplo prctico.

Para que veas lo que estoy haciendo, voy a tener


en cuenta las medidas de cada una de las 5
primitivas imgenes que utilic para componer la
imagen final.
No hace falta hacerlo as, pero se ve ms claro.

75 x 35

75 x 35

Para que te hagas una idea, aqu he colocado dos


de esas imgenes juntas y con un "borde" de 1
pixel.
La esquina superior izquierda de la imagen
general tiene las coordenadas (0,0). Las de la
esquina superior derecha son (362,0).
Las de la esquina inferior izquierda son (0,35) y
las de la esquina inferior derecha son (362,35).
El eje de las "x" va de izquierda a derecha, y el
eje de las "y" va de arriba hacia abajo. Lo ves,
no?

0,2

77,2

73,34

148,34

152,2

227,2

223,34 280,34

file:///D|/Manuales/Aprender%20HTML/mapaimagen/mapaim2.htm (2 of 6) [27/02/2003 16:56:09]

284,2

362,34

Cmo crear pginas web. Manual: HTML: Mapas de Imagen: Ejemplo

Aqu tienes las coordenadas que he escogido:


Estudio
Esquina superior izquierda: 0,2. He empezado
por el "0", porque la "e" de estudio est muy
pegada al inicio de la imagen (puedes ver que
est muy pegada al borde). He bajado 2 pixels
porque le sobre altura a la imagen. Podra haber
bajado 3, o hasta 4 pixels.
Esquina inferior derecha: 73,34. La anchura de
la primitiva imagen era de 75x35 pixels. Me paro
en 73 de ancho, es decir un poco menos que la
primitiva anchura de 75px y como altura 34px, es
decir 1 pixel menos que la altura total de la
imagen.
En los rectngulos slo tenemos que definir la
esquina superior izquierda y la esquina inferior
derecha. Los navegadores que, cuando quieren,
son muy inteligentes, ya deducen las otras dos
esquinas: superior derecha (73,2) e inferior
derecha (0,34).
Ya tenemos definido el rectngulo para este
elemento de navegacin, al que asignaremos un
vnculo al documento estudio.htm.

Almacn
Esquina superior izquierda: 77,2. Fjate que el
rectngulo anterior acababa en el "73", la imagen
terica acababa en el "75" y ahora estoy
file:///D|/Manuales/Aprender%20HTML/mapaimagen/mapaim2.htm (3 of 6) [27/02/2003 16:56:09]

Cmo crear pginas web. Manual: HTML: Mapas de Imagen: Ejemplo

empezando en el "77".
Aviso: Es muy importante dejar espacio entre las regiones
de la imagen, que no se toquen, ni mucho menos que se
superpongan. De lo contrario cuando definas vnculos a cada
una de esas regiones y los actives, puedes armar un buen
lo.

Mantenemos el mismo valor para la "y", es decir,


"2".
Esquina inferior derecha: 148,34. Lo mismo que
antes. La esquina sumando las dos primitivas
imgenes estara a 150 pixels (75+75), ests de
acuerdo, no?.
Paramos un par de pixels antes, es decir a 148. El
eje "y", el mismo que antes, 34 pixels, uno menos
que la altura total de la imagen.
Bien, ya tenemos el segundo rectngulo-regin
definido.

Podra seguir, pero estoy cansado y creo que ya


le has cogido el tranquillo.
Con la imagen que tienes ms arriba, donde he
colocado los valores de cada coordenada, y con el
cdigo que tienes debajo, creo que ya lo tienes
dominado.

<img scr="menu3.gif" alt="Estudio,


Almacn, Archivo, Foros, Concurso"
ismap width="362" height="35"
usemap="#menup">
<map name="menup">
file:///D|/Manuales/Aprender%20HTML/mapaimagen/mapaim2.htm (4 of 6) [27/02/2003 16:56:09]

Cmo crear pginas web. Manual: HTML: Mapas de Imagen: Ejemplo

<area shape="rect" coords="0,2,73,34"


href="estudio.htm">
<area shape="rect"
coords="77,2,148,34"
href="almacen.htm">
<area shape="rect"
coords="152,2,223,34"
href="archivo.htm">
<area shape="rect"
coords="227,2,280,34"
href="foros.htm">
<area shape="rect"
coords="284,2,362,34"
href="concurso.htm>
</map>

Los rectngulos son muy fciles de definir. Si


quieres ejemplos ms complicados, hztelos tu
mismo. Yo no suelo utilizar demasiado los Mapas
y, cuando lo hago, uso una aplicacin que me
ayude para ir ms rpido.
Pero s es importante saber cmo se hacen,
aunque sean simples rectngulos (pero luego no
los uses). El uso de Mapas de imagen es
adecuado en mapas geogrficos precisamente.
Seguro que has visto ms de uno.
De todas formas, si te decides a incluir mapas de
imagen en tu web, vigila el tamao de las mismas,
a efectos de carga del documento. No olvides
utilizar el Atributo alt y, si es posible, proporciona
navegacin alternativa adems de la imagen.
Bueno, vmonos que me estoy volviendo a pasar
de longitud de pgina, de mi tiempo de carga, etc.
file:///D|/Manuales/Aprender%20HTML/mapaimagen/mapaim2.htm (5 of 6) [27/02/2003 16:56:09]

Cmo crear pginas web. Manual: HTML: Mapas de Imagen: Ejemplo

y luego me criticars.

Te hacen unas Tablas?


Elementos MAP y AREA
ndice HTML
ndice General

Ya era hora

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/mapaimagen/mapaim2.htm (6 of 6) [27/02/2003 16:56:09]

Cmo crear pginas web. Manual: HTML: Las Tablas: Intro

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada

estudio/Cmo crear tu pgina web: Paso


a Paso

Las Tablas
Tablas

Yo

Lo siento, no he podido evitarlo, he faltado al Tercer


Mandamiento de esta web pero, como dicen en las
pelis, ha sido un impulso irresistible.

Las Tablas nos ayudan a controlar la


colocacin de objetos, colores y texto en
nuestra pgina. Es decir, nos pueden ayudar
a la creacin de la totalidad de la pgina e,
incluso, a definir la anchura total de nuestra
pgina con respecto a la pantalla.
La recomendacin actual es ir pensando en
sustituir las tablas como medio de
presentacin de elementos en nuestras
pginas, y utilizar las Hojas de Estilo, con su
posibilidad de conseguir una posicin
absoluta en pantalla. Esta "posicin
absoluta", permite el control, pixel a pixel, de
la presentacin en pantalla.

Colaboraciones

Sin embargo, creo que an tenemos Tablas


para rato, y siempre podemos pensar en una
file:///D|/Manuales/Aprender%20HTML/tablas/tablas1.htm (1 of 6) [27/02/2003 16:56:10]

Tablas I
9 DIN-A4
Tablas II
12 DIN-A4
Tablas III
10 DIN-A4
Tablas IV
9 DIN-A4
Tablas V
9 DIN-A4

Cmo crear pginas web. Manual: HTML: Las Tablas: Intro

Vuestras
colaboraciones
Sugerencias
SALIDA

combinacin de Tablas para ciertas cosas y


la "posicin absoluta" para otras.
Esto es especialmente cierto a la fecha en
que estoy escribiendo esta parrafada, en que
la mayora de navegadores reconocen ms o
menos acertadamente las Tablas, pero
todava estn en manteles en muchos
aspectos de las Hojas de Estilo.
Hablaremos un buen rato sobre las Tablas.
Veremos sus Elementos y Atributos, por
supuesto. Tambin veremos la utilizacin de
las Tablas Fijas y las Tablas Variables o
Dinmicas, y su respuesta a los diferentes
tipos de Resolucin de Pantalla, etc. Y
bastantes ejemplos.
Hablando de ejemplos, voy a asignar
siempre un borde a todas las Tablas de los
ejemplos, a fin de que puedas verlas. Luego,
en la prctica, pocas veces asignars al
"borde" un valor diferente de cero.
Ya habrs notado algo diferente en esta
pgina. He definido un borde de 1 pixel en la
Tabla que he utilizado.

A pesar de mi pasin por las Tablas, debes


tener en cuenta lo siguiente:

No utilices una Tabla, a menos que


sea absolutamente necesaria.
Al principio yo utilizaba Tablas para todo.
Incluso tablas de una sola fila y una sola
columna para colocar el vnculo "arriba"

file:///D|/Manuales/Aprender%20HTML/tablas/tablas1.htm (2 of 6) [27/02/2003 16:56:10]

Cmo crear pginas web. Manual: HTML: Las Tablas: Intro

para que el visitante pudiera dirigirse a


inicio de una pgina. Recuerda que
tenemos el Atributo "align" que nos
permite situar texto o imgenes sin
necesidad de colocarlas en una Tabla.
Volveremos sobre esto en las Hojas de
Estilo.

Las Tablas pueden llegar a tener


mucho cdigo, si no se vigila. Eso
significa mayor tiempo de carga de
pgina. Ya hablaremos de cmo limpiar
el cdigo de las Tablas y de cmo
simplificar su estructura el mximo
posible.

Antes de que veamos todos los Elementos y


Atributos que pueden utilizarse con las
Tablas, voy a hacer una breve introduccin,
para que tengas claro algunos temas.
Tres son los Elementos Bsicos de una
Tabla:
TABLE, TR Y TD
Como veremos, el Elemento TABLE lo
situaremos al inicio de una Tabla, mediante
la Etiqueta de Apertura <table> y al final de
una Tabla, a travs de su Etiqueta de Cierre
</table>
Me interesa que entiendas ahora los otros
dos Elementos:

file:///D|/Manuales/Aprender%20HTML/tablas/tablas1.htm (3 of 6) [27/02/2003 16:56:10]

Cmo crear pginas web. Manual: HTML: Las Tablas: Intro

TR (table row), lo utilizaremos para definir


filas dentro de una Tabla.
TD (table data), lo utilizaremos para
determinar las celdas que queremos poner
en cada fila formando, de esa manera, las
columnas de la Tabla.
TD
TD
TD

TD
TD
TD

TD
TD
TD

Esta es una Tabla de tres filas y tres


columnas. Cada fila tiene tres celdas, donde
pondremos lo que sea.
Fjate lo que te deca antes, las celdas (TD),
nos determinan las columnas que, en este
caso, son tres.
El Elemento TD siempre est contenido en el
Elemento TR, y el Elemento TR est
englobado en el Elemento TABLE.
En las celdas (TD) podremos poner
prcticamente todo lo que hemos visto hasta
ahora: prrafos de texto, imgenes, listas,
cabeceras, objetos, etc., etc., si es que
necesitamos utilizar una Tabla para ello,
claro.

Este rollo inicial tiene su importancia, aunque


de momento no sepas cmo se ha creado
esa Tabla. Es importante que entiendas
file:///D|/Manuales/Aprender%20HTML/tablas/tablas1.htm (4 of 6) [27/02/2003 16:56:10]

Cmo crear pginas web. Manual: HTML: Las Tablas: Intro

estos conceptos bsicos antes de empezar a


construir Tablas.
Piensa siempre en una "parrilla" y no te
perders.
Por cierto, la Tabla que he puesto de
ejemplo tienen las tres columnas de la
misma anchura y las tres filas de la misma
altura. Esto no tiene porqu ser as,
evidentemente.
Slo tienes que fijarte en el "borde" que he
puesto en la Tabla de mi pgina, para ver
que, aparentemente, tiene una nica fila de
una altura enorme, y tres columnas, cada
una de diferente anchura.

Ahora vendrn las definiciones de todos los


Elementos, sus Atributos y sus Valores. Ten
paciencia y no te preocupes por entenderlos
todos de entrada. Los ejemplos que te
pondr, clarificarn su utilizacin y/o utilidad.
Como he hecho con los anteriores
Elementos, enumerar todos los Elementos
de las Tablas y sus Atributos. Pero recuerda
lo que te dije al principio del Manual: hay
Elementos y Atributos que es posible que
nunca llegues a utilizar.
Por lo tanto, tranquilo. No te asustes. En los
ejemplos prcticos que te pondr, slo
utilizaremos los Elementos y Atributos ms
utilizados, especialmente en una etapa inicial
de aprendizaje.

file:///D|/Manuales/Aprender%20HTML/tablas/tablas1.htm (5 of 6) [27/02/2003 16:56:10]

Cmo crear pginas web. Manual: HTML: Las Tablas: Intro

Mi recomendacin es que leas el apartado


de descripcin de Elementos y luego lo
utilices de consulta.
Ser en el apartado de Ejemplos y
Comentarios, donde aprenders a crear las
Tablas.
Bueno, empezamos ya?
Mapas de Imagen: Ejemplo
ndice HTML
ndice General

Empecemos

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/tablas/tablas1.htm (6 of 6) [27/02/2003 16:56:10]

Cmo crear pginas web. Manual: HTML: Las Tablas: TABLE, CAPTION

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Elemento TABLE

Declaracin
principios

<table> ......</table>
Usaremos el Elemento TABLE para delimitar
todo el contenido de una Tabla. Por lo tanto,
iniciaremos una Tabla con la etiqueta de
apertura de este Elemento, y la finalizaremos
con la correspondiente etiqueta de cierre.
Requiere etiqueta de cierre.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Atributos y Valores
summary="texto"
Sirve para proporcionar un resumen del
contenido de la Tabla para los mecanismos
no visuales, como los de voz y Braille.

align="left, center, right"


Este Atributo est Desaprobado. Sus
valores son:

left. Sita la Tabla a la izquierda del


documento.
center. Centra la Tabla en el documento.
right. Sita la Tabla a la derecha de la
pgina.

width="medida de anchura"
Sirve para especificar la anchura deseada
file:///D|/Manuales/Aprender%20HTML/tablas/tablas2.htm (1 of 5) [27/02/2003 16:56:11]

Cmo crear pginas web. Manual: HTML: Las Tablas: TABLE, CAPTION

Vuestras
colaboraciones
Sugerencias
SALIDA

de la Tabla. Puede ser en pixels o en


porcentaje. Si es en porcentaje, ste se
refiere siempre al espacio horizontal
disponible. Este espacio puede ser toda la
anchura de la pgina o, por ejemplo, la
anchura de una celda, si estamos creando
una nueva Tabla en el interior de la celda de
otra Tabla superior.

bgcolor
Desaprobado. Sirve para especificar el color
de fondo de la Tabla

cellspacing="pixels o porcentaje"
Sirve para definir el espacio en blanco entre
las celdas de una Tablas.

cellpadding="pixels o porcentaje"
Sirve para determinar el espacio entre el
contenido de una celda y el marco o bordes
de esa celda.

border="pixels"
Sirve para definir un borde externo visible,
de toda la Tabla.

rules="none, groups, rows, cols, all"


Este Atributo hace referencia a los bordes
interiores de una Tabla, y define cuales
sern visibles en pantalla. Sus valores son:

none. Ninguno. Es el valor por defecto.


groups. Aparecern entre grupos de filas
o grupos de columnas (col, rowgroup,
thead, tfoot y tbody). Ya lo veremos.
rows. Aparecern slo entre las filas de la
Tabla.
cols. Aparecern slo entre las columnas
de la Tabla.
all. Aparecern entre todas las filas y
todas las columnas de la Tabla.

id, class, lang, dir, title, style, frame, y


otros relativos a "eventos". Los primeros ya
han sido comentados en otros Elementos.
Otros los veremos en el Captulo SCRIPT.

file:///D|/Manuales/Aprender%20HTML/tablas/tablas2.htm (2 of 5) [27/02/2003 16:56:11]

Cmo crear pginas web. Manual: HTML: Las Tablas: TABLE, CAPTION

Elemento CAPTION
<caption>.....</caption>
Lo utilizaremos si queremos colocar un ttulo
o leyenda por encima o por debajo de la
Tabla.
Requiere etiqueta de cierre.

Atributos y Valores
align="top, bottom, left, right"
Este Atributo est Desaprobado. Sus
valores son:

top. El ttulo aparece encima de la Tabla.


Es el valor por defecto.
bottom. El ttulo aparece debajo de la
Tabla.
left. El ttulo se sita a la izquierda de la
Tabla.
right. El ttulo aparece a la derecha de la
Tabla.

id, class, lang, dir, title, style, y otros


relativos a "eventos". Los primeros ya los
hemos visto en el Elemento P. Los relativos a
sucesos o eventos, los veremos en el
Captulo SCRIPT.

Tabla de 200x150 pixels

file:///D|/Manuales/Aprender%20HTML/tablas/tablas2.htm (3 of 5) [27/02/2003 16:56:11]

Cmo crear pginas web. Manual: HTML: Las Tablas: TABLE, CAPTION

Aqu tenemos una Tabla de una sola fila y


columna y con un ttulo (CAPTION), debajo
que dice "Tabla de 200x150 pixels".
No te preocupes ahora del resto de cdigo
necesario para crear la Tabla. Ya lo veremos
"PASO a PASO": remmember?.
Aviso: Si por casualidad ests utilizando Netscape, es
muy posible que el ttulo te aparezca encima de la
Tabla, en lugar de por debajo, pero eso es otra historia
...

Continuemos en otra pgina, te parece?


TABLAS: Introduccin
ndice HTML
ndice General

Me parece

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/tablas/tablas2.htm (4 of 5) [27/02/2003 16:56:11]

Cmo crear pginas web. Manual: HTML: Las Tablas: TABLE, CAPTION

file:///D|/Manuales/Aprender%20HTML/tablas/tablas2.htm (5 of 5) [27/02/2003 16:56:11]

Cmo crear pginas web. Manual: HTML: Las Tablas: TBODY, THEAD, TFOOT

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML

estudio/Cmo crear tu pgina web: Paso a


Paso

Grupos de Filas: Elementos


THEAD, TFOOT y TBODY
Aunque no siempre las utilicemos, podemos
distinguir tres secciones de filas en una
Tabla:

La Seccin de Cabecera (HEAD).


La Seccin del Cuerpo (BODY).
La Seccin del Pie de Tabla (FOOT).

Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

<thead>.....</thead>
Lo podemos utilizar para presentar un ttulo
en la cabecera de la Tabla. Este ttulo puede
ser una descripcin genrica de la
informacin contenida en las columnas de la
Tabla. Este ttulo o descripcin aparece
dentro de la Tabla. No confundir con el
Elemento CAPTION.
Este Elemento delimita la Seccin Cabecera
de la Tabla.
La etiqueta de cierre es opcional.

file:///D|/Manuales/Aprender%20HTML/tablas/tablas3.htm (1 of 5) [27/02/2003 16:56:12]

Cmo crear pginas web. Manual: HTML: Las Tablas: TBODY, THEAD, TFOOT

Vuestras
colaboraciones
Sugerencias

<tbody>.....</tbody>
Dentro de este Elemento colocamos todas
las filas y columnas que forman el Cuerpo de
la Tabla.
La etiqueta de cierre es opcional.

SALIDA
<tfoot>.....</tfoot>
Podemos utilizarlo para definir informacin al
pie de la Tabla. Este Elemento delimita la
Seccin del Pie de Tabla.
La etiqueta de cierre es opcional.

Atributos y Valores comunes


principales
align="left, center, right, justify, char"
Sirve para especificar la alineacin de datos
y alineacin de texto en una celda:

left. Es el valor por defecto de la Tabla.


Sita el contenido a la izquierda y alinea
el texto por la izquierda.
center. Centra el contenido y el texto. Es
el valor por defecto de la Cabecera de
Tabla.
right. Sita el contenido a la derecha y
justifica el texto por la derecha.
justify. Justifica el texto. (doble
justificacin izquierda y derecha).
char. Alinea el texto con respecto a un
carcter especfico.

valign="top, middle, bottom, baseline"


Sirve para especificar la posicin vertical
dentro de una celda:

top. El contenido se sita en la parte


superior de la celda.
middle. Es el valor por defecto. El
contenido se sita centrado verticalmente
en la celda.
bottom. El contenido se sita en la parte
inferior de la celda.

file:///D|/Manuales/Aprender%20HTML/tablas/tablas3.htm (2 of 5) [27/02/2003 16:56:12]

Cmo crear pginas web. Manual: HTML: Las Tablas: TBODY, THEAD, TFOOT

baseline. Si se define este valor en una


celda, la primera lnea de texto del resto
de celdas de la misma fila, quedar
alineado en la misma lnea de base
comn, definida en aquella primera celda.

char="carcter"
Sirve para especificar el "carcter" respecto
al cual se alinear el texto, en el caso de
que el Valor del Atributo align="char".

charoff="medida de longitud"
Sirve para indicar el espacio de separacin
entre el texto de la lnea y el carcter
definido en el Atributo char.

id, class, lang, dir, title, style, y otros


relativos a "eventos".
La mayora ya los hemos visto en el
Elemento P. Los relativos a eventos o
sucesos los veremos en SCRIPT.

Estos tres Elementos dividen la Tabla en tres


secciones internas diferenciadas. Cabecera,
Cuerpo y Pie.
Yo nunca he utilizado los Elementos THEAD
y TFOOT, porque no suelo hacer tablas de
datos, de momento. Pero son muy tiles en
las Tablas de datos tipo hoja de clculo, etc.
Si los utilizas, ten en cuenta lo siguiente:

En el cdigo de la Tabla, el Elemento


TFOOT debe figurar antes del Elemento
TBODY, para que el navegador pueda
presentar el Pie de Tabla, antes de
presentar todas las filas y columnas de

file:///D|/Manuales/Aprender%20HTML/tablas/tablas3.htm (3 of 5) [27/02/2003 16:56:12]

Cmo crear pginas web. Manual: HTML: Las Tablas: TBODY, THEAD, TFOOT

datos.
<table>
<thead>
La informacin de cabecera
que ya veremos como se
codifica.
</thead>
<tfoot>
La informacin de pie de
tabla que ya veremos como se
codifica.
</tfoot>
<tbody>
Todo el Cuerpo de la Tabla de
ya veremos como se codifica.
</tbody>
</table>

Una Tabla puede tener ms de un


Cuerpo. Si la Tabla slo posee un
Cuerpo, y no tiene definidas las
secciones Cabecera y Pie, el Elemento
TBODY no es necesario.

Recuerda que las etiquetas de cierre son


opcionales.

Nos vamos
Tablas: TABLE y CAPTION
ndice HTML

file:///D|/Manuales/Aprender%20HTML/tablas/tablas3.htm (4 of 5) [27/02/2003 16:56:12]

Vale

Cmo crear pginas web. Manual: HTML: Las Tablas: TBODY, THEAD, TFOOT

ndice General
| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/tablas/tablas3.htm (5 of 5) [27/02/2003 16:56:12]

Cmo crear pginas web. Manual: HTML: Las Tablas: COLGROUP y COL

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

estudio/Cmo crear tu pgina web: Paso a


Paso

Grupos de columnas: Elementos


COLGROUP y COL
Al igual que tenemos unos grupos de Filas,
tenemos unos grupos de Columnas.
Estos Elementos pueden utilizarse para
definir grupos de Columnas dentro de una
Tabla.
Estos grupos forman divisiones estructurales
dentro de la Tabla, que podemos utilizar a
travs de Hojas de Estilo o simple HTML,
para definir estilos o caractersticas
concretos, que afectarn a un determinado
Grupo de columnas.
La diferencia bsica entre COLGROUP y
COL, es que podemos utilizar COL para
definir un estilo o caracterstica, que ser
compartido por varias columnas, sin que
stas formen explcitamente un Grupo de
Columnas.

Entrada
Colaboraciones

El tipo de Tabla y la clase de informacin


que contenga, determinar si utilizamos, o
no, estos Elementos.

file:///D|/Manuales/Aprender%20HTML/tablas/tablas4.htm (1 of 4) [27/02/2003 16:56:13]

Cmo crear pginas web. Manual: HTML: Las Tablas: COLGROUP y COL

Vuestras
colaboraciones
Sugerencias
SALIDA

Si no queremos diferenciar Grupos de


columnas, evidentemente no usaremos el
Elemento COLGROUP ya que, entonces,
todas las columnas de esa Tabla formarn
un solo Grupo de forma implcita.
Clarsimo, no?
<colgroup>.....</colgroup>
Evidentemente sirve para definir las
columnas pertenecientes al grupo, y sus
caractersticas.
La etiqueta de cierre es opcional.

Atributos y Valores principales


span="nmero entero >0"
Sirve para especificar el nmero de
columnas del grupo.

width="anchura"
Podemos utilizar pixels, porcentajes y
valores relativos para definir la anchura.
Pero adems, este Atributo permite utilizar
otro sistema de definicin de anchura
formado por un cero y un asterisco "0*".
Esto significa que la anchura de cada
columna que compone el grupo, tendr la
anchura mnima requerida para poder
albergar el contenido de la columna.
Pero cuidado, porque esto implica que el
navegador o el mecanismo que interprete el
cdigo, deber conocer todo el contenido de
la columna antes de poder determinar su
anchura mnima y, por tanto, antes de
empezar a mostrar la Tabla. Esto puede
ralentizar la presentacin en pantalla del
documento.
file:///D|/Manuales/Aprender%20HTML/tablas/tablas4.htm (2 of 4) [27/02/2003 16:56:13]

Cmo crear pginas web. Manual: HTML: Las Tablas: COLGROUP y COL

Por otra parte que sepas que, utilizando el


Elemento COL, que veremos enseguida, se
puede anular y modificar para una o varias
columnas, la anchura definida para todo el
Grupo.

id, class, lang, dir, title, style, align, char,


charoff, valign y otras relativas a "eventos".
Algunos ya los hemos visto en el Elemento P.
Otros en la pgina anterior y otros los
veremos en SCRIPT. Est claro, no?.

<col ...>
Lo utilizaremos para definir propiedades
sobre varias columnas dentro de un Grupo de
Columnas. Este Elemento NO forma Grupos
estructurales de columnas, esto lo hace
COLGROUP, como hemos visto.
Es un Elemento de los llamados "vacos". La
etiqueta de cierre est prohibida.

Atributos y Valores principales


span="nmero entero >0"
Sirve para especificar el nmero de
columnas escogidas por el Elemento COL.
El valor por defecto es 1.

width="anchura"
Sirve para especificar un valor de anchura,
que ser compartido por todas las columnas
definidas en el Atributo span. Esta anchura
definida con el Elemento COL anula, para
las columnas definidas en span, la anchura
general definida mediante COLGROUP,
file:///D|/Manuales/Aprender%20HTML/tablas/tablas4.htm (3 of 4) [27/02/2003 16:56:13]

Cmo crear pginas web. Manual: HTML: Las Tablas: COLGROUP y COL

para todo el Grupo de Columnas.

id, class, lang, dir, title, style, align, char,


charoff, valign, y otros relativos a "eventos".
Puedes recordar su definicin en el Elemento
P, y en la pgina anterior. Los relativos a
eventos o sucesos, en SCRIPT.

Ya falta menos para empezar a "fabricar"


Tablas.
Tenemos que seguir
Tablas: THEAD, TFOOT, TBODY
ndice HTML
ndice General
| arriba | Almacn | Archivo | Pgina Principal

Bueno

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/tablas/tablas4.htm (4 of 4) [27/02/2003 16:56:13]

Cmo crear pginas web. Manual: HTML: Las Tablas: Elementos TR, TH, TD

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Filas: Elemento TR

Declaracin
principios

<tr></tr>
Usaremos este Elemento (table row) para
definir las filas de las Tablas. Servir de
contenedor de las celdas de la fila.
La etiqueta de cierre es opcional.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada

Atributos y Valores principales


id, class, lang, dir, title, style, bgcolor,
align, char, charoff, valign y otros relativos
a "eventos", que encontrars en el Captulo
SCRIPT. Los primeros los vimos en el
Elemento P; bgcolor lo vimos con el
Elemento BODY; el resto en este mismo
Captulo.

Puntos de Vista

Entrada
Colaboraciones

Celdas: Elementos TH y TD
file:///D|/Manuales/Aprender%20HTML/tablas/tablas5.htm (1 of 5) [27/02/2003 16:56:13]

Cmo crear pginas web. Manual: HTML: Las Tablas: Elementos TR, TH, TD

Vuestras
colaboraciones
Sugerencias
SALIDA

<th>.....</th>
<td>.....</td>
Las celdas pueden contener dos tipos de
contenido: informacin de cabecera (TH) y
datos (TD). Por supuesto los datos pueden
ser en forma de texto, imgenes, etc.
El Elemento TH nos sirve para ofrecer
informacin de cabecera de columna, muy
til en el caso de que la columna contenga
datos tipo hoja de clculo, y para facilitar
informacin para mecanismos no visuales.
Las etiquetas de cierre son opcionales.

Atributos y Valores principales


headers="lista de valores del Atributo id"
Sirve para especificar una lista de celdas de
cabecera, que contienen informacin sobre
el contenido de las celdas. La lista debe
estar separada por espacios en blanco, y
las celdas a las que hace referencia, se
deben nombrar utilizando el valor del
Atributo id, definido en ellas.

scope="texto"
Puede utilizarse en lugar del anterior. Sirve
para especificar el conjunto de celdas para
las cuales se facilita informacin a travs de
la celda Cabecera (TH). Puede tomar los
siguientes valores:

row. Cuando la celda actual contiene


informacin de cabecera para el resto de
la fila.
col. Cuando la celda actual contiene
informacin de cabecera para el resto de
la columna.
rowgroup. Cuando la celda cabecera
contiene informacin para el resto del
grupo de filas.

file:///D|/Manuales/Aprender%20HTML/tablas/tablas5.htm (2 of 5) [27/02/2003 16:56:13]

Cmo crear pginas web. Manual: HTML: Las Tablas: Elementos TR, TH, TD

colgroup. Cuando la celda cabecera


contiene informacin para el resto del
grupo de columnas.

abbr="texto"
Sirve por si queremos presentar el
contenido de la celda en forma muy
abreviada.

axis="secuencia de caracteres"
El Valor de este Atributo es una lista de
nombres de categoras, separados por una
coma. Se puede utilizar para situar una
celda en una serie de categoras, que
podemos considerar como "ejes" en un
espacio n-dimensional. Los mecanismos de
interpretacin de cdigo (user agents)
pueden dar acceso a esas categoras al
usuario. El usuario podra, entonces,
solicitar la presentacin de las celdas
pertenecientes a determinadas categoras.
Entonces se le podra presentar una
especie de tabla de contenido, con la
informacin de las celdas de las categoras
solicitadas.

rowspan="nmero"
Sirve para especificar el nmero de filas que
abarca la celda actual. Permite "combinar"
filas. Es muy utilizado. Lo veremos con los
ejemplos. El valor por defecto es "1". Si
asignamos el valor "0", significa que la celda
abarca todas las filas hasta el final de la
Seccin de Tabla.

Colspan="nmero"
Es el equivalente al anterior, pero para las
columnas. Especifica el nmero de
columnas "combinadas" en la celda actual.
El valor por defecto es "1", y el "0" acta
igual que en el caso anterior, respecto de
las columnas.

nowrap
Est Desaprobado en favor de las Hojas de
file:///D|/Manuales/Aprender%20HTML/tablas/tablas5.htm (3 of 5) [27/02/2003 16:56:13]

Cmo crear pginas web. Manual: HTML: Las Tablas: Elementos TR, TH, TD

Estilo. En este Atributo no se especifica


ningn valor. Simplemente si figura en la
especificacin de la celda (TD), hace que la
celda sea tan ancha como el texto situado
en ella. Es decir, evita que se divida el texto
en lneas dentro de la misma celda.
Se debe utilizar con mucho cuidado, pues
puede ensanchar la celda ms all de los
lmites de pantalla visibles.

width="medida de anchura"
Desaprobado en favor de las Hojas de
Estilo. Permite fijar la anchura de la celda.
El comportamiento de este y otros atributos
relativos a anchuras y alturas, puede variar
dependiendo del navegador o "user agent"
en general. Tambin depender de que no
nos equivoquemos y coloquemos contenido
de anchura superior a la definida con el
Atributo.

height="medida de altura"
Desaprobado. Vale lo dicho para el Atributo
anterior, pero referido a la altura de la celda.

id, class, lang, dir, title, style, bgcolor,


align, char, charoff, valign y otros relativos
a "eventos", que encontrars en el Captulo
SCRIPT. Los primeros los vimos en el
Elemento P; bgcolor lo vimos con el
Elemento BODY; el resto en este mismo
Captulo.

Bueno, por fin se ha terminado la


presentacin de los principales Elementos y
Atributos de las Tablas.
Ahora vamos a entrar realmente en materia.
O sea, que tmate un descanso y cuando
file:///D|/Manuales/Aprender%20HTML/tablas/tablas5.htm (4 of 5) [27/02/2003 16:56:13]

Cmo crear pginas web. Manual: HTML: Las Tablas: Elementos TR, TH, TD

ests listo, puedes pasar a la pgina


siguiente.
De acuerdo?
Tablas: COLGROUP y COL
ndice HTML
ndice General
| arriba | Almacn | Archivo | Pgina Principal

S, seor

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/tablas/tablas5.htm (5 of 5) [27/02/2003 16:56:13]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemploss: Intro

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

estudio/Cmo crear tu pgina web: Paso a


Paso

Ejemplos y Comentarios sobre


las Tablas
Las Tablas se sitan dentro de la Seccin del Cuerpo
del documento HTML (BODY). En los ejemplos, no
incluir la Estructura Bsica ni Global, para no alargar
el cdigo. Pero, por esta vez, te recuerdo la Estructura
Bsica del documento HTML, que puedes ver a la
derecha.

Cmo crear tu
pgina web y ebook de HTML

Celda 1, de la fila 1

Celda 2, de la fila 1

Libro de Estilo

Celda 1, de la fila 2

Celda 2, de la fila 2

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

<table border="1" width="100%">


<tr>
<td>Celda 1, de la fila
1</td>
<td>Celda 2, de la fila
1</td>
</tr>
<tr>
<td>Celda 1, de la fila

file:///D|/Manuales/Aprender%20HTML/tablas/tablas6.htm (1 of 6) [27/02/2003 16:56:14]

<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemploss: Intro

Vuestras
colaboraciones
Sugerencias

2</td>
<td>Celda 2, de la fila
2</td>
</tr>
</table>

SALIDA
Aqu tienes una simple Tabla de dos filas y
dos columnas. Por esta vez he puesto
colorines para que veas las Etiquetas
Bsicas.
Tambin he sangrado las lneas de cdigo
para que veas claramente lo siguiente:
Las Celdas (TD) estn contenidas en las
Filas (TR), y las filas estn contenidas en la
Tabla (TABLE), por supuesto.
Como ves, en este ejemplo hay dos Filas
(dos etiquetas TR que se abren y cierran) y
dos Celdas en cada Fila (dos pares de
etiquetas TD que se abren y cierran en cada
fila).
Las etiquetas de cierre, de estos y otros Elementos que
hemos visto, no son obligatorias, pero yo las uso
siempre. Ten en cuenta que si, en un futuro quieres
pasar tus trabajos en HTML, a XML, por ejemplo, una
de las modificaciones que tendrs que hacer, ser
aadir todas las etiquetas de cierre que no hayas
puesto. Esto incluye a los elementos "vacos". Pero esa
es otra historia.

Ms cosas sobre esta Tabla:


He definido un borde de 1 pixel para que
pudieras visualizar la Tabla. De acuerdo?.
(Esto ya te lo he dicho antes, creo).
file:///D|/Manuales/Aprender%20HTML/tablas/tablas6.htm (2 of 6) [27/02/2003 16:56:14]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemploss: Intro

La anchura de la Tabla es porcentual e igual


al 100%:
Pregunta: Cmo es que no ocupa toda la
anchura de tu pantalla?
Respuesta: Si has ledo las pginas
anteriores, recordars que cuando hablamos
de medidas porcentuales, se refieren al
espacio libre. Dado que esta Tabla est
dentro de una Celda de MI Tabla, ocupa el
100% de esa Celda. Est claro, no?.

Tanto la Tabla como las Celdas, tienen la


alineacin predeterminada, es decir a la
izquierda.
Con que la Tabla ocupa el 100% no ves la
diferencia, pero ahora s que la vers:

Celda 1, Celda 2,
de la fila 1 de la fila 1
Celda 1, Celda 2,
de la fila 2 de la fila 2
Esta Tabla es exactamente igual a la anterior,
la nica variacin es que la anchura de la
Tabla est definida como del 50% del
espacio libre.
Fjate como las Celdas se han amoldado a su
contenido. Al no caber el texto en una sola
lnea, automticamente sigue en la siguiente,
file:///D|/Manuales/Aprender%20HTML/tablas/tablas6.htm (3 of 6) [27/02/2003 16:56:14]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemploss: Intro

incrementando la altura de la Celda.


Nota: Si tienes una Resolucin de Pantalla de
1024x768 o superior, es posible que veas el texto
entero en una sola lnea. Esto es debido a que en esta
web he definido mi Tabla base como Variable, en lugar
de Fija. Ya hablaremos de esto.

Celda
2, de
Celda 1, de la fila 1
la fila
1
Celda
2, de
Celda 1, de la fila 2
la fila
2

Qu ha pasado ahora?
Simplemente que he utilizado el Atributo
nowrap. Mira:
<table border="1" width="50%">
<tr>
<td nowrap>Celda 1, de la fila
1</td>
<td>Celda 2, de la fila 2</td>
</tr>
<tr>
<td>Celda 1, de la fila 2</td>
<td>Celda 2, de la fila 2</td>
</tr>
</table>
Te has dado cuenta de dos cosas?:
file:///D|/Manuales/Aprender%20HTML/tablas/tablas6.htm (4 of 6) [27/02/2003 16:56:14]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemploss: Intro

Primera: slo he colocado el Atributo


"nowrap" en la primera Celda, sin embargo, la
segunda Celda, es decir, toda la Columna, ha
asumido dicho Atributo sin que figure en el
cdigo html.
Esto es as porque, como iremos viendo,
determinados Atributos definidos en una
celda, afectan a toda la Columna en que se
encuentra esa Celda.
Ventaja: Esto permite que, sin utilizar otros Elementos
como COLGROUP, al definir, por ejemplo, la anchura
de una Celda, toda la columna adquiera esa "anchura"
automticamente. Ello nos evita repetir esa definicin
de anchura en cada Celda, lo cual nos ahorra el trabajo
de escribir cdigo y, al haber menos cdigo, la pgina
es ms ligera de carga. Est claro, no?.
P.S. Mucho cuidado si utilizas el Atributo nowrap. No
te pases.

Segunda: al no haber definido ninguna


alineacin vertical del texto en las celdas, el
texto se ha situado en el punto medio de la
altura de las Celdas, que es el Valor por
defecto. Visto?.

Pues nos vamos.


Tablas: TR, TH, TD
ndice HTML
ndice General

file:///D|/Manuales/Aprender%20HTML/tablas/tablas6.htm (5 of 6) [27/02/2003 16:56:14]

Vmonos

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemploss: Intro

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/tablas/tablas6.htm (6 of 6) [27/02/2003 16:56:14]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: Alineaciones en celdas

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?

estudio/Cmo crear tu pgina web: Paso a


Paso

Alineaciones: horizontal y vertical

Declaracin
principios
Los 10
mandamientos

Hola
Como

Qu tal?
ests?

PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

<table border="1" width="50%"


align="center">
<tr>
<td width="40%"
align="center">Hola</td>
<td align="right">Qu tal?</td>
</tr>
<tr>
<td>Cmo</td>
<td>ests?</td>
</tr>
</table>

Entrada
Colaboraciones

Si todo ha salido bien, hemos centrado la


Tabla con el Atributo align (as es como lo
haramos en una pgina normal). La Tabla

file:///D|/Manuales/Aprender%20HTML/tablas/tablas7.htm (1 of 5) [27/02/2003 16:56:15]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: Alineaciones en celdas

Vuestras
colaboraciones
Sugerencias
SALIDA

sigue ocupando el 50% del espacio libre.


He definido la anchura de la primera Celda al
40% de la anchura de la TABLA. Ojo!.
Como ves, toda la Columna adquiere la
misma anchura y me he ahorrado cdigo en
la primera celda de la segunda fila.
Imagnate si hubiera 30 filas! (estoy
prescindiendo, de momento, de los Elementos
COLGROUP y COL).

Fjate en la alineacin horizontal del texto. En


la primera celda est centrado, porque he
definido el Atributo align="center" dentro de
la etiqueta de apertura de la celda.
Sin embargo, en el resto de la misma
columna no est centrado.
Esto es porque el Valor de este Atributo no
"pasa" al resto de la columna, como veamos
con el Atributo width.
La segunda celda de la primera fila tiene
definido align="right", con lo que el texto se
alinea por la derecha.
Igual que en el caso anterior, el texto de la
celda inferior, aparece alineado por la
izquierda, que es el valor por defecto.

1,1

2,1

1,2

2,2

Y esto, qu es?:

file:///D|/Manuales/Aprender%20HTML/tablas/tablas7.htm (2 of 5) [27/02/2003 16:56:15]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: Alineaciones en celdas

<table border="1" width="50%">


<tr>
<td width="60%"
height="50">1,1</td>
<td>2,1</td>
</tr>
<tr>
<td>1,2</td>
<td>2,2</td>
</tr>
</table>
Bien, repetimos lo que ya hemos dicho
respecto a la anchura. He definido una
anchura del 60% en una celda, y toda la
columna ha asumido dicha anchura. Nada
nuevo.
Pero fjate en la altura. He definido una altura
de 50 pixels en una celda, y toda la Fila ha
asumido dicha altura. Sigo ahorrndome
cdigo.
Conclusin: si defines la anchura de una
celda, te sirve para toda la Columna.
Si defines la altura de una celda, te sirve
para toda la Fila.
Por supuesto, estoy asumiendo que no
colocamos ningn objeto en las celdas que
supere las medidas definidas, ya sean de
altura o de anchura. Si no, la cosa ya no tiene
gracia.
Veamos algunas alineaciones:

file:///D|/Manuales/Aprender%20HTML/tablas/tablas7.htm (3 of 5) [27/02/2003 16:56:15]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: Alineaciones en celdas

valign="top"

align="center"
valign="top"

align="right"
valign="top"

align="center"

align="right"

align="center"
align="right"
valign="bottom" valign="bottom" valign="bottom"

Est clarsimo, no?.


Slo recuerda que en la alineacin
horizontal, el Valor left, es el valor por
defecto.
En la alineacin vertical, el Valor middle, es
el valor por defecto.
Por lo tanto, no hace falta definirlos. Fjate en
las tres celdas de la primera columna y toda
la segunda fila. Me entiendes, no?.

Pues sigamos.

file:///D|/Manuales/Aprender%20HTML/tablas/tablas7.htm (4 of 5) [27/02/2003 16:56:15]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: Alineaciones en celdas

Tablas: Ejemplos: Introduccin


ndice HTML
ndice General
| arriba | Almacn | Archivo | Pgina Principal

Sigamos

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/tablas/tablas7.htm (5 of 5) [27/02/2003 16:56:15]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: Cellspacing-cellpadding

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos

estudio/Cmo crear tu pgina web: Paso a


Paso

Cellspacing y Cellpadding
Celda 1,1 Celda 2,1
Celda 1,2 Celda 2,2
La misma Tabla que tenamos inicialmente.

PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada

Celda
1,1

Celda
2,1

Celda
1,2

Celda
2,2

Esta es exactamente igual, excepto por un


pequeo detalle.
Celda 1,1 Celda 2,1
Celda 1,2 Celda 2,2

Puntos de Vista

Entrada
Colaboraciones

Lo mismo te digo.
Entre estas tres Tablas, slo ha variado un
pequeo detalle al definir los Atributos en la
Etiqueta de apertura:

file:///D|/Manuales/Aprender%20HTML/tablas/tablas8.htm (1 of 5) [27/02/2003 16:56:16]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: Cellspacing-cellpadding

Vuestras
colaboraciones
Sugerencias

<table border="1" width="50%"


align="center">

SALIDA
<table border="1" width="50%"
align="center"
cellspacing="10">
<table border="1" width="50%
align="center" cellspacing="0">

Fjate en el espacio entre las Celdas:


En el primer caso observa que hay un
pequeo espacio entre las celdas. No he
definido nada en la etiqueta de la Tabla, y ha
tomado el valor por defecto que es de "2"
pixels. Esto puede variar en diferentes
navegadores.
En el segundo caso, he definido un espacio
de "10" pixels, y en el ltimo caso, un espacio
entre celdas de "0" pixels.
Como puedes ver, el tamao de las celdas,
as como su espacio interior no ha variado.
Lo que ha variado ha sido el espacio entre
celdas a nivel de Tabla.
Este Atributo acta sobre toda la Tabla. No
puede definirse a nivel de fila o columna.
Es una forma de aadir espacio en blanco en
file:///D|/Manuales/Aprender%20HTML/tablas/tablas8.htm (2 of 5) [27/02/2003 16:56:16]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: Cellspacing-cellpadding

el interior de una Tabla:


Celda 1,1 Celda 2,1
Celda 1,2 Celda 2,2

Celda
1,1

Celda
2,1

Celda
1,2

Celda
2,2

Celda 1,1 Celda 2,1


Celda 1,2 Celda 2,2
Las mismas Tablas pero sin borde, es decir
border="0". Ves las diferentes
separaciones entre las lneas, y la cantidad
de espacio en blanco en cada caso?

Celda 1,1
Celda 1,2

Celda 2,1
Celda 2,2

Celda 1,1

Celda 2,1

Celda 1,2

Celda 2,2

file:///D|/Manuales/Aprender%20HTML/tablas/tablas8.htm (3 of 5) [27/02/2003 16:56:16]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: Cellspacing-cellpadding

Qu he hecho ahora?
La primera es la ltima tabla de las tres que
hemos visto, pero su anchura es Fija y de
200 pixels.
En la segunda he aadido un pequeo
detalle en la etiqueta de apertura de la Tabla:
<table border="1" width="200"
align="center" cellspacing="0">
<table border="1" width="200"
align="center" cellspacing="0"
cellpadding="10">
Cellpadding aade espacio en blanco en el
interior de la celda. Lo que hace es alejar los
bordes de la celda, del texto.

Si utilizas estos dos Atributos, has de hacerlo


con mucho cuidado:
Pregunta: Qu hubiera pasado si el texto
de las celdas fuera muy largo y en lugar de
dos columnas hubiera bastantes ms?.
Respuesta: Pues, por un lado, el texto
aparecera estrecho y muy largo y, por otro,
en una Tabla Fija, podras superar la anchura
de la pantalla sin darte cuenta, y en
Resoluciones medianas o pequeas se
creara una Barra de Desplazamiento
Horizontal, Pecado Mortal en el diseo de
Pginas Web.

file:///D|/Manuales/Aprender%20HTML/tablas/tablas8.htm (4 of 5) [27/02/2003 16:56:16]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: Cellspacing-cellpadding

Quieres ver un Ejemplo de Pecado Mortal?

Si ests listo podemos seguir.


Tablas: Alineaciones en
celdas
ndice HTML
ndice General

Estoy listo

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/tablas/tablas8.htm (5 of 5) [27/02/2003 16:56:16]

Cmo crear pginas web. Manual: HTML: Las Tablas: Doc de ejemplo 1

Esto
es una
prueba
de
texto
ms o
menos
largo
en una
celda.

Esto
es una
prueba
de
texto
ms o
menos
largo
en una
celda.

Esto
es una
prueba
de
texto
ms o
menos
largo
en una
celda.

Esto
es una
prueba
de
texto
ms o
menos
largo
en una
celda.

Esto
es una
prueba
de
texto
ms o
menos
largo
en una
celda.

Esto
es una
prueba
de
texto
ms o
menos
largo
en una
celda.

Esto
es una
prueba
de
texto
ms o
menos
largo
en una
celda.

Si tu Resolucin de Pantalla es de 640 o de 800, abajo deberas tener una Barra de Desplazamiento Horizontal.
Esto es una
prueba de
texto ms o
menos
largo en
una celda.

Esto es una
prueba de
texto ms o
menos
largo en
una celda.

Esto es una
prueba de
texto ms o
menos
largo en
una celda.

Esto es una
prueba de
texto ms o
menos
largo en
una celda.

Esto es una
prueba de
texto ms o
menos
largo en
una celda.

Esto es una
prueba de
texto ms o
menos
largo en
una celda.

Esto es una
prueba de
texto ms o
menos
largo en
una celda.

Esto es una
prueba de
texto ms o
menos
largo en
una celda.

Fjate tambin en la altura de la primera Tabla con respecto a la segunda.


Ambas Tablas tienen definida la misma anchura, width="585".

VOLVER AL MANUAL

file:///D|/Manuales/Aprender%20HTML/tablas/extabla1.htm [27/02/2003 16:56:17]

Esto
es una
prueba
de
texto
ms o
menos
largo
en una
celda.

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: Colores de fondo y otras cosas 1

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?
Declaracin
principios

Colores de fondo y otras cosas 1

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales

1
4

Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Podemos asignar un color de fondo para la


Tabla, mediante el Atributo bgcolor, en la
etiqueta de Apertura del Elemento TABLE.
Aprovechando la coyuntura, fjate en esas
tres Tablas. Si ests usando Netscape,
seguramente slo vers dos celdas de la
ltima Tabla.

file:///D|/Manuales/Aprender%20HTML/tablas/tablas9.htm (1 of 5) [27/02/2003 16:56:17]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: Colores de fondo y otras cosas 1

Vuestras
colaboraciones
Sugerencias
SALIDA

Para los que estis utilizando el Explorer:


Las tres constan de dos Filas y dos
Columnas, sin embargo, aparte del color de
fondo, se ven muy distintas, verdad?.
Veamos el cdigo:
<table align="center"
width="60%" border="0"
cellspacing="0"
cellpadding="10"
bgcolor="#ff0000">
<tr>
<td width="50%"></td>
<td></td>
</tr>
<tr>
<td> width="50%"</td>
<td></td>
</tr>
</table>
La primera debera aparecer como una lnea
roja. Fjate que he definido un cellpadding de
10 pixels. No tiene ningn efecto, porque las
celdas estn vacas.
Fjate adems, que slo he definido la
anchura de la primera celda de cada
columna. Porqu?
Porque la anchura de una celda ya me
determina la anchura de toda la columna. Por
lo tanto no preciso especificarlo en la celda o
celdas que formen parte de esa columna.
Aunque de poco te sirve si las celdas estn
vacas.
Por lo tanto, cuidado con las Tablas o Filas
vacas, dependiendo del navegador no se

file:///D|/Manuales/Aprender%20HTML/tablas/tablas9.htm (2 of 5) [27/02/2003 16:56:17]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: Colores de fondo y otras cosas 1

ver nada.
Ya veremos formas de poner "algo" que no
moleste y que lo vean todos los navegadores.

La segunda Tabla debera aparecer como


una franja verde, bastante ms alta que la
primera Tabla.
Slo te pondr el cdigo de la Etiqueta de
Apertura de TABLE, el resto es igual que en
el primer caso:
<table align="center"
width="60%" border"=0"
cellspacing="5" cellpadding="0"
bgcolor="#008000">
Fjate que la nica diferencia es que he
definido un cellspacing de 5 pixels.
Recordars que ese Atributo creaba espacio
en blanco dentro de la Tabla. Dado que la
Tabla est vaca, slo obtienes el espacio
que facilitan esos 5 pixels.
De nuevo cuidado con las diferencias entre
navegadores.

Por ltimo, la tercera Tabla es algo distinta.


Algunas celdas tienen "contenido".
Veamos el cdigo:
<table align="center"
width="60%" border="0"
cellspacing="0" cellpadding="0"
bgcolor="cococo">
file:///D|/Manuales/Aprender%20HTML/tablas/tablas9.htm (3 of 5) [27/02/2003 16:56:17]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: Colores de fondo y otras cosas 1

<tr>
<td width="70%">1</td>
<td></td>
</tr>
<tr>
<td></td>
<td>4</td>
</tr>
</table>
Observa que al tener contenido, las celdas ya
se adaptan al tamao de ese contenido, sin
que hayamos definido ninguna medida de
altura para las celdas.
Fjate, tambin, que slo he definido la
anchura de una celda del 70% de la Tabla.
La de debajo no hace falta porque forma
parte de la misma columna, y para las de la
segunda columna, el navegador ya interpreta
que sern del 30% restante de la anchura de
la Tabla. Si no hubiera contenido en las
celdas, no funcionara.
Aviso. Las celdas se adaptan, en principio, al contenido
de las mismas. Por lo tanto, si colocas un contenido
que supere la anchura definida, si le queda espacio
libre, lo tomar de la celda contigua. Si no tiene
espacio, saltar de lnea y seguir debajo.
Si el contenido es una imagen de tamao fijo, puedes
obtener resultados bastante desastrosos. Cuidado con
lo que pones en las celdas y la forma en que defines la
Tabla.
Por ltimo, los resultados pueden variar, dependiendo
del navegador utilizado.

Con la excusa de los Colores de fondo,


veamos ms cosas.

file:///D|/Manuales/Aprender%20HTML/tablas/tablas9.htm (4 of 5) [27/02/2003 16:56:17]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: Colores de fondo y otras cosas 1

Cellspacing y Celpadding
ndice HTML
ndice General
| arriba | Almacn | Archivo | Pgina Principal

De acuerdo

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/tablas/tablas9.htm (5 of 5) [27/02/2003 16:56:17]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: Colores de fondo y otras cosas 2

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Colores de fondo y otras cosas 2

Declaracin
principios

Hasta ahora hemos hablado de anchuras de


Tabla y de Celda. Pero, qu pasa con la
altura?

Los 10
mandamientos

Tabla de color Fucsia

PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

<table align="center" width="70%"


border="1" cellspacing="0"
cellpadding="0" bgcolor="008000"
height="100">
<caption>Tabla de color
Fucsia</caption>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>

file:///D|/Manuales/Aprender%20HTML/tablas/tablas10.htm (1 of 7) [27/02/2003 16:56:18]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: Colores de fondo y otras cosas 2

Vuestras
colaboraciones
Sugerencias
SALIDA

<td>&nbsp;</td>
</tr>
</table>
Aunque muchas veces no te ser posible
definir la altura de una Tabla, siempre que
puedas hazlo, facilitars la carga del
documento.
En este ejemplo he asignado un borde de 1
pixel para que lo veas mejor. Tambin para
que lo puedan ver en distintos navegadores,
he utilizado la forma ms sencilla de provocar
"contenido" en las celdas: el Carcter
Especial &nbsp;
Este Carcter ya lo vimos cuando
hablbamos de Texto.
Tambin le he puesto un Ttulo o Comentario
con el Elemento CAPTION. Si ests usando
Explorer deberas verlo de color azul, negrita
y Verdana tamao de 9 puntos. Si utilizas
Netscape, seguramente lo vers en negro,
normal y Times New Roman.
Bien, lo nico especial es esta Tabla es que
le hemos aadido el Atributo height con un
Valor de 100 pixels.
Fjate que al tener dos Filas, cada una ha
tomado el valor de 50 pixels de altura. Esto
puede variar con los navegadores. Adems,
en este caso, el tamao del contenido no
obliga al reajuste de la altura de las Filas.
La misma Tabla Fucsia

file:///D|/Manuales/Aprender%20HTML/tablas/tablas10.htm (2 of 7) [27/02/2003 16:56:18]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: Colores de fondo y otras cosas 2

Esto es una prueba de texto en


una celda de una Tabla igual a
la anterior. Vamos a ver qu
pasa.

Y esta otra?
En esta Tabla el tamao del "contenido" de
la primera Celda ocupa la mayor parte de la
anchura de la Tabla. Por otro lado, al igual
que en el caso anterior, para la segunda Fila
he utilizado el carcter &nbsp; para que se
pueda visualizar.
Fjate como la celda se ha ido adaptando a la
longitud del texto, y ha quitado espacio a la
celda de la derecha.
Qu pasa si tambin escribimos en la celda
contigua?:
Otra vez la Fucsia

Esto es una
prueba de texto
en una celda de
una Tabla igual
a la anterior.
Vamos a ver
qu pasa.

Esto es una
prueba de texto
en una celda de
una Tabla igual
a la anterior.
Vamos a ver
qu pasa.

Lo que ocurre es que las celdas se adaptan a


los textos e incrementan la "altura" de las
celdas y, por ende, la altura de la Tabla,
saltndose la altura definida de 100 pixels.
Por lo tanto, si defines una altura concreta
file:///D|/Manuales/Aprender%20HTML/tablas/tablas10.htm (3 of 7) [27/02/2003 16:56:18]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: Colores de fondo y otras cosas 2

para una Tabla o Celda, como luego


veremos, ten cuidado de no pasarte. De lo
contrario confundes al navegador y habrs
puesto un cdigo que podras haberte
ahorrado.
Qu ms pasa?:
La mismsima Fucsia

La mismsima Fucsia 1

La mismsima Fucsia 2

La mismsima Fucsia 3

La mismsima Fucsia 4

file:///D|/Manuales/Aprender%20HTML/tablas/tablas10.htm (4 of 7) [27/02/2003 16:56:18]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: Colores de fondo y otras cosas 2

La mismsima Fucsia 5

Aqu tienes 6 Tablas. La primera es


exactamente igual que la que hemos visto al
inicio.
En la segunda (Fucsia 1), he introducido una
imagen de 32 pixels de ancho. No he definido
ninguna anchura para las celdas.
La tercera Tabla (Fucsia 2) es exactamente
igual, pero he definido una anchura del 50%
en la celda contigua. La cosa ha cambiado.
(recuerda que las celdas no estn vacas del
todo, tiene el carcter "&nbsp;").
En la cuarta Tabla (Fucsia 3), he insertado
dos imgenes y no he definido ninguna
anchura de celda. Ellas solas ocupan el 50%
cada una.
La quinta (Fucsia 4), es parecida a la 1. He
insertado una imagen de 100 pixels, no he
definido ninguna anchura, y la celda de la
imagen ocupa ms de los 100 pixels que
necesita.
En la ltima Tabla, no he definido ninguna
anchura, he insertado dos imgenes y
file:///D|/Manuales/Aprender%20HTML/tablas/tablas10.htm (5 of 7) [27/02/2003 16:56:18]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: Colores de fondo y otras cosas 2

domina la celda que tiene la imagen ms


ancha, como es lgico.
En todos los casos anteriores la altura de la
Tabla, definida como de 100 pixels, ha sido
respetada porque la suma de los contenidos
de una columna cualquiera, no ha superado
esos 100 pixels.
Si lo hubieran hecho, pasara igual que en el
caso anterior del texto largo. La Tabla se
adaptara a la longitud necesaria.
Por supuesto todo esto son Ejemplos. En
realidad todas las filas o celdas de esos
ejemplos que no tienen contenido, podran
eliminarse, ya que representan cdigo intil.
Podramos eliminarlas o bien, si formaran
parte de una Tabla mayor y ms compleja,
podramos utilizar el rowspan o colspan que
veremos muy pronto.
Resumen:
Todo lo anterior es slo para decirte tres
cosas:

Cuando trabajes con tablas, utiliza


siempre un borde de 1 pixel, al menos,
para que vayas viendo lo que ocurre.
Luego ya eliminars ese borde cuando
hayas terminado.

Experimenta con las Tablas. Define


anchuras porcentuales de Tabla, luego
fijas. Haz lo mismo con las Celdas. Luego
insrtales textos cortos, textos largos,
imgenes, etc.

file:///D|/Manuales/Aprender%20HTML/tablas/tablas10.htm (6 of 7) [27/02/2003 16:56:18]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: Colores de fondo y otras cosas 2

Define, siempre que puedas, todas las


medidas de las Tablas y de las celdas
necesarias. No slo tendrs mayor
dominio de la Tabla, sino que facilitars
la carga del documento.

Hay bastante ms madera, la quieres?


Colores de fondo y otras
cosas 1
ndice HTML
ndice General

S, ms madera

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/tablas/tablas10.htm (7 of 7) [27/02/2003 16:56:18]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: Colores de fondo y otras cosas 3

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?

estudio/Cmo crear tu pgina web: Paso a


Paso

Colores de fondo y otras cosas 3

Declaracin
principios
Los 10
mandamientos

20 px
40 px

PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada

<table width="70%" border="1"


cellspacing="5" cellpadding="0"
bgcolor="#ff9900"
bordercolor="#0000ff">
<tr>
<td width="40%" height="20">20
px</td>
<td width="60%"></td>
</tr>
<tr>
<td height="40">40 px</td>
<td bgcolor="ffff00"></td>
</tr>
</table>

Colaboraciones

Recuerda que para asegurarte de que


funcionen tanto la altura como la anchura de
file:///D|/Manuales/Aprender%20HTML/tablas/tablas11.htm (1 of 6) [27/02/2003 16:56:19]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: Colores de fondo y otras cosas 3

Vuestras
colaboraciones
Sugerencias
SALIDA

las celdas, stas deben tener "contenido".


De lo contrario los resultados pueden ser
imprevisibles.
Como ya habrs adivinado, en esta Tabla
hay dos celdas totalmente vacas, pero es
porque hay contenido en dos de ellas y estn
definidas la anchuras en las dos celdas
imprescindibles.
De todas formas es mejor asegurarse y
comprobar el resultado.
Aqu tienes altura de Celdas y color de
fondo de celdas. Ah!, y tambin color del
borde de la Tabla.

Si utilizas el Explorer, seguramente vers


encima una Tabla con dos Celdas. La de la
izquierda contiene una imagen de fondo.
Si utilizas Netscape, slo vers una Tabla
con una celda izquierda muy superior en
anchura a la de la derecha, y todo el fondo es
blanco.

Netscape

Ahora SI lo vern los de Netscape. Al menos


file:///D|/Manuales/Aprender%20HTML/tablas/tablas11.htm (2 of 6) [27/02/2003 16:56:19]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: Colores de fondo y otras cosas 3

los que utilicen la versin 4.5


hola netscapista, qu tal?

Tambin puedes utilizar una imagen como


fondo de una Tabla. Los que usan Netscape
slo vern el fondo de la celda superior.
Recuerda que si la celda est vaca, algunos
no lo vern.

Truco a la antigua: filomena.gif

Quin es filomena.gif

Mi amiga filomena.gif es una imagen


transparente de 1x1 pixels.
Es lo que en ingls suelen llamar el
spacer.gif, que antes se utilizaba muchsimo
en la creacin de webs. Hoy en da se utiliza
menos, pero yo sigo utilizndolo, en
ocasiones.
Cuando?

file:///D|/Manuales/Aprender%20HTML/tablas/tablas11.htm (3 of 6) [27/02/2003 16:56:19]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: Colores de fondo y otras cosas 3

Con su tamao original, 1x1 pixels,


cuando he de colocar algn contenido
en una celda de una Tabla que, por la
razn que sea quiero que est vaca.
Si por ejemplo se trata de una celda
con color o imagen de fondo, si la
dejara vaca, es posible que no se
viera, o no se vera en todos los
navegadores.

Cuando quiero definir una altura, o


a veces una anchura de celda y no
me fo de que todos los navegadores
respeten mis deseos. En esos casos
defino a Filomena, por ejemplo, con
una anchura de 1 pixel y una altura de
20 pixels. De esta forma me aseguro
esa altura de 20 pixels.
O viceversa, una altura de 1 pixel y
una anchura de 30 pixels, por ejemplo.
As me aseguro esos 30 pixels de
espacio en blanco o de separacin
entre dos objetos.
Tambin se puede conseguir lo mismo
dejando a Filomena con un tamao de
1x1 pixel y jugar con los Atributos
vspace y hspace. Te acuerdas?. De
todas formas este ltimo mtodo es
menos seguro.

Por cierto, la sangra de los dos prrafos


anteriores, son obra de Filomena. Nunca
utilices a Filomena para esto.
Las sangras deben definirse a travs de las
Hojas de Estilo, que algn da veremos. Esto
es slo un ejemplo de lo que se haca antes.
Entendido?
file:///D|/Manuales/Aprender%20HTML/tablas/tablas11.htm (4 of 6) [27/02/2003 16:56:19]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: Colores de fondo y otras cosas 3

Nota. La sangra del primer prrafo la he obtenido con


una Filomena de 1 pixel de alto y 25 pixels de ancho.
La segunda sangra, con una Filomena de 1x1 pixels y
12 pixels de espacio horizontal con "hspace".
(12+1+12).

Esta Tabla y su imagen de fondo, la vern


tanto los Exploradores, como los que utilizan
Netscape. No ha sido preciso poner ningn
texto en las celdas. Slo a Filomena.

Bueno, ya vale. Te apetece un


combinado?...S?
Pues nos vamos a combinar Filas y
Columnas.
Colores de fondo y otras
cosas 2
ndice HTML
ndice General

file:///D|/Manuales/Aprender%20HTML/tablas/tablas11.htm (5 of 6) [27/02/2003 16:56:19]

Combinemos

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: Colores de fondo y otras cosas 3

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/tablas/tablas11.htm (6 of 6) [27/02/2003 16:56:19]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: colspan y rowspan: p1

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos

estudio/Cmo crear tu pgina web: Paso a Paso

Ejemplos de rowspan y colspan 1


A veces estars interesado, o te vers obligado a
"combinar" varias Filas o Columnas de una Tabla.

Datos obtenidos de GVU's WWW User Surveys, el


28/09/2000

PASO A PASO

Cmo crear tu
pgina web y ebook de HTML

RESOLUCIONES DE PANTALLA
ESTADOS
UNIDOS
%

Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Acum.

EUROPA
%

Acum.

640x480

12,0

12,0

5,8

5,8

800x600

30,5

42,5

29,8

35,6

1024x768

26,0

68,5

38,7

74,2

1152x900

4,3

72,8

5,3

79,6

1280x1024

9,2

81,9

10,7

90,2

Otra

2,9

84,8

2,2

92,4

15,2

100,0

7,6

100,0

No lo sabe

Entrada
Colaboraciones

Bueno, aqu tienes una Tabla muy colorista (gustos


aparte), que nos servir para ver una aplicacin de

file:///D|/Manuales/Aprender%20HTML/tablas/tablas12.htm (1 of 5) [27/02/2003 16:56:20]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: colspan y rowspan: p1

Vuestras
colaboraciones
Sugerencias
SALIDA

los Atributos rowspan y colspan.


Nota. He aadido un ttulo en la parte inferior con el Elemento
CAPTION.
Si usas el Explorer, y en la etiqueta de apertura pones <caption
valign="bottom">, el ttulo aparecer debajo de la Tabla. En
caso contrario aparecer encima de la Tabla.
Si usas Netscape, probablemente aparecer encima de la Tabla
siempre. O al menos es lo que me sucede con la versin 4.5.

Debajo tienes el borrador de la Tabla inicial con un


borde de 1 pixel para que la veas. Fjate que tiene 7
Columnas y 12 Filas.

Y debajo tienes la Tabla sin texto que te pueda


distraer y con un fondo gris para que no se te canse
tanto la vista.
Voy a explicarte y detallarte slo el cdigo que sea
relevante.

file:///D|/Manuales/Aprender%20HTML/tablas/tablas12.htm (2 of 5) [27/02/2003 16:56:20]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: colspan y rowspan: p1

A
B
C
D
E
F
G
H
I
J
1

K 7
L

En la parte ms exterior de la Tabla, nos


encontramos un "marco" de color azul y de 10 pixels.
Los lados "A" y "L" del marco, consisten en Celdas
que combinan las 7 Columnas de que consta la
Tabla:
Lados A y L:
<tr>
<td width="220" height="10"
bgcolor="#0000ff" colspan="7"><img
src="../../../../images/filomena.gif"
width="1" height="10"
alt="filomena.gif (43 bytes)"></td>
</tr>
file:///D|/Manuales/Aprender%20HTML/tablas/tablas12.htm (3 of 5) [27/02/2003 16:56:20]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: colspan y rowspan: p1

Fjate en el colspan="7". La celda est ocupando el


espacio de 7 columnas.
Para evitar posibles problemas, al ser una celda
"vaca", yo he utilizado a Filomena. Tambin puedes
probar con &nbsp;, o probar solamente con las
definiciones de width y height. T mismo.
Lados 1 y 7:
<td width="10" bgcolor="#0000ff"
rowspan="10">img
src="../../../../images/filomena.gif"
width="10" height="1"
alt="filomena.gif (43 bytes)"></td>
Observa dos cosas:
Aqu no he incluido las etiquetas <tr></tr>.
Porqu?.
Porque los lados 1 y 7 combinan Filas, y en esas
filas hay otras Celdas o Columnas aparte de la 1 y la
7. Todas ellas estn contenidas en las etiquetas
<tr></tr>.
En el caso anterior, los lados A y L eran Filas y
combinaban todas las Celdas o Columnas de su Fila.
(Si no lo has entendido no te preocupes, lo vers
cuando t construyas tus Tablas).
Los lados 1 y 7 combinan 10 filas cada uno.
Porqu 10 y no 12?.
Porque combinan desde la Fila B hasta la Fila K. Las
filas A y L, ya estn definidas, en este caso.
Tambin se podra haber hecho de otra manera:
En lugar de definir colspan="7" para A y L, y
file:///D|/Manuales/Aprender%20HTML/tablas/tablas12.htm (4 of 5) [27/02/2003 16:56:20]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: colspan y rowspan: p1

rowspan="10" para 1 y 7, podra haber definido:


Para A y L colspan="5" y para 1 y 7 rowspan="12".
Lo ves?...

Pues si lo has visto, sigamos en la pgina siguiente.


Colores de fondo y otras cosas 3
ndice HTML
ndice General

Claro que lo he visto

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/tablas/tablas12.htm (5 of 5) [27/02/2003 16:56:20]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: colspan y rowspan: p2

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?

estudio/Cmo crear tu pgina web: Paso a


Paso

Ejemplos de Colspan y Rowspan


2

Declaracin
principios
Los 10
mandamientos

A
B

PASO A PASO
ESTADOS
UNIDOS

Cmo crear tu
pgina web y ebook de HTML

C
D
E

Libro de Estilo

Principios
generales

G
H

Accesibilidad

Avanzando

Entrada

K 7
L

Puntos de Vista

Entrada
Colaboraciones

Primero tenemos una Celda que combina 3


"filas":
file:///D|/Manuales/Aprender%20HTML/tablas/tablas13.htm (1 of 3) [27/02/2003 16:56:21]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: colspan y rowspan: p2

Vuestras
colaboraciones
Sugerencias
SALIDA

<td align="center"
rowspan="3">img
src="../images/monitor.gif"
alt="Monitor de Ordenador"
border="0" width="32"
height="33"></td>
La celda est combinando la B, la C y la D.

ESTADOS
UNIDOS

<td align="center" height="25"


bgcolor="#0099cc"
colspan="2"><font
color="#ffffff">ESTADOS
UNIDOS</font></td>
Aqu la celda combina dos columnas, la 3 y la
4.
Lo mismo sera para la Celda de EUROPA,
que combina las columnas 5 y 6, y para el
ttulo RESOLUCIONES DE PANTALLA, que
combina cuatro columnas, de la 3 a la 6.

Veamos ejemplos de COLGROUP Y COL, yo


ya he tenido bastante de colspan y
rowspan, y t?

file:///D|/Manuales/Aprender%20HTML/tablas/tablas13.htm (2 of 3) [27/02/2003 16:56:21]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: colspan y rowspan: p2

Ejemplos de Colspan y Rowspan: 1


ndice HTML
ndice General
| arriba | Almacn | Archivo | Pgina Principal

Yo tambin

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/tablas/tablas13.htm (3 of 3) [27/02/2003 16:56:21]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: COLGROUP y COL

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?

estudio/Cmo crear tu pgina web: Paso a


Paso

Ejemplos de COLGROUP y COL

Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

10

Nota. Ante todo debo decirte que aunque la utilizacin


de estos dos Atributos es muy cmoda para Tablas de
una considerable dimensin, pasa lo mismo que con
los Atributos "width" y "height" que ya hemos visto.
Segn el navegador utilizado, funcionar ms o menos
bien, o no funcionar.

Si ests utilizando el Explorer, deberas


poder distinguir 3 anchuras diferentes y tres
colores distintos, en las columnas de la Tabla
superior: una misma anchura para las
columnas 1 a 5 y color rojo; otra anchura
para las columnas 6 a 8 y color amarillo; y
una tercera anchura para las columnas 9 y 10
y color naranja.

Entrada
Colaboraciones

Si ests utilizando Netscape, es posible que


no puedas distinguir esas tres anchuras
diferentes.

file:///D|/Manuales/Aprender%20HTML/tablas/tablas14.htm (1 of 7) [27/02/2003 16:56:22]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: COLGROUP y COL

Vuestras
colaboraciones
Sugerencias
SALIDA

El cdigo que genera esas anchuras es el


siguiente:
<table border="1"
cellpadding="3" cellspacing="0"
width="300">
<colgroup span="5" width="30"
bgcolor=#ff0000"></colgroup>
<colgroup span="3" width="10"
bgcolor="#ff9900"></colgroup>
<colgroup span="2" width="60"
bgcolor="#ff6600"></colgroup>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
etc. etc.
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
etc. etc.
</tr>
</table>

La comodidad de este sistema es evidente.


Imagnate que en lugar de 10 columnas
tienes 50. Es mucho ms fcil definir
caractersticas por grupos de columnas, que
definirlas de forma individual.
Como ya te he dicho en pginas anteriores,
file:///D|/Manuales/Aprender%20HTML/tablas/tablas14.htm (2 of 7) [27/02/2003 16:56:22]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: COLGROUP y COL

debers vigilar que el "contenido" que


introduzcas en las Celdas, no supere la
anchura definida para esa columna.

10

Si ests utilizando el Explorer, deberas ver


las columnas nmeros 3 y 4, de color rojo.
Si ests utilizando Netscape, probablemente
no lo vers.
El cdigo relevante es el siguiente:
<table border="1"
cellpadding="3" cellspacing="0"
width="300">
<colgroup span="5" width="30">
<col span="2">
<col span="2"
bgcolor="#ff0000">
<col span="1">
</colgroup>
<colgroup span="3" width="10">
</colgroup>
<colgroup span="2" width="60">
</colgroup>
etc. etc. etc.
El cdigo de esta Tabla es igual
al anterior. Slo he variado el
primer grupo de columnas:
El primer grupo de 5 columnas
file:///D|/Manuales/Aprender%20HTML/tablas/tablas14.htm (3 of 7) [27/02/2003 16:56:22]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: COLGROUP y COL

sigue estando definido con una


anchura de 30 pixels. Entonces
sealo las dos primeras columnas
de ese grupo <col span="2"> y no
defino nada nuevo. Por lo tanto
esas dos columnas seguirn
teniendo las mismas
caractersticas que haya definido
para el grupo de cinco.
Pero, a continuacin, sealo las
dos siguientes columnas del
grupo, <col span="2">, es decir,
las nmero 3 y 4. A estas
columnas les defino una
caracterstica especfica, en
este caso un color de fondo.
Luego sealo la ltima columna
del grupo, sin aadirle ninguna
caracterstica, por lo que
mantiene las caractersticas
definidas para todo el grupo.
Dado que se trata de una sola
columna y la ltima del grupo, no
hara falta indicar ="1".
Bastara con poner <col>.
Por ltimo, cierro la etiqueta
del Grupo: </colgroup>.
Este sistema nos permite
"sealar" una o varias columnas
dentro de un Grupo de columnas y
asignarle alguna caracterstica
especfica. Puede ser una
definicin de estilo o anchura
file:///D|/Manuales/Aprender%20HTML/tablas/tablas14.htm (4 of 7) [27/02/2003 16:56:22]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: COLGROUP y COL

diferente, puede ser la


asignacin de un identificador
id, para luego utilizarlo en
Hojas de Estilo, etc.

Un ltimo ejemplo:
1

10

Si utilizas el Explorer deberas


ver todas las columnas de la
misma anchura, y la penltima de
color rojo.
Cdigo relevante:
<table border="1" width="300"
cellpadding="3"
cellspacing="0">
<colgroup width="30">
<col span="8">
<col bgcolor="#ff0000">
<col>
</colgroup>
etc. etc. etc.
Aqu no he definido el Atributo
span en la etiqueta colgroup, por
lo tanto estoy cogiendo todas las
columnas en un nico Grupo.
Sealo las 8 primeras. Paso a la
novena y le defino una
caracterstica especfica para
file:///D|/Manuales/Aprender%20HTML/tablas/tablas14.htm (5 of 7) [27/02/2003 16:56:22]

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: COLGROUP y COL

esa columna.
Sealo la ltima columna. Al se
nica, no defino el atributo
span. Si hubiera un total de 100
columnas, por ejemplo, tendra
que poner span="91". Lo ves?.

Usa tu imaginacin. Recuerda:

Con COLGROUP defines Grupos


de Columnas.
Con COL defines columnas SIN
que formen un Grupo.

Practica, practica y practica.


Recuerda que las Tablas van
dentro de la Seccin BODY del
documento de HTML.

Vamos a ver las Tablas Anidadas.

Ejemplos: Colspan y Rowspan pg. 2


ndice HTML
ndice General

file:///D|/Manuales/Aprender%20HTML/tablas/tablas14.htm (6 of 7) [27/02/2003 16:56:22]

Qu es eso?

Cmo crear pginas web. Manual: HTML: Las Tablas: Ejemplos: COLGROUP y COL

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/tablas/tablas14.htm (7 of 7) [27/02/2003 16:56:22]

Cmo crear pginas web. Manual: HTML: Las Tablas: Tablas Anidadas

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Tablas Anidadas

Declaracin
principios

Las Tablas, como las Listas, se pueden


"anidar". Es decir, puedes definir Tablas
dentro de otras Tablas.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales

Si las Tablas son algo complejas y tienen


bastantes filas y columnas, no es
conveniente anidar ms all del segundo
nivel. Son ms difciles de controlar, de hacer
su mantenimiento y son ms lentas de carga
y de presentacin.
El tercer nivel sera una Tabla dentro de una
Tabla que, a su vez, est dentro de una
Tabla.

Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Este es un anidamiento de Tercer Nivel que


suele ser excesivo.
Consta de tres Tablas de igual definicin: una
fila y una columna, con un borde de 1 pixel y
una anchura del 100% del espacio libre.

file:///D|/Manuales/Aprender%20HTML/tablas/tablas15.htm (1 of 4) [27/02/2003 16:56:23]

Cmo crear pginas web. Manual: HTML: Las Tablas: Tablas Anidadas

Vuestras
colaboraciones
Sugerencias

Estas tres Tablas son muy sencillas y no


representan ningn problema, pero imagnate
que tuvieran varias filas y varias columnas
cada una de ellas....

SALIDA
Este es el cdigo bsico sin Atributos ni
contenido:
<table>
<tr>
<td><table>
<tr>
<td><table>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Salvo error u omisin esto es correcto. Fjate
que es bastante fcil de seguir con estos
colorines y el cdigo bien sangrado. Ya que
no he puesto ni Atributos ni contenido en las
Tablas, te puede servir para recordar aquella
leccin de Geometra que vimos hace das.
Recuerda, la primera etiqueta en abrirse es la
ltima en cerrarse. Los colores no se cruzan
en ningn momento. Ya no te acuerdas?.

file:///D|/Manuales/Aprender%20HTML/tablas/tablas15.htm (2 of 4) [27/02/2003 16:56:23]

Cmo crear pginas web. Manual: HTML: Las Tablas: Tablas Anidadas

Este doble anidamiento tampoco reviste


mayores problemas por su sencillez, si es
que es necesario.
Recuerda:

Las Tablas hay que usarlas slo si son


necesarias.

Anida Tablas slo si es imprescindible.

Si te ves obligado a utilizar una Tabla con


muchas Filas (o columnas), intenta
dividirla en Tablas ms pequeas. Su
velocidad de "presentacin" se
incrementar.

Define el mximo de medidas de anchura


y altura, que te sea posible. Su entrega
ser ms rpida y evitars resultados
imprevisibles.

Tablas Fijas, Tablas Variables y Tablas


Mixtas. Su utilizacin como soporte de
pginas web.
file:///D|/Manuales/Aprender%20HTML/tablas/tablas15.htm (3 of 4) [27/02/2003 16:56:23]

Cmo crear pginas web. Manual: HTML: Las Tablas: Tablas Anidadas

Te interesa?
Ejemplos de COLGROUP y
COL
ndice HTML
ndice General
| arriba | Almacn | Archivo | Pgina Principal

Muchsimo!

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/tablas/tablas15.htm (4 of 4) [27/02/2003 16:56:23]

Cmo crear pginas web. Manual: HTML: Las Tablas: Fijas, Variables y Mixtas

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Tablas Fijas, Variables y Mixtas

Declaracin
principios

Su utilizacin en la composicin de
pginas web.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Nota:Este Captulo debera ms bien formar parte del


apartado de Diseo, en lugar del Manual de HTML,
pero dado que se basa en las Tablas y que este Manual
es algo atpico, he decidido presentarlo ahora.

Como supongo que ya te habrs paseado


bastante por la Web, y echado un vistazo a
los Cdigos Fuente de las pginas, tal y
como te recomend hace ya muchos
captulos, sin duda habrs observado que
una gran mayora de documentos utilizan una
o varias Tablas como soporte de su
contenido.
Vamos a ver varias formas de utilizar las
Tablas en ese sentido. Te incluir algunas
"plantillas" que podrs usar, modificar o,
simplemente, olvidarte de ellas y construir tus
propias plantillas.
Por cierto, la "plantillas" te las mostrar a
pantalla completa para que puedas ver su
aspecto real y con un borde de 1 pixel.

file:///D|/Manuales/Aprender%20HTML/tablas/tablas16.htm (1 of 7) [27/02/2003 16:56:24]

Cmo crear pginas web. Manual: HTML: Las Tablas: Fijas, Variables y Mixtas

Vuestras
colaboraciones
Sugerencias

Pero antes de entrar en materia hablemos,


aunque sea brevemente de la Resolucin de
Pantalla.

SALIDA
Resolucin de Pantalla
No hay que confundir la Resolucin de
Pantalla con las medidas de la pantalla.
La Resolucin de pantalla define el nmero
de pixels en el eje horizontal y vertical de la
pantalla del ordenador, y esto nada tiene que
ver con las medidas en pulgadas o
centmetros de dicha pantalla.
De las diferentes resoluciones que utilizan los
navegantes, hay 3 que aglutinan el 68,5% en
EE.UU. y el 74,2% en Europa (datos a
Septiembre de 2000):
640x480
800x600
1.024x768
De estas tres, en U.S.A. predomina la
segunda con un 30,5%, y en Europa
predomina la tercera, con un 38,7%. Estos
datos son cambiantes, por supuesto.
Adems, lo realmente importante, es que el
12% en U.S.A. y el 5,8% en Europa, trabajan
con la resolucin ms pequea, es decir a
640x480.
Toda esta parrafada es para concluir que si
pretendes que tu web pueda llegar al mayor
file:///D|/Manuales/Aprender%20HTML/tablas/tablas16.htm (2 of 7) [27/02/2003 16:56:24]

Cmo crear pginas web. Manual: HTML: Las Tablas: Fijas, Variables y Mixtas

nmero de navegantes posible debers, hoy


por hoy, crear tus pginas pensando en la
resolucin 640x480.
Evidentemente, si tu web va a ser de uso
exclusivo en una Intranet, donde el equipo y
configuraciones sean homogneos, los
posibles inconvenientes desaparecen.
El principal problema, consecuencia de esas
diferentes Resoluciones, es el espacio
disponible para trabajar y la anchura mxima
aprovechable, a fin de evitar la aparicin de
una Barra de Desplazamiento Horizontal.
El desplazamiento vertical no es grave
(excepto en la Pgina Principal), ya que est
bastante asumido y, a veces, es preferible el
scrolling a una continua carga de pgina tras
pgina.
La importancia real del espacio utilizable en
sentido vertical, es el tenerlo en cuenta para
situar dentro del primer "pantallazo", la
informacin ms relevante de tu web, o
aquello que ms quieras destacar.
Por todo eso, y por el control exacto que
ofrecen, vers que muchas webs estn
soportadas o basadas en Tablas Fijas
definidas segn la menor de esas tres
Resoluciones.
Y hay quienes disponen de varias versiones
que se seleccionarn segn la Resolucin de
pantalla que tenga configurada el visitante.
Pero, cuidado, trabajes con Tablas Fijas,
Variables o Mixtas, o sin Tablas, debers
file:///D|/Manuales/Aprender%20HTML/tablas/tablas16.htm (3 of 7) [27/02/2003 16:56:24]

Cmo crear pginas web. Manual: HTML: Las Tablas: Fijas, Variables y Mixtas

conocer las medidas reales aprovechables


de cada Resolucin, para no llevarte una
sorpresa desagradable.
Cuando hablamos de 640x480, por ejemplo,
lo hacemos porque esa es la Resolucin de
la pantalla, pero eso no significa que
realmente dispongamos de 640 pixels en
sentido horizontal y 480 en sentido vertical.
Si ests mirando tu pantalla en este
momento, vers que el navegador te "quita"
cierto espacio superior e inferior de la
pantalla. Tambin vers una barra de
desplazamiento a tu derecha.
Un problema aadido es el sistema que ests
utilizando, Windows o Mac.
Resumiendo, las medidas que se consideran
"seguras" para esa tres Resoluciones, son las
siguientes:
585x295
745x415
969x583
Por lo tanto, debers tenerlo en cuenta a la
hora de disear el tamao de tus pginas, y
de saber de cuanto espacio vertical dispones
para situar aquello que sea realmente
importante.
Y recuerda que las cosas se ven ms
grandes o ms pequeas, segn la
Resolucin de pantalla.

file:///D|/Manuales/Aprender%20HTML/tablas/tablas16.htm (4 of 7) [27/02/2003 16:56:24]

Cmo crear pginas web. Manual: HTML: Las Tablas: Fijas, Variables y Mixtas

Tablas Variables
En la mayora de los ejemplos que te he
presentado anteriormente, he utilizado Tablas
Variables o Dinmicas.
Son aquellas en las que definimos sus
medidas, bsicamente la anchura, mediante
un porcentaje. Como nos estamos refiriendo
a la composicin de la pgina web, ese
porcentaje lo considerar del 100% de la
pantalla.
Recuerda, sin embargo, que ese porcentaje
se refiere al espacio libre. Puede hacer
referencia a toda la pantalla o, por ejemplo, al
espacio libre de una celda de otra Tabla,
como ya veremos.
Todas las pginas de WebAprendiz las he
basado en Tablas Variables. La nica Tabla
Fija de soporte que he utilizado, es la barra
superior de la Pgina Principal, basada en
imgenes.

Ventajas:

Permiten ocupar todo el ancho de la


pantalla. Esto, en resoluciones medianas
o grandes, te permite incluir ms
"espacio en blanco" o fuentes de mayor
tamao. Sin embargo, esta ventaja se ve
reducida, debido a las diferentes
resoluciones de pantalla existentes, y al
hecho de que siempre debemos disear
pensando en la menor resolucin de

file:///D|/Manuales/Aprender%20HTML/tablas/tablas16.htm (5 of 7) [27/02/2003 16:56:24]

Cmo crear pginas web. Manual: HTML: Las Tablas: Fijas, Variables y Mixtas

pantalla.
Evita que pueda aparecer la horrible
Barra de Desplazamiento Horizontal. Si el
diseo y contenido de una Tabla Variable
es correcto, nunca te aparecer esa
Barra. Podrs distorsionar algn
elemento o alargar la Tabla, pero no
aparecer la dichosa Barra.

Inconvenientes:

Pierdes control en el diseo. Es decir, la


pgina no se visualizar siempre en la
forma que tu deseas. De hecho, tu
pgina se ver diferente en cada tipo de
resolucin de pantalla. Este puede no ser
un gran inconveniente, dependiendo de
la clase de web, si estudias
detenidamente los porcentajes que
utilizas, los tamaos de las imgenes y
del texto que vas a incorporar y aceptas
los resultados.

Si existiera una nica Resolucin de Pantalla,


las Tablas Variables seran ideales, y lo son
en Intranets, por ejemplo, donde todos los
usuarios se supone que disponen del mismo
equipo, sistema, etc.
Segn el tipo de web que quieras hacer y,
especialmente, si deseas un control absoluto
de su visualizacin, debers recurrir a otra
clase de Tabla como soporte de tu pgina.

file:///D|/Manuales/Aprender%20HTML/tablas/tablas16.htm (6 of 7) [27/02/2003 16:56:24]

Cmo crear pginas web. Manual: HTML: Las Tablas: Fijas, Variables y Mixtas

Plantillas:

Tres Tablas Variables. WebAprendiz.


Tabla Variable de 3 celdas con celda
cabecera.
Tabla variable de dos celdas y columna
de separacin.
Tablas Variables anidadas.
Tabla Variable un poco ms compleja.

Recuerda lo dicho sobre la prdida de control


con las Tablas Variables.

Veamos alguna Tabla Fija.


Tablas anidadas
ndice HTML
ndice General

Adelante

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/tablas/tablas16.htm (7 of 7) [27/02/2003 16:56:24]

Cmo crear pginas web. Manual: HTML: Las Tablas: Variables: Ex1

Las 3 Tablas Variables Bsicas utilizadas en


WebAprendiz:

Volver al Manual

Tabla 1. Una Fila. Dos celdas. 75% y 25%


Tabla 2. Dos Filas. Fila 1: dos celdas: 85% y 15%

25%
15%

Tabla 2: fila 2: 100%. Espacio en blanco entre Tablas.

Tabla 3. Celda 123%


Navegacin
izquierda.

Tabla 3. Una Fila. Tres celdas/columnas.


23%-60% y 17%
Aqu va todo el cuerpo de texto y la
navegacin inferior.

Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4


fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/tablas/tablasex1.htm [27/02/2003 16:56:24]

Tabla 3.
Celda 3
17%.
Celda para
opcin de
imprimir, o
libre para
crear
espacio en
blanco.

Cmo crear pginas web: Manual: HTML: Las Tablas: Variables: Ex2

Tabla Variable con dos Filas. La primera fila combina las tres columnas.
Puede servir para ttulo, navegacin, etc.

Celda 1.
20%

Celda 2. 60%

Veamos el cdigo bsico:


<table width="100%">
<tr>
<td width="100"
colspan="3">
</tr>
<tr>
<td width="20%">
<td width="60%">
<td width="20%">
</tr>
</table>

file:///D|/Manuales/Aprender%20HTML/tablas/tablasex2.htm (1 of 2) [27/02/2003 16:56:25]

Celda 3.
20%

Cmo crear pginas web: Manual: HTML: Las Tablas: Variables: Ex2

Volver al Manual

Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4


fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/tablas/tablasex2.htm (2 of 2) [27/02/2003 16:56:25]

Cmo crear pginas web: Manual: HTML: Las Tablas: Variables: Ex3

Celda para ttulos, logos, etc.

Celda
Celda del 20% del
5%

Celda del 75%

Celda para navegacin inferior


La celda del 5%, es para crear una espacio en blanco entre la zona
izquierda y la derecha. Pero recuerda que en las Tablas Variables,
siempre dependes de las diferentes resoluciones de pantalla.
Por ejemplo, ese 5% puede representar una anchura terica de 30
pixels, 40 pixels o 51 pixels o ms. Evidentemente, el aspecto no
ser el mismo, no slo el de esa columna, sino el de toda la Tabla.

Volver al Manual

Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4


fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/tablas/tablasex3.htm [27/02/2003 16:56:25]

Cmo crear pginas web: Manual: HTML: Las Tablas: Variables: Ex4

Por supuesto, puedes anidar Tablas, pero vigila la complejidad final


de las mismas.
Aqu tienes una Tabla como las anteriores, con una celda superior
que combina tres columnas. En el interior de cada una de las otras
tres celdas, se ha colocado otra Tabla.
Las tres Tablas interiores las he definido con una anchura del 95% de
la anchura disponible, para que puedas diferenciarlas mejor y crear
espacio libre entre las tres columnas.

Volver al Manual

Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4


fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/tablas/tablasex4.htm [27/02/2003 16:56:25]

Cmo crear pginas web: Manual: HTML: Las Tablas: Variables: Ex5

WebAprendiz
Celda del cuerpo principal
Tabla
lateral
izquierda.
Puede servir
para
navegacin.
Imita a
un marco
izquierdo.
Est anidada
en la Tabla
General.

Celda del cuerpo principal

Celda del
cuerpo
principal
Celda C.
principal

Celda de la Tabla
central

Celda Tabla
derecha

Celda de la Tabla central. Est anidada


en el cuerpo principal.

Tabla
derecha.
Esta incluida
en el cuerpo
principal.

Celda de la Tabla
central

Tabla anidada en
la Tabla central

Tabla anidada en
la Tabla central

Celda de la Tabla
central

Celda de la Tabla
central

Celda de la Tabla
central

Celda de la Tabla
central

Celda de la
Tabla
derecha.

No hagas caso de los colores ni de las medidas. Al igual que en el resto de


ejemplos, las medidas finales de la pgina y sus colores son decisin tuya. El
ejemplo es para que puedas distinguir las diferentes Tablas y celdas que
componen la pgina.
Esta pgina est basada en una Tabla General Variable del 98%, en lugar
del 100%, y un margen superior de 5 pixels, para que puedas ver sus bordes
de color negro. El fondo es de color blanco.
He dividido la Tabla General en lo que llamar dos "cuerpos" (columnas), si
bien no he utilizado el Atributo tbody en ningn momento. Tu puedes
file:///D|/Manuales/Aprender%20HTML/tablas/tablasex5.htm (1 of 6) [27/02/2003 16:56:26]

Cmo crear pginas web: Manual: HTML: Las Tablas: Variables: Ex5

hacerlo, si quieres.
He anidado una Tabla Izquierda, en la primera columna, que recorre toda la
longitud de la pgina. En esta Tabla se podra situar, por ejemplo un men
de navegacin, como si fuera un marco izquierdo.
Es la Tabla de color azul marino, con borde aguamarina y le he definido una
anchura del 20% (en este caso, es el 20% del 98%, que es la anchura total
de la Tabla General).
Al segundo "cuerpo" le llamaremos Cuerpo principal. Tiene definida una
anchura del 80%, por supuesto, y su fondo es de color gris, con un borde de
color verde claro. A pesar de que veas celdas o tablas de otros colores, todo
forma parte de ese Cuerpo principal. Fjate slo en el color verde claro del
borde.
El Cuerpo principal tiene dos columnas y tres filas:
La columna izquierda, tiene una anchura del 75% (75% del 80%), y tiene
dos celdas libres en la parte superior. En la tercera celda, he definido una
Tabla de color verde oscuro y borde rojo. Esta tabla est definida con una
anchura del 93% (93% del 75%), para crear una separacin, entre la Tabla
Izquierda y la Tabla de su derecha, que luego veremos. La separacin
aparece de color gris, que es el color de fondo del Cuerpo Principal. a esta
Tabla la denominaremos Tabla Central.
La Tabla central consta de dos columnas y cinco filas. La celda ms alta
combina las dos columnas (colspan), y he colocado dos Tablas pequeas en
la tercera fila, de colores amarillo y prpura. Cada una de ellas tiene una
anchura del 50% (50% del 93%).
La columna derecha del Cuerpo principal tiene dos celdas libres en la parte
superior, de color rojizo. En la tercera fila, he definido una Tabla derecha, de
una columna y tres filas.
Por supuesto se pueden quitar o aadir celdas, prescindir de tablas
anidadas, etc. Esto depende de ti.

file:///D|/Manuales/Aprender%20HTML/tablas/tablasex5.htm (2 of 6) [27/02/2003 16:56:26]

Cmo crear pginas web: Manual: HTML: Las Tablas: Variables: Ex5

Este sera el aspecto de la Tabla sin colorines, ni texto y manteniendo los


bordes:

Y este sera el cdigo bsico, sin alturas ni bordes y con las celdas vacas:
<table width="98%" align="center">
<tr align="center" valign="top">
<!--- Cuerpo izquierdo --->
<td width="20%"><center><width="100%">
<tr>
<td width="100%"></td>
file:///D|/Manuales/Aprender%20HTML/tablas/tablasex5.htm (3 of 6) [27/02/2003 16:56:26]

Cmo crear pginas web: Manual: HTML: Las Tablas: Variables: Ex5

</tr>
</table>
</td>
<!-- Cuerpo principal -->
<td width="80%" align="center"><table width="100%">
<tr>
<td width="75%"></td>
<td width="25%"></td>
</tr>
<tr>
<td width="75%"></td>
<td width="25%"></td>
</tr>
<tr>
<td width="75%"><table width="93%"> (Tabla central)
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<td width="100%" colspan="2"></td>
</tr>
<tr>
<td width="50%"><table cellpadding="2"
width="100%"> (Tabla pequea)
<tr>
<td width="100%"></td>
</tr>
<tr>
<td width="100%"></td>
</tr>
</table>
</td>
<td width="50%"><table cellpadding="2"
width="100%"> (Tabla pequea)
file:///D|/Manuales/Aprender%20HTML/tablas/tablasex5.htm (4 of 6) [27/02/2003 16:56:26]

Cmo crear pginas web: Manual: HTML: Las Tablas: Variables: Ex5

<tr>
<td width="100%"></td>
</tr>
<tr>
<td width="100%"></td>
</tr>
</table>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>
</td>
<td width="25%"><table width="100%" cellpadding="2">
(Tabla derecha)
<tr>
<td width="100%"></td>
</tr>
<tr>
<td width="100%"></td>
</tr>
<tr>
<td width="100%"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
file:///D|/Manuales/Aprender%20HTML/tablas/tablasex5.htm (5 of 6) [27/02/2003 16:56:26]

Cmo crear pginas web: Manual: HTML: Las Tablas: Variables: Ex5

Te recuerdo, una vez ms, que se trata de Tablas Variables, por lo que
debes comprobar su aspecto a diferentes resoluciones de pantalla.

Volver al Manual

Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4


fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/tablas/tablasex5.htm (6 of 6) [27/02/2003 16:56:26]

Cmo crear pginas web. Manual: HTML: Las Tablas: Tablas Fijas

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Tablas Fijas

Declaracin
principios

Las Plantillas sern nicamente a la


Resolucin mnima de 640x480, es decir una
anchura mxima de 585 pixels. El
desplazamiento vertical hemos dicho que era
aceptable.
El resto es vlido para cualquier Tabla Fija.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML

Ventajas:

Libro de Estilo

Principios
generales

Accesibilidad
Avanzando

Entrada

Inconvenientes:

Puntos de Vista

Entrada
Colaboraciones

Si las Tablas estn bien diseadas,


tienes un control total de cmo se
visualizar tu web.
Si la Tabla Fija est diseada pensando
en la menor resolucin existente, te
aseguras de que no aparecer la Barra
de Desplazamiento Horizontal.

Si las diseas para la resolucin mnima,


como deberas hacer, a resoluciones
mayores aparecen grandes espacios en
blanco a un lado, o a los lados de la
pgina, dependiendo de si la Tabla est o

file:///D|/Manuales/Aprender%20HTML/tablas/tablas17.htm (1 of 5) [27/02/2003 16:56:27]

Cmo crear pginas web. Manual: HTML: Las Tablas: Tablas Fijas

no centrada en la pantalla.

Vuestras
colaboraciones
Sugerencias

Plantillas:

SALIDA

Tabla Fija un poco ms compleja.

Tablas Mixtas
Yo denomino Tablas Mixtas a aquellas tablas
soporte, cuyo marco o Tabla General (en el
caso de contener tablas anidadas), est
definido mediante una combinacin de
anchuras fijas y variables.
Con ejemplos lo veremos mejor.
Dado que las Tablas Mixtas resultan de una
combinacin de las variables y las fijas
compartirn, parcialmente, sus
caractersticas.
Ventajas:

Permiten un control parcial del diseo.


Esto puede ser ms que suficiente
dependiendo del tipo de pgina que ests
diseando.
Segn como las disees, permiten ocupar
todo el ancho disponible de pantalla en las
diferentes Resoluciones. De nuevo, hay
que tener en cuenta el tipo de pgina o,
mejor dicho, el tipo de contenido de esa
pgina.

file:///D|/Manuales/Aprender%20HTML/tablas/tablas17.htm (2 of 5) [27/02/2003 16:56:27]

Cmo crear pginas web. Manual: HTML: Las Tablas: Tablas Fijas

Inconvenientes:

No dispones del control total. Esto puede


ser un inconveniente en muchos casos.

Plantillas:

Tabla Mixta simple.


Tabla simple con separadores.

Por fin, te propongo una ltima pgina de


ejemplos de cosas varias relacionadas con
las Tablas:

Cosas de las Tablas

Bueno, creo que de momento ya tienes


suficiente informacin sobre las Tablas.
Comentarios y recordatorios:

Utiliza las Tablas slo cuando sean


necesarias.
S prudente a la hora de anidar Tablas.
Evita utilizar el Atributo "borde" con valor
distinto de cero. Resta espacio visual, y
las pantallas de ordenadores ya son
pequeas de por s.
Puedes combinar los tres tipos de Tabla
que hemos visto, pero piensa siempre en
el usuario y en el contenido, ms que en

file:///D|/Manuales/Aprender%20HTML/tablas/tablas17.htm (3 of 5) [27/02/2003 16:56:27]

Cmo crear pginas web. Manual: HTML: Las Tablas: Tablas Fijas

tus grandes diseos. Recuerda: 585


pixels de anchura, es la medida ms
segura.
Algunos de los ejemplos pueden servirte
de base para crear una Pgina Principal.
Otros para pginas secundarias de
diferentes secciones de tu web. Estas
pginas secundarias deberan, en
general, ser uniformes en cuanto a su
diseo.
Si te ves obligado a utilizar una Tabla de
gran tamao, intenta dividirla en tablas
ms pequeas. Las Tablas se pueden
apilar. Es decir, puedes definir una Tabla,
cerrarla, y a continuacin definir una
nueva Tabla. Prubalo.
Nadie te obliga a incluir todo el contenido
de una pgina en una sola Tabla. Puedes
tener contenido dentro de una Tabla, otro
fuera de cualquier Tabla y, si es preciso,
volver luego a incluir contenido dentro de
otra nueva Tabla.

Vamos a ver ahora unos marcos (frames).


Despierta!, ya hemos acabado este Captulo.
Tablas Variables
ndice HTML
ndice General

file:///D|/Manuales/Aprender%20HTML/tablas/tablas17.htm (4 of 5) [27/02/2003 16:56:27]

Ya era hora!!!

Cmo crear pginas web. Manual: HTML: Las Tablas: Tablas Fijas

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/tablas/tablas17.htm (5 of 5) [27/02/2003 16:56:27]

Cmo crear pginas web: Manual: HTML: Las Tablas: Fijas: Ex1

WebAprendiz
Celda del cuerpo principal
Tabla
lateral
izquierda.
Puede servir
para
navegacin.
Imita a
un marco
izquierdo.
Est anidada
en la Tabla
General.

Celda del cuerpo principal

Celda del
cuerpo
principal
Celda C.
principal

Celda de la Tabla
central

Celda Tabla
derecha

Celda de la Tabla central. Est anidada


en el cuerpo principal.

Tabla
derecha.
Esta incluida
en el cuerpo
principal.

Celda de la Tabla
central

Tabla anidada en
la Tabla central

Tabla anidada en
la Tabla central

Celda de la Tabla
central

Celda de la Tabla
central

Celda de la Tabla
central

Celda de la Tabla
central

Celda de la
Tabla
derecha.

Aqu tenemos la misma Tabla que antes hemos visto como Variable,
pero ahora es Fija. Slo he hecho tres cambios:

La anchura de la Tabla General que antes era del 100%, ahora es


de 585 pixels.
La anchura del "cuerpo"/columna izquierda que antes era del
20%, ahora es de 117 pixels.
La anchura de Cuerpo principal, que antes era del 80%, ahora es
de 468 pixels.

file:///D|/Manuales/Aprender%20HTML/tablas/tablasex6.htm (1 of 3) [27/02/2003 16:56:27]

Cmo crear pginas web: Manual: HTML: Las Tablas: Fijas: Ex1

El resto del cdigo interno de la Tabla General lo he dejado como


estaba, ya que su definicin era porcentual. Ahora, este cdigo
interno sigue siendo variable, pero referido a medidas fijas, dado que
la Tabla General que lo contiene es una Tabla Fija.
Lo que quiero decir con esto, es que en una Tabla Fija que sirva de
soporte, puedes anidar Tablas y definir stas como Variables. Lo
normal, sin embargo, es que en una Tabla Fija, definas todo el cdigo
como fijo, es decir especificando el nmero de pixels de cada
elemento interno.
Aqu tienes la mismsima Tabla, pero ahora he definido todas las
anchuras en nmero de pixels.

WebAprendiz
Tabla
lateral
izquierda.
Puede servir
para
navegacin.
Imita a
un marco
izquierdo.
Est anidada
en la Tabla
General.

Celda del cuerpo principal

Celda del
cuerpo principal

Celda del cuerpo principal

Celda C.
principal

Celda de la Tabla
central

Celda Tabla
derecha

Celda de la Tabla central. Est anidada


en el cuerpo principal.

Tabla
derecha.
Esta incluida
en el cuerpo
principal.

Celda de la Tabla
central

Tabla anidada en
la Tabla central

Tabla anidada en la
Tabla central

Celda de la Tabla
central

Celda de la Tabla
central

file:///D|/Manuales/Aprender%20HTML/tablas/tablasex6.htm (2 of 3) [27/02/2003 16:56:27]

Cmo crear pginas web: Manual: HTML: Las Tablas: Fijas: Ex1

Celda de la Tabla
central

Celda de la Tabla
central

Volver al Manual

Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4


fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/tablas/tablasex6.htm (3 of 3) [27/02/2003 16:56:27]

Celda de la
Tabla
derecha.

Cmo crear pginas web: Manual: HTML: Las Tablas: Mixtas: Ex1

Tabla Mixta Simple


Anchura de la Tabla del 100% (aqu 98% para que
puedas ver los bordes)
Celda izquierda anchura de 150 pixels
Celda derecha anchura del 100%

He definido una anchura fija a la izquierda, para navegacin, por


ejemplo. La celda de la derecha la he definido al 100%, por lo que se
extender hasta el tope derecho de la pantalla, independientemente
de la Resolucin.
Evidentemente, tenemos el control de la anchura total, tenemos
control de la anchura izquierda, pero no tenemos el control de la zona
derecha, si tenemos en cuenta las diferentes Resoluciones. Pero eso
puede no tener ninguna importancia, dependiendo del tipo de pgina
de que se trate.
Imagnate una pgina con men de navegacin a la izquierda, o
imgenes y texto en la izquierda, y a la derecha nicamente texto.
Esta Tabla podra ser ideal para este tipo de pgina, si no nos
importa que la longitud de las lneas de texto de la derecha, varen
con las diferentes resoluciones.
Ejemplo:
file:///D|/Manuales/Aprender%20HTML/tablas/tablasex7.htm (1 of 3) [27/02/2003 16:56:28]

Cmo crear pginas web: Manual: HTML: Las Tablas: Mixtas: Ex1

Ests en:

La historia de mi vida
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diem nonummy nibh euismod tincidunt ut lacreet
dolore magna aliguam erat volutpat. Ut wisis enim ad
minim veniam, quis nostrud exerci tution ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.
WebAprendiz
Duis te feugifacilisi. Duis autem dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore
La web que
contiene el manual eu feugiat nulla facilisis at vero eros et accumsan et iusto
de HTML ms largo odio dignissim qui blandit praesent luptatum zzril delenit
au gue duis dolore te feugat nulla facilisi.
en toda la Net.
Luptatum:
Y, adems, es
gratis.
Qu ms quieres? Media docena de huevos frescos
Una tacita de caf, de harina de trigo.
Tres cucharas soperas de aceite de oliva.
Ut wisis enim ad minim veniam, quis nostrud exerci tution
ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
Duis te feugifacilisi

Evidentemente a esta Tabla le falta "espacio en blanco" entre las


columnas, y es as, a pesar de las siguientes "trampas":

Para asegurarme los 150 pixels de anchura de la columna


izquierda, he utilizado a Filomena con una anchura de 150 pixels.

file:///D|/Manuales/Aprender%20HTML/tablas/tablasex7.htm (2 of 3) [27/02/2003 16:56:28]

Cmo crear pginas web: Manual: HTML: Las Tablas: Mixtas: Ex1

El texto de la columna derecha tiene un margen izquierdo de 5


pixels y un margen derecho de 3 pixels.

Podra haber incrementado el margen del texto, cellpadding,


cellspacing, etc., pero tambin hay otras formas de obtener ms
holgura en el documento. Lo veremos en el prximo ejemplo.
Ahora veamos el cdigo bsico de esta Tabla:
<table width="98%" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="150"></td>
<td width="100%"></td>
</tr>
</table>
Por supuesto, la columna "fija" de la Tabla tambin podra situarse en
la parte derecha de la misma:
<table width="98%" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="100%"></td>
<td width="150"></td>
</tr>
</table>

Volver al Manual

Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4


fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/tablas/tablasex7.htm (3 of 3) [27/02/2003 16:56:28]

Cmo crear pginas web: Manual: HTML: Las Tablas: Mixtas: Ex2

Tabla Simple Mixta.


Columna espaciadora de 10 pixels.
Columna fija de 125 pixels a la izquierda.
Columna espaciadora de 30 pixels.
Columna del cuerpo principal con anchura del
100%
Columna espaciadora derecha de 20 pixels
De esta forma podemos crear "zonas en blanco" en el interior de la
Tabla, de forma que su contenido no se apretuje.
Por supuesto, dicho contenido te marcar las diferentes medidas, y la
columna fija puede estar situada a la derecha, o simplemente no
existir.
El cdigo tambin es super sencillo:
<table width="98%">
<tr>
<td width="10"></td>
<td width="125"></td>
<td width="30"></td>
<td width="100%"></td>
<td width="20"></td>
</tr>
</table>
Te recuerdo que en todas las Tablas que estamos utilizando como
ejemplos, no vers el efecto final, hasta que incorpores contenido a
sus respectivas celdas. Si deseas el control total de esas celdas fijas,
file:///D|/Manuales/Aprender%20HTML/tablas/tablasex8.htm (1 of 3) [27/02/2003 16:56:28]

Cmo crear pginas web: Manual: HTML: Las Tablas: Mixtas: Ex2

en ocasiones puede ser buena idea el utilizar a Filomena, para evitar


posibles sorpresas.
Fjate como hemos creado espacio horizontal:

Ests en:

La historia de mi vida

WebAprendiz
La web que
contiene el
manual de
HTML ms largo
en toda la Net.
Y, adems, es
gratis.
Qu ms
quieres?
Si quieres ms,
envame un email.
Puede que te
conteste.

Lorem ipsum dolor sit amet, consectetuer


adipiscing elit, sed diem nonummy nibh euismod
tincidunt ut lacreet dolore magna aliguam erat
volutpat. Ut wisis enim ad minim veniam, quis
nostrud exerci tution ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
Duis te feugifacilisi. Duis autem dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit au gue duis dolore
te feugat nulla facilisi.
Luptatum:

Media docena de huevos frescos


Una tacita de caf, de harina de trigo.
Tres cucharas soperas de aceite de oliva.

Ut wisis enim ad minim veniam, quis nostrud exerci


tution ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat.
Duis te feugifacilisi

file:///D|/Manuales/Aprender%20HTML/tablas/tablasex8.htm (2 of 3) [27/02/2003 16:56:28]

Cmo crear pginas web: Manual: HTML: Las Tablas: Mixtas: Ex2

Es espacio horizontal creado es "fijo". La parte variable es el cuerpo


del texto, cuya longitud depender de la Resolucin del usuario. En
cualquier caso, tambin evitamos la aparicin de la Barra de
Desplazamiento Horizontal.

Volver al Manual

Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4


fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/tablas/tablasex8.htm (3 of 3) [27/02/2003 16:56:28]

Cmo crear pginas web: Manual: HTML: Las Tablas: Cosas de las Tablas

Tabla 1
contenido
contenido
contenido

contenido
contenido
contenido
contenido

contenido
contenido
contenido
contenido

contenido
contenido
contenido
contenido

contenido
contenido
contenido
contenido

La Tabla 1 es una parrilla completa, con contenido en todas sus


celdas. visto?
Tabla 2
contenido
contenido
contenido

contenido
contenido
contenido
contenido

contenido

contenido

contenido

contenido

contenido
contenido
contenido
contenido

En la Tabla 2, nos ha convenido dejar un espacio en blanco


dentro de la Tabla. Perfecto. Pero, podemos ahorrarnos cdigo
si "combinamos" esas cuatro celdas vacas, mediante "colspan"
y "rowspan". Vemoslo:
Tabla 2A
contenido

contenido
contenido

Esta fila slo

tiene cuatro

contenido

contenido

contenido

contenido

contenido
contenido
lneas de cdigo

contenido

contenido

contenido

La Tabla 2A tiene menos cdigo que la Tabla 2. Con esto quiero


decir que si despus de construir una Tabla, has dejado celdas
vacas, intenta combinarlas para reducir el "peso" de la pgina.

Tabla 3
contenido
contenido

contenido
contenido
contenido

contenido
contenido
contenido

contenido
contenido

file:///D|/Manuales/Aprender%20HTML/tablas/tablasex9.htm (1 of 3) [27/02/2003 16:56:28]

contenido

Cmo crear pginas web: Manual: HTML: Las Tablas: Cosas de las Tablas

contenido

contenido

contenido

What's this? Qu he hecho aqu? He dejado celdas vacas?


He combinado esas celdas vacas?
Ni lo uno ni lo otro, aqu simplemente he "eliminado" celdas.
Mira:

Tabla 3
contenido
contenido
contenido

contenido
contenido
contenido
contenido

contenido
contenido
contenido
contenido

contenido
contenido

contenido

He eliminado dos celdas de la cuarta columna y tres celdas de la


quinta. Nadie te obliga a que las Tablas sean "parrillas"
perfectas, pero ten mucho cuidado cuando elimines celdas,
espacialmente si estn situadas en el interior de la Tabla. Te
puedes llevar algunas sorpresas.
Prueba a eliminar alguna celda del interior de una Tabla y
observa cmo reaccionan las filas y columnas.

Tabla 4
contenido
contenido
contenido

contenido
contenido
contenido
contenido

contenido
contenido
contenido
contenido

contenido
contenido
contenido
contenido

contenido
contenido

Tabla 4

contenido

contenido

contenido

contenido

file:///D|/Manuales/Aprender%20HTML/tablas/tablasex9.htm (2 of 3) [27/02/2003 16:56:28]

contenido

Cmo crear pginas web: Manual: HTML: Las Tablas: Cosas de las Tablas

contenido
contenido
contenido

contenido
contenido
contenido

contenido
contenido
contenido

contenido
contenido
contenido

contenido
contenido

En la Tabla 4 he eliminado una celda de la tercera fila. Las celdas


se desplazan hacia la izquierda, dejando un espacio en blanco a
su derecha. Cuidado, tal vez ese no era el efecto que queras
obtener.Todo depende, ya lo sabes.

Volver al Manual

Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4


fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/tablas/tablasex9.htm (3 of 3) [27/02/2003 16:56:28]

Cmo crear pginas web. Manual: HTML: Los Marcos: Introduccin

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

5 DIN-A4

Qu es el
Estudio?

Los Marcos

Declaracin
principios

Los marcos nos permiten presentar


diferentes documentos en diferentes
"secciones" que, adems pueden ser
diferentes ventanas. Su utilizacin bsica
consiste en "fijar" cierta informacin en uno o
varios marcos, y permitir la variacin de
documentos en otro marco.
Por ejemplo, la barra de men que ves a tu
izquierda, de color azul, podra haber sido un
marco, as como la barra superior de la
pantalla. La zona del texto que ests leyendo,
sera un tercer marco, donde se cargaran los
documentos seleccionados el el marco-men
de la izquierda. Est claro, no?.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales

Entrada
Puntos de Vista

Entrada
Colaboraciones

Marcos II
5 DIN-A4

Accesibilidad
Avanzando

Marcos I

Su utilizacin se ha incrementado en los


ltimos aos, al reconocerlos la mayora de
los navegadores. Sin embargo, esto an no
es cierto al ciento por ciento. Por lo tanto, si
piensas utilizar marcos, deberas facilitar una
versin "sin marcos", si es que quieres que tu
web sea accesible al mayor nmero de
visitantes posible.

file:///D|/Manuales/Aprender%20HTML/marcos/marcos1.htm (1 of 3) [27/02/2003 16:56:29]

Cmo crear pginas web. Manual: HTML: Los Marcos: Introduccin

Sugerencias

Como siempre, primero veremos los


Elementos y Atributos de los marcos, y luego
ya pondr algunos ejemplos para que lo
tengas ms claro.

SALIDA

Antes que nada, dos cosas:

Vuestras
colaboraciones

Te acuerdas de la Estructura Global y


Estructura Bsica de un documento?.
Bien, pues para la definicin de las
pginas de marcos, debers olvidarte del
Elemento BODY. En su lugar
utilizaremos el Elemento FRAMESET. La
versin "sin marcos", la incluiremos
dentro de ese Elemento, mediante
NOFRAMES.

La definicin de la versin de HTML, que


era la primera lnea de cdigo del
documento, y a la que llambamos
"sombrero", tambin vara en las pginas
de marcos. Aqu tienes un ejemplo:
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01
Frameset//EN">

Bueno, empecemos ya. Pasa a la siguiente


pgina.
Las Tablas: Tablas Fijas
ndice HTML
ndice General

file:///D|/Manuales/Aprender%20HTML/marcos/marcos1.htm (2 of 3) [27/02/2003 16:56:29]

Si seor

Cmo crear pginas web. Manual: HTML: Los Marcos: Introduccin

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/marcos/marcos1.htm (3 of 3) [27/02/2003 16:56:29]

Cmo crear pginas web. Manual: HTML: Los Marcos: Elementos FRAMESET, FRAME y NOFRAMES

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Elemento FRAMESET

Declaracin
principios

<frameset>.....</frameset>
Este Elemento sirve para definir el nmero de
espacios rectangulares que deseamos y su
tamao. En cada uno de esos espacios,
situaremos un marco.
Requiere etiqueta de cierre.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML

Atributos y Valores

Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

rows="medida de altura"
Mediante este Atributo, definimos la altura
de los marcos horizontales. Puede ser en
pixels, porcentaje o un tamao relativo. El
valor por defecto es 100%, lo que significa,
una fila.

cols="medida de anchura"
Sirve para definir el tamao de los marcos
verticales. Tambin puede ser en pixels,
porcentaje o una medida relativa. El valor
por defecto es 100%, lo que significa una
sola columna.

id, class, title, style, onload y onunload.


file:///D|/Manuales/Aprender%20HTML/marcos/marcos2.htm (1 of 5) [27/02/2003 16:56:30]

Cmo crear pginas web. Manual: HTML: Los Marcos: Elementos FRAMESET, FRAME y NOFRAMES

Vuestras
colaboraciones

Los tres primeros ya los hemos visto en el


Elemento P, y los ltimos los veremos en el
Captulo SCRIPT.

Sugerencias
SALIDA

Elemento FRAME
<frame>
Sirve para definir el contenido y apariencia de
un marco. Su etiqueta se incluye dentro de
las etiquetas del Elemento FRAMESET.
Etiqueta de cierre prohibida.

Atributos y Valores
name="texto"
Sirve para asignar un nombre al marco. Muy
til para poder dirigirnos a dicho marco a
travs del Atributo target, que luego
veremos.

longdesc="URL"
Sirve para especificar un vnculo que
contenga una amplia descripcin del marco.
Debe ser una descripcin bastante ms
extensa que la que ya proporciona el
Atributo title.

src="URL"
Con este Atributo especificaremos la
direccin del archivo que se mostrar en el
marco.

noresize
Si incluimos este Atributo, el usuario no
podr variar el tamao que hayamos
definido para el marco.

scrolling="auto; yes; no"


file:///D|/Manuales/Aprender%20HTML/marcos/marcos2.htm (2 of 5) [27/02/2003 16:56:30]

Cmo crear pginas web. Manual: HTML: Los Marcos: Elementos FRAMESET, FRAME y NOFRAMES

Especifica la funcionalidad de
desplazamiento (scrolling) del marco:

auto. Aparecer barra de desplazamiento


de forma automtica, fi fuera necesaria.
yes. Se mostrar siempre la barra de
desplazamiento del marco.
no.No aparecer nunca la barra de
desplazamiento.

frameborder="1; 0"
Sirve para definir si queremos que sea
visible un borde de separacin en el marco:

1. Ser visible un borde entre ese marco


y cualquier marco adyacente. Este el el
valor por defecto.
0. No ser visible ningn borde.

marginwidth="pixels"
Especifica el margen de espacio libre
(margen) a la izquierda y a la derecha del
contenido, con respecto a los mrgenes del
marco. Su valor debe ser mayor que "0", y
el valor por defecto depende del navegador
o mecanismo alternativo (user agent).

marginheight="pixels"
Igual que el anterior, pero referido al
espacio vertical. El nmero de pixels de
margen que queremos entre el contenido
del marco y los mrgenes del propio marco.
Su valor debe ser superior a "0", y el valor
por defecto depende del navegador o
mecanismo alternativo.

id, class, title, style, que ya hemos visto en


el Elemento P y los relativos a sucesos, que
veremos en el Captulo SCRIPT.

Elemento NOFRAMES
<noframes>.......</noframes>

file:///D|/Manuales/Aprender%20HTML/marcos/marcos2.htm (3 of 5) [27/02/2003 16:56:30]

Cmo crear pginas web. Manual: HTML: Los Marcos: Elementos FRAMESET, FRAME y NOFRAMES

Lo utilizaremos para incluir el contenido que


se mostrar al usuario, cuando el navegador
u otro mecanismo alternativo, no pueda
mostrar informacin basada en marcos, o
cuando su configuracin indique que no
deben mostrarse los marcos.
Requiere etiqueta de cierre.
Considera este Elemento de uso obligatorio.

Atributos y Valores
id, class, lang, dir, title, style y los relativos
a "eventos", que ya veremos en SCRIPT. Los
primeros ya los vimos con el Elemento P.

Bueno, ya tenemos los Elementos principales


y podemos pasar a ver los ejemplos.
Vamos?
Los marcos: Introduccin
ndice HTML
ndice General
| arriba | Almacn | Archivo | Pgina Principal

Vamos

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/marcos/marcos2.htm (4 of 5) [27/02/2003 16:56:30]

Cmo crear pginas web. Manual: HTML: Los Marcos: Elementos FRAMESET, FRAME y NOFRAMES

file:///D|/Manuales/Aprender%20HTML/marcos/marcos2.htm (5 of 5) [27/02/2003 16:56:30]

Cmo crear pginas web. Manual: HTML: Los Marcos: Ejemplos p1

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales

estudio/Cmo crear tu pgina web: Paso a


Paso

Ejemplos de marcos 1

Antes de empezar a ver ejemplos, varias


cosas:

Entrada
Puntos de Vista

Entrada
Colaboraciones

Si no defines ni filas ni columnas, el


marco ocupar toda la ventana.

Accesibilidad
Avanzando

El Atributo de FRAMESET, rows (filas),


define zonas para marcos horizontales, y
cols (columnas), zonas para marcos
verticales.

Si no defines el Atributo rows, cada


columna ocupar toda la longitud de la
pgina.

Si no defines el Atributo cols, cada fila


ocupar toda la anchura de la pgina.

Los marcos se pueden anidar, en la


misma forma que vimos en el Captulo
dedicado a las Listas. (no lo hagas, por
favor).

file:///D|/Manuales/Aprender%20HTML/marcos/marcos3.htm (1 of 6) [27/02/2003 16:56:31]

Cmo crear pginas web. Manual: HTML: Los Marcos: Ejemplos p1

Vuestras
colaboraciones
Sugerencias
SALIDA

El contenido de un marco, debe estar en


un documento distinto al de los marcos,
como ya veremos.

Los marcos tambin pueden ser Fijos,


Variables y Mixtos, como ya vimos con
las Tablas.

Comentarios y Ejemplos
<!DOCTYPE HTML PUBLIC
.........>
<html>
<head>
<title></title>
</head>
<frameset>
Los marcos definidos en la etiqueta
anterior
<noframes>
<body>
La informacin o documento
alternativo
</body>
</noframes>
</frameset>
</html>
Esta es la Estructura Bsica de una pgina
de marcos. Por supuesto faltan cosas que ya
iremos aadiendo. Fjate que el contenido de
NOFRAMES, lo he puesto entre las
etiquetas del Elemento BODY. Segn el
contenido de que se trate, no hace falta
file:///D|/Manuales/Aprender%20HTML/marcos/marcos3.htm (2 of 6) [27/02/2003 16:56:31]

Cmo crear pginas web. Manual: HTML: Los Marcos: Ejemplos p1

utilizar ese Elemento, bastar con utilizar el


Elemento P, por ejemplo, e incluir un link a
otro documento alternativo sin marcos.
En los ejemplos slo voy a incluir el cdigo
imprescindible, y voy a utilizar Tablas para
simular la apariencia de las pginas de
marcos.

(Las zonas grises superior e inferior representan el


espacio que ocupa el navegador. El rectngulo blanco
es la zona de pantalla disponible)

<frameset cols="25%,75%>
<frame src="...">
<frame src="...">
</frameset>
Pgina con dos marcos verticales. Variable,
ya que ambas medidas son porcentuales.
En la etiqueta frame de cada marco, debes
indicar la direccin de la pgina que quieres
que aparezca en ese marco.
No olvides las etiquetas noframes. No las
usar en los ejemplos para no despistarte,
pero debes incluirlas.

file:///D|/Manuales/Aprender%20HTML/marcos/marcos3.htm (3 of 6) [27/02/2003 16:56:31]

Cmo crear pginas web. Manual: HTML: Los Marcos: Ejemplos p1

<frameset rows="25%,75%">
<frame src=".....">
<frame src=".....">
</frameset>
Es exactamente igual que el anterior, excepto
que ahora he utilizado rows, con lo que se
crean marcos horizontales.

Podemos combinar los marcos anteriores:


<frameset rows="25%,75%">
<frame src=".....">
<frameset cols="25%,75%">
<frame src=".....">
<frame ser=".....">
</frameset>
file:///D|/Manuales/Aprender%20HTML/marcos/marcos3.htm (4 of 6) [27/02/2003 16:56:31]

Cmo crear pginas web. Manual: HTML: Los Marcos: Ejemplos p1

</frameset>
Esta es una de las formas ms tpicas de
utilizar los marcos. Crear zonas estticas
para mens de navegacin y/o logos y
nombres de webs.
Los ejemplos que hemos visto son marcos
Variables. Tambin podemos hacerlos Fijos y
Mixtos.
As, en lugar de "25%,75%", en el Atributos
cols, podemos fijar sus medidas en pixels:
cols="130,450". Lo mismo puedes hacer con
rows.
Para conseguir un marco Mixto, ya sea
horizontal o vertical, la mejor forma es utilizar
el carcter "*". Este carcter significa que
dejamos indefinida la medida de ese marco,
con lo que se adaptar al espacio libre de
pantalla. Por ejemplo:
cols="140,*". Para crear un marco vertical
Fijo de 140 pixels y otro indefinido, que se
adaptar al resto de espacio libre a la
derecha del que hemos definido como Fijo.
rows="120,*". Para crear un marco Fijo
horizontal de 120 pixels, y otro indefinido que
se adaptar a la longitud del documento que
contenga.
No alarguemos ms esta pgina.
FRAMESET, FRAME y
NOFRAMES

Totalmente de acuerdo

file:///D|/Manuales/Aprender%20HTML/marcos/marcos3.htm (5 of 6) [27/02/2003 16:56:31]

Cmo crear pginas web. Manual: HTML: Los Marcos: Ejemplos p1

ndice HTML
ndice General
| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/marcos/marcos3.htm (6 of 6) [27/02/2003 16:56:31]

Cmo crear pginas web. Manual: HTML: Los Marcos: Ejemplos p2

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Ejemplos de marcos 2

Declaracin
principios

Hasta ahora hemos visto ejemplos de marcos


sencillos. Podemos complicarlos y aadir
ms y ms marcos, pero te recomiendo que
nunca utilices ms de 3 marcos.

Los 10
mandamientos
PASO A PASO

Veamos alguno ms:

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales

Fijo

Accesibilidad
Avanzando

Entrada

Este ejemplo es para que veas otra forma de


definir las medidas:

Puntos de Vista

Entrada
Colaboraciones

<frameset cols="1*,200,3*">
<frame src=".....">
<frame src=".....">
<frame src=".....">
</frameset>

file:///D|/Manuales/Aprender%20HTML/marcos/marcos4.htm (1 of 4) [27/02/2003 16:56:31]

Cmo crear pginas web. Manual: HTML: Los Marcos: Ejemplos p2

Vuestras
colaboraciones
Sugerencias
SALIDA

Fjate bien en cmo he definido las columnas:

La columna central es Fija y de 200


pixels. No problem.
La primera y tercera son indefinidas,
pero al anteponer un 1 y un 3, estoy
diciendo: del espacio libre que queda
utiliza un 25% para el primer marco de la
izquierda, y el 75% para el tercer marco.
(1+3=4; 4=100%; 1=25%; 3=75%). Est
clarsimo, no?.

<frameset cols="25%,*,25%">
<frame src=".....">
<frame src=".....">
<frame src=".....">
</frameset>
Marcos Variables. El del centro es indefinido
y se adaptar al resto de espacio libre.
Puedes hacer lo mismo, con filas. Puedes
definirlos Mixtos, Fijos, o como quieras.
No voy a ponerte ms ejemplos. Puedes
file:///D|/Manuales/Aprender%20HTML/marcos/marcos4.htm (2 of 4) [27/02/2003 16:56:31]

Cmo crear pginas web. Manual: HTML: Los Marcos: Ejemplos p2

combinar todo lo que hemos visto y utilizar tu


imaginacin, pero no demasiado. No te
excedas con los marcos.
Los Atributos
Slo he utilizado src, pero recuerda que
existen ms Atributos y debes utilizarlos.
<frame name="pepito" src="URL que
proceda" marginwidth="0"
marginheight="0" scolling="auto"
frameborder="no">
Estos son algunos de los Atributos
principales. De name hablaremos enseguida.
La direccin src ya la hemos visto. El
scrolling es mejor dejarlo en "auto", en el
caso de marcos verticales, si no tienes claro
que no va a superar la altura mnima
disponible de pantalla. Habr marcos que
estars seguro que no precisarn
desplazamiento, y por lo tanto puedes
definirlos sin scrolling.
En cuanto a los mrgenes, depender del
contenido del marco y de si has definido un
color de fondo o no. Tu mismo.
El borde del marco, s es importante. A
menos que tengas algn motivo especial, te
aconsejo que lo dejes siempre a "cero",
aunque todo depende, ya lo sabes.
Vamos a ver el Atributo name y su utilidad
como diana para el juego de los dardos.
Sabes jugar a los dardos, no?
file:///D|/Manuales/Aprender%20HTML/marcos/marcos4.htm (3 of 4) [27/02/2003 16:56:31]

Cmo crear pginas web. Manual: HTML: Los Marcos: Ejemplos p2

Marcos: Ejemplos pg. 1


ndice HTML
ndice General

Pokins, pokins, pokins

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/marcos/marcos4.htm (4 of 4) [27/02/2003 16:56:31]

Cmo crear pginas web. Manual: HTML: Los Marcos: Utilizacin de Name y Target

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Marcos: Name y Target

Declaracin
principios

No espero que lo recuerdes, pero en el


Captulo de Hipervnculos, concretamente en
el Elemento A, vimos el Atributo Target y sus
Valores. Target se suele utilizar en vnculos a
ventanas o marcos, mapas de imagen y
formularios.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Si asignamos un nombre a un marco con el


Atributo name, podemos utilizarlo como
destino o diana de hipervnculos definidos en
otro documento.
Por ejemplo:
Supn que WebAprendiz se basara en
marcos. En varios de sus Captulos te he
mostrado ejemplos diversos, ya sea en el
propio documento activo, ya sea dirigindote
a otra pgina mediante el uso de un
hipervnculo.
Imagnate que quiero reservar un marco
donde mostrarte los ejemplos. En el presente
Captulo de Marcos ya has visto varios

file:///D|/Manuales/Aprender%20HTML/marcos/marcos5.htm (1 of 5) [27/02/2003 16:56:32]

Cmo crear pginas web. Manual: HTML: Los Marcos: Utilizacin de Name y Target

Vuestras
colaboraciones
Sugerencias

ejemplos en el propio documento. Ahora


veamos cmo se podra hacer, utilizando
name y target.
Los ejemplos que te he mostrado son:

SALIDA

Tres columnas, fijo, indefinido.


Tres columnas, variable, indefinido.
Navegacin izquierda, variable.
Navegacin superior, variable.
Superior e Izquierda, variable.

Genero un pequeo documento HTML


para cada ejemplo y les asigno los
siguientes nombres:
tricofin.htm
tricovin.htm
niva.htm
nsva.htm
siva.htm

Supn que la pgina de marcos de


WebAprendiz fuera as:

WebAprendiz + Navegacin
E
j
e
m
p
l
o
s

Documentos

file:///D|/Manuales/Aprender%20HTML/marcos/marcos5.htm (2 of 5) [27/02/2003 16:56:32]

Cmo crear pginas web. Manual: HTML: Los Marcos: Utilizacin de Name y Target

<frameset rows="25%,75%">
<frame src="navega.htm">
<frameset cols="25%,75%">
<frame name="ejemplos"
src="ejemplos.htm">
<frame src="principal.htm">
</frameset>
</frameset>
El marco superior podra contener el logo,
nombre y elementos de navegacin, que
estaran definidos en el documento
navega.htm.
Al marco izquierdo, le he asignado el nombre
"ejemplos", y en la definicin del marco,
contiene el documento ejemplos.htm. Este
documento podra ser una simple pgina con
un color determinado de fondo, y nada ms.
El otro marco, es el que contendra el texto, a
travs del documento principal.htm.
Ya tenemos todos los elementos necesarios.
Ahora, en la pgina principal.htm incluimos
los vnculos a los ejemplos de los diferentes
tipos de marcos:
<html>
<head>
<title></title>
</head>
<body>
Aqu habra parte de las
parrafadas que suelo soltarte.

file:///D|/Manuales/Aprender%20HTML/marcos/marcos5.htm (3 of 5) [27/02/2003 16:56:32]

Cmo crear pginas web. Manual: HTML: Los Marcos: Utilizacin de Name y Target

<p>Aqu tienes varios ejemplos


de marcos:</p>
<p><a href="tricofin.htm"
target="ejemplos">Marco de 3
columnas, fijo e
indefinido</a></p>
<p><a href="tricovin.htm"
target="ejemplos">Marco de 3
columnas, variable e
indefinido</a></p>
<p><a href="niva.htm"
target="ejemplos">Navegacin
izquierda, variable</a></p>
<p><a href="nsva.htm"
target="ejemplos">Navegacin
superior, variable</a></p>
<p><a href="siva.htm"
target="ejemplos">Superior e
Izquierda, variable</a></p>
Aqu seguira el documento
normal y los rollos que te
cuento.
</body>
</html>
A medida que fueras activando los vnculos,
los ejemplos de marcos se iran mostrando
en el marco de la izquierda de la pgina.
Los tienes claro?. Esto es slo un ejemplo.
No creas que yo hara eso.
Tambin puede ser til para mostrar fotos o
imgenes, aparte de documentos. Si las fotos
o imgenes fueran todas del mismo tamao,
podras definir un marco Fijo en un rincn, o
file:///D|/Manuales/Aprender%20HTML/marcos/marcos5.htm (4 of 5) [27/02/2003 16:56:32]

Cmo crear pginas web. Manual: HTML: Los Marcos: Utilizacin de Name y Target

donde sea, e ir mostrndolas en l.

Bueno, dejemos el marco de esta pgina y


pasemos a otro marco.
Te parece?
Ejemplos de marcos: pg.
2
ndice HTML
ndice General

Lo hars igualmente...

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/marcos/marcos5.htm (5 of 5) [27/02/2003 16:56:32]

Cmo crear pginas web. Manual: HTML: Los Marcos: Elemento IFRAME

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

estudio/Cmo crear tu pgina web: Paso a


Paso

Elemento IFRAME: marcos en


lnea
<iframe> .....</iframe>
Creas que ya habamos acabado con los
marcos?.
Hemos terminado con los marcos
tradicionales, pero nos quedan los marcos en
lnea tambin llamados flotantes, porque
flotan, claro. Estos marcos van dentro del
documento HTML.Este Elemento no es
reconocido por algunos navegadores, slo
por el Explorer. Por lo tanto, si esta situacin
no vara, no deberas utilizarlos si pretendes
que todos puedan verlos.
Con este Elemento definiremos un marco
flotante. El cdigo ir situado dentro del
BODY del documento, es decir, en algn sitio
entre las etiquetas <body> y </body>.
Requiere etiqueta de cierre.

Entrada
Colaboraciones

Atributos y Valores
file:///D|/Manuales/Aprender%20HTML/marcos/marcos6.htm (1 of 4) [27/02/2003 16:56:33]

Cmo crear pginas web. Manual: HTML: Los Marcos: Elemento IFRAME

Vuestras
colaboraciones
Sugerencias
SALIDA

name, width, height, longdesc, id,class,


title, style, scr, frameborder, marginwidth,
marginheight, scrolling y align.
Todos ellos los hemos visto, ya sea en este
mismo captulo, o en el Elemento P.

Comentarios y Ejemplos
Las etiquetas de IFRAME, sustituyen a las
dos que hemos visto en los marcos, es decir
a FRAMESET y FRAME. Adems, si te has
fijado en los Atributos, vers que los IFRAME
no se pueden variar de tamao por parte del
usuario, por lo tanto no poseen el Atributo
noresize. Y, como ya te he dicho, se incluyen
en documento normal de HTML.
Vamos a construir un marco en lnea con sus
Atributos correspondientes:
Las medidas de los marcos flotantes se
pueden definir en pixels o en porcentaje.
<iframe width="250"
height="200"></iframe>
El contenido del marco flotante lo definiremos
como ya vimos con los otros marcos, con
src:
<iframe width="250"
height="200"
src="arda.htm"></iframe>
En cuanto al borde del marco, el navegador
colocar un borde por defecto, por lo tanto
file:///D|/Manuales/Aprender%20HTML/marcos/marcos6.htm (2 of 4) [27/02/2003 16:56:33]

Cmo crear pginas web. Manual: HTML: Los Marcos: Elemento IFRAME

define el que tu quieras o, si no quieres


borde, especifcalo:
<iframe width="250"
height="200" src="arda.htm"
frameborder="0"></iframe>
Al igual que vimos con las Imgenes,
podemos definir un espacio horizontal y
vertical alrededor del marco, con respecto a
los elementos que se encuentren a su
alrededor:
<iframe width="250"
height="200" src="arda.htm"
frameborder="0" vspace="15"
hspace="15"></iframe>
Podemos tambin asignarle un nombre para
poder utilizarlo junto con el Atributo target, tal
y como hemos visto en los otros marcos:
<iframe width="250"
height="200" src="arda.htm"
frameborder="0" vspace="15"
hspace="15"
name="prueba"></iframe>
El marco flotante aparecer en el lugar del
documento en que sites el cdigo, y
responde a los valores right y left del
Atributo align, de la misma forma que lo
hacan las Imgenes.
Si ests utilizando el Explorer, puedes ver el
marco flotante que acabamos de definir, en
un Documento de Ejemplo.
file:///D|/Manuales/Aprender%20HTML/marcos/marcos6.htm (3 of 4) [27/02/2003 16:56:33]

Cmo crear pginas web. Manual: HTML: Los Marcos: Elemento IFRAME

Si utilizas normalmente Netscape y tienes el


Manual guardado en tu disco duro y, como
aconsej al inicio del Manual, tambin
dispones del Explorer, puedes visualizar el
Documento de Ejemplo, o todo el Manual,
cargndolo en el Explorer.

Bien, ahora s he terminado con los marcos.


Vamos a ver algo de las ya famosas Hojas
de Estilo.

Utilizacin de Name y
Target
ndice HTML
ndice General

No me lo puedo creer

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/marcos/marcos6.htm (4 of 4) [27/02/2003 16:56:33]

Cmo crear pginas web. Manual: HTML: Los Marcos: Elemento IFRAME: Ejemplo

El arduo trabajo de hacer este Manual, o ms bien, este Libro, bien


se merece un descanso de vez en cuando.
Es entonces, cuando lo dejo todo y me voy lejos, lejos del
mundanal ruido, a un lugar perdido en las montaas, en una
provincia no muy lejana.
Es un pueblo de dos casas, de las que slo una est habitada.
Tienen cinco perros preciosos y muchas vacas y terneros.
Por suerte no es fcil encontrar el sitio, y est mas apartado que
muchas de las casas que combinan otros quehaceres con el
turismo rural.
Si algn da termino este Libro, volver a XXXXXXX a recobrar mi
cordura perdida.
Bueno, como puedes ver, con los marcos flotantes tambin se
puede combinar el texto con las imgenes en un documento HTML.
La foto est en el marco que hemos definido antes, y con una
alineacin derecha. No he definido borde porque, supongo que
estars de acuerdo conmigo, queda mejor sin.
Por supuesto, en lugar de una foto, para la que podramos haber
utilizado el Elemento IMG, en el marco se puede situar cualquier
documento normal de HTML.
Volvamos al Manual/Libro

Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4


fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/marcos/exiframe.htm [27/02/2003 16:56:33]

Cmo crear pginas web. Manual: HTML: CSS: Introduccin

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Dale Estilo y CSS

Declaracin
principios

Por fin hemos llegado a las famosas Hojas de


Estilo, que he estado mencionando en todo el
manual.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Introduccin
Las malas noticias primero
En todo el Manual te he repetido 36 veces
que mejor con Hojas de Estilo. Y eso es
cierto.
Lo que ocurre, es que no todos los
navegadores aceptan el 100% de las reglas o
declaraciones de las Hojas de Estilo...Por lo
tanto, tendrs que ir con cuidado a la hora de
confeccionarlas, y siempre validarlas
despus.
Una vez validadas, tampoco funcionarn en
todos los navegadores. Tu CSS ser
totalmente correcta, pero seguirs
dependiendo del reconocimiento que los
diferentes navegadores, y sus diferentes

file:///D|/Manuales/Aprender%20HTML/css/css1.htm (1 of 6) [27/02/2003 16:56:34]

Primera
parte
Tardar unos
segundos.
9 DIN-A4

Segunda
parte
Tardar unos
segundos.
9 DIN-A4

Cmo crear pginas web. Manual: HTML: CSS: Introduccin

Vuestras
colaboraciones
Sugerencias
SALIDA

versiones, tengan con respecto a las Hojas


de Estilo.
Por ejemplo, la Hoja de Estilo de
WebAprendiz, es una hoja muy bsica y
simple. Est debidamente Validada, sin
embargo los que estis utilizando Netscape
(al menos la versin 4.5), no veris lo mismo
que los que estis utilizando el Explorer.
Netscape no reconoce algunas de las reglas
que he definido en mi Hoja. Sin embargo la
web sigue siendo perfectamente visible y
accesible a los dos navegadores, aunque con
Estilos diferentes.
Luego te dars cuenta de que, de forma
totalmente absurda, algunos navegadores,
admiten reglas o definiciones del nivel CSS2
y, sin embargo no admiten otras del nivel
CSS1. Total, un lo.
Para ayudarte un poquito he hecho lo
siguiente:
En la parte inferior de la pgina, te he puesto
varios enlaces, que seguro te sern de
utilidad:
Por un lado he incluido dos links a las dos
recomendaciones que existen de Hojas de
Estilo, la CCS1 y la CCS2 (la CCS3 an se
est elaborando, en la fecha en que
escribo).
Por otro, dos enlaces a Webreview.com,
que contienen:

file:///D|/Manuales/Aprender%20HTML/css/css1.htm (2 of 6) [27/02/2003 16:56:34]

Cmo crear pginas web. Manual: HTML: CSS: Introduccin

La Tabla Maestra de compatibilidad,


entre los diferentes navegadores, y las
diferentes Propiedades de las CSS. El
autor es Eric Meyer.
Otra Tabla parecida a la anterior, pero
referida nicamente al nivel CSS2. El
autor es tambin Eric Meyer.
Por ltimo, un enlace a un Validador de
Hojas de Estilo. Pertenece a la W3C, como
no. Muy til, porque te permite enviar el
fichero de tu CSS desde el disco duro y,
en breves segundos, te devuelve la Hoja
de Estilo validada. Entonces puedes
compararla con tu archivo y efectuar las
oportunas modificaciones.
Adems, si no ests utilizando el Explorer o
Netscape versiones 4, como mnimo, casi
mejor que te olvides de utilizar las CSS, ni
tan siquiera para tu propio uso y disfrute.
Para rematar el tema, tu sabes que el usuario
puede configurar el navegador a su gusto.
Por lo tanto, por ms que te esfuerces, ya
sea a travs de Hojas de Estilo o no, habr
alguien que tendr configurado su fondo de
pantalla de color verde kaki y letra Elephant
de 14 puntos y color fucsia (por suerte son
pocos).
Nota: Te adelanto que el estilo predefinido por el
usuario, puede anularse e imponer el del autor de la
web, como ya veremos. Pero esto no es aconsejable,
pues hay personas con ciertas discapacidades o
problemas visuales que, por ejemplo, precisan de un
mayor tamao de letra.

file:///D|/Manuales/Aprender%20HTML/css/css1.htm (3 of 6) [27/02/2003 16:56:34]

Cmo crear pginas web. Manual: HTML: CSS: Introduccin

Noticias menos malas


Voy a basar este Captulo en la versin CSS1
y algo de la CSS2.
Lo que viene a continuacin, es una
Introduccin simple a las Hojas de Estilo,
pero tendrs ms que suficiente para
empezar tus propias CSS.
Hablar en profundidad de las CSS,
significara un volumen equivalente a dos
veces el de este Manual de HTML. Ni tu ni yo
queremos eso en este momento. Ten en
cuenta que la especificacin del nivel CCS2
que encontrars en la W3C, ocupa cerca de
300 pginas impresas.
En la seccin Avanzando, tambin del
Estudio, voy incorporando artculos y
monogrficos sobre temas concretos. Uno de
esos temas ser las CSS. All ir situando,
entre otras cosas, ampliaciones del presente
Captulo, por entregas, para poder digerirlo
mejor.

Aviso: Voy a repetir lo que te he dicho ms arriba


por si no te ha quedado claro. Todo lo que
encontrars en este Captulo es "correcto" (salvo
error) desde el punto de vista de las reglas,
definiciones y sintaxis de las CSS. Sin embargo,
as y todo, habr cosas que tal vez no funcionen o
que no sean reconocidas de la misma forma por
todos los navegadores.

Este es uno de los motivos por los que


file:///D|/Manuales/Aprender%20HTML/css/css1.htm (4 of 6) [27/02/2003 16:56:34]

Cmo crear pginas web. Manual: HTML: CSS: Introduccin

recomendaba, al inicio del Manual Paso a


Paso, que dispusieras, como mnimo, de los
dos navegadores ms utilizados en el
mercado. Para poder hacer pruebas.
Despus de ver los resultados, puedes:

Renunciar a tus deseos y adaptarte al


mnimo comn denominador, de forma
que tus pginas se vean casi
"exactamente igual", independientemente
del navegador utilizado, o bien,

Si las diferencias no son graves, y


permiten que tus pginas sean visibles,
puedes pasar del tema y esperar que, en
futuras versiones, los navegadores
reconozcan al 100% las especificaciones
de las CSS.
(Si vas a crear una web comercial, no te
lo aconsejo).

Empezamos ya?
Los marcos: Elemento
IFRAME
ndice HTML
ndice General

Empecemos

Enlaces de esta pgina:


Especificacin CSS1 de la W3C
Especificacin CSS2 de la W3C
Master Compatibility Chart de Webreview.com
CSS2 Selectors Support Chart de Webreview.com
Validador CSS de la W3C

file:///D|/Manuales/Aprender%20HTML/css/css1.htm (5 of 6) [27/02/2003 16:56:34]

Cmo crear pginas web. Manual: HTML: CSS: Introduccin

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/css/css1.htm (6 of 6) [27/02/2003 16:56:34]

file:///D|/Manuales/Aprender%20HTML/images/yo.gif

file:///D|/Manuales/Aprender%20HTML/images/yo.gif [27/02/2003 16:56:37]

Cmo crear pginas web. Manual: HTML: LINKS: Marcadores p2

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Ensanchando los horizontes del Marcador

Declaracin
principios

Por si no tuvieras suficiente, te voy a explicar


alguna cosilla ms sobre los Marcadores.

Los 10
mandamientos

<a name="hipermarc">Hipervnculos a
Marcadores.</a>

PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada

<a
href="links3.htm#hipermarc">Marcadores</a>
Recuerdas estos ejemplos de la pgina
anterior, Verdad?
El primero era la definicin de un Marcador, y
el segundo un hipervnculo a ese Marcador.
El Marcador se encontraba en el ttulo de la
pgina, que era: "Hipervnculos a
Marcadores".
Bien. Los Marcadores se pueden especificar
con el Elemento A y el Atributo name, como
hemos visto hasta ahora, o con cualquier
otro Elemento y el Atributo id. Toma ya!

Colaboraciones

Vamos a verlo con el ejemplo anterior:

file:///D|/Manuales/Aprender%20HTML/links/links4.htm (1 of 3) [27/02/2003 16:56:38]

Cmo crear pginas web. Manual: HTML: LINKS: Marcadores p2

Vuestras
colaboraciones
Sugerencias
SALIDA

<h4><a
name="hipermarc">Hipervnculos a
Marcadores.</a></h4>
Este es el cdigo que hay detrs del ttulo de
la pgina anterior. Es una cabecera tipo H4, y
en su interior est definido el Marcador que
ya hemos visto.
Luego estaba el hipervnculo que conduca a
ese Marcador, es decir al ttulo de la pgina.
Pues bien, el Marcador contenido en ese
ttulo H4, tambin podemos definirlo con el
Atributo id, como hemos dicho, y quedara de
la siguiente manera:
<h4 id="hipermarc">Hipervnculos
a Marcadores.</h4>
Fjate que ahora el Marcador est definido
dentro de la propia Etiqueta de Apertura del
Elemento Hn.
El efecto es exactamente el mismo. Slo ten
en cuenta que NO puedes utilizar ambos
atributos name y id para crear Marcadores
con el mismo nombre en un mismo
documento.
Por otro lado, el cdigo del hipervnculo que
conduce a ese Marcador, no vara. Es el
mismo, independientemente del sistema que
utilicemos para definir el Marcador.

file:///D|/Manuales/Aprender%20HTML/links/links4.htm (2 of 3) [27/02/2003 16:56:38]

Cmo crear pginas web. Manual: HTML: LINKS: Marcadores p2

Para que no te les:


Cuando asignes un nombre a un Marcador, no repitas
ese nombre en otro Marcador dentro del mismo
documento.
Para asignarle el nombre utiliza name o bien id. T
eliges. y punto.

Bueno, no quiero liarte ms con los


Marcadores. Veamos algunos ejemplos ms
del Elemento A con algunos de sus Atributos,
un ejemplo de Hipervnculo de Imagen, y
luego ya pasaremos a la corta segunda parte
de este Captulo, en que estudiaremos los
Elementos LINK y BASE.
Ests de acuerdo?
LINKS. Marcadores
ndice HTML
ndice General

Lo que tu digas

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/links/links4.htm (3 of 3) [27/02/2003 16:56:38]

Cmo crear pginas web. Manual: HTML: LINKS: Marcadores: p1

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

estudio/Cmo crear tu pgina web: Paso a


Paso

Hipervnculos a Marcadores.

Marcador (fragment identifier)


Para m, un Marcador es un caso especial de
hipervnculo Interno.
A veces querrs conducir a tus visitantes a
una seccin o punto concreto de un
documento interno o, incluso, del mismo
documento en que se encuentren en ese
momento.
Nota: Existen vnculos externos a marcadores
externos, es decir, a un marcador situado en otra web
por ejemplo, pero lo normal, y la utilidad del marcador
para ti, seguro que ser como vnculo interno.

Para esos casos, deberemos hacer dos


cosas:

Entrada
Colaboraciones

Definir un Marcador en el documento


de destino.
Crear un hipervnculo a ese Marcador
en el documento de origen.

file:///D|/Manuales/Aprender%20HTML/links/links3.htm (1 of 5) [27/02/2003 16:56:39]

Cmo crear pginas web. Manual: HTML: LINKS: Marcadores: p1

Vuestras
colaboraciones
Sugerencias
SALIDA

Te vuelvo a repetir, que el Marcador puede


estar situado en el mismo documento que el
hipervnculo.
Por ejemplo, al comienzo de la pgina
anterior, he creado tres hipervnculos a
Marcadores. Los dos primeros conducen,
respectivamente, al inicio de los apartados de
la misma pgina que definen el Hipervnculo
Externo y el Interno.
El tercer hipervnculo conduce al Marcador
de la parte superior de la presente pgina, y
que es el ttulo: "Hipervnculos a
Marcadores". Me sigues?.
Cmo lo he hecho?:
1. He asignado un nombre de Marcador
a cada uno de los ttulos: "Hipervnculos
externos. URL Absoluto.";
"Hipervnculos internos. URL Relativo",
ambos en la misma pgina y, por fin, al
ttulo "Hipervnculos a Marcadores", de
la presente pgina.
2. He creado los tres hipervnculos
internos a sus respectivos Marcadores,
eligiendo como Lanzaderas, las
palabras: "Externos", Internos" y
"Marcadores".
Ves qu fcil?. Vamos a verlo:

Cmo creamos un vnculo a un


Marcador?

file:///D|/Manuales/Aprender%20HTML/links/links3.htm (2 of 5) [27/02/2003 16:56:39]

Cmo crear pginas web. Manual: HTML: LINKS: Marcadores: p1

1.- Definir el Marcador.


Utilizaremos el Elemento A. Su Atributo
name, y como Valor de este Atributo, el
nombre elegido para el Marcador. Y, por fin,
podremos el punto de Aterrizaje que
deseemos. Como estamos hablando de
Hipervnculos de Texto, utilizaremos texto, de
momento.
Lo de "Aterrizaje" tambin son cosas mas.
Es el texto u objeto donde "aterriza" el
hipervnculo, es decir, el Marcador.
<a name="hipermarc">Hipervnculos a
Marcadores.</a>
Este es el cdigo del Marcador definido al inicio de esta
pgina.

Etiqueta de Apertura del Elemento A +


Atributo name= + el nombre asignado al
Marcador + el punto de Aterrizaje + cierre de
la Etiqueta.
Puedes asignar el nombre que quieras al
Marcador, pero tiene que ser nico en ese
documento. Es decir, yo no puedo definir otro
Marcador en esta misma pgina y que lleve
por nombre "hipermarc". Est claro, no?.

2.- Crear el Hipervnculo al Marcador


definido.
Su direccin ser Relativa ya que, como te
he dicho, es un vnculo interno.

file:///D|/Manuales/Aprender%20HTML/links/links3.htm (3 of 5) [27/02/2003 16:56:39]

Cmo crear pginas web. Manual: HTML: LINKS: Marcadores: p1

<a
href="links3.htm#hipermarc">Marcadores</a>
Este hipervnculo es el que hay al principio de la pgina
anterior y que ya te he comentado antes.

Como vers, es muy parecido a un vnculo


interno normal. Sin embargo, fjate en el
Valor del Atributo href.
Se compone de:
a. La direccin relativa de la pgina
destino, seguida de una # almohadilla.
b. A continuacin, el nombre asignado al
Marcador.
Por supuesto, el Marcador puede estar
definido en un documento que se encuentre
en un Directorio situado uno o varios niveles
por encima de la pgina origen. Entonces,
tendremos que aadir ../ estas cosas, tal y
como veamos en los vnculos Internos.
Y si est por debajo?
Al igual que vimos con los Hipervnculos
Internos, el "camino" que conduce al
Marcador, ir pasando por los diferentes
Directorios hasta llegar al documento que
contiene el Marcador. (No te olvides la # al
final del "camino", y antes del nombre del
Marcador).

Bueno, hablando de otra cosa, no te quejars


de los ejemplos de LISTAS que he incluido
file:///D|/Manuales/Aprender%20HTML/links/links3.htm (4 of 5) [27/02/2003 16:56:39]

Cmo crear pginas web. Manual: HTML: LINKS: Marcadores: p1

en esta pgina, eh?.


Lo complicamos un poquito ms?
LINKS. Externos e Internos
ndice HTML
ndice General

Ms todava?

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/links/links3.htm (5 of 5) [27/02/2003 16:56:39]

Cmo crear pginas web. Manual: HTML: LINKS: Externos e Internos

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios

estudio/Cmo crear tu pgina web: Paso a Paso


Antes de pasar a ver ejemplos, necesitamos algunas
definiciones y explicaciones previas:
Vamos a distinguir entre:

Los 10
mandamientos

Hipervnculos Externos.
Hipervnculos Internos.
Hipervnculos a Marcadores.

PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Sintaxis de un Hipervnculo normalito

Principios
generales

<Etiqueta Apertura Elemento A + Atributo href + Valor de


este Atributo> + Lanzadera + </Etiqueta Cierre Elemento
A>

Accesibilidad

De otra forma:

Avanzando

Entrada

<a href="URL">Lanzadera</a>

Puntos de Vista

Lo de la "Lanzadera" es cosa ma. La Lanzadera puede


ser un texto u objeto que utilizamos para "lanzar" o
Entrada
activar el hipervnculo. De momento veremos lanzaderas
Colaboraciones de texto. Dejaremos otras cosas, como las imgenes,
para un poquito ms adelante.

file:///D|/Manuales/Aprender%20HTML/links/links2.htm (1 of 7) [27/02/2003 16:56:40]

Cmo crear pginas web. Manual: HTML: LINKS: Externos e Internos

Vuestras
colaboraciones
Sugerencias
SALIDA

Hipervnculos externos. URL Absoluto.


El vnculo externo supongo que es el que, inicialmente,
todos nos imaginamos cuando omos hablar por primera
vez de la Internet, WWW, etc.
Yo lo defino como el vnculo que nos aporta recursos que
se encuentran fuera de la web activa, o de nuestro
servidor.
Por ejemplo, la seccin Almacn, est repleta de vnculos
externos.
Para los hipervnculos externos, utilizaremos lo que se
denomina direccin del URL Absoluta. Es decir, la
direccin completa.
Ya hablamos de lo que era un URL al inicio del Manual,
en el Captulo Qu es el HTML, por lo que no voy a
repetirlo ahora.
http://www.menteweb.com/cerebro/nulo.htm
Este es un ejemplo de URL Absoluto. Es el tipo que
utilizaremos en los hipervnculos externos.
En este caso, la activacin de un vnculo que contuviera
ese URL nos llevara a visualizar un documento llamado
"nulo.htm", que se encuentra en un Directorio llamado
"cerebro" del sitio con direccin de dominio
"menteweb.com".
Y si cuando tengas tu web, quieres crear un vnculo a
esta pgina que ests leyendo, tendrs que utilizar este
URL Absoluto:
http://www.webaprendiz.com/estudio/

file:///D|/Manuales/Aprender%20HTML/links/links2.htm (2 of 7) [27/02/2003 16:56:40]

Cmo crear pginas web. Manual: HTML: LINKS: Externos e Internos

manual/html/links/links2.htm
Nota: Es posible que te hayas fijado cuando navegas, que en
muchos casos ya no es necesario incluir http:// para acceder a un
sitio. Sin embargo, ten muy en cuenta, que cuando incluyas
hipervnculos externos en tu web, S debers incluir la direccin
completa en la etiqueta de apertura del elemento A.

Bueno, ya tenemos el URL Absoluto.


Cmo creamos un Hipervnculo Externo?
Muy fcil, slo nos falta la Lanzadera. Vamos a crear un
vnculo de Texto, por lo tanto elegimos para el ejemplo, la
frase "Mi primer vnculo externo". Vamos all:
<a
href="http://www.menteweb.com/cerebro/nulo.htm">Mi
primer vnculo externo</a>
Fjate en el ejemplo. En rojo estn las etiquetas del
Elemento A. En azul el Atributo "href" y su Valor (URL).
En verde, la frase elegida como Lanzadera.
Cmo se vera ese link en la pgina? (NO LO
ACTIVES):
Mi primer vnculo externo
La apariencia de la Lanzadera depender de si tienes
definidos colores y efectos concretos para los links, o si
dejas actuar a la configuracin predeterminada. En mi
caso, los tengo definidos a travs de Hoja de Estilo.
Puedes pasar el ratn por encima, pero no actives el
vnculo, ya que se trata de una direccin inexistente.
En los navegadores, existe una forma predeterminada de
presentar los vnculos en pantalla. Suele ser "subrayado",
con colores azul, rojo y violeta.
file:///D|/Manuales/Aprender%20HTML/links/links2.htm (3 of 7) [27/02/2003 16:56:40]

Cmo crear pginas web. Manual: HTML: LINKS: Externos e Internos

Hipervnculos internos. URL Relativo.


Llamo vnculos internos a aquellos cuyo destino se
encuentra en el servidor de la propia web activa, es decir,
en la que ests visitando en ese momento.
La Seccin en que te encuentras, es decir, el Estudio del
Taller del Aprendiz, est repleta de vnculos internos.
Los hipervnculos del final de cada documento, y que
has estado utilizando para avanzar o retroceder por las
pginas de este Manual, son vnculos internos. Est
claro, no?.
Para los vnculos internos, utilizaremos siempre una
direccin del URL Relativa. Tcnicamente podramos
usar un URL Absoluto, pero si el destino est en la propia
web, es una prdida de tiempo para el servidor.
El URL Relativo es un "camino" que nos conduce a un
destino (recurso), que se encuentra en la misma
mquina que el origen del hipervnculo ( el documento
en el que se encuentra el vnculo Interno).
links1.htm
../intro.htm
../../paso1a.htm
Aqu tienes tres URL o direcciones Relativas. Para que lo
sepas, te dir que la primera se corresponde con el
vnculo que hay al final de esta pgina, a la izquierda y
que reza: "LINKS pg. 1".
Si pruebas ese vnculo, vers que te conduce al inicio de
la pgina anterior a la que ests ahora.
La pgina anterior y la que ests leyendo, se encuentran
file:///D|/Manuales/Aprender%20HTML/links/links2.htm (4 of 7) [27/02/2003 16:56:40]

Cmo crear pginas web. Manual: HTML: LINKS: Externos e Internos

en el mismo directorio de mi web. Estn al mismo nivel.


Por eso, esa direccin relativa no lleva rallitas ni puntitos
delante.
El segundo URL relativo, si fuera un vnculo completo, te
llevara al documento de introduccin al Manual de
HTML, en el que ahora ests.
Ese documento se encuentra en un directorio superior en
un nivel a la pgina que ests leyendo. Por eso el
"camino" que conduce a ese documento incluye ../ esto.
El tercer URL relativo, como ya habrs adivinado, si
formara parte de un hipervnculo, estara apuntando al
documento que contiene el Primer Paso del Manual
PASO A PASO. Este documento se encuentra dos
directorios por encima de la presente pgina. Por eso se
le antepone ../../ esto.
Cmo creamos un hipervnculo Interno?
Muy fcil, slo nos falta la Lanzadera. Vamos a crear un
vnculo de Texto, por lo tanto elegimos para el ejemplo, la
frase "Introduccin al HTML". Vamos all:
<a href="../intro.htm">Introduccin al HTML</a>
Fjate en el ejemplo. En rojo estn las etiquetas del
Elemento A. En azul el Atributo "href" y su Valor (URL).
En verde, la frase elegida como Lanzadera. En este
caso, el URL es Relativo.
Cmo se vera ese link en la pgina?:
Introduccin al HTML
Este link te conduce al Tercer Paso del Manual, que es:
Aprender HTML.
file:///D|/Manuales/Aprender%20HTML/links/links2.htm (5 of 7) [27/02/2003 16:56:40]

Cmo crear pginas web. Manual: HTML: LINKS: Externos e Internos

Qu pasa si el destino est situado uno o varios


Directorios por debajo del documento origen?
Muy sencillo. El "camino" de la direccin relativa ir
indicando el nombre de los Directorios por los que se
tiene que pasar, hasta llegar al documento destino.
<a href="manual/html/links/links2.htm">
Esta es la Etiqueta de Apertura de un hipervnculo que
conducira a la pgina actual, que es el destino.
El origen, estara en un documento situado en un
Directorio XXX.
Este Directorio XXX, est por encima de un Directorio
llamado manual, ste, as u vez, se encuentra por encima
de otro llamado html y ste por encima del Directorio
links, que es el que contiene el presente documento
links2.htm.
Pregunta: Si comparas el "camino" de este ejemplo de URL Relativo
que conduce a la presente pgina, con el del ejemplo de URL
Absoluto tambin a la presente pgina que hay ms arriba, sabras
decirme el nombre de ese Directorio XXX ?
Respuesta: ESTUDIO (Explorer: Sita el ratn sobre el espacio en
blanco anterior)

Y ya vale!
Bueno, si quieres saber lo que es un Marcador y cmo
crear vnculos a Marcadores, activa la Lanzadera del
Hipervnculo Interno situado a la derecha, por debajo de
esta parrafada, y que dice: "All voy!".
LINKS. Elemento A
ndice HTML
ndice General
file:///D|/Manuales/Aprender%20HTML/links/links2.htm (6 of 7) [27/02/2003 16:56:40]

All voy!

Cmo crear pginas web. Manual: HTML: LINKS: Externos e Internos

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/links/links2.htm (7 of 7) [27/02/2003 16:56:40]

Cmo crear pginas web. Manual:HTML:LINKS: Curiosos

Si ests aqu, es que has activado la Lanzadera del vnculo


externo que he puesto como ejemplo.

No te dije que no lo activaras?. Se supona que ste era un


link EXTERNO, pero para los curiosos, que siempre los hay, he
creado este destino INTERNO, para que puedas volver
fcilmente al MANUAL. De lo contrario, obtendras un error de
Pgina No Encontrada y tendras que usar el botn Atrs del
navegador para regresar.

Bueno, satisfecha tu curiosidad:

VOLVER AL MANUAL

file:///D|/Manuales/Aprender%20HTML/links/curiosos.htm [27/02/2003 16:56:40]

Cmo crear pginas web. Manual: HTML: Formularios: Elemento BUTTON

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Elemento BUTTON

Declaracin
principios

<button .....</button>
Los botones pueden crearse con el Elemento
INPUT, como ya hemos visto, o con este
Elemento BUTTON.
Requiere etiqueta de cierre.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales

Los botones creados utilizando BUTTON, son


algo ms verstiles que los creados con
INPUT, porque puedes aadirle contenido.
Por ejemplo, un botn creado con INPUT y
con el Atributo type igual a image,
presentar la imagen que hayas definido.
Con BUTTON, adems de la imagen, puedes
aadirle otro contenido.

Accesibilidad
Avanzando

Entrada

Atributos y Valores

Puntos de Vista

Entrada
Colaboraciones

name="texto"
Sirve para asignar un nombre a este control.

value=datos"
Con este Atributo se asigna un valor inicial
al botn.

file:///D|/Manuales/Aprender%20HTML/forms/forms4.htm (1 of 3) [27/02/2003 16:56:43]

Cmo crear pginas web. Manual: HTML: Formularios: Elemento BUTTON

Vuestras
colaboraciones

type="submit; button; reset"


Sirve para especificar el tipo de botn:

Sugerencias

SALIDA

submit. Crea un botn de envo. Es el


valor por defecto.
reset. Crea un botn de Restablecer
(borrar).
button. Crea un botn normal (no del
tipo radio).

id, class, lang, dir, title, style, los puedes


consultar ene el Elemento P, disabled,
accesskey y tabindex en el Elemento
INPUT
Y, adems, los relativos a "sucesos"
intrnsecos, que veremos en el Captulo
SCRIPT.
Fjate que usemap e ismap no estn entre
los Atributos. A diferencia de INPUT, con
BUTTON no est permitido asociar un Mapa
de Imagen con el Elemento IMG si ste forma
parte del contenido del Elemento BUTTON.

Borrar

Explorer: Esto es slo para que veas que


con BUTTON, aparte de la imagen puedes
incluir texto.
Netscape: Posiblemente slo vers la
palabra "Borrar" en el centro de la pantalla, y
un corazn a la izquierda.

Vmonos a SELECTionar y OPTionar cosas.


file:///D|/Manuales/Aprender%20HTML/forms/forms4.htm (2 of 3) [27/02/2003 16:56:43]

Cmo crear pginas web. Manual: HTML: Formularios: Elemento BUTTON

De acuerdo?
Elemento INPUT
ndice HTML
ndice General

Como siempre

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/forms/forms4.htm (3 of 3) [27/02/2003 16:56:43]

Cmo crear pginas web. Manual: HTML: Formularios: Elementos SELECT, OPTION y OPTGROUP

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

estudio/Cmo crear tu pgina web: Paso a


Paso

SELECT, OPTION Y OPTGROUP

SELECT
<select>.....</select>
Con este Elemento, podemos crear un men
desplegable de opciones. Cada una de esas
opciones la representaremos con el Elemento
OPTION. Deber existir, como mnimo, una
opcin.
Requiere etiqueta de cierre.

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Atributos y Valores
name="texto"
Sirve pasa asignar un nombre al control.

size"nmero"
Con este Atributo podemos indicar el
nmero de filas u opciones, del men
desplegable, queremos que sean visibles.

multiple
Si incluimos este trmino, permitiremos al
file:///D|/Manuales/Aprender%20HTML/forms/forms5.htm (1 of 5) [27/02/2003 16:56:44]

Cmo crear pginas web. Manual: HTML: Formularios: Elementos SELECT, OPTION y OPTGROUP

Vuestras
colaboraciones
Sugerencias
SALIDA

usuario elegir ms de una opcin del men.

id, class, lang, dir, title, style, los puedes


consultar ene el Elemento P, disabled,
accesskey y tabindex en el Elemento
INPUT.
Y, adems, los relativos a "sucesos"
intrnsecos, que veremos en el Captulo
SCRIPT.

OPTION
<option>....</option>
Sirve para especificar las diferentes opciones
del men desplegable creado con SELECT.
Etiqueta de cierre optativa, pero sala.

Atributos y Valores
selected
Si se utiliza este trmino, indica que esa
opcin del men esta preseleccionada, es
decir, aparece visible en el men antes de
desplegarlo.

value"dato"
Con este Atributo especificaremos el valor
inicial del control.

label="texto"
Permite especificar una etiqueta para una
opcin, ms corta que la definicin que
hemos utilizado para esa opcin con el
Elemento OPTION. De esta forma, se
mostrar la etiqueta corta (label) en lugar de

file:///D|/Manuales/Aprender%20HTML/forms/forms5.htm (2 of 5) [27/02/2003 16:56:44]

Cmo crear pginas web. Manual: HTML: Formularios: Elementos SELECT, OPTION y OPTGROUP

la larga.

id, class, lang, dir, title, style, los puedes


consultar ene el Elemento P, disabled en el
Elemento INPUT.
Y, adems, los relativos a "sucesos"
intrnsecos, que veremos en el Captulo
SCRIPT.

OPTGROUP
<optgroup>.....</optgroup>
Este Elemento permite presentar las
diferentes opciones de un men desplegable,
de una forma lgica y agrupada. Esto puede
ser importante si se trata de una lista de
opciones bastante larga.
Requiere etiqueta de cierre.

Atributos y Valores
label="texto"
Especifica la etiqueta para las opciones.

id, class, lang, dir, title, style, los puedes


consultar ene el Elemento P, disabled en el
Elemento INPUT.
Y, adems, los relativos a "sucesos"
intrnsecos, que veremos en el Captulo
SCRIPT.
file:///D|/Manuales/Aprender%20HTML/forms/forms5.htm (3 of 5) [27/02/2003 16:56:44]

Cmo crear pginas web. Manual: HTML: Formularios: Elementos SELECT, OPTION y OPTGROUP

El Estudio

Aqu tienes un sencillo men desplegable. Ya


veremos ejemplos ms complejos ms
adelante.
<form method="post"
action=".....">
<div align="center"><center>
<p><select size="1">
<option>El Estudio</option>
<option>El Almacn</option>
<option>El Archivo</option>
</select></p>
</center></div>
</form>
Fjate que aqu he centrado el control
utilizando el Elemento DIV, en lugar de una
Tabla.
Con OPTGROUP podra haber hecho lo
siguiente:
..............
<optgroup label="Taller del
Aprendiz">
<option>El Estudio</option>
<option>El Almacn</option>
<option>El Archivo</option>
</optgroup>
<optgroup label="Otras
Secciones">
<option>Foros</option>
file:///D|/Manuales/Aprender%20HTML/forms/forms5.htm (4 of 5) [27/02/2003 16:56:44]

Cmo crear pginas web. Manual: HTML: Formularios: Elementos SELECT, OPTION y OPTGROUP

<option>Concurso webs</option>
<option>Colaboraciones</option>
</optgroup>
..............
De esta manera "clasifico" la lista de
opciones en dos grupos.

Vamos a ver ahora las reas de Texto


Elemento BUTTON
ndice HTML
ndice General

Vamos

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/forms/forms5.htm (5 of 5) [27/02/2003 16:56:44]

Cmo crear pginas web. Manual: HTML: Formularios: Elemento TEXTAREA

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Elemento TEXTAREA

Declaracin
principios

<textarea.....</textarea>
Este Elemento permite la entrada de
mltiples lneas de texto, es decir, crea una
zona para que el usuario pueda introducir
texto, sin estar limitado a una sola lnea.
Requiere etiqueta de cierre.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML

Atributos y Valores

Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

name="texto"
Asigna un nombre al control.

rows="nmero"
Nos sirve para fijar el nmero de lneas de
texto, visibles.

cols="nmero"
Nos permite indicar la anchura en nmero
de caracteres, que tendr el control.

id, class, lang, dir, title, style, los puedes


consultar ene el Elemento P, disabled,
tabindex y readonly en el Elemento INPUT.
Y, adems, los relativos a "sucesos"

file:///D|/Manuales/Aprender%20HTML/forms/forms6.htm (1 of 4) [27/02/2003 16:56:45]

Cmo crear pginas web. Manual: HTML: Formularios: Elemento TEXTAREA

Vuestras
colaboraciones

intrnsecos, que veremos en el Captulo


SCRIPT.

Sugerencias
SALIDA

Enviar

Borrar

No pulses el botn de ENVIAR. Si quieres,


introduce texto en el control, y despus pulsa
el botn BORRAR.
<form method="post"
action=".....">
<p>
<textarea name="areadedesastre"
rows="7" cols="20">
</textarea>
<input type="submit"
value="Enviar">
<input type="reset"
value="Borrar">
</p>
</form>
Fjate que en este caso, no he utilizado ni
Tablas, ni DIV, sino simplemente el Elemento
P.
Verdad que es divertido?
Pues para que te diviertas ms, te voy a
presentar un Elemento Desaprobado. Slo
te lo describir porque no vale la pena
file:///D|/Manuales/Aprender%20HTML/forms/forms6.htm (2 of 4) [27/02/2003 16:56:45]

Cmo crear pginas web. Manual: HTML: Formularios: Elemento TEXTAREA

utilizarlo.

Elemento ISINDEX
Este Elemento crea una sola lnea para que
el usuario introduzca un texto. Este Elemento
est Desaprobado.
En su lugar hay que utilizar el Atributo text
del Elemento INPUT.
Lo tienes claro?:

Con ISINDEX sera (desaprobado):


<isindex prompt="Lo tienes
claro?: ">
Con INPUT, que es como lo he hecho, sera:
<form class="pc" method="post"
action="....">
<p>Lo tienes claro?: <input
type="text"></p>
</form>
Fjate que en este caso he utilizado mi Hoja
de Estilo para situar el control en medio de la
pgina. En mi hoja, la clase .pc significa
"centrar", y puedo utilizarla con cualquier
Elemento que admita el Atributo class. Pero
eso ya lo veremos si algn da acabo con
este captulo que, por cierto, es el penltimo,
creo...
file:///D|/Manuales/Aprender%20HTML/forms/forms6.htm (3 of 4) [27/02/2003 16:56:45]

Cmo crear pginas web. Manual: HTML: Formularios: Elemento TEXTAREA

Veamos unas etiquetas LABEL


SELECT, OPTION y
OPTGROUP
ndice HTML
ndice General

No lo hemos visto ya?

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/forms/forms6.htm (4 of 4) [27/02/2003 16:56:45]

Cmo crear pginas web. Manual: HTML: Formularios: Elemento LABEL

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Elemento LABEL

Declaracin
principios

<label>.....</label>
Hemos visto que algunos controles poseen el
Atributo label. Para aquellos controles de
formulario que NO tienen ese Atributo, existe
el Elemento LABEL.
Requiere etiqueta de cierre.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Atributos y Valores
for="valor del atributo id de otro control"
Sirve para asociar el texto definido por el
Elemento LABEL en un control, con otro
control de formulario, a travs del valor
utilizado en el Atributo id de ese otro
control.
Si no utilizamos el Atributo for, entonces el
texto que pongamos mediante el Elemento
LABEL, estar asociado al propio control.

id, class, lang, dir, title, style, los puedes


consultar ene el Elemento P, accesskey en
el Elemento INPUT.
Y, adems, los relativos a "sucesos"
intrnsecos, que veremos en el Captulo

file:///D|/Manuales/Aprender%20HTML/forms/forms7.htm (1 of 2) [27/02/2003 16:56:45]

Cmo crear pginas web. Manual: HTML: Formularios: Elemento LABEL

Vuestras
colaboraciones
Sugerencias
SALIDA

SCRIPT.

Bueno, este ha sido demasiado corto.


Veamos dos Elementos de golpe ahora,
FIELDSET y LEGEND.
Ya queda muy poco!
TEXTAREA, ISINDEX
ndice HTML
ndice General

De veras?

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/forms/forms7.htm (2 of 2) [27/02/2003 16:56:45]

Cmo crear pginas web. Manual: HTML: Despedida y cierre del Manual de HTML: snif, snif....

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Despedida y Cierre del HTML

Declaracin
principios

Bien, si ests aqu y has ledo todo el


Manual, he de reconocer que tienes mucho
mrito.
Te recuerdo que este Libro/Manual deberas
utilizarlo de consulta, y no intentar conocer y
aplicar todos los Elementos del HTML y,
mucho menos, todos sus Atributos, al menos
al principio. Tambin te recuerdo, que en el
Indice de Elementos, te he sealado los que
considero bsicos. Empieza con esos.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada

He intentado ponerte ejemplos de los


Atributos ms significativos pero, en
definitiva, sern tus necesidades las que
finalmente determinen qu Elementos y qu
Atributos vas a utilizar.
Practica, practica, practica.

Puntos de Vista

Entrada
Colaboraciones

An quedan ms PASOS en mi Manual, en


ellos veremos algo de Diseo,
mencionaremos cosas como Javascript,
DHTML, XHTML, Multimedia, publicacin de
tu web, etc.

file:///D|/Manuales/Aprender%20HTML/introduc/cierre.htm (1 of 4) [27/02/2003 16:56:48]

Despedida y
cierre
2 DIN-A4

Cmo crear pginas web. Manual: HTML: Despedida y cierre del Manual de HTML: snif, snif....

Vuestras
colaboraciones
Sugerencias
SALIDA

AHORA TE TOCA A TI
Este e-book de HTML y todo el material
de WebAprendiz, estn a tu disposicin,
totalmente gratuitos.
SLO te pido lo siguiente:
SI realmente has ledo el Manual:
Por favor, hzmelo saber. Slo por
curiosidad, envame un e-mail diciendo
simplemente: "Ledo", por ejemplo. Te
mereces un monumento. Gracias.

SI has ledo total o parcialmente el


Manual, y te ha gustado:
Por favor, hzmelo saber. Ensalza un poco
mi ego y alivia mis doloridos ojos y espalda.
Gracias.

SI has ledo total o parcialmente el


Manual y NO te ha gustado:
Por favor, hzmelo saber. Mortifcame un
poco, pero dime tus sugerencias, no te
limites a destrozarlo. Gracias.

SI has ledo el Manual y crees que te


ha sido til, o puede ser de utilidad
para otras personas:
Por favor recomindalo. Grita a los cuatro
vientos.
Sugerencias: a tus conocidos, amigos, familia,
en los Foros, reuniones de trabajo, asambleas,
peridicos, revistas, TBOs, libros, radio,
televisin normal o por cable, e-mails,
comunidades virtuales, etc. Gracias.

***
file:///D|/Manuales/Aprender%20HTML/introduc/cierre.htm (2 of 4) [27/02/2003 16:56:48]

Cmo crear pginas web. Manual: HTML: Despedida y cierre del Manual de HTML: snif, snif....

He ledo el Manual:
Me ha gustado:
No me ha gustado:

Bien, eso es todo That's all folks!


Ahora puedes seguir con el PASO CUARTO,
o hacer lo que quieras.
Yo sigo.

Manual de HTML: Primera Versin. Terminado en


la madrugada de una fra noche de Noviembre de
2000, en mi despachonet, situado en una casa
antigua de Sant Just Desvern (Barcelona,
Espaa).

Reservados todos los derechos

Elemento NOSCRIPT
ndice HTML
ndice General

Yo tambin

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/introduc/cierre.htm (3 of 4) [27/02/2003 16:56:48]

Cmo crear pginas web. Manual: HTML: Despedida y cierre del Manual de HTML: snif, snif....

file:///D|/Manuales/Aprender%20HTML/introduc/cierre.htm (4 of 4) [27/02/2003 16:56:48]

Cmo crear pginas web. Imprimir Manual : HTML: Despedida y Cierre

Imprimir
Volver

WebAprendiz
estudio/Cmo crear tu pgina web: Paso a Paso

Despedida y Cierre del HTML


Bien, si ests aqu y has ledo todo el Manual, he de reconocer que tienes
mucho mrito.
Te recuerdo que este Libro/Manual deberas utilizarlo de consulta, y no intentar
conocer y aplicar todos los Elementos del HTML y, mucho menos, todos sus
Atributos, al menos al principio. Tambin te recuerdo, que en el Indice de
Elementos, te he sealado los que considero bsicos. Empieza con esos.
He intentado ponerte ejemplos de los Atributos ms significativos pero, en
definitiva, sern tus necesidades las que finalmente determinen qu Elementos y
qu Atributos vas a utilizar.
Practica, practica, practica.
An quedan ms PASOS en mi Manual, en ellos veremos algo de Diseo,
mencionaremos cosas como Javascript, DHTML, XHTML, Multimedia,
publicacin de tu web, etc.

AHORA TE TOCA A TI
Este e-book de HTML y todo el material de WebAprendiz, estn a tu
disposicin, totalmente gratuitos.
SLO te pido lo siguiente:

file:///D|/Manuales/Aprender%20HTML/introduc/cierrep.htm (1 of 3) [27/02/2003 16:56:49]

Cmo crear pginas web. Imprimir Manual : HTML: Despedida y Cierre

SI realmente has ledo el Manual:


Por favor, hzmelo saber. Slo por curiosidad, envame un e-mail diciendo
simplemente: "Ledo", por ejemplo. Te mereces un monumento. Gracias.

SI has ledo total o parcialmente el Manual, y te ha gustado:


Por favor, hzmelo saber. Ensalza un poco mi ego y alivia mis doloridos ojos y
espalda. Gracias.

SI has ledo total o parcialmente el Manual y NO te ha gustado:


Por favor, hzmelo saber. Mortifcame un poco, pero dime tus sugerencias, no te
limites a destrozarlo. Gracias.

SI has ledo el Manual y crees que te ha sido til, o puede ser de


utilidad para otras personas:
Por favor recomindalo. Grita a los cuatro vientos.
Sugerencias: a tus conocidos, amigos, familia, en los Foros, reuniones de trabajo,
asambleas, peridicos, revistas, TBOs, libros, radio, televisin normal o por cable, e-mails,
comunidades virtuales, etc. Gracias.

***
He ledo el Manual:
Me ha gustado:
No me ha gustado:

Bien, eso es todo That's all folks!


Ahora puedes seguir con el PASO CUARTO, o hacer lo que quieras.
Yo sigo.

Manual de HTML: Primera Versin. Terminado en la madrugada de una fra noche de


Noviembre de 2000, en mi despachonet, situado en una casa antigua de Sant Just
Desvern (Barcelona, Espaa).

Reservados todos los derechos


file:///D|/Manuales/Aprender%20HTML/introduc/cierrep.htm (2 of 3) [27/02/2003 16:56:49]

Cmo crear pginas web. Imprimir Manual : HTML: Despedida y Cierre

Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4


fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/introduc/cierrep.htm (3 of 3) [27/02/2003 16:56:49]

Webaprendiz: E-mail: He ledo el Manual HTML

El Estudio El Almacn El Archivo Sugerencias Recomendar


Veo que te has decidido a opinar. Esto est
muy bien.
Tambin me puedes Recomendar

HAS LEDO EL MANUAL HTML

HE LEDO EL MANUAL HTML

Enviar

Borrar

VOLVER AL MANUAL

Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4


fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/introduc/emailwa2.htm [27/02/2003 16:56:49]

Webaprendiz: E-mail: Me ha gustado el Manual HTML

El Estudio El Almacn El Archivo Sugerencias Recomendar


Veo que te has decidido a opinar. Esto est
muy bien.
Tambin me puedes Recomendar

TE HA GUSTADO EL MANUAL HTML

ME HA GUSTADO EL MANUAL HTML. ALABANZAS:

Enviar

Borrar

VOLVER AL MANUAL

Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4


fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/introduc/emailwa3.htm [27/02/2003 16:56:50]

Webaprendiz: E-mail: No me ha gustado el Manual HTML

El Estudio El Almacn El Archivo Sugerencias Recomendar


Veo que te has decidido a opinar. Esto est
muy bien.
Tambin me puedes Recomendar

NO TE HA GUSTADO EL MANUAL HTML

NO ME HA GUSTADO EL MANUAL HTML. SUGERENCIAS:

Enviar

Borrar

VOLVER AL MANUAL

Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4


fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/introduc/emailwa4.htm [27/02/2003 16:56:50]

Cmo crear pginas web. Manual: HTML: Elemento NOSCRIPT

El Estudio El Almacn El Archivo Sugerencias Recomendar


Web de contenido gratuito y formativo.
Qu ms quieres?. Recomendar
Webaprendiz.

Final Pgina
ESTUDIO
Introduccin

estudio/Cmo crear tu pgina web: Paso a


Paso

Qu es el
Estudio?

Elemento NOSCRIPT

Declaracin
principios

<noscript>.....</noscript>
Permite ofrecer contenido alternativo cuando
no se ejecuta un script, es decir, cuando el
navegador o mecanismo de interpretacin de
cdigo, est configurado para que no
interprete los scripts. o bien no soporta un
lenguaje particular utilizado en el Elemento
SCRIPT.
Requiere etiqueta de cierre.

Los 10
mandamientos
PASO A PASO

Cmo crear tu
pgina web y ebook de HTML
Libro de Estilo

Principios
generales
Accesibilidad
Avanzando

Entrada
Puntos de Vista

Entrada
Colaboraciones

Su utilizacin es muy sencilla. Puede ser un


simple vnculo a un documento alternativo.
Lo utilizaremos cuando el script que no se
puede ejecutar realmente afecte al
documento, o represente un documento o
seccin importante.
<script type="........">
cdigo del script
</script>
<noscript>
<p>Visite nuestra <a
href="URL">Exposicin.</a></p>
</noscript>

file:///D|/Manuales/Aprender%20HTML/script/script3.htm (1 of 3) [27/02/2003 16:56:51]

Cmo crear pginas web. Manual: HTML: Elemento NOSCRIPT

Vuestras
colaboraciones
Sugerencias
SALIDA

Bien, esto es todo sobre SCRIPT. Si no


programas en otros lenguajes o incluyes
scripts de los que se pueden obtener en la
Net, no vas a utilizar este Elemento.
Recuerda que en el Almacn, del Taller del
Aprendiz, te he puesto enlaces a webs que
facilitan, de forma gratuita, multitud de scripts
que puedes incorporar en tus pginas.
***

Bueno, este ha sido el ltimo Captulo


formal del Manual/Libro de HTML. Slo
queda la Despedida y Cierre. Luego podrs
seguir con el Paso Cuarto de Manual PASO
a PASO.

Terminamos de una vez?

SCRIPT y Sucesos o Eventos


ndice HTML
ndice General

S, por favor

| arriba | Almacn | Archivo | Pgina Principal

Revisado:
Ferran Mart 2000/01 - WebAprendiz.com - Versin 1.4
fmabox@webaprendiz.com

file:///D|/Manuales/Aprender%20HTML/script/script3.htm (2 of 3) [27/02/2003 16:56:51]

Cmo crear pginas web. Manual: HTML: Elemento NOSCRIPT

file:///D|/Manuales/Aprender%20HTML/script/script3.htm (3 of 3) [27/02/2003 16:56:51]

Como crear pginas web. Manual: HTML: Explicacin id y classs

WebAprendiz

Manual HTML

Los Atributos id y class

id=

(identificador)

Este Atributo sirve para asignar un nombre a un Elemento. Una


gran mayora de los Elementos del HTML poseen este Atributo.
El nombre utilizado ha de ser nico dentro de un documento. Es
decir, no podemos utilizar el mismo nombre para otro identificador
id dentro de la misma pgina.

Usos ms frecuentes:

En las etiquetas de apertura de Elementos, en el cdigo de un


documento.
En las Hojas de Estilo, cuando se desea dar un estilo concreto
a un Elemento. (Lo veremos con mayor profundidad cuando
hablemos de las hojas de estilo).
Como ancla de destino en hipervnculos.
Para referirnos a un elemento concreto perteneciente a un
"script".
Para nombrar a un elemento de un "objeto"

Ejemplos:
<p id="cocotero">Este prrafo tiene un nombre
nico, no porque el nombre asignado sea raro,
sino porque no se podr repetir en el resto del
documento.</p>

file:///D|/Manuales/Aprender%20HTML/texto/idclass.htm (1 of 4) [27/02/2003 16:56:52]

Como crear pginas web. Manual: HTML: Explicacin id y classs

<p id=tonteria">Este prrafo es muy tonto.</p>


<h5 id=tonteria">Esto es errneo. No puedo
utilizar el mismo nombre de identificador
dentro del mismo documento, aunque sea para
Elementos diferentes.</h5>

Entendido?

class=

(clase)

Este Atributo sirve para asignar un nombre de "clase", o varios


nombres de "clase" a un Elemento.
El nombre de "clase" s se puede repetir dentro del mismo
documento, ya sea referido al mismo Elemento o a diferentes
Elementos.

Usos ms frecuentes:

En las etiquetas de apertura de Elementos, en el cdigo de un


documento.
En las Hojas de Estilo, cuando se desea dar un estilo concreto
a una serie de Elementos. (Lo veremos con mayor profundidad
cuando hablemos de las hojas de estilo).

Ejemplos:
<p class="pc">Texto centrado, segn mi hoja de
estilo.</p>

file:///D|/Manuales/Aprender%20HTML/texto/idclass.htm (2 of 4) [27/02/2003 16:56:52]

Como crear pginas web. Manual: HTML: Explicacin id y classs

Quieres verlo?:
Texto centrado, segn mi hoja de estilo.

<p class="pc mini">Texto de 8pt y centrado,


segn mi hoja de estilo.</p>
Lo vemos?:
Texto de 8pt y centrado, segn mi hoja de estilo.

Fjate que si utilizas varias "clases" para un mismo elemento, hay


que separarlas con un espacio en blanco: class="pc mini".

<p class="top">Prrafo de clase top</p>


<p class="top">Otro prrafo clase top</p>
<h1 class="top">Cabecera grande clase top</h1>
<h6 class="top">Cabecera pequeita clase
top</h6>
Las cuatro lneas de cdigo anteriores podran estar todas en el
mismo documento, ya que el atributo "class" puede repetirse en el
mismo elemento o en elementos diferentes dentro del mismo
documento.

Ms cosas
Los elementos pueden llevar los dos atributos: "class" y "id"
<p class="normal" id="primero"> Clase y tipo a
la vez</p>
file:///D|/Manuales/Aprender%20HTML/texto/idclass.htm (3 of 4) [27/02/2003 16:56:52]

Como crear pginas web. Manual: HTML: Explicacin id y classs

La lnea anterior es correcta.

Bueno, esto ha sido un aperitivo sobre estos dos atributos. Cuando


hablemos de Vnculos, Hojas de Estilo y algunas cosas ms, ya
volveremos sobre este tema.

Regresar al Manual de HTML

file:///D|/Manuales/Aprender%20HTML/texto/idclass.htm (4 of 4) [27/02/2003 16:56:52]