Curso de PHP y MySql. La Primera Clase se inicia con HTML

1. Ing. Eddye Sánchez Castillo

2. PHP es un lenguaje de programación
interpretado, diseñado originalmente para la
creación de páginas web dinámicas.
PHP es un acrónimo recursivo, que significa “PHP
Hypertext Pre-processor” (inicialmente PHP
Tools, o, Personal Home Page Tools).
Fue creado originalmente por Rasmus Lerdof en
1994; sin embargo la implementación principal
de PHP es producida ahora por The PHP Group y
sirve como el estándar. Publicado bajo licencia
como software libre.
PHP es un lenguaje interpretado de propósito
general ampliamente usado y que está diseñado
especialmente para desarrollo web y puede ser
embebido dentro de código HTML.

3. Un lenguaje que puede ser utilizado para controlar el
comportamiento de una máquina, especialmente una
computadora. Consiste en un conjunto de símbolos y reglas
sintácticas y semánticas que definen su estructura y el significado
de sus elementos y expresiones.
Un lenguaje de programación permite especificar de manera
precisa: sobre que datos una computadora debe operar, como
deben ser estos almacenados y transmitidos y que acciones debe
tomas bajo una variada gama de circunstancias.
El programador es el encargado de utilizar un lenguaje de
programación para crear un conjunto de instrucciones que, al
final, constituirá un programa o subprograma informático.
Un lenguaje informático es un lenguaje usado por ordenadores.
Muchas veces, este término es usado como sinónimo de lenguaje
de programación, pero un lenguaje informático no tiene por qué
ser un lenguaje de programación.
Como ejemplo un LENGUAJE DE MARCAS como el HTML no es un
lenguaje de programación, pero sí es un lenguaje informático.
El lenguaje de programación es el medio que utilizan los
programadores para crear un programa de ordenador.
Un lenguaje de marcas es el medio para describir a un ordenador
el formato o la estructura de un documento; etc.

4. Un acrónimo puede ser una sigla que se lee como una palabra
(“SUNAT”) o un vocablo formado al unir parte de dos palabras.
Por lo tanto el significado de un acrónimo, es la suma de los
significados de las palabras que lo forman:
SUNAT SUperintendencia Nacional de Administración Tributaria
MERCOSUR MERcado Comun del SUR
TELEMATICA TELEcomunicaciones InforMATICA

5. Es un lenguaje de programación que fue diseñado para ser ejecutado por medio de un
interprete, que analiza el programa fuente y lo ejecuta directamente, sin generar ningún
código equivalente.
Un intérprete facilita la búsqueda de errores, pues la ejecución de un programa puede
interrumpirse en cualquier momento para estudiar el entorno (valores de las
variables, etc.). Además, el programa puede modificarse sobre la marcha, sin necesidad de
volver a comenzar la ejecución.
Los programas interpretados suelen ser mas lentos , debido a la necesidad de traducir el
programa mientras se ejecuta.
Su acción equivale a la de un intérprete humano, que traduce las frases que oye sobre la
marcha, sin producir ningún escrito permanente.

6. Es un termino un tanto impreciso para referirse a un lenguaje de programación que
típicamente se implementa mediante un compilador.
Un compilador suele generar programas más rápidos y eficientes, ya que el análisis del
lenguaje fuente se hace una sola vez, durante la generación del programa equivalente.
Los lenguajes compilados son un lenguaje de alto nivel en lo que las instrucciones
traducen del lenguaje utilizado a código de maquina para una ejecución rápida.
Un compilador suele generar programas más rápidos y eficientes, ya que el análisis del
lenguaje fuente se hace una sola vez, durante la generación del programa equivalente. En
cambio, un intérprete se ve obligado generalmente a analizar cada instrucción tantas veces
como se ejecute (incluso miles o millones de veces).
Su acción equivale a la de un traductor humano, que toma un libro y produce otro
equivalente escrito en otra lengua.

7. Un lenguaje de script es un pequeño lenguaje de programación cuyo código se inserta
dentro del documento HTML.
Este código se ejecuta en el navegador del usuario al cargar la página, o cuando sucede
algo especial como puede ser el pulsar sobre un enlace.
Estos lenguajes permiten variar dinámicamente el contenido del documento, modificar el
comportamiento normal del navegador, validar formularios, realizar pequeños trucos
visuales, etc... Sin embargo, conviene recordar que se ejecutan en el navegador del usuario
y no en la máquina donde estén alojadas, por lo que no podrán realizar cosas como
manejar bases de datos.
El primer lenguaje de script que vio la luz fue el JavaScript de Netscape

