Conceptos Básicos de HTML II

CONCEPTOS BSICOS DE HTML II
<!DOCTYPE html>
<html>
<head>
<title>jesus</title>
</head>
<body>
<p>cuando los pajaros cantas es que sera un bonito dia</p>
</body>
</html>
2
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
4
<!DOCTYPE html>
<html>
<head>
<title>fitness</title>
</head>
<body>
<h3>las celebridades mas molestas de la TV</h3>
<ol>
<li>jenny rivera</li>
<li>ricky martin</li>
<li>marco antonio regil</li>
</ol>
<h2>cosas que puedo hacer para el dia de las madres</h2>

<ol>
<li>regalar un pastel a mi madre</li>
<li>convivir</li>
<li>abrazar a mi madre</li>
</ol>
</body>
</html>
5
<!DOCTYPE html>
<html>
<head>
<title>Listas no ordenadas</title>
</head>
<body>
<h1>Algunos pensamientos al azar</h1>

<p> muebles</p>
<ul>
<li>carross</li>
<li>motos</li>
<li>vicicletas</li>
<li>trocas</li>
</ul>
</body>
</html>
6
<!DOCTYPE html>
<html>
<head>
<title>Listas anidadas</title>
</head>
<body>
<ol>
<li>Los intereses de pap</li>
<ul>
<li>ftbol</li>
<li>tejer</li>
</ul>
<li>Los intereses de mam</li>
<ul>
<li>odiar el ftbol</li>
<li>paracaidismo</li>
</ul>
</ol>
<ul>
</body>
</html>
7

<p>Pero haz que el usuario me pueda ver!</p>

8
<!DOCTYPE html>
<html>
<head>
<title>Primer cambio de tamao de fuente</title>
</head>
<body>
<p style = "font-size: 8px">Aqu va el texto pequeo!</p>
<p style = "font-size: 12px">Aqu va el texto de tamao normal!</p>
<p style = "font-size: 44px">Aqu va el texto de tamao sper grande!</p>
</body>
</html>
9
<!DOCTYPE html>
<html>
<head>
<title>Cambio de colores!</title>
</head>
<body>
<h1 style="color: green; font-size:16px">Encabezado grande</h1>
<p style="color:violet">Un osote y un patito eran amigos.</p>
<p style="color: red; font-size:8px">>Pero al osote le dio hambre y se
comi al patito.</p>
</body>
</html>
10
<!DOCTYPE html>
<html>
<head>
<title>Me encantan los cambios de fuente</title>
</head>
<body>
</h1>Ttulo grande</h1>
<ol>
<li style="font-family:Garamond">Esto va en fuente Garamond
grande.</li>
<li style="font-family:Bodoni; font-size: 12px">Esto va en fuente Bodoni
mediana.</li>
<li style="font-family:Futura; font-size: 8px">Esto va en fuente Futura
pequea</li>
</ol>
</body>
</html>
11
<!DOCTYPE html>
<html>
<head>
<title>Practicando lo aprendido</title>
</head>
<body>
<p style = "font-size:20px; color: blue; font-family: Garamond">Un prrafo
realmente espectacular!</p>
</body>
</html>
12
<!DOCTYPE html>
<html>
<head>
<title>Color de fondo sexy!</title>
</head>
<body style="background-color: brown">
<h3 style="background-color: yellow">Equipos deportivos favoritos</h3>
<ol style="background-color: yellow">
<li>El Hawthorn Football Club</li>
<li>San Franscisco 49ers</li>
<li>El Barcelona FC</li>
</ol>
</body>
</html>
13
<!DOCTYPE html>
<html>
<head>
<title>Color de fondo sexy!</title>
</head>
<body>
<h3 style="text-align:center">>Equipos deportivos favoritos</h3>
<ol>
<li style="text-align:left">>El Hawthorn Football Club</li>
<li style="text-align:center">San Franscisco 49ers</li>
<li style="text-align:right">El Barcelona FC</li>
</ol>
</body>
</html>
14
<!DOCTYPE html>
<html>
<head>
<title>Viva La Revolucin!</title>
</head>
<body>
<p>Escuchas a la gente <strong>cantar</strong>?</p>
<p>No, no la escucho. Estoy <strong>muy</strong> ocupado comiendo
pastel.</p>
</body>
</html>
15
<!DOCTYPE html>
<html>
<head>
<title>Algo de buena prctica</title>
</head>
<body>
<p>Oye, no digas <em>eso</em>!</p>
<p>Estoy <em>tan</em> cansado.</p>
</body>
</html>
16
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body></body>
</html>
Perfil de redes sociales

<!DOCTYPE html>
<html>
<head>
<title>El Rey de los Gorilas</title>
</head>
<body>
<img src="http://bit.ly/NM8PWH"></img>
<p>Soy macho, tengo 89 aos y soy un simio gigante trepador de
edificios.</p>
<ul>
<li style="color:red">Intereses</li>
<ul>
<li style="font-family:Futura">Bananos</li>
<li style="font-family:Futura">Trepar cosas</li>
<li style="font-family:Futura">HTML</li>
</ul>
<li style="color:red">Empleos</li>
<ol>
<li style="font-family:Futura">Simio gigante</li>
<li style="font-family:Futura">Desarrollador web</li>
</ol>
<li style="color:red">Lugares donde estudi</li>
<ol>
<li style="font-family:Futura">Escuela Primaria Diddy
Kong Jr.</li>
<li style="font-family:Futura">Escuela Secundaria
Donkey Kong Sr.</li>
<li style="font-family:Futura">Universidad de Harvard
(Licenciado)</li>
<li style="font-size:18px; fontfamily:Futura">Universidad de Yale (Abogado) (Actualmente)</li>
</ol>
<li style="color:red">Frases clebres favoritas</li>
<ul>
<li style="font-family:Futura">"Si al primer intento no
lo consigues, trpate a un edificio gigante."</li>
<li style="font-family:Futura">"Ms vale banano en
mano que ciento en el rbol."</li>
</ul>
</ul>
</body>
</html>
2
<!DOCTYPE html>
<html>
<head>
<img src="aqu-la-url-de-la-imagen" border="0" height="60" width="80" />
<title>mmmmm</title>
</head>
<body></body>
</html>
3
<!DOCTYPE html>
<html>
<head>
<p>fff</p>
</head>
<body></body>
</html>
4
<!DOCTYPE html>
<html>
<head>
<p>fff</p>
<ul>
<li type="circle">Esto es un tipo de punto.</li>
<li type="square">Este es otro.</li>
<li type="disc">Y este es otro diferente.</li>

</ul>
</head>
<body></body>
</html>
5
<!DOCTYPE html>
<html>
<head>
<p>fff</p>
<ul>
<OL>
<LI> Primera voz del men

<LI> Segunda voz del men
<LI> Tercera voz del men
</OL>

<UL>
</UL>
</ul>
</head>
<body></body>
</html>
6
<!DOCTYPE html>
<html>
<head>
<p>fff</p>
<ul>
<OL>
<font-family: "Arial">
</OL>
<p style="color:red">Soy roja!</p>

<UL style="font-size:8px; font-family:arial">
</UL>
</ul>
</head>
<body></body>
</html>
7
<!DOCTYPE html>
<html>
<head>
<p>fff</p>
<ul>
<OL>
<font-family: "Arial">
</OL>
<p><strong>hola <em>poco nfasis</em>,seores buensas tardes yo solo quietro decir
que este dia es el ejor dia de todos por que sali con mi mejor amigo</strong></p>
<p style="color:red">Soy roja!</p>

<UL style="font-size:8px; font-family:arial">
</UL>
</ul>
</head>
<body></body>
</html>
Conceptos bsicos de HTML III

1
<!DOCTYPE html>
<html>
<head>
<title>Hora de las tablas</title>
</head>
<body>
<h1 style="font-family:Garamond;color:red"> Las tablas son mega
geniales</h1>
<img>"https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-xpf1/t1.09/s526x296/10410612_10152322560251589_4036111228477544198_n.jpg"<img>
</body>
</html>
<a href="https://www.facebook.com/"><img src="https://scontent-adfw.xx.fbcdn.net/hphotos-xpf1/t31.08/10468230_653267968097870_474996362781277811_o.jpg"></img</a>
2
<html>
<head>
</head>
<body>
<table>
</table>
</body>
</html>
3
<html>
<head>
<title>Hora de las tablas
</head>
<body>
<table>
<tr></tr>

