Apuntes Curso Web Design HTML VVAPARDILLO Enero 2006 - Carlos Lara

Robado y corregido por Emilio del web aqui      http://usuarios.lycos.es/bulios/

Nota general para todos
NO usas ñ, Ñ, acentos ni espacios en nombres de ficheros. como "Paginas Web.gif"
y usas "xxx" en todo los sitios y etiquetas en meniscula.
Tienes que cerrar MUCHAS etiquetas con </xx>

Etiquetas de texto	Etiquetas de listas		Indice de Etiquetas
Etiquetas de Graficos	Etiquetas de Documento	Tablas
Etiquetas Enlaces	Formularios

Etiquetas

Es la forma mas correcta de hacer referencia a como deberia incluirse en un documento html una etiqueta,<etiqueta>......</etiqueta>, a la primera la denominaremos etiqueta de apertura, que indica el comienzode la aplicacion asociada a la etiqueta.A la segunda la denominaremos etiqueta de cierre, e indica que a partir de ese punto se dejara de aplicar dicha funcion.
Algunas etiquetas no poseen etiqueta de cierre y en otras la etiquetas de cierre es opcional.
Las etiquetas se pueden anidar (meter) unas dentro de otras.

Etiquetas de Documento
(etiquetas necesarias en todos los documentos html)
< html >....</ html >
Toda la pagina se encuentra dentro de estas dos etiquetas, es la primera y ultima del documento < head >....</ head >
Etiqueta de cabecera o encabezamiento head < body >....</ body > Parametros body Etiquetas body
Etiqueta de cuerpo es donde realmente estan todas las etiquetas de la pagina
< title >....</ title >
Etiqueta de Titulo title
(titulo que aparece en la barra azul del explorador, va dentro de la etiqueta head)
Ejemplo de un documento Basico en blanco

            <html>
               <head>
                  <title>Documento Basico</title>
               </head>
            </html>

Parametros

         <etiqueta parametros=valor1
              parametros=valor2
              parametros=valor3 >
         </etiqueta>

< body >....</ body >

Parametros:

      < body background="../graficos/FicheroGrafico.gif"
                     bgcolor="#codigocolor"
                        text="#codigocolor"
                        link="#codigocolor"
                       vlink="#codigocolor" >
      </ body >

Con BACKGROUND especifica la direccion de la imagen que sera usada para el fondo de la pagina, lo mas frecuente es en vez de adaptar el tamaño de la imagen al fondo es repetir esa imagen tanta veces haga falta para llenar completamente la pagina
Ejem.
./images/imagen.jpg

Con bgcolor se define el color de fondo. Siendo Codigocolor un codigo formado por tres Numeros Hexadecimales, donde cada numero hace refencia a la proporcion de cada color basico que posee el color final. El valor minimo es 0(00 en Hexadecimal) y el maximo 255(FF en Hexadecimal)
Ejem.

"blue"	Azul	en Hexadecimal #0000FF
"red"	Rojo	en Hexadecimal #FF0000
"green"	Verde	en Hexadecimal #00FF00
"white"	Blanco	en Hexadecimal #FFFFFF
"black"	Negro	en Hexadecimal #000000

Ver colores Mas colores

Con text se especifica el color del texto dentro de la pagina
Con link se especifica el color de los enlaces dentro de la pagina
Con vlink se especifica el color de los enlaces visitados dentro de la pagina

Estos parametros afectan a toda la pagina y desactivan los colores que se tenga por defecto los navegadores, si se necesita poner un texto en otro color de utiliza la etiqueta font

Etiquetas dentro de body

< PRE >.....</PRE> Etiqueta Preformateado
Sirve para que aparezca el texto con todos lo espacios en blanco, tabulaciones etc. Ejem: Si quisieramos poner en la pagina el codigo fuente de un programa

< BR > Etiqueta de salto linea (BREAK)
Solo apertura, o sea, no necesita una etiqueta de cierre

< P > Etiqueta de salto Parrafo
Solo apertura, o sea, no necesita una etiqueta de cierre

Parametros:

         <P align= left
            = right
            = center > 
         </P>

Aunque no hace falta la etiqueta de cierre si se utilizan parametros es mejor ponerla

Con align se alinea el texto (izquierda, derecha o centrado) inmediatamente despues y entre la etiqueta de inicio y la etiqueta de final

< hr > linea Horizontal en tres dimensiones (Horizontal Rule)
Solo apertura, o sea, no necesita una etiqueta de cierre

Parametros:

         <hr align= left
             = right
             = center > 
             NOSHADE  
             size="tamaño" 
             width="pixels"
             ="TantoPorciento %"

