1. introduccion al desarrollo web php parte 1

DESARROLLO WEB
Introducción

Universidad Tecnológica de Tecamachalco

Indice
1. Xampp (servidores Mysql y Apache)
2. htdocs
3. Ejecutar archivos PHP
4. Estructura de un proyecto web
5. Autentificación

6. Header y Body
7. Convenciones de los div
8. Formularios
9. Etiquetas y Campos de texto
10. Botones

1.- Instalar Xampp
• Verificar que este corriendo tanto Apache como Mysql

1.- htdocs

• Las paginas web se deben almacenan en la carpeta htdocs, (por

que apache esta direccionado a esa carpeta)

3.- Ejecutar archivos PHP

• Para ejecutar los archivos php, se tiene que ejecutar un navegador e

indicar URL con el recurso correcto.

4.- Estructura de un proyecto web

Codigo del archivo index.php , genera una interfaz para que el
usuario se autentifique.

5.- Autentificación

6.- Header y Body

1
2
3

<head>
</head>
Cabecera de la pagina web, dentro de este elemento se importan archivos
hojas de estilo y javaScript. css y js respectivamente
1.- Se utiliza para manejar la letra (ñ y los acentos dentro de una
pagina)
2.- Se utiliza para importar a nuestra pagina las hojas de estilo
3.- Se utilia para importar a nuestra pagina los archivos JavaScript

Cuerpo (body) dentro de este elemento se agrega el codigo html que da el
diseño a la pagina web.

7.- Convenciones de los div

Las div son contenedores , que se utlizan para tener
informacion, imagenes, tablas, formularios, campos de texto, botnes, menus, etc.
Su objetivo de los div, es ordenar el contenido de las paginas web, en posiciones
establecidas respeto a la pagina y a la posicion de los div anteriores.
Las convenciones de los identificaciones (id) de los div se muestra en la figura de abajo.

• Para crear un div en html se utiliza la etiqueta (<div> </div>), la primera

inicia y la segunda finaliza.

• Con la propiedad

class se asigna un estilo al div (primero se debe crear
el estilo), indicado en una hoja estilo (archivo css).

• En este caso se esta indicando el estillo

“estilo_banner”

• Al hacer esto el div toma el diseño y la forma indicada en la clase estilo

que se le esta especificando, indicado en el archivo CSS.

• NOTA: Se tiene que importar la hoja de estilo al proyecto.

El siguiente código crea la siguiente interfaz
grafica de usuario (GUI)

7.1 - Tablas

1.- Las tablas se utilizan para
ordenar elementos en una celda
especifica.
Una tabla se compone de filas y
columnas.
La etiqueta para crear una tabla son
<table> </table>

La Etiqueta <tr> se utiliza para
crear una fila de una tabla y dentro
de esa etiqueta se indica el número
de columnas con las etiquetas <td>
</td>, dependiento el numero de
etiquetas <td> </td> seran el
número de columnas.

8.- Formularios

<form>
</form>
se utiliza para crear un formulario en HTML, este se utiliza para manejar acciones dentro
de una pagina web (eventos), en el ejemplo de arriba la accion que tiene es mandar a
traer al archivo login.php se vinculan los archivo
Quien origina el evento es el Botón, en el momento en que el usuario de clic en el botón
la acción se envía al formulario y el formulario manda a traer una pagina web. (la que se
indique en la acción)

9 – Etiquetas y Campos de texto

1

2

3

Dentro de las celdas de las tablas podemos acomodar etiquetas, campos de texto y
botones.
Una etique se crea con la etiqueta <label> texto </label> y se utiliza para mostrar un
texto en la pagina web.
Un campo de texto se crea con la etiqueta (ver imagen 2), y se utiliza para que un usuario
pueda introducir información.
Podemos manejar campos de texto donde no se muestre la información que anote el
usuario con el objetivo de que sea confidencial.

10 – Botones
1

2

3

Podemos crear un botón de dos formas:
La primera es enfocado a botones para formularios, esto quiere decir que el boton maneja accion
y la envia al formulario y el formulario tiene una accion que puede ser mandar a traer a una
pagina ver imagen 1.

La segunda forma es crear un botón el cual cual maneje un evento (onClick) que ejecute a un
metodo, y por medio del metodo podemos mandar a traer un pagina o cargar un control
Dialog(), que mas a delante se vera.
La etiqueta <br/> se utiliza para dar un salto de linea.

Hoja de estilo

Propiedas indicadas
para la clase de la hoja de estilo
se pueden utilizar mucho mas
para eso se podria consultar en
internet sus demas atributos

Propiedas indicadas
para la clase de la hoja de estilo
se pueden utilizar mucho mas
para eso se podria consultar en
internet sus demas atributos

1. introduccion al desarrollo web php parte 1

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie 1. introduccion al desarrollo web php parte 1

Ähnlich wie 1. introduccion al desarrollo web php parte 1 (20)

1. introduccion al desarrollo web php parte 1