<tr></tr>
<tr></tr>
</table>
</body>
</html>
4
<html>
<head>
</head>
<body>
<table border="1px">
<tr>
<td>Una</td>
</tr>
<tr>
<td>dos</td>
</tr>
<tr>
<td>tres</td>
</tr>
</table>
</body>
</html>
5
<html>
<head>
</head>
<body>
<tr>
<td>King Kong</td>
<td>1933</td>
</tr>
<tr>
<td>Drcula</td>
<td>1897</td>
</tr>
<tr>
<td>Ryan Gosling</td>
<td>1944</td>
</tr>
</table>
</body>
</html>
6
<html>
<head>
</head>
<body>
<thead>
<tr>
<td>King Kong</td>
<td>1933</td>
</tr>
<tr>
<td>Drcula</td>
<td>1897</td>
</tr>
<tr>
<td>Gary Busey</td>
<td>1944</td>
</tr>
<tbody>
</table>
</body>
</html>
7
<html>
<head>
</head>
<body>
<thead>
<tr>
<th>Tipo famoso</th>
<th>Ao de nacimiento</th>
</tr>
</thead>
<tbody>
<tr>
<td>King Kong</td>
<td>1933</td>
</tr>
<tr>
<td>Drcula</td>
<td>1897</td>
</tr>
<tr>
<td>Gary Busey</td>
<td>1944</td>
</tr>
</tbody>
</table>
</body>
</html>
8
<html>
<head>
</head>
<body>
<thead>
<tr>
<th colspan="2">Tipos famosos, por ao de nacimiento</th>
</tr>
<tr>
<th>Tipo famoso</th>
<th>Ao de nacimiento</th>
</tr>
</thead>
<tbody>
<tr>
<td>King Kong</td>
<td>1933</td>
</tr>
<tr>
<td>Drcula</td>
<td>1897</td>
</tr>
<tr>
<td>Gary Busey</td>
<td>1944</td>
</tr>
</tbody>
</table>
</body>
</html>
9
<html>
<head>
</head>
<body>
<table style="border-collapse:collapse;">
<thead>
<tr>
<th style="color:red;"colspan="2">Tipos famosos por ao de

nacimiento</font></th>
</tr>
<tr style="border-bottom:1px solid black;">
<th style="padding:5px;"><em>Tipo famoso</em></th>

<th style="padding:5px;border-left:1px solid black;"><em>Ao de
nacimiento</em></th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding:5px;">King Kong</td>
<td style="padding:5px;border-left:1px solid black;">1933</td>
</tr>
<tr>
<td style="padding:5px;">Drcula</td>
</tr>
<tr>
<td style="padding:5px;">Gary Busey</td>
</tr>
</tbody>
</table>
</body>
</html>
10
<html>
<head>
</head>
<body>
<table style="border-collapse:collapse;">
<thead>
<tr>
<th style="color:red;"colspan="2">Tipos famosos por ao de

nacimiento</font></th>
</tr>
<tr style="border-bottom:1px solid black;">
<th style="padding:5px;"><em>Tipo famoso</em></th>
<th style="padding:5px;border-left:1px solid black;"><em>Ao de
nacimiento</em></th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding:5px;">King Kong</td>
</tr>
<tr>
<td style="padding:5px;">Drcula</td>
</tr>
<tr>
<td style="padding:5px;">Gary Busey</td>
</tr>
</tbody>
</table>
</body>
</html>
11
<!DOCTYPE html>
<html>
<head>
<title>Resultado</title>
</head>
<body>
<div style="width:50px; height:50px; background-color:red"></div>
<div style="width:50px; height:50px; background-color:blue"></div>
<div style="width:50px; height:50px; background-color:green"></div>
<div style="width:50px; height:50px; background-color:yellow"></div>
</body>
</html
12
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="width:50px; height:50px; background-color:red"></div>
<div style="width:50px; height:50px; background-color:blue"></div>
<div style="width:50px; height:50px; background-color:green"></div>
<div style="width:50px; height:50px; background-color:yellow"></div>
<a href="www.google.com"><div style="width:50px; height:50px;
background-color:black"></div></a>
</body>
</html>
13
<!DOCTYPE html>
<html>
<head>
<title>red</title>
</head>
<body>
<p>Este texto es negro, excepto por la palabra <span
style="color:red">rojo</span>!</p>
</body>
</html>
14
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Mi fuente favorita es <span style="fontfamily:futura">Futura</span>!</p>
</body>
</html>
15
<!DOCTYPE html>
<html>
<head>
<title>El libro elegante de antao</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<h3>Una vieja historia</h3>
<p><span>Hace</span> mucho tiempo, haba un intrpido joven
estudiante, quien quera aprender CSS...</p>
</body>
</html>
Pgina de fotos interactivas

1
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"></link>
<title>Mi pgina de fotos</title>
</head>
<body></body>
</html>
1
img {
width:100px;
height:100px;
}
table, td {
border: 1px #70b8ff dashed;
}
2
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<TABLE>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</TABLE>
</body>
</html>
2
img {
width:100px;
height:100px;
}
table, td {
}
3
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<TABLE>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</TABLE>
</body>
</html>
3
img {
width:100px;
height:100px;
}
table, td {
}
4
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<TABLE>
<thead><th>nos se para que sirve</th></thead>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</TABLE>
</body>
</html>
4
img {
width:100px;
height:100px;
}
table, td {
}
5
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<TABLE>
<tr>
<td><img src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-akxaf1/t31.0-8/10255247_574140932694288_423675289812461268_o.jpg"></img>
</td>
<td><img src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-akxfa1/v/t1.09/10516879_567184776723237_5658816781191963152_n.jpg?oh=87c6b3a9c4203dcd9c
1d2a682bf9c72a&oe=545E291E&__gda__=1417342504_f8bd82eb78471caf53157bc65d6
ac7f3"></img>
</td>
<td><img src="https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-akxpf1/t1.0-9/10155349_522650414510007_1152614193_n.jpg"></img>
</td>
</tr>
<tr>
<td><img src="https://scontent-b-dfw.xx.fbcdn.net/hphotos-xfp1/t1.09/10478156_574141612694220_3186500989496458702_n.jpg"></img>
</td>
<td><img src="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-akxaf1/t1.0-9/1939680_513339078774474_105760534_n.jpg"></img>
</td>
<td><img src="https://scontent-b-dfw.xx.fbcdn.net/hphotos-xap1/t1.09/1653522_508693995905649_34487328_n.jpg"></img>
</td>
</tr>
<tr>
<td><img src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-frc3/t1.09/1618682_499373166837732_1315711005_n.jpg"></img>
</td>
<td>
<img src="https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-xpa1/t1.09/1506810_496676497107399_1362345532_n.jpg"></img>
</td>
<td><img scr="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-akxfa1/t1.0-9/315338_381059838669066_1932798805_n.jpg"></img>
</td>
</tr>
</TABLE>
</body>
</html>
5
img {
width:100px;
height:100px;
}
table, td {
}
6
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<TABLE>
<tr>
<td><a href="https://www.netacad.com/"><img src="https://fbcdnsphotos-g-a.akamaihd.net/hphotos-ak-xaf1/t31.08/10255247_574140932694288_423675289812461268_o.jpg"></img></a>
</td>
<td><a href="http://www.youtube.com/"><img src="https://fbcdnsphotos-c-a.akamaihd.net/hphotos-ak-xfa1/v/t1.09/10516879_567184776723237_5658816781191963152_n.jpg?oh=87c6b3a9c4203dcd9c
ac7f3"></img></a>
</td>
<td><a href="https://www.facebook.com/"><img src="https://fbcdnsphotos-f-a.akamaihd.net/hphotos-ak-xpf1/t1.09/10155349_522650414510007_1152614193_n.jpg"></img></a>
</td>
</tr>
<tr>
<td><a href="http://www.mercadolibre.com/"><img src="https://scontentb-dfw.xx.fbcdn.net/hphotos-xfp1/t1.09/10478156_574141612694220_3186500989496458702_n.jpg"></img></a>
</td>
<td><a href="http://www.youporn.com/"><img src="https://fbcdnsphotos-a-a.akamaihd.net/hphotos-ak-xaf1/t1.09/1939680_513339078774474_105760534_n.jpg"></img></a>
</td>
<td><a href="http://www.televisa.com/"><img src="https://scontent-bdfw.xx.fbcdn.net/hphotos-xap1/t1.09/1653522_508693995905649_34487328_n.jpg"></img></a>
</td>
</tr>
<tr>
<td><a href="http://cramac.com.mx/"><img src="https://fbcdn-sphotos-ca.akamaihd.net/hphotos-ak-frc3/t1.09/1618682_499373166837732_1315711005_n.jpg"></img></a>
</td>
<td>
<a href="http://www.redtube.com/"><img src="https://fbcdn-sphotos-ha.akamaihd.net/hphotos-ak-xpa1/t1.09/1506810_496676497107399_1362345532_n.jpg"></img></a>
</td>
<td><a href="https://www.google.com.mx"><img scr="https://fbcdnsphotos-b-a.akamaihd.net/hphotos-ak-xfa1/t1.09/315338_381059838669066_1932798805_n.jpg"></img></a>
</td>
</tr>
</TABLE>
</body>
</html>
6
img {
width:100px;
height:100px;
}
table, td {
}
7
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<TABLE>
<tr>
<td><a href="https://www.netacad.com/"><img src="https://fbcdnsphotos-g-a.akamaihd.net/hphotos-ak-xaf1/t31.08/10255247_574140932694288_423675289812461268_o.jpg"></img></a>
</td>
<td><a href="http://www.youtube.com/"><img src="https://fbcdnsphotos-c-a.akamaihd.net/hphotos-ak-xfa1/v/t1.09/10516879_567184776723237_5658816781191963152_n.jpg?oh=87c6b3a9c4203dcd9c
ac7f3"></img></a>
</td>
<td><a href="https://www.facebook.com/"><img src="https://fbcdnsphotos-f-a.akamaihd.net/hphotos-ak-xpf1/t1.09/10155349_522650414510007_1152614193_n.jpg"></img></a>
</td>
</tr>
<tr>
<td><a href="http://www.mercadolibre.com/"><img src="https://scontentb-dfw.xx.fbcdn.net/hphotos-xfp1/t1.09/10478156_574141612694220_3186500989496458702_n.jpg"></img></a>
</td>
<td><a href="http://www.youporn.com/"><img src="https://fbcdnsphotos-a-a.akamaihd.net/hphotos-ak-xaf1/t1.09/1939680_513339078774474_105760534_n.jpg"></img></a>

