Bloque de Adsense

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>


Comandos básicos de formateo de texto  

Posted by Danny in

Negrita, Cursiva, Subrayado

Al igual que otros programas, en HTML puede aplicar el efecto Negrita, Cursiva o Subrayado al texto. Para el efecto negrita use <B >, para cursiva use <I >, para subrayado use <U > con su respectivo signo de cierre.

Ejemplo:

<B > Estilos Negrita< /B ><BR >

<I > Estilo Cursiva</I ><BR >

<U >Estilo subrayado</U ><BR >

La instrucción <BR > de las líneas de arriba se utiliza para insertar un retorno de carro. Si no se incluye esta instrucción en cada línea de texto, la página Web juntará las tres líneas de texto en una sola línea. Esto significa que cada vez que deseemos insertar un salto de línea, debemos incluir esta instrucción en el lugar donde se desee generar una nueva línea.

El resultado se muestra a continuación.

Existe una instrucción que permite remarcar partes de un párrafo, esta instrucción es la instrucción STRONG. Por ejemplo, este código:

Este es un ejemplo de <strong > instrucciones de formateo de texto </strong >
Produce este resultado:



La instrucción <EM > funciona de forma similar a <I >. Cuando se aplica <EM >, el texto afectado aparece siempre en estilo cursiva. Por ejemplo, el siguiente código:

Este es un ejemplo de instrucciones de <em >formateo de texto</em >

Produce el siguiente resultado:


Ejercicio
Usando las instrucciones conocidas hasta este momento, debes diseñar la página que se muestra a continuación.

Se usa el estilo H1 para el título principal, <B > o <STRONG > para el remarcado negrita y <U > para el subrayado. Doble salto de línea <BR > para la separación de un párrafo con otro.

Modificación de una página Web  

Posted by Danny in

Una vez creada nuestra página Web, será necesario modificarla. Para ello, necesitamos abrir el código de la página. Si se abre la página en un procesador de textos como Microsoft Word, sólo veremos el texto, pero el código no es accesible para el usuario.

Si deseamos obtener el código, será necesario abrir el bloc de notas y abrir la página desde ahí, utilizando la opción Abrir, y en el cuadro de diálogo Abrir, se elige Todos los archivos, en la lista Tipo (esto porque la página tiene una extensión diferente al filtro mostrado). Sin embargo, una manera más cómoda y rápida, es acceder al código desde la página Web abierta. Para ello, se hace lo siguiente:

1.- Se hace clic con el botón secundario en un área que no sea un objeto (como una imagen, un hipervínculo, etc.)

2.- En el menú contextual, se elige la opción Ver código fuente.

Guardado del archivo como página Web  

Posted by Danny in

Guardado del archivo como página Web

Cuando se haya escrito el código de la página Web, es necesario guardar el archivo como una página Web. Una página Web tiene la extensión HTM, la cual se debe especificar en el momento de guardar la página. Una vez guardado el archivo con la extensión HTM, se puede crear un acceso directo para este archivo o se puede abrir directamente desde el sitio en el que se guardó.

Ejercicio

Abre el Bloc de notas y copia el siguiente código que se muestra. Cuando hayas terminado de capturar el código, guárdalo como Primera.htm (si existe y pide reemplazar el archivo, responde afirmativamente).

El resultado se muestra a continuación.

Estructura de una página Web  

Posted by Danny in

Toda página Web tiene una estructura que permite al programador saber de antemano qué tipo de información necesita introducir. Esto ayuda a que la página que diseña sea claramente legible y se pueda modificar más fácilmente. Si una página Web es complicada en su diseño, habrá muy pocos que sepan dar el mantenimiento adecuado. Abajo se muestra la estructura lógica de una página Web.

Estas líneas son permanentes en una página Web. Siempre van a estar presentes no importando qué tan corta o tan larga sea la página y el contenido.

indica el título de la página propiamente dicho. La primera instrucción indica al explorador de Internet que ahí comienza una página Web. La siguiente instrucción indica el encabezado de la página, es decir el área de la barra de título. es una instrucción que indica al explorador de Internet que ahí empieza el área de contenido de la página (es decir el cuerpo de la página).

En el lenguaje HTML, muchas instrucciones se cierran con el signo / (diagonal) para indicar al programa que las propiedades aplicadas con esa instrucción se terminan ahí donde se pone el signo diagonal. Si el signo de cierre (/) no se aplica convenientemente, el programa seguirá aplicando las propiedades de la instrucción anterior a todas las líneas inferiores, hasta que se encuentre otra instrucción que modifique las propiedades actuales.



Que es HTML?  

Posted by Danny in

En principio, empecemos diciendo que HTML son las siglas de HyperText Markup Language (o Lenguaje de marcado de hipervínculos o hipertexto). Una página Web abunda en marcas de hipervínculos (enlaces). Generalmente, cuando movemos el Mouse sobre una línea de texto, encontramos palabras o expresiones subrayadas, con color azul (aunque pueden tener otros colores). Cuando hacemos clic sobre alguna palabra o expresión de hipervínculo, el explorador de Internet nos remite a otro sitio o página Web.

Cuando hablamos de páginas Web, nos referimos a las páginas que se utilizan en los exploradores de Internet, que, a primera vista, tiene las mismas propiedades. Cabe aclarar que actualmente se pueden crear páginas Web en muchos programas, en procesadores de texto como Microsoft Word, Excel, PowerPoint, Access, Corel Draw, Publisher, etc. Sin embargo, cuando se diseña la estructura de una página Web en estos programas, el código que permite dar forma a la página Web para ser accedida desde cualquier explorador, queda oculto a los ojos del diseñador de la página.

HTML es un lenguaje que utiliza los códigos estandarizados para la creación de páginas Web. Sin embargo, desde este punto no se utilizan objetos para colocar en pantalla, todo lo que se desee hacer y representar, debe ser pensado y previsto antes de codificar.

Procedimientos iniciales para crear una página Web
Antes de entrar en detalle acerca de la creación de páginas Web, es necesario entender cómo se escribe el código y en qué programa. El código se puede escribir en cualquier procesador de textos, aunque es recomendable hacerlo en un programa que no maneje estilos de texto que pueden no ser reconocidos por el explorador de Internet; puede ser un programa como WordPad, el Bloc de notas o Microsoft Word.