Ejercicios HTML5

EJERCICIOS HTML5
Los ejercicios estn basados en vdeos tutoriales de HTML 5 accesibles en la

siguiente direccin http://www.youtube.com/watch?
v=CdfMG_Qy00E&list=PLU8oAlHdN5BnX63lyAeV0LzLnpGudgRrK&index=2
Vdeo n 1
Ejercicio 1
Abre el Notepad++ y teclea el siguiente cdigo. Posteriormente ejectalo con
cualquier navegador web para ver cmo queda.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Titulo</title>
</head>
<body>
<div id="centrado">
<header>
<hgroup>
<h1>(( TITULO ))</h1>
<h2>(( DESCRIPCION DE LA WEB ))</h2>
</hgroup>
<div id="logotipo">(( LOGOTIPO ))</div>
</header>
<id ="contenido">
<nav>
(( MENU DE NAVEGACION ))
</nav>
<aside>
(( ANUNCIO DEL PDF ))
</aside>
<section id="izquierda">
<h2>Ultimas Novedades<h2>
<article>(( NOVEDAD UNO ))</article>
<article>(( NOVEDAD DOS ))</article>
<article>(( NOVEDAD TRES ))</article>
</section>
<section id="centro">
<h2>Temas Populares<h2>
<article>(( POPULAR A ))</article>
<article>(( POPULAR B ))</article>
<article>(( POPULAR C ))</article>
</section>
</div>
<footer>
<section id="copyright">(( Datos Copyright ))</section>
<section id="contacto">(( Datos de Contacto ))</section>
<section id="enlaces">(( MapaWeb, Poltica, etc. ))</section>
</footer>
</div>
</body>
</html>
Vdeo n 2
Ejercicio 2
Crea un documento en el Notepad++ siguiendo el siguiente ejemplo:
<DOCTYPE html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8" />
<title>Documento</title>
</head>
<body>
<h1>Bienvenidos al curso de HTML5 y CSS3</h1>
<img src=web.jpg />
<p>Este es un curso de HTML5 y CSS3 en la Academia Delta PC.
Estudiaremos los siguientes temas</p>
<ol>
<li>HTML5</li>
<li>CSS3</li>
</ol>
</body>
</html>
Luego ejectalo en cualquier navegador web.
Vdeo n 2
Ejercicio 3.
Abre el Notepad++ y escribe una pgina web con el contenido Esta es mi
primera pgina web en HTML5 en el curso Tecnologas con aplicaciones
web., incluyendo todas las etiquetas que hemos visto. Ejectala despus en
un navegador web para ver cmo queda.
Sigue este ejemplo
1.<!DOCTYPE html>
2.<html lang=es>
3.<head>
4.
5.
<meta charset=iso-8559-1/>
6.
<meta name=description content=Pgina de enseanza en html5/>
7.
<meta name=keywords content=html5, css3, Javascript, diseo web/>
8.
9.</head>
10.<body>
11.
Esta es nuestra primera pgina web.
12.
13.</body>
14.</html>
Cambia el contenido de la forma siguiente:

En el contenido del body escribe: Esta es la primera pgina web del
curso HTML5 en Delta PC.
En la lnea 6 despus de content cambia el contenido por: Curso de
HTML5 en Delta PC. (No olvides las comillas).
En la lnea 7 cambia el contenido despus de content por: curso, html5.
Vdeos n 3 y 4
Ejercicio 4
Abre el Notepad++ y escribe una pgina web con las nuevas etiquetas de
HTML5 que hemos visto. La temtica es libre.
No olvides utilizar la etiqueta <article> para agrupar contenidos afines.
Este ejemplo podra serte de ayuda