</td>
<td><a href="http://www.televisa.com/"><img src="https://scontent-bdfw.xx.fbcdn.net/hphotos-xap1/t1.09/1653522_508693995905649_34487328_n.jpg"></img></a>
</td>
</tr>
<tr>
<td><a href="http://cramac.com.mx/"><img src="https://fbcdn-sphotos-ca.akamaihd.net/hphotos-ak-frc3/t1.09/1618682_499373166837732_1315711005_n.jpg"></img></a>
</td>
<td>
<a href="http://www.redtube.com/"><img src="https://fbcdn-sphotos-ha.akamaihd.net/hphotos-ak-xpa1/t1.09/1506810_496676497107399_1362345532_n.jpg"></img></a>
</td>
<td><a href="https://www.google.com.mx"><img scr="https://fbcdnsphotos-b-a.akamaihd.net/hphotos-ak-xfa1/t1.09/315338_381059838669066_1932798805_n.jpg"></img></a>
</td>
</tr>
</TABLE>
</body>
</html>
7
img {
width:100px;
height:100px;
}
table, td {
}
CSS: un vistazo general

1
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="header">
<div id="navbar">
<ul>
<li>Inicio</li>
<li>Acerca de m</li>
<li>Planes para dominacin mundial</li>
<li>Contacto</li>
</ul>
</div>
<h2>Acerca de m</h3>
</div>
<div id="left">
<img src="http://www.thedailybalance.com/wp-content/uploads/angrypuppy.jpg"/>
<p>Soy el cachorro ms enojado del mundo. Hecho que ha sido
comprobado cientficamente en varios ensayos clnicos.</p>
</div>
<div id="right">
<table>
<th colspan="3">Mis compas</th>
<tr>
<td><img
src="http://thedoggiedish.com/uploads/pictures/1344463888_Puppies%20Training.jp
g"/></td>
<td><img
src="http://www.humanesociety.org/assets/images/270x224/animals/dogs/dog_puppy_
lookinup_270x224.jpg"/></td>
<td><img src="http://funnycrave.frsucrave.netdnacdn.com/wp-content/uploads/2011/03/puppy.png"/></td>
</tr>
<tr>
<td><img
src="http://2.bp.blogspot.com/_jZHHRfnq9F8/Sw5Kb1D2EhI/AAAAAAAAKkE/fua
DErPNDvU/s1600/Puppy+Training.jpg"/></td>
<td><img src="http://4.bp.blogspot.com/hvKDf0aMe1g/ToKckj6RZrI/AAAAAAAACf0/oZQNbyPtmns/s1600/cute-puppypictures.jpg"/></td>
<td><img src="http://puppiespics.net/wpcontent/uploads/2012/04/doberman-puppy5.jpg"/></td>
</tr>
<tr>
<td><img id="bottom_left"
src="http://dailypicksandflicks.com/wp-content/uploads/2011/03/Boo.jpg"/></td>
<td><img
src="http://24.media.tumblr.com/tumblr_m825unsFjm1qldzl2o2_500.jpg"></td>
<td><img id="bottom_right"
src="http://img.photobucket.com/albums/v649/deadxmansxhand/ewokcloseup.jpg"/></td>
</tr>
</table>
</div>
<div id="footer">
<div id="button">
<p>Envame un <span class="bold">correo
electrnico</span>!</p>
</div>
</div>
</body>
</html>
1
body {
background-color: #b7d1c4
}
h2 {
font-family: Verdana;
font-weight: bold;
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
color: #acd1b2;
}
img {
height: 170px;
width: 170px;
box-shadow: rgba(0,0,0,0.2) 10px 10px;
#navbar {
position: fixed;
top:10px;
left:50%;
margin-left:-254px;
}
#header {
position: relative;
top: -10px;
background-color: #3c4543;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
ul{
list-style-type: none;
position: fixed;
margin: -10px;
}
li {
display: inline;
border: 2px solid #000000;

font-family: Futura, Tahoma, sans-serif;
color: #ffffff;
padding: 5px;
border-radius: 5px 5px;
background-color: #cc0323
}
#left{
width: 45%;
float: left;
}
p{
font-family: Tahoma;
font-size: 1em;
}
#right{
width: 45%;
float: right;
}
table {
border: #000000 1px solid;
background-color: #acd1b2;
float: right;
margin-right: 10px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
td {
height: 75px;
width: 75px;
}
td img {
height: 75px;
width: 75px;
box-shadow: none;
}
th {
font-size: 1em;
font-weight: normal;
color: #3c4543
}
#bottom_left{
}
#bottom_right{
}
#footer{
clear: both;
position: relative;
bottom: -20px;
height: 75px;
}
#button{

float:left;
position: relative;
left: 229px;
bottom: -20px;
border-radius: 5px;
background-color: #cc0323;
height: 45px;
width: 160px;
#button p{
position: relative;
bottom: 10px;
font-size: 0.8em;
color: #acd1b2;
text-align: center;
}
.bold{
font-family: tahoma;
font-weight: bold;
font-size: 1.2em;
font-variant: small-caps;
color: #ffffff;
}
2
<!DOCTYPE html>
<html>
<head>
<title>Fuentes elegantes</title>
</head>
<body>
<p>Soy un prrafo escrito en fuente de color rojo, pero una de mis
palabras es de color <span style="color:blue">azul</span>!</p>
</body>
</html>
2
p{
color: red;
}
span {color:blue
/*Escribe aqu tu CSS!*/
}
3
<!DOCTYPE html>
<html>
<head>
<title>Fuentes an ms elegantes</title>
</head>
<body>
<p>Mucho de este texto es normal, pero algo de l es
<span>elegante</span>!
Podemos usar nuestra <span>fuente recientemente elegante</span>
para agregarle algo de
<span>gracia</span> a nuestro sitio web. Sera una <span>verdadera
molestia</span>
hacer <span>elegante</span> cada una de estas etiquetas span de forma
separada,
pero es pan comido con <span>CSS</span>!</p>
</body>
</html>
3
span {font-family: cursive;
/*Agrega tu CSS aqu!*/
}
4
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: purple;
}
</style>
</head>
<body>
<p>Mira! Soy prpura!</p>
</body>
</html>
5
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: purple;
}
</style>
</head>
<body>
<p>Mira! Soy prpura!</p>
</body>
</html>
5
p{
font-size: 44px;
}
6
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Quiero ser una fuente de TAMAO 44!</p>

