You are on page 1of 25

Ejercicios: Capítulo 1

Ejercicio 1*
Crea una página web con:

Título: My First Web Page (Mi Primera Página Web).

Contenido: Welcome to My Web Page! (first level header h1) (¡Bienvenido a Mi Página Web!)

I am (Yo soy) <yourname>. (<yourname> debe substituir tu nombre y debe estar en negrita. Debe haber
una línea horizontal entre las líneas “Welcome to My Web Page” y “I am <yourname>”).

<personal description> (descripción personal) (<personal description> tiene que ser un nuevo párrafo con
algunas frases sobre tu vida personal. Añade un comentario “Here is my personal information” (“Aquí está
mi información personal”) en la parte superior de la descripción personal.).

<professional description> (descripción profesional) (<professional description> tiene que ser un nuevo
párrafo con tus detalles profesionales. Añade un comentario “Here is my professional information” (“Aquí
está mi información profesional”) en la parte superior de la descripción profesional.).

Thank you for your valuable time (Gracias por su valioso tiempo).

Yours faithfully (Atentamente),

<yourname>. (yourname> debe substituir tu nombre y debe estar en itálico. Las tres frases “Thank you
for your valuable time.”, “Yours faithfully,” y“<yourname” deben estar en tres nuevas líneas).

Solución #1

Abre tu editor de texto favorito y añade las siguientes líneas de código en un archivo:

<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page!</h1>
<hr/>
I am <b>John Smith</b>
<!-- Here is my personal information -->
<p>I am thirty years old. I live with my wife Nancy and two daughters Hannah and Sarah.
<br/>My address is 123 University Lane, West Lafayette, IN.</p>
<!-- Here is my professional information -->
<p> I am a software engineer. I work for a multinational company.</p>
Thank you for your valuable time.<br/>
Yours faithfully,<br/>
<i>John Smith</i>.
</body>
</html>

Ejercicios: Capítulo 1 1

* El código y las imágenes generadas por ese código están en inglés.

Grava el archivo como index.html en tu localización preferida. Abre el archivo en tu browser favorito y el
resultado será el siguiente:

Puedes añadir más detalles en los párrafos de las descripciones personales y profesionales. Esto es sólo
un ejemplo.

Ejercicio 2*

Crea un sitio web simple de cocina. La primera página debe tener el titulo “Welcome to the World of
Tastes” (“Bienvenido al Mundo de los Sabores”) y debe presentar una lista ordenada de tres categorías:
breads (panes), cookies (bizcochos) y cakes (pasteles), y deben estar en negrita. Cada categoría debe
tener tres sub categorías, como estas:

1. Breads
 Banana bread
 Cottage Loaf
 Potato Bread

2. Cookies
 Bath Oliver
 Chocolate Chip Cookie
 Ginger Biscuits

3. Cakes
 Black Forest Cake
 Chocolate Cake
 Ice Cream Cake

Ejercicios: Capítulo 1 2

* El código y las imágenes generadas por ese código están en inglés.

La página de la receta debe tener el correspondiente titulo del ítem. notas sobre los ingredientes y el proceso de preparación numerado. Solución #2 Crea una pasta llamada cookery en tu localización preferida.Deben ser añadidos enlaces para cada ítem y cuando el usuario pincha el enlace debe ser encaminado hacia la sección de Procedure (Preparación) de la receta correspondiente. la lista de ingredientes.html#process">Banana bread</a></li> <li>Cottage Loaf</li> <li>Potato Bread</li> </ul> <li><b>Cookies</b></li> <ul> <li>Bath Oliver</li> <li>Chocolate Chip Cookie</li> <li>Ginger Biscuits</li> </ul> <li><b>Cakes</b></li> <ul> <li>Black Forest Cake</li> <li>Chocolate Cake</li> <li>Ice Cream Cake</li> </ul> </ol> </html> Ejercicios: Capítulo 1 3 . una imagen del producto final. Ahora abre tu editor de texto favorito y añade las siguientes líneas de código en un archivo: <html> <head> <title>Welcome to the World of Tastes</title> </head> <ol> <li><b>Breads</b></li> <ul> <li><a href="bananabread. Necesitamos poner todas las páginas web en esta pasta. el nombre del ítem en el encabezado.

