Programacin Web

HTTP, HTML, Etiquetas, Programacin Web Cliente/Servidor, Servidor Web, Script, Java Script, PHP, MySQL.
Prof: Ramn Aray

La Evolucin de la Programacin Web

Para transmitir informacin se requiere un medio de transmisin. Uno de los modos de comunicacin que utilizan las computadores es conectarse a Internet (WWW). La convencin estndar para esta comunicacin es el HTTP (Hyper Text Transfer Protocol) La informacin en Internet o WWW est guardada en forma de documentos generalmente como pginas web. Estn almacenadas en una ubicacin central denominada el servidor, para que mltiples usuarios (clientes web) accesen y compartan la informacin. Las ventanas de acceso a las pginas web se denomina navegador web o (web browser).

La Evolucin de la Programacin Web

Hasta la dcada del 60 no era posible compartir informacin remota a travs de computadoras. El concepto de internet surge en los EE.UU. En 1962 para propsitos de defensa. Tim Berners Lee desarroll un programa a inicios de los 90, que tenia la capacidad de acceder a informacin remota, pero solo archivos de texto. A finales de 1992, se desarroll un navegador que proporcionaba acceso a texto, grficos y animaciones a travs de las computadoras. Se desarroll un lenguaje de programacin para manejar la informacin grfica y texto conocido como HTML (Hyper Text Markup Language).

Programacin Web Cliente/Servidor

Datos
IU

RED Cliente

Servidor

Interfaz de Protocolo

Interfaz de Protocolo

Programacin Web Cliente/Servidor

Cliente: Acta como un representante del usuario enviando la peticin al servidor. Tambin acta como un agente receptor recibiendo la respuesta del servidor. El cliente proporciona una interfaz para que los usuarios ingresen los valores solicitados, establece el enlace de comunicacin con el servidor, recibe la respuesta del servidor sobre la consulta solicitada y la presenta de regreso a los usuarios. Servidor: Es un programa que responde la consulta del cliente. Toma los detalles solicitados por el usuario en la base de datos. Datos: La transferencia de datos del servidor al cliente se denomina respuesta. La respuesta del servidor generalmente est en forma de texto que representa algn lenguaje de marcado (Markup Language). Protocolo: Un conjunto de convenciones seguidas para una efectiva comunicacin peer-to-peer entre el cliente y el servidor, y se logra a travs de HTTP.

Programacin Web Cliente/Servidor

Algunas de las funcionalidades de un servidor se muestran a continuacin:
Datos Seguros

Proteccin

Autenticacin

Servidor
Concurrencia Autorizacin

Privacidad

HTTP
La primera versin de HTTP la 0.9, fue desarrollada en 1996. Tena la capacidad de transmitir datos slo en forma de texto. Ms tarde, una versin mejorada la 1.0, poda transmitir informacin de texto y grficos en el formato MIME (Multipurpose Internet Mail Extension) Extensin de Correo Internet Multipropsito. En HTTP, la informacin es enviada y recibida en forma de solicitud/respuesta. El mtodo de solicitud generalmente contiene el URL (Uniform Resource Locator) Localizador Universal de Recursos, que proporciona la direccin destino.

HTTP
Tambin incluye mensajes como MIME, que incluye modificadores de solicitud, texto del cliente y el contenido necesario para conectarse a un servidor. La comunicacin HTTP empieza pasando la solicitud por medio de un agente usuario (User Agent UA) o navegador, al servidor origen destino (Origin Server O) La comunicacin entre un agente usuario y el servidor origen se da a travs de la cadena de solicitud y la cadena de respuesta. La solicitud se origina del agente usuario (UA) y la respuesta del servidor origen (O).

HTTP
Cadena de comunicacin HTTP:

Cadena de Solicitud V

Agente Usuario

Cadena de Respuesta

Servidor Origen

HTTP
Sin embargo, en una situacin prctica, puede existir ms de un intermediario, tales como A, B, C en una cadena de Solictud/Respuesta. Los principales componentes de estas cadenas incluyen: Un agente Proxy: Actua como un agente autorizado para recibir el URL en la forma normal, modificando una porcin del mensaje y redireccionando el mensaje modificado al servidor solicitado por el usuario. Un Gateway: Recibe la informacin solicitada por el usuario y la convierte en un determinado protocolo relacionado al servidor. Un Tunnel: Acta como una conexin al pasar la informacin solicitada por el usuario de un enlace intermediario a otro.

HTTP
Elementos intermedios en la comunicacin HTTP:

Cadena de Solicitud
V V V

A
Agente Usuario

C
Servidor Origen

Cadena de Respuesta

Lenguaje de Marcado
A finales del 60, Charles Goldfarb desarroll un concepto de lenguaje de marcado generalizado que permita etiquetas, proporcionando as un mtodo para representar los contenidos de texto. En la dcada de los 80, se desarrollaron las primeras aplicaciones del lenguaje de marcado generalizado. Se usaban para intercambiar documentos entre autores y editores. Uno de los usos ms importantes fue la documentacin de proyectos para propsitos de defensa.

Lenguaje de Marcado
Entretanto, el lenguaje de marcado generalizado era aceptado como una especificacin estndar denominada SGML (Standard Generalized Markup Language). El auge surge cuando Tim Berners Lee aplic SGML a la WWW para publicar contenido. El marcado se refiere a las etiquetas (Tags) especiales que se incluyen en el texto solicitado por el usuario, para realizar operaciones especiales. Un cdigo de marcado es identificado nicamente en un pasaje de texto por sus especificaciones y restricciones. SGML es un meta lenguaje que puede usarse para definir lenguajes de marcado estructurales.

HTML
El HTML fue desarrollado para permitir que los documentos WWW incluyan texto, imgenes, tablas, hiperenlaces y archivos animados. Los documentos web estn presentes en el servidor como archivos HTML. El HTML es una extensin del SGML, se puede usar para proporcionar el esquema para ordenar el contenido web y mostrar caractersticas animadas. Un archivo HTML tendr extensin .htm o .html. Dado que el navegador web lee el archivo HTML por medio de etiquetas HTML especficas, la pgina web mostrada como salida puede variar de un navegador a otro navegador.

HTML
Beneficios del HTML:
Se pueden compartir grandes cantidades de datos a travs del mundo. El HTML es bsicamente formato ASCII, por lo que la posibilidad de corrupcin de los datos por la red es mucho menor. Dado que es un lenguaje de marcado, es fcil para desarrollar y simple de comprender. El HTML es fcil de aprender ya que tiene un conjunto de etiquetas.

Conceptos sobre HTML

Todos los archivos HTML aparecen en forma de simples archivos de texto con imgenes, sonidos o videos. El conjunto de pginas HTML relacionadas se pueden enlazar unas con otras usando hiperenlaces. Los hiperenlaces pueden ser texto o imagen. El usuario puede hacer clic en los hiperenlaces para cargar una nueva pgina en el navegador. Cualquier cdigo HTML comprende dos componentes: etiquetas y atributos. Mientras que las etiquetas permiten que el texto HTML lleve a cabo un determinado proceso como formatear o enlaces, los atributos controlan la presentacin y aspecto (look and feel) de los textos.