</body>
</html>
7
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Quiero ser una fuente de TAMAO 44!</p>

</body>
</html>
7
p{
color:green;
}
8
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Ests a punto de darle estilo a este prrafo con CSS por tu

cuenta!</p>
</body>
</html>
8
p{
font-family:Garamond;
color:blue;
font-size: 24px;
}
9
<!DOCTYPE html>
<html>
<head>
<title>Ya s Kung Fu (es decir, CSS)</title>
</head>
<body>
<div>
<h3>Para qu sirve CSS?</h3>
<p>CSS sirve para darle estilo a las pginas de HTML!</p>
<h3>Por qu usarlo?</h3>
<p>Porque hace que las pginas web luzcan <span>realmente
estupendas</span>.</p>
<h3>Que cmo me parece?</h3>

<p>Me parece genial!</p>
</div>
</body>
</html>
9
/*Puedes hacerlo! Escribe tu CSS a continuacin.*/
H3 {
color:red;
}
p{
font-family:Courier;
}
span{
background-color:yellow;
}
10
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3>Proyectos recientes</h3>
<p>Comenc a aprender HTML y CSS. Espero crear pronto mi propio
sitio web!</p>
</body>
</html>
10
h3 {
color: blue;
}
p{
font-family: Garamond;
font-size: 16px;
}
11
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<p>Actualmente mi color es rojo, pero est a punto de cambiar a
negro!</p>
</body>
</html>
11
/*p {
color:red;
}*/
12
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<h1>Cmbiame a Verdana.</h1>
<h3>Cmbiame a Courier.</h3>
<p>Hazme prpura!</p>
</body>
</html>
12
h1{
font-family:Verdana;
}
h3{
}
p{
color:purple;
}
/* maana que ya no este ju to a ti me morire*/
13
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Yo soy granate!</h1>
<h2>Yo soy coral!</h2>
<h3>Yo soy amarillo dorado!</h3>
<h4>Yo soy verde mar!</h4>
<h5>Yo soy azul real!</h5>
<h6>Yo soy ciruela!</h6>
</body>
</html>
13
h1 {
color: #8B1C62;
}
h2 {
color: #FF7256;
}
h3 {
color: #FFC125;
}
h4 {
color: #54FF9F;
}
h5 {
color: #530EE8;
}
h6 {
color: #8B668B;
}
14
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3>Las rosas son rojas.</h3>
<h2>Las violetas son azules!</h2>
</body>
</html>
14
h3 {
color:#cc6666;
/*Agrega tu color hex de CSS aqu!*/
}
h2 {
color:#8a2be2;
/*Agrega tu color hex de CSS aqu!*/
}
15
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="font-size: 1em">Un em!</p>
<p style="font-size: 0.5em">Medio em!</p>
<p style="font-size: 2em">DOS EM!</p>
</body>
</html>
16
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Cuando sea grande voy a ser una fuente serif!</h1>
<h2>Yo voy a ser una fuente sans-serif.</h2>
<h3>Yo voy a ser cursive!</h3>
</body>
</html>
16
/*Agrega tu CSS a continuacin!*/
h1{
font-family: serif;
}
h2{
font-family:sans-serif;
}
h3{
font-family:cursive;
}
17
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Cuando sea grande voy a ser una fuente serif!</h1>
<h2>Yo voy a ser una fuente sans-serif.</h2>
<h3>Yo voy a ser cursive!</h3>
</body>
</html>
17
h1{
font-family: Times, serif;
}
h2{
font-family: Verdana, sans-serif;
h3{
font-family: Vivaldi, cursive;
}
18
<!DOCTYPE html>
<html>
<head>
<title>Improvisacin!</title>
</head>
<body>

</body>
</html>
18
/*Escribe tu CSS a continuacin!*/
19
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color: #cc0000; height: 100px; width:
100px"></div>
</body>
</html>
19
20
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table>
<thead>
<th colspan="3">Nueve bloques!</th>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
20
td{
height: 54px;
border: 1px dashed blue;

}
table{
border:1px solid black
}
21
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>El siguiente enlace lleva hacia Google!</p>
<a href="http://www.google.com/">Google</a>
</body>
</html>
21
a{
color:#cc0000;
text-decoration: none;
}
22
<!DOCTYPE html>
<html>
<head>
</head>
<body></body>
</html>
23
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>solo se que no se nadaz</h1>
<p>pero estoy loco</p>
</body>
</html>
23
h1{
color:#576D94;
}
p{
font-size:18px;
color:#4A4943;
}
24
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
24
h1{
font-family:Verdana, sans-serif;
color:#576D94;
}
p{
font-family:Garamond, serif;
font-size:18px;
color:#4A4943;
}
25
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<img src="https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-xfp1/t1.09/10550910_706010376121476_3433619572880389790_n.jpg"/>
</body>
</html>
25
h1{
color:#576D94;
}
p{
font-size:18px;
color:#4A4943;
}
img{
border:1px solid #4682b4;
height:100px;
width:300px;
}
26
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<img src="https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-xfp1/t1.09/10550910_706010376121476_3433619572880389790_n.jpg"/>
<a href="http/www.facebook.com">hola</a>
</body>
</html>
26
h1{
color:#576D94;
}
p{
font-size:18px;
color:#4A4943;
}
img{
border:1px solid #4682b4;
height:100px;
width:300px;
}
a{
color:cc0000;
}
Disea un botn para tu pgina web

1
<!DOCTYPE html>
<html>
<head>
<title>Acerca de m</title>
</head>
<body>
<img src="http://bit.ly/NnVbxt"/>
<p>Somos Codecademy! Estamos aqu para ayudarte a aprender a
escribir cdigo.</p><br/><br/>
<div>
<a href="https://www.facebook.com/codecademy">Hazte amigo
de nosotros en <span>Facebook!</span></a>
</div>
</body>
</html>
1
img {
display: block;
height: 100px;
width: 300px;
margin: auto;
p{
text-align: center;
font-family: Garamond, serif;
font-size: 18px;
}
div {
border-radius: 5px;
border: 2px solid #6495ED;
background-color: #BCD2EE;
height: 60px;
width: 150px;
margin: auto;
text-align: center;
}
a{
color: #3D59AB;
}
span {
font-weight: bold;
font-size: 18px;
color: #ffffff;
}
2
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
</div>
</body>
</html>
2
img {
display: block;
height: 100px;
width: 300px;
margin: auto;
}
p{
text-align: center;
font-size: 18px;
}
div{
height: 50px;
width: 120px;
border: solid;
color: #6495ED;
}
/*Comienza a agregar tu CSS a continuacin!*/
3
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
</div>
</body>
</html>
3
img {
display: block;
height: 100px;
width: 300px;
margin: auto;
}
p{
text-align: center;
font-size: 18px;
}
div{
height: 50px;
width: 120px;
border: solid;
color: #6495ED;
border-radius:5px;
}

4
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
</div>
</body>
</html>
4
img {
display: block;
height: 100px;
width: 300px;
margin: auto;
}
p{
text-align: center;
font-size: 18px;
}
div{
height: 50px;
width: 120px;
border: solid;
color: #6495ED;
border-radius:5px;
text-align:center;
}
5
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<a href="http//:google.com.mx">love</a>
</div>
</body>
</html>
5
img {
display: block;
height: 100px;
width: 300px;
margin: auto;
}
p{
text-align: center;
font-size: 18px;
}
div{
height: 50px;
width: 120px;
border: solid;
color: #6495ED;
border-radius:5px;
text-align:center;
}
a{
text-decoration:none;
}
6
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div>
<a href="http//:google.com.mx">love</a>
</div>
</body>
</html>
6
img {
display: block;
height: 100px;
width: 300px;
margin: auto;
}
p{
text-align: center;
font-size: 18px;
}
div{
height: 50px;
width: 120px;
border: solid;
color: #6495ED;
border-radius:5px;
text-align:center;
}
a{
text-decoration:none;
}
Selectores de
CSS
1
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body></body>
</html>
1
body {
background-color:#C6E2FF;
}
2
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<h3>Soy una simple fuente antigua!</h3>
<div>
<h3>Y yo tambin!</h3>
<div>
<h3>Conmigo somos tres!</h3>
<div>
<h3>Olvdenlo, chicos. Estoy a punto de ser
roja!</h3>
</div>
</div>
</div>
</body>
</html>
2
div div div h3{
color:red;
}
3
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3>Cajas dentro de cajas!</h3>
<div>
<p>Prrafo uno</p>
</div>
<div>
<p>Prrafo dos</p>
</div>
<div>
<p>Prrafo tres</p>
</div>
</body>
</html>
3
*{
border:1px dashed blue;
}
4
<!DOCTYPE html>
<html>
<head>
<title>Presume tu trabajo!</title>
</head>
<body>
<p>Estoy a punto de tener un adorable color verde azulado.</p>
<p>Yo tambin!</p>
<p>Yo creo que voy a hacer lo mismo.</p>
<div>
<p>Vamos a tener un llamativo color escarlata!</p>
<p>Estaba pensando ms en un color bermelln.</p>
<p>No, color carmes!</p>
</div>
</body>
</html>
4
p{
color:#00E5EE;
}
div p{
color:#CC0000;
}
*{
border:dashed #3A5FCD;
}
5
<!DOCTYPE html>
<html>
<head>
<title>El gran rbol de HTML</title>
</head>
<body>
<div id="p1">P</div>
<div class="space"></div>
<div id="title">Title</div>
<div id="div">Div</div>
<div id="head">Head</div>
<div id="body">Body</div>
<div id="html">HTML</div>
</body>
</html>
5
div {
border-radius: 5px;
border: 2px solid #6495ED;
height: 18px;
text-align: center;
}
#p1 {
display: inline;
position: relative;
margin-left: 138px;
}
#p2 {
display: inline;
position: relative;
margin-left: 10px;
}
#p3 {
display: inline;
position: relative;
margin-left: 10px;
}
#div {
display: inline;
position: relative;
margin-left: 70px;
margin-top: 10px;
}
#title {
display: inline;
position: relative;
margin-left: 50px;
}
#body {
display: inline;
position: relative;
margin-left: 25px;
}
#head {
display: inline;
position: relative;
margin-left: 65px;
}
#html {
width: 50px;
position: relative;
margin-left: 93px;
}
.space {
opacity: 0;
}
6
<!DOCTYPE html>
<html> 

