lunes, 25 de julio de 2016

Scroller de texto e imágenes

Una de las mayores exigencias de los diseñadores web consiste en obtener efectos gráficos atractivos sin superar límites razonables de peso en Kb de las páginas web. En el equilibrio de estos dos aspectos reside, probablemente, el secreto de la buena gráfica de los sitios web: correctas dosis de gráfica y funcionalidad. No existe una fórmula empírica que explique objetivamente dónde y cuándo se logra alcanzar este equilibrio. Existen, sin embargo, algunas medidas aconsejables que un elaborador debería adoptar al crear un sitio. La primera consiste en optimizar lo más posible las imágenes GIF o JPG, limitando su peso en Kb sin que sufra excesivamente la calidad. La segunda consiste en usar lo más frecuentemente posible texto HTML en lugar de imágenes, sobre todo para la creación de títulos y encabezamientos de página. 

En este último punto, HTML dinámico acude en ayuda de los elaboradores con una serie de efectos especiales que mueven el texto en la dirección deseado evitando el uso de GIF animados o difuminan los colores evitando el uso de Applet Java.

Marquee es una marca HTML que permite el movimiento de simple texto dentro de un documento web. Introducida desde la versión 2.0 de MsIe, no se ha integrado nunca en Netscape, el cual no prevé ninguna marca con efectos similares. Su funcionamiento es muy sencillo y conlleva el uso de código Javascript o DHTML. Esta simplicidad queda confirmada por la presencia de marcas destinadas a personalizar el desplazamiento del texto. He aquí algunas:

<MARQUEE BEHAVIOR=SCROLL>HTMLpoint</MARQUEE> 

Texto en movimiento de derecha a izquierda sin interrupciones:

<MARQUEE BEHAVIOR=SLIDE> HTMLpoint </MARQUEE>

Texto en movimiento desde la derecha con parada en el lado izquierdo

<MARQUEE BEHAVIOR=ALTERNATE> HTMLpoint </MARQUEE> 

Texto en movimiento continuo de derecha a izquierda y viceversa

<MARQUEE BGCOLOR=red>HTMLpoint</MARQUEE>

Establece el color de fondo

<MARQUEE DIRECTION=RIGHT>HTMLpoint</MARQUEE>

Define la dirección del movimiento (en este caso de derecha a izquierda)

<MARQUEE HEIGHT=20 WIDTH=300>HTMLpoint</MARQUEE>

Altura (height) y anchura (width) en píxel.

<MARQUEE HSPACE=10 VSPACE=10>HTMLpoint</MARQUEE>

Distancia, en píxel, de los márgenes laterales (HSPACE) y superior e inferior (VSPACE)

<MARQUEE LOOP=5>HTMLpoint </MARQUEE>

Número de veces que pasa el texto. El parámetro puede impostarse en INFINITAS.

<MARQUEE SCROLLDELAY=5 SCROLLAMOUNT=2>HTMLpoint</MARQUEE>

Velocidad, en milésimas de segundo, de visualización de los mensajes.

En la versión 4 de MsIe el elemento MARQUEE se ha implementado con la adición de un modelo de objetos que reproduce cualquier código HTML. En Internet Explorer 4 es, por ejemplo, posible alternar el desplazamiento hacia arriba o hacia abajo, además de contener controles que responden a clic del ratón o pulsaciones del teclado. Todo esto gracias a tres eventos estándar: onstart, onbounce, onfinish.

Un ejemplo práctico de este nuevo enfoque del elemento MARQUEE sería:

<MARQUEE TITLE="Para interrumpir el desplazamiento, pulsa el botón del ratón" ONMOUSEDOWN="this.stop();" ONMOUSEUP="this.start();">

<INPUT TYPE=BUTTON VAlUE="haz clic aquí" ONCLICK="alerta('has pulsado');">

</MARQUEE>


Como hemos señalado antes, Netscape no reconoce la marca MARQUEE de manera que cuando la encuentra no produce ningún tipo de efecto dinámico. Mediante dynamic HTML es posible extender el efecto del movimiento de texto, tanto horizontal como vertical, también a este navegador.
El file "dhml01.htm se refiere a un efecto marquee crossbrowser con texto en movimiento de derecha a izquierda.