Crear Pginas HTML

Los dos componentes principales que ayudan al desarrollo de pginas HTML, son:
Editores de HTML Navegadores web

Los editores de HTML son programas que ayudan a los usuarios a construir pginas HTML a travs de cdigo de marcado. Los navegadores web son programas que ayudan a los usuarios a visualizar y validar las pginas HTML.

Editores HTML y Navegadores Web

Documento HTML

Editores HTML

Navegadores WEB

Base Texto o Color

WYSIWYG

Navegadores de Texto

Navegadores Grficos

Elementos HTML
Etiquetas.
Las etiquetas HTML deciden la naturaleza del formato que se va a aplicar a los documentos HTML. Las etiquetas tienen un conjunto de atributos posibles que deciden la extensin y el estilo del formato que se va a aplicar. Las etiquetas HTML son simples y fciles de usar. Aparecen entre corchetes angulares (<>). Cada etiqueta abierta <ALGO>, generalmente es cerrada por su contraparte de cierre </ALGO>. Tambin podemos tener etiquetas anidadas, <B><I> Informacin </I></B>

Elementos HTML
Atributos.
Cada etiqueta tiene un conjunto de atributos posibles asociados a sta. Los atributos se utilizan para manejar requerimientos de formatos. El formato de texto puede incluir elementos como alineacin, ancho, tamao, etc. Los atributos se agregan colocando nombredeatributo = value, dentro de las etiquetas HTML. Ejemplo:
<H1 ALIGN=CENTER>Encabezado centrado</H1>

Programar las Etiquetas

<!DOCTYPE>
La etiqueta <!DOCTYPE> proporciona a los navegadores (y servicios de validacin) la versin del HTML con la que coincide el documento. Las especificaciones del HTML 3.2 y 4.0 sugieren el uso de esta etiqueta no emparejada, y por lo tanto, debemos usarla en todos nuestros documentos.
<!DOCTYPE HTML PUBLIC -W3C//DTD HTML 3.2 Final// EN> Nota: Las etiquetas emparejadas encierran algn texto entre ellos, las etiquetas no emparejadas, no requieren una etiqueta de cierre.

<HTML>
La etiqueta HTML especifica que el documento es un documento HTML. Tcnicamente, esta etiqueta es una redefinicin cuando la etiqueta <!DOCTYPE> est presente.

Programar las Etiquetas

<HEAD>
La informacin acerca del documento se especifica en la etiqueta <HEAD>. La informacin puede referirse al ttulo del documento, scripts utilizados, definiciones de estilos y otras descripciones del documento. No todos los navegadores requieren esta etiqueta, pero la mayora de los navegadores esperan encontrar alguna informacin disponible acerca del documento en la etiqueta <HEAD>. La etiqueta <HEAD> tambin puede contener otras etiquetas que tienen informacin para los motores de bsqueda y programas de indexado.

Programar las Etiquetas

<TITLE>
Esta etiqueta contiene el ttulo del documento que es requerido por las especificaciones 3.2 y 4.0 de HTML. El ttulo no es visible en la ventana del navegador, aunque puede encontrarse en la barra de ttulo del navegador. En esta etiqueta, se incluye una breve descripcin del contenido del documento.

<BODY>
La etiqueta <BODY> cubre todas las etiquetas, atributos e informacin que van a aparecer en el navegador del visitante.

Ejemplo del uso de las Etiquetas

<!DOCTYPE HTML PUBLIC-//W3C//DTD HTML 4.0 Final//EN> <HTML> <HEAD> <TITLE> La etiqueta de Ttulo va aqu. </TITLE> </HEAD> <BODY> Todas las etiquetas, atributos e informacin en el cuerpo del documento van aqu. </BODY> </HTML>

Otras Etiquetas
Etiquetas de Encabezado. <H1> es el ms grande de los encabezados, y <H6> el ms pequeo. <H1>Encabezado 1</H1> <H2>Encabezado 2</H2> <H3>Encabezado 3</H3> <H4>Encabezado 4</H4> <H5>Encabezado 5</H5> <H6>Encabezado 6</H6> Etiquetas de Prrafos. <P> Un prrafo completo va justo aqu </P> <P ALIGN=CENTER> El prrafo de la informacin centrado aqu <P>

Otras Etiquetas
Formato de Prrafo
<ADDRESS>

Efecto
Utilizado para informacin de direccin y contacto.

<BLOCKQUOTE>

Utilizado para formatear entre una comilla. Generalmente aparece indentado en ambos lados y tiene menos espacio entre lneas que un prrafo regular.
Efectivo para formatear el cdigo del programa o informacin similar. Generalmente en un tipo de letra fijo, con amplio espacio entre palabras y lneas.

<PRE>

Otras Etiquetas
Etiquetas de Salto de Lnea
<P> Hola Hola Hola Hola<BR> Hola Hola Hola Hola<BR> Hola Hola Hola Hola Hola<BR> Hola Hola Hola Hola Hola Hola</P>

Etiqueta de Formato a Nivel Carcter

<P>Este es el comienzo del siguiente prrafo</P> <P> <B> Este es el final del prrafo, se utiliza el atributo negrita de la fuente</B> </P>

Otras Etiquetas
Etiqueta de Carcter
<B> <BLINK> <CITE> <CODE> <EM> <I> <S>, <STRIKE> <STRONG> <SUB> <SUP> <TT> <U> <VAR> Aplica Negrita. Realiza parpadeo de texto, considerado muy antiprofesional. No funciona en Internet Explorer pero en Netscape s. Indica citas o referencias. Muestra cdigo de programa, similar a la etiqueta <PRE>. Aplica nfasis, generalmente mostrado como cursiva. Aplica Cursiva. Aplica apariencia de tachado al texto. Aplica nfasis ms fuerte, generalmente mostrado como negrita. Presenta el texto como subndice. Presenta el texto como superndice. Aplica un tipo de letra de ancho fijo. Aplica subrayado. Muestra variables o argumentos

Efecto

Otras Etiquetas
Etiquetas de Listas
Lista No Ordenada: <UL> <LI> Productos Chupa Melo C.A. </LI> <LI> Servicios Marca Gada S.A. </LI> </UL> Lista Ordenada: <OL> <LI> Caramelitos Chupa Melo </LI> <LI> Laca Gada 450Gr. </LI> </OL>

Otras Etiquetas Smbolos Especiales

Carcter
& < > X /

Referencia de Entidad
&quot; &amp; &lt; &gt; &times; &divide; &alpha; &beta;

Carcter

Referencia de Entidad
&kappa; &lambda; &mu; &un;

&xi;
&omicron; &pi; &rho; &sigma; &tau; &phi; &chi; &psi; &omega;

&gamma;
&delta; &epsilon; &zeta; &eta; &theta; &iota;

Otras Etiquetas
Etiqueta de Regla Horizontal <HR>
Atributo de la Regla
SIZE=n WIDTH=n