<head> 
<title></title> 
</head>
<body> 
<p></p> 
</body>
</html>
7
<!DOCTYPE html>
<html>
<head>
<title>Festival de enlaces</title>
</head>
<body>
<a href="http://www.codecademy.com/">Codecademy!</a>
<ul>
<li>
<a
href="http://www.codecademy.com/learn">Aprender</a>
</li>
<li>
<a
href="http://www.codecademy.com/create/creator">Ensear</a>
</li>
<li>
<a
href="http://www.codecademy.com/edit_account/basic_info">Configuracin</a>
</li>
</ul>
</body>
</html>
7
li a{
font-family: cursive;
}
8
<!DOCTYPE html>
<html>
<head>

<title>Reto textual mximo</title>
</head>
<body>
<p>Introduccin: efecto en cascada con CSS</p>
<div>
<p>Sumario: cuando estableces una propiedad de un selector
como 'p' con un cierto valor, ese valor se aplica a <em>todas</em> las etiquetas p.
Sin embargo, si cambias esa misma propiedad a un valor
diferente para una instancia de p ms especfica,
ese cambio <em>prevalecer</em> sobre la 'regla general'.
</p>
<ul>
<li><p>Si dices: p { font-family: Garamond}, todas las 'p'
tendrn fuente Garamond.</p></li>
<li><p>PERO si dices li p {font-family: Verdana}, las 'p'
fuera de las 'li' tendrn
fuente Garamond, y las 'p' DENTRO de las 'li'
tendrn fuente Verdana.
</p></li>
<li><p>Entre ms especficos sean tus selectores, CSS le
dar mayor importancia al estilo que apliques!</p></li>
</ul>
</div>
<p>Resumen: mayor especificidad hace que CSS le d prioridad a ese
estilo particular.</p>
</body>
</html>
8
p{
font-family: Garamond;
color:#7AC5CD;
}
p{
font-weight: bold;
}
div ul p {
color:#000000;
text-decoration:underline;
}
9
<!DOCTYPE html>
<html>
<head>