<!DOCTYPE html>
<html lang="es">
<head>
<title>Titulo</title>
</head>
<body>
<div id="centrado">
<header>
<hgroup>
<h1>(( TITULO ))</h1>
<h2>(( DESCRIPCION DE LA WEB ))</h2>
</hgroup>
<div id="logotipo">(( LOGOTIPO ))</div>
</header>
<id ="contenido">
<nav>
(( MENU DE NAVEGACION ))
</nav>
<aside>
(( ANUNCIO DEL PDF ))

</aside>
<section id="izquierda">
<h2>Ultimas Novedades<h2>
<article>(( NOVEDAD UNO ))</article>
<article>(( NOVEDAD DOS ))</article>
<article>(( NOVEDAD TRES ))</article>
</section>
<section id="centro">
<h2>Temas Populares<h2>
<article>(( POPULAR A ))</article>
<article>(( POPULAR B ))</article>
<article>(( POPULAR C ))</article>
</section>
</div>
<footer>
<section id="copyright">(( Datos Copyright ))</section>
<section id="contacto">(( Datos de Contacto ))</section>
<section id="enlaces">(( MapaWeb, Poltica, etc. ))</section>
</footer>
</div>
</body>
</html>
Vdeo n 5
Ejercicio 5
Inserta una imagen en una pgina web HTML cualquiera utilizando la etiqueta
<figure> tal y como se muestra en el vdeo. Agrega tambin un pie de imagen
con la etiqueta <figcaption>. Puedes crear una pgina nueva o alguna que ya
tengas hecha.
Ejemplos:
<figure>
<img src="/imagen.jpg" alt="texto alternativo">
<figcaption>Una imagen bonita y con un <a
href="http://www.flickr.com/photos/rclark/">enlace</a></figcaption>
</figure>
<figure>
<img src="/kookaburra.jpg" alt="Kooaburra">
<img src="/pelican.jpg" alt="Pelican stood on the beach">
<img src="/lorikeet.jpg" alt="Cheeky looking Rainbow Lorikeet">
<figcaption>Varias imgenes</figcaption>
</figure>
Vdeo N 6
Ejercicio 6
Vamos a hacer un ejercicio con CSS. En este caso haremos un documento
HTML5 con la estructura de la pgina y un documento CSS con los estilos.
Ejemplo HTML5
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi primer sitio HTML5</title>
<link rel="stylesheet" href="estilo.css"/>
</head>
<body>
<header><h1>Mi primer sitio HTML5</h1></header>
<nav>
<ul>
<li><a href="#">inicio</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">vdeos</a></li>
</ul>
</nav>
<footer>
<small>
Copyright © 2011<br/>
Actualizado en: 11 Noviembre 2011
</small>
</footer>
</body>
</html>
Ejemplo CSS
body {
background-color:#f2f2f2;
margin: 36px auto;
width: 720px;
}
nav{
float:left;
width: 150px;
}
section{
float:right;
width:570px;
}
footer{float:left}
Vdeo n 7
Ejercicio 7
En este ejercicio tenemos una pgina HTML con una hoja de estilos CSS.
Ejecuta la pgina en un navegador cualquiera y fjate en su diseo. A
continuacin cambia la hoja de estilos CSS tal y como te indicamos a
continuacin:
En la etiqueta body cambia width por 550px.
En la etiqueta header h1, cambia el tamao de fuente (font-size) a 40px.
En la etiqueta header h2, cambia el estilo de letra (font-style) a bold
(negrita).
En la etiqueta nav ul li a:hover cambia el color a #cc0000 y en fontweight cambia bold por normal.
En la etiqueta article > header time cambia el color a #993399. Haz lo
mismo en article > header h1 a.
En la etiqueta article p introduce font-style: italic.
En la etiqueta footer p cambia la alineacin a left, cambia el color a
#000000 e introduce background-color: #993399.
<!doctype html>
<html lang="en">
<head>
<title>HTML5 Demo</title>
<link rel="stylesheet" href="styles.css" />