El código necesario para su funcionamiento debe insertarse en el cuerpo del documento, entre las marcas <BODY>. En parte, deberemos modificarlo según nuestras propias exigencias y, en parte, deberemos dejarlo inalterado.

var marqueewidth=350

Establece la anchura (width) en píxel de la parte de documento destinada a albergar el efecto marquee.

var marqueeheight=20

Este valor se refiere a la altura (height) en píxel de la parte de la página que alberga el efecto. Es válido sólo para Netscape, mientras que MsIe lo ignora.

var speed=6

Este valor se refiere a la velocidad de desplazamiento del texto. Cuanto mayor es el valor, mayor es la velocidad.

var marqueecontents='<B><font face="Arial"><a href="http://www.htmlpoint.com">HTMLpoint</a> el sitio italiano del web publishing</font></B>'

Este código identifica el contenido del mensaje en movimiento. Como podemos observar por el ejemplo, el texto está formateado según las reglas clásicas de HTML, con la posibilidad de insertar enlaces a recursos externos. Sólo tenemos que acordarnos de no insertar comillas simples, que pertenecen al código (contenido entre comillas simples) y hacen que aparezcan mensajes de error.

Además del texto podemos insertar también imágenes en el formato reconocido por los navegadores de mayor difusión. En el file "esempio02.htm" al texto visto antes se le agrega una imagen en formato GIF:

var marqueecontents='<IMG SRC="staticlogo.gif" WIDTH=150 HEIGHT=54 BORDER=0 align=middle hspace=10><B><a href="http://www.htmlpoint.com"></a><font face="Arial"> el sitio italiano del web publishing</font></B>'

El mismo efecto de desplazamiento del texto se puede obtener en sentido vertical, de abajo hacia arriba, con un código idéntico al anterior salvo por lo que se refiere a la sustitución con el valor "height" del valor "width". El file "esempio.03" muestra un ejemplo de desplazamiento vertical de texto e imágenes. Como en la demostración precedente, la única parte que hay que modificar es la que abre el código script del ejemplo:

var marqueewidth=200

var marqueeheight=120

var speed=2

var marqueecontents='<CENTER><IMG SRC="staticlogo.gif" WIDTH=150 HEIGHT=54 BORDER=0 align=middle hspace=10><BR><B><a href="http://inews.tecnet.it"></a><font face="Arial"> la primera y más difundida revista del sector</font></B></CENTER>'

Un efecto similar al último ejemplo de scroller vertical puede implementarse con un ulterior efecto gráfico que haga aún más fuerte el impacto visual.

Se trata de un efecto "fade", es decir de difuminación del texto, que desaparece progresivamente hasta llegar a confundirse con el color de fondo. El file "esempio04.htm" insertado en el cd-rom adjunto tiene un código más complejo de los vistos precedentemente pero sólo hay que modificar una pequeña parte del mismo:

var bgcolor="#FFFFFF";

Define el color que sirve de fondo al texto visualizado.

var color="#0000FF";

Establece el color del texto en movimiento de abajo hacia arriba.

Los mensajes que se visualizarán se numeran progresivamente y se insertan de la siguiente forma:

message[0]='HTMLpoint'

message[1]='el sitio'

message[2]='italiano'

message[3]='del web publishing'

message[4]='http://www.htmlpoint.com'

En este caso debemos también evitar introducir comillas simples si queremos que la demo produzca sus efectos.

Para añadir otros mensajes a los presentes, es suficiente insertar otras líneas de código con numeración progresiva:

message[5]='nuevo mensaje'
message[6]='nuevo mensaje'
message[7]='nuevo mensaje'

La formatación del texto es diferente para Netscape y MsIe debido a las consabidas divergencias relativas al acceso DOM (Document Object Model) de Dynamic HTML.

Para Netscape es necesario impostar el siguiente código:

document.layers['textanim'].document.writeln('<P Class="maen" Align="Center"><font color="'+rgb+'" size=4 face=arial>'+message[msg]+'</font>')