<title>Reto textual mximo</title>
</head>
<body>
<p id="intro">Efecto cascada con CSS</p>
<div>
<p>Cuando estableces una propiedad de un selector como 'p' con
un cierto valor, ese valor se aplica a <em>todas</em> las etiquetas p.
Sin embargo, si cambias esa misma propiedad a un valor
diferente para una instancia de p ms especfica,
ese cambio <em>prevalecer</em> sobre la 'regla general'.
</p>
<ul>
<li><p>Si dices: p { font-family: Garamond}, todas las 'p'
tendrn fuente Garamond.</p></li>
<li><p class="list_item">PERO si dices li p {font-family:
Verdana}, las 'p' fuera de las 'li' tendrn
fuente Garamond, y las 'p' DENTRO de las 'li'
tendrn fuente Verdana.
</p></li>
<li><p class="list_item">Entre ms especficos sean tus
selectores, CSS le dar mayor importancia al estilo que apliques!</p></li>
</ul>
</div>
<p id="summary">Mayor especificidad hace que CSS le d prioridad a
ese estilo particular.</p>
</body>
</html>
9
p{
}
#intro {
font-weight: bold;
color: #000000;
}
div p {
color: #7AC5CD;
}
li p {
color: #000000;
}
.list_item {
font-family: Vivaldi, cursive;
}
#summary {
font-size: 20px;
color: #000000;
}
10
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3 class="red">Soy un encabezado h3 que tiene clase rojo!</h3>
<h3>Yo soy un simple encabezado h3 viejo.</h3>
<p class="red">Soy un prrafo que tiene clase rojo!</p>
<p>Soy un simple prrafo viejo.</p>
<p id="rogue">Soy un prrafo rebelde! Hago lo que quiero!</p>
</body>
</html>
10
.red {
color: red;
}
#rogue {
color: #FF00FF;
font-weight: bold;
font-family: cursive;
}
/*
11
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<td class="elegante"></td>
<div class="ELEGANTE"></div>
<img class="ELEGANTE"/>
</body>
</html>
11
.elegante{
color:#0000CD;
}
/*Define tu clase de CSS .elegante a continuacin!*/
12
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div id="serio"></div>
<div id="serio"></div>
<p id="serio"></p>
</body>
</html>
12
#serio{
font-family: Courier;
color:#CC0000;
}
/*Define tu identificador de CSS #serio a continuacin!*/
13
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2 id="intro">Introduccin</h2>
<h3 class="destacado">Clases e identificadores en CSS</h3>
<p class="destacado">Las clases e identificadores en CSS son sper
fciles. En este momento las ests usando!</p>
<h3>Selectores regulares de HTML</h3>
<p>Si no usas una clase o un identificador, un elemento de HTML
simplemente tendr
el estilo regular de CSS para ese elemento, o el estilo predeterminado,
si no especificas ninguno en particular en la hoja de estilos.
</p>
</body>
</html>
13
h2 {
color:#B83C3A;
}
.destacado{
color:#F7AC5F;
}
14
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li><a href="http://www.codecademy.com/">Pgina de inicio de
Codecademy</a></li>
<li><a href="http://www.codecademy.com/learn">Aprender</a></li>
<li><a
href="http://www.codecademy.com/create/creator">Ensear</a></li>
<li><a
href="http://www.codecademy.com/edit_account/basic_info">Configuracin</a></li>
</ul>
</body>
</html>
14
a:hover {
color: #cc0000;
font-weight: bold;
}
15
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
<a href="https://www.facebook.com/">holi</a>
<a href="https://www.facebook.com/">la hice mal</a>
<a href="https://www.facebook.com/">no me
consentre</a>
</div>
</body>
</html>
15
a:link{
color: #008B45;
16
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
<p>Yo soy el primer hijo!</p>
<p>Nosotros no.</p>
<p>Nosotros no.</p>
<p>Nosotros no.</p>
<p>Nosotros no.</p>
<p>Nosotros no.</p>
<p>Nosotros no.</p>
</div>
</body>
</html>
16

P:first-child{
}
17
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
<p>Yo soy el primer hijo!</p>
<p>Nosotros no.</p>
<p>Nosotros no.</p>
<p>Nosotros no.</p>
<p>Nosotros no.</p>
<p>Nosotros no.</p>
<p>Nosotros no.</p>
</div>
</body>
</html>
17
P:first-child{
}
p:nth-child(2) {
font-family:Tahoma;
}
p:nth-child(3) {
color:#CC0000;
}
p:nth-child(4) {
background:#00FF00;
}
p:nth-child(5) {
FONT-SIZE:22PX;
}
18
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<A HREF="https://www.google.com"> netacad</A>
<A HREF="https://www.netacad.com/"> google</A>
<A HREF="http://cramac.com.mx/"> cramac</A>

</body>
</html>
18
.a{
}

19
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body></body>
</html>
20
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
<ul>
<li><p style="font-size:30px">Cmbiame!</p></li>
<li><p style="font-size:30px">A m tambin!</p></li>
</ul>
</div>
<p>A m no me cambies!</p>
</body>
</html>
20
21
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3 class="elegante">maana es viernes</h3>
<p class="elegante">a pistear</p>
</body>
</html>
21
.elegante{
color:violet;
}
22
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="serio">gagagagagagagagagagaga</p>
</body>
</html>
22
.elegante{
color:violet;
}
p{
color:#8C8C8C
}
23
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="serio">gagagagagagagagagagaga</p>
<p>tengo mucha tarea</p>
</body>
</html>
23
.elegante{
color:violet;
}
p{
color:#8C8C8C
}
body:nth-child(4) {
font-size:26px;
}
Clasificando a tus amigos

1
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="amigo" id="mejor_amigo"><p>Arthur</p></div>

<div class="amigo"><p>Batmanuel</p></div>
<div class="amigo"><p>Capitn Liberty</p></div>
<div class="amigo"><p>The City</p></div>
<div class="amigo"><p>Justice</p></div>
<div class="familia"><p>Mam</p></div>
<div class="familia"><p>Pap</p></div>
<div class="familia"><p>Mano</p></div>
<div class="familia"><p>Mana</p></div>
<div class="familia"><p>Rex</p></div>
<div class="enemigo"><p>Barn Violento</p></div>
<div class="enemigo"><p>El Panmaestro</p></div>
<div class="enemigo"><p>La Nariz Mortal</p></div>
<div class="enemigo"><p>Dinosaurio Neil</p></div>
<div class="enemigo" id="archienemigo"><p>Caradesilla</p></div>
</body>
</html>
1
div {
position: relative;
display: inline-block;
height: 100px;
width: 100px;
border-radius: 100%;
border: 2px solid black;

margin-left: 5px;
margin-top: 5px;
text-align: center;
}
div p {
position: relative;
margin-top: 40px;
font-size: 12px;
}
.amigo {
border: 2px dashed green;
}
.familia {
}
.enemigo {
border: 2px dashed red;
}
#mejor_amigo {
border: 4px solid #00C957;
}
#archienemigo {
border: 4px solid #cc0000;
}
2
<!DOCTYPE html>
<html>
<head>
<title>Mi red social</title>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
2
div {
margin-left: 5px;
}
3
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
3
div {
margin-left: 5px;
width:100px;
height:100px;
border-radius:100%;
}
4
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="familia"></div>
<div class="amigo"></div>
<div class="enemigo"></div>
</body>
</html>
4
div {
margin-left: 5px;
width:100px;
height:100px;
border-radius:100%;
}
5
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="amigo"></div>
<div class="enemigo"></div>
</body>
</html>
5
div {
margin-left: 5px;
width:100px;
height:100px;
border-radius:100%;
}
.amigo{
border:2px dashed #008000;
}
.familia{
border:2px dashed #0000FF;
}
.enemigo{
border:2px dashed #FF0000;
}
6
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<div class="amigo" id="mejor_amigo"></div>
<div class="enemigo" id="archienemigo"></div>
</body>
</html>
6
div {
margin-left: 5px;
width:100px;
height:100px;
border-radius:100%;
}
.amigo{
.familia{
}
.enemigo{
}
7
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
7
div {
margin-left: 5px;
width:100px;
height:100px;
border-radius:100%;
}
.amigo{
}
.familia{
}
.enemigo{
}
#mejor_amigo{
border: 4px solid;
color:#00C957;
}
#archienemigo{
border: 4px solid #CC0000;
}
8
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
8
div {
margin-left: 5px;
width:100px;
height:100px;
border-radius:100%;
.amigo{
}
.familia{
}
.enemigo{
}
#mejor_amigo{
border: 4px solid;
color:#00C957;
}
#archienemigo{
border: 4px solid #CC0000;
}
Posicionamiento de CSS
1
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3>El modelo de caja</h3>
<img src="http://bit.ly/OoKWYd"/>
<p>Imagen cortesa de www.w3.org!</p>
</body>
</html>
1
*{
border: 1px dashed;
color:#0000FF;
}
2
2
*{
}
div {
height: 50px;
width: 100px;
border-radius: 5px;
display:block;
#uno {
background-color: #FF0000;
}
#dos {
background-color: #0000FF;
}
#tres {
background-color: #FFD700;
}
#cuatro {
background-color: #308014;
}
3
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="uno"></div>
<div id="dos"></div>
<div id="tres"></div>
<div id="cuatro"></div>
</body>
</html>
3
*{
}
div {
height: 50px;
width: 100px;
border-radius: 5px;
display:inline-block;
#uno {
}
#dos {
}
#tres {
}
#cuatro {
}
4
<!DOCTYPE html>
<html>
<head>

