Herramientas Basicas
darked174517 de Marzo de 2014
3.374 Palabras (14 Páginas)238 Visitas
zzElementos básicos
• Cabeceras Una forma rápida de dar efectos al texto es utilizar las etiquetas de cabecera (HeadingTags).
<Hx> </Hx>
Donde x puede cambiar entre los valores del 1 al 6 siendo estos el tamaño del más grande al más chico.
<html>
<head>
</title> Esther García Morales </title>
</head>
<body>
<H1> Ejemplo 1 </H1>
<H2> Ejemplo 2 </H2>
<H3> Ejemplo 3 </H3>
<H4> Ejemplo 4 </H4>
<H5> Ejemplo 5 </H5>
<H6> Ejemplo 6 </H6>
</body>
</html>
• Etiqueta <font>
Permite variar el tamaño, el color y el tipo de letra del texto
Los atributos a utilizar son:
size
<fontsize=x> texto < /font>
Donde x es un número del 1 al 7, yendo del más pequeño al más grande respectivamente.
O también se puede utilizar del -2 al +4.
Estos tienen la correspondencia, 1 = -2. El valor por defecto es 3.
<html>
<head>
</title> Esther García Morales </title>
</head>
<body>
<font size=1> Tamaño 1 </font>
<font size=2> Tamaño 2 </font>
<font size=3> Tamaño 3 </font>
<font size=4> Tamaño 4 </font>
<font size=5> Tamaño 5 </font>
<font size=6> Tamaño 6 </font>
</body>
</html>
<html>
<head>
</title> Esther García Morales </title>
</head>
<body>
<font size=-2> Tamaño -2 </font>
<font size=-1> Tamaño -1 </font>
<font size=+0> Tamaño +0 </font>
<font size=+1> Tamaño +1 </font>
<font size=+2> Tamaño +2 </font>
<font size=+3> Tamaño +3 </font>
<font size=+4> Tamaño +4 </font>
</body>
</html>
• Etiqueta <font>…
Face
<fontface=“font”> texto < /font>
Donde Font es el tipo de fuente seleccionada.
<fontface=Tahoma> texto < /font>
<html>
<head>
</title> Esther García Morales </title>
</head>
<body>
<font face=Tahoma> Tipo de fuente Tahoma </font>
<font face=Times New Roman> Tipo de fuente Times New Roman </font>
</body>
</html>
Etiqueta <font>…
color
<fontcolor=“color”> texto < /font>
Donde color es el color deseado.
<fontcolor=Red> color rojo < /font>
<html>
<head>
</title> Esther García Morales </title>
</head>
<body>
<font color=Red> Color de fuente Rojo </font>
<font color=Blue> Color de fuente Azul </font>
<font color=Green> Color de fuente Verde </font>
<font color=Yellow> Color de fuente Amarillo </font>
</body>
</html>
Formato a texto
Todas estas etiquetas nos permiten cambiar de una manera u otra el aspecto del tipo de letra que estemos utilizando y se pueden utilizar con tiras de caracteres dentro de un párrafo.
Etiqueta Utilidad Resultado
<B>... </B> Pone el texto en negrita. Soy un texto negro como el tizón
<I>... </I> Representa el texto en cursiva. Estoy ladeado
<U>... </U> Para subrayar. Soy importante, estoy subrayado
<S>... </S> Para tachar. A mí, en cambio, nadie me quiere
<TT>... </TT> Permite representar el texto en un tipo de letra de paso fijo. No soy variable
<SUP>... </SUP> Letra superíndice. E=mc2
<SUB>... </SUB> Letra subíndice. ai,j=bi,j+1
<BIG>... </BIG> Incrementa el tamaño del tipo de letra. Soy GRANDE
<SMALL>... </SMALL> Disminuye el tamaño del tipo de letra. Creí ver un lindo gatito
<BLINK>... </BLINK> Hace parpadear el texto. Resulta molesto. ¿Molesto?
<html>
<head>
</title> Esther García Morales </title>
</head>
<body>
<b> Texto en negrita </b>
<i> Texto en cursiva </i>
<u> Texto subrayado </u>
<s> Texto tachado </s>
<s> Texto tachado </s>
<blink> Texto parpadeando </blink>
<sup> Texto superindice </sup>
<sub> Texto parpadeando </sub>
</body>
</html>
• Marquesina
BEHAVIOR: Este atributo nos permite cambiar el comportamiento del texto y puede tomar tres valores.
BEHAVIOR="scroll" es el valor por defecto y consiste en el efecto de desaparecer por un lado y aparecer por el otro.
Si usamos BEHAVIOR="slide" el texto tiene un comportamiento similar pero para en cuanto llega al borde derecho.
La última opciones BEHAVIOR="alternate", en este caso el texto aparecerá igualmente por la derecha, pero una vez llegue al borde izquierdo rebotará y volverá hacia la derecha donde volverá a rebotar repitiendo este comportamiento indefinidamente.
DIRECTION: Con este atributo podemos controlar la dirección de desplazamiento del texto cuando este es de tipo SCROLL. Puede tomar dos valores: LEFT (izquierda) y RIGHT (derecha) siendo el primero el valor por defecto (movimiento de derecha a izquierda).
LOOP: Determina cuantas veces se repetirá el desplazamiento del texto por la pantalla. Por ejemplo con SCROLL="4" el texto se desplazará por la pantalla únicamente 4 veces, mientras que si usamos SCROLL="-1 “o bien SCROLL="infinity" seguirá desplazando se indefinidamente.
SCROLLAMOUNT: Aunque haya sensación de movimiento el texto se desplaza a pequeños saltos. Este atributo determina el número de pixeles que debe desplazarse el texto en cada uno de ellos. Junto con el siguiente atributo podemos controlar la velocidad del movimiento. Si ponemos un valor alto el texto se moverá más rápidamente pero con saltos más bruscos.
SCROLLDELAY: Determina el tiempo de espera entre cada uno de los saltos. Este tiempo debe estar dado en milisegundos. Valores mayores también provocan mayor rapidez y brusquedad.
<html>
<head>
</title> Esther García Morales </title>
</head>
<body>
<Font color=”#FF0000” face=”Arial” size=”4”>
<marquee>
<H2> BIENVENIDOS AL EMSaD 56 "SANTA MARIA SOLA" </H2> </marquee>
</body>
</html>
Hipervínculos
Un hipervínculo (enlace, vínculo, hiperenlace o link) es un elemento de un documento electrónico que hace referencia a otro recurso.
Elementos de un hipervínculo:
Destino: Usado para especificar el recurso.
Rótulo:Texto (imagen) que identifica al elemento.
Objetivo: Donde se visualizará.
<A href=“ruta”>Texto </A>
<html>
<head>
</title> Esther García Morales </title>
</head>
<body>
<A href=tablas.html>Ejemplos Tabla1 </A>
<p>
<A href=tablas.html>Ejemplos Tabla2 </A>
</body>
</html>
<html>
<head>
</title> Esther García Morales </title>
</head>
<body>
<A href=tablas.html>Ejemplos Tabla1 </A>
<p>
<A href=tablas.html>Ejemplos Tabla2 </A>
<p>
<A href=http://www.google.com.mx>Google México</A>
</body>
</html>
Usando imágenes y texto como enlaces: Pueden usarse de manera separa o en conjunto imágenes o texto como elementos de hipervínculo.
<A href=“URL"><IMG src="Imagen"> texto</A>
<html>
<head>
</title> Esther García Morales </title>
...