Curso html php

60
HTML & PHP PROF. DEY RODRIGUEZ

Transcript of Curso html php

Page 1: Curso html php

HTML & PHP

PROF. DEY RODRIGUEZ

Page 2: Curso html php

CONTENIDO- QUE ES HTML

- ESTRUCTURA HTML

- ETIQUETAS HTML

- ATRIBUTOS HTML

- COLORES

- CARACTERES

- ARCHIVOS

- DIRECTORIOS

- EJEMPLOS

Page 3: Curso html php

HTMLHTML, siglas de HyperText Markup Language («lenguaje de marcado de hipertexto»), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo javascript y Css), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.

Page 4: Curso html php

<HTML>HTML ( Hypertext Markup Language) es un

lenguaje de marcado para hipertexto

<html><head><title>Ejemplo</title></head><body><h1>Ejemplo</h1><p>Un enlace a la <a href=“http://www.iuteb.edu.ve”>IUTEB</a></p></body></html>

EstructuraHTML

TITLE

A

H1P

HEAD BODY

IUTEB

Ejemplo

Un enlace a la

Ejemplo

Page 5: Curso html php

EtiquetasApertura Acción Atributos Cierre < ! Comentario. Ninguno -->

<A> Hipervínculo. HREF, NAME, REL, REV, TITLE </A>

<ADDRESS> Formato para dirección del autor. Ninguno </ADDRESS>

<BASE> Url del autor; contexto del documento. HREF </BASE>

<BASEFONT SIZE> Tamaño de la fuente base. Ninguno NO

<BGSOUND> Sonido de fondo. SRC, LOOP. NO - Internet Explorer

<BIG> Aumenta el tamaño. Ninguno </BIG>

<BLINK> Hace parpadear el texto. Ninguno </BLINK> - Netscape

<BLOCKQUOTE> Da formato con sangría a un párrafo Ninguno </BLOCKQUOTE>

<BODY> Cuerpo del documento. BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK </BODY>

<BR> Retorno de línea.CLEAR: Se utiliza en combinación con ALIGN de IMAGE.

NO

<CENTER> Ninguno Ninguno </CENTER>

<HTML ETIQUETAS>

Page 6: Curso html php

<EMBED> Sonido de Fondo. SRC, WIDTH, HEIGHT, AUTOSTART, LOOP. NO - Netscape

<FONT> Definición de la fuente. SIZE, COLOR. Internet Explorer: FACE. </FONT>

<FORM> Para ingreso de datos del usuario en un formulario. ACTION, METHOD </FORM>

<H1 ...H6> Tamaño de letras del 1 al 6.

HTML 3.0: LEFT, CENTER, RIGHT </H1 .../H6>

<HEAD> Encabezamiento del documento.

BASE, TITLE, ISINDEX, NEXTID, META </HEAD>

<HR> Línea horizontal.NOSHADE, SIZE, WIDTH, ALIGN. Internet Explorer: COLOR

NO

<HTML> Al principio y al fin de todo documento. HEAD, BODY </HTML>

<I> Itálica (Cursiva). Ninguno </I>

<IMG> Cargar imágenes.ALIGN, SRC, ALT, ISMAP, WIDTH, HEIGHT, VSPACE, HSPACE

NO

<INPUT> Define un objeto de ingreso en un formulario.

TYPE, NAME, VALUE, SIZE, MAXLENGHT, ALIGN, SRC, CHECKED

</INPUT>

<HTML ETIQUETAS>

Page 7: Curso html php

<MARQUEE> Marquesina.

ALIGN, BEHAVIOR, BGCOLOR, DIRECTION, HEIGHT, WIDTH, HSPACE, VSPACE, LOOP, SCROLLAMOUNT, SCROLLDELAY.

</MARQUEE>

<MENU> Lista menú. Ninguno </MENU>

<META> Metainformación ubicada en HEAD. EQUIV, CONTENT, NAME NO

<LI> Ítem de lista. Netscape: VALUE, TYPE NO

<OL>Lista ordenada, con elementos marcados con <LI>.

TYPE, START, VALUE. </OL>

<OPTION> Opción de selección dentro de un formulario. VALUE, SELECTED VALUE </OPTION>

<P> Retorno de línea, con un espacio. Ninguno </P>

<P ALIGN> Alineación de texto. LEFT, CENTER, RIGHT </P>

<PRE> Visualiza el texto en su formato original. WIDTH </PRE>

<HTML ETIQUETAS>

Page 8: Curso html php

<S> Texto tachado. Ninguno </S><SAMP> Formato tipo ejemplo. Ninguno </SAMP>