Efecto
Especifica el tamao de la regla Especifica el ancho de la regla Especifica el ancho de la regla (longitud), medido como un porcentaje de ancho del documento Especifica alineacin a la izquierda Especifica alineacin a la derecha Especifica alineacin al centro Especifica que la regla no tiene sombra

WIDTH=n%
ALIGN=LEFT ALIGN=RIGHT ALIGN=CENTER NOSHADE

Elementos Grficos Colores de Fondo

<HTML> <BODY BGCOLOR=#000000 TEXT=#FFFFFF> Bienvenidos a Web Programming!!! </BODY> </HTML>
R(Rojo) G(Verde) B(Azul)

00 33 66

00 33 66

00 33 66

99
CC FF

99
CC FF

99
CC FF

Elementos Grficos Establecer Colores de Texto

<HTML> <BODY TEXT=#000000> Web Programming! </BODY> </HTML>
Atributo
TEXT= ALINK= VLINK= LINK=

Descripcin
Establece el color para todo el texto del documento con un nombre de color o un valor #RRGGBB.

Establece el color para enlaces activos, con un nombre de color o un valor #RRGGBB.
Establece un color para enlaces que el visitante ha seguido recin, con un nombre de color o un valor #RRGGBB (cun recientes, depende de las configuraciones del navegador). Establece el color para los enlaces no visitados con un nombre de color o un valor #RRGGBB.

Ejemplos

<HTML> <BODY TEXT=#F000F LINK=#993366 VLINK=#0033FF ALINK=#000000> Este es un simple texto que no contiene enlace.<BR><BR> <a href=http://www.mocosoft.com> Este es un enlace no visitado</a><BR><BR> <a href=http://www.youtube.com> Este es un enlace visitado</a><BR> <BODY> <HTML> ______________________________________________________ <FONT FACE=Technical, Courier New, Times New Roman SIZE=+4> Mira esto chico!</FONT>

Etiquetas y Atributos de las Fuentes de Caracteres

Etiqueta/Atributo <FONT> Descripcin Coloca las caractersticas de la letra para el texto. Especifica el tamao relativo en una escala de 1 a 7. Tres(3) es un tamao normal por defecto. Tambin podemos especificar el tamao relativo usando + o -, o por ejemplo +2.

SIZE=

COLOR=

Especifica el color de letra en #RRGGBB o nombres de color. Este color se aplica solo al texto encerrado entre las etiquetas <FONT>.
Especifica las presentaciones del tipo como una lista de posibles presentaciones, en el orden de la preferencia, separado por comas. Ajusta el tamao predeterminado del texto.

FACE= <BASEFONT>

Hiperenlaces
Los hiperenlaces (tambin llamados anchors anclas) son texto o imgenes que actan como ruta a otros documentos HTML, imgenes, applets, efectos multimedia, o lugares especficos dentro del documento HTML. Se componen de las siguientes tres (3) partes:
Una etiqueta ancla <A> que marca el texto o imagen como enlace. Un atributo HREF=, que se coloca dentro de la etiqueta ancla de apertura. Una direccin (el URL) que indica a los navegadores a donde enlazar

Si el URL del atributo HREF de a etiqueta <A> no empieza con un protocolo, el navegador asume que el enlace es a un documento en el mismo host. Estos tipos de URLs se denominan URLs relativos.

Hiperenlaces
Por ejemplo, considere una pgina http://www.cisco.com/certify/test.html cargada del sitio web de CISCO. La pgina tendr un hiperenlace como <A HREF=./page2.html> Esto se traduce como http://www.cisco.com/certify/page2.html NOTA: ./ se traduce como el directorio actual.

Enlazar a documentos en la misma carpeta. <A HREF=Curso2.html> El texto del enlace va aqu</A>

Hiperenlaces
Enlazar a un documento en una carpeta diferente. Para crear un enlace de Mainframe.html, ubicados en diferentes carpetas, se debe incluir un URL que contiene dos piezas de informacin.
Un nombre de carpeta, que especifca la carpeta en el servidor. Un nombre y extensin de archivo, que especifica el archivo exacto para mostrar el enlace.

Puede verse como: <A HREF=../Products/Mainframe.html>Mainframe servers</A>

Hiperenlaces
Enlazar a documentos de la Web. <A HREF=http://www.gmail.com/Login/Login.php> link</A> Enlazar a una ubicacin especfica de un documento.
Formar ancla de nombre: <A NAME=location>Aqu va una ubicacin</A>

Enlazar a anclas de Nombre. <A HREF=http://www.cisco.com/information/services.html> Link</A>

Hiperenlaces (Etiquetas Ancla de Nombre)

Desde dentro
El mismo documento La misma carpeta, diferente documento El mismo servidor (diferente carpeta y documento, URL relativo al servidor) Un servidor diferente

El enlace se ve como
<A HREF=#proposals /A> <A HREF=services.html#proposals/A> <A HREF=information/services.html# proposals/A> <A HREF http://www.google.co.ve/information/services.html#propos als>Link</A>

Hiperenlaces
Insertar Enlaces de Correo Electrnico.
<A HREF=mailto:chupito@tumamasita.com> Send Feedback</A>

Hiperenlaces (Ejemplo)
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Final//EN> <HTML> <HEAD> <TITLE> Catalogo deProductos</TITLE> <HEAD> <BODY> <H3 ALIGN=CENTER> Productos Cisco</H3> <HR> <P ALIGN=LEFT><B>Servidores</B> <UL> <LI> Servidores Mainframe</LI> <LI>UNIX</LI> </UL> </P> <B>Programas</B> <OL> <LI>Aplicaciones de Desarrollo</LI> <LI>Grficas &nbsp;&nbsp;&nbsp;&nbsp; <FONT COLOR=#0000FF> <B> Multimedia </B> </FONT> </LI> <LI>Groupware <FONT COLOR=#0000FF> <B>&nbsp;&nbsp;Productivity</B> </FONT> </LI> </OL> <LI><A HREF=http://www.cisco.com> www.cisco.com </A></LI> </BODY> </HTML>

Tablas HTML
Crear Tablas.
Una de las plantillas ms bsicas es la tabla de dos columnas, donde cada columna tiene un nmero especfico de celdas.

Etiqueta
<TABLE> <TR> <TD> <TH>

Uso
Crea una tabla dentro de un documento HTML. Crea una fila dentro de una tabla. Crea una celda en una fila. Crea una celda de ttulo dentro de una fila

Tablas HTML
<HTML> <HEAD></HEAD> <BODY> <TABLE> <TR>
<TH></TH> <TH></TH>

<TR> <TD></TD> <TD></TD> </TR> <TR>

<TD></TD> <TD></TD>

</TR> <TR>
<TD></TD> <TD></TD>

</TR> <TR>
<TD></TD> <TD></TD>

</TR> </TABLE> </BODY> </HTML>

</TR>

Tablas HTML
Agregar o Quitar Filas y Columnas. Una vez que se ha creado la tabla, es muy fcil agregar o quitar datos de sta.
Agregar Filas. 2 Se puede agregar una nueva fila agregando etiquetas adicionales <TR> y <TD> al cdigo HTML donde debe aparecer la nueva fila. Agregar Columnas. 3 Se pueden crear nuevas columnas dentro de una tabla agregando las etiquetas <TH> o <TD> a cada una de las filas.

