INTRODUCCIÓN AL LENGUAJE HTML

INTRODUCCIÓN
AL LENGUAJE HTML
3.0
CONTENIDO
INTRODUCCIÓN
BREVE
AL LENGUAJE HTML
RESEÑA HISTÓRICA DE
FUNCIONAMIENTO
3.0 .................. 1
INTERNET .................. 3
MENÚ
Y
DIRECTORIO ................................... 22
CARACTERES
ESPECIALES
.................................. 23
INTERNET ............. 5
COMENTARIOS .............................................. 25
3.0 .................. 10
HYPERENLACES ............................................. 25
HTML ......... 11
TABLAS ..................................................... 27
CABECERA .................................................. 12
IMÁGENES .................................................. 29
CUERPO
FRAMES ..................................................... 33
INTRODUCCIÓN
ESTRUCTURA
Y LENGUAJES DE
AL LENGUAJE HTML
BÁSICA DE UN DOCUMENTO
DEL DOCUMENTO ..................................
COLORES
EN HEXADECIMALES
Y COLORES SEGURO
13
...... 14
INDICE
...................................................... 35
PÁRRAFO ................................................... 15
<PRE> ................................................. 15
<P>
Y
<BR> .......................................... 15
<BLOCKQUOTE> ....................................... 16
REGLA
HORIZONTAL
TRABAJO
........................................ 17
CON TEXTOS
CABECERAS
FORMATO
O
DE
..................................... 17
TÍTULOS ................................. 17
TEXTOS ................................... 18
ESTILOS ................................................. 18
LISTAS ..................................................... 19
LAS
LISTAS ORDENADAS
................................ 19
LAS
LISTAS NO ORDENADAS
LAS
LISTAS DE DEFINICIÓN .............................
............................ 21
22
2
BREVE
RESEÑA HISTÓRICA DE
INTERNET
quince, y en 1972 cuarenta. El crecimiento continuó
durante toda la década de los 70, ya que la arquitectura
de la red facilitaba el que nuevos nodos y redes se
conectaran a ella.
Se denomina Internet a la red mundial de redes de
computadores conectados entre sí basado en el
protocolo común TCP/IP. Sin embargo, el término
ARPANET se basó en el protocolo de intercambio de
Internet se refiere también a la comunidad de personas que usan y desarrollan esas redes así como al paquetes de información NCP (Network Control Protoconjunto de recursos a los que pude accederce mediante col) hasta 1982. Posteriormente derivó en el TCP/IP
(Transmission Control Protocol / Internet Protocol), un
ellas.
protocolo más versátil que podía ser utilizado en distintas
Pueden distinguirse al menos tres fases en la plataformas, y que se sigue empleando en la actualidad.
evolución de la Red: la primera, durante los años 60 y
El año 1979 marca los orígenes, también dentro de
70, con el nacimiento y desarrollo de las redes con fines
militares; la segunda, durante la década de los 80, con la comunidad académica norteamericana de uno de los
la extensión de uso civil en el ámbito académico; y la servicios inicialmente más populares: los grupos de
tercera, desde comienzos de los años 90 hasta la noticias. Mediante una red llamada Usenet, en principio
actualidad, en la que se produce la gran expansión pensada para usuarios de plataformas UNIX, se
conectaron una serie de computadores con la finalidad
comercial y doméstica.
de intercambiar información.
En 1969 la agencia ARPA (Advanced Reserch Projeects
Esta red creció y se convirtió en un sistema de
Agency), dependiente del Departamento de Defensa
de EEUU, creó una infraestructura de redes informáticas intercambio cooperativo y voluntario de noticias,
llamada ARPANET, que garantizaba la seguridad en la evolucionando hacia grupos de discusión electrónicos.
transmisión de la información, incluso en caso de guerra Mientras en algunos lugares es obligatorio pagar cierta
nuclear. Su principal ventaja consistía en que, aunque cantidad por la recepción de las noticias, Usenet,
parte de los nodos fueran dañados o destruidos, el integrada en Internet, a conseguido mantener su
funcionamiento general del resto de la red no se vería identidad académicas y su espíritu gratuito.
afectado.
En 1985, la National Science Foundation (NSF) creó
NSFNET,
una serie de redes informáticas dedicadas a la
ARPANET puso por primera vez en contacto a los
investigadores,
científicos
y
académicos difusión de los descubrimientos y la educación de
estadounidenses a través de una red informática. Uno Estados Unidos. Basada en los protocolos de
de sus servicios básicos era el correo electrónico. En comunicación de ARPANET, esta red se ofreció
sus inicios contaba con cuatro nodos; en 1971 tenía ya gratuitamente a todas las instituciones educativas y
centros de investigación. Esta red creció rápidamente
3
Las universidades continúan utilizando la red para
compartir recursos: memorias de investigación,
intercambio de información y comunicación interpersonal. Las multinacionales informáticas se proyectan
Al mismo tiempo, otras redes regionales fueron decididamente sobre el ámbito universitario. IBM,
apareciendo con el fin de poder enlazar el tráfico Microsoft y Netscape deciden financiar también la
electrónico de instituciones individuales con la estructura conexión a la Red de los centros universitarios y facilitar
de la red nacional. Corporaciones como Sprint, MCI, el uso de sus navegadores en los centros docentes.
IBM y Merit entre otras empezaron a construir sus
Vista la previsión de 300 millones de usuarios para el
propias redes, tanto en Estados Unidos como en Europa,
redes que finalmente acabarían enlazando con NSFNET. año 2000, las empresas entran de lleno en Internet
con fines estrictamente comerciales. Alquilan parcelas
En Europa, se crea en 1986 RARE, una asociación de de un servidor (porque tener uno es muy costoso) a las
redes y usuarios pensada con el ánimo de fomentar el multinacionales de la informática. Nacen los catálogos
desarrollo armónico de las redes del continente. on-line, el comercio electrónico, la banca electrónica,
Proyectos como el COSINE, dependiente de Eureka, los cursos a través de la Red, etc.
aparecen para poner en práctica los objetivos de RARE.
Por conseguir soluciones técnicas y una cierta
En la segunda mitad de los años 80, diversas firmas estandarización de criterios en Internet se crean
comerciales y otros proveedores de red regionales diversos organismos de carácter no gubernamental.
empiezan a hacerse cargo del grueso del tráfico de la Entre ellos cabe citar la ISOC (Internet Society),
red NSFNET, lo que precipita el final de la presencia sociedad que promueve la distribución global de
gubernamental y la emergencia de Internet como un información sobre la base de la tecnología TCP/IP; el
conjunto de redes para uso institucional, académico y IAB (Internet Advisory Board), consejo de especialistas
progresivamente comercial.
que estudia y sanciona los protocolos utilizados y emite
recomendaciones técnicas; y el IETF (Internet EngiDesde 1989, con el desarrollo de la aplicación World neering Task Forcce), grupo de voluntarios que aportan
Wide Web originada en el CERN, el uso de la red Internet ideas y soluciones técnicas.
cobra nuevas dimensiones. Su impulso definitivo se
produce desde 1993 con la aparición del primer
Introducción al Diseño Digital
navegador de interfaz gráfico Mosaic, al que seguirían
José Luis Orihuela
en 1994 los navegadores Netscape Navegator y Microsft
María Luisa Santos
Explorer, con los que la Web se convierte en la aplicación
Ed. ANAYA, 1999
estrella de Internet.
gracias al descubrimiento por parte del público de su
potencial y la creación de nuevas aplicaciones que
permitían un acceso más fácil.
4
FUNCIONAMIENTO
Y LENGUAJES DE
INTERNET
Para navegar por Internet se necesita una conexión
y tener una identificación, generalmente el correo
electrónico sirve de para eso.
Existen dos tipos de conexiones a Internet:
Conexión Conmutada:
El computador personal se comunica por medio de
un módem a través de la línea telefónica al
computador central o servidor de la empresa que
ofrece servicios de conexión a Internet.
Conexión dedicada:
El usuario pertenece a una red local, la cual está
conectada a un servidor, el mismo que a través de
una conexión directa ya sea coaxial o fibra óptica,
esta conectado al servidor central de la empresa
proveedora de acceso a Internet.
La velocidad de transmisión por módem es inferior a
las conexiones dedicadas por una diferencia de ancho
de banda. Las líneas telefónicas no tienen la misma
capacidad de transferir datos como los coaxiales o las
fibras ópticas. Aunque últimamente se está trabajando
en un nuevo sistema que permitiría aumentar el ancho
de banda de una línea telefónica.
Para ser “usuario” de Internet, es necesario ser
identificado como tal a través de una especie de código
o dirección electrónica, la cual está compuesta por el
nombre del usuario o “username”, la institución o
proveedor de servicios al cual pertenece y el país donde
se encuentra.
Ejemplo:
[email protected]
Cada país tiene una sigla de dos letra que lo identifica:
Afghanistan
Albania
Algeria
American Samoa
Andorra
Angola
Anguilla
Antigua and Bar.
Argentina
Australia
Austria
Bahamas
Bahrain
Bangladesh
Barbados
Belgium
Belize
Benin
Bermuda
Monaco
Mongolia
Montserrat
Morocco
Mozambique
Myanmar
Namibia
Nauru
Nepal
Netherlands
New Caledonia
af
al
dz
as
ad
ao
ai
ag
ar
au
at
bs
bh
bd
bb
be
bz
bj
bm
mc
mn
ms
ma
mz
mm
na
nr
np
nl
nc
Lesotho
Liberia
Libya
Liechtenstein
Lithuania
Luxembourg
Macau
Madagascar
Malawi
Malaysia
Maldives
Mali
Malta
Martinique (Fr.)
Mauritania
Mauritius
Mayotte
Mexico
Bhutan
Bolivia
Botswana
Brazil
Brunei Darussalam
Bulgaria
Burkina Faso
Burundi
Cambodia
Cameroon
Canada
Cape Verde
ls
lr
ly
li
lt
lu
mo
mg
mw
my
mv
ml
mt
mq
mr
mu
yt
mx
bt
bo
bw
br
bn
bg
bf
bi
kh
cm
ca
cv
5
New Zealand
Nicaragua
Niger
Nigeria
Niue
Norfolk Island
Guadeloupe (Fr.)
Norway
Oman
Pakistan
Panama
Papua New Guinea
Paraguay
Peru
Philippines
Pitcairn
Poland
Polynesia (Fr.)
Portugal
Puerto Rico (US)
Qatar
Reunion (Fr.)
Romania
Russian
Rwanda
Saint Lucia
San Marino
Saudi Arabia
Senegal
Seychelles
Sierra Leone
Singapore
Somalia
South Africa
nz
ni
ne
ng
nu
nf
gp
no
om
pk
pa
pg
py
pe
ph
pn
pl
pf
pt
pr
qa
re
ro
ru
rw
lc
sm
sa
sn
sc
sl
sg
so
za
Cayman Islands
Central African Rep.
Chad
Chile
China
Colombia
Comoros
Congo
Cook Islands
Costa Rica
Cuba
Cyprus
Czechoslovakia
Denmark
Djibouti
Dominica
Dominican Republic
Ecuador
Egypt
El Salvador
Equatorial Guinea
España
Estonia
Ethiopia
Falkland Isl.
Federation
Fiji
Finland
France
Gabon
Gambia
Germany
Ghana
Gibraltar
ky
cf
td
cl
cn
co
km
cg
ck
cr
cu
cy
cs
dk
dj
dm
do
ec
eg
sv
gq
es
ee
et
fk
ru
fj
fi
fr
ga
gm
de
gh
gi
Sri Lanka
St. Pierre
St.Vincent
Sudan
Suriname
Swaziland
Sweden
Switzerland
Syria
Taiwan
Tanzania
Thailand
Togo
Tokelau
Tonga
Tunisia
Turkey
Tuvalu
Uganda
U. Arab Emirates
United Kingdom
United States
Uruguay
Vanuatu
Venezuela
Vietnam
Wallis & Futuna
Yemen
Yugoslavia
Zaire
Zambia
Zimbabwe
lk
pm
vc
sd
sr
sz
se
ch
sy
tw
tz
th
tg
tk
to
tn
tr
tv
ug
ae
uk
us
uy
vu
ve
vn
wf
ye
yu
zr
zm
zw
Greece
Greenland
Grenada
Guam (US)
Guatemala
Guinea
Guinea Bissau
Guyana
Haiti
Honduras
Hong Kong
Hungary
Iceland
India
Indonesia
Iran
Iraq
Ireland
Israel
Italy
Ivory Coast
Jamaica
Japan
Jordan
Kenya
Kiribati
Korea (North)
Korea (South)
Kuwait
Laos
Latvia
Lebanon
gr
gl
gd
gu
gt
gn
gw
gy
ht
hn
hk
hu
is
in
id
ir
iq
ie
il
it
ci
jm
jp
jo
ke
ki
kp
kr
kw
la
lv
lb
6
Otro objetivo fue crear alternativas para la saturada
En el caso de Estados Unidos y Canadá, el código del
país es reemplazado por el código del tipo de institución extensión punto com, que hoy cuenta con 20 millones
de dominios inscritos, incluso los punto net y punto org
u organización a la que pertenece el servidor.
se están saturando.
gov
name
Sitio perteneciente al gobierno
Sitios Web personales
edu
pro
Sitio perteneciente a una institución educacional o
Sitios de profesionales como doctores o abogados
de investigación
mil
Sitio perteneciente a las fuerzas armadas
museum
Sitios de Museos
com
Sitio perteneciente a una empresa comercial
aero
Sitios de aerolineas
org
Sitio perteneciente a un organismo internacional
coop
Sitios de cooperativas
net
Sitio perteneciente a una empresa que en si es
una red o administra redes.
biz
Sitios de empresas y negocios
Después de más de 10 años de debates, la Internet
Corporation for Assigned Names and Numbers (ICANN)
asignó siete nuevas extensiones de dominios de primer
nivel para Internet. La ICANN es una agrupación creada
por el gobierno de los Estados Unidos en 1998 para
expandir las extensiones de dominios. Uno de los
principales objetivos fue entregar un rango más amplio
de posibilidades a organizaciones pequeñas y personas
de tener su propio dominio, quienes hasta ahora debían
conformarse con un subdominio, es decir, una extensión
de subzona (ejemplo: www.rock.com.ar).
info
Sitios de otras temáticas
Internet ofrece una serie de servicio que pueden
satisfacer las necesidades del usuario, para hacer uso
de los servicios que ofrece Internet existen una gran
variedad de aplicaciones según la plataforma que se
esté utilizando (UNIX, Windows, Macintosh)
7
A través de Internet se puede acceder a los siguientes
servicios:
Email:
Correo electrónico
FTP (File Transfer Protocol):
Transferencias de archivos.
Archie:
Búsqueda de programas en servidores públicos.
Telnet:
Conexión remota entre computadores.
NewsGroup:
Grupo de noticias.
Listserv:
Lista de interés.
Chat, Talk, IRC, ICQ:
Conversación en tiempo real.
WWW (World Wide Web):
Aplicaciones multimediales en Internet
WAP (Wireless Application Protocol):
Aplicaciones y contenidos para celulares y
asistentes digitales personales.
Entre los servicios más utilizados en la actualidad en
Internet podemos encontrar:
Correo electrónico (email):
Este es el servicio más utilizado en Internet y su
protocolo de transferencia es POP (Post Office Protocol) o SMTP (Simple Mail Transfer Protocol).
Existen varios browser o aplicaciones para leer los
correos electrónicos entre los que podemos
destacar el Eudora, Microsoft Outlook , Claris
Emailer.
Transferencia de archivos (FTP):
Este servicio nos permite bajar o subir archivos,
programas, etc., de y hacia servidores, ya sean
públicos o privados.
En el caso de servidores públicos, se utiliza como
“username” la palabra “Anonymous” y como password la dirección de la casilla electrónica.
En el caso de servidores privados, es necesario
tener una cuenta de usuario que es proporcionada
por el administrador del servicio, el cual entrega
un password o una clave y un nombre de usuario o
username.
Existen varias aplicaciones de interfaz gráfica que
nos facilitan la comunicación FTP, muchos de ellos
de distribución “Shareware” o “Freeware”, gratuitos
o de muy bajo costo. Como el FETCH para
Macintosh, o el CuteFTP (www.cuteftp.com) o
WinFTP (www.winftp.com) para plataformas Windows. Por otra parte están las aplicaciones FTP
incluidas en los sistemas operativos DOS y LINUX.
8
World Wide Web (WWW):
Servicio más asociado a Internet y muchas veces
confundido como “ÉL SERVICIO” de Internet.
Permite la incorporación de Hypertexto, texto,
imagen, Video, Sonido, Animaciones bitmap.
Animaciones vectoriales, etc., cuyo contenido ese
despliega en una página Web. Para la visualización
de los contenidos de una página Web es necesario
tener en el computador un navegador o browser.
Los más comunes son Netscape y Explorer
http://www.luisfel.cl/curso_html/index.html
Donde “http: //” es el indicador de pagina Web,
”www.luisfel.cl” es el Dominio (nombre) del
computador, “/curso_html /” es el Directorio
dentro del computador y “index.html” es el
archivo que contiene la página Web
Estos dos browser y otros que existen, lo que hacen
es convertir en formato legible el lenguaje HTML
El documento se hallará situado en algún
computador al que se pueda acceder a través de
Internet. Para indicar la situación del documento
en Internet se utiliza la URL (Uniform Resource
Locator).
La URL es el camino que ha de seguir nuestro
browser a través de Internet para acceder a un
determinado recurso, bien sea una página Web,
un archivo, un grupo de noticias, etc. Es decir, lo
que el browser de páginas Web hace, es acceder a
un archivo situado en un computador que está
conectado a la red Internet.
La estructura de una URL para una página Web
suele ser del tipo http: //dominio/directorio/archivo.
El dominio indica el nombre del computador al que
accedemos, el directorio es el nombre del directorio
de ese computador y archivo el nombre del archivo
que contiene la página Web escrita en HTML. Por
ejemplo:
9
INTRODUCCIÓN
AL LENGUAJE HTML
3.0
Los atributos de HTML pueden ser de dos tipos,
cerrados o abiertos.
HTML (Hyper Text Markup Language) es un sistema
Los atributos cerrados son aquellos que tienen una
para estructurar documentos. Estos documentos pueden
ser mostrados por los browsers, browser o navegadores palabra clave que indica el principio del atributo y otra
de paginas Web en Internet, como Netscape, Mosaic, que indica el final que incluyen el carácter “/” antes de
la palabra clave para indicar el final de la misma. Entre
Microsoft Explorer u Opera.
el atributo inicial y el final se pueden encontrar otros
Por el momento no existe un estándar de HTML ya atributos. Generalmente son para afectar un texto.
que tanto Netscape como Microsoft se empeñan en
<CENTER> Mi página Web </CENTER>
incluir atributos que sólo funcionan con sus respectivos
navegadores. De cualquier manera existen diferentes
Los atributos abiertos constan de una sola palabra
revisiones o niveles de estandarización, el 1.0, el 2.0,3.0
y el 4.0, lo que produce que algunos browsers no clave, una orden directa que solamente va a afectar
“comprendan” en su totalidad el contenido de un una vez y que generalmente se refiere a una acción del
documento. En este manual se ha utilizado la revisión browser.
3.0 de HTML. Esto quiere decir que algunas de las
<HR>
órdenes de HTML que aquí se indican puede que no
sean reconocidas por algunos browsers de páginas Web.
Un atributo puede contener “parámetros”. Estos
Netscape 3.x y Microsoft Explorer 3.x reconocen
prácticamente todas las órdenes HTML vistas en este parámetros se indican a continuación de la palabra clave
del atributo y son fáciles de distinguir por que siempre
manual.
tienen el signo igual a algo entre comillas.
Básicamente, HTML consta de una serie de órdenes
<BODY bgcolor=”#FFFFFF”> </BODY>
o atributos, que indican al browser que estamos
utilizando, la forma de representar los elementos, ya
Los archivos que contienen documentos HTML suelen
sean texto, gráficos, etc., que contenga el documento.
En este manual nos referiremos a estas órdenes con la tener la extensión “.html” o “.htm”. Si bien ambos son
palabra “atributo”, y se pueden identificar, por que están válidos, se suele utilizar por un problema de contabilidad
encerradas entre los signos menor qué (<) y mayor con DOS, que solamente acepta extensiones de tres
caracteres, la extensión “.htm”, menos en el caso de la
qué (>).
página INDEX, o página menú o principal, que por
Todo lo que se escriba después del atributo se va a convenio tácito, siempre lleva la extensión “.html”.
ver afectado por esa orden.
10
En este manual se han fijado los siguientes criterios
a la hora de escribir la sintaxis de los atributos de HTML:
1º) Los atributos se indican en letra mayúscula y en
negrilla.
2º) Los parámetros de los atributos se indican en
letra minúscula y negrilla.
3º) El resto de elementos se indican en letra normal.
4º) Las palabras a resaltar en el texto se indican en
cursiva y negrilla.
ESTRUCTURA
BÁSICA DE UN DOCUMENTO
HTML
Un documento escrito en HTML contendría
básicamente los siguientes atributos:
<HTML>
Indica el inicio del documento.
<HEAD>
Inicio de la cabecera.
<TITLE>
Inicio del título del documento.
</TITLE>
Final del título del documento.
</HEAD>
Final de la cabecera del documento.
<BODY>
Inicio del cuerpo del documento.
</BODY>
Final del cuerpo del documento.
</HTML>
Final del documento.
Si bien, para ser visible en browser, un texto ASCII
no necesita de atributos, los atributos permiten que
ese texto se pueda formatear para tener un diseño
gráfico.
11
CABECERA
El atributo <HEAD></HEAD> delimita la cabecera
del documento. Al igual que el cuerpo humano solo
puede existir una cabeza por documento. La cabecera
no es visible para el usuario y generalmente es
información para los browser o para los buscadores de
metatags.
Dentro de la cabecera es importante definir el título
de la página por medio del atributo <TITLE></
TITLE>. Este título será el que aparezca en la barra de
nuestro browser de páginas Web y será el que
despliegue el buscador cuando alguien solicite esa
página. Al igual que el título de un libro o una película,
el título de una página pretende resumir y explicar su
contenido, por eso es muy importante definir bien el
título.
Ejemplos:
<META name=”Creator” content=”Macromedia
Dreamweaver 3.0">
Indica al browser el nombre de la aplicación gráfica
que genero el archivo html.
<META name=”keywords” content=”Chile,
España, Estudios, Magister,”>
Indica al browser las palabras clave para los
buscadores de Internet.
<META name=”description” content=”Sitio web
con un curso para la realización de páginas web en
lenguaje HTML”>
Indica al browser las palabras clave para los
buscadores de Internet.
Ejemplo:
<TITLE>Curso de HTML</TITLE>
Otro uso del atributo <META> son ordenes al
browser como la de indicar documentos con “refresco
Dentro de la cabecera de un documento podemos automático”. Si se indica una URL se sustituirá el
incluir otros atributos adicionales. El atributo <META> documento por el indicado una vez transcurridos el
indica al browser de Internet las palabras clave y número de segundos especificados. Si no se incluye
contenido de nuestra página Web. Muchos de los ninguna URL se volverá a cargar en el browser el
buscadores de páginas Web de Internet (Altavista, documento en uso transcurridos los segundos indicados.
Lycos, etc.) utilizan el contenido de este atributo para
Esto es útil para páginas que cambian de contenido
incluir la página en sus bases de datos. El atributo
con
mucha frecuencia o para redireccionar a la persona
<META> lleva generalmente dos parámetros, name
que visita nuestra pagina Web a una nueva dirección
y content.
donde se encuentra una versión actualizada de nuestra
pagina Web.
12
Ejemplo :
<META http-equiv=”refresh” content=”15;
URL=http://www.microsoft.com”>
CUERPO
DEL DOCUMENTO
El atributo<BODY> </BODY> indica el inicio y final de nuestra pagina Web. Será entre el inicio y el final
Transcurridos 15 segundos se accederá a la pagina
de este atributo donde pongamos los contenidos de
Web de Microsoft.
nuestra página, textos, gráficos, enlaces, etc. Al igual
que el atributo <HEAD> solo puede existir un cuerpo
Otro meta http-equiv muy usado es el que determina por página Web.
en el browser el juego de caracteres a usar
Este atributo tiene una serie de parámetros opcionales
Ejemplo:
que nos permiten indicar la “apariencia” global del
<META http-equiv=”Content-Type”
documento:
content=”text/html; charset=iso-8859-1">
Background=”URL”
El juego de caracteres iso 8859-1 se refiere a
Indica el nombre de un archivo gráfico que servirá
caracteres occidentales. En el siguiente ejemplo
como “fondo” de nuestra página. Si la imagen no
está un meta que determina el uso de caracteres
rellena todo el fondo del documento, esta será
japoneses:
reproducida tantas veces como sea necesario.
<META http-equiv=”Content-Type”
content=”text/html; charset=iso-2022-jp”>
En ambos casos, si bien el juego de caracteres es
distinto el contenido es texto en formato html
El atributo <BASE> indica la localización de los
archivos, gráficos, sonidos, etc. a los que se hace
referencia en nuestra página Web. Si no se incluye este
atributo el browser entiende que dichos elementos se
encuentran en el mismo lugar donde se encuentra
nuestra página Web.
Ejemplo :
<BASE href=”http://www.tracor.es/chile/”>
bgcolor=”código de color”
Indica un color para el fondo de nuestro documento.
Se ignora si se ha usado el parámetro background.
text=”código de color”
Indica un color para el texto que incluyamos en
nuestro documento. Por defecto es negro. No
implica que después se pueda asignar otro color al
texto, al párrafo, palabra o caracteres.
link=”código de color”
Indica el color de los textos que dan acceso a un
Hypertexto. Por defecto es azul.
13
vlink=”código de color”
Indica el color de los textos que dan acceso a un
Hypertexto que ya hemos visitado con nuestro
browser. Por defecto es púrpura.
alink=”código de color”
Indica el color de los textos que dan acceso a un y
que están activos. Por defecto es rojo.
Ejemplo:
<BODY bgcolor=”ffffff” text=”000000”
link=”0000ff” vlink=”00ffff” alink=”ff00ff”>
COLORES
EN HEXADECIMALES
Y COLORES
SEGURO
El código de color es un numero compuesto por tres
pares de cifras hexadecimales que indican la proporción
de los colores “primarios”, rojo, verde y azul (RGB). El
código de color se antecede del símbolo # para
especificar que las letras que definen el color son
números.
La cifra hexadecimal significa que después del 9 no
viene el 10 como sucede en las cifras decimales, si no
que viene la letra “a”. Dicho de otra forma, el rango
hexadecimal abarca: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f;
donde 0 es la cifra de menor valor y f la de mayor valor.
Ejemplos :
#000000
#FF0000
#00FF00
#0000FF
#FFFFFF
Color Negro
Color Rojo
Color Verde
Color Azul
Color Blanco
El primer par de cifras indican la proporción de color
Rojo, el segundo par de cifras la proporción de color
Verde y las dos últimas la proporción de color Azul.
Cada par de cifras hexadecimales nos permiten un rango
de 0 a 255. Combinando las proporciones de cada color
primario obtendremos diferentes colores.
Se habla de colores seguro los 254 colores “puros”
que se obtienen de la combinación de pares iguales, o
sea cuando los pares están compuestos de cifras iguales
14
De cualquier forma la mayoría de los editores de HTML
Claro que el uso del atributo <PRE> no permite el
nos permiten obtener el código de color correspondiente uso y formato de otros atributos.
escogiendo directamente el color de una paleta.
PÁRRAFO
Espaciados y saltos de línea
En HTML solo se reconoce un espacio entre palabra
y palabra, el resto de los espacios serán ignorados
por el browser.
Ejemplo
Esto
es
Sé vera como
una frase
Esto es una frase
Así mismo tampoco se respetan las tabulaciones,
retornos de carro etc. Para ello existen una serie de
atributos que indican estos códigos.
<PRE>
<P>
Y
<BR>
Para indicar un salto de línea se utiliza el atributo
<BR> y para un cambio de párrafo (deja una línea en
blanco en medio) se utiliza el atributo <P>.
Ejemplo
Este texto tiene <BR>
saltos de línea y <P>
de párrafo.
Sé vera como
Este texto tiene
saltos de línea y
de párrafo.
<P> es un atributo híbrido, en caso de estar solo,
es un atributo abierto, por que sólo esta determinando
el doble espacio entre líneas. En caso de tener
parámetros, se convierte en un atributo abierto, por
que si no lo cerramos va a seguir afectando el texto.
Cuando se usa de esta manera pude tener el
El atributo<PRE> </PRE> obliga al browser a
parámetro “align” que le indica al browser la forma de
visualizar el texto tal y como ha sido escrito, respetando
“justificar” el párrafo. Los valores posibles de este
tabulaciones, espacios, retornos de carro, etc.
parámetro son LEFT, RIGHT y CENTER, estando aun en
estudio el valor JUSTIFY.
Ejemplo
Sé vera como
<PRE>
Este texto
ha
sido
preformateado .
</PRE>
Este texto
ha
sido
preformateado .
Ejemplo
<P align=”right”>
Este es un ejemplo de
un párrafo de texto
justificado a la derecha.
</P>
Sé vera como
Este es un ejemplo
de párrafo de texto
justificado a la
derecha.
15
<P align=”center”>
Este es un ejemplo de
párrafo de texto
centrado.</P>
Este es un ejemplo de
párrafo de texto centrado.
<BLOCKQUOTE>
Otro atributo de párrafo muy utilizado es el atributo
<BLOCKQUOTE> </BOLCKQUOTE>, que permite la
generación de texto con sangría en ambos lados.
Ejemplo:
Dubitanti mihi, Theodosi optime, quonam litteraru
titulo nostri nominis memoriam mandaremus, fabularu
textus occurrit, quodin his urbane concepta falsit
condeceat, et non incumbat necessitas veritatis.
<BLOCKQUOTE> Nam quis tecum de oratione,
quis de poemate loqueretur, cum in utroque
litterarum genere et atticos greca eruditione
superes, et latinitate romanos? Huius ergo materie
ducem nobis Aesopum noveris, qui responso
delphici Apollinis monitus ridicula orsus est, ut
legenda firmaret. Verum has pro exemplo fabulas
et Socrates divinis operibus indidit, et poemati suo
Flaccus aptavit, quod in se sub iocorum
communium specie vitae argumenta contineant.
latinitate compositas, elegis sum explicare
conatus.
<BLOCKQUOTE> Habes ergo opus quo
animum oblectes, ingenium exerceas,
sollicitudinem leves totumque vivendi
ordinem cautus agnoscas.
<BLOCKQUOTE> Loqui vero arbores, feras cum hominibus gemere,
verbis certare volucres, animalia
ridere facimus, ut pro singulorum
necessitatibus vel ab ipsis animis
sententia proferatur.
</BLOCKQUOTE>
</BLOCKQUOTE>
</BLOCKQUOTE>
</BLOCKQUOTE>
<BLOCKQUOTE> Quas grecis iambis Babrius
repetens in duo volumina coartavit; Phedrus
etiam partem aliquam quinque in libellos
resolvit. De his ergo ad quadraginta et duas
in unum redactas fabulas dedi, quas rudi
16
REGLA
HORIZONTAL
TRABAJO
CON TEXTOS
El atributo <HR> muestra una línea horizontal de
Existen varias Atributos que afectan el
tamaño determinable que permite separar, gráficamente comportamiento de un texto. Entre ellos tenemos:
en pantalla, dos tipos de contenidos. Por lo general, es
de 3 pixeles de alto, por 100% de ancho, con una
pequeña sombra o sensación de relieve. Para poder CABECERAS O TÍTULOS
controlar estas características tiene los siguientes
parámetros opcionales:
En un documento de HTML se pueden indicar seis
tipos de cabeceras o títulos de texto (tamaños de letra)
align=”posición”
por medio de los atributos <H1>, <H2>, <H3> <H4>,
Alineación de la línea a la izquierda (left), a la
<H5> y <H6>.
derecha (right) o la centra (center).
El texto que escribamos entre el inicio y el fin del
noshade
atributo será el afectado por las cabeceras. La cabecera
No muestra sombra, evitando el efecto en tres
<H1> será la que muestre el texto en mayor tamaño.
dimensiones.
Ejemplos
size=”num”
<H1>Texto de Prueba</H1>
Indica el grosor de la línea en pixeles.
Texto de prueba
width=”num / %”
Indica el ancho de la línea en pixeles de anchos o
en un porcentaje. Muchas cosas se pueden
configurar para utilizar un porcentaje del tamaño
de visualización del browser.
Ejemplo :
<HR align=”center” size=”20” width=”50%”>
<H2>Texto de Prueba</H2>
Texto de prueba
<H3>Texto de Prueba</H3>
Texto de prueba
<H4>Texto de Prueba</H4>
Texto de prueba
<H5>Texto de Prueba</H5>
Texto de prueba
17
<H6>Texto de Prueba</H6>
Texto de prueba
Los textos marcados como “cabeceras” provocan
automáticamente un párrafo sin necesidad de incluir
un atributo <P>.
Ejemplo
Se vería como
<H3>Pagina de
José</H3>
Esta es mi
página personal.
FORMATO
DE
TEXTOS
Pagina de José
Esta es mi página personal
face=”nombre de la tipografía”
Escribe el texto en el tipo de letra especificado. Si
este tipo de letra no existe en el computador que
“lee” la pagina se usará la tipografía
predeterminado del navegador.
ESTILOS
Para indicar atributos del texto (negrilla, subrayado,
etc.) tenemos varias Opciones.
Muchos de estos atributos tenían, en los inicios de la
Web, su significado propio, por lo que ahora éstos ya
no funcionan ni como significante o ni siquiera son
interpretados por los browser.
Atributo
Resultado
Por otro lado el atributo <FONT> </FONT> nos Descripción
permite variar el tamaño, el color, y el tipo de letra de
<B></B>
Texto de prueba
un texto determinado. Utiliza para ello los parámetros Negrita
Cursiva
<I></I>
Texto de prueba
size, color y face.
Teletipo
<TT></TT>
Texto de prueba
Subrayado
<U></U>
Texto de prueba
size=”valor”
Tachado
<S></S>
Texto de prueba
Da al texto un tamaño en puntos determinado.
Parpadeo
<BLINK></BLINK> Texto de prueba
Del 1 al 7
Emphasis
<EM></EM>
texto ejemplo
Code
<CODE></CODE>
texto ejemplo
size=”+/- valor”
Variable
<VAR></VAR> texto ejemplo
Da al texto un tamaño tantas veces superior (+) o
Sample
<SAMP></SAMP>
texto ejemplo
inferior (-) como indique el valor con respecto al
Keyboard
<KBD></KBD> texto ejemplo
tamaño en puntos configurado en el browser.
Defination
<DFN></DFN>
texto ejemplo
También va de 1 a 7.
Superíndices
<SUP></SUP> Texto de prueba
Subíndice
<SUB></SUB> Texto de prueba
color=”código de color”
Escribe el texto en el color cuyo código se especifica.
18
Existen otros atributos que realizan las mismas
operaciones que las antes vistas en los atributos del
texto.
Atributo
Hace lo mismo que
<STRONG></STRONG>
<CITE></CITE>
<STRIKE></STRIKE>
<B></B>
<I></I>
<S></S>
LISTAS
Existen tres tipos de listas, numeradas, sin numerar
y de definición.
LAS
LISTAS ORDENADAS
Las listas ordenadas o numeradas representarán los
elementos de la lista numerando cada uno de ellos de
manera automática según el lugar que ocupan en la
lista y determina una sangría a su contenido. Para este
tipo de lista se utiliza el atributo <OL> </OL>. Cada
uno de los elementos o líneas de la lista irá precedido
del atributo <LI>.
El atributo <OL> puede llevar los siguientes
parámetros:
start=”num”
Indica que número será el primero de la lista. Si
no se indica se entiende que empezará por el
número 1.
type=”tipo”
Indica el tipo de numeración utilizada. Si no se
indica se entiende que será una lista ordenada
numéricamente.
Los tipos posibles son:
1=Numéricamente. (1,2,3,4,... etc.).
a=Letras minúsculas. (a, b , c, d, ... etc.).
A=Letras mayúsculas. (A, B, C, D, ... etc.).
19
i=Números romanos en minúsculas. (i, ii, iii, iv,
v, ... etc.).
I=Números romanos en mayúsculas. (I, II, III,
IV, V, ... etc.).
Ejemplo
Resultado
<OL>
<LI>Casa</LI>
<LI>Auto</LI>
<LI>Árbol</LI>
<LI>Pájaro</LI>
</OL>
1. Casa
2. Auto
3. Calle
4. Árbol
5. Pájaro
Ejemplo
Resultado
<OL TYPE=i>
<LI>Casa</LI>
<LI>Auto</LI>
<LI>Árbol</LI>
<LI>Pájaro</LI>
</OL>
i. Casa
ii. Auto
iii.Calle
iv.Árbol
v. Pájaro
Ejemplo
Resultado
<OL TYPE=I>
<LI>Casa</LI>
<LI>Auto</LI>
<LI>Árbol</LI>
<LI>Pájaro</LI>
</OL>
I. Casa
II. Auto
III. Calle
IV. Árbol
V. Pájaro
Ejemplo
Resultado
<OL TYPE=a>
<LI>Casa</LI>
<LI>Auto</LI>
<LI>Árbol</LI>
<LI>Pájaro</LI>
</OL>
a.
b.
c.
d.
e.
Ejemplo
Resultado
<OL TYPE=A>
<LI>Casa</LI>
<LI>Auto</LI>
<LI>Árbol</LI>
<LI>Pájaro</LI>
</OL>
A.
B.
C.
D.
E.
Ejemplo
Resultado
<OL start=8>
<LI>Casa</LI>
<LI>Auto</LI>
<LI>Árbol</LI>
<LI>Pájaro</LI>
</OL>
8. Casa
9. Auto
10. Calle
11. Árbol
12. Pájaro
Casa
Auto
Calle
Árbol
Pájaro
Casa
Auto
Calle
Árbol
Pájaro
20
LAS
LISTAS NO ORDENADAS
Las listas no ordenadas o sin numerar representan
los elementos de la lista con un “topo” o marca que
antecede a cada uno de ellos. Se utiliza el atributo <UL>
</UL> para delimitar la lista, y <LI> para indicar cada
uno de los elementos o líneas.
El atributo <UL> puede llevar los siguientes
parámetros:
type=”tipo”
Que indica la forma del “topo” o marca que
antecede a cada elemento de la lista. Los valores
de type pueden ser disk, circle o square, con lo
que el topo o marca puede ser un disco, un circulo
o un cuadrado.
Ejemplo
<UL>
<LI>Casa</LI>
<LI>Auto</LI>
<LI>Árbol</LI>
<LI>Pájaro</LI>
</UL>
Ejemplo
<UL TYPE=”CIRCLE”>
<LI>Casa</LI>
<LI>Auto</LI>
<LI>Árbol</LI>
<LI>Pájaro</LI>
</UL>
Ejemplo
<UL TYPE=”SQUARE”>
<LI>Casa</LI>
<LI>Auto</LI>
<LI>Árbol</LI>
<LI>Pájaro</LI>
</UL>
Resultado
Casa
Auto
Calle
Árbol
Pájaro
Resultado
Casa
Auto
Calle
Árbol
Pájaro
Resultado
Casa
Auto
Calle
Árbol
Pájaro
Ejemplo
<UL TYPE=”DISC”>
<LI>Casa</LI>
<LI>Auto</LI>
<LI>Árbol</LI>
<LI>Pájaro</LI>
</UL>
Resultado
Casa
Auto
Calle
Árbol
Pájaro
21
LAS
LISTAS DE DEFINICIÓN
El resultado es una lista sin numerar mas “compacta”
es decir, con menos espacio interlineal entre los
elementos.
Las listas de definición muestran los elementos tipo
Diccionario, o sea, término y definición. Se utiliza para
La lista de Directorio utiliza el atributo <DIR></DIR>
ellas el atributo <DL></DL>. El elemento marcado
y
los
elementos se anteceden de <LI>. Los elementos
como término se antecede del atributo <DT>, el
marcado como definición se antecede del atributo <DD> tienen un limite de 20 caracteres.
y determina una sangría distinta.
Todas las listas se pueden “anidar”, es decir incluir
una lista dentro de otra, con lo que se consigue una
estructura tipo “índice de materias”.
Ejemplo
Resultado
<UL type=”disc”>
<LI>Buscadores
<DL>
<UL>
<DT> Casa </DT>
Casa
<LI>Yahoo
<DD>Estilo alemán</DD>
Estilo alemán
<UL>
<DT>Auto</DT>
Auto
<LI>Buscador más visitado </LI>
<DD>Toyota</DD>
Toyota
</UL>
<DT>Calle</DT>
Calle
</LI>
<DD>Merced</DD>
Merced
</UL>
<DT>Árbol</DT>
Árbol
</LI>
<DD>Mango</DD>
Mango
<UL>
<DT>Pájaro</DT>
Pájaro
<LI>Ole
<DD>Colibrí </DD>
Colibrí
<UL>
</DL>
<LI>Búscador Español </LI>
</UL>
</LI>
MENÚ Y DIRECTORIO
<LI>Lycos
<UL>
Existen otros dos tipos de listas menos comunes. Las
<LI>Búscador Especializado (AOL)</LI>
listas de Menú y Directorio se comportan igual que las
</UL>
listas sin numerar. La lista de Menú utiliza el atributo
</LI>
<MENU></MENU> y las líneas se anteceden de <LI>.
</UL>
</UL>
22
Buscadores
Yahoo
Buscador más visitado
Ole
Buscador Español
Lycos
Buscador Especializado (AOL)
CARACTERES
ESPECIALES
Todos los browsers de páginas Web actuales soportan
todos los caracteres gráficos de la especificación ISO
8859-1, que permiten escribir textos en la mayoría de
los países occidentales.
De cualquier forma y como muchos sistemas tienen
distintos juegos de caracteres ASCII, se han definido
dos formas de representar caracteres especiales usando
solamente el código ASCII de 7 bits. Para hacer
referencia a estos caracteres se les asigna un código
numérico o un nombre de “entidad”. Así mismo hay
caracteres que se utilizan para los atributos de HTML,
por ejemplo < y >. Estos caracteres pueden ser
representados por un código numérico o una entidad
cuando deseemos que aparezcan en el documento “tal
cual”. Las entidades comienzan por el símbolo & (ampersand) y terminan con el símbolo “;” (Punto y coma).
A continuación veamos una tabla con las principales
entidades:
Ct
Código Entidad
Ct
Código Entidad
!
#
%
‘
)
+
/
;
=
?
[
]
_
{
}
!
#
%
'
)
+
-
/
&#59;
=
?
[
]
_
{
}
 
