CURSO TALLER PROGRAMACIÓN WEB (HTML, JavaScript, CSS, PHP, MySQL y AJAX)

198 Pages·2017·3.28 MB·Spanish

INSTITUTO SUPERIOR
“HONORIO DELGADO ESPINOZA”
Los Arces S/N – Cayma

Taller de
Programación Web
(HTML, JavaScript, CSS, PHP, MySQL y AJAX)

Gonzalo Neira Calsin
Licenciado en Educación
Ingeniería Informática

AREQUIPA – PERU
2016
Taller de Programación Web con PHP y MySQL Prof. Gonzalo Neira Calsin
1
Lección 1. Tecnologías de desarrollo Web

 Introducción.
 URL (Uniforme Resource Locator)
 Uso y Formato del URL
 Servicios: http, https, ftp, malito, etc.
 Estructura de HTML
 Proyecto: Modelado de BD. Sistema de alquiler de Softwares, Música y Películas.

Introducción

En la actualidad el desarrollo de páginas Web esta en su mayor auge, por ende las tecnologías
de desarrollo Web también han crecido considerablemente, pero no se puede negar que el
fundamento principal esta basado en HTML.

HTML es un lenguaje sencillo pensado para presentar información en la WWW. HTML
(HyperText Markup Languaje), como su nombre indica es un lenguaje de marcas para la
creación de hipertextos. Por hipertexto entenderemos texto con una presentación agradable,
con inclusión de elementos multimedia (gráficos, video, audio) y con la presencia de
hiperenlaces que permiten relacionar otras fuentes de información en documentos hipertextos.
Es el lenguaje utilizado para representar documentos en la WWW (World Wide Web).

URL (Uniforme Resource Locator)

Es un método universal para determinar las direcciones de los recursos de Internet. Cada
dirección de Internet Debe ser única, y está formada por tres partes: Protocolo, Host y
Directorio.

URL es el acrónimo de (Uniform Resource Locator), localizador uniforme de recursos y permite
localizar o acceder de forma sencilla cualquier recurso de la red desde el navegador de la
WWW.

Con la WWW se pretende unificar el acceso a información de servicios que antes eran
incompatibles entre sí, tratando de conseguir que todos los servicios de Internet sean
accesibles a través de la WWW, de esta forma desde un mismo programa se puede tener
acceso a todos los recursos de una forma uniforme y permite que los documentos HTML
incluyan enlaces a otras fuentes de información en servicios como FTP, gopher, WAIS, etc...

Uso y Formato del URL

Las URL se utilizan para definir el documento de destino de los hiperenlaces, para referenciar
los gráficos y cualquier otro fichero que se desee incluir dentro de un documento HTML. Cada
elemento de Internet tendrá una URL que lo defina, ya se encuentre en un servidor de la
WWW, FTP, gopher o las News.

El formato de una URL será:
servicio://maquina.dominio:puerto/camino/fichero

La maquina.dominio indicará el servidor que nos proporciona el recurso, en este caso se
utilizará el esquema IP para identificar. La maquina será el nombre de la maquina y el dominio.
En el caso de nuestra institución el dominio siempre será edu.pe. Por tanto un nombre valido
de maquina será www.isphdelgadoe.edu.pe

El puerto TCP es opcional y lo normal es no ponerlo si el puerto es el mismo que se utiliza
normalmente por el servicio. Solo se utilizará cuando el servidor utilice un puerto distinto al
puerto por defecto.

El camino será la ruta de directorios que hay que seguir para encontrar el documento que se
desea referenciar. Para separar los subdirectorios utilizaremos la barra de UNIX /, se usa por
Taller de Programación Web con PHP y MySQL Prof. Gonzalo Neira Calsin
2
convenio al ser este tipo de maquinas las más usadas como servidores. El nombre de los
subdirectorios y del fichero referenciado puede ser de más de ocho caracteres y se tendrá en
cuenta la diferencia entre mayúsculas y minúsculas en el nombre.

La extensión de los ficheros es también importante, ya que por ella sabe el servidor el tipo de
documento que se accede e indica al cliente (navegador) el modo en que debe tratarse ese
documento.

