jueves, 15 de septiembre de 2011

HTML

1.-¿Como se crean las tablas dentro de un documento HTML considerando sus atributos?

Tablas

<TABLE> <TR> <TD>

Las tablas surgieron con la versión HTML 3.0. Las tablas nos permiten representar y ordenar cualquier elemento de nuestra presentación en diferentes filas y columnas de modo que podamos resumir grandes cantidades de información de una manera que puede representarse rápida y fácilmente.
El contenido de una tabla lo debemos desarrollar entre las tags <table>.....</table>.
Las tablas se definen fila a fila, celda a celda, comenzando desde la celda superior izquierda. Las columnas se calcularán automáticamente según las celdas que hay en cada fila.
Cada fila de la tabla se indica mediante las tags <tr>.....</tr>. Las tags <th> y <td>con sus correspondientes tags de cierre, indican para indicar las filas individuales dentro de cada fila. Las tags <th>.....</th> indican que se trata de celdas que sirven como encabezado de tabla y suelen visualizarse en negrita. Las tags <td>.....</td> indican que se trata de celdas comunes.

<HTML> 
<HEAD> 
<TITLE>Ejemplo 10</TITLE> 
</HEAD> 
<BODY> 

<H1>Tablas b&aacute;sicas</H1> 

<TABLE BORDER="1"> 
<TR> 
   <TH>Cabereca 1</TH> 
   <TH>Cabereca 2</TH> 
   <TH>Cabereca 3</TH> 
</TR> 
<TR> 
   <TD>Dato 1</TD> 
   <TD>Dato 2</TD> 
   <TD>Dato 3</TD> 
</TR> 
<TR> 
   <TD>Dato 4</TD> 
   <TD>Dato 5</TD> 
   <TD>Dato 6</TD> 
</TR> 
</TABLE> 

</BODY> 
</HTML> 


2.-¿Como colocar dibujos a una lista, es decir, como listar elementos en HTML utilizando símbolos, no viñetas comunes o numeración común?


LISTAS DE ELEMENTOS
Existen tres tipos de listas, numeradas, sin numerar y de definición. Las listas numeradas representarán los elementos de la lista numerando cada uno de ellos segun el lugar que ocupan en la lista. Para este tipo de lista se utiliza la etiqueta <OL></OL> . Cada uno de los elementos de la lista irá precedido de la etiqueta <LI> . La etiqueta <OL> puede llevar los siguientes parámetros :
start = num Indica que número será el primero de la lista. Si no se indica se entiende que empezará por el número 1. type = tipo Indica el tipo de numeración utilizada. Si no se indica se entiende que será una lista ordenada numéricamente. Los tipos posibles son :

1 = Numéricamente. (1,2,3,4,... etc.)
a = Letras minúsculas. (a,b,c,d,... etc.)
A = Letras mayúsculas. (A,B,C,D,... etc.)
i = Numeros romanos en minúsculas. (i.ii,iii,iv,v,... etc.)
I = Números romanos en mayúsculas. (I,II,III,IV,V,... etc.) 

Ejemplo		Resultado
<OL> 
<LI> España
<LI> Francia
<LI> Italia
<LI> Portugal
</OL> 
  1. España
  2. Francia
  3. Italia
  4. Portugal
<OL type = A > 
<LI> España
<LI> Francia
<LI> Italia
<LI> Portugal
</OL> 
  1. España
  2. Francia
  3. Italia
  4. Portugal

Las listas sin numerar representan los elementos de la lista con un "topo" o marca que antecede a cada uno de ellos. Se utiliza la etiqueta <UL></UL> para delimitar la lista, y <LI> para indicar cada uno de los elementos. La etiqueta <UL> puede contener el parámetro type que indica la forma del "topo" o marca que antecede a cada elemento de la lista. Los valores de type pueden ser disk , circle o square , con lo que el topo o marca puede ser un disco, un circulo o un cuadrado.
EjemploResultado
<UL type = disk > 
<LI> España
<LI> Francia
<LI> Italia
<LI> Portugal
</UL> 
  • España
  • Francia
  • Italia
  • Portugal
<UL type = square > 
<LI> España
<LI> Francia
<LI> Italia
<LI> Portugal
</UL> 
  • España
  • Francia
  • Italia
  • Portugal

Las listas de definición muestran los elementos tipo Diccionario, o sea, término y definición. Se utiliza para ellas la etiqueta <DL></DL> . El elemento marcado como término se antecede de la etiqueta <DT> , el marcado como definición se antecede de la etiqueta <DD> .

EjemploResultado
<DL> 
<DT> WWW
<DD> Abreviatura de World Wide Web
<DT> FTP
<DD> Abreviatura de File Transfer Protocol
<DT> IRC
<DD> Abreviatura de Internet Relay Chat
</DL>		WWW Abreviatura de World Wide Web FTP Abreviatura de File Transfer Protocol IRC Abreviatura de Internet Relay Chat
Existen otros dos tipos de listas menos comunes. Las listas de Menú o Directorio se comportan igual que las listas sin numerar. La lista de Menú utiliza la etiqueta <MENU></MENU> y los elementos se anteceden de <LI> El resultado es una lista sin numerar mas "compacta" es decir, con menos espacio interlineal entre los elementos. La lista de Directorio utiliza la etiqueta <DIR></DIR> y los elementos se anteceden de<LI> . Los elementos tienen un limite de 20 caracteres.






