You are on page 1of 33

INSTITUTO TECNOLÓGICO DE

SAN JUAN DEL RÍO

LENGUAJES Y AUTOMATAS I

HTML/PHP

Prof.: José Amisadai Flores Rosales

ALUMNO:
GARCÍA CONTRERAS LUIS ANGEL
No. Control: 12590395

HTML5
TML5 es un término genérico para describir un conjunto de especificaciones
HTML, CSS y Javascript diseñado para permitir a los programadores crear la
próxima generación de aplicaciones y sitios Web. Lo que llama la atención en esa
definición son sus tres partes: HTML, CSS y Javascript. Ellos definen cómo utilizan
los desarrolladores marcado mejorado con capacidades de estilo más ricas y
nuevas APIs de JavaScript para aprovechar al máximo las nuevas características
de desarrollo Web. Por decirlo simplemente, HTML5 = HTML + CSS + JavaScript.
Las reglas básicas que se plantearon a la hora de actualizar a HTML 5 fueron:

Basarse en HTML, CSS, DOM y Javascript.

Reducir la necesidad del uso de plugins, como por ejemplo flash.

Mejorar el tratamiento de errores.

Crear etiquetas que reemplacen el uso de scripts.

Lenguaje que pueda utilizarse en cualquier tipo de dispositivo, como
móviles, PDA's, etc.

Elementos:





Encabezado <header>
Pie <footer>
Zona de navegación <nav>
Secciones de la página <section>
Artículos <article>
Información que sale del flujo normal del contenido, como definiciones o
aclaraciones, ampliación de la información <aside>

Para crear una página web sencilla tenemos que escribir en nuestro editor (Bloc de
notas) las siguientes líneas de código:

<!DOCTYPE HTML>
<html>
<head>

<title>Mi primera pagina</title>

</head>

<body>

<p>Mi primer párrafo</p>

</body>
</html>

Guarda el documento con la extensión (.html) y visualízalo en el navegador.

La directiva <html> aparece una vez al principio de la página web y de
nuevo con una barra añadida (</html>) al final, indica al navegador que
todo lo que se encuentra entre ellas es codigo html y se debe interpretar
como tal. Si pensamos en una página web como si fuera un arbol, la
directiva <html> seria la raiz de todo. Desde raiz sale dos ramas que
representan a las dos partes principales de cualquier página web, el
encabezado (<head>) y el cuerpo (<body>)

Con la directiva <head> y </head> se delimita la cabecera del documento
que suele contener información sobre el documento como título, idioma,
palabras clave, autor, etc. La información que se especifique en la cabecera
no es mostrada por el navegador al usuario con la única excepción de la
etiqueta <title> y </title>

La directiva <title> y </title> sirve para especificar el título del documento y
es visualizada en la barra de título de la ventana correspondiente al
programa navegador.

La directiva <body> delimita el cuerpo de un documento html y engloba
todo el contenido que se ve en una página web: titulares, texto, imagenes,
listas, tablas, formularios

Encabezado y Titulo
Etiqueta y código HTML

.

.

.

.

.

.

.

Cuadros de texto .

el método POST los envía por la entrada estándar. mientras que el método GET envía los datos usando la URL.Método POST y GET La diferencia entre estos dos métodos radica en la forma de enviar los datos a la página. GET: POST: .

