HTML - 4

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
Texto, texto, texto
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
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
Tablas Fijas, Variables y Mixtas
Marcos
Elemento FRAMESET
Elemento FRAME
Elemento NOFRAMES
Ejemplos de marcos
Marcos: Name y Target
Elemento IFRAME: marcos en lnea
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?
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
Como crear pginas web. Manual: HTML: Indice por Elementos

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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
Libro de Estilo
Principios
generales
Accesibilidad
Avanzando
Entrada
Indice alfabtico Elementos HTML 4.01

Transitional
Puntos de Vista
Entrada
Colaboraciones
file:///D|/Manuales/Aprender%20HTML/introduc/indelem.htm (1 of 5) [27/02/2003 16:55:06]
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
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
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

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
S
STRIKE
U
D
D
D
Texto
Texto
Texto
Introduccin HTML
Segundo paso pag.6
ndice General
Empezar el Manual
Revisado:
Cmo crear pginas web. Manual: HTML: LINKS: Elemento A

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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
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]
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
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"
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.
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
Revisado:
Como crear pginas web. Manual: HTML: Elemento P p1

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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
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]
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>
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
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
Acabemos
Revisado:
Cmo crear pginas web. Manual: HTML: Elemento SCRIPT y Sucesos o Eventos intrnsecos

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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.
Los 10
mandamientos
PASO A PASO
Cmo crear tu
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]
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
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
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
Introduccin a SCRIPT
ndice HTML
ndice General
A mi no
Revisado:
Cmo crear pginas web. Manual: HTML: Introduccin a SCRIPT

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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
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
Script
4 DIN-A4
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">

</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
Revisado:
Cmo crear pginas web. Manual: HTML: Los Formularios: Ejemplo 2

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
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]
Vuestras
colaboraciones
Sugerencias
SALIDA
maxlength="15" size="15"></p>
</form>
Apellido 1:<form>
<p><input type="text" name="apellido1"
</form>
Apellido 2:<form>
<p><input type="text" name="apellido2"
</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>
<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
value=""Foros">Foros
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.
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>
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!
Revisado:
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

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

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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
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

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 :-).
<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>
</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,
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')>
<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:
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.
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...
Revisado:
Cmo crear pginas web. Manual: HTML: Estructura Global: Elementos DIV, SPAN

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
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>
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.
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
definir caractersticas especficas, pero a

nivel de lnea.
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:

Esta es la cabecera principal de esta
pgina. La he alineado en el centro con el
elemento DIV:
<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?
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
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
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?
Elemento ADDRESS
ndice HTML
ndice General
Listo
Revisado:
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> </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> </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> </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

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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.
Los 10
mandamientos
PASO A PASO
Cmo crear tu
Libro de Estilo
Principios
generales
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>
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.
Quieres verla?
Elemento BODY
ndice HTML
ndice General
Qu remedio!
Revisado:
Cmo crear pginas web. Manual: HTML: Estructura Global: Elemento BODY
El Estudio
El Almacn
El Archivo
Sugerencias
Recomendar

Qu ms quieres?. Recomendar Webaprendiz.
Final Pgina
ESTUDIO
Introduccin
Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO
Cmo crear tu
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
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>
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.
<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
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
De acuerdo
Revisado:
Cmo crear pginas web. Manual: HTML: Estructura Global: Elemento META
El Estudio
El Almacn
El Archivo
Sugerencias
Recomendar

Final Pgina
ESTUDIO
Introduccin
Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
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
Libro de Estilo
Principios
generales
Accesibilidad
Avanzando
Entrada
Puntos de Vista
Entrada
Colaboraciones
Vuestras
colaboraciones
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>
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">
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
Vamos
Revisado:

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin
Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO
Cmo crear tu
Libro de Estilo
Principios
generales
Accesibilidad
Avanzando
Entrada
Puntos de Vista
Entrada

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
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>
<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 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>
Bueno, suficiente con el P. Pasemos a otra

cosa.
Elemento P pag.1
ndice HTML
ndice General
Pasemos pues
Revisado:
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

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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
Libro de Estilo
Principios
generales
Accesibilidad
Avanzando
Entrada
Puntos de Vista
Entrada
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]
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>
Plaza Mayor, 75<br>

