FORMATO DEL TEXTO

Formatear un texto pasa por tareas tan evidentes como definir los prrafos, justificarlos, introducir vietas, numeraciones o bien poner en negrita, itlica...

Distribucin del texto

Ha llegado el momento de aprender a introducir un texto en una pgina web, pero antes es necesario comprender cmo ser interpretado este texto. Cuando un navegador lee el cdigo HT ! de una pgina " lo interpreta para mostrar la pgina, todos los espaciados m#ltiples, tabulados o saltos de l$nea %ue se &a"a incluido en los textos sern interpretados como un #nico espacio. 'sta caracter$stica suele sorprender al principio, pero es innegable %ue esta forma de actuar es necesaria " concuerda con el carcter descriptivo de HT !.

Prrafos
(n prrafo es un conjunto de frases sobre un mismo asunto. 'n HT ! para marcar un prrafo se usa la eti%ueta p, situndose la instruccin de inicio )p* al comien+o del prrafo " la instruccin de fin ),p* tras la #ltima frase. - es un elemento de blo%ue, al igual %ue lo son los encabe+ados, lo cual nos indica %ue el comien+o de uno de estos, es tambi.n, el de un blo%ue de documento. 'sto supone %ue dentro de un elemento , no podemos incluir un encabe+ado, ni otro elemento -/ de la misma forma, %ue dentro de un encabe+ado, no se puede incluir un elemento , ni otro encabe+ado. !a eti%ueta )p* introduce un salto " deja una l$nea en blanco antes de continuar con el resto del documento. 0entro de un prrafo se pueden insertar tantos saltos de l$nea como se deseen as$ como muc&os otros elementos HT !. -odemos tambi.n usar la eti%ueta )br*, para reali+ar un simple retorno de carro con lo %ue no dejamos una l$nea en blanco sino %ue solo cambiamos de l$nea. Capitulo 1 2 Formato texto 3esumen HT ! 4

!os atributos %ue admite el elemento - son los siguientes 5 lang, dir, id, dir, class, title, align. 3ecordamos %ue un atributo no es ms %ue un parmetro incluido en el interior de la eti%ueta %ue a"uda a definir el funcionamiento de la eti%ueta de una forma ms personal.

Alineacin del texto

!os prrafos delimitados por eti%uetas )p* pueden ser fcilmente justificados a la i+%uierda, centro o derec&a especificando dic&a justificacin en el interior de la eti%ueta por medio del atributo align. -or ejemplo 5 )- align67justif"7 * 'l texto %ue compone el p8aacute/rrafo ),-*

Cdigo fuente ejemplo prrafos

Capitulo 1 2 Formato texto

3esumen HT

! 9

Navegador Firefox - Resultado ejemplo prrafos

Divisin de palabras
'l texto de un prrafo se distribu"e por la ventana del navegador, dividi.ndose en ms o menos l$neas, seg#n el anc&o de la ventana. (no de los casos %ue vamos a contemplar en este punto, es el de las palabras mu" largas dentro de un blo%ue de texto, %ue debe ser dividido en varias l$neas. -ara %ue la palabra pueda ser dividida mediante un guin, en el caso %ue dic&a palabra, %uede al final de la l$nea, debemos de incluir la entidad guin suave :8s&"/;, en el lugar lugares %ue deseemos %ue se divida la palabra en caso de ser necesario. -or ejemplo para dividir la palabra aproximadamente, escribir$amos la siguiente expresin5 apro8s&"/ximada8s&"/mente.

Capitulo 1 2 Formato texto

3esumen HT

! 1

Cdigo fuente ejemplo divisin de palabras

'l navegador de !inux <on%ueror " el navegador de icrosoft =nternet 'xplorer, reconocen el guin suave. >in embargo >afari de ac, d problemas ? o++illa Firefox lo ignora.

Navegador Firefox - Resultado ejemplo divisin de palabras

Capitulo 1 2 Formato texto

3esumen HT

! @

Navegador Konqueror - Resultado ejemplo divisin de palabras

Navegador Internet Explorer - Resultado ejemplo divisin de palabras

