Scribd
Cargar
3 vistas

2. HTML-Parte 2

El documento detalla el uso de tablas HTML, iframes y formularios, explicando cómo organizar información en filas y columnas, así como los atributos y ejemplos de cada elemento. Se abordan las etiquetas <table>, <iframe>, y <form>, junto con sus atributos y ejemplos de implementación. Además, se describen los diferentes tipos de controles en formularios, como cajas de texto, botones de radio y de envío, y listas desplegables.

Cargado por

fenollaredu
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
3 vistas

2. HTML-Parte 2

El documento detalla el uso de tablas HTML, iframes y formularios, explicando cómo organizar información en filas y columnas, así como los atributos y ejemplos de cada elemento. Se abordan las etiquetas <table>, <iframe>, y <form>, junto con sus atributos y ejemplos de implementación. Además, se describen los diferentes tipos de controles en formularios, como cajas de texto, botones de radio y de envío, y listas desplegables.

Cargado por

fenollaredu
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 37

Tema 2: Lenguaje de

marcas HTML (Parte 2)


2.5 Tablas HTML
Permiten organizar la información en
filas y columnas.
◦ Vienen determinadas por la etiqueta
<table>…</table>.
◦ Dentro de la tabla, cada fila está
delimitada por las etiquetas <tr>…</tr>.
◦ Y dentro de la filas, las columnas vienen
delimitadas por las etiquetas
<td>…</td>.
 Dentro de esas columnas es donde se coloca el
texto o imágenes que contiene la celda.
◦ Para poner títulos a las columnas de la
tabla se utiliza la etiqueta <th>…</th>.
2.5 Tablas HTML:
ejemplo
<table border=1>
<tr>
<th>col 1</th><th>col 2</th>
</tr>
<tr>
<td>fila 1-elem 1</td><td>fila 1-elem
2</td>
</tr>
<tr>
<td>fila 2-elem 1</td><td>fila 2-elem
2</td>
</tr>
</table>
2.5.1 Tablas HTML:
Atributos
Atributos Uso
bgcolor=“color” Especifica el color de fondo de la
tabla, fila o celda, dependiendo de
donde se coloque.

bordercolor=“color” Especifica el borde, dependiendo de


donde se coloque.

valign=“valor” Alinea verticalmente el contenido de


las celdas: top (arriba), bottom
(abajo) y middle (centrada)
align=“left|center|right” Alinea el texto, celda o columna

backgroung=“imagen” Permite colocar una imagen de fondo,


url o ruta
cellpadding=“numero” Define en píxeles espacio entre
bordes de la celda y el contenido.
cellspacing=“numero” Define el espacio entre bordes en
pixeles
height=“numero” Define la altura de la tabla en píxeles
o porcentaje
width=“numero” Define la anchura de la tabla en
píxeles o porcentaje
2.5.1 Tablas HTML:
Atributos
Los
atributos COLSPAN y
ROWSPAN combinan celdas:
◦ Para crear una celda que abarque
varias filas o columnas, se deben
colocar en las marcas <th>o<td>
los atributos:
 rowspan=“valor”: Para indicar el
número de filas que se quiere combinar.
 colspan=“valor”: Para indicar el
número de columnas que se quiere
combinar.
2.5.1 Tablas HTML:
Atributos
Ejemplo:

<h3> tabla 1</h3>


<table border=1>

<tr><td>Dato1</td><td>Dato2</td></t
r>
<tr><td
colspan=“2”>Dato3</td></tr>
</table>
2.6 iFrames
Permite dividir un documento
HTML en varias zonas, de forma
que cada una de esas zonas sea
a su vez otro documento HTML.
Anteriormente, se declaraban
con la etiqueta <frameset>, que
debe colocarse antes de la
etiqueta <body>.
Actualmente, esta en desuso y se
utilizan los iframes (con HTML5).
2.6.1 iframes:
Atributos
 src: Para indicar la página web que se
mostrará en el espacio del frame
 width: Para definir la anchura del iframe.
 height: Para definir la altura del iframe.
 name: Para especificar el nombre del frame,
que podemos utilizar luego para referirnos a él
con el target de los links, o mediante
javascript.
 id: Para indicar el identificador del iframe, y
poder referirnos a él desde javascript.
 frameborder: Para definir si queremos o no
que haya un borde en el frame.
◦ frameborder=0: No queremos borde
◦ frameborder=1: Queremos borde
2.6.1 iframes:
Atributos
scrolling: Indica si se quiere que
aparezcan barras de desplazamiento
para ver los contenidos del iframe
completo, en el caso que no
aparezcan en el espacio reservado
para el iframe. Valores posibles:
◦ yes: Para que aparezcan siempre las
barras de desplazamiento o barras de
scroll.
◦ no: Para que no aparezcan nunca
◦ auto: Para que aparezcan sólo cuando
son necesarias (es el valor por defecto)
2.6.1 iframes:
Atributos
 marginwidth: Para definir el margen a
