Unidad 1.

1: Lenguaje HTML
Contenido
Introducción
¿Qué es HTML?
Versiones HTML
Características del HTML
Etiquetas/Atributos
Estructura de un documento
Definición de Tipos de Documentos (DTDs)
Cabecera de un documento HTML
Etiqueta TITLE Etiqueta META

Elementos de HTML
Titulares/Encabezados
Tamaños/tipos de letra
Texto en color
Párrafos y línea
Enmarcado de texto
Texto preformateado
Otros efectos en el texto
Caracteres especiales
Comentarios 2
Introducción
En Español se traducen (HTML):
LENGUAJE DE MARCACIÓN DE HIPERTEXTO.
HTML (HyperText Markup Language)
Fue creado por el físico nuclear TIM BERNERS-LEE
el cual propuso diseñar un sistema de unificación del
acceso a todos los datos que poseía el Centro Europeo
para la Investigación Nuclear.(CERN)

3
Introducción
Se comenzó así a desarrollar una plataforma de tipo
hipertexto y un protocolo de comunicaciones que se
denominó:
HTTP (Hyper Text Transfer Protocol)
que permitiría a todos los científicos del CERN, consultar
cualquier información 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 creación de documentos
estructurados que vino a llamarse HTML

4
Introducción
Actualmente HTML es un Estándar 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 público en general, trabajan
conjuntamente para desarrollar estándares Web.
http://www.w3c.es/

5
¿Qué es HTML?
HTML no es un lenguaje de programación, por lo que no
es posible hacer un programa con este lenguaje. Para
añadir alguna capacidad de proceso a una página 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 más
accesible, pero resulta frustrante observar la misma
página en otro navegador, ya que probablemente no se
visualice correctamente y resulte una página poco estética.

6
¿Qué es HTML?
HTML es estandarizado y multiplataforma.

Un documento preparado utilizando marcas HTML puede

ser leído utilizando una variedad de navegadores Web,
como FireFox, Opera, Netscape, o Explorer.

Por ello, no conviene abusar de las capacidades específicas

de un único programa de visualización. Es mejor utilizar
una versión estándar del lenguaje, y desarrollar las páginas
probándolas con los dos navegadores comerciales más
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 información relacionadas, y con
inserciones multimedia (gráficos, sonido...)

8
¿Qué es HTML?
La descripción se basa en especificar en el texto la
estructura lógica del contenido (títulos, párrafos 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 gráfico
determinado) y dejar que luego la presentación final
de dicho texto se realice por un programa intérprete
especializado (como Explorer, Mozilla Firefox…).

9
¿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 número de

páginas 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 páginas 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
código HTML de muy baja calidad sobre el que tarde
o temprano habrá que realizar una operación de
limpieza y reestructuración, utilizando un editor de
texto.

La extensión de los ficheros que contienen código

HTML es .html o htm.

11
Versiones de HTML
1993: Hypertext Markup Language (Primera versión),
publicado por la IETF como Working-Draft (no era
un estándar todavía)

Permitía principalmente el uso de párrafos, cabeceras,

saltos de línea, imágenes, enlaces y listas de elementos.
Además definía la Estructura Básica de Documento y se
añadieron las etiquetas de negrita, itálica 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.

También se redefinen los enlaces, las listas de imágenes y
las cabeceras.

13
Versiones de HTML
1997: HTML 3.2, publicado como Recomendación del
W3C.

Añadió las tablas, los atributos de alineación y las

imágenes de fondo, e incluyó scripts y hojas de estilo
(CSS). Formalizó el uso de colores de fondo, textos y
enlaces, así como tamaños de imágenes y alineaciones.

14
Versiones de HTML
1998: HTML 4.0, publicado como Recomendación del
W3C.

Incorpora el uso de frames y la posibilidad de añadir

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 Recomendación
del W3C.

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

sintaxis estricta), publicado como ISO/IEC Estándar
Internacional.

