Anda di halaman 1dari 19

Dar formato a un documento

En este tema aprenderemos a utilizar fuentes de distintos tamaos y estilos, definir ttulos...

Para aumentar el atractivo de nuestras pginas, trabajaremos con colores, tanto para el texto
como para el fondo de las mismas.


Formato de prrafo



Ttulos



Formato de texto



Etiquetas para cambiar el tamao y el tipo de letra



Formato de lnea



Pginas con colores


Ejercicio de repaso


Prctica: Tamaos y formatos


Prctica: Lneas


Prctica: Colores


Prctica: Introduccin









Dar formato a un
documento
Formato de prrafo
El contenido que se visualiza en una pgina Web debe escribirse entre las etiquetas <BODY> y
</BODY>.

La forma en que dividimos el texto al escribirlo en el documento HTML no tiene efecto sobre su
presentacin en el visualizador (espacios entre prrafos, retornos de lnea, lneas en blanco, etc.). Para
hacer las correctas separaciones entre los prrafos, haremos uso de las siguientes etiquetas <P>...</P>.

Para separar el texto en distintos prrafos utilizaremos esta etiqueta. El visualizador lo mostrar con una
lnea en blanco antes y despus del prrafo.

La etiqueta de finalizacin </P> no es obligatoria.

Con <P> podemos establecer la alineacin de un prrafo del siguiente modo:

<P ALIGN=alineacin> donde alineacin puede tomar uno de los siguientes valores:

CENTER: Centra todas las lneas del prrafo en la pantalla.


LEFT: Alinea a la izquierda de la pantalla todas las lneas del prrafo. Si no especificamos ninguna
alineacin, toma este valor por defecto.

RIGHT: Todas las lneas del prrafo aparecen alineadas a la derecha de la pantalla.

JUSTIFY: Justifica el texto a ambos mrgenes.

<HTML>


<HEAD>


<TITLE> Pr&aacute;ctica sobre alineaciones. </TITLE>

</HEAD>


<BODY>


<P ALIGN=CENTER>Este texto est&aacute; centrado, como la
mayor&iacute;a de los t&iacute;tulos.</P>

<P ALIGN=RIGHT>Este texto es un ejemplo de
alineaci&oacute;n a la derecha.</P>

<P ALIGN=JUSTIFY>Este texto est&aacute; justificado a
ambos m&aacute;rgenes, para darnos cuenta, el texto debe
ser lo suficientemente grande para que llegue al margen
derecho.</P>

<P>Como vemos, si no indicamos nada, lo justificamos a la
izquierda.</P>

</BODY>

</HTML>





<BR>
Hemos visto que la etiqueta <P> introduce un espacio entre prrafo y prrafo, pero a veces ese espacio
no lo deseamos. Esto se soluciona con esta etiqueta, que permite cambiar de lnea o prrafo dejando un
espacio ms pequeo.

Si queremos obtener mltiples lneas en blanco, hay que combinar la etiqueta <BR> con <P>, debido a
que <BR> carece de etiqueta de cierre. Por ejemplo, si queremos obtener cuatro lneas en blanco,
pondramos:

<BR><P>

<BR><P>

<BR><P>

<BR><P>


<HTML>


<HEAD>


<TITLE> La etiqueta BR </TITLE>

</HEAD>


<BODY>


<BR>Elemento UNO del listado

<BR>Elemento DOS del listado

<BR>Elemento TRES del listado

<BR>Elemento CUATRO del listado

<P> Mostramos un espacio en blanco combinando las etiquetas
&ltP&gt y &ltBR&gt</P>

<BR><P>

<BR><P>

<BR><P>

Esto es

<BR>un retorno de l&iacute;nea

</BODY>

</HTML>





<DIV>...</DIV>
Esta etiqueta permite agrupar varios bloques de texto en uno slo, heredando todos ellos la alineacin
especificada.

Funciona del mismo modo que <P>, slo que es ms sencillo indicar la alineacin en una sola etiqueta
<DIV> que en todos los prrafos.

<HTML>


<HEAD>


<TITLE> La etiqueta DIV </TITLE>

</HEAD>


<BODY>


<DIV ALIGN=CENTER>

<P>Primer p&aacute;rrafo<P>

<P>Segundo p&aacute;rrafo <P>

<P>Tercer p&aacute;rrafo <P>

