Programación Web 2010

Les dejo un ejercicio completo para que armen.
Lean bien la letra, y cualquier consulta no duden de escribirme.

descargar

| 1 comentarios

Buenas gente, les dejo un par de ejercicios sobre formularios. La idea es que generen el código HTML necesario para mostrar los siguientes formularios:
1-
2 -

| 0 comentarios

• Un formulario es una sección de un documento web que contiene elementos especiales llamados "controles".
• Los formularios son completados por el usuario final y sus datos se envían a través de la web hacia un servidor que los procesará.
• Algunos de estos controles son: campos de texto, checkboxes, radio buttons, combos, etc.

Formularios

• El elemento FORM actúa como contenedor de los controles.
• Especifica el programa que procesará los datos en el servidor, mediante el atributo action
• Especifica el método HTTP (GET o POST) que se utilizará para pasar los datos al servidor,mediante el atributo method.
• Puede contener texto y otros elementos HTML además de los controles.

 <FORM action="procesodatos.php" method="post">
 

 ...contenido  del formulario…


 </FORM>

Controles

• Input, de tipo
  • text : Casilla de texto
  • password : Campo de password (idem "text" pero ocultando los caracteres)
  • checkbox : Casilla de verificación
  • radiobutton : Casilla de opción
  • button : Boton de formulario
  • submit : Boton que envia el formulario
  • reset : Boton que resetea todos los valores del form
  • file : Campo para ingresar archivos
  • hidden : Campo oculto
• Textarea (campo de texto multilinea)
• Select & Options (combobox o lista desplegable)

atributos de campo input

Además de type, el elemento INPUT tiene los siguientes atributos:

name
el nombre del control
name="un_nombre"

value
el valor inicial del control

value="valor"

maxlength
la cantidad máxima de caracteres.
Solo cuando type es text o password
maxlength="32"

checked
checked especifica que incialmente el control está seleccionado.
sólo para type radio button y checkbox
checked="checked"

src
mediante URL, define la ubicación de la imagen
sólo para cuando type es image
src="imgs/imagen.jpg"

Ejemplo

<form action="datos.php" method="get">

 Primer nombre: <input name="primerNombre" type="text" maxlength="15"><br/>
 Primer apellido: <input name="primerApellido" type="text"  maxlength="20"><br/>
 e-mail: <input name="email" type="text" maxlength="20"><br/>
 <input type="radio" name="sexo" value="H" checked="checked"  >Hombre<br/>
 <input type="radio" name="sexo" value="M">Mujer<br/>
 <input type="submit"><input type="reset">
</form>

Select y Options

• El elemento SELECT representa un combo.
• Cada opción del combo es representada por el elemento OPTION.
• El elemento SELECT debe tener al menos un elemento OPTION.

<select name="colores">

 <option value="rojo">ROJO</option>
 <option value="azul">AZUL</option>
 <option value="rojo">VERDE</option>
</select>

Atributos option y select

• Para Select :
  multiple . Permite elegir varias opciones.
• Para Option :
  selected . Permite indicar que esta seleccionado.

Textarea

• El elemento TEXTAREA crea un control de texto multilínea.
• El contenido de este elemento se representa como el valor inicial del control.

<textarea name="textos">
Este es el texto inicial del textarea
</textarea>

Elementos de solo lectura

Se utiliza el atributo readonly para determinar que el control es de sólo lectura.

Los controles de sólo lectura:
Su valor se envía cuando se hace el submit del formulario al que pertenece.
Su representación depende del navegador.

Elementos deshabilitados

Dependiendo del contexto, cuando la selección de determinados controles es innecesaria o irrelevante, es importante que podamos deshabilitar o asignar como de sólo lectura estos controles.

P.Ej. No queremos que un usuario haga el submit de un formulario hasta que no haya completado todos los datos. En este caso controlamos que el botón submit se encuentre deshabilitado hasta que se hayan completado todos los datos.

Se utiliza el atributo disabled para determinar que el control está deshabilitado.

Los controles deshabilitados: Su valor no se envía cuando se hace el submit del formulario al que pertenece.
Son representados de diferente manera dependiendo del navegador, generalmente en grisado.
Los elementos que soportan este atributo son:
BUTTON, INPUT, OPTION, SELECT y TEXTAREA

| 0 comentarios

