033 Ejercicios Del Capitulo 1 HTML, XHTML y CSS PDF

Ejercicios: Captulo 1
Ejercicio 1*
Crea una pgina web con:
Ttulo: My First Web Page (Mi Primera Pgina Web).
Contenido: Welcome to My Web Page! (first level header h1) (Bienvenido a Mi Pgina Web!)
I am (Yo soy) <yourname>. (<yourname> debe substituir tu nombre y debe estar en negrita. Debe haber
una lnea horizontal entre las lneas Welcome to My Web Page y I am <yourname>).
<personal description> (descripcin personal) (<personal description> tiene que ser un nuevo prrafo con
algunas frases sobre tu vida personal. Aade un comentario Here is my personal information (Aqu est
mi informacin personal) en la parte superior de la descripcin personal.).
<professional description> (descripcin profesional) (<professional description> tiene que ser un nuevo
prrafo con tus detalles profesionales. Aade un comentario Here is my professional information (Aqu
est mi informacin profesional) en la parte superior de la descripcin 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 itlico. Las tres frases Thank you
for your valuable time., Yours faithfully, y<yourname deben estar en tres nuevas lneas).
Solucin #1
Abre tu editor de texto favorito y aade las siguientes lneas de cdigo 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>

<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>

<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: Captulo 1 1
* El cdigo y las imgenes generadas por ese cdigo estn en ingls.

Grava el archivo como index.html en tu localizacin preferida. Abre el archivo en tu browser favorito y el
resultado ser el siguiente:
Puedes aadir ms detalles en los prrafos de las descripciones personales y profesionales. Esto es slo
un ejemplo.
Ejercicio 2*
Crea un sitio web simple de cocina. La primera pgina debe tener el titulo Welcome to the World of
Tastes (Bienvenido al Mundo de los Sabores) y debe presentar una lista ordenada de tres categoras:
breads (panes), cookies (bizcochos) y cakes (pasteles), y deben estar en negrita. Cada categora debe
tener tres sub categoras, 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

Deben ser aadidos enlaces para cada tem y cuando el usuario pincha el enlace debe ser encaminado
hacia la seccin de Procedure (Preparacin) de la receta correspondiente. La pgina de la receta debe
tener el correspondiente titulo del tem, el nombre del tem en el encabezado, una imagen del producto
final, la lista de ingredientes, notas sobre los ingredientes y el proceso de preparacin numerado.
Solucin #2
Crea una pasta llamada cookery en tu localizacin preferida. Necesitamos poner todas las pginas web
en esta pasta. Ahora abre tu editor de texto favorito y aade las siguientes lneas de cdigo 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.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>
Grava el archivo como welcomeRecipe.html en la pasta de cookery. Abre otra vez un nuevo archivo en tu
editor y aade las siguientes lneas de cdigo:
<html>
<head>
<title>Banana Bread</title>
</head>
<body>
<h1>Banana Bread</h1>
<img src="http://chefjeff.areavoices.com/files/2013/01/Buttermilk-Banana-Bread.jpg"
width="200" height="200" alt="Banana Bread" title="Banana Bread" />
<h2>Ingredients</h2>
<ul>
<li>3 ripe bananas, smashed</li>
<li>2 cups flour</li>
<li>3/4 cup sugar</li>
<li>1/2 cup melted butter</li>
<li>2 eggs, 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.</dd>
<dt>Eggs</dt>
<dd>You can replace eggs with milk if you want.</dd>
</dl>
<h2>Procedure</h2>
<a name="process">
<ol>
<li>Preheat the oven to 175C.</li>
<li>Mix butter into the mashed bananas in a large mixing bowl with a spoon.</li>
<li>Mix in the egg, sugar and vanilla.</li>
<li>Sprinkle the baking soda over the mixture and mix in</li>
<li>Add the flour and mix.</li>
<li>Pour mixture into a buttered loaf pan.</li>
<li>Bake for 45 minutes. Remove from pan once cooled and slice to serve.</li>
</ol>
</a>
</body>
</html>
Grava el archivo como bananabread.html en la pasta de cookery. Ahora abre el welcomerecipe.html en
tu browser favorito y tu pantalla aparecer as:
Una vez que pinchas el enlace del Banana Bread, sers enviado para una nueva pgina como la de
abajo:
Puedes bajar una imagen apropiada y gravarla en la pasta de cookery, para que puedas especificar
directamente el nombre de la imagen como el src de la tag <img>. Aqu el enlace de la pgina web ha
sido especificado, lo que hace que la pgina web sea ms lenta. En este ejemplo, la pgina web solo
para banana breead fue creada y enlazada a la pgina principal. Del mismo modo, puedes crear pginas
web separadas para todos los tems y enlazar cada uno de ellos en la pgina principal,
welcomeRecipe.html.
Ejercicio 3*
Crea una pgina web totalmente funcional que muestre una tabla con tres columnas para First Name
(Primer Nombre), Last Name (Apellido) y Salary (Sueldo). La tabla debe tener la siguiente informacin.
First Name Last Name Salary