Por su parte, para MsIe la línea de código es:

textanim.innerHTML='<P Class="maen" Align="Center"><font color="'+rgb+'" size=4 face=arial>'+message[msg]+'</font>'

En ambos casos la formatación hace referencia a la hoja de estilo:

style type="text/css">

P.maen {

font-family : arial;

font-size : 16pt;

font-weight : bold;

}

</style>

La propiedad "innerHTML" define los contenidos de un elemento usando marcas. Esta propiedad, como innerText, outerHTML y outerTEXT, forma parte del mecanismo de HTML dinámico denominado "sustitución HTML". Dicho de otro modo, este enfoque se dirige a elementos HTML ya existentes, los cuales son considerados objetos que se pueden cambiar dinámicamente con script asociados a la página.

window.setTimeout('start()',1000);

Define el tiempo, expresado en milésimas de segundo, que separa una línea de mensaje de la sucesiva.

window.setTimeout('start()',2000);

Establece el tiempo, en milésimas de segundo, que separa las sucesivas visualizaciones del mensaje completo. A diferencia del anterior, que separaba cada una de las líneas del mensaje, este valor se refiere a todo el contenido del mismo. 

Una vez impostado el código dentro de la marca , es necesario operar en el cuerpo del documento, insertando para MsIe y para Netscape por separado el código que invoca todo cuanto hemos impostado :

<Div id="textanim" style="position: absolute; left: 150; top: 200">
</Div>

Este código es reconocido por el navegador de Redmond y establece la posición absoluta del efecto dentro de la página.

<Layer name="textanim" left=150 top=200>
</Layer>

Este código invoca, por su parte, todo lo necesario para el funcionamiento de la demo con Netscape.

Para que el script funcione correctamente, debemos introducir en la marca el gestor de eventos "onLoad" que invoca la función "start()":

<BODY vlink="blue" onLoad="start()">

También en este caso es posible sustituir el texto con imágenes en formato GIF o JPG actuando en el código que imposta los mensajes:

message[0]='HTMLpoint'

message[1]='el sitio'

message[2]='italiano'

message[3]='del web publishing'

message[4]='<IMG SRC="staticlogo.gif" WIDTH=150 HEIGHT=54 BORDER=0>'


FECHA: Julio 25 2016
Publicadas por a la/s No hay comentarios.:
Texto en movimiento

Vamos a ver distintas soluciones para conseguir texto en movimiento: haciendo uso del lenguaje HTML (las marquesinas), con un GIF animado, con Javascript, etc.

Marquesinas (Marquees)

Una marquesina (en inglés, marquee) es una ventana en la que se desplaza un texto. Sólo son válidas para el Explorer de Microsoft (en el Netscape se verá como texto fijo).

La etiqueta básica es:

<MARQUEE> Texto que se desplaza </MARQUEE>

Como no hemos añadido ningún atributo dentro de la etiqueta, el comportamiento de la marquesina es el que tiene por defecto: ocupa todo el ancho de la pantalla, tiene la altura de una línea y el texto se desplaza lentamente de derecha a izquierda. Vamos a ver los distintos atributos que modifican su apariencia y comportamiento:

WIDHT, HEIGHT 
Ajustan la anchura y altura, respectivamente, de la marquesina. Pueden ser igual a un número de pixels, o a un porcentaje de la pantalla. Ejemplo:

<MARQUEE WIDTH=50% HEIGHT=60> Esta marquesina ocupa el 50% del ancho de la pantalla y tiene una altura de 60 pixels </MARQUEE>

ALIGN 
Modifica el alineamiento del texto que rodea a la marquesina, que puede ser TOP (arriba), MIDDLE (en medio) o BOTTOM (abajo). Ejemplo:

<MARQUEE WIDTH=50% HEIGHT=60 ALIGN=BOTTOM>La palabra "¡Hola!" estará alineada con la parte inferior de la marquesina</MARQUEE> ¡Hola!

Que resulta como:
La palabra "¡Hola!" estará alineada con la parte inferior de la marquesina

¡Hola!