8. Lo que se puede hacer con PHP es básicamente:
 Trabajar con formularios, como su procesamiento y manejo dinámico
 Generar páginas con contenido dinámico (interactuar con el usuario)
 Mandar o recibir cookies
 Trabajar con una gran cantidad de Base de Datos, lo cual lo hace un
programa verdaderamente potente.
 Si lo juntamos con MYSQL, nuestros recursos salen literalmente
“GRATIS”.

9. Es importante tener instalado 3 programas que darán inicio para el
diseño y uso de las páginas Web dinámicas:
PROGRAMA PHP
PHP es un lenguaje de programación
usado normalmente para la creación
de paginas Web dinámicas.
APACHE
El servidor HTTP Apache es un
software libre para plataformas
Unix, Windows, Macintosh y otras.
MySQL
Es un sistema de Gestión de Base de
Datos relacional multiusuario, es un
software libre.

10. Hoy en día existen varios programas que se pueden bajar
gratuitamente desde Internet, pero 2 son mas utilizados:
1. AppServ:
Appserv es una herramienta OpenSource para Windows que facilita la
instalación de Apache, MySQL y PHP en la cual estas aplicaciones se
configuran en forma automática.
Como extra incorpora phpMyAdmin para el manejo de MySQL.
http://www.appservnetwork.com/index.php
http://appserv.programas-gratis.net/
2. XAMPP:
XAMPP es un servidor independiente de plataforma, software libre, que
consiste principalmente en la base de datos MySQL, el servidor web Apache
y los intérpretes para lenguajes de script: PHP y Perl. El nombre proviene del
acrónimo de X (para cualquiera de los diferentes sistemas
operativos), Apache, MySQL, PHP, Perl.
http://www.utilidades-utiles.com/descargar-xampp.html

15. Es muy importante para iniciar el proceso de instalación
de paginas web.
Con HTML veremos las herramientas necesarias que
necesita PHP con MYSQL para generar paginas estáticas y
dinámicas.
HTML:
Significa Hyper Text Markup Language (Lenguaje de
Marcación de Hiper Texto) y permite la creación de
paginas web.
Este lenguaje se basa en tags que son instrucciones para
indicar como se mostrara el texto y atributos que son los
valores que se le puede asignar a los tag.

16. La creación de un documento o pagina web con HTML
requiere de la siguiente estructura:
Toda pagina web que se cree con HTML debe empezar con
la etiqueta <HTML> y terminar con </HTML>

17. Los editores son los programas donde se pueden escribir
las instrucciones para crear las paginas Web.
Un editor es el Bloc de Notas de Windows
Sin importar el
editor que
utilice, siempre
debe grabar
documentos HTML
con la extensión
HTM o HTML
Otro editor que se puede utilizar es Dreamweaver.

18. El ejemplo Nº 01 se ha escrito en bloc de notas y se ha
grabado con el nombre e Primera.html

19. Al grabar el archivo en la carpeta PRACTICA, dentro de mis
documentos, se observara el archivo con el logo
respectivo del navegador.

20. El cuerpo de un documento empieza con la etiqueta
<BODY> y termina con </BODY>.
Observe que se ha dejado varios espacios en blanco y
todo el texto se ha escrito en 3 líneas.

21. Sin embargo cuando se muestra el contenido de la pagina
el texto ocupa una sola línea.

22. En HTML se pueden usar secuencias de caracteres o
etiquetas para el tratamiento de lo textos que se desean
mostrar en una pagina web y se explican a continuación:
&nbsp:
Permite dejar más de un espacio en blanco entre palabras.
<P>:
Se utiliza para realizar un salto de párrafo, a diferencia del
salto de línea <BR>, el salto de párrafo deja una línea en
blanco.

23. Los comentarios son textos que se pueden insertar dentro
de un documento HTML con la finalidad de ir explicando la
forma como se va desarrollando la pagina web.
También se utiliza para indicar el nombre de la persona
que diseño la pagina así como la fecha y otros datos que
se crean convenientes.
Los comentarios de un documento HTML se escriben
utilizando la siguiente sintaxis:
<!- Texto del comentario ->

