miércoles, 12 de octubre de 2011

Clase No. 2

ETIQUETAS PARA TEXTO

Las etiquetas de texto como su nombre lo indica, permiten cambiar los atributos y la manera como el texto se verá dentro de la página. Se puede afectar todo un párrafo, una línea, una palabra o caracteres individuales simplemente encerrándolos dentro de las etiquetas apropiadas. Algunos atributos del texto pueden ser controlados por diferentes etiquetas, obteniendo resultados similares.

RESALTAR LINEAS DE TEXTO
Esta etiqueta, conocida como etiqueta de encabezado (heading), es utilizada con frecuencia para escribir títulos y subtítulos, dado que permite mostrar texto en negrillas con seis tamaños diferentes, dependiendo del valor asignado al atributo X.
Para ver su funcionalidad, escriba las siguientes líneas en un nuevo archivo:

             
Una vez guardado el archivo, ábralo en el explorador y observe los resultados.
La etiqueta <HX> tiene otro atributo que permite controlar la alineación del texto.
Éste se puede alinear al centro (ALIGN=“CENTER”), a la derecha (ALIGN=“RIGHT”), a la izquierda, que es la alineación que toma por defecto cuando el atributo ALIGN es omitido, o justificado (ALIGN=“JUSTIFY”).
Por ejemplo,

       
Mostrará la palabra “Texto” alineada al centro de la página, mientras que

        
Alineará “texto” a la derecha y
        
 
Presentará “Texto” alineada a la izquierda. Lo mismo ocurrirá si se comete un error al escribir el valor del atributo ALIGN. Veamos un par de ejemplos:



En general, se puede afirmar que cuando la sintaxis de una etiqueta no es la correcta, el navegador no generará error o advertencia alguna al respecto, ni dejará de mostrar la página, simplemente los resultados no serán los esperados.

Video de la etiqueta H
ETIQUETA <FONT> </FONT>

Esta etiqueta permite controlar tres atributos del texto que se encuentra encerrado entre ellas: su tamaño (SIZE), su color (COLOR) y el tipo de fuente (FACE). Por ejemplo, la siguientes líneas escritas dentro del cuerpo de un nuevo archivo, mostrarán texto con cuatro tamaños de fuente diferentes:
   
La sintaxis completa de la etiqueta <FONT> es la siguiente:


Donde X corresponde como ya se vio, al tamaño de la fuente que admite valores positivos y negativos.
El atributo COLOR pude ser un valor hexadecimal o el nombre en inglés de un color especifico. Aunque en teoría se pueden mostrar millones de colores, existen 16 de ellos que componen la denominada “paleta Segura”. El uso de cualquiera de esos colores, garantiza que las páginas podrán ser vistas tal como fueron diseñadas, aun cuando se utilice para su visualización un monitor con la configuración más pobre. La tabla siguiente muestra los valores hexadecimales (códigos) y nombres de los 16 colores mencionados.

Finalmente, Nombre de la fuente es el atributo correspondiente a los nombres de las fuentes disponibles en el sistema, tales como: Arial, Helvética, Times New Román, Arial Black, Chalesworth, etc.
Como ejemplo, se propone escribir las siguientes líneas dentro del cuerpo de una nueva página:

Cuyo resultado será similar al de la siguiente gráfica:


Video de las etiquetas


ETIQUETA <PRE> </PRE>

HTML sólo reconoce y muestra un espacio en blanco entre palabras, aunque se hayan escrito dos o más. Tampoco reconocerá tabuladores o retornos de carro. Es decir, si dentro del cuerpo de un archivo HTML se escribe el siguiente texto:


Al abrir la página en el explorador se obtendrá:

Si se quiere que el texto se va en la página tal como fue escrito, éste debe encerrarse dentro de las etiquetas <PRE> y </PRE> (performated), que forzarán al explorador a mostrar todos los espacios, tabuladores y retornos de carro que encuentre.

ETIQUETA <BR> Y <P>
La etiqueta <BR> permite forzar un salto de línea dentro de un texto.
Observe que esta etiqueta no se cierra con </BR>, razón por la que se le conoce como etiqueta abierta. <P> es otra etiqueta que puede utilizarse abierta o cerrada. Si se usa de la primera forma, iniciará un nuevo párrafo dejando una línea en blanco, si por el contrario se cierra </P> permite alinear el nuevo párrafo a la derecha, en el centro, a la izquierda o justificado, dependiendo del valor asignado al parámetro ALIGN. A continuación se muestran algunos ejemplos:


Ejemplo
Resultado
Texto con <BR> salto de línea
Texto con salto de línea
En este ejemplo iniciaremos aquí <P> un nuevo párrafo
En este ejemplo iniciaremos aquí un nuevo párrafo
<P ALIGN=“RIGHT”> alineado a la derecha<P>
alineado a la derecha
<P ALIGN=“LEFT”> alineado a la izquierda<P>
alineado a la izquierda
<P ALIGN=“CENTER”> alineado aL centro<P>
alineado aL centro


ETIQUETA <HR>
Esta etiqueta “abierta”, dibuja una línea horizontal (Horizontal Rule), con alineación, tamaño y ancho variables. Se utiliza con frecuencia para separar secciones de contenido. Su sintaxis se ilustra en las siguientes líneas:

OTRAS ETIQUETAS PARA TEXTO
La siguiente tabla muestra otras etiquetas muy útiles a la hora de trabajar con texto y los efectos que se conseguirán:

Ejemplo
Efecto
Resultado
<CENTER>Texto</CENTER>
Texto centrado
Texto
<B>Texto</B>
Texto en negrilla
Texto
<I>Texto</I>
Texto en cursiva
Texto
<U>Texto</U>
Texto subrayado
Texto
Texto <SUP>Texto</SUP>
Texto en superíndices
TextoTexto
Texto <SUB>Texto</SUB>
Texto en subíndices
TextoTexto
<S>Texto</S>
Texto tachado
Texto


COMENTARIOS
En HTML, como en cualquier otro lenguaje existe una forma de escribir comentarios dentro del código. Todo lo escrito dentro de los signos
<!—y --> será ignorado por el navegador sin que se muestre cuando la página sea visualizado.

ACTIVIDAD
·         Diseña una página Web, para observar cada uno de los 6 estilos predefinidos, alineando el texto a la izquierda, centro, derecha, alternativamente, dejando una línea en blanco entre cada línea de texto. Guarda esta página como dos.html.
·         Diseña una página Web (recuerda toda la estructura), en la que pongas tus datos personales, nombres, edad, domicilio, profesión, pasatiempos. Resaltando cada uno de estos tópicos con un color y un estilo de letra diferente, guarda esta página como tres.html.
·          Diseña una página Web, en la que pongas un cuento, resaltando cada uno de los tópicos vistos, guarda este documento como cuatro.html.
·         Comprime estos tres archivos y los envías en uno solo.

No hay comentarios:

Publicar un comentario