Sunteți pe pagina 1din 13

“Aplicaciones Web dinámicas

con PHP y MySql”

Sergio Gabriel Rodríguez


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

Introducción

• Cronograma del curso


• Desarrollo de clases
• Prácticos
• Exámen final
¿Cómo funciona la Web?

• Físicamente, la Web está compuesta:


- Computadora personal
- Un Navegador Web (Software de navegación)
- Computadoras llamadas servidores que albergan
información.

¿Cómo funciona la Web?


• 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.
¿Cómo funciona la Web?
Software que intervienen en el proceso
• Máquina Cliente
Navegador web (Internet explorer, Firerox, Safari, etc.)

• Máquina Servidor
Servidor web (Apache, IIS, etc.)

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

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


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

• Mostrar imágenes en el documento


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

• Las tablas se especificarán siempre por filas; es decir,


primero se escribirá la fila 1, despues la fila 2, etc

• Cada fila se especifica con la directiva <TR>...</TR> y,


dentro de ella, cada celda se especifica con la directiva
<TD>...</TD>

HTML: Tablas
• Ej.:

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

• El navegador mostrará:

Fila 1 Columna 1 Fila 1 Columna 2


Fila 2 Columna 1 Fila 2 Columna 2
HTML: Tablas
• Tablas Multicolumnas:

En ocasiones es necesario que una celda se extienda sobre varias


columnas, para ello utilizaremos el atributo colspan de la directiva <TD>:

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

• El navegador mostrará:

HTML: Tablas
• Tablas Multifilas:

Si deseamos que una celda ocupe varias filas lo especificaremos con el


atributo rowspan de la directiva <TD>.

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

• El navegador mostrará:
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>

• El navegador mostrará:
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:

FIN

• ¿Preguntas?

S-ar putea să vă placă și