izquierda y derecha que debe tener la página
que va dentro del iframe, con respecto al
borde.
◦ Este margen va en pixels, pero prevalecerá el
margen que pueda tener asignada la página web
que mostremos en el frame flotante.
 marginheight: lo mismo que marginwidth,
pero en este caso para el tamaño del margen
por la parte de arriba y abajo.
 margin: Especifica alineación del frame, igual
que se especifica para las imágenes.
 style y class: Atributos para definir el aspecto
del iframe por medio de hojas de estilo css.
Ejemplo: iframe
<html>
<head>
<title>Iframes</title>
</head>
<body>
<iframe src="form.html" align="left"
width="600" height="400"
scrolling="auto">
Texto alternativo para navegadores que no
aceptan iframes
</iframe>
</body>
</html>
2.7 Formularios
Formados por cajas de texto y botones
que permiten introducir datos.
Muy utilizados para realizar búsquedas,
encuestas o datos personales.
Usando HTML se puede únicamente
enviar el formulario a un correo
electrónico.
◦ Si se quiere procesar el formulario
mediante un programa, es necesario
utilizar otros lenguajes como: php, asp, jsp,
phyton, rubi.
2.7 Formularios
Para definir un formulario se utilizan las
etiquetas <form> y </form>.
Entre estas dos etiquetas se colocan todos
los campos y botones que componen el
formulario.
Dentro de la etiqueta form se deben
especificar unos atributos:
◦ action=“acción a realizar”  Tipo de acción
a llevar a cabo con el formulario
◦ method=“post” ó “get”  Forma de envío
del formulario. Se usa normalmente post.
◦ enctype=“text/plain”  Forma en que viajará
la información que se mande por el formulario.
Si es correo electrónico se pondrá text/plain.
2.7 Formularios
 Ejemplo:

<form action=“mailto:[email protected]”
method=“post” enctype=“text/plain”>
</form>
 Si el formulario no se envía a ningún servidor
para ser procesado escribimos <form
action=“”>
 La mayoría de los controles del formulario se
crean con la etiqueta input.
 Son los siguientes: text, password, radio,
checkbox, submit, image, reset, file y hidden.
 Necesitan el atributo type para indicar el tipo de
control.
 El atributo común a todos es NAME para dar un
nombre al control.
2.7.1 Formularios: Cajas de
texto
En las cajas de texto se manda al servidor
el texto que introduce el usuario.
◦ Ejem: <input type=“text” name=”mi texto”>
Atributos:
◦ Size: Determina la anchura de la caja de texto.
Valor por defecto 20 caracteres.
◦ Maxlength: Limita el nº máximo de caracteres
que se pueden escribir en la caja de texto. Si no
se pone no hay límite.
◦ Value: Especifica un texto que debe aparecer
por defecto en la caja de texto antes de que el
usuario escriba nada.
◦ Title: Muestra un bocadillo especificativo
cuando el usuario pase el cursor por encima del
control.
Formularios: Ejemplo
<html><body>
<h1 align=center”>Prueba de Formulario</h1>
<table align=“center” border=“2” cellpadding=“20”>
<tr><td>
<form><p>
Nombre……<input type=“text” name=“nombre”
size=“25”maxlength=“40”><BR>
Direccion……<input type=“text” name=“dir” size=“20”
maxlength=“30”><BR>
Telefono……<input type=“text” name=“tel” size=“10”
maxlength=“10” value=0>
<BR>
Edad……<input type=“text” name=“edad” size=“3” maxlength=“3”
value=0><BR>
Poblacion……<input type=“text” name=“poblacion” size=“20”
maxlength=“30”
Value=“Talavera”><BR>
</p></form>
2.7.1 Formularios: Cajas de
texto
En ocasiones, puede ser conveniente pedir al
usuario algún tipo de información oculta,
como puede ser una clave de acceso o
password.
Para eso se usa type=”password” en la
etiqueta <input>.
Ejem:

<h2>Formulario de autenticación</h2>
<form>
<p>Introduzca su nombre: <input type=“text”
name=“nombre”></p>
<p>Introduzca su clave: <input type=“password”
name=“clave”></p>
</form>
2.7.2 Formularios: Botones
de elección o Radio Buttons
 Permiten elegir entre un conjunto de opciones, de
las cuales solo se puede elegir una. Para insertar
un botón de elección usaremos de nuevo la
etiqueta INPUT, pero esta vez el valor del atributo
TYPE será radio:
◦ Ejem: <input type=”radio” name=”nombre”>
 Este tipo de controles tiene dos estados:
◦ seleccionado (ON)
◦ no seleccionado (OFF),
 Inicialmente todos están en estado OFF.
 Se puede especificar que un botón determinado