24. La etiqueta desde <H1> </H1> hasta <H6> </H6> permite asignar
títulos dentro de una pagina web. Podemos usar el atributo Aling
para alinear el titulo a la Derecha (Right), Izquierda (Left) o Centro
(Center). <HTML>
<HEAD>
<TITLE> Mi primera Pagina Web </TITLE>
</HEAD>
<BODY>
<H1 Align=Center> Esto es un titulo Nº 1 </H1>
<H2 Align=Right> Esto es un titulo Nº 1 </H2>
<H3> Esto es un titulo Nº 1 </H3>
<H4 Align=Left> Esto es un titulo Nº 1 </H4>
<H5> Esto es un titulo Nº 1 </H5>
<H6> Esto es un titulo Nº 1 </H6>
</BODY>
</HTML>

25. La etiqueta desde <H1> </H1> hasta <H6> </H6> permite
asignar títulos dentro de una pagina web.

26. La etiqueta <HR> permite dibujar una línea horizontal y
al mismo tiempo realiza un salto de párrafo.
La etiqueta <HR> acepta los siguientes parámetros:
Align: para alinear la línea horizontal.
Size: Se utiliza para asignar un grosor de la línea.
Noshade: Para indicar que la línea no tenga sombra
Width: Se utiliza para indicar el ancho de la línea.

28. Existe la etiqueta <FONT> </FONT> cuyos parámetros
permiten asignar tipos y tamaños de letras así como
colores:
Size:
Permite establecer el tamaño de la letra mediante un
numero que varia de 1 a 7. El valor predeterminado es 3.
Face:
Permite establecer el tipo de letra.
Color:
Permite asignarle colores a las letras.

29. Sintaxis:
Size:
<FONT> SIZE=6> Este es un ejemplo de tamaño de letra
</FONT>
Face:
<FONT FACE=“Arial”>El tipo de Letra</FONT>
Color:
<FONT COLOR=“Red”>La letra es de color Rojo</FONT>
<FONT COLOR=#FF0000>La letra es de color Rojo</FONT>

33. También se permite asignar ciertos estilos de letras a los
textos que deseamos mostrar en una pagina web como
negrita, subrayado, cursiva, etc.
Los siguientes son llamados estilos físicos en HTML:
<B> </B> : Permite poner en negrita un texto
<I> </I> : Permite poner en cursiva un texto
<U> </U> : Permite poner un texto subrayado

36. También existen estilos lógicos en HTML, para resaltar los
textos que se desea mostrar en una pagina Web.
<ADDRESS> </ADDRESS> :
Se puede utilizar para mostrar direcciones
electrónicas.
<BLOCKQUOTE> </BLOCKQUOTE>:
destaca un texto. Deja espacio antes y después de
mostrar el texto realizando saltos de párrafo.
<CITE> </CITE> :
Para mostrar títulos o citas de libros.
<CODE> </CODE>:
Para mostrar el código fuente de un lenguaje de
programación.

37. También existen estilos lógicos en HTML, para resaltar los
textos que se desea mostrar en una pagina Web.
<DFN> </DFN> :
Se puede utilizar para mostrar alguna definición.
<EM> </EM>:
Se puede mostrar texto en letra cursiva y enfatizada.
<KBD> </KBD> :
Se puede utilizar para representar texto que se
introduce por el teclado.
<SAMP> </SAMP>:
Se puede utilizar para mostrar información de
ejemplos.

38. También existen estilos lógicos en HTML, para resaltar los
textos que se desea mostrar en una pagina Web.
<STRIKE> </STRIKE> :
Permite mostrar un texto tachado.
<STRONG> </STRONG>:
Permite mostrar un texto resaltado con negrita.
<VAR> </VAR> :
Se puede utilizar para representar variables en una
página Web.

41. HTML permite asignar atributos en toda la pagina web,
para ello debe asignar valores a los atributos de en
momento de crear el cuerpo (BODY) de la pagina.
Al crear el cuerpo de la pagina se puede utilizar los
siguientes atributos:
BACKGROUND
Se utiliza para establece una imagen de fondo a la
pantalla. Si el tamaño de la imagen no ocupa todo el
fondo de la pagina esta se multiplicara hasta llenar todo
el fondo.
BGCOLOR
Se utiliza para asignar un color de fondo a toda la pagina
Web.

45. Las listas son un conjunto de elementos que se pueden
crear con el lenguaje HTML para mostrarlas en una pagina
Web. Hay 3 tipos de listas:
LISTAS NO ORDENADAS
 Listas No Ordenadas SINTAXIS:
<UL TYPE = “icono”>
 Listas Ordenadas <LH> Titulo de la Lista </LH>
 Listas de Definición <LI> Elemento Nº 01
