Html

Capítulo 15. Ejercicios resueltos
15.1. Ejercicio 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es">
<head>
<title>El primer documento HTML</title>
</head>
<body>
<p>El lenguaje HTML es <strong>tan sencillo</strong> que
practicamente se entiende sin estudiar el significado de sus
etiquetas principales.</p>
<p>Ademas de textos en <strong>negrita</strong>, tambien se pueden
poner <em>en cursiva</em> o <del>tachados</del>.</p>
</body>
</html>
15.2. Ejercicio 2

<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/>
<title>La exploración espacial</title>
</head>
<body>
<h2>La exploración espacial</h2>
<p>La <strong>exploración espacial</strong> designa los esfuerzos
del hombre en estudiar el espacio y sus astros desde el punto de
vista científico y de su explotación económica. Estos esfuerzos
pueden involucrar tanto seres humanos viajando en naves espaciales
como satélites con recursos de telemetría o sondas teleguiadas
enviadas a otros planetas (orbitando o aterrizando en la
superficie de estos cuerpos celestes).</p>
<p>Las personas que pilotan naves espaciales, o son pasajeros en
ellas, se llaman astronautas (en Rusia: <em>cosmonautas</em>; en
China: <em>taikonautas</em>). Técnicamente se considera astronauta
a todo aquel que emprenda un vuelo sub-orbital (sin entrar en
órbita) u orbital a como mínimo 100 km de altitud (considerado el
límite externo de la atmósfera).</p>
<p>El cielo siempre ha atraído la atención y los sueños del
hombre. Ya en 1634 se publicó la que se considera primera novela
de ciencia ficción, <em>Somnium</em>, de <strong>Johannes
Kepler</strong>, que narra un hipotético viaje a la Luna. Más
tarde, en 1865, en una famosa obra de ficción titulada <em>"De la
Terre à la Lune"</em>, <strong>Julio Verne</strong> escribe sobre
un grupo de hombres que viajó hasta la Luna usando un gigantesco
cañón.</p>

<p>En Francia, <strong>Georges Méliès</strong>, uno de los
pioneros del cine, tomaba la novela de Verne para crear <em>"Le
voyage dans la Lune"</em> (1902), una de las primeras películas de
ciencia ficción en la que describía un increíble viaje a la Luna.
En obras como <em>"The War of the Worlds"</em> (1898) y <em>"The
First Men in The Moon"</em> (1901), <strong>Herbert George
Wells</strong> también se concibieron ideas de exploración del
espacio y de contacto con civilizaciones extraterrestres.</p>
</body>
</html>
15.3. Ejercicio 3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=ISO-
8859-1"/>
<title>El Ártico ha perdido el 14% de su hielo marino perenne en
un solo año</title>
</head>
<body>
<h1>El Ártico ha perdido el 14% de su hielo marino perenne en un
solo año</h1>

<p><strong>WASHINGTON.-</strong> El hielo perenne del Ártico se
redujo en un 14% durante el último año, al perder <strong>720.000
kilómetros cuadrados</strong>, una superficie superior a la
Península Ibérica, según datos de la <acronym title="National
Aeronautics and Space Administration">NASA</acronym>.</p>
<p>Según el <acronym title="Laboratorio de Propulsión a
Chorro">JPL</acronym>, la pérdida del hielo perenne, que debiera
mantenerse durante todo el verano, fue todavía mayor y se acercó a
un 50% en el momento en que ese hielo se desplazaba desde el
Ártico oriental hacia el oeste.</p>
<p><strong>Son Nghiem</strong>, investigador del <acronym
title="Laboratorio de Propulsión a Chorro">JPL</acronym> ha
declarado que:</p>
<blockquote><em>"Los cambios registrados en esos años en el hielo
ártico son rápidos y espectaculares. De mantenerse la situación,
ésta tendrá un impacto profundo en el ambiente, así como en el
transporte marino y el comercio."</em></blockquote>
</body>
</html>
Ejercicio 4
<head>

<title>Espacios en blanco arbitrarios</title>
</head>
<body>
<h2>Características de los planetas</h2>
<pre>
Nombre Diametro relativo Período orbital Número de lunas
-----------------------------------------------------------------
Mercurio 0,382 0,24 años 0
Venus 0,949 0,62 años 0
Tierra 1 1 año 1
Marte 0,532 1,88 años 2
Júpiter 11,209 11,86 años 49
Saturno 9,449 29,46 años 52
Urano 4,007 84,01 años 27
Neptuno 3,883 164,80 años 13
</pre>
</body>
</html>
15.5. Ejercicio 5