</DIV>

</BODY>

</HTML>





<BLOCKQUOTE>
Podemos sangrar un prrafo a ambos mrgenes, que no es otra cosa que desplazar el texto hacia
dentro, tanto por la izquierda como por la derecha.

Si repetimos la etiqueta como mostramos en el siguiente cdigo, desplazamos el texto varias veces.

<HTML>


<HEAD>


<TITLE> Sangrados con &ltBLOCKQUOTE&gt</TITLE>

</HEAD>


<BODY>


<BLOCKQUOTE>

Los or&iacute;genes de Sevilla son inciertos, aunque lo
m&aacute;s probable es que su fundaci&oacute;n corresponda a
los turdetanos.

<BLOCKQUOTE>

Reconvertida en <i>Iulia Romulea</i> (o Romula), Sevilla
disfrut&oacute; de un prolongado per&iacute;odo de
prosperidad en el seno del imperio romano.

<BLOCKQUOTE>

La ca&iacute;da del imperio abri&oacute; las puertas a la
penetraci&oacute;n de los pueblos b&aacute;rbaros del norte,
y as&iacute; los v&aacute;ndalos tomaron la ciudad entre
411-429.

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

</BODY>

</HTML>




Ttulos

La utilizacin masiva de texto contradice una de las reglas de diseo, la de organizar la informacin y
mostrarla de forma atractiva y legible.
HTML nos ofrece el mecanismo de los titulares, mediante seis etiquetas distintas, desde <H1> hasta
<H6>.
La presentacin de los encabezados van cambiando de tamao y espacios en funcin de su nivel, la
etiqueta <H1> la utilizaremos para el nivel mayor.

El tamao en el que visualizamos las cabeceras depende tanto de su nivel como del tipo de letra o
fuente empleada. No aparecer con el mismo tamao un texto con fuente tipo arial que otro con fuente
tipo courier aunque tengan el mismo nivel.

La alineacin de estos prrafos no se har con la etiqueta <P>, en este caso, por tratarse de un bloque
de texto, utilizaremos la etiqueta <DIV>.

<HTML>


<HEAD>


<TITLE> Pr&aacute;ctica de
cabeceras </TITLE>


</HEAD>


<BODY>


<DIV ALIGN=CENTER>

<H1>TITULAR DE NIVEL 1</H1>

<H2>TITULAR DE NIVEL 2</H2>

<H3>TITULAR DE NIVEL 3</H3>

<H4>TITULAR DE NIVEL 4</H4>

<H5>TITULAR DE NIVEL 5</H5>

<H6>TITULAR DE NIVEL 6</H6>

</DIV>

</BODY>

</HTML>









Dar formato a un
documento

Formato de texto


Todas estas etiquetas nos permiten cambiar de una manera u otra el aspecto del tipo de letra que
estemos utilizando.

<B>...</B>
Resalta el texto en negrita (del ingls bold). La etiqueta <STRONG> produce el mismo efecto.
<I>...</I>

Resalta el texto en cursiva (viene de italic). La etiqueta <EM> produce el mismo efecto en la
mayora de los navegadores.
<U>...</U>
Resalta el texto subrayando el mismo (del ingls underline).
<S>...</S>
Muestra el texto tachado.

<HTML>


<HEAD>


<TITLE> Pr&aacute;ctica de
formatos </TITLE>


</HEAD>


<BODY>


<P> Este texto aparece sin estilo, a
partir de aqu&iacute;, con la
etiqueta &ltB&gt, <B> escribimos en
negrita, con esta otra &ltC&gt, <I>
en cursiva y por &uacute;ltimo con
&ltU&gt <U> subrayado. <S>
Tambi&eacute;m podemos tacharlo,
</S> aunque no es muy legible.
</U></B></I>

</BODY>

</HTML>










Dar formato a un
documento

Etiquetas para cambiar el tamao y el tipo de letra


Para mostrar el texto del tamao que deseemos, dispondremos del parmetro SIZE de la etiqueta
<FONT>. La estructura quedara:<FONT SIZE=n>, siendo n un nmero entre 1 (el ms pequeo) y 7. El
valor por defecto es el 3.

Adems, disponemos de otras etiquetas para cambiar el tamao, como <SMALL> que disminuye el
tamao o <BIG> que lo incrementa.