Tablas HTML
Extender Filas y Columnas.

Atributo
ROWSPAN=n

Uso
Asignados a las etiquetas <TH> o <TD>, denota el nmero de filas que se van a extender en una celda. Por ejemplo, ROWSPAN=6, fusiona seis filas. Utilizados en las etiquetas <TH> o <TD>, indica el nmero de columnas que se van a extender en una celda. Por ejemplo, COLSPAN=4, fusiona cuatro columnas.

COLSPAN=n

Tablas HTML
Extender Filas y Columnas.
Extender Filas. 4 Se pueden fusionar filas adyacentes usando la etiqueta <TH> y <TD>, dependiendo si se est expandiendo un ttulo de una tabla o datos de una tabla. Extender Columnas.5, 6 y 7 Las columnas tambin se pueden fusionar usando las etiquetas <TH> o <TD>, dependiendo si se est extendiendo un ttulo o una celda de una tabla.

Tablas HTML
Agregar Ttulos (Captions) 8

Etiqueta/Atributo
<CAPTION> ALIGN=

Uso
Asignado dentro de una tabla para identificar texto del ttulo de una tabla. Agregar ttulo en la parte superior o inferior de una tabla.

Tablas HTML
Agregar Bordes. 9
Crear Bordes de Tablas.
Atributo
BORDER=n BORDERCOLOR=#RRGGBB

Uso
Define el ancho del borde de la tabla (medido en pixels). BORDER=0 elimina el borde. Define el color del borde como un nmero #RRGGBB o un nombre de color.

Especificar Tabla sin Borde <TABLE BORDER=0>

Tablas HTML
Aplicar Color de Fondo a la Tabla.
<TABLE BGCOLOR=#RRGGBB>

Incluir una Imagen de Fondo en la Tabla.

<TABLE BACKGROUND=C:\..\..\chicaseisi.jpg>

Especificar la Alineacin de la Celda.

ALIGN=n Define alineamiento horizontal del contenido de la celda (LEFT, CENTER, RIGHT). VALIGN=n Define alineamiento horizontal del contenido de la celda (TOP, MIDDLE, BOTTOM, BASELINE).

Tablas HTML
Especificar el Tamao de la Celda.
WIDTH=n Define el ancho de la celda (pixels o porcentaje del ancho de tabla). NOWRAP Deshabilita el plegado (dividir la lnea) de texto en la celda. Todo el texto aparecer en una lnea.

Agregar Espaciado de Celdas y Rellenos.

CELLSPACING=n Define la cantidad de espacios entre celdas en pixels. CELLPADDING=n Define la cantidad de espacio entre el contenido y el borde de la celda en pixels.

Tablas HTML
Especificar Alineacin, Ancho y Plegado de texto en la Tabla.
WIDTH=n Define el ancho de tabla (porcentaje de la ventana o pixels). ALIGN= Define la alineacin de la tabla como LEFT, RIGHT (BLEEDLEFT, BLEEDRIGHT, y JUSTIFY para Internet Explorer).

Crear Formularios HTML

Los formularios son herramientas a travs de los cuales, un sitio web obtiene entradas de los visitantes. Un formulario puede estar definido como un rea de la pgina HTML, conteniendo elementos de entrada que permiten al usuario ingresar informacin. Un formulario tiene varios controles que se usan para recoger informacin. Cuando un visitante completa y enva el formulario, la informacin de los controles en el formulario es redireccionada a un programa, el cual ejecuta las acciones necesarias. La creacin de formularios involucra dos etapas bsicas: La parte que es visible y es llenada por el visitante. La parte que no es visible al visitante y que especifica como el servidor debe procesar la informacin.

Formularios HTML
Controles de un Formulario.
Botones Submit y Reset: El botn Submit (Enviar) se usa para enviar la informacin en un formulario a un servidor para su procesamiento, mientras el botn Reset (Restaurar) se usa para regresar a la informacin inicial del formulario. Campos de Texto: Son reas en blanco en el formulario donde el visitante puede ingresar informacin de texto desde el teclado, como son nombre y direccin. Botones de Radio: Se usan cuando los visitantes tienen que que escoger una nica opcin de un listado. Son usados para opciones como Masculino o Femenino. Cajas de Verificacin: (Check Boxes) Permiten a los visitantes seleccionar uno o ms tems desde una lista de opciones. Areas de Texto: (Text Area) son campos para el ingreso de textos extensos. Listas de Seleccin: (Selection Lists)Permiten a los visitantes seleccionar uno o ms tems desde una lista de opciones. Estas tambin son llamados listas desplegables o (drop-down).

Formularios HTML
Crear un Formulario y agregar un botn de Submit y de Reset.
El primer paso en la creacin de un formulario es insertar la etiqueta <FORM> dentro de la etiqueta <BODY> y agregar los botones de Submit y Reset.

Etiqueta/Atributo
<FORM> <INPUT TYPE= SUBMIT VALUE=>

Uso
Indica un formulario documento HTML. dentro de un

Agrega un botn Submit al formulario. El atributo Value permite agregar texto en el botn.

Agregar un botn Submit grfico. El <INPUT TYPE= IMAGE NAME= POINT atributo SRC= especifica el archivo fuente SRC= BORDER= 0> de la imagen. <INPUT TYPE= RESET VALUE=> Agregar un botn Reset al formulario.

Formularios HTML
Campos de Entrada General.
Etiqueta/Atributo
<INPUT> TYPE=.. NAME= VALUE= SIZE= MAXLENGTH=n CHECKED ACCEPT=

Uso
Especifica un rea dentro del formulario para la entrada de datos del visitante. Define el tipo de campo de entrada, como son TEXT, PASSWORD, CHECKBOX, RADIO, FILE, HIDDEN, IMAGE, SUBMIT y RESET. Indica el nombre del elemento para el que el valor pertenece. Especifica el contenido asociado con NAME=.

Define el tamao de los caracteres que pueden ser enviados.

Define el mximo nmero de caracteres que el usuario puede ingresar en el campo de entrada. Especifica la seleccin por defecto cuando el formulario se carga o restaura. Funciona solo con Check Box y Radio. Define aceptables tipos de MIME para cargar archivos.

Formularios HTML
Campos de Texto. 1 Botn de Radio. 2 Caja de Verificacin. 3 Areas de Texto. 4 Listas de Seleccin. 5 Procesamiento de Formularios. 6
Atributo
ACTION= METHOD=

Uso
Especifica el programa en el servidor HTTP que procesar la salida del formulario. Instruye al navegador si enviar los datos al servidor por el mtodo POST o el mtodo GET.

Imgenes
Imgenes en un documento HTML.
Formatos de imgenes:
Formato imagen GIF. (Graphic Interchange File)
Soporta Transparencia, Animacin, Entrega Progresiva y menor perdida de compresin.