<head>
<title>La etiqueta blockquote</title>
</head>
<body>
<h1>Sintaxis de la etiqueta <blockquote></h1>
<p>
La sintaxis de la etiqueta <blockquote> se muestra a
continuación: <br/><br/>
<blockquote cite="<em>...direccion original de la
cita...</em>">Texto que se cita</blockquote>
</p>
</body>
</html>
15.6. Ejercicio 6

Página principal
<head>
<title>Mi Sitio</title>
</head>
<body>
<h1>Mi Sitio</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
iaculis posuere justo. Nam vel neque. Proin sagittis mauris sit
amet nisl. Sed ipsum. Aliquam vitae justo.</p>
<h2>Ultimos proyectos</h2>
<p>Etiam consectetuer, mauris vitae cursus scelerisque, dui turpis
dignissim justo, et euismod enim odio sit amet erat. Aliquam dui
ligula, porttitor eu, facilisis vitae, ornare sed, tortor.</p>
<p><ahref="portfolio/indice.html"title="Ultimos proyectos
realizados por Mi Sitio">Acceder a los ultimos proyectos de Mi
Sitio</a></p>

</body>
</html>
Página principal del portfolio
<head>
</head>
<body>
<p><ahref="../indice.html"title="Página principal de Mi
Sitio">Volver a la pagina principal</a></p>
iaculis posuere justo. Nam vel neque.</p>
<h3>Proyecto 1</h3>

dignissim justo, et euismod enim odio sit amet erat.</p>
<p><ahref="../imagenes/proyecto1.png"title="Imagen del Proyecto
1">Ver imagen del Proyecto 1</a></p>
<h3>Proyecto 2</h3>
2">Ver imagen del Proyecto 2</a></p>
</body>
</html>
15.7. Ejercicio 7
Página principal
<head>
<linkrel="shortcut icon"href="favicon.ico"type="image/x-icon"/>

</head>
<body>
<h1>Mi Sitio</h1>
iaculis posuere justo. Nam vel neque. Proin sagittis mauris sit
amet nisl. Sed ipsum. Aliquam vitae justo.</p>
dignissim justo, et euismod enim odio sit amet erat. Aliquam dui
ligula, porttitor eu, facilisis vitae, ornare sed, tortor.</p>
<p><ahref="portfolio/indice.html"title="Ultimos proyectos
realizados por Mi Sitio">Acceder a los ultimos proyectos de Mi
Sitio</a></p>
</body>
</html>

<head>
<linkrel="shortcut icon"href="../favicon.ico"type="image/x-icon"/>
</head>
<body>
<p><ahref="portfolio/indice.html"title="Página principal de Mi
Sitio"rel="index">Volver a la pagina principal</a></p>
<h3>Proyecto 1</h3>
1"type="image/png">Ver imagen del Proyecto 1</a></p>
<h3>Proyecto 2</h3>

2"type="image/png">Ver imagen del Proyecto 2</a></p>
</body>
</html>
15.8. Ejercicio 8
<head>
<title>Lista simple anidada</title>
</head>
<body>
<h1>Menú</h1>
<ul>
<li>Inicio</li>
<li>

<strong>Noticias</strong>
<ul>
<li><ahref="#"title="Ver las noticias más
recientes">Recientes</a></li>
<li><strong><ahref="#"title="Ver las noticias más leídas">Más
leídas</a></strong></li>
<li><ahref="#"title="Ver las noticias más valoradas">Más
valoradas</a></li>
</ul>
</li>
</ul>
</body>
</html>
15.9. Ejercicio 9
<head>
<title>Lista compleja anidada</title>
</head>
<body>

<h1>Menú</h1>
<ul>
<li>Inicio</li>
<li>
<strong>Noticias</strong>
<ul>
<li><ahref="#"title="Ver las noticias más
recientes">Recientes</a></li>
<li><strong><ahref="#"title="Ver las noticias más leídas">Más
leídas</a></strong></li>
<li><ahref="#"title="Ver las noticias más valoradas">Más
valoradas</a></li>
</ul>
</li>
<li>
Artículos
<ol>
<li><strong>XHTML</strong></li>
<li>CSS</li>
<li>JavaScript</li>
<li>Otros</li>
</ol>
</li>
<li>

Contacto
<dl>
<dt><em>Email</em></dt>
<dd><strong>nombre@direccion.com</strong></dd>
<dt><em>Teléfono</em></dt>
<dd>900 900 900</dd>
<dt><em>Fax</em></dt>
<dd>900 900 900</dd>
</dl>
</li>
</ul>
</body>
</html>
15.10. Ejercicio 10
<head>
<linkrel="shortcut icon"href="../favicon.ico"type="image/x-icon"/>
</head>