smashed</li> <li>2 cups flour</li> <li>3/4 cup sugar</li> <li>1/2 cup melted butter</li> <li>2 eggs.jpg" width="200" height="200" alt="Banana Bread" title="Banana Bread" /> <h2>Ingredients</h2> <ul> <li>3 ripe bananas.html en la pasta de cookery.areavoices.com/files/2013/01/Buttermilk-Banana-Bread.</li> <li>Mix in the egg.</li> <li>Bake for 45 minutes. Remove from pan once cooled and slice to serve.</li> </ol> </a> </body> </html> Ejercicios: Capítulo 1 4 .</dd> <dt>Eggs</dt> <dd>You can replace eggs with milk if you want.</li> <li>Sprinkle the baking soda over the mixture and mix in</li> <li>Add the flour and mix.</li> <li>Mix butter into the mashed bananas in a large mixing bowl with a spoon. Grava el archivo como welcomeRecipe. sugar and vanilla.</dd> </dl> <h2>Procedure</h2> <a name="process"> <ol> <li>Preheat the oven to 175°C.</li> <li>Pour mixture into a buttered loaf pan. Abre otra vez un nuevo archivo en tu editor y añade las siguientes líneas de código: <html> <head> <title>Banana Bread</title> </head> <body> <h1>Banana Bread</h1> <img src="http://chefjeff. beaten</li> <li>1 teaspoon baking soda</li> <li>1 teaspoon vanilla</li> </ul> <h3>Notes on Ingredients</h3> <dl> <dt>Sugar</dt> <dd>You can increase or decrease the quantity of sugar based on individual tastes.

Ahora abre el welcomerecipe.html en tu browser favorito y tu pantalla aparecerá así: Una vez que pinchas el enlace del Banana Bread.html en la pasta de cookery. serás enviado para una nueva página como la de abajo: Ejercicios: Capítulo 1 5 . Grava el archivo como bananabread.

000 La página web debe tener declaración doctype. Incluye una hoja de estilo interna para mostrar el fondo del encabezado de color aqua y el encabezado de las filas impares en color plata y el de la filas pares en gris. Solución #3 Abre tu editor de texto favorito y añade las siguientes líneas de código en un archivo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.000 Mark Adams 14. .w3.000 Kevin Parker 21. charset=utf-8" /> <title>Employee Details</title> Ejercicios: Capítulo 1 6 * El código y las imágenes generadas por ese código están en inglés.0 Transitional//EN" "http://www. Last Name (Apellido) y Salary (Sueldo). puedes crear páginas web separadas para todos los ítems y enlazar cada uno de ellos en la página principal. para que puedas especificar directamente el nombre de la imagen como el src de la tag <img>.000 Eric Downs 17. welcomeRecipe. First Name Last Name Salary John Smith 12.org/TR/xhtml1/DTD/xhtml1-transitional.html. Aquí el enlace de la página web ha sido especificado.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html. Establece el valor de cellpadding para 10 pixeles y de cellspacing para 5 pixeles.dtd"> <html xmlns="http://www. En este ejemplo.000 Sarah Brown 9. Ejercicio 3* Crea una página web totalmente funcional que muestre una tabla con tres columnas para First Name (Primer Nombre).000 Ann Daniel 10. Del mismo modo. Puedes bajar una imagen apropiada y gravarla en la pasta de cookery. espacio de nombres XML y metadatos. lo que hace que la página web sea más lenta. La tabla debe tener la siguiente información. El título de la página web debe ser “Employee Details” (“Detalles de Empleados”) y debe mostrar un encabezado “Employees Salary Table” (“Tabla de Sueldos de Empleados”) en azul. la página web solo para banana breead fue creada y enlazada a la página principal.w3.

