Ejemplos HTML

SERVICIO NACIONAL DE APRENDIZAJE SENA
GUA DE APRENDIZAJE
SISTEMA INTEGRADO DE GESTIN
Proceso Gestin de la Formacin Profesional Integral
EJERCICIOS HTML
Versin: 02
Fecha: 23/02/2015
Cdigo: F004-P006GFPI
Desarrolle cada uno de los siguientes ejemplos en el Bloc de notas, cada

ejemplo debe quedar en un documento diferente, al momento de guardarlo
escriba el nombre del ejercicio y colquele .html, guarde todos los ejercicios
dentro de una misma carpeta, luego busque el archivo guardado y bralo para
ver los resultados obtenidos, explique para que sirve cada una de las etiquetas
utilizadas en el ejercicio, sto se debe hacer en un documento de Word.
EJEMPLO 1.
<html>
<head>
<title>La exploracin espacial</title>
</head>
<body>
<h2>La exploracin espacial</h2>
<p>La <strong>exploracin espacial</strong> designa los esfuerzos del
hombre en estudiar el espacio y sus astros desde el punto de vista cientfico y
de su explotacin econmica. Estos esfuerzos pueden involucrar tanto seres
humanos viajando en naves espaciales como satlites con recursos de
telemetra 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>). Tcnicamente se considera astronauta a todo aquel
que emprenda un vuelo sub-orbital (sin entrar en rbita) u orbital a como
mnimo 100 km de altitud (considerado el lmite externo de la atmsfera).</p>
<p>El cielo siempre ha atrado la atencin y los sueos del hombre. Ya en
1634 se public la que se considera primera novela de ciencia ficcin,
<em>Somnium</em>, de <strong>Johannes Kepler</strong>, que narra un
hipottico viaje a la Luna. Ms tarde, en 1865, en una famosa obra de ficcin
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 can.</p>
<p>En Francia, <strong>Georges Mlis</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 pelculas de ciencia ficcin en la que
describa un increble 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> tambin se concibieron ideas de
exploracin del espacio y de contacto con civilizaciones extraterrestres.</p>
</body>
</html>
EJEMPLO 2.

GUA DE APRENDIZAJE
EJERCICIOS HTML
Versin: 02
Fecha: 23/02/2015
<html>
<head>
<title>El rtico ha perdido el 14% de su hielo marino perenne en un solo
ao</title>
</head>
<body>
<h1>El rtico ha perdido el 14% de su hielo marino perenne en un solo
ao</h1>
<p><strong>WASHINGTON.-</strong> El hielo perenne del rtico se redujo en
un 14% durante el ltimo ao, al perder <strong>720.000 kilmetros
cuadrados</strong>, una superficie superior a la Pennsula Ibrica, segn
datos
de
la
<acronym
title="National
Aeronautics
and
Space
Administration">NASA</acronym>.</p>
<p>Segn
el
<acronym
title="Laboratorio
de
Propulsin
a
Chorro">JPL</acronym>, la prdida del hielo perenne, que debiera mantenerse
durante todo el verano, fue todava 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 Propulsin a Chorro">JPL</acronym> ha declarado
que:</p>
<blockquote><em>"Los cambios registrados en esos aos en el hielo rtico
son rpidos y espectaculares. De mantenerse la situacin, sta tendr un
impacto profundo en el ambiente, as como en el transporte marino y el
comercio."</em></blockquote>
</body>
</html>
EJEMPLO 3.
<html>
<head>
<title>Espacios en blanco arbitrarios</title>
</head>
<body>
<h2>Caractersticas de los planetas</h2>
<pre>
## Nombre
Dimetro relativo Perodo orbital
0,382
0,24 aos
0
Venus
0,949
0,62 aos
0
Nmero de lunasMercurio

GUA DE APRENDIZAJE
EJERCICIOS HTML
Tierra
Marte
Jpiter
Saturno
Urano
Neptuno
</pre>
</body>
</html>
1
0,532
11,209
9,449
4,007
3,883
ao
1
1,88 aos
11,86 aos
29,46 aos
84,01 aos
164,80 aos
Versin: 02
Fecha: 23/02/2015
2
49
52
27
13
EJEMPLO 4.
<html>
<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><a href="portafolio/indice.html" title="ltimos proyectos realizados por Mi
Sitio">Acceder a los ltimos proyectos de Mi Sitio</a></p>
</body>
</html>
EJEMPLO 5.
<html>
<head>
</head>
<body>
<h1>Mi Sitio</h1>
posuere justo. Nam vel neque. Proin sagittis mauris sit amet nisl. Sed ipsum.
Aliquam vitae justo.</p>
<h2>Ultimos proyectos</h2>

