Sei sulla pagina 1di 67

Unidad 1.

1: Lenguaje
HTML

Contenido
Introduccin
Qu es HTML?
Versiones HTML
Caractersticas del HTML
Etiquetas/Atributos
Estructura de un documento
Definicin de Tipos de Documentos (DTDs)
Cabecera de un documento HTML
Etiqueta TITLE

Etiqueta META

Elementos de HTML
Titulares/Encabezados
Tamaos/tipos de letra
Texto en color
Prrafos y lnea
Enmarcado de texto
Texto preformateado
Otros efectos en el texto
Caracteres especiales
Comentarios

Introduccin
En Espaol se traducen (HTML):
LENGUAJE DE MARCACIN DE
HIPERTEXTO.
HTML (HyperText Markup Language)
Fue creado por el fsico nuclear TIM
BERNERS-LEE el cual propuso disear un
sistema de unificacin del acceso a todos los
datos que posea el Centro Europeo para la
Investigacin Nuclear.(CERN)
3

Introduccin
Se comenz as a desarrollar una plataforma de tipo

hipertexto y un protocolo de comunicaciones que se


denomin:
HTTP (Hyper Text Transfer Protocol)
que permitira a todos los cientficos del CERN,
consultar cualquier informacin de cualquier tema,
aunque se encontrase diseminada en los diferentes
ordenadores, tanto del propio centro, como en los
ordenadores de las diferentes instituciones que
colaboraban con el CERN.
El sistema alcanz un xito enorme, tanto es as que
se comenz a definir un lenguaje de creacin de
documentos estructurados que vino a llamarse HTML
4

Introduccin
Actualmente HTML es un Estndar Internacional

(ISO/IEC 15445:2000), y es mantenido por el


World Wide Web Consortium (W3C).
El Word Wide Web Consortium, (W3C) es un

consorcio internacional donde las organizaciones


miembro, personal a tiempo completo y el pblico
en general, trabajan conjuntamente para
desarrollar estndares Web.
http://www.w3c.es/

Qu es HTML?
HTML no es un lenguaje de programacin, por lo

que no es posible hacer un programa con este


lenguaje. Para aadir alguna capacidad de
proceso a una pgina Web es necesario recurrir a
otros lenguajes, como Javascript o VBSscript.
Se debe considerar HTML como un lenguaje para

estructurar documentos y hacer su contenido ms


accesible, pero resulta frustrante observar la
misma pgina en otro navegador, ya que
probablemente no se visualice correctamente y
resulte una pgina poco esttica.
6

Qu es HTML?
HTML es estandarizado y multiplataforma.
Un documento preparado utilizando marcas HTML

puede ser ledo utilizando una variedad de


navegadores Web, como FireFox, Opera, Netscape, o
Explorer.
Por ello, no conviene abusar de las capacidades

especficas de un nico programa de visualizacin.


Es mejor utilizar una versin estndar del lenguaje,
y desarrollar las pginas probndolas con los dos
navegadores comerciales ms utilizados: Netscape
y Explorer. http://www.w3c.es/
7

Qu es HTML?
Es un lenguaje de marcas o etiquetas muy

sencillo que permite describir hipertexto ( idea


deTed Nelson ), es decir, texto presentado de
forma estructurada y agradable, con enlaces
(hyperlinks) que conducen a otros documentos o
fuentes de informacin relacionadas, y con
inserciones multimedia (grficos, sonido...)

Qu es HTML?
La descripcin se basa en especificar en el

texto la estructura lgica del contenido


(ttulos, prrafos de texto normal,
enumeraciones, definiciones, citas, etc)
as como los diferentes efectos que se
quieren dar (especificar los lugares del
documento donde se debe poner cursiva,
negrita, o un grfico determinado) y dejar que
luego la presentacin final de dicho texto se
realice por un programa intrprete
especializado (como Explorer, Mozilla
Firefox).

Qu es HTML?
Los documentos HTML son ficheros de texto

(ASCII) que se pueden crear con cualquier


editor de texto (notepad, vi, emacs, ...)
No obstante, escribir y mantener un gran

nmero de pginas a mano requiere esfuerzo y


conocimiento en profundidad de HTML. Para
evitar este problema existen editores
visuales como Macromedia Dreamweaver,
Microsoft FrontPage, etc., que permiten editar
pginas Web de una forma similar a como se
edita un documento de texto.
10

