Lenguaje de marcas html

LENGUAJES WEB DEL CLIENTE
Aplicaciones Web

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

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

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

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

ESTRUCTURA BÁSICA
<html>
<head> </head>
<body>
Texto del cuerpo de la página
</body>
</html>
rmonago
6

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

BODY – EJEMPLO
rmonago
8

BODY – EJEMPLO
rmonago
9

PÁRRAFOS Y BLOQUES DE TEXTO
Representación de caracteres especiales
por ejemplo: < < > > á á ….
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

rmonago
11

rmonago
12

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

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

ESTILOS DE TEXTO– EJEMPLO 1
rmonago
15

ESTILOS DE TEXTO– EJEMPLO 1
rmonago
16

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

FORMATOS DE TEXTO – EJEMPLO 2
rmonago
18

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

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.
<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

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
<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

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:
<dl>
<dt >Término 1º
<dd>Definición del elemento 1º
<dt>Término 2º
<dt>Término 3º
</dl>
Término 1º
Definición del elemento 1º
Término 2º
Término 3º
rmonago
22

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

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

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

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

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

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

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

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

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>

MAPAS: ATRIBUTOS
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
Un rectangulo de 100 x 100 (X, Y)
0, 0
100, 100
0, 0
100, 100
50, 0
50, 100
X
Y

EJEMPLO DE MAPA
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>

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

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

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

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

<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
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.

ETIQUETAS PARA MARCOS
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">

<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
41

<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
42

ATRIBUTO TARGET
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

FORMULARIOS
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.

FORMULARIOS
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

INPUT
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.

EJEMPLO CHECKBOX
47
<form method="post" action="manejador.php">
<p>Selecciona tus intereses:<br>
<input name="cbipeliculas" type="checkbox“
>Películas<br>
<input name="cbilibros" type="checkbox“ >Libros<br>
<input name="cbiinternet" type="checkbox”>Internet
</p>
</form>

TEXTAREA
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

EJEMPLO TEXTAREA
49
<form method="post" action="manejador.php">
<p>Ingresa tus comentarios:<br>
<textarea name="comentarios" rows="2" cols="30">...Tus comentarios
aquí...</textarea></p>
</form>

SELECT
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

<select name="entradaselect">
<optgroup label="Entradas de texto">
<option>De una sola línea</option>
<option>Contraseña</option>
<option>Multilínea</option>
</optgroup>
<optgroup label="Opciones">
<option>Casillas de verificación</option>
<option>Botones radio</option>
<option>Listas select</option>
</optgroup>
</select>
EJEMPLO SELECT
51

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
52
Opción 1
Opción 2
Opción 3

<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
53

CAPAS
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.

ATRIBUTOS DE LAS CAPAS
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.

EJEMPLO DE CAPA: LAYER
56
<layer id="capa" width="200px" height="115px" z-index="3" visibility="show"
bgcolor="#0099CC" background="imagenes/fondocapa.gif">
Este texto está dentro de una capa.
</layer>

EJEMPLO DE CAPA: DIV
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á dentro de una capa.
</div>

Lenguaje de marcas html

Más contenido relacionado

Destacado (6)

Similar a Lenguaje de marcas html (20)

Más de rmonago (20)

Último (20)

Lenguaje de marcas html