Las etiquetas <SUP> y <SUB> son utilizadas para escribir ndices y subndices en frmulas
matemticas. As, para obtener m
2
, escribiramos:

m<SUP>2</SUP> y para obtener H
2
O: H<SUB>2</SUB>O.

Hemos aprendido hasta ahora a cambiar el texto en cuanto a estilo o tamao se refiere, HTML nos
permite adems, modificar el tipo de letra, es decir, la forma en que los caracteres van a ser mostrados
en pantalla.

La etiqueta <FONT> junto con el atributo FACE permiten especificar el tipo de letra que queremos
utilizar.

La subcarpeta Fonts de la carpeta Windows contiene todas las fuentes que tenemos instaladas en
nuestro PC.

<FONT FACE=Arial>,

Las etiquetas que se explican a continuacin corresponden a tipos de letras predefinidos.


<ADDRESS>...</ADDRESS> Esta etiqueta se utiliza para poner la direccin del autor en la pgina.


<CITE>...</CITE>
Se utiliza para insertar una cita bibliogrfica en nuestra pgina. La mayora de los navegadores la
muestran en cursiva.


<CODE>...</CODE>
Con esta etiqueta conseguimos que el texto tenga un tamao menor y la apariencia de los caracteres de
una mquina de escribir (typewriter). Por lo general las etiquetas <KBD>...</KBD> y <TT>...</TT> lo
muestran igual.


<PRE>...</PRE>
El texto que se encuentra entre ellas estar preformateado, es decir, que aparecer como si hubiera sido
escrito con una mquina de escribir, con una fuente de espaciado fijo (tipo Courier). Adems se
respetarn los espacios en blanco y retornos del carro, tal como lo hemos escrito en nuestro documento
HTML (esto no ocurre normalmente, como hemos visto en apartados anteriores). Es muy apropiada para
confeccionar tablas y otros documentos similares.

Adems <PRE> acepta el parmetro opcional WIDTH, para indicar el nmero de caracteres por lnea.


<PLAINTEXT>





Dar formato a un
documento
El texto introducido a continuacin de esta etiqueta se mostrar tal y como se escriba, respetando saltos
de lnea, acentos, caracteres especiales, etc.

Como no contiene etiqueta de cierre, debemos tener en cuenta que desde donde empecemos hasta el
final del documento, vamos a tener el mismo formato, incluso visualizaremos, todas las etiquetas de
cierres que determinan la finalizacin de un documento, como </BODY> y </HTML>.

<HTML>


<HEAD>


<TITLE> Formatos de
l&iacute;nea</TITLE>


</HEAD>


<BODY>


<PLAINTEXT> Este texto

lo vamos a visualizar

tal y como lo vemos en el
c&oacute;digo HTML

</BODY>

</HTML>
















Formato de lnea

<HR>
Permite aadir lneas a nuestras pginas. Esta etiqueta, al igual que otras estudiadas con anterioridad,
carece de etiqueta de cierre.

Su formato es <HR WIDTH=n ALIGN=alineacin SIZE=m>, siendo n el ancho de la lnea y m el grosor
de la misma.

WIDTH: especificamos la longitud de la lnea. Se puede indicar en pxeles o en tanto por ciento, en cuyo
caso tendremos que aadir el smbolo %.

<HR WIDTH=20%> muestra una lnea que ocupa el 20 por ciento del ancho de la pantalla y <HR
WIDTH=60> visualiza una lnea de 60 pxeles de ancho.

SIZE: permite especificar la altura (grosor) en puntos.
As, por ejemplo, <HR SIZE=9> muestra una lnea de 9 pxeles de alto.
Con ALIGN alineamos la lnea en la pgina, pudiendo tomar los valores LEFT, si est alineada a la
izquierda, RIGHT, para la derecha, o CENTER para el centro.

El parmetro NOSHADE permite obtener una lnea horizontal sin sombreado.


Nota: Ms adelante veremos una forma mejor para insertar lneas a partir de un punto que
ocupe 1x1 pxeles, de esta forma reduciremos el tiempo de descarga.


<HTML>


<HEAD>


<TITLE> Formatos de
l&iacute;nea</TITLE>


</HEAD>


<BODY>


<HR WIDTH=140 ALIGN=CENTER>

<HR WIDTH=30 ALIGN=CENTER>