Formato JPG/JPEG. (Joint Portable Expert Group) Formato PNG. (Portable Network Graphics)

Agregar Imgenes. 1 Crear Thumbnails. (Miniaturas) 2 Usar Imgenes como enlace. 2

Imgenes
Crear Mapas de Imagen.
Etiqueta/Atributo
USEMAP= ISMAP <MAP> <AREA> SHAPE= HREF= NOHREF

Uso
Indica la definicin del Mapa de cliente a utilizar. Atributo de la etiqueta <IMG>. Define el mapa de imagen del lado del cliente. Atributo de la etiqueta <IMG>. Define el bloque de definicin de mapa dentro de un documento HTML. Define un rea en el documento HTML. Especifica la forma de un rea (RECT, CIRCLE o POLY). Define un destino para el rea. Define que esta rea no conecta a ningn URL.

COORDS=x, y
ALT

Define la forma de un rea.

Especifica texto alternativo (o texto emergente pop-up) describiendo el enlace.

Imgenes
<MAP NAME=Zonas_Rojas> <AREA SHAPE=CIRCLE COORDS=82, 43, 30 HREF=can32.html ALT=Indice del Mapa> <AREA SHAPE=RECT COORDS=1,209, 516, 320 HREF=can43.html ALT=Barcelona> <AREA SHAPE=POLY COORDS=1,209, 516, 320 HREF=can56.html ALT=Guanta> <AREA SHAPE=POLY COORDS=1,209, 516, 320 HREF=can64.html ALT=Puerto La Cruz> <AREA SHAPE=default NOHREF> </MAP> <CENTER> <IMG SRC=algo.jpg WIDTH=516 HEIGHT=320 BORDER=0 ALT=Zonas Rojas Calientes USEMAP=#Zonas_Rojas> </CENTER> amr diab

Marcos (Frames)
Los marcos (Frames) HTML permiten mostrar ms de un documento simultneamente en el navegador. Se pueden mostrar mltiples pginas en una ventana deslizable separada, en la misma instancia del navegador. Los marcos se usan para dividir ventanas de navegadores en varias secciones independientes, cada una de las cuales puede contener un documento HTML por separado.

Marcos (Frames)
Al crear marcos, se deben considerar los siguientes puntos:
Cada marco se va a considerar como un documento HTML completo. Se si quiere dividir una pgina en dos marcos adyacentes, se debe colocar un documento HTML completo en el marco izquierdo y otro en el derecho. Tambin se tendr que crear otro documento HTML (documento padre), que contendr las etiquetas <FRAME>. Las etiquetas <FRAME> especifican lo que finalmente debe aparecer en dicha ubicacin. Un archivo que especifica como ser dividida la pantalla en marcos se denomina frameset. Cuando un sistema carga una pgina frameset (conjunto de marcos) , el navegador automticamente carga cada una de las pginas asociadas con los marcos.

Marcos (Frames)
Los marcos pueden ser divididos horozontal o verticalmente. Tambin es posible anidar marcos dentro de marcos.

Ventajas de Usar Marcos.

Los marcos se usan ampliamente en internet dado que brindan una apariencia esttica a los contenidos de la pgina web. Los marcos reducen el tiempo de descarga de un sitio web. Los visitantes pueden descargar solo las pginas de contenidos, mientras los elementos estticos como logotipos y mens de navegacin se tendrn que cargar solo una vez. Los marcos mejoran la utilizacin de un sitio web. La navegacin queda visible ya que el contenido cambia en un marco separado. Los marcos permiten a los desarrolladores desarrollar contenido de navegacin y elementos estructurales. Esto ayudara a una fcil y rpida actualizacin de contenido.

Marcos (Frames)
Desventajas de Usar Marcos.
Los navegadores ms antiguos no soportan marcos. La produccin del sitio puede ser ms complicada ya que los desarrolladores necesitan producir y organizar diversos archivos para completar una pgina. La navegacin a travs de un sitio con marcos puede ser muy frustrante para algunos usuarios. Un sitio web que utiliza marcos no permiten que los visitantes marquen pginas favoritas (bookmark) dentro de un documento con marcos. Numerosos marcos en un sitio web pueden incrementar la carga del servidor, como resultado de demasiadas peticiones de documentos. Los sitios web que utilizan marcos pueden causar problemas a los motores de busqueda. Es muy difcil rastrear una pgina actual en un sitio web que utiliza marcos.

Marcos (Frames)
Crear Marcos.
Determinar el tamao de los marcos que van a ser creados. Crear un documento frameset que determine la ubicacin y caractersticas de los marcos. Designar los marcos y sus contenidos. Dar formato a los marcos. Tomar previsiones con los marcos cuando se visualicen en navegadores no enmarcados.

La etiqueta <FRAMESET> le indica al navegador como dividir la ventana de la pgina en filas y columnas, y cuan grandes deben ser estas filas y columnas. La etiqueta <FRAME> especifica al navegador lo que debe colocarse en las filas y columnas.

Marcos (Frames)
Etiqueta/Atributo <FRAMESET> ROWS=n1, n2, COLS=n1, n2, <FRAME> NAME= <NOFRAME> Uso Define marcos dentro del documento HTML. Especifica el tamao de marcos horizontalmente. (en pixel o en porcentaje o como porcin del espacio restante con *) Especifica el tamao de marcos verticales. Indica la fuente de las caractersticas del marco y el contenido inicial. Nombra un marco para que pueda ser referenciado hacia o desde otros marcos o ventanas. Especifica una seccin de un documento HTML. Esta ser visible en los navegadores que no soportan marcos.

Marcos (Frames)
Atributo
NAME= FRAMEBORDER=n BORDER=n Indica el nombre del frameset. Especifica o termina el borde del frame. Usado en conjunto con el atributo BORDER, Especifica o termina el borde alrededor del marco. Utilizado en conjuncin con el atributo FRAMEBORDER. Previene que los visitantes cambien el tamao de un marco. Los visitantes pueden hacer click y arrastrar el ratn para mover los bordes del marco si falta este atributo. Controla las barras de desplazamiento. Los posibles valores son YES, NO, AUTO. AUTO especifica que las barras de desplazamiento deben aparecer si la ventana del navegador se cambia de tamao y el documento no est completamente visible Especifica el tamao del margen en pixels en la parte inferior y superior del marco. Especifica el tamao del margen a la izquierda y derecha del contenido del marco. Define el color del borde del marco como un valor #RRGGBB.

Uso

NORESIZE

SCROLLING=

MARGINHEIGHT=n MARGINWIDTH=n BORDERCOLOR=

Marcos (Frames)
Crear Conjuntos de Marcos. 1 Agregar Marcos. 2,3 Agregar Marcos al Conjunto de Marcos Existente. 4,5 Combinar Conjunto de Marcos Horizontales y Verticales. 6 Quitar Bordes. 7 Evitar Redimensin de los Bordes. 8 Color de los Bordes. 9 Mrgenes de los Marcos. 10

Marcos (Frames)
Etiqueta/Atributo
<IFRAME> SRC=URL NAME= FRAMEBORDER=n SCROLLING= MARGINHEIGHT=n

