• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Lenguaje de marcas html

on

  • 4,364 views

repaso general a las etiquetas html básicas

repaso general a las etiquetas html básicas

Statistics

Views

Total Views
4,364
Views on SlideShare
3,958
Embed Views
406

Actions

Likes
4
Downloads
0
Comments
0

6 Embeds 406

http://iesaugustobriga.juntaextremadura.net 373
http://www.ispa.edu.pe 12
http://moodle.educarex.es 9
http://www.lineweb.es 8
http://static.wix.com 3
http://htmlcomponentservice.appspot.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Lenguaje de marcas html Lenguaje de marcas html Presentation Transcript

    • Aplicaciones Web LENGUAJES WEB DEL CLIENTE
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago LENGUAJES DESDE EL CLIENTE •Lenguaje de Marcas HTML. •Hojas de Estilos CSS. •Lenguaje de Marcas XHTML. •JavaScript. 2
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago Página Web Página Web • Párrafos •Tablas Estructura • Encabezados • Capas • Listas • Etc. HTML • Textos • Imágenes Contenido • Enlaces • Colores • Fondos Apariencia • Tipografías • Tamaños CSS • Alineación • Etc. • Efectos Comportamiento • Validaciones • Automatización Javascript 3
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago LENGUAJE DE MARCAS HTML HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML. 4
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago ETIQUETAS HTML Las etiquetas son la estructura básica de HTML. Estas tienen dos propiedades básicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se considere válido al documento HTML. Un elemento generalmente tiene una etiqueta de inicio y una etiqueta de cierre. Los atributos del elemento están contenidos en la etiqueta de inicio y el contenido está ubicado entre las dos etiquetas Elemento Etiqueta de Apertura Contenido Etiq. de Cierre Algunos elementos, tales como <br>, no tienen contenido ni llevan una etiqueta de cierre. 5
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago ESTRUCTURA BÁSICA <html> <head> </head> <body> Texto del cuerpo de la página </body> </html> 6
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago BODY El cuerpo del documento contiene la información que queremos que se visualice, el texto de la página, las imágenes, los formularios, etc. Todos estos elementos entre las etiquetas <body> y </body> Es posible establecer el color o la imagen de fondo de la página. Para el color del fondo bgcolor y para la imagen de fondo background, indicando la ruta en la que se encuentra la imagen. También es posible establecer el color del texto de la página a través del atributo text. Entre el borde de la ventana y el contenido de la página existe un margen, que puede modificarse mediante los atributos leftmargin (margen izquierdo) y topmargin (margen superior). Estos atributos no funcionan para el navegador Netscape, pero sí los atributos marginwidth (anchura del margen) y marginheight (altura del margen). 7
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago BODY – EJEMPLO 8
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago BODY – EJEMPLO 9
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago PÁRRAFOS Y BLOQUES DE TEXTO Representación de caracteres especiales por ejemplo: < &lt; > &gt; á &aacute; …. Comentarios en las páginas html <!– Este texto no es visible en la página web//--> Saltos de línea <br> Texto preformateado <pre> </pre> Separadores <hr> atributos ALIGN, WIDTH, SIZE y COLOR Encabezados <h1> </h1>, …., <h7> </h7> Párrafo <p> </p> atributos ALIGN 10
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago PÁRRAFOS Y BLOQUES DE TEXTO 11
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago PÁRRAFOS Y BLOQUES DE TEXTO 12
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago ESTILOS DE TEXTO Negrita: <b> </b> (bold = negrita) Cursiva: <i> </i> (italic = itálica) Subrayado: <u> </u> (underlined = subrayado) Superíndice <sup> </sup> (sup = super) por ejemplo: E=mc2. Subíndice <sub> </sub> (sub = por debajo), por ejemplo: texto subíndice. Existen más estilos: 13
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago ESTILOS DE TEXTO <VAR>Variable Element Text</var> <EM>Enfatizado</em> <BIG>Texto grande</big> <STRONG>Fuerte</strong> <SMALL>Texto pequeño</small> <CODE>Code Texto</code> <SUB>Subindice</SUB> <CITE> Citation Text</cite> <SUP>Superíndice</SUP> <KBD>Keyboard Text</kbd> <STRIKE>Texto tachado</STRIKE> <SAMP>Sample Text</samp> … <TT>Teletype Text</tt> 14
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago ESTILOS DE TEXTO– EJEMPLO 1 15
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago ESTILOS DE TEXTO– EJEMPLO 1 16
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago FORMATOS DE TEXTO Las propiedades del texto pueden modificarse a través de la etiqueta <font> . Para ello, podemos insertar el texto entre las etiquetas y , especificando algunos de los atributos de la etiqueta: FACE: fuente. nombre de la fuente, o fuentes COLOR: color del texto. número hexadecimal o texto predefinido SIZE: tamaño del texto. valores del 1 al 7, siendo por defecto el 3, o desplazamiento respecto al tamaño por defecto, añadiendo + o - delante del valor <font color=green size="4" face="Comic Sans MS"> Ejemplo de texto en verde </font> 17
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago FORMATOS DE TEXTO – EJEMPLO 2 18
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago LISTAS DE TEXTO Con frecuencia se usan listas en los documentos. El lenguaje HTML incorpora unas listas con viñetas sencillas o también letras o números. Para dar más vistosidad a las páginas, se suelen emplear también imágenes que se colocan delante de cada párrafo. Vamos a ver algunas de las posibilidades que tenemos. Listas con viñetas desordenadas escribimos en html se verá como <ul> <li>Primer término de la lista •Primer término de la lista <li>Segundo término •Segundo término <li>Tercer término •Tercer término </ul> 19
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago LISTAS DE TEXTO Como ves, la lista se declara con la etiqueta <UL> y finaliza con el cierre de la misma </UL>. También podemos modificar las viñetas por medio del atributo TYPE= circle, disc o square (círculo, disco o cuadrado) y añadir sublistas. escribimos en html se verá como <ul> <li type= disc>Primer término de la lista •Primer término de la lista <ul> o Sublista <li>Sublista o Otro elemento <li>Otro elemento oSegundo término </ul> ■Tercer término <li type=circle>Segundo término <li type=square>Tercer término </ul> 20
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago LISTAS DE TEXTO Listas con viñetas ordenadas Estas listas se caracterizan porque aparecen números o ciertos caracteres que ordenan sus elementos. La etiqueta usada es <OL> junto con su correspondiente de cierre </OL>. El atributo TYPE toma ahora los valores 1, a, A, i, I. Un ejemplo de estas listas es el siguiente escribimos en html se verá como <ol type=i> <li >Primer término de la lista i.Primer término de la lista <li >Segundo término ii.Segundo término <li>Tercer término iii.Tercer término <li>Cuarto iv.Cuarto <li>Quinto v.Quinto </ol> Para empezando por el 10, añadimos el atributo start="10" 21
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago LISTAS DE TEXTO Listas de definición Estas listas se forman con el elemento que se define y su definición. Las etiquetas son <DL> y </DL> para la lista y <dt> y <dd> para los elementos y sus definiciones. Un ejemplo: escribimos en html se verá como <dl> <dt >Término 1º Término 1º <dd>Definición del elemento 1º Definición del elemento 1º <dt>Término 2º Término 2º <dd>Definición del elemento 2º Definición del elemento 2º <dt>Término 3º Término 3º <dd>Definición del elemento 3º Definición del elemento 3º </dl> 22
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago ENLACES Un enlace aparece generalmente como un texto azul subrayado y cuando situamos el cursor sobre él se transforma en una mano con el dedo índice extendido. Si pulsamos sobre el enlace saltamos a otra parte del documento, a otro documento situado en cualquier lugar, o incluso se abre el programa de correo para enviar un mensaje a la dirección indicada. En general los enlaces tienen la siguiente estructura <A HREF="URL"> Texto del enlace </A> El texto del enlace es lo que se visualizará en el navegador. La URL es la dirección donde apunta el enlace y puede ser de estos tipos: 23
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago ENLACES Enlace a otra página local En este caso la URL se dará de forma relativa. Por ejemplo si tenemos dos páginas en el mismo directorio pagina1.htm y pagina2.htm y queremos poner un enlace desde la pagina1.htm a la pagina2.htm debemos escribir <a href="pagina2.htm">Ir a pagina2</a> Con esto es suficiente, no hay que crear ningún marcador a no ser que quieras ir a un sitio concreto de la pagina2.htm. En ese caso tendrías que poner en el sitio adonde quieres llegar de la pagina2.htm <a name="sitio"></a> y en la pagina1.htm <a href="pagina2.htm#sitio>Ir a sitio de la página 2</a> Las palabras forma relativa, al principio de esta sección, constituyen un enlace de este último tipo 24
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago ENLACES Enlace a otro lugar del mismo documento En este caso la URL se sustituye por un marcador en la misma página. El marcador puede ser texto colocado en el lugar al que queremos saltar Ejemplo para saltar al inicio de esta página. Escribiríamos en el lugar desde el que queremos saltar: <A HREF="#inicio"> Ir al Inicio</A> Y en el sitio exacto adonde queremos saltar, debemos poner la siguiente etiqueta: <A NAME="inicio"> </A> Una vez escrito esto y guardada la página veríamos al abrirla con el Navegador Ir al Inicio Al pulsar nos llevaría al principio de la página. 25
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago ENLACES Enlace a una dirección de Internet Ahora la URL debe darse de forma absoluta, tal como la ves en la ventana de dirección del navegador, es decir: <A HREF="http://www.google.com">Buscador</A> te llevaría a la página de entrada de Google Enlaces usando imágenes Para que una imagen sea un enlace hay que colocarla en el lugar del texto del enlace, si además queremos que vaya a otra imagen, ésta la debemos poner en el lugar de la URL. Ejemplo: <A HREF=" #inicio"><img src=“imagen.gif"></A> obtengo una imagen que al pulsarla me lleva al inicio de esta página, 26
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago ENLACES - ATRIBUTOS Target Si quieres que la página que enlazas aparezca en: _blank: Abre el documento vinculado en una ventana nueva del navegador. _parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. _self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo. _top: Abre el documento vinculado en la ventana completa del navegador. <a href="index.htm" target=“_top">Indice</a> 27
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago ENLACES - ATRIBUTOS Los colores de los vínculos pueden especificarse a través de las propiedades de la página, en la etiqueta <body>. link permite determinar el color de los enlaces sin visitar (enlace que no ha sido pulsado ninguna vez). alink permite determinar el color del enlace activo (enlace que acaba de ser pulsado). vlink permite determinar el color de los enlaces visitados (enlaces que ya han sido pulsados). Por ejemplo, al insertar el siguiente código: ... <body link="#FF0000" vlink="#FF0099" alink="#FF9900"> 28
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago IMÁGENES La etiqueta para incluir una imagen es la siguiente: <IMG SRC="URL"> (no tiene etiqueta de cierre) donde URL es la dirección de la imagen. La URL puede ser relativa o absoluta. Unos ejemplos aclararán este concepto: <IMG SRC="gifs/nido.gif“> Esta es una dirección relativa. <IMG SRC="http://spaceart.com/solar/raw/sat/saturn4.jpg"> insertaría la imagen siempre que estuvieras conectado a Internet. Esta es una dirección absoluta, ya que la dirección no depende del directorio donde esté ubicada la página que la contiene. 29
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago IMÁGENES - ATRIBUTOS ALT="Texto que aparece al situar el cursor sobre la imagen" También muestra este mismo texto en caso de que el navegador no cargue la imagen. ALIGN= Nos indica la posición de la imagen respecto del texto. Después del signo igual, pueden ir los valores: TOP, MIDDLE, BOTTOM, LEFT y RIGHT WIDTH=80, HEIGTH=100 Indican la anchura y altura de la imagen en píxels, en este caso 80x100 píxels. BORDER=2 Añade un borde, a modo de marco, a la imagen. En este caso de 2 píxels. HSPACE=10 , VSPACE=15 Espacio entre la imagen y el texto que la rodea, en este caso 30
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago MAPAS Los enlaces en las páginas web pueden escribirse con un texto o con una imagen. Es decir podíamos tener una imagen que al ser pulsada con el ratón nos llevaba a otra página. Pues un mapa de imagen es algo parecido pero en el que la imagen no tienen asociado un solo enlace sino varios: depende de que parte de la imagen pises para ir a uno u otro destino En la imagen se definen zonas activas. Su creación tienen dos partes: una definir el mapa y otra asociar el mapa con una imagen: <MAP NAME="mapa_enlaces"> <AREA SHAPE=... COORDS=... ALT="Enlace a.."> ... </MAP> 31
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago MAPAS: ATRIBUTOS SHAPE Define la forma de la zona: rectangular, circular o poligonal. Coordenadas (separadas por comas) que definen la zona. El número y COORDS significado de esas coordenadas dependerá de la forma. HREF URL del enlace corespondiente a esta zona. NOHREF Zona inactiva ALT Texto alternativo, etiqueta idéntica al ALT de IMG SHAPE "x1,y1,x2,y2" siendo (x1,y1) la esquina superior izquierda Rectangular RECT y (x2,y2) la inferior derecha. Circular CIRC "x,y,r" siendo (x,y) el centro del círculo y r el radio. "x1,y1,x2,y2,x3,y3,..." definiendo cada pareja (x,y) una Polígono POLY esquina del polígono. La última pareja de coordenadas se irregular unirá a la primera para cerrar el polígono. 32
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago Un rectangulo de 100 x 100 (X, Y) X 50, 0 0, 0 0, 0 50, 100 100, 100 100, 100 Y 33
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago EJEMPLO DE MAPA <img src="images/mapa.gif" usemap="#Map" border="0" width="198" height="51"> <map name="Map"> <area shape="rect" coords="-1,0,96,51" href="http://apache.org" alt=“Apache"> <area shape="rect" coords="99,1,199,53" href="http://w3c.org" alt=“W3C"> </map> 34
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago TABLAS Las tablas se usan con profusión en las páginas Web, muchas veces debido a que son el único instrumento con el que se cuenta, para asegurarse que las cosas estarán en su sitio. Para definir una tabla se usan las etiquetas: <TABLE> y </TABLE> son las etiquetas donde está contenida la tabla <TR> y </TR> son las etiquetas que indican el comienzo y fin de una fila (<th> y </th> si es una fila de cabecera) <TD> y </TD> señalan una celda. La tabla se va definiendo declarando una fila y a continuación las celdas que contiene esa fila, luego otra fila y sus celadas, etc. No es necesario que todas las filas contengan el mismo número de celdas. 35
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago TABLAS La tabla (2x2) más sencilla que podemos hacer es la siguiente Escribimos: Visualizamos <TABLE > <TR> 1 2 <TD>1 </TD> <TD> 2 </TD> </TR> <TR> <TD>3 </TD> <TD> 4</TD> </TR> </TABLE> 3 4 36
    • : Augustóbriga – 2º SMR – Aplicaciones Web IES rmonago TABLAS – ATRIBUTOS Atributo Significado Posibles valores un número, acompañado de % cuando se width ancho desee que sea en porcentaje un número, acompañado de % cuando se height altura desee que sea en porcentaje espacio entre el contenido cellpadding un número de las celdas y el borde cellspacing espacio entre celdas un número border grosor del borde un número align alineación left , right , center bgcolor color de fondo número hexadecimal background imagen de fondo número hexadecimal bordercolor color del borde número hexadecimal se utilizan para combinar celdas. colspan y rowspan, 37
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago TABLAS - EJEMPLO Escribimos: Visualizamos <TABLE BORDER="3" CELLSPACING="5" WIDTH="200"> <TH COLSPAN=2 BGCOLOR="#6D8FFF> Este es el Este es el título título</TH> <TR align="center"> <TD>Esta es la celda de la 1ª fila y de la 1ª columna</TD> Esta es la celda Esta es de la 1ª <TD> Esta es de la 1ª fila y de la 2ª columna</TD> de la 1ª fila y de fila y de la 2ª </TR> la 1ª columna columna <TR BGCOLOR="#6D8FFF> <TD>Esto está con un fondo azul</TD> <TD align="right" valign="bottom">Y esto Esto está con un también</TD> fondo azul </TR> </TABLE> Y esto también 38
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago MARCOS Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia. Cada uno de los marcos de una página, contiene un documento HTML individual, es decir para crear una página dividida en marcos, es necesario crear varios archivos HTML referidos a un archivo principal. <HTML> <HEAD><TITLE> Página con marcos </TITLE></HEAD> <FRAMESET ROWS=75,*> <FRAME SRC="frames1.htm" > <FRAME SRC="frames2.htm" > </FRAMESET> <NOFRAMES> <BODY> Su navegador no soporta frames.</BODY> </NOFRAMES> </HTML> 39
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago ETIQUETAS PARA MARCOS Documento Marco <FRAMESET></FRAMESET> En lugar de <body> altura en filas <FRAMESET ROWS=,,,></FRAMESET> píxel ó %, * anchura en columnas <FRAMESET COLS=,,,></FRAMESET> píxel ó %, * anchura del borde <FRAMESET BORDER=?> borde <FRAMESET FRAMEBORDER="yes|no"> color del borde <FRAMESET BORDERCOLOR=“#0000FF"> Definición del marco <FRAME> Doc. que se debe mostrar <FRAME SRC="URL"> nombre del frame <FRAME NAME="***"|_blank|_self| _parent|_top> anchura de los márgenes <FRAME MARGINWIDTH=?> margen izq. y der. altura de los márgenes <FRAME MARGINHEIGHT=?> margen sup. e inf. barra de desplazamiento <FRAME SCROLLING="YES|NO|AUTO"> no redimensionable <FRAME NORESIZE> borde <FRAME FRAMEBORDER="yes|no"> color del borde <FRAME BORDERCOLOR=“#0000AA"> 40
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago EJEMPLOS DE MARCOS <frameset cols="120,*"> <frame name="sx" src="sx.htm"> <frameset rows="100,*"> <frame name="alto" src="top.htm"> <frame name="central" src="central.htm"> </frameset> </frameset> 41
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago EJEMPLOS DE MARCOS <frameset cols="75%,25%"> <frameset rows="20%,80%*"> <frame name="alto" src="top.htm"> <frame name="central" src="central.htm"> </frameset> <frameset rows="24%,76%"> <frame name="top" src="top2.htm"> <frame name="dx" src="dx.htm"> </frameset> </frameset> 42
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago ATRIBUTO TARGET Los enlaces de la página frames4.htm , que es la que se carga en el margen izquierdo,se escriben de la forma: <A HREF="frames1.htm" TARGET=principal>Frame 1 </A> Hay ciertos valores reservados para TARGET, estos son •TARGET=_top hace que la página se cargue en la ventana completa del navegador. •TARGET=_self hace que la página se cargue en la misma ventana del frame actual. •TARGET=_parent hace que la página se cargue en el frame "padre", del que desciende el actual •TARGET=_blank hace que la página se cargue en una nueva ventana. •TARGET=nombre hace que la página se cargue en el frame llamado nombre. Si no existe se carga en una ventana nueva 43
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago FORMULARIOS Los formularios están delimitados con la etiqueta <FORM> ... </FORM>, que permite reunir varios elementos de formulario, como botones y casillas de texto. Atributos: • METHOD indica cómo se enviarán las respuestas "POST" es el valor que envía los datos al agente de procesamiento almacenándolos en el cuerpo del formulario, en tanto que "GET" envía los datos agregándolos a la dirección URL y separándolos de la dirección con un signo de interrogación • ACTION indica la dirección a la que se enviará la información (un script CGI o dirección de correo electrónico (mailto:dirección_de_correo_e@equipo)) Un atributo opcional de la etiqueta FORM es ENCTYPE, que especifica cómo se codifican los datos del formulario. 44
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago FORMULARIOS La etiqueta FORM actúa como una especie de contenedor para almacenar elementos que permiten al usuario seleccionar o introducir datos. Todos los datos se enviarán a la dirección URL indicada en el atributo ACTION de la etiqueta FORM, por el método 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 más 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 múltiples 45
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago INPUT <INPUT name=“ nombre" value=“valor predeterminado" ntype=“tipo"> El atributo name es esencial, ya que permite al script CGI reconocer qué campo está asociado con un par nombre/valor. El atributo type se usa para especificar qué tipo de elemento. Valores posibles: • checkbox: Casillas de elección: checked / unchecked • hidden: Este campo oculto. • image: Un botón de envío personalizado • password: casilla de texto donde los caracteres aparecen como asteriscos. • radio: Botón que permite elegir entre varias opciones, deben tener el mismo atributo name. El par nombre/valor del botón radio seleccionado se enviará. • reset: Botón de restauración para quitar todos los elementos en el formulario. • submit: Botón de envío para enviar el formulario. • text: Casilla de texto. Atributo size, tamaño y la extensión máxima, maxlength. 46
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago EJEMPLO CHECKBOX <form method="post" action="manejador.php"> <p>Selecciona tus intereses:<br> <input name="cbipeliculas" type="checkbox“ >Pel&iacute;culas<br> <input name="cbilibros" type="checkbox“ >Libros<br> <input name="cbiinternet" type="checkbox”>Internet </p> </form> 47
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago TEXTAREA La etiqueta TEXTAREA se usa para definir un cuadro de texto más grande que la línea simple propuesta por la etiqueta INPUT. Esta etiqueta tiene los siguientes atributos: • cols: representa el número de caracteres que puede contener un línea • rows: representa el número de líneas • name: representa el nombre asociado con el cuadro de texto, que permite su identificación 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 48
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago EJEMPLO TEXTAREA <form method="post" action="manejador.php"> <p>Ingresa tus comentarios:<br> <textarea name="comentarios" rows="2" cols="30">...Tus comentarios aqu&iacute;...</textarea></p> </form> 49
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago 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 identificación en el par nombre/valor. • disabled: crea un lista desactivada, que aparece atenuada • size: representa el número de líneas de la lista (este valor puede ser más grande que el número de elementos reales de la lista). • multiple: Permite al usuario seleccionar varios campos de la lista 50
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago EJEMPLO SELECT <select name="entradaselect"> <optgroup label="Entradas de texto"> <option>De una sola l&iacute;nea</option> <option>Contrase&ntilde;a</option> <option>Multil&iacute;nea</option> </optgroup> <optgroup label="Opciones"> <option>Casillas de verificaci&oacute;n</option> <option>Botones radio</option> <option>Listas select</option> </optgroup> </select> 51
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago RESUMEN FORM Etiqueta Atributo Valor Resultado <FORM> METHOD POST /GET ….. ACTION Envía a la dirección mostrada </FORM> ENCTYPE Especifica el tipo de código submit realiza la ACTION de la etiqueta <FORM> text línea simple de texto TYPE Reset Elimina el contenido del formulario <INPUT> Radio botón de radio Checkbox casilla de selección NAME Nombre SIZE Tamaño del texto NAME <TEXTAREA> ... ROWS Casilla de texto </TEXTAREA> COLS Opción 1 <SELECT> <OPTION> NAME Opción 2 ... </OPTION> Opción 3 MULTIPLE Múltiples selecciones posibles </SELECT> <OPTION> ... SELECTED Elección predeterminada </OPTION> VALUE Valor forzado 52
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago EJEMPLO FORMULARIO <FORM ACTION="mailto:smr2.ramon@gmail.com" METHOD=POST> Nombre: <INPUT NAME="nombre" MAXLENGTH="25" TYPE="TEXT" VALUE=""> <br> Email: <INPUT NAME="mail" MAXLENGTH="25" TYPE="TEXT" VALUE=""> <br> Motivo: <INPUT NAME="motivo" MAXLENGTH="25" TYPE="TEXT" VALUE=""> <br> Mensaje: <TEXTAREA NAME="mensaje" ROWS=3 COLS=20> </TEXTAREA> <br> <INPUT NAME="boton" TYPE="SUBMIT" VALUE="Enviar"> </FORM> 53
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago CAPAS Las capas no son más que unos recuadros, que pueden situarse en cualquier parte de la página, en los que podemos insertar contenido HTML. Dichas capas pueden ocultarse y solaparse entre sí, lo que proporciona grandes posibilidades de diseño. 54
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago ATRIBUTOS DE LAS CAPAS ID="layerName” el nombre del layer, para referirse a él. LEFT="pixelPosition" y TOP="pixelPosition” especifica la posición horizontal y vertical de los layers de posición o la posición relativa horizontal y vertical de los layers emergentes. PAGEX y PAGEY especifica la posición vertical y horizontal del layer relativa a la ventana. SRC="file” especifica la dirección completa del fichero que contiene el código HTML . Z-INDEX="n” especifica el orden de apilación de un layer. ABOVE="layername” especifica el layer que se va a colocar justo encima del que se acaba de crear. BELOW="layername” identifica el layer que está justo por debajo del layer que se acaba de crear;. WIDTH="width” especifica el ancho que va a tener el layer. Número entero de píxeles o porcentaje. HEIGHT="height” especifica el tamaño de alto que va a tener. CLIP="n,n,n,n” especifica las coordenadas de la pestaña del layer, la cual puede ser menor que la anchura del contenido del layer. El valor es un conjunto de cuatro números. Cada uno de esos cuatro valores representa número de píxeles. VISIBILITY especifica si el layer es visible SHOW, oculto HIDDEN o INHERIT la misma que su padre. BGCOLOR="color” especifica el color de fondo del layer. BACKGROUND="imageURL” Especifica una imagen para ponerla de fondo del layer. 55
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago EJEMPLO DE CAPA: LAYER <layer id="capa" width="200px" height="115px" z-index="3" visibility="show" bgcolor="#0099CC" background="imagenes/fondocapa.gif"> Este texto est&aacute; dentro de una capa. </layer> 56
    • IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago EJEMPLO DE CAPA: DIV <div id="capa" style="position:absolute; width:200px; height:115px; z-index:3; visibility: visible; background-color: #0099CC; layer-background-color: #0099CC; background-image: url(imagenes/fondocapa.gif); layer- background-image: url(imagenes/fondocapa.gif); clip: rect(1 auto auto 3);"> Este texto est&aacute; dentro de una capa. </div> 57