<HR WIDTH=75 ALIGN=CENTER>

<HR WIDTH=50% ALIGN=CENTER>

<HR NOSHADE SIZE=3>

<HR NOSHADE SIZE=10>

</BODY>

</HTML>








Dar formato a un
documento

Pginas con colores


HTML permite cambiar el fondo de una pgina Web, aadindole un color o una imagen. En este
apartado, veremos cmo podemos cambiarle el fondo con un color.

Para ello, podemos agregarle el parmetro BGCOLOR a la etiqueta <BODY> de la siguiente forma:

<BODY BGCOLOR=#XXYYZZ>, donde XX, YY y ZZ sern la cantidad de color rojo, verde y azul
respectivamente.

Esta numeracin se caracteriza por tener 16 dgitos en lugar de los diez de la numeracin decimal
habitual. Estos dgitos van del 0 a la letra F, siendo el 0 el valor mnimo y F el mximo.

Por ejemplo, el color rojo es el #FF0000, porque tiene el mximo de rojo y cero de los otro dos colores.

A continuacin mostramos una tabla con los colores ms habituales:




Colores del texto
Si no se modificaran los colores habituales del texto podramos tener problemas de lectura al aplicar un
fondo de color oscuro, ya que para que una pgina sea totalmente legible, el color del texto debe
destacar con respecto al del fondo de la pgina.
Emplearemos los siguientes comandos: TEXT: color del texto. La etiqueta, con todas sus
posibilidades, tendra la siguiente estructura:
<BODY BGCOLOR=#XXYYZZ TEXT=#XXYYZZ>


Cambio del color de una parte del texto
El parmetro TEXT explicado anteriormente (que va englobado dentro de la etiqueta <BODY>) cambia el
color de la totalidad del texto de la pgina.

Si queremos cambiar slo una parte del texto, lo haramos con la siguiente etiqueta:

<FONT COLOR=#FF0000> Este texto es de color rojo </FONT>

<HTML>


<HEAD>


<TITLE> Pr&aacute;ctica de
colores </TITLE>


</HEAD>


<BODY
BGCOLOR="#FF0000"TEXT="FFFFFF">






Dar formato a un
documento

<P> Estamos trabajando con colores
</P>

<FONT COLOR="#0000FF"> Este texto
es de otro color </FONT>

<P> Este texto es del mismo color
que el del principio </P>

</BODY>

</HTML>



































Ejercicio de repaso


Llegados a este punto, sera conveniente crear una pgina donde aparezcan la mayora de las etiquetas
que hemos aprendido hasta ahora.

<HTML>


<HEAD>


<TITLE>Repaso</TITLE>


</HEAD>


<BODY BGCOLOR=
"#COCOCO"TEXT="#80800">


<DIV ALIGN=CENTER> <H1> Esquema de etiquetas
para dar formato al texto </H1> </DIV>

<HR ALIGN=CENTER SIZE=3>

<FONT SIZE=4> Formato de p&aacute;rrafo
</FONT>

<SMALL><BR>&LTP&GT

<BR>&LTBR&GT

<BR>&LTDIV&GT

<BR>&LTBLOCKQUOTE&GT</SMALL>

<BR><P>

<FONT SIZE=4>T&iacute;tulos</FONT>

<BR> Utilizaremos las etiquetas de
&ltH1&gt... &ltH6&gt

<BR><P>

<FONT SIZE=4> Formato de texto</FONT>

<BR> <CODE> <PRE> &LTP&GT, &LTI&GT, &LTU&GT,
&LTS&GT </PRE> </CODE>

<FONT SIZE=4> Tamao y tipo de letra </FONT>

<BR> <P> &LTFONT SIZE&GT Y &LTFONT FACE&GT

<BR><P>

<FONT SIZE=4>Colores</FONT>

<PRE> Utilizaremos los siguientes par&aacute;
metros de la etiqueta &LTBODY&GT. <BR> Para
dar color al texto, TEXT, y para el fondo,
BGCOLOR. </PRE>

<P><BR>

<P><BR>

<ADDRESS> <P ALIGN=RIGHT> Yolanda
Garc&iacute;a, C/ Inocentes N 1 </ADDRESS>

</BODY>

</HTML>





Dar formato a un
documento































Prctica: Tamaos y formatos

Prctica: Tamaos y formatos


