Abril 21, 2018, 03:17:58 pm

Autor Tema: Guia Detallada de HTML, Aprende Este Lenguaje Desde 0  (Leído 39058 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado carlmycol

  • Yo vivo en CPH
  • ***
  • Mensajes: 1357
  • Sexo: Masculino
    • Ver Perfil
Guia Detallada de HTML, Aprende Este Lenguaje Desde 0
« en: Agosto 09, 2007, 08:39:37 am »
    Guia Detallada de HTML Aprende de Este Lenguaje Desde 0

    Contenido

    1.- Elementos del lenguaje HTML

    2.- Estructura de un documento HTML

    Marca de inicio y fin <HTML>
    Cabecera <HEAD>, <TITLE>, <META>, <BASE>
    Cuerpo < BODY>
    Comentarios <!-- comentario --> 

    3.- Separadores de bloques de texto
     
    Párrafos <P>
    Saltos de línea <BR>
    Bloques tabulados <BLOCKQUOTE>
    Línea horizontal <HR>
    Divisiones <DIV>
    Texto prefomateado <PRE>
    Direcciones <ADDRESS>
    Centrado de bloques <CENTER>

    4.- Tipos de letras

    Cabeceras <Hn>
    Tamaño, color y tipo de letra <FONT>
    Tamaño por defecto de la letra <BASEFONT>
    Estilos de caracteres

    5.- Colores

    Texto de colores <FONT>
    Colores del entorno (fondo, texto y enlaces) <BODY>
    Tabla de códigos de colores

    6.- Hiperenlaces

    Explicaciones sobre los hiperenlaces
    Definición de ancla <A>
    Ancla de partida El atributo HREF
    Ancla de llegada El atributo NAME
    Apertura de una nueva ventana El atributo TARGET
    Enlaces a puntos internos a un documento
    Aplicación a notas al pie de página
    Aclaraciones sobre los enlaces
    Servicios de Internet (otros URL) [/li][/list]

    7.- Listas

    Introducción
    Listas sin orden <UL> <LI>
    Listas ordenadas <OL> <LI>
    Listas de directorio <DIR> <LI>
    Listas de menu <MENU> <LI>
    Listas de definición <DL> <DT> <DD>
    Anidamiento de listas (ejemplos)
    Ejemplo de listas de definición

    8.- Tablas

    Definición de la tabla <TABLE>
    Marca de comienzo de una nueva fila <TR>
    Marca de comienzo de una nueva celda <TD>
    Celdas con texto de cabecera <TH>
    Tablas con título <CAPTION>
    Pequeño tutorial de tablas

    9.- Frames

    Introducción a los frames
    Definición de un bloque de frames <FRAMESET>
    Definición de cada frame <FRAME>
    Mensaje para browsers sin frames <NOFRAMES>
    Enlaces entre frames El atributo TARGET

    10.- Formularios

    Introducción
    Atributos comunes
    Marca de comienzo y fin <FORM>
    Campos de entrada de texto y botones <INPUT>
    Listas de selección <SELECT>
    Ventanas de texto con barras de desplazamiento <TEXTAREA>

    11.- Imágenes

    Introducción
    Inserción de imágenes <IMG>
    Alineación de imágenes El atributo ALIGN
    Extensiones del Netscape para la alineación de imágenes
    Imágenes como fondo de página <BODY>
    Imágenes como marcas de una lista <IMG> <DL>
    Animaciones
    Imagenes y Enlaces

    12.- Simbolos

    ¿Por qué hay que usar códigos?
    « Última modificación: Mayo 03, 2013, 09:12:17 pm por M4inFox »
    Pregúntate: ¿Qué estás dispuesto a sacrificar por alcanzar tus objetivos?

    Desconectado carlmycol

    • Yo vivo en CPH
    • ***
    • Mensajes: 1357
    • Sexo: Masculino
      • Ver Perfil
    Re: Guia Detallada de HTML Aprende de Este Lenguaje Desde 0
    « Respuesta #1 en: Agosto 09, 2007, 08:50:46 am »
    1.- Elementos del lenguaje HTML 

    A las instrucciones que forman el lenguaje HTML las denominaremos elementos. Se distinguen dos tipos de elementos:

    Elementos llenos:

    Estos elementos se forman mediante una marca de inicio y otra de final. En HTML las marcas se demilitan con los signos < (inferior a) y > (superior a). La marca de fin es idéntica a la inicial pero con el añadido de la barra inclinada, /, justo antes del nombre de la misma. Un texto marcado tendrá por tanto este aspecto:

    ...texto normal <marca> texto afectado por la marca </marca> resto del texto...
     

    Por ejemplo, para resaltar un texto en negrita, se emplea la marca <B> de la siguiente forma:

    ...texto normal <B> texto en negrita </B> resto del texto...

    Si en este ejemplo nos hubiesemos olvidado de la marca de final, el resto de la página estaría también en negrita.

    Elementos vacíos:

    Estos elementos no requieren de la marca final, ya que normalmente no producen un efecto sobre el texto en sí, sino que definen separadores.
    Por ejemplo el elemento <HR> que sirve para mostrar una línea horizontal en la pantalla, se escribirá: 

    <HR>

    Elementos con argumentos:

    Algunos elementos tienen argumentos, los cuales son denominados atributos. Cada uno de estos atributos podrá tener un valor el cual irá entre comillas, si es alfanumérico:

    <marca atributo1 atributo2=numerico atributo3="alfanumetrico">


    Ejemplos:

    Código: You are not allowed to view links. Register or Login
    <HR NOSHADE>
    <TABLE WIDTH=300> ... </TABLE>
    <A HREF="/home/default.html"> ... </A>

    Si se quieren utilizar caracteres como < o > en el texto normal, habrá que acudir a un artificio para que el browser no intente interpretarlos como marca. Estos caracteres así como otros símbolos utilizados en el código HTML se reemplazarán por los siguientes grupos de caracteres:

    • el caracter < será reemplazado por &lt;
    • el caracter > será reemplazado por &gt;
    « Última modificación: Agosto 09, 2007, 08:51:30 am por carlmycol »

    Desconectado carlmycol

    • Yo vivo en CPH
    • ***
    • Mensajes: 1357
    • Sexo: Masculino
      • Ver Perfil
    Re: Guia Detallada de HTML Aprende de Este Lenguaje Desde 0 En Construccion
    « Respuesta #2 en: Agosto 09, 2007, 09:03:24 am »
    2.- Estructura de un documento HTML

    Opcionalmente los documentos escritos en HTML empezarán por la marca <HTML> y finalizarán con la marca </HTML> . Esta marca tan solo sirve como identificación del contenido del fichero para ciertos programas que realizan cambios masivos en muchas páginas a la vez.
    Los documentos escritos en HTML están estructurados en dos partes diferenciadas: la cabecera (<HEAD>) y el cuerpo (<BODY>).

    Entre las marcas del elemento <HEAD> se podrán utilizar los siguientes elementos:

    <TITLE> para dar nombre al documento;
    <META> para forzar a la página activa a ser cargada cada cierto tiempo.
    <BASE> para prefijar la dirección base de los documentos referenciados mediante un URL relativo.
    El fichero fuente de un documento HTML podrá contener comentarios explicativos que serán ignorados por el browser.

    HEAD, TITLE, META, BASE

    La cabecera se emplea para facilitar información acerca del documento y está delimitada por <HEAD> prólogo </HEAD>. Normalmente esta información no se ve cuando se navega por el documento.

    Dentro de la cabecera se podrá definir una breve descripción que identifica el documento mediante las marcas <TITLE> y </TITLE>. El uso de TITLE es obligatorio ya que además de un carácter informativo tiene otras razones para existir:

    • Es el texto que el browser almacenará en el fichero hotlist o bookmark.
    • Es lo que se indica en la lista que aparece en la orden Go de la barra de menu.
    • Es lo que aparece en la esquina superior izquierda cuando se imprime el documento.
    • En un contexto Xwindow, cuando se minimiza la ventana, el título será tomado como nombre por el icono.


    A continuación se muestra un ejemplo del formato mínimo de la cabecera.

    Código: You are not allowed to view links. Register or Login
    <HTML>
       <HEAD>
          <TITLE> Aqui va el nombre del documento </TITLE>
       </HEAD>
       Cuerpo del documento
       ...
    </HTML>

    El título del documento que está usted leyendo ahora mismo se encuentra en la parte superior de esta ventana y es "Estructura de un documento HTML", como usted mismo podrá comprobar.

    En la cabecera puede utilizarse también el elemento <META> que puede forzar a que la página activa se cargue cada cierto tiempo (indicado en segundos mediante el atributo CONTENT).

    Código: You are not allowed to view links. Register or Login
    <HEAD>
       <TITLE> Título de la página </TITLE>
       <META HTTP-EQUIV="Refresh" CONTENT="10">
    </HEAD>

    Este ejemplo hace que el browser vuelva a cargar la página cada 10 segundos. También puede hacerse a un servidor, así:

    Código: You are not allowed to view links. Register or Login
    <HEAD>
       <TITLE> Título de la página </TITLE>
       <META HTTP-EQUIV="Refresh" CONTENT="10; URL=http://miservidor/mipagina.htm">
    </HEAD>

    Esto ha de ser utilizado con mucha precaución ya que podrá sobrecargar el servidor. Si el contenido de la página no va a cambiar es inútil hacerlo, de hecho, solo tendrá utilidad en casos muy especiales.
    El elemento <BASE HREF="URL"> define la información a prefijar a todo URL incompleto en el documento. Por ejemplo, el URL relativo "/html/test.html" corresponderá de hecho a "URL/html/test.html".

    BODY

    El resto del documento, o sea, todo aquello que no pertenezca a la cabecera, residirá entre <BODY> y </BODY>. Esta es la estructura mínima que debe poseer todo documento HTML:

    Código: You are not allowed to view links. Register or Login
    <HTML>
       <HEAD>
          <TITLE>Estructura mínima de un documento HTML</TITLE>
       </HEAD>
       <BODY>
          Documento
          ...
       </BODY>
    </HTML>

    Comentarios

    En el código fuente de una página HTM, los comentarios se introducirán entre las marcas: <!-- y -->. Todo texto situado entre dichas marcas será ignorado por el browser, y por tanto no será visible.

    Ejemplo:

    Código: You are not allowed to view links. Register or Login
    <!-- Esto es una línea de comentarios -->
    « Última modificación: Agosto 09, 2007, 01:05:55 pm por carlmycol »

    Desconectado carlmycol

    • Yo vivo en CPH
    • ***
    • Mensajes: 1357
    • Sexo: Masculino
      • Ver Perfil
    Re: Guia Detallada de HTML Aprende de Este Lenguaje Desde 0 En Construccion
    « Respuesta #3 en: Agosto 09, 2007, 10:35:34 am »
    3.- Separadores de bloques de texto   

    Para definir y separar bloques de texto se emplean una serie de marcas que definen párrafos, texto preformateado o bloques con significado especial como direcciones o citas.
    Marcas de bloques:

    • Párrafos. <P>
    • Saltos de línea. <BR>
    • Bloques tabulados. <BLOCKQUOTE>
    • Línea horizontal. <HR>
    • Divisiones. <DIV>
    • Texto preformateado. <PRE>
    • Direcciones. <ADDRESS>
    • Centrado de bloques. <CENTER>


    <P>

    <P> se utiliza para separar párrafos. Dado que para el HTML todo el texto es continuo, necesitamos algún mecanismo para indicar el principio y el fin de un párrafo. Las marcas inicial y final son <P> y </P>.

    Ejemplos:

    Código: You are not allowed to view links. Register or Login
    <P>
      Este texto está contenido dentro del primer párrafo,
      así que lo denominaremos: parrafo 1, párrafo 1, párrafo 1,
      párrafo 1, párrafo 1, párrafo 1, párrafo 1, párrafo 1.
    </P>
    <P>
      Este otro texto está contenido dentro del párrafo 2,
      párrafo 2, párrafo 2, párrafo 2, párrafo 2, párrafo 2,
      párrafo 2, párrafo 2.
    </P>

    Esto dará como resultado:

    Citar
    Este texto está contenido dentro del primer párrafo, así que lo denominaremos: parrafo 1, párrafo 1, párrafo 1, párrafo 1, párrafo 1, párrafo 1, párrafo 1, párrafo 1.

    Este otro texto está contenido dentro del párrafo 2, párrafo 2, párrafo 2, párrafo 2, párrafo 2, párrafo 2, párrafo 2, párrafo 2.


    Normalmente no suele utilizarse la marca de fin de párrafo, </P> ya que el texto continuará hasta que encuentre otro comienzo de párrafo <P>.
    Este elemento admite el atributo ALIGN, que puede tomar uno de los siguientes valores:

    • LEFT: Justifica el texto a la izquierda. (por defecto)
    • RIGHT: Justifica el texto a la derecha.
    • CENTER: El texto aparece centrado.

    Ejemplo:

    Código: You are not allowed to view links. Register or Login
    <P ALIGN=LEFT>
      Texto justificado a la izquierda, texto justificado
      a la izquierda, texto justificado a la izquierda,
      texto justificado a la izquierda.
    </P>
    <P ALIGN=RIGHT>
      Texto justificado a la derecha, texto justificado
      a la derecha, texto justificado a la derecha,
      texto justificado a la derecha.
    </P>
    <P ALIGN=CENTER>
      Texto centrado, texto centrado, texto centrado,
      texto centrado, texto centrado, texto centrado.
    </P>

    Esto dará como resultado:

    Citar
    Texto justificado a la izquierda, texto justificado a la izquierda, texto justificado a la izquierda, texto justificado a la izquierda.


    Texto justificado a la derecha, texto justificado a la derecha, texto justificado a la derecha, texto justificado a la derecha.


    Texto centrado, texto centrado, texto centrado, texto centrado, texto centrado, texto centrado

    <BR>

    El elemento <BR> es vacío por lo que sólo tiene marca inicial. Indica un salto de línea.

    Ejemplo:

    Código: You are not allowed to view links. Register or Login
    Texto 1, texto 1, texto 1, texto 1, texto 1, texto 1,
    texto 1, texto 1, texto 1, texto 1, texto 1, texto 1,
    texto 1, texto 1. <BR>
    Texto 2, texto 2, texto 2, texto 2, texto 2.

    Con esto tendremos como resultado:

    Citar
    Texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1.
    Texto 2, texto 2, texto 2, texto 2, texto 2.

    <BLOCKQUOTE>

    El elemento <BLOCKQUOTE> sirve para representar párrafos tabulados, por la izquierda y la derecha.

    Ejemplo:

    Código: You are not allowed to view links. Register or Login
    Texto 1,  texto 1, texto 1, texto 1, texto 1.
    <BLOCKQUOTE>
      Texto 2, texto 2, texto 2, texto 2, texto 2, texto 2,
      texto 2, texto 2, texto 2, texto 2, texto 2, texto 2.
      </BLOCKQUOTE>

    El resultado será:

    Citar
    Texto 1, texto 1, texto 1, texto 1, texto 1.


    Texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2.

    <HR>

    <HR> es un elemento vacío por lo que solo tiene marca inicial. Se emplea para separar bloques de texto representando una línea horizontal.
    Se puede cambiar la apariencia de dicha línea mediante los siguientes atributos:

    • NOSHADE: Elimina el efecto de sombra de la línea.
    • WIDTH: Permite definir la longitud de la línea.
    • SIZE: Permite definir el grosor de la línea.

    Ejemplos:

    Código: You are not allowed to view links. Register or Login
    <HR NOSHADE>
    Código: You are not allowed to view links. Register or Login
    <HR WIDTH=250 SIZE=3>
    Código: You are not allowed to view links. Register or Login
    <HR NOSHADE WIDTH=400 SIZE=4>
    <DIV>

    Este elemento se comporta de forma muy parecida al salto de línea, <BR>, y a su vez admite los mismos atributos que <P>: ALIGN (LEFT, RIGHT, CENTER); o sea, permite definir un bloque con los atributos de <P>, pero dejando tan solo un salto de línea entre un bloque y otro.

    Ejemplos:

    Código: You are not allowed to view links. Register or Login
    <DIV ALIGN=LEFT>
      Texto justificado a la izquierda.
    </DIV>
    <DIV ALIGN=RIGHT>
      Texto justificado a la derecha.
    </DIV>
    <DIV ALIGN=CENTER>
      Texto centrado.
    </DIV>

    Esto dará como resultado:

    Citar
    Texto justificado a la izquierda.

    Texto justificado a la derecha.
    Texto centrado.

    <PRE>

    El texto insertado entre las marcas <PRE> y </PRE> será visualizado por el browser, respetando el formateo tal como haya sido entrado en el fichero fuente HTML, o sea, respetando los espacios y los saltos de carro.

    Ejemplo:

    Código: You are not allowed to view links. Register or Login
    <PRE>
    Esto es un texto preformateado, por tanto se
    respetan los espacios           y los saltos de

    carro,
    como podrán observar.
    </PRE>

    Resultado serà:

    Citar
    Esto es un texto preformateado, por tanto se
    respetan los espacios           y los saltos de

    carro,
    como podrán observar.

    <ADDRESS>

    El elemento <ADDRESS> se emplea para indicar que un texto representa una dirección o una firma mostrándolo, generalmente, en letra cursiva. Es muy utilizado para indicar toda la información respecto al autor del documento (dirección, teléfono, e-mail,...). Puede insertarse en cualquier lugar del documento; lo habitual en WWW es incluir esta zona de dirección al final del documento.

    Ejemplo:

    Código: You are not allowed to view links. Register or Login
    <ADDRESS>
      Tekin Tontu <BR>
      77A Wellington Rd <BR>
      Auburn 2144, NSW <BR>
      Australia <BR>
      e-mail tekin@cis.com <BR>
    </ADDRESS>

    Esto Dara de Resultado:

    Citar
    Tekin Tontu
    77A Wellington Rd
    Auburn 2144, NSW
    Australia
    e-mail You are not allowed to view links. Register or Login


    <CENTER>

    El elemento <CENTER> no es del HTML 2, sino del Netscape. Centra los elementos situados entre sus marcas de apertura y cierre. Dichos elementos podrán ser: bloques de texto, tablas, enlaces, imágenes, formularios, ...

    Ejemplo:

    Código: You are not allowed to view links. Register or Login
    <CENTER>
         <TABLE BORDER>
           <CAPTION ALIGN=bottom>Tabla centrada</CAPTION>
           <TR> <TD> Celda 1 <TD> Celda 2 </TR>
           <TR> <TD> Celda 3 <TD> Celda 4 </TR>
         </TABLE>
       </CENTER>

    El Resultado es Una Tabla centrada.

    Código: You are not allowed to view links. Register or Login
    <CENTER>
         <IMG SRC="images/bgfun02.gif">
       </CENTER>

    El Resultado es Una Imagen Centrada.

    Código: You are not allowed to view links. Register or Login
    <CENTER>
         <P>Este último ejemplo es un párrafo de texto centrado
         mediante el elemento CENTER. Como pueden observar
         cada una de las líneas del párrafo aparecerá centrada.<P>
       </CENTER>

    Da como resultado:

    Citar
    Este último ejemplo es un párrafo de texto centrado mediante el elemento CENTER. Como pueden observar cada una de las líneas del párrafo aparecerá centrada.
    « Última modificación: Agosto 11, 2007, 09:07:41 pm por carlmycol »

    Desconectado carlmycol

    • Yo vivo en CPH
    • ***
    • Mensajes: 1357
    • Sexo: Masculino
      • Ver Perfil
    Re: Guia Detallada de HTML Aprende de Este Lenguaje Desde 0 En Construccion
    « Respuesta #4 en: Agosto 09, 2007, 02:06:36 pm »
    4.- Tipos de letra

    En este apartado se indica cómo definir cabeceras mediante el elemento <Hn>, y cómo modificar el tamaño y color de algún grupo de caracteres mediante el elemento <FONT> y sus atributos SIZE y COLOR.
    Se puede también cambiar el tamaño de letra por defecto (3) de toda la página mediante el elemento vacío <BASEFONT>.

    Finalmente se definen los estilos de caracteres disponibles distinguiendo entre los estilos físicos (negrita, cursiva, ...) y los lógicos (variables, citas, ejemplos, ...).

    <Hn>

    El elemento <Hn> se utiliza fundamentalmente para escribir encabezamientos. Asigna un tamaño a los caracteres, dependiendo del valor n, el cual varía de 1 a 6. Los más grandes tienen valor 1 y los más pequeños valor 6. El texto entre estas marcas se trata en negrita. Se inserta automáticamente un salto de párrafo, como puede comprobar en el siguiente ejemplo:

    Código: You are not allowed to view links. Register or Login
    Texto antes de la cabecera. <H3>Cabecera</H3> Más texto.
    Te dara como resultado lo siguiente:

    Citar
    Texto antes de la cabecera.
    Cabecera
    Mas Texto

    <FONT>

    El elemento <FONT> permite definir el tamaño, color y tipo de letra de un conjunto de caracteres mediante los siguientes atributos:

    • El atributo SIZE: Regula el tamaño de los caracteres (1 - 7).`
    • El atributo COLOR: Especifica el color de los caracteres. Para consultar los códigos de los colores que le interesen puede consultar la tabla de códigos de colores.
    • El atributo FACE: permite definir el tipo de letra: Algerian, Arial, Times New Roman, Courier, MS Serif, Symbol, System, Times New Roman, Windsort, ... este comando no lo reconocen todos los navegadores (netscape no lo reconoce)

    Ejemplos:

    Código: You are not allowed to view links. Register or Login
    <FONT SIZE=4 COLOR=#008000> Texto de color verde y tamaño 4.<FONT>
    Te dara Como Resultado:

    Citar
    Texto de color verde y tamaño 4.

    Código: You are not allowed to view links. Register or Login
    <FONT SIZE=6 COLOR=#FF0000> Texto de color rojo y tamaño 6.<FONT>
    Te da como resultado:

    Citar
    Texto de color rojo y tamaño 6.

    El atributo SIZE del elemento <FONT> tiene la peculiaridad de poder indicar el tamaño de letra deseado en función del tamaño definido por defecto para el documento.

    Ejemplo:

    Código: You are not allowed to view links. Register or Login
    Este texto tiene el tamaño por defecto (3). <BR>
    <FONT SIZE=-1>Este texto es del tamaño 3-1=2.</FONT> <BR>
    <FONT SIZE=+2>Este texto es del tamaño 3+2=5.</FONT>

    Teniendo en cuenta que el valor por defecto definido inicialmente para un documento es 3, el resultado será:

    Citar
    Este texto tiene el tamaño por defecto (3).
    Este texto es del tamaño 3-1=2.
    Este texto es del tamaño 3+2=5.


    El valor del tamaño por defecto puede ser modificado mediante el elemento <BASEFONT> que se explica a continuación.

    <BASEFONT>

    El elemento <BASEFONT> permite cambiar el tamaño por defecto de toda la página mediante el atributo SIZE.

    Ejemplo:

    Código: You are not allowed to view links. Register or Login
    <BASEFONT SIZE=5>
    Con esta sentencia se conseguirá que el tamaño de letra por defecto del documento pase a ser 5, hasta que aparezca otro elemento <BASEFONT> que lo restaure o lo cambie por otro valor diferente.

    Ejemplo de uso de <FONT> y <BASEFONT>:

    Código: You are not allowed to view links. Register or Login
    Inicialmente el tamaño por defecto es 3.<BR>
    <FONT SIZE=+2>Por tanto este texto está en 3+2=5</FONT><BR>
    <BASEFONT SIZE=6>
    Ahora el tamaño por defecto es 6.<BR>
    <FONT SIZE=-2>Este texto está en 6-2=4</FONT><BR>

    El resultado es:

    Citar
    Inicialmente el tamaño por defecto es 3
    Por tanto este texto está en 3+2=5
    Ahora el tamaño por defecto es 6
    Este texto está en 6-2=4

    Estilos de Caracteres

    Los siguientes elementos llenos permitirán definir distintos estilos para el grupo de caracteres que se defina entre sus marcas de inicio y cierre.

    Ejemplo:

    Código: You are not allowed to view links. Register or Login
    <i> Texto en cursiva (itálica) </i>
    Asi queda:

    Citar
    Texto en cursiva (itálica)

    Código: You are not allowed to view links. Register or Login
    Este es el texto normal
    <b>Este es el texto Negrilla</b>

    Y el resultado es:

    Citar
    Este es el texto normal <br>
    Este es el texto Negrilla

    Código: You are not allowed to view links. Register or Login
    <u>Texto Subrayado</u>
    Citar
    Texto Subrayado

    Código: You are not allowed to view links. Register or Login
    <strike>Este es el texto Tachado</strike>
    Citar
    Este es el texto Tachado

    Código: You are not allowed to view links. Register or Login
    Texto Normal <sup>Texto de Super Indice</sup>

    Citar
    Texto Normal Texto de Super Indice

    Código: You are not allowed to view links. Register or Login
    Texto Normal <sub>Texto Subindice</sub>

    Citar
    Texto Normal Texto Subindice

    Código: You are not allowed to view links. Register or Login
    Texto Normal <tt>Texto de Maquina de Escribir</tt>

    Citar
    Texto Normal Texto de Maquina de Escribir

    Los estilos físicos indican explícitamente el tipo de caracteres a utilizar.
    Se pueden anidar distintos estilos obteniendo resultados como estos:

    Código: You are not allowed to view links. Register or Login
    <b><i> Negrita y cursiva </i></b>
    Resultado:

    Citar
    Negrita y cursiva


    Código: You are not allowed to view links. Register or Login
    <b><strike> Negrita y tachado </strike></b>
    Resultado:

    Citar
    Negrita y tachado
    « Última modificación: Agosto 09, 2007, 02:07:59 pm por carlmycol »

    Desconectado carlmycol

    • Yo vivo en CPH
    • ***
    • Mensajes: 1357
    • Sexo: Masculino
      • Ver Perfil
    Re: Guia Detallada de HTML Aprende de Este Lenguaje Desde 0 En Construccion
    « Respuesta #5 en: Agosto 09, 2007, 02:35:57 pm »
    5.- Colores    

    Los colores se identifican mediante el nombre del color en inglés o bien mediante un código del tipo #rrggbb donde "rr" "gg" y "bb" son valores hexadecimales comprendidos entre 00 y FF que especifican el grado de saturación de los colores rojo, verde y azul.
    Ha de tener en cuenta que algunos colores no se verán o se verán mal si la máquina no soporta 256 colores.
    Color del texto
    En este apartado se indicará cómo cambiar el color de un grupo definido de caracteres en un texto mediante el elemento <FONT>.
    Colores del entorno
    Aquí se verá cómo cambiar los colores definidos por defecto para el fondo, el texto normal y los enlaces mediante el elemento <BODY>. Este elemento también permite utilizar una imagen como fondo de página.

    Color del texto

    Se puede controlar el color del texto utilizando el elemento <FONT> con el atributo COLOR.
    A continuación se muestran algunos ejemplos:

    Código: You are not allowed to view links. Register or Login
    <FONT COLOR="red"> ROJO </FONT> <br>
    <FONT COLOR="blue"> AZUL </FONT>
    <FONT COLOR="navy"> AZUL MARINO </FONT>
    <FONT COLOR="green"> VERDE </FONT>
    <FONT COLOR="olive"> OLIVA </FONT>
    <FONT COLOR="yellow"> AMARILLO </FONT>
    <FONT COLOR="lime"> LIMA </FONT>
    <FONT COLOR="magenta"> MAGENTA </FONT>
    <FONT COLOR="purple"> PURPURA </FONT>
    <FONT COLOR="cyan"> CYAN </FONT>
    <FONT COLOR="brown"> MARRON </FONT>
    <FONT COLOR="black"> NEGRO </FONT>
    <FONT COLOR="gray"> GRIS </FONT>
    <FONT COLOR="teal"> TEAL </FONT>
    <FONT COLOR="white"> BLANCO </FONT>

    Resulta:

    Citar
    ROJO
    AZUL
    AZUL MARINO
    VERDE
    OLIVA
    AMARILLO
    LIMA
    MAGENETA
    PURPURA
    CYAN
    MARRON
    NEGRO
    GRIS
    TEAL
    BLANCO

    Como se comentó en la introducción el color se puede indicar tanto mediante su nombre en inglés como por determinados códigos hexadecimales.

    Colores del entorno

    Un cierto número de atributos de la marca BODY permite controlar el color del fondo de la ventana del browser, el color de los caracteres del texto y, finalmente, el color de los enlaces:

    Código: You are not allowed to view links. Register or Login
    < BODY atributo1 atributo2 atributo3 ... atributoN >

    El atributo BGCOLOR

    Este atributo permite establecer un color de fondo para el documento.

    Código: You are not allowed to view links. Register or Login
    <BODY BGCOLOR="#C0C0C0">
    Este ejemplo establecerá el colos gris claro (#C0C0C0) como color de fondo de página.

    El atributo BACKGROUND

    Este atributo permitirá se utilice una imagen residente en el servidor, o en un fichero local, como fondo de página.

    Código: You are not allowed to view links. Register or Login
    <BODY BACKGROUND="fichero_gráfico.gif">
    El Atributo Text

    Permite controlar el color del texto estándar, es decir, todo texto que no especifique un enlace.

    Ejemplo:

    Código: You are not allowed to view links. Register or Login
    <BODY TEXT="darkblue">
    Este ejemplo hará que, por defecto, el texto del documento aparezca de color azul oscuro.

    Los atributos LINK, VLINK y ALINK

    Controlan el color de los enlaces:

    • LINK es el color de un enlace que aún no ha sido visitado.
    • ALINK es un color muy fugaz que aparece cuando se hace clic sobre el enlace.
    • VLINK es el color de un enlace que ya ha sido visitado.

    Ejemplo:

    Código: You are not allowed to view links. Register or Login
    <BODY LINK="blue" ALINK="red" VLINK="navy">

    Desconectado carlmycol

    • Yo vivo en CPH
    • ***
    • Mensajes: 1357
    • Sexo: Masculino
      • Ver Perfil
    Re: Guia Detallada de HTML Aprende de Este Lenguaje Desde 0 En Construccion
    « Respuesta #6 en: Agosto 10, 2007, 08:47:34 am »
    6.- Hyperenlaces

    El siguiente elemento es uno de los más importantes del HTML, ya que es el que realmente permite "navegar" por uno o varios documentos, que pueden residir en cualquier parte, dando, sin embargo, la impresión de que se trata de un solo documento.

    Esto se consigue definiendo enlaces hipertextuales del Web mediante el elemento <A> y sus atributos: NAME, HREF y TARGET. El lector podrá por tanto explorar el documento picando con el ratón sobre las zonas activas definidas, denominadas hipertexto. Estas zonas activas pueden corresponder a un grupo de caracteres, una imagen, o bien una porción de imagen. En cualquier caso el principio es el mismo: asociar a la zona activa la dirección URL del documento que sustituirá al visualizado cuando se pulse con el ratón sobre esa zona. (Ver El protocolo de direccionamiento de documentos: URL)

    Un puntero puede colocarse en cualquier lugar del texto. Puede ser un elemento de una lista, o texto normal; puede estar enriquecido con atributos de estilo físico, lógico o de párrafo. Sin embargo, no es necesario darle un atributo para hacerlo reconocible como tal: los enlaces activables se destacan automáticamente (color y subrayado), siempre y cuando el usuario no realice una parametrización especial del browser.

    La definición por defecto del color de los enlaces de un documento puede ser modificada mediante el elemento <BODY> y los atributos LINK, ALINK y VLINK.

    Para especificar la partida y la llegada de un enlace hipertexto se define:

    • Ancla de partida: es la zona activa sobre la que el lector pulsará con el ratón para llamar a una nueva página. Este ancla se define mediante el atributo HREF.
    • Ancla de llegada: es una zona inactiva que especifica el punto de llegada de un enlace de hipertexto. Esta es pues una dirección. Este ancla se define mediante el atributo NAME.

    <A>

    El elemento <A> se utiliza para definir los enlaces hipertexto de los documentos HTML. Este elemento nunca se utiliza solo, por tanto siempre vendrá acompañado por, al menos, uno de sus dos atributos principales:
    El atributo HREF que define un ancla de partida.
    El atributo NAME que define un ancla de llegada.
    Además permite El atributo TARGET para ordenar la apertura de una nueva ventana del browser con la página indicada por HREF.
    A continuación se detallan cada uno de estos atributos.

    El atributo NAME

    Este atributo define un punto de llegada en el documento destino asignándole un nombre o etiqueta:
       
    Código: You are not allowed to view links. Register or Login
    <A NAME="etiqueta"> Zona no activable </A>
    Luego mediante el atributo HREF desde el fichero de partida se indicará el documento y la posición dentro de dicho documento a la que se quiere acceder:
       
    Código: You are not allowed to view links. Register or Login
    <A HREF="documento#etiqueta"> Zona activable </A>
    Hay que tener en cuenta que la etiqueta debe estar compuesta por un texto sin espacios en blanco, caracteres especiales ni caracteres codificados. Dicha etiqueta no deberá estar repetida dentro del mismo documento destino.

    El atributo HREF

    Este atributo define un ancla de partida hacia un enlace externo o interno, o sea, crea un enlace hacia un nuevo documento propuesto por dicho servidor o hacia un punto determinado dentro del documento actual. La sintáxis típica es:

    Código: You are not allowed to view links. Register or Login
    <A HREF="url_de_destino">zona activable con atributos visuales</A>

    Ejemplos:

    Código: You are not allowed to view links. Register or Login
    <A HREF="http://ccdis.dis.ulpgc.es/logo.html">
       Logotipo del Departamento de Informática y
       Sistemas de la ULPGC
    </A>

    También se pueden (o más bien se deben) usar direcciones relativas:

    Código: You are not allowed to view links. Register or Login
    <A HREF="indice.htm"> Indice </A>
    El valor de los atributos hay que escribirlos EXACTAMENTE como se deba, respetando las mayúsculas y minúsculas. Si se escribiese el nombre del protocolo (http://), del servidor (ccdis.dis.ulpgc.es/), o del fichero (logo.html) con alguna diferencia, la dirección sería errónea y el documento no sería encontrado.

    Si se desea ir directamente a la home page (página local) de un servidor, el URL se compondrá únicamente del nombre del servidor.

    Como puede comprobar en el ejemplo anterior la dirección URL comienza con el nombre del protocolo o tipo de servicio. En este caso se trata de http:// pero hay también otros tipos de Servicios de Internet.

    El atributo TARGET

    Este atributo ordena la apertura de una nueva ventana con el documento indicado por el atributo HREF.

    Ejemplo:

    Código: You are not allowed to view links. Register or Login
    <A HREF="indice.htm" TARGET="ventana2">
      Nueva ventana
    </A>

    Enlaces a puntos internos a un documento

    Como hemos visto hasta ahora el atributo HREF sirve para enlazar con otro documento que puede estar en un servidor o ser un fichero local. Dicho documento se presentará siempre desde la primera página.
    Para acceder a un punto determinado de un documento se debe definir el ancla de llegada en el documento destino mediante el atributo NAME , como se vió anteriormente. Luego se debe indicar la dirección del documento destino y del punto de comienzo, en el documento de partida, mediante el atributo HREF. La sintáxis es:

    Este codigo va en el punto donde quieres que valla el link:

    Código: You are not allowed to view links. Register or Login
    <A NAME="etiqueta"> </A>
    Recuerda cambiar el valor "Etiqeta" al valor que decees.

    Este codigo va en el documento de partida:

    Código: You are not allowed to view links. Register or Login
    <A HREF="destino.htm#etiqueta"> Zona activable </A>
    Recuerda cambiar el valor "Etiqueta" al valor que escogiste.

    De igual manera se puede referenciar un punto determinado dentro del mismo documento activo.
    Todo esto es muy útil cuando se trabaja con documentos grandes llenos de secciones.

    Aplicación a notas al pie de página

    Un ancla puede admitir varios atributos simultáneamente. En este apartado se utilizará la analogía con una nota al pie de página en un texto impreso para estudiar la utilización de los atributos HREF y NAME especificados en el mismo ancla.
    Una nota al pie de página se suele especificar mediante un superíndice, invitando al lector a desplazar la vista a la parte inferior de la página para leer una explicación complementaria. Sequidamente habrá que volver al punto donde se encontraba la referencia en cuestión para coninuar con la lectura.

    Una página HTML puede ser muy larga, por lo que mirar una anotación de este tipo podría ser bastante tedioso, por tanto la implementación de una anotación a pie página en una página Web se hará de la siguiente forma:

    En el texto actual se coloca un ancla activa y pasiva de la forma:

    Código: You are not allowed to view links. Register or Login
    ... texto <A HREF="#nota1" NAME="vuelta1"> <sup>1</sup> </A>
    Al principio del bloque de texto que compone la nota:

    Código: You are not allowed to view links. Register or Login
    <A HREF="#vuelta1" NAME="nota1">1.</A> Texto de la nota...
    Aclaraciones

    1.- El extremo de un enlace puede ser cualquier tipo de documento: Un fichero HTML, Una imagen GIF, JPEG o PostScript, un vídeo, Un texto     

    2.- Definir un enlace a una imagen es distinto que definir una imagen en línea ya que ésta última siempre se visualizará al cargar la página, mientras que el enlace visualizará la imagen tan solo cuando sea activado.

    3.- Si en el documento de destino no existe el punto definido en el documento de origen, el visualizador presentará en pantalla la última línea del mismo.

    4.- Al definir un enlace es preferible utilizar direcciones relativas. Si se utilizan direcciones absolutas habrá que modificar todas las direcciones si los ficheros cambian de localización.

    5.- Si al definir un enlace no se especifica el nombre de un fichero después del nombre de la máquina, por defecto el servidor entenderá que se le pide la home page (página inicial).

    6.- Si un servidor no tiene definida página inicial, simplemente mostrará una lista de todos los ficheros y directorios que tenga en el directorio definido como raíz.

    7.- Si después de la dirección de la máquina en lugar de un nombre de fichero se pone el de un directorio, generalmente el servidor mostrará un simple listado de los ficheros y directorios que éste contenga.

    8.- No sólo se puede crear un enlace sobre un texto, también se puede hacer sobre una imagen cualquiera. Es decir, después del enlace y antes de </A> se puedes poner lo que se quiera.

    9.- El arte de escribir buen HTML reside en dar una buena estructura a la información. Siempre que se puedas hay que huir de crear páginas muy largas. Es preferible crear cuantas hagan falta, con buena estructura y enlázarlas con cuantos enlaces sean precisos

    10.- Para utilizar direcciones absolutas con ficheros locales se deberá escribir: file:///C|/MIDIRECTORIO/mifichero.htm

    Servicios de Internet

    1.- HTTP:

    Este es el protocolo del Web. Se utiliza para referenciar documentos residentes en servidores Web.

    Citar
    You are not allowed to view links. Register or Login

    Ejemplo:

    Citar
    You are not allowed to view links. Register or Login

    Esto, al omitir el nombre del fichero, hará referencia a la página local (home page) del servidor del Departamento de Informática y Sistemas de la ULPGC.

    1.- FTP:

    Ofrece servicios para la trasferencia de ficheros. Permiten proponer la copia, en el ordenador local, de un fichero residente en el espacio de un servidor Web.

    Se puede proponer el acceso a un único fichero del servidor o bien proponer la totalidad de un directorio de servidor Web:

    Especificación de un directorio:

    Citar
    You are not allowed to view links. Register or Login

    Por ejemplo:

    Citar
    You are not allowed to view links. Register or Login

    Especificación de acceso directo a un fichero:

    Citar
    You are not allowed to view links. Register or Login

    Por ejemplo:

    Citar
    You are not allowed to view links. Register or Login

    3.- News:

    Las news son foros organizados en grandes ámbitos de interés donde cada uno puede participar en la discusión enviando y consultando artículos.

    En un servidor temático puede ser interesante crear una página HTML que recoja los grupos de news en relación con los temas del servidor.

    Su especificación es de la forma:

    Citar
    NEWS://nombre_del_grupo_de_news

    Por Ejemplo:

    Citar
    news://news.ulpgc.es

    4.- Telnet:

    Este URL es utilizado para la conexión entre ordendores. Permite obtener el lanzamiento de una ventana TELNET que contendrá la invitación de conectarse a la máquina especificada.

    Su especificación es de la forma:

    Citar
    TELNET://nombre_de_la_maquina

    Por Ejemplo:

    Citar
    telnet://sopa.dis.ulpgc.es/

    5.- Gopher:

    Este URL permite una conexión a una sede gopher.

    Citar
    GOPHER://nombre_de_sede

    Por ejemplo:

    Citar
    gopher://sopa.dis.ulpgc.es/

    6.- MAILTO

    Este URL no es soportado por todos los browsers. Cuando se llama, se proporciona al lector un cuadro de edición, que le permite escribir correo electrónico y poner la dirección en un campo especificado indicando su dirección electrónica. Este correo se envía a la dirección indicada en el URL.

    Citar
    MAILTO:nombre_del_destinatario@sede

    Por ejemplo:

    Citar
    mailto:a1989@correo.dis.ulpgc.es

    7.- FILE:

    Para especificar direcciones absolutas de ficheros locales se utilizará la siguiente sintáxis:

    Citar
    file:///C|/directorio/subdirectorio/nombre_del_fichero.htm

    Si se trabaja con direcciones relativas bastará con especificar el path a partir del directorio local. Hacer esto tiene la importante ventaja de no tener que cambiar las direcciones cuando se produce un movimiento de ficheros.

    Por ejemplo:

    Citar
    indice.htm

    Desconectado carlmycol

    • Yo vivo en CPH
    • ***
    • Mensajes: 1357
    • Sexo: Masculino
      • Ver Perfil
    Re: Guia Detallada de HTML Aprende de Este Lenguaje Desde 0 En Construccion
    « Respuesta #7 en: Agosto 11, 2007, 09:30:36 pm »
    7.- Listas

    Una lista permite organizar la totalidad o parte de un documento HTML estructurándolo de la forma más clara posible para hacerlo más perceptible al lector. Las listas se utilizan para dividir el documento asi como para efectuar numeraciones de objetos, pero la diferencia con los procesadores de texto es que no permite la numeración automática para niveles jerárquicos diferentes:

    HTML define varios tipos de listas:

    * Listas sin orden, sin numeración: <UL> , <LI>
    * Listas ordenadas, con numeración: <OL> , <LI>
    * Listas de directorio, similares a las listas sin orden: <DIR> , <LI>
    * Listas de menú , similares a las listas sin orden: <MENU> , <LI>
    * Listas de definición, típicamente un glosario: <DL> , <DT> , <DD>

    Cualquiera de los tipos de listas nombrados puede ser anidado. En el caso de las listas ordenadas no se consique una numeración escalonada al anidar una lista dentro de otra, como se vió en el ejemplo anterior. Las listas sin orden cambian el símbolo de comienzo al anidarse unas dentro de otras. Al final de esta página se muestran varios ejemplos de listas anidadas.
    Como puede comprobar los primeros cuatro tipos de listas, denominados listas regulares, hacen uso de la marca <LI>. La cual se explica a continuación.

    <LI> Y <UL>

    <LI>
    La marca <LI> es un elemento vacío, o sea, no requiere de marca de fin, y es común a las denominadas listas regulares. La sintáxis general de estas listas será:

    Código: You are not allowed to view links. Register or Login
    <LI>
      <li> Primer elemento de la lista
      <li> Segundo elemento de la lista
      <li> ...
    </LI>

    <UL>
    La marca <UL> permite generar listas no ordenadas, cada uno de los elementos de la lista irá precedido por un símbolo (fijo por defecto) que puede variar según el nivel de anidamiento de la lista.

    Ejemplo:

    Código: You are not allowed to view links. Register or Login
    <UL>
      <LI>Fichero HTML</LI>
      <LI>Fichero de imagen</LI>
      <LI>Fichero de sonido</LI>
      <LI>Fichero de vídeo</LI>
      <LI>Fichero de ejemplo</LI>
    </UL>

    Resultado:

    Citar
    • Fichero HTML
    • Fichero de imagen
    • Fichero de sonido
    • Fichero de vídeo
    • Fichero de ejemplo

    Los puntos gruesos se pueden cambiar usando el atributo TYPE con tres valores (el valor por defecto es DISC). Con el valor CIRCLE se será:

    Código: You are not allowed to view links. Register or Login
    <UL TYPE=CIRCLE>
      <LI>Primera línea
      <LI>Segunda línea
    </UL>

    También puede usarse el valor SQUARE. Así:

    Código: You are not allowed to view links. Register or Login
    <UL TYPE=SQUARE>
      <LI>Primera línea
      <LI>Segunda línea
    </UL>

    <OL>
    La marca <OL> se utiliza para una lista ordenada o numerada. Cada marca </LI> incrementará el número que se visualizará delante del elemento de la lista.

    Ejemplo:

    Código: You are not allowed to view links. Register or Login
    <OL>
    <LI>Fichero HTML</LI>
    <LI>Fichero de imagen</LI>
    <LI>Fichero de sonido</LI>
    <LI>Fichero de vídeo</LI>
    <LI>Fichero de ejemplo</LI>
    </OL>

    Y como resultado da:

    Citar
    1.  Fichero HTML
    2.  Fichero de imagen
    3.  Fichero de sonido
    4.  Fichero de vídeo
    5.  Fichero de ejemplo


    Las listas ordenadas no sólo se pueden ordenar con números. También se pueden utilizar letras y numeración romana tanto en mayúsculas como minúsculas. Para esto se utiliza el atributo TYPE del elemento <OL> con los siguientes valores:

    TYPE=1
    (por defecto) para números,
    TYPE=A
    para letras mayúsculas,
    TYPE=a
    para letras minúsculas,
    TYPE=I
    para numeración romana en mayúsculas,
    TYPE=i
    para numeración romana en minúsculas.
    Esto es una lista ordenada con letras mayúsculas:

    Ejemplo:

    Código: You are not allowed to view links. Register or Login
    <OL TYPE=A>
    <LI>Primera línea
    <LI>Segunda línea
    <LI>Tercera línea
    <LI>Cuarta línea
    </OL>

    Resultado:

    Citar
    A.  Primera línea
    B.  Segunda línea
    C.  Tercera línea
    D.  Cuarta línea


    Asi susesivamente con todos los atributos TYPE.

    En algunos casos puede interesarnos que la lista no comience por el número 1 (por ejemplo si es una lista que continua en otra página). Se puede conseguir con el atributo START combinado con TYPE.

    Ejemplo:

    Código: You are not allowed to view links. Register or Login
    <OL TYPE=A START=5>
      <LI>Primera línea
      <LI>Segunda línea
      <LI>Tercera línea
      <LI>Cuarta línea
    </OL>

    Esto es una lista ordenada con letras mayúsculas y que comienza por la E:

    Citar
    E.  Primera línea
    F.  Segunda línea
    G.  Tercera línea
    H.  Cuarta línea


    El número que se pone en el atributo START indica en que número o letra comenzará la lista. La E es la quinta letra.

    <DIR>

    Las listas de directorio son similares a las listas sin orden. En el Netscape no se ve diferencia entre una y otra. La única diferencia es la sintáxis del código donde en vez de utilizar la marca <UL> se utiliza la marca <DIR>.

    La marca <DIR> admite los mismos atributos que la marca <UL>.

    Ejemplo:

    Código: You are not allowed to view links. Register or Login
    <DIR>
      <LI>Español</LI>
      <LI>Inglés</LI>
      <LI>Francés</LI>
      <LI>Alemán</LI>
    </DIR>

    <MENU>

    Las listas de menu son similares a las listas sin orden. En el Netscape no se ve diferencia entre una y otra. La única diferencia es la sintáxis del código donde en vez de utilizar la marca <UL> se utiliza la marca <MENU>.

    La marca <MENU> admite los mismos atributos que la marca <UL>.

    Código: You are not allowed to view links. Register or Login
    <MENU>
      <LI>Opción 1</LI>
      <LI>Opción 2</LI>
      <LI>Opción 3</LI>
    </MENU>

    Listas de Definicion

    Una lista de definición es una lista no enumerada en la que se da una descripción de cada uno de sus elementos. Un ejemplo típico es un glosario. Las listas descriptivas están definidas por los siguientes elementos:

    <DL>

    El elemento <DL> abre una lista descriptiva y finaliza con </DL>. Define el inicio de la lista y englobará otras dos marcas (DT y DD) cuya función es caracterizar el elemento y definirlo.
    El atributo COMPACT está asociado a la marca DL (<DL COMPACT>) y permite mostrar en la misma línea el elemento y su descripción.

    <DT>

    El elemento <DT> precede a cada item de la lista, el cual no puede sobrepasar la longitud de una línea. Este elemento no resalta el texto de cada item por lo tanto si quiere algún formato especial como negrita o cusiva habrá que especificarlo con sus correspondientes marcas.
    No tiene final de marca.

    <DD>

    La marca <DD> corresponde a la zona de definición de cada item. El tamaño de esta zona no está limitado y cada línea se sangrará hacia la derecha.
    No tiene final de marca.

    La estructura de este modelo de lista será la siguiente:

    Código: You are not allowed to view links. Register or Login
    <DL>
      <DT> Identificación del elemento <DD> Descripción del elemento
      <DT> ... <DD> ...
    </DL>

    Ejemplo de Lista de Definicion:

    Código: You are not allowed to view links. Register or Login
    <dl compact>
      <dt>ASCII <dd> Juego de caracteres que asigna valores
    numéricos estándar a las letras, cifras y signos de puntuación.
      <dt>EPS <dd> Formato de descripción de ficheros PostScript.
      <dt>FUENTE <dd> Conjunto de estilos que posee una categoría
    de caracteres (negrita, cursiva, etc...).
    </dl>

    Anidamiento de Listas No Ordenadas

    En el siguiente ejemplo el browser Netscape visualizará tres símbolos distintos en función del grado de anidamiento, y posteriormente utilizará el último símbolo (el cuadro vacío) para los siguientes niveles. El browser Mosaic, sin embargo, utilizará el mismo símbolo para todos los niveles:

    Código: You are not allowed to view links. Register or Login
    <UL>
      <LI>Ficheros HTML
      <UL>
        <LI>Ejemplos
        <UL>
          <LI>Listas
          <LI>Tablas
          <LI>Estilos
          <UL>
            <LI>Cita
            <LI>Texto en énfasis
          </UL>
        </UL>
        <LI>En curso
        <LI>Prescritos
      </UL>
      <LI>Ficheros de imágenes
    </UL>

    Anidamiento de listas ordenadas

    En el siguiente ejemplo se aprecia que la enumeración según el grado de anidamiento no es automática:

    Código: You are not allowed to view links. Register or Login
    <OL>
      <LI>Fichero HTML
      <LI>Fichero de imágenes
      <OL>
        <LI>Naturalezas muertas
        <LI>Paisajes
        <OL>
          <LI>Verano
          <LI>Invierno
        </OL>
      </OL>
      <LI>Fichero de sonidos
    </OL>

    Anidamiento de listas ordenadas con listas no ordenadas

    A continuación mostraremos un ejemplo de listas de varios niveles, en el que se muestra listas ordenadas con listas no ordenadas:

    Código: You are not allowed to view links. Register or Login
    <UL>
      <LI>Ficheros HTML
      <OL>
        <LI>Ficheros de prueba
        <UL>
          <LI>prueba 1.html
          <LI>prueba 2.html
          <LI>prueba 3.html
        </UL>
        <LI>Ficheros de ejemplo
        <LI>Ficheros del servidor
      </OL>
      <LI>Ficheros de imágenes
      <LI>Ficheros de sonidos
      <LI>Ficheros de vídeo
    </UL>

    Desconectado carlmycol

    • Yo vivo en CPH
    • ***
    • Mensajes: 1357
    • Sexo: Masculino
      • Ver Perfil
    Re: Guia Detallada de HTML Aprende de Este Lenguaje Desde 0 En Construccion
    « Respuesta #8 en: Agosto 14, 2007, 07:43:45 am »
    8. Tablas   

    La estructura de una tabla se define mediante:

    * una marca de inicio de la tabla (TABLE),
    * una marca de comienzo de una nueva línea (TR) y
    * una marca de comienzo de una celda (TD).

    Al final de cada uno de estos elementos se deberá definir la marca de final correspondiente.
    Esta estructura es bastante simple y muy fácilmente modificable.
    Se pueden definir además textos de cabecera en las celdas (TH) y títulos para las tablas (CAPTION).
    Una celda puede contener algunos de los siguientes elementos:

    *texto
    *listas
    *otras tablas
    *imágenes
    *enlaces de hipertexto
    *elementos de formulario

    La representación de una tabla es actualmente muy dependiente del browser utilizado.

    <TABLE>

    La marca <TABLE> permite la apertura de una tabla; el fin de tabla se especifica con </TABLE>.
    Se puede indicar alguno de los siguintes atributos:
     
    * BORDER: define el grosor del marco exterior (puede ser cero).
    * CELLPADDING: define el espacio alrededor del texto de una celda.
    * CELLSPACING: define el espacio entre celdas.

    El valor de estos atributos se especifica en píxels. Cuando no se les asigna ningún valor explícitamente estos atributos tomarán valores definidos por defecto.
    El valor por defecto del atributo BORDER es cero por lo que si éste atributo no se especifica se obtendrá una tabla sin bordes la cual suele ser muy útil para la alineación de elementos, uno al lado de otro, o uno debajo de otro. Para que se visualicen los bordes de la tabla bastará nombrar este atributo asignandole un valor, o no.
    Se puede determinar el tamaño de la tabla, bien forzandola a ocupar un cierto porcentaje de la anchura de la ventana del browser o definiendo un tamaño fijo en unidades, mediante los atributos:
     
    * WIDTH: define el ancho de la tabla, bien en % o en unidades.
    * HEIGTH: define el alto de la tabla, bien en % o en unidades.

    Ejemplos:

    Código: You are not allowed to view links. Register or Login
    <TABLE>
    <TR><TD>celda 1</TD><TD>celda 2</TD></TR>
    <TR><TD>celda 3</TD><TD>celda 4</TD></TR>
    </TABLE>

    Código: You are not allowed to view links. Register or Login
    <TABLE BORDER>
    <TR><TD>celda 1</TD><TD>celda 2</TD></TR>
    <TR><TD>celda 3</TD><TD>celda 4</TD></TR>
    </TABLE>

    Código: You are not allowed to view links. Register or Login
    <TABLE BORDER=5 CELLSPACING=6 CELLPADDING=8>
    <TR><TD>celda 1</TD><TD>celda 2</TD></TR>
    <TR><TD>celda 3</TD><TD>celda 4</TD></TR>
    </TABLE>

    Definiendo el ancho y alto de la tabla en %

    Código: You are not allowed to view links. Register or Login
    <TABLE BORDER WIDTH=50% HEIGHT=30%>
    <CAPTION>Definiendo el ancho y alto de la tabla en %</CAPTION>
    <TR ALIGN="center">
    <TH>Ancho (<I>WIDTH</I>)</TH>
    <TD>50%</TD>
    <TR ALIGN="center">
    <TH>Alto (<I>HEIGHT</I>)</TH>
    <TD>30%</TD>
    </TABLE>

    Definiendo el ancho y alto de la tabla en unidades.

    Código: You are not allowed to view links. Register or Login
    <TABLE BORDER WIDTH=300 HEIGHT=80>
    <CAPTION>Definiendo el ancho y alto de la tabla en %</CAPTION>
    <TR ALIGN="center">
    <TH>Ancho (<I>WIDTH</I>)</TH>
    <TD>300</TD>
    <TR ALIGN="center">
    <TH>Alto (<I>HEIGHT</I>)</TH>
    <TD>80</TD>
    </TABLE>

    <TR>

    La marca <TR> inicia una línea de la tabla que terminará con </TR>. Admite los atributos:

    1. VALIGN: permite una alineación del texto en el sentido vertical de la celda.
    Admite los valores: TOP, BOTTOM, MIDDLE

    2. ALIGN: permite una alineación del texto en el sentido horizontal de la celda.
    Admite los valores: RIGHT, CENTER, LEFT

    Estos atributos se aplican sobre toda la fila, salvo cuando un atributo de <TD> contradice esta alineación.

    <TD>

    La marca <TD> delimita el inicio de una celda. Admite los atributos:

    1. VALIGN: permite una alineación del texto en el sentido vertical de la celda.
    Admite los valores: TOP, BOTTOM, MIDDLE

    2. ALIGN: permite una alineación del texto en el sentido horizontal de la celda.
    Admite los valores: RIGHT, CENTER, LEFT

    3. COLSPAN: define una celda con una anchura múltiplo de la columna básica.
    ROWSPAN: define una celda con una anchura múltiplo de la fila básica.

    4. NOWRAP: obliga al browser a inscribir todo el texto de la celda en una sola línea.

    En las tablas el ajuste es automático, la anchura de una celda depende del texto más largo inscrito en una de las celdas de la columna. De modo predeterminado, si la línea es demasiado larga, el browser la cortará en varias líneas, no ser que esté presente el atributo NOWRAP.

    <TH>

    La marca <TH> es idética a <TD> pero el texto de las celdas se considera como texto de cabecera. Este texto se centra automáticamente y se pone en negrita. Admite los mismos parámetros que la marca <TD> (VALIGN, ALIGN, COLSPAN, ROWSPAN, NOWRAP).

    CAPTION

    Esta marca permite poner un título encima ( atributo ALIGN=TOP) o debajo (atributo ALIGN=BOTTOM) de la tabla.

    Ejemplos:


    Código: You are not allowed to view links. Register or Login
    <CENTER>
    <TABLE BORDER>
    <CAPTION>Titulo Superior (por defecto)</CAPTION>
    <TR>
       <TD></TD>
       <TH COLSPAN=3>Atributos de alineación, Align y VAlign</TH>
    <TR>
       <TH>Alineación<BR>Vertical</TH>
       <TD VALIGN=top>Top</TD>
       <TD VALIGN=middle>Middle</TD>
       <TD VALIGN=bottom>Bottom</TD>
    <TR>
       <TH>Alineación<BR>Horizontal</TH>
       <TD ALIGN=left>Left</TD>
       <TD ALIGN=center>Center</TD>
       <TD ALIGN=right>Right</TD>
    </TABLE>
    </CENTER>

    Código: You are not allowed to view links. Register or Login
    <CENTER>
    <TABLE BORDER>
    <CAPTION ALIGN="bottom">Tabla 2.1.</CAPTION>
    <TR ALIGN="center">
    <TD></TD>
    <TH>Ventana 1</TH>
    <TH>Ventana 2</TH>
    <TH>Ventana 3</TH>
    <TR ALIGN="center">
    <TH>Color<BR>Fondo</TH>
    <TD>blanco</TD>
    <TD>gris</TD>
    <TD>amarillo</TD>
    <TR ALIGN="center">
    <TH>Color<BR>Texto</TH>
    <TD>azul</TD>
    <TD ROWSPAN=2> negro </TD>
    <TD>negro</TD>
    <TR ALIGN="center">
    <TH>Color<BR>Símbolos</TH>
    <TD>rojo</TD>
    <TD>verde</TD>
    </TABLE>
    </CENTER>

    Código: You are not allowed to view links. Register or Login
    <TABLE BORDER>
    <TR>
    <TD>Ejemplo: Atributo NOWRAP</TD>
    <TD NOWRAP>Aquí hay una línea muy larga. Para que no sea cortada
    utilizamos el atributo <I>NOWRAP</I>.</TD>
    </TABLE>
    « Última modificación: Agosto 14, 2007, 07:44:44 am por carlmycol »

    Desconectado carlmycol

    • Yo vivo en CPH
    • ***
    • Mensajes: 1357
    • Sexo: Masculino
      • Ver Perfil
    Re: Guia Detallada de HTML Aprende de Este Lenguaje Desde 0 En Construccion
    « Respuesta #9 en: Agosto 14, 2007, 08:15:36 am »
    9. Frames  

    Los frames (en inglés frame = cuadro, bastidor, marco o panel) es un elemento implementado por Netscape, que permite dividir la pantalla en varias áreas independientes unas de otras, y por tanto con contenidos distintos, aunque puedan estar relacionados. Cada una de estas zonas es capaz de mostrar código HTML, como en las celdas de una tabla. Sin embargo, no hay que confundir paneles con tablas ya que existe una gran diferencia; en el caso de una tabla, todas las celdas forman parte del mismo documento HTML, mientras que en el caso de los frames cada zona de la pantalla es un documento HTML propio. Se ve pues, simultáneamente, en la misma ventana de un browser, la página correspondiente a varios ficheros.
    El concepto de frame elimina una de las limitaciones del Web ya que hasta ahora, cada nuevo documento destruía el anterior, y obligaba al usuario a usar demasiado el comando Back de los browsers. Ahora es posible dedicar ciertas zonas a tareas bien definidas, como por ejemplo tener en una zona un menú que casi nunca será necesario recargar.

    La estructura general de un documento dividido en varios paneles difiere de la de un documento clásico ya que en éstos el cuerpo se inserta en las marcas <BODY> y </BODY>, mientras que en los paneles, el cuerpo del documento se inserta entre las marcas <FRAMESET> y </FRAMESET>;.

    El elemento <FRAMESET> permitirá precisar la forma de los diferentes paneles por medio de dos atributos: ROWS y COLS. <FRAME> es la marca de definición de los paneles creados con FRAMESET.

    La mayoría de los visualizadores no soportan los frames. Para que nuestra página con frame no resulte opaca a ellos se utilizará el elemento <NOFRAMES> que permite ofrecer un texto alternativo en entorno normal.

    Los paneles pueden estar relacionados y tener enlaces de unos a otros para ello se utiliza el atributo TARGET que indica en qué panel debe mostrarse el documento asociado a un enlace de hipertexto.

    Al final de esta página se muestran diversos ejemplos de frames.

    FRAMESET

    Este elemento sustiye al elemento <BODY> y permite dividir una zona en subzonas, bien verticalmente, bien horizontalmente. Si no hay ninguna zona todavía, las divisiones se aplican a la zona inicial formada por el conjunto de la ventana del browser. Esta marca posee dos atributos:
     
    1. ROWS: Se utiliza para dividir la zona en subzonas horizontales. La sintaxis es:

    ROWS="altura_zona_1, altura_zona_2,...,altura_zona_n"

    ROWS es una lista de valores enteros separados por comas. El número de elementos de la lista corresponde al número de subzonas horizontales a crear. Cada uno de los valores de la lista puede darse según uno de los tres formatos siguientes, donde n es un entero:

    A. n: indica la altura de la subzona en píxels.

    B. n%: indica la altura de la subzona expresada en porcentajes del tamaño de la zona madre.

    C. n*: n es opcional. El carater * indica al browser que debe dar a la zona todo el espacio aún disponible.

    2. COLS: Se utiliza para dividir la zona en subzonas verticales. La sintaxis es igual que en el atributo ROWS.

    ROWS="altura_zona_1, altura_zona_2,...,altura_zona_n"

    Ejemplo: A continuación se muestra dos maneras idénticas de dividir una zona en tres. Las dos subzonas superiores son de tamaño idéntico y la última es el doble de las anteriores.

    Código: You are not allowed to view links. Register or Login
    <FRAMESET ROWS="25%,25%,50%">...<FRAMESET>
    <FRAMESET ROWS="*,*,2*">...<FRAMESET>

    FRAME

    Es la marca utilizada para caracterizar las subzonas definidas mediante la marca <FRAMESET>. Esta caracterización se realiza mediante los siguientes atributos:

    1. SCR: Indica el URL del documento que debe mostrarse en esa zona. Si el atributo no se indica, entonces la zona estará vacía.

    SCR="url"

    2. NAME: Se utiliza para nombrar la zona a fin de que pueda convertirse en el destino de cualquier enlace de hipertexto. La sintaxis del atributo es:

    NAME="nombre_de_la_zona"

    3. MARGINWIDTH: Se utiliza para precisar el número de píxels entre los bordes izquierdo y derecho de la zona y el documento HTML a visualizar, en definitiva marca el margen izquierdo. La sintaxis es :
    MARGINWIDTH="n"
     
    4. MARGINHEIGHT: Se utiliza para precisar el número de pixels entre los bodes superior e inferior de la zona y el documento HTML a visualizar. La sintaxis es:
    MARGINHEIGHT="n"

    5. SCROLLING: Indica si la zona debe poseer una barra de desplazamiento (SCROLLING="yes"), si no debe contar con ella (SCROLLING="no") o si esta elección se deja en manos del browser (SCROLLING="auto"). La sintaxis es:
    SCROLLING="yes/no/auto"

    6. NORESIZE: Indica al browser que no debe permitir que el usuario modifique el tamaño de la zona. Cuando este atributo no se precisa es posible deformar una zona desplazando su frontera mediante el ratón.

    NOFRAMES

    Esta marca indica a todo browser incapaz de gestionar los frames el texto que debe presentar al usuario en lugar de los paneles. Dicho texto irá entre las marcas <NOFRAMES> y </NOFRAMES>. En realidad dichos browsers ignorarán las marcas FRAMESET y NOFRAMES pero casualmente no el texto comprendido entre éstas últimas. Por el contrario un browser capaz de gestionar paneles interpretará las marcas <NOFRAMES> y </NOFRAMES> y sabrá que debe ignorar el texto comprendido entre ellas.

    El atributo TARGET

    Este nuevo atributo afecta a las marcas que caracterizan los enlaces de hipertexto, en particular a las marcas <A> y <FORM>. TARGET permite precisar el nombre de la zona que debe recibir el documento correspondiente al enlace. Por ejemplo:

    Código: You are not allowed to view links. Register or Login
    <A HREF="/dossier.html" TARGET="zonadossier"> Ver el dossier </A>
    El atributo TARGET existe para indicar al browser que, en respuesta a un clic, debe mostrar el documento dossier.html en el panel cuyo nombre es "zonadossier". De igual modo, el formulario definido por:

    Código: You are not allowed to view links. Register or Login
    <FORM  ACTION="cgi_bin/test"  TARGET="zonascript"  METHOD="POST">
      ...
    </FORM>

    Mostrará sus resultados en el panel cuyo nombre es "zonascript".
    El atributo TARGET puede tener tres valores diferentes:

    * Un valor que corresponde al nombre de un panel existente.El documento asociado al enlace de hipertexto se muestra entonces en el panel en cuestión.

    * Un valor que no corresponde a ninguno de los paneles existentes. El browser crea entonces una nueva ventana y muestra el documento. Esta nueva ventana se considera como un panel con el atributo TARGET del origen de su creación.

    * TARGET puede tomar uno de los siguientes cuatro valores:

    _blank, indica al browser que debe crear una nueva ventana con el fin de mostrar el documento. La nueva ventana es un panel que no tiene nombre y no puede ser por tanto el destino de otro enlace de hipertexto.

    _self, indica que el documento se cargará en la misma zona donde se encuentra el enlace de hipertexto. Se trata del valor predeterminado cuando no se indica el atributo TARGET.

    _top, indica al browser que suprima todos los paneles existentes y visualice el documento de modo normal.

    _parent, indica al browser que visualice el documento ocupando toda la superficie de la zona en la que se ha visualizado el documento que contiene el enlace. Esta noción solo tiene sentido cuando los diferentes niveles de paneles provienen del anidamiento de documentos y no del anidamiento de marcas <FRAMESET>.

    A continuación se expondrán algunos ejemplos para que queden claros todos los conceptos aprendidos.

    Ejemplos

    Un frame básico. Sintaxis general: En general, todas las páginas que contengan un frame deberán ser más o menos así:

    Código: You are not allowed to view links. Register or Login
    <HTML>
    <HEAD><TITLE> Mi titulo ></TITLE></HEAD>

    <FRAMESET COLS=*,*>
         <NOFRAMES>
             <BODY>
                 Su visualizador no soporta frames. Pulse
                 <A HREF="indice.htm">aqui</A> para volver.
             </BODY>
        </NOFRAMES>

        <FRAME SRC="doc_a.htm" >
        <FRAME SRC="doc_b.htm" >

    </FRAMESET>

    </HTML>

    Un frame de 3 áreas verticales (COLS)

    Código: You are not allowed to view links. Register or Login
    <FRAMESET COLS=30%,20%,50%>
       <FRAME SRC="doc_a.htm">
       <FRAME SRC="doc_b.htm">
       <FRAME SRC="doc_c.htm">
    </FRAMESET>

    Un frame de 3 áreas horizontales (ROWS)

    Código: You are not allowed to view links. Register or Login
    <FRAMESET ROWS=25%,25%,50%>
       <FRAME SRC="doc_a.htm">
       <FRAME SRC="doc_b.htm">
       <FRAME SRC="doc_c.htm">
    </FRAMESET>

    Un frame combinado de un área vertical y dos horizontales.
    El frame A, no podrá ser redimensionado (NORESIZE).

    Código: You are not allowed to view links. Register or Login
    <FRAMESET COLS=20%,*>
       <FRAME SRC="doc_a.htm" NORESIZE>
            <FRAMESET ROWS=40%,*>
               <FRAME SRC="doc_b.htm">
               <FRAME SRC="doc_c.htm">
            </FRAMESET>
    </FRAMESET>

    Un frame con dos áreas verticales. Una normal, la otra con márgenes forzados para el texto (MARGINWIDTH MARGINHEIGHT)

    Y se escribiría así:

    Código: You are not allowed to view links. Register or Login
    <FRAMESET COLS=50%,50%>
       <FRAME SRC="doc_a.htm">
       <FRAME SRC="doc_a.htm"
           MARGINWIDTH=50
           MARGINHEIGHT=50>
    </FRAMESET>

    Un frame con referencias cruzadas (NAME TARGET)

    Código: You are not allowed to view links. Register or Login
    <FRAMESET COLS=50%,50%>
       <FRAME SRC="doc_aa.htm">
       <FRAME SRC="doc_bb.htm" NAME="VENTANA">
    </FRAMESET>
    « Última modificación: Junio 06, 2009, 01:31:52 pm por ルグブ90 »

    Desconectado carlmycol

    • Yo vivo en CPH
    • ***
    • Mensajes: 1357
    • Sexo: Masculino
      • Ver Perfil
    Re: Guia Detallada de HTML Aprende de Este Lenguaje Desde 0 En Construccion
    « Respuesta #10 en: Agosto 14, 2007, 09:57:46 am »
    10. Formularios

    Los formularios generan en la pantalla cuadros de diálogo con el lector permitiendo así la interacción con el usuario para consultas de bases de datos, solicitudes de documentación, ...
    Como en un formulario en papel, se podrán tener zonas en las que se introducirá un texto, casillas de verificación, listas de selección, etc... El usuario rellenará estas zonas en su formulario las cuales se identifican con un nombre simbólico. Cuando el formulario se envía al programa que lo va a tratar, éste recibe el identificador de cada zona y el valor introducido. A dichos programas se les suele denominar scripts, y se han de ejecutar en un espacio del servidor reservado a este efecto: el CGI o Common Gateway Interface.
    El tratamiento de los datos recibidos en el servidor desde los formularios requiere conocer la tabla de conversión hexadecimal que utilizan la mayoría de los visualizadores. Dentro de un mismo parámetro las palabras aparecerán, en el destino, separadas por el signo +, y los parámetros entre sí por el símbolo&. Las letras acentuadas y otros caracteres especiales serán valores hexadecimales precedidos del símbolo %, como se muestran en la tabla de códigos hexadecimales del Netscape para Windows .
    Para la creación de formularios se utilizarán las siguientes marcas, que permiten generar una interfaz de edición, sin hacer referencia aún a la programación de scripts de CGI:

    * la marca FORM que delimita el comienzo y fin de la definición del formulario.

    * la marca INPUT que permite crear diferentes tipos de entradas: campos de edición y diversos tipos de botones;

    * la marca SELECT que permite crear listas: menús despegables y listas con barras de desplazamiento;

    * la marca TEXTAREA que genera una zona de edición de texto libre.

    Atributos comunes

    Los siguientes atributos son comunes a las marcas que se definen en este apartado para generar formularios:

    * El atributo NAME define el nombre que permitirá al script identificar el origen de los datos. Este nombre debe ser único.

    NAME=nombre_de_la_variable_asociada
     
    * El atributo VALUE puede ser definido para un campo de:

    Texto: permite definir el contenido del campo.

    Botón SUBMIT: indica el texto a escribir en el botón.

    Botón RADIO, Botón CHECKBOX: valor que se le asocia al botón cuando éste
    está pulsado. El valor especificado por NAME identifica el bloque de botones.

    FORM

    La marca <FORM> y </FORM> definen un formulario y entre ellas se situarán todas las marcas que generan los diversos elementos que componen un formulario. Esta marca debe ir acompañada obligatoriamente por dos atributos:

    * El atributo METHOD está dirigido al programador que codifica el script. Al que puede darse el valor POST o el valor GET que define el modo de transferencia de los datos hacia el script. El optar por uno u otro obedece a complejas cuestiones de programación basadas en la máxima longitud de registro que puede enviarse; cada uno usa un canal de salida distinto. El que soporta más longitud es POST, y será el que utilicemos en casi todos los ejemplos.

    * El atributo ACTION define la acción a ejecutar cuando se pulse el botón de sumisión, indicando el URL del programa (script) encargado de tratar los datos adquiridos desde el formulario.

    <FORM METHOD=tipo_de_metodo ACTION=URL_del_script>

    <FORM METHOD="post" ACTION=" cgi_bin/inscripcion">

    Input

    La marca <INPUT> servirá para definir campos para entrar un texto y botones que permiten escoger opciones.

    Permite varios atributos además de los ya comentados de modo general:

    A. El atributo SIZE define la longitud de la ventana de texto.

    B. El atributo MAXLENGTH define la máxima longitud de la cadena que se puede escribir dentro de la ventana.

    Ejemplo:

    Código: You are not allowed to view links. Register or Login
    <input name="identidad" size=10 maxlength=15>
    Como se puede observar en este ejemplo, el número máximo de caracteres puede ser mayor que el tamaño de la ventana y viceversa

    C. El atributo TYPE asociado a la marca INPUT permite la selección del elemento de entrada. Puede tomar los siguientes valores:

    * TEXT: es la opción seleccionada por defecto. Define una zona de entrada de texto simple. El texto definido en VALUE aparecerá en dicha zona, para poder ser completado o modificado por el usuario.

    Código: You are not allowed to view links. Register or Login
    <form>
    <input type="text" value="Champiñones">
    </form>

    * SUBMIT: desencadena el envío del formulario hacia el script; el texto definido en VALUE se escribirá en el botón:

    Código: You are not allowed to view links. Register or Login
    <form>
    <input type="submit" value="Salida">
    </form>

    * RESET: permite borrar los datos ya entrados:

    Código: You are not allowed to view links. Register or Login
    <form>
    <input type="reset" value="Borrar">
    </form>

    * PASSWORD: permite entrar una palabra clave de forma confidencial:

    Código: You are not allowed to view links. Register or Login
    <form>
    <input type="password" name "pwd">
    </form>

    * CHEKBOX: crea un bloque de botones que permiten una selección múltiple de opciones:

    Código: You are not allowed to view links. Register or Login
    <form>
    <input type="checkbox" name="micro" value="mac">Macintosh
    <input type="checkbox" name="micro" value="pc">PC
    </form>

    * RADIO: crea un bloque de botones que permiten una selección exclusiva entre varias opciones

    Código: You are not allowed to view links. Register or Login
    <form>
    <input type="radio" name="media" value="cd" checked>CD-ROM
    <input type="radio" name="media" value="dk">Disquete
    </form>


    * HIDDEN: sirve para pasar datos adquiridos de un formulario a otro sin que aparezca nada en la pantalla.

    Código: You are not allowed to view links. Register or Login
    <input type="hidden" name=nombre_de_variable value=valor_de_la_variable>
    * IMAGE: hace que el visualizador presente una imagen que es sensible al ratón. Lo que el formato envía al servidor es un registro cuyos campos son el nombre definido para la imagen seguido de los parámetros .x=n y .y=m donde n y m son los números de las coordenadas x,y del punto en el que estaba el ratón en el momento del envío. Para representar la imagen se utiliza el atributo SRC del elemento IMG. Por ejemplo:

    Código: You are not allowed to view links. Register or Login
    <form method="post" action="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi">
    <input type=image name="imagen" src="sugeren.gif">
    </form>

    Una posible respuesta podría ser:

    Código: You are not allowed to view links. Register or Login
    imagen.x=7 & imagen.y=38
    Los formularios que utilicen este tipo de recursos pueden prescindir del tipo SUBMIT, ya que el formulario se cierra con la imagen.

    SELECT

    La marca <SELECT> permite generar listas de selección simple o de selección variable. Se programa con una lista en la que los items se especifican mediante la marca <OPTION>. La presentación de la lista depende del atributo SIZE; si su valor es inferior a 2 o está ausente, la lista se interpreta como un menu desplegable (pop-list). En caso contrario la lista se visualiza en una ventana con barra de desplazamiento. El valor dado entonces al atributo SIZE da entonces el número de líneas visibles en la ventana. La opción de seleción multiple se deriva de la presencia del atributo MULTIPLE.

    Ejemplos:

    Menú despegable:

    Código: You are not allowed to view links. Register or Login
    <form>
    <select NAME="sede">
    <option>Entrada indirecta
    <option>Entrada lateral
    <option SELECTED>Entrada directa
    </select>
    </form>


    Ventana con barra de desplazamiento: ( con opción de selección múltiple )

    Código: You are not allowed to view links. Register or Login
    <form>
    <select MULTIPLE NAME="lenguaje" SIZE="3">
    <option SELECTED>Ada
    <option>C++
    <option>Cliper
    <option>Pascal
    <option>Fortran
    <option>Cobol
    </select>
    </form>


    La longitud de la ventana de selección se autoajusta al valor más largo de la lista. Se debe de procurar que los contenidos de los campos sean lo más cortos posibles; una excesiva longitud implica mayor tráfico por la red, pero se deben contruir las listas de forma clara, y que resulten de fácil lectura al usuario, lo que puede aumentar la longitud de los valores. Para solventar este dilema se utiliza el parámetro VALUE asociado al atributo OPTION, el cual permite enviar un valor diferente al que aparece en la lista.

    Ejemplo:

    A continuación se muestra una lista contenida en una ventana con barras de desplazamiento.

    Código: You are not allowed to view links. Register or Login
    <form>
    <select name="lista" size=3>
    <option> Pista 1
    <option> Pista 2
    <option> Pista 3
    <option value="Pista 4"> Pista 4 (para novatos)
    <option> Pista 5
    <option> Pista 6
    </select>
    </form>

    TEXTAREA

    La marca <TEXTAREA> permite crear una ventana con barras de desplazamiento horizontales y verticales en la que se podrá escribir texto. El valor dado a los atributos ROWS (líneas) y COLS (columnas) delimita el tamaño de esta ventana.

    Es posible predefinir un texto (entre las marcas <TEXTAREA> y </TEXTAREA>) que el usuario podrá reemplazar o completar con su propio texto.

    Ejemplo:

    Código: You are not allowed to view links. Register or Login
    <form>
    <textarea name="comment" rows=5 cols=40>
    Introduzca aquí sus comentarios
    </textarea>
    </form>

    Ejemplo:

    A continuación se muestra un típico y complejo formulario que contiene cada uno de los elementos estudiados anteriormente organizados mediante el uso de una tabla.

    Código: You are not allowed to view links. Register or Login
    <FORM ACTION="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi" METHOD=POST>

    <CENTER>
    <TABLE BORDER>

    <TR>
       <TD>Nombre:</TD>
       <TD> <INPUT TYPE="text" NAME="nombre" SIZE=18 MAXLENGTH=18> F.Nac.:
            <INPUT TYPE="text" NAME="edad" SIZE=8 MAXLENGTH=8> DNI:
            <INPUT TYPE="text" NAME="dni" SIZE=8 MAXLENGTH=8></TD>

    <TR>
       <TD>Apellidos:</TD>
       <TD> <INPUT TYPE="text" NAME="apellidos" SIZE=48 MAXLENGTH=48></TD>

    <TR>
       <TD>Calle y número:</TD>
       <TD> <INPUT TYPE="text" NAME="domicilio" SIZE=48 MAXLENGTH=48></TD>

    <TR>
       <TD>Código Postal:</TD>
       <TD> <INPUT TYPE="text" NAME="postal" SIZE=5 MAXLENGTH=5>Ciudad:
            <INPUT TYPE="text" NAME="localidad" SIZE=36 MAXLENGTH=36></TD>

    <TR>
       <TD>Provincia: </TD>
       <TD> <INPUT TYPE="text" NAME="provincia" SIZE=20 MAXLENGTH=20>                Teléfono:
            <INPUT TYPE="text" NAME="telefono" SIZE=19 MAXLENGTH=19></TD>

    <TR>
       <TD>Estado Civil:</TD>
       <TD> <SELECT NAME="OPCION">
               <OPTION>Soltero
               <OPTION>Casado
               <OPTION>Divorciado
               <OPTION>Otro
            </SELECT>   
            <INPUT TYPE="radio" NAME="sexo" VALUE="H"> Hombre
            <INPUT TYPE="radio" NAME="sexo" VALUE="M"> Mujer </TD>

    <TR>
       <TD>Idiomas:</TD>
       <TD><INPUT TYPE="checkbox" NAME="idiomas" VALUE="E"> Español
           <INPUT TYPE="checkbox" NAME="idiomas" VALUE="A"> Alemán
           <INPUT TYPE="checkbox" NAME="idiomas" VALUE="F"> Frances
           <INPUT TYPE="checkbox" NAME="idiomas" VALUE="I"> Inglés  </TD>

    <TR>
       <TD>Comentarios<BR> personales:</TD>
       <TD><TEXTAREA NAME="coment" ROWS=2 COLS=48></TEXTAREA></TD>

    <TR>
       <TH>Pulse aquí:</TH>
       <TD ALIGN=CENTER>
           <INPUT TYPE="submit" VALUE="Enviar datos ">
           <INPUT TYPE="reset" VALUE="Borrar los datos"></TD>

    </TABLE>
    </CENTER>
    </FORM>


    Desconectado carlmycol

    • Yo vivo en CPH
    • ***
    • Mensajes: 1357
    • Sexo: Masculino
      • Ver Perfil
    Re: Guia Detallada de HTML Aprende de Este Lenguaje Desde 0 En Construccion
    « Respuesta #11 en: Agosto 14, 2007, 12:11:01 pm »
    11. Imagenes

    Introduccion

    Insertar imágenes en un documento permite crear páginas mucho más atractivas. Según el tipo de gráfico utilizado se pueden conseguir efectos realmente sorprendentes.
    Existen dos formas de mostrar una imagen en una página HTML, la primera es mostrar la imágen en línea, o sea, la imagen se visualiza automáticamente al cargar la página; la segunda es mediante la activación de un enlace de hipertexto que provoque la visualización de la imagen.

    Existen diversos formatos de imagenes . Los formatos GIF y JPEG son interpretados directamente por el visualizador. Se puede usar cualquier otro formato como el MPG (vídeo), pero en este caso el visualizador llamará a un programa auxiliar, que previamente se habrá definido, para que sea éste el que visualice el fichero. La desventaja de las imágenes en formatos no tratados por el propio visualizador es que no se verá el texto junto con la imagen, y por tanto no se podrá imprimir la página compuesta.

    Para que todos los browsers puedan comprender el formato en el que está codificado la imagen, se ha hecho una normalización con el estándar GIF (Graphics Interchange Format). Se trata de un formato comprimido pensado para optimizar el tiempo de telecarga que permite el tratamiento de imágenes en colores (256 como máximo) o niveles de gris.

    IMG

    Este elemento permite incluir una imagen en un documento. Vendrá siempre acompañado por el atributo SRC que indica la dirección del fichero gráfico que contiene la imagen:

    Código: You are not allowed to view links. Register or Login
    <IMG SRC="dirección_URL_del_fichero_gráfico">
    Ejemplos:

    Imagen situada en un fichero local:

    Código: You are not allowed to view links. Register or Login
    <IMG SRC="images/wmelon.gif">
    Imagen residente en un servidor:

    Código: You are not allowed to view links. Register or Login
    <IMG SRC="http://www.iconbazaar.com/misc/apple.gif">
    Esta última opción de insertar una imagen de un servidor exterior en un texto no es muy recomendable ya que ralentiza mucho la carga de la página y además no se asegura que la imagen pueda ser siempre accedida. Realmente el resultado del ejemplo sería ver directamente la imagen, no un enlace a ésta, pero como se ha dicho anteriormente esto puede dar problemas al cargar la página. Esta opción, por tanto, se utiliza sólo en casos excepcionales de imágenes que son actualizadas periódicamente (p.e: un mapa metereológico).

    Si el fichero indicado no es encontrado el browser mostrará un símbolo en lugar de la imagen, indicando el error. Por ejemplo:

    Código: You are not allowed to view links. Register or Login
    <IMG SRC="directorio/imagen.gif">
    En los documentos HTML se suelen insertar diversos iconos con significados implícitos, como es el caso de "página en construcción":

    Este elemento permite además los siguientes atributos:

    * ALT: Define un texto alternativo que sustituirá a la imagen en caso de que el browser no sea capaz de tratar imagenes. Esto es importante sobretodo cuando la imagen soporta un enlace. Por ejemplo:

    Código: You are not allowed to view links. Register or Login
    <IMG SRC="images/toucan.gif" ALT="Imagen de un TUCAN">
    * ALIGN: Situa la imagen en la posición que se le indique respecto a la línea de texto en la que está. Este atributo se explica con mayor detalle en el apartado que viene a continuación.

    El atributo ALIGN

    Alinea la imagen, según la posición que se le indique, respecto a la línea de texto en la que está. Puede tomar los siguientes valores:

    1. TOP: alinea la parte superior de la imagen con la línea actual.
    2. MIDDLE: alinea el centro de la imagen con la línea actual.
    3. BOTTOM: alinea la base de la imagen con la línea actual.

    Ejemplos:

    Código: You are not allowed to view links. Register or Login
    Parte superior de la imagen <IMG SRC="images/flor.gif" ALIGN="top">
    alineada con el texto

    Código: You are not allowed to view links. Register or Login
    Parte central de la imagen <IMG SRC="flor.gif" ALIGN="middle">
    alineada con el texto

    Extensiones del Netscape

    Estas extensiones no son reconocidas por HTML 2, sin embargo son bastante utilizadas por muchos autores de páginas HTML.

    * ALIGN: Además de los valores ya definidos anteriormente para el atributo ALIGN , el Netscape permite la utilización de dos nuevos valores. Estos permitirán que el texto fluya alrededor de la imagen con una regulación del espacio vertical (atributo VSPACE) y del espacio horizontal (atributo HSPACE).

    * WIDTH: Redefine el ancho de la imagen.

    * HEIGHT: Redefine el alto de la imagen.

    * BORDER: Dibuja un marco alrededor de la imagen.

    * VSPACE: Define el margen vertical a dejar entre la imagen y el texto.

    * HSPACE: Define el margen horizontal a dejar entre la imagen y el texto.

    Para poder saltar la imagen y que el texto continue debajo de ésta se ha definido el atributo CLEAR para el elemento de salto de línea <BR>: <BR CLEAR>.

    A continuación se mostrarán varios ejemplos para aclarar lo explicado en este apartado:

    Ejemplos:

    Código: You are not allowed to view links. Register or Login
    <IMG SRC="images/sebastia.gif" ALIGN="right" HSPACE=20
    VSPACE=5 WIDTH=30 HEIGHT=30>
    Este texto ...

     Este texto estará situado a la izquierda de dicha imagen puesto que se ha definido mediante el atributo ALIGN="right" que la imagen estará situada a la derecha. Los márgenes definidos tanto vertical (VSPACE=5) como horizontalmente (HSPACE=20) serán respetados. No se ha definido un borde para la imagen.

    Código: You are not allowed to view links. Register or Login
    <IMG SRC="images/sebastia.gif" ALIGN="left" HSPACE=30
    VSPACE=10 WIDTH=50 HEIGHT=50 BORDER=2>
    Este texto ...

     Esta imagen estará rodeada de un borde color negro del ancho indicado por BORDER=2. Ahora se quiere que el texto continue pasada la imagen.
    Por medio del elemento <BR> con su atributo CLEAR: <BR CLEAR> este texto continua debajo de la imagen.

    Imágenes como fondo de página

    Mediante el elemento <BODY> y el atributo BACKGROUND se permite utilizar una imagen residente en el servidor, o en un fichero local, como fondo de página. El valor que deberá tomar dicho atributo es la dirección donde se encuentra el fichero que contiene la imagen. La sintaxis será:

    Código: You are not allowed to view links. Register or Login
    <BODY BACKGROUND="direccion_del_fichero_grafico">
    Ejemplo:

    Código: You are not allowed to view links. Register or Login
    <BODY BACKGROUND="images/blanco51.gif">
    Esta sentencia es la utilizada para definir el fondo utilizado en este mismo documento.

    Imágenes como marcas de una lista

    Para obtener una lista adornada con algún tipo de icono se podrán utilizar las listas de definición de la siguiente forma:

    Código: You are not allowed to view links. Register or Login
    <DL>
        <DT><IMG SRC="images/bolaroja.gif"> Línea de texto
        <DT><IMG SRC="images/bolaroja.gif"> Línea de texto
        <DT><IMG SRC="images/bolaroja.gif"> Línea de texto
    </DL>

    Incluso se podrán anidar como en el siguiente ejemplo:

    Código: You are not allowed to view links. Register or Login
    <DL>
      <DT><IMG SRC="images/bolaroja.gif">Línea de texto
      <DT><IMG SRC="images/bolaroja.gif">Línea de texto
        <DL>
          <DT><IMG SRC="images/bolaverd.gif">Línea de texto
          <DT><IMG SRC="images/bolaverd.gif">Línea de texto
            <DL>
              <DT><IMG SRC="images/bolaazul.gif">Línea de texto
              <DT><IMG SRC="images/bolaazul.gif">Línea de texto
                <DL>
                  <DT><IMG SRC="images/bolaamar.gif">Línea de texto
                  <DT><IMG SRC="images/bolaamar.gif">Línea de texto
                </DL>
            </DL>
        </DL> 
    </DL>

    Animaciones

    Una nueva posibilidad de algunos browsers es la posibilidad de presentar gráficos con animación. Los gráficos animados en formato GIF permiten almacenar secuencias de imagenes en un solo fichero, las cuales forman animaciones que pueden ser visualizadas directamente por el browser. No hay que confundir estos gráficos con los vídeos en formato MPG que no son tratados por el browser sino por una herramienta auxiliar.
    La forma de introducir estas animaciones en un documento es la misma que para una imagen fija.

    Código: You are not allowed to view links. Register or Login
    <IMG SRC="images/frogani.gif">
    Pulsando sobre el botón de Stop del browser la animación se detendrá en la imagen de la secuencia en la que esté.

    Los visualizadores que no soportan este efecto representarán solamente la primera o la última de las imágenes de la secuencia. Por esto es conveniente no comenzar o terminar las secuencias con una imagen vacía.

    Imágenes y enlaces

    Los enlaces hipertexto pueden ser también definidos sobre imágenes de tal forma que al picar con el ratón sobre algún punto de la superficie de éstas, se pase al documento correspondiente. Esto suele ser utilizado sobre todo para introducir botones de navegación en las páginas HTML.
    Ejemplos:

    Código: You are not allowed to view links. Register or Login
    <A HREF="forms.htm"><IMG SRC="images/boton1.gif"></A>
    <A HREF="#inicio"><IMG SRC="images/boton2.gif"></A>
    <A HREF="simbolos.htm"><IMG SRC="images/boton3.gif"></A>

    Una imagen que actúa de hiperenlace se distingue mediante un borde de color alrededor de ésta, como puede observarse en el ejemplo anterior.
    Si en un enlace se indica la dirección de una imagen dicha imagen no será cargada junto con la página sino que será cargada sólo en el caso de que dicho enlace sea activado.

    Ejemplo:

    Código: You are not allowed to view links. Register or Login
    <A HREF="images/new.gif"> Enlace a una imagen </A>
    « Última modificación: Agosto 14, 2007, 12:45:39 pm por carlmycol »

    Desconectado carlmycol

    • Yo vivo en CPH
    • ***
    • Mensajes: 1357
    • Sexo: Masculino
      • Ver Perfil
    Re: Guia Detallada de HTML Aprende de Este Lenguaje Desde 0 En Construccion
    « Respuesta #12 en: Agosto 14, 2007, 12:36:15 pm »
    12.- Símbolos   

    ¿Por qué hay que usar códigos?

    Existen diversos sistemas operativos dentro del mundo de los ordenadores. Estos sistemas no son otra cosa que unos programas especiales que se ejecutan inmediatamente después de encender el ordenador, y son los que se encargan de darle "vida" a la máquina.
    Junto con estos programas, los ordenadores cargan en memoria unas tablas especiales que coinciden con los caracteres que tiene su teclado y algunos más que no están en el mismo, pero que se pueden escribir en pantalla por otros medios. Estas tablas, desafortunadamente, no son siempre las mismas, y varían de un sistema a otro, de una marca de ordenador a otra, y por supuesto, de un idioma a otro. Por ejemplo, no se ven igual las letras con acentos desde un PC que desde un MACintosh, o una terminal UNIX, si se escriben directamente desde el teclado.

    Dado que el HTML pretende ser un lenguaje universal, y que una página debe verse como su creador desea, sin importar si se está ante un ordenador que "habla" en inglés o en español, o que tiene tal o cual sistema operativo, se ha creado una tabla de caracteres "conflictivos" (en realidad están todos, pero generalmente sólo se usa para caracteres especiales) que se escriben con un código en lugar de pulsar la tecla que lo contiene directamente.

    Por ejemplo, nuestra denostada en medio mundo "Ñ" se escribirá:

           
    Código: You are not allowed to view links. Register or Login
    &Ntilde;  o bien Ñ
    Esto habrá que hacerlo con todos los caracteres que no sean las letras del alfabeto, los números y unos pocos signos, como el punto, la coma, el guión y algunos otros. Desde luego hay que codificar todas las letras acentuadas, eñes, cedillas, etc., etc.
    A continuación se muestra una tabla con todos los caracteres, también están las letras, pero éstas sólo le serán útiles en caso de necesitar escribir textos un tanto raros.

    Como puede comprobar, la tabla tiene una columna con el carácter deseado seguida de su código numérico, una descripción del carácter y después un nombre corto (una especie de alias) que para los más habituales se llegan a memorizar, y para cosas cortas, ayudan. No todos tienen ese nombre corto, y esos hay que escribirlos con el código numérico.

    Generalmente, se pueden escribir directamente desde teclado todos los que no tienen alias en la tabla, los que sí tienen normalmente darán problemas en sistemas diferentes al que se ha utilizado para escribir el documento. Si tiene la seguridad de que lo que escribe en HTML sólo va a ser utilizado como ficheros locales en máquinas similares a la suya, no será necesario complicarse la vida; pero si sus páginas van a residir en un servidor WWW, cualquier tipo de máquina podrá acceder a ellas, y su aspecto no será el adecuado en algunas.

    Existen multitud de editores especiales para escribir HTML, y la mayoría de ellos tienen herramientas para convertir de forma automática los caracteres especiales a su correspondiente código. También hay paquetes de "macros" para hacer lo mismo con procesadores de texto como Word o Word Perfect.

    Tabla de Caracteres

    You are not allowed to view links. Register or Login

    Dentro de este documento se encuentran los codigos para poner todo tipo de caracteres en HTML

    Desconectado jerbix

    • Me das tu IP?
    • *
    • Mensajes: 3
      • Ver Perfil
    Re: Guia Detallada de HTML, Aprende Este Lenguaje Desde 0
    « Respuesta #13 en: ſeptiembre 18, 2007, 04:18:48 am »
    Usted  si que es un  duro!!!  Esto si que me  ayudo muchisimo  por esto.

    hackerX_TX

    • Visitante
    Re: Guia Detallada de HTML, Aprende Este Lenguaje Desde 0
    « Respuesta #14 en: Octubre 18, 2007, 12:02:05 am »
    Oye men el tuto te debio tomar mucho tiempo pero la verdad te quedo padrisimo men buenisimo aporte y muy facil de comprender se agrdece

    saludos


    thumbup
    Aprende html desde cero

    Iniciado por kanon_seiya

    16 Respuestas
    11645 Vistas
    Último mensaje Junio 06, 2007, 03:52:04 pm
    por kanon_seiya
    xx
    RAT [Guia] [Aprendé a usar un RAT sin portfowarding]

    Iniciado por ilegendary

    13 Respuestas
    4242 Vistas
    Último mensaje Febrero 05, 2012, 04:33:38 pm
    por sonicfran
    xx
    aprende lenguaje elite(manual by ficf)

    Iniciado por FICF

    20 Respuestas
    6220 Vistas
    Último mensaje Diciembre 10, 2007, 03:15:59 am
    por mycrox
    xx
    Aprende C# desde 0 |

    Iniciado por Cortmatgol

    2 Respuestas
    1942 Vistas
    Último mensaje Julio 21, 2012, 07:29:30 am
    por supernovatiko
    xx
    Html un lenguaje antiguo

    Iniciado por slope

    0 Respuestas
    2615 Vistas
    Último mensaje Marzo 25, 2005, 01:42:37 pm
    por slope
    xx
    Lenguaje HTML (basico)[ARTICULO]

    Iniciado por 3D.X-plod

    2 Respuestas
    1225 Vistas
    Último mensaje Febrero 10, 2008, 07:07:36 am
    por 3D.X-plod
    exclamation
    Aprende python desde cero

    Iniciado por pacosn1111

    0 Respuestas
    1371 Vistas
    Último mensaje Junio 19, 2012, 04:10:04 am
    por pacosn1111
    exclamation
    APRENDE PYTHON DESDE CERO

    Iniciado por TXS

    105 Respuestas
    180138 Vistas
    Último mensaje Enero 28, 2013, 05:21:12 am
    por pacosn1111
    xxx
    aprende VB6 desde 0000 by alexmanycool And 3D1 Tomo3

    Iniciado por alexmanycool

    3 Respuestas
    1761 Vistas
    Último mensaje Noviembre 23, 2009, 07:32:12 pm
    por alexmanycool
    resuelto
    Curso Hojas de Estilo Css | Javascript <Aprendè desde 0>

    Iniciado por proton6

    12 Respuestas
    9203 Vistas
    Último mensaje Junio 09, 2013, 08:04:52 pm
    por M4inFox