SlideShare una empresa de Scribd logo
1 de 13
Descargar para leer sin conexión
“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?

Más contenido relacionado

La actualidad más candente

Tutorial Excel
Tutorial ExcelTutorial Excel
Tutorial ExcelDanilo_11
 
La cinta de opciones de Word 2007
La cinta de opciones de Word 2007La cinta de opciones de Word 2007
La cinta de opciones de Word 2007walter
 
INFORMATICA - TEMA 10 ACCESS AVANZADO - FP A DISTANCIA ANDALUCIA - GRADO SUPE...
INFORMATICA - TEMA 10 ACCESS AVANZADO - FP A DISTANCIA ANDALUCIA - GRADO SUPE...INFORMATICA - TEMA 10 ACCESS AVANZADO - FP A DISTANCIA ANDALUCIA - GRADO SUPE...
INFORMATICA - TEMA 10 ACCESS AVANZADO - FP A DISTANCIA ANDALUCIA - GRADO SUPE...Alex Lolol
 
Cinta de opciones word 2007
Cinta de opciones word 2007Cinta de opciones word 2007
Cinta de opciones word 2007Fernando Sanchez
 
Descripcion del entorno de trabajo rosalba otavo
Descripcion del entorno de trabajo rosalba otavoDescripcion del entorno de trabajo rosalba otavo
Descripcion del entorno de trabajo rosalba otavorosalba otavo loaiza
 
Nuevo presentación de microsoft power point (1)
Nuevo presentación de microsoft power point (1)Nuevo presentación de microsoft power point (1)
Nuevo presentación de microsoft power point (1)KarenCoronel
 
Reconocimiento del ambiente de trabajopdf
Reconocimiento del ambiente de trabajopdfReconocimiento del ambiente de trabajopdf
Reconocimiento del ambiente de trabajopdfRocioGutierrez1993
 
Informatica grupo 2 seccion g
Informatica grupo 2 seccion gInformatica grupo 2 seccion g
Informatica grupo 2 seccion gMoises Parra
 
Biblia De Access 2007
Biblia De Access 2007Biblia De Access 2007
Biblia De Access 2007sixpol
 
Ambiente de trabajo de word 2010
Ambiente de trabajo de word 2010Ambiente de trabajo de word 2010
Ambiente de trabajo de word 2010lexray_01
 
Manual para bases de datos
Manual para bases de datosManual para bases de datos
Manual para bases de datossaoriiih
 

La actualidad más candente (19)

Excel 2007
Excel 2007Excel 2007
Excel 2007
 
Tarea 4
Tarea 4Tarea 4
Tarea 4
 
Tutorial Excel
Tutorial ExcelTutorial Excel
Tutorial Excel
 
La cinta de opciones de Word 2007
La cinta de opciones de Word 2007La cinta de opciones de Word 2007
La cinta de opciones de Word 2007
 
INFORMATICA - TEMA 10 ACCESS AVANZADO - FP A DISTANCIA ANDALUCIA - GRADO SUPE...
INFORMATICA - TEMA 10 ACCESS AVANZADO - FP A DISTANCIA ANDALUCIA - GRADO SUPE...INFORMATICA - TEMA 10 ACCESS AVANZADO - FP A DISTANCIA ANDALUCIA - GRADO SUPE...
INFORMATICA - TEMA 10 ACCESS AVANZADO - FP A DISTANCIA ANDALUCIA - GRADO SUPE...
 
Cinta de opciones word 2007
Cinta de opciones word 2007Cinta de opciones word 2007
Cinta de opciones word 2007
 
Descripcion del entorno de trabajo rosalba otavo
Descripcion del entorno de trabajo rosalba otavoDescripcion del entorno de trabajo rosalba otavo
Descripcion del entorno de trabajo rosalba otavo
 
Programacion en html
Programacion en htmlProgramacion en html
Programacion en html
 
Nuevo presentación de microsoft power point (1)
Nuevo presentación de microsoft power point (1)Nuevo presentación de microsoft power point (1)
Nuevo presentación de microsoft power point (1)
 
