FDP 02 Tecnologías Del Lado Cliente

FUNDAMENTOS PARA EL
DESARROLLO DE SISTEMAS CON PHP

Tecnologas del lado cliente
Ing. Roberto Henrquez
Agenda
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
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
l
m
t
H
Ja
va
pt scr
i

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.

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.

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

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>.

cliente
<HTML>
<HEAD>
<TITLE>PginaenHTML</TITLE>
</HEAD>
<B0DY>
<P>
Estoesprrafo<br>ytambinunsaltodelnea.
</P>
</BODY>
</HTML>

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>

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

cliente
Listas
<ol>
<li>Elemento1</li>
<li>Elemento2</li>
</ol>

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

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>.

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.

cliente
<html>
<head>
<title>EjemplodeestilosconCSS</title>
<styletype="text/css">
h1{color:red;fontfamily:Arial;fontsize:large;}
p{color:gray;fontfamily:Verdana;fontsize:
medium;}
</style>
</head>
<body>
<h1>Titulardelapgina</h1>
<p>Unprrafodetextonomuylargo.</p>
</body>
</html>

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.

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

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.

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>).

cliente
Ejemplo
<html>
<title>EjemplodecdigoJavaScriptenelpropio
documento</title>
<scripttype="text/javascript">
alert("Unmensajedeprueba");
</script>
</head>
<body>
<p>Unprrafodetexto.</p>
</body>
</html>

cliente
Incluir JavaScript en los elementos HTML
Este mtodo consiste en incluir trozos de
JavaScript dentro del cdigo HTML de la pgina.
<ponclick="alert('Unmensajede
prueba')">Unprrafodetexto.</p>

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.

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

FDP 02 Tecnologías Del Lado Cliente

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

FDP 02 Tecnologías Del Lado Cliente

Încărcat de

Drepturi de autor:

Formate disponibile

FUNDAMENTOS PARA EL

DESARROLLO DE SISTEMAS CON PHP

Ing. Roberto Henrquez

Cabecera y cuerpo de una pgina Web

Tecnologas del lado del servidor

Ing. Roberto Henrquez

Tecnologas del lado del

Tecnologas del lado del

Ing. Roberto Henrquez

Tecnologas del lado del

Cabecera: Entre las etiquetas <HEAD> y

Ing. Roberto Henrquez

Tecnologas del lado del

Tecnologas del lado del

Tecnologas del lado del

Ing. Roberto Henrquez

Tecnologas del lado del

Tecnologas del lado del

Tecnologas del lado del

Ing. Roberto Henrquez

Tecnologas del lado del

Ing. Roberto Henrquez

Tecnologas del lado del

Tecnologas del lado del

Ing. Roberto Henrquez

Tecnologas del lado del

Tecnologas del lado del

Tecnologas del lado del

Ing. Roberto Henrquez

Tecnologas del lado del

Ing. Roberto Henrquez

Tecnologas del lado del

Ing. Roberto Henrquez

Tecnologas del lado del

Tecnologas del lado del

Ing. Roberto Henrquez

Tecnologas del lado del

Ing. Roberto Henrquez

Tecnologas del lado del

Ing. Roberto Henrquez

S-ar putea să vă placă și