</head>
<body>
</body>
</html>
4
*{
}
div {
height: 50px;
width: 100px;
border-radius: 5px;
display:inline;
#uno {
}
#dos {
}
#tres {
}
#cuatro {
}
5
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
5
*{
}
div {
height: 50px;
width: 100px;
border-radius: 5px;
display:none;
#uno {
}
#dos {
}
#tres {
}
#cuatro {
}
6
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<h3>El modelo de caja</h3>
<img src="http://bit.ly/OoKWYd"/>
<p>Imagen cortesa de www.w3.org!</p>
</body>
</html>
7
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div></div>
</body>
</html>
7
*{
border: 1px dashed black;
}
div {
height: 50px;
width: 100px;
border-radius: 5px;
margin: auto;
}
8
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div></div>
</body>
</html>
8
*{
}
div {
height: 50px;
width: 100px;
border-radius: 5px;
margin:20px;
margin-right:50px;
margin-bottom:10px;
margin-left: 5px;
}
9
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div></div>
</body>
</html>
9
*{
}
div {
height: 50px;
width: 100px;
border: 4px solid #FF0000;
border-radius: 5px;
margin:20px;
margin-right:50px;
margin-bottom:10px;
margin-left: 5px;
border:height line solid 4px;
}
10
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div></div>
</body>
</html>
10
*{
}
div {
height: 50px;
width: 100px;
border-radius: 5px;
margin:20px;
margin-right:50px;
margin-bottom:10px;
margin-left: 5px;
padding: 40px
11
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div></div>
</body>
</html>
11
*{
}
div {
height: 50px;
width: 100px;
border-radius: 5px;
margin:20px;
margin-right:50px;
margin-bottom:10px;
margin-left: 5px;
padding: 40px;
margin-top:-20px;
}
12
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>papapapapapaaapapapa</div>
</body>
</html>
12
div {
margin-top: 10px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 50px;
background-color: #CC0000;
height: 50px;
width: 100px;
padding-top: 0px;
padding-right: 30px;
padding-left: 10px;
}
13
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div></div>
</body>
</html>
13
div {
height: 300px;
width: 100px;
border-radius: 5px;
}
14
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div></div>
</body>
</html>
14
div {
height: 300px;
width: 100px;
border-radius: 5px;
float:left;
}
15
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div></div>
<p>Fjate en esto! Soy un bloque de texto, pero <div> y yo podemos
vivir en armona. Barcos en un mar, viejo. Barcos en un mar.</p>
</body>
</html>
15
div {
height: 300px;
width: 300px;
border-radius: 5px;
float:right;
}
p{
font-size: 20px;
width: 280px;
float:left;
}
16
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="header"></div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
16
div {
border-radius: 5px;
clear:both;
}
#header {
height: 50px;
background-color: #F38630;
margin-bottom: 10px;
}
.left {
height: 300px;
width: 150px;
background-color: #A7DBD8;
float: left;
}
.right {
height: 300px;
width: 450px;
background-color: #E0E4CC;
float: right;
}
#footer {
height: 50px;
background-color: #69D2E7;
}
17
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="exterior"><div id="interior"></div></div>
</body>
</html>
17
div {
border-radius: 5px;
}
#interior {
height: 75px;
width: 75px;
#exterior{
height: 500px;
width: 150px;
background-color: #45ADA8;
position: absolute;
margin-left: 100px;
}
18
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
18
div {
border-radius: 5px;
}
#interior {
height: 75px;
width: 75px;
position: absolute;
margin-left: 20px;
#exterior{
height: 500px;
width: 150px;
position: absolute;
margin-left: 100px;
}
19
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
19
div {
border-radius: 5px;
}
#interior {
height: 75px;
width: 75px;
position: relative;
margin-left: 200px;
#exterior{
height: 500px;
width: 150px;
position: absolute;
margin-left: 100px;
}
20
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
20
div {
border-radius: 5px;
}
#interior {
height: 75px;
width: 75px;
position: fixed;
margin-left: 200px;
#exterior{
height: 500px;
width: 150px;
position: absolute;
margin-left: 100px;
}
21
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body></body>
</html>
22
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="header">
<div id="navbar">
<ul>
<li>Inicio</li>
<li>Contacto</li>
</ul>
</div>
</div>
<div id="izquierda">
</div>
<div id="derecha">
<table>
<tr>
<td><img
src="http://thedoggiedish.com/uploads/pictures/1344463888_Puppies%20Training.jpg"/>
</td>
<td><img
src="http://www.humanesociety.org/assets/images/270x224/animals/dogs/dog_puppy_l
ookinup_270x224.jpg"/></td>
</tr>
<tr>
<td><img
src="http://2.bp.blogspot.com/_jZHHRfnq9F8/Sw5Kb1D2EhI/AAAAAAAAKkE/fuaDErPNDv
U/s1600/Puppy+Training.jpg"/></td>
</tr>
<tr>
<td><img
</tr>
</table>
</div>
<div id="footer">
<div id="button">
</div>
</div>
</body>
</html>
22
body {
}
h2 {
font-weight: bold;
text-align: center;
padding-top: 25px;
color: #acd1b2;
}
img {
height: 170px;
width: 170px;
#navbar {
position:fixed;
left:50%;
margin-top:-10px;
}
#header {
position: relative;
top: -10px;
}
ul{
position: fixed;
margin: -10px;
}
li {

color: #ffffff;
border-radius: 5px 5px;
background-color: #cc0323
}
#izquierda{
p{
font-size: 1em;
}
#derecha{
/*'Agrega tu CSS aqu!*/
table {
float: right;
margin-right: 10px;
}
td {
height: 75px;
width: 75px;
}
td img {
height: 75px;
width: 75px;
box-shadow: none;
}
th {
font-size: 1em;
color: #3c4543
}
#bottom_left{
}
#bottom_right{
}
#footer{
position: relative;
bottom: -20px;
height: 75px;
}
#button{
float:left;
position: relative;
left: 229px;
bottom: -20px;
border-radius: 5px;
height: 30px;
width: 150px;
#button p{
position: relative;
bottom: 10px;
font-size: 0.8em;
color: #acd1b2;
text-align: center;
}
.bold{
font-weight: bold;
font-size: 1.2em;
color: #ffffff;
}
23
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="header">
<div id="navbar">
<ul>
<li>Inicio</li>
<li>Contacto</li>
</ul>
</div>
</div>

</div>
<div id="derecha">
<table>
<tr>
<td><img
</td>
<td><img
</tr>
<tr>
<td><img
</tr>
<tr>
<td><img
</tr>
</table>
</div>
<div id="footer">
<div id="button">
</div>
</div>
</body>
</html>
23
body {
}
h2 {
font-weight: bold;
text-align: center;
padding-top: 25px;
color: #acd1b2;
}
img {
height: 170px;
width: 170px;
#navbar {
position:fixed;
left:50%;
margin-top:-10px;
}
#header {
position: relative;
top: -10px;
}
ul{
position: fixed;
margin: -10px;
li {

color: #ffffff;
border-radius: 5px 5px ;
display:inline;
padding:5px;
position:right;
#izquierda{
p{
font-size: 1em;
}
#derecha{
table {
float: right;
margin-right: 10px;
}
td {
height: 75px;
width: 75px;
}
td img {
height: 75px;
width: 75px;
box-shadow: none;
}
th {
font-size: 1em;
color: #3c4543
}
#bottom_left{
}
#bottom_right{
#footer{
position: relative;
bottom: -20px;
height: 75px;
}
#button{
float:left;
position: relative;
left: 229px;
bottom: -20px;
border-radius: 5px;
height: 30px;
width: 150px;
#button p{
position: relative;
bottom: 10px;
font-size: 0.8em;
color: #acd1b2;
text-align: center;
}
.bold{
font-weight: bold;
font-size: 1.2em;
color: #ffffff;
}
24
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="header">
<div id="navbar">
<ul>
<li>Inicio</li>
<li>Contacto</li>
</ul>
</div>
</div>
</div>
<div id="derecha">
<table>
<tr>
<td><img
</td>
<td><img
</tr>
<tr>
<td><img
</tr>
<tr>
<td><img
</tr>
</table>
</div>
<div id="footer">
<div id="button">

</div>
</div>
</body>
</html>
24
body {
}
h2 {
font-weight: bold;
text-align: center;
padding-top: 25px;
color: #acd1b2;
}
img {
height: 170px;
width: 170px;
#navbar {
position:fixed;
left:50%;
margin-top:-10px;
}
#header {
position: relative;
top: -10px;
}
ul{
position: fixed;
margin: -10px;
li {

color: #ffffff;
display:inline;
padding:5px;
position:right;
#izquierda{
float:left;
width:45%;
p{
font-size: 1em;
}
#derecha{
float:right;
width:45%;
table {
float: right;
margin-right: 10px;
}
td {
height: 75px;
width: 75px;
}
td img {
height: 75px;
width: 75px;
box-shadow: none;
}
th {
font-size: 1em;
color: #3c4543
}
#bottom_left{
}
#bottom_right{
}
#footer{
clear:both;
position: relative;
bottom: -20px;
height: 75px;
}
#button{
float:left;
position: relative;
left: 229px;
bottom: -20px;
border-radius: 5px;
height: 30px;
width: 150px;
#button p{
position: relative;
bottom: 10px;
font-size: 0.8em;
color: #acd1b2;
text-align: center;
}
.bold{
font-weight: bold;
font-size: 1.2em;
color: #ffffff;
}
25
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="header">
<div id="navbar">
<ul>
<li>Inicio</li>
<li>Contacto</li>
</ul>
</div>
</div>
</div>
<div id="derecha">
<table>
<tr>
<td><img
</td>
<td><img
</tr>
<tr>
<td><img
</tr>
<tr>
<td><img
</tr>
</table>
</div>
<div id="footer">
<div id="button">

</div>
</div>
</body>
</html>
25
body {
}
h2 {
font-weight: bold;
text-align: center;
padding-top: 25px;
color: #acd1b2;
}
img {
height: 170px;
width: 170px;
#navbar {
position:fixed;
left:50%;
margin-top:-10px;
}
#header {
position: relative;
top: -10px;
}
ul{
position: fixed;
margin: -10px;
li {

color: #ffffff;
display:inline;
padding:5px;
position:right;
#izquierda{
float:left;
width:45%;
p{
font-size: 1em;
}
#derecha{
float:right;
width:45%;
table {
float: right;
margin-right: 10px;
}
td {
height: 75px;
width: 75px;
}
td img {
height: 75px;
width: 75px;
box-shadow: none;
}
th {
font-size: 1em;
color: #3c4543
}
#bottom_left{
}
#bottom_right{
}
#footer{
clear:both;
position: relative;
bottom: -20px;
height: 75px;
}
#button{
float:left;
position: relative;
left: 229px;
bottom: -20px;
border-radius: 5px;
height: 30px;
width: 150px;
#button p{
position: relative;
bottom: 10px;
font-size: 0.8em;
color: #acd1b2;
text-align: center;
}
.bold{
font-weight: bold;
font-size: 1.2em;
color: #ffffff;
}
Crea una hoja de vida