Pantalla de excel y sus elementos
Pantalla de excel y sus elementosPantalla de excel y sus elementos
Pantalla de excel y sus elementos
 
Tablas y campos
Tablas y camposTablas y campos
Tablas y campos
 
Access 2010
Access 2010Access 2010
Access 2010
 
Reconocimiento del ambiente de trabajopdf
Reconocimiento del ambiente de trabajopdfReconocimiento del ambiente de trabajopdf
Reconocimiento del ambiente de trabajopdf
 
Informatica grupo 2 seccion g
Informatica grupo 2 seccion gInformatica grupo 2 seccion g
Informatica grupo 2 seccion g
 
Biblia De Access 2007
Biblia De Access 2007Biblia De Access 2007
Biblia De Access 2007
 
Pract nº 01_word_2007
Pract nº 01_word_2007Pract nº 01_word_2007
Pract nº 01_word_2007
 
Ambiente de trabajo de word 2010
Ambiente de trabajo de word 2010Ambiente de trabajo de word 2010
Ambiente de trabajo de word 2010
 
Manuales
ManualesManuales
Manuales
 
Manual para bases de datos
Manual para bases de datosManual para bases de datos
Manual para bases de datos
 

Destacado (20)

Ay Petri Price List
Ay Petri Price ListAy Petri Price List
Ay Petri Price List
 
Pedagoginen piristys 15.1.15
Pedagoginen piristys 15.1.15Pedagoginen piristys 15.1.15
Pedagoginen piristys 15.1.15
 
Nagota
NagotaNagota
Nagota
 
Présentation leBel communication
Présentation leBel communicationPrésentation leBel communication
Présentation leBel communication
 
gif水波動畫製作
gif水波動畫製作gif水波動畫製作
gif水波動畫製作
 
The woodlands water way
The woodlands water wayThe woodlands water way
The woodlands water way
 
Teide
TeideTeide
Teide
 
Chude3 nhom12
Chude3 nhom12Chude3 nhom12
Chude3 nhom12
 
Kytyzoff ed
Kytyzoff edKytyzoff ed
Kytyzoff ed
 
Ge 1 luku_15_pp
Ge 1 luku_15_ppGe 1 luku_15_pp
Ge 1 luku_15_pp
 
Video conferencia skipe
Video conferencia skipeVideo conferencia skipe
Video conferencia skipe
 
Modelo OSI
Modelo OSIModelo OSI
Modelo OSI
 
Lake of lotus (35) the profound abstruseness of life and death-the meaning of...
Lake of lotus (35) the profound abstruseness of life and death-the meaning of...Lake of lotus (35) the profound abstruseness of life and death-the meaning of...
Lake of lotus (35) the profound abstruseness of life and death-the meaning of...
 
Lake Washington
Lake WashingtonLake Washington
Lake Washington
 
Comeniusmatka Iasiin
Comeniusmatka IasiinComeniusmatka Iasiin
Comeniusmatka Iasiin
 
123
123123
123
 
Gui nguoi ban_quy_(1)_2
Gui nguoi ban_quy_(1)_2Gui nguoi ban_quy_(1)_2
Gui nguoi ban_quy_(1)_2
 
Antonio maria cafe com leite
Antonio maria cafe com leiteAntonio maria cafe com leite
Antonio maria cafe com leite
 
Wily technology upload
Wily technology uploadWily technology upload
Wily technology upload
 
Truyen hai ngam ma cuoi 10
Truyen hai ngam ma cuoi 10Truyen hai ngam ma cuoi 10
Truyen hai ngam ma cuoi 10
 

Similar a Aplicaciones Web dinámicas con PHP y MySQL

Similar a Aplicaciones Web dinámicas con PHP y MySQL (20)

Taller Wordpress Nivel II
Taller Wordpress Nivel IITaller Wordpress Nivel II
Taller Wordpress Nivel II
 
Clase 1 Plataforma introducción a Diseño Web
Clase 1 Plataforma introducción a Diseño WebClase 1 Plataforma introducción a Diseño Web
Clase 1 Plataforma introducción a Diseño Web
 