BEHAVIOR 
Este atributo (que quiere decir en inglés comportamiento) sirve para definir de qué manera se va a efectuar el desplazamiento del texto. Si es igual a SCROLL (el valor por defecto), el texto aparece por un lado, se desplaza hasta el otro hasta desaparecer por él, y vuelve a empezar (como los casos que hemos visto anteriormente). Si es igual a SLIDE, aparece por un lado y se desplaza hasta llegar al otro extremo, y se para ahí. Si es igual a ALTERNATEse desplaza alternativamente hacia un lado y otro, siempre dentro de los límites de la marquesina. Ejemplo:

<MARQUEE BEHAVIOR=ALTERNATE>Este texto se mueve a un lado y otro, sin desaparecer</MARQUEE>

BGCOLOR 
Con este atributo se modifica el color de fondo de la marquesina, Ejemplo:

<MARQUEE BGCOLOR="#FF7070"> Esta marquesina tiene un fondo de color rosa </MARQUEE>

DIRECTION Este atributo sirve para modificar la dirección hacia la que se dirige el texto. Por defecto es LEFT (izquierda). Se puede hacer que el texto se dirija hacia la derecha igualando este atributo a RIGHT. Ejemplo:

<MARQUEE DIRECTION=RIGHT> Este texto se dirije hacia la derecha </MARQUEE>

SCROLLAMOUNT 
Define la cantidad de desplazamiento del texto en cada movimiento de avance, expresado en pixels. Cuanto mayor es el número, más rápido avanza. Ejemplo:

<MARQUEE SCROLLAMOUNT=50> Doy saltos grandes </MARQUEE>

SCROLLDELAY 
Define el tiempo entre cada movimiento de avance, expresado en milisegundos. Cuanto mayor es el número más lento avanza. Ejemplo:

<MARQUEE SCROLLDELAY =200> Espero mucho entre cada salto </MARQUEE>

LOOP 
Especifica el número de veces que aparecerá el texto. Es indefinido por defecto.

HSPACE, VSPACE 
Definen, respectivamente, la separación en sentido horizontal o vertical del texto que está fuera de la marquesina.

Fuentes dentro de la marquesina

Si se desea que el texto que aparece dentro de una marquesina tenga una fuente concreta, distinta de la que tiene por defecto el navegador, se debe poner la etiqueta <FONT FACE> (ver Cap. 6) por fuera de la etiqueta de la marquesina. Ejemplo:

<FONT FACE="IMPACT">
<MARQUEE BGCOLOR="FFFF00">Esto se ve con la fuente Impact</MARQUEE>
</FONT>

Para que esto surta efecto la fuente indicada debe estar instalada en el disco duro del usuario. Véase también cómo se pueden indicar otras fuentes alternativas.

Como se ha dicho antes, esta etiqueta no es implementada por el Netscape. El texto que está dentro de la etiqueta de la marquesina se verá en este navegador como texto fijo normal.

Normalmente, si se hace uso de este recurso es porque se quiere destacar de una manera muy especial un texto, lográndose plenamente este objetivo en el Explorer, pero no así en el Netscape, en donde dicho texto pasaría totalmente desapercibido. Una manera de paliar este inconveniente, al menos en parte, es introducir la etiqueta de la marquesina dentro de una tabla. De esta manera, el texto estará en cierta medida destacado en el Netscape, y en el Explorer la marquesina se verá de una manera aún más estética. Ejemplo:

<TABLE BORDER=1> 
<TR><TD> 
<MARQUEE> Marquesina dentro de una tabla </MARQUEE> 
</TD></TR> 
</TABLE>

Texto en movimiento con un GIF animado

Otro procedimiento para conseguir texto en movimiento es el de confeccionar un GIF animado 

Se puede conseguir que el texto se desplace realmente, emulando el comportamiento de las marquesinas, pero no es fácil conseguirlo, y puede ser bastante laborioso.

Un procedimiento más sencillo es el siguiente: Creamos el texto apropiado con un programa gráfico (tiene la ventaja sobre las marquesinas de que podemos escoger el tipo de fuente y los efectos que deseemos), tal como el siguiente ejemplo (bienv1.gif):