Con align se alinea el texto (izquierda, derecha o centrado) inmediatamente despues y entre la etiqueta de inicio y la etiqueta de final
Con NOSHADE se quita la sombra a la linea y deja ser en 3D
Con size definido en pixels, le damos altura a la linea por defecto son 2 pixels
Con width definimos el ancho de la linea, en pixels o con un porcentaje del ancho de la ventana

<Hn>....</Hn>heady
Se usa para crear encabezados con mayor o menor importancia
Siendo n un numero entre 1-6

texto con H1

texto con h2

texto con H3

texto con H4

texto con H5

texto con H6

Etiquetas de texto

< B >....</ B > Negrita (BOLD)
Con esta etiqueta todo el texto que se encuentre dentro de la etiqueta se visualizara en negrita

< I >....</ I > Cursiva (ITAliC)
Con esta etiqueta todo el texto que se encuentre dentro de la etiqueta se visualizara en Cursiva

< TT >....</ TT > (TELEtype)
Con esta etiqueta todo el texto que se encuentre dentro de la etiqueta se visualizara en Teletype

< U >....</ U > Subrayado (UNDERliNE)
Con esta etiqueta todo el texto que se encuentre dentro de la etiqueta se visualizara en Subrayado

< S >....</ S > Tachado (StrIKE)
Con esta etiqueta todo el texto que se encuentre dentro de la etiqueta se visualizara en ~~Tachado~~

< Blink >....</ Blink > Parpadeo
Con esta etiqueta todo el texto que se encuentre dentro de la etiqueta se visualizara en Parpadeo (en Internet Explorer no funciona)

< SUP >....</ SUP > Superindice
Con esta etiqueta todo el texto que se encuentre dentro de la etiqueta se visualizara en ^Superindice

< SUB >....</ SUB > Subindice
Con esta etiqueta todo el texto que se encuentre dentro de la etiqueta se visualizara en _Subindice

< center >....</ center > Centrado
Con esta etiqueta todo el texto que se encuentre dentro de la etiqueta se visualizara

Centrado

< font >......</font> Tipo de Fuente

Parametros:

      <font   size= "tamaño"
               "+ tamaño"
               "- tamaño"
              color="Codigocolor"
              FACE="NombreFuente"     >
        </font>

Con size ponemos el tamaño de la fuente en pixels, con + tamaño y - tamaño, aumenta o disminuye el tamaño de la fuente tantos pixels como pongamos
Con color cambiamos el color del texto
Con FACE cambiamos el tipo de la fuente, se ha de poner una fuente que tengamos, pero teniendo en cuenta que la fuente que pongamos solo la visualizaran quienes la tengan en su ordenador

Etiquetas de Graficos

Los navegadores trabajan con los archivos JPG y GIF89a
Las imagenes siempre son cuadrangulares, para poner una imagen y que no se vea cuadrangular, hay que poner el fondo de esa imagen transparente y eso solo se puede hacer con los archivos GIF89a

< IMG > Etiqueta de Imagen
Solo apertura, o sea, no necesita una etiqueta de cierre

Parametros:

         <IMG    src="UbicacionGrafico"
                 ALT="texto"
                 align="TOP"
                      ="MIDDLE"
                      ="BUTTON"
                 border="Tamaño"
                 height="Tamaño"
                 width="Tamaño"
                 HSPACE="Margen"
                 VSPACE="Margen"
                 ISMAP/USEMAP        >

Con src especifica la localizacion del archivo que desea incorporar a la pagina WEB
Con ALT especifica el texto alternativo que describe la imagen. Los usuarios con la opcion de graficos desactivada veran este testo en vez de la imagen
Con align especifica la alineacion de la imagen con respecto al texto que le rodea
- Con TOP la parte superior de la imagen se alinea con la parte superior del texto
- Con MIDDLE la parte media de la imagen se alinea con la linea base de la base del texto que la rodea
- Con BUTTON la parte inferior de la imagen se alinea con la linea base del texto que la rodea

Tablita
Alineado con TOP y un Tamaño de 100 pixels	Alineado con MIDDLE y un Tamaño de 90 pixels	Alineado con BUTTON y un Tamaño de 80 pixels
Alineado con right y un Tamaño de 70 pixels		Alineado con left y una altura de 60 y una anchura de 30 pixels

Con border indica el grosor del borde alrededor de la imagen en pixels
Con height y width especificamos la altura y anchura de la imagen respectivamente, usando los dos podemos deformar la imagen mas alta que ancha etc, pero si usamos solo uno de ellos la imagen se reduce proporcionalmente
Con HSPACE y VSPACE especificamos los espacios(dimension) en blanco que aparecen a izquierda y derecha(HSPACE), o superior e inferior(VSPACE)
Con ISMAP/USEMAP Todavia no lo hemos dado