<body>
<p><ahref="portfolio/indice.html"title="Página principal de Mi
Sitio"rel="index">Volver a la pagina principal</a></p>
<h3>Proyecto 1</h3>
<p><imgsrc="../imagenes/proyecto1.png"title="Imagen del Proyecto
1"/></p>
<h3>Proyecto 2</h3>
<p><imgsrc="../imagenes/proyecto2.png"title="Imagen del Proyecto
2"/></p>
</body>

</html>
15.11. Ejercicio 11
<head>
<title>Ejemplo de tabla sencilla</title>
</head>
<body>
<h1>Su pedido</h1>
<table>
<tr>
<thscope="col">Nombre producto</th>
<thscope="col">Precio unitario</th>
<thscope="col">Unidades</th>
<thscope="col">Subtotal</th>
</tr>
<tr>
<td>Reproductor MP3 (80 GB)</td>

<td>192.02</td>
<td>1</td>
<td>192.02</td>
</tr>
<tr>
<td>Fundas de colores</td>
<td>2.50</td>
<td>5</td>
<td>12.50</td>
</tr>
<tr>
<td>Reproductor de radio & control remoto</td>
<td>12.99</td>
<td>1</td>
<td>12.99</td>
</tr>
<tr>
<thscope="row">TOTAL</th>
<td>-</td>
<td>7</td>
<td><strong>207.51</strong></td>
</tr>

</table>
</body>
</html>
15.12. Ejercicio 12
<head>
<title>Ejemplo de tabla avanzada</title>
</head>
<body>
<h1>Resultado de la búsqueda</h1>
<tablesummary="Tabla con los datos de los resultados de la
búsqueda">
<caption>Resultado de la búsqueda</caption>
<tr>
<thabbr="Imagen del producto"scope="col">Imagen</th>
<thabbr="Datos del producto"scope="col">Datos</th>

</tr>
<tr>
<td>
<imgsrc="imagenes/portatil.png"alt="Imagen del ordenador
portátil"/>
</td>
<td>
<h4><ahref="#"title="Ver más información sobre el
portátil">Portátil - 3 GHz - 4 GB RAM</a></h4>
<p><ahref="#"title="Comprar el portátil">Comprar:</a><del>2.990
€</del><strong>2.599 €</strong></p>
</td>
</tr>
<tr>
<td><imgsrc="imagenes/videocamara.png"alt="Imagen de la
videocámara"/></td>
<td>
<h4><ahref="#"title="Ver más información sobre la
videocámara">Videocámara - Alta definición 1080p - 60 GB</a></h4>
<p><ahref="#"title="Comprar la videocámara">Comprar:</a><del>1.099
€</del><strong>999 €</strong></p>
</td>
</tr>
<tr>
<td><imgsrc="imagenes/tv.png"alt="Imagen del televisor"/></td>

<td>
<h4><ahref="#"title="Ver más información sobre el
televisor">Televisor - 46" - Full HD</a></h4>
<p><ahref="#"title="Comprar el televisor">Comprar:</a><del>1.999
€</del><strong>1.799 €</strong></p>
</td>
</tr>
<tr>
<td><imgsrc="imagenes/movil.png"alt="Imagen del móvil"/></td>
<td>
<h4><ahref="#"title="Ver más información sobre el móvil">Móvil -
3G - Wi-Fi - 8 GB</a></h4>
<p><ahref="#"title="Comprar el móvil">Comprar:</a><del>399
€</del><strong>349 €</strong></p>
</td>
</tr>
</table>
</body>
</html>
15.13. Ejercicio 13

<head>
<title>Ejemplo de tabla compleja</title>
</head>
<body>
<h3>Comparativa de reproductores MP3</h3>
<tablesummary="Tabla comparativa de las características técnicas
de los reproductores MP3">
<caption>Tabla comparativa de las características técnicas de los
reproductores MP3</caption>
<tr>
<th></th>
<thabbr="Reproductor mini"scope="col"colspan="3">
<imgsrc="imagenes/mp3_pequeno_blanco.png"alt="Imagen del
reproductor MP3 pequeño de color blanco"/>
<imgsrc="imagenes/mp3_pequeno_negro.png"alt="Imagen del
reproductor MP3 pequeño de color negro"/>
<br/><strong>MP3 mini</strong>
</th>
<thabbr="Reproductor estándar"scope="col"colspan="2">
<imgsrc="imagenes/mp3_grande_blanco.png"alt="Imagen del
reproductor MP3 grande de color blanco"/>
<imgsrc="imagenes/mp3_grande_negro.png"alt="Imagen del reproductor
MP3 grande de color negro"/>
<br/><strong>MP3 grande</strong>

