manual html - mailxmail.comimagenes.mailxmail.com/cursos/pdf/0/manual-html-5570.pdf · accedida...

Manual HTMLAutor: Silvestre Goxcon Blas

[Ver curso online]

Descubre miles de cursos como éste en www.mailxmail.com 1

mailxmail - Cursos para compartir lo que sabes

http://www.mailxmail.com/curso-manual-html

http://www.mailxmail.com



Presentación del curso

HTML es un lenguaje muy sencillo que permite describir hipertexto, es decir, textopresentado de forma estructurada y agradable, con enlaces (hyperlinks) queconducen a otros documentos o fuentes de información relacionadas, y coninserciones multimedia (gráficos, sonido...).

La descripción se basa en especificar en el texto la estructura lógica del contenido(títulos, párrafos de texto normal, enumeraciones, definiciones, citas, etc) así comolos diferentes efectos que se quieren dar (cursiva, negrita, o un gráficodeterminado).

Visita más cursos como este en mailxmail:[http://www.mailxmail.com/cursos-informatica][http://www.mailxmail.com/cursos-internet]

¡Tu opinión cuenta! Lee todas las opiniones de este curso y déjanos la tuya:[http://www.mailxmail.com/curso-manual-html/opiniones]

Cursos similares

Cursos Valoración Alumnos Vídeo

Promoción en buscadores "sin estrategiano hay éxito" Cuando estas planificando lanzar tu primer sitio Web o estas asombrado deque tu contador no se mueva es el momento de hacer una estrategia parapromover tu sitio. Conoce... [03 /08/06]

531

Los virus informáticos¿Cuántas veces hemos sido víctimas de un virus informático sin darnoscuenta? Seguro que en muchas ocasiones y en ninguna de ellas hemossabido cómo evitarlos. En este cu... [08 /01/03]

24.208

Introducción de redesUna red de área local (LAN: Local Are Network) es la interconexión dedispositivos de Cómputo que pueden comunicarse entre sí y compartir ungrupo de recursos comunes, co... [21 /02/06]

8.915

Confecciona tu propio Wiki conwiki.mailxmail.comCrea tu página web y deja que cualquier visitante la enriquezca ¿Te gusta laidea detrás de la Wikipedia? ¿Te interesa volcar, en formato wiki, tuconocimien... [17 /11/05]

1.506

La cibernéticaLa Cibernética se presenta como un nuevo paradigma científico, y como talcapaz de abordar y brindar solución global a la compleja problemáticaactual. Los protagonist... [09 /03/06]

1.703



http://www.mailxmail.com/cursos-informatica

http://www.mailxmail.com/cursos-internet

http://www.mailxmail.com/curso-manual-html/opiniones

http://www.mailxmail.com/curso-promocion-buscadores-estrategia-no-hay-exito


http://www.mailxmail.com/curso-promocion-buscadores-estrategia-no-hay-exito/opiniones

http://www.mailxmail.com/curso-virus-informaticos-1

http://www.mailxmail.com/curso-virus-informaticos-1/opiniones

http://www.mailxmail.com/curso-introduccion-redes

http://www.mailxmail.com/curso-introduccion-redes/opiniones

http://www.mailxmail.com/curso-confecciona-propio-wiki-wikimailxmailcom

http://www.mailxmail.com/curso-confecciona-propio-wiki-wikimailxmailcom

http://www.mailxmail.com/curso-confecciona-propio-wiki-wikimailxmailcom/opiniones

http://www.mailxmail.com/curso-cibernetica

http://www.mailxmail.com/curso-cibernetica/opiniones




1. Introducción[http://www.mailxmail.com/curso-manual-html/introduccion]

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

Cuando hablamos de páginas Web, nos referimos a las páginas que se utilizan enlos 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, CorelDraw, Publisher, etc. Sin embargo, cuando se diseña la estructura de una página Weben estos programas, el código que permite dar forma a la página Web para seraccedida desde cualquier explorador, queda oculto a los ojos del diseñador de lapágina.

HTML es un lenguaje que utiliza los códigos estandarizados para la creación depáginas Web. Sin embargo, desde este punto no se utilizan objetos para colocar enpantalla, todo lo que se desee hacer y representar, debe ser pensado y previstoantes 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 necesarioentender cómo se escribe el código y en qué programa. El código se puede escribiren cualquier procesador de textos, aunque es recomendable hacerlo en unprograma que no maneje estilos de texto que pueden no ser reconocidos por elexplorador de Internet; puede ser un programa como WordPad, el Bloc de notas oMicrosoft Word.



http://www.mailxmail.com/curso-manual-html/introduccion




2. Estructura de una página Web[http://www.mailxmail.com/curso-manual-html/estructura-pagina-web]Estructura de una página Web

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

<HTML><HEAD><TITLE>Primera página</TITLE></HEAD><BODY>.........</BODY></HTML>

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

La primera instrucción <HTML> indica al explorador de Internet que ahí comienzauna página Web. La siguiente instrucción <HEAD> indica el encabezado de lapágina, es decir el área de la barra de título. <TITLE> indica el título de la páginapropiamente dicho. <BODY> es una instrucción que indica al explorador de Internetque 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) paraindicar al programa que las propiedades aplicadas con esa instrucción se terminanahí donde se pone el signo diagonal. Si el signo de cierre (/) no se aplicaconvenientemente, el programa seguirá aplicando las propiedades de la instrucciónanterior a todas las líneas inferiores, hasta que se encuentre otra instrucción quemodifique las propiedades actuales.



http://www.mailxmail.com/curso-manual-html/estructura-pagina-web




3. Guardado del archivo como página Web[http://www.mailxmail.com/curso-manual-html/guardado-archivo-como-pagina-web]Guardado del archivo como página Web

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

Ejercicio

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

El resultado se muestra a continuación.



http://www.mailxmail.com/curso-manual-html/guardado-archivo-como-pagina-web




4. Modificación de una página Web[http://www.mailxmail.com/curso-manual-html/modificacion-pagina-web]

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 detextos como Microsoft Word, sólo veremos el texto, pero el código no es accesiblepara el usuario.

Si deseamos obtener el código, será necesario abrir el bloc de notas y abrir la páginadesde ahí, utilizando la opción Abrir, y en el cuadro de diálogo Abrir, se elige Todoslos archivos, en la lista Tipo (esto porque la página tiene una extensión diferente alfiltro mostrado). Sin embargo, una manera más cómoda y rápida, es acceder alcó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 unaimagen, un hipervínculo, etc.)

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



http://www.mailxmail.com/curso-manual-html/modificacion-pagina-web




5. Estilos de título[http://www.mailxmail.com/curso-manual-html/esti los-titulo]

HTML maneja seis estilos de título aplicables al texto. Cuando se aplica un estilo, elprograma interpreta el estilo y lo aplica mientras no encuentre un signo de cierre.

Los estilos de título se enumeran de H1 a H6, siendo H1 el más grande y H6 el máspequeño. Aunque el programador tiene la opción de utilizar un tamaño diferentemediante la instrucción FontSize.

A continuación se muestra el código y el resultado de la utilización de títulos en unapágina Web.

El resultado de este código se muestra a continuación.

De aquí en adelante, sólo se mostrará la ventana de resultados en los ejercicios. Elalumno tiene la obligación de usar las instrucciones que se van explicando paraobtener los resultados requeridos en los ejercicios.



http://www.mailxmail.com/curso-manual-html/estilos-titulo




6. Comandos básicos de formateo de texto[http://www.mailxmail.com/curso-manual-html/comandos-basicos-formateo-texto]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>, parasubrayado 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 decarro. 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 deseemosinsertar un salto de línea, debemos incluir esta instrucción en el lugar donde sedesee generar una nueva línea.


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:



http://www.mailxmail.com/curso-manual-html/comandos-basicos-formateo-texto




La instrucción <EM> funciona de forma similar a <I>. Cuando se aplica <EM>, eltexto 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áginaque se muestra a continuación.

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






7. Marcador de párrafo[http://www.mailxmail.com/curso-manual-html/marcador-parrafo]

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

<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 sinmodificadores, traza una línea horizontal predeterminada. Si se incluyenmodificadores, 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 decódigo produciría una línea como ésta:



http://www.mailxmail.com/curso-manual-html/marcador-parrafo




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

<HR Color=Blue>






8. Color e imagen de fondo de la página [http://www.mailxmail.com/curso-manual-html/color-imagen-fondo-pagina]Color de fondo

Puedes aplicar color de fondo a la página utilizando el siguiente modificador:

bgcolor=Color

Por ejemplo:

<body bgcolor=cyan>

Esta instrucción aplica el color CYAN al fondo de la página. La instrucción bgcolor sedebe aplicar dentro de la instrucción <Body>.

Para facilitar la utilización de colores de fondo mediante constantes de color,presentamos la siguiente tabla de colores:

Color Constante

Negro BLACK

Azul BLUE

Verde GREEN

Rojo claro RED

Rosa intenso MAGENTA

Marrón FUCSIA

Gris GRAY

Rosa claro PINK

Amarillo YELLOW

Blanco WHITE

Verde claro GREEN+

Rojo intenso BLUE+

Cián Claro BLUE/RED

Además de que se pueden aplicar combinaciones con modificadores (con el signo +)a cada constante de color, puede utilizar modificadores con el signo /. Por ejemplo,la combinación MAGENTA/YELLOW, produce un color verde oliva claro.

La forma más extensa de obtener colores es utilizando la representaciónhexadecimal del 0 a la F. Por ejemplo, la siguiente línea de código:

<Body Bgcolor="#0FFFFF">

Produce un color azul aguamarina.

Imagen de fondo



http://www.mailxmail.com/curso-manual-html/color-imagen-fondo-pagina




Además de aplicar colores de fondo usando combinaciones como las mencionadasanteriormente, puedes aplicar imágenes como fondo de la página. Para ello, utilizael modificador Img Background=Imagen.

Por ejemplo, la siguiente línea de código aplica una imagen de fondo a la página.

<body img background=imagen.bmp>

Para aplicar una imagen de fondo, debe ubicar la imagen en la misma ruta donde seencuentra la página, en su defecto, deberá especificar la ruta completa en elparámetro IMG BACKGROUND.

La imagen de esta página fue retocada con efecto relieve. Sin embargo, puedeacceder a la galería de imágenes para encontrar alguna imagen que desee aplicar.También puede utilizar una imagen animada de fondo. Para ello, debe buscararchivos con extensión GIF y verificar que sean animados.






9. Color de texto e hipervínculos[http://www.mailxmail.com/curso-manual-html/color-texto-hipervinculos]

Además de modificar el fondo de la página aplicando color de fondo o imágenes, esposible cambiar el color del texto de toda la página, así como el color de losvínculos.

Para cambiar el color del texto de toda la página, use el modificador TEXT=Color.

Por ejemplo:

<body bgcolor=cyan Text=Blue>

Se utiliza para aplicar color de fondo cyan y color de texto azul a toda la página. Sise desea que los hipervínculos no visitados aún tengan un color distinto al colorazul predeterminado, debe hacer lo siguiente:

<body bgcolor=cyan Text=Blue Link=Yellow Vlink=Gray>

Esta instrucción aplica el color amarillo predeterminado para todos los hipervínculosde la página, y el color gris a los hipervínculos visitados.

Ejercicio

Deberás diseñar la página que se muestra a continuación, aplicando posteriormente,a solicitud del profesor, color de fondo o imagen de fondo, así como alineación ylíneas de separación.

La imagen de fondo es una diapositiva de Microsoft PowerPoint con una plantilla de



http://www.mailxmail.com/curso-manual-html/color-texto-hipervinculos




fondo. Además se aplicó un relleno de textura a la diapositiva Después se agregaronlas dos imágenes que se muestran sobre la textura, y se modificó el color negro enla opción Volver a colorear, del menú Formato/Imagen. Los estilos de títuloutilizados para esta página fueron H1, H2, H3 y H5.






10. Manejo de párrafos[http://www.mailxmail.com/curso-manual-html/manejo-parrafos]

Al igual que otros programas, HTML permite al programador modificar la aparienciapredeterminada de los párrafos aplicando sangrías tanto de primera línea como depárrafos, e interlineados.

Sangrías

Para aplicar sangría de primera línea se usa el modificar text-indent. Para aplicarsangría de párrafo se usa el comando Blockquote. Por ejemplo, la siguiente línea decódigo, aplica una sangría de 50 píxeles para la primera línea de un párrafo.

<p style="text-indent:50">Esta es la primera línea de texto con sangría decincuenta píxeles de distancia desde el borde izquierdo.</p>

El resultado de aplicar esta línea de código, es el siguiente:

Además de la sangría de primera línea que puede ser especificada con un número enpíxeles, HTML permite utilizar una sangría automática mediante el comandoBlockquote.

Por ejemplo, la siguiente instrucción muestra cómo se puede aplicar una sangríaautomática mediante el comando Blockquote.

<Blockquote>

Texto y otras instrucciones

</Blockquote>



http://www.mailxmail.com/curso-manual-html/manejo-parrafos




11. Interlineados[http://www.mailxmail.com/curso-manual-html/interlineados]

En un procesador de textos los interlineados se utilizan mediante opciones demenús que permiten cambiar el espacio entre líneas de un párrafo. En HTML, elinterlineado se controla con el modificador Line-height. A diferencia de unprocesador de textos como Microsoft Word que tiene unos interlineadospredeterminados, HTML permite al usuario separar las líneas de un párrafomediante 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árrafomodificado 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 loscomandos de formateo de párrafos para sangrías e interlineados, deberás diseñar lapágina que a continuación se muestra.



http://www.mailxmail.com/curso-manual-html/interlineados




12. Hipervínculos[http://www.mailxmail.com/curso-manual-html/hipervinculos]Hipervínculos

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 visitantehace clic en el hipervínculo, el destino se mostrará en un explorador Web, se abrirá o se ejecutará, en función del tipode 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 .aviabre 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áginaWeb. 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á anotarel nombre del marcador con la instrucción name="#marcador", donde marcador es el identificador utilizado en lainstrucció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 delmismo documento. Observe que los marcadores se inician con las palabras claves <A Name>, para indicar que en esasección inicia un marcador que podrá ser accedido desde cualquier parte del mismo documento, y las referencias aestos marcadores se aplican con la expresión <A Ref=#marcador>, donde marcador, es el nombre del marcador alque se desee acceder.



http://www.mailxmail.com/curso-manual-html/hipervinculos




Ambas páginas fueron desarrolladas en la misma ventana, es decir el código fue escrito de arriba hacia abajo. Lamecá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 conescribir 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 quiereprobar 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.

< h t m l >

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

<body TextColor="blue">

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

< h r >

<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ónrá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. Lostambién llamados hipertextos son los textos o los objetos sobre los que podemos hacer clic para que nos lleven aotra 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 estalección vamos a insertar todos los hipervínculos que tiene que haber en nuestra página.

< b r > < b r >

< / p >

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

< b r > < b r > < b r > < b r > < b r > < b r > < b r > < b r > < b r > < b r > < b r > < b r > < b r > < b r > < b r > < b r > < b r > < b r > < b r > < b r > < b r > < b r >

< b r > < b r > < b r > < b r > < b r > < b r >

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

< b r >

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

< b r >

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






< b r > < b r > < b r > < b r > < b r > < b r > < b r > < b r > < b r > < b r > < b r > < b r >

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

< / b o d y >

< / h t m l >






13. Hipervínculos externos[http://www.mailxmail.com/curso-manual-html/hipervinculos-externos]Hipervínculos externos: A una página Web local

Para organizar de forma más inteligente la información de un sitio Web puedemanejarse más de una página. En cualquier momento será necesario acceder a dichapágina, entonces puede crear un hipervínculo que le permita dirigirse a esa páginade 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 conacceso mediante hipervínculos.

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

<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á unaventana nueva para su contenido.

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

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

< h t m l >



http://www.mailxmail.com/curso-manual-html/hipervinculos-externos




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

<body>

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

< h r >

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

< / b o d y >

< / h t m l >

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

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árdelacon 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 haciendoclic en los hipervínculos de la página.

Ejercicios

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






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






14. A una URL[http://www.mailxmail.com/curso-manual-html/url]

Así como pueden vincularse páginas Web dentro del mismo sitio, también podemoscrear un hipervínculo que nos lleve a un sitio Web. Para ello, debemos utilizar lasiguiente 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:

< h t m l >

<head><tit le>Uso de URL</tit le></head>

<body>

<h1>Uso de URL</h1>

< h r >

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

< / b o d y >

< / h t m l >

Para poder acceder a dichos sitios, deberá estar conectado a Internet. Si pruebaestos 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 siguientesintaxis:

<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



http://www.mailxmail.com/curso-manual-html/url




contenido de Todito.com en una nueva ventana.

Ejercicio

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






15. A un correo electrónico[http://www.mailxmail.com/curso-manual-html/correo-electronico]

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 pulsarun 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 subrayadapara enviar el e-mail, abrirá un programa (en este caso propiamente), OutlookExpress.

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

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

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



http://www.mailxmail.com/curso-manual-html/correo-electronico




Ejercicio

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






16. Inserción de imágenes[http://www.mailxmail.com/curso-manual-html/insercion-imagenes]

En una página Web puede insertar cualquier imagen. Las imágenes deben ser detipo 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 laextensión JPG. Para insertar otro tipo de imagen sólo deberá especificar la extensióncorrespondiente. Las imágenes pueden ser adquiridas de la galería de imágenes deMicrosoft, o de cualquier otra imagen digitalizada. Incluso se pueden crear iconosanimados 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 comoimagen, se escribió un nombre para la imagen y se pulsó guardar.

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



http://www.mailxmail.com/curso-manual-html/insercion-imagenes




17. Tamaño y alineación de una imagen insertada[http://www.mailxmail.com/curso-manual-html/tamano-alineacion-imagen-insertada]

En algún momento será necesario controlar la dimensión de la imagen insertada,sea para aumentarla o para disminuirla. En el ejemplo anterior se usó la instrucción<align=right>, para alinear la imagen a la derecha; además de esta instrucción,puede usar las instrucciones <center> y <align=Left> para ubicar la imagen alcentro, o a la izquierda de la pantalla. Para controlar el tamaño de las imágenes, uselas instrucciones <height=valor> o <Width=valor> para controlar la altura y laanchura de la imagen. También puede usar la instrucción <Border> con un valormayor que 0, para aplicar un marco alrededor de la imagen.

Por ejemplo, la página anterior fue modificada para mostrar dos imágenes, una a laizquierda y otra a la derecha con tamaños de 100 píxeles cada una.

Para poder escribir alrededor del texto debe utilizar la instrucción <align=left> parala imagen insertada. No obstante que si no usa dicha instrucción la imagen sealineará a la izquierda, la instrucción <align=left> permite aplicar el efecto que semuestra en la página.

El código para aplicar obtener el diseño de la página mostrada arriba, se muestra acontinuación.



http://www.mailxmail.com/curso-manual-html/tamano-alineacion-imagen-insertada




18. Aplicación de bordes a imágenes[http://www.mailxmail.com/curso-manual-html/aplicacion-bordes-imagenes]

Se dijo anteriormente que a una imagen insertada en una página Web se le puedeaplicar un marco o borde. Además, si utiliza el modificador ALT, podrá especificarun mensaje o pista, cuando señale con el Mouse a la imagen. Para hacer esto, debeincluir dentro de la instrucción para insertar una imagen, la siguiente sintaxis:

<img src="imagen.jpg" Border=valor Alt="Estudio=Progreso">

Un valor mayor que 0, aplicará un contorno a la imagen insertada. Si utiliza valor 0,será como si omitiera el modificar Border.

La página anterior fue modifica para aplicar contornos a las dos imágenes insertadas.

Cuando el Mouse se ubica sobre la imagen del estudiante, despliega un mensajeinstantáneo aplicado en la instrucción ALT="cadena de mensaje".

Si se desea aplicar espaciado horizontal o vertical, debe utilizar los modificadoreshspace o vspace, con la instrucción de inserción de imágenes. Cuando se aplicaespaciado horizontal, la siguiente imagen o texto se ajusta a la distancia indicada enhspace (en píxeles). Igual sucede cuando se aplica el modificar vspace, la siguienteimagen o párrafo insertado debajo de la imagen, se ajustará a la distancia indicadapor hspace. Por ejemplo, observe la página anterior y se dará cuenta que el texto ala derecha de la imagen, está pegada del lado derecho de la misma. Ahora siobserva la siguiente pantalla, verá que el texto tiene una separación de 20 píxelesrespecto al lado derecho de la imagen. Se debe entender que la separación en ordenhorizontal aplicado a una imagen, afecta a ambos lados de la misma, es decir, siaplico 20 píxeles de separación, se aplicarán 20 a la izquierda, y 20 a la derecha dela imagen.



http://www.mailxmail.com/curso-manual-html/aplicacion-bordes-imagenes




La siguiente pantalla muestra la página de productos de la papelería. Es un mosaicode imágenes insertadas controladas mediante los modificadores Height, Width,hspace y vspace.

El código para obtener la página mostrada arriba, se muestra a continuación.

<img Border=1 src="Agenda.gif" Alt="Agenda Escolar $50.00" Height=80Width=60>

<img Border=1 src="Agenda2.jpg" Alt="Agenda Ejecutiva $100.00" Height=80Width=60 hspace=20>

<img Border=1 src="AgendaElectronica.gif" Alt="Agenda Electrónica $800.00"Height=80 Width=60>

<img Border=1 src="OrganizaDiscos.jpg" Alt="Organizador de discos $120.00"Height=80 Width=60 hspace=20><img Border=1 src="OrganizaLapiz.jpg" Alt="Organizador de lápices $50.00"Height=80 Width=60>






19. Imágenes como hipervínculos[http://www.mailxmail.com/curso-manual-html/imagenes-como-hipervinculos]

Para utilizar imágenes como hipervínculos, se debe usar la misma instrucción quepara los hipervínculos de texto, a excepción de que a continuación de la instrucciónse debe incluir la instrucción de inserción de imágenes.

La siguiente línea de código muestra el ejemplo de inserción de imágenes comohipervínculos.

<a href="carrera.htm"><img border=0 src="carrera.jpg" ></A>

La primera instrucción indica el nombre de la página a la que se desee accedercuando se haga clic en el hipervínculo. La segunda instrucción inserta la imagen enla página Web.

Ejercicios

Con los conocimientos adquiridos hasta este momento, se deberá diseñar la páginaque se muestra a continuación.

Los botones pueden ser creados en PowerPoint o Paint, o Corel Draw. Cada botónrepresenta un hipervínculo, por lo tanto, se deberá crear una página para cadahipervínculo. La última línea de código es una marquesina que se desplaza a travésde toda la pantalla.



http://www.mailxmail.com/curso-manual-html/imagenes-como-hipervinculos




20. Películas[http://www.mailxmail.com/curso-manual-html/peliculas]

De forma parecida a las imágenes, las películas pueden insertarse mediante dosformas, con la extensión .AVI o con la extensión .DAT. De ambas maneras, HTMLinterpretará que se trata de una película y buscará reproducir el archivo en elexplorador.

La siguiente instrucción inserta una película de tipo AVI, de las que se encuentran enla galería de imágenes de Office.

<img border="0" dynsrc="COUNT8.AVI" start="fileopen" >

La primera instrucción indica que se insertará una imagen; la instrucción dynsrc,significa dynamic source (origen dinámico) y prepara al explorador para reproducirun archivo de película. La instrucción Start indica en qué momento iniciará lapelícula, si no tiene parámetros, la película se iniciará automáticamente al abrir lapágina. Puede buscar películas y guardarlas en una carpeta, posteriormente, inserteuna línea de código en el sitio que desee. Para reproducir una película al mover elMouse sobre ella, agregue el parámetro mouseover al modificador start. Si deseaque la película se reproduzca de forma infinita, agregue el parámetro loop con laexpresión infinite. El ejemplo siguiente muestra la forma como debe usar elparámetro loop.

<img border="0" dynsrc="COUNT8.AVI" start="fileopen" loop="infinite">

Además de insertar películas con formato .AVI, HTML le permite insertar películascon extensión .DAT. Por ejemplo, la siguiente instrucción reproduce una películacon extensión .DAT, llamada MUSIC01. Este archivo es un vídeo clip de MichaelJackson. Para reproducir correctamente el archivo de película, la página deberá estaren la misma ruta que el archivo a reproducir o en su defecto, hacer referenciacorrectamente al archivo.

<img border="0" dynsrc="MUSIC01.DAT" start="fileopen">

Para ajustar el tamaño de la película, deberá usar los modificadores Height y Width,junto con la instrucción de inserción de la película. Por ejemplo:

<img border="0" dynsrc="MUSIC01.DAT" start="fileopen" Width="300"Height="200">



http://www.mailxmail.com/curso-manual-html/peliculas




21. Numeración y viñetas[http://www.mailxmail.com/curso-manual-html/numeracion-vinetas]

Al igual que en un procesador de textos u otros programas, el lenguaje HTMLpermite aplicar viñetas, a excepción de que se cuenta sólo con tres tipos diferentesde viñetas.

Viñetas

Para aplicar viñetas debe hacerse uso de la instrucción <UL>. Esta instrucción indicaal explorador que lo que sigue a continuación es una lista con viñetas. Por cadasímbolo utilizado debe usar la instrucción <LI>, la cual se corresponde con cadalínea de dato de la lista. Finalmente debe cerrar la lista de viñetas con la instrucción</UL> .

Las siguientes líneas de código muestran la forma como debe introducirse cadaexpresión en la página Web para su correcta ejecución.

< u l >

<l i>Viñeta 1</ l i>




< / u l >

Si copia estas líneas de código a una página Web, guarde los cambios y actualice lapágina para ver el resultado, debe mostrarse como la figura siguiente:

Si se desea cambiar el tipo de viñeta predeterminada, se debe incluir el parámetro TYPE junto con la instrucción <UL>. Por ejemplo, la siguiente línea de código,aplica el estilo círculo a la lista de viñetas.

<ul type="circle">







http://www.mailxmail.com/curso-manual-html/numeracion-vinetas




< / u l >

El resultado se muestra a continuación:

Otro tipo de viñetas que puede usarse en una lista es el tipo cuadrado. Para ello,utilice el parámetro TYPE con la expresión square. El siguiente ejemplo aplica viñetade tipo cuadrado a la lista.

<ul type="square">





< / u l >

El resultado se muestra abajo.

Si se desea cambiar el color de la lista con viñetas, se debe incluir el parámetro STYLE="Color: nombrecolor". Por ejemplo, la siguiente línea de código aplica unaviñeta de tipo cuadrada, con color de texto y viñeta azul.

<ul type="square" style="color: blue">

Asimismo puede usar la instrucción <Font Color=Color> para modificar el color deltexto.






22. Numeración[http://www.mailxmail.com/curso-manual-html/numeracion]

Además de aplicar viñetas a una lista, puede sangrar una lista si usa una instrucción<UL> dentro de otra. Asimismo, puede usar numeración automática para generalistas de datos numeradas a partir de un valor. Para usar numeración debe aplicar lainstrucción <OL> al principio de la lista y las instrucciones <li> para cada línea dedato; finalmente, debe cerrar la numeración con la instrucción </OL>.

El siguiente fragmento de código es un ejemplo de cómo se debe ordenar una listacon numeración.

< o l >

<l i>Primer número</l i>

<l i>Segundo número</l i>

<l i>Tercer número</l i>

<l i>Cuarto número</ l i>

< / o l >

El resultado de este bloque de código se muestra a continuación.

Para cambiar el tipo de numeración por letras o en representación romana, debeincluir el parámetro type con una expresión siguiente:

Expresión Resultado

I Números romanos con letras mayúsculas.

i Números romanos con letras minúsculas.

A Literales mayúsculas.

a Literales minúsculas

El siguiente bloque de código muestra la forma correcta de utilizar las expresionescon el parámetro type, de manera que se puedan obtener diferentes tipos de viñetas.

<ol type="A">





http://www.mailxmail.com/curso-manual-html/numeracion







< / o l >

Resultado:

Si se desea iniciar la numeración desde un número mayor que 1, entonces debeincluir, junto con la instrucción <OL>, el parámetro start, que indica el númerodonde se desea iniciar la lista.

El siguiente bloque de código se usa para ilustrar el tema en cuestión.

<ol start="5">

<l i>Línea 1</ l i>




< / o l >

El resultado es el siguiente:

Para iniciar con literales en un valor mayor que 1, se debe establecer el númerocorrespondiente a la letra en que se desee iniciar.

Por ejemplo, el siguiente bloque de texto, enumera una lista de temas iniciandodesde la letra F.

<ol type="A" start="6">

<l i>Computadoras</ l i>






<l i>Impresoras</ l i>

<l i>Moni tores</ l i>

<l i>Teclados</ l i>

<li>Cámaras digitales</li>

< / o l >


Ejercicio

Haciendo uso de las instrucciones para inserción de películas, viñetas y numeración,debe diseñar la siguiente página.

Para que los objetos se realicen correctamente debes ajustar la configuración de lapágina al tamaño deseado. Por ejemplo, para el título principal, se usó unadiapositiva de tamaño horizontal de 20cm y 3 cm. Para el globo se usó unadiapositiva de 20 cm. horizontal y 5 cm. vertical. Después de se hayan ajustado lasdiapositivas, se debe diseñar el contenido.






El procedimiento para obtener esta página es el siguiente:1. Se busca una película de tipo GIF la cual se inserta en el lugar donde se encuentralas dos imágenes de personas.2. El título se diseñó en PowerPoint y se guardó como una imagen JPG. Se inserta enel lugar indicado. Asimismo, la imagen del globo junto con el texto alrededor suyose diseñó en PowerPoint y se guardó como imagen JPG. Posteriormente se insertó enel lugar mostrado.3. Las viñetas se deben utilizar fuera de cualquier instrucción de manejo deimágenes.






23. Términos y definiciones[http://www.mailxmail.com/curso-manual-html/terminos-definiciones]

Para facilitar el diseño de índices, vocabularios, diccionarios, enciclopedias y temasafines, HTML cuenta con instrucciones que permiten utilizar una palabra comotérmino definido y una sección asociada que es la definición del término. Es idealpara generar vocabularios, tablas de contenido, diccionarios, etc.

La instrucción para iniciar la lista de expresiones o términos es DL con su respectivocierre. La sintaxis es la siguiente:

< D L >

<DT>Termino</DT>

<DD>Definición del término que puede ser tan largo como el usuario desee.</DD>

< / D L >

DL significa Language Dictionary (Diccionario de Lenguaje) e indica la lista detérminos que se van a definir. DT significa Terms Dictionary (Diccionario detérminos) e indica propiamente el término que se va definir. La definición deltérmino se realiza con la instrucción DD (Dictionary Definition), y en esta instrucciónse puede colocar cualquier cantidad de texto.

El siguiente ejemplo muestra la forma correcta de utilizar las opciones descritasanteriormente.



http://www.mailxmail.com/curso-manual-html/terminos-definiciones




Para el ejercicio anterior se utilizó el estilo "negrita" para remarcar el términodefinido. Sin embargo, puede utilizar dichos términos sin añadir estilos para realizarun ejercicio natural. El código para obtener el resultado mostrado en la páginaanterior, se muestra a continuación.

< h t m l >

<body>

<h1>Diccionario de informática</h1>

< h r >

< d l >

<d t><b>In fo rmát i ca< /b></d t>

<dd>Ciencia que estudia el procesamiento, organización, almacenamiento y

transferencia de la información de a través de una computadora.

<d t><b>Computadora< /b></d t>

<dd>Máquina electrónica capaz de realizar cualquier actividad con la ayuda

del software.

<d t><b>Hardware< /b>< /d t>

<dd>Son todos los componentes físicos de una computadora, como el CPU,

el Mouse, la impresora, los componentes internos, como la memoria, el

microprocesador, etc.

<d t><b>Sof tware< /b>< /d t>

<dd>Es la parte inteligente de la computadora. Esta capacidad de la

computadora de interpretar, calcular y analizar datos la obtiene mediante

los programas diseñados para este fin. Por ejemplo, para cálculos

financieros se utiliza Microsoft Excel; para películas Studio 3DMax y paraanimaciones, Flash, etc.

< / b o d y >

< / h t m l >






Si omite las cláusulas <b> y </b>, su ejercicio se verá de la siguiente manera.

Esta es la forma predetermina de utilizar las herramientas citadas anteriormente.

Ejercicio Usando los conocimientos adquiridos acerca del uso de términos ydefiniciones, diseñe la siguiente página:

El profesor podrá añadir otros elementos como Fondo, color del texto, tamaños detexto y otras opciones según la creatividad del profesor o del alumno. Tambiénpodrá presentarse como un proyecto a manera de tarea para el alumno, de maneraque éste mejore la apariencia del documento actual. Incluso podrá cambiar el






contenido de forma que cuando aparezcan palabras no conocidas, se utilice unhipervínculo que lleve hacia el significado de dicho término.






24. Tablas[http://www.mailxmail.com/curso-manual-html/tablas]

Una tabla está formada por filas y columnas de celdas en las que se puede insertartexto y gráficos.

Se pueden utilizar y personalizar las tablas de varias formas diferentes con el fin dehacerlas más atractivas y fáciles de leer.

Se debe utilizar una tabla para presentar la información en formato de cuadrícula,por ejemplo horarios, información acerca de productos, tarifas, calificaciones dealumnos, etc.

Creación de una tabla

Para crear una tabla se debe usar la instrucción Table, seguida de parámetros queindican la anchura, el color o imagen de fondo, etc.

Ejemplo:

<table>

< / tab le>

Estas dos instrucciones indican al explorador de Internet que se en este lugar de lapágina se va a crear una tabla.

Uso de encabezados de tabla

Después de que se haya indicado al explorador de Internet que se va a crear unatabla, es necesario definir cuántas columnas de tabla se desean utilizar. Para ello sedeben utilizar las instrucciones <TH>, las cuales indican los encabezados de tabla.

Ejemplo:

<Table>

<Th>Columna 1</th><TH>Columna 2><TH>Columna 3</TH>

</ tab le>

Este segmento de código le indica al explorador que usaremos una tabla de trescolumnas. Cada identificador TH que utilice indica una columna de dato que deseerepresentar en la tabla. Más adelante se verá cómo no siempre se deben hacercoincidir las columnas con las filas.



http://www.mailxmail.com/curso-manual-html/tablas




25. Definición de filas[http://www.mailxmail.com/curso-manual-html/definicion-fi las]

Para utilizar filas en una tabla, se debe usar la instrucción TR y TD. TR identifica lafila de datos, y TD es la fila de los datos propiamente dicho.

El siguiente ejemplo muestra la forma como se debe crear una tabla básica basadaen filas y columnas.

< h t m l >

<head><Tit le>Mi primera tabla</t i t le></head>

<body>

Este es una ejemplo de tablas.<br><br>

<Table>

<th>Columna 1</ th><th>Columna 2</ th><th>Columna 3</ th>

< t r >

<td>Dato 1</ td><td>Dato 2</ td><td>Dato 3</ td>

< / t r >

< / tab le>

< / b o d y >

< / h t m l >

El resultado de este código, se muestra en la siguiente gráfica.

Si se desea mostrar la cuadrícula de la tabla, sólo debe usar el modificar Border, conun valor mayor que 0. Por ejemplo, la siguiente línea código, mostrará la cuadrículade la tabla.



http://www.mailxmail.com/curso-manual-html/definicion-filas




26. Control del ancho de la tabla[http://www.mailxmail.com/curso-manual-html/control-ancho-tabla]

Cuando se crea una tabla sin parámetros, ésta se ajusta al ancho de los camposescritos en los encabezados. Si se desea crear una tabla más amplia, se debe usar elmodificar Width con un valor de porcentaje. Por ejemplo, para crear una tabla amitad de pantalla, se debe usar la siguiente instrucción:

<Table Border=1 Width=50%>

El resultado de esta línea de código se muestra en la siguiente gráfica.

Por lo tanto para crear una tabla que ocupe el ancho de la pantalla, se deberáajustar el porcentaje al 100%.

El siguiente ejemplo, muestra la misma tabla anterior a toda la pantalla.

Para aplicar color de fondo a la tabla use el modificar bgcolor seguido de unaconstante de color. Por ejemplo, para aplicar color de fondo cyan a la tabla, use lasiguiente instrucción:

<table Border=1 Width=100% bgcolor=cyan>

Ejercicio

Con los conocimientos adquiridos hasta este momento, se deberá diseñar lasiguiente tabla.



http://www.mailxmail.com/curso-manual-html/control-ancho-tabla




Para aplicar una imagen de fondo a una tabla, deberá usar la instrucción ImgBackground que usamos en el fondo de la página. La siguiente línea de códigomuestra la forma correcta de aplicar una imagen de fondo a una tabla.

<table border=1 width=100% img background="imagen.jpg">

La siguiente gráfica muestra una imagen de fondo aplicada a la tabla.

El procedimiento para lograr este efecto es insertar una imagen en una diapositivade PowerPoint; posteriormente aclararla un poco con la herramienta brillo; despuésguardarla como imagen.






27. Control de celdas[http://www.mailxmail.com/curso-manual-html/control-celdas]

Lo más importante de crear tablas es saber manipular las celdas respecto a lainformación que se desea mostrar. Esto requiere controlar el ancho, alto color defondo de forma particular, combinar celdas, etc.

Digamos que la celda es en sí, una instrucción TD de la tabla. Es decir cada celda esun campo en particular dentro la tabla. Para ello, si queremos aplicar un colordistinto a la celda de los nombres de los alumnos, el código debe ser el siguiente:

<td bgcolor="yellow">Ana Mariela Dominguez Vázquez </td>

Esta línea de código debe repetirla para cada fila de registro de la tabla.

El siguiente ejemplo muestra la misma tabla anterior con los encabezados en colorgris oscuro.

El código completo de la tabla, se lo muestro a continuación.

< h t m l >

<head><Tit le>Mi primera tabla</t i t le></head>

<body>

<h2><center>CAMBRIDGE ENGLISH CENTER</H2>

<H3>REPORTE DE CALIFICACIONES</H3></center>

<Table Border=1 width=100%>

<th bgcolor="gray">No.</th><th bgcolor="gray">Nombre del alumno</th>

<th bgcolor="gray">Calif icación</th>

< t r >



http://www.mailxmail.com/curso-manual-html/control-celdas




<td bgcolor="gray">1</td>

<td bgcolor="yellow">Ana Mariela Dominguez Vázquez </td>

<td bgcolor="cyan">10</td>

< / t r >

< t r >


<td bgcolor="yellow">Marisela Cardozo Vega</td>


< / t r >

< t r >


<td bgcolor="yellow">Emmanuel Rodríguez Velasco</td>


< / t r >

< t r >


<td bgcolor="yellow">Jacinto Marin Dominguez</td>


< / t r >

< t r >


<td bgcolor="yellow">Silvia Nayeli Amador Hdez.</td>


< / t r >

< / tab le>

< / b o d y >

< / h t m l >






28. Combinación de celdas[http://www.mailxmail.com/curso-manual-html/combinacion-celdas]

La combinación de celdas permite obtener diseños de tablas más sofisticados quepueden utilizarse para titulares, marcos de imagen, etc.

Para combinar celdas se usa la instrucción Colspan o Rowspan, ya sea que sedeseen combinar columnas o filas.

Por ejemplo, la siguiente instrucción combina las tres columnas de la primera fila deuna tabla.

<td width="100%" colspan="3" height="34">Fila combinada</td>

Para ilustrar mejor el uso de combinación de celdas, a continuación se muestra lasiguiente tabla.

El código para obtener una tabla con este aspecto se muestra a continuación.

< h t m l >

<head><tit le>Mi tabla combinada</t i t le></head>

<body>

<table Border=1 width=100%>

< t r >

<td width="100%" colspan="4">Primera fila combinada</td>

< / t r >

< t r >

<td width="25%">Columna 1</td>





http://www.mailxmail.com/curso-manual-html/combinacion-celdas





< / t r >

< / tab le>

< / b o d y >

< / h t m l >

La expresión ColSpan indica cuántas columnas se van a combinar, en este indicancuatro columnas. Si se desean combinar filas se debe utilizar la expresión RowSpan.Por ejemplo RowSpan="4" indica que se van a combinar 4 filas.

La siguiente tabla muestra un ejemplo de combinación de columnas y filas.

El código para esta tabla es el siguiente:

< h t m l >

<head>

<title>Pagina nueva 1</tit le>

< /head>

<body>

<table border="1" width="100%">

< t r>

<td width="100%" colspan="4">Fila combinada</td>

< / t r >

< t r>

<td width="25%" rowspan="4">Área RowSpan</td>

<td width="25%">Celda 1</td>








< / t r >

< t r>




< / t r >

< t r>




< / t r >

< t r>




< / t r >

< / tab le>

< / b o d y >

< / h t m l >

Ejercicio

Con los conocimientos adquiridos acerca del uso de tablas, combinación de celdas ytemas anteriores como viñetas, inserción de imágenes y películas, diseña la páginaque se muestra a continuación.






29. Marcos[http://www.mailxmail.com/curso-manual-html/marcos-1]

Una página de marcos es un tipo especial de página HTML que divide la ventana delexplorador en distintas zonas denominadas marcos, cada una de las cuales puedemostrar una página diferente. Por ejemplo, la siguiente gráfica muestra una páginacon tres marcos: Titular, Contenido y Marco principal.

Una página de marcos no incluye contenido visible, es sólo un contenedor queespecifica el resto de las páginas que se van a mostrar y la forma de mostrarlas.Cuando hace clic en un hipervínculo de una página que aparece en un marco, lapágina a la que señala dicho hipervínculo aparece normalmente en otro marco,denominado Marco de destino. Por ejemplo, la página de marcos mostradaanteriormente, muestra realmente cuatro páginas al mismo tiempo en elexplorador: la página de marcos, que es el contenedor y las tres páginas queaparecen en cada uno de los marcos. Las páginas de marcos normalmente seutilizan para los catálogos, las listas de artículos o cualquier otro tipo informaciónordenada en secciones de pantalla. Los autores utilizan páginas de marcos porqueincluyen exploración integrada y presentan una interfaz de usuario coherente (esdecir, la estructura y el diseño de los marcos).

Puede también crear páginas de dos marcos, como muestra la siguiente gráfica.

Para nuestro ejercicio, crearemos una página con dos marcos. El marco izquierdoservirá como contenido, y el marco derecho como marco de destino. Para ello seránecesario crear tres páginas: la primera será la que dividirá la ventana del



http://www.mailxmail.com/curso-manual-html/marcos-1




explorador en dos secciones (como lo muestra la gráfica). La segunda será la que seubique en la sección de contenido, y la tercera, será la que se muestre inicialmenteen el marco de destino.






30. Marcos II[http://www.mailxmail.com/curso-manual-html/marcos-2]

Para generar marcos en una página Web se debe utilizar la instrucción FRAMESET. Elcódigo de la primera página se muestra a continuación.

La instrucción Frameset indica al explorador que se van a utilizar marcos. Cols,identifica el número de columnas que se van a usar, la primera de 200 píxeles y lasegunda con la parte restante de la pantalla. Name es una instrucción que seutilizan en este caso para nombrar las secciones del explorador, para poder hacerreferencia posteriormente al manejar hipervínculos. Target, significa destino, yespecifica el nombre del marco de destino donde se dirigirá el contenido delhipervínculo. Src significa Source (origen), e identifica la página origen mostradainicialmente en cada sección. Noframes es una instrucción que se utiliza en caso deque el explorador de Internet no pudiese mostrar una página con marcos. En estecaso, el Explorador enviará el mensaje que queda entre las líneas de <Body> y</Body>.

Cuando se haya capturado el código, debe guardar el archivo con un nombre que serelacione con la función del código (por ejemplo, marco.htm)

Si abre la página, observará algo como esto:







Izquierda: Contenido. Derecha: Marco de destino.

A continuación, se debe crear la página de contenido. Puede ingresar nuevamente albloc de notas o al programa donde se edita el código y capturar el código quemuestra a continuación. Cuando termine de capturar este código, guarde el archivocomo Contenido.htm, ya que con este nombre, se hizo referencia en la páginaanterior, en la instrucción SRC.

Cuando haya capturado el código y guardado el archivo, abra la página Marco, y






observará lo siguiente:






31. Marcos III[http://www.mailxmail.com/curso-manual-html/marcos-3]

La página tres, es en realidad una página de relleno, es decir esta página semostrará inicialmente, aunque será remplazada por la página correspondiente acada hipervínculo del marco de contenido. Para cada hipervínculo se debe crear unapágina diferente, con la estructura que tiene la página inicial. El código de estapágina se muestra a continuación.

Cuando haya capturado el código, guarde el archivo como Inicial.htm, que es elnombre con el que se hizo referencia a la página en el primer código.Posteriormente, abra el archivo marco, y observará lo siguiente:







Cuando haya hecho esto, habrá comprendido cómo funcionan las páginas Web quemanejan marcos.

Ejercicio

La página anterior contiene cuatro viñetas. Usando las opciones de Hipervínculosdeberás convertir a las cuatro viñetas en hipervínculos que permitan, al hacer clic encada uno, desplazarse a una página correspondiente a la información de la viñeta.

Nota importante. Las páginas a las que se hará referencia deberán ser diseñadascon la misma estructura de las cinco primeras líneas de código de la páginaInicial.htm, para que puedan aparecer en el marco derecho cada vez que se hagaclic en un vínculo de la izquierda.






32. Formularios[http://www.mailxmail.com/curso-manual-html/formularios]

La manera general para que los lectores de nuestra página se puedan comunicarcon nosotros es por medio de un enlace a nuestra dirección de e-mail, con lo querecibiríamos un e-mail convencional. Pero puede ser que lo que necesitemos seasolamente una respuesta concreta a unas opciones que presentaremos nosotrosmismos, o un comentario del usuario, para lo que le suministraremos un espacio endonde introducirlo.

Se puede hacer todo esto, además de otras cosas, utilizando los formularios, conlos que se pueden confeccionar páginas que contengan los elementos necesariospara ello, tal como botones de radio, listas de selección, cajas de introducción detexto y de control, etc.

Los formularios permiten que los demás nos envíen la información directamente anosotros o bien a nuestro servidor, en donde hemos instalado un programa queprocese esta información.

Por ejemplo, vamos a suponer que queremos crear una lista de correo. Los usuariospueden introducir sus nombres y direcciones de e-mail y pulsar un botón de envío.Esos datos los podemos recibir "en bruto" en nuestro correo, con los que haríamosmanualmente dicha lista de correo, sin necesitar ningún programa para ello. Esteproceso es el que vamos a comentar en este capítulo.

La otra posibilidad, de la que únicamente se va a hacer esta mención, es quehubiéramos instalado en nuestro servidor un programa especial para procesar esosdatos y añadirlos a la lista de correo, y que incluso pudiera devolverautomáticamente al usuario algún tipo de información. Para conseguir esto, losformularios necesitan ejecutar programas o scripts por medio del CGI (CommonGateway Interface). El CGI permite a los formularios ser procesados por programasescritos en cualquier lenguaje, aunque los más usados en Internet son el Perl y el C.

Estructura de un formulario

La estructura general de un formulario es:

1. Etiqueta de inicio:

<FORM ACTION="mailto:dirección_de_email" METHOD="POST"

ENCTYPE="TEXT/PLAIN">

2. Cuerpo del formulario, con los distintos elementos para poder introducir losdatos.

3. Botones de envío y de borrado.

4. Etiqueta de cierre </FORM>

Etiqueta de inicio

El atributo ACTION indica la acción que se debe efectuar y que es que los datos seanenviados por e-mail a la dirección indicada. (Si hiciéramos uso del CGI, seríaprecisamente aquí donde indicaríamos su localización en el servidor, que



http://www.mailxmail.com/curso-manual-html/formularios




precisamente aquí donde indicaríamos su localización en el servidor, quehabitualmente es el directorio cgi-bin, para que procese los datos).

El atributo METHOD=POST indica que los datos sean inmediatamente enviados porcorreo a la dirección de e-mail, cuando el usuario pulse el botón de envío.

Con el atributo ENCTYPE="TEXT/PLAIN" se consigue que las respuestas lasrecibamos como un fichero de texto, perfectamente legible y sin codificar.






33. Elementos para introducir los datos[http://www.mailxmail.com/curso-manual-html/elementos-introducir-datos]

Los vamos a dividir en tres clases:

1. Introducción por medio de texto.

2. Introducción por medio de menús.

3. Introducción por medio de botones.

La introducción de los datos se consigue por medio de la etiqueta:

<INPUT TYPE="xxx" NAME="yyy" VALUE="zzz">

En donde:

xxx es la palabra que indica el tipo de introducción.

yyy es el nombre que le asignamos nosotros a la variable de introducción del dato.

zzz es la palabra asociada a un elemento.

Ejemplo:

<FORM ACTION="mailto:dirección_de_email" METHOD="POST"ENCTYPE="TEXT/PLAIN">

Escribe tu apellido:

<BR><INPUT TYPE="text" NAME="Apellido">

</FORM>

Este segmento de código permite al usuario escribir su apellido mediante un cuadrode texto.

Si el usuario introduce su apellido, recibiremos en nuestro e-mail, algo como esto:

Apellido=González

La longitud de este campo es por defecto de 20 caracteres. Se puede modificardicha longitud incluyendo en la etiqueta el atributo SIZE="número". Por otra parte,cualquiera que sea la longitud del formulario, si no se indica nada, el usuario puedeintroducir el número de caracteres que desee. Se puede limitar la longitud máxima,incluyendo en la etiqueta el atributo MAXLENGTH="número".

Ejemplo:

<INPUT TYPE="text" NAME="Apellido" SIZE="10" MAXLENGTH="12">

Esta instrucción limita el campo a 10 caracteres visibles y 12 caracteres de entradamáxima.

Puede también convertir el texto introducido a caracteres comodines para simularuna contraseña, ello convierte la expresión del cuadro de texto en una serie deasteriscos.



http://www.mailxmail.com/curso-manual-html/elementos-introducir-datos




Ejemplo:

<INPUT TYPE="password" NAME="Apellido" SIZE="10" MAXLENGTH="12">






34. Áreas de texto[http://www.mailxmail.com/curso-manual-html/areas-texto]

Cuando se necesite utilizar grandes áreas de texto como comentarios, explicacionesde registro, contratos, licencias, etc., se debe utilizar un control de área de texto.

Esto se consigue con la etiqueta de inicio:

<TEXTAREA NAME="yyy" ROWS="número" COLS="número">

ROWS representa el número de filas, y COLS el número de columnas. Se debefinalizar con la etiqueta de cierre </TEXTAREA>

Botones de envío y borrado

Un elemento muy importante que permiten manipular la información de losformularios son los botones de Envío y Borrado. Para aplica a un formulario unbotón de envío, se deberá introducir la siguiente instrucción.

<INPUT TYPE="submit" VALUE="Texto del botón">

En donde Texto del botón es el texto que queremos que aparezca en el botón.

Sin embargo, además de colocar en nuestro formulario un botón de envío, deberáaplicarse un botón que permita restablecer los cuadros de texto así como lasopciones predeterminadas del formulario. Generalmente esto se consigue con lasiguiente instrucción:

<INPUT TYPE="reset" VALUE="Texto del botón">



http://www.mailxmail.com/curso-manual-html/areas-texto




35. Ejemplo de formulario[http://www.mailxmail.com/curso-manual-html/ejemplo-formulario]

Para ilustrar lo dicho hasta ahora, haremos un formulario que permita al usuariointroducir alguna información mediante cajas de texto, áreas de texto y botones.

El código para obtener el aspecto mostrado del formulario, es el siguiente:

< h t m l >

<head><tit le>Formulario de registro</t i t le></head>

<body>

<center>

<h3>Cambridge English Center</h3>

<h4>Formulario de Registro</h4>

</center>

< h r >

Sea tan amable de rellenar el siguiente formulario.

< b r >

<FORM ACTION="mailto:dirección_de_email" METHOD="POST"ENCTYPE="TEXT/PLAIN">



http://www.mailxmail.com/curso-manual-html/ejemplo-formulario




Nombre: <BR>

<INPUT TYPE="text" NAME="Apellido">

< b r >

Dirección: <BR>

<INPUT TYPE="text" NAME="Dirección">

< b r >

Teléfono: <BR>

<INPUT TYPE="text" NAME="Telefono">

< b r >

Comentarios:<br>

<TEXTAREA NAME="comentario" ROWS="7" COLS="40">

</TEXTAREA>

<INPUT TYPE="submit" VALUE="Enviar datos">

<INPUT TYPE="reset" VALUE="Borrar datos">

</FORM>

< / b o d y >

< / h t m l >






36. Opciones de menús[http://www.mailxmail.com/curso-manual-html/opciones-menus]

Una forma muy común de seleccionar opciones en un formulario es mediante lasopciones de menú (listas desplegables). Para incluir un menú de opciones en unformulario, debemos hacer lo siguiente:

<Select Name="Nombre">

<Option>Opción 1

<Option>Opción 2

<Option>Opción 3

</Select>

Donde Option indica cada una de las opciones del menú. La siguiente figuramuestra una forma real de la utilización de menús.

El código para obtener un menú como el anterior, se muestra a continuación.

Estado civil:<br>

<Select Name="EdoCivil">

<option>Casado (a)

<option>Soltero (a)

</select>

< b r >

Si se desea crear una lista de selección con barras de desplazamiento, se debeintroducir una instrucción como la siguiente:

<SELECT NAME="Nombre" Multiple Size="nFilas">

Donde nFilas es el número de filas que se muestran en el control y que se podránseleccionar arrastrando el control sobre ellas.

La siguiente figura muestra un ejemplo de ello.



http://www.mailxmail.com/curso-manual-html/opciones-menus




El código que permite obtener este método es el siguiente:

Materias de interés:<br>

<Select Name="Materias" Multiple Size=4>

<option>Office XP

<option>Diseño gráfico

<option>Bases de datos

<option>Redes Lan

</select>

Cuando la lista de opciones es más larga que la altura predeterminada del control,se muestra automáticamente la barra de desplazamiento.

Ejemplo:






37. Botones de radio[http://www.mailxmail.com/curso-manual-html/botones-radio]

Los botones de radio permiten seleccionar una de varias opciones dentro de unformulario. Por ejemplo, en nuestro ejercicio, hemos incluido una expresión quesolicita al usuario indicar su sexo, y muestra dos opciones de las cuales sólo sepodrá elegir una.

El usuario podrá seleccionar cualquiera de las dos opciones mostradas.

El código para obtener estas opciones, se muestra a continuación.

Sexo:<br>

<input type="radio" Name="M" Value="Hombre">Hombre

<input type="radio" Name="F" Value="Mujer">Mujer

< b r >

Según el número de opciones que se desee aplicar, será el número de veces quedebe aparecer la instrucción en el código.



http://www.mailxmail.com/curso-manual-html/botones-radio




38. Casillas de verificación[http://www.mailxmail.com/curso-manual-html/casillas-verificacion]

Permiten al usuario seleccionar varias opciones dentro de un formulario. Porejemplo, existen páginas en Internet que permiten suscribirse a algún boletín y nosdan la opción de "marcar" qué tipo de información queremos recibir en nuestrocorreo.

La instrucción para aplicar una casilla de verificación es la siguiente:

<input type="checkbox" name="Nombre">Texto de la opción

La siguiente figura muestra un ejemplo de una situación real donde permitimos alusuario seleccionar las opciones que quiera.

El código se muestra a continuación.

Deseo información sobre:<br>

<input type="checkbox" name="IniciosCursos">Inicios de cursos

<input type="checkbox" name="Autocad">Diplomado de AutoCad

<input type="checkbox" name="Ingles">Cursos de inglés

< b r >

Si se desea que una casilla aparezca seleccionada de forma predeterminada,debemos usar la instrucción CHECKED en la línea donde queramos seleccionar dichaopción.

Por ejemplo:

<input type="checkbox" name="IniciosCursos">Inicios de cursos

Dará un resultado como el que se muestra en la siguiente figura:

Ejercicio

Haciendo uso de las herramientas estudiadas hasta este momento, debe diseñar lasiguiente página, utilizando campos de texto, listas de menús, botones de opciones,casillas de verificación, etc. Asimismo debe utilizar una tabla para organizar loscampos como los que se muestran en la página. El tipo de fuente utilizado es Arial.



http://www.mailxmail.com/curso-manual-html/casillas-verificacion




Visita más cursos como este en mailxmail:[http://www.mailxmail.com/cursos-informatica][http://www.mailxmail.com/cursos-internet]

¡Tu opinión cuenta! Lee todas las opiniones de este curso y déjanos la tuya:[http://www.mailxmail.com/curso-manual-html/opiniones]

Cursos similares

Cursos Valoración Alumnos Vídeo

Introducción de redesUna red de área local (LAN: Local Are Network) es la interconexión dedispositivos de Cómputo que pueden comunicarse entre sí y compartir ungrupo de recursos comunes, co... [21 /02/06]

8.915

Internet desde ceroConocer que es y como funciona internet te ayudará a moverte masconfiado en la red. En este breve curso tenes información útil para saberporque es así aquello que hace... [30 /03/07]

10.811

Los virus informáticos¿Cuántas veces hemos sido víctimas de un virus informático sin darnoscuenta? Seguro que en muchas ocasiones y en ninguna de ellas hemossabido cómo evitarlos. En este cu... [08 /01/03]

24.208

Promoción en buscadores "sin estrategia



http://www.mailxmail.com/cursos-informatica

http://www.mailxmail.com/cursos-internet

http://www.mailxmail.com/curso-manual-html/opiniones

http://www.mailxmail.com/curso-introduccion-redes

http://www.mailxmail.com/curso-introduccion-redes/opiniones

http://www.mailxmail.com/curso-internet-cero

http://www.mailxmail.com/curso-internet-cero/opiniones

http://www.mailxmail.com/curso-virus-informaticos-1

http://www.mailxmail.com/curso-virus-informaticos-1/opiniones





Promoción en buscadores "sin estrategiano hay éxito" Cuando estas planificando lanzar tu primer sitio Web o estas asombrado deque tu contador no se mueva es el momento de hacer una estrategia parapromover tu sitio. Conoce... [03 /08/06]

531

Introducción al PC. Windows, Word, ExcelIntroducción al PC. Windows, Word, Excel. Conoce los componentes de unordenador o computadora tipo PC. Estudiaremos los tipos dealmacenamiento del PC, ... [29 /04/09]

12.290





http://www.mailxmail.com/curso-promocion-buscadores-estrategia-no-hay-exito/opiniones

http://www.mailxmail.com/curso-introduccion-pc-windows-word-excel

http://www.mailxmail.com/curso-introduccion-pc-windows-word-excel/opiniones




manual html - mailxmail.comimagenes.mailxmail.com/cursos/pdf/0/manual-html-5570.pdf · accedida...

Documents