Qu es HTML?
Sin embargo, estos editores pueden llegar a

generar cdigo HTML de muy baja calidad


sobre el que tarde o temprano habr que
realizar una operacin de limpieza y
reestructuracin, utilizando un editor de texto.
La extensin de los ficheros que contienen

cdigo HTML es .html o htm.

11

Versiones de HTML
1993: Hypertext Markup Language (Primera

versin), publicado por la IETF como


Working-Draft (no era un estndar todava)
Permita principalmente el uso de prrafos,

cabeceras, saltos de lnea, imgenes, enlaces y


listas de elementos. Adems defina la Estructura
Bsica de Documento y se aadieron las etiquetas
de negrita, itlica y formularios.

12

Versiones de HTML
1995: HTML 2.0, publicado por la IETF como

documento RFC-1866.
Define los elementos de INPUT, SELECT y

TEXTAREA. Tambin se redefinen los enlaces, las


listas de imgenes y las cabeceras.

13

Versiones de HTML
1997: HTML 3.2, publicado como

Recomendacin del W3C.


Aadi las tablas, los atributos de alineacin y las

imgenes de fondo, e incluy scripts y hojas de


estilo (CSS). Formaliz el uso de colores de fondo,
textos y enlaces, as como tamaos de imgenes
y alineaciones.

14

Versiones de HTML
1998: HTML 4.0, publicado como

Recomendacin del W3C.


Incorpora el uso de frames y la posibilidad de

aadir objetos. Define las etiquetas DIV y SPAN,


que usadas con CSS pueden crear nuevas
etiquetas.

15

Versiones de HTML
1999: HTML 4.01, publicado como

Recomendacin del W3C.


2000: ISO/IEC 15445:2000 (basado en HTML

4.01 sintaxis estricta), publicado como


ISO/IEC Estndar Internacional.
2000: XHTML 1.0, publicado como

Recomendacin del W3C (se revis y volvi a


publicar en 2002).
2010:HTML5

16

Versiones de HTML
A lo largo del desarrollo de esta unidad se utilizar

el estndar de HTML 4.01 que es compatible con


los navegadores Internet Explorer , Firefox ,
Netscape, Opera (programas que se utilizarn
para visualizar los documentos realizados).

17

Versiones de HTML
Podemos encontrar el estndar "HTML 4.01

Specification" en http://www.w3.org/TR/html401/
(en ingls) y tambin en
http://www.w3.org/MarkUp/html4-updates/translati
ons#Spanish
(en castellano).
En esta especificacin nos encontraremos que

algunos elementos son considerados como


"deprecated" o "desaprobados", teniendo una
alternativa en las Hojas de Estilo CSS que
estudiaremos en otra unidad posterior.
Estas hojas de estilo nos ayudarn a realizar un

18

Caractersticas del HTML


Multiplataforma
Simple
No es ms que simple texto
Libre
No diferencia entre

maysculas/minsculas
19

Etiquetas
Un documento realizado con lenguaje HTML

constar de dos elementos: los contenidos del


documento y las instrucciones HTML que darn
el formato adecuado a dichos contenidos.
Para delimitar los elementos se utilizan etiquetas
o tags:

<nombre-etiqueta>

ABRE ETIQUETA

Elemento de contenido

</nombre-etiqueta>

CIERRA ETIQUETA

Ejemplo:

<TITLE>Un ttulo</TITLE>
20

Etiquetas
Existen dos clases de etiquetas:
Etiquetas vacas

Se utilizan para introducir saltos de lnea, lneas


horizontales y otros elementos no asociados al
formato de textos o imgenes.
Su formato es:

<etiqueta>
21

Etiquetas
Etiquetas contenedoras
Constan de una marca inicial y una marca final
igual que la inicial pero precedida del carcter /.
Todo lo que est incluido entre ambas marcas
quedar sujeto al formato indicado por la etiqueta.
La mayora de estas etiquetas pueden contener a
su vez otras etiquetas de cualquiera de los dos
tipos.

Su formato es:
<etiqueta>texto</etiqueta>
22

Atributos
Las etiquetas pueden tener atributos que son

una serie de valores que harn que los efectos


que producen las etiquetas varen, ya sean
colores, alineacin, estilos, etc. Generalmente
estn formados por el nombre del atributo, que es
una palabra reservada del lenguaje, el signo igual
y el valor que toma entre comillas.