John Smith 12,000
Ann Daniel 10,000
Sarah Brown 9,000
Mark Adams 14,000
Kevin Parker 21,000
Eric Downs 17,000
La pgina web debe tener declaracin doctype, espacio de nombres XML y metadatos. El ttulo de la
pgina web debe ser Employee Details (Detalles de Empleados) y debe mostrar un encabezado
Employees Salary Table (Tabla de Sueldos de Empleados) en azul. 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. Establece el valor de cellpadding para 10 pixeles y de cellspacing para 5
pixeles.
Solucin #3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Employee Details</title>

<style type="text/css">
h1
{ color:blue;}
th
{ background-color:aqua;}
tr.even
{ background-color:gray;}
tr.odd
{ background-color:silver;}
</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,000</td>
</tr>
<tr class="odd">
<td>Ann</td>
<td>Daniel</td>
<td>10,000</td>
</tr>
<tr class="even">
<td>Sarah</td>
<td>Brown</td>
<td>9,000</td>
</tr>
<tr class="odd">
<td>Mark</td>
<td>Adams</td>
<td>14,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,000</td>
</tr>
</table>
</body>
</html>
Grava el archivo como table.html en tu localizacin preferida. Abre el archivo en tu browser favorito y el
Puedes cambiar el color, el color de fondo, cellpadding, cellspacing, etc y consultar el resultado.
Ejercicio 4*
Crea una pgina web totalmente funcional que tenga informacin sobre cualquier tpico. El titulo de la
pgina debe ser el mismo del tpico. Debe tener un encabezado principal para el tpico (h1 heading) y
tres prrafos separados, cada uno con h2 headings. El encabezado principal debe aparecer alineado
centralmente, en rojo y en con la fuente Times New Roman, Los encabezados del los prrafos deben
estar alineados a la izquierda, en azul y con la fuente Arial. El contenido del prrafo debe estar justificado,
en negro con el fondo en aqua y en la fuente Calibri con 20 pixeles de tamao de fuente. Debe tener un
relleno de 15 pixeles en cada prrafo y una lnea de espacio de 10 pixeles, 15 pixeles y 20 pixeles en el
primero, segundo y tercer prrafos respectivamente.
Solucin #4