Ejemplo:
http://www.sil.edu.pe/correo

Protocolo Directorio y/o
Nombre
nombre de
Del Host
archivo
(Dominio)

El Protocolo
HTTP es para acceder a archivos de un servidor Web. Define la forma de acceso al
recurso. Determina la aplicación con la que el navegador accede al recurso.

Nombre De Host (Dominio)
Define al sistema en Internet que contiene el recurso al que se quiere acceder. Host es
el computador central en un entorno de procesamiento distribuido.

Directorio
Indica la ubicación del recurso en el dominio.

Servicios

El servicio, será alguno de los de internet, estos pueden ser:
http: (HyperText Transport Protocol), es el protocolo utilizado para transmitir hipertexto.
Todas las páginas HTML en servidores WWW deberán ser referenciadas mediante
este servicio. Indicará conexión a un servidor de la WWW.
https: (HyperText Transport Protocol Secure), es el protocolo para la conexión a servidores
de la WWW seguros. Estos servidores son normalmente de ámbito comercial y utilizan
encriptación para evitar la intercepción de los datos enviados, usualmente números de
tarjeta de crédito, datos personales, etc.
ftp: (File Transfer Protocol), utilizará el protocolo FTP de transferencia de ficheros. Se
utilizará cuando la información que se desee acceder se encuentre en un servidor de
ftp. Por defecto se accederá a un servidor anónimo (anonymous), si se desea indicar el
nombre de usuario se usará: ftp://maquina.dominio@usuario, y luego le pedirá la clave
de acceso.
gopher, wais: Cualquiera de estos servicios de localización de información, se indicará el
directorio para localizar el recurso concreto.
news: Accede al servicio de news, para ello el visualizador de la WWW debe ser capaz de
presentar este servicio, todos no lo son. Se indicará el servidor de news y como camino
el grupo de noticias al que se desea acceder: news://news.cica.es/uca.es.
telnet: Emulación de terminal remota, para conectarse a maquina multiusuario, se utiliza para
acceder a cuentas públicas como por ejemplo la de biblioteca. Lo normal es llamar a
una aplicación externa que realice la conexión. En este caso se indicará la maquina y
el login: telnet://maquina.dominio@login.
mailto: Se utilizará para enviar correo electrónico, todos los navegadores no son capaces. En
este caso solo se indicará la dirección de correo electrónico del destino: mailto://alias.
correo@domino.
Taller de Programación Web con PHP y MySQL Prof. Gonzalo Neira Calsin
3
ESTRUCTURA DE HTML

Un documento HTML está definido por una etiqueta de apertura <HTML> y una etiqueta de
cierre </HTML>. Dentro de este se dividen dos partes fundamentales la cabecera, delimitada
por la etiqueta <HEAD> y el cuerpo, delimitado por la etiqueta <BODY>. Por tanto la estructura
de un documento HTML será:
<HTML>
<HEAD>
Definiciones de la cabecera
</HEAD>
<BODY>
Instrucciones HTML
</BODY>
</HTML>
Ninguno de estos elementos es obligatorio, pudiendo componer documentos HTML que se
muestren sin ningún problema sin incluir estas etiquetas de identificación, pero para una
adecuada estructuración y delimitación se debe tomar en cuenta la estructura.

Cabecera de un documento HTML

La cabecera, está delimitado por las etiquetas <HEAD> y </HEAD>, en esta se incluirán las
definiciones generales que afectarán a todo el documento. Todas sus etiquetas se utilizarán
solo en casos muy determinados, solo la etiqueta TITLE tiene un uso general. A continuación
se citan los distintos componentes que pueden formar la cabecera de un documento HTML

 <TITLE>: Título del documento

Especificará el título del documento HTML, todo documento HTML debe tener un titulo. Dentro
de esta etiqueta no se podrá usar ninguna de las restantes etiquetas HTML. El título se
muestra en la parte superior de la ventana del programa navegador.

Se utiliza principalmente para etiquetar e identificar la página en los bookmarks (marcadores) y
las history list (lista de documentos accedidos) y también se utiliza por algunos servidores de
búsqueda como resultado de una búsqueda para poder intuir el contenido del documento.

 <BASE>: URL base del documento.