cuando se asigna información de estilo a un conjunto .Botones Atributos Estándard de la Etiqueta <button> Estos atributos son soportados por todos los navegadores : Internet Explorer Atributos Class : Firefox : Google Chrome Valor : Opera : Safari Descripción nombre de la Asigna un nombre de clase. clase El atributo class actúa:  Como selector para las hojas de estilo(CSS).

 Id nombre de elementos.    Ayudar a los sintetizadores de voz. . onfocus script El script corre cuando el foco se dirige hacia un elemento. tabindex número Especifica el orden de tabulación del elemento dentro del documento actual Eventos de la Etiqueta <button> Los eventos son soportados por todos los navegadores : Internet Explorer Evento : Firefox Valor : Google Chrome : Opera : Safari Descripción onblur script El script corre cuando el elemento pierde el foco ya sea con el mouse o por navegación con tabulador. Valores posibles:  ltr : De izquierda a derecha (left to right).   Como vínculo destino para vínculos de hipertexto. Especifica el idioma base de los valores de los atributos y del texto contenido en un elemento. ligaduras. Como nombre de un elemento object declarado. y espaciado. Para procesos generales por parte del usuario. Title nombre Este atributo ofrece información consultiva sobre el elemento para el cual se establece. Style estilo Este atributo especifica información de estilo para el elemento actual. El atributo lang es útil para:  Ayudar a los motores de búsqueda. Al pulsar esa tecla el foco se dirige hacia ese elemento. El atributo id actúa:  Como selector para las hojas de estilo(CSS). Asigna un nombre a un elemento.  Lang código de lenguaje rtl : De derecha a izquierda (right to left). Ayudar al agente de usuario a hacer decisiones sobre separación de palabras. accesskey caracter Asigna una tecla de acceso a un elemento. onkeydown script El script corre cuando se pulsa una tecla.  Como medio de hacer referencia a un elemento en particular desde un script.  Para procesos generales por parte del usuario. Ayudar a los verificadores de ortografía y gramática. ya sea con el mouse o por navegación con tabulador. Dir ltr o rtl Especifica la dirección del texto.

onmouseup El script corre cuando el botón del mouse se suelta cuando está encima de un elemento. onkeyup script El script corre cuando una tecla se suelta. onmouseout El script corre cuando el mouse se aparta de un elemento. script Listas ordenadas Las listas ordenadas constan de una sola marca de apertura y cierre <OL></OL> y tantas marcas de lista como voces hay en el menú <LI>. script onmouseover script El script corre cuando el mouse se sitúa sobre un elemento.onkeypress script El script corre cuando se pulsa y se suelta una tecla. onmousedown script El script corre cuando el botón del mouse se pulsa cuando está encima de un elemento. onmousemove script El script corre cuando el mouse se mueve mientras está sobre un elemento. onclick script El script corre cuando se hace clic con el mouse. La sintaxis correcta para elaborar listas ordenadas es: <OL> <LI> Primera voz del menú <LI> Segunda voz del menú <LI> Tercera voz del menú </OL> Ordenación con letras mayúsculas: <OL TYPE=A> <LI> Primera voz del menú <LI> Segunda voz del menú <LI> Tercera voz del menú </OL> Ordenación con letras minúsculas: <OL TYPE=a> <LI> Primera voz del menú <LI> Segunda voz del menú <LI> Tercera voz del menú . ondblclick script El script corre cuando se hace doble clic con el mouse.

La sintaxis correcta para definir una lista desordenada es: <UL> <LI> Primera voz del menú <LI> Segunda voz del menú <LI> Tercera voz del menú </UL> Los círculos sólidos de la lista anterior se obtienen con disc: <UL TYPE=disc> <LI> Primera voz del menú <LI> Segunda voz del menú <LI> Tercera voz del menú </UL> . La diferencia básica es que en el caso de las listas desordenadas no existen relaciones jerárquicas entre los elementos del elenco.</OL> Ordenación con números romanos en mayúscula: <OL TYPE=I> <LI> Primera voz del menú <LI> Segunda voz del menú <LI> Tercera voz del menú </OL> Ordenación con números romanos en minúscula (romanitos): <OL TYPE=i> <LI> Primera voz del menú <LI> Segunda voz del menú <LI> Tercera voz del menú </OL> Listas desordenadas Las listas desordenadas funcionan de manera similar a las ordenadas. por lo cual no se prevén ordenaciones progresivas como las obtenidas mediante números o letras. Las listas desordenadas constan de una sola marca de apertura y cierre<UL></UL> y tantas marcas de lista como voces hay que ordenar <LI>.