<etiqueta ATR1=valor1 ATR2=valor2>


Texto de ejemplo

</etiqueta>
23

Estructura de un documento
html
<html>

(Etiqueta que indica que lo que viene a continuacin es un documento HTML)

<head> (Etiqueta de apertura de la cabecera)


Aqu va la informacin sobre el ttulo de la pgina, el autor, palabras
clave, etc. que no se presentarn en la ventana del navegador,
salvo el ttulo que aparecer en la barra de ttulo de la parte superior

</head> (Etiqueta de cierre de la cabecera)


<body> (Etiqueta de apertura del cuerpo)
Aqu va el contenido de la pgina que ser lo que se presente en
pantalla.

</body> (Etiqueta de cierre del cuerpo)


</html> (Etiqueta de cierre del documento)
NOTA: Tanto las etiquetas de cabecera como cuerpo son opcionales, aunque
se deben incluir para estructurar el cdigo.
24

Estructura de un documento html


Definicin de Tipos de Documentos
(DTDs)
La primera lnea de un documento HTML debe

especificar la versin en la que est desarrollado.


Esto se consigue insertando una referencia a un
documento donde se especifica formalmente la
sintaxis y estructura de todos los elementos que se
pueden utilizar en esa versin de HTML.
Este documento se llama DTD (Data Type Definition,

en castellano Definicin de Tipos de Documento).


La DTD indica qu elementos, atributos,

etctera, tiene un documento y cmo se


anidan. En funcin de la DTD que se defina para ese
documento, se permitirn o se prohibirn el uso de

25

Estructura de un documento html


Definicin de Tipos de Documentos
(DTDs)
La definicin de la versin de un documento HTML

tiene la siguiente estructura:


<!DOCTYPE HTML PUBLIC "FPI" "URI_DTD">

Donde:
FPI es el (Format Public Identifier o Identificador

Pblico de Formato)
URI_DTD (URL de la DTD que define formalmente

el FPI seleccionado) varan en funcin de las


necesidades del documento.

26

Estructura de un documento html


Definicin de Tipos de Documentos
(DTDs)
Los posibles juegos de valores para HTML 4.01

son:
FPI

URI_DTD

"//W3C//DTD "http://www.w3.org/TR/html4/
HTML
strict.dtd"
4.01//EN"

TipodeDocumento

HTML
estricto

HTML
"//W3C//DTD "http://www.w3.org/TR/1999/R
transicion
HTML
4.01 EChtml401
al
Transitional 19991224/loose.dtd"
//EN"
"//W3C//DTD "http://www.w3.org/TR/1999/R
HTML
4.01 EChtml401
Frameset//EN 19991224/frameset.dtd"
"

HTMLcon
marcos
(frames)
27

Estructura de un documento
Veamos el cdigo de una pgina Web simple:
html

28

Estructura de un documento
html
Ejemplo:

Creamos una carpeta llamada HTML

Abrimos el bloc de notas, escribimos el siguiente


ejemplo

Guardamos el fichero con el nombre practica.htm y


comprobamos el resultado en el navegador

29

Estructura de un documento
html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>

Documento de prueba
</TITLE>

</HEAD>
<!-- Esto es un comentario-->

<BODY>
<H1> Esto es una "demo" de documento HTML </H1>
Esto es el ms sencillo de los documentos HTML.
</BODY>

</HTML>
Guardamos el fichero con el nombre practica.htm y

comprobamos el resultado en el navegador


30

Cabecera de un documento HTML


<head>
La cabecera figura entre las etiquetas <HEAD> y

</HEAD>. En ella se incluirn definiciones generales


que afectan a todo el documento. Todas son
opcionales y se utilizan en casos muy concretos.
Se pueden especificar el ttulo, el autor y otras

caractersticas que no se muestran fsicamente en la


pgina y que sirven para facilitar su indexacin (son
los meta tags).
En la cabecera tambin deben incluirse los scripts

que necesite el documento, as como las definiciones


de estilos (si se utilizan hojas de estilos).
31

Cabecera de un documento HTML


<head>
Ttulo del documento

Se coloca entre las etiquetas <TITLE> y


</TITLE>. Debe guardar relacin con el
documento y ha ser lo ms corto posible. El ttulo
es importante ponerlo por las siguientes razones:
Cuando se minimice la ventana del navegador en

Windows, ser lo que se muestre en la barra de