Etiqueta de Enlaces (links)

< A >....</ A >
Se usa para crear Hipervínculos

Parametros:

         <A href="RecursoInternet" NombreEnlace></A>
            name="nombremarcador"

Donde href es un parametro obligatorio para crear enlaces
- RecursoInternet cualquier recurso de la red Internet: Telnet,Correo, FTP, Gopher, News, cualquier archivo que pueda salir de un ordenador
- NombreEnlace es el nombre que se vera en el navegador, puede ser un texto , una imagen
Con name marcamos el punto al cual queremos ponerle un enlace

Marcadores: Un marcador es un enlace a un punto concreto de una pagina, hay marcadores que te llevan a un punto concreto de una misma pagina (los mas comunes), o a un punto de otra pagina distinta.

   Aqui esta el enlace a un marcador llamado arriba debe ir precedido del signo #

<A href="Apuntes.htm#arriba>marcador</A> 
       
   Aqui esta el detino del enlace cambiamos el href por name y no se le quita el #

<A name="arriba></A>

Ejemplo: Este marcador te lleva al principio de la pagina y alli puedes ver otros tres marcadores mas

Etiquetas de listas

Una listas define una serie de elementos que podran tomar el aspecto de viñetas, listas numeradas, entradas de un glosario etc...
Existen diferentes tipos, pero las tres mas usadas son:

listas Ordenadas
listas Desordenadas
listas de Definicion

Parametros lista Ordenada:

< OL >....</ OL >

<OL START="numero"           un numero por el que empezara la lista
     type="1"                la lista esta ordenada con numeros
     "a"                la lista estara ordenada con el abecedario en minusculas
     "A"                la lista estara ordenada con el abecedario en mayusculas
     "i"                la lista estara ordenada con numeros romanos en minusculas
     "I" >              la lista estara ordenada con numeros romanos en mayusculas



         Formato:
            <OL>
               <li>       Siendo detras de <li> donde 
               <li>       se colocan los elementos de la
               <li>       lista
            </OL>

Parametros lista Desordenada:

< UL >....</ UL >

<UL type="SQUARE"                la lista estara ordenada con un cuadradito negro
    "DISK"                  la lista estara ordenada con un puntito negro
    "CIRCLE"                la lista estara ordenada con un circulito



         Formato:
            <UL>
               <li>       Siendo detras de <li> donde
               <li>       se colocan los elementos de la
               <li>       lista
            </UL>

Ver ejemplos de listas

Tablas

