lunes, 7 de mayo de 2012

FORMULARIOS





7. SESIÓN FORMULARIOS

7.1.- Formulario <form> 

 FORM ACTION="mailto:tulogin@tuservidor.pntic.mec.es" METHOD="post" ENCTYPE="text/plain">

...
</FORM>


7.2.- Áreas de texto <textarea> 


 <TEXTAREA NAME="comentario" ROWS=3 COLS=50>
Introduzca aquí sus comentarios

</TEXTAREA>

Este código produciría el siguiente resultado:



7.3.- Elementos de entrada        

   < INPUT TYPE="checkbox" NAME="nivel" VALUE="eso"> ESO <BR>     
            ESO


< INPUT TYPE="radio" NAME="sexo" VALUE="hombre" CHECKED> Hombre
                       Hombre

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






7.4.- Campos de selección <select> ...   


Una variante de las listas de opciones son los menús con barras de desplazamiento
<SELECT NAME="americanos" SIZE=6> <OPTION>España
<OPTION>México
<OPTION>Argentina
<OPTION>Costa Rica
<OPTION>Panamá
<OPTION>Belice
<OPTION>Honduras
<OPTION>Bolivia
<OPTION>Chile
<OPTION>Paraguay
</SELECT>




MARCOS




6. SESIÓN MARCOS

6.1.- Conjunto de marcos <frameset>  


 <HEAD><TITLE> Título de la página </TITLE></HEAD>
     <FRAMESET ROWS=75,*>

6.2.- Marco <frame>


<FRAMESET ROWS=20%,*>
               <FRAME SRC="frames2.htm">
               <FRAME SRC="frames3.htm">
        </FRAMESET>






6.3.- Sin marcos <noframes> 

  <NOFRAMES>
         <BODY>
             Lo siento,su navegador no soporta frames.
             Pulse <a href="frames1.htm>aquí </A> 
             para acceder a los contenidos de estas páginas.
         </BODY>
     </NOFRAMES>

6.4.- Destino del enlace  

Los enlaces de la página frames4.htm , que es la que se carga en el margen izquierdo,se escriben de la forma:

<A HREF="frames1.htm" TARGET=principal>Frame 1 </A>



















TABLAS




5. SESIÓN TABLAS

5.1.- Tabla <table>

<TABLE> y </TABLE> son las etiquetas donde está contenida la tabla

 

5.2.- Fila <tr>

<TR> y </TR> son las etiquetas que indican el comienzo y fin de una  fila (<th> y </th> si es una fila de cabecera)


 

5.3.- Columna o celda <td>  

       <TD> y </TD> señalan una celda.


5.4.- Formato de la tabla  

 <TABLE >
     <TR>
          <TD>1 </TD> <TD> 2 </TD>
     </TR> <TR>
          <TD>3 </TD> <TD> 4</TD>
</TR>
</TABLE>







5.5.- Formato de las celdas

Las etiquetas que soportan las filas y las celdas son


WIDTH="30". Ancho de toda la fila o celda. También se puede dar en %ALIGN=" left", "right", "center". Alinea el contenido a la izquierda, derecha o                    centroVALIGN="top" , "middle" o "bottom". Alinea el contenido verticalmente arriba, en                   medio o abajoBGCOLOR="#AACCEE". Pone un fondo del color especificado a la celda o filaCOLSPAN=3. Especifica el número de columnas que abarca la filaROWSPAN=2. Especifica el número de filas que abarca la columna





5.6.-Encabezado de columna <th>   

<TH COLSPAN=2 BGCOLOR="#6D8FFF> Este es el título</TH>

5.7.- Título de tabla <caption>

<caption>
Se ha finalizado este verano, llega el otoño
</caption>

5.8.- Combinar celdas
A traves del atributo colspan se especifica el numero de columnas por las que se extendera la celda
A traves del atributo colspan se especifica el numero de filas por las que se extendera la celda
  <th colspan="2">PERRO</th>
    
<th rowspan="2">HOMBRE</th>




domingo, 6 de mayo de 2012

IMAGENES


4. SESIÓN IMÁGENES 

 

4.1.- Imagen <img> 

 La etiqueta para incluir una imagen es la siguiente:
<IMG SRC="URL"> (no tiene etiqueta de cierre)
donde URL es la dirección de la imagen. La URL puede ser relativa o absoluta. Unos ejemplos aclararán este concepto:
http://platea.pntic.mec.es/~abercian/guiahtml/gifs/bolaazul.gif<IMG SRC="gifs/nido.gif"> se verá como:  Esta es una dirección relativa.
http://platea.pntic.mec.es/~abercian/guiahtml/gifs/bolaazul.gif<IMG SRC="http://spaceart.com/solar/raw/sat/saturn4.jpg"> insertaría en el lugar del documento donde hubieras puesto la etiqueta 


