Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Etiquetas

    Загружено:

    Jessica Velázquez Martinez
    16 просмотров11 страниц

    Оригинальное название

    etiquetas

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    16 просмотров11 страниц

    Etiquetas

    Загружено:

    Jessica Velázquez Martinez

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 11

    Elemento SPAN

    El elemento SPAN fue introducido en HTML para permitir a los autores dar un estilo que no pudiera estar conectado a un elemento estructural HTML. SPAN puede usarse como un selector en una hoja de estilo, y tambin acepta los atributos STYLE, CLASS e ID. SPAN es un elemento en lnea, as que puede usarse simplemente como un elemento, tal como EM y STRONG en HTML. La gran diferencia es que mientras EM y STRONG conllevan significado estructural, SPAN no tiene tal significado. Existe solamente para aplicar estilos, y por lo tanto, no tiene efecto cuando la hoja de estilo est desactivada. Algunos ejemplos de SPAN:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Ejemplo de SPAN</TITLE> <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> <STYLE TYPE="text/css" MEDIA="screen, print, projection"> <!-.primeraspalabras { font-variant: small-caps } --> </STYLE> </HEAD> <BODY> <P><SPAN CLASS=primeraspalabras>Las primeras palabras</SPAN> de un prrafo podran estar en small-caps. El estilo tambin puede estar en lnea, como para cambiar el estilo de una palabra como <SPAN STYLE="font-family: Arial"> Arial</SPAN>.</P>

    lemento DIV

    El elemento DIV es similar al elemento SPAN en funcin, con la gran diferencia que DIV (abreviatura para "divisin") es un elemento de nivel bloque. DIV puede contener prrafos, encabezados, tablas, y aun otras divisiones. Esto hace ideal a DIV para hacer diferentes clases de contenedores, como captulo, resumen o nota. Por ejemplo:
    <DIV CLASS=nota> <H1>Divisiones</H1> <P>El elemento DIV est definido en HTML 3.2, pero solo el atributo ALIGN est permitido en HTML 3.2. HTML 4.0 agrega los atributos CLASS, STYLE e ID , entre otros.</P> <P>Ya que DIV puede contener otros contenedores de nivel bloque, es til para hacer grandes secciones de un documento, como esta nota.</P> <P>Requiere la etiqueta de cierre.</P> </DIV>

    Descripcin
    El elemento HTML textarea inserta un control de entrada de texto multilnea en un documento o formulario. A diferencia del elemento HTML input, con el atributo "type" establecido a "text", este control puede aceptar ms de una lnea de texto como entrada. Esta caracterstica especial, hace de este elemento una buena eleccin a la hora de requerir comentarios o mensajes. Este elemento est destinado a recolectar informacin provista por el usuario. Una vez llenado, el contenido de este control puede ser enviado por el mismo y luego recibido por el agente procesador, quien manejar la informacin como sea requerido. Nota que el contenido de este control representa el valor inicial del control.

    Ejemplos
    Cdigo Mensaje:<br /> <textarea name="mensaje" cols="50" rows="5">Ingresa un mensaje para el webmaster!</textarea> Vista

    Mensaje:

    Artculos Webmastering HTML

    Formularios HTML Imprimir

    Formularios HTML
    DE USESFRITBR

    Diciembre 2012

    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-formurlencoded"> ... </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

    La etiqueta 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 son:

    etiqueta SELECT sirve

    para

    crear

    una

    lista

    desplegable

    de

    elementos

    (especificados por las etiquetasOPTION dentro de ella). Los atributos de esta etiqueta 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> </TR> <TR> <TD>Comentarios</TD> <TD> <TEXTAREA rows="3" name="comentarios"> Escriba aqu sus comentarios</TEXTAREA>

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

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

    Nombre

    Gnero

    Hombre: Mujer: Mujer:

    Ocupacin

    Comentarios

    Enviar

    Atributos de etiquetas FORM y tipos de entrada


    Etiqueta Atributo Valor POST GET Resultado Efecto visual

    <FORM> ... </FORM>

    METHOD

    ACTION

    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

    ENCTYPE

    submit

    Send

    text

    TYPE <INPUT> Reset


    Reset

    Radio

    botn de radio

    Checkbox

    casilla de seleccin Nombre Tamao del texto

    NAME SIZE NAME <TEXTAREA> ... </TEXTAREA> ROWS COLS <SELECT>

    Casilla de texto

    NAME

    Opcin 1

    <OPTION>

    ...

    </OPTION>
    MULTIPLE

    </SELECT>
    Eleccin predeterminada Valor forzado

    Mltiples selecciones posibles

    Opcin 1

    <OPTION> ... </OPTION>

    SELECTED

    Opcin 1 Opcin 2 Opcin 3

    VALUE Annonces Google

    Utilizacin de la etiqueta <BUTTON> La etiqueta BUTTON se utiliza con una apertura de etiqueta <BUTTON> y una de cierre </BUTTON>. Entre las dos etiquetas, de apertura y cierre, se coloca el contenido que ir dentro del botn. Tiene la particularidad que se pueden colocar dentro del botn los contenidos que se desee, es decir, entre la etiqueta de apertura y cierre se puede colocar texto a voluntad, pero tambin otras etiquetas HTML, como imgenes, saltos de lnea, negritas o lo que podamos necesitar. Veamos un ejemplo:
    <button> Hola esto es un <b>botn</b> <br> <br> Puedo poner saltos de lnea en l! <hr> Y otras cosas <br> <img src="http://www.desarrolloweb.com/images/logo_desarrollo_web.gif" width="261" height="35" alt=""> </button>

    Que tendra este aspecto: Hola esto es un botn Puedo poner saltos de lnea en l!

    Y otras cosas

    Como se puede ver, permite aportar bastante creatividad a los botones que incorporemos en pginas web, mucho ms que la etiqueta INPUT, que slo permite colocar texto dentro del botn:
    <input type="button" value="texto del botn">

    Atributos de BUTTON Ahora veamos rpidamente los atributos que podemos utilizar: name: sirve para darle un nombre al botn. Al enviarse el formulario se enviarn los datos del botn bajo este nombre. type: sirve para indicar el tipo de botn, que podra ser: button para un botn normal, reset para un botn de borrado de datos del formulario y submit para un botn de envo de formulario. value: para especificar el valor de un botn. El valor es lo que se enviar por formulario, en el momento del submit. Pero ojo aqu porque puede haber diferencias entre navegadores, que veremos a continuacin. disabled: este atributo sirve para hacer que el botn se encuentre deshabilitado

    Вам также может понравиться