Curso PHP MySQL Clase 1

Cmo funciona la Web?
Fsicamente, la Web est compuesta:

- Computadora personal - Un Navegador Web (Software de navegacin) - Computadoras llamadas servidores que albergan informacin.

Arquitectura Cliente-Servidor El Cliente (navegador) solicita la url. Se establece una conexin con el Servidor. El Servidor enva los datos solicitados al Cliente. Se pierde la conexin con el Cliente. El Cliente (navegador) interpreta y muestra esos datos.

Software que intervienen en el proceso Mquina Cliente
Navegador web (Internet explorer, Firerox, Safari, etc.)
Mquina Servidor
Servidor web (Apache, IIS, etc.)
Lenguaje HTML
HTML es el metalenguaje utilizado como base para crear pginas web. Est basado en etiquetas (tags) Es el lenguaje interpretado por los navegadores para mostrar las pginas web. Escrito en texto plano con extensin 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 estndar
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 versin de HTML que se est usando (no visible). 2. La Cabecera del documento (document HEADer) Usada para dar informacin 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 continuacin. <HTML> <HEAD> </HEAD> <BODY> Hola Mundo! </BODY> </HTML>
Estructura HTML
El ttulo del documento se almacena en la cabecera (HEAD) <HEAD> <TITLE>Curso de PHP</TITLE> <HEAD> Mostrar imgenes en el documento
<IMG SRC=mi_imagen.jpg> Enlazar a otros documentos HTML <A HREF=mi_pagina.html>Ir a mi pgina</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 visualizacin de datos tabulado. Los tags que se utilizan para delimitar una tabla son
<TABLE>...</TABLE>.
Las tablas se especificarn 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 2 Columna 1
Fila 1 Columna 2 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>
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>
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 nmero 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 caractersticas de HTML que permiten visualizar en el browser documentos y navegar por ellos, aunque el usuario no tena 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 enva a un programa de tratamiento. Los campos pueden ser de diversa naturaleza, como campos de edicin, mens 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 opcin se utiliza la directiva <OPTION> indicando a continuacin el texto de la opcin.
Ej.:
<SELECT name="pueblo"> <OPTION>Berrueces</OPTION> <OPTION SELECTED>Ceinos de Campos</OPTION> <OPTION>Laguna de Duero</OPTION> <OPTION>Villaln</OPTION> </SELECT>
Se visualizar:
HTML: Formularios
Directiva TEXTAREA: Permite crear una zona de texto especificando el
nmero 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 opinin de esta introduccin 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?

Curso PHP MySQL Clase 1

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Curso PHP MySQL Clase 1

Încărcat de

Drepturi de autor:

Formate disponibile

Cmo funciona la Web?

Fsicamente, la Web est compuesta:

Cmo funciona la Web?

Cmo funciona la Web?

<IMG SRC=mi_imagen.jpg> Enlazar a otros documentos HTML <A HREF=mi_pagina.html>Ir a mi pgina</A>

Fila 1 Columna 1 Fila 2 Columna 1

Fila 1 Columna 2 Fila 2 Columna 2

HTML: Atributos de Tablas

HTML: Atributos de Tablas

PASSWORD: <input type=password name="passwd">

HIDDEN: <input type=hidden name=oculto value=1> No se visualiza

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