GUA DE APRENDIZAJE
EJERCICIOS HTML
Versin: 02
Fecha: 23/02/2015

justo, et euismod enim odio sit amet erat. Aliquam dui ligula, porttitor eu,
facilisis vitae, ornare sed, tortor.</p>
<p><a href="portafolio/indice.html" title="ltimos proyectos realizados por Mi
Sitio">Acceder a los ltimos proyectos de Mi Sitio</a></p>
</body>
</html>
Pgina principal del portafolio: ste cdigo va en otro documento porque
se estn trabajando hipervnculos. Analice el cdigo y verifique si los enlaces
funcionan, de lo contrario busque el error y corrjalo.
<html>
<head>
</head>
<body>
<p><a href="portafolio/indice.html" title="Pgina principal de Mi Sitio"
rel="index">Volver a la pgina principal</a></p>
<h1>ltimos proyectos</h1>
posuere justo. Nam vel neque.</p>
<h3>Proyecto 1</h3>
justo, et euismod enim odio sit amet erat.</p>
<p><a href="../imgenes/proyecto1.png" title="Imagen del Proyecto 1"
type="image/png">Ver imagen del Proyecto 1</a></p>
<h3>Proyecto 2</h3>
<p><a href="../imgenes/proyecto2.png" title="Imagen del Proyecto 2"
type="image/png">Ver imagen del Proyecto 2</a></p>
</body>
</html>
EJERCICIO 6.
<html>
<head>
<title>Lista simple anidada</title>
</head>
<body>
<h1>Menu</h1>
<ul>
<li>Inicio</li>
<li>
<strong>Noticias</strong>

GUA DE APRENDIZAJE
EJERCICIOS HTML
Versin: 02
Fecha: 23/02/2015
<ul>
<li><a
href="#"
title="Ver
las
noticias
ms
recientes">Recientes</a></li>
<li><strong><a href="#" title="Ver las noticias ms ledas">Ms
ledas</a></strong></li>
<li><a href="#" title="Ver las noticias ms valoradas">Ms
valoradas</a></li>
</ul>
</li>
</ul>
</body>
</html>
EJERCICIO 7.
<html>
<head>
<title>Lista compleja anidada</title>
</head>
<body>
<h1>Menu</h1>
<ul>
<li>Inicio</li>
<li>
<strong>Noticias</strong>
<ul>
<li><a
href="#"
title="Ver
las
noticias
ms
recientes">Recientes</a></li>
<li><strong><a href="#" title="Ver las noticias ms ledas">Ms
ledas</a></strong></li>
<li><a href="#" title="Ver las noticias ms valoradas">Ms
valoradas</a></li>
</ul>
</li>
<li>
Artculos
<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>

GUA DE APRENDIZAJE
EJERCICIOS HTML
Versin: 02
Fecha: 23/02/2015
<dd><strong>nombre@direccion.com</strong></dd>
<dt><em>Telfono</em></dt>
<dd>900 900 900</dd>
<dt><em>Fax</em></dt>
<dd>900 900 900</dd>
</dl>
</li>
</ul>
</body>
</html>
EJERCICIO 8.
<html>
<head>
</head>
<body>
<p><a href="portfolio/indice.html" title="Pgina principal de Mi Sitio"
rel="index">Volver a la pgina principal</a></p>
<h1>ltimos proyectos</h1>
posuere justo. Nam vel neque.</p>
<h3>Proyecto 1</h3>
<p><img src="../imgenes/proyecto1.png" title="Imagen del Proyecto 1"
/></p>
<h3>Proyecto 2</h3>
<p><img src="../imgenes/proyecto2.png" title="Imagen del Proyecto 2"
/></p>
</body>
</html>
EJERCICIO 9.
<html>
<head>
<title>Ejemplo de tabla sencilla</title>
</head>
<body>
<h1>Su pedido</h1>
<table>
<tr>
<th scope="col">Nombre producto</th>

GUA DE APRENDIZAJE
EJERCICIOS HTML
Versin: 02
Fecha: 23/02/2015
<th scope="col">Precio unitario</th>