<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>JavaScript</title>
h1
{
text-align: center;
color: red;
font-family: "Times New Roman";
}
h2
{
text-align: left;
color: blue;
font-family: "Arial";
}
p
{
text-align:justify;
color: black;
background-color:aqua;
font-family: "Calibri";
font-size:20px;
padding:15px;
}
#first
{
line-height:15px;
}
#second
{
line-height:20px;
}
#third
{
line-height:25px;
}
</style>
</head>
<body>
<h1>JavaScript</h1>
<h2>Overview</h2>
<p id="first">JavaScript (JS) is an interpreted computer programming language.[5] As part of
web browsers, implementations allow client-side scripts to interact with the user, control the
browser, communicate asynchronously, and alter the document content that is displayed.[5] It
has also become common in server-side programming, game development and the creation of
desktop applications.</p>
<h2>History</h2>
<p id="second">JavaScript was originally developed by Brendan Eich. While battling with
Microsoft over the Web, Netscape considered their client-server offering a distributed OS,
running a portable version of Sun Microsystems' Java. Because Java was a competitor of C++
and aimed at professional programmers, Netscape also wanted a lightweight interpreted
language that would complement Java by appealing to nonprofessional programmers, like
Microsoft's Visual Basic (see JavaScript and Java).</p>
<h2>Features</h2>
<p id="third">JavaScript supports much of the structured programming syntax from C (e.g., if
statements, while loops, switch statements, etc.). One partial exception is scoping: C-style block
scoping is not supported. Instead, JavaScript has function scoping (although, block scoping
using the let keyword was added in JavaScript 1.7). Like C, JavaScript makes a distinction
between expressions and statements. One syntactic difference from C is automatic semicolon
insertion, in which the semicolons that terminate statements can be omitted.</p>
</body>
</html>
Grava el archivo como content.html en tu localizacin preferida. 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.
Ejercicio 5*
Crea una pgina web bien estructurada y totalmente funcional que tenga tres tipos de pginas web,
Welcome (Bienvenido), About Us (Sobre Nosotros) y Contact Us (Contctanos). Los enlaces para estas
tres pginas deben aparecer en cada y en todas las pginas para que el usuario pueda navegar a
cualquier pgina que quiera. Debe tener tres secciones para cada pgina: encabezado, contenido y pie
de pgina. El estilo de las tres pginas debe ser el mismo. Los enlaces deben aparecer horizontalmente
en azul sin estar subrayados. Cuando el usuario mueve el ratn sobre el enlace, el color del enlace debe
estar en negrita y aparecer en rojo y todos los enlaces visitados deben aparecer en aqua.
Solucin #5
Crea una pasta llamada exercise5 en tu localizacin preferida. Necesitas poner todas las pginas web
sacadas en esta pasta. Ahora abre tu editor de texto favorito y aade las siguientes lneas de cdigo en
un archivo:

<head>
<title>Welcome</title>
<link type="text/css" rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Welcome</h1>
<div id="header">
<ul>
<li><a href="welcome.html">HomePage</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div>
<div id="container">
<p>This is the Welcome page.</p>
</div>
<div id="footer">
Here is the footer.
</div>
</body>
</html>

Grava el archivo como welcome.html en la pasta exercise5. Abre un nuevo archivo en tu editor. Copia el
mismo cdigo 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.</p>. Grava el archivo como aboutus.html en la pasta exercise5. Crea
otro archivo ms, llamado aboutus.html copiando el mismo contenido y cambiando las tags <h1> y <p>
apropiadamente. Abre un nuevo archivo y aade las siguientes lneas de cdigo:
h1{ color:red; }
#header
{
border: 1px solid black;
height:80px;
width:300px;
background-color: silver;
margin:0 auto;
}
#header ul
{
list-style-type: none;
}
#header ul li
{
width:70px;
display:inline;
padding: 5px;
}
#header ul li a:link
{
text-decoration:none;
color: blue;
}
#header ul li a:visited
{
color:aqua;
}
#header ul li a:hover
{
font-weight:bold;
color:red;
}
#header ul li a:active
{
}
#container
{
border:1px solid black;
height: 300px;
width:700px;
position:relative;
margin:0px auto;
}
#footer
{
height:50px;
width:700px;
margin:0px auto;
}
Grava el archivo como styles.css en la pasta exercise5. Ahora abre el welcome.html en tu browser
favorito. En la pantalla aparecer esto:
Aqu, los enlaces aparecen en aqua cuando ya han sido visitados. Si mueves el ratn sobre cualquier de
los enlaces, tu enlace aparecer as:
Pincha cada enlace y confirma si ests siendo direccionado hacia la pgina correcta.
Ejercicio 6*
Crea un formulario XHML que permita que un usuario se inscriba en una pgina web. El formulario debe
tener una lista desplegable para escoger el title (ttulo), cajas de texto para colocar el first name (primer
nombre), last name (apellido), user id (id de usuario) y password (contrasea), botones de pulsar para
escoger el sexo, cajas para escoger los temas de inters y un botn de Sign Up (Inscripcin). El tamao
mximo permitido para el user id es de 10 caracteres. Los caracteres inseridos en la caja de la password
deben ser visualizados como puntos. Coloca las etiquetas y los correspondientes elementos de insercin
en dos columnas en diferentes filas de una tabla para que el formulario quede ms estructurado.
Solucin #6