Uso
Define las caractersticas y el contenido inicial. Especifica la fuente para el contenido del marco como un URL estndar. Nombra un marco para que pueda ser designado o referido desde otros marcos o ventanas. Especifica o termina los bordes alrededor de los marcos. Controla las barras de desplazamiento. Los valores posibles son YES, NO y AUTO. Especifica el tamao del margen en pixels desde arriba y abajo del contenido del marco.

MARGINWIDTH=n
ALIGN=

Especifica el tamao del margen en pixels a la derecha e izquierda del contenido del marco.
Especifica la alineacin como LEFT, RIGHT, MIDDLE, TOP o BOTTOM.

Marcos (Frames)
Crear Marcos Flotantes. 1

Hojas de Estilos (CSS)

Hojas de Estilo.
Las hojas de estilo, formalmente conocidas por la W3C como Cascading Style Sheets, ayudan a formatear los documentos HTML fcil y consistentemente. Insertar todas las etiquetas de formato manualmente puede ser muy tedioso. Con las hojas de estilo una vez que se ha especificado el formato, se aplica a lo largo del documento.

Ventajas de Usar Hojas de Estilo.

Proporcionan ms control sobre cmo aparecen los documentos en los navegadores. Reducen el tiempo invertido en desarrollar y mantener documentos HTML. Proporcionan flexibilidad. Incluso si una hoja de estilo aplica a todas las pginas del sitio web, se pueden especificar estilos individuales que apliquen a documentos particulares.

Hojas de Estilos (CSS)

Implementar Hojas de Estilo.
Desarrollar la hoja de estilo completa con todas las opciones de formato. Conectar (o asociar) la hoja de estilos al documento HTML.
NOTA: Habr dos tipos de documentos, los documentos HTML y las hojas de estilo. Los documentos HTML contendrn el contenido, mientras que las CSS contendrn la informacin de formato.

Desarrollar Hojas de Estilo.

Propiedades de Fuente: Especifican el formato a nivel de carcter (inline) tal como el tipo de letra. Propiedades de Texto: Especifican caractersticas de presentacin de texto como alineacin o espacio de letras Propiedades de Caja: Especifican caractersticas de secciones de texto a nivel de prrafo (o bloque). Propiedades de Color y Fondo: Especifican el color y las imgenes de fondo a nivel de prrafo (o bloque). Propiedades de Clasificacin: Especifican las caractersticas de presentacin de las listas y los elementos (como P o H1) a nivel de lnea o bloque.

Hojas de Estilos (CSS)

Etiqueta/Atributo
<STYLE> <!-- --> TYPE=text/css @import url()