2000: XHTML 1.0, publicado como Recomendación

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
estándar de HTML 4.01 que es compatible con los
navegadores Internet Explorer , Firefox , Netscape, Opera
(programas que se utilizarán para visualizar los
documentos realizados).

17
Versiones de HTML
Podemos encontrar el estándar "HTML 4.01 Specification"
en http://www.w3.org/TR/html401/ (en inglés) y también
en
http://www.w3.org/MarkUp/html4-updates/translations#Spani
(en castellano).

En esta especificación 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 ayudarán a realizar un código
más limpio, profesional y reutilizable.
18
Características del HTML
Multiplataforma
Simple
No es más que simple texto
Libre
No diferencia entre
mayúsculas/minúsculas

19
Etiquetas
Un documento realizado con lenguaje HTML constará de
dos elementos: los contenidos del documento y las
instrucciones HTML que darán 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 título</TITLE>

20
Etiquetas
Existen dos clases de etiquetas:

Etiquetas vacías
Se utilizan para introducir saltos de línea, líneas
horizontales y otros elementos no asociados al formato de
textos o imágenes.

Su formato es:

<etiqueta>

21
Etiquetas
Etiquetas contenedoras
Constan de una marca inicial y una marca final igual que
la inicial pero precedida del carácter “/”. Todo lo que esté
incluido entre ambas marcas quedará sujeto al formato
indicado por la etiqueta.
La mayoría 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 harán que los efectos que producen las
etiquetas varíen, ya sean colores, alineación, estilos, etc.
Generalmente están 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 continuación es un documento HTML)

<head> (Etiqueta de apertura de la cabecera)

Aquí va la información sobre el título de la página, el autor, palabras clave,
etc. que no se presentarán en la ventana del navegador, salvo el título
que aparecerá en la barra de título de la parte superior

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

<body> (Etiqueta de apertura del cuerpo)

Aquí va el contenido de la página 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 código.
24
 Estructura de un documento html
Definición de Tipos de Documentos (DTDs)
La primera línea de un documento HTML debe especificar
la versión 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 versión de HTML.

Este documento se llama DTD (Data Type Definition, en

castellano Definición de Tipos de Documento).

La DTD indica qué elementos, atributos, etcétera,

tiene un documento y cómo se anidan. En función de
la DTD que se defina para ese documento, se permitirán o
se prohibirán el uso de ciertos elementos.
25
 Estructura de un documento html
Definición de Tipos de Documentos (DTDs)
La definición de la versión de un documento HTML tiene
la siguiente estructura:

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

Donde:

FPI es el (Format Public Identifier o Identificador Público

de Formato)

URI_DTD (URL de la DTD que define formalmente el FPI

seleccionado) varían en función de las necesidades del
documento. 26
 Estructura de un documento html
Definición de Tipos de Documentos (DTDs)
Los posibles juegos de valores para HTML 4.01 son:

FPI URI_DTD Tipo de Documento

"-//W3C//DTD "http://www.w3.org/TR/html4/ HTML

HTML strict.dtd" estricto
4.01//EN"

"-//W3C//DTD "http://www.w3.org/TR/1999/R HTML

HTML 4.01 EC-html401- transicion
Transitional 19991224/loose.dtd" al
//EN"

"-//W3C//DTD "http://www.w3.org/TR/1999/R HTML con

HTML 4.01 EC-html401- marcos
Frameset//EN 19991224/frameset.dtd" (frames)
"
27
Estructura de un documento html
Veamos el código de una página Web simple:

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 más 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 incluirán definiciones generales que
afectan a todo el documento. Todas son opcionales y se
utilizan en casos muy concretos.

Se pueden especificar el título, el autor y otras

características que no se muestran físicamente en la
página y que sirven para facilitar su indexación (son los
meta tags).