<SELECT>Para selección de opciones dentro de un formulario.

NAME, SIZE, MULTIPLE </SELECT>

<SMALL> Disminuye el tamaño. Ninguno </SMALL>

<STRONG> Formato enfatizado más fuerte que <EM>. Ninguno </STRONG>

<SUB> Subíndice. Ninguno </SUB><SUP> Superíndice. Ninguno </SUP>

<TABLE> Tabla.BORDER, CELLPADDING, CELLSPACING, HEIGTH, WIDTH. Internet Explorer: COLOR

</TABLE>

<TD> Celdas de una fila en una tabla, dentro de <TR>.

ALIGN, VALIGN, NOWRAP, COLSPAN, ROWSPAN, HEIGTH, WIDTH

</TD>

<TEXTAREA> Área para ingreso de texto dentro de un formulario. NAME, ROWS, COLS. </TEXTAREA>

<TH> Título de Tabla.ROWSPAN, COLSPAN, ALIGN, VALIGN, NOWRAP, HEIGHT, WIDTH

</TH>

<HTML ETIQUETAS>

Page 9: Curso html php

<HTML ETIQUETAS><TITLE> Título dentro de HEAD. Ninguno </TITLE>

<TR> Fila de una Tabla. ALIGN, VALIGN </TR>

<TT> Formato tipo máquina. Ninguno </TT>

<UL>Lista no ordenada, con elementos marcados con <LI> .

COMPACT, TYPE </UL>

<VAR> Formato tipo variable. Ninguno </VAR>

<WBR>Se usa con NOBR para una sección que deba ser separada.

Ninguno NO

<XMP> Similar a PRE. Ninguno </XMP>

Page 10: Curso html php

AtributosNombre Etiqueta Acción Valor

HREF Dirección del URL local o remoto. href="www.hp.com"

LOOP

<BGSOUND>

Número de veces que se reproduce el archivo de sonido. Para permanente se usa INFINITE o -1.

loop=infinite

SRCNombre del archivo de sonido (Internet Explorer)

src="sonido.wav"

LOOP<EMBED>

Número de veces que se reproduce el archivo de sonido. Para permanente se usa INFINITE o -1.

loop=-1

SRC Nombre del archivo de sonido (con Crescendo) src="sonido.mid"

SRC

<IMAGE>

Nombre del gráfico src="imagen.gif"

ALTNombre que reemplaza a la imagen cuando ésta no puede ser cargada.

alt="Nombre de Imágen"

<HTML ATRIBUTOS>

Page 11: Curso html php

BGCOLOR

<BODY>

Color de fondo bgcolor="#FFFFFF" (blanco)

BACKGROUND Imágen de fondo background="foto.gif"

TEXT Color del texto text="#000000" (negro)

LINK Color de vínculo link="#0000FF" (azul)

VLINK Color de vínculo visitado vlink="#FF0000" (rojo)

ALINK Color de vínculo presionado alink="#00FF00" (verde)

ALIGN <CAPTION> dentro de <TABLE>

Colocar título arriba (TOP) o debajo (BOTTOM) de la tabla.

align=top

ALIGN <H1..H6>, <P ALIGN>, <TD>, <TH>, <TR>, <DIV>,

Alinear el texto: LEFT, RIGHT, CENTER align=center

ALIGN

<HR>

Alinear el texto: LEFT, RIGHT, CENTER align=center

SIZE Valor de la altura en pixels o porcentaje size=3

WIDTH Valor del ancho en pixels o porcentaje width=50%

<HTML ATRIBUTOS>

Page 12: Curso html php

<HTML ATRIBUTOS>SIZE

<FONT>

Tamaño de la letra de 1 a 7 size=6

COLOR Color de la letra color="#000000" (negro)

FACE Fuente del texto (Internet Explorer) face="helv" (helvética)

HEIGHT<EMBED>, <IMAGE>, <MARQUEE>, <TD>, <TH>

Valor de la altura en pixels o porcentaje heigth=80

WIDTH Valor del ancho en pixels o porcentaje width=50%

BORDER

<TABLE>

Borde y ancho del borde en la tabla border=5

CELLPADDING Espacio entre el borde y el texto cellpadding=10

CELLSPACINGEspacio entre las líneas interna y externa del borde

cellspacing=3

HEIGHT Valor de la altura en pixels o porcentaje heigth=80

WIDTH Valor del ancho en pixels o porcentaje width=50%

COLSPAN<TD> dentro de <TABLE>

Expandir una celda varias columnas colspan=4

ROWSPAN Expandir una celda varias filas rowspan=4

Page 13: Curso html php

COLO

RES

