Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • HTML

    Cargado por

    Ivan Rodriguez
    45 vistas12 páginas

    Derechos de autor

    © Attribution Non-Commercial (BY-NC)

    Formatos disponibles

    DOC, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como DOC, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    45 vistas12 páginas

    HTML

    Cargado por

    Ivan Rodriguez

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como DOC, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 12

    ......Descripcin......

    Principo de Documento

    ..............INICIO.......... ..<html>... <head><title>....(titulo del Encabezado y Ttulo archivo).... Color de Fondo de Pgina <body bgcolor="#RRVVAA"> <body background="XXX.gif (o Imgen de Fondo jpg)"> Imgen Individual <img src="YYY.gif (o jpg)"> <img src=".." width="n" Imgen(Ancho*Alto) height="n"> Espacio "libre" <img src=".." hspace="n"> Color del Texto (parcial) <font color="#RRVVAA"> Tamao del Texto (parcial) <font size="n"> Punto y a Parte <br> Linea(s) en blanco <p> "As you See" <pre> Linea Embebida <hr="n"> Negrita*Cursiva*Subray <b> * <I> * <U> Subndice * Superndice <sub> * <sup> Centrado*Izquierda*Derecha <center>*<left>*<right> Enlace "lejano" <a href="http://..."> Enlace "ab.html" en tu PC <a href="ab.html"> Enlace misma pgina <a href="#pepe"> Localiz.anterior <a name="pepe"> Enlace Correo <a herf="mailto: dir.mail..."> <bgsound src="xx.wav"> (o Arch.de Sonido .mid) Desplazam. Marquesina <marquee>(texto)

    ..........F I N A L.......... </html> </title></head> -----------------</font> </font> --------</pre> ----</b> * </I> * </U> </sub> * </sup> </center>*</left>*</right> ....</a> ....</a> ....</a> ....</a> ...</a> ----</marquee>

    Formularios
    Los formularios interactivos permiten a los autores de pginas Web poner elementos interactivos en sus pginas, por ejemplo, para recibir mensajes de sus lectores, de forma similar a las cartas de respuestas que se encuentra en algunas revistas.

    El lector escribe la informacin rellenando campos o haciendo clic sobre botones, y luego presiona un botn de envo para enviarla a una direccin URL que se suele dirigir a una direccin de correo electrnico o a un script dinmico Web como PHP, ASP o CGI.

    La etiqueta FORM
    Los formularios estn delimitados con la etiqueta <FORM> ... </FORM>, que permite reunir varios elementos de formulario, como botones y casillas de texto y que debe poseer los siguientes atributos:

    METHOD indica cmo se enviarn las respuestas "POST" es el valor que enva los datos al agente de procesamiento almacenndolos en el cuerpo del formulario, en tanto que "GET" enva los datos agregndolos a la direccin URL y separndolos de la direccin con un signo de interrogacin (para aprender ms sobre los mtodos POST y GET, consulte el artculo sobre protocolo HTTP) ACTION indica la direccin a la que se enviar la informacin (un script CGI o direccin de correo electrnico (mailto:direccin_de_correo_e@equipo))

    Un atributo opcional de la etiqueta FORM es ENCTYPE, que especifica cmo se codifican los datos del formulario. De cualquier forma, esto no necesita especificarse, ya que el valor predeterminado (application/x-www-form-urlencoded) es el nico valor vlido. El atributo opcional ACCEPT se usa para establecer tipos MIME para los datos que el formulario puede enviar. Esta es la sintaxis para la etiqueta FORM:
    <FORM METHOD="POST" o "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded"> ... </FORM>

    Aqu hay algunos ejemplos de las etiquetas FORM:


    <FORM METHOD=POST ACTION="mailto:webmaster@commentcamarche.net"> <FORM METHOD=GET ACTION="http://www.commentcamarche.net/cgibin/script.cgi">

    Dentro de la etiqueta FORM


    La etiqueta FORM acta como una especie de contenedor para almacenar elementos que permiten al usuario seleccionar o introducir datos. Todos los datos se enviarn a la direccin URL indicada en el atributo ACTION de la etiqueta FORM, por el mtodo indicado en el atributo METHOD. Se puede insertar cualquier elemento HTML en una etiqueta FORM (como texto, botones, tablas y enlaces), pero los elementos interactivos son los ms interesantes. Estos elementos interactivos son:

    La etiqueta INPUT: Todos los botones y casillas de texto La etiqueta TEXTAREA: una casilla de texto La etiqueta SELECT: una lista de opciones mltiples

    Envo de datos
    Cuando se enva un formulario (haciendo clic en el botn de envo), los datos del formulario se envan a un script CGI bajo la forma de pares nombre/valor, es decir conjuntos de datos representados por el nombre del elemento formulario, un signo igual ("=") y luego el valor asociado. Estos pares nombre/valor se separan unos de otros mediante el smbolo de unin ("&"). Por lo tanto, los datos que se envan al script se vern as:
    campo1=valor1&field2;=valor2&field3;=valor3

    Con el mtodo GET (enviar los datos mediante una direccin URL), la URL ser una cadena como la siguiente:
    http://es.kioskea.net/cgi-bin/script.cgi?campo1=valor1&field2;=valor2

    queta INPUT
    La etiqueta INPUT es una etiqueta esencial para los formularios, ya que se usa para crear muchos elementos interactivos. La sintaxis de esta etiqueta es la siguiente:
    <INPUT type="Nombre de campo" value="Valor predeterminado" name="Nombre de elemento">

    El atributo name es esencial, ya que permite al script CGI reconocer qu campo est asociado con un par nombre/valor, lo que significa que el nombre del campo estar seguido de un signo igual ("=") seguido de un valor que el usuario introdujo, o si el usuario no introdujo ningn valor, por el valor predeterminado de la etiqueta value. El atributo type se usa para especificar qu tipo de elemento se representa con la etiqueta INPUT. Estos son los valores posibles:

    checkbox: Las casillas de eleccin pueden adoptar uno de dos estados: checked (seleccionado) o unchecked (no seleccionado). Cuando la casilla es seleccionada, el par nombre/valor se enva al CGI. hidden: Este campo, que el navegador no muestra, es para definir una configuracin nica que se enviar al CGI como par nombre/valor. file: Un campo que permite al usuario especificar una ruta de archivo que lleva al archivo que se enviar con el formulario. Los tipos de archivo que pueden ser enviados deben especificarse utilizando el atributo ACCEPT de la etiqueta FORM. image: Un botn de envo personalizado que aparece cuando se ubica una imagen en la ubicacin definida por el atributo SRC. password: Una casilla de texto donde los caracteres escritos aparecen como asteriscos para camuflar el texto de entrada.

    radio: Un botn que permite al usuario elegir entre varias opciones. Cada uno de estos botones debe tener el mismo atributo name. El par nombre/valor del botn radio seleccionado se enviar al CGI. Al aplicar el atributo checked para uno de estos botones se definir como seleccionado de forma predeterminada. reset: Un botn de restauracin para quitar todos los elementos en el formulario y restablecer sus valores predeterminados. submit: Un botn de envo para enviar el formulario. El texto en el botn puede definirse usando el atributo value. text: Una casilla de texto para escribir una lnea de texto. El tamao de la casilla puede definirse usando el atributo size y la extensin mxima del texto con el atributo maxlength.

    La etiqueta TEXTAREA
    La etiqueta TEXTAREA se usa para definir un cuadro de texto ms grande que la lnea simple propuesta por la etiqueta INPUT. Esta etiqueta tiene los siguientes atributos:

    cols: representa el nmero de caracteres que puede contener un lnea rows: representa el nmero de lneas name: representa el nombre asociado con el cuadro de texto, que permite su identificacin en el par nombre/valor. readonly: impide que el usuario modifique el texto predeterminado en el campo value: representa el valor predeterminado que se enviar al script si el usuario no ha escrito nada en el cuadro de texto

    La etiqueta SELECT
    La etiqueta SELECT sirve para crear una lista desplegable de elementos (especificados por las etiquetas OPTION dentro de ella). Los atributos de esta etiqueta son:

    name: name: representa el nombre asociado con la casilla de texto, que permite su identificacin en el par nombre/valor. disabled: crea un lista desactivada, que aparece atenuada size: representa el nmero de lneas de la lista (este valor puede ser ms grande que el nmero de elementos reales de la lista). multiple: Permite al usuario seleccionar varios campos de la lista

    Ejemplo de formulario
    Los formularios pueden ubicarse en una pgina usando tablas (algo recomendable para una presentacin profesional). Este es un ejemplo que resume los puntos precedentes, mostrndole cmo disponer un formulario en una pgina Web mediante una tabla:
    <FORM method=post action="cgi-bin/script.pl"> Registro de un usuario <TABLE BORDER=0>

    <TR> <TD>Apellido</TD> <TD> <INPUT type=text name="apellido"> </TD> </TR> <TR> <TD>Nombre</TD> <TD> <INPUT type=text name="nombre"> </TD>

    </TR> <TR>

    <TD>Gnero</TD> <TD> Hombre: Mujer: <INPUT type=radio name="gnero" value="M"> <br>Mujer: <INPUT type=radio name="gnero" value="F"> </TD> </TR> <TR> <TD>Ocupacin</TD> <TD> <SELECT name="ocupacin"> <OPTION VALUE="profesor">Profesor</OPTION> <OPTION VALUE="estudiante">Estudiante</OPTION> <OPTION VALUE="ingeniero">Ingeniero</OPTION> <OPTION VALUE="jubilado">Jubilado</OPTION> <OPTION VALUE="otro">Otro</OPTION> </SELECT> </TD> <TD>Comentarios</TD> <TD> <TEXTAREA rows="3" name="comentarios"> Escriba aqu sus comentarios</TEXTAREA> </TD>

    </TR> <TR>

    Enviar </TR> <TR>

    </TR> </TABLE> </FORM>

    <TD COLSPAN=2> <INPUT type="submit" value="Enviar"> </TD>

    Esto es lo que aparece en la pantalla: Registro de usuario

    Apellido Nombre Gnero Ocupacin

    Hombre: Mujer: Mujer:


    Escriba aqu sus comentarios

    Comentarios

    Atributos de etiquetas FORM y tipos de entrada


    Etiqueta Valor POST METHOD GET ACTION ENCTYPE submit Atributo Resultado Efecto visual

    <FORM> ... </FORM>

    text TYPE <INPUT> Reset Radio Checkbox NAME SIZE NAME ROWS COLS NAME

    Enva a la direccin mostrada Especifica el tipo de cdigo realiza la ACTION de la etiqueta <FORM> lnea simple de texto cuya longitud se especifica por el atributo SIZE Elimina el contenido del formulario botn de radio casilla de seleccin Nombre Tamao del texto Casilla de texto

    <TEXTAREA> ... </TEXTAREA> <SELECT>

    <OPTION> ... </OPTION> </SELECT> <OPTION> ... </OPTION>

    MULTIPLE Eleccin predeterminada Valor forzado

    Mltiples selecciones posibles

    SELECTED VALUE

    Introduccin a los metadatos


    Los metadatos son informacin ubicada dentro de un documento con el propsito de describirlo. Se utilizan para ayudar a los motores de bsqueda a crear un ndice de las pginas Web. Al utilizar etiquetas que el navegador no muestra, se incluye la informacin sobre la pgina o el sitio para describir mejor sus contenidos. En particular, puede contener informacin sobre los autores del documento, su fecha de vencimiento, el idioma usado, etc. Estos metadatos o "Meta tags" son etiquetas especiales que se encuentran en el encabezado del documento (la etiqueta HEAD se encuentra antes de la etiqueta BODY) para ofrecer informacin de forma que los motores de bsqueda pueden indexar las pginas. Hay dos tipos distintos de metadatos:

    Los metadatos NAME , para describir pginas HTML:


    <META NAME="Tag Name" CONTENT="Attribute">

    Los metadatos HTTP-EQUIV, para enviar informacin adicional al navegador mediante el protocolo HTTP:
    <META HTTP-EQUIV="Tag Name" CONTENT="Attribute">

    Pueden incluirse varios metadatos, uno despus de otro, en el encabezado de una pgina.

    Metadatos NAME
    Nombre de la etiqueta Author

    Atributo "Informacin sobre el autor"

    Uso Informacin sobre el autor de la pgina

    Copyright Description Expires Generator Keywords Rating Rev Revisit-after Robots Subject

    Informacin de Copyright "Descripcin de su sitio"

    Brinda informacin sobre los derechos de autor Da informacin que aparece en los resultados de una bsqueda.

    never "fecha de vencimiento de la Informa al robot cundo caducar la pgina. pgina" Nombre del editor HTML que gener la Nombre del software pgina Web. "palabra clave, palabra Palabras clave que describen la pgina clave, etc." Web. general Tipo de contenido (pblico apuntado). La direccin de correo electrnico del Su@correo electrnico Webmaster. "x das" donde x es el Periodo de tiempo antes de una nueva visita nmero de das del robot all Permite a los robots indexar la pgina none Evita que los robots la indexen "Tema de la pgina" Especifica el tema de la pgina

    Metadatos HTTP-EQUIV
    Nombre de la Atributo Uso etiqueta Pragma no-cache Evita que el buscador mantenga la pgina en su cach X; Carga otra pgina (ubicada en la direccin URL Refresh URL="address" especificada) luego de esperar x cantidad de segundos. Permite al robot indexar la pgina entera all (predeterminado) follow Permite al robot seguir los vnculos de la pgina index Robots Permite al robot indexar la pgina nofollow Evita que el robot siga los vnculos noindex Evita que el robot indexe la pgina none Detiene la indizacin del robot Obliga al buscador a mostrar la pgina en un nueva _blank Window-target ventana _top Muestra la pgina a tamao completo (no en un marco)

    Introduccin a los marcos


    Gracias a la tecnologa de los marcos puede mostrar varias pginas HTML en diferentes reas al mismo tiempo. Estas reas se llaman marcos.

    Los marcos no se encuentran en las especificaciones de HTML 3.x, de modo que el DTD debe mostrar la pgina como si hubiera sido escrita en HTML 4.0.

    Creacin de marcos
    Para crear un sitio Web que contenga marcos, basta con crear un archivo con la disposicin de los marcos. Este archivo HTML es especial ya que usa la etiqueta <FRAMESET> en lugar de la etiqueta <BODY>. <FRAMESET> es la etiqueta que define los tamaos de los marcos por sus dimensiones en pxeles o porcentajes (%). Estos son tres ejemplos:

    2 marcos verticales 2 marcos horizontales 1 marco vertical y 2 horizontales

    Ejemplo N 1
    <FRAMESET COLS="20%, 80%"> <FRAME SRC="frame1.htm" NAME="left"> <FRAME SRC="frame2.htm" NAME="right"> </FRAMESET>

    Ejemplo N 2
    <FRAMESET ROWS="20%, 80%"> <FRAME SRC="frame1.htm" NAME="left"> <FRAME SRC="frame2.htm" NAME="right"> </FRAMESET>

    Ejemplo N 3
    <FRAMESET COLS="20%, 80%"> <FRAME SRC="frame1.htm" NAME="left"> <FRAMESET ROWS="50%, 50%"> <FRAME SRC="frame2.htm" NAME="upper_right"> <FRAME SRC="frame3.htm" NAME="lower_right"> </FRAMESET>

    Atributos de la etiqueta <FRAMESET>


    Atributo Valor Accin porcentaje (entre 1 y 100) valor en pxeles Estableciendo uno de los valores y asignando Marco horizontal al otro el valor *, el valor se ajusta automticamente. porcentaje en pxeles Estableciendo uno de los valores y asignando Marco vertical al otro el valor *, el valor se ajusta automticamente. Indica si el marco tiene o no un borde Indica el tamao del borde Indica el color del borde Indica el espacio entre los marcos

    Rows

    Cols

    YES Frameborder NO Border=n Bordercolor n es un valor que define el tamao del borde Nombre del color Valor hexadecimal del color

    Framespacin n es el valor que define el espacio entre los g=n marcos

    Atributos de la etiqueta <FRAMESET>


    La etiqueta <FRAME>se usa para definir uno o varios marcos dentro de la etiqueta <FRAMESET>
    Atributo Src Valor Direcciones URL Accin Define la ubicacin de la pgina que se debe mostrar en el marco Define un nombre que permitir mostrar otro documento en el marco mediante el atributo Target

    NAME

    "Nombre"

    n es un entero que Marginwidth especifica el nmero Tamao de los mrgenes laterales =n de pxeles n es un entero que Marginheight especifica el nmero Tamao de los mrgenes superior e inferior =n de pxeles Frameborder YES NO Determina si los marcos tienen o no borde

    Border=n

    n es un entero que N es un entero que especifica el valor en especifica el nmero pxeles. Tamaos del espacio entre los de pxeles marcos (solamente para Netscape) (Ninguna) YES NO AUTO Impide que el usuario modifique los marcos (No es el valor predeterminado) Habilita o no las barras de desplazamiento (Auto permite que el navegador decida si es necesario o no habilitarlas)

    Noresize

    Scrolling

    Cmo pueden evitarse errores que surgen de navegadores no compatibles?


    Las etiquetas <NOFRAMES> y </NOFRAMES> se usan para especificar qu texto HTML debe aparecer si el navegador no tiene marcos habilitados. El texto entre las etiquetas <NOFRAMES> y </NOFRAMES> debe, por lo tanto, contener las etiquetas <BODY> ... </BODY>. Ejemplo:

    <FRAMESET COLS="20%, 80%"> <FRAME SRC="frame1.htm" NAME="left"> <FRAME SRC="frame2.htm" NAME="right"> </FRAMESET> <NOFRAMES> <BODY> Este cdigo HTML requiere un navegador que admita marcos. Perdone las molestias. </BODY> </NOFRAMES>

    Designacin de un marco con un hipervnculo


    Para mostrar vnculos en uno de los marcos, use el atributo TARGET en la etiqueta <A HREF ..> para especificar el nombre del marco dado por el atributo NAME en la etiqueta <FRAME>). Por ejemplo:
    <A HREF="page.htm" TARGET="left">

    Valor Accin _self _parent _blank _top

    Accin Muestra el destino en el mismo marco que el vnculo Muestra el destino en el marco de nivel superior siguiente Muestra el destino en una nueva ventana Muestra el destino en toda la ventana del navegador

    Siguiente

    También podría gustarte