You are on page 1of 23

PROGRAMACIÓN WEB

Y PHP

INSTRUCTOR
Enrique Ivan León Monterrosas.
Programación WEB y PHP

4/27/16

Centro de Investigación en Computación

2

Contenido
HTML
Desarrollo web con dreamweaver.
Configuración WAMP
Introducción a PHP
Formularios PHP
Sesiones PHP
Evaluación
Contenido

4/27/16

Centro de Investigación en Computación

Centro de Investigación en Computación 4/27/16 .3 Tecnologías WEB.

w3.4 Arquitectura y tecnologías.org/ Centro de Investigación en Computación 4/27/16 . https://validator.

5 Request HTTP Centro de Investigación en Computación 4/27/16 .

6 ¿Que es HTML? • HyperText Markup Language. el navegador web interpreta y presenta la visualización del sitio web • Estandares HTML 4. 4/27/16 • Centro de Investigación en Computación Estándar (WC3)   . • Es un lenguaje para describir la estructura de una pagina web • HTML es solo texto. • Basado en etiquetas.01 y HTML 5.

7 Sintaxis HTML Centro de Investigación en Computación 4/27/16 .

w3.Estructura de un documento HTML 8 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.dtd"> <html> <head> <Mi primer documento HTML</TITLE> </head> <body> <h1>Titulo de mi primer pagina</h1> <P>Hello world! </body> </html> Centro de Investigación en Computación 4/27/16 .org/TR/html4/strict.

org/TR/html4/strict.dtd"> HTML 4.01 Frameset//EN" "http://www.dtd"> 4/27/16 Centro de Investigación en Computación .org/TR/html4/frameset.dtd"> XHTML 1.01 Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.w3.0 Strict//EN" "http://www.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.Estructura de un documento HTML doctype 9 HTML 5 <!DOCTYPE html> HTML 4.w3.w3.01//EN" "http://www.org/TR/xhtml1/DTD/xhtml1-strict.w3.org/TR/html4/loose.dtd"> HTML 4.01 Transitional//EN" "http://www.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.

<meta>.com/fuentes. <script>. <title>. <link>.virtualnauta.com/calculos/calculos.css" type="text/css" rel="stylesheet"> <meta name="description" content=“estructura HTML"> <style type="text/css"> p {color:blue} h1 {color:red} </style> <script type="text/javascript" src="http://misitio.susitio. <HEAD> <title>Mi primer documento HTML</title> <base href="http://www.Estructura de un documento HTML Header 10 De acuerdo a los estándares de HTML solo un número reducido de etiquetas pueden incluirse en la sección head: <base> . <style>.js"> </HEAD> </script> Centro de Investigación en Computación 4/27/16 .com/imagenes/"> <link href="http://www.

org/TR/html4/strict.01//ES" "http://www. </script> </head> <body> <h1>Titulo de mi primer pagina</h1> <P>Hello world! </body> </html> Centro de Investigación en Computación 4/27/16 .w3.dtd"> <html> <head> <title>Mi primer documento HTML</title> <meta name="description" content=“estructura HTML"> <style type="text/css"> p {color:blue} h1 {color:red} </style> <script type="text/javascript"> alert("Hello world").Mi primer pagina HTML 11 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.

. Se suele implementar dejando márgenes tanto a izquierda como a la derecha.. Representa el texto encerrado en ella con un tipo de letra fijo. align="left">.. <div derecha (RIGHT). > <blockquote>.</pre> Utilidad Sirve para delimitar un párrafo. Muy útil a la hora de escribir un párrafo. al centro (CENTER) o a ambos márgenes (JUSTIFY ).. Sirve para saltar a otra línea..</center> <pre>...</adderess Para escribir direcciones (de esas donde vive la gente.<div> <address>. no electrónicas).12 Formateo básico Etiqueta <p> <br> <center>. Permite justificar el texto del párrafo a la izquierda (ALIGN=LEFT)..</block quote> La razón por la que se usa es para citar un texto.. Centro de Investigación en Computación 4/27/16 . Inserta una línea en blanco antes del texto. Permite centrar todo el texto del párrafo..

<tt>…</tt> Permite reperesentar el texto en un tipo de letra fija más pequeño.</small> Disminuye el tamaño del tipo de letra. <i>…</i> Representa el texto en cursiva. <s>…</s> Para tachar.</big> Incrementa el tamaño del tipo de letra.. <sup>…</sup> Letra superindice. Centro de Investigación en Computación 4/27/16 . <u>…</u> Permite subrayar algo. <sub>…</sub> Letra subindice. <blink>…</blink> Hace parpadear el texto..13 Tipos de letra Etiqueta Utilidad <b>…</b> Pone el texto en negritas. <big>. <small>.

<hr> Inserta un barra horizontal <br> Salto de línea.….14 Tamaño de letra y otros elementos relevantes Etiqueta Utilidad Modifica el tamaño de la letra dependiendo de su importancia <h1> es <h1>…</h1> …….. <!-. --> Inserta un comentario Centro de Investigación en Computación 4/27/16 . <h6> … el mas importante (mas grande) y el <h6> es el menos importante </h6> (mas pequeño).

&gt. é. &Ntilde. .15 Caracteres extendidos y caracteres de control en HTML Código &aacute. &amp &quot < > & " Centro de Investigación en Computación 4/27/16 . . &eacute. &Eacute.ñ &iquest. . $Aacute. &ntilde. ¿ &iexcl.. espacio en blanco CARACTERES DE CONTROL &lt. Ñ. .Á. ! &nbsp. É …. Resultado á.

16 Enlaces y anclas <a href="http://www.cic.mx”>Enlace hacia el sitio del CICIPN </a> Atributo Valor Descripcion download filename Especifica al navegador que realiza la descarga del archivo al que apunta href URL Especifica la URL del archivo hreflang language_code Especifica el lenguaje del archivo que enlaza (ES)   target   _blank _parent _self _top framename media_type Specifies the name of an anchor Especifica como abrir el enlace type Especifica el tipo de archivo que enlaza Centro de Investigación en Computación 4/27/16 .ipn.

17 Listas Listas desordenadas <UL> <LI>Primer elemento <LI>Segundo elemento </UL> Listas ordenadas por números <OL> <LI>Primer elemento <LI>Segundo elemento <OL> Centro de Investigación en Computación 4/27/16 .

18 Listas ordenadas Centro de Investigación en Computación 4/27/16 .

19 Listas desordenadas Centro de Investigación en Computación 4/27/16 .

bottom Alinea el punto más bajo de la imagen con la base del texto.jpg" alt=“imagen de prueba" height=“200" width=“100"> Atributo align Valor Description top Coloca el punto más alto de la imagen coincidiendo con más alto de la línea de texto actual. Centro de Investigación en Computación 4/27/16 .20 Imágenes <img src=“imagen. Coloca la imagen a la izquierda del texto. imagen con la base del texto. middle left right Coloca la imagen a la derecha del texto.

vspace pixels Especifica el espacio en blanco arriba y debajo de la imagen width pixels Especifica el ancho de la imagen Centro de Investigación en Computación 4/27/16 . border pixels height hspace pixels pixels src URL Especifica la URL de la imagen.21 Imágenes Atributo alt Valor text Description Especifica un texto a mostrar si no se puede cargar la imagen Especifica el ancho del borde de la imagen Especifica el alto de la imagen Especifica el espacio en blanco a la derecha e izquierda de la imagen.

22 Ejercicio Centro de Investigación en Computación 4/27/16 .

ipn.23 ¡Muchas Gracias! Enrique Iván León Monterrosas eleon@cic.mx Centro de Investigación en Computación 4/27/16 .