Especificará la URL que se tomará como base del documento HTML, esta se utilizará para las
referencias a URL relativas, que se encuentren en los hiperenlaces y en las referencias de las
imágenes. Presenta un atributo HREF, que indicará la URL base del documento, el formato
será el siguiente:

<BASE HREF="URL">

Por ejemplo: <BASE HREF="http ://www.isphdelgadoe.edu.pe/ademico/">

 <META>: Indica refresco del documento

Tiene muchas utilidades, especialmente cuando se trabaja JavaScript y formularios. Otra
utilidad es indicar al documento los tiempos de refresco automático o indicar que esta debe
sustituirse al cabo de determinado número de segundos.

El formato es el siguiente:

<META HTTP-EQUIV="REFRESH" CONTENT="numero_segundos; URL=URL_de_refresco">

Se indica el número de segundos que deben pasar antes del refresco y el documento HTML
que sustituye al actual. Si se indica cero segundos la transición entre uno y otro documento
será inmediata. Si no se indica URL el documento actual se refrescará.

Taller de Programación Web con PHP y MySQL Prof. Gonzalo Neira Calsin
4
Ejemplo.

El ejemplo muestra una página con una imagen y texto, que al término de 30 segundos pasa
automáticamente al URL http://www.google.com.pe.

<HTML>
<HEAD>
<TITLE> Mi página Web en HTML </TITLE>
<META HTTP-EQUIV="refresh" CONTENT="30;URL=http://www.google.com.pe">
</HEAD>
<BODY>
<CENTER>
<MARQUEE>
<IMG SRC="CATROSES.JPG"><BR><H1>Mi gato</H1><BR>
¡¡¡ Bienvenido a mi página!!!
</MARQUEE>
</CENTER>
</BODY>
</HTML>

Actividad

Diseñe una página que muestre un álbum fotográfico.

Detalle.
 La página Web inicialmente debe mostrar una página denominado index.htm donde se
observe una presentación muy breve del álbum, autor y lema.
 Las páginas sucesivas deben mostrarse en relación al título de la imagen, cada página
debe tener un título y una breve reseña del contenido.
 Todo el proyecto debe hallarse en una carpeta denominada proyectoAlbum y las
imágenes deben hallarse en una carpeta denominada img.

Taller de Programación Web con PHP y MySQL Prof. Gonzalo Neira Calsin
5
Lección 2. Diseño de Páginas con HTML

 Cuerpo de un documento HTML
 Hiperenlaces
 Tipos de enlaces
 Tablas
 Documentos con frames
 Proyecto: Diseño de página maestra

Cuerpo de un documento HTML

El cuerpo de un documento HTML estará delimitado por las etiquetas <BODY> y </BODY> y
en el se incluirán todas las instrucciones HTML y el texto que forman el documento. Entre otros
tenemos los siguientes atributos.

Atributos de <BODY>

ATRIBUTO DESCRIPCIÓN
BACKGROUND="URL": Imagen de fondo
BGCOLOR=#rrvvaa ó nombre del color color del fondo
TEXT=#rrvvaa ó nombre del color. color del texto
LINK=#rrvvaa ó nombre del color. color hiperenlaces no accedidos
VLINK=#rrvvaa ó nombre del color. color hiperenlaces ya accedidos

<BODY BACKGROUND="URL" BGCOLOR=#rrvvaa TEXT=#rrvvaa LINK=#rrvvaa VLINK=#rrvvaa >

Ejemplo:
<BODY BACKGROUND= http://www.img.es/fondos/fondo1.gif BGCOLOR=blue TEXT=white LINK=FF0000 VLINK=008200>