00000 Compulandia</p>
Bueno, creo que est clarsimo, no?

Seguimos andando?
Elemento P pag.2
ndice HTML
ndice General
Seguimos
Revisado:
Como crear pginas web. Manual: HTML: Elemento BLOCKQUOTE

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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.
Los 10
mandamientos
PASO A PASO
Cmo crear tu
Libro de Estilo
Principios
generales
<q>.....</q>
Este Elemento tericamente pone "comillas"
en el texto comprendido entre sus dos
etiquetas.
Accesibilidad
Avanzando
Entrada
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]
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> </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?
Ms madera?
Elemento BR
ndice HTML
ndice General
Ms, ms!
Revisado:
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

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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
Libro de Estilo
Principios
generales
Accesibilidad
Avanzando
Entrada
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]
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
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
Tambin
Revisado:
Cmo crear pginas web. Manual: HTML: Elemento ACRONYM y otros

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin
Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO
Cmo crear tu
Libro de Estilo
Principios
generales

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.
Accesibilidad
Avanzando
Entrada
Puntos de Vista
Entrada
Colaboraciones
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]
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
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 HTML
ndice General
Valee, valee!
Revisado:
Cmo crear pginas web. Manual: HTML: Elemento CODE y varios

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin
Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO
Cmo crear tu
Libro de Estilo
Principios
generales
Accesibilidad
Avanzando

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.
Entrada
Puntos de Vista
Entrada
Colaboraciones
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]
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.
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?
Elemento ACRONYM y otros

ndice HTML
ndice General
S!, matar !!
Revisado:
Como crear pginas web. Manual: HTML: Elementos EM y STRONG

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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
Libro de Estilo
Principios
generales
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.
Colaboraciones
file:///D|/Manuales/Aprender%20HTML/texto/emtext.htm (1 of 3) [27/02/2003 16:55:23]
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?
Elemento CODE y otros

ndice HTML
ndice General
Dos ms
Revisado:
Como crear pginas web. Manual: HTML: Elementos SUB y SUP

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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.
Los 10
mandamientos
PASO A PASO
Cmo crear tu
Libro de Estilo
Principios
generales
Accesibilidad
Avanzando
Entrada
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 HTML
ndice General
Yo tambin
Revisado:
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

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin
Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO
Cmo crear tu
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.
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]
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
Elementos SUB y SUP

ndice HTML
ndice General
Estoy de acuerdo
Revisado:
Como crear pginas web. Manual: HTML: Elemento BDO

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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.
Los 10
mandamientos
PASO A PASO
Cmo crear tu
Libro de Estilo
Principios
generales
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 HTML
ndice General
Vale, hombre!
Revisado:
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

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin
Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO
Cmo crear tu

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
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]
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
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.
Bueno, yo sigo y t?
Elemento BDO
ndice HTML
ndice General
Tambin
Revisado:
Como crear pginas web. Manual: HTML: Elementos FONT y BASEFONT

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin
Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO
Cmo crear tu
Libro de Estilo
Principios
generales

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]
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
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.
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 HTML
ndice General
Qu bien!
Revisado:
Como crear pginas web. Manual: HTML: Elementos INS y DEL
El Estudio
El Almacn
El Archivo
Sugerencias
Recomendar

Final Pgina
ESTUDIO
Introduccin
Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO
Cmo crear tu
Libro de Estilo
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.
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 HTML
ndice General
A ver si es verdad!!
Revisado:
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

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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
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: > 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]
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.
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">
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 HTML
ndice General
Enlaces de esta pgina:
Lista de Caracteres Especiales
Terminemos
Revisado:
Como crear pginas web. Manual: HTML: Espacios en blanco

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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
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]
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
entre las etiquetas <p> y <p> recuerdas?.
<p> </p>
<p> </p>
<p> </p>
Este cdigo provocar tres lneas en blanco.
Pero esta no es la nica aplicacin de

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 .
Este prrafo de texto
tiene las
palabras
separadas por dos espacios