Formularios y Validaciones
Formularios y ValidacionesFormularios y Validaciones
Formularios y Validaciones
 
Introducción HTML y CSS
Introducción HTML y CSSIntroducción HTML y CSS
Introducción HTML y CSS
 
jonathan javier gonzalez becerra 4101
jonathan javier gonzalez becerra 4101jonathan javier gonzalez becerra 4101
jonathan javier gonzalez becerra 4101
 
HTML
HTMLHTML
HTML
 
Dispositivas CURSO HTML 5.pdf
Dispositivas CURSO HTML 5.pdfDispositivas CURSO HTML 5.pdf
Dispositivas CURSO HTML 5.pdf
 
HTML: Una introducción.
HTML: Una introducción.HTML: Una introducción.
HTML: Una introducción.
 
Htm ltlalti
Htm ltlaltiHtm ltlalti
Htm ltlalti
 
Clase1
Clase1Clase1
Clase1
 
Html
HtmlHtml
Html
 
Html, Css y JavaScript
Html, Css y JavaScriptHtml, Css y JavaScript
Html, Css y JavaScript
 
1. introduccion al desarrollo web php parte 1
1.  introduccion al desarrollo web php parte 11.  introduccion al desarrollo web php parte 1
1. introduccion al desarrollo web php parte 1
 
HTML.ppt
HTML.pptHTML.ppt
HTML.ppt
 
Presentación de html, css y javascript.
Presentación  de html, css y javascript.Presentación  de html, css y javascript.
Presentación de html, css y javascript.
 
Tipo
TipoTipo
Tipo
 
Guia html
Guia htmlGuia html
Guia html
 
Tecnologia Web - HTML
Tecnologia Web - HTMLTecnologia Web - HTML
Tecnologia Web - HTML
 
Frames-Formularios
Frames-FormulariosFrames-Formularios
Frames-Formularios
 
Html-CSS
Html-CSSHtml-CSS
Html-CSS
 

Más de Juan Carlos Catura Arapa (10)

6. FORMATO DE PROGRAMACIONES SUGERIDOS.docx
6. FORMATO DE PROGRAMACIONES SUGERIDOS.docx6. FORMATO DE PROGRAMACIONES SUGERIDOS.docx
6. FORMATO DE PROGRAMACIONES SUGERIDOS.docx
 
Plan de Trabajo Policia Escolar.pdf
Plan de Trabajo Policia Escolar.pdfPlan de Trabajo Policia Escolar.pdf
Plan de Trabajo Policia Escolar.pdf
 
Test de proust
Test de proustTest de proust
Test de proust
 
Propuesta tesis
Propuesta tesisPropuesta tesis
Propuesta tesis
 
Diapositiva interactiva seres vivos e inertes
Diapositiva interactiva seres vivos e inertesDiapositiva interactiva seres vivos e inertes
Diapositiva interactiva seres vivos e inertes
 
Evaluación unidad informatica e internet
Evaluación unidad informatica e internetEvaluación unidad informatica e internet
Evaluación unidad informatica e internet
 
Curso php-my sql-clase-1
Curso php-my sql-clase-1Curso php-my sql-clase-1
Curso php-my sql-clase-1
 
Curso php-my sql-clase-4
Curso php-my sql-clase-4Curso php-my sql-clase-4
Curso php-my sql-clase-4
 
Curso php-my sql-clase-2
Curso php-my sql-clase-2Curso php-my sql-clase-2
Curso php-my sql-clase-2
 
Curso php-my sql-clase-3
Curso php-my sql-clase-3Curso php-my sql-clase-3
Curso php-my sql-clase-3
 

Aplicaciones Web dinámicas con PHP y MySQL

  • 1. “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
  • 2. ¿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.
  • 3. ¿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
  • 4. 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>
  • 5. 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.
  • 6. 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
  • 7. 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á:
  • 8. 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á:
  • 9. 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.
  • 10. 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>
  • 11. 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
  • 12. 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á:
  • 13. Ejercicio 3 • Usando el documento HTML del Ejercicio 2, generar un documento HTML, llamado formulario.html con la siguiente estructura: FIN • ¿Preguntas?