</head>
<body>
<header>
<hgroup>
<h1>Company Name</h1>
<h2>An example of HTML5 and CSS3 in action</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<article>
<header>
<time datetime="2010-01-12" pubdate>
<span>Jan</span> 12
</time>
<h1>
<a href="#" title="Link to this post"

rel="bookmark">Article Heading</a>
</h1>
</header>
<p>This is an article that demonstrates some of the new features
that HTML5 and CSS3 has to offer. This article contains several
sections, each
with its own heading, as well as a video element which will play a
video without
Flash on browsers that support it.</p>
<section>
<header>
<h1>This is a section heading</h1>
</header>
<p>This is an example of a basic section of a document.
A section can refer to different parts of a document, application, or
page.
According to the draft W3C spec, HTML5 sections usually have
headings.</p>
</section>
</article>
<footer>
<p>© 2009 Company Name. All rights reserved.</p>
</footer>
</body>
</html>
Archivo HTML
* {
}
font-family: Lucida Sans, Arial, Helvetica, sans-serif;
body {
width: 480px; margin: 0px auto;
}
header h1 {
font-size: 36px; margin: 0px;
}
header h2 {
font-size: 18px; margin: 0px; color: #888;
font-style: italic;
}
nav ul {
list-style: none; padding: 0px; display: block;
clear: right; background-color: #666;
padding-left: 4px; height: 24px;
}
nav ul li {
display: inline; padding: 0px 20px 5px 10px;
height: 24px; border-right: 1px solid #ccc;
}
nav ul li a {
color: #EFD3D3; text-decoration: none;
font-size: 13px; font-weight: bold;
}
nav ul li a:hover {
color: #fff;
}
article > header time {
font-size: 14px; display: block; width: 26px;
padding: 2px; text-align: center; background-color: #993333;
color: #fff; font-weight: bold; -moz-border-radius: 6px;
-webkit-border-radius: 6px; border-radius: 6px; float: left;
margin-bottom: 10px;
}
article > header time span {
font-size: 10px; font-weight: normal;
text-transform: uppercase;
}
article > header h1 {
font-size: 20px; float: left;
margin-left: 14px; text-shadow: 2px 2px 5px #333;
}
article > header h1 a {
color: #993333;
}
article > section header h1 {
font-size: 16px;
}
article p {
clear: both;
}
footer p {
text-align: center;
font-size: 12px;
color: #888;
margin-top: 24px;
}
Archivo CSS
Vdeo n 8. Nuevos selectores CSS3 (I)

Ejercicio 8
Vamos a hacer un ejercicio para probar los nuevos selectores de CSS3 que
hemos visto en el Vdeo n 8.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejercicio de nuevos selectores CSS3</title>
</head>
<body>
<p>Esta es una nueva pgina de prueba del curso</p>
<p>El objetivo de esta nueva pgina es probar los nuevos selectores de
CSS3</p>
<p>Este ejercicio no es puntuable, es slo una prueba>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>php</li>
</body>
</html>
A partir de este archivo HTML inserta dentro de la etiqueta head los siguientes
selectores:
Dentro de la etiqueta <p> inserta name=elemento.
Dentro de la etiqueta <li> inserta name=lista.
Dentro de <head> </head> escribe el siguiente cdigo:

<style type="text/css">
p[name="elemento"]{
color: #990033;
font-style: italic;
}
li:nth-child(2){
color: #33ffff;
font-style: italic;
}
li:nth-child(4){
color: #33ffff;
font-style: italic;
}
</style>
Ejectalo en el navegador y comprueba los cambios que hay con respecto al
cdigo original.
Vdeo n 8. Nuevas reglas CSS3 (II)