<head>
<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>

<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.html en tu localizacin preferida y abre el archivo en tu browser favorito. El
Intenta colocar un valor en la caja de texto de user id y no te dejar colocar ms de 10 caracteres. Vers
que los caracteres colocados en la caja de la password aparecern como puntos.
Ejercicio 7*
Crea una pgina web que incluya un video de YouTube y un mapa de Google con tu lugar preferido.
Aade encabezados adecuados en rojo en la parte superior del video y del mapa. El video y el mapa
deben estar centrados en una caja.
Solucin #7
Abre tu editor de texto favorito y aade las siguientes lneas de cdigo en un archivo.

<head>
<title>Video and Map</title>

#container
{
width: 800px;
margin:0px auto;
text-align:center;
}
h2
{
color:red
}
</style>
</head>
<body>
<div id="container">
<h2>Become a Web Developer Introduction</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/quk_MZ-HqBA"
frameborder="0"></iframe><br/>
<h2>Google Map: Lisbon, Portugal</h2>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="https://maps.google.co.in/maps?f=q&source=s_q&hl=en&geocode=&q=Lisb
on,+Portugal&aq=0&oq=Lisbon,&sll=10.525782,76.214733&sspn=0.205565,0.33
8173&ie=UTF8&hq=&hnear=Lisbon,+Portugal&t=m&z=12&ll=38.7252
99,-9.150036&output=embed"></iframe><br /><small><a
href="https://maps.google.co.in/maps?f=q&source=embed&hl=en&geocode=&q=
Lisbon,+Portugal&aq=0&oq=Lisbon,&sll=10.525782,76.214733&sspn=0.205565,
0.338173&ie=UTF8&hq=&hnear=Lisbon,+Portugal&t=m&z=12&ll=38.7
25299,-9.150036" style="color:#0000FF;text-align:left">View Larger Map</a></small>
</div>
</body>
</html>
Grava el archivo como index.html en tu localizacin preferida y abre el archivo en tu browser favorito. El
Podrs reproducir el video y mover, aproximar y alejar, el mapa como quieras.
Ejercicio 8*
Monta una pgina web simple utilizando una plantilla gratis de la web. Modifica el contenido necesario
para hacerlo relevante.
Solucin #8
Vete a la pgina web http://www.freecsstemplates.org y descarga la plantilla llamada catmint. Puedes

entrar directamente en el enlace http://www.freecsstemplates.org/download/zip/catmint/ para descargarlo
(no es necesario que tengas que descargar esta plantilla, pero esta solucin est basada en la plantilla
catmint). Descomprime el archivo descargado. Crea una pasta llamada exercise8 y pon todos los
archivos descomprimidos en esta pasta. Copia el aboutus.html, contactus.html y styles.css, que ya has
creado para el ejercicio 5, para la pasta exercise8. Abre el aboutus.html en tu editor de texto y modifica el
enlace de la Homepage para index.html en vez de welcome.html (<li><a
href="index.html">HomePage</a></li>).Repite el mismo procedimiento para contactus.html.html.