En la cabecera también 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>
Título del documento
Se coloca entre las etiquetas <TITLE> y </TITLE>. Debe
guardar relación con el documento y ha ser lo más corto
posible. El título 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 información 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
información 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 automático en unos segundos o que se cargará otra
página 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 página activa al cabo de 3 33
Etiqueta META
HTTP-EQUIV (continua):

 También puede hacerse a una dirección:

<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 página 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 página Web. Así como la
información de la cabecera no se visualizará en el navegador, toda la
información del cuerpo la mostrará.

<HTML>
<BODY>
CUERPO DEL DOCUMENTO
</BODY>
</HTML>

 El cuerpo esta compuesto por párrafos, listas, títulos, líneas, imágenes,

enlaces, etc., todo ello constituirá la página 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 dirección web de la
imagen de fondo del documento. Si dicha imagen se
encuentra en el propio servidor, se utilizará la dirección
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 página.

 Si la imagen no rellena toda la ventana del Navegador la convertirá en

un mosaico, repitiéndola tantas veces como sea necesario para cubrir
toda la superficie de la ventana.

 Si la página ocupa más de una ventana del Navegador al movernos por

la página con las barras de desplazamiento, la imagen de fondo
también se moverá acompañando los elementos de la página.

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
página. Al mover las barras de desplazamiento el fondo
estará fijo, consiguiendo un efecto muy estético en la
mayoría de los casos.
Las imágenes de fondo deben permitir una correcta
lectura de los textos y deben estar en el formato correcto.

(Este atributo no se visualiza con Netscape)

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 sería #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, pudiéndose 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 número que puede variar entre 1 y 6, siendo 1 el
tamaño mayor.
<html>
<head><TITLE>Titulares</TITLE></head>
<body>
<H1>Titular de primer nivel</H1>
<H2>Titular de segundo nivel</H2>
<H3>Titular de tercer nivel</H3>
<H4>Titular de cuarto nivel</H4>
<H5>Titular de quinto nivel</H5>
<H6>Titular de sexto nivel</H6>
</body>
</html>

 NOTA: después del cierre con la etiqueta </Hx> automáticamente el

44
visualizador inserta un salto de párrafo
Titulares/Encabezados
 Los títulos 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 línea

45
ETIQUETA FONT: Tamaños de letra
 Para formatear el texto se utiliza la etiqueta <FONT >. Con el atributo SIZE=
valor, que es un número entre 1 y 7 ponemos el tamaño 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 tamaño por defecto (3) de toda la página con el elemento
<BASEFONT SIZE=valor>. El texto tomará el tamaño 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 tamaños también pueden
indicarse de forma relativa, por lo que el valor puede ser positivo (+) o
negativo (-) respecto al tamaño 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 diseñador de la
página 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 próximo, 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 inglés del color que se desea. Hay que
tener presente que algunos no se verán o se verán mal si la máquina no soporta, por lo
menos, 256 colores. Por supuesto, este efecto es anidable con el de tamaño y todos los
demás.
 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 también se pueden definir en hexadecimal