Capitulo 1 2 Formato texto

3esumen HT

! A

'l otro caso, %ue comentamos en este punto, &ace referencia a la no separacin de dos o ms palabras, en distintas l$neas. >i deseamos conservar dos palabras juntas en la misma l$nea, sustituiremos el espacio en blanco %ue las separa, por la entidad 8nbsp/ para %ue dic&o espacio no sea roto :nonBbreaCingBspace;. -or ejemplo, si deseamos conservar en la misma l$nea las palabras =nternet 'xplorer o+illa Firefox, deberemos de escribir lo siguiente5 =nternet8nbsp/'xplorer, o++illa8nbsp/Firefox.

Cdigo fuente ejemplo palabras ontinuas

Capitulo 1 2 Formato texto

3esumen HT

! D

Navegador Firefox - Resultado ejemplo palabras ontinuas

Lneas horizontales para separar prrafos

>i lo %ue se necesita es separar dos secciones diferentes de una pgina, "a sea texto o no, puede emplearse una nueva eti%ueta5 )H3*. >u nombre proviene del ingl.s Hori+ontal 3ule :l$nea &ori+ontal;. 'sta eti%ueta est formada por una #nica instruccin " provoca %ue el navegador inserte una l$nea &ori+ontal %ue separaba los dos prrafos %ue se estaban comparando. !os atributos %ue admite el elemento )H3* son los siguientes 5 lang, dir, id, dir, class, title, align, nos&ade, si+e, widt&. 'xisten cuatro atributos %ue permiten modificar su apariencia. 'stos son5 E align5 -ermite cambiar la alineacin de la l$nea. -uede tomar tres valores5FleftF, FcenterF " Frig&tF para conseguir alineacin a la i+%uierda, centro " derec&a respectivamente. Capitulo 1 2 Formato texto 3esumen HT ! G

E nos&ade5 %ue en ingl.s significa sin sombra, existe por%ue algunos navegadores muestran las l$neas &ori+ontales con un efecto tridimensional con sombra. Hl incluir este atributo se elimina este efecto de manera %ue el navegador slo mostrar una l$nea &ori+ontal negra. E si+e5 Con este atributo se puede controlar el grosor de la l$nea. Como valor de este atributo se debe especificar el valor deseado en p$xeles :puntos de pantalla;. E widt&5 'ste atributo permite especificar el anc&o de la l$nea. 'l valor puede ser dado de una manera absoluta, especificando el anc&o en p$xeles :por ejemplo widt&64II; o de manera relativa respecto al anc&o de la ventana del navegador usando porcentajes :por ejemplo widt&6FAIJF;. 's ms %ue recomendable usar este #ltimo sistema de manera %ue obtengamos un resultado apropiado independientemente del tamao %ue cada usuario %uiera dar a la ventana de su navegador. 'stos atributos pueden ser usados conjuntamente para combinar sus efectos.

Cdigo fuente ejemplo l!neas de divisin

Capitulo 1 2 Formato texto

3esumen HT

! K

Navegador Firefox - Resultado ejemplo l!neas de divisin

Elementos de estilo de fuente

Cuando necesitamos destacar alguna parte del texto, disponemos de los siguientes elementos5 TT5 =5 L5 L=M5 > H!!5 3epresenta como texto de teletipo o anc&o fijo. 3epresenta como estilo de texto itlica o cursiva. 3epresenta como estilo de texto negrita. 3epresenta el texto con una fuente FgrandeF. 3epresenta el texto con una fuente Fpe%ueaF. 3epresentan texto de estilo tac&ado.

>T3=<' " >5

(5 3epresenta texto subra"ado. 3esumen HT ! N

Capitulo 1 2 Formato texto

Todos estos elementos son de tipo en l$nea, lo %ue significa %ue no provocarn la ruptura del flujo de texto en el rea insertada. 's decir, se permite usarlos en el interior de un prrafo, de manera indistinta a los atributos %ue .ste contenga. !os atributos %ue admite estos elementos son los siguientes5 lang, dir, id, dir, class, title. !os elementos >T3=<', > " ( pertenecen a la definicin de tipo de transicin, pero estn desaconsejados en la definicin de tipo estricta. -or ejemplo, para poner en negrita el texto OCurso de escribir$amos lo siguiente5 )b* Curso de HT ! ),b* HT ! 7,

Cdigo fuente ejemplo estilos de letra

Capitulo 1 2 Formato texto

3esumen HT

! 4I

Navegador Firefox - Resultado ejemplo estilos de letra

!os elementos L=M " > H!!, act#an de forma relativa al contexto en el %ue estn insertados, &aciendo %ue el texto sea ms grande o ms pe%ueo, %ue el resto del elemento. !a inclusin de un elemento L=M dentro de otro elemento L=M, tendr como consecuencia, %ue el contenido del segundo L=M sea ma"or %ue el del primero, " as$, sucesivamente. !o mismo sucede con el elemento > H!!, pero en sentido contrario. >e pueden combinar estilos distintos para conseguir un determinado efecto. -or ejemplo, para poner en negrita " cursiva el texto OCurso de HT ! 7, escribir$amos lo siguiente5 )b* )i*Curso de HT !),i* ),b* o )i* )b*Curso de HT !),b* ),i*

Capitulo 1 2 Formato texto

3esumen HT

! 44

Cdigo fuente ejemplo estilos de letra ombinados

Navegador Firefox - Resultado ejemplo estilos de letra ombinados

Capitulo 1 2 Formato texto

3esumen HT

! 49

Listas
Punto con los prrafos " los encabe+ados, las listas son uno de los elementos HT ! ms com#nmente usados en las pginas Qeb. !as listas son utili+adas para citar, numerar " definir objetos. -odemos distinguir tres tipos de listas5 !istas desordenadas !istas ordenadas !istas de definicin

!a forma de crear listas difiere ligeramente de los elementos HT ! vistos &asta a&ora, "a %ue consta de dos pasos. -rimero &a" %ue definir el tipo de lista " despu.s deben insertarse cada uno de los elementos de lista. Hl crear una lista deberemos indicar su inicio " su fin. -ara empe+ar la lista usaremos la instruccin de inicio de la eti%ueta de esa lista. 'xiste una eti%ueta para cada tipo distinto de lista, por ejemplo, para crear una lista no ordenada ser necesario usar la eti%ueta (! :su instruccin de inicio ser )(!*;. (na ve+ &emos abierto la lista deberemos insertar, como &emos dic&o antes, cada uno de los elementos de lista. -ara ello usaremos una nueva eti%ueta :o dos en alg#n caso; %ue depender del tipo de lista. 'n el caso de la lista no ordenada los elementos se introducen con la eti%ueta de una #nica instruccin !=, por ejemplo5 )!=* Texto ),!=* 'l #ltimo paso, ser cerrar la lista, para lo cual usaremos la instruccin de fin de (!5 ),(!*. !a eti%ueta (! no tiene ning#n significado por s$ sola, necesita a !=. ? por otro lado != no puede ser usado como una eti%ueta independiente sino %ue debe ir dentro de (!. -or esta ra+n en ocasiones se suele llamar a != subeti%ueta.

Capitulo 1 2 Formato texto

3esumen HT

! 41

Listas no ordenadas
-robablemente el tipo de listas ms usadas en las pginas Qeb son las listas no ordenadas. Rste tipo de lista %ueda delimitada por la eti%ueta )(!*...),(!* :(! proviene de (nordered !ist, %ue significa lista no ordenada;. 0entro de estas eti%uetas insertaremos cada elemento con la eti%ueta )!=*. !os atributos %ue admite los elementos )(!* " )!=* son los gen.ricos5 lang, dir, id, dir, class, title. Hdems el elemento )(!*, tiene el atributo t"pe. 'ste atributo especifica el estilo de un objeto de lista :Lolo, Sieta;. -odemos definir el tipo de vieta empleada para cada elemento. -ara ello debemos especificarlo por medio de .ste atributo, incluido dentro de la eti%ueta de apertura )(!*, si %ueremos %ue el estilo sea vlido para toda la lista, o dentro le la eti%ueta )!=* si %ueremos &acerlo espec$fico de un solo elemento. !a sintaxis es del siguiente tipo5

)(! t"pe6Ftipo de vietaF*

0onde tipo de vieta puede ser uno de los siguientes5 circle disc s%uare (n c$rculo (n punto negro (n cuadro negro

Capitulo 1 2 Formato texto

3esumen HT

! 4@

Cdigo fuente ejemplo listas no ordenadas

Navegador Firefox - Resultado ejemplo listas no ordenadas

Capitulo 1 2 Formato texto

3esumen HT

! 4A

Listas numeradas u ordenadas

'ste tipo de listas numera los elementos de lista en el orden en el %ue se &an introducido en el cdigo HT !. !a numeracin, por defecto, se reali+a con n#meros empe+ando por el 4. 'ste tipo de listas %ueda delimitado por la eti%ueta )T!*...),T!* :T!5 Trdered !ist, !ista ordenada;, " cada elemento se inserta, al igual %ue en el caso de listas no ordenadas, con la eti%ueta )!=*. 'l navegador automticamente numera los elementos de lista. >i en alg#n momento %ueremos insertar un nuevo elemento entre los existentes usando, de nuevo, )!=*, se reali+a automticamente una renumeracin de los elementos de la lista. !os atributos %ue admite los elementos )T!* son los gen.ricos5 lang, dir, id, dir, class, title. Hdems el elemento )T!*, tiene el atributo star " t"pe. 'l atributo t"pe especifica el estilo de numeracin para los elementos. -ara ello debemos especificarlo por medio de .ste atributo, incluido dentro de la eti%ueta de apertura )T!*, si %ueremos %ue el estilo sea vlido para toda la lista, o dentro le la eti%ueta )!=* si %ueremos &acerlo espec$fico de un solo elemento. !a sintaxis es del siguiente tipo5 )T! t"pe6Ftipo de numeracinF* 0onde tipo de numeracin puede ser uno de los siguientes5 4 a H i = Uumeracin por defecto !etras min#sculas en orden alfab.tico !etras ma"#sculas en orden alfab.tico U#meros romanos en letras min#sculas U#meros romanos en letras ma"#sculas

=ndistintamente del tipo de numeracin %ue elijamos, el valor de inicio, ser el primero de los s$mbolos del conjunto elegido. 'l atributo start permite cambiar el comien+o de la numeracin de los elementos. 'n caso de %ue lo utilicemos, usaremos la siguiente sintaxis 5 )T! start6Fn#meroF* Capitulo 1 2 Formato texto 3esumen HT ! 4D

'l valor indicado al atributo star debe ser un n#mero, no un valor, es decir, en caso de &aber elegido el tipo de numeracin letra ma"#scula, si deseamos %ue empiece por el tercer carcter, no escribiremos la letra OC7 sino el valor 1. )T! t"pe6FHF start6F1F* 'l elemento )!=* adems del adicional atributo t"pe, el cul cambia su valor seg#n estemos &ablando de listas ordenadas o de listas no ordenadas/ dispone de un nuevo atributo, %ue slo tiene valide+, cuando &ablamos de dic&o elemento dentro de una lista ordenada. 's el siguiente5 value. >u finalidad es establecer un nuevo $ndice de orden. )!= value6Fn#meroF*

Cdigo fuente ejemplo listas ordenadas

Capitulo 1 2 Formato texto

3esumen HT

! 4G

Navegador Firefox - Resultado ejemplo listas ordenadas

Capitulo 1 2 Formato texto

3esumen HT

! 4K

Listas anidadas
Consiste en poner una lista dentro de otra, de manera %ue la lista secundaria tabule respecto a la principal. -uede jugar con los diferentes tipos de lista pero recuerde estructurar bien las eti%uetas5 !as eti%uetas de la lista principal englobarn todo el conjunto de las listas " las eti%uetas de las listas secundar$as se cerraran antes de volver a la lista principal. H&ora %ui+ nos empiece a convenir tabular el propio cdigo conforme lo vamos escribiendo en HT !.

Navegador Firefox - Resultado ejemplo listas anidadas

Capitulo 1 2 Formato texto

3esumen HT

! 4N

Listas de definiciones
'ste tipo de listas es usado, como su nombre indica, para crear glosarios, es decir listas de definiciones o de descripciones. 'l principio " final de este tipo de listas se delimitan con la eti%ueta )0!*...),0! * :0!5 0efinition !ist, !ista de definicin;. !a insercin de elemento es ligeramente distinta a la del resto de listas "a %ue no se usa la eti%ueta )!=*. 'sto es as$ por%ue en este caso cada uno de los elementos de lista est compuesta de dos partes5 E !a palabra %ue %ueremos definir5 para insertar la palabra usaremos la eti%ueta )0T* %ue proviene de 0efinition Term :T.rmino de definicin;. 'sta nueva eti%ueta funciona de forma mu" similar a )!=* " la instruccin de fin ser ),0T*. E !a definicin o descripcin de esa palabra5 una ve+ indicada la palabra es &ora de poner su definicin. -ara ello usamos otra nueva eti%ueta5 )00* cu"as siglas significan 0efinition 0escription :parte de la definicin %ue contiene la descripcin;. !a definicin suele ser un prrafo " ser mostrado por los navegadores tabulado con respecto al texto anterior. !os atributos %ue admite los elementos )0!*, )0T*, )00* son los gen.ricos5 lang, dir, id, dir, class, title.

Cdigo fuente ejemplo listas de defini in

Capitulo 1 2 Formato texto

3esumen HT

! 9I

Navegador Firefox - Resultado ejemplo listas de defini in

Texto preformateado

'n ocasiones es interesante mantener los espacios o saltos de l$nea de un prrafo tal " como estn en el cdigo HT !. -ara conseguir esto &a" %ue alterar el comportamiento &abitual del navegador %ue, como sabemos, ignora este formato.

>i no usamos la eti%ueta de texto preformateado la figura construida con caracteres se convertir en algo ilegible. Hun%ue este es un ejemplo entre muc&os, el objetivo era resaltar %ue en ocasiones esa caracter$stica de HT ! de eliminar todo formato manual en el texto es verdaderamente incmoda. -ero todo problema tiene solucin, " en este caso la solucin es una nueva eti%ueta5 <PRE>...</PRE> . 'l nombre asignado a esta eti%ueta proviene de la palabra F-3'formateadoF :o PREformatted en ingl.s; " su funcin es mantener todo formateado manual %ue sea &ec&o en el texto escrito entre la instruccin de inicio :)-3'*; " la instruccin de fin :),-3'*;.

Capitulo 1 2 Formato texto

3esumen HT

! 94

H continuacin vamos a probar el siguiente codigo, copiandolo en el ejemplo &tmlI4D.&tml 5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML lang="es"> <HEAD> <TITLE>Preformato</TITLE> </HEAD> <BODY> <H1>Preformato</H1> <BR> <PRE> ( @ @ ) ---------oOOo-(_)-oOOo--------| | | Usuario web16 | | E-mail: web16@ciden.es | | | -----------------Oooo.--------.oooO ( ) ( ) ) / \ ( (_/ \_) </PRE> </BODY> </HTML>

!os atributos %ue admite el elemento )-3'* son los gen.ricos5 lang, dir, id, dir, class, title. Hdems contempla el atributo widt&, con la siguiente sintaxis5 widt& 67n#mero7 'ste atributo proporciona a los agentes de usuario informacin sobre la anc&ura deseada del blo%ue formateado. 'l agente de usuario puede usar esta informacin para seleccionar un tamao de fuente apropiado o para dar un margen apropiado al contenido. !a anc&ura deseada se expresa como un n#mero de caracteres. 'sto atributo no est ampliamente soportado en la actualidad.

Capitulo 1 2 Formato texto

3esumen HT

! 99

Navegador Firefox - Resultado ejemplo preformato

Capitulo 1 2 Formato texto

3esumen HT

! 91