Buenas gente, les dejo un ejercicio de HTML para que se bajen.
La idea es que tienen que reproducir la pagina de la imagen; les dejo los textos que tienen que usar y recuerden que es solamente con html, sin CSS ni ninguna declaración de estilos.
Bajar archivos del ejercicio

| 0 comentarios

1. Definir una variable $nombre y cargarle tu nombre. Mostrar esa variable dentro de un div con borde rojo.
2. Definir una variable de nombre $size con un valor numerico (entero). Utilizar esa variable como tamaño de fuente de un div (con contenido).
3. Definir una variable $sueldo_total y otra $horas_trabajadas. Mostrar en una tabla de 3 celdas con encabezados, el sueldo, las horas trabajadas y la paga promedio por hora.
4. Que muestra en pantalla el siguiente código:

   <?php
   $a = "Hola";
   $a = "Adios";
   $a= $a . " Mundo" ;
   echo $a ;
   ?>
   

5. Que muestra en pantalla el siguiente código:

   <?php
   $a = 3;
   $b = b
   $a= $a * $b * $c ;
   echo $a ;
   ?>
   

6. Que muestra en pantalla el siguiente código:

    <?php
   $a = 3;
   $b = " soy b" ;
   $a= $a . $b;
   echo $a ;
   ?>
   

| 0 comentarios

Buenas, les dejo algunos enlaces recomendables para tener a mano:

• Referencia HTML/XHTML . Listado con las etiquetas válidas y los atributos que puede llevar cada una. En inglés.
• Manual breve en español. Con algunos ejemplos simples.
• Guia Breve XHTML de W3C. Algunos ejemplos y consideraciones interesantes sobre html/xhtml.
• Libro on-line sobre XHTML Completa documentación, en español.

| 0 comentarios

Una pagina HTML es un archivo de texto plano, con un formato de etiquetas especifico que un explorador (browser; firefox, iExplorer, etc) interpretará y dará formato al mismo.

Que es HTML?

HTML es un lenguaje para describir paginas web.

• HTML es Hyper Text Markup Language
• HTML no es un lenguaje de programación, es un lenguaje de marcas o de marcados
• HTML utiliza etiquetas para dar forma a un documento web.
• HTML uses markup tags to describe web pages

Etiquetas HTML

• Las etiquetas son palabras claves rodeadas por símbolos de mayor y menor como
• Normalmente las etiquetas vienen en pares como <strong> </strong>
• El primero es el tag de abertura, el segundo el de clausura.

Documentos HTML = Paginas web

• Los documentos HTML describen paginas web
• Los documentos HTML contienen etiquetas html y texto plano.

Un Browser o explorador de internet (como Internet Explorer o Firefox) lee un documento HTML y lo despliega como página web. Este no muestra las etiquetas HTML, sino que usa las etiquetas para interpretar el contenido de la pagina.

<html>
 <body>
  <h1>Un encabezado</h1>
  <p>Un parrafo</p>
 </body>
</html>

Elemento HTML

Un elemento HTML es todo lo contenido entre una etiqueta de apertura y una de clausura.

Etiqueta apertura /th>	Contenido del elemento	Etiqueta de clausura
<p>	Esto es un parrafo	</p>
<a href="pagina.html" >	Esto es un link	</a>
<br />

Sintaxis de elementos HTML

• Un elemento HTML comienza con una etiqueta de apertura
• Un elemento HTML termina con una etiqueta de cierre / etiqueta de clausura
• El econtenido del elemento es todo lo que esta entre las etiquetas
• Algunos elementos HTML tienen contenido vacío
• Los elementos vacios se cierran en el la etiqueta de apertura.
• La mayoria de los elementos HTML pueden llevar atributos.

Atributos HTML

• Los elementos HTML pueden tener atributos
• Los atributos dan informacion adicional sobre el elemento
• Los atributos siempre se especifican en la etiqueta de apertura
• Los Atributos se usan en par nombre/valor como: id="unId"

Esta es una lista de los atributos estandar de la mayoria de elementos HTML:

Atributo	Valor	Descripcion
class	nombre_de_clase	La clase (css) del elemento
id	identificador	Un identificador (unico en esa pagina) del elemento
style	definicion_de_estilo	Una definicion de estilo dentro del html

| 0 comentarios