Si se elige esta opción. No sucederá lo mismo. sea cual sea la resolución con la que venga vista la página. Las dimensiones se definen mediante WIDTH (ancho) y HEIGHT (alto) y pueden expresarse en píxel o en tantos por ciento respecto a la página: <TABLE WIDTH=500> </TABLE> En este ejemplo de código. la anchura de la tabla está expresada en píxel (500). que señala la apertura y cierre de una tabla. por ejemplo. si decidimos expresar el tamaño mediante un porcentaje: <TABLE WIDTH=50%> </TABLE> En este caso.El atributo circle imposta circunferencias: <UL TYPE=circle> <LI> Primera voz del menú <LI> Segunda voz del menú <LI> Tercera voz del menú </UL> El atributo square imposta listas definidas por cuadrados sólidos: <UL TYPE=square> <LI> Primera voz del menú <LI> Segunda voz del menú <LI> Tercera voz del menú </UL> Tablas La altura y anchura global de una tabla se indica dentro del atributo <TABLE>. la medida de la tabla no sufrirá variaciones. en nuestro caso será siempre de 500 píxel. Así. sin embargo. la anchura de la tabla será distinta según sea la resolución del vídeo del usuario. es decir. quien tenga un vídeo con resolución 640x480 verá una tabla de unos 320 píxel (porque hemos impostado un ancho de tabla equivalente al 50% de .

mientras quien tenga un vídeo con resolución 800x600 verá una tabla de 400 píxel.la página). .

.

.

.

Esta etiqueta se usa comúnmente para agrupar un bloque de elementos. para luego añadirle un estilo determinado.</p> </div> Grupo 1 Este bloque tiene definido el texto de color rojo. : Internet Explorer : Firefox : Google Chrome : Opera : Safari .</p> </div> <div style="color:green"> <h3>Grupo 2</h3> <p>Este bloque tiene definido el texto de color verde. T=Transitional. and F=Frameset.DIV Definición La etiqueta <div> se utiliza para definir una sección dentro del documento. Grupo 2 Este bloque tiene definido el texto de color verde. Posibles Atributos de la Etiqueta <div> Referencias: DTD nos indica en que DTD se permite cada atributo. Ejemplo Código Resultado <div style="color:red"> <h3>Grupo 1</h3> <p>Este bloque tiene definido el texto de color rojo. S=Strict.

El atributo id actúa:  Como selector para las hojas de estilo(CSS).   Como vínculo destino para vínculos de hipertexto. clase El atributo class actúa:  Como selector para las hojas de estilo(CSS). cuando se asigna información de estilo a un conjunto de elementos.  Ayudar a los sintetizadores de voz.  Como medio de hacer referencia a un elemento en particular desde un script.  Ayudar al agente de usuario a hacer decisiones . id Nombre Asigna un nombre a un elemento.  Para procesos generales por parte del usuario. title Nombre Este atributo ofrece información consultiva sobre el elemento para el cual se establece. dir ltr o rtl Especifica la dirección del texto.  lang código de lenguaje rtl : De derecha a izquierda (right to left). Especifica el idioma base de los valores de los atributos y del texto contenido en un elemento. Como nombre de un elemento object declarado.Atributos align Valor Left Soportado por: Descripción Desaprobado Especifica la alineación horizontal del contenido del elemento div. El atributo lang es útil para:  Ayudar a los motores de búsqueda. TF Justify Atributos Estándard de la Etiqueta <div> Estos atributos son soportados por todos los navegadores : Internet Explorer Atributos : Firefox : Google Chrome Valor : Opera : Safari Descripción class nombre de la Asigna un nombre de clase. Valores posibles:  ltr : De izquierda a derecha (left to right).  Para procesos generales por parte del usuario. Center Right DTD Ej. style Estilo Este atributo especifica información de estilo para el elemento actual.

