Curso de HTML

Curso de HTML
HTML es un lenguaje de marcas usado para la creacin de pginas web de hipertexto. Su histria empieza en 1993 y su evolucin ha sido incesante hasta la actualidad. En este curso aprenderemos a escribir documentos en HTML para ser interpretados por el navagador obteniendo como resultado una pgina web.
Introduccin al HTML
HTML (HiperText Markup Language) es un lenguaje de formateo de texto en entorno web. HTML es un lenguaje de marcas, lo que significa el texto del documento est mezclado con comandos que aportan informacin extra sobre el texto que delimita. Informacin que el navegador interpreta para dar formato a la pgina que finalmente ver el usuario. Las marca se limitan con los signos menor que ( < ) y mayor que ( > ) y afectan a todo el texto que esta situado entre la marca de apertura y la de final (cerrada con una barra ( / ) ademas del mayor que), por ejemplo:
000 <b>Texto en negrita</b> Maximizar Seleccionar XML
La estructura HTML es la siguiente:

000 001 002 003 <html> <head><title>Aqu el titulo de tu pgina</title></head> <body>Texto de tu pagina (aqu irn los cdigos, etc</bo dy> </html> Maximizar Seleccionar XML
Les explicaremos el significado de cada etiqueta: <HTML> Indica que la pagina web esta echa en ese idioma y limita el documento. <HEAD> Es un rea de definicin del documento HTML al que precede donde especifica informacin cmo el titulo de la pagina, entre etiquetastitle y otra informacin destinada a buscadores. <TITLE> Esta etiqueta ser utilizada para los marcadores del navegador y definir un nombre para tu pgina, te recomiendo que sea corto pero explicativo para que si te das de alta en los buscadores con solo el titulo quede claro de que tu pgina va de cualquier tema. <BODY> Aqu ir todo el texto de tu pgina, todos tus cdigos, etc Usted puede empezar a hacer su web en un simple Bloc de Notas si tiene Windows o Simple Text si utiliza Macintosh aunque tambin puede adquirir otra serie de productos u programas
que facilitan su tarea sin nescesidad de conocer el lenguaje HTML asistiendote en el diseo de tus contenidos para el web.
El cuerpo del documento

Las pginas HTML siempre y cuando no estn formadas por frames, tienen su contenido delimitado por las etiquetas body (el cuerpo del documento), estas etiquetas definen que forma parte del contenido de la pgina y que no, de esta manera, si nuestro servidor nos aade cdigo quedar fuera del cuerpo, ya que no es contenido de la pgina. La sintaxi para este elemento es la siguiente:
Sintaxi 000 <body[ propiedades]></body> Maximizar Seleccionar XML
Entre <body[ propiedades]> y </body> ir el contenido HTML de la pgina, y en propiedades especificaremos propiedades del objeto body, como por ejemplo: background - Imagen de fondo topmargin - Margen superior leftmargin - Margen izquierdo bgcolor - Color de fondo del documento text - Color del texto de la pgina link - Color de los vnculos vlink - Color de vnculos visitados alink - Color de vnculos activos Por ejemplo crearemos un cuerpo de documento pegado a los margenes y de fondo negro:
Ejemplo 000 <body topmargin="0" leftmargin="0" bgcolor="#000000"></body> Maximizar Seleccionar XML
En el ejemplo se ve la forma de editar una propiedad
Formateo bsico
Vamos a ver como podemos modificar el aspecto de nuestro texto usando fragmentos en negrita, cursiva, y otras opciones que nos brinda el lenguaje HTML. La manera que tendremos de hacer esto es usando las etiquetas de formato que son las siguientes: b - Texto en negrita i - Texto en cursiva h1, h2, h3... - Encabezados p - Prrafo
u - Texto subrayado s - Texto tachado kdb - Texto que el usuario debe escribir cite - Este cdigo es usado para citas generalemente cortas dfn - Resalta una palabra que se va a definir posteriormente right - Texto desplazado hacia la derecha center - Texto desplazado hacia el centro de la pgina font - Marca que sirve para definir la fuente y el color del texto que escribiremos. big - Texto de dimensiones mas grandes pre - Texto que ha sido formateado, es decir que respeta los saltos de lnea, enters, etc que ha colocado usted. Estas marcas las usaremos de la siguiente manera:
000 Podemos meter texto en <b>negrita</b> Maximizar Seleccionar XML
La marca font es un caso especial ya que gracias a la dicha etiqueta podemos modificar la fuente e color del texto que posteriormente queramos escribir. face - Seguida de esta palabra colocaremos la fuente que queramos (ej. Arial) size - Seguida de esta palabra colocaremos el tamao que queramos que sea la letra (Ej. 5) color - Seguida de esta palabra colocaremos el color RGB que queremos dar a nuestro texto. Aqui teneis un ejemplo:
000
<font
color="#ff0000" size="5">Letra de color rojo y tamao 5</font> Maximizar Seleccionar XML
Para darle un toque bonito al texto podemos mezclar marcas, es decir poner una frase que este limitada entre <b></b> pero entre medio de b que aya otra marca, bueno nos hay mejor explicacin que poner un ejemplo para que lo entendis.
000
<i><font face="Verdana" size="5">1<font face="Arial">2<font color="#FF0000">3</font><b><font color="#FF0000">4</font><u>5</u></b></font></i><u><b>6</b></font></u> Maximizar Seleccionar XML
Si quereis podeis ver el resultado de este cdigo en un ejemplo que he subido.
Colores en HTML
En el diseo de un sitio web atractivo es muy importante el color, sera imposible hoy en da imaginar internet en blanco y negro, pero... Como se define un color en HTML? ArribaEl color HTML
La respuesta es muy sencilla, un color se suele definir con un nmero de 6 cifras precedidas por almoadilla (#), donde los grupos de 2 cifras son cada uno la intensidad del Rojo, Verde y Azul de 0 a 255 en hexadecimal (0-FF), utilizando el llamado modelo RGB 24 bits. De esta manera, si tenemos #00FF00, obtendremos color verde, ya que contiene 00 de rojo, FF (255) de verde y 00 de azul. Sabiendo esto y un poco de Formateo Bsico, podramos codificar un texto de color rojo en HTML de la siguiente manera:
000
<font color="#FF0000">Texto de color rojo</font>

Maximizar Seleccionar XML
Para adaptarse a las pantallas que solo disponen 256 colores se recomienda utilizar los colores llamados web-safe que se obtienen usando combinaciones de 00, 33, 66, 99, CC y FF.
Paleta de colores Web Safe Vamos a ver los codigos HTML de alguno de estos colores web-safe: #000000 #009900 #00FF00 #000099 #0000FF #009999 #00FFFF #990000 #999900 #99FF00 #990099 #9900FF #999999 #99FFFF #FF0000 #FF9900 #FFFF00 #FF0099 #FF00FF #FF9999 #FFFFFF Es posible que muchos de vosotros esteis acostumbrados a usar otro tipo de formato de color, por ejemplo red en lugar de #FF0000, pero sin embargo es bueno acostumbrarse a esta nomenclatura, nos evita tener que aprender los nombres de los colores y nos permite crear cualquier color que deseemos.
Enlaces
Para poder vincular un texto con una direccion de internet (URL) de manera que el visitante pueda acceder a ella con un simple click, usaremos la etiqueta de hipervnculoa.
Para indicar la direccion a la que queremos acceder usamos el atributo href de la siguiente manera:
000 001 <a href="http://www.programacionweb.net/"> programacionWeb</a> Maximizar Seleccionar XML
Donde podemos poner una URL absoluta, por ejemplohttp://www.programacionweb.net/ o poner una URL relativa como/paginas/index.asp para indicar un archivo i/o carpeta en el interior de la carpeta en la que estamos situados. Tambien podemos hacer un vnculo a una parte concreta de la pgina, para ello crearemos un vnculo en ese lugar para indicar a que parte hay que ir usando el atributoname.
000
<a name="parte1" />

Luego haremos un vnculo normal indicando que vamos a esa parte con una almoadilla (#):
000
<a href="pagina.htm#parte1"></a>
Pondremos la direccion de la pgina (si estamos en otra pgina), la almoadilla y el nombre (name) del vnculo al que vamos.
0 <a 0 href="#fin">Ir al final</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br 0 ><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a name="fin" />Final Maximizar Seleccionar XML
Podremos poner tantos marcadores (vinculos con name) como queramos para movernos por el interior de la misma pgina, si el vnculo es en la misma pgina no se volver a cargar, simplemente se desplazar hasta la posicion del vnculo.
Imgenes en HTML
Vamos a ver como podemos poner las fotos e imgenes que queramos en nuestra web, poner imgenes es una tarea casi imprescindible para que nuestra web quede ms navegable y con un mejor estilo. Debis tener en cuenta que las imgenes que queramos subir deben estar en formato JPG, GIF o PNG. Para definir las caractersticas de nuestra imagen, tendremos que tener en cuenta los siguientes atributos que pondremos en el interior de la etiqueta de imagen (<img>): src- Este atributo es obligatorio e indica el nombre del archivo (que lo pondremos entre comillas) en este campo se debe poner el URL que nos llevar a la imagen u fotografa. align- Permite controlar la alineacin de una fotografa con respecto al texto o a otras imgenes en esa lnea, para llevar a cabo esta tarea necesitamos los campos bottom (abajo), middle (en
medio), top (arriba), left (izquierda), right (derecha). alt- Entre comillas se podr poner un texto que si da error o no mientras que se carga podrn leer. width- Este atributo es opcional pero yo os lo recomiendo ya que ayudis al navegador, en este campo ponis el ancho de la imagen u fotografa. height-Esta es la hermana de width, dijimos que en width indicbamos el ancho de la imagen en esta indicamos el alto de la imagen y claro, pues tambin se recomienda. border- Esta es la prima de height y de width, en este campo se debe poner el ancho del borde de la imagen (si es que lleva claro). Ahora os pondr un ejemplo de ello:
000
<img
src="/nombre_de_tu_carpeta/nombre_de_tu_foto.jpg" width=140 height=210 border=0 alt="Aqu el nombre de la imagen"> Maximizar Seleccionar XML
Ahora os vamos a poner un ejemplo de cmo queda una imagen:
Atentamente JoTo.
Tablas
Las tablas sn una buena herramienta para organizar los datos en una pgina web, ademas nos permiten estructurar las paginas de nuestro sitio separando la cabecera, el men, el contenido... La creacin de tablas a partir de cdigo es compleja por lo que si queremos crear una tabla rpidamente podemos usar programas como Frontpage o Dreamwaver, pero es necesario saber codificarlas a s que vamos all. ArribaTabla de contenido Creacin de la tabla Ancho de filas y columnas Bordes y margenes Combinar celdas Color de fondo
Creacin de la tabla
Para que el navegador interprete que vamos a realizar una tabla, deberemos usar las etiquetas table, entre cuyas etiquetas pondremos la estructura y el contenido de la tabla como se indica en el ejemplo:
000 001 002 <table>  </table> Maximizar Seleccionar XML
Para definir la estructura de la tabla primero definiremos las filas con tr y en el interior de cada fila pondremos las columnas con td:
000 001 002 003 004 005 006 007 008 009
<table> <tr> <td>Fila 1 columna <td>Fila 1 columna </tr> <tr> <td>Fila 2 columna <td>Fila 2 columna </tr> </table>
Maximizar Seleccionar
1</td> 2</td>
1</td> 2</td>
XML
ArribaAncho de filas y columnas Ahora vamos a ver como definir el ancho de una tabla o columna, para ello usaremos el atributo width tanto en la etiqueta table para modificar el ancho de toda la tabla, como sobre la etiqueta td para cambiar el ancho de una columna:
000 001 002 003 004 005 006 007 008 009
<table width="100%"> <tr> <td width="300">Fila 1 <td>Fila 1 columna </tr> <tr> <td>Fila 2 columna <td>Fila 2 columna </tr> </table>
columna 1</td> 2</td>
1</td> 2</td>
XML
ArribaBordes y margenes
Esta es otra posibilidad interesante de las tablas, nos permiten definir los bordes para personalizar su aspecto, asi podemos usar el atributo border para indicar el grosor del borde, cellpadding para indicar el reborde de las celdas y cellspacing para la separacin entre las mismas:
000 001 002 003 004 005 006 007 008 009
<table border="0" cellpadding="10" cellspacing="5"> <tr> <td>Fila 1 columna 1</td> <td>Fila 1 columna 2</td> </tr> <tr> <td>Fila 2 columna 1</td> <td>Fila 2 columna 2</td> </tr> </table>
Ademas tambien podemos cambiar el color del borde usando bordercolor
Combinar celdas
Otra opcin interesante es conseguir que una celda ocupe la posicin que deberan ocupar dos o mas celdas, de esta manera, podemos hacer una tabla con 3 celdas, dos en una columna y otra en otra columna, para que una celda ocupe mas de una columna, usaremos colspan y para que ocupe mas de una fila rowspan:
000 001 002 003 004 005 006 007 008 <table> <tr> <td rowspan="2">Fila 1 y 2 columna 1</td> <td>Fila 1 columna 2</td> </tr> <tr> <td>Fila 2 columna 2</td> </tr> </table> Maximizar Seleccionar XML
ArribaColor de fondo Para cambiar el color de fondo de una celda o de toda la tabla, lo haremos con bgcolor:
000 001 002
<table bgcolor="red"> <tr>
003 004 005 006 007 008 009
<td>Fila 1 columna <td>Fila 1 columna </tr> <tr> <td>Fila 2 columna <td bgcolor="black">Fila </tr> </table>
1</td> 2</td>
1</td> 2 columna 2</td>
XML
Finalmente vamos a ver un ejemplo de tabla usando todos los conocimientos que hemos adquirido:
000 001 002 003 004 005 006 007 008
<table width="100%" border="0" cellpadding="3" cellspacing="0" bgcolor="red"> <tr>  <td width="300" bgcolor="blue" rowspan="2">Fila 1 y 2 columna 1</td> <td>Fila 1 columna 2</td> </tr> <tr>  <td>Fila 2 columna 1</td> </tr> </table>
Podeis ver como queda siguiendo este enlace
Formularios HTML
Un formulario es un entorno de interaccion con el visitante de una pgina web, en su interior encontramos un seguido de campos de formulario editables por el usuario, que le permiten enviar informacion a nuestro servidor donde la podremos tratar por ejemplo con PHP. El formulario engloba todos los campos de formulario que encontramos entre las etiquetas de inicio y final de formulario, <form> y </form> respectivamente: Campo de texto - El usuario puede insertar un texto de una linea Area de texto - El usuario puede insertar un texto de tantas lineas cmo quiera Casilla de verificacion - El usuario seleccionar o no una opcion Boton de opcin - El usuario puede seleccionar una opcion de una lista Campo desplegable - El usuario puede escoger una o mas opciones de la lista Campo de archivo - El usuario puede enviar un archivo al servidor Asimismo y para configurar dicho formulario, en la etiqueta de inicio de formulario podemos aadir ciertos atributos cmo por ejemplo: action - Define la direccion del programa que tratar los datos enviados, esta ser asimismo la direccion que ver el usuario una vez enviados los datos method - Define la manera en que sn enviados los datos del formulario, pudiendo ser GET ( Datos visibles en la barra de direccion ) o POST. enctype - Define como encriptar los datos del formulario, no es frecuente usarlo.
Veamos un ejemplo de formulario con unos campos variados en su interior:
000 001 002 003 004 005 006 007 008 009
<form method="POST" action="index.php"> Nombre<br> <input type="text" name="T1" size="20"> <br><br> Texto<br> <textarea rows="2" name="S1" cols="20"></textarea> <br><br> <input type="submit" value="Enviar" name="B1"> <input type="reset" value="Restablecer" name="B2"> </form>
Este formulario contiene un campo de texto, uno de texto multilinea, un boton enviar y uno reestablecer.
Campos de texto o contrasea

os campos de texto sn los ms comunmente utilizados en los formularios, permiten que nuestros usuarios nos envien un texto de una sola lnea y una longitud que si queremos podemos limitar. Si lo que queremos es que nuestro visitante nos enve un texto en el que se pueda incluir mas de una linea, entonces deberemos usar un area de texto en lugar de un campo de texto. Hay un tipo especial de campo de texto que nos oculta lo que escribimos para que los usuarios puedan insertar contraseas sin que se vea lo que escriben Crear un campo de texto es muy sencillo, ya que se trata de un objeto input de tipo text o password:
000 001 002 003 004  <input type="text">  <input type="password">
Maximizar
Seleccionar
XML
A continuacion vamos a ver los atributos mas comunes que utilizaremos en nuestros campos de texto y de contrasea: name - Contiene el nombre que identificar el campo de formulario con su valor value - Es el valor por defecto del campo, util para indicar un ejemplo. disabled - Si indicamos esta propiedad, el campo de texto aparece bloqueado y no se puede escribir en el.
readOnly - No bloquea el campo pero no permite que su valor por defecto sea modificado. length - Indica el nmero de carcteres que se muestran simultneamente en pantalla. maxlength - Limita la cantidad de caracteres del campo. Vamos a ver un ejemplo mas completo de campo de texto:
000 001 <input type="text" name="nombre" value="Manolo" length="35" maxlength="120"> Maximizar Seleccionar XML
Este campo llamado nombre mostrar 35 caracteres simultaneamentey permitir hasta 120, su valor por defecto ser 'Manolo'.
Areas de texto
Un area de texto o textarea es un campo de formulario multilnea, en el que nuestros usuarios pueden escribir el texto que deseen con tantas lineas cmo quieran. La manera de crear un area de texto es la siguiente:
000 <textarea name="T1">Texto por defecto</textarea>
Maximizar
Seleccionar
XML
Donde Texto por defecto sera el valor quen tomar el campo cuando el usuario cargue el formulario y T1 el nombre (name) que identificar el campo de texto tanto en el servidor como en el cliente Otros atributos de los que dispondremos sn: rows - Nmero de lineas de texto que se mostraran a simple vista y sin desplazar el cuadro de texto. cols - Funciona igual que rows solo que en este caso sobre las columnas y no sobre las filas. El atributo que no existe en este caso es maxlength, pero podemos limitar el tamao del texto introducido con otros metodos, por ejemplo con javascript.
Limitar carcteres de un textarea

Vamos a ver cmo podemos limitar el numero de carcteres de una area de texto de nuestra web, para ello usaremos el evento onkeydown que nos detecta cuando acabamos de pulsar una tecla en dicho textarea. A dicho evento le pondremos la comprovacin del tamao y un mensaje en el caso de que nos hagamos pasado, ademas usaremos return false para que el caracter escrito por teclado no sea aadido en el texto.
000 <textarea onkeydown="if(this.value.length">= 300) { alert('Has superado el tamao mximo permitido'); return false; }"></text area>
Maximizar
Seleccionar
SCRIPT,XML
Al superar los 300 caracteres nos mostrar un mensaje de alerta y ya no podremos seguir escribiendo en el area de texto.
Esta es una forma de hacerlo pero hay mas, por ejemplo tambien podemos hacer que el formulario no se envie si el tamao del textarea supera el permitido, en este caso usamos el evento onsubmit.
00 <form onsubmit="if(document.forms[0].texto.value.length">= 300) 0 {alert('El tamao del textarea supera el permitido'); document.forms[0].t 00 exto.select(); return false}"> 1 <textarea name="texto"></textarea><br /> 00 <input type="submit" /> 2 </form> 00 Maximizar Seleccionar SCRIPT,XML 3
Este cdigo comprueba el tamao del texto introducido cuando se envia el formulario, y si es incorrecto muestra un error y selecciona el texto, si es correcto enviara el formulario.
Las casillas de verificacin

Las casillas de verificacion o checkbox, son casillas de marcado que permiten al usuario la aceptacion o por lo contrario la negacion de una afirmacion expuesta en un formulario. De esta manera podemos por ejemplo, conocer si un usuario, accepta o no unos trminos de servicio, quiere mostrar sus detos en su perfil de usuario... Crear una casilla de verificacion es muy sencillo, basta con hacer un input de tipocheckbox y seguirlo de un texto como podemos ver en el siguiente ejemplo: 000 <input type="checkbox" /> 001 Accepto los trminos de contrato Maximizar Seleccionar XML Las principales propiedades de un textbox son las siguientes: name - Este atributo, comn en todos los campos de formulario identifica el objeto con su valor value - Es el valor que tendr el campo del formulario cuando el usuario lo haya seleccionado, de lo contrario no tendra valor checked - Cuando se indica esta propiedad el elemento aparece seleccionado por defecto Veamos un ejempo de casilla de verificacin completa, a punto para insertar en nuestro formulario:
000 001
<input type="checkbox" name="cond" value="SI" />

Accepto los trminos de contrato Maximizar Seleccionar XML
Podemos crear mas de un checkbox con el mismo nombre, entonces el formulario tomara el valor del/de los checkbox seleccionado/s, para tratar estos valores con php el nombre del campo deber ser del estilo nombre[]. Tambien podemos trabajar con casillas de verificacion con javascript.
Botones de opcin
Los botones de opcion o radio, son una buena alternativa a los select para nuestrosformularios, ya que nos permiten la seleccion de una opcion entre las de una lista. La manera de crear un boton de radio es haciendo un input de tipo radio, vamos a ver como podemos hacer una lista de radios con su texto descriptivo al lado:
000 001 002 003 <input type="radio" name="R1" value="1">Opcion <input type="radio" name="R1" value="2">Opcion <input type="radio" name="R1" value="3">Opcion <input type="radio" name="R1" value="4">Opcion 1<br> 2<br> 3<br> 4
Maximizar
Seleccionar
XML
Vemos que todos los selects comparten el atributo name, este atributo permite la identificacion del campo en el cliente y el servidor, el valor de name, ser el identificado por el atributo value de la opcion seleccionada. Otro atributo importante de este objeto es el booleano checked, que nos indicar el estado por defecto del elemento, si estar o no seleccionado.
El campo select
El objeto select, nos permite mostrar una lista de opciones en un formulario, para que nuestros visitantes seleccionen una o mas opciones antes de enviar el formulario. Para definir diferentes las opciones, utilizaremos el objeto option, que insertaremos entre las etiquetas de apertura y cierre del select ( <select> y </select> ) de la siguiente manera:
000 001 002 003 004 <select> <option>Opcion 1</option> <option>Opcion 2</option> <option>Opcion 3</option> </select>
Maximizar
Seleccionar
XML
A continuacin teneis la principales propiedades del objeto select, que nos permiten deinir su comportamiento: name - Este atributo, comn en todos los campos de formulario identifica el objeto con su valor. size - Define el nmero de opciones que se muestran simultaniamente en pantalla cuando el elemento no esta desplegado. multiple - Cuando un select es multiple el visitante puede seleccionar mas de una opcion, para tratar selects multiples con php el nombre del select deber ser del estilo nombre[]. Y estos otros sn los principales atributos de los objetos option, que nos definiran como es individualemente una opcion de nuestro select: value - Indica el valor que tomar el select cuando esta opcion sea la seleccionada selected - Cuando un option es selected, aparece seleccionado por defecto.
Vamos a ver un ejemplo de select teniendo en cuenta los atributos que hemos visto para select y option:
000 001 002 003 004 <select size="2" name="Select1" multiple> <option value="1">Opcion 1</option> <option value="2">Opcion 2</option> <option value="3" selected>Opcion 3</option> </select> Maximizar Seleccionar XML
Creamos un campo select en el que el visitante puede seleccionar mas de una opcion, que mostrar 2 opciones simultaneamente y que tendra seleccionada la tercera desde el principio. Para seleccionar mas de una opcion usaremos [Ctrl] + click o [Shift] + click para seleccionar en grupo.
Proceso de datos mltiples

Vamos a ver como procesar los datos mltiples enviados por un campo de formulario a nuestro script PHP, estos datos son producidos por campos de tipo select o checkbox, en el caso de que el usuario seleccione mas de una opcion en un select multiopcion, o mas de una casilla checkbox con el mismo nombre. Para que podamos tratarlos con PHP, haremos una pequea modificacion al nombre de estos campos a los que aadiremos [] para que PHP reciba un array con los valores del campo de formulario:
000 001 002 003 004 <select size="2" name="s1[]" multiple> <option value="1">Opcion 1</option> <option value="2">Opcion 2</option> <option value="3" selected>Opcion 3</option> </select>
Maximizar
Seleccionar
XML
De esta manera, al recibir los datos tendremos un array con 1 elemento para cada valor seleccionado, si usamos post, tendremos:
000 001 002 003 004 <? $valor1 = $_POST["s1"][0]; $valor2 = $_POST["s1"][1]; $valor3 = $_POST["s1"][2]; ?>
Maximizar
Seleccionar
PHP
Pero como el nmero de elementos variar de los elementos que seleccione el usuario, tendremos que tratar los datos con un bucle for como el siguiente:
000 001 002 003
<?
for($i = 0; $i < sizeof($_POST["s1"]); $i++) echo $i.' - '.$_POST["s1"][$i].'<br>';
?>
Maximizar Seleccionar PHP
Esto nos imprimir en el navegador los valores seleccionados por el usuario, sirve para el campo select del primer ejemplo pero podemos usarlo tambien con checkboxes que tengan nombre acabado en [].
Campo de archivo
Para poder subir archivos a un servidor, nescesitaremos un formulario con un campo file, que es la combinacin de un cuadro de texto y un boton Examinar... Este campo es un input de tipo file que se escribe de la siguiente manera:
000 <input type="file">
Maximizar
Seleccionar
XML
Por razones de seguridad, algunas de las opciones de este campo cmo por ejemplo value han ido siendo eliminadas de los navegadores, por lo que quedan pocas cosas a explicar de este objeto aparte de cmo modificar su aspecto. Nombre Con el atributo name definimos el nombre que identificar el archivo subido al servidor:
000 <input type="file" size="30" name="upload">
Maximizar
Seleccionar
XML
Tamao Para cambiar su tamao, utilizaremos el atributo size que define el nmero de carcteres que caben en el campo:
000 <input type="file" size="30">
Maximizar
Seleccionar
XML
Colores Tambin podemos cambiar los colores de fondo y de letra de la caja de texto con los estilos background y color respectvamente:
000
<input type="file" style="background:#ff0000; color:#ffffff">

Maximizar Seleccionar CSS,XML
Nota: Adems de estos estilos tambin existen otros para modificar los bordes y otros aspectos del campo.
Subir archivos al servidor

Para subir archivos a un servidor, lo nico que debemos hacer es poner en un formularioun campo de archivo como los siguientes:
000 001 002 003 <form action="" method="post" enctype="multipart/form-data"> <input type="file" name="file" /> <input type="submit" name="submit" value="Subir imagen" /> </form>
Maximizar
Seleccionar
XML
Al enviar el formulario, el navegador enva automaticamente el archivo del campo a la carpeta temporal del servidor, pero el problema es una vez en esta carpeta cmo moverlo a la carpeta que se nos antoje, es importante que el mtodo de envo sea POST y que se codifique como multipart/form-data. Y aqu es donde entra en accin PHP y la funcin copy que copiar el archivo subido de la carpeta temporal a la carpeta que nosotros le digamos e incluso con el nombre que le pongamos. Vers que para acceder al archivo subido no lo haremos desde $_POST sino desde $_FILES, esto es porque PHP ya ha guardado el archivo a una carpeta temporal y no podremos acceder a el como si fuera un campo de formulario (en memoria), sino que ser completamente distinto.
000 001 002 003 <? $destino = 'uploaded'; copy($_FILES['file']['tmp_name'], $destino.'/'.$_FILES['file']['name']) ?>
Maximizar
Seleccionar
PHP
Donde $_FILES['file']['tmp_name'] identificara el archivo temporal subido al servidor, $destino, la carpeta en la que lo queremos mover y $_FILES['file']['name'] el nombre original del archivo. Adems tambin podemos conocer otros parmetros del fichero subido como por ejemplo el tamao, vamos a ver un ejemplo:
000 001 002 003 004 005 006 007 008 009
<? $destino = 'uploaded';

// Leemos el tamao del fichero $tamano = $_FILES['file']['size']; // Comprovamos el tamao if($tamano < 500){ copy($_FILES['file']['tmp_name'], $destino.'/'.$_FILES['file']['name']) } else echo "El tamao es superior al permitido";
?>
Maximizar Seleccionar PHP
Tambien podemos saber el tipo de archivo subido con la siguiente variable: $_FILES['file'] ['type'];
Nota: Para versiones anteriores a la 4.0.1 de PHP, en lugar del vector $_FILES, debemos usar $HTTP_POST_FILES. Nota 2: Tenis que recordar dar permisos a la carpeta (777) donde subis los archivos... Echad un vistazo va FTP o a travs e vuestro panel de control. De otra manera qe generar un error por "denied permission".
Botones de formularios
Hay tres tipos de botones input para formularios, ellos se distingen por el tipo de input que especificamos y de les debe un nombre (name), que almacenar el valor del campo y un valor opcional (value). Tambien debemos especificar un tipo de los tres siguientes (type) Botn enviar Es un botn del tipo submit que enva el formulario usando el mtodo especificado en laetiqueta form, veamos un ejemplo:
000 <input type="submit" name="nombre" value="Enviar!">
Maximizar
Seleccionar
XML
Botn reestablecer Este botn del tipo reset volver los campos del formulario a su valor inicial:
000 <input type="reset" name="nombre" value="Borrar!">
Maximizar
Seleccionar
XML
Botn normal Su tipo es button y aunque se llamen 'normal', ser el menos usado porque aislado no genera ningna accin:
000 <input type="button" onclick="submit();" name="nombre" value="Enviar!">
Maximizar
Seleccionar
SCRIPT,XML
Para que este botn sirva de algo, es frecuente aadirle un controlador JavaScript para el evento onclick.
Campo de imagen
Este objeto es una unin entre una imagen y un botn enviar, y comparte la mayora de las propiedades de ambos objetos.
La peculiaridad de este campo de formulario de tipo image es que adopta la aparincia de una imagen y que enva dos valores al servdor cuando enviamos el formulario: nombreDelCampo_x - Coordenada X del click nombreDelCampo_y - Coordenada Y del click Vamos a ver cmo sera un campo image:
000 001 <input name="nombreDelCampo" type="image" border="0" src="imagen.gif" width="36" height="14">
Maximizar
Seleccionar
XML
Donde la primera linea sn atributos de campo de formulario y la segunda y tercera de imagen.
Marcos
Un marco es una division en la pgina que ser usada para cargar otra pgina, esto nos permite realizar un diseo con mas de una pgina en la ventana del navegador, lo que es til a la hora de hacer menues, cabeceras... Una pgina con frames esta formada por 2 tipos de pgina, la pagina contenedor y las pginas contenido. La pgina contenedor, es aquella que carga las otras pginas en su interior, debe tener un formato especfico que conseguiremos con las siguientes marcas: frameset - crea una division en la pgina que puede ser por columnas colso por filas rows frame - Es el elemento que contiene cada una de las pginas, se le suele indcar un nombre (name) y una direccion de pgina (src) noframes - Indica una version alternativa de la pgina para navegadores sin frames como elinks... Veamos un ejemplo:
000 001 002 003 004 005 006 007 008 009 010 011 012 013 014 015
<html> <head> <title>Mi pgina</title> </head>

 <frameset cols="100,*"> <frame name="menu" src="menu.htm"> <frame name="texto"src="texto.htm"> <noframes> Esta pgina utiliza marcos y su navegador no los admite </noframes>
</frameset> </html>
La pgina contenido es una pgina normal, pero deberemos tener especial cuidado con sus enlaces, ya que por defecto se abrirn en el marco actual, y si abrimos otra pgina con marcos o la pgina contenedor dentro de uno de los marcos, produciremos un efecto muy feo. Para evitarlo tendremos algunas consideraciones con los target de los enlaces, veamos que opciones tenemos: _top - Abre la pgina del enlace ocupando toda la ventana disponible sin hacer caso de los marcos, se usa para abrir una pgina con marcos de nuestro sitio. _blank - Se abre la pgina en una nueva ventana, se usa para abrir una pgina de otro sitio. _self - Es la opcion por defecto, se abre el enlace en la misma ventana. Veamos un ejemplo de enlace:
000 <a href="http://www.programacionweb.net" target="_blank">Programacion Web</a> Maximizar Seleccionar XML
Esto nos generar un enlace hacia Programacion Web que se abrir en una ventana nueva.

Curso de HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Curso de HTML

Uploaded by

Copyright:

Available Formats

Curso de HTML

La estructura HTML es la siguiente:

El cuerpo del documento

En el ejemplo se ve la forma de editar una propiedad

<i><font face="Verdana" size="5">1<font face="Arial">2<font color="#FF0000">3</font><b><font color="#FF0000">4</font><u>5</u></b></font></i><u><b>6</b></font></u> Maximizar Seleccionar XML

Si quereis podeis ver el resultado de este cdigo en un ejemplo que he subido.

<font color="#FF0000">Texto de color rojo</font>

<a name="parte1" />

Ahora os vamos a poner un ejemplo de cmo queda una imagen:

columna 1</td> 2</td>

Ademas tambien podemos cambiar el color del borde usando bordercolor

000 001 002

<table bgcolor="red"> <tr>

003 004 005 006 007 008 009

1</td> 2 columna 2</td>

Podeis ver como queda siguiendo este enlace

Veamos un ejemplo de formulario con unos campos variados en su interior:

Campos de texto o contrasea

Limitar carcteres de un textarea

Las casillas de verificacin

<input type="checkbox" name="cond" value="SI" />

Proceso de datos mltiples

000 001 002 003

<input type="file" style="background:#ff0000; color:#ffffff">

Subir archivos al servidor

<? $destino = 'uploaded';

Donde la primera linea sn atributos de campo de formulario y la segunda y tercera de imagen.

<html> <head> <title>Mi pgina</title> </head>

You might also like