curso php-my sql-clase-1

“Aplicaciones Web dinámicascon PHP y MySql”

Sergio Gabriel Rodríguez

http://www.3trex.com.ar

• Cronograma del curso• Desarrollo de clases• Prácticos• Exámen final

Introducción

• Físicamente, la Web está compuesta:

¿Cómo funciona la Web?

- Computadora personal

- Un Navegador Web (Software de navegación)

- Computadoras llamadas servidores que albergan

información.

• Arquitectura Cliente-Servidor

• El Cliente (navegador) solicita la url.

• Se establece una conexión con el Servidor.

• El Servidor envía los datos solicitados al Cliente.

• Se pierde la conexión con el Cliente.

• El Cliente (navegador) interpreta y muestra esos datos.


• Máquina Cliente


Navegador web (Internet explorer, Firerox, Safari, etc.)

• Máquina Servidor

Servidor web (Apache, IIS, etc.)

Software que intervienen en el proceso

Lenguaje HTML

• HTML es el metalenguaje utilizado como base para crear

páginas web.

• Está basado en etiquetas (tags)

• Es el lenguaje interpretado por los navegadores para

mostrar las páginas web.

• Escrito en texto plano con extensión htm/html.

• Se creó sin dar respuesta a todos los posibles usos que se

le iba a dar.

• El HTML 4.01 es el último estándar

Estructura HTML

• Los documentos HTML se dividen en tres partes bien diferenciadas:

1. La Cabecera de tipo de documento

La usa el software para saber la versión de HTML que se

está usando (no visible).

2. La Cabecera del documento (document HEADer)

Usada para dar información sobre el documento (no

visible).

3. El Cuerpo del documento (document BODY)

Es la parte principal del documento, la parte que el usuario

ve.

Estructura HTML

• Estas tres partes pueden verse continuación.

<HTML><HEAD>

</HEAD><BODY>

Hola Mundo!

</BODY></HTML>

Estructura HTML

• Mostrar imágenes en el documento

<HEAD><TITLE>Curso de PHP</TITLE>

<HEAD>

• El título del documento se almacena en la cabecera (HEAD)

<IMG SRC=“mi_imagen.jpg”>

• Enlazar a otros documentos HTML

<A HREF=“mi_pagina.html”>Ir a mi página</A>

Ejercicio 1

• Generar dos documentos HTML, pagina1.html y pagina2.html.

• pagina1.html debe contener un texto y un enlace (link) a pagina2.html

• pagina2.html debe contener un texto y una imagen.

HTML: Tablas

• Las tablas son componentes dedicados a mejorar la visualización de datos tabulado.

• Los tags que se utilizan para delimitar una tabla son<TABLE>...</TABLE>.

• Cada fila se especifica con la directiva <TR>...</TR> y, dentro de ella, cada celda se especifica con la directiva <TD>...</TD>

• Las tablas se especificarán siempre por filas; es decir, primero se escribirá la fila 1, despues la fila 2, etc

HTML: Tablas

<TABLE><TR><TD>Fila 1 Columna 1</TD> <TD> Fila 1 Columna 2 </TD></TR><TR><TD>Fila 2 Columna 1</TD> <TD> Fila 2 Columna 2 </TD></TR>

</TABLE>

• Ej.:

• El navegador mostrará:

Fila 1 Columna 1 Fila 1 Columna 2 Fila 2 Columna 1 Fila 2 Columna 2

HTML: Tablas

<TABLE BORDER=“1”><TR><TD COLSPAN=“2”>Fila 1 ocupa 2 columnas</TD></TR><TR><TD>Fila 2 Columna 1</TD> <TD> Fila 2 Columna 2 </TD></TR>

</TABLE>

• Tablas Multicolumnas:

En ocasiones es necesario que una celda se extienda sobre varias columnas, para ello utilizaremos el atributo colspan de la directiva <TD>:


HTML: Tablas

<TABLE BORDER="1"><TR><TD ROWSPAN=2>Celda 1 Ocupa 2 Filas</TD><TD>Fila 1

Columna 2</TD></TR><TR><TD>Fila 2 Columna 2</TD></TR>

</TABLE>

• Tablas Multifilas:

Si deseamos que una celda ocupe varias filas lo especificaremos con el atributo rowspan de la directiva <TD>.


HTML: Atributos de Tablas

• Las tablas pueden ser adicionalmente formateadas a partir de los atributos que nos ofrece la propia etiqueta <table>

align Alinea horizontalmente la tabla con respecto a su

entorno.

bgcolor Da color de fondo a la tabla.

border Define el número de pixels del borde principal.