onclick Script El script corre cuando se hace clic con el mouse. ligaduras. y espaciado. Eventos de la Etiqueta <div> Los eventos son soportados por todos los navegadores : Internet Explorer Evento : Firefox : Google Chrome : Opera Valor : Safari Descripción onkeydown Script El script corre cuando se pulsa una tecla. ondblclick Script El script corre cuando se hace doble clic con el mouse. onmouseout El script corre cuando el mouse se aparta de un elemento. sobre separación de palabras. onmousemove Script El script corre cuando el mouse se mueve mientras está sobre un elemento. onkeyup Script El script corre cuando una tecla se suelta. Ayudar a los verificadores de ortografía y gramática. onmouseup El script corre cuando el botón del mouse se suelta cuando está encima de un elemento. Script Required . onmousedown Script El script corre cuando el botón del mouse se pulsa cuando está encima de un elemento. Script onmouseover Script El script corre cuando el mouse se sitúa sobre un elemento. onkeypress Script El script corre cuando se pulsa y se suelta una tecla.

[else] Esto proporcionará un contenido alternativo. Por Ejemplo: Si desea agregar un mensaje adicional para beneficiarios que son de California. en caso de que las condiciones anteriores fallen.IF if:fieldname=value] Este evaluará los valores de campo y continúa si hay una coincidencia. puede crear el siguiente constructor [if:State=CA] . [endif] Esto es para marcar el final de las declaraciones condicionales. El campo se refiere a el nombre de la columna [elseif: fieldname=value] Esto proporcionará el contenido alternativo si la condición dada se cumple.

puede crear el siguiente constructor: [if:State=CA] Tenemos una reunión el 24 de Febrero [elseif:State=TX] Tenemos una reunión el 28 de Febrero [endif] Si desea agregar un mensaje adicional para beneficiarios que son de California y otro para todos los demás. puede crear la siguiente construcción [if:State=CA] Tenemos una reunión el 24 de Febrero . puede crear el siguiente constructor: [if:State=CA] Tenemos una reunión el 24 de Febrero [else] Tenemos una reunión el 28 de Febrero [endif] Si desea agregar un mensaje adicional para beneficiarios que son de California y otra para los contactos de Texas y otra para todos los demás.Tenemos una reunión el 24 de Febrero [endif] Si desea agregar un mensaje adicional para beneficiarios que son de California y uno diferente para los contactos de Texas.

$cantidad++. En cambio en el cambio del if-else sólo se comprueba la condición una vez. la condición vuelve a comprobarse una y otra vez mientras siga siendo cierta. While (condicion) { // Instrucciones a ejecutar una y otra //vez mientras la condición sea cierta } El funcionamiento es muy parecido al del if-else. } . while ($cantidad < 10) { echo ("$cantidad "). la diferencia estriba en que si la condición es cierta y se ejecuta la orden. los bucles nos permiten utilizar una condición para determinar cuántas veces queremos ejecutar una instrucción. si es cierta se ejecuta la instrucción y se sigue con el programa. Ejemplo: $cantidad = 1.[elseif:State=TX] Tenemos una reunión el 28 de Febrero [else] No tenemos reuniones este mes [endif] While If else nos permitía decidir si queríamos ejecutar o no una instrucción en función de una condición.

do { echo ($cantidad). } while ($cantidad<1). sólo que comprobamos si la condición es cierta al final del bucle en lugar de al principio. Así nuestras instrucciones se ejecutan siempre al menos una vez. lo que no ocurre en las condiciones while si la condición es falsa. $cantidad = 1. son muy parecidos a los bucles while. Matriz y Arreglos .Do While Los bucles do while.

.

.

.

php http://www.hazunaweb.sourceforge.com/119.Fuentes: http://html.net/Construir-Aplicaciones-en-HTML5-Lo-quenecesita-saber .virtualnauta.com/html-etiquetas-basicas http://elcentrohtml5.

virtualnauta.com/html-etiqueta-div .http://www.com/php/php09b.htmlpoint.webestilo.virtualnauta.com/html-etiqueta-button http://www.com/curso-de-html/formularios-conhtml5/required.com/guida/html_11.html http://www.phtml http://www.htm http://www.comocreartuweb.