Luego procedemos a borrar una a una cada palabra (o cada letra si se quisiera), y vamos guardando cada imagen con un nombre distinto, tal como bienv2.gif:


A continuación borramos la palabra "del" y guardamos la imagen como bienv3.gif, y así con el resto, hasta bienv7.gif en donde se habrían borrado todas las palabras.

Luego procedemos a montar la secuencia de las imágenes en algún programa para crear GIFs animados, como por ejemplo en el GIF Construction Set o Animation Shop. El orden será el inverso:

bienv7.gif - bienv6.gif - ... - bienv2.gif - bienv1.gif

Se le añade un LOOP (lazo, para repetir la secuencia) y se ajustan los tiempos de cada imagen. Cuando esté todo a nuestro gusto, salvamos el GIF animado con el nombre de bienvend.gif.

Otra variante puede ser, partiendo igualmente de la imagen inicial bienv1.gif, dejar sólo una palabra en cada imagen, habiendo borrado el resto, y hacerlo con cada una de ellas. Con esto se consigue una apariencia mayor de movimiento en el texto.

Texto en movimiento con Javascript

Otra manera de conseguir texto en movimiento es haciendo uso de Javascript. Vamos a ver dos ejemplos: un scroll (deslizamiento) de un texto en la barra de estado del navegador y un scroll en una ventana dentro de la página.

Esto está implementado en los siguientes navegadores:
  • Netscape, versión 2.0 o superior. 
  • Explorer de Microsoft 3.0 o superior.
El Javascript es un lenguaje distinto del HTML, que es el tema de este manual. En los dos ejemplos que vamos a ver a continuación, únicamente se mostrará la manera de incluirlos en nuestro documento HTML, pero sin pretender explicar su estructura.

Cómo incluir Javascript en un documento HTML

Recordemos que la estructura de un documento HTML es:

<HTML> 
<HEAD> 
<TITLE> 
</TITLE> 
</HEAD> 
<BODY> 
</BODY> 
</HTML>

El script (documento) en Javascript lo tenemos que colocar dentro de la cabecera, después del título. Es decir, entre las etiquetas </TITLE> y </HEAD>, contenido dentro de la etiqueta:

<SCRIPT LANGUAGE="JavaScript"> </SCRIPT >

Es decir, que queda de esta manera:

<HTML> 
<HEAD> 
<TITLE> 
</TITLE> 
<SCRIPT LANGUAGE="JavaScript"> 
[Aquí debe ir colocado el script] 
</SCRIPT > 
</HEAD> 
<BODY> 
</BODY> 
</HTML>

Además de esto, se debe añadir algo dentro de la etiqueta <BODY>, como se indicará en cada caso.

Scroll en la barra de estado

El script es el siguiente:

<SCRIPT LANGUAGE="JavaScript"> 
<!-- /// Scroll en la barra de estado, (C) Pedro Maicas, 1996.

var txt="Esta es la primera linea de texto que se desplaza " 
+ " y esta es la segunda, puedes poner todas las" 
+ " que quieras ! ";

function scroll() 
{ 
window.status = txt; 
txt = txt.substring(1, txt.length) + txt.charAt(0); 
window.setTimeout("scroll()",150); 
} 
//-->

</SCRIPT>

Observación sobre el texto: Se puede poner el texto en una sola línea, tan larga como se quiera, siempre que esté entre " y "; Pero como no debe de haber ningún salto de línea, si el texto es demasiado largo, es mejor dividirlo en distintas líneas, tal como está en el ejemplo. Al final de la última palabra del texto conviene dejar una serie de espacios en blanco, para que no esté encadenado el comienzo con el final.

Dentro de la etiqueta <BODY> se debe añadir el atributo: 
onLoad="scroll();" 
quedando así: 
<BODY onLoad="scroll();">

Scroll en una ventana

Ahora vamos a ver cómo conseguir que se desplace un texto dentro de una ventana de un formulario. Con esto se consigue un efecto parecido al de las marquesinas (pero en este caso sí es implementado por el Netscape 2.0 o superior).

El script es el siguiente:

<SCRIPT LANGUAGE="JavaScript"> 
<!-- /// Scroll en en una ventana, (C) Pedro Maicas, 1996. 
var txt="Esta es la primera linea de texto que se desplaza " 
+ " y esta es la segunda, puedes poner todas las" 
+ " que quieras ! ";

function scroll() 
{ 
document.frm.w.value = txt; 
txt = txt.substring(1, txt.length) + txt.charAt(0); 
window.setTimeout("scroll()",150); 
} 
//--> 
</SCRIPT>

Dentro de la etiqueta <BODY> se debe añadir el atributo: 
onLoad="scroll();" 
quedando así: 
<BODY onLoad="scroll();">

Las etiquetas para la ventana del formulario son:

<FORM NAME='frm'> 
<INPUT TYPE='text' NAME='w' SIZE=64> 
</FORM>

Como la ventana está situada dentro de la página, debemos colocar estas etiquetas en el sitio que nos convenga, dentro de la seción <BODY> </BODY>, mezclado con el resto del documento HTML.


FECHA: Julio 25 2016
Publicadas por a la/s No hay comentarios.:
Enlaces
Probablemente la característica que más ha influido, junto con las imágenes, en el espectacular desarrollo de la Web hayan sido los enlaces (links). Un enlace aparece generalmente como un texto azul subrayado y cuando situamos el cursor sobre él se transforma en una mano con el dedo índice extendido. Si pulsamos sobre el enlace saltamos a otra parte del documento, a otro documento situado en cualquier lugar, o incluso se abre el programa de correo para enviar un mensaje a la dirección indicada.

En general los enlaces tienen la siguiente estructura

<A HREF="URL"> Texto del enlace</A>

El texto del enlace es lo que se visualizará en el navegador. La URL es la dirección donde apunta el enlace y puede ser de estos tipos:

Enlace a otro lugar del mismo documento

En este caso la URL se sustituye por un marcador en la misma página. El marcador puede ser texto colocado en el lugar al que queremos saltar. No importa lo que sea ya que no se verá.
Veamos un ejemplo para saltar al inicio de esta página. Escribiríamos en el lugar desde el que queremos saltar:

<A HREF="#inicio"> Ir al Inicio</A>

Y en el sitio exacto adonde queremos saltar, debemos poner la siguiente etiqueta: 

<A NAME="inicio"> </A>

Una vez escrito esto y guardada la página veríamos al abrirla con el Navegador

Ir al Inicio

Al pulsar sobre ella nos llevaría al principio de la página ya que fue allí donde coloqué el marcador

Enlace a otra página local

En este caso la URL se dará de forma relativa (igual que para poner un fondo a la página). Por ejemplo si tenemos dos páginas en el mismo directorio pagina1.htm y pagina2.htm y queremos poner un enlace desde la pagina1.htm a la pagina2.htm debemos escribir

<a href="pagina2.htm">Ir a pagina2</a>

Con esto es suficiente, no hay que crear ningún marcador a no ser que quieras ir a un sitio concreto de la pagina2.htm. En ese caso tendrías que poner en el sitio adonde quieres llegar de lapagina2.htm
<a name="sitio"></a>
y en la pagina1.htm
<a href="pagina2.htm#sitio>Ir a sitio de la página 2</a>

Las palabras forma relativa, al principio de esta sección, constituyen un enlace de este último tipo

Enlace a una dirección de Internet

Ahora la URL debe darse de forma absoluta, tal como la ves en la ventana de dirección del navegador, es decir:

<A HREF="http://centros4.pntic.mec.es/ies.de.cistierna">IES Cistierna</A>

te llevaría a la página de entrada del IES Cistierna

Enlaces usando imágenes

Con frecuencia se emplean imágenes como enlaces. A veces son enlaces a las mismas imágenes con más resolución, como en el caso de fotos. Otras veces nos llevan a una localización cualquiera. 
Para que una imagen sea un enlace hay que colocarla en el lugar del texto del enlace, si además queremos que vaya a otra imagen, ésta la debemos poner en el lugar de la URL.
Veamos unos ejemplos Supongamos para ello, que la estructura de nuestras páginas es la indicada en la imagen. Si escribo en la página actual localizada en Aprendiendo Html