Uso
Define el rea de hoja de estilos dentro de un documento HTML. Esta etiqueta de comentario, oculta los contenidos de la hoja de estilos de los navegadores que no soportan estilos. Define el tipo de hoja de estilos. Importa una hoja de estilos. El tratamiento es URL (http://mystyles.com/new.css).

Hojas de Estilo (CSS)

Asociar Hojas de Estilos a Documentos HTML.
Incrustar la hoja de estilos en el documento HTML definindola entre las etiquetas <HEAD> de apertura y cierre. Almacenar la hoja de estilos en un documento separado y luego enlazar o importar las hojas de estilos para asociarlas con el documento HTML. Utilizar definiciones de estilo interno o individual (inline).

Incrustar Hojas de Estilos en el Documento HTML. 1 Importar Hojas de Estilos. 2 Enlazar Hojas de Estilos. 3

Hojas de Estilos (CSS)

Etiqueta/Atributo Uso Referencia a una hoja de estilos.

<LINK>

REL=Style Sheet Define el archivo referenciado en una hoja de estilos. TYPE=text/css HREF=URL Define el tipo de hoja de estilos a ser usada. Indica la hoja de estilos como un URL estndar. Nombra la hoja de estilos. Las hojas de estilos sin nombres siempre se aplican. Las hojas con nombre se aplican por defecto o se proporcionan como opciones. Esto depende del atributo REL usado.

TITLE=

Hojas de Estilos (CSS)

Aplicar Clases Documentos. 4
Etiqueta/Atributo
<SPAN> <DIV> CLASS= ID=uniqueen

de

Estilos

Partes

de

Uso
Contiene atributos de estilos. Los aplica al cdigo HTML entre las etiquetas de apertura y cierre. Contiene los atributos de estilo. Los aplica al cdigo HTML entre las etiquetas de apertura y cierre. Enlaza a una clase de estilos hacia una parte especificada de un documento HTML. Proporciona un nombre nico para una definicin de estilo especfica. Esto puede usarse solo dentro de una hoja de estilos.

Hojas de Estilos (CSS)

Aplicar Definiciones de Estilos Internos (inline). 5

Etiqueta/Atributo

Uso Todas las etiquetas HTML incluyendo <BODY> pueden soportar definiciones de estilos. Usa definiciones de estilo interno, que aplicamos como atributo a las etiquetas HTML. La definicin de estilos se coloca dentro de comillas.

Cualquier Etiqueta HTML

STYLE=

Contenido Activo
GIFs Animados. <IMG SRC=animated2.gif WIDTH=99 HEIGHT=16 BORDER=0 ALT=GIF Animado> <A HREF=camping.html> Noticias de Camping</A>

Contenido Activo
Sonidos.
Etiqueta/Atributo
<EMBED>

Descripcin
Inserta un objeto incrustado en un documento

<ALIGN = >
HEIGHT=n HIDDEN NAME= PARAM= SRC=URL WIDTH=n AUTOSTART= HIDDEN= LOOP=n, INFINITE <BGSOUND>

Define el posicionamiento del objeto incrustado, relativo al documento y contenidos circundantes

Define la dimensin vertical del objeto incrustado Oculta el objeto incrustado Nombra el objeto para que otros objetos puedan referenciarlo Define parmetros adicionales Especifica la ubicacin del archivo que contiene el objeto Especifica la dimensin horizontal del objeto incrustado Especifica cuando debe abrirse el archivo de sonido (cuando la pgina sea accesada o cuando se pulse un botn) Controla la visibilidad del cuadro de control de sonido Define el nmero de veces que debe repetirse el sonido de fondo. Especifica la ubicacin relativa o absoluta del archivo de sonido.

Lenguajes Script
Aparte de los marcos y estilos, tambin podemos agregar distintos lenguajes script a los documentos HTML para hacerlos ms amigables al usuario. Un ejemplo, es JavaScript. JavaScript es un lenguaje poderoso y til, aunque no es un lenguaje de programacin antguo. Los documentos HTML que incluyen JavaScript pueden interactuar con los visitantes, los procesos y verificar la informacin que los visitantes proporcionan e incluso entregar informacin apropiada a cada visitante. Para trabajar con JavaScript, se debe estar familiarizado con los siguientes conceptos:

Lenguajes Script (JavaScript)

Objeto: Un objeto es una entidad como la caja de verificacin (checkbox) de un formulario, el formulario mismo, una imagen, un documento, un enlace, o incluso una ventana del navegador. Propiedad: Una propiedad describe un objeto. Las propiedades pueden ser cualquier cosa, desde color a nmero de items de un objeto. Por ejemplo, el nmero de elementos en la lista Select es una propiedad. Mtodo: Un mtodo es una instruccin. Los mtodos disponibles para cada objeto describen lo que se puede hacer con el objeto. Por ejemplo, utilizando un mtodo podemos convertir todo el texto de un objeto a maysculas o minsculas. Sentencia: Es una sentencia de lenguaje script. Combina objetos, propiedades y mtodos. Funcin: Una funcin es una coleccin de sentencias que realizan acciones. Las funciones contienen una o ms sentencias y pueden ser consideradas como prrafos de un lenguaje script. Manejador de eventos: Un manejador de eventos espera a que ocurran eventos, como el movimiento del ratn sobre un enlace y luego lanza un script basado en ese evento. Por ejemplo, el manejador del evento onMouseOver realiza una accin cuando el visitante mueve el puntero del ratn sobre el objeto.

JavaScript
Caractersticas de JavaScript
JavaScript adopta una tecnologa basada en objetos, lo que significa que proporciona un conjunto de objetos del navegador predefinidos. JavaScript permite a los usuarios definir objetos para su uso en el script.

JavaScript est basado en un modelo manejado por eventos. En un modelo manejado por eventos, se necesita una accin apropiada en respuesta a los eventos del usuario

JavaScript
Agregar Script al Documento.
Existen tres formas de agregar un script al documento:
Incrustar el script en la pgina. 1 Ubicar el script en el head del documento. 2 Enlazar a un script almacenado en otro archivo. 3

JavaScript
Incrustar el Script. <P>La fecha de Hoy es: <SCRIPT TYPE=text/JavaScript> <! Document.write(La fecha de Hoy es: +new Date()); --> </SCRIPT> </P>

JavaScript
Agregar un Bloque Script a la Etiqueta <HEAD>. <HEAD> <TITLE> La Pgina Informativa</TITLE> <H1>Bienvenidos</H1> <P>La fecha de Hoy es: <SCRIPT TYPE=text/JavaScript> <! Document.write(La fecha de Hoy es: +new Date()); //-- > </SCRIPT> </P> </HEAD>

JavaScript
Enlazar el Script. <HEAD> <TITLE> La Pgina Informativa</TITLE> <SCRIPT SRC=funcion.js TYPE=text/javascript> <! //--> </SCRIPT> </HEAD>

PHP (Hypertext Preprocessor)

Funcionamiento de PHP.
PHP se diferencia de los Scripts CGI, hechos en Perl o C, porque estos escriben el cdigo HTML a travs de comandos, mientras que PHP se puede incorporar directamente dentro del cdigo HTML utilizando etiquetas especiales de inicio y fin (<?php ?> o <?... ?>).

PHP
Ejemplo de un Script PHP. <HTML> <HEAD><TITLE> Ejemplo sencillo de PHP </TITLE></HEAD> <BODY> <?php
echo <H1 ALIGN=CENTER>Hola a todos!</H1>;

?> </BODY> </HTML>

PHP
Existen tres formas de utilizar los scripts PHP:
Scripts del lado del Servidor: Este es la principal rea de desarrollo y uso de PHP. Para ejecutar scripts del lado del servidor se necesita el interprete PHP (CGI o mdulo), un servidor web y un navegador. Es necesario que el servidor web se est ejecutando con PHP instalado. El resultado del programa PHP se puede obtener a travs del navegador, que se comunica con el servidor. Scripts en la lnea de Comandos: Puede crear un script PHP y ejecutarlo sin necesidad de tener un servidor web ni un navegador. Solamente necesita el interprete PHP. Aplicaciones de interfaz Grfica: Probablemente PHP no sea el lenguaje ms apropiado para escribir aplicaciones grficas. Sin embargo, se pueden utilizar algunas caractersticas avanzadas en programas clientes, a travs de PHP GTK.
PHP GTK: Es la solucin PHP para escribir aplicaciones GUI del lado del cliente,.

PHP
Arquitectura de PHP.
El Motor Zend (Zend Engine): es un componente autocontenido que funciona como el parser del lenguaje. Es un interprete que analiza el cdigo de entrada, lo traduce y lo ejecuta. Adems proporciona algunas funciones bsicas del lenguaje. El ncleo PHP: implementa la mayor parte de las funciones del lenguaje. La capa SAPI (Server Application Programming Interface): son mdulos que proveen una interfaz para interactuar de forma transparente con distintos servidores web y otros servidores (por ejemplo, un servidor de servlets de Java). Esta capa provee una abstraccin del servidor web y simplifica la tarea de agregar soporte nativo para nuevos servidores. La capa SAPI logra que el funcionamiento de PHP sea independiente del servidor web que se est utilizando. SAPI incrementa la estabilidad de PHP y adems soporta servidores web multihilos . PHP actualmente posee implementaciones SAPI para Apache, Microsoft IIS, Netscape e iPlanet, AOLServer, CGI, Java, entre otros. Las extensiones PHP: son mdulos de funciones autocontenidos. Muchas de las funciones, por ejemplo el soporte a MySQL, son provistas por una extensin. Las extensiones pueden ser enlazadas a PHP en tiempo de compilacin o pueden cargarse dinmicamente segn sea requerido. Muchas extensiones son opcionales.

PHP
Cmo crear un script PHP? El cdigo PHP puede ser escrito en un editor de texto como notepad, notepad++ o wordpad. Tambin puede utilizar otros editores orientados al desarrollo web como dreamweaver, hot metal. Los archivos creados deben ser guardados con la extensin .php. Se deben colocar unas etiquetas delimitadoras de inicio y fin de cdigo PHP: <?php ?> o <? ?>. Estas etiquetas le indican al servidor que lo contenido en ese segmento es cdigo PHP y debe ser interpretado como tal.

PHP
<html> <head> <title> Etiquetas PHP - Ejemplo 2 </title> </head> <body> <?php echo (Esta es la forma recomendada para delimitar cdigo PHP <br>\n); ?> <p> Aqu estamos en modo HTML </p> <? echo (Esta es la forma abreviada de las etiquetas PHP <br>\n); ?> <script language=php> echo (En este segmento utilizamos la etiqueta SCRIPT <br>\n) </script> <%= Opcionalmente puedo utilizar las etiquetas ASP, pero esta opcin debe estar configurada en el php.ini <br>\n %> </body> </html>

PHP
Finalizacin de Sentencias.
Las instrucciones PHP finalizan con punto y coma (;), a menos que la instruccin sea la ltima antes de la etiqueta de fin de PHP.
<?php print (hola a todos!); ?>

Es equivalente a:
<?php print(hola a todos!) ?>.

Tampoco se coloca punto y coma despues de la etiqueta de inicio PHP (<?php o <?) ni despus de la etiqueta fin (?>).

PHP
Uso de las Maysculas y Minsculas.
Generalmente un lenguaje de programacin es sensible a maysculas y minsculas (case sensitive). Pero en PHP el comportamiento es muy particular. Se describen a continuacin los siguientes casos:
Las variables y constantes definidas por el usuario son sensibles a maysculas y minsculas. Las variables y constantes predefinidas de PHP son sensibles a maysculas y minsculas. Las funciones definidas por el ususario no son sensibles a maysculas ni minsculas. Las funciones incorporadas de PHP no son sensibles a maysculas ni minsculas. Es recomendable mantener la uniformidad al nombrar los diferentes elementos y as evitar confusiones.

PHP
Comentarios.
Existen tres formas de colocar comentarios dentro del cdigo PHP. Utilizar el doble backslash (//). Sirve para comentar una sola lnea. Utilizar la combinacin de caracteres /* y */. Sirve para comentar varias lneas, formando un bloque de comentarios. Utilizar el carcter numeral (#). Sirve para comentar una nica lnea.

PHP
Mostrar Salida en el Navegador.
Bsicamente para mostrar salida al navegador existen tres posibilidades:
Utilizar la Funcin print(). Con esta funcin, incorporada en PHP, se puede escribir una cadena resultado. Su sintaxis es print (s). <?php print (<strong>Muestro la salidad con PRINT</strong><br>\n); ?>

Cuando se realiza esta funcin, los saltos de lnea se colocan en el cdigo HTML que se genera. Este segmento de cdigo:
<?php print (1era parte de la cadena. 2da parte de la cadena. 3ra parte de la cadena.); ?>

Es equivalente a este otro:

<?php Print (1era parte de la cadena. \n 2da parte de la cadena. \n 3era parte de la cadena.); ?>

PHP
Utilizar la Funcin echo(). Trabaja de forma similar a la funcin print(), pero usando esta funcin se pueden escribir varias cadenas a la vez. Su sintaxis es:
echo (S1[,S2 ]).

Para escribir una sola cadena:

<?php Echo (<strong>Escribo el resultado con ECHO</strong><br>\n); ?>

Para escribir varias cadenas:

<?php Echo (1era cadena,2da cadena,3era cadena; ?>

Ntese que cuando se imprimen mltiples cadenas no se utilizan los parntesis.

PHP
Utilizar las Etiquetas <?= ?>. Esta es una forma abreviada de escribir una cadena de salida. Se utiliza de la siguiente manera:
<?=Esto es equivalente a utilizar ECHO o PRINT?>

Es importante destacar que el uso de estas funciones no est limitado solamente a cadena de caracteres. Con print(), echo() o <?= ?>, se puede escribir cualquier expresin, de la siguiente forma:

<?php print(EXPR); ?> <?php echo(EXPR); ?>. <?php echo EXPR1,EXPR2; ?> <?=EXPR ?>
Una variable que contenga un valor de cualquier tipo de dato. Una constante que contenga un valor de cualquier tipo de dato. El resultado de la evaluacin de una funcin. El resultado de la concatenacin de dos o ms expresiones.

Donde EXPR representa una expresin que puede ser:

PHP
Mi Primer Script. <html> <body> <?php $myvar = Hola, este es mi primer script en PHP \n; Echo myvar; ?> </body> </html>

PHP
Operadores Aritmticos. $a + $b = Suma $a - $b = Resta $a * $b = Multiplicacin $a / $b = Divisin $a % $b = Resto de la Divisin de $a por $b $a++ = Incremento en 1 a $a $a-- = Decremento en 1 a $a

PHP
Operadores de Cadenas. $a = Hola; $b = $a . Mundo;
Diferencia entre comillas simples y dobles.

$a = Mundo; echo = Hola $a; //Esto muestra Hola $a echo = Hola $a; //Esto muestra Hola Mundo

PHP
Operadores de Comparacin. $a < $b = $a menor que $b $a > $b = $a mayor que $b $a <= $b = $a menor o igual que $b $a >= $b = $a mayor o igual que $b $a == $b = $a igual a $b $a != $b = $a distinto o diferente de $b

PHP
Operadores Lgicos. $a AND $b = Verdadero si ambos son verdaderos $a && $b = Verdadero si ambos son verdaderos $a OR $b = Verdadero si alguno de los dos es verdadero $a !! $b = Verdadero si alguno de los dos es verdadero $a XOR $b = Verdadero si slo uno de los dos es verdadero !$a = Verdadero si $a es falso, y recprocamente

PHP
Operadores de Asignacin. $a = $b = Asigna a $a el contenido de $b $a += $b = Le suma $b a $a $a -= $b = Le resta $b a $a $a *= $b = Multiplica $a por $b y lo asigna a $a $a /= $b = Divide $a por $b y lo asigna a $a $a .= $b = Aade la cadena $b a la cadena $a

PHP
Variables. <html> <body> <?php $myvar = AZUCAR \n; $Myvar = LECHE \n; echo $myvar; echo $Myvar; ?> </body> </html>

PHP
Usos de la Barra Invertida \.
El uso de la barra invertida como en \n no es obligatorio, pero ayuda a la depuracin del cdigo que enviamos al navegador, adems de \n existen otros:

\ Carcter doble comilla. \\ Carcter barra invertida. \n Nueva lnea. \r Retorno de carro. \t Tabulador horizontal.

PHP
Constantes.
Las constantes son similares a las variables, con la salvedad de que no llevan el signo dlar delante, y slo la podemos asignar una vez. Para definir una constante usaremos la funcin define, como sigue:

<html> <body> <?php define (CONSTANTE, Hola Mundo); printf (CONSTANTE); ?> </body> </html>

PHP
Sentencias de Control. IFELSE: If (condicin) {
Este bloque se ejecuta si la condicin es VERDADERA.

} else {
Este bloque se ejecuta si la condicin es FALSA.

PHP
IFELSEIFELSE: <?php If ($nombre == ) {
echo Tu no tienes nombre;

} elseif (($nombre == eva) or ($nombre == Eva)) {

echo Tu nombre es EVA;

} else {
echo Tu nombre es . $nombre;

PHP
SWITCHCASEDEFAULT: <?php switch ($dia) {

case Lunes:
echo Hoy es Lunes; break; echo Hoy es Martes; break; echo Hoy es Miercoles; break; echo Hoy es Jueves; break; echo Hoy es Viernes; break; echo Hoy es Sabado; break; echo Hoy es Domingo; break; echo Esta cadena no corresponde a ningn da de la semana;

case Martes: case Miercoles: case Jueves: case Viernes: case Sabado: case Domingo: default: } ?>

PHP
WHILE: <?php $num = 1; while ($num < 5) {
echo $num; $num++

} ?> Podemos romper un bucle while con la sentencia break. <?php $num = 1; while ($num < 5) {
echo $num; If ($num == 3) {
echo Aqu nos salimos \n; break;

} $num++;

} ?>

PHP
DOWHILE: <?php $num = 1; do {
echo $num; If ($num == 3){
echo Aqu nos salimos \n; break;

} $num++;

} while ($num < 5); ?>

PHP
FOR: <?php for ($num = 1; $num <= 5; $num++) {
echo $num; if ($num == 3) {
echo Aqu nos salimos \n; break;

} ?>