ATRIBUTO DESCRIPCIÓN
<HR Align=LEFT|RIGTH|CENTER Regla horizontal. Noshade (No muestra la
NOSHADE SIZE=n WIDTH=n> sombra de la barra, evitando el efecto en 3D)
<CENTER> Centrado de texto e imágenes
<H1> - <H6> Cabeceras de títulos
<FONT SIZE=n> Tamaño de la fuente
<BASEFONT SIZE=n> Fuente por defecto
<UL TYPE = DISK ó CIRCLE ó SQUARE >
<LH> Titulo de la lista </LH>
<LI> Elemento 1 Índice con números
<LI> Elemento 2, …
</UL>
<OL START = n TYPE = A ó a ó I ó i ó 0 >
<LH> Titulo de la lista </LH>
<LI> Elemento 1 Índice con letras
<LI> Elemento 2, …
</OL>

HIPERENLACES

Es la utilidad básica del hipertexto, permite indicar zonas de texto o imágenes que si son
seleccionados por el lector del documento nos traslada a otros documentos HTML u otras
zonas del documento actual.

Estructura de los enlaces
En general, los enlaces tienen la siguiente estructura:

<A HREF="xxx"> yyy </A>
Taller de Programación Web con PHP y MySQL Prof. Gonzalo Neira Calsin
6
Donde xxx es el destino del enlace (entre comillas). yyy es el texto indicativo en la pantalla del
enlace.

Tipos de Enlaces

1. Enlaces dentro de la misma página

En este caso, en lugar de xxx, se sustituye por #marca (origen) que representa el destino del
enlace a donde se desea saltar y en el destino debe escribir el nombre de la marca (la palabra
marca puede ser cualquier palabra). Quedando así la estructura.

<A HREF="#marca"> YYY </A> (Origen)
…
…
<A NAME="marca"> </A> (Destino)

Ejemplo. Se observa una investigación de varios Capítulos. El salto o hipervínculo en la
misma página es de los capítulos a sus contenidos.
<HTML>
<HEAD>
<TITLE> REDES INALAMBRICAS </TITLE>
</HEAD>
<BODY>
<PRE>
<A HREF="#marcaCap1">CAPITULO I </A>
… … …
… … …
<A NAME="marcaCap1"> </A> CAPITULO I
</PRE>
</BODY>
</HTML>

2. Enlaces con otra página

Para vincular una página con otra, hay que sustituir en lugar de xxx el nombre y extensión de la
página a vincular.

< A HREF = ”segunda.html” > yyy < /A >

Si se desea que vaya a un sitio concreto de otra página, en vez de ir al principio de la página a
donde va por defecto, al nombre de la página debe acompañar con el nombre de la marca.

<A HREF=”segunda.html#final”> yyy < /A >

NOTA: Estamos suponiendo que las páginas a acceder están en el mismo directorio. Caso
contrario debe escribir el nombre de la subcarpeta. Ejemplo.

<A HREF=”miWed/segunda.html#final”>

3. Enlaces con una página fuera de nuestro sistema

Si queremos enlazar con una página que esté en un servidor distinto al que almacena nuestra
página, es necesario conocer su URL o podría ser una dirección de ftp, gopher, etc. Colocamos
el URL en vez de xxx. Ejemplo

<A HREF="http://www.isphdelgadoe.edu.pe/"> Página del ISP HDE </A>

4. Enlaces con una dirección de E-mail

En este caso, sustituimos xxx por mailto: seguido de la dirección de E-Mail. Ejemplo:

<A HREF="[email protected]"> comentarios a mi correo <A>

Taller de Programación Web con PHP y MySQL Prof. Gonzalo Neira Calsin
7
TABLAS

Permite la representación de datos por filas y columnas, en forma tabular. La definición es muy
flexible indicando solo los elementos que forman cada fila y columna, calculándose de forma
automática el tamaño que deben tener las celdas. En una tabla podemos introducir todo tipo de
elementos del lenguaje HTML como imágenes, enlaces, texto, listas, cabeceras, formularios,
etc.

Atributos de <TABLE>