<A HREF=" #inicio"><img src="gifs/imagen.gif"></A>
obtengo una imagen que al pulsarla me lleva al inicio de esta página, exactamente como esta:

Para que una imagen sea un enlace a otra imagen se debe escribir:

<a href="gifs/sky.jpg"><img src="gifs/ojo.gif" ></a>

que da como resultado

Enlace con una dirección de correo

Este es un enlace un poco diferente, veamos un ejemplo

<A HREF="mailto: abercian@pntic.mec.es"> abercian@pntic.mec.es </A>

que se ve como abercian@pntic.mec.es y que si lo pulsas se abre el programa de correo que tengas configurado, con la dirección en el campo correspondiente

Enlace con un grupo de noticias

Como antes la sintaxis es un poco diferente

<A HREF="news://news.pntic.mec.es/"> Mira en las noticias del MEC para encontrar profesores colgados</A>

que se vería

Mira en las noticias del MEC para encontrar profesores colgados

Enlace para descargar un fichero

En la URL se poner la ruta donde está el fichero. Por ejemplo, para descargar un fichero de nombre guiahtml.zip se debe poner

<A HREF="../zip/guiahtml.zip">guiahtml.zip</A>

que se vería así guiahtml.zip. Si pulsas sobre él se abrirá una ventana avisándote de una descarga de archivos y preguntándote qué deseas hacer

Enlace que se abre en una nueva ventana

Si quieres que la página que enlazas aparezca en una nueva ventana del navegador, solamente tienes que poner target="nombre" como atributo del enlace, es decir:
<a href="index.htm" target="nueva">Indice</a>

que se verá como Indice

Aún hay más tipos de enlaces, pero éstos son los más importantes

 Para mas informacion por favor dar click aqui


FECHA: Julio 25 2016
Publicadas por a la/s No hay comentarios.:

domingo, 24 de julio de 2016

Como colocar imagenes en Html

Gracias a las imágenes la web se ha hecho tan popular, tanto que hoy no se entiende una página web sin ellas. En nuestro directorio de trabajo tenemos un pequeño gif llamado "obras.gif", que vamos a usar en los siguientes ejemplos
El tag básico que nos permite incluir imágenes es <IMG SRC="obras.gif"> , que produce en pantalla:



                                                                                                              

Este tag admite muchos parámetros útiles:
  • width, height: Con estos parámetros le decimos al navegador las dimensiones del grafico. Es conveniente incluirlos porque asi la página aparece en pantalla antes de que lleguen los gráficos(que suelen venir después del texto).En nuestro caso, <IMG SRC="obras.gif" width=60 height=53>, produce en pantalla:


                                          
También podemos poner dimensiones 'falsas', y el navegador alterará las dimensiones de la imagen.Por ejemplo, <IMG SRC="obras.gif" width=200 height=53>, produce en pantalla:
  • Border: Este parámetro hace que aparezca un borde rodeando la imagen. Por ejemplo, <IMG SRC="obras.gif" width=60 height=53 border=2>, produce en pantalla: 


  • Alt: Con este parámetro podemos incluir un texto para los navegadores que no soportan los gráficos. 


Por ejemplo, <IMG SRC="obras.gif" alt="Pagina en construcción" width=60 height=53 border=2>, produce en pantalla: 



Para leer el texto podemos poner el ratón sobre el gráfico durante un segundo.
  • Align: Alinea la imagen respecto del texto y puede valer: left, right, top, bottom y middle.

Por ejemplo, <IMG SRC="obras.gif" alt="Pagina en construcción" width=60 height=53 border=2 align=middle> texto de ejemplo, produce en pantalla:


  • º  Hspace, vspace: Separa la imagen horizontal y verticalmente(en pixels y por ambos lados).

