Clase 2 - Electivo I

1. ELECTIVO I
APLICACIONES WEB
TEMA: FUNDAMENTOS DE HTML
(PARTE 2)
Profesor: Heber Gómez Hurtado

2. Tablas
 Nos permiten realizar la ubicación
de elementos en la página Web
 En muchos casos es la única
manera que tenemos de
asegurarnos de que la página Web
tiene una determinada disposición
 En muchos casos el diseño de las
páginas está basado en tablas

3. Tablas (II)
<table>
<tr>
<td>celda 1</td>
<td>celda 2</td>
</tr>
<tr>
<td>celda 3</td>
<td>celda 4</td>
</tr>
</table>

4. Etiqueta table
 <table></table>
 Pueden anidarse tablas
 Atributos
 Border: tamaño del borde en pixels
 Width: ancho de la tabla (en pixels o en tanto por
ciento)
 Height: alto de la tabla (en pixels o en tanto por
ciento)
 Cellspacing: espacio entre celdas (por defecto es 2)
 Cellpadding: espacio entre el borde y contenido de
las celdas (por defecto es 1)
 Align: alinea la tabla a izquierda (left), derecha
(right) o centro (center)

5. Etiqueta tr
 Se refiere a cada una de las filas de
la tabla
 Atributos
 Width: ancho de la fila
 Height: alto de la fila
 Align: alineación horizontal
 Valign: alineación vertical
 Bgcolor: color de fondo

6. Etiqueta td
 Se refiere a cada una de las
columnas de cada fila
 Se identifica con cada una de las
celdas de la fila
 Atributos
 Los mismo que tr
 Colspan: número de columnas que
abarca

7. Otras etiquetas
 Se puede usar la etiqueta th que resalta en negrita su
contenido, suele usarse como encabezado de la tabla
<table>
<tr>
<th>Titulo 1</th>
<th>Titulo 2</th>
<tr>
<tr>
<td>celda 1</td>
<td>celda 2</td>
</tr>
<tr>
<td>celda 3</td>
<td>celda 4</td>
</tr>
</table>

8. Diseño de paginas web
 Como ya hemos dicho, podemos
usar tablas para diseñar nuestras
paginas web
 Primero debemos realizar un boceto
de la estructura que queremos que
tenga
 Después adecuaremos la estructura
a una tabla

9. Diseño páginas Web
 Para ajustar la tabla a la página
Web usamos nuevos atributos en la
etiqueta body
 Márgenes de la página
 Leftmargin
 Topmargin
 Rightmargin
 Bottommargin

10. Marcos
 Los marcos HTML permiten presentar
documentos con vistas múltiples, que
pueden ser ventanas o subventanas
independientes.
 Por ejemplo, dentro de una misma
ventana, un marco podría mostrar un
gráfico estático, un segundo marco un
menú de navegación, y un tercero el
documento principal que puede ser
desplazado, o reemplazado al navegar por
el segundo marco.

11. Marcos (II)
 División ventana en regiones que
son ventanas.
 <FRAMESET> ...</FRAMESET>
 Border
 <FRAME>
 NORESIZE
 SCROLLING
 <a href="" Target="">...</a>

12. Frames (III)
 Valores predefinidos para TARGET
_self
_blank
_parent
_top

13. Formularios
 Los formularios nos permiten tomar
datos por parte del cliente
 Un formulario puede contener
diferentes estructuras
 No aporta medios de validación de
los datos, sólo se centra en el
diseño de los mismos

14. Etiquetas de un formulario
 Un formulario se define mediante la
etiqueta form
<form action=“mailto:direccion@correo”
method=“post” enctype=“text/plain”>
…
</form>

15. Etiquetas de formulario (II)
 Atributo action: nos indica a dónde
van a enviarse los datos
 Pueden enviarse por correo
 Pueden enviarse a una página web activa
 Atributo method: modo en el que se
van a enviar los datos (post, get)
 Método
 POST: sin limitación de datos, mensaje
más largo.
 GET: limitación de datos, transacción
más sencilla.

16. Campos de entrada
 Etiqueta input <input type=“…” …>
 Tipo de dato a introducir (type)
 Text
 Name: nombre del campo
 Maxlenght: numero máximo de caracteres
 Size: tamaño que se mostrará en pantalla
 Value: valor inicial
 Password
 Name: nombre del campo

17. Campos de entrada II
 Checkbox: es una caja de selección.
 Name: nombre del campo
 Value: valor por defecto
 Checked: por defecto aparecerá seleccionada
 Radio: varias opciones para seleccionar. Sólo se
puede tomar una de las opciones
 Name: nombre del campo. ATENCION: el nombre
es el mismo para un grupo.
 Value: valor del campo al ser seleccionado
 Checked: por defecto aparece seleccionado

18. Campos de entrada III
 Hidden: variable oculta, no se
mostrará por el navegador
 Botones
 Submit: enviar
 Reset: resetear el formulario

19. Áreas de texto
 Permite la inserción de texto
<textarea name=“…”…></textarea>
 Name: nombre del campo
 Cols: número de columnas
 Rows: número de filas

20. Desplegable de selección
 Permite seleccionar entre varias
opciones
<select name=“…” …>
<option>opcion 1</option>
<option>opcion 2</option>
…
</select>

21. Desplegable de selección II
 Etiqueta select
 Name: nombre
 Size: elementos visibles
 Multiple: permite la selección multiple
 Etiqueta option
 Value: valor
 Selected: seleccionada por defecto

22. Actividad 02
 Mejorar el sitio web personal, usando
marcos:
 Formularios
 Marcos
 Elementos multimedia