Page 14: Curso html php

ENTI

DAD

ES D

E CA

RACT

ERES

Page 15: Curso html php

<HTML ARCHIVO>

Un archivo: es una entidad lógica o elemento cuyo objetivo es almacenar un conjunto de bytes, y el mismo se representa o identifica a través de un nombre generado por el usuario y una extensión del mismo generado por el programa interpretador.

Ejemplo: INDEX.HTML

INDEXPHP

JS

CSS

HTML

Page 16: Curso html php

<HTML DIRECTORIO>

En informática un directorio es un contenedor virtual en el que se almacenan una agrupación de archivos de datos y otros subdirectorios, atendiendo a su contenido, a su propósito o a cualquier criterio que decida el usuario. Técnicamente el directorio almacena información acerca de los archivos que contiene: como los atributos de los archivos o dónde se encuentran físicamente en el dispositivo de almacenamiento.

Ejemplo: mis documentos, carpeta personal, etc

/

opt bin home

estudiante

usr

telemáticalampp

htdocs Mi sistema

var

www

Mi sistema

Page 17: Curso html php

EJERCICIOSInserción de texto, imágenes e Hipervínculos

Page 18: Curso html php

EJERCICIOSInserción de objetos: Audio, Video e Imagen

Page 19: Curso html php

EJERCICIOSInserción de formato en el texto

Page 20: Curso html php

EJERCICIOSInserción de Ítems

Page 21: Curso html php

EJERCICIOSInserción de Tabla

Page 22: Curso html php

EJERCICIOSInserción de Formulario

Page 23: Curso html php

CONTENIDO- QUE ES PHP

- ESTRUCTURA CLIENTE – SERVIDOR

- QUIENES INTERPRETAN LOS CODIGOS

- SINTAXIS

- OPERADORES

- IDENTIFICADORES, REGLAS Y TIPOS

- ESTRUCTURA PHP

- PALABRAS RESERVADAS

- ESTRUCTURAS DE CONTROL

- SINTAXIS

- EJEMPLOS

Page 24: Curso html php

PHPPHP es un acrónimo recursivo que significa PHP Hypertext Pre-processor (inicialmente PHP Tools, o, Personal Home Page Tools). Fue creado originalmente por Rasmus Lerdorf en 1994; sin embargo la implementación principal de PHP es producida ahora por The PHP Group y sirve como el estándar de facto para PHP al no haber una especificación formal. Publicado bajo la PHP License, la Free Software Foundation considera esta licencia como software libre.

PHP es un lenguaje de programación interpretado, diseñado originalmente para la creación de páginas web dinámicas. Se usa principalmente para la interpretación del lado del servidor (server-side scripting) pero actualmente puede ser utilizado desde una interfaz de línea de comandos o en la creación de otros tipos de programas incluyendo aplicaciones con interfaz gráfica usando las bibliotecas Qt o GTK+.

Page 25: Curso html php

<?php .. ?>ARQUITECTURA CLIENTE - SERVIDOR

Page 26: Curso html php

<?php .. ?>¿QUIENES INTERPRETAN LOS CODIGOS?

Navegadores webInterpretes locales

Interpretadores a nivel de servidores web

Page 27: Curso html php

<?php .. ?>SINTAXIS

La sintaxis de PHP es muy similar a la de C o C++. Quizás lo más destacado ocurre a nivel semántico: el tipado es muy poco estricto, es decir, cuando creamos una variable en ella podemos almacenar el tipo de datos que queramos. Esto es muy flexible y cómodo para el desarrollador, aunque los errores que se cometen pueden ser mucho más graves y difíciles de corregir. Las posibilidades del interprete para detectar incompatibilidades entre variables se reducen mucho y pueden ocurrir cosas extrañas en determinadas circunstancias si no tenemos cuidado.

Ejemplo:

<?php y ?><? y ?>

<% y %><script language="php"> y </script>

Page 28: Curso html php

<?php .. ?>OPERADORES

+ Suma

- Resta

* multiplicación

/ División

^ Potenciación

MOD($var%2==0) Modulo

ARITMETICOS

< Menor que

<= Menor igual que

> Mayor que

>= Mayor igual que

== Igual a

!= Diferente a

<> Distinto a

= Asignación

RELACIONALES

AND / && YOR / || ONOT / ! No

LOGICOS

Page 29: Curso html php

<?php .. ?>IDENTIFICADORES Y REGLAS

Los identificadores son los nombre de las variables, funciones, arrays, clases, etc., creadas por el programador. Son el requerimiento fundamental de cualquier lenguaje. Cada lenguaje tiene sus propias reglas para construir estos identificadores. Estas reglas son comunes para C, C++, PHP, JAVASCRIPT, ETC:

a) Sólo se permiten caracteres al alfabéticos, dígitos y subrayados.b) Un nombre no puede comenzar con un dígito.c) Se distingue entre la mayúsculas y las minúsculas.d) No se puede usar como nombre de variable una palabra reservada

declarada

EJEMPLO: $Mi_Variable19

EJEMPLO: $19_Mi_Variable

Page 30: Curso html php

<?php .. ?>TIPOS

SIMPLES:

$nombre$cedula$edad

ESTRUCTURADAS:Arreglo Unidimensional$nombre[3]$cedula[3]$edad[3]

Arreglo Bidimensional$nombre[3] [2]$cedula[3] [2]$edad[3] [2]

1 Pedro

2 Manuel

3 Jose

1 Pedro

1 1234567

1 20

(0,0) pedro (1,0) jose (2,0) luis

(0,1) alfredo (1,1) sofia (2,1) juan

Page 31: Curso html php

<?php .. ?>ARREGLOS TIPO METODOS

POST: $_ POST[“nombre”]$_ POST[“cedula”]$_ POST[“edad”]

GET:$_GET[“nombre”]$_ GET[“cedula”]$_ GET[“cedula”]

variable valor

Nombre Pedro

Cedula 1234567

edad 20

variable valor

Nombre Pedro

Cedula 1234567

edad 20

$_GET

$_ POST

METODO POST: Permite que los datos de un formulario se envíen ocultosA través de la barra de direcciones

METODO GET: Permite que los datos de un formulario se envíen visiblesA través de la barra de direcciones

Page 32: Curso html php

<?php .. ?>ESTRUCTURA PHP

<?php

$Variable1=“Mi”;$Variable2=“_estructura_”; $Variable3=10;

$concatenacion=$variable1 . $variable2 . $variable3;

Echo $concatenacion;

?>MI_ESTRUCTURA_10

Page 33: Curso html php

<?php .. ?>PALABRAS RESERVADAS

and or xor FILE exception php_user_filter

LINE array() as break case

cfunction class const continue declare

default die() do echo() else

elseif empty() enddeclare endfor endforeach

endif endswitch endwhile eval exit()

extends for foreach function global

if include() include_once() isset() list()

new old_function print() require() require_once()

return() static switch unset() use

var while FUNCTION CLASS METHOD

Page 34: Curso html php

<?php .. ?>ESTRUCTURAS DE CONTROL

Estructura de control

Selección o Condicional

if-else switch

Secuencial Bucle

do-while

while, for

Page 35: Curso html php

<?php .. ?>ESTRUCTURAS DE CONTROL IF . . . ELSE

La sentencia if ofrece dos formatos de uso:1) Sentencia if simple2) Sentencia if…elseEjemplos:

Formato 1 Formato 2

if(expreción es cierta) {

accion1; }accion2…

if (expreción es cierta) { accion1; }else { accion2; }accion3;…

Page 36: Curso html php

<?php .. ?>ESTRUCTURAS DE CONTROL Switch … CASE

Es una sentencia de bifurcación múltiple en la que, en función de una condición, se transfiere el control a uno de los diversos puntos posibles.

Ejemplo:Switch(expreción){

caso1: { acción1; }

caso2: { acción2;

} default:

{ acción3; }

}accion5;…

Page 37: Curso html php

<?php .. ?>ESTRUCTURAS DE CONTROL DO … WHILE

Es un bucle de salida controlada. En función de una condición se devuelve el control a un punto anterior determinado del programa.

Ejemplo: do{ accion1;}while(condición es cierta);accion2;…

Page 38: Curso html php

<?php .. ?>ESTRUCTURAS DE CONTROL WHILE

Es una estructura de bucle, pero de entrada controlada.

Ejemplo: while(condición es cierta) { accion1; }accion2; …

Page 39: Curso html php

<?php .. ?>ESTRUCTURAS DE CONTROL FOR

For Es un bucle de entrada controlada, y se usa cuando es necesario repetir una acción un numero predeterminado de veces

Ejemplo: for(valorInicial; prueba; incremento) { accion1; }accion2;…

Page 40: Curso html php

EJERCICIOSEstructura secuencial

Page 41: Curso html php

EJERCICIOS

Estructura Condicional Simple

Page 42: Curso html php

EJERCICIOSEstructura Condicional doble

Page 43: Curso html php

EJERCICIOSEstructura Condicional Anidada

Page 44: Curso html php

EJERCICIOSEstructura Condicional Múltiple

Page 45: Curso html php