En este ejercicio crearemos un documento HTML para iniciarnos con el tamao de la fuente.
Para profundizar un poco ms sobre lo que hemos visto en este tema, hemos utilizado
tambin un encabezado y un efecto de letra un poco peculiar. Procure que el ejercicio quede
lo ms parecido a la imagen que mostramos a continuacin. Guarde el ejercicio con el
nombre tamaos_y_formatos.html.








Abrir ejercicio usando
Adobe Acrobat Reader


Archivo necesario para
realizar la prctica




























Dar formato a un
documento
Prctica: Lneas

Prctica: Lneas


Crearemos una pgina para practicar con lneas horizontales.





Esta herramienta, junto con todas sus variedades, es muy til para dar un aspecto ms
profesional a nuestras pginas. Procure que el ejercicio quede lo ms parecido a la imagen
que mostramos a continuacin. Guarde el ejercicio con el nombre lineas.html.








Abrir ejercicio usando
Adobe Acrobat Reader


Archivo necesario para
realizar la prctica




























Dar formato a un
documento





Prctica: Colores

Prctica: Colores


Otro aspecto muy llamativo a la hora de disear una pgina, es el uso de colores.





Realice un documento HTML que muestre, lo ms parecido posible, la imagen que
visualizamos a continuacin. Guarde el ejercicio con el nombre colores.html.








Abrir ejercicio usando
Adobe Acrobat Reader


Archivo necesario para
realizar la prctica











Dar formato a un
documento


Prctica: Introduccin

Prctica: Introduccin


A lo largo del curso, realizaremos una pgina que contendr informacin turstica sobre
algunas provincias espaolas. Esta primera pgina es muy sencilla, trabajaremos con
alineaciones, sangrados de prrafos, formato de texto, colores, etc., ms adelante
incluiremos todo lo que vayamos aprendiendo a lo largo de este curso. Debido a su
extensin, sentimos no poder presentar la imagen final de este ejercicio.





Para evitar problemas posteriores, nos conviene guardar este archivo en una carpeta a la
que podemos llamar Turismolandia. Esta misma carpeta deber contener todos los
archivos necesarios para su correcto funcionamiento y visualizacin. Guarde el ejercicio con
el nombre introduccion.html.





Abrir ejercicio usando
Adobe Acrobat Reader


Archivo necesario para
realizar la prctica





































Dar formato a un
documento
4.12 Cuestionario: Dar formato a un documento


1.- La etiqueta <BR> la utilizaremos para

Eliminar la lnea en blanco que provoca la etiqueta <P>.

Tabular el prrafo.

Saltar de prrafo.

Justificar un prrafo.

2.- Las etiquetas necesarias para dar formato al texto son:

<B>, <I>, <U> y <S>.

<B>, <I>, <W> y <S>.

<B>, <H>, <v> y <S>.

3.- Si deseamos escribir la frmula del agua en HTML escribiremos:

H<SUB>2</SUP>O.

<AGUA>.

H<SUP>2</SUB>O.

H<SUB>2</SUB>O.

4.- La etiqueta <P> la utilizaremos:

Para definir un prrafo con una lnea en blanco antes y despus del
mismo.

Para pasar de un prrafo a otro.

Cuando queramos utilizar la tecla INTRO.

5.- Para alinear un prrafo, utilizaremos las siguientes etiquetas:

Los prrafos no suelen justificarse.

<JUSTIFY>, <LEFT>, <RIGHT> y <CENTRADO>.

<LEFT>, <RIGHT>, <CENTER> y <JUSTIFICADO>.

<JUSTIFY>, <LEFT>, <RIGHT> y <CENTER>.

6.- Elija la definicin correcta:

<FONT SIZE=n> cambia de tamao el texto que sigue a continuacin.

Las etiquetas <H1>, <H2>, <H3>, <H4>, <H5>, <H6> y <TITLE> crean
ttulos en el texto.

La etiqueta <DIV> divide el prrafo.

La etiqueta <BLOCKQUOTE> forma bloques de texto.

7.- En HTML, trabajaremos con los colores de la siguiente forma:

El parmetro TEXT lo utilizamos para la alineacin del texto.

El parmetro COLOR de la etiqueta FONT cambia de color un texto
concreto.

El parmetro BGCOLOR lo utilizamos para el color de la letra.