¢
¤
¦
¨
ª
¬
®
°
²
´
¶
¸
º
¼
¾
“
$
&
(
*
,
.
:
<
>
@
\
^
‘
|
~
¡
£
¥
§
©
«
¯
±
³
µ
·
¹
»
½
¿
"
$
&
(
*
,
.
:
<
>
@
\
^
`
|
~
¡
£
¥
§
©
«
­
¯
±
³
µ
·
¹
»
½
¿
¢
¤
¦
¨
ª
¬
®
°
²
´
¶
¸
º
¼
¾
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
&nbsp ;
¢
¤
¦
¨
ª
¬
®
°
²
´
¶
¸
º
¼
¾
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
¡
£
¥
§
©
«
­
¯
±
³
µ
·
¹
»
½
¿
23
À
Â
Ä
Æ
È
Ê
Ì
Î
Ð
Ò
Ô
Ö
Ø
Ú
Ü
Þ
à
â
ä
æ
è
ê
ì
î
ð
ò
ô
ö
ø
ú
ü
þ
À
Â
Ä
Æ
È
Ê
Ì
Î
Ð
Ò
Ô
Ö
Ø
Ú
Ü
Þ
à
â
ä
æ
è
ê
ì
î
ð
ò
ô
ö
ø
ú
ü
þ
À
Â
Ä
Æ
È
Ê
Ì
Î
Ð
Ò
Ô
Ö
Ø
Ú
Ü
Þ
à
â
ä
æ
è
ê
ì
î
ð
ò
ô
ö
ø
ú
ü
þ
Á
Ã
Å
Ç
É
Ë
Í
Ï
Ñ
Ó
Õ
×
Ù
Û
Ý
ß
á
ã
å
ç
é
ë
í
ï
ñ
ó
õ
÷
ù
û
ý
ÿ
Á
Ã
Å
Ç
É
Ë
Í
Ï
Ñ
Ó
Õ
×
Ù
Û
Ý
ß
á
ã
å
ç
é
ë
í
ï
ñ
ó
õ
÷
ù
û
ý
ÿ
Á
Ã
Å
Ç
É
Ë
Í
Ï
Ñ
Ó
Õ
×
Ù
Û
Ý
ß
á
ã
å
ç
é
ë
í
ï
ñ
ó
õ
÷
ù
û
ý
ÿ
Por lo tanto la palabra página la podríamos escribir
como:
página
página
página
Es por ello que si deseamos que cualquier browser
de páginas Web pueda visualizar las letras acentuadas
de nuestro documento debemos utilizar sus
correspondientes entidades o códigos para
representarlas.
24
COMENTARIOS
HYPERENLACES
Los comentarios no serán mostrados por el browser
La característica principal de una página Web es que
y son útiles para realizar anotaciones en el documento podemos incluir Hyperenlaces. Un Hyperenlace es un
HTML.
texto o imagen de la página que hace que el navegador
acceda a otro recurso, otra página Web, un archivo,
Para incluir comentarios en la página Web se utilizan etc.
los caracteres “<!—” y para terminar el comentario se
utilizan los caracteres “ —>”.
Para incluir un Hyperenlace se utiliza el atributo
<A></A>. El texto o imagen que se encuentre dentro
Ejemplo :
de los límites de este atributo será sensible, esto quiere
decir que si pulsamos con el ratón sobre él, se realzará
<!— Esto es un comentario sobre la pagina Web —> la función de Hyperenlace indicada por el atributo <A></
A>.
Si el Hyperenlace esta indicado por un texto, este
aparecerá subrayado y en color azul y el cursor se
convertirá en una mano cuando se pasa por encima. Si
se trata de una imagen, esta aparecerá con un borde
rodeándola. Este atributo tiene el parámetro href que
indica el lugar a donde nos llevará el Hyperenlace si lo
pulsamos.
Ejemplo
<A href=”http://
www.luisfel.cl”> Pulse
para ir a la página de
luisfel</A>
Se vería como
Pulse para ir a la página
de luisfel
25
Si situamos el ratón encima de la frase y pulsamos, página Web, pero podríamos hacer un Hyperenlace a
el navegador accederá a la página Web indicada por el un grupo de noticias, o a otro servicio de Internet.
parámetro href, es decir, accederá a la página situada
Ejemplo:
en http://www.luisfel.cl ya que “http” está determinando
<A href=”news://news.actualidad.es/”> Noticias de
una dirección en un computador remoto.
actualidad </A>
Distinto es un enlace relativo, la dirección, en vez de
Asimismo podemos hacer que el Hyperenlace de como
ser “http”, es el nombre del documento al que se quiere
acceder y su ubicación a partir del documento que lo resultado el envío de un correo electrónico a una
dirección de correo determinada.
está solicitando.
Ejemplo:
Un Hyperenlace también puede llevarnos a una zona
<A href=”mailto: [email protected]>
de nuestra página. Para ello debemos marcar en nuestra
pagina las diferentes secciones en las que se divide. Lo sugerencias</A>
haremos con el parámetro name.
También podemos realizar un Hyperenlace a un
archivo cualquiera. En este caso el navegador intentará
Ejemplo:
“ejecutar” el archivo, y si no puede hacerlo nos
<A name=”seccion1"></A>
preguntará si deseamos grabarlo en nuestro
Esta instrucción marca el inicio de una sección dentro computador. Esta es una forma sencilla de permitir a
de nuestra página. La sección se llamará seccion1. Para los visitantes de nuestra página copiar archivos a su
hacer un enlace a esta sección dentro de nuestra página computador.
lo haríamos de la siguiente forma:
Ejemplo:
<A href=”manual.zip”>Pulsa aquí para llevarte una
<A href=”#seccion1">Primera Parte</A>
copia del manual.</A>
O también:
<A href=”http://www.tracor.cl/
pagina.htm#seccion1"> Primera Parte</A>
Un Hyperenlace puede hacerse a cualquier tipo de
archivo. Con los atributos anteriores hemos visto como
hacer enlaces a páginas Web o secciones dentro de una
26
TABLAS
Las tablas nos permiten representar cualquier
elemento de nuestra página (texto, listas, imágenes,
etc.) en diferentes filas y columnas separadas entre sí.
Es una herramienta muy útil para “ordenar” contenidos
de distintas partes de nuestra página. La tabla se define mediante el atributo <TABLE></TABLE>. Los
parámetros opcionales de este atributo son:
border=”num”
Indica el ancho del borde de la tabla en puntos.
cellspacing=”num”
Indica el espacio en puntos que separa las celdas
que están dentro de la tabla.
cellpadding=”num”
Indica el espacio en puntos que separa el borde de
cada celda y el contenido de esta.
width=”num / %”
Indica la anchura de la tabla en puntos o en
porcentaje en función del ancho de la ventana del
browser. Si no se indica este parámetro, el ancho
se adecuará al tamaño de los contenidos de las
celdas.
height=”num ó %”
Indica la altura de la tabla en puntos o en
porcentaje en función del alto de la ventana del
browser. Si no se indica este parámetro, la altura
se adecuará a la altura de los contenidos de las
celdas.
bgcolor=”código de color”
Especifica el color de fondo de toda la Tabla.
Para definir las celdas que componen la tabla se
utilizan los atributos <TD> y <TH>. <TD> indica una
celda normal, y <TH> indica una celda de “cabecera”,
es decir, el contenido será resaltado en negrita y en un
tamaño ligeramente superior al normal. Los parámetros
opcionales de ambas atributos son:
align=”LEFT / CENTER / RIGHT / JUSTIFY”
Indica como se debe alinear el contenido de la
celda, a la izquierda (LEFT), a la derecha (RIGHT),
centrado (CENTER) o justificado (JUSTIFY).
valign=”TOP / MIDDLE / BOTTOM”
Indica la alineación vertical del contenido de la
celda, en la parte superior (TOP), en la inferior
(BOTTOM), o en el centro (MIDDLE).
rowspan=”num”
Indica el número de filas que ocupará la celda. Por
defecto ocupa una sola fila.
colspan=”num”
Indica el número de columnas que ocupará la celda.
Por defecto ocupa una sola columna.
width=”num ó %”
Indica la anchura de la columna en puntos o en
porcentaje en función del ancho de la ventana del
browser. Si no se indica este parámetro, el ancho
se adecuará al tamaño de los contenidos. Este
parámetro solo funciona en los navegadores
modernos.
27
bgcolor=”código de color”
Especifica el color de fondo del elemento de la Tabla.
Para indicar que acaba y comienza una fila de celdas
se utiliza el atributo <TR>.
A continuación mostraremos un ejemplo de una tabla
que contiene solo texto. Como se indicó anteriormente
Los atributos <TD> y <TH> son cerrados según el
el contenido de las celdas puede ser cualquier elemento
estándar de HTML, es decir que un elemento de tabla
de HTML, un texto, una imagen, un Hyperenlace, una
<TD> debería cerrarse con un </TD>, sin embargo
Lista, etc.
algunos browsers a veces asumen que un elemento de
la tabla, queda automáticamente “cerrado” cuando se
“abre” el siguiente pero no es un estándar.
Ejemplo
<TABLE
border=”4”
cellspacing=”4”
cellpadding=”4” width=”80%”>
<TH align=”center”>Buscadores
<TH align=”center“ colspan=”2”>Otros Links
<TR>
<TD align=”LEFT”>Yahoo</TD>
<TD align=”LEFT”>Microsoft </TD>
<TD align=”LEFT”>IBM </TD>
</TR>
<TR>
<TD align=”LEFT”>Infoseek </TD>
<TD align=”LEFT”>Apple </TD>
<TD a align=”LEFT”>Digital </TD>
<TR>
</TABLE>
Importante a considerar es que el alto y ancho de
una celda, y; por ende de la fila o la columna, va a
estar determinado por su contenido.
28
IMÁGENES
Hasta el momento hemos visto como se puede escribir
texto en una pagina Web, así como sus posibles
formatos. Para incluir una imagen en nuestra página
Web utilizaremos el atributo abierto <IMG>. Hay cinco
formatos de imágenes que todos los navegadores
modernos reconocen aunque por su compresión o limites
de colores se usan solo dos GIF y JPG.
Los formatos de imágenes son:
GIF (Graphics Interchange Format)
JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphic)
TIF (Tagged Image Format)
BMP (Bitmap Picture)
Cualquier otro tipo de archivo gráfico o de imagen
(BMP, PCX, CDR, etc.) no será mostrado por el browser,
a no ser que disponga de un programa externo que
permita su visualización.
El atributo <IMG> tiene varios parámetros:
lowsrc=”URL”
Muestra una segunda imagen “superpuesta” sobre
la primera una vez se carga la pagina. Este
parametro no es reconocido por la totalidad de los
navegadores ya que esta en estudio su aplicación,
así que en la mayoría de los casos será ignorado
mostrándose solo la primera imagen (src).
En Netscape muestra la imagen indicada por lowsrc
en primer lugar, y posteriormente muestra la
imagen indicada por src. Si las imágenes son iguales
pero tienen distinta “resolución” se conseguirá un
efecto tipo “Fade”. Si las imágenes son de distinto
tamaño la imagen indicada en src se
redimensionará al tamaño indicado por la imagen
indicada en lowsrc
align=”TOP / MIDDLE / BOTTOM / LEFT / RIGHT”
Indica como se alineará el texto que siga a la
imagen. TOP alinea el texto con la parte superior
de la imagen, MIDDLE con la parte central, y BOTTOM con la parte inferior.
src=”URL”
Indica el nombre del archivo gráfico a mostrar.
border=“num”
Indica el tamaño del “borde” de la imagen. A toda
imagen se le asigna un borde que será visible
cuando la imagen forme parte de un Hyperenlace.
alt=”Texto”
Mostrara el texto indicado en el caso de que el
navegador utilizado para ver la página no sea capaz
de visualizar la imagen y en además muestra un
tooltip.
height=”num”
Indica el alto de la imagen en puntos o en
porcentaje. Se usa para variar el tamaño de la
imagen original.
29
width=”num”
Indica el ancho de la imagen en puntos o en
porcentaje. Se usa para variar el tamaño de la
imagen original.
hspace=”num”
La imagen a mostrar puede encontrase en el mismo
lugar (URL) que la pagina Web. Si este no fuera el
caso, el nombre de la imagen ha de contenerla
URL donde se encuentre la imagen.
Relativa:
<IMG src=”images/iexplorer.gif”>
Absoluta:
<IMG src=”http://www.microsoft.com/
iexplorer.gif”>
vspace=”num”
Indica el número de puntos verticales que
separaran la imagen del texto que le siga y la
anteceda.
Ejemplo
Se vería como
<IMG
src=”caution.gif”
alt=”Cuidado !!” >
Si el browser no
pudiese visualizar el
gráfico.....
La imagen a mostrar puede encontrase en el mismo
lugar (URL) que la pagina Web. Si este no fuera el caso,
el nombre de la imagen ha de contenerla URL donde se
encuentre la imagen.
30
Ejemplo
Se vería como
<IMG src=”caution.gif”
width=100 >
<IMG src=”caution.gif”
height=20 >
Tenga en cuenta<IMG src=”caution.gif”
hspace=20>esta indicación.
Tenga en cuenta
esta indicación.
Tenga en cuenta<IMG src=”caution.gif”
vspace=40>esta indicación.
Tenga en cuenta
<IMG src=”caution.gif”
align=”TOP”> Tenga en cuenta esta indicación por
que es importante y puede salvarle la vida!!...
Fíjese en lo que está haciendo.
esta indicación.
Tenga en cuenta esta indicación por que
es importante y puede salvarle la vida!!... Fíjese en
lo que está haciendo.
31
<IMG src=”caution.gif”
align=”MIDDLE”> tenga en cuenta esta indicación
por que es importante y puede salvarle la vida!!...
Fíjese en lo que está haciendo.
Tenga en cuenta esta indicación por que
es importante y puede salvarle la vida!!... Fíjese en
lo que está haciendo.
<IMG src=”caution.gif”
align=BOTTOM> tenga en cuenta esta indicación
por que es importante y puede salvarle la vida!!...
Fíjese en lo que está haciendo.
<IMG src=”caution.gif” align=”right”>
Tenga en cuenta esta indicación por que es
importante y puede salvarle la vida!!... Fíjese en lo
que está haciendo.
<IMG src=”caution.gif” align=”left”>
Tenga en cuenta esta indicación por que es
importante y puede salvarle la vida!!... Fíjese en lo
que está haciendo.
Tenga en cuenta esta indicación por que
es importante y puede salvarle la vida!!... Fíjese en
lo que está haciendo.
Tenga en cuenta esta indicación por que
es importante y puede salvarle la vida!!...
Fíjese en lo que está haciendo.
Tenga en cuenta esta indicación por que
es importante y puede salvarle la vida!!...
Fíjese en lo que está haciendo.
32
FRAMES
Los Frames son páginas que contienen páginas, muy
útiles a la hora de crear barras de navegación o
imágenes que van a permanecer en todo nuestro sitio.
El atributo que lo define es <FRAMESET></
FRAMESET> y a diferencia de la mayor parte de los
atributos, éste se ubica entre el <HEAD> y el <BODY>.
Sus parámetros son:
cols=”num / %”
Define en pixeles o porcentaje el tamaño de las
dos columnas (paginas puestas horizontalmente)
que la componen.
rows=”num / %”
Define en pixeles o porcentaje el tamaño de las
dos filas (paginas puestas verticalmente) que la
componen.
frameborder=”yes / no”
Define si va a tener bordes visibles que separen
los Frames o no. Sus valores son “no” y “yes”.
El atributo <Frame> define las características y la
página que va a ubicar un espacio en el frame. Sus
parámetros son
src=”url”
Define la ubicación del archivo html al que se tiene
que referir.
name=”nombre”
Define el nombre del frame. (Útil para la
navegación).
frameborder=”yes / no”
Define si va a tener bordes visibles que separen
los frames o no. Sus valores son “no” y “yes”.
marginwidth=”num”
Define en pixeles los márgenes horizontales de la
página.
marginheight=”num”
Define en pixeles los márgenes verticales de la
página.
border=”num”
Define en pixeles el ancho de la separación entre
los Frames.
scrolling=”yes / no”
Define si va a tener o no una barra scroll para
visualizar las páginas grandes. Sus valores pueden
ser “yes”, “no” y “Auto” en cuyo caso aparecerá
solo si el contenido de la página lo necesita.
framespacing=”num”
Define la separación que va a haber entre el borde
de la página y su contenido.
Noresize
Define si va a ser reajustable manualmente o no.
<Noframes>
El atributo <Noframes> determina un área que
33
permite escribir una página html en caso de que el
usuario este trabajando con browser que no
permita ver Frames (versiones 2.0 o inferiores).
Ejemplo
<FRAMESET cols=”150,100%” frameborder=”NO”
border=”0" framespacing=”0">
<FRAMES src=”nave.html” name=”nave” Noresize
frameborder=”NO”
marginwidth=”0"
marginheight=”0" scrolling=”NO”>
<FRAMES src=”conte.html” name=”conte”
scrolling=”AUTO”
marginwidth=”0"
marginheight=”0" frameborder=”NO”>
</FRAMESET>
<NOFRAMES>
<BODY bgcolor=”#FFFFFF”>
</BODY>
</NOFRAMES>
<FRAMESET cols=”150,100%” frameborder=”NO”
border=”0" framespacing=”0">
<FRAME src=”nave.html” name=”nave” noresize
frameborder=”NO” marginwidth=”0"
marginheight=”0" scrolling=”NO”>
<FRAMESET rows=”150,100%”
frameborder=”NO” border=”0"
framespacing=”0">
<FRAME src=”titulo.html” name=”titulo” noresize
frameborder=”NO” marginwidth=”0"
marginheight=”0" scrolling=”NO”>
<FRAME src=”conte.html” name=”conte”
scrolling=”AUTO” marginwidth=”0"
marginheight=”0" frameborder=”NO”>
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<BODY bgcolor=”#FFFFFF”>
</BODY>
</NOFRAMES>
Los Frames solo trabajan de a dos, por lo que, si
queremos poner un FRAME vertical, tendremos que
volverlo a definir como un FRAMESET en lugar de un
FRAME.
34
INDICE
A
E
L
A 25
align 15, 17, 27, 29
alink 14
alt 29
EM 18
LI 19, 21
link 13
lowsrc 29
start 19
STRIKE 19
STRONG 19
SUB 18
SUP 18
M
T
GIF 29
marginheight 33
marginwidth 33
MENU 22
META 12
META name 12
H
N
H1 17
H2 17
H3 17
H5 17
H6 17
HEAD 12
height 27, 29
HR 17
href 25
hspace 30
HTML 11
http-equiv 13
Noframes 33
Noresize 33
noshade 17
TABLE 27
TD 27
text 13
TH 27
TIF 29
TITLE 12
TR 28
TT 18
type 19, 21
B
B 18
Background 13
BASE 13
bgcolor 13, 27, 28
BLINK 18
Blockquote 16
BMP 29
BODY 13
border 27, 29, 33
BR 15
C
cellpadding 27
cellspacing 27
CITE 19
CODE 18
color 18
cols 33
colspan 27
content 12
D
DD 22
DFN 18
DIR 22
DL 22
DT 22
F
face 18
frameborder 33
FRAMESET 33
framespacing 33
G
I
I 18
IMG 29
J
JPEG 29
K
KBD 18
O
U
OL 19
U 18
UL 21
P
V
P 15
PNG 29
PRE 15
valign 27
VAR 18
vlink 14
R
W
rows 33
rowspan 27
width 17, 27, 29
S
S 18
SAMP 18
scrolling 33
size 17, 18
src 29, 33
35