EJERCICIOSEstructura Iterativa Do While

Page 46: Curso html php

EJERCICIOSEstructura Iterativa While

Page 47: Curso html php

EJERCICIOSEstructura Iterativa For

Page 48: Curso html php

Operaciones con cadenas de caracteres

ASIGNACIÓN: Consiste en asignarle una cadena a otra.

CONCATENACIÓN: Consiste en unir dos cadenas o más (o una cadena con un carácter) para formar una cadena de mayor tamaño.

BÚSQUEDA: Consiste en localizar dentro de una cadena una subcadena más pequeña o un carácter.

EXTRACCIÓN: Se trata de sacar fuera de una cadena una porción de la misma según su posición dentro de ella.

COMPARACIÓN: Se utiliza para comparar dos cadenas.

Page 49: Curso html php

Asignación

Operaciones con cadenas de caracteres

Page 50: Curso html php

Concatenación

Operaciones con cadenas de caracteres

Page 51: Curso html php

Búsqueda

Operaciones con cadenas de caracteres

Page 52: Curso html php

Extracción

Operaciones con cadenas de caracteres

Page 53: Curso html php

Comparación

Operaciones con cadenas de caracteres

-1

True/Verdadero

False/Falso

0

1

Page 54: Curso html php

Conjunto de caracteres especiales que permiten agrupar cadenas de caracteres dentro de los mismos.-Comillas simples ' cadena '-Comillas dobles " cadena "-Documento incrustado << cadena >>“ mi nombre es: pedro perez ”

DELIMITADORES

Page 55: Curso html php

CONTENIDO

- CREAR FORMULARIO DENTRO DE TABLAS

- ENVIO DE DATOS

- RECEPCION DE DATOS

- PROCESAMIENTO CON DATOS DE FORMULARIO

- EJERCICIOS

- MICRO SISTEMA

Page 56: Curso html php

EJERCICIOSCREAR FORMULARIO DENTRO DE TABLAS

Page 57: Curso html php

EJERCICIOSENVIO DE DATOS DE FORMULARIO

METODO GET

METODO POST

Page 58: Curso html php

EJERCICIOSRECEPCION DE DATOS DE FORMULARIO

Page 59: Curso html php

EJERCICIOS

REALICE UN PROGRAMA QUE PERMITA MOSTRAR POR PANTALLA LA TABLA DE LA SUMA DE UN NUMERO SOLICITADO POR EL USUARIO.

REALICE UN PROGRAMA QUE PERMITA SABER SI EL NUMERO INTRODUCIDO POR EL USUARIO ES PAR.

REALIZAR UN PROGRAMA QUE MUESTRE UN DIA DE LA SEMANA, DE ACUERDO A UN NUMERO INTRODUCIDO POR EL USUARIO.

REALICE UN PROGRAMA QUE IMPRIMA LA TABLA DE AJEDRES

REALICE UNA CALCULADORA QUE PERMITA REALIZAR LAS CUATRO OPERACIONES BASICAS.

Page 60: Curso html php

MICRO – SISTEMA

REALICE UN PROGRAMA QUE CAPTURE POR TECLADO LOS SIGUIENTES DATOS: APELLIDO, NOMBRE, CÉDULA, TELÉFONO, CARGO Y SUELDO DE UN TRABAJADOR. LUEGO CALCULE EL MONTO A COBRAR SABIENDO QUE EL SUELDO ES DE BSF 885,00 Y LAS DEDUCCIONES A EFECTUAR SON: LPH ES : BSF 47,25; PARO FORZOSO ES: 27,26; SEGURO SOCIAL BS.F 186,10.

REALICE UN PROGRAMA QUE PERMITA REALIZAR CONVERSIONES DE UNIDADES DE MEDIDAS COMO: TEMPERATURAS, VELOCIDAD, TIEMPO, MASA Y SUPERFICIE.

REALICE UN PROGRAMA DE INSCRIPCIÓN DE NOTAS QUE CALCULE LA NOTA MEDIA OBTENIDA EN X ASIGNATURAS, SIENDO X UN NÚMERO COMPRENDIDO ENTRE 2 Y 5. AL LEER LAS NOTAS DEBE ASEGURARSE QUE ÉSTAS ESTÁN EN EL INTERVALO [0, 10]. EL PROGRAMA DEBE PODER REPETIR EL PROCESO DE CÁLCULO DE LA MEDIA HASTA QUE EL USUARIO LO DESEE.

Nota: Los micro – sistemas deben tener en sus interfaces, objetos y contenidos relacionados al mismo, tambien es recomendable que tenga una buena estructura y buena apariencia.