Post on 01-Jul-2015
HTML & PHP
PROF. DEY RODRIGUEZ
CONTENIDO- QUE ES HTML
- ESTRUCTURA HTML
- ETIQUETAS HTML
- ATRIBUTOS HTML
- COLORES
- CARACTERES
- ARCHIVOS
- DIRECTORIOS
- EJEMPLOS
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.
<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
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>
<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>
<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>
<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>
<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>
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>
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>
<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
COLO
RES
ENTI
DAD
ES D
E CA
RACT
ERES
<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
<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
EJERCICIOSInserción de texto, imágenes e Hipervínculos
EJERCICIOSInserción de objetos: Audio, Video e Imagen
EJERCICIOSInserción de formato en el texto
EJERCICIOSInserción de Ítems
EJERCICIOSInserción de Tabla
EJERCICIOSInserción de Formulario
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
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+.
<?php .. ?>ARQUITECTURA CLIENTE - SERVIDOR
<?php .. ?>¿QUIENES INTERPRETAN LOS CODIGOS?
Navegadores webInterpretes locales
Interpretadores a nivel de servidores web
<?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>
<?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
<?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
<?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
<?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
<?php .. ?>ESTRUCTURA PHP
<?php
$Variable1=“Mi”;$Variable2=“_estructura_”; $Variable3=10;
$concatenacion=$variable1 . $variable2 . $variable3;
Echo $concatenacion;
?>MI_ESTRUCTURA_10
<?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
<?php .. ?>ESTRUCTURAS DE CONTROL
Estructura de control
Selección o Condicional
if-else switch
Secuencial Bucle
do-while
while, for
<?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;…
<?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;…
<?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;…
<?php .. ?>ESTRUCTURAS DE CONTROL WHILE
Es una estructura de bucle, pero de entrada controlada.
Ejemplo: while(condición es cierta) { accion1; }accion2; …
<?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;…
EJERCICIOSEstructura secuencial
EJERCICIOS
Estructura Condicional Simple
EJERCICIOSEstructura Condicional doble
EJERCICIOSEstructura Condicional Anidada
EJERCICIOSEstructura Condicional Múltiple
EJERCICIOSEstructura Iterativa Do While
EJERCICIOSEstructura Iterativa While
EJERCICIOSEstructura Iterativa For
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.
Asignación
Operaciones con cadenas de caracteres
Concatenación
Operaciones con cadenas de caracteres
Búsqueda
Operaciones con cadenas de caracteres
Extracción
Operaciones con cadenas de caracteres
Comparación
Operaciones con cadenas de caracteres
-1
True/Verdadero
False/Falso
0
1
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
CONTENIDO
- CREAR FORMULARIO DENTRO DE TABLAS
- ENVIO DE DATOS
- RECEPCION DE DATOS
- PROCESAMIENTO CON DATOS DE FORMULARIO
- EJERCICIOS
- MICRO SISTEMA
EJERCICIOSCREAR FORMULARIO DENTRO DE TABLAS
EJERCICIOSENVIO DE DATOS DE FORMULARIO
METODO GET
METODO POST
EJERCICIOSRECEPCION DE DATOS DE FORMULARIO
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.
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.