<th scope="col">Unidades</th>
<th scope="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>
<th scope="row">TOTAL</th>
<td>-</td>
<td>7</td>
<td><strong>207.51</strong></td>
</tr>
</table>
</body>
</html>
EJERCICIO 10.
<html>
<head>
<title>Ejemplo de tabla avanzada</title>
</head>
<body>
<h1>Resultado de la bsqueda</h1>
<table summary="Tabla con los datos de los resultados de la bsqueda">
<caption>Resultado de la bsqueda</caption>
<tr>
<th abbr="Imagen del producto" scope="col">Imagen</th>
<th abbr="Datos del producto" scope="col">Datos</th>
</tr>

GUA DE APRENDIZAJE
EJERCICIOS HTML
Versin: 02
Fecha: 23/02/2015
<tr>
<td>
<img src="imagenes/portatil.png" alt="Imagen del ordenador porttil" />
</td>
<td>
<h4><a href="#" title="Ver ms informacin sobre el porttil">Porttil - 3
GHz - 4 GB RAM</a></h4>
<p><a href="#" title="Comprar el porttil">Comprar:</a> <del>2.990
€</del> <strong>2.599 €</strong></p>
</td>
</tr>
<tr>
<td><img src="imagenes/videocamara.png" alt="Imagen de la
videocmara" /></td>
<td>
<h4><a href="#" title="Ver ms informacin sobre la
videocmara">Videocmara - Alta definicin 1080p - 60 GB</a></h4>
<p><a href="#" title="Comprar la videocmara">Comprar:</a>
<del>1.099 €</del> <strong>999 €</strong></p>
</td>
</tr>
<tr>
<td><img src="imagenes/tv.png" alt="Imagen del televisor" /></td>
<td>
<h4><a href="#" title="Ver ms informacin sobre el televisor">Televisor
- 46" - Full HD</a></h4>
<p><a href="#" title="Comprar el televisor">Comprar:</a> <del>1.999
€</del> <strong>1.799 €</strong></p>
</td>
</tr>
<tr>
<td><img src="imagenes/movil.png" alt="Imagen del mvil" /></td>
<td>
<h4><a href="#" title="Ver ms informacin sobre el mvil">Mvil - 3G Wi-Fi - 8 GB</a></h4>
<p><a href="#" title="Comprar el mvil">Comprar:</a> <del>399
€</del> <strong>349 €</strong></p>
</td>
</tr>
</table>
</body>
</html>
EJERCICIO 11.
<html>
<head>

GUA DE APRENDIZAJE
EJERCICIOS HTML
Versin: 02
Fecha: 23/02/2015
<title>Ejemplo de tabla compleja</title>

</head>
<body>
<h3>Comparativa de reproductores MP3</h3>
<table summary="Tabla comparativa de las caractersticas tcnicas de los
reproductores MP3">
<caption>Tabla comparativa de las caractersticas tcnicas de los
reproductores MP3</caption>
<tr>
<th></th>
<th abbr="Reproductor mini" scope="col" colspan="3">
<img src="imagenes/mp3_pequeno_blanco.png" alt="Imagen del
reproductor MP3 pequeo de color blanco" />
<img src="imagenes/mp3_pequeno_negro.png" alt="Imagen del
reproductor MP3 pequeo de color negro" />
<br/><strong>MP3 mini</strong>
</th>
<th abbr="Reproductor estndar" scope="col" colspan="2">
<img src="imagenes/mp3_grande_blanco.png" alt="Imagen del
reproductor MP3 grande de color blanco" />
<img src="imagenes/mp3_grande_negro.png" alt="Imagen del reproductor
MP3 grande de color negro" />
<br/><strong>MP3 grande</strong>
</th>
</tr>
<tr>
<th scope="row" abbr="Capacidad">Capacidad de almacenamiento</th>
<td>4GB <br/> (1.000 canciones)</td>
</tr>
<tr>
<th scope="row" abbr="Colores disponibles">Colores</th>
<td>
<img src="imagenes/color_blanco.png" alt="Color blanco" />
</td>
<td>
<img src="imagenes/color_negro.png" alt="Color blanco" />
<img src="imagenes/color_verde.png" alt="Color verde" />
<img src="imagenes/color_azul.png" alt="Color azul" />
<img src="imagenes/color_rosa.png" alt="Color rosa" />
</td>
<td>
<img src="imagenes/color_negro.png" alt="Color negro" />
</td>

