Académique Documents
Professionnel Documents
Culture Documents
Curso de HTML
1 - Qu es HTML?
HTML es el lenguaje que se emplea para el desarrollo de pginas de internet. Este lenguaje est constituido de elementos que el navegador interpreta y las despliega en la pantalla de acuerdo a su objetivo. Veremos que hay elementos para disponer imgenes sobre una pgina, hipervnculos que nos permiten dirigirnos a otra pgina, listas, tablas para tabular datos, etc. Para poder crear una pgina HTML se requiere un simple editor de texto y un navegador de internet (IExplorer, FireFox etc.).
Pgina 1 de 52
IES Aljada
Curso de HTML
Ejemplo de HTML: Confeccionar una pgina que muestre los nombres de 5 lenguajes de programacin separados por un guin. <html> <head> </head> <body> PHP - Java - JavaScript - C - C++ </body> </html>
Problema de HTML: Confeccione una pgina con las marcas mnimas que debe tener y en el cuerpo de la misma disponga su nombre y apellido.
Pgina 2 de 52
IES Aljada
Curso de HTML
Pgina 3 de 52
IES Aljada
Curso de HTML
<html> <head> </head> <body> PHP<br> JavaScript<br> Java<br> C<br> C++ </body> </html>
Problema de HTML: Confeccionar una pgina HTML que muestre su nombre y apellido y en la siguiente lnea los nombres de sus padres separados por un guin.
Pgina 4 de 52
IES Aljada
Curso de HTML
4 - Prrafo <p>
Un prrafo es una oracin o conjunto de oraciones referentes a un mismo tema. Todo lo que encerremos entre las marcas <p> y </p> aparecer separado por un espacio con respecto al prximo prrafo. Dentro de un prrafo puede haber saltos de lnea <br>. Veamos con un ejemplo como disponer dos prrafos: <html> <head> </head> <body> <p> SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de programacion para trabajar con base de datos relacionales como MySQL, Oracle, etc.<br> MySQL es un interpretador de SQL, es un servidor de base de datos.<br> MySQL permite crear base de datos y tablas, insertar datos, modificarlos, eliminarlos, ordenarlos, hacer consultas y realizar muchas operaciones, etc., resumiendo: administrar bases de datos. </p> <p> Este tutorial tiene por objetivo acercar los conceptos iniciales para introducirse en el mundo de las bases de datos. </p> </body> </html> Tenemos en esta pgina HTML dos prrafos, cuando el navegador interpreta esta pgina, separa los contenidos de los dos prrafos con un espacio horizontal. Adems el primer prrafo contiene varios saltos de lnea. Normalmente uno agrupa en prrafos para dar ms sentido a nuestro escrito. Cuando modificamos la ventana del navegador los prrafos se acomodan automticamente de acuerdo al ancho de la ventana. Para recordar el nombre de esta marca HTML: <p> viene de paragraph Problema de HTML: Confeccione una pgina que muestre en un prrafo datos referentes a sus estudios y en otro prrafo su nombre y mail.
Pgina 5 de 52
IES Aljada
Curso de HTML
5 - Ttulos <h1><h2><h3><h4><h5><h6>
Otros elementos HTML muy utilizados son para indicar los ttulos, para esto contamos con los elementos: <h1><h2><h3><h4><h5><h6> El ttulo de mayor nivel es <h1>, es decir el que tienen una fuente mayor (veremos que es el navegador el responsable de definir el tamao de la fuente, ms adelante podr ver que uno puede modificar la fuente, tamao, color etc.) Segn la importancia del ttulo utilizaremos alguno de estos elementos HTML. Requiere la marca de cerrado del ttulo con la barra invertida como hemos visto. Confeccionaremos una pgina que contenga un ttulo de primer nivel <h1> y luego dos ttulos de nivel <h2>. Definiremos un prrafo para cada ttulo de segundo nivel. pagina1.html <html> <head> </head> <body> <h1>Tipos de datos en MySQL</h1> <h2>varchar</h2> <p> se usa para almacenar cadenas de caracteres. Una cadena es una secuencia de caracteres. Se coloca entre comillas (simples): 'Hola'.<br> El tipo "varchar" define una cadena de longitud variable en la cual determinamos el mximo de caracteres. Puede guardar hasta 255 caracteres. </p> <h2>int</h2> <p> Se usa para guardar valores numricos enteros, de -2000000000 a 2000000000 aproximadamente.<br> Definimos campos de este tipo cuando queremos representar, por ejemplo, cantidades. </p> </body> </html> Cada ttulo aparece siempre en una lnea distinta, no importa si lo tipeamos seguido en el archivo, es decir el resultado ser igual si hacemos: <h1>Tipos de datos en MySQL</h1> <h2>varchar</h2> o esto: <h1>Tipos de datos en MySQL</h1><h2>varchar</h2> El navegador dispone cada ttulo en una lnea nueva. Recordemos que el HTML no tiene la responsabilidad de indicar el tamao de las fuentes. El navegador definir el tamao de fuente segn el nivel de ttulo que indiquemos. La de tamao ms grande es la de nivel 1 <h1>. <h1> viene de heading heading significa ttulo. Problema de HTML: Confeccionar el titular de un peridico con un ttulo de nivel 1. Luego definir dos ttulos de segundo nivel con los textos (Noticias polticas y Noticias deportivas), en cada una de estas secciones definir dos titulares de tercer nivel con un prrafo cada una. Al final de la pgina mostrar un ttulo de cuarto nivel con el nombre de la empresa propietaria del peridico.
Pgina 6 de 52
IES Aljada
Curso de HTML
Pgina 7 de 52
IES Aljada
Curso de HTML
Pgina 8 de 52
IES Aljada
<a href="pagina1.html">Salir.</a> Para recordar el nombre de esta marca HTML: <a> viene de anchor que significa ancla.
Curso de HTML
Problema: Confeccionar una pgina principal con dos hipervnculos a las pginas pagina2.html y pagina3.html Luego en las dos pginas secundarias disponer hipervnculos a la pgina principal.
Pgina 9 de 52
IES Aljada
Curso de HTML
Pgina 10 de 52
IES Aljada
Curso de HTML
Pgina 11 de 52
IES Aljada
Curso de HTML
Problema de HTML:Desarrollar una pgina que muestre dos imagenes llamadas foto2.jpg y foto3.jpg, las mismas se encuetran almacenadas en el servidor en la misma carpeta donde se almacenar la pgina que usted desarrollar. Disponer un ttulo a cada imagen.
Pgina 12 de 52
IES Aljada
Curso de HTML
Pgina 13 de 52
IES Aljada
Curso de HTML
Pgina 14 de 52
IES Aljada
Curso de HTML
Pgina 15 de 52
IES Aljada
Curso de HTML
Pgina 16 de 52
IES Aljada
Curso de HTML
Pero Linux interpretar como un error la segunda.<br> Se recomienda usar siempre minsculas. Es ms el sitio mysqlya.com.ar est instalado sobre un servidor Linux por lo que todos los ejercicios debern respetarse maysculas y minsculas. </p> <a name="mostrarbasedatos"></a> <h2>show databases</h2> <p> Una base de datos es un conjunto de tablas.<br> Una base de datos tiene un nombre con el cual accederemos a ella.<br> Vamos a trabajar en una base de datos ya creada en el sitio, llamada "administracion".<br> Para que el servidor nos muestre las bases de datos existentes, se lo solicitamos enviando la instruccin:<br> show databases;<br> Nos mostrar los nombres de las bases de datos, debe aparecer en este sitio "administracion".<br> </p> <a name="creaciontabla"></a> <h2>Creacin de una tabla y mostrar sus campos</h2> <p> Una base de datos almacena sus datos en tablas.<br> Una tabla es una estructura de datos que organiza los datos en columnas y filas; cada columna es un campo (o atributo) y cada fila, un registro. La interseccin de una columna con una fila, contiene un dato especfico, un solo valor.<br> Cada registro contiene un dato por cada columna de la tabla.<br> Cada campo (columna) debe tener un nombre. El nombre del campo hace referencia a la informacin que almacenar.<br> Cada campo (columna) tambin debe definir el tipo de dato que almacenar.<br> </p> <a name="cargarregistros"></a> <h2>Carga de registros a una tabla y su recuperacin</h2> <p> Usamos "insert into". Especificamos los nombres de los campos entre parntesis y separados por comas y luego los valores para cada campo, tambin entre parntesis y separados por comas.<br> Es importante ingresar los valores en el mismo orden en que se nombran los campos, si ingresamos los datos en otro orden, no aparece un mensaje de error y los datos se guardan de modo incorrecto.<br> Note que los datos ingresados, como corresponden a campos de cadenas de caracteres se colocan entre comillas simples. Las comillas simples son OBLIGATORIAS. </p> </body> </html> Cada hipervnculo hace referencia a un ancla que se encuentra en la misma pgina: <a href="#introduccion">Introduccin</a><br> <a href="#mostrarbasedatos">show databases</a><br> <a href="#creaciontabla">Creacin de una tabla y mostrar sus campos</a><br> <a href="#cargarregistros">Carga de registros a una tabla y su recuperacin</a><br> Luego la definicin de las anclas son: <a name="introduccion"></a>
Pgina 17 de 52
IES Aljada
<h2>Introduccin</h2> <p>
Curso de HTML
Como podemos observar la defincin del ancla se hace inmediatamente anterior al ttulo donde queremos que el navegador se site. Problema: Disponer una serie de hipervnculos sobre noticias del da. Enlazar los hipervnculos con anclas que se encuentran ms abajo en la misma pgina.
Pgina 18 de 52
IES Aljada
Curso de HTML
Pgina 19 de 52
IES Aljada
Curso de HTML
(;).<br> La sensibilidad a maysculas y minsculas, es decir, si hace diferencia entre ellas, depende del sistema operativo, Windows no es sensible, pero Linux si. Por ejemplo Windows interpreta igualmente las siguientes sentencias:<br> create database administracion;<br> Create DataBase administracion;<br> Pero Linux interpretar como un error la segunda.<br> Se recomienda usar siempre minsculas. Es ms el sitio mysqlya.com.ar est instalado sobre un servidor Linux por lo que todos los ejercicios debern respetarse maysculas y minsculas. </p> <a href="pagina1.html">Retornar</a><br> <a name="mostrarbasedatos"></a> <h2>show databases</h2> <p> Una base de datos es un conjunto de tablas.<br> Una base de datos tiene un nombre con el cual accederemos a ella.<br> Vamos a trabajar en una base de datos ya creada en el sitio, llamada "administracion".<br> Para que el servidor nos muestre las bases de datos existentes, se lo solicitamos enviando la instruccin:<br> show databases;<br> Nos mostrar los nombres de las bases de datos, debe aparecer en este sitio "administracion".<br> </p> <a href="pagina1.html">Retornar</a><br> <a name="creaciontabla"></a> <h2>Creacin de una tabla y mostrar sus campos</h2> <p> Una base de datos almacena sus datos en tablas.<br> Una tabla es una estructura de datos que organiza los datos en columnas y filas; cada columna es un campo (o atributo) y cada fila, un registro. La interseccin de una columna con una fila, contiene un dato especfico, un solo valor.<br> Cada registro contiene un dato por cada columna de la tabla.<br> Cada campo (columna) debe tener un nombre. El nombre del campo hace referencia a la informacin que almacenar.<br> Cada campo (columna) tambin debe definir el tipo de dato que almacenar.<br> </p> <a href="pagina1.html">Retornar</a><br> <a name="cargarregistros"></a> <h2>Carga de registros a una tabla y su recuperacin</h2> <p> Usamos "insert into". Especificamos los nombres de los campos entre parntesis y separados por comas y luego los valores para cada campo, tambin entre parntesis y separados por comas.<br> Es importante ingresar los valores en el mismo orden en que se nombran los campos, si ingresamos los datos en otro orden, no aparece un mensaje de error y los datos se guardan de modo incorrecto.<br> Note que los datos ingresados, como corresponden a campos de cadenas de caracteres se colocan entre comillas simples. Las comillas simples son OBLIGATORIAS. </p> <a href="pagina1.html">Retornar</a><br> </body> </html>
Pgina 20 de 52
IES Aljada
Curso de HTML
Problema: Disponer una serie de hipervnculos sobre noticias del da. Enlazar los hipervnculos con anclas que se encuentran en otra pgina.
Pgina 21 de 52
IES Aljada
Curso de HTML
Pgina 22 de 52
IES Aljada
Curso de HTML
Pgina 23 de 52
IES Aljada
Curso de HTML
Pgina 24 de 52
IES Aljada
Curso de HTML
18 - Listas anidadas.
El lenguaje HTML nos permite insertar una lista dentro de otra. Se pueden anidar listas de distinto tipo, por ejemplo podemos tener una lista no ordenada y uno de los item puede ser una lista ordenada. Para el anidamiento de listas solo debemos tener cuidado en la correcta apertura y cerrado de las marcas Implementaremos una pgina que enumere una serie de paises en una lista ordenada y luego en cada pais dispondremos una lista de hipervnculos de peridicos de dicho pais: <html> <head> </head> <body> <ol> <li>Argentina <ul> <li><a href="http://www.lanacion.com.ar">La Nacin</a></li> <li><a href="http://www.clarin.com.ar">Clarn</a></li> <li><a href="http://www.pagina12.com.ar">Pgina 12</a></li> </ul> </li> <li>Espaa <ul> <li><a href="http://www.elpais.es">El Pas Digital</a></li> <li><a href="http://www.abc.es">ABC</a></li> <li><a href="http://www.elmundo.es">El Mundo</a></li> </ul> </li> <li>Mxico <ul> <li><a href="http://www.jornada.unam.mx">La Jornada</a></li> <li><a href="http://www.el-universal.com.mx">El Universal</a></li> </ul> </li> </ol> </body> </html> Se puede insertar en un elemento li una lista como podemos ver: <li>Argentina <ul> <li><a href="http://www.lanacion.com.ar">La Nacin</a></li> <li><a href="http://www.clarin.com.ar">Clarn</a></li> <li><a href="http://www.pagina12.com.ar">Pgina 12</a></li> </ul> </li> Problema de HTML: Confeccionar una lista no ordenada de lenguajes de programacin. Luego disponer una lista ordenada con hipervnculos a sitios que tratan dichos lenguajes.
Pgina 25 de 52
IES Aljada
Curso de HTML
19 - Tabla (<table><tr><td>)
El objetivo fundamental de las tablas es mostrar una serie de datos en forma ordenada, organizado en filas y columnas. Para la creacin de una tabla intervienen una serie de elementos: <table> Es la marca de comienzo de la tabla. Este elemento requiere la marca de cierre. <tr> Es la marca de comienzo de una fila. Esta marca debe estar dentro del elemento table. Este elemento requiere la marca de cierre. <td> Es la marca de comienzo de una celda. Esta marca debe estar dentro del elemento tr. Este elemento requiere la marca de cierre. Para recordar el nombre de estos elementos HTML: <table> <tr> viene de table row que significa fila de la tabla. <td> viene de table data que significa dato de la tabla. La mejor forma de entender y dominar este concepto es implementar tablas y ver su resultado dentro del navegador. Confeccionemos una tabla que muestre los nombre de pases en una columna y su cantidad de habitantes en otra: <html> <head> </head> <body> <table border="1"> <tr> <td>China</td><td>1300 millones</td> </tr> <tr> <td>India</td><td>1080 millones</td> </tr> <tr> <td>Estados Unidos</td><td>295 millones</td> </tr> </table> </body> </html> Lo primero que aparece es la apertura del elemento table, donde inicializamos la propiedad border con el valor 1, con esto el contorno de cada celda ser visible (pruebe de asignarle el valor cero y otros valores superiores a 1) <table border="1"> Seguidamente viene la apertura de la primer fila de la tabla con el elemento tr: <tr> Continuamos con la apertura de la primer celda de la primer fila de la tabla: <td> Luego el dato propiamente dicho de la celda: India Cerramos la celda: </td> Abrimos la prxima celda: <td> Disponemos el valor de la celda: 1300 millones
Pgina 26 de 52
IES Aljada
Cerramos la celda: </td> Ahora cerramos la primer fila de la tabla: </tr> El mecanismos de la siguiente fila es similar a la primera.
Curso de HTML
Problema de HTML: Confeccionar una tabla que muestre en la primera columna los nombres de distintos empleados de una compaa y en la segunda el sueldo bruto (la compaa tiene 4 empleados)
Pgina 27 de 52
IES Aljada
Curso de HTML
Pgina 28 de 52
IES Aljada
Curso de HTML
Pgina 29 de 52
IES Aljada
Curso de HTML
Pgina 30 de 52
IES Aljada
Curso de HTML
Pgina 31 de 52
IES Aljada
Curso de HTML
Pgina 32 de 52
IES Aljada
Curso de HTML
Pgina 33 de 52
IES Aljada
Curso de HTML
Problema de HTML: Confeccionar un pgina que muestre dos tablas. Luego comentar la segunda y ver el resultado.
Pgina 34 de 52
IES Aljada
Curso de HTML
Pgina 35 de 52
IES Aljada
Curso de HTML
27 - Formulario - <form>
Un formulario permite que el visitante al sitio cargue datos y sean enviados al servidor. Es el medio ideal para registrar comentarios del visitante sobre el sitio, solicitar productos, sacar turnos etc. De todos modos veremos que el lenguaje HTML solo tiene el objetivo de crear el formulario. El HTML no tiene la responsabilidad de registrar los datos en el servidor, esta actividad est delegada a un lenguaje que se ejecute en el servidor (PHP, ASP, ASP.Net, JSP etc.) Es recomendable primero aprender y conocer todos los elementos para la creacin de formularios en HTML y en un paso posterior estudiar la grabacin en el servidor Veamos la sintaxis bsica para crear un formulario donde escribiremos nuestro nombre. Para crear un formulario debemos utilizar el elemento form, que tiene marca de comienzo y fin. Dentro de la marca form veremos otros elementos para crear botones, editores de lnea, cuadros de chequeo, radios de seleccin etc. Confeccionaremos un formulario para el ingreso de nuestro nombre y un botn para el envo del dato ingresado al servidor: <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Escriba su nombre: <input type="text" name="nombre" size="20"> <br> <input type="submit" value="enviar"> </form> </body> </html> Veamos detenidamente la estructura de un formulario elemental, lo primero la apertura de la marca form donde debemos definir dos propiedades (action y method): <form action="/registrardatos.php" method="post"> La propiedad action se inicializa con el nombre de la pgina que procesar los datos en el servidor. Como no conocemos la sintaxis de un lenguaje de servidor almacen en la raz de este sitio una pgina codificada en PHP que recibe los datos del formulario y los imprime en una nueva pgina (recordar que en este curso no se ve como programar en el servidor) Todo los formularios que implemento y los que usted implementar como ejercicios deben llamar a esta pgina: "/registrardatos.php" ms adelante cuando conozca un lenguaje de servidor podr almacenarlos en una base de datos, consultar otros datos, modificar datos existentes etc. La segunda propiedad que debemos inicializar es method. Esta propiedad puede almacenar nicamente dos valores (post o get) Normalmente un formulario se enva mediante post (los datos se envan con el cuerpo del formulario) En caso de utilizar get los datos se envan en la cabecera de la peticin de la pgina, utilizando el mtodo get estamos limitados en la cantidad de datos a enviar, no as con el mtodo post. Ahora veamos el cuadro de texto donde se ingresa el nombre: Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> El mensaje "Ingrese su nombre:" es un texto fijo.
Pgina 36 de 52
IES Aljada
Curso de HTML
El elemento input permite definir un cuadro de texto (editor de lnea) si asignamos a la propiedad type el valor "text". Todo cuadro de texto debe inicializar la propiedad name con un nombre para el cuadro de texto. Este es un dato fundamental para poder recuperar el dato ingresado en el servidor (por ejemplo mediante PHP) Por ltimo inicializamos la propiedad size con el valor 20, esto significa que el cuadro de texto se dimensiona para permitir mostrar 20 caracteres (no se limita la cantidad de caracteres a ingresar por parte del visitante sino la cantidad de caracteres que se pueden visualizar) Seguidamente: <input type="submit" value="enviar"> Tambin mediante el elemento input definimos un botn para el envo de datos al servidor. Debemos inicializar la propiedad type con el valor submit, con esto ya tenemos un botn para el envo de datos. La propiedad value almacena la etiqueta que debe mostrar el botn. Finalmente cerramos el formulario: </form> Problema de HTML: Confeccionar un formulario que solicite la introduccin del nombre de una persona y su edad. Luego llamar a la pgina "/registrardatos.php" para que imprima en pantalla los valores ingresados. Disponer un botn de tipo submit para el envo de los datos.
Pgina 37 de 52
IES Aljada
Curso de HTML
Pgina 38 de 52
IES Aljada
Curso de HTML
29 - Formulario - textarea
El elemento de tipo textarea nos permite el ingreso de varias lneas a diferencia del cuadro de texto (input/text) Es muy utilizado cuando queremos ingresar un comentario de una longitud de caracteres grande. Confeccionemos un formulario para que un visitante pueda ingresar su nombre, su mail y un comentario del sitio, empleando para este ltimo dato a ingresar un elemento de tipo textarea: <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Ingrese su mail: <input type="text" name="mail" size="50"><br> Comentarios:<br> <textarea name="comentarios" rows="5" cols="60"></textarea> <br> <input type="submit" value="Enviar"> </form> </body> </html> La sintaxis para definir un rea de texto para el ingreso de mltiples lneas es: <textarea name="comentarios" rows="5" cols="60"></textarea> Es un elemento que requiere una marca de comienzo y una de finalizacin. Adems de tener la propiedad name similar a los otros elementos relacionados a formularios tiene dos propiedades llamadas rows y cols. Estas dos propiedades indican la cantidad de filas y columnas que visualiza el rea de texto Problema de HTML: Confeccionar un formulario que permita ingresar el nombre de una persona, su mail, su dni (documento nacional de identidad) y finalmente su curriculum (este ltimo dato hacerlo utilizando un textarea)
Pgina 39 de 52
IES Aljada
Curso de HTML
Pgina 40 de 52
IES Aljada
Curso de HTML
Pgina 41 de 52
IES Aljada
Curso de HTML
Pgina 42 de 52
IES Aljada
</select>
Curso de HTML
Una variante grfica de este control es inicializar la propiedad size del elemento select con un valor distinto a uno, con esto creamos un cuadro de seleccin que muestra simultneamente varios elementos (de todos modos solo uno se puede elegir) Es decir que con la propiedad size solo logramos un cambio esttico del control. Problema de HTML: Confeccionar un formulario que solicite la introduccin del nombre de una persona y permita votar el sitio. Mediante un cuadro de seleccin el visitante puede elegir entre las siguientes opciones: Excelente, Muy Bueno, Bueno, Regular y Malo.
Pgina 43 de 52
IES Aljada
Curso de HTML
Pgina 44 de 52
IES Aljada
Curso de HTML
Pgina 45 de 52
IES Aljada
Curso de HTML
La propiedad label del elemento optgroup es el texto que se debe mostrar dentro del select. Se puede hacer agrupamiento de opciones y permitir selecciones mltiples. Problema de HTML: Confeccione un control de tipo select con los nombres de pases de Amrica y Europa. Agrupe los pases por continente.
Pgina 46 de 52
IES Aljada
Curso de HTML
35 - Formulario - button
El elemento button es un control visual que se puede utilizar para sustituir los controles: <input type="submit" value="Enviar"> <input type="reset" value="Borrar"> Entre otras las ventanjas de este elemento es que podemos agregar imgenes dentro del botn. La sintaxis de este elemento es la siguiente: <button type="submit"> Texto a mostrar dentro del botn. </button> Todo lo que est contenido entre las marcas de comienzo y fin del elemento button aparece dentro del botn, como por ejemplo una imagen, un prrafo, enfatizado de una palabra etc. La propiedad type se puede inicializar con alguno de estos tres valores: "submit", "reset" y "button". Los dos primeros cumplen las funciones que ya conocemos es decir envo de los datos al servidor y borrado del contenido de los controles. En cuanto al tercer valor posible de la propiedad type significar que deberemos codificar una funcin en javascript para procesar el evento. Para ver el funcionamiento confeccionaremos un formulario que solicite el ingreso del nombre de una persona y dos elementos button para subir el dato al servidor o borrar el dato cargado: <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/htmlya/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> <button type="submit">Enviar<img src="/imagenes/enviar.gif" alt="envio"></button> <button type="reset">Borrar<img src="/imagenes/borrar.gif" alt="borrado"></button> </form> </body> </html> Perfectamente podemos definir un texto y cargar una imagen dentro del botn: <button type="submit">Enviar<img src="/imagenes/enviar.gif" alt="envio"></button> Problema de HTML: Confeccionar un formulario que solicite el ingreso del nombre de usuario y su clave. Disponer un botn para subir los datos al servidor (en el botn escribir el texto: "Guardar en" y en la lnea siguiente "servidor")
Pgina 47 de 52
IES Aljada
Curso de HTML
Pgina 48 de 52
IES Aljada
Curso de HTML
Pgina 49 de 52
IES Aljada
Curso de HTML
Pgina 50 de 52
IES Aljada
Curso de HTML
Pgina 51 de 52
IES Aljada
Curso de HTML
Problema de HTML: Confeccionar un formulario que permita solicitar pizzas a domicilio. Agrupar los controles aquellos relacionados con el cliente y los referentes al pedido.
Pgina 52 de 52