</th>
</tr>
<tr>
<thscope="row"abbr="Capacidad">Capacidad de almacenamiento</th>
<td>4GB <br/> (1.000 canciones)</td>
</tr>
<tr>
<thscope="row"abbr="Colores disponibles">Colores</th>
<td>
<imgsrc="imagenes/color_blanco.png"alt="Color blanco"/>
</td>
<td>
<imgsrc="imagenes/color_negro.png"alt="Color blanco"/>
<imgsrc="imagenes/color_verde.png"alt="Color verde"/>
<imgsrc="imagenes/color_azul.png"alt="Color azul"/>
<imgsrc="imagenes/color_rosa.png"alt="Color rosa"/>
</td>
<td>
<imgsrc="imagenes/color_negro.png"alt="Color negro"/>

</td>
<tdcolspan="2">
<imgsrc="imagenes/color_blanco.png"alt="Color blanco"/>
<imgsrc="imagenes/color_negro.png"alt="Color negro"/>
</td>
</tr>
<tr>
<thscope="row"abbr="Tamaño de pantalla">Pantalla</th>
<tdcolspan="3">LCD de 3 cm (diagonal) con retroiluminación</td>
<tdcolspan="2">LCD de 6 cm (diagonal) con retroiluminación</td>
</tr>
<tr>
<throwspan="2"scope="row"abbr="Tiempo de carga">Tiempo de
carga</th>
<tdrowspan="2"colspan="3">Unas 3 horas</td>
<tdcolspan="2">Unas 4 horas</td>
</tr>
<tr>
<tdcolspan="2">Unas 2 horas para alcanzar el 80% de la
capacidad</td>
</tr>
</table>

</body>
</html>
15.14. Ejercicio 14
<head>
<title>Rellena tu CV</title>
</head>
<body>
<h3>Rellena tu CV</h3>
<formaction="/php/insertar_cv.php"method="post"enctype="multipart/
form-data">
Nombre <br/>
<inputtype="text"name="nombre"value=""size="20"maxlength="30"/>
<br/>
Apellidos <br/>

<inputtype="text"name="apellidos"value=""size="50"maxlength="80"/>
<br/>
Contraseña <br/>
<inputtype="password"name="contrasena"value=""maxlength="10"/>
<br/>
DNI <br/>
<inputtype="text"name="dni"value=""size="10"maxlength="9"/>
<br/>
Sexo <br/>
<inputtype="radio"name="sexo"value="hombre"checked="checked"/>
Hombre <br/>
<inputtype="radio"name="sexo"value="mujer"/> Mujer
<br/><br/>
Incluir mi foto <inputtype="file"name="foto"/>
<br/><br/>

<inputname="suscribir"type="checkbox"value="suscribir"checked="che
cked"/> Suscribirme al boletín de novedades
<br/><br/>
<inputtype="submit"name="enviar"value="Guardar cambios"/>
<inputtype="reset"name="limpiar"value="Borrar los datos
introducidos"/>
</form>
</body>
</html>
15.15. Ejercicio 15
<head>
<title>Rellena tu CV</title>
</head>
<body>

<h3>Rellena tu CV</h3>
<formaction="/php/insertar_cv.php"method="post"enctype="multipart/
form-data">
<fieldset>
<legend>Datos personales</legend>
<labelfor="provincia">Provincia</label><br/>
<selectid="provincia"name="provincia">
<optionvalue=""selected="selected">- selecciona -</option>
<optionvalue="01">Álava/Araba</option>
<optionvalue="02">Albacete</option>
<optionvalue="03">Alicante/Alacant</option>
<optionvalue="04">Almería</option>
<optionvalue="33">Asturias</option>
<optionvalue="05">Ávila</option>
<optionvalue="06">Badajoz</option>
<optionvalue="07">Balears (Illes)</option>
<optionvalue="08">Barcelona</option>
<optionvalue="09">Burgos</option>
<optionvalue="10">Cáceres</option>
<optionvalue="11">Cádiz</option>
<optionvalue="39">Cantabria</option>