GUA DE APRENDIZAJE
EJERCICIOS HTML
Versin: 02
Fecha: 23/02/2015
<td colspan="2">
<img src="imagenes/color_blanco.png" alt="Color blanco" />
<img src="imagenes/color_negro.png" alt="Color negro" />
</td>
</tr>
<tr>
<th scope="row" abbr="Tamao de pantalla">Pantalla</th>
<td colspan="3">LCD de 3 cm (diagonal) con retroiluminacin</td>
<td colspan="2">LCD de 6 cm (diagonal) con retroiluminacin</td>
</tr>
<tr>
<th rowspan="2" scope="row" abbr="Tiempo de carga">Tiempo de
carga</th>
<td rowspan="2" colspan="3">Unas 3 horas</td>
<td colspan="2">Unas 4 horas</td>
</tr>
<tr>
<td colspan="2">Unas 2 horas para alcanzar el 80% de la capacidad</td>
</tr>
</table>
</body>
</html>
EJERCICIO 12.
<html>
<head>
<title>Rellena tu CV</title>
</head>
<body>
<h3>Rellena tu CV</h3>
<form action="/php/insertar_cv.php" method="post" enctype="multipart/formdata">
Nombre <br/>
<input type="text" name="nombre" value="" size="20" maxlength="30" />
<br/>
Apellidos <br/>
<input type="text" name="apellidos" value="" size="50" maxlength="80" />
<br/>
Contrasea <br/>
<input type="password" name="contrasena" value="" maxlength="10" />
<br/>
DNI <br/>
<input type="text" name="dni" value="" size="10" maxlength="9" />
<br/>
Sexo <br/>

GUA DE APRENDIZAJE
EJERCICIOS HTML
Versin: 02
Fecha: 23/02/2015
<input type="radio" name="sexo" value="hombre" checked="checked" />

Hombre <br/>
<input type="radio" name="sexo" value="mujer" /> Mujer
<br/><br/>
Incluir mi foto <input type="file" name="foto" />
<br/><br/>
<input
name="suscribir"
type="checkbox"
value="suscribir"
checked="checked"/> Suscribirme al boletn de novedades
<br/><br/>
<input type="submit" name="enviar" value="Guardar cambios" />
<input type="reset" name="limpiar" value="Borrar los datos introducidos" />
</form>
</body>
</html>
EJERCICIO 13. Cambie el nombre de las ciudades por departamentos de
Colombia.
<html>
<head>
<title>Rellena tu CV</title>
</head>
<body>
<h3>Rellena tu CV</h3>
<form action="/php/insertar_cv.php" method="post" enctype="multipart/formdata">
<fieldset>
<legend>Datos personales</legend>
<label for="provincia">Provincia</label> <br/>
<select id="provincia" name="provincia">
<option value="" selected="selected">- selecciona -</option>
<option value="01">lava/Araba</option>
<option value="02">Albacete</option>
<option value="03">Alicante/Alacant</option>
<option value="04">Almera</option>
<option value="33">Asturias</option>
<option value="05">vila</option>
<option value="06">Badajoz</option>
<option value="07">Balears (Illes)</option>
<option value="08">Barcelona</option>
<option value="09">Burgos</option>
<option value="10">Cceres</option>
<option value="11">Cdiz</option>
<option value="39">Cantabria</option>
<option value="12">Castelln/Castell</option>
<option value="51">Ceuta</option>
<option value="13">Ciudad Real</option>

GUA DE APRENDIZAJE
EJERCICIOS HTML
Versin: 02
Fecha: 23/02/2015
<option value="14">Crdoba</option>
<option value="15">Corua (A)</option>
<option value="16">Cuenca</option>
<option value="17">Girona</option>
<option value="18">Granada</option>
<option value="19">Guadalajara</option>
<option value="20">Guipzcoa/Gipuzkoa</option>
<option value="21">Huelva</option>
<option value="22">Huesca</option>
<option value="23">Jan</option>
<option value="24">Len</option>
<option value="27">Lugo</option>
<option value="25">Lleida</option>
<option value="28">Madrid</option>
<option value="29">Mlaga</option>
<option value="52">Melilla</option>
<option value="30">Murcia</option>
<option value="31">Navarra</option>
<option value="32">Ourense</option>
</select>
<br/><br/>
<label for="fecha_dia">Fecha de nacimiento</label> <br/>
<input
type="text"
size="3"
maxlength="2"
name="fecha_dia" />
de
<select id="fecha_mes" name="fecha_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>
</select>
de
<input
type="text"
size="5"
maxlength="4"
name="fecha_ano" />
<br/><br/>
id="fecha_dia"
id="fecha_ano"