Ejercicio 9
En este ejercicio vamos a aplicar las nuevas reglas de CSS3 que hemos visto
en el vdeo.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header id=principal>
<span id=titulo>Nuevas reglas CSS-Curso de HTML5 y CSS3</span>
</header>
</body>
</html>
Introduce dentro de la etiqueta head el siguiente cdigo y ejectalo en el
navegador.
#principal{
width:500px;
background-color:#00F;
text-align:center;
margin:15px auto;
padding:15px;
border:3px solid #F00;
border-radius:20px 5px 15px 40px;
box-shadow:#999 5px 5px 5px;
}
#titulo{
font: bold 36px Verdana, Geneva, sans-serif;
text-shadow: #0F0 3px 3px 5px;
}
</style>
Vers el ejercicio tal y como aparece en el video-tutorial.
Ahora vamos a modificar los estilos CSS:
Etiqueta #principal:
o Dentro de la etiqueta width cambia 500 px por 700px.
o Cambia el background-color de #00F a #339900.
o En border cambia el color #F00 por #003333.
o Cambia el border-radius por 15px nicamente para que todos los
vrtices tengan una redondez uniforme.
Etiqueta #titulo:
o Cambia las caractersticas de font por las siguientes (font: 20px
Verdana, Geneva, sans-serif;
o En text-shadow cambia el color de #0F0 a #000000.
Vdeo n 9
Ejercicio 9
Tomando como ejemplo la pgina del ejercicio anterior, vamos a hacer
degradados y transiciones en CSS3.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header id=principal>
<span id=titulo>Nuevas reglas CSS-Curso de HTML5 y CSS3</span>
</header>
</body>
</html>
#principal{
width:500px;
background-color:#00F;
text-align:center;
margin:15px auto;
padding:15px;
border:3px solid #F00;
border-radius:20px 5px 15px 40px;
box-shadow:#999 5px 5px 5px;
}
#titulo{
font: bold 36px Verdana, Geneva, sans-serif;
text-shadow: #0F0 3px 3px 5px;
}
</style>
Dentro de la etiqueta #principal aade lo siguiente:
background:-moz-linear-gradient(top, #0BBFF, #1E90FF);
Aade una nueva equeta con el siguiente formato:
#principal:hover{
-moz-transform:rotate(5deg);
}
Guarda los cambios y ejecuta la pgina en el navegador Mozilla Firefox para
ver los cambios con respecto al ejercicio anterior.
Vdeos n 10 y n 11
Ejercicio 10-Ejercicio guiado
Copia en un documento HTML el siguiente cdigo. Las fotos las puedes
descargar de Internet (las que t prefieras).
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio guiado</title>
</head>
<body>
<header>
<hgroup>
<h1>Una seleccin de flores</h1>
<h2>Una seleccin de flores</h2>
</hgroup>
</header>
<img src="imagenes1.jpg" alt="flores de corte" width="100" height="100">
Foto1. Flores de Corte

</body>
</html>
A continuacin vamos a crear una hoja de estilos CSS3 externa. Antes que
nada hay que hacer un enlace en el documento html dentro de la etiqueta
<head>, aadiendo lo siguiente:
<link href="ejercicioguiado.css" rel="stylesheet">
El ttulo del documento CSS puede ser el que quieras, pero debe coincidir con
el enlace del documento HTML.
Al principio del documento CSS vamos a aadir un reset CSS. Introduce el que
tienes a continuacin.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*Fin del reset CSS*/
A continuacin, sigue las siguientes instrucciones para la hoja de estilos
externa:
1. Aade la etiqueta body con el estilo font-size:62.5%;
2. Aade la etiqueta h1 con los estilos siguientes:
font: normal 2.4em Verdana, Geneva, sans-serif;

