Bloque de Adsense

Inserción de imágenes  

Posted by Danny in

En una página Web puede insertar cualquier imagen. Las imágenes deben ser de tipo JPG, BMP o GIF. Para insertar una imagen, debe utilizar la siguiente sintaxis:


<img src="imagen.jpg">


En ésta instrucción se da por defecto que la imagen que se inserta tiene la extensión JPG. Para insertar otro tipo de imagen sólo deberá especificar la extensión correspondiente. Las imágenes pueden ser adquiridas de la galería de imágenes de Microsoft, o de cualquier otra imagen digitalizada. Incluso se pueden crear iconos animados desde algún programa de animación, y usarlos en una página Web.


Observe la página anterior modificada.



La imagen anterior fue insertada en una diapositiva de PowerPoint; posteriormente, se hizo clic con el botón derecho sobre la misma, se eligió la opción Guardar como imagen, se escribió un nombre para la imagen y se pulsó guardar.


El código para insertar la imagen se muestra a continuación.






A un correo electrónico  

Posted by Danny in

Un tipo de hipervínculo muy utilizado es a una dirección de correo electrónico. Muy a menudo nos topamos en Internet con expresiones que nos permiten pulsar un hipervínculo y nos remiten a un programa administrador de correos. Desde aquí podemos escribir un mensaje al usuario de correo que se especifique. Por ejemplo, observe la siguiente página.

Esta página hace lo siguiente: Cuando el usuario hace clic en la expresión subrayada para enviar el e-mail, abrirá un programa (en este caso propiamente), Outlook Express.

La siguiente figura muestra las dos ventanas después de haber hecho clic en el hipervínculo.

En esta ventana podrá escribir el comentario que desee escribir al propietario del e-mail.

El código para obtener el resultado mostrado arriba, lo verá a continuación.

Ejercicio

Modifica la página anterior de manera que muestre la página con la siguiente vista.

Hipervinculo hacia una URL  

Posted by Danny in

Así como pueden vincularse páginas Web dentro del mismo sitio, también podemos crear un hipervínculo que nos lleve a un sitio Web. Para ello, debemos utilizar la siguiente sintaxis:


<a ref="http://www.sitioweb.com">Texto del hipervínculo</a>


Por ejemplo, la siguiente página muestra unos hipervínculos a sitios de Internet.



El código para obtener la página mostrada, es el siguiente:


<html>


<head><title>Uso de URL</title></head>


<body>


<h1>Uso de URL</h1>


<hr>


<a href="http://www.todito.com.mx"><h3>Quiero acceder a Todito.com</a>


<a href="http://www.mp3.com"><h3>Sitio de música MP3</a>


<a href="http://www.1001juegos.com"><h3>Juegue como los mejores</a>


</body>


</html>


Para poder acceder a dichos sitios, deberá estar conectado a Internet. Si prueba estos vínculos con conexión a Internet, verá que el contenido del sitio visitado, reemplaza el contenido de nuestra página. Para evitar esto, escriba la siguiente sintaxis:


<a target="_blank" ref="http://www.sitioweb.com">Texto del hipervínculo</a>


En la siguiente gráfica se muestra cómo el hipervínculo visitado muestra el contenido de Todito.com en una nueva ventana.



Ejercicio

Modifica la página anterior de manera que aparezca en el sitio que se indica, la página Web de la papelería.




Hipervínculos externos  

Posted by Danny in

Para organizar de forma más inteligente la información de un sitio Web puede manejarse más de una página. En cualquier momento será necesario acceder a dicha página, entonces puede crear un hipervínculo que le permita dirigirse a esa página de la siguiente manera:


<a ref="páginaweb.htm">Texto del hipervínculo</a>


La siguiente gráfica ilustra el concepto de relacionar páginas en un mismo sitio con acceso mediante hipervínculos.



Cuando accede a una página relacionada, puede controlar la ventana donde se mostrará el contenido de esta. Por ejemplo, puede mostrar la siguiente página en una ventana diferente, en la misma venta o en el mismo marco (en el caso de que se manejen marcos). Para realizar esta operación debe escribir una instrucción como la siguiente:


<a target="_blank ref="paginaweb.htm">Texto del hipervínculo</a>