1
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="header">
<p id="name">Tu nombre va aqu</p>
<a href="mailto:t@tuemail.com"><p
id="email">t@tuemail.com</p></a>
</div>
<div class="left"></div>
<div class="right">
<h4>Objetivo</h4>
<p>Posicionarme como ingeniero de sistemas.</p>
<h4>Experiencia</h4>
<p>Desarrollador Junior, Empresa de Software (2010 - A la
fecha)</p>
<ul>
<li>Dise e implemente funcionalidades para usuarios
finales para Producto Lder</li>
<li>Escrib bibliotecas JavaScript y Ruby de terceros</li>
</ul>
<h4>Habilidades</h4>
<p>Lenguajes: C#, JavaScript, Python, Ruby</p>
<p>Frameworks: .NET, Node.js, Django, Ruby on Rails</p>
<h4>Estudios</h4>
<p>Licenciatura en Economa, Mi Universidad</p>
<ul>
<li>Premio al mejor trabajo de grado</li>
<li>Promedio Acadmico: 3.8</li>
</ul>
</div>
<div id="footer">
<p>123 Tu Direccin, Cualquier Pueblo, Ciudad 12345-6789 | Tel:
(555) 555-5555</p>
</div>
</body>
</html>
1
div {
border-radius: 5px;
}
#header {
z-index: 1;
position: fixed;
width: 97.5%;
margin-top: -20px;
height: 60px;
}
#name {
float:left;
margin-left: 5px;
padding-top: 5px;
font-size: 16px;
color: #ffffff;
}
#email{
float:right;
margin-right: 5px;
padding-top: 5px;
font-size: 16px;
color: #ffffff;
}
h4 {
margin-left: 5px;
}
.right p {
margin-left: 5px;
margin-right: 5px;
margin-top: -10px;
color: #000000;
}
li {
list-style-type: square;
}
a:hover {
font-weight: bold;
}
.left {
position: relative;
float: left;
margin-top: 50px;
width: 10%;
height: 400px;
background-color: #B9D7D9;
}
.right {
position: relative;
float: right;
margin-top: 50px;
width: 88%;
height: 400px;
background-color: #F4EBC3;
}
#footer {
position: relative;
height: 50px;
clear: both;
font-size: 14px;
text-align: center;
color: #ffffff;
}
#footer p {
position: relative;
padding-top: 15px;
}
2
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="encabezado"> </div>
<div class="izquierda"></div>
<div class="derecha"></div>
<div id="pie"></div>
</body>
</html>
2
div{
border-radius:5px;
}
3
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
3
div{
border-radius:5px;
width:55;
height:65;
color:red;
}
4
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
4
div{
border-radius:5px;
width:55;
height:65;
color:red;
}
#encabezado{
position:fixed;
z-index :1;
5
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
5
div{
border-radius:5px;
width:55;
height:65;
color:red;
}
#encabezado{
position:fixed;
z-index :1;
}
.izquierda{
float:left;
}
.derecha{
float:right;
}
6
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
6
div{
border-radius:5px;
width:55;
height:65;
color:red;
}
#encabezado{
position:fixed;
z-index :1;
}
.izquierda{
float:left;
}
.derecha{
float:right;
}
#pie{
clear:both;
}
7
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>maana es sabado</h2>
<p>me amo</p>
<ul>
<li>maana</li>
<li>hoy</li>
</ul>
</body>
</html>
7
div{
border-radius:5px;
width:55;
height:65;
color:red;
}
#encabezado{
position:fixed;
z-index :1;
}
.izquierda{
float:left;
}
.derecha{
float:right;
}
#pie{
clear:both;
}
h2 {
Font-size:24px;
Text-align:center;
text-decoration:underline;
}
8

Conceptos Básicos de HTML II

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Conceptos Básicos de HTML II

Cargado por

Copyright:

Formatos disponibles

CONCEPTOS BSICOS DE HTML II

<h2>cosas que puedo hacer para el dia de las madres</h2>

<h1>Algunos pensamientos al azar</h1>

<p>Pero haz que el usuario me pueda ver!</p>

Perfil de redes sociales

<li type="circle">Esto es un tipo de punto.</li>

<li type="square">Este es otro.</li>

<li type="disc">Y este es otro diferente.</li>

<LI> Primera voz del men

<li type="circle">Esto es un tipo de punto.</li>

<li type="square">Este es otro.</li>

<li type="disc">Y este es otro diferente.</li>

<li type="circle">Esto es un tipo de punto.</li>

<li type="square">Este es otro.</li>

<li type="disc">Y este es otro diferente.</li>

<li type="circle">Esto es un tipo de punto.</li>

<li type="square">Este es otro.</li>

<li type="disc">Y este es otro diferente.</li>

Conceptos bsicos de HTML III

<th style="color:red;"colspan="2">Tipos famosos por ao de

<th style="padding:5px;"><em>Tipo famoso</em></th>

<th style="color:red;"colspan="2">Tipos famosos por ao de

Pgina de fotos interactivas

<title>Mi pgina de fotos</title>

<title>Mi pgina de fotos</title>

<link type="text/css" rel="stylesheet" href="stylesheet.css"></link>

<td><a href="http://www.youporn.com/"><img src="https://fbcdnsphotos-a-a.akamaihd.net/hphotos-ak-xaf1/t1.09/1939680_513339078774474_105760534_n.jpg"></img></a>

CSS: un vistazo general

border: 2px solid #000000;

border: 2px solid #000000;

<p>Quiero ser una fuente de TAMAO 44!</p>

<p>Quiero ser una fuente de TAMAO 44!</p>

<p>Ests a punto de darle estilo a este prrafo con CSS por tu

<h3>Que cmo me parece?</h3>

<link type="text/css" rel="stylesheet" href="stylesheet.css"/>

border: 1px dashed blue;

<p>pero estoy loco</p>

<p>pero estoy loco</p>

<p>pero estoy loco</p>

<p>pero estoy loco</p>

Disea un botn para tu pgina web

/*Comienza a agregar tu CSS a continuacin!*/

/*Comienza a agregar tu CSS a continuacin!*/

/*Comienza a agregar tu CSS a continuacin!*/

/*Comienza a agregar tu CSS a continuacin!*/

<p>Somos Codecademy! Estamos aqu para ayudarte a aprender a

/*Comienza a agregar tu CSS a continuacin!*/

<link type="text/css" rel="stylesheet" href="stylesheet.css"/>

<html>

<link type="text/css" rel="stylesheet" href="stylesheet.css"/>

<link type="text/css" rel="stylesheet" href="stylesheet.css"/>

/*Define tu clase de CSS .elegante a continuacin!*/

/*Define tu identificador de CSS #serio a continuacin!*/

/*Agrega tu CSS a continuacin!*/

/*Agrega tu CSS a continuacin!*/

/*Agrega tu CSS a continuacin!*/

Clasificando a tus amigos

<div class="amigo" id="mejor_amigo"><p>Arthur</p></div>

border: 2px solid black;

<title>Mi red social</title>

<link type="text/css" rel="stylesheet" href="stylesheet.css"/>

<link type="text/css" rel="stylesheet" href="stylesheet.css"/>

/*Agrega tu CSS a continuacin!*/

/*Agrega tu CSS aqu!*/

/Comienza a agregar tu CSS a continuacin!/

/Comienza a agregar tu CSS a continuacin!/

/Comienza a agregar tu CSS a continuacin!/

/Comienza a agregar tu CSS a continuacin!/

/Comienza a agregar tu CSS a continuacin!/

/Define tu clase de CSS .elegante a continuacin!/

/Define tu identificador de CSS #serio a continuacin!/

/Agrega tu CSS a continuacin!/

/Agrega tu CSS a continuacin!/

/Agrega tu CSS a continuacin!/

/Agrega tu CSS a continuacin!/

/Agrega tu CSS aqu!/

/Agrega tu CSS aqu!/

/Agrega tu CSS aqu!/

/'Agrega tu CSS aqu!/

/Agrega tu CSS aqu!/

/'Agrega tu CSS aqu!/