(por ejemplo el rojo es <FONT COLOR=#FF0000>).
Cuando son colores básicos, como los del ejemplo
anterior, es más cómodo escribir el nombre aunque sea en
inglés, pero para definir la intensidad se usa la
codificación hexadecimal (entre 00 y FF) de los
componentes RGB (rojo, verde, azul). La nomenclatura
utilizada sería #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 más grande que el normal, Arial y azul. </p>
</FONT>

50
Párrafos
Para delimitar un bloque de texto o párrafo usamos la
etiqueta <p>texto del párrafo</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
Párrafos
 El elemento <P> admite el atributo: ALIGN=LEFT (por defecto),
ALIGN=RIGHT , ALIGN=CENTER y ALIGN=JUSTIFY Se escribirán 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 línea
<br> No tiene cierre (etiqueta simple). Si no se pone, todo
se escribe en la misma línea y el texto ocupará en función
del tamaño 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 sería 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
Párrafos
 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 texto1 texto1
texto1 texto1 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 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
< /DIV>
<DIV ALIGN=CENTER>
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
</DIV> 54
Párrafos
 Etiqueta <BLOCKQUOTE> que sirve para presentar párrafos indentados
(como si estuviesen tabulados).
 Se escribirá así:

<BLOCKQUOTE>
texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto
<BLOCKQUOTE>
texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto
</BLOCKQUOTE>
</BLOCKQUOTE>

 Fíjate que en este ejemplo hay un anidamiento, y por tanto, debe haber dos
cierres </BLOCKQUOTE> al final
55
Efectos del texto
 Para introducir una línea horizontal o regla (cambio de sección) en la
página 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 separación equivalente a un cambio
de párrafo.
 Esta etiqueta posee tres atributos que modificarán el aspecto de la
línea a dibujar:
 SIZE : Indica el grosor de la línea
 WIDTH: Indica la longitud de la línea. Puede expresarse en pixels o
en porcentaje respecto al tamaño de la ventana (para esto hay que
preceder el valor con el símbolo %)
 ALIGN: Establece la alineación de la línea. Admite los valores LEFT,
RIGHT y CENTER.
 NOSHADE: No requiere ningún valor y se utiliza para anular el efecto
de relieve de la línea.

56
Efectos del texto
 Al igual que al texto, se le puede incluir un parámetro de color, pero no
funciona en todos los navegadores. También se puede cambiar su apariencia
añadiéndole el atributo <NOSHADE>. Así:
<HR NOSHADE> El resultado es: le quita el efecto de sombra
 El elemento <HR> admite dos parámetros: WIDTH y SIZE. El primero define
la longitud de la línea 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 número de puntos (píxels), o en tantos por ciento referidos al ancho total
de la ventana. Así:
<HR WIDTH=80% SIZE=5>
 Además se puede indicar su posición respecto a los márgenes 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 parámetro que permite etiquetar el recuadro:

<LEGEND> Si se escribe:
<FIELDSET>
<LEGEND>Esto es una etiqueta</LEGEND>
Esto es una prueba de enmarcado
</FIELDSET>

 El parámetro <LEGEND> tiene tres atributos que indican la posición 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 demostración de</B>
8 9 10 11 12 13 14 texto preformateado.
15 16 17 18 19 20 21
</PRE>

 No se recomienda como forma rápida de convertir un documento

texto a formato visible en HTML ya que presenta muchas limitaciones
y no se obtiene una buena presentación.

59
Otros efectos en el texto
 Una o varias líneas de texto, una tabla, una imagen o cualquier otra
cosa pueden estar centradas respecto a los márgenes de la ventana.
Esto afecta sólo a lo que hay entre <CENTER> y </CENTER>, pero no
a todo el párrafo. 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 misión 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 itálica: cursiva
<I>Texto en itálica</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 ratón por encima, pero sin cambiar de página ni
abrir ninguna ventana nueva.
 Por ejemplo, si escribes:
<ACRONYM TITLE="Hyper Text Markup
Language">HTML</ACRONYM>

 Al pasar el ratón sobre la palabra HTML, se verá su significado: Hyper

Text Markup Language

62
CARACTERES ESPECIALES
Una página web se ha de ver en países 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 combinación 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 minúscula acentuada) se escribe
"&aacute;" de modo que la palabra página se
escribiría en una página HTML de este modo:
p&aacute;gina

El conjunto de caracteres ASCII no es suficiente para

un sistema de información global como la Web, de
modo que HTML usa un conjunto de caracteres
mucho más completo llamado Conjunto Universal
de Caracteres (Universal Character Set, UCS)

Este estándar define un repertorio de miles de

caracteres usados por comunidades de todo el 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 (Japón por ejemplo) sepan qué juego
de caracteres estamos usando hay que indentificarlo
en la cabecera del programa con la siguiente Meta-
instrucción 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 serán
interpretados por el navegador <!--Comentario -->

67