Esta instrucción indica a HTML que la siguiente página que se abrirá utilizará una ventana nueva para su contenido.


El siguiente ejemplo ilustra el uso de hipervínculos que acceden a otros documentos externos a la página Web actual.



El código para realizar una página como la que se muestra en el ejemplo anterior, lo tiene a continuación.


<html>


<head><Title>Página con hipervínculos externos</title></head>


<body>


<h1>Mi página con hipervínculos externos</h1>


<hr>


<a href="Primera.htm">Primer hipervínculo</a><br>


<a href="Segunda.htm">Segundo hipervínculo</a><br>


<a href="tercera.htm">Tercer hipervínculo</a><br>


</body>


</html>


Las páginas a las que acceden los hipervínculos se diseñan de forma independiente de la página actual. Si necesita saber cómo relacionar estas páginas, haga lo siguiente:


1.- Una vez diseñada la página principal, guárdela con el nombre Principal.htm.


2.- En el menú Archivo, elija Nuevo.


3.- Diseñe una nueva página para el primer hipervínculo. Cuando termine guárdela con el nombre Primera.htm.


4.- Repita estos pasos para las siguientes páginas (Segunda.htm, Tercera.htm).


Cuando termine con todas las páginas, abra la página principal y pruebe haciendo clic en los hipervínculos de la página.


Ejercicios

Con los conocimientos adquiridos hasta este momento, diseña la página que se muestra, utilizando los elementos de párrafos, alineación, Negrita, cursiva y subrayado, estilo de título e hipervínculos externos.



El fondo de la página se obtuvo de usar una diapositiva de PowerPoint con fondo relleno con trama. Sin embargo, se usará la imagen o color de fondo que el profesor indique. Los hipervínculos son externos. Cuando el usuario haga clic en algún hipervínculo, éste se abrirá en una ventana independiente.



Hipervinculos  

Posted by Danny in

Un hipervínculo es un vínculo de una página Web o un archivo a otra página Web u otro archivo. Cuando un visitante hace clic en el hipervínculo, el destino se mostrará en un explorador Web, se abrirá o se ejecutará, en función del tipo de destino. El destino es con frecuencia otra página Web, pero también puede ser una imagen, un archivo multimedia, un documento de Microsoft Office, una dirección de correo electrónico o un programa.


Por ejemplo, un hipervínculo a una página muestra la página en el explorador Web y un hipervínculo a un archivo .avi abre el archivo en un reproductor multimedia.


Hipervínculos locales con marcadores

Cuando se crea un hipervínculo local, lo que en realidad se hace es desplazarse hacia otro punto de la misma página Web. Para ello, primero debemos hacer referencia al marcador del hipervínculo con la instrucción href="#Marcador", donde Marcador es el marcador del hipervínculo. Posteriormente, cuando se desarrolle el marcador, se deberá anotar el nombre del marcador con la instrucción name="#marcador", donde marcador es el identificador utilizado en la instrucción href.


A continuación se muestra un diagrama que ilustra el concepto de un hipervínculo local.



En la siguiente página encontrará un ejemplo de una página Web que utiliza marcadores de hipervínculos dentro del mismo documento. Observe que los marcadores se inician con las palabras claves <A Name>, para indicar que en esa sección inicia un marcador que podrá ser accedido desde cualquier parte del mismo documento, y las referencias a estos marcadores se aplican con la expresión <A Ref=#marcador>, donde marcador, es el nombre del marcador al que se desee acceder.




Ambas páginas fueron desarrolladas en la misma ventana, es decir el código fue escrito de arriba hacia abajo. La mecánica de esta página fue aplicar varios espacios (BR) para así poder desplazarse hacia la siguiente página y que ésta se ubique hasta arriba (TOP). En situaciones normales, no sería necesario dejar tantos espacios, bastaría con escribir los temas uno tras otro en el orden deseado.


La siguiente figura muestra el código utilizado para obtener ambas páginas mostradas arriba. Por lo tanto, si quiere probar lo mismo, sólo debe copiar este código en el bloc de notas y guardarlo como MARCADORES.HTM, y obtendrá un página Web con dos ventanas iguales a las que se muestran arriba.


<html>


<head><title>Página Web con marcadores</title></head>