ATRIBUTO DESCRIPCIÓN
BORDER =n borde alrededor de la tabla.
Indica el espacio que debe existir entre las
CELLSPACING=n
distintas celdas de la tabla.
Es la cantidad de espacio entre el borde de la
CELLPADDING=n
celda y el contenido de esta.
WIDTH=valor o porcentaje%: ancho de la tabla.
HEIGHT=valor o porcentaje% alto de la tabla.
<CAPTION ALIGN=TOP|BOTTOM>Titulo de la
<CAPTION> Titulo de la tabla
tabla</CAPTION >
<TR ALIGN= LEFT ó CENTER ó RIGHT
<TR> Fila de la tabla
VALIGN= TOP ó MIDDLE ó BOTTOM >
Indica la alineación del elemento dentro de la
ALIGN = LEFT ó CENTER ó RIGHT
celda
Indicará la alineación vertical del dato dentro de
VALIGN = TOP ó MIDDLE ó BOTTOM
la celda
<TH> o <TD> Una celda de la tabla
número de filas que ocupará está celda en la
ROWSPAN
misma fila
número de columnas que ocupará la celda
COLSPAN
actual
NOWRAP no se divida la línea por defecto

Ejemplos:

<P>TABLA <BR>
<TABLE BORDER=5 CELLSPACING=2 CELLPADDING=3>
<TR> <TD> F1C1</TD> <TD> F1C2</TD> <TD> F1C3</TD></TR>
<TR> <TD> F2C1</TD> <TD> F2C2</TD> <TD> F2C3</TD></TR>
<TR> <TD> F3C1</TD> <TD> F3C2</TD> <TD> F3C3</TD></TR>
</TABLE>

<P>TABLA CON ATRIBUTO COLSPAN<BR>
<TABLE BORDER=5 CELLSPACING=2 CELLPADDING=3>
<TR> <TD COLSPAN=2> CCCCCCCC </TD> <TD> F1C3</TD></TR>
<TR> <TD> F2C1 </TD> <TD> F2C2 </TD> <TD> F2C3</TD></TR>
<TR> <TD> F3C1 </TD> <TD> F3C2 </TD> <TD> F3C3</TD></TR>
</TABLE>

<P>TABLA CON ATRIBUTO ROWSPAN<BR>
<TABLE BORDER=5 CELLSPACING=2 CELLPADDING=3>
<TR> <TD> F1C1</TD> <TD> F1C2</TD> <TD > F1C3 </TD></TR>
<TR> <TD> F2C1</TD> <TD> F2C2</TD> <TD ROWSPAN=2> RRRR </TD></TR>
<TR> <TD> F3C1</TD> <TD> F3C2</TD> </TR>
</TABLE>

<P>TABLA CON ATRIBUTOS ROWSPAN Y COLSPAN<BR>
<TABLE BORDER=5 CELLSPACING=2 CELLPADDING=3>
<TR><TD> F1C1 </TD> <TD> F1C2 </TD><TD>F1C3</TD></TR>
<TR><TD COLSPAN=2 ROWSPAN=2 >CCRR</TD><TD>F2C3</TD></TR>
<TR><TD> F3C3 </TD></TR>
</TABLE>
Taller de Programación Web con PHP y MySQL Prof. Gonzalo Neira Calsin
8
DOCUMENTOS CON FRAMES

Un documento con frames se define de manera diferente a un documento normal, siendo la
estructura del documento distinta, en este caso no se define la etiqueta BODY. Su estructura
es la siguiente:

<HTML>
<HEAD>
…
</HEAD>
<FRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnas>
<FRAME SRC=URL_1 NAME="Nombre de la frame1">
<FRAME SRC=URL_2 NAME="Nombre de la frame1">
. . .
</FRAMESET>
<NOFRAMES>
Instrucciones HTML que se mostrará en los navegadores que no soporten frames.
</NOFRAMES>
</HTML>

Se definirá solo uno de los atributos, o la lista de filas (ROWS) o la lista de columnas (COLS).

Dentro de la etiqueta NOFRAMES se podrá incluir una explicación de que el documento solo
es visible con los navegadores que soporten frames, o bien incluir una versión del documento
que se muestre sin necesidad de frames.

Atributos de <FRAMESET>

ATRIBUTO DESCRIPCIÓN
NAME Indica el nombre de la frame
MARGINWIDTH ancho del margen, en puntos de la pantalla.
MARGINHEIGHT alto de los márgenes.
SCROLLING=YES, NO, AUTO tendrá o no una barra
NORESIZE no debe ser variada de tamaño por el usuario
TARGET Atributo para indicar la frame de destino
BASE (Se especificar en la Indicará la frame en la que se mostrará por defecto todos
cabecera <HEAD>) los hiperenlaces del documento actual.
<FORM ACTION="url"
Indicará la frame de destino del resultado del formulario.
TARGET="frame">

