Está en la página 1de 23

FUNDAMENTOS PARA EL

DESARROLLO DE SISTEMAS CON PHP


Tecnologas del lado cliente

Ing. Roberto Henrquez

Contenido
Tecnologas del lado del cliente
Lenguaje HTML

Cabecera y cuerpo de una pgina Web


Prrafos y saltos de lneas
Enlaces de texto
Listas
Imgenes
Tablas
Introduccin a CSS

Tecnologas del lado del servidor

Ing. Roberto Henrquez

Tecnologas del lado del cliente


Son las que se ejecutan en el navegador del usuario.
La funcionalidad es soportada por el navegador.
Como ejemplo podemos mencionar efectos o controles de
ventanas, diseos de las paginas, validaciones de
formularios, entre otros.
El cdigo para algunas funcionalidades puede incluirse en
el archivo HTML generando rpida respuesta al usuario.

Css

Ing. Roberto Henrquez

Tecnologas del lado del cliente


Para construir paginas web creamos archivos escritos en
lenguaje de hipertexto de marca (Hyper Text Markup
Languaje) o HTML.
El HTML en las paginas web, le dice al navegador todo lo
que necesita saber para desplegar la pgina.

Ing. Roberto Henrquez

Tecnologas del lado del cliente


Cabecera y cuerpo de una pgina HTML
Todo documento escrito en HTML est contenido entre las etiquetas
<HTML> y </HTML>.

Cabecera: Entre las etiquetas <HEAD> y </HEAD>:


Contiene informacin relativa al documento.
El ttulo del documento debe ir entre las etiquetas <TITLE> y
</TITLE>.
Este ttulo se mostrar en la parte superior del navegador.

Ing. Roberto Henrquez

Tecnologas del lado del cliente


Cuerpo: Entre las etiquetas <BODY> y </BODY>: Debe contener
la informacin que el usuario ver en el navegador.
<HTML>
<HEAD>
<TITLE>Pgina en HTML</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Ing. Roberto Henrquez

Tecnologas del lado del cliente


Prrafos y saltos de lneas
Los textos pueden escribirse dentro de la etiqueta <BODY>
en el orden que quiera; los navegadores no interpretan los
saltos de lneas o lneas en blanco, eliminando todos los
espacios vacos.
Para crear un salto de lnea tiene que utilizar <BR> escrito
despus del texto.
Para crear prrafos tendr que escribir el texto entre las
etiquetas <P> </P>.
Ing. Roberto Henrquez

Tecnologas del lado del cliente


<HTML>
<HEAD>
<TITLE>Pgina en HTML</TITLE>
</HEAD>
<B0DY>
<P>
Esto es prrafo <br> y tambin un salto de lnea.
</P>
</BODY>
</HTML>

Ing. Roberto Henrquez

Tecnologas del lado del cliente


Enlaces de texto
Un enlace es un mecanismo que permite dirigirse a una
pgina determinada despus de hacer clic en el texto.
Si entre las etiquetas <A> y </A> aparece algn contenido
(texto o imagen), al hacer clic la pgina ser dirigida a la
nueva direccin.
El atributo HREF contiene la direccin del enlace.
<A HREF="pagina2.htm">enlace</A>
Ing. Roberto Henrquez

Tecnologas del lado del cliente


Listas
Las listas son capaces de presentar ordenadamente una
serie de conceptos.
Los tipos de lista son:
<UL>: Lista desordenada.
<OL>: Lista ordenada.
La diferencia entre los tipos de lista radica en el carcter que
aparece en la zona izquierda de cada lnea de la lista. Las
listas desordenadas tendrn un grfico formal (una forma
geomtrica), las ordenadas tendrn un nmero de orden
Ing. Roberto Henrquez

Tecnologas del lado del cliente


Listas
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ol>

Ing. Roberto Henrquez

Tecnologas del lado del cliente


Imgenes
La etiqueta < IMG> utiliza el atributo SRC para insertar la
imagen seleccionada en el documento.
<IMG SRC="fotol.jpg" ALIGN="center">
La alineacin de la imagen con respecto a la pantalla se
puede controlar con el atributo ALIGN.

