Ejemplos de Ejercicios

Ejercicio 6

Cabeceras

• Ejemplo con dos cabeceras en HTML
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo con 2 cabeceras< /title>
< /head>
< body>
< h1>Esto es una cabecera h1< /h1>
< p>Esto es un párrafo.< /p>
< h2>Esto es una cabecera h2< /h2>
< p>Esto es otro párrafo.< /p>
< /body>
< /html>
Resolución

• Ejemplo con seis cabeceras en HTML
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo con 6 cabeceras< /title>
< /head>
< body>
< h1>Esto es una cabecera h1< /h1>
< h2>Esto es una cabecera h2< /h2>
< h3>Esto es una cabecera h3< /h3>
< h4>Esto es una cabecera h4< /h4>
< h5>Esto es una cabecera h5< /h5>
< h6>Esto es una cabecera h6< /h6>
< /body>
< /html>
Resolución


Inicio

Ejercicio 7

Enlaces

• Elemplo de un enlace sencillo en html
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo de un enlace sencillo< /title>
< /head>
< body>
< p>< a href="http://www.abrirllave.com/">Abrirllave es un sitio web de tutoriales de informática.< /p>
< /body>
< /html>
Resolución

• Ejemplo de enlaces que abren otra pestaña de HTML
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo de enlace que abre otra pestaña< /title>
< /head>
< body>
< p>< a href="http://www.abrirllave.com/" target="_blank">Abrirllave< /a> es un sitio web de tutoriales de informática.< /p>
< /body>
< /html>
Resolución

• Ejemplo de enlaces a otro pagina HTML
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo de enlace a otra página< /title>
< /head>
< body>
< p>Enlace a < a href="otra-pagina.html">otra página< /a> ubicada en el mismo sitio web.< /p>
< /body>
< /html>
Resolución


Inicio

Ejercicio 8

Listas

• Ejemplo de lista desordenada en HTML
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo de lista desordenada< /title>
< /head>
< body>
< p>Lista desordenada de colores:< /p>
< ul>
< li>Rojo< /li>
< li>Amarillo< /li>
< li>Verde< /li>
< li>Blanco< /li>
< li>Naranja< /li>
< /ul>
< /body>
< /html>
Resolución

• Ejemplo de lista ordenada en HTML
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo de lista ordenada< /title>
< /head>
< body>
< p>Lista de 5 animales ordenados de mayor a menor tamaño:< /p>
< ol>
< li>Elefante< /li>
< li>Cebra< /li>
< li>Oveja< /li>
< li>Gato< /li>
< li>Ratón< /li>
< /ol>
< /body>
< /html>
Resolución

• Ejemplo de lista de descripción de términos en HTML
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo de lista de descripción de términos< /title>
< /head>
< body>
< p>Glosario de siglas:< /p>
< hr>
< dl>
< dt>CSS< /dt>
< dd>Cascading Style Sheets< /dd>
< dt>HTML< /dt>
< dd>HyperText Markup Language< /dd>
< dt>W3C< /dt>
< dd>World Wide Web Consortium< /dd>
< /dl>
< /body>
< /html>
Resolución


Inicio

Ejercicio 9

Imagenes

• Ejemplo de una imagen en HTML
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo de una imagen< /title>
< /head>
< body>
< img src="logo-abrirllave.gif" width="230" height="60" alt="Logo de Abrirllave.com"> < /body>
< /html>
Resolución


Inicio

Ejercicio 10

Diviciones

• Ejemplo de uso del elemento "div" y del atributo class en HTML
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo uso del elemento div y del atributo class< /title>
< style>
.rojo {color:red;}
.azul {color:blue;}
< /style>
< /head>
< body>
< p>Primer párrafo.< /p>
< div class="rojo">
< p>Segundo párrafo.< /p>
< p>Tercer párrafo.< /p>
< /div>
< p>Cuarto párrafo.< /p>
< div class="azul">
< p>Quinto párrafo.< /p>
< p>Sexto párrafo.< /p>
< /div>
< div class="rojo">
< p>Séptimo párrafo.< /p>
< /div>
< p>Octavo párrafo.< /p>
< /body>
< /html>
Resolución

• Ejemplo de una divicion en HTML
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo de una división< /title>
< /head>
< body>
< p>Primer párrafo.< /p>
< div style="color:red">
< p>Segundo párrafo.< /p>
< p>Tercer párrafo.< /p>
< /div>
< p>Cuarto párrafo.< /p>
< /body>
< /html>
Resolución

• Ejemplo de uso del elemento "div" y del atributo id en HTML
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo uso del elemento div y del atributo id< /title>
< style>
* {
margin:0;
padding:0;
}
a:link, a:visited, a:hover, a:active {
color:#0f0;
font-size:16px;
}
body {
background:#eee;
font-family:verdana;
}
h1 {
color:#c0c;
font-size:24px;
}
p {
font-size:16px;
}
ul {
list-style-type:none;
}
#cabecera {
color:#ff9;
background-color:#000;
padding:10px;
}
#contenedor {
margin:0 auto;
width:800px;
}
#contenido {
background-color:#ddd;
float:left;
height:500px;
padding:10px;
width:560px;
}
#menu {
background-color:#999;
float:left;
height:480px;
padding:20px;
width:180px;
}
#pie {
background-color:#bbb;
clear:both;
color:#900;
padding:10px;
text-align:center;
}
< /style>
< /head>
< body>
< div id="contenedor">
< div id="cabecera">
< p>Párrafo en la cabecera de la página.< /p>
< /div>
< div id="menu">
< ul>
< li>< a href="enlace-1.html">Enlace 1< /a>< /li>
< li>< a href="enlace-2.html">Enlace 2< /a>< /li>
< li>< a href="enlace-3.html">Enlace 3< /a>< /li>
< /ul>
< /div>
< div id="contenido">
< h1>Elemplo: Uso del elemento "div" y del atributo < i>id< /i>< /h1>
< p>Párrafo en el contenido de la página.< /p>
< /div>
< div id="pie">
< p>Párrafo en el pie de la página.< /p>
< /div>
< /div>
< /body>
< /html>
Resolución


Inicio