en blanco,
en lugar de
un solo espacio, que es
lo habitual.
<p>Este prrafo
de texto
tiene las
palabras separadas
por dos ...etc. etc.
etc.</p>
Fjate que slo figura un carcter
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 " ". 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
" ". Hay otras formas, pero
no forman parte de este captulo,
as que nos olvidamos de ellas.
<p>    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.
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 HTML
ndice General
Por supuesto
Revisado:
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

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,
todos los que estoy
utilizando van en el Cuerpo del Documento, es decir, entre las
etiquetas<code>
<body></body></code>.</p>
<p align="center">***</p>
<p>    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]
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>    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> </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 "Sonata de Otoo": <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"
color="#0000FF"><strong>Hasta luego!</strong></font></p>
<p> </p>
</body>
</html>
Ver pgina de Pantalla

Ver pgina de Comentarios
Volver al Manual

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
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

Final Pgina
ESTUDIO
Introduccin
Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO
Cmo crear tu
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
colaboraciones
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>
SALIDA
<html>
<head>
<title>
</title>
<meta>
<link>
<script>
</script>
<style>
</style>
</head>
<body>

<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
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
Revisado:
Cmo crear pginas web. Manual: HTML: Estructura Global: Especificacin
El Estudio
El Almacn
El Archivo
Sugerencias
Recomendar

Final Pgina
ESTUDIO
Introduccin
Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO
Cmo crear tu
Especificacin versin HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML

4.01 Transitional//EN"
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

4.01 //EN"
"http//www.w3.org/TR/html4/strict.dtd">
4.01 Transitional//EN"
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>
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
Pues procedamos
Revisado:
Cmo crear pginas web. Manual: HTML: Estructura Global: Elemento HTML

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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
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
Revisado:
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

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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
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>
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
Revisado:
Cmo crear pginas web. Manual: HTML: Estructura Global: Elemento TITLE

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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.
Los 10
mandamientos
PASO A PASO
Cmo crear tu
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>
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
A m tambin
Revisado:
Como crear pginas web. Manual: HTML: ndice Elementos de Texto

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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
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
Empecemos
Revisado:
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

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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
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
Vemoslo
Revisado:
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

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin
Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO
Cmo crear tu
Libro de Estilo
Principios
generales
Accesibilidad
Avanzando
Entrada

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]
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
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
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
Paleta de colores WebAprendiz
De momento
Revisado:

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

Paso
Qu es el
Estudio?
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
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
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
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:
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,
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
Revisado:
Como crear pginas web. Manual: HTML: Geometra

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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
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]
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:
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>
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
Revisado:
Como crear pginas web. Manual: HTML: Estructura bsica

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin
Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO
Cmo crear tu
Libro de Estilo
Principios
generales
Accesibilidad
Avanzando
Entrada
Puntos de Vista
Entrada
Colaboraciones
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:
<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]
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
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?

Definiciones
ndice HTML
ndice General
Cambiemos
Revisado:
Como crear pginas web. Manual: HTML: Definiciones

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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
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]
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
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:
<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,
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
Revisado:
Como crear pginas web. Manual: HTML: Qu es?

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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
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]
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
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.
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
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

(1) Especificacin del HTML 4.01 de la W3C
Revisado:
Cmo crear pginas web. Manual: HTML: Listas: UL, LI, OL

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin
Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO
Cmo crear tu
Libro de Estilo
Principios
generales
Accesibilidad
Avanzando

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
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.
Todos requieren etiqueta de cierre.
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.
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".
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?
ndice HTML
ndice General
Pasemos
Revisado:
Cmo crear pginas web. Manual: HTML: Listas: Ejemplos

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin
Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO
Cmo crear tu

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.
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?.
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:
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>
</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
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.