<LI> Elemento Nº 02
Icono:
<LI> Elemento Nº 03
El icono es una palabra que indica lo
.
que va a acompañar a cada elemento
.
de la lista y puede ser:
.
o disc (predeterminado)
<LI> Elemento Nº n
o circle
</UL>
o square

47. Las LISTAS ORDENADAS se caracterizan porque
cada elemento va enumerada.
START: LISTAS ORDENADAS
Es opcional , indica la primera SINTAXIS:
numeración, se indica con el <OL START = “n” TYPE = “valor”>
valor n. <LH> Titulo de la Lista </LH>
<LI> Elemento Nº 01
TYPE: <LI> Elemento Nº 02
Indica el tipo de numeración, <LI> Elemento Nº 03
que puede ser; .
A: Letra Mayúsculas .
a: Letra Minúscula .
I: romanos en mayúsculas <LI> Elemento Nº n
i: romanos en minúscula </OL>
0: números enteros.

49. Las LISTAS DE DEFINICIÓN permiten escribir un
termino y su definición. LISTAS DE DEFINICION
<LH> SINTAXIS:
Es opcional, se utiliza para <DL>
establecer un TITULO a la lista. <LH> Titulo de la Lista </LH>
<DT> Termino Nº 01
<DT> <DD> Definición Nº 01
Se utiliza para escribir un <DT> Termino Nº 02
termino que deseamos definir. <DD> Definición Nº 02
.
<DD> .
Se utiliza para describir el .
termino. <DT> Termino Nº n
<DD> Definición Nº n
</DL>

51. Una tabla es un conjunto de filas Y columnas que
se pueden crear en HTML.
La creación de una Tabla empieza con la etiqueta
<TABLE> y termina con </TABLE>.
La etiqueta <TABLE> se puede utilizar en forma
opcional atributos cuyos valores y características
afectaran a toda la tabla y son los siguientes:

52. BORDER
Se utiliza para establecer el grosor del borde de una
tabla, la forma predeterminada es 0= no borde.
CELLSPACING
Se utiliza para establecer es espacio entre cada celda
de la tabla, el valor predeterminada es 2.
WIDTH
Se utiliza para establecer el ancho de la tabla que se
desea crear, el valor puede esta en porcentajes.
HEIGHT
Se utiliza para establecer la altura de la tabla que se
desea crear, el valor puede esta en porcentajes.
<TABLE BORDER=3 WIDTH=50% CELLPADDING=2> </TABLE>

53. <CAPTION> </CAPTION>
Esta etiqueta es opcional y permite establecer un
titulo a la tabla que deseamos crear.
Podemos agregarle el atributo de ALIGN y asignarle
valores de TOP o BOTTOM.
<TABLE BORDER=5>
<CAPTION ALIGN=TOP> Titulo de la Tabla </CAPTION>
</TABLE>

54. <TR> </TR>
Esta etiqueta permite crear una fila dentro de una
tabla, y tiene los siguientes atributos:
ALIGN
Para indicar la alineación Horizontal del contenido y
sus valores son: Left (izquierda) Right (Derecha) o
Center (Centro).
VALIGN
Se utiliza para la alineación vertical del contenido y sus
valores sn: Top (Arriba) Middle (Mitad) o Botton
(Abajo).
BGCOLOR
Se utiliza para indicar el color de fondo de las celdas.

55. <TH> </TH>
Esta etiqueta se debe escribir dentro de <TR> </TR> y
permite crear columnas de cabecera, es decir
columnas en la primera fila de la tabla, y tiene los
siguientes atributos:
ALIGN
Para indicar la alineación Horizontal del contenido y
sus valores son: Left, Right, Center, Justify o Decimal.
VALIGN
Se utiliza para la alineación vertical del contenido y sus
valores son: Top, Middle o Botton.
WIDTH
Se utiliza para indicar el ancho de la columna en %.

56. BGCOLOR
Se utiliza para indicar el color de fondo de las celdas.
ROWSPAN
Se utiliza para indicar en número de filas que ocupará
la celda.
COLSPAN
Se utiliza para indicar el numero de columnas que
ocupara la celda.
NOWRAP
Al usar este atributo el ancho de la celda se extenderá
de acuerdo al ancho que ocupa el texto.
Si no se utiliza el texto pasara a la siguiente línea
cuando ocupe el ancho establecido para la columna.

58. <TD> </TD>
Esta etiqueta permite crear dentro de una fila
, columnas que contendrán datos. Esta etiqueta se
deberá utilizar a partir de la segunda fila si la tabla
contiene cabecera.