Existen unos valores especiales de TARGET=xxx

Donde xxx puede ser:
"_blank" Indica que se muestre en una nueva ventana vacía, para seguir el enlace se lanza
otra ventana distinta del navegador.
"_self" Se mostrará en la misma ventana o frame que lo referencia, se puede usar para
modificar el valor dado por BASE.
"_parent" Se muestra en frame o estructura de frames que llamó al documento actual.
"_top" Indica que se muestre en la ventana completa, eliminando la estructura de frames
que tenga la ventana.

Actividad

Desarrolle un proyecto denominado: proyectoPaginaBonita
 El detalle y los archivos se encuentran en la carpeta denominado paginaBonita
 Los títulos de los hipervínculos deben hallarse en los costados derecho e izquierdo y el
detalle debe mostrarse en el centro de la página definida con marcos.
 Solo el marco del centro debe tener una barra de desplazamiento.
 Defina las páginas que sean necesarias para lograr una presentación adecuada.
Taller de Programación Web con PHP y MySQL Prof. Gonzalo Neira Calsin
9
Lección 3. Diseño de páginas con Formularios
 Formularios. Tipos; Texto, Password, Checkbox, Radio, Hidden, Submit, Image, Reset,
Textarea, Select, etc.
 Instalación y configuración de Servidor Web Apache.
 Instalación y configuración de Base de datos MySQL.
 Proyecto: Diseño págs. Esquema con HTML

FORMULARIOS (FORM)

Los formularios son plantillas que permiten la creación de documentos HTML con peticiones de
datos. La principal utilidad de los formularios es la posibilidad de crear cuestionarios,
encuestas, páginas de comentarios o cualquier documento en la que se desee una interacción
por parte del usuario.

<FORM> Definición de formularios

Existe una instrucción HTML para la creación de formularios esta es FORM, que tiene la
siguiente estructura:

< FORM ACTION="fichero que trata el formulario" METHOD= POST | GET >
...
Elementos que forman el formulario
...
< /FORM>

Dentro de la etiqueta de formulario se definirán los distintos elementos de petición de datos.

Los atributos que presenta la etiqueta FORM son los siguientes:

ACTION: Indica el programa que se encargará de tratar los datos del formulario. Este
programa debe encontrarse en el servidor y estar escrito en algún lenguaje de programación.
A este programa se pasará como parámetros los datos introducidos en el formulario y retornará
un código HTML que se mostrará tras procesar el formulario.

METHOD: Indica el protocolo usado para el envío de los datos. Con POST envía los datos en
la entrada estándar del programa que trata el formulario y con GET los datos se pasan por
parámetro, en la línea de comandos, al programa. El usar uno u otro método vendrá
determinado por como son tratados los parámetros en el formulario. El método de uso más
normal será POST.

<INPUT> Entrada básica de datos

La etiqueta INPUT se utiliza para definir gran variedad de tipos de campos de entrada de datos.
Por lo general serán entradas de texto corto ú opciones. El formato básico es el siguiente:

< INPUT TYPE=( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT |
IMAGE | RESET ) NAME="Variable que toma el valor"
VALUE="Valor de Inicialización">

El atributo TYPE se usa para determinar el tipo de recuadro de dialogo de entrada que se está
definiendo. El atributo NAME especifica el nombre de la variable que se define. Este nombre
será pasado al programa que trata el formulario junto con el valor que le asigno el usuario del
formulario. El atributo VALUE suele especificar el valor de inicialización, que será el valor por
defecto.

A continuación se relatan los distintos tipos de instrucciones de entrada.

<INPUT TYPE=TEXT...> Texto corto

< INPUT TYPE=TEXT NAME="variable" VALUE="valor inicial" SIZE="tamaño"
MAXLENGTH="longitud máxima" >
Taller de Programación Web con PHP y MySQL Prof. Gonzalo Neira Calsin
10