<optionvalue="12">Castellón/Castelló</option>
<optionvalue="51">Ceuta</option>
<optionvalue="13">Ciudad Real</option>
<optionvalue="14">Córdoba</option>
<optionvalue="15">Coruña (A)</option>
<optionvalue="16">Cuenca</option>
<optionvalue="17">Girona</option>
<optionvalue="18">Granada</option>
<optionvalue="19">Guadalajara</option>
<optionvalue="20">Guipúzcoa/Gipuzkoa</option>
<optionvalue="21">Huelva</option>
<optionvalue="22">Huesca</option>
<optionvalue="23">Jaén</option>
<optionvalue="24">León</option>
<optionvalue="27">Lugo</option>
<optionvalue="25">Lleida</option>
<optionvalue="28">Madrid</option>
<optionvalue="29">Málaga</option>
<optionvalue="52">Melilla</option>
<optionvalue="30">Murcia</option>
<optionvalue="31">Navarra</option>
<optionvalue="32">Ourense</option>
<optionvalue="34">Palencia</option>
<optionvalue="35">Palmas (Las)</option>
<optionvalue="36">Pontevedra</option>

<optionvalue="26">Rioja (La)</option>
<optionvalue="37">Salamanca</option>
<optionvalue="38">Santa Cruz de Tenerife</option>
<optionvalue="40">Segovia</option>
<optionvalue="41">Sevilla</option>
<optionvalue="42">Soria</option>
<optionvalue="43">Tarragona</option>
<optionvalue="44">Teruel</option>
<optionvalue="45">Toledo</option>
<optionvalue="46">Valencia/València</option>
<optionvalue="47">Valladolid</option>
<optionvalue="48">Vizcaya/Bizkaia</option>
<optionvalue="49">Zamora</option>
<optionvalue="50">Zaragoza</option>
</select>
<br/><br/>
<labelfor="fecha_dia">Fecha de nacimiento</label><br/>
<inputtype="text"size="3"maxlength="2"id="fecha_dia"name="fecha_di
a"/>
de
<selectid="fecha_mes"name="fecha_mes">
<optionvalue="1">Enero</option>
<optionvalue="2">Febrero</option>

<optionvalue="3">Marzo</option>
<optionvalue="4">Abril</option>
<optionvalue="5">Mayo</option>
<optionvalue="6">Junio</option>
<optionvalue="7">Julio</option>
<optionvalue="8">Agosto</option>
<optionvalue="9">Septiembre</option>
<optionvalue="10">Octubre</option>
<optionvalue="11">Noviembre</option>
<optionvalue="12">Diciembre</option>
</select>
de
<inputtype="text"size="5"maxlength="4"id="fecha_ano"name="fecha_an
o"/>
<br/><br/>
<labelfor="temasDeInteres">Temas de interés</label><br/>
<selectmultiple="multiple"size="5"id="temasDeInteres"name="temasDe
Interes">
<optionvalue="3105">Administración de bases de datos</option>
<optionvalue="3106">Análisis y programación</option>
<optionvalue="3107">Arquitectura</option>
<optionvalue="3108">Calidad</option>
<optionvalue="3109">ERP, CRM, Business Intelligence</option>
<optionvalue="3110">Gestión de proyectos</option>

<optionvalue="3111">Hardware, redes y seguridad</option>
<optionvalue="3112">Helpdesk</option>
<optionvalue="3113">Sistemas</option>
<optionvalue="3114">Telecomunicaciones</option>
</select>
</fieldset>
</form>
</body>
</html>
15.16. Ejercicio 16
<head>
<title>Información sobre el producto</title>
</head>
<body>
<h3>Información sobre el producto</h3>

<formaction="/php/insertar_subasta.php"method="post"enctype="multi
part/form-data">
<fieldset>
<legend>Datos básicos</legend>
<labelfor="nombre">Nombre</label><br/>
<inputtype="text"name="nombre"id="nombre"size="50"maxlength="250"/
>
<br/><br/>
<labelfor="descripcion">Descripción</label><br/>
<textareaname="descripcion"id="descripcion"cols="40"rows="5"></tex
tarea>
<br/><br/>
Foto <inputtype="file"name="foto"/>
<br/><br/>
<inputname="contador"type="checkbox"value="si"/> Añadir contador
de visitas
</fieldset>

<fieldset>
<legend>Datos económicos</legend>
<labelfor="precio">Precio</label>
<inputtype="text"size="5"id="precio"name="precio"/>€
     
<labelfor="impuestos">Impuestos</label>
<selectid="impuestos"name="impuestos">
<optionvalue="4">4%</option>
</select>
<br/><br/>
<label>Promoción</label><br/>
<inputtype="radio"name="promocion"value="ninguno"checked="checked"
/> Ninguno <br/>
<inputtype="radio"name="promocion"value="portes"/> Transporte
gratuito <br/>
<inputtype="radio"name="promocion"value="descuento"/> Descuento 5%
</fieldset>
</form>

Html

Recomendados

Recomendados

Más contenido relacionado

Similar a Html

Similar a Html (20)

Html