table (parametros

tr (parametros

td (parametros

Una tabla es un conjunto de filas y columnas

Formato:

El formato de una tabla se compone de una etiqueta de tabla
<table> etiqueta de tabla </table>
una etiqueta de filas <tr> etiqueta de fila </tr>
y una etiqueta de celdas <td> etiqueta de celdas </td>

<table> <tr> <td> elemento </td> </tr> </table>

Siendo elemento cualquiera de estos elementos:

texto

listas

otras tablas

imágenes

enlaces de hipertexto

elementos de formulario

< table >....</ table >

Parametros de table:

      <table  border="numero"
         CELLSPANDING="numero"
         CELLPADDING="numero"
         width="numero o porcentaje"
         height="numero o porcentaje"
         bgcolor="codigocolor"
         BACGROUND="archivografico"     >
      
      </table>

border define el grosor del marco exterior (puede ser cero).
cellspacing define el espacio entre celdas.
CELLPADDING define el espacio alrededor del texto de una celda.
width y height define el ancho y alto de la tabla, especificado en numero de pixels o en porcentaje de la pagina
bgcolor define el color de fondo de la tabla expresado en Hexadecimal
BACKGROUND define el archivo grafico de fondo

< tr >....</ tr >

Esta etiqueta se utiliza para crear las filas en una tabla

Parametros de tr (filas):


      <tr  align="left","rigth","center","justify"
           Valign="top","middle","botton"
           height="numero o porcentaje"   >
      </tr>

align define la alineación del texto en el sentido horizontal de la celda.
Valign define la alineacion del texto en el sentido vertical de la celda.
height define el alto de la fila en pixels o en porentaje.

Estos parametros se aplican sobre toda la fila, salvo cuando un parametro de <td> contradice esta alineación

< td >....</ td >

Esta etiqueta se uitliza para crear las celdas de una tabla

Parametros de td (celdas):


            <td  align="left","rigth","center","justify"
         Valign="top","middle","botton"
         rowsPAN="numero"
         colsPAN="numero"
         width="numero o porcentaje"
         height="numero o porcentaje"
         bgcolor="codigocolor"
         BACKGROUND="archivografico"     >
         NOwrap
         </td>

align define la alineación del texto en el sentido horizontal de la celda.
Valign define la alineacion del texto en el sentido vertical de la celda.
rowsPAN define la cantidad de celdas que ocupa verticalmente
colsPAN de fine la cantidad de celdas que ocupa horizontalmente
width define el ancho de la fila en pixels o en porentaje.
height define el alto de la fila en pixels o en porentaje.
bgcolor define el color de fondo de la celda
BACKGROUND define el archivo grfico del fondo de la celda
NOwrap obliga al NAVEGADOR a inscribir todo el texto de la celda en una sola línea

< TH >....</ TH >

Esta etiqueta es similar a la etiqueta td pero se utiliza para poner titulos a las columnas de la tabla, por defecto escribe el texto en negrita

Formularios

< FORM >....</ FORM >

Parametros de FORM:

         <FORM ACTION="Programa CGI"
               METHOD="post", "get">
         </FORM>

ACTION especifica la direccion del recurso al que accede el explorador una vez que el formulario se ha completado y enviado
METHOD le indica al explorador como como debe interactuar con el recurso especificado en el parametro ACTION, si el valor de METHOD es POST devuelve los datos del formulario como un bloque de datos (formato correo) en vez de enviarlos como una cadena con el valor de GET

< INPUT >

Parametros de INPUT:

<INPUT type="text", "password", "checkbox", "radio", "hidden", "submit", "reset", "button"
       name="nombre"
       VALUE="valor"  >

type especifica el tipo de mecanismo para la introduccion de datos que se mostrara en el navegador
- text crea un cuadro de texto de una linea en el que el usuario podra introducir caracteres hasta un maximo establecido por maxlenght
- password crea un cuadro de texto similar al de type=text pero cualquier caracter que se introduzca se reemplaza por asteriscos
- checkbox crea una casilla de verificacion. Cuando se selecciona y se envia el formulario, el explorador devuelve el valor name=0
- radio crea un boton de opcion, solo se puede seleccionar uno sobre una lista
- hidden genera datos en el formulario que son necesarios para su correcto procesado pero que no desea que esten a la vista de los usuarios
- submit crea el boton submit (enviar) hace que todos los datos del formulario se devuelvan a la direccion especificada por el parametro ACTION
- reset crea un boton reset (restablecer o borrar) que restablece el formulario a su estado inicial
- button crea un boton que invoca a una secuencia de comandos
name da nombre al mecanismo de introduccion de datos
VALUE
- En aquellos campos donde no se introduce texto, este parametro especifica el valor que sera devuelto al servidor cuando se envie el formulario
- En los campos que se introducen datos se usa para darle un valor inicial al cuadro de texto
- En submit y reset da nombre a los botones (es el que se visualiza)

Ver ejemplo de Mecanismos Formulario

< select >....</ select >

Parametros select:

      <select name="nombre"
              size="n"
              MULTIPLE
              <option> opcion 1 
              <option> opcion 2  >

name asocia un nombre al menu del formulario
size espacifica el numero de opciones visibles en el menu desplegable
MULTIPLE permite elejir mas de una opcion del conjunto de posibles valores definidos por la serie de etiquetas <option>

Ver ejemplo de Mecanismos Formulario

< option >....</ option >

Parametros option:

< textarea >....</ textarea >

Parametros textarea:

            <textarea name="nombre"
                      cols="n"
                      rows="n"
                      wrap="virtual", "physical"  >
            </textarea>

name asocia un nombre al cuadro de texto con desplazamiento
cols especifica el ancho del cuadro de texto en columnas
rows especifica el alto del cuadro de texto en lineas
wrap
- virtual envia el area del texto separada en lineas fisicas (RETURN)
- physical envia el texto en una sola linea seguida, sin saltos de linea

Ver ejemplo de Mecanismos Formulario

Ejemplo de Mecanismos de Formularios

type="text" Cuadro de texto

type="PASSWORD" Cuadro de Password

type="checkbox" Casilla Verificacion

type="radio" Casilla de Opcion

type="Submit" Boton enviar

type="Reset" Boton Borrar

<select> Menu Desplegable

<textarea> Cuadro texto con
Desplazamiento

Ejemplos de clase

type="text"	Cuadro de texto
type="PASSWORD"	Cuadro de Password
type="checkbox"	Casilla Verificacion
type="radio"	Casilla de Opcion
type="Submit"	Boton enviar
type="Reset"	Boton Borrar
<select>	Menu Desplegable
<textarea>	Cuadro texto con Desplazamiento