Sie sind auf Seite 1von 9

Css #titulo{color: teal; } strong{color:red; text-decoration: bold; } span.destacado{color: orange; } #subtitulo{color: blue;} a{color: red; } em.a{color: blue; } span.

especial{color: purple; } table{border: 1px solid black;} caption{color: blue; border: none;} .especial{color: orange; } td{color: green;border: 1px solid black; } html <!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" /> <link rel="StyleSheet" type="text/css" href="2.css" /> <title>Ejercicio de selectores</title> </head> <body> <h1 id="titulo">Lorem ipsum dolor sit amet</h1> <p>Nulla pretium. Sed tempus nunc vitae neque. <strong>Suspendisse gravida</strong>, metus a scelerisque sollicitudin, lacus velit ultricies nisl, nonummy tempus neque diam quis felis. <span class="destacado">Etiam sagittis tortor</span> sed arcu sagittis tristique.</p> <h2 id="subtitulo">Aliquam tincidunt, sem eget volutpat porta</h2> <p>Vivamus velit dui, placerat vel, feugiat in, ornare et, urna. <a href="#">Aenean turpis metus, <em>aliquam non</em>, tristique in</a>, pretium varius, sapien. Proin vitae nisi. Suspendisse <span class="especial">porttitor purus ac elit</span>. Suspendisse eleifend odio at dui. In in elit sed metus pretium elementum.</p>

<table summary="Descripcin de la tabla y su contenido"> <caption>Ttulo de la tabla</caption> <thead> <tr> <th scope="col"></th> <th scope="col" class="especial">Ttulo columna 1</th> <th scope="col" class="especial">Ttulo columna 2</th> </tr> </thead> <tfoot> <tr> <th scope="col"></th> <th scope="col">Ttulo columna 1</th> <th scope="col">Ttulo columna 2</th> </tr> </tfoot> <tbody> <tr> <th scope="row" class="especial">Ttulo fila 1</th> <td>Donec purus ipsum</td> <td>Curabitur <em>blandit</em></td> </tr> <tr> <th scope="row">Ttulo fila 2</th> <td>Donec <strong>purus ipsum</strong></td> <td>Curabitur blandit</td> </tr> </tbody> </table> <div id="adicional">

<p>Donec purus ipsum, posuere id, venenatis at, <span>placerat ac, lorem</span>. Curabitur blandit, eros sed gravida aliquet, risus justo porta lorem, ut mollis lectus tortor in orci. Pellentesque nec augue.</p> <p>Fusce nec felis eu diam pretium adipiscing. <span id="especial">Nunc elit elit, vehicula vulputate</span>, venenatis in, posuere id, lorem. Etiam sagittis, tellus in ultrices accumsan, diam nisi feugiat ante, eu congue magna mi non nisl.</p> <p>Vivamus ultrices aliquet augue. <a href="#">Donec arcu pede, pretium vitae</a>, rutrum aliquet, tincidunt blandit, pede. Aliquam in nisi. Suspendisse volutpat. Nulla facilisi. Ut ullamcorper nisi quis mi.</p> </div> </body> </html> Css interno <!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=iso-8859-1" /> <title>Ejercicio de selectores</title> <style type="text/css">