Ahora abre el archivo index.html de tu editor de texto. Primero modifica el <h1> y los enlaces dentro del
<div> con el id header siguiente.
<div id="header" class="container">

<div id="logo">
<h1><a href="#">OurCompany Inc.</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" accesskey="3" title="">About Us</a></li>
<li><a href="contactus.html" accesskey="5" title="">Contact Us</a></li>
</ul>
</div>
</div>
Con esto hemos dado un nuevo nombre a la compaa y removido los enlaces desnecesarios.
Apaga el elemento <p> dentro del <div> con el titulo que empieza con This is
<strong>Catmint</strong>, a free, junto con su contenido. Baja de la web la imagen de una flor y ponla
en la pasta de imgenes. Ahora abre el archivo default.css y vete a #header-featured styles section.
Define como imagen de fondo la nueva imagen que has guardado para que la imagen grande, que ves
debajo de los enlaces, cambie.
Ahora grava el archivo index.html. Abre el index.html desde tu browser favorito y tu pantalla aparecer
as:
La imagen que vers no ser la misma. Ser la imagen que bajaste y adicionaste. Si pinchas los enlaces
About Us o el Contact Us sers direccionado hacia las pginas que has creado en el ejercicio #5. Si
pinchas el enlace Home Page cuando ests en la pgina About Us o en la Contact Us, sers reenviado
para la pgina principal. Puedes incluso modificar el contenido, cambiar el esquema del color o modificar
las imgenes que quieras de forma a conseguir hacer un sitio web profesional.
Ejercicio 9*
Crea una pgina web de freelancing (trabajo por cuenta propia) profesional. La primera pgina debe
mostrar el logo o el nombre de la pgina web, con dos enlaces: Sign Up (Regstrate) y Log In (Iniciar
sesin). El enlace Sign Up debe reenviar el usuario para otra pgina que le permita registrarse como
freelancer o como cliente. 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), User Id (Id de Usuario),
Password (Contrasea), un email y un botn de Sign Up. El enlace Log In debe permitir al usuario colocar
el user id, una password y acceder. Todas las pginas deben tener el logo o nombre de la pgina web.
Solucin #9
Crea una pasta llamada exercise9 en tu localizacin preferida. Crea una pasta llamada images en la
pasta exercise9 y aade dos imgenes llamadas freelance.jpg y 1.jpg. Puedes gravar la imagen que
quieras, pero intenta conseguir imgenes relevantes para freelancing. La imagen freelance.jpg ser
utilizada como logo y la 1.jpg como imagen de fondo.
Abre un nuevo archivo en tu editor y aade las siguientes lneas de cdigo:

<head>
<title>Earn Online</title>

<meta name="description" content="Freelance Website" />

<meta name="keywords" content="earn, freelance, online" />
<meta name="author" content="Victor" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="header">
<div id="logo"><a href="index.html"><img src="images/freelance.jpg" width="200px" /></a></div>
</div>
<div id="wrapper">
<div id="main"><img src="images/1.jpg" /></div>
<table id="table1" cellspacing="40">
<tr>
<td>
<h3>Log In</h3>
<p>Already have a Freelance Account?</p>
<a href="login.html">Log In</a>
</td>

<td>
<h3>Sign Up</h3>
<p>Do you want to hire or work?</p>
<a href="optsignup.html">Sign Up</a>
</td>
</tr>
</table>
<div id="footer">
2013 Earn Online. All rights reserved.
</div>
</div>
</body>
</html>
Graba el archivo index.html en la pasta exercise9. Abre un nuevo archivo y aade las siguientes lneas
de cdigo.

<head>
</head>
<body>
<div id="header">
<div id="logo"><a href="index.html">
<img src="images/freelance.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. All rights reserved.</div>
</div>
</body>
</html>
Graba el archivo login.html en la pasta exercise9. Abre un nuevo archivo y aade las siguientes lneas de
cdigo:

<head>
</head>
<body>
<div id="header">
</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.</b>Find, hire and get the work done.</p>
<a href="signup.html">Sign Up</a>
</td>
<td>
<h3>Work</h3>
<p><b>I need a job.</b><br/>Find your passion, earn money and grow as a
professional.</p>
<a href="signup.html">Sign Up</a>
</td>
</tr>
</table>
</div>

</div>
</body>
</html>
Graba el archivo optsignup.html en la pasta exercise9. Abre un nuevo archivo y aade las siguientes
lneas de cdigo.

<head>
</head>
<body>
<div id="header">
</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>
</body>
</html>
Graba el archivo signup.html en la pasta exercise9. Abre un nuevo archivo y aade las siguientes lneas
de cdigo.
p{
text-align:center;
}
#header{
width: 100%;
height: 120px;
background:#996633;
text-align: center;
}
#wrapper{
width: 700px;
margin: 0px auto;

}
#footer{
height: 40px;
border-top: 1px solid gray;
text-align: center;
font-size: 14px;
}
#wrapper #main img{

width: 700px;
height: 300px;
border: 1px solid gray;
}
#header #logo img{

margin-top: 5px;
margin-left: -450px;
}
#wrapper #table1{
width: 700px;
height: 250px;
}
#wrapper #table2{
width: 300px;
height: 50px;
table-layout: fixed;
}
#wrapper #table1 td{
background: #D8D8D8;
font-size: 14px;
padding: 10px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
-webkit-box-shadow: 0px 0px 10px #000;
}
#wrapper #table1 td h3{

text-align: center;
font-family: pristina;
font-size: 20px;
}
Graba la imagen como styles.css en la pasta exercise9. Ahora abre el index.html desde tu browser y la
pantalla aparecer as:
Las imgenes sern diferentes. Si pinchas el enlace Log In la pantalla te aparecer as:
Si pinchas el enlace Sign Up en la pgina principal, tu pantalla aparecer as:
Si pinchas el botn Sign Up en la seccin Hire (Contratar) o en la Work (Trabajar), la pantalla te

aparecer as:

033 Ejercicios Del Capitulo 1 HTML, XHTML y CSS PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

033 Ejercicios Del Capitulo 1 HTML, XHTML y CSS PDF

Încărcat de

Drepturi de autor:

Formate disponibile

Ejercicios: Captulo 1

Ttulo: My First Web Page (Mi Primera Pgina Web).

Yours faithfully (Atentamente),

* El cdigo y las imgenes generadas por ese cdigo estn en ingls.

* El cdigo y las imgenes generadas por ese cdigo estn en ingls.

First Name Last Name Salary

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

* El cdigo y las imgenes generadas por ese cdigo estn en ingls.

<table border="1px" cellpadding="10px" cellspacing="5px">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

* El cdigo y las imgenes generadas por ese cdigo estn en ingls.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

* El cdigo y las imgenes generadas por ese cdigo estn en ingls.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

* El cdigo y las imgenes generadas por ese cdigo estn en ingls.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

* El cdigo y las imgenes generadas por ese cdigo estn en ingls.

Podrs reproducir el video y mover, aproximar y alejar, el mapa como quieras.

Vete a la pgina web http://www.freecsstemplates.org y descarga la plantilla llamada catmint. Puedes

* El cdigo y las imgenes generadas por ese cdigo estn en ingls.

<div id="header" class="container">

Abre un nuevo archivo en tu editor y aade las siguientes lneas de cdigo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<meta name="description" content="Freelance Website" />

* El cdigo y las imgenes generadas por ese cdigo estn en ingls.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<div id="footer"><br />2013 Earn Online. All rights reserved.</div>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

margin: 0px auto;

#wrapper #main img{

#header #logo img{

#wrapper #table1 td h3{

Si pinchas el botn Sign Up en la seccin Hire (Contratar) o en la Work (Trabajar), la pantalla te

S-ar putea să vă placă și