Ing. Roberto Henrquez

Tecnologas del lado del cliente


Tablas
Para definir una tabla, se tiene que insertar todos los datos
entre las etiquetas <TABLE, y </TABLE>.
A continuacin, aada las filas y las columnas de nuestras
tablas.
Para aadir una fila, tendr que utilizar la etiqueta <TR> y
para incluir una nueva columna la etiqueta <TD>.
Ing. Roberto Henrquez

Tecnologas del lado del cliente


CSS (Cascading Style Sheet)
CSS es un lenguaje de hojas de estilos creado para
controlar la presentacin de los documentos HTML.
CSS es la mejor forma de separar los contenidos y su
presentacin y es imprescindible para crear pginas web
complejas.

Ing. Roberto Henrquez

Tecnologas del lado del cliente


<html>
<head>
<title>Ejemplo de estilos con CSS</title>
<style type="text/css">
h1 { color: red; font-family: Arial; font-size:
large; }
p { color: gray; font-family: Verdana; font-size:
medium; }
</style>
</head>
<body>
<h1>Titular de la pgina</h1>
<p>Un prrafo de texto no muy largo.</p>
</body>
</html>
Ing. Roberto Henrquez

Tecnologas del lado del cliente


CSS (Cascading Style Sheet)
CSS permite separar los contenidos de la pgina y su
aspecto o presentacin. En el ejemplo anterior, dentro de la
propia pgina HTML se reserva una zona en la que se
incluye toda la informacin relacionada con los estilos de la
pgina.
Definiendo los estilos de esta forma, no importa el nmero
de elementos <p> que existan en la pgina, ya que todos
tendrn el mismo aspecto establecido mediante CSS.
Ing. Roberto Henrquez

Tecnologas del lado del cliente


Agregando estilos css en un archivo externo
<link
rel="stylesheet"
href="css/estilos.css" />

type="text/css"

Ing. Roberto Henrquez

Tecnologas del lado del cliente


Javascript
Lenguaje de script del lado cliente que permite dar
interactividad a la interfaz de la pagina web.
Una pgina web dinmica es aquella que incorpora efectos
como texto que aparece y desaparece, animaciones, acciones
que se activan al pulsar botones y ventanas con mensajes de
aviso al usuario.

Ing. Roberto Henrquez

Tecnologas del lado del cliente


Javascript
Incluir JavaScript en el mismo documento HTML.
El cdigo JavaScript se encierra entre etiquetas <script> y se
incluye en cualquier parte del documento.
Aunque es correcto incluir cualquier bloque de cdigo en
cualquier zona de la pgina, se recomienda definir el cdigo
JavaScript dentro de la cabecera del documento (dentro de la
etiqueta <head>).
Ing. Roberto Henrquez

Tecnologas del lado del cliente


Ejemplo
<html>
<title>Ejemplo de cdigo JavaScript
documento</title>
<script type="text/javascript">
alert("Un mensaje de prueba");
</script>
</head>

en

el

propio

<body>
<p>Un prrafo de texto.</p>
</body>
</html>

Ing. Roberto Henrquez

Tecnologas del lado del cliente


Incluir JavaScript en los elementos HTML
Este mtodo consiste en incluir trozos de JavaScript dentro
del cdigo HTML de la pgina.
<p onclick="alert('Un mensaje de
prueba')">Un prrafo de texto.</p>

Ing. Roberto Henrquez

Tecnologas del lado del servidor


Los lenguajes del lado del servidor son invisibles para los
clientes. Las pginas que utilicen scripts de este tipo
contienen el cdigo entre etiquetas parecidas a las de HTML,
pero stas desaparecen cuando el cliente recibe la pgina.

Ing. Roberto Henrquez

Tecnologas del lado del servidor


Lo primero que debe saber es que todo programa escrito en
PHP debe empezar por unas etiquetas determinadas.
<?php ?>

Ing. Roberto Henrquez