LENGUAJES WEB DEL CLIENTE
Aplicaciones Web
LENGUAJES DESDE EL CLIENTE
•Lenguaje de Marcas HTML.
•Hojas de Estilos CSS.
•Lenguaje de Marcas XHTML.
•JavaScript.
rmonag...
Página WebPágina Web
Estructura
Contenido
Apariencia
Comportamiento
HTML
CSS
Javascript
• Colores
• Tipografías
• Alineaci...
LENGUAJE DE MARCAS HTML
HTML, siglas de HyperText Markup Language (Lenguaje de
Marcado de Hipertexto), es el lenguaje de m...
ETIQUETAS HTML
Las etiquetas son la estructura básica de HTML. Estas tienen
dos propiedades básicas: atributos y contenido...
ESTRUCTURA BÁSICA
<html>
<head> </head>
<body>
Texto del cuerpo de la página
</body>
</html>
rmonago
6
IES Augustóbriga – ...
BODY
El cuerpo del documento contiene la información que queremos
que se visualice, el texto de la página, las imágenes, l...
BODY – EJEMPLO
rmonago
8
IES Augustóbriga – 2º SMR – Aplicaciones Web
BODY – EJEMPLO
rmonago
9
IES Augustóbriga – 2º SMR – Aplicaciones Web
PÁRRAFOS Y BLOQUES DE TEXTO
Representación de caracteres especiales
por ejemplo: < &lt; > &gt; á &aacute; ….
Comentarios e...
PÁRRAFOS Y BLOQUES DE TEXTO
rmonago
11
IES Augustóbriga – 2º SMR – Aplicaciones Web
PÁRRAFOS Y BLOQUES DE TEXTO
rmonago
12
IES Augustóbriga – 2º SMR – Aplicaciones Web
ESTILOS DE TEXTO
Negrita: <b> </b> (bold = negrita)
Cursiva: <i> </i> (italic = itálica)
Subrayado: <u> </u> (underlined =...
ESTILOS DE TEXTO
<EM>Enfatizado</em>
<STRONG>Fuerte</strong>
<CODE>Code Texto</code>
<CITE> Citation Text</cite>
<KBD>Keyb...
ESTILOS DE TEXTO– EJEMPLO 1
rmonago
15
IES Augustóbriga – 2º SMR – Aplicaciones Web
ESTILOS DE TEXTO– EJEMPLO 1
rmonago
16
IES Augustóbriga – 2º SMR – Aplicaciones Web
FORMATOS DE TEXTO
<font color=green size="4" face="Comic Sans MS">
Ejemplo de texto en verde
</font>
Las propiedades del t...
FORMATOS DE TEXTO – EJEMPLO 2
rmonago
18
IES Augustóbriga – 2º SMR – Aplicaciones Web
LISTAS DE TEXTO
Con frecuencia se usan listas en los documentos. El lenguaje HTML incorpora unas
listas con viñetas sencil...
LISTAS DE TEXTO
Como ves, la lista se declara con la etiqueta <UL> y finaliza con el cierre de
la misma </UL>. También pod...
LISTAS DE TEXTO
Estas listas se caracterizan porque aparecen números o ciertos caracteres que
ordenan sus elementos. La et...
LISTAS DE TEXTO
Listas de definición
Estas listas se forman con el elemento que se define y su definición. Las
etiquetas s...
ENLACES
Un enlace aparece generalmente como un texto azul subrayado y cuando
situamos el cursor sobre él se transforma en ...
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...
ENLACES
Enlace a otro lugar del mismo documento
En este caso la URL se sustituye por un marcador en la misma página. El
ma...
ENLACES
Enlace a una dirección de Internet
Ahora la URL debe darse de forma absoluta, tal como la ves en la
ventana de dir...
ENLACES - ATRIBUTOS
Target
Si quieres que la página que enlazas aparezca en:
_blank: Abre el documento vinculado en una ve...
ENLACES - ATRIBUTOS
Los colores de los vínculos pueden especificarse a través de las propiedades
de la página, en la etiqu...
IMÁGENES
La etiqueta para incluir una imagen es la siguiente:
<IMG SRC="URL"> (no tiene etiqueta de cierre) donde URL es l...
IMÁGENES - ATRIBUTOS
ALT="Texto que aparece al situar el cursor sobre la imagen"
También muestra este mismo texto en caso ...
MAPAS
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
31
Los enlaces en las páginas web pueden escribirse con un texto...
MAPAS: ATRIBUTOS
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
32
SHAPE Define la forma de la zona: rectangular, cir...
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
33
Un rectangulo de 100 x 100 (X, Y)
0, 0
100, 100
0, 0
100, 100
50, 0...
EJEMPLO DE MAPA
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
34
<img src="images/mapa.gif" usemap="#Map" border="0"...
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 ...
TABLAS
Escribimos: Visualizamos
<TABLE >
<TR>
<TD>1 </TD> <TD> 2 </TD>
</TR> <TR>
<TD>3 </TD> <TD> 4</TD>
</TR>
</TABLE>
1...
TABLAS – ATRIBUTOS
Atributo Significado Posibles valores
width ancho
un número, acompañado de % cuando se
desee que sea en...
TABLAS - EJEMPLO
Escribimos: Visualizamos
<TABLE BORDER="3" CELLSPACING="5"
WIDTH="200">
<TH COLSPAN=2 BGCOLOR="#6D8FFF> E...
<HTML>
<HEAD><TITLE> Página con marcos </TITLE></HEAD>
<FRAMESET ROWS=75,*>
<FRAME SRC="frames1.htm" >
<FRAME SRC="frames2...
ETIQUETAS PARA MARCOS
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
40
Documento Marco <FRAMESET></FRAMESET> En luga...
<frameset cols="120,*">
<frame name="sx" src="sx.htm">
<frameset rows="100,*">
<frame name="alto" src="top.htm">
<frame na...
<frameset cols="75%,25%">
<frameset rows="20%,80%*">
<frame name="alto" src="top.htm">
<frame name="central" src="central....
ATRIBUTO TARGET
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
43
Los enlaces de la página frames4.htm , que es la qu...
FORMULARIOS
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
44
Los formularios están delimitados con la etiqueta <FORM...
FORMULARIOS
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
45
La etiqueta FORM actúa como una especie de contenedor p...
INPUT
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
46
<INPUT name=“ nombre" value=“valor predeterminado" ntype=“tip...
EJEMPLO CHECKBOX
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
47
<form method="post" action="manejador.php">
<p>Sel...
TEXTAREA
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
48
La etiqueta TEXTAREA se usa para definir un cuadro de text...
EJEMPLO TEXTAREA
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
49
<form method="post" action="manejador.php">
<p>Ing...
SELECT
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
50
La etiqueta SELECT sirve para crear una lista desplegable de...
<select name="entradaselect">
<optgroup label="Entradas de texto">
<option>De una sola l&iacute;nea</option>
<option>Contr...
Etiqueta Atributo Valor Resultado
<FORM>
…..
</FORM>
METHOD POST /GET
ACTION Envía a la dirección mostrada
ENCTYPE Especif...
<FORM ACTION="mailto:smr2.ramon@gmail.com" METHOD=POST>
Nombre:
<INPUT NAME="nombre" MAXLENGTH="25" TYPE="TEXT" VALUE="">
...
CAPAS
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
54
Las capas no son más que unos recuadros, que pueden
situarse ...
ATRIBUTOS DE LAS CAPAS
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
55
ID="layerName” el nombre del layer, para ref...
EJEMPLO DE CAPA: LAYER
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
56
<layer id="capa" width="200px" height="115px...
EJEMPLO DE CAPA: DIV
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
57
<div id="capa" style="position:absolute; width...
Próxima SlideShare
Cargando en…5
×

Lenguaje de marcas html

6.958 visualizaciones

Publicado el

repaso general a las etiquetas html básicas

Publicado en: Educación
0 comentarios
7 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
6.958
En SlideShare
0
De insertados
0
Número de insertados
820
Acciones
Compartido
0
Descargas
0
Comentarios
0
Recomendaciones
7
Insertados 0
No insertados

No hay notas en la diapositiva.

Lenguaje de marcas html

  1. 1. LENGUAJES WEB DEL CLIENTE Aplicaciones Web
  2. 2. LENGUAJES DESDE EL CLIENTE •Lenguaje de Marcas HTML. •Hojas de Estilos CSS. •Lenguaje de Marcas XHTML. •JavaScript. rmonago 2 IES Augustóbriga – 2º SMR – Aplicaciones Web
  3. 3. Página WebPágina Web Estructura Contenido Apariencia Comportamiento HTML CSS Javascript • Colores • Tipografías • Alineación • Efectos • Validaciones • Automatización • Párrafos • Encabezados • Listas •Tablas • Capas • Etc. • Textos • Imágenes • Enlaces • Fondos • Tamaños • Etc. rmonago 3 IES Augustóbriga – 2º SMR – Aplicaciones Web
  4. 4. 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. rmonago 4 IES Augustóbriga – 2º SMR – Aplicaciones Web
  5. 5. 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 Algunos elementos, tales como <br>, no tienen contenido ni llevan una etiqueta de cierre. Elemento Etiqueta de Apertura Etiq. de CierreContenido rmonago 5 IES Augustóbriga – 2º SMR – Aplicaciones Web
  6. 6. ESTRUCTURA BÁSICA <html> <head> </head> <body> Texto del cuerpo de la página </body> </html> rmonago 6 IES Augustóbriga – 2º SMR – Aplicaciones Web
  7. 7. 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). rmonago 7 IES Augustóbriga – 2º SMR – Aplicaciones Web
  8. 8. BODY – EJEMPLO rmonago 8 IES Augustóbriga – 2º SMR – Aplicaciones Web
  9. 9. BODY – EJEMPLO rmonago 9 IES Augustóbriga – 2º SMR – Aplicaciones Web
  10. 10. 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 rmonago 10 IES Augustóbriga – 2º SMR – Aplicaciones Web
  11. 11. PÁRRAFOS Y BLOQUES DE TEXTO rmonago 11 IES Augustóbriga – 2º SMR – Aplicaciones Web
  12. 12. PÁRRAFOS Y BLOQUES DE TEXTO rmonago 12 IES Augustóbriga – 2º SMR – Aplicaciones Web
  13. 13. 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: rmonago 13 IES Augustóbriga – 2º SMR – Aplicaciones Web
  14. 14. ESTILOS DE TEXTO <EM>Enfatizado</em> <STRONG>Fuerte</strong> <CODE>Code Texto</code> <CITE> Citation Text</cite> <KBD>Keyboard Text</kbd> <SAMP>Sample Text</samp> <TT>Teletype Text</tt> <VAR>Variable Element Text</var> <BIG>Texto grande</big> <SMALL>Texto pequeño</small> <SUB>Subindice</SUB> <SUP>Superíndice</SUP> <STRIKE>Texto tachado</STRIKE> … rmonago 14 IES Augustóbriga – 2º SMR – Aplicaciones Web
  15. 15. ESTILOS DE TEXTO– EJEMPLO 1 rmonago 15 IES Augustóbriga – 2º SMR – Aplicaciones Web
  16. 16. ESTILOS DE TEXTO– EJEMPLO 1 rmonago 16 IES Augustóbriga – 2º SMR – Aplicaciones Web
  17. 17. FORMATOS DE TEXTO <font color=green size="4" face="Comic Sans MS"> Ejemplo de texto en verde </font> 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 rmonago 17 IES Augustóbriga – 2º SMR – Aplicaciones Web
  18. 18. FORMATOS DE TEXTO – EJEMPLO 2 rmonago 18 IES Augustóbriga – 2º SMR – Aplicaciones Web
  19. 19. 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. escribimos en html se verá como <ul> <li>Primer término de la lista <li>Segundo término <li>Tercer término </ul> •Primer término de la lista •Segundo término •Tercer término Listas con viñetas desordenadas rmonago 19 IES Augustóbriga – 2º SMR – Aplicaciones Web
  20. 20. 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 <ul> <li>Sublista <li>Otro elemento </ul> <li type=circle>Segundo término <li type=square>Tercer término </ul> •Primer término de la lista o Sublista o Otro elemento oSegundo término ■Tercer término rmonago 20 IES Augustóbriga – 2º SMR – Aplicaciones Web
  21. 21. LISTAS DE TEXTO 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 Listas con viñetas ordenadas escribimos en html se verá como <ol type=i> <li >Primer término de la lista <li >Segundo término <li>Tercer término <li>Cuarto <li>Quinto </ol> i.Primer término de la lista ii.Segundo término iii.Tercer término iv.Cuarto v.Quinto Para empezando por el 10, añadimos el atributo start="10" rmonago 21 IES Augustóbriga – 2º SMR – Aplicaciones Web
  22. 22. 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º <dd>Definición del elemento 1º <dt>Término 2º <dd>Definición del elemento 2º <dt>Término 3º <dd>Definición del elemento 3º </dl> Término 1º Definición del elemento 1º Término 2º Definición del elemento 2º Término 3º Definición del elemento 3º rmonago 22 IES Augustóbriga – 2º SMR – Aplicaciones Web
  23. 23. 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: rmonago 23 IES Augustóbriga – 2º SMR – Aplicaciones Web
  24. 24. 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 rmonago 24 IES Augustóbriga – 2º SMR – Aplicaciones Web
  25. 25. 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. rmonago 25 IES Augustóbriga – 2º SMR – Aplicaciones Web
  26. 26. 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, rmonago 26 IES Augustóbriga – 2º SMR – Aplicaciones Web
  27. 27. 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> rmonago 27 IES Augustóbriga – 2º SMR – Aplicaciones Web
  28. 28. 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"> rmonago 28 IES Augustóbriga – 2º SMR – Aplicaciones Web
  29. 29. 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. rmonago 29 IES Augustóbriga – 2º SMR – Aplicaciones Web
  30. 30. 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 rmonago 30 IES Augustóbriga – 2º SMR – Aplicaciones Web
  31. 31. MAPAS rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 31 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>
  32. 32. MAPAS: ATRIBUTOS rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 32 SHAPE Define la forma de la zona: rectangular, circular o poligonal. COORDS Coordenadas (separadas por comas) que definen la zona. El número y 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 Rectangular RECT "x1,y1,x2,y2" siendo (x1,y1) la esquina superior izquierda y (x2,y2) la inferior derecha. Circular CIRC "x,y,r" siendo (x,y) el centro del círculo y r el radio. Polígono irregular POLY "x1,y1,x2,y2,x3,y3,..." definiendo cada pareja (x,y) una esquina del polígono. La última pareja de coordenadas se unirá a la primera para cerrar el polígono. SHAPE
  33. 33. rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 33 Un rectangulo de 100 x 100 (X, Y) 0, 0 100, 100 0, 0 100, 100 50, 0 50, 100 X Y
  34. 34. EJEMPLO DE MAPA rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 34 <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>
  35. 35. 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. rmonago 35 IES Augustóbriga – 2º SMR – Aplicaciones Web
  36. 36. TABLAS Escribimos: Visualizamos <TABLE > <TR> <TD>1 </TD> <TD> 2 </TD> </TR> <TR> <TD>3 </TD> <TD> 4</TD> </TR> </TABLE> 1 2 3 4 La tabla (2x2) más sencilla que podemos hacer es la siguiente rmonago 36 IES Augustóbriga – 2º SMR – Aplicaciones Web
  37. 37. TABLAS – ATRIBUTOS Atributo Significado Posibles valores width ancho un número, acompañado de % cuando se desee que sea en porcentaje height altura un número, acompañado de % cuando se desee que sea en porcentaje cellpadding espacio entre el contenido de las celdas y el borde un número 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 colspan y rowspan, se utilizan para combinar celdas. : rmonago 37 IES Augustóbriga – 2º SMR – Aplicaciones Web
  38. 38. TABLAS - EJEMPLO Escribimos: Visualizamos <TABLE BORDER="3" CELLSPACING="5" WIDTH="200"> <TH COLSPAN=2 BGCOLOR="#6D8FFF> Este es el título</TH> <TR align="center"> <TD>Esta es la celda de la 1ª fila y de la 1ª columna</TD> <TD> Esta es de la 1ª fila y de la 2ª columna</TD> </TR> <TR BGCOLOR="#6D8FFF> <TD>Esto está con un fondo azul</TD> <TD align="right" valign="bottom">Y esto también</TD> </TR> </TABLE> Este es el título Esta es la celda de la 1ª fila y de la 1ª columna Esta es de la 1ª fila y de la 2ª columna Esto está con un fondo azul Y esto también rmonago 38 IES Augustóbriga – 2º SMR – Aplicaciones Web
  39. 39. <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> MARCOS rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 39 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.
  40. 40. ETIQUETAS PARA MARCOS rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 40 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">
  41. 41. <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> EJEMPLOS DE MARCOS rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 41
  42. 42. <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> EJEMPLOS DE MARCOS rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 42
  43. 43. ATRIBUTO TARGET rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 43 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
  44. 44. FORMULARIOS rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 44 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.
  45. 45. FORMULARIOS rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 45 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
  46. 46. INPUT rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 46 <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.
  47. 47. EJEMPLO CHECKBOX rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 47 <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>
  48. 48. TEXTAREA rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 48 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
  49. 49. EJEMPLO TEXTAREA rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 49 <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>
  50. 50. SELECT rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 50 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
  51. 51. <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> EJEMPLO SELECT rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 51
  52. 52. Etiqueta Atributo Valor Resultado <FORM> ….. </FORM> METHOD POST /GET ACTION Envía a la dirección mostrada ENCTYPE Especifica el tipo de código <INPUT> TYPE submit realiza la ACTION de la etiqueta <FORM> text línea simple de texto Reset Elimina el contenido del formulario Radio botón de radio Checkbox casilla de selección NAME Nombre SIZE Tamaño del texto <TEXTAREA> ... </TEXTAREA> NAME Casilla de textoROWS COLS <SELECT> <OPTION> ... </OPTION> </SELECT> NAME MULTIPLE Múltiples selecciones posibles <OPTION> ... </OPTION> SELECTED Elección predeterminada VALUE Valor forzado RESUMEN FORM rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 52 Opción 1 Opción 2 Opción 3
  53. 53. <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> EJEMPLO FORMULARIO rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 53
  54. 54. CAPAS rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 54 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.
  55. 55. ATRIBUTOS DE LAS CAPAS rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 55 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.
  56. 56. EJEMPLO DE CAPA: LAYER rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 56 <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>
  57. 57. EJEMPLO DE CAPA: DIV rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 57 <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>

×