cellpadding Define, en pixels, el espacio entre los bordes

de la celda y el contenido de la misma.

cellspacing Define el espacio entre los bordes (en pixels).

height Define la altura de la tabla en pixels o porcentaje.

width Define la anchura de la tabla en pixels o porcentaje.

HTML: Atributos de Tablas

• Ej.:

<TABLE border="1" width="100" height="50" bgcolor="#CCCCCC" cellpadding="10"

cellspacing="6">

<TR><TD>Fila 1 Columna 1</TD> <TD> Fila 1 Columna 2 </TD></TR>

<TR><TD>Fila 2 Columna 1</TD> <TD> Fila 2 Columna 2 </TD></TR>

</TABLE>


Ejercicio 2

• Generar un documento HTML, tabla.html con la siguiente estructura:

HTML: Formularios

• Hasta el momento se han presentado características de HTML que

permiten visualizar en el browser documentos y navegar por ellos, aunque

el usuario no tenía posibilidad de interactuar con ellos. El siguiente paso

consiste en definir dicha posibilidad: Los formularios.

• El principio del formulario es bien sencillo: el usuario rellena una serie de

campos y los envía a un programa de tratamiento.

• Los campos pueden ser de diversa naturaleza, como campos de edición,

menús desplegables, listas de opciones, texto, etc.

HTML: Formularios

• Para iniciar un formulario en HTML se utilizará el tag <FORM> ...

</FORM>. Dentro de ella especificaremos todos los campos que

intervienen en el formulario.

• Con <FORM > especificaremos el tratamiento que se realizará con los

campos introducidos por el usuario. Para ello existen dos atributos:

• El atributo METHOD: se especifica la forma de pasar los valores de

los campos al programa de tratamiento. Admite los valores GET Y

POST

• El atributo ACTION: Indicara el nombre del programa de tratamiento.

• Ej. <FORM METHOD= “POST” ACTION=“respuesta.php">... </FORM>

HTML: Formularios

• INPUT: Es una de las directivas que permite especificar algunas clases

de campos de entrada, dependiendo de los atributos asociados:

• El atributo NAME: Indicaremos el nombre asociado al campo de

entrada, debe ser único dentro de un mismo formulario.

•El atributo TYPE: Indicaremos el tipo o clase de campo. Pueden

campos de texto, botones, checkbox, radio, etc.

Ej.: <FORM> <INPUT NAME=nombre SIZE=30>

</FORM>

HTML: Formularios

• Atributo TYPE, los valores que puede tomar son:

• TEXT: <INPUT TYPE=“TEXT” NAME=nombre SIZE=30>

• SUBMIT: <INPUT TYPE=“SUBMIT” VALUE=nombre SIZE=30>

• CHECKBOX:

<INPUT TYPE=checkbox NAME="so" VALUE="msdos">MS-OS

<INPUT TYPE=checkbox NAME="so" VALUE="os2">OS/2

<INPUT TYPE=checkbox NAME="so" VALUE="unix">UNIX

HTML: Formularios

•RADIO:

<input type=radio name="sexo" value="hombre">Hombre

<input type=radio name="sexo" value="mujer">Mujer

• PASSWORD:

<input type=password name="passwd">

• HIDDEN:

<input type=“hidden” name=“oculto“ value=“1”>

No se visualiza

HTML: Formularios

• Directiva SELECT: Se utiliza para definir listas de opciones dentro de un

formulario. El atributo NAME, comentado en la directiva INPUT, se utiliza de la

misma forma. Para especificar cada elemento de la lista u opción se utiliza la

directiva <OPTION> indicando a continuación el texto de la opción.

•Ej.: <SELECT name="pueblo">

<OPTION>Berrueces</OPTION>

<OPTION SELECTED>Ceinos de Campos</OPTION>

<OPTION>Laguna de Duero</OPTION>

<OPTION>Villalón</OPTION>

</SELECT>

Se visualizará:

HTML: Formularios

• Directiva TEXTAREA: Permite crear una zona de texto especificando el

número de filas (atributo ROWS) y de columnas (atributo COLS) de la ventana. Si

se desea especificar un texto, se hará entre la directiva de apertura y la de cierre.

Ejemplo:

<TEXTAREA NAME="opinion" ROWS=5 COLS=60>

Introduzca la opinión de esta introducción a HTML:

</TEXTAREA>

Se visualizará:

Ejercicio 3

• Usando el documento HTML del Ejercicio 2, generar un documento HTML, llamado formulario.html con la siguiente estructura:

• ¿Preguntas?

FIN

curso php-my sql-clase-1

Documents