61. En HTML también se puede insertar imágenes en una
pagina Web, normalmente las imágenes deben ser GIF
o JPG.
Se recomienda GIF para mostrar imágenes pequeñas
como iconos y JPG para imágenes grandes y reales
como una fotografía.
SINTAXIS:
<IMG SRC=“RutaNombre del Archivo”>
<IMG SRC=“URLNombre del Archivo”>

62. ALT
Con este
atributo se
indica un
texto el cual
se visualizara
cuando pase
el puntero del
Mouse por la
imagen.

63. ALIGN
Se utiliza cuando
queremos que la
imagen vaya
acompañada de
un texto.
Left: Izquierda
Right: Derecha
Top: Primera Línea del
texto Arriba.
Bottom: Primera línea
del texto abajo
Middle: Primera línea del
texto al medio.

64. Son llamados también enlaces o Link y como su
nombre lo indica, permiten enlazar i ir en forma
directa a otra parte de la misma pagina Web o a otra
pagina.
SINTAXIS: (Enlaces al mismo documento)
<A NAME=Nombre de la sección>
contenido
</A>
Para enlazar a la sección creada se utiliza la etiqueta <A REF>
<A REF=#Nombre de la sección> texto </A>

67. Existen también enlaces a otros documentos o paginas
HTML, este tipo de enlace se utiliza cuando
deseampos ir a otra página.
SINTAXIS: (Enlaces con textos)
<A HREF=“URL”> Texto </A>
SINTAXIS: (Enlaces con Imágenes)
<A HREF=“URL”> <IMG SCR=“imagen”> </A>
SINTAXIS: (Enlaces a secciones de otra pagina)
<A HREF=“URL#Nombre de sección”> Texto </A>
<A HREF=“URL#seccion”> <IMG SCR=“imagen”> Texto </A>

68. Nos permiten dividir una pagina en varias secciones y
cada una de ellas es independiente pudiendo mostrar
una pagina Web diferente en cada una.
Cuando vamos a usar frames dentro de una pagina se
utiliza lka etiiqueta <FrameSet> </FrameSet> en lugar
de <Body> </Body>:

69. ROWS
Permite crear frames horizontales, se le asigna el
tamaño del frame o frames que desea crear separados
por una coma, el valor puede ser en porcentaje y el *
indica el resto de la ventana.
COLS
Permite crear frames en forma vertical. Al igual que
Rows se le asigna tamaños del frame.

72. Son aquellos frames que se encuentran dentro de otro
frame. Solo hay que utilizar dentro de la etiqueta <FRAME>
</FRAME> la etiqueta de creación <FRAMESET>
</FRAMESET> con todos sus atributos y valores.

74. Son herramientas muy importante en la pagina Web ya que
permiten a los usuarios ingresar datos para que sean
procesados por un servidor.
Los formularios permiten la creación de paginas Web
dinámicas, es decir, de paginas que administren bases de
datos.

75. La sintaxis para crear un formulario es la siguiente:
<Form> </Form>
Dentro de la Etiqueta <Form> se debe utilizar los
siguientes atributos:
 Action
 Method
 Enctype
Action
Con este atributo se Indica la dirección electrónica a donde
se enviaran y procesarán los datos que un usuario ingresa
en el formulario.
<Form Action=MipaginaWeb.com>
</Form>

76. Method
Este atributo se utiliza para Indicar como se debe transferir
hacia el servidor los datos que se ingresan en el
formulario.
Se pueden utilizar las palabras Get o Post.
<Form Action=MipaginaWeb.com Method=Post>
</Form>

77. Enctype
Este atributo es opcional y se utiliza cuando deseamos
enviar los datos encriptados.
<Form Action=MipaginaWeb.com Method=Post Enctype>
</Form>

78. Los Formularios se diseñan con controles que permiten el
ingreso de los datos en las paginas Web.
CAJAS DE TEXTO
Se utiliza la etiqueta Input, que utiliza los siguientes
controles:
Type: Se utiliza para indicar el tipo de control que desea mostrar en
el formulario para el ingreso de datos, para crear una caja de texto
se le debe asignar el valor Text.
Type=“Text”
Name: Permite asignarle un nombre al control el cual representa al
valor que el usuario ingresa y lo podemos utilizar como una variable.
Name=“NomCliente”
Size: Se utiliza para establecer el tamaño de la caja de textos, el
valor predeterminado es 20. Size=35