estado.
Esta informacin es la que se muestra en el
marcador de los navegadores
Cuando se imprima el documento aparecer en la
parte superior de todas las hojas impresas.
Algunos buscadores lo utilizan para identificar el 32

Etiqueta META

Dentro de HEAD puede utilizarse otro elemento: META. Permite


introducir informacin sobre un documento que no ser visible en el
navegador. La sintaxis de esta etiqueta es:
<META HTTP-EQUIV =refresh CONTENT=n de segundos;
URL=nuevaURL>
Ejemplo:
<HEAD>
<META HTTP-EQUIV =refresh CONTENT=5;URL=fichero.htm o
direccion>
</HEAD>
HTTP-EQUIV puede indicar:
introduce un refresco automtico en unos segundos o que se cargar
otra pgina transcurrido ese tiempo con el valor refresh. Por
ejemplo, si se escribe:
<HEAD>
<TITLE>Cabecera del documento </TITLE>
<META HTTP-EQUIV="Refresh" CONTENT=3">
</HEAD>
Esto hace que el visualizador vuelva a cargar la pgina activa al cabo
33
de 3 segundos.

Etiqueta META
HTTP-EQUIV (continua):
Tambin puede hacerse a una direccin:

<HEAD>
<TITLE>Head de un documento </TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="10;
URL=http:// www.google.es ">
</HEAD>

34

Etiqueta
META
Ejemplos de etiqueta <meta>:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<meta http-equiv="Expires" content="Sat, 30 Jun 2001 12:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache>
<meta http-equiv="refresh" content="segundos;url=nuevaURL">
<meta http-equiv="KEYWORDS" content="Lavadoras,neveras">
<meta http-equiv="Content-Language" content="es-ES">

35

1. PRACTICA HTML
Vamos a crear una pgina web que contenga la imagen

ranas.gif como fondo y se refresque a los 3 segundos con


otra URL, por ejemplo la pagina de google.

36

Cuerpo de un documento HTML


<body>
El cuerpo est delimitado por las etiquetas <BODY> y

</BODY>, y entre ellas estar el contenido de nuestra


pgina Web. As como la informacin de la cabecera no se
visualizar en el navegador, toda la informacin del cuerpo
la mostrar.
<HTML>
<BODY>
CUERPO DEL DOCUMENTO
</BODY>
</HTML>
El cuerpo esta compuesto por prrafos, listas, ttulos, lneas,

imgenes, enlaces, etc., todo ello constituir la pgina Web.


Pero a todo esto se le puede dar un estilo utilizando los
atributos de la etiqueta.

37

Atributos
Los atributos de la etiqueta body son:
bgcolor: (valor= color) define el color de fondo del
documento
background: (valor = URL) indica la direccin web de
la imagen de fondo del documento. Si dicha imagen se
encuentra en el propio servidor, se utilizar la direccin
relativa (ruta del directorio)
text: (valor =color) establece el color en el que
aparecer el texto del documento
link: (valor= color) establece el color en el que
aparecer el texto de los enlaces del documento
vlink: (valor= color) determina el color en el que
aparecer el texto de los enlaces visitados del
documento.
38

Cuerpo de un documento HTML


<body>
Establecer una imagen de fondo: background
Para ello se utiliza el atributo BACKGROUND, que nos

permite poner una imagen como fondo de la pgina.


Si la imagen no rellena toda la ventana del Navegador la

convertir en un mosaico, repitindola tantas veces como


sea necesario para cubrir toda la superficie de la ventana.
Si la pgina ocupa ms de una ventana del Navegador al

movernos por la pgina con las barras de desplazamiento, la


imagen de fondo tambin se mover acompaando los
elementos de la pgina.

39

Cuerpo de un documento HTML


<body>
Establecer una imagen de fondo: background
<HTML>
<HEAD>
<TITLE>MI PRIMERA PAGINA WEB</TITLE>
</HEAD>
<BODY BGCOLOR=#FF0000 BACKGROUND=fondo.jpg>

</BODY>
</HTML>

40

Cuerpo de un documento HTML


<body>
Establecer una imagen de fondo: background
El atributo BACKGROUND tiene a su vez otro

atributo asociado llamado BGPROPERTIES. Este


