aprendiendo-html.com

Inserción de imágenes

2008-11-16T17:36:00.000-08:00

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:

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

2008-11-16T17:00:00.000-08:00

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

2008-11-06T17:13:00.000-08:00

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>

<body>

<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

2008-11-03T10:57:00.000-08:00

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>

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

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

</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

2008-10-29T20:06:00.000-07:00

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>

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

<hr>

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.

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

<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.

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

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

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

</body>

</html>

Interlineados

2008-10-28T16:44:00.000-07:00

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.

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

2008-10-06T17:15:00.001-07:00

Cuando se desee indicar a HTML un inicio de párrafo y utilizar una alineación junto con la instrucción, se debe utilizar . 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.

Texto centrado en la pantalla

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:

Texto justificado a la derecha

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:

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:

Comandos básicos de formateo de texto

2008-10-06T17:08:00.000-07:00

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 , para cursiva use , para subrayado use con su respectivo signo de cierre.

Ejemplo:

Estilos Negrita

Estilo Cursiva

Estilo subrayado

La instrucción 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 instrucciones de formateo de texto

Produce este resultado:

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

Este es un ejemplo de instrucciones de formateo de texto

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, o para el remarcado negrita y para el subrayado. Doble salto de línea para la separación de un párrafo con otro.

Modificación de una página Web

2008-10-06T17:07:00.000-07:00

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

2008-10-06T17:06:00.000-07:00

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

2008-10-06T16:49:00.000-07:00

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?

2008-10-05T15:47:00.001-07:00

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.