* { font: 1em/1.3 Arial, Helvetica, sans-serif; } p { color: #555; } #primero p { color: #336699; } a { color: #CC3300; } em#primero { background: #FFFFCC; padding: .1em; } em.especial { background: #FFCC99; border: 1px solid #FF9900; padding: .1em; } span.normal

{ font-weight: bold; } </style> </head> <body> <div id="primero"> <p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>. Praesent blandit nibh at felis. Sed nec diam in dolor vestibulum aliquet. Duis ullamcorper, nisi non facilisis molestie, <em>lorem sem aliquam nulla</em>, id lacinia velit mi vestibulum enim.</p> </div> <div class="normal"> <p>Phasellus eu velit sed lorem sodales egestas. Ut feugiat. <span><a href="#">Donec porttitor</a>, magna eu varius luctus,</span> metus massa tristique massa, in imperdiet est velit vel magna. Phasellus erat. Duis risus. <a href="#">Maecenas dictum</a>, nibh vitae pellentesque auctor, tellus velit consectetuer tellus, tempor pretium felis tellus at metus.</p> <p>Cum sociis natoque <em class="especial">penatibus et magnis</em> dis parturient montes, nascetur ridiculus mus. Proin aliquam convallis ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc aliquet. Sed eu metus. Duis justo.</p> <p>Donec facilisis blandit velit. Vestibulum nisi. Proin volutpat, <em class="especial">enim id iaculis congue</em>, orci justo ultrices tortor, <a href="#">quis lacinia eros libero in eros</a>. Sed malesuada dui vel quam. Integer at eros.</p> </div> </body> </html> Formulario <html> <head> <title>RELLENA TU CV</title> </head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <body> <h1>RELLENA TU CV</h1> <form> <fieldset>

<legend>Datos personales</legend> Ingrese Nombre: <input type="text" name="nombre" size="20"> <br> <br> Ingrese Apellidos: <input type="text" name="apellidos" size="60"> <br> <br> Ingrese su fecha de nacimiento: <input type="text" name="edad" size="2">de <select name="mes"> <optgroup label="mes"> <option value="1">enero</option> <option value="2">febrero</option> <option value="3">marzo</option> <option value="4">abril</option> <option value="5">mayo</option> <option value="6">junio</option> <option value="7">julio</option> <option value="8">agosto</option> <option value="9">septiembre</option> <option value="10">octubre</option> <option value="11">noviembre</option> <option value="12">diciembre</option> </optgroup>de <input type="text" name="edad" size="4"> <br> <br> Ingrese su contrasea: <input type="password" name="clave" size="12">

<br> <br> Ingrese su mail: <input type="text" name="mail" size="50"><br> <br> Ingrese DNI: <input type="text" name="DNI" size="10"> <br> <br> Provincia:

<select name="provincia"> <optgroup label="provincias"> <option value="1">valencia</option> <option value="2">castellon</option> <option value="3">alicante</option> <option value="5">ciudad real</option> <option value="6">cadiz</option> </optgroup> <br> <br> <br> <br> SEXO: <br> <input type="radio" name="masculino" value="1">Hombre<br> <input type="radio" name="femenino" value="2">Mujer<br> <br> <br> Incluir la foto:

<input type="file" name="foto"> <br> <br> <input type="hidden" value="10:20" name="hora"> <br> <input type="checkbox" name="safari">Suscribime al boletin de novedades: <br> <br> <br> Temas de interes (Presione Ctrl para seleccionar varios temas)<br><br> <select name="temas[]" size="4" multiple> <option value="1">bases de datos</option> <option value="2">programacion</option> <option value="3">informatica</option> <option value="4">ingles</option> <option value="5">lenguaje de marqas</option> <option value="6">entornos de desarollo</option> <option value="7">FOL</option> <option value="8">tutoria</option> </select> <br> <br> <br> <button type="submit">guardar cambios</button> <button type="reset">Borrar datos introducidos</button> </fieldset> </form> </body> </html>

Horario <html> <head> </head> <body> <br> <br> <table align="center"border="2"> <caption>HORARIO DE 1 DAW.</caption> <br> <br> <tr> <th bgcolor=SILVER align=center valign=middle> HORA </th><th bgcolor=SILVER align=center valign=middle> DILLUNS </th><th bgcolor=SILVER align=center valign=middle> DIMATS </th><th bgcolor=SILVER align=center valign=middle> DIMECRES </th><th bgcolor=SILVER align=center valign=middle> DIJOUS </th><th bgcolor=SILVER align=center valign=middle> DIVENDRES </th> </tr> <tr> <td bgcolor=SILVER align=center valign=middle> 15.35 - 16:25 </td><td bgcolor=LIME align=center valign=middle> SISTEMES INFORMATICS </td><td bgcolor=PURPLE align=center valign=middle> MARQUES </td><td></td><td bgcolor=YELLOW align=center valign=middle> ENTORNOS </td><td bgcolor=YELLOW align=center valign=middle> ENTORNOS </td> </tr> <tr> <td bgcolor=SILVER align=center valign=middle>16:25 - 17:15</td><td bgcolor=RED align=center valign=middle>ANGLES</td><td bgcolor=PURPLE align=center valign=middle>MARQUES</td><td></td><td bgcolor=RED align=center valign=middle>ANGLES</td><td bgcolor=YELLOW align=center valign=middle>ENTORNOS</td> </tr> <tr> <td bgcolor=SILVER align=center valign=middle>17:15 - 18:05</td><td bgcolor=FUCHSIA align=center valign=middle>PROGRAMACIO</td><td bgcolor=FUCHSIA align=center valign=middle>PROGRAMACIO</td><td bgcolor=PURPLE align=center valign=middle>MARQUES</td><td bgcolor=RED align=center valign=middle>ANGLES</td><td bgcolor=FUCHSIA align=center valign=middle>PROGRAMACIO</td> </tr> <tr> <td bgcolor=SILVER align=center valign=middle>18:20 - 19:10</td><td bgcolor=FUCHSIA align=center valign=middle>PROGRAMACIO</td><td bgcolor=FUCHSIA align=center valign=middle>PROGRAMACIO</td><TD bgcolor=AQUA align=center valign=middle>BASES DE DADES</TD><td bgcolor=FUCHSIA align=center valign=middle>PROGRAMACIO</td><td bgcolor=FUCHSIA align=center valign=middle>PROGRAMACIO</td> </tr> <tr> <td bgcolor=SILVER align=center valign=middle>19:10 - 20:00</td><TD bgcolor=AQUA align=center valign=middle>BASES DE DADES</TD><td bgcolor=LIME align=center valign=middle>SISTEMES INFORMATICS</td><TD bgcolor=AQUA align=center valign=middle>BASES DE DADES</TD><td bgcolor=FUCHSIA align=center

valign=middle>PROGRAMACIO</td> </tr> <tr> <td bgcolor=SILVER align=center valign=middle>20:15 - 21:05</td><TD bgcolor=AQUA align=center valign=middle>BASES DE DADES</TD><td bgcolor=LIME align=center valign=middle>SISTEMES INFORMATICS</td><TD bgcolor=ORANGE align=center valign=middle>FOL</TD><td bgcolor=LIME align=center valign=middle>SISTEMES INFORMATICS</td> </tr> <tr> <td bgcolor=SILVER align=center valign=middle>21:05 - 21:55</td><TD bgcolor=AQUA align=center valign=middle>BASES DE DADES</TD><TD bgcolor=ORANGE align=center valign=middle>FOL</TD><TD bgcolor=ORANGE align=center valign=middle>FOL</TD><td bgcolor=LIME align=center valign=middle>SISTEMES INFORMATICS</td> </tr></table> </body> </html>

Das könnte Ihnen auch gefallen