GUA DE APRENDIZAJE
EJERCICIOS HTML
Versin: 02
Fecha: 23/02/2015
<label for="temasDeInteres">Temas de inters</label> <br/>

<select
multiple="multiple"
size="5"
id="temasDeInteres"
name="temasDeInteres">
<option value="3105">Administracin de bases de datos</option>
<option value="3106">Anlisis y programacin</option>
<option value="3107">Arquitectura</option>
<option value="3108">Calidad</option>
<option value="3109">ERP, CRM, Business Intelligence</option>
<option value="3110">Gestin de proyectos</option>
<option value="3111">Hardware, redes y seguridad</option>
<option value="3112">Helpdesk</option>
<option value="3113">Sistemas</option>
<option value="3114">Telecomunicaciones</option>
</select>
</fieldset>
</form>
</body>
</html>
EJERCICIO 14
<html>
<head>
<title>Informacin sobre el producto</title>
</head>
<body>
<h3>Informacin sobre el producto</h3>
<form
action="/php/insertar_subasta.php"
method="post"
enctype="multipart/form-data">
<fieldset>
<legend>Datos bsicos</legend>
<label for="nombre">Nombre</label> <br/>
<input
type="text"
name="nombre"
id="nombre"
size="50"
maxlength="250" />
<br/><br/>
<label for="descripcion">Descripcin</label> <br/>
<textarea
name="descripcion"
id="descripcion"
cols="40"
rows="5"></textarea>
<br/><br/>
Foto <input type="file" name="foto" />
<br/><br/>
<input name="contador" type="checkbox" value="si" /> Aadir contador de
visitas
</fieldset>

GUA DE APRENDIZAJE
EJERCICIOS HTML
Versin: 02
Fecha: 23/02/2015
<fieldset>
<legend>Datos econmicos</legend>
<label for="precio">Precio</label>
<input type="text" size="5" id="precio" name="precio" /> €

<label for="impuestos">Impuestos</label>
<select id="impuestos" name="impuestos">
<option value="4">4%</option>
</select>
<br/><br/>
<label>Promocin</label> <br/>
<input
type="radio"
name="promocion"
value="ninguno"
checked="checked" /> Ninguno <br/>
<input type="radio" name="promocion" value="portes" /> Transporte
gratuito <br/>
<input type="radio" name="promocion" value="descuento" /> Descuento
5%
</fieldset>
</form>
</body>
</html>

Ejemplos HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Ejemplos HTML

Transféré par

Droits d'auteur :

Formats disponibles

SERVICIO NACIONAL DE APRENDIZAJE SENA

Desarrolle cada uno de los siguientes ejemplos en el Bloc de notas, cada

SERVICIO NACIONAL DE APRENDIZAJE SENA

SERVICIO NACIONAL DE APRENDIZAJE SENA

SERVICIO NACIONAL DE APRENDIZAJE SENA

<p>Etiam consectetuer, mauris vitae cursus scelerisque, dui turpis dignissim

SERVICIO NACIONAL DE APRENDIZAJE SENA

SERVICIO NACIONAL DE APRENDIZAJE SENA

SERVICIO NACIONAL DE APRENDIZAJE SENA

<th scope="col">Precio unitario</th>

SERVICIO NACIONAL DE APRENDIZAJE SENA

SERVICIO NACIONAL DE APRENDIZAJE SENA

<title>Ejemplo de tabla compleja</title>

SERVICIO NACIONAL DE APRENDIZAJE SENA

SERVICIO NACIONAL DE APRENDIZAJE SENA

<input type="radio" name="sexo" value="hombre" checked="checked" />

SERVICIO NACIONAL DE APRENDIZAJE SENA

SERVICIO NACIONAL DE APRENDIZAJE SENA

<label for="temasDeInteres">Temas de inters</label> <br/>

SERVICIO NACIONAL DE APRENDIZAJE SENA

Vous aimerez peut-être aussi