Te parece?
Listas: UL, OL, LI
ndice HTML
ndice General
Me parece
Revisado:
Cmo crear pginas web. Manual: HTML: LISTAS: Definiciones: DL, DT, DD

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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
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.
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.
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.
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.

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
Revisado:
Cmo crear pginas web. Manual: HTML: LINKS: Intro

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin
Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO
Cmo crear tu
Libro de Estilo
Principios
generales
Accesibilidad

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
Links
Tardar unos
segundos
14 DIN-A4
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
Adelante!
Revisado:
Cmo crear pginas web. Manual: HTML: Formularios: Elementos FIELDSET y LEGEND

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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
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]
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.
Elemento LABEL
ndice HTML
ndice General
Qu bien!
Revisado:
Cmo crear pginas web. Manual: HTML: Formularios: Elemento INPUT

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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.
Los 10
mandamientos
PASO A PASO
Cmo crear tu
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
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.
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.
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">
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
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
Revisado:
Cmo crear pginas web. Manual: HTML: Formularios: Elemento FORM

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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.
Los 10
mandamientos
PASO A PASO
Cmo crear tu
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.
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,
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
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
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
Revisado:
Cmo crear pginas web. Manual: HTML: Formularios: Introduccin

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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
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
Formularios I
Tardar unos
segundos.
8 DIN-A4
Formularios II
Tardar unos
segundos.
9 DIN-A4
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
Toca madera
Revisado:
Cmo crear pginas web. Manual: HTML: CSS: Ejemplo 4 tipos de Hoja de Estilo

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin
Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO
Cmo crear tu
Libro de Estilo
Principios
generales
Accesibilidad
Avanzando
Entrada
Puntos de Vista
Entrada

Paso
Ejemplo: 4 tipos de definir Estilo

<html>
<head>
<title>.....</title>
<meta>
<link rel="stylesheet"
href="......." type="text/css"
title="...." media="screen">
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]
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:
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?.
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
Revisado:
Cmo crear pginas web. Manual: HTML: CSS: Situacin de Estilos en un documento

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin
Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO
Cmo crear tu
Libro de Estilo
Principios
generales
Accesibilidad
Avanzando
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

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
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.
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.
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.
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>
<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.
Piensas seguir conmigo?

CSS: Orden de Cascada
ndice HTML
ndice General
A estas alturas, ya...
Revisado:
Cmo crear pginas web. Manual: HTML: CSS: Orden de Cascada

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin
Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO
Cmo crear tu
Libro de Estilo
Principios
generales
Accesibilidad
Avanzando
Entrada
Puntos de Vista
Entrada
Colaboraciones

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.
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,
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.
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.
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
C=0
C=3
C=1
C=1
>>>
>>>
>>>
>>>
100
013
011
001
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
De acuerdo
Revisado:
Cmo crear pginas web. Manual: HTML: CSS: Pseudo Elementos y Pseudo clases

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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
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:
Vuestras
colaboraciones
Sugerencias
SALIDA
color: #ff0000; textdecoration: underline}

a: visited {font-family:
color: #ff99cc; textdecoration: underline}
a: hover {font-family:
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
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.
Vamos?
CSS: Selectores Class y Id
ndice HTML
ndice General
Vamos
Revisado:
Cmo crear pginas web. Manual: HTML: CSS: Selectores Class y Id

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

Paso
Qu es el
Estudio?
Conceptos bsicos (cont.)
Declaracin
principios
Selectores Class y Id
Los 10
mandamientos
PASO A PASO
Cmo crear tu
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}
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>
<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
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
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>
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:
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.
Cambiemos de pgina, ya!

CSS: Reglas y Agrupacin
ndice HTML
ndice General
Vale
Revisado:
Cmo crear pginas web. Manual: HTML: CSS: Reglas y Agrupacin

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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
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
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:

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}
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}
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
ejemplo las Propiedades referidas a

"mrgenes".
Qu tal, de momento?. Fcil, no?

Elemento STYLE. Conceptos
bsicos 1
ndice HTML
ndice General
Ms o menos
Revisado:
Cmo crear pginas web. Manual: HTML: CSS: Elemento STYLE. Conceptos bsicos sobre las CSS.

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

Paso
Qu es el
Estudio?
Elemento STYLE
Declaracin
principios
<style>.....</style>

<td width="20%"><center><width="100%">
<tr>
</tr>
</table>
</td>

<td width="80%" align="center"><table width="100%">
<tr>
</tr>
<tr>
</tr>
<tr>
<td width="75%"><table width="93%"> (Tabla central)
<tr>
</tr>
<tr>
<td width="100%" colspan="2"></td>
</tr>
<tr>
<td width="50%"><table cellpadding="2"
width="100%"> (Tabla pequea)
<tr>
</tr>
<tr>
</tr>
</table>
</td>
<td width="50%"><table cellpadding="2"
width="100%"> (Tabla pequea)
<tr>
</tr>
<tr>
</tr>
</table>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</td>
<td width="25%"><table width="100%" cellpadding="2">
(Tabla derecha)
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
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