4.2.-Formatos de imagen   
       tienen diferentes extensiones bmp, tiff, dib, wmf, etc. <a href="URL de la imagen final"><img src="URL de la imagen que se ve con la página"></a>


4.3.- Texto alternativo

Cuando una imagen no puede ser visualizada en el navegador, cosa que puede ocurrir al especificar mal el valor del atributo src, aparece un recuadro blanco con una X roja en su lugar, junto con el nombre de la imagen.

Por ejemplo, imagina que deseamos mostrar una imagen llamada gatito.gif, con el texto alternativo Imagen gato, para ello insertamos el siguiente código:
<img src="gatito.gif" alt="Imagen gato" >
Pero hemos cometido un error, ya que dicha imagen no se encuentra en el mismo directorio que el documento actual, sino que se encuentra dentro de la carpeta imagenes. En lugar de la imagen se mostrará lo siguiente:


Si en lugar del código anterior hubiéramos insertado el siguiente código:
<img src="imagenes/gatito.gif" alt="Imagen gato" >
La imagen habría mostrado correctamente:



4.4.- Borde de una imagen 

 <img src =”mono.jpg” , border=1 >
hay diferentes bordes 

4.5.-Tamaño de una imagen 

<img src =”mono.jpg”align=left , hspace=10 , width=250 , hight=170 alt="Mono"

4.6.- Alineación de una imagen  

             ALIGN=
Nos indica la posición de la imagen respecto del texto. Después del signo igual, pueden ir los valores:
TOP si queremos que el texto esté alineado con la parte superior de la imagen
MIDDLE alinea el texto con la parte central de la imagen
BOTTOM alinea el texto con la parte inferior de la imagen
LEFT alinea la imagen a la izquierda de la página
RIGHT alinea la derecha





HIPERENLACES



3. SESIÓN HIPERENLACES 

 

   3.1.- Hiperenlace <a>   

          Veamos un ejemplo para saltar al inicio de esta página. Escribiríamos en el lugar desde el que           queremos saltar:

                      <A HREF="#inicio"> Ir al Inicio</A>



3.2.- Tipos de referencias 

     *  Por su nombre de entidad: Cada referencia de caracteres tiene una entidad asignada. El formato apra insertar un símbolo por su nombre de entidad está compuesto por un símbolo "&" seguido de su nombre de entidad y un punto y coma (";"). Por ejemplo, el símbolo de la libra esterlina ("£") puede ser insertado como "&pound;".
     *Por su valor decimal: Tal como con las entidades, un número único es asociado con cada referencia de caracteres. El formato es compuesto por un símbolo "&" seguido de un signo numeral ("#"), el número asociado y un punto y coma (";"). Por ejemplo, el símbolo de la libra esterlina ("£") puede ser insertado como "&#163;".
    *Por su valor hexadecimal: Este método funciona exactamente como el del valor decimalcon la diferencia que el número se escribe en formato hexadecimal y una "x" (en minúscula) se agrega a continuación del signo numeral ("#"). Las letras en el número hexadecimal deben ir en mayúsculas. Por ejemplo, el símbolo de la libra esterlina ("£") puede ser insertado como "&#xA3;".
3.3.-Destino del enlace 

                El destino del enlace determina en qué ventana va a ser abierta la página vinculada, se                     especifica a través del atributo target al que se le puede asignar los siguientes valores:
                *_blank:
                      Abre el documento vinculado en una ventana nueva del navegador. 
               * _parent:
                     Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el                            conjunto  de marcos padre.
              * _self:
                   Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana                    que  el   vínculo.
              * _top:
                 Abre el documento vinculado en la ventana completa del navegador.





3.4.-Formato de los enlaces  

 <A HREF="URL"> Texto del enlace</A>

           *link: permite determinar el color de los enlaces sin                visitar (enlace que no ha sido pulsado ninguna vez).
      *alink:permite determinar el color del enlace activo                (enlace que acaba de ser pulsado).
      *vlink: permite determinar el color de los enlaces                  visitados (enlaces que ya han sido pulsados).

    Por ejemplo, al insertar el siguiente código:
...
<body
link="#FF0000" vlink="#FF0099" alink="#FF9900">
...

<a
href="http://www.aulaclic.com" target ="_blank">www.aulaclic.com</a>
...

3.4.- Puntos de fijación. Anclas  

Y en el sitio exacto adonde queremos saltar, debemos poner la siguiente etiqueta:

<A NAME="inicio"> </A> 






3.5.-Otros tipos de enlaces 

  • <A> (si usan HREF)
  • <LINK>
  • <IMG>
  • <INPUT> (si tienen el atributo SRC)
  • <ISINDEX>
  • <FORM> (con método GET) 

FORMATO DE TEXTO


2.-SESIÓN FORMATO DE TEXTO 


2.1.- Caracteres especiales y espacios en blanco  

