HTML5 AVANZADO 1.Tablas <table><tr><td> Permiten mostrar datos en forma ordenada, en filas y columnas. Para la creación de una tabla intervienen: • • • <table> Es la marca de comienzo de la tabla. <tr> Es la marca de comienzo de una fila. <td> Es la marca de comienzo de una celda. Tablas <table><tr><td> <table border=1><tr><td>Chrome</td><td >50,3 %</td></tr><tr><td>Explorer</td><t d>27,5 %</td></tr><tr><td>Firefox</td><td >20,5 %</td></tr></table> 2.Tablas con Título <table> <tr> <th> Para indicar que se trata de una fila de títulos utilizamos el elemento <th> en lugar de <td>. El navegador resalta los títulos del resto de la tabla. Una vez que utilicemos CSS, visualmente será más atractivo. Tablas con Título <table><tr><th> <table border=1><tr><th>Navegador</th><th>P orcentaje</th></tr><tr><td>Chrome</td>< td>50,3 %</td></tr><tr><td>Explorer</td><td>27, 5 %</td></tr><tr><td>Firefox</td><td>20,5 %</td></tr></table> 3.Caracteres especiales Algunos caracteres no se pueden mostrar, ya que el navegador los confundiria con las marcas HTML. La solución es utilizar otra sintaxis: < > & " Espacio en blanco < > & " Para indicar que el sitio tendrá acentos y ñ: <meta charset=utf-8> Caracteres especiales <h1> 10+x*y < 12*z </h1> 4.Formularios <form> Un formulario permite cargar datos al servidor. Es el medio ideal para registrar datos, solicitar productos, sacar turnos etc. El lenguaje HTML solo tiene el objetivo de crear el formulario. Para guardar los datos, es necesario utilizar un lenguaje que se ejecute en el servidor (PHP, ASP, JSP, Python, etc.) Formularios <form> <form action=guardarDB.php> Ingrese su nombre:<input type=text name=nombre><br> Ingrese su fecha de nacimiento:<input type=date name=fecha><br><input type=submit></form> Formularios <form> Ingrese su nombre: es un texto fijo. <input type=text name=nombre> Es un cuadro de texto. name=nombre Es la variable que será enviada. <input type=submit> Es el botón para enviar. 5.Formularios Campo input <input> <input> nos permite definir cuadros de texto, fechas, números, claves, botones, etc. <input type= • • • • • • • • color date email file hidden number password range • • • • • • text textarea time tel url week 5. Formularios Campo input <input> <form action=acceso.php> Usuario: <input type=text name=usuario> <br> Clave: <input type=password name=clave> <br> <input type=submit> <input type=reset> </form> 5. Formularios Campo input <input> <form action=color.php> Elegir Color: <input type=color name=color> <br> <input type=submit></form> Formularios Campo input <input> <form action=edad.php> Edad: <input type=number name=edad min=1 max=100> <br> Hora: <input type=time name=hora> <br> <input type=submit></form> Parámetros: readonly, value • • Si definimos la propiedad readonly a un <input> el mismo será de solo lectura. Si definimos la propiedad value a un <input> el mismo tendrá un valor por defecto. <input type=text name=empresa value=Tigo readonly> <input type=submit value=”Enviar SMS”> 7. Area de Texto <textarea> Permite el ingreso de varias líneas a diferencia del cuadro de texto (<input type=text) Es muy utilizado cuando queremos ingresar un texto de una longitud grande. La sintaxis para definir un área de texto es: <textarea name=comentarios rows=5 cols=60> </textarea> 7. Area de Texto <textarea> <form action=sms.php> Para:<br> <input type=tel name=numero value=09><br> Mensaje:<br> <textarea name=sms rows=5 cols=40></textarea><br> Firma:<br> <input type=nombre name=firma> <br> <input type=submit> 8. Checkbox <input type=checkbox....> Un checkbox es una casilla de selección que puede tomar dos valores (seleccionado/no seleccionado). Se utiliza dentro de los formularios. Veamos la sintaxis para definir controles de formulario de tipo checkbox: Seleccione sus operadoras:<br> Claro<input type=checkbox name=claro><br> Personal<input type=checkbox name=personal><br> Tigo<input type=checkbox name=tigo><br> 8. Checkbox <input type=checkbox....> <strong>Seleccione una o varias:</strong><br><input type=checkbox name=claro>claro<br><input type=checkbox name=vox>vox<br><input type=checkbox name=tigo>tigo<br><input type=submit> 9. Radio <input type=radio....> Cuando tenemos un conjunto de opciones pero solo una puede ser seleccionada debemos emplear controles visuales de tipo radio. Para definir controles de tipo radio también utilizamos el elemento input inicializando la propiedad type con el valor "radio" 9. Radio <input type=radio....> ¿Cuánto sabe de informática? <input type=radio name=opcion value=1>Nada<br> <input type=radio name=opcion value=2>Poco<br> <input type=radio name=opcion value=3>Mucho<br> Como podemos observar todos tienen el mismo valor en la propiedad name. Cuando seleccionamos uno se desmarca el anterior. El valor que se rescata en el servidor es el dato almacenado en la propiedad value. 9. Radio <input type=radio....> ¿Cuánto sabe de informática?<br> <input type=radio name=opcion value=1>Nada<br> <input type=radio name=opcion value=2>Poco<br> <input type=radio name=opcion value=3>Mucho<br> <select name=..> </select> El elemento select es un cuadro de selección. Nos permite seleccionar una opción entre un conjunto de muchos valores. Podemos seleccionar varias opciones. <select name=..> </select> <form action=pais.php>Seleccione su país:<select name=pais><option value=1>Argentina</option><option value=2>Brasil</option><option value=3>Paraguay</option></select><inp ut type=submit></form> Ejercicios https://docs.google.com/forms/d/1PuWv_t1flnKVPcKNfpPKat hG7yuDkLLnN7r-3fBlTQc/viewform