Tema 4

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

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 no es obligatoria.

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

 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áctica sobre alineaciones. </TITLE>

</HEAD>

<BODY>

Este texto está centrado, como la
mayoría de los títulos.

Este texto es un ejemplo de
alineación a la derecha.

Este texto está justificado a
ambos márgenes, para darnos cuenta, el texto debe
ser lo suficientemente grande para que llegue al margen
derecho.

Como vemos, si no indicamos nada, lo justificamos a la
izquierda.

</BODY>

</HTML>

 
Hemos visto que la etiqueta 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 con , debido a
que carece de etiqueta de cierre. Por ejemplo, si queremos obtener cuatro lneas en blanco,
pondramos:

 

 

 

 

<HTML>

<HEAD>

<TITLE> La etiqueta BR </TITLE>

</HEAD>

<BODY>

 Elemento UNO del listado

 Elemento DOS del listado

 Elemento TRES del listado

 Elemento CUATRO del listado

 Mostramos un espacio en blanco combinando las etiquetas
&ltP&gt y &ltBR&gt

 

 

 

Esto es

 un retorno de lí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 , 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>

Primer párrafo

Segundo párrafo 

Tercer párrafo 

</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ígenes de Sevilla son inciertos, aunque lo
más probable es que su fundación corresponda a
los turdetanos.

<BLOCKQUOTE>

Reconvertida en Iulia Romulea (o Romula), Sevilla
disfrutó de un prolongado período de
prosperidad en el seno del imperio romano.

<BLOCKQUOTE>

La caída del imperio abrió las puertas a la
penetración de los pueblos bárbaros del norte,
y así los vá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 , en este caso, por tratarse de un bloque
de texto, utilizaremos la etiqueta <DIV>.

<HTML>

<HEAD>

<TITLE> Práctica de
cabeceras </TITLE>

</HEAD>

<BODY>

<DIV ALIGN=CENTER>

<H1>TITULAR DE NIVEL 1</H1>






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

...
Resalta el texto en negrita (del ingls bold). La etiqueta produce el mismo efecto.
...

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

<HTML>

<HEAD>

formatos </TITLE>

</HEAD>

<BODY>

 Este texto aparece sin estilo, a
partir de aquí, con la
etiqueta &ltB&gt, escribimos en
negrita, con esta otra &ltC&gt, 
en cursiva y por último con
&ltU&gt subrayado. <S>
Tambiém podemos tacharlo,
</S> aunque no es muy legible.


</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
. La estructura quedara:, 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 que disminuye el
tamao o <BIG> que lo incrementa.

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

m2 y para obtener H
2
O: H2O.

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

,

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ínea</TITLE>

</HEAD>

<BODY>

<PLAINTEXT> Este texto

lo vamos a visualizar

tal y como lo vemos en el
có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ínea</TITLE>

</HEAD>

<BODY>

<HR WIDTH=140 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:

 Este texto es de color rojo 

<HTML>

<HEAD>

colores </TITLE>

</HEAD>

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

Dar formato a un
documento

 Estamos trabajando con colores


 Este texto
es de otro color 

 Este texto es del mismo color
que el del principio 

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

 Formato de párrafo


 &LTP&GT

 &LTBR&GT

 &LTDIV&GT

 &LTBLOCKQUOTE&GT

 

Títulos

 Utilizaremos las etiquetas de
&ltH1&gt... &ltH6&gt

 

 Formato de texto

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

 Tamao y tipo de letra 

 &LTFONT SIZE&GT Y &LTFONT FACE&GT

 

Colores

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

 

 

<ADDRESS> Yolanda
García, C/ Inocentes N 1 </ADDRESS>

</BODY>

</HTML>

Dar formato a un
documento



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.


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.


realizar la prctica

Dar formato a un
documento



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.


realizar la prctica

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

1.- La etiqueta la utilizaremos para

Eliminar la lnea en blanco que provoca la etiqueta .

Tabular el prrafo.

Saltar de prrafo.

Justificar un prrafo.

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

, , y <S>.

, , <W> y <S>.

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

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

H2O.

<AGUA>.

H2O.

H2O.

4.- La etiqueta 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:

 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.

Tema 4

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Tema 4

Загружено:

Авторское право:

Доступные форматы

Dar formato a un documento

Вам также может понравиться