esté seleccionado insertando el atributo CHECKED
en la etiqueta input.
 Ejem: <input type=”radio” checked
name=”nombre”>
2.7.2 Formularios: Botones
de elección o Radio Buttons
Los botones de elección suelen ser insertados en
los formularios en grupos, dando al usuario la
posibilidad de elegir entre una serie de opciones.
Cuando se pulsa sobre un botón de radio, pasa al
estado ON y permanecerá en ese estado hasta
que se pulse en otra opción del mismo grupo.
Para indicar que una serie de botones de elección
pertenecen a un mismo grupo, se debe incluir el
mismo valor en el atributo NAME en todos ellos.
Además, se debe usar el atributo VALUE para dar
un nombre distinto a cada uno de los botones.
2.7.2 Formularios: Botones de
elección o Radio Buttons: Ejemplo I
2.7.2 Formularios: Botones de
elección o Radio Buttons: Ejemplo II)
Resultado ejemplo anterior
(comprobarlo)
2.7.3 Formularios: Cajas de
selección o checkbox
Permiten seleccionar varias opciones de
una lista.
Tienen dos opciones ON y OFF (igual que
los radio buttons).
◦ Inicialmente en OFF (a no ser que hayamos
utilizado el atributo CHECKED).
Cada caja de selección independiente del
resto y, por tanto, el valor del atributo
NAME debe ser diferente para cada una.
Instrucción tipo:
<input type=”checkbox”
name=”nombre”>
2.7.3 Formularios: Cajas de
selección o checkbox
(Ejemplo)
Resultado ejemplo anterior
(comprobarlo)
2.7.4 Formularios: Botones
de envío I
Para crear un botón de envío se
usa: type=”submit”.
Cada vez que se quiera añadir un
botón deberá incluirse la
siguiente etiqueta:
Instrucción tipo:
<input type=”submit”
value=”Texto_del_boton”
name=”nombre”>
2.7.4 Formularios: Botones
de envío II
Lo normal es incluir un único botón de
envío, pero el lenguaje HTML permite
la posibilidad de incluir varios.
En este caso, deberá usarse el
atributo NAME para dar un nombre a
cada uno, que permita al servidor
diferenciar cual se ha pulsado.
◦ Este nombre será enviado junto con los
datos cuando se pulse sobre el botón.
◦ De esta forma es posible realizar acciones
diferentes dependiente de si se pulsa uno
u otro.
2.7.4 Formularios: Botones
de envío (Ejemplo)
Resultado ejemplo anterior
(comprobarlo)
2.7.4 Formularios: Botón de
borrado
Permite borrar los datos actuales de
todos los campos del formulario y
restablecer los valores por defecto, si
es que los había.
Para crear este botón, de nuevo
usaremos la etiqueta INPUT, esta vez
con type=”reset”.
Instrucción tipo:
<input type=”reset”
name=”nombre” value=”texto del
botón”>
2.7.4 Formularios: Botón
genérico I
Ofrece la posibilidad de insertar
un botón que no tiene ninguna
función definida, sino la que se
quiera dar.
Para insertar un botón genérico
usaremos la etiqueta INPUT con
type=”button”.
Instrucción tipo:
<input type=”button”
value=”púlsame”>
2.7.4 Formularios: Botón
genérico II
Las acciones que debe llevar a cabo
este botón al ser pulsado solo pueden
indicarse con lenguaje de script, como
JavaScript, y no con HTML estándar.
Para insertar el código de estos
lenguajes se usa el atributo ONCLICK.
Instrucción tipo:

<input type=”button” value=”texto


del botón” onclick=”código de
script”>
NOTA: La función ONCLICK puede que no
funcione con todos los navegadores.
2.7.4 Formularios: Boton
genérico (Ejemplo)
2.7.5 Etiqueta SELECT
Se puede definir una entrada de
datos en forma de lista desplegable
que presenta varias opciones de
elección, de tal forma que el usuario
puede elegir una o varias de ellas, si
así se especifica.
El atributo más común de SELECT es
NAME: name=”nombre”, que asigna
un nombre identificador al campo, de
tal forma que al enviar los datos del
formulario, la opción elegida será
asociada a este nombre.
2.7.5 Etiqueta SELECT
(Ejemplo)
2.7.6 Etiqueta OPTIONS
Para introducir cada una de las diferentes
opciones de la lista se utiliza la etiqueta
OPTION, que admite como atributos:
◦ Value: Fija el valor que será asociado al
parámetro NAME de SELECT cuando se envíe el
formulario. Este valor debe ser único para cada
opción.
◦ Selected: Establece la opción por defecto. Si
no se especifica este parámetro en ninguna
opción, se tomará la primera de ellas por
defecto.
La anchura de la lista desplegable vendrá
determinada por el número de caracteres
de la opción que más tenga
2.7.6 Etiqueta OPTIONS
(Ejemplo).

También podría gustarte