atributo solo tiene un valor FIXED, con esto lo que
se consigue es obligar al Navegador a repetir la
imagen que se pone de fondo solo en la ventana
del Navegador y no en toda la pgina. Al mover las
barras de desplazamiento el fondo estar fijo,
consiguiendo un efecto muy esttico en la mayora
de los casos.
Las imgenes de fondo deben permitir una
correcta lectura de los textos y deben estar en el
formato correcto.
41

Cuerpo de un documento HTML


<body>
Establecer un color de fondo: bgcolor
Con el atributo BGCOLOR se puede indicar el color

de fondo del documento en el caso de que no se


haya indicado una imagen de fondo, o si esta
imagen no puede obtenerse.
Los colores se pueden especificar de dos formas:
Mediante el nombre del color en ingles.
Mediante la intensidad, empleando valores en
hexadecimal (entre 00 y FF) de los componentes RGB
(rojo, verde, azul). La nomenclatura utilizada sera
#RRGGBB.
Existen tablas de colores en internet:
http://www.webusable.com/coloursTable.htm
http://ar.geocities.com/coloreshtml/

42

Texto en color
Establecer el color del texto en el documento

con el atributo TEXT de la etiqueta BODY


Para establecer el color de primer plano para el

texto se utiliza el atributo TEXT, pudindose


especificar de las dos formas anteriormente
mencionadas.
<BODY TEXT=red">
</BODY>

43

Titulares/Encabezados
Para definir distintos niveles de cabeceras, en HTML se utiliza el

elemento <Hx> </Hx> donde x es un nmero que puede variar entre 1


y 6, siendo 1 el tamao mayor.

<html>
<head><TITLE>Titulares</TITLE></head>

<body>
<H1>Titular
<H2>Titular
<H3>Titular
<H4>Titular
<H5>Titular
<H6>Titular

de
de
de
de
de
de

primer nivel</H1>
segundo nivel</H2>
tercer nivel</H3>
cuarto nivel</H4>
quinto nivel</H5>
sexto nivel</H6>

</body>
</html>
NOTA: despus del cierre con la etiqueta </Hx> automticamente el

visualizador inserta un salto de prrafo


44

Titulares/Encabezados
Los ttulos aparecen por defecto alineados a la izquierda, para

modificar esto se utiliza el atributo align y los valores center o


right.

<H1 align=center> Texto en H1 centrado</H1><br>


<H3 align= right> Texto en H3 a la derecha</H3>

La etiqueta <br> produce un salto de lnea


45

ETIQUETA FONT: Tamaos de


letra
Para formatear el texto se utiliza la etiqueta <FONT >. Con el

atributo SIZE= valor, que es un nmero entre 1 y 7 ponemos el tamao


de la letra. El valor por defecto del texto es 3. Ejemplo:
<FONT SIZE=3>A</FONT><FONT SIZE=4>A</FONT><FONT
SIZE=5>A</FONT>
<FONT SIZE=6>A</FONT><FONT SIZE=7>A</FONT><FONT
SIZE=6>A</FONT>
<FONT SIZE=5>A</FONT><FONT SIZE=4>A</FONT><FONT
SIZE=3>A</FONT>

Se puede cambiar el tamao por defecto (3) de toda la pgina con el

elemento <BASEFONT SIZE=valor>. El texto tomar el tamao


indicado por valor y lo mantendr hasta que aparezca otro elemento
<BASEFONT SIZE=valor> y lo restaure o lo cambie por otro diferente.
Tanto si se ha establecido un valor base como si se utiliza el valor por
defecto, los tamaos tambin pueden indicarse de forma relativa,
por lo que el valor puede ser positivo (+) o negativo (-) respecto al
tamao base. Por ejemplo estos dos valores dan el mismo resultado:
<FONT SIZE=5>ABCDE</FONT>
<FONT SIZE=+2>ABCDE</FONT>

46

ETIQUETA FONT: Tipos de


letra

Con el atributo FACE se puede forzar el tipo de letra que el diseador

de la pgina quiere que vea el cliente, sin importar el que por defecto
tenga establecido el visualizador.
Si escribes
<FONT FACE="arial">Texto de prueba con tipo ARIAL</FONT><br>
<FONT FACE="times new roman">Texto de prueba con tipo TIMES NEW
ROMAN</FONT><br>
<FONT FACE="courier new">Texto de prueba con tipo COURIER
NEW</FONT><br>
<FONT FACE="courier">Texto de prueba con tipo
COURIER</FONT><br>
<FONT FACE="roman">Texto de prueba con tipo ROMAN</FONT><br>
<FONT FACE="small fonts">Texto de prueba con tipo SMALL
FONTS</FONT>
Si se define un tipo del que se tienen dudas de que exista en el cliente, se