<body TextColor="blue">


<a name="#Inicio"><h1>Página principal</h1></A>


<hr>


<p align="justify" Style="text-indent:50">Esta página contiene marcadores o hipervínculos


locales que permiten al usuario desplazarse a través del documento mediante estos hipervínculos.


El uso de marcadores proporciona una manera práctica y sencilla de seccionar el documento y encontrar información rápidamente.


No podían faltar en un curso de páginas Web los enlaces o hipervínculos, que son la esencia misma de la Red. Los también llamados hipertextos son los textos o los objetos sobre los que podemos hacer clic para que nos lleven a otra parte del documento, a otro archivo del mismo sitio de Internet o a otra página de Internet, entre otras funciones.


Habíamos dejado nuestra página en la lección anterior diseñada en una tabla que ocupaba todo el documento. En esta lección vamos a insertar todos los hipervínculos que tiene que haber en nuestra página.


<br><br>


</p>


<a "target="_top" href="#Marcadores">Haga clic para obtener más información sobre marcadores</a>


<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


<br><br><br><br><br><br>


<A name="#Marcadores"><h1>Qué son los marcadores</h1></A>


Los marcadores son hipervínculos o enlaces internos que permiten desplazarse a través del mismo documento. Cuando el usuario hace clic sobre un enlace, la página se desplaza hasta la sección donde se haya definido un marcador.


<br>


Para definir un marcador, debe empezar con la expresión <b><i>A Name="#Marcador"</i></b> en el sitio donde desee definir un marcador. Para hacer referencia al marcador definido, use la expresión <b><i>A Href="#Marcador"</i></b>, para acceder a dicho marcador.


<br>


Un hipervínculo con marcador es un enlace entre un hipertexto y una sección de un documento.


<br><br><br><br><br><br><br><br><br><br><br><br>


<A href="#Inicio">Volver arriba</A>


</body>


</html>

Interlineados  

Posted by Danny in

En un procesador de textos los interlineados se utilizan mediante opciones de menús que permiten cambiar el espacio entre líneas de un párrafo. En HTML, el interlineado se controla con el modificador Line-height. A diferencia de un procesador de textos como Microsoft Word que tiene unos interlineados predeterminados, HTML permite al usuario separar las líneas de un párrafo mediante porcentajes.


Por ejemplo, la siguiente instrucción aplica un porcentaje de interlineado de 150%, equivalente a 1.5 líneas.


<p align=justify style="line-height=150%">


El resultado se muestra en la siguiente ventana con dos párrafos, el párrafo modificado con interlineado y el párrafo normal.



Cada vez que desees aumentar el interlineado, deberás aumentar el porcentaje.


En la línea de código anterior, se incluyó un modificador de alineación, align=justify, esto permite que el párrafo se justifique.


Ejercicio


Haciendo uso de los conocimiento adquiridos, utilizando prioritariamente los comandos de formateo de párrafos para sangrías e interlineados, deberás diseñar la página que a continuación se muestra.


Marcador de párrafo  

Posted by Danny in

Cuando se desee indicar a HTML un inicio de párrafo y utilizar una alineación junto con la instrucción, se debe utilizar <P>. Este comando se usa junto con las instrucciones de alineación <Left>, <Center> o <Right> para modificar la posición del texto en pantalla. Por ejemplo, la siguiente línea de código, centra el texto en la pantalla.


<p align=center>Texto centrado en la pantalla </p>


El siguiente código:



Produjo el resultado que se muestra a continuación.



Si se desea alinear texto a la derecha, debe introducir una expresión como ésta:


<p align=right>Texto justificado a la derecha</p>


Para trazar una línea de separación utilice el comando <HR>. Esta instrucción sin modificadores, traza una línea horizontal predeterminada. Si se incluyen modificadores, se podrá personalizar la apariencia de la línea.


Ejemplo:


<HR>


Traza una línea horizontal.


Para modificar la apariencia predeterminada, haga esto:


<HR Width=200>


Traza una línea de ancho de pantalla (en píxeles) de 200 píxeles. Esta línea de código produciría una línea como ésta:



Si se desea cambiar el color, es necesario incluir el modificador Color=Color. Ejemplo:


<HR Color=Blue>