Página anterior Volver al principio del trabajoPágina siguiente 

Programación en HTML (página 2)

Enviado por Omar Hernandez

Partes: 1, 2


Inicio:

Monografias.com

Abrir Block de notas (o algún editor de texto)

Código Básico de una página

Estructura de un documento HTML

La estructura básica de un documento HTML es la siguiente:

<TITLE> Indica el inicio del documento

<HEAD> Indica el inicio de la cabecera

Inicio del título del documento

</TITLE> Final del título del documento

</HEAD> Final de la cabecera

Inicio del cuerpo del documento

Instrucciones HTML

Final del cuerpo del documento

Final del documento

Ninguno de estos elementos es obligatorio, pudiendo crear documentos HTML sin incluir estas etiquetas de identificación. No obstante es altamente recomendable la construcción de páginas HTML siguiendo esta estructura, para una buena estructuración y legibilidad del código.

Nuestra primera página HTML

Una vez que conocemos la estructura básica de un documento HTML, vamos a crear una página HTML muy sencillita.

  • 1. Lo primero será abrir el procesador de textos que hayamos elegido y copiar el Código fuente

  • 2. 

  • 3. 

  • 4.  Mi primera página HTML

  • 5. 

  • 6. 

  • 7. Esta es mi primera página HTML

  • 8. 

  • Código fuente 1

    2. Una vez tecleado el código, guardamos el documento como Pagina1.htm, y procedemos a abrirlo con el navegador correspondiente.

    Cabecera

    Cabecera del documento HTML <HEAD>......

    En la cabecera de un documento HTML incluiremos las definiciones generales que afecten a todo el documento, como por ejemplo el título de la página que aparecerá en la parte superior de la ventana del navegador.

    Las etiquetas <HEAD> y </HEAD> son las que van a delimitar la cabecera de nuestro documento.

    Todas la etiquetas de la cabecera son opcionales, aunque se recomienda incluir en todos nuestros documentos la etiqueta correspondiente al título del documento.

    A continuación vamos a tratar cada uno de los posibles componentes de la cabecera por separado.

    Título del documento

    ..............

    El título de nuestro documento viene especificado por las etiquetas: y y, como ya hemos mencionado, este título es el que aparecerá en la ventana de nuestro programa navegador. Lo normal y recomendable es que el título guarde relación con el contenido de nuestro documento, ya que por ejemplo es utilizado por algunos servidores de búsqueda para poder intuir el contenido de nuestro documento.

    Cuerpo

    Cuerpo del documento HTML: ......

    En el cuerpo de un documento HTML es donde incluiremos las distintas instrucciones del lenguaje junto con el contenido en sí de nuestra página Web: textos, imágenes, enlaces a otras páginas, etc..

    Las etiquetas y son las que van a delimitar el cuerpo de nuestro documento.

    Esta posee una serie de argumentos que nos van a permitir variar las características del documento en su conjunto, como por ejemplo el color del texto o del color de fondo de nuestra página web.

    Antes de analizar los componentes y atributos de BODY vamos a ver como se especifican los colores en un documento HTML. Estos se pueden especificar por su nombre (name) o por su código de color, que es un número compuesto de tres pares de cifras hexadecimales que nos indican la proporción de los colores primarios (rojo, verde y azul) que forman el color deseado (#rrggbb):

    ¡Colores!

       Los atributos que toman como valor un color se puede definir de dos maneras, mediante una numeración hexadecimal o de manera literal.

    Numeración Hexadecimal:

        La numeración hexadecimal consta de 16 dígitos frente a los 10 de la decimal habitual. Van en este orden (de menor a mayor):

    0 1 2 3 4 5 6 7 8 9 A B C D E F

        Para indicar un color con este método lo haremos de la siguiente manera:

    "#RRGGBB"

        Donde RR toma un valor para el color Rojo, GG toma un valor para el color Verde y BB toma un valor para el color Azul. Así por ejemplo para conseguir el color rojo pondriamos el máximo valor (FF) en RR y el mínimo (00) en los demás: "#FF0000". Combinando estos números se sacan el resto de colores.

        Aqui tenemos una tabla con colores usando la numeración hexadecimal:

    000000

    000033

    000066

    000099

    0000CC

    0000FF

    003300

    003333

    003366

    003399

    0033CC

    0033FF

    006600

    006633

    006666

    006699

    0066CC

    0066FF

    009900

    009933

    009966

    009999

    0099CC

    0099FF

    00CC00

    00CC33

    00CC66

    00CC99

    00CCCC

    00CCFF

    00FF00

    00FF33

    00FF66

    00FF99

    00FFCC

    00FFFF

    330000

    330033

    330066

    330099

    3300CC

    3300FF

    333300

    333333

    333366

    333399

    3333CC

    3333FF

    336600

    336633

    336666

    336699

    3366CC

    3366FF

    339900

    339933

    339966

    339999

    3399CC

    3399FF

    33CC00

    33CC33

    33CC66

    33CC99

    33CCCC

    33CCFF

    33FF00

    33FF33

    33FF66

    33FF99

    33FFCC

    33FFFF

    660000

    660033

    660066

    660099

    6600CC

    6600FF

    663300

    663333

    663366

    663399

    6633CC

    6633FF

    666600

    666633

    666666

    666699

    6666CC

    6666FF

    669900

    669933

    669966

    669999

    6699CC

    6699FF

    66CC00

    66CC33

    66CC66

    66CC99

    66CCCC

    66CCFF

    66FF00

    66FF33

    66FF66

    66FF99

    66FFCC

    66FFFF

    990000

    990033

    990066

    990099

    9900CC

    9900FF

    993300

    993333

    993366

    993399

    9933CC

    9933FF

    996600

    996633

    996666

    996699

    9966CC

    9966FF

    999900

    999933

    999966

    999999

    9999CC

    9999FF

    99CC00

    99CC33

    99CC66

    99CC99

    99CCCC

    99CCFF

    99FF00

    99FF33

    99FF66

    99FF99

    99FFCC

    99FFFF

    CC0000

    CC0033

    CC0066

    CC0099

    CC00CC

    CC00FF

    CC3300

    CC3333

    CC3366

    CC3399

    CC33CC

    CC33FF

    CC6600

    CC6633

    CC6666

    CC6699

    CC66CC

    CC66FF

    CC9900

    CC9933

    CC9966

    CC9999

    CC99CC

    CC99FF

    CCCC00

    CCCC33

    CCCC66

    CCCC99

    CCCCCC

    CCCCFF

    CCFF00

    CCFF33

    CCFF66

    CCFF99

    CCFFCC

    CCFFFF

    FF0000

    FF0033

    FF0066

    FF0099

    FF00CC

    FF00FF

    FF3300

    FF3333

    FF3366

    FF3399

    FF33CC

    FF33FF

    FF6600

    FF6633

    FF6666

    FF6699

    FF66CC

    FF66FF

    FF9900

    FF9933

    FF9966

    FF9999

    FF99CC

    FF99FF

    FFCC00

    FFCC33

    FFCC66

    FFCC99

    FFCCCC

    FFCCFF

    FFFF00

    FFFF33

    FFFF66

    FFFF99

    FFFFCC

    FFFFFF

    Literales:

        También se pueden definir algunos colores de manera literal, para conseguir el color rojo por ejemplo se pondría: Red.

        Aqui tenemos una lista con colores literales.

    Aliceblue

    Antiquewhite

    Aqua

    Aquamarine

    Azure

    Beige

    Bisque

    Black

    Blanchedalmond

    Blue

    Blueviolet

    Brown

    Burlywood

    Cadetblue

    Chartreuse

    Chocolate

    Coral

    Cornflowerblue

    Cornsilk

    Crimson

    Cyan

    Darkblue

    Darkcyan

    Darkgoldenrod

    Darkgray

    Darkgreen

    Darkkhaki

    Darkmagenta

    Darkolivegreen

    Darkorange

    Darkorchild

    Darkred

    Darksalmon

    Darkseagreen

    Darkslateblue

    Darkslategray

    Darkturquoise

    Darkviolet

    Deeppink

    Deepskyblue

    Dimgray

    Dodgerblue

    Firebrick

    Floralwhite

    Forestgreen

    Fuchsia

    Gainsboro

    Ghostwhite

    Gold

    Goldenrod

    Gray

    Green

    Greenyellow

    Honeydew

    Hotpink

    Indianred

    Indigo

    Ivory

    Khaki

    Lavender

    Lavenderblush

    Lawngreen

    Lemonchiffon

    Lightblue

    Lightcoral

    Lightcyan

    Lightgoldenrodyellow

    Lightgreen

    Lightgrey

    Lightpink

    Lightsalmon

    Lightseagreen

    Lightskyblue

    Lightslategray

    Lightsteelblue

    Lightyellow

    Lime

    Limegreen

    Linen

    Magenta

    Maroon

    Mediumblue

    Mediumorchild

    Mediumpurple

    Mediumseagreen

    Mediumslateblue

    Mediumspringgreen

    Mediumturquoise

    Mediumvioletred

    Midnightblue

    Mintcream

    Mistyrose

    Moccasin

    Navajowhite

    Navy

    Oldlace

    Olive

    Olivedrab

    Orange

    Orangered

    Orchild

    Palegoldenrod

    Palegreen

    Paleturquoise

    Palevioletred

    Papayawhip

    Peachpuff

    Peru

    Pink

    Plum

    Powderblue

    Purple

    Red

    Rosybrown

    Royalblue

    Saddlebrown

    Salmon

    Sandybrown

    Seagreen

    Seashell

    Sienna

    Silver

    Skyblue

    Slateblue

    Slategray

    Snow

    Springgreen

    Steelblue

    Tan

    Teal

    Thistle

    Tomato

    Turquoise

    Violet

    Wheat

    White

    Whitesmoke

    Yellow

    Yellowgreen

     

     

    La etiqueta presenta una serie de atributos que van a afectar a todo el documento en su conjunto. Estos atributos nos van a permitir definir los colores del texto, del fondo, y de los hiperenlaces del documento. Incluso nos permitirán insertar una imagen de fondo en nuestra página.

    link="name" vlink="name" >

    background="URL". Nos va a permitir mostrar una imagen como fondo de nuestro documento HTML. El camino a esta imagen vendrá especificado por la URL que definamos.

    Si la imagen no rellena todo el fondo del documento, ésta será reproducida tantas veces como sea necesario hasta completar todo el fondo.

    Si insertas el Código fuente en el documento HTML que creamos como ejemplo en el capítulo anterior: Pagina1.htm, este presentará como fondo la imagen "fondo.gif"

     

     

    bgcolor=#rrggbb ó name {bgcolor: Background Color}. Nos va a permitir definir un

    color para el fondo de nuestro documento. Este atributo será ignorado si previamente hemos utilizado el atributo background.

    text=#rrggbb ó name. Nos permitirá definir un color para el texto de nuestro documento. Por defecto es negro.

    link=#rrggbb ó name. Indica el color que tendrán los hiperenlaces que no han sido accedidos. Por defecto es azul. Como todavía no sabemos insertar hiperenlaces en nuestro documento vamos a dejar el ejemplo correspondiente para más adelante.

    vlink=#rrggbb ó name {vlink: Visited Links}. Indica el color de los hiperenlaces que

    ya han sido accedidos. Por defecto es púrpura.

    Salto de línea:
    {BR: Break}

    Nos permite dar un salto a la línea siguiente en el punto donde la etiqueta sea insertada

    Cambio de párrafo:

    {P: Paragraph}

    Permite definir un párrafo, introduciendo normalmente un espacio de separación de dos líneas con el texto siguiente al punto donde hayamos insertado la etiqueta

    .

    La etiqueta de fin párrafo

    es opcional, no siendo necesario incluirla. Aunque siempre es recomendable delimitar claramente el inicio y final de un párrafo. Además, cuando usemos esta etiqueta como cerrada

    .....

    , tenemos la posibilidad de incluirle el atributo align el cual indica al navegador la forma de justificar el texto incluido en el párrafo. El formato sería el siguiente:

    Texto contenido en el párrafo

    Línea Horizontal: {HR: Horizontal Rule}

    Nos permite insertar una línea horizontal, cuyo tamaño podremos determinar a través de sus atributos. Si no especificamos ningún atributo dibujará una línea que ocupe el ancho de la pantalla del navegador. Su utilidad es la de permitirnos dividir nuestra página en distintas secciones. No será necesaria la etiqueta de fin .

    El formato de la etiqueta con sus posibles atributos es:

    • align= left / right / center. Permite establecer la alineación de la línea a la izquierda, a la derecha o centrarla.

    • noshade. No muestra la sombra de la línea, evitando el efecto de tres dimensiones.

    • size=n. Indica el grosor de la línea en pixels.

    • width=n ó n%. Especificará el ancho de la línea, este se podrá especificar en pixels (n) o en tanto por ciento del ancho de la ventana (n%).

    Cabeceras: ...

    {H: Heading}

    En un documento HTML podemos incluir seis tipos distintos de cabeceras, que van a constituir normalmente el título y los distintos subapartados que forman el documento, aunque podremos utilizarlas en el punto que queramos del documento para resaltar cualquier texto. Estas cabeceras son definidas por las etiquetas

    y

    . El texto que componga cada cabecera deberá estar incluido entre las etiquetas de inicio () y fin (/Hn) correspondiente. La cabecera

    será la que muestre el texto de mayor tamaño, este tamaño irá disminuyendo hasta llegar a la cabecera

     

    Atributos del texto

    Al texto de nuestro documento HTML le podemos aplicar distintos atributos (negrita, cursiva, subrayado, etc..), al igual que hacemos cuando trabajamos con el procesador de textos en la edición de nuestros documentos. Para aplicar estos atributos disponemos de distintas etiquetas, que aplicarán su efecto al texto incluido entre sus indicadores de inicio y fin.

    Monografias.com

     

    Si queremos aplicar efectos más espectaculares a nuestro documento HTML, debemos variar el tamaño, el color y el tipo de letra del texto. La etiqueta que nos permite todo esto es:

    ..., por medio de sus atributos size, color y face:

    • size="n" ó "+/- n". El atributo size nos permite especificar un tamaño determinado

    para la fuente del texto incluido entre las etiquetas de inicio y fin, el cual puede estar entre 1 y 7. El texto de tamaño normal equivale a la fuente de tamaño 3 (fuente base). Por tanto, si especificamos size=+2, el tamaño de la fuente será 5. Y si especificamos size= -1, el tamaño será 2.

    Monografias.com

    color="#rrggbb ó name". Nos va a permitir definir el color que tendrá el texto

    incluido entre las etiquetas.

    Monografias.com

    face="nombre de font". Nos va a permitir escribir texto con el tipo de letra que le especifiquemos. En el caso de que el tipo de letra que le hayamos especificado no esté cargada en el ordenador que lee la página, se usará el font por defecto del navegador.

    Monografias.com

    Atributo

    Significado

    Posibles valores

    face

    fuente

    nombre de la fuente, o fuentes

    color

    color del texto

    número hexadecimal o texto predefinido

    size

    tamaño del texto

    valores del 1 al 7, siendo por defecto el 3,o desplazamiento respecto al tamaño por defecto,añadiendo + o - delante del valor

    Insertando imágenes

      En este apartado veremos como insertar imagenes en nuestros documentos web. Las imágenes que se utilizan generalmente en este tipo de documentos web son archivos de imagen comprimidos para que la carga de la página sea más rápida, nosotros en este manual utilizaremos los archivos GIF y los JPG por ser los más utilizados.

    NOTA IMPORTANTE: Prestad mucha atención a que las imagenes ocupen lo menos posible, especialmente las grandes, ya que debemos lograr que la página cargue lo antes posible.

        Para insertar una imagen debemos utilizar el comando image source.

    <IMG src="imagen.gif">

    Como utilizar esta etiqueta:

    • Esta etiqueta de <IMG> no tiene etiqueta de cierre ya que la imágen a insertar viene especificada en el atributo src (source).

    • En el atributo src pondremos el nombre del archivo con su extensión entre comillas respetando siempre las mayúsculas y minúsculas de dicho nombre.

    • Como ya hemos dicho antes hay que intentar que las imagenes insertadas ocupen lo mínimo posible en memoria.

    • Una de las cosas más importantes al utilizar esta etiqueta es la situación del archivo de imagen, esto es, si la imagen esta o no en el mismo directorio que el documento web. Nosotros por comodidad tendremos el archivo de imagen y el documento web en la misma carpeta o directorio (Caso1). De todas maneras veamos estos 3 casos:

    • El documento web y el archivo de imagen estan en el mismo directorio:

    <IMG src="imagen.gif">

    • El archivo de imagen está en un subdirectorio respecto al directorio donde se encuentra el documento web:<IMG src="subdir/imagen.gif">

    (donde subdir es el nombre del subdirectorio)

    • El documento web está en un subdirectorio respecto al directorio donde se encuentra el archivo de imagen :<IMG src="../imagen.gif">

        Una vez claros estos conceptos veamos un ejemplo de como insertar una imagen. En este caso vamos a insertar el archivo de imagen dinosaurio.gif:

    Ejemplo:          

    <IMG src="dinosaurio.gif">

    Resultado:

    Monografias.com

    Atributos para <IMG>:

        ALT: Con este atributo se puede introducir una pequeña descripción de la imagen mediante una palabra o frase corta. Este atributo sirve para que el usuario vea de que trata la imagen en el caso de usar un navegador que no cargue imágenes. También notaremos diferencia al cargar la imagen ya que al poner el mouse encima aparece la descripción que hemos puesto.

    Ejemplo:          

    <IMG src="dinosaurio.gif" alt="dino">

    Resultado:

    Monografias.com

        BORDER: Dandole un valor en pixels a este atributo se puede poner un borde a la imagen.

    Ejemplo:          

    <IMG src="dinosaurio.gif" border=2>

    Resultado:

    Monografias.com

        HEIGHT y WIDTH: Con estos atributos se puede modificar la altura y la anchura de la imagen, esto se puede hacer dandole un valor en pixels a estos atributos o dandole un valor en tanto por ciento.

    Ejemplo:          

    <IMG src="dinosaurio.gif" height=31 width=53>

    Resultado:

    Monografias.com

        ALIGN: Este es un atributo nos puede servir para alinear la imagen a derecha e izquierda dandole los valores right y left respectivamente o para que los titulares de la imagen (una linea de texto al lado de la imagen) esten alineados arriba (top), abajo (bottom) o en medio (middle). Veamoslo más claro con estos ejemplos:

    Ejemplo1:

              <IMG src="dinosaurio.gif" align=right>

    Monografias.comResultado1:

    Ejemplo2:

    <IMG src="dinosaurio.gif" align=middle>Texto alineado en medio de la imagen.

    Resultado2: Monografias.comTexto alineado en medio de la imagen

    Ejemplo3:

                  <IMG src="dinosaurio.gif" align=left>  Esta es la primera linea de texto     
    Aquí sigo en la segunda!     
    Etc.

    Monografias.comResultado3:          

    Esta es la primera linea de textoAquí sigo en la segunda! Etc.

    Ordenando el texto

    Las listas se usan cuando se quiere enumerar varios items. Hay 3 tipos de listas: listas ordenadas, listas no-ordenadas y listas de definición. Estas listas se pueden utilizar por separado o anidadas entre si, como veremos más adelante.

    Listas Ordenadas:

        Este tipo de listas se designan con la etiqueta

      (Ordered List). Cada item de la lista ira precedido de la etiqueta
    1. (List Item) con el fin de diferenciarlos entre si correctamente. Veamos a continuación un ejemplo de lista ordenada:

      Ejemplo:

      1. Introducción
      2. La Primera Página
      3. Escribir texto

       Resultado:

      • Introducción

      • La Primera Página

      • Escribir texto

      Atributos de las <OL>:

        :

            START: Este atributo permite iniciar la lista ordenada según convenga al diseñador de la página web.

        Ejemplo:

        1. Introducción
        2. La Primera Página
        3. Escribir texto

         Resultado:

        • Introducción

        • La Primera Página

        • Escribir texto

            TYPE: Por defecto las listas ordenadas se ordenan con la numeración común y se inicializan en 1. Con este atributo puedes cambiar la manera de ordenar la lista. Type puede tomar los siguientes valores en este typo de listas:

        1 para numeración común (por defecto) I para numeración romana en mayúsculasi para numeración romana en minúsculasA para letras mayúsculasa para letras minúsculas

            Veamos más claro la utilización de este atributo con un ejemplo:

        Ejemplo:

        1. Introducción
        2. La Primera Página
        3. Escribir texto

         Resultado:

        • Introducción

        • La Primera Página

        • Escribir texto

        Los atributos Start y Type se pueden utilizar a la vez dentro de la etiqueta

          .Listas No Ordenadas:

              Este tipo de listas se designan con la etiqueta

            (Unordered List). Cada item de la lista ira precedido de la etiqueta
          • (List Item) al igual que en las listas ordenadas. Veamos a continuación un ejemplo de lista ordenada:

            Ejemplo:

            • Introducción
            • La Primera Página
            • Escribir texto

             Resultado:

            • Introducción

            • La Primera Página

            • Escribir texto

                 Podemos observar como a diferencia de las listas ordenadas este tipo de listas no llevan ningun tipo de numeración sino que simplemente va precedido de un simbolo (en este caso un circulo).

            Atributos de las <UL>:

                  TYPE: Con este atributo podremos cambiar el símbolo que precede a este tipo de listas. Type puede tomar los siguientes valores en este tipo de listas:

              • Bullet (por defecto)

              • Circle

              • Square

                  Veamos más claro la utilización de este atributo con un ejemplo:

              Ejemplo:

              <UL Type="square">
              <LI>Introducción
              <LI>La Primera Página
              <LI>Escribir texto
              </UL>

               Resultado:

              • Introducción

              • La Primera Página

              • Escribir texto

              Listas de Definición:

                  Este tipo de listas se designan con la etiqueta (Definition List). Cada item de la lista ira precedido de la etiqueta (Definition Term) y su correspondiente definición ira precedida por la etiqueta (Definition Definition). Veamos a continuación un ejemplo de lista de definiciones:

              Ejemplo:

              <DL>
              <DT>Introducción
              <DD>Breve introducción al lenguaje
              <DT>La Primera Página
              <DD>Como hacer la primera página
              <DT>Escribir texto
              <DD>Empieza a dar formato al texto
              </DL>

               Resultado:

              Introducción

              Breve introducción al lenguaje

              La Primera Página

              Como hacer la primera página

              Escribir texto

              Empieza a dar formato al texto

                  En este tipo de listas (de definición) aparte de los items se da una breve descripción o definición de ellos.

              Organizando la página web: Tablas

              Las tablas son muy utiles a la hora de ordenar y estructurar nuestros documentos web. Veamos de que etiquetas constan las tablas en el código html:

              • a tabla utiliza el codigo pareado <TABLE> y </TABLE>.

                y

              • La tabla estará compuesta por filas que se definirán entre las etiquetas y .

              • Las filas estarán compuestas por celdas que se definirán entre las etiquetas y .

                        Veamos un ejemplo de tabla, donde podemos observar como definimos la tabla

              luego la fila y luego las celdas
              que contiene esa fila.

              Ejemplo:

              <TABLE>
              <TR>
              <TD>FILA1COL1</TD>
              <TD>FILA1COL2</TD>
              </TR>
              <TR>
              <TD>FILA2COL1</TD>
              <TD>FILA2COL2</TD>
              </TR>
              </TABLE>

              Resultado:

              FILA1COL1

              FILA1COL2
               

               

               

              Atributos de <TABLE>:

    BORDER: Este atributo permite añadir un valor al marco de la tabla. En el ejemplo anterior no vemos físicamente la tabla porque no tenemos este atributo, observa ahora:

    Ejemplo:

    <TABLE border=2>
    <TR>
    <TD>FILA1COL1</TD>
    <TD>FILA1COL2</TD>
    </TR>
    <TR>
    <TD>FILA2COL1</TD>
    <TD>FILA2COL2</TD>
    </TR>
    </TABLE> Resultado:
    FILA1COL1 FILA1COL2
    FILA2COL1 FILA2COL2

    BORDERCOLOR: Coloreamos el borde de la tabla (2D):
    Ejemplo:

    <TABLE border=2 bordercolor=#0000ff>
    <TR>
    <TD>FILA1COL1</TD>
    <TD>FILA1COL2</TD>
    </TR>
    <TR>
    <TD>FILA2COL1</TD>
    <TD>FILA2COL2</TD>
    </TR>
    </TABLE> Resultado:
    FILA1COL1 FILA1COL2
    FILA2COL1 FILA2COL2

    Si queremos dar una mejor sensación de color a nuestro marco de tabla (3D), podemos usar estos dos atributos siguientes en vez de el de arriba:
    BORDERCOLORLIGHT: Color de borde claro.
    BORDERCOLORDARK: Color de borde oscuro.
    Veamoslo más claro en el ejemplo:
    Ejemplo:

    <TABLE border=2 bordercolorlight=#6699FF bordercolordark=#003366 >
    <TR>
    <TD>FILA1COL1</TD>
    <TD>FILA1COL2</TD>
    </TR>
    <TR>
    <TD>FILA2COL1</TD>
    <TD>FILA2COL2</TD>
    </TR>
    </TABLE> Resultado:
    FILA1COL1 FILA1COL2
    FILA2COL1 FILA2COL2

    CELLPADDING : Este atributo marca la distancia desde la letra hasta el borde del marco de la tabla (en pixeles).
    Ejemplo:

    <TABLE border=2 bordercolorlight=#6699FF bordercolordark=#003366 cellpadding=5>
    <TR>
    <TD>FILA1COL1</TD>
    <TD>FILA1COL2</TD>
    </TR>
    <TR>
    <TD>FILA2COL1</TD>
    <TD>FILA2COL2</TD>
    </TR>
    </TABLE> Resultado:
    FILA1COL1 FILA1COL2
    FILA2COL1 FILA2COL2

    CELLSPACING : Este atributo nos permite poner un valor a la distancia entre los cantos de el marco de la tabla (en pixeles).
    Ejemplo:

    <TABLE border=2 bordercolorlight=#6699FF bordercolordark=#003366 cellpadding=5 cellspacing=6>
    <TR>
    <TD>FILA1COL1</TD>
    <TD>FILA1COL2</TD>
    </TR>
    <TR>
    <TD>FILA2COL1</TD>
    <TD>FILA2COL2</TD>
    </TR>
    </TABLE> Resultado:
    FILA1COL1 FILA1COL2
    FILA2COL1 FILA2COL2

    WIDTH y HEIGHT : Con estos atributos dimensionaremos la tabla. (Estos atributos para dimensionar ya los conocemos de antes por ejemplo en imagenes)
    Para definir una anchura y altura a la tabla se le dan valores a los atributos width y height.
    Ejemplo:
    <TABLE border=2 bordercolorlight=#6699FF bordercolordark=#003366 cellpadding=5 cellspacing=6 widht=450 height=150>
    <TR>
    <TD>FILA1COL1</TD>
    <TD>FILA1COL2</TD>
    </TR>
    <TR>
    <TD>FILA2COL1</TD>
    <TD>FILA2COL2</TD>
    </TR>
    </TABLE>
    Resultado:
    FILA1COL1 FILA1COL2
    FILA2COL1 FILA2COL2

    ALIGN : Así alinearemos la tabla. (Este atributo tambien le conocemos de otros temas)
    Ejemplo:
    <TABLE border=2 bordercolorlight=#6699FF bordercolordark=#003366 cellpadding=5 cellspacing=6 widht=450 height=150 align=center>
    <TR>
    <TD>FILA1COL1</TD>
    <TD>FILA1COL2</TD>
    </TR>
    <TR>
    <TD>FILA2COL1</TD>
    <TD>FILA2COL2</TD>
    </TR>
    </TABLE>
    Resultado:
    FILA1COL1 FILA1COL2
    FILA2COL1 FILA2COL2

    BGCOLOR : Le damos un color a la tabla. (Este atributo tambien le conocemos de otros temas)
    Ejemplo:
    <TABLE border=2 bordercolorlight=#6699FF bordercolordark=#003366 cellpadding=5 cellspacing=6 widht=450 height=150 align=center bgcolor=#FFFFCC>
    <TR>
    <TD>FILA1COL1</TD>
    <TD>FILA1COL2</TD>
    </TR>
    <TR>
    <TD>FILA2COL1</TD>
    <TD>FILA2COL2</TD>
    </TR>
    </TABLE>
    Resultado:
    FILA1COL1 FILA1COL2
    FILA2COL1 FILA2COL2

    BACKGROUND : Le ponemos una imagen de fondo a la tabla. En este caso nuestra imagen es imgfon.gif. (Este atributo tambien le conocemos de otros temas)
    Ejemplo:
    <TABLE border=2 bordercolorlight=#6699FF bordercolordark=#003366 cellpadding=5 cellspacing=6 widht=450 height=150 align=center background="imgfon.gif">
    <TR>
    <TD>FILA1COL1</TD>
    <TD>FILA1COL2</TD>
    </TR>
    <TR>
    <TD>FILA2COL1</TD>
    <TD>FILA2COL2</TD>
    </TR>
    </TABLE>
    Resultado:
    FILA1COL1 FILA1COL2
    FILA2COL1 FILA2COL2

    Los enlaces son una de las partes más importantes y prácticas dentro de los documentos web ya que permiten entrelazar diferentes documentos entre si que a su vez pueden estar entrelazados con otros, etc. Hay diferentes tipos de enlaces: enlaces a otra página, enlaces a una URL, marcadores y enlaces a una dirección de correo.
    Enlaces a otra página:
    Vamos a enlazar a continuación dos documentos web dentro de un mismo directorio (recordad que es importante saber el directorio que ocupan nuestros documentos e imágenes. Para realizar este vinculo entre páginas utilizaremos el siguiente codigo.
    Ejemplo:
    <A href="index.htm">Ir a la página principal</A> Resultado:
    Ir a la página principal


    Mediante este vínculo estamos uniendo esta página con nuestra página principal, que en nuestro caso tiene de nombre index.htm, de esta manera podemos unir las distintas páginas de nuestros proyectos con este tipo de enlace.
    Enlaces a una URL:
    En el apartado anterior enlazabamos dos documentos web dentro de un mismo directorio. En este apartado vamos poner un vínculo a una dirección web (URL). Lo haremos de la siguiente manera:
    Ejemplo:
    <A href="http://www.yahoo.com">Ir a Yahoo</A> Resultado:
    Ir a Yahoo Lo que conseguimos en este caso es un vinculo entre nuestra página y otra de internet (en este caso yahoo

    Marcadores:
    Los marcadores son un tipo de enlaces dentro de una misma página, se suelen utilizar en páginas de gran extensión para saltar de un sitio a otro detro de la web sin tener que utilizar la barra de desplazamiento. Veamoslo más claro en este ejemplo en el que pondremos un marcador al principio de esta página.
    Ejemplo:
    <A name="enlacesaotra">Enlaces a otra página</A>
    <A href="#enlacesaotra">Ir a enlaces a otra página</A> Resultado:
    Ir a enlaces a otra página Vamos a estudiar esto de los marcadores con más detenimiento, para empezar observemos que tienen dos partes: una en la que se define el atributo name y otra en la que se define el atributo href. En la primera estamos insertando una etiqueta con un nombre donde definimos el lugar donde tiene que ir el vinculo, es lo que llamamos una marca. Entre la apertura y el cierre de esta etiqueta irá el texto o imagen a la que estara apuntando el vínculo, en nuestro caso el vinculo apunta a la sección de esta pagina de: Enlaces a otra página, por lo que iremos buscando en el codigo donde pusimos anteriormente esa frase y le pondremos la etiqueta. La siguiente etiqueta es la que crea el vinculo en la frase: Ir a enlaces a otra página que apunta a donde hemos colocado la marca (el atributo href tendra como valor el nombre de la marca precedido por #).

    Enlaces a una dirección de correo:
    En este apartado nuestro enlace sera hacia una direccion de correo. Este enlace funcionará cuando pinchemos en el abriendonos el servidor de correo que tengamos predeterminado en nuestro ordenador y con la dirección a la que apunta ya colocada.
    Ejemplo:
    <A href="mailto:bootsbob05[arroba]yahoo.com">Mi E-Mail</A> Resultado:
    Mi E-Mail En esta clase de enlaces no se os olvide poner mailto: en el atributo href antes de la dirección de correo electrónico.
    Marquesinas
    Una marquesina (en inglés, marquee) es una ventana en la que se desplaza un texto. Sólo son válidas para el Explorer de Microsoft (en el Netscape se verá como texto fijo).
    Estructuras
    La etiqueta básica es:
    <MARQUEE> Texto que se desplaza </MARQUEE>
    Que resulta como:
    Texto que se desplaza
    Formatos
    WIDHT, HEIGHT
    Ajustan la anchura y altura, respectivamente, de la marquesina.
    Pueden ser igual a un número de pixels, o a un porcentaje de la pantalla. Ejemplo:

    <MARQUEE WIDTH=50% HEIGHT=60> Esta marquesina ocupa el 50% del ancho de la pantalla y tiene una altura de 60 pixels </MARQUEE>
    Que resulta como:
    Esta marquesina ocupa el 50% del ancho de la pantalla y tiene una altura de 60 pixels
    ALIGN
    Modifica el alineamiento del texto que rodea a la marquesina, que puede ser TOP (arriba), MIDDLE (en medio) o BOTTOM (abajo). Ejemplo:
    <MARQUEE WIDTH=50% HEIGHT=60 ALIGN=BOTTOM>La palabra "¡Hola!" estará
    alineada con la parte inferior de la marquesina</MARQUEE> ¡Hola!
    Que resulta como:
    La palabra "¡Hola!" estará alineada con con la parte inferior de la marquesina ¡Hola!
    Marcos (Frames)
    Frames (en inglés, marcos o cuadros) es un procedimiento del lenguaje HTML para dividir la pantalla en diferentes zonas, o ventanas, que pueden actuar independientemente unas de otras, como si se trataran de páginas diferentes, pues incluso cada una de ellas pueden tener sus propias barras deslizaderas. Los navegadores que lo implementan son el Netscape 2.0, y el Explorer 2.0 en adelante.
    Enlaces de Página con Marco
    A veces encontramos páginas con frames que contienen enlaces a otros sitios del Web que al ser pulsados se cargan dentro del mismo frame. Esto resulta generalmente molesto para el usuario, pues la página cargada queda aprisionada dentro del reducido
    espacio del frame (agravado aún más si la página cargada contiene ella misma sus propios frames). Además, el usuario puede tener la impresión de que el autor de la página pretende impedirle que se "escape" a otras páginas.
    La manera de evitar esto es poner, dentro de las etiquetas de los enlaces en cuestión, el atributo TARGET="_top", con lo que al pulsar el enlace la nueva página se cargará a pantalla completa.
    Atributos de las Etiquetas (Frameset)
    La etiqueta FRAMESET, es la que define la distribución, el número y tamaño de los frames. Tiene dos atributos: COLS (columnas) y ROWS (filas):

    <FRAMESET COLS="XX, YY, ZZ,">
    <FRAMESET ROWS="XX, YY, ZZ,">

    Define la distribución de los frames en columnas o en filas, según se use uno u otro atributo.
    Define el número de frames que habrá, pues, por ejemplo:

    <FRAMESET COLS="XX, YY"> (habrá dos frames en columnas)
    <FRAMESET COLS="XX, YY, ZZ"> (habrá tres frames en columnas)

    Define el tamaño de los frames, según el valor que demos a XX, YY, ZZ.... Este valor se puede expresar en:
    Un porcentaje del ancho del pantalla (para las columnas), o del alto de la pantalla (para las filas). Así, por ejemplo:
    <FRAMESET COLS="%20, %80"> (la columna de la izquierda ocupará el 20% del ancho de la pantalla, y la de la derecha el 80% restante)
    <FRAMESET ROWS="%10, %70, %20"> (la fila superior ocupará el 10% del alto de la pantalla, la del medio el 70%, y la inferior el 20%)
    Un número absoluto que representa el número de pixels que ocupará cada frame a lo ancho o a lo alto (según sean filas o columnas). Así, por ejemplo:
    <FRAMESET COLS="40, 600"> (la columna de la izquierda tendrá 40 pixels de ancho y la de la derecha 600). Pero es peligroso utilizar sólo valores absolutos, pues el tamaño de la pantalla varía de un usuario a otro. Si se va a usar algún valor absoluto para un frame, es mejor mezclarlo con alguno relativo, como los que vamos a ver a continuación, para que se ajuste el total a la pantalla del usuario
    Un valor relativo que se consigue poniendo un asterisco (*), en vez de un número. Esto se interpreta como que ese frame debe tener el espacio restante. Por ejemplo:
    <FRAMESET ROWS="100,*,100"> (Habrá tres filas, la superior y la inferior de una altura fija de 100 pixels, y la del medio obtendrá el espacio restante).
    Caracteres Especiales
    Existen algunas limitaciones para escribir el texto. Una de ellas es debido a que las etiquetas, se forman como un comando escrito entre los símbolos "<" y ">". Por tanto, si se quisieran escribir estos caracteres como parte normal del texto, daría esto lugar a una ambigüedad, ya que el programa navegador podría interpretarlos como el comienzo o final de una etiqueta, en vez de un carácter más del texto.
    Para resolver este problema, existen unos códigos para poder escribir estos caracteres y otros relacionados con las etiquetas.
    &lt; para < (less than, menor que)
    &gt; para > (greater than, mayor que)
    &amp; para & (ampersand)
    &quot; para " (double quotation)

    Como se ve, estos códigos empiezan siempre con el signo "&" y acaban siempre con ";"
    De una manera similar, existen códigos para escribir letras específicas de distintos idiomas. Hay muchos de ellos, pero, lógicamente, los que más nos interesan son los propios del castellano (las vocales acentuadas, la " ñ " y los signos " ¿ " y " ¡ " ).
    Los códigos de las vocales acentuadas se forman comenzando con "&", seguido de la vocal en cuestión, seguido de la palabra acute (aguda) y terminando con el signo ";".

    &aacute; Para la á
    &eacute; Para la é
    &iacute; Para la í
    &oacute; Para la ó
    &uacute; Para la ú
    &Aacute; Para la Á
    &Eacute; Para la É
    &Iacute; Para la Í
    &Oacute; Para la Ó
    &Uacute; Para la Ú
    &ntilde; Para la ñ
    &Ntilde; Para la Ñ
    &uuml; Para la ü
    &Uuml; Para la Ü
    &#191; Para ¿
    &#161; Para ¡

    Todo esto, que como se ve es muy laborioso, puede parecer inútil ya que si se escribe el texto sin hacer ningún caso de estas convenciones, escribiendo las letras acentuadas y demás signos directamente, es muy posible que el resultado se vea correctamente en dicho navegador, pero nunca se puede estar seguro que le ocurra lo mismo a todos los que accedan a estas páginas con navegadores distintos.

     

     

     

     

    Autor:

    Omar Hernández

    omarsan60[arroba]hotmail.com

    República Bolivariana de Venezuela

    Ministerio Del Poder Popular Para La Educación Superior

    Municipio Carlos Arvelo Edo Carabobo

    U.B.V

    Misión Sucre - Aldea Tacarigu

    MAYO, 2009


    Partes: 1, 2


    •  Página anterior Volver al principio del trabajoPágina siguiente 

    Comentarios

    Trabajos relacionados

    Ver mas trabajos de Programacion

    		 

    Nota al lector: es posible que esta página no contenga todos los componentes del trabajo original (pies de página, avanzadas formulas matemáticas, esquemas o tablas complejas, etc.). Recuerde que para ver el trabajo en su versión original completa, puede descargarlo desde el menú superior.


    Todos los documentos disponibles en este sitio expresan los puntos de vista de sus respectivos autores y no de Monografias.com. El objetivo de Monografias.com es poner el conocimiento a disposición de toda su comunidad. Queda bajo la responsabilidad de cada lector el eventual uso que se le de a esta información. Asimismo, es obligatoria la cita del autor del contenido y de Monografias.com como fuentes de información.