background: -webkit-linear-gradient(left,#00008B,#4961E1);
background: -moz-linear-gradient(left,#00008B,#4961E1);
background: -o-linear-gradient(left,#00008B,#4961E1);
width: 35%;
border-radius: 10px;
margin: 15px auto;
text-align: center;
padding: 15px;
color: white;
box-shadow: #00F 5px 5px 10px;
text-shadow: #FFF 2px 2px 3px;
3. Aade la etiqueta h2 con los siguientes estilos:

font: bold 1.7em Verdana, Geneva, sans-serif;
margin:0;
padding:5px 0 5px 0;
color: black;
4. Aade la etiqueta section con los siguientes estilos:
width:91%;
border-top:1px dashed #808080;
margin:15px auto
5. Aade la etiqueta figure con el estilo float: left;
6. Aade la etiqueta figure img con los siguientes estilos
padding:4px;
background:grey;
border-radius:20px;
-moz-transition:-moz-transform 0.3s ease-in-out 0.1s;
box-shadow:#DCDCDC 5px 5px 10px;
7. Aade la etiqueta
transform:scale(1.2);
figure
img:hover
con
el
8. Aade la etiqueta figcaption con los siguientes estilos:

font-family:Arial;
font-size:1.3em;
9. Aade la etiqueta footer con los siguientes estilos:
clear:both;
padding-top:100px;
10. Aade la etiqueta footer p con los siguientes estilos:
font:1.6em Georgia;
color:#2F4F4F;
margin:10px 8px;
estilo
-moz-
Vdeo n 12
Ejercicio n 11-Introduccin a JavaScript
Vamos a comenzar a realizar ejercicios con JavaScript. De momento
comenzamos con uno muy sencillo. Teclea el siguiente cdigo en un archivo
HTML y ejectalo en varios navegadores.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 1 Javascript</title>
<script type="text/javascript">
alert("Bienvenidos al curso de JavaScript de Delta PC");
</script>
</head>
<body>
<p>Este es el primer ejercicio con JavasCript del curso HTML5
en Delta PC</p>
</body>
</html>
Vdeo n 13
Ejercicio n 12
Escribe el siguiente cdigo en un documento en formato HTML.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8">
<script src="ejercicio2.js"></script>
</head>
<body>
<p>Este es el segundo ejercicio de Javascript en el curso
HTML5.</p>
HTML5.</p>
HTML5.</p>
</body>
</html>
A continuacin, crea otro documento en formato JavaScript (.js) y escribe el

cdigo siguiente. Cuando ejecutes el archivo HTML al hacer clic sobre el primer
prrafo se abrir una ventana Bienvenido al curso de JavaScript.
Puedes utilizar tambin el documento JavaScript que utilizamos en el

documento anterior, realizando el siguiente cambio (est puesto en negrita):
function ejecuta(){
for(var i=0;i<3;i++){
document.getElementsByTagName("p")[i].onclick=saludo;
}
}
function saludo(){
alert("Bienvenido al curso de JavaScript");
}
window.onload=ejecuta;
Ejectalo en cualquier navegador y comprobars que se abre una ventana al
hacer clic sobre cualquiera de los prrafos.

Ejercicios HTML5

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Ejercicios HTML5

Enviado por

Direitos autorais:

Formatos disponíveis

EJERCICIOS HTML5

Los ejercicios estn basados en vdeos tutoriales de HTML 5 accesibles en la

Cambia el contenido de la forma siguiente:

Este ejemplo podra serte de ayuda

(( ANUNCIO DEL PDF ))

<a href="#" title="Link to this post"

font-family: Lucida Sans, Arial, Helvetica, sans-serif;

Vdeo n 8. Nuevos selectores CSS3 (I)

Dentro de <head> </head> escribe el siguiente cdigo:

Vdeo n 8. Nuevas reglas CSS3 (II)

<img src="imagenes5.jpg" alt="flores de corte" width="100" height="100">

font: normal 2.4em Verdana, Geneva, sans-serif;

3. Aade la etiqueta h2 con los siguientes estilos:

8. Aade la etiqueta figcaption con los siguientes estilos:

Escribe el siguiente cdigo en un documento en formato HTML.

A continuacin, crea otro documento en formato JavaScript (.js) y escribe el

Puedes utilizar tambin el documento JavaScript que utilizamos en el

Você também pode gostar