3.-¿Como se ase un mapeo de imagen en HTML (mapas de imágenes)? 

Mapas de imágenes

<MAP> <AREA>

Puede hacer que parte de la imagen sea un enlace a otra página, es decir, puede hacer un mapa sobre la imagen de manera que secciones de la imagen sean enlaces. Las tags usadas para esto son:
  • Las tags <map>.....</map> identifican que vamos a crear un mapa de imágenes. Generalmente, lleva asociado el atributo name= al que le sigue entre comillas el nombre del mapa.
  • La tag <area> define las áreas que vamos a poder activar en esa imagen. A esta tag le acompañan los siguientes atributos:
    • shape= Entre comillas estableceremos el tipo de área a definir. Puede tratarse de rect (rectangular), poly (poligonal) o circle (circular).
    • Coords= Entre comillas indicaremos los pares de coordenadas de cada punto del área a activar. Estas coordenadas las podemos averiguar utilizando un programa de edición de imágenes. En las áreas rectangulares deben especificarse las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha. En las poligonales especificaremos las coordenadas de todos los vértices del área. En las circulares indicaremos las coordenadas del centro del circulo y el valor del radio.
    • Href= Como ya sabe, indica la dirección, entre comillas, de la página web a la que accede si pinchamos en un área determinada.
Finalmente, debe saber que para que una imagen sea tratada como un mapa, además de el código anteriormente descrito, debe incluir en la tag de imagen correspondiente a la imagen a mapear el atributo usemap="#nombre del mapa".


<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210
    BORDER=0 ALT="Un bebé" USEMAP="#bebe1">
<MAP NAME="bebe1">
  <AREA SHAPE=CIRCLE COORDS="60,56,47" 
      HREF="#"  ALT="Cabeza">
  <AREA SHAPE=POLY COORDS="3,182,36,178,
      44,165,60,169,66,184,62,196,
      43,201,35,190,0,193,0,183" 
 HREF="#"  ALT="Sonajero">
</MAP>


<HTML> 
<HEAD> 
<TITLE>Ejemplo 13</TITLE> 
</HEAD> 
<BODY> 

<H1>Mapas de im&aacute;genes</H1> 

<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un beb&eacute;" USEMAP="#bebe1"> 

<MAP NAME="bebe1"> 
<AREA SHAPE=CIRCLE COORDS="60,56,47" HREF="#" ALT="Cabeza"> 
<AREA SHAPE=POLY COORDS="3,182,36, 178,44,165, 60,169,66, 184,62,196, 43,201,35, 190,0,193,0,183" HREF="#" ALT="Sonajero"> 
</MAP> 

</BODY> 
</HTML> 


4.-¿Como implementar los enlace, vínculo y hinpervinculos entre documentos HTML.?

Los vínculos de hipertexto o hipervínculos (anclajes) son elementos de una página HTML que, al hacer clic sobre ellos, permiten a los lectores navegar hacia una nueva dirección. (el hipervínculo aparece subrayado de forma predeterminada). Al navegar por la Web, los hipervínculos son los que conectan las páginas Web unas con otras. Se usan para dirigirse:
  • a otro punto en el mismo documento
  • a un archivo HTML en una ubicación diferente del equipo que aloja la página
  • a otro equipo
El principal atributo de los anclajes es href. Se escribe así:
<a href="Dirección o URL"> .. </a>
VÍNCULOS EXTERNOS
Un vínculo externo es un vínculo a una página *** mediante su dirección URL
. Por ejemplo: 
<a href="http://www.commentcamarche.net">Comment ça marche? </a>

VÍNCULOS LOCALES

Un vínculo puede apuntar a una página ubicada en el mismo equipo, reemplazando la dirección URL con el archivo de destino.
Esta ubicación del vínculo puede definirse de forma relativa, describiendo el archivo de destino con relación al archivo fuente. Si el archivo fuente es "index.html" ubicado en el directorio principal puede escribirse un vínculo hacia él:
<a href="../index.html"> ... </a>
Este vínculo puede definirse de forma absoluta escribiendo la dirección del archivo de destino:
<a href="file:///drive:/directory/index.html"> ... </a>
VÍNCULOS LOCALES
También es posible crear un enlace a un punto dentro de una página, es decir, marcar un punto preciso en la página donde el hipervínculo llevará al lector. Los vínculos internos se definen con el atributo NAME o ID. La sintaxis siguiente debe usarse cuando desee que el destino sea:
<a name="vínculo_interno"> ... </a>
Este es el vínculo a esa ubicación:
<a href="#vínculo_interno"> ... </a>
Con estas etiquetas, puede permitir al usuario subir o bajar por la página, o acceder a una sección especial en otra página:
<a href="url/nombre_archivo.html#vínculo_interno"> ... </a>
Publicado por en

2 comentarios:

  1. Dkno17 de septiembre de 2011, 16:13

    Sonia, muy buena la información de tu segunda actividad, sin embargo la primera me la dejaste muy pobre, hay que buscar más información ya que faltó un buen.

    Saludos...

    ResponderEliminar
  2. sonia18 de septiembre de 2011, 19:11

    gracias...
    am no pude aser las practicas..
    no l entendi....

    ResponderEliminar

Suscribirse a: Enviar comentarios (Atom)