FDP 02

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

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

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.

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.

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>

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

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

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>

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

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

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.

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

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.

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

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.

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

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.

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

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>

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>

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.

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

FDP 02

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

FDP 02

Cargado por

Copyright:

Formatos disponibles

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 cliente

Ing. Roberto Henrquez

Tecnologas del lado del cliente

Ing. Roberto Henrquez

Tecnologas del lado del cliente

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

Ing. Roberto Henrquez

Tecnologas del lado del cliente

Tecnologas del lado del cliente

Tecnologas del lado del cliente

Ing. Roberto Henrquez

Tecnologas del lado del cliente

Tecnologas del lado del cliente

Tecnologas del lado del cliente

Ing. Roberto Henrquez

Tecnologas del lado del cliente

Ing. Roberto Henrquez

Tecnologas del lado del cliente

Tecnologas del lado del cliente

Ing. Roberto Henrquez

Tecnologas del lado del cliente

Tecnologas del lado del cliente

Tecnologas del lado del cliente

Ing. Roberto Henrquez

Tecnologas del lado del cliente

Ing. Roberto Henrquez

Tecnologas del lado del cliente

Tecnologas del lado del cliente

Ing. Roberto Henrquez

Tecnologas del lado del cliente

Ing. Roberto Henrquez

Tecnologas del lado del servidor

Ing. Roberto Henrquez

Tecnologas del lado del servidor

Ing. Roberto Henrquez

También podría gustarte