<P> Se utiliza para que los párrafos queden separados por una línea en blanco. Si solo quieres escribir un punto y aparte debes usar <BR>. Las marcas inicial y final son <P> y </P>. La etiqueta <P> admite los atributos:
ALIGN="left" , ALIGN="right" , ALIGN="center" y ALIGN="justify" para alinearlo a la izquierda, a la derecha, centrarlo o justificarlo totalmente. Por defecto está alineado a la izquierda.


2.2.- Comentarios saltos de línea <br>

 <BR> Este elemento sólo tiene marca inicial e indica un salto de línea, es decir un punto y aparte sin separar el párrafo. Esta etiqueta no tiene su correspondiente de cierre



 

2.3.- Texto pre formateado <pre>  

<PRE> El texto insertado entre las marcas <PRE> y </PRE> será visualizado por el navegador respetando el formato con el que fue escrito en el fichero fuente HTML. Esta etiqueta es muy útil para escribir más de un espacio o para hacer pequeñas tablas
Separadores <hr> <HR> Se emplea para representar una línea horizontal. Tampoco tiene pareja de cierre. Se pueden emplear los atributos
ALIGN="left" , ALIGN="right" , para alinearla a la izquierda o a la derecha. Por defecto aparece centrada
WIDTH="66%" SIZE="3", para especificar el ancho en % y el alto en píxels
COLOR="#0000FF" , para especificar el color

2.4.- Sangrado de texto <blockquote> 

<BLOCKQUOTE> Se representa con tabulaciones a la izquierda y derecha. Toda los párrafos de esta página están entre las etiquetas <BLOCKQUOTE> y </BLOCKQUOTE>, de ese modo se consigue que el texto se presente con márgenes a ambos lados.


2.5.- Formatear el texto <font>

 La sintaxis es la siguiente:
<font size=2 face="MS Sans Serif" color="navy">Como ves se pueden poner varios atributos separados por un espacio</font>





2.6.- Resaltado del texto <b>
  • <B>Texto en Negrita</b>        Texto en Negrita

2.7.- Subrayado
  • <U>Subrayado</u>                 Subrayado Solo Explorer
2.8.- Cursiva   

 <I>Itálica</i>                                      Itálica 

2.9.- Párrafos <p>   

<P> Se utiliza para que los párrafos queden separados por una línea en blanco. Si solo quieres escribir un punto y aparte debes usar <BR>. Las marcas inicial y final son <P> y </P>. La etiqueta <P> admite los atributos:


2.10.- Encabezados <h1> ...

Los títulos o encabezamientos se emplean al comienzo de una sección. Las etiquetas que se usan son:
Etiqueta
Se ve
<h1> Título </h1>

Título

<h2> Título </h2>

Título

<h3> Título </h3>

Título

<h4> Título </h4>

Título

<h5> Título </h5>
Título
<h6> Título </h6>
Título


2.6.- Marquesinas <marquee> 

            <!-- HTML codes by Quackit.com -->
<marquee behavior="scroll" direction="left">Your scrolling text goes here</marquee>
<p style="font-size:10px;"><a href="http://www.quackit.com/html/templates/online/">Templates online</a></p>
 





2.7.-Las listas Ordenadas y desordenadas

        2.7.1.-  Listas con viñetas desordenadas
                      He aquí el ejemplo más sencillo de una de estas listas:
escribimos en html
se verá como
<ul>
<li>Primer término de la lista
<li>Segundo término
<li>Tercer término
</ul>
  • Primer término de la lista
  • Segundo término
  • Tercer término
Como ves, la lista se declara con la etiqueta <UL> y finaliza con el cierre de la misma </UL>. También podemos modificar las viñetas por medio del atributo TYPE= circle, disc o square (círculo, disco o cuadrado) y añadir sublistas.
escribimos en html
se verá como
<ul>
<li type= disc>Primer término de la lista
<ul>
<li>Sublista
<li>Otro elemento
</ul>
<li type=circle>Segundo término
<li type=square>Tercer término
</ul>



2.7.2.- Listas  Ordenadas

  • Primer término de la lista
    • Sublista
    • Otro elemento
  • Segundo término
  • Tercer término
Estas listas se caracterizan porque aparecen números o ciertos caracteres que ordenan sus elementos. La etiqueta usada es <OL> junto con su correspondiente de cierre </OL>. El atributo TYPE toma ahora los valores 1, a, A, i, I. Un ejemplo de estas listas es el siguiente
escribimos en html
se verá como
<ol type=i>
<li >Primer término de la lista
<li >Segundo término
<li>Tercer término
<li>Cuarto
<li>Quinto
</ol>


  1. Primer término de la lista
  2. Segundo término
  3. Tercer término
  4. Cuarto
  5. Quinto

2.8.- Alineaciones 

ALIGN="left" , ALIGN="right" , ALIGN="center" y ALIGN="justify" para alinearlo a la izquierda, a la derecha, centrarlo o justificarlo totalmente. Por defecto está alineado a la izquierda.