pueden indicar otros tipos alternativos, de forma que el navegador si no tiene


el primer tipo, utilizar el siguiente, y si tampoco lo tiene el prximo, etc. As:
<FONT FACE="raro, courier" SIZE=4 COLOR="red">
Texto de prueba con tipos alternativos</FONT>
47

ETIQUETA FONT: Texto en


color

Se puede controlar el color del texto utilizando el elemento <FONT> con el

atributo COLOR="xxx", donde "xxx" es el nombre en ingls del color que se


desea. Hay que tener presente que algunos no se vern o se vern mal si la
mquina no soporta, por lo menos, 256 colores. Por supuesto, este efecto es
anidable con el de tamao y todos los dems.
Si escribes:
<B><FONT COLOR="red">Texto ROJO </FONT><br>
<FONT COLOR="blue">Texto AZUL </FONT><br>
<FONT COLOR="navy">Texto AZUL MARINO </FONT><br>
<FONT COLOR="green">Texto VERDE </FONT><br>
<FONT COLOR="olive">Texto OLIVA </FONT><br>
<FONT COLOR="yellow">Texto AMARILLO </FONT><br>
<FONT COLOR="lime">Texto LIMA </FONT><br>
<FONT COLOR="magenta">Texto MAGENTA </FONT><br>
<FONT COLOR="purple">Texto PURPURA </FONT><br>
<FONT COLOR="cyan">Texto CYAN </FONT><br>
<FONT COLOR="brown">Texto MARRON </FONT><br>
<FONT COLOR="black">Texto NEGRO </FONT><br>
<FONT COLOR="gray">Texto GRIS </FONT><br>
<FONT COLOR="teal">Texto TEAL </FONT><br>
<FONT COLOR="white">Texto BLANCO </FONT><br></B>

48

ETIQUETA FONT: Texto en


color
Existen tablas de colores en internet:
http://www.webusable.com/coloursTable.htm
http://ar.geocities.com/coloreshtml/

Los colores tambin se pueden definir en hexadecimal