even { background-color:gray.} </style> </head> <body> <h1>Employees Salary Table</h1> <table border="1px" cellpadding="10px" cellspacing="5px"> <tr class="odd"> <th><b>First Name</b></th> <th><b>Last Name</b></th> <th><b>Salary</b></th> </tr> <tr class="even"> <td>John</td> <td>Smith</td> <td>12.} tr.000</td> </tr> </table> </body> </html> Ejercicios: Capítulo 1 7 .000</td> </tr> <tr class="even"> <td>Sarah</td> <td>Brown</td> <td>9. <style type="text/css"> h1 { color:blue.000</td> </tr> <tr class="odd"> <td>Mark</td> <td>Adams</td> <td>14.000</td> </tr> <tr class="odd"> <td>Ann</td> <td>Daniel</td> <td>10.000</td> </tr> <tr class="even"> <td>Kevin</td> <td>Parker</td> <td>21.000</td> </tr> <tr class="odd"> <td>Eric</td> <td>Downs</td> <td>17.odd { background-color:silver.} th { background-color:aqua.} tr.

El encabezado principal debe aparecer alineado centralmente. cada uno con h2 headings.w3. . Grava el archivo como table. Solución #4 Abre tu editor de texto favorito y añade las siguientes líneas de código en un archivo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. en negro con el fondo en aqua y en la fuente Calibri con 20 pixeles de tamaño de fuente. etc y consultar el resultado. en rojo y en con la fuente Times New Roman.org/TR/xhtml1/DTD/xhtml1-transitional. Los encabezados del los párrafos deben estar alineados a la izquierda. 15 pixeles y 20 pixeles en el primero. en azul y con la fuente Arial. Debe tener un relleno de 15 pixeles en cada párrafo y una línea de espacio de 10 pixeles. Abre el archivo en tu browser favorito y el resultado será el siguiente: Puedes cambiar el color.html en tu localización preferida. cellspacing. cellpadding.org/1999/xhtml"> Ejercicios: Capítulo 1 8 * El código y las imágenes generadas por ese código están en inglés. El contenido del párrafo debe estar justificado.dtd"> <html xmlns="http://www.0 Transitional//EN" "http://www. Ejercicio 4* Crea una página web totalmente funcional que tenga información sobre cualquier tópico. El titulo de la página debe ser el mismo del tópico.w3. Debe tener un encabezado principal para el tópico (h1 heading) y tres párrafos separados. el color de fondo. segundo y tercer párrafos respectivamente.

font-family: "Times New Roman". color: red. <head> <meta content="text/html. font-size:20px. color: black. } #first { line-height:15px. padding:15px. color: blue. background-color:aqua. font-family: "Calibri". } </style> </head> Ejercicios: Capítulo 1 9 . } p { text-align:justify. } #third { line-height:25px. charset=utf-8" http-equiv="Content-Type" /> <title>JavaScript</title> <style type="text/css"> h1 { text-align: center. font-family: "Arial". } h2 { text-align: left. } #second { line-height:20px.

g. block scoping using the let keyword was added in JavaScript 1.. if statements. Netscape considered their client-server offering a distributed OS. while loops. running a portable version of Sun Microsystems' Java. and alter the document content that is displayed. control the browser.[5] As part of web browsers.7). in which the semicolons that terminate statements can be omitted.</p> </body> </html> Grava el archivo como content. communicate asynchronously.[5] It has also become common in server-side programming. Instead. While battling with Microsoft over the Web.). <body> <h1>JavaScript</h1> <h2>Overview</h2> <p id="first">JavaScript (JS) is an interpreted computer programming language. One syntactic difference from C is automatic semicolon insertion. Abre el archivo en tu browser favorito y el resultado será el siguiente: Puedes intentar cambiar las diferentes propiedades para ver las diferencias de resultado.</p> <h2>History</h2> <p id="second">JavaScript was originally developed by Brendan Eich. JavaScript has function scoping (although. Like C. like Microsoft's Visual Basic (see JavaScript and Java). Netscape also wanted a lightweight interpreted language that would complement Java by appealing to nonprofessional programmers. switch statements. Because Java was a competitor of C++ and aimed at professional programmers.html en tu localización preferida. Ejercicios: Capítulo 1 10 . JavaScript makes a distinction between expressions and statements. implementations allow client-side scripts to interact with the user. game development and the creation of desktop applications. etc. One partial exception is scoping: C-style block scoping is not supported.</p> <h2>Features</h2> <p id="third">JavaScript supports much of the structured programming syntax from C (e.

About Us (Sobre Nosotros) y Contact Us (Contáctanos). contenido y pie de página. </div> </body> </html> Ejercicios: Capítulo 1 11 * El código y las imágenes generadas por ese código están en inglés. El estilo de las tres páginas debe ser el mismo.html">Contact Us</a></li> </ul> </div> <div id="container"> <p>This is the Welcome page.html">HomePage</a></li> <li><a href="aboutus.w3.html">About Us</a></li> <li><a href="contactus. . Los enlaces para estas tres páginas deben aparecer en cada y en todas las páginas para que el usuario pueda navegar a cualquier página que quiera. Debe tener tres secciones para cada página: encabezado.dtd"> <html xmlns="http://www.css" /> </head> <body> <h1>Welcome</h1> <div id="header"> <ul> <li><a href="welcome. Solución #5 Crea una pasta llamada exercise5 en tu localización preferida. Cuando el usuario mueve el ratón sobre el enlace. Los enlaces deben aparecer horizontalmente en azul sin estar subrayados.org/TR/xhtml1/DTD/xhtml1-transitional. Welcome (Bienvenido). el color del enlace debe estar en negrita y aparecer en rojo y todos los enlaces visitados deben aparecer en aqua. Necesitas poner todas las páginas web sacadas en esta pasta.0 Transitional//EN" "http://www.</p> </div> <div id="footer"> Here is the footer.org/1999/xhtml"> <head> <meta content="text/html.w3. Ejercicio 5* Crea una página web bien estructurada y totalmente funcional que tenga tres tipos de páginas web. Ahora abre tu editor de texto favorito y añade las siguientes líneas de código en un archivo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. charset=utf-8" http-equiv="Content-Type" /> <title>Welcome</title> <link type="text/css" rel="stylesheet" href="styles.

Copia el mismo código y cambia <h1> tag por <h1>About Us</h1> y <p> el elemento dentro del contenedor <div> por <p>This is the About Us page. background-color: silver.html en la pasta exercise5. color: blue. } #header ul li a:visited { text-decoration:none. Abre un nuevo archivo en tu editor. Grava el archivo como welcome. } #header { border: 1px solid black.html copiando el mismo contenido y cambiando las tags <h1> y <p> apropiadamente. width:300px. } #header ul li { width:70px. } #header ul li a:active { text-decoration:none. } #header ul li a:link { text-decoration:none.</p>. } #header ul li a:hover { text-decoration:none. font-weight:bold. Crea otro archivo más. } Ejercicios: Capítulo 1 12 . Grava el archivo como aboutus. Abre un nuevo archivo y añade las siguientes líneas de código: h1{ color:red. display:inline. padding: 5px. margin:0 auto. height:80px. color:red. } #header ul { list-style-type: none. llamado aboutus.html en la pasta exercise5. color:aqua.

height: 300px. Ejercicios: Capítulo 1 13 . width:700px. los enlaces aparecen en aqua cuando ya han sido visitados. #container { border:1px solid black. margin:0px auto. width:700px. height:50px. Si mueves el ratón sobre cualquier de los enlaces. } Grava el archivo como styles. tu enlace aparecerá así: Pincha cada enlace y confirma si estás siendo direccionado hacia la página correcta. margin:0px auto. Ahora abre el welcome. position:relative. } #footer { border:1px solid black. En la pantalla aparecerá esto: Aquí.css en la pasta exercise5.html en tu browser favorito.

Solución #6 Abre tu editor de texto favorito y añade las siguientes líneas de código en un archivo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. Los caracteres inseridos en la caja de la password deben ser visualizados como puntos. Coloca las etiquetas y los correspondientes elementos de inserción en dos columnas en diferentes filas de una tabla para que el formulario quede más estructurado.0 Transitional//EN" "http://www.org/TR/xhtml1/DTD/xhtml1-transitional. cajas de texto para colocar el first name (primer nombre).w3. charset=utf-8" http-equiv="Content-Type" /> <title>Title</title> </head> <body> <form> <table> <tr><td>Title:</td> <td><select id="title"> <option value="Mr">Mr</option> <option value="Ms">Ms</option> <option value="Mrs">Mr</option> </select></td></tr> <tr><td>First Name:</td> <td><input type="text" id="fname" /></td></tr> <tr><td>Last Name:</td> <td><input type="text" id="lname" /></td></tr> <tr><td>Sex:</td> <td> <input type="radio" id="sex" value="male" />Male <input type="radio" id="sex" value="female" />Female</td></tr> <tr><td>User Id:</td> <td> <input type="text" id="userid" maxlength="10"/></td></tr> <tr><td>Password:</td> <td><input type="password" id="pwd" /></td></tr> <tr><td>Select Areas of Interest:</td> <td> Ejercicios: Capítulo 1 14 * El código y las imágenes generadas por ese código están en inglés. Ejercicio 6* Crea un formulario XHML que permita que un usuario se inscriba en una página web. botones de pulsar para escoger el sexo.w3. El formulario debe tener una lista desplegable para escoger el title (título). El tamaño máximo permitido para el user id es de 10 caracteres. user id (id de usuario) y password (contraseña). cajas para escoger los temas de interés y un botón de Sign Up (Inscripción). .dtd"> <html xmlns="http://www. last name (apellido).org/1999/xhtml"> <head> <meta content="text/html.

dtd"> <html xmlns="http://www. Solución #7 Abre tu editor de texto favorito y añade las siguientes líneas de código en un archivo.w3.org/1999/xhtml"> <head> <meta content="text/html. . El resultado será el siguiente: Intenta colocar un valor en la caja de texto de user id y no te dejará colocar más de 10 caracteres. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. El video y el mapa deben estar centrados en una caja. <input type="checkbox" id="interest" value="tech" />Technology <input type="checkbox" id="interest" value="cook" />Cookery <input type="checkbox" id="interest" value="edu" />Education </td></tr> <tr><td><input type="submit" value="Sign Up!" /></td></tr> </table> </form> </body> </html> Grava el archivo como index. Añade encabezados adecuados en rojo en la parte superior del video y del mapa.html en tu localización preferida y abre el archivo en tu browser favorito. charset=utf-8" http-equiv="Content-Type" /> <title>Video and Map</title> <style type="text/css"> Ejercicios: Capítulo 1 15 * El código y las imágenes generadas por ese código están en inglés.0 Transitional//EN" "http://www. Ejercicio 7* Crea una página web que incluya un video de YouTube y un mapa de Google con tu lugar preferido.w3.org/TR/xhtml1/DTD/xhtml1-transitional. Verás que los caracteres colocados en la caja de la password aparecerán como puntos.

source=embed&amp.in/maps?f=q&amp.hnear=Lisbon.76.ll=38. #container { border:1px solid black.205565.&amp.525782.7252 99.geocode=&amp.com/embed/quk_MZ-HqBA" frameborder="0"></iframe><br/> <h2>Google Map: Lisbon.76.t=m&amp.205565. text-align:center.150036" style="color:#0000FF.+Portugal&amp.7 25299.geocode=&amp.co.t=m&amp.hnear=Lisbon.-9.in/maps?f=q&amp.&amp.338173&amp.z=12&amp.0.sll=10.youtube.oq=Lisbon.z=12&amp.output=embed"></iframe><br /><small><a href="https://maps.-9.aq=0&amp.q= Lisbon.aq=0&amp.hl=en&amp.sll=10.214733&amp.hq=&amp.co.source=s_q&amp. Portugal</h2> <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google. } h2 { color:red } </style> </head> <body> <div id="container"> <h2>Become a Web Developer Introduction</h2> <iframe width="560" height="315" src="https://www.sspn=0.150036&amp.ie=UTF8&amp.hl=en&amp. width: 800px.+Portugal&amp.ll=38.sspn=0. 0.+Portugal&amp.ie=UTF8&amp.q=Lisb on. margin:0px auto.oq=Lisbon.+Portugal&amp.text-align:left">View Larger Map</a></small> </div> </body> </html> Ejercicios: Capítulo 1 16 .google.hq=&amp.525782.214733&amp.33 8173&amp.

Repite el mismo procedimiento para contactus. Abre el aboutus.html.freecsstemplates.html y styles. Solución #8 Vete a la página web http://www.html.html en tu editor de texto y modifica el enlace de la Homepage para index. contactus.html (<li><a href="index. el mapa como quieras. Puedes entrar directamente en el enlace http://www. para la pasta exercise8. aproximar y alejar. Descomprime el archivo descargado.org y descarga la plantilla llamada catmint. El resultado será el siguiente: Podrás reproducir el video y mover.org/download/zip/catmint/ para descargarlo (no es necesario que tengas que descargar esta plantilla. pero esta solución está basada en la plantilla catmint).html">HomePage</a></li>). que ya has creado para el ejercicio 5.html. .html en tu localización preferida y abre el archivo en tu browser favorito.freecsstemplates. Grava el archivo como index. Crea una pasta llamada exercise8 y pon todos los archivos descomprimidos en esta pasta.css.html en vez de welcome. Modifica el contenido necesario para hacerlo relevante. Ejercicios: Capítulo 1 17 * El código y las imágenes generadas por ese código están en inglés. Copia el aboutus. Ejercicio 8* Monta una página web simple utilizando una plantilla gratis de la web.

cambiar el esquema del color o modificar las imágenes que quieras de forma a conseguir hacer un sitio web profesional. Baja de la web la imagen de una flor y ponla en la pasta de imágenes. Abre el index.” junto con su contenido. cambie.css y vete a #header-featured styles section. Ahora grava el archivo index. Si pinchas los enlaces About Us o el Contact Us serás direccionado hacia las páginas que has creado en el ejercicio #5. Define como imagen de fondo la nueva imagen que has guardado para que la imagen grande. Si pinchas el enlace Home Page cuando estás en la página About Us o en la Contact Us. Primero modifica el <h1> y los enlaces dentro del <div> con el id “header” siguiente.html de tu editor de texto. serás reenviado para la página principal. Ahora abre el archivo default. a free. Ahora abre el archivo index.html" accesskey="5" title="">Contact Us</a></li> </ul> </div> </div> Con esto hemos dado un nuevo nombre a la compañía y removido los enlaces desnecesarios.</a></h1> </div> <div id="menu"> <ul> <li class="current_page_item"><a href="#" accesskey="1" title="">Homepage</a></li> <li><a href="aboutus.html. que ves debajo de los enlaces. Ejercicios: Capítulo 1 18 . Puedes incluso modificar el contenido.html desde tu browser favorito y tu pantalla aparecerá así: La imagen que verás no será la misma. Será la imagen que bajaste y adicionaste. <div id="header" class="container"> <div id="logo"> <h1><a href="#">OurCompany Inc.html" accesskey="3" title="">About Us</a></li> <li><a href="contactus. Apaga el elemento <p> dentro del <div> con el “titulo” que empieza con “This is <strong>Catmint</strong>.

jpg" width="200px" /></a></div> </div> <div id="wrapper"> <div id="main"><img src="images/1. Password (Contraseña).org/1999/xhtml"> <head> <title>Earn Online</title> <!-. Abre un nuevo archivo en tu editor y añade las siguientes líneas de código: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. El enlace Sign Up debe reenviar el usuario para otra página que le permita registrarse como freelancer o como cliente. con dos enlaces: Sign Up (Regístrate) y Log In (Iniciar sesión).html"><img src="images/freelance. Puedes gravar la imagen que quieras. freelance. Cualquiera de las opciones de sign up deben mostrar un formulario que pida al usuario que ponga el First Name (Primer Nombre). Last Name (Apellido). Todas las páginas deben tener el logo o nombre de la página web.jpg” será utilizada como logo y la “1.jpg" /></div> <table id="table1" cellspacing="40"> <tr> <td> <h3>Log In</h3> <p>Already have a Freelance Account?</p> <a href="login.jpg” como imagen de fondo. un email y un botón de Sign Up. Ejercicio 9* Crea una página web de freelancing (trabajo por cuenta propia) profesional.jpg”.jpg” y “1.charset=utf-8" /> <link rel="stylesheet" href="style.org/TR/xhtml1/DTD/xhtml1-transitional.0 Transitional//EN" "http://www.html">Log In</a> </td> Ejercicios: Capítulo 1 19 * El código y las imágenes generadas por ese código están en inglés.w3. El enlace Log In debe permitir al usuario colocar el user id. User Id (Id de Usuario). pero intenta conseguir imágenes relevantes para freelancing. Solución #9 Crea una pasta llamada exercise9 en tu localización preferida.Defines a title for the Web Page --> <meta name="description" content="Freelance Website" /> <meta name="keywords" content="earn. La imagen “freelance. .css" type="text/css" /> </head> <body> <div id="header"> <div id="logo"><a href="index.w3. La primera página debe mostrar el logo o el nombre de la página web.dtd"> <html xmlns="http://www. Crea una pasta llamada images en la pasta exercise9 y añade dos imágenes llamadas “freelance. online" /> <meta name="author" content="Victor" /> <meta http-equiv="content-type" content="text/html. una password y acceder.

org/TR/xhtml1/DTD/xhtml1-transitional. </div> </div> </body> </html> Graba el archivo index.</div> </div> </body> </html> Ejercicios: Capítulo 1 20 . freelance. Abre un nuevo archivo y añade las siguientes líneas de código.html en la pasta exercise9.w3.html">Sign Up</a> </td> </tr> </table> <div id="footer"> 2013 Earn Online. All rights reserved. All rights reserved.w3.dtd"> <html xmlns="http://www. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.css" type="text/css" /> </head> <body> <div id="header"> <div id="logo"><a href="index.0 Transitional//EN" "http://www. <td> <h3>Sign Up</h3> <p>Do you want to hire or work?</p> <a href="optsignup. online" /> <meta name="author" content="Victor" /> <meta http-equiv="content-type" content="text/html.jpg" width="200px" /></a></div> </div> <div id="wrapper"> <div id="main"> <h3>Log in and Start Working</h3> <table id="table2"> <tr> <td>User Id:</td> <td><input type="text" id="userid" maxlength="10"/></td> </tr> <tr> <td>Password:</td> <td><input type="password" id="pwd" /></td> </tr> <tr> <td><input type="button" id="login" value="Log In" /></td> </tr> </table> </div> <div id="footer"><br />2013 Earn Online.html"> <img src="images/freelance.org/1999/xhtml"> <head> <title>Earn Online</title> <meta name="description" content="Freelance Website" /> <meta name="keywords" content="earn.charset=utf-8" /> <link rel="stylesheet" href="style.

org/TR/xhtml1/DTD/xhtml1-transitional.</b><br/>Find your passion.</p> <a href="signup.charset=utf-8" /> <link rel="stylesheet" href="style. hire and get the work done.0 Transitional//EN" "http://www. earn money and grow as a professional.dtd"> <html xmlns="http://www. freelance.jpg" width="200px" /></a></div> </div> <div id="wrapper"> <div id="main"> <h3>Tell us What you are looking for</h3></div> <div id="nav"> <table id="table1" cellspacing="40"> <tr> <td> <h3>Hire</h3> <p><b>I need a Freelancer.org/1999/xhtml"> <head> <title>Earn Online</title> <meta name="description" content="Freelance Website" /> <meta name="keywords" content="earn. All rights reserved.html"><img src="images/freelance.w3. Graba el archivo login.html">Sign Up</a> </td> </tr> </table> </div> <div id="footer"><br />2013 Earn Online. online" /> <meta name="author" content="Victor" /> <meta http-equiv="content-type" content="text/html.w3.css" type="text/css" /> </head> <body> <div id="header"> <div id="logo"><a href="index.html">Sign Up</a> </td> <td> <h3>Work</h3> <p><b>I need a job.</b>Find.html en la pasta exercise9.</p> <a href="signup.</div> </div> </body> </html> Ejercicios: Capítulo 1 21 . Abre un nuevo archivo y añade las siguientes líneas de código: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

html en la pasta exercise9.</div> </div> </body> </html> Ejercicios: Capítulo 1 22 . Abre un nuevo archivo y añade las siguientes líneas de código.charset=utf-8" /> <link rel="stylesheet" href="style.w3. Graba el archivo optsignup.org/1999/xhtml"> <head> <title>Earn Online</title> <meta name="description" content="Freelance Website" /> <meta name="keywords" content="earn.w3. online" /> <meta name="author" content="Victor" /> <meta http-equiv="content-type" content="text/html.html"><img src="images/freelance. freelance. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.jpg" width="200px" /></a></div> </div> <div id="wrapper"> <div id="main"> <h3>Create a Free Account</h3> <table id="table2"> <tr> <td>First Name:</td> <td><input type="text" id="fName" /></td> </tr> <tr> <td>Last Name:</td> <td><input type="text" id="lName" /></td> </tr> <tr> <td>Email:</td> <td><input type="text" id="email" /></td> </tr> <tr> <td>User Id:</td> <td><input type="text" id="userid" /></td> </tr> <tr> <td>Password:</td> <td><input type="password" id="pwd" /></td> </tr> <tr> <td><input type="button" id="signup" value="Sign Up" /></td> </tr> </table> </div> <div id="footer"><br />2013 Earn Online.dtd"> <html xmlns="http://www.css" type="text/css" /> </head> <body> <div id="header"> <div id="logo"><a href="index. All rights reserved.org/TR/xhtml1/DTD/xhtml1-transitional.

height: 120px. } #header #logo img{ margin-top: 5px. background:#996633. } #footer{ height: 40px. } #wrapper #main img{ width: 700px. height: 300px. border-top: 1px solid gray. } #wrapper #table1{ width: 700px. font-size: 14px. margin-left: -450px. Graba el archivo signup. height: 250px. p{ text-align:center. } #wrapper #table2{ width: 300px. table-layout: fixed. margin: 0px auto.html en la pasta exercise9. text-align: center. Abre un nuevo archivo y añade las siguientes líneas de código. } #header{ width: 100%. text-align: center. } Ejercicios: Capítulo 1 23 . } #wrapper{ width: 700px. height: 50px. border: 1px solid gray.

} Graba la imagen como styles. Ahora abre el index. padding: 10px. box-shadow: 0px 0px 10px #000. #wrapper #table1 td{ background: #D8D8D8. font-family: pristina. font-size: 14px. border-radius: 10px. -moz-border-radius: 10px. Si pinchas el enlace Log In la pantalla te aparecerá así: Ejercicios: Capítulo 1 24 .css en la pasta exercise9. } #wrapper #table1 td h3{ text-align: center. -webkit-box-shadow: 0px 0px 10px #000. -webkit-border-radius: 10px. font-size: 20px.html desde tu browser y la pantalla aparecerá así: Las imágenes serán diferentes. -moz-box-shadow: 0px 0px 10px #000.

Si pinchas el enlace Sign Up en la página principal. tu pantalla aparecerá así: Si pinchas el botón Sign Up en la sección Hire (Contratar) o en la Work (Trabajar). la pantalla te aparecerá así: Ejercicios: Capítulo 1 25 .