Cmo crear pginas web. Manual: HTML: Las Tablas: Tablas Fijas

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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
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
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.
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
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
Ya era hora!!!
Revisado:
Cmo crear pginas web: Manual: HTML: Las Tablas: Fijas: Ex1
WebAprendiz
Tabla
lateral
izquierda.
Puede servir
para
navegacin.
Imita a
un marco
izquierdo.
Est anidada
en la Tabla
General.
Celda del
cuerpo
principal
Celda C.
principal
Celda de la Tabla
central
Celda Tabla
derecha

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.
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 C.
principal
Celda de la Tabla
central
Celda Tabla
derecha

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
Volver al Manual

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:
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.
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>
</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>
</tr>
</table>
Volver al Manual

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>
</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,
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
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

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
contenido
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
contenido
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

Cmo crear pginas web. Manual: HTML: Los Marcos: Introduccin

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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
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]
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
Si seor
Revisado:
Cmo crear pginas web. Manual: HTML: Los Marcos: Elementos FRAMESET, FRAME y NOFRAMES

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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.
Los 10
mandamientos
PASO A PASO
Cmo crear tu
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.

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.
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"

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>
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.
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
Vamos
Revisado:
Cmo crear pginas web. Manual: HTML: Los Marcos: Ejemplos p1

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin
Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO
Cmo crear tu
Libro de Estilo
Principios
generales

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).
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
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.
<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:

<frame src=".....">
<frameset cols="25%,75%">
<frame src=".....">
<frame ser=".....">
</frameset>
</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
ndice HTML
ndice General
Revisado:

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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
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>
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
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?
Marcos: Ejemplos pg. 1

ndice HTML
ndice General
Pokins, pokins, pokins
Revisado:
Cmo crear pginas web. Manual: HTML: Los Marcos: Utilizacin de Name y Target

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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
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
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
<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.
<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
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...
Revisado:
Cmo crear pginas web. Manual: HTML: Los Marcos: Elemento IFRAME

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin
Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO
Cmo crear tu
Libro de Estilo
Principios
generales
Accesibilidad
Avanzando
Entrada
Puntos de Vista

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>.
Entrada
Colaboraciones
Atributos y Valores
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
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"
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"
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.
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
Revisado:
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

file:///D|/Manuales/Aprender%20HTML/marcos/exiframe.htm [27/02/2003 16:56:33]
Cmo crear pginas web. Manual: HTML: CSS: Introduccin

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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
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
Primera
parte
Tardar unos
segundos.
9 DIN-A4
Segunda
parte
Tardar unos
segundos.
9 DIN-A4
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:
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.
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

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

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
Revisado:
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

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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
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:
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.
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
Revisado:
Cmo crear pginas web. Manual: HTML: LINKS: Marcadores: p1

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin
Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO
Cmo crear tu
Libro de Estilo
Principios
generales
Accesibilidad
Avanzando
Entrada
Puntos de Vista

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.
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?
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.
<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
en esta pgina, eh?.

Lo complicamos un poquito ms?
LINKS. Externos e Internos
ndice HTML
ndice General
Ms todava?
Revisado:
Cmo crear pginas web. Manual: HTML: LINKS: Externos e Internos

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin
Qu es el
Estudio?
Declaracin
principios

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
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.
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/
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.
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
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.
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
All voy!
Revisado:
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

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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.
Los 10
mandamientos
PASO A PASO
Cmo crear tu
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.
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).

consultar ene el Elemento P, disabled,
accesskey y tabindex en el Elemento
INPUT
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.

De acuerdo?
Elemento INPUT
ndice HTML
ndice General
Como siempre
Revisado:
Cmo crear pginas web. Manual: HTML: Formularios: Elementos SELECT, OPTION y OPTGROUP

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin
Qu es el
Estudio?
Declaracin
principios
Los 10
mandamientos
PASO A PASO
Cmo crear tu
Libro de Estilo

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.
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
Vuestras
colaboraciones
Sugerencias
SALIDA
usuario elegir ms de una opcin del men.