Por ejemplo, <IMG SRC="obras.gif" alt="Pagina en construcción" width=60 height=53 border=2 vspace=10 align=middle hspace=10> texto de ejemplo, produce en pantalla:
Sobre imágenes se puede decir mucho más, pero sólo vamos a añadir algunos comentarios:

  • Una página web en su totalidad(texto y gráficos) no debería sumar más de 80 Kb(1 minuto de carga aprox. para un modem de 14400 bps).
  • Un diseñador de páginas web necesitará un programa de retoque fotográfico, como Paint Shop Pro
  • Las imágenes pueden servir como enlaces, p.ej el código <a href="obras.htm"><IMG SRC="obras.gif"></a> produce en pantalla: 

Vemos que el icono del ratón cambia al pasar por la imagen, y aparece un borde de color azul rodeándola. Casi siempre que usemos imagenes como enlaces añadiremos border=0 para evitarlo.


FECHA: Julio 24 2016
Publicadas por a la/s No hay comentarios.:
Fondos de página

Como hemos visto hasta ahora, el navegador dibuja la página con un triste fondo gris. Por suerte, es posible fijar el fondo con otro color, o usar una imagen de fondo.
Fondo de color:
Usamos el parámetro bgcolor, p.ej <body bgcolor="#FFFFFF">
Si queremos usar otros colores de fondo, hay que asegurarse de que los textos se leen sin dificultad.
Imagen de fondo:
Usamos el parámetro background="fondo.gif", p.ej <body background="fondo.gif">
Usar imágenes de fondo es un tema complicado. Es muy dificil acertar con una imagen adecuada, y sobre todo hay que huir de los colores chillones.
Si la imagen es más pequeña que la pantalla, se repetirá hasta llenarla completamente. 
Un buen truco es usar una imagen de altura 5 pixels(o menos), con el consiguiente ahorro de espacio.
Por ejemplo: vamos a usar de fondo la imagen:


Para ver el resultado en la pagina copiamos el siguiente código:

<html>
<head>
<TITLE>Fondos</TITLE>
</head>
<body background="fondo.gif">
<center>
<font face="arial" size="+2">Fondos</font>
<hr width=200>
</center>
<P align="center">Este es el primer párrafo. Está centrado y escrito en la letra por defecto del navegador. Algunas palabras estan en <B>negrita</B>, y otras en <I>cursiva.</I></P>
</body>
</html>

Nota: En este caso la imagen debe estar en el mismo directorio que el fichero .htm, para que el navegador pueda encontrarla. Si la imagen está en otro directorio debemos escribir la ruta correcta.


FECHA: Julio 24 2016
Publicadas por a la/s No hay comentarios.:
Cómo crear y guardar un documento HTML en notepad++



TOMADO DE: https://www.youtube.com/watch?v=wgsrZc0ZxiM

FECHA: Julio 24 2016

Publicadas por a la/s No hay comentarios.:
Como crear un documento Html con el blog de notas

1. Abre el Bloc de Notas de Windows mediante: Inicio > Todos los programas > Accesorios > Bloc de Notas. En Ubuntu puedes utilizar el procesador de textos mediante: Aplicaciones > Accesorios > Procesador de textos.

2. En un documento nuevo escribe el siguiente texto:

<html>
<head>
<title>Mi primera pagina</title>
</head>
<body>
Hola mundo
</body>
</html>

3. Selecciona Archivo > Guardar como. Se mostrará este cuadro de diálogo.

































4. En la lista desplegable Guardar en: , elige la carpeta donde desees guardar este documento.

5. Introduce el nombre del archivo añadiéndole la extensión .htm Ejemplo: prueba.html

6. Pulsa en el botón Guardar.

7. Cierra la ventana del Bloc de Notas.

8. Elige Inicio > Mis Documentos para situarte en esta carpeta donde has guardado tu archivo HTML. Encontrarás un archivo con el icono de un documento HTML con el nombre que has elegido.
















9. Haz doble clic sobre el icono de este archivo y se abrirá el navegador configurado por defecto en tu equipo mostrando el contenido de esta página HTML.

10. Observa que en la barra de título del navegador aparece el texto que has encerrado entre las etiquetas<title> … </title> y en el documento en blanco el texto que has incluido entre <body>…</body>
FECHA: Julio 24 2016

Publicadas por a la/s No hay comentarios.:
Suscribirse a: Entradas (Atom)