(por ejemplo el rojo es <FONT COLOR=#FF0000>).


Cuando son colores bsicos, como los del ejemplo
anterior, es ms cmodo escribir el nombre aunque
sea en ingls, pero para definir la intensidad se usa la
codificacin hexadecimal (entre 00 y FF) de los
componentes RGB (rojo, verde, azul). La
nomenclatura utilizada sera #RRGGBB.

49

ETIQUETA FONT
Por supuesto, existe la posibilidad de combinar los

tres atributos modificadores en una misma


etiqueta <font>.
<FONT FACE="arial" COLOR=#0000ff
SIZE=+2> <p>Esto es ms grande que el
normal, Arial y azul. </p>
</FONT>

50

Prrafos
Para delimitar un bloque de texto o prrafo usamos
la
etiqueta <p>texto del prrafo</p>.
Visualmente equivale a pulsar dos veces la tecla
Return. Admite un atributo align con los valores
left, center, right, justify (no en todos los
navegadores).

51

Prrafos
El elemento <P> admite el atributo: ALIGN=LEFT (por defecto),

ALIGN=RIGHT , ALIGN=CENTER y ALIGN=JUSTIFY Se escribirn as:


<P ALIGN=LEFT>
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
<P ALIGN=RIGHT>
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2
<P ALIGN=CENTER>
Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
<P ALIGN=JUSTIFY>
Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4
Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 tex Texto 4 Texto 4 Texto 4
Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto tex 4 Texto 4
En el caso de utilizar alguno de estos atributos, es recomendable usar el cierre </P>

52

Saltos de lnea
<br> No tiene cierre (etiqueta simple). Si no se pone,

todo se escribe en la misma lnea y el texto ocupar en


funcin del tamao de la ventana.
Se escribir as:
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 1
Texto 1 Texto 1 <BR>
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2
Texto 2
y este sera el resultado:
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2

53

Prrafos
Un elemento que se comporta de forma parecida a <P> es <DIV>

que admite los mismos atributos que <P>: ALIGN=LEFT


ALIGN=RIGHT y ALIGN=CENTER . Se escribe as:
<DIV ALIGN=LEFT>
texto1 texto1 texto1 texto1
texto1 texto1 texto1 texto1
texto1 texto1 texto1 texto1
texto1 texto1 texto1 texto1
</DIV>
<DIV ALIGN=RIGHT>
texto2 texto2 texto2 texto2
texto2 texto2 texto2 texto2
texto2 texto2 texto2 texto2
texto2 texto2 texto2 texto2
texto2 texto2 texto2 texto2
< /DIV>
<DIV ALIGN=CENTER>
texto3 texto3 texto3 texto3
texto3 texto3 texto3 texto3
texto3 texto3 texto3 texto3
texto3 texto3 texto3 texto3
</DIV>

texto1
texto1
texto1
texto1

texto1
texto1
texto1
texto1

texto1
texto1
texto1
texto1

texto1
texto1
texto1
texto1

texto1
texto1
texto1
texto1

texto2
texto2
texto2
texto2
texto2

texto2
texto2
texto2
texto2
texto2

texto2
texto2
texto2
texto2
texto2

texto2
texto2
texto2
texto2
texto2

texto2
texto2
texto2
texto2
texto2

texto3
texto3
texto3
texto3

texto3
texto3
texto3
texto3

texto3
texto3
texto3
texto3

texto3
texto3
texto3
texto3

texto3
texto3
texto3
texto3

54

Prrafos
Etiqueta <BLOCKQUOTE> que sirve para presentar prrafos

indentados (como si estuviesen tabulados).


Se escribir as:
<BLOCKQUOTE>
texto texto texto
texto texto texto
<BLOCKQUOTE>
texto texto texto
texto texto texto
</BLOCKQUOTE>
</BLOCKQUOTE>

texto texto texto texto texto texto texto


texto texto texto texto texto texto texto
texto texto texto texto texto texto texto
texto texto texto texto texto texto texto

Fjate que en este ejemplo hay un anidamiento, y por tanto, debe

haber dos cierres </BLOCKQUOTE> al final


55

Efectos del texto


Para introducir una lnea horizontal o regla (cambio de

seccin) en la pgina se utiliza la etiqueta <HR> (Horizontal


Rule). Por defecto, dicha regla ser del ancho de la ventana
del navegador, tendr forma tridimensional e introducir una
separacin equivalente a un cambio de prrafo.
Esta etiqueta posee tres atributos que modificarn el aspecto
de la lnea a dibujar:
SIZE : Indica el grosor de la lnea
WIDTH: Indica la longitud de la lnea. Puede expresarse en
pixels o en porcentaje respecto al tamao de la ventana
(para esto hay que preceder el valor con el smbolo %)
ALIGN: Establece la alineacin de la lnea. Admite los valores
LEFT, RIGHT y CENTER.
NOSHADE: No requiere ningn valor y se utiliza para anular
el efecto de relieve de la lnea.
56

Efectos del texto


Al igual que al texto, se le puede incluir un parmetro de color, pero

no funciona en todos los navegadores. Tambin se puede cambiar


su apariencia aadindole el atributo <NOSHADE>. As:
<HR NOSHADE>
El resultado es: le quita el efecto de sombra
El elemento <HR> admite dos parmetros: WIDTH y SIZE. El
primero define la longitud de la lnea y el segundo su ancho. No
es obligado usar los dos a la vez
Por ejemplo, si escribes
<HR WIDTH=400 SIZE=5>
El valor del atributo WIDTH se puede expresar, como en el ejemplo
anterior, en nmero de puntos (pxels), o en tantos por ciento
referidos al ancho total de la ventana. As:
<HR WIDTH=80% SIZE=5>
Adems se puede indicar su posicin respecto a los mrgenes de la
ventana con los atributos ALIGN=CENTER (por defecto)
ALIGN=LEFT y ALIGN=RIGHT. Por ejemplo:
<HR WIDTH=80% SIZE=5 ALIGN=LEFT>
57

Enmarcado de texto
La Etiqueta <FIELDSET> permite rodear un texto con un marco, y

opcionalmente ponerle una etiqueta.


<FIELDSET>
Esto es una prueba de enmarcado
</FIELDSET>

Este elemento tiene un parmetro que permite etiquetar el

recuadro: <LEGEND> Si se escribe:


<FIELDSET>
<LEGEND>Esto es una etiqueta</LEGEND>
Esto es una prueba de enmarcado
</FIELDSET>

El parmetro <LEGEND> tiene tres atributos que indican la

posicin de la etiqueta: LEFT (por defecto), RIGHT y CENTER,


aunque no funciona en todos los navegadores. Por ejemplo:
<FIELDSET>
<LEGEND ALIGN=CENTER> Esto es una etiqueta </LEGEND>
Esto es una prueba de enmarcado
</FIELDSET>

58

Texto preformateado
La etiqueta <PRE> reproduce el texto tal y como ste se ha

introducido en el documento. Se utiliza para representar los


espacios en blanco, los retornos de carro y las tabulaciones
que contenga.
Se escribir as:
<PRE>
1 2 3 4 5 6 7
<B>Esto es una demostracin de</B>
8 9 10 11 12 13 14
texto preformateado.
15 16 17 18 19 20 21
</PRE>

No se recomienda como forma rpida de convertir un

documento texto a formato visible en HTML ya que presenta


muchas limitaciones y no se obtiene una buena presentacin.
59

Otros efectos en el texto


Una o varias lneas de texto, una tabla, una imagen o cualquier

otra cosa pueden estar centradas respecto a los mrgenes de la


ventana. Esto afecta slo a lo que hay entre <CENTER> y
</CENTER>, pero no a todo el prrafo. Por ejemplo:
texto texto texto texto texto texto texto texto texto texto texto texto
<CENTER>texto centrado texto centrado</CENTER>
texto texto texto texto texto texto texto texto texto texto texto texto
Texto en negrita:

<B>Texto en negrita</B>
Texto realzado: depende del navegador, su misin es enfatizar el
texto afectado y esto se puede hacer poniendo el texto en negrita,
subrayado o en negrita y subrayado.
<STRONG>Texto realzado</STRONG>
Texto en itlica: cursiva
<I>Texto en itlica</I>
60

Otros efectos en el texto

61

Otros efectos en el texto


La etiqueta <ACRONYM TITLE> permite mostrar una

etiqueta que aparecer al pasar el ratn por encima, pero


sin cambiar de pgina ni abrir ninguna ventana nueva.
Por ejemplo, si escribes:
<ACRONYM TITLE="Hyper Text Markup
Language">HTML</ACRONYM>
Al pasar el ratn sobre la palabra HTML, se ver su

significado: Hyper Text Markup Language

62

CARACTERES ESPECIALES
Una pgina web se ha de ver en pases distintos, que

usan conjuntos de caracteres distintos. El lenguaje HTML


nos ofrece un mecanismo por el que podemos estar
seguros que una serie de caracteres raros se van a
ver bien en todos los ordenadores del mundo,
independientemente de su juego de caracteres.
Por ejemplo para escribir varios espacios en blanco
seguidos, o los siguientes caracteres hay que usar los
caracteres especiales que son una combinacin de
letras precedidas por & y terminadas en punto y coma:
< &lt;
> &gt;
& &amp;

&quot;
blanco forzado &nbsp;
63

CARACTERES ESPECIALES

&aacute;
&Aacute;
&eacute;
&Eacute;
&ntilde;
&Ntilde;
&iquest;
&iexcl;

64

CARACTERES ESPECIALES
Por ejemplo, la "" (a minscula acentuada) se

escribe "&aacute;" de modo que la palabra pgina


se escribira en una pgina HTML de este modo:
p&aacute;gina
El conjunto de caracteres ASCII no es suficiente

para un sistema de informacin global como la Web,


de modo que HTML usa un conjunto de caracteres
mucho ms completo llamado Conjunto Universal
de Caracteres (Universal Character Set, UCS)
Este estndar define un repertorio de miles de

caracteres usados por comunidades de todo el


mundo.
65

CARACTERES ESPECIALES
Los navegadores deben saber en qu tipo de

idioma est escrito el documento HTML para


poder interpretarlo correctamente. Para
que los usuarios de otros pases (Japn por
ejemplo) sepan qu juego de caracteres
estamos usando hay que indentificarlo en la
cabecera del programa con la siguiente
Meta-instruccin que indica el juego de
caracteres de Europa Occidental:
<meta http-equiv=Content-Type
content=text/html;charset=ISO-8859-1>

66

Comentarios
Podemos incluir comentarios que no sern

interpretados por el navegador <!-Comentario -->

67

Potrebbero piacerti anche