accesskey y tabindex en el Elemento
INPUT.
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
la larga.

consultar ene el Elemento P, disabled en el
Elemento INPUT.
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.
Atributos y Valores
label="texto"
Especifica la etiqueta para las opciones.

consultar ene el Elemento P, disabled en el
Elemento INPUT.
SCRIPT.
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>
<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
Revisado:
Cmo crear pginas web. Manual: HTML: Formularios: Elemento TEXTAREA

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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.
Los 10
mandamientos
PASO A PASO
Cmo crear tu
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.

tabindex y readonly en el Elemento INPUT.
Vuestras
colaboraciones

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>
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
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...
Veamos unas etiquetas LABEL

SELECT, OPTION y
OPTGROUP
ndice HTML
ndice General
No lo hemos visto ya?
Revisado:
Cmo crear pginas web. Manual: HTML: Formularios: Elemento LABEL

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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.
Los 10
mandamientos
PASO A PASO
Cmo crear tu
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.

consultar ene el Elemento P, accesskey en
el Elemento INPUT.
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?
Revisado:
Cmo crear pginas web. Manual: HTML: Despedida y cierre del Manual de HTML: snif, snif....

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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
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
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.
***
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
Revisado:
Cmo crear pginas web. Imprimir Manual : HTML: Despedida y Cierre
Imprimir
Volver
WebAprendiz
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]
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


Webaprendiz: E-mail: He ledo el Manual HTML

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

file:///D|/Manuales/Aprender%20HTML/introduc/emailwa2.htm [27/02/2003 16:56:49]
Webaprendiz: E-mail: Me ha gustado el Manual HTML

muy bien.
TE HA GUSTADO EL MANUAL HTML
ME HA GUSTADO EL MANUAL HTML. ALABANZAS:
Enviar
Borrar
VOLVER AL MANUAL

Webaprendiz: E-mail: No me ha gustado el Manual HTML

muy bien.
NO TE HA GUSTADO EL MANUAL HTML
NO ME HA GUSTADO EL MANUAL HTML. SUGERENCIAS:
Enviar
Borrar
VOLVER AL MANUAL

Cmo crear pginas web. Manual: HTML: Elemento NOSCRIPT

Webaprendiz.
Final Pgina
ESTUDIO
Introduccin

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.
Los 10
mandamientos
PASO A PASO
Cmo crear tu
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>
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
Revisado:
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]
<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>
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>
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

HTML - 4

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML - 4

Transféré par

Droits d'auteur :

Formats disponibles

Como crear pginas web.

Manual: HTML: Introduccin

El Estudio El Almacn El Archivo Sugerencias Recomendar

estudio/Cmo crear tu pgina web: Paso a

Tercer paso: Aprender HTML

Bienvenido al Tercer Paso. Estar aqu significa que

ADVERTENCIA: Este Manual/e-book es

Indice reducido del Manual HTML

Como crear pginas web. Manual: HTML: Introduccin

Indice ampliado del Manual de HTML

Como crear pginas web. Manual: HTML: Introduccin

Como crear pginas web. Manual: HTML: Introduccin

Como crear pginas web. Manual: HTML: Introduccin

Dale estilo y CSS

Nota: En la mayora de pginas de WebAprendiz he

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

| arriba | Almacn | Archivo | Pgina Principal

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

estudio/Cmo crear tu pgina web: Paso a

A la derecha de los Elementos figura el

Indice alfabtico Elementos HTML 4.01

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

Indice alfabtico Elementos HTML 4.01

Captulo del Manual

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

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

Indice de Elementos Desaprobados

Captulo del Manual

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

| arriba | Almacn | Archivo | Pgina Principal

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

estudio/Cmo crear tu pgina web: Paso a

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

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

pulsar la tecla TAB, dentro de un

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

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

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

rel="una o varias clases de vnculos"

rev="una o varias clases de vnculos"

target="nombre del marco o tipo de ventana"

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

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

Tal vez encuentres todo lo anterior un poco

| arriba | Almacn | Archivo | Pgina Principal

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

estudio/Cmo crear tu pgina web: Paso a

Para dar informacin sobre el idioma

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