HTML 02 Manipulacion de Texto

CAPÍTULO 2 MANIPULACIÓN DE TEXTO HTML

MANIPULACIÓN DE TEXTO

El principal componente de un documento Html es el texto. Como hemos visto en el ejemplo del capítulo anterior, cuando queremos un texto sin ninguna característica especial, lo escribimos directamente, pero si queremos ciertas características para dicho texto, entonces debemos emplear algunas etiquetas, las cuales se analizaran a continuación.

CABECERAS

A través de lo títulos, con sus diferentes niveles de importancia, podemos definir el esqueleto de la página, es decir, su estructura básica.

HTML permite seis niveles de cabeceras, con los nombres de elemento H1, H2,... H6. Se utiliza H1 para las cabeceras principales y para niveles de jerarquías inferiores se utiliza H2, H3,...

Los atributos que puede tener estas cabeceras son:

Atributo AlignEste atributo permite establecer la alineación deseada para el encabezado a presentar los valores posibles para este atributo son left (por default), right o center.

En los siguientes ejemplos de código HTML se muestran los seis tipos de cabeceras con el atributo ALIGN.

<H1 Align=Left> Cabecera de tipo 1 con alineación por default. </H1>

<H2 Align=right> Cabecera de tipo 2 con alineación a la derecha. </H2>

<H3 Align=center> Cabecera de tipo 3 con alineación en el centro. </H3>

<H4 Align=Left> Cabecera de tipo 4 con alineación por default. </H4>

<H5 Align=Right> Cabecera de tipo 5 con alineación a la derecha. </H5>

<H6 Align=Center> Cabecera de tipo 6 con alineación en el centro. </H6>

Si ejecutamos el código anterior, tendríamos el siguiente resultado.

CORPORATIVO CETEC - SICASA 14

PÁRRAFOS

El elemento base de un documento HTML es el párrafo. El navegador de Internet ajusta todo el texto de un párrafo de izquierda a derecha y de arriba abajo hasta cubrir toda el área de una ventana o región, por lo que el colocar saltos de líneas dentro de un párrafo es irrelevante cuando la pagina es desplegada. Si al colocar una línea de texto esta no cabe por completo en el área de despliegue, el navegador de Internet coloca todo el texto restante en la otra línea.

Etiqueta 

Cuando queremos definir un párrafo normal, no es necesario especificar ninguna etiqueta. Pero existen las etiquetas Y permiten definir párrafos completos dentro de nuestra página. Para forzar un final de línea es necesario utilizar cualquiera de los dos procesos siguientes:

 para marcar el comienzo de un párrafo o para marcar un retorno de carro.

Por ejemplo:



Este es un párrafo en un documento HTML.



Este es otro párrafo.

O bien

Este es un párrafo en un documento HTML.

 

Este es otro párrafo.

Si ejecutáramos este código en nuestro navegador veríamos la diferencia. Como lo muestra la figura siguiente:

Se puede omitir la etiqueta de final de párrafo (al igual que ocurrirá con otros), puesto que va implícito en la declaración de un nuevo párrafo.

La etiqueta también puede manejar el atributo ALING lo cual es una ventaja, por que nos facilita el formato de nuestro párrafo.

Etiqueta 

Si nosotros escribiéramos varios párrafos consecutivos, , y viéramos nuestra página web, nos daríamos cuenta que no se incluyen saltos adicionales de líneas. Para establecer la separación entre párrafos (dejando una línea en blanco) la conseguimos con la etiqueta .

Por ejemplo:

Si queremos separar los párrafos, pero sin dejar una línea en blanco, usamos una etiqueta parecida (break, o romper). Tampoco tiene etiqueta de cierre. Podemos colocar saltos de línea dentro de un mismo párrafo. Por ejemplo:

Este es un párrafo que contiene varias líneas

de texto que son acomodadas por el visor para

que se ajusten a la ventana de despliegue pero

hay otra línea que es creada dentro del párrafo.

 

Y es esta línea.

Si queremos obtener múltiples líneas en blanco no basta con repetir la etiqueta , sino que hay que combinarla con la etiqueta . Así por ejemplo, si queremos obtener cuatro líneas en blanco, tendríamos que escribir:

 

 

 

 

Al escribir el texto, si ponemos más de un espacio en blanco entre dos palabras observamos que el navegador sólo reconoce uno de ellos. Si queremos forzarle a que lo haga, debemos poner el código " " (non-breaking space).

Etiqueta <PRE>

Otra etiqueta interesante es <PRE> y </PRE>. El texto que se encuentre entre ella estará preformateado, es decir que aparecerá como si hubiera sido escrito con una máquina de escribir, con una fuente de espaciado fijo (tipo Courier). Además se respetarán los espacios en blanco, tabulaciones y retornos del carro, tal como estaban en nuestro documento HTML (lo cual no ocurre normalmente, como hemos visto anteriormente). Es muy apropiada para confeccionar tablas y otros documentos similares. Por ejemplo:

<PRE>

Este texto tiene tabulaciones y espacios

y se presenta de igual forma en el visor.

</PRE>

Es posible cambiar la alineación de un párrafo a centrado con el marcador <CENTER> o bien a la derecha con el marcador .

También es posible colocar líneas horizontales de división por medio del marcador <HR>.

La etiqueta <PRE> permite el atributo opcional WIDTH, el cual especifica el número máximo de caracteres a visualizarse en una línea. El valor por default es 80, pero depende del navegador utilizado. Se pueden utilizar los elementos de formato físico y lógico, así como también las anclas de hipertexto.

FORMATO LÓGICO Y FÍSICO

Es posible dar énfasis a ciertas partes de un documento mediante marcadores de formato. El formato puede ser lógico, donde el visor decide que característica aplicar a la sección que se quiere enfatizar. El formato físico establece esta característica.

Los principales marcadores de formato lógico son:

<CITE> Indica que el texto es una cita (por ejemplo de un título). Generalmente se representa en cursiva.

<CODE> Lo marcado es un ejemplo de código dentro del texto. Se representa usando un tipo de letra de caja fija.

 Denota énfasis. Generalmente con letra cursiva.

<KBD> Indica que el texto que se introduce desde el teclado. Se representa usando un tipo de letra de caja fija. Normalmente se utiliza en manuales de instrucciones.

<SAMP> Ejemplo. Es decir, una secuencia de caracteres literales. Se representa usando un tipo de letra de caja fija. Normalmente se utiliza en manuales de instrucciones

 Denotación general fuerte en negrita.

<VAR> Lugar de una variable, por ejemplo la que se le pasa a un programa. Se representa usando un tipo de letra de caja fija.

<DFN> Indica la definición de un termino.

<Q> Se utiliza para pequeñas citas. Normalmente se encierra entre comillas, apropiadas al lenguaje utilizado en el contexto. Definido por el atributo LANG.

<LANG> Corresponde a una abreviatura estándar ISO del idioma.

<AU> Indica el nombre de un autor.

<PERSON> Define los nombres de personas autorizadas a extraer automáticamente información con programas de búsqueda.

<ACRONYM> Se utiliza para marcar acrónimos.

<ABBREV> Se utiliza para marcar abreviaturas.

<INS> Se utiliza para marcar texto insertado, por ejemplo en textos legales.

<DEL> Se utiliza para marcar texto borrado, por ejemplo en textos legales.

Los marcadores de formato físico pueden anidarse unos en otros. Los navegadores normalmente permiten combinar diferentes tipos. Los principales marcadores de formato físico son los siguientes:

Indica que el texto encerrado debe presentarse en negrita (bold).

Este texto esta en negrita

 Para escribir texto en cursiva (italic). Este texto esta en cursiva.

<S> Indica que el texto encerrado debe presentarse con una línea horizontal sobre el texto.

 Indica que el texto encerrado debe presentarse subrayado.

Este texto esta subrayado

 Texto como superíndice. Texto normal texto superindice

 Texto como subíndice. Texto normal texto subindice

<TT> Indica que el texto encerrado debe presentarse en tipo de letra de maquina de escribir de paso fijo.

<BIG> Texto en tamaño más grande que el predeterminado.

 Texto en tamaño más pequeño que el predeterminado.

Por ejemplo:

 Este es un texto con una frase enfatizada por un formato lógico 



Y esta es otra con formato físico

Ambas se verán igual.

En las fórmulas matemáticas puede interesar poder escribir superíndices y subíndices, que se consiguen con las etiquetas y respectivamente.

m2 se consigue de la siguiente manera: m2 (superíndice)

yx se consigue con: yx (Subíndice)

Ejemplo de formatos físicos y lógicos con la etiqueta <PRE>

A continuación se muestra un fragmento de código HTML que ilustra a modo de ejemplo la etiqueta <PRE> y algunos de los elementos de formato lógico y físico.

<PRE WIDTH = 30>

The system for detecting borders now used

has been developed for Spanish language by adjusting

a series of parameters, calculated basically from two

measurements of the speech signal: the < A HREF = “zc.html”> rate of

zero-crossings </A> and the < A HREF = “eng.html”> energy </A>. </PRE>

Si ejecutamos el código anterior, el navegador nos visualizaría lo siguiente:

Etiqueta <blockquote>

Las etiquetas <BLOCKQUOTE> y </BLOCKQUOTE> se utilizan para destacar una cita textual dentro del texto general. Este párrafo está escrito entre ambas etiquetas. Los navegadores presentaran su contenido de forma apropiada; indentando el texto ligeramente y/o poniéndolo en cursiva. Esta etiqueta provoca además un comienzo de párrafo y fuera a un espacio vertical antes y después de la cita.

Esta etiqueta puede contener varios párrafos y la mayor parte de marcas estándar, excepto el elemento de cabecera Hn.

Ejemplo:

A continuación elaboramos un fragmento de código HTML que muestra un ejemplo de esta etiqueta.

The system for detection borders <BLOCKQUOTE>

now used has been developed

for Spanish language by adjusting a series

of parameters, calculated basically from

two measurements of the speech signal:

</BLOCKQUOTE> the rate of zero-crossings and the energy.

Este texto sería presentado en el navegador de la siguiente manera:

Para hacer citas textuales dentro de nuestra página, también se puede utilizar el elemento <BLOCKQUOTE>. Por ejemplo, si escribimos el siguiente código HTML.

<BLOCKQUOTE> Muchos años después, frente al pelotón de

fusilamiento, el coronel Aureliano Buendía había de

recordar aquella tarde remota en que se padre lo llevo

a reconocer el hielo. 

(Gabriel García Márquez, Cien años de soledad) </BLOCKQUOTE>

Este texto sería presentado en el navegador de la siguiente manera:

COLOR, TAMAÑO Y FUENTES EN TEXTOS

Hasta la aparición de navegadores como Netscape 2.0 o Microsoft Internet Explorer 3.0, la fuente y el color de los textos no se podía modificar, dependiendo de las negritas, cursivas y demás elementos para llamar la atención sobre los textos.

Con la aparición de estos navegadores, se comienza a utilizar las siguientes etiquetas:

Se puede definir todas estas características de la página dentro de la etiqueta <Body>, la cual permite establecer los siguientes atributos:

A. Text=“#R G B”. Define el color del texto de toda la página.

B. Link=“#RGB” Define el color del texto de los enlaces (antes de seleccionarlos) dentro de la página.

C. Vlink=“#RGB” Define el color del texto de los enlaces (después de seleccionarlos) dentro de la página.

D. Alink=“#RGB” Define el color del texto de los enlaces (durante la selección) dentro de la página.

E. Gbcolor=“#R G B” Define el color de fondo de la página.

Una vez definido el contexto general de la página se puede cambiar el aspecto de determinados bloques de texto con la siguiente etiqueta:

 Texto

Esta etiqueta permite definir atributos del texto como son, la fuente, el color y el tamaño.

Las propiedades que permite definir esta etiqueta son:

FACE = “Nombre de la fuente” Establece el nombre de la fuente a utilizar en ese texto, por ejemplo Arial, Courier, etc.

SIZE = 1...7 Establece el tamaño de la fuente, puede ser un número o un incremento (+) o un decremento (-) del tamaño de la fuente predefinida.

COLOR = “#RGB” Establece el color en RGB hexadecimal de la fuente, precedido por el símbolo #. Este color esta expresado por una tripleta RGB (Red, Green, Blue), cuyos valores están definidos por dos caracteres para cada color, y los valores para cada par puede estar entre 00 y FF, (En algunos navegadores se puede poner directamente el nombre del color).

Por ejemplo:

 Texto específico 

 Texto específico 

 Texto especifico 

ETIQUETA <CENTER>

Permite la alineación al centro de un texto, una imagen, etc. La etiqueta CENTER no introduce un espacio vertical, por lo que podemos utilizar esta etiqueta para centrar texto entre dos HR próximos, además podemos utilizarla para centrar tablas.

A continuación se muestra el código HTML con ejemplos de la etiqueta CENTER.

<CENTER> Aquí colocamos un texto centrado...

 Aquí hay otro párrafo centrado.

 Otro más.

<Table Borber> <TR><TD>Y aquí una tabla con una celda</TD></TR></TABLE>

<IMG SRC=”c:\logo_ctec.gif”>

</CENTER>

Si abrimos este archivo en el navegador de Internet, se mostrará de la siguiente manera:

ETIQUETA <ADDRESS>

La etiqueta <ADDRESS> se utiliza para presentar información de direcciones, firmas, etc. Se coloca normalmente al final o al principio del documento. La presentación del contenido de ADDRESS puede justificarse a la derecha o indentarse.

Por ejemplo: Si escribimos el siguiente código HTML en un archivo:

<ADDRESS> <A HREF=”address.html”>L.I. Sánchez</A></ADDRESS>

 <ADDRESS>

L.I. Sánchez 

Abasolo No. 40A Centro 

Tel: 017 318.80.33 ext 131

</ADDRESS>

Y luego lo ejecutamos en nuestro navegador de Internet, se visualizaría de la siguiente manera:

En el interior de una etiqueta ADDRESS no pueden colocarse elementos de bloque como , <BLOCKQUOTE>, <FORM>, etc. Sin embargo, puede contener texto, marcas de texto, elementos ancla o incluso imágenes.

Las direcciones de correo electrónico se suelen mostrar con esta etiqueta. Una costumbre en el diseño de Páginas Web consiste en incluir al final de la página un fragmento de código HTML similar al siguiente:

<CENTER>

<ADDRESS>e-mail: [email protected] </ADDRESS

 <A HREF=”mailto:[email protected]”>

<IMG SRC=”buzon.gif” ALT=”Sugerencias” BORDER=0></A>

<CENTER>

Con este código nos presentaría el siguiente resultado:

ETIQUETA <HR> Regla Horizontal.

Se utiliza para dibujar una línea horizontal que divide completamente la pantalla. Esto normalmente se hace para separar de forma lógica bloques de texto o para separar listas de iconos del cuerpo del texto.

La etiqueta <HR> no necesita etiqueta de cierre. Esta etiqueta permite establecer 4 atributos los cuales son:

A) SIZE=”n” Especifica el ancho vertical (altura) de la línea divisoria en píxeles, donde n es un entero.

B) WIDTH=”n” | “n%” Especifica el ancho horizontal de la línea divisoria en píxeles o en porcentaje del ancho de la ventana, donde n es un entero.

C) ALIGN=”left” | “right” | “center” Determina la alineación de la línea divisoria en la página. La alineación por default es Center.

D) NOSHADE Dibuja la línea divisoria como una línea negra. Por defecto es una barra sombreada.

A continuación se muestran algunos ejemplos de la etiqueta <HR> así como su ejecución en el navegador.

<HR size=4 width=80%>

<HR size=10 width=40>

<HR size=10 width=40 align=”left”>


mailto:[email protected]

mailto:[email protected]%20%3C/ADDRESS

<HR size=10 width=40 align=”left” noshade>

<HR size=5 width=20% align”right”>

También se pueden usar como separadores de bloque, un archivo de imagen en lugar de una barra de elemento HR. Para incluir una barra que este definida en el fichero “barra_f.gif” puede escribir la siguiente línea de código y el resultado que se visualizaría en el navegador.

<IMG SRC="barra_f.gif">

LISTAS

A menudo nos interesará presentar las cosas en forma de listas. Podemos escoger entre cinco tipos distintos:

1.Listas desordenadas (Unordered List - UL)

2.Listas ordenadas (Ordered List - OL)

3.Listas de definición. (Definition List - DL)

4.Listas de menus. (Menu - MENU)

5.Listas de Directorio. (Directory - DIR)

Listas desordenadas

Las listas desordenadas (unordered lists) sirven para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas por un número. Su estructura es la siguiente:

CÓDIGO: EJECUCIÓN:

<UL>

<LI> Un elemento

<LI> Otro elemento

<LI> Otro mas

<LI> Etc.

</UL>

Un elemento

Otro elemento

Otro más

Etc.

Es decir, toda la lista está dentro de la etiqueta <UL> y </UL>, y luego cada cosa va precedida de la etiqueta <LI> (list item); Esta etiqueta (LI) no necesita etiqueta de cierre. Si el elemento de la lista es mayor que el ancho del área de despliegue, el visor lo ajusta a la siguiente línea conservando la indentacion de la línea previa

Parámetro TYPELas etiqueta <UL> y <LI> tienen un parámetro :Type que determina el tipo de marca (viñeta) delante de cada elemento, su valor por default es circ, pero se puede cambiar a square.

Si se especifica dicho parámetro en la etiqueta <UL> todos los elementos de la lista tomaran dicho parámetro. Por ejemplo:


<UL type=square>

<LI> Un elemento

<LI> Otro elemento

<LI> Otro más

<LI> Etc.

</UL>

Un elemento

Otra elemento

Otro más

Etc.

Si el parámetro Type se especifica en una de las etiqueta <LI> solo los elementos de la lista tomarán dicho parámetro. Por ejemplo:


<UL>

<LI type=square > Un elemento

<LI type=square > Otro elemento

<LI> Otro más

<LI> Etc.

</UL>

Un elemento

Otra elemento

Otro más

Etc.

Listas anidadas.

Se puede anidar una lista dentro de otra. Por ejemplo:


<UL>

<LI> Mamíferos

<LI> Peces

<UL>

<LI> Sardina

<LI> Bacalao

</UL>

<LI> Aves

</UL>

Mamíferos

Peces

Sardina

Bacalao

Aves

Listas ordenadas

Las listas ordenadas (ordered lists) sirven para presentar cosas en un orden determinado. Su estructura es muy similar a la anterior. Las etiquetas necesarias para incluir una lista ordenada son <OL> y </OL>. La diferencia estriba en que en el resultado aparecerá automáticamente un número correlativo para cada cosa. Por ejemplo:


<OL>

<LI> Primer Elemento

<LI> Segundo Elemento

<LI> Tercer Elemento

<LI> Etc.

</OL>

1.Primer elemento

2.Segundo elemento

3.Tercer elemento

4.Etc.

Al igual que las listas desordenadas, también se pueden anidar las listas ordenadas.

La etiqueta <OL> tiene un atributo Type= que determina el tipo de marca delante de cada punto, su valor por default es 1, pero se puede cambiar por i, I, a, A.

La etiqueta <OL> tiene un atributo Start=x, siendo x siempre un número que indica el inicio de la numeración aun cuando la ordenación sea por letras.

Listas de definición

El tercer tipo lo forman las listas de definición; Una lista de definiciones, Como su nombre indica, son apropiadas para glosarios (o definiciones de términos).

Toda la lista debe ir enmarcada entre las etiquetas <DL> y </DL>. Y a diferencia de las dos que hemos visto, cada renglón de la lista tiene dos partes:

1) El nombre del elemento a definir, que se consigue con la etiqueta <DT> (definition term)

2) La definición de dicho elemento, que se consigue con la etiqueta <DD> (definition definition).


<DL>

<DT> Una elemento a definir

<DD> La definición de este elemento

<DT> Otro elemento a definir

<DD> La definición de esta otro elemento

</DL>

Un elemento a definir

La definición de este elemento

Otro elemento a definir

La definición de este otro elemento

Listas de menús

Los menús son listas de elementos o párrafos breves, sin viñetas, número, ni ninguna otra etiqueta. Las listas de menú encerradas entre etiquetas <MENU> y </MENU>, y cada elemento de la lista se indica con una etiqueta <LI>.

Son semejantes a simples listas de párrafos, salvo que en algunos navegadores se sangran o tienen un formato que se diferencia de los párrafos normales. Por ejemplo:


<MENU>

<LI> Ir a la izquierda

<LI> Ir a la derecha

<LI> Ir arriba

<LI> Ir abajo

</MENU>

Ir a la izquierda

Ir a la derecha

Ir arriba

Ir abajo

PRÁCTICA

1. En el editor de textos capturar lo siguiente:

<HTML>

<HEAD>

<TITLE> Mi página del Web - 2 </TITLE>

</HEAD>

<BODY>

<CENTER>

<H1> Mis aficiones </H1>

</CENTER>

<HR>

Sin un orden particular, mis aficiones son las siguientes:

<UL>

<LI> El cine

<LI> El deporte

<UL>

<LI> Natación

<LI> Baloncesto

</UL>

<LI> La música

</UL>

La música que mas me gusta es (en orden de preferencia): 

<OL>

<LI> El rock

<LI> El jazz

<LI> La música clásica

</OL>

</BODY>

</HTML>

2. Guardamos el archivo de texto con el nombre “Mipagina2.html”

3. Lo cargamos en el navegador.

Este seria el resultado.


PRÁCTICA A DESARROLLAR

1. En el archivo anterior, modifique los fonts de los textos y colores, Así como líneas de división dando realce a los detalles que considere mas importantes.


Cuestionario

Preguntas:

1. ¿Qué es para ti una cabecera?2. ¿Cuántas cabeceras permite Html?3. ¿Para que sirve el atributo Align dentro de una cabecera?4. Explica la función de la etiqueta .5. Explica la función de la etiqueta .6. Explica tres etiquetas que permitan establecer el formato lógico de un texto.7. Explica tres etiquetas que permitan establecer el formato físico de un texto.8. Escribe un ejemplo para establecer el color, tamaño y fuente de un texto.9. Explica la función de la etiqueta <CENTER>10. ¿Para que sirve la etiqueta <HR>?11. Escribe tres tipos de listas.12. ¿Para que sirve el parámetro TYPE dentro de las listas?13. Escribe un ejemplo de Listas.

Respuestas:______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

HTML 02 Manipulacion de Texto

Documents

Transcript of HTML 02 Manipulacion de Texto