viernes, 29 de septiembre de 2017

2ª Parte Módulo 3 Actividad 17

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>Curriculum Vitae de Bruce Wayne</title>
<style>
#formacion li, #experiencia li {
      color: #00F;
}
#formacion li strong, #experiencia li strong {
      color: #000;
}
@media (min-width: 1201px) {
      #datos {
         float: left;
            width: 30%;
   }
      #curriculo {
         float: left;
            width: 70%;
   }
      #formacion {
         float: left;
            width: 50%;
   }
      #experiencia {
         float: left;
            width: 50%;
   }
}

@media (min-width: 601px) and (max-width: 1200px) {
   body {
      font-family: Arial, sans-serif;
   }
   #datos {
      float: left;
         width: 30%;
   }
   #curriculo {
      float: left;
         width: 70%;
   }
   #datos ul {
      list-style-type: none;
         padding: 0;
   }
   #datos li + li {
      margin-tip: 10px;
   }
   #datos li strong {
      display: block;
   }
}

@media {max-width: 600px) {
   body {
      font-family: Arial, sans-serif;
   }
   h1 {
      font-size: 1.5em;
   }
   h2 {
      font-size: 1.2em;
         border-bottom: 1px solid #000;
   }
   ul {
      list-style-type: none;
         padding: 0;
   }
   li + li {
      margin-tip: 10px;
   }
   li strong {
      display: block;
   }
}
</style>
</head>
<body>

<h1>Curriculum Vitae de Bruce Wayne</h1>

<div id="datos">
<h2>Datos personales</h2>
<ul>
<li>Nombre completo: <strong>Bruce Wayne</strong></li>
<li>Fecha de nacimiento: <strong>1/5/1939</strong></li>
<li>Lugar de nacimiento: <strong>Gotham City</strong></li>
</ul>
</div>

<div id="curriculo">
<div id="formacion">
<h2>Formación académica</h2>
<ul>
<li>1956-1961: <strong>Universidad del Espantapájaros</strong></li>
<li>1952-1956: <strong>Instituto de Dos Caras</strong></li>
<li>1944-1952: <strong>Escuela Primaria del Joker</strong></li>
</ul>
</div>

<div id="experiencia">
<h2>Experiencia laboral</h2>
<ul>
<li>1975-1985: <strong>En el paro</strong></li>
<li>1965-1975: <strong>Cazavillanos y demás chusma</strong></li>
<li>1962-1965: <strong>Aprendiz de superhéroe</strong></li>
</ul>
</div>
</div>

</body>
</html>
en No hay comentarios:

jueves, 28 de septiembre de 2017

2ª Parte Módulo 3 Actividad 12

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>Formulario de registro</title>
<style type="text/css">
/*  Características generales de la página */
body {
   font-size: 14px;
   font-family: Arial, sans-serif;
   background: #AAA;
}

/* El contenedor define la zona principal de cotenido */
#contenedor {
   background: #FFF;
   margin: 1em auto;
   padding: 1em;
   width: 767px;
}

/* El formulario está definido como una lista */
ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

ul li {
   border-top: 1px solid #CCC;
   margin: 1em 0;
   padding: 1em;
   width: auto;
   overflow: hidden;
}

/* El formulario se organiza en dos columnas, el título y los controles */
ul li label.titulo {
   float: left;
   width: 150px;
   text-align: right;
}

ul li div.controles {
   margin-left: 160px;
}

/* El último elemento del formulario es el botón "Registrarse" */
ul li.botones {
   border-top: 2px solid #CCC;
   clear: both;
   float: none;
   padding: 1em 0;
   text-align: right;
   width: 100%;
}

ul li.botones input {
   font-size: 18px;
}

/* El título de los elementos de la lista */
ul li label.titulo {
   font-weight: bold;
}

ul li div span {
   float: left;
   padding: 0.3em 0;
}

ul li div span.completo {
   width: 100%;
}

ul li div span.mitad {
   width; 50%;
}

ul li div span.tercio {
   width:33%;
}

ul li div span.dostercios {
   width: 66%;
}

/* Como se define display: block, se muestra en la línea siguiente */
ul li div span label {
   display: block;
   font-size: 12px;
   color: #333;
}

/* Configuración de los controes del formulario */
ul li input {
   padding: 0.2em;
}

input#apellido1, input#apellido2, input#direccion, input#email {
   width: 260px;
}
 input#codigopostal {
   width: 80px;
}

select#provincia {
   width: 90%;
}

select#pais {
width: 150px;
}

input#telefonofijo, input#telefonomovil {
   width:135px;
}

/* Cambia el color cuando se sitúa el cursor del ratón */
ul li:hover {
   background-color: #FF9;
}

ul li.botones:hover {
   background-color: transparent;
}

/* Destaca el control cuando recibe el foco */
ul li input, ul li select {
   border: 2px solid transparent;
   border-bottom: 2px solid black;
}

ul li.botones input {
   border: 2px solid #CCC;
}

ul li input:focus, ul li select:focus {
   border: 2px solid #F00;
}
</style>
</head>
<body>
<div id="contenedor">

<h1>Formulario de registro</h1>

<form method="post" action="#">
<ul>
<li>
   <label class="titulo" for="nombre">Nombre y apellidos</label>

   <div class="controles">
      <span class="completo">
         <input id="nombre" name="nombre" value=" " />
         <label for="nombre">Nombre</label>
      </span>

      <span class="completo">
         <input id="apellido1" name="apellido1" value=" " />
         <label for="apellido1">Primer apellido</label>
      </span>

      <span class="completo">
         <input id="apellido2" name="apellido2" value=" " />
         <label for="apellido2>Segundo apellido</label>
      </span>
   </div>
</li>

<li>
   <label class="titulo" for="direccion">Dirección</label>

   <div class="controles">
      <span class="completo">
         <input id="direccion" name="direccion" value=" " />
         <label for="direccion>Calle, número, piso, puerta</label>
      </span>

      <span class="tercio">
         <input id="codigopostal" name="codigopostal" value=" " />
         <label for="codigopostal">Código postal</label>
      </span>

      <span class="dostercios">
         <input id="municipio" name="municipio" value=" " />
         <label for="municipio">Municipio</label>
      </span>

      <span class="tercio">
         <select id="provincia" name="provincia">
            <option value=" "></option>
            <option value="provincia1">Provincia 1</option>
            <option value="provincia2">Provincia 2</option>
            <option value="provincia3">Provincia 3</option>
         </select>
         <label for="provincia">Provincia</label>
      </span>

      <span class="dostercios">
         <select id="pais" name="pais">
            <option value=" "></option>
            <option value="pais1">País 1</option>
            <option value="pais2">País 2</option>
            <option value="pais3">País 3</option>
         </select>
         <label for="pais">País</label>
      </span>
   </div>
</li>

<li>
   <label class="titulo" for="email">Email</label>

   <div class="controles>
      <span class="completo">
         <input id="email" name="email" value=" " />
      </span>
   </div>
</li>

<li>
   <label class="titulo" for="telefonofijo">Teléfono</label>

   <div class="controles">
      <span class="mitad">
         <input id="telefonofijo" name="telefonofijo" value=" " />
         <label for="telefonofijo">Fijo</label>
      </span>

      <span class="mitad">
         <input id="telefonomovil" name="telefonomovil" value=" " />
         <label for="telefonomovil">Móvil</label>
      </span>
   </div>
</li>

<li class="botones">
   <input id="alta" type=" submit" value="Registrarse" />
</li>

</ul>
</form>

</div>

</body>
</html>
en No hay comentarios:

2ª Parte Módulo 3 Actividad 11

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>registro - iDESWEB</title>
<style>
body {
      font-family: Arial, Helvetica, sans-serif;
      width: 90%;
      margin: 0 auto;
}
header {
      text-align: center;
}
h1, h2 {
      font-family: Georgia, serif;
}
h1 {
      font-size: 3em;
}
fieldset {
      margin: 1em auto;
}
legend {
      font-size: 1.2em;
      font-weight: bold;
      text-transform: uppercase;
}
label {
      font-weight: bold;
      display: block;
}
input:focus, select:focus {
      background-color: yellow;
}
input:hover, select:hover {
      background-color: red;
}
#boton-crear {
      font-size: 2em;
      padding: 0.5em;
}
.inline {
      display: inline;
}
.centrado {
      text-align: center;
}


</style>
</head>
<body>
<header>
<h1>iDESWEB</h1>
<h2>Formulario de Registro</h2>
</header>

<form action="" method="post">
<fieldset>
<legend>¿Quién eres?</legend>
<p>
<label for="nombre">Nombre</label>
<input type="text" name="nombre" id="nombre"/>
<label for="apellidos">Apellidos</label>
<input type="text" name="apellidos" id="apellidos"/>
</p>

<p>
<label for="nombre">Correo electrónico</label>
<input type="text" name="correo" id="correo"/>
</p>

<p>
<label for="dia">Fecha de nacimiento</label>
<select name="dia" id="dia">
<option>Día</option>
</select>

<select name="mes" id="mes">
<option>Mes</option>
</select>

<select name="anyo" id="anyo">
<option>Año</option>
</select>
</p>
</fieldset>

<fieldset>
<legend>¿De dónde eres?</legend>
<p>
<label for="ciudad">Ciudad</label>
<input type="text" name="ciudad" id="ciudad"/>
</p>

<p>
<label for="cp">Código postal</label>
<input type="text" name="cp" id="cp"/>
</p>

<p>
<label for="pais">País</label>
<select name="pais" id="pais">
<option>País</option>
</select>
</p>
</fieldset>

<fieldset>
<legend>¿Cómo quierer iniciar sesión?</legend>
<p>
<label for="nomusu">Nombre de usuario</label>
<input type="text" name="nomusu" id="nomusu"/>
</p>
<p>
<label for="contrasenya">contraseña</label>
<input type="password" name="contrasenya" id="contrasenya"/>
</p>
<p>
<label for="repcontrasenya">Vuelve a escribir la contraseña</label>
<input type="password" name="repcontrasenya" id="repcontrasenya"/>
</p>
</fieldset>

<fieldset>
<legend>Condiciones de registro</legend>
<p>

<label>Deseo recibir ofertas de iDESWEB</label>
<input type="radio" name="ofertas" id="ofertas1" value="1"/> <label for="ofertas1" class="inline">Una vez al día</label>
<input type="radio" name="ofertas" id="ofertas2" value="2"/> <label for="ofertas2" class="inline">Una vez a la semana</label>
<input type="radio" name="ofertas" id="ofertas3" value="3"/> <label for="ofertas3" class="inline">Una vez al mes</label>
</p>
<p>
<input type="checkbox" name="acepto" id="acepto"/>
<label for="acepto" class="inline">Acepto el acuerdo de servicios, la declaración de privacidad y la declaración de uso de cookies</label>
</p>
</fieldset>

<p class="centrado">
<input type="submit" value="Crear cuenta" id="boton-crear"/>
</p>
</form>

</body>
<html>
en No hay comentarios:

miércoles, 27 de septiembre de 2017

2ª Parte Módulo 3 Actividad 8

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML &amp; CSS: Curso práctico avanzado</title>
<style>
body {
      width: 80%;
      margin: 0 auto;
}
h1 {
      text-align: center;
}
#datos, #principal {
      float: left;
      margin: 0;
      padding: 0;
}
#datos {
      width: 25%;
}
#principal {
      width: 75%;
}
#contendio {
      list-style-type: none;
      padding: 0;
}
#contenido li {
      float: left;
      width: 33%;
}
</style>
</head>
<body>
<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<div id="datos">
<h2>Datos del libro</h2>

<ul>
<li>Título: HTML &amp; CSS: Curso práctico avanzado</li>
<li>Autor: Sergio Luján Mora</li>
<li>Editorial: Publicaciones Altaria</li>
<li>Año de publicación: 2015</li>
<li>ISBN: 978-84-944049-4-8</li>
</ul>
</div>

<div id="principal">
<h2>Descripción del libro</h2>

<p>
Aunque los inicios de Internet se remontan a los años sesenta, no ha sido hasta los años noventa cuando, gracias a la Web, se ha extendido su uso por todo el mundo. En pocos años, la Web ha evolucionado enormemente: se ha pasado de páginas sencillas, con pocas imágenes y contenidos estáticos que eran visitadas por unos pocos usuarios a páginas complejas, con contenidos dinámicos que provienen de bases de datos y que son visitadas por miles de usuarios al mismo tiempo.
</p>

<p>
Todas las páginas están internamente construidas con la misma tecnología, con el Lenguaje de marcas de hipertexto (Hypertext Markup Language, HTML) y con las Hojas de estilo en cascada (Cascading Style Sheets, CSS).
</p>

<p>
Este libro es adecuado para cualquiera que tenga interés en aprender a desarrollar sus propias páginas web. No son necesarios conocimientos previos para aprender con este libro, lo único que es necesario es saber utilizar un ordenador y saber navegar por la Web.
</p>


<h2>Contenido del libro</h2>

<p>
El contenido de este libro se estructura en tres apartados bien diferenciados:
</p>

<ul id="contenido">
<li>En la primera parte del libro se trabajan conceptos generales que son necesarios para poder desarrollar páginas web; se explican conceptos de estructura física y estructura lógica (o estructura de navegación) de un sitio web. Se detalla cómo influye la estructura física en las URL o direcciones que se emplean a la hora de crear los enlaces de un sitio web. Pasando por el concepto de "estándar web", un término general que se emplea para refererirse a los estándares que define su funcionamiento como HTML y CSS, empleados para el desarrollo de las páginas web en el lado del cliente.</li>

<li>En la segunda parte se trabaja HTML. Partiendo de la estructura básica de una página web, se explican las etiquetas de HTML que se utilizan para definir el texto, los enlaces, las listas, las tablas, los formularios y los elementos multimedia.</li>

<li>En la tercera y última parte se explica CSS, el lenguaje que se emplea para definir el formato y la presentación de una página web. Se explica cómo utilizar el color, cómo definir la presentación del texto, de las tablas y de los formularios; cómo realizar transformaciones y transiciones con el fin de diseñar una página web.</li>
</ul>
</div>
</body>
</html>
en No hay comentarios:

martes, 26 de septiembre de 2017

2ª Parte Módulo 3 Actividad 7

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML &amp; CSS: Curso práctico avanzado</title>
<style>
body {
      width: 60em;
      margin: 0 auto;
}
h1 {
      text-align: center;
}
#datos, #principal {
      float: left;
      margin: 0 ;
      padding: 0;
}
#datos {
      width: 16em;
}
#principal {
      width: 44em;
}
#contenido {
      list-style-type: none;
      padding: 0;
}
#contenido li {
      float: left;
      width: 33%;
}

</style>
</head>
<body>
<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<div id="datos">
<h2>Datos del libro</h2>

<ul>
<li>Título: HTML &amp; CSS: Curso práctico avanzado</li>
<li>Autor: Sergio Luján Mora</li>
<li>Editorial: Publicaciones Altaria</li>
<li>Año de publicación: 2015</li>
<li>ISBN: 978-84-944049-4-8</li>
</ul>
</div>

<div id="principal">
<h2>Descripción del libro</h2>

<p>
Aunque los inicios de Internet se remontan a los años sesenta, no ha sido hasta los años noventa cuando, gracias a la Web, se ha extendido su uso por todo el mundo. En pocos años, la Web ha evolucionado enormemente: se ha pasado de páginas sencillas, con pocas imágenes y contenidos estáticos que eran visitadas por unos pocos usuarios a páginas complejas, con contenidos dinámicos que provienen de bases de datos y que son visitadas por miles de usuarios al mismo tiempo.
</p>

<p>
Todas las páginas están internamente construidas con la misma tecnología, con el Lenguaje de marcas de hipertexto (Hypertext Markup Language, HTML) y con las Hojas de estilo en cascada (Cascading Style Sheets, CSS).
</p>

<p>
Este libro es adecuado para cualquiera que tenga interés en aprender a desarrollar sus propias páginas web. No son necesarios conocimientos previos para aprender con este libro, lo único que es necesario es saber utilizar un ordenador y saber navegar por la Web.
</p>

<h2>Contenido del libro</h2>

<p>
El contenido de este libro se estructura en tres apartados bien diferenciados:
</p>

<ul id="contenido">
<li>En la primera parte del libro se trabajan conceptos generales que son necesarios para poder desarrollar páginas web; se explican conceptos de estructura física y estructura lógica (o estructura de navegación) de un sitio web. Se detalla cómo influye la estructura física en las URL o direcciones que se emplean a la hora de crear los enlaces de un sitio web. Pasando por el concepto de "estándar web", un término general que se emplea para refererirse a los estándares que define su funcionamiento como HTML y CSS, empleados para el desarrollo de las páginas web en el lado del cliente.</li>

<li>En la segunda parte se trabaja HTML. Partiendo de la estructura básica de una página web, se explican las etiquetas de HTML que se utilizan para definir el texto, los enlaces, las listas, las tablas, los formularios y los elementos multimedia.</li>

<li>En la tercera y última parte se explica CSS, el lenguaje que se emplea para definir el formato y la presentación de una página web. Se explica cómo utilizar el color, cómo definir la presentación del texto, de las tablas y de los formularios; cómo realizar transformaciones y transiciones con el fin de diseñar una página web.</li>
</ul>
</div>
</body>
</html>
en No hay comentarios:

2ª Parte Módulo 2 Examen

1 En CSS para indicar que una declaración de estilo sobrescribe a cualquier otra, independientemente de su especificidad, se emplea:

!important

2 En CSS ¿Cómo se indica un color azul casi transparente?

 rgba(0,0,255,0.1)

3 En CSS para cambiar el marcador de una lista se emplea:

list-style-type

4 En CSS para definir la alineación del texto se emplea:

text-align

5 En CSS para seleccionar el grosor del tipo de letra se emplea:

font-weight

6 En CSS para definir una imagen como marcador de una lista se emplea:

list-style-image

7 En CSS si se quiere eliminar el subrayado de los enlaces, se debe utilizar:

text-decoration

8 Qué propiedad de CSS se emplea para cambiar el tipo de letra de un elemento:

font-family

9 En el modelo de caja de CSS para modificar la forma de calcular las dimensiones, se emplea:

box-sizing

10 En CSS para cambiar el color del texto, se emplea:

color
en No hay comentarios:

2ª Parte Módulo 2 Actividad 16

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML &amp; CSS: Curso práctico avanzado</title>
<style>
body {
      padding-left: 10px;
      padding-right: 10px;
}
h1 {
      border: 2px solid #00F;
      padding-left: 10px;
      margin-top: 30px;
      margin-bottom: 30px;
}
h2 {
      border: 2px solid #AAA;
      padding: 5px;
      margin-top: 15px;
      margin-bottom: 15px;

}
ul {
      border: 2px solid #0F0;
}
li + li {
      margin-top: 15px;
}
</style>
</head>
<body>
<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<h2>Datos del libro</h2>

<ul id="datos">
<li>Título: HTML &amp; CSS: Curso práctico avanzado</li>
<li>Autor: Sergio Luján Mora</li>
<li>Editorial: Publicaciones Altaria</li>
<li>Año de publicación: 2015</li>
<li>ISBN: 978-84-944049-4-8</li>
</ul>


<h2>Descripción del libro</h2>

<p>
Aunque los inicios de Internet se remontan a los años sesenta, no ha sido hasta los años noventa cuando, gracias a la Web, se ha extendido su uso por todo el mundo. En pocos años, la Web ha evolucionado enormemente: se ha pasado de páginas sencillas, con pocas imágenes y contenidos estáticos que eran visitadas por unos pocos usuarios a páginas complejas, con contenidos dinámicos que provienen de bases de datos y que son visitadas por miles de usuarios al mismo tiempo.
</p>

<p>
Todas las páginas están internamente construidas con la misma tecnología, con el Lenguaje de marcas de hipertexto (Hypertext Markup Language, HTML) y con las Hojas de estilo en cascada (Cascading Style Sheets, CSS).
</p>

<p>
Este libro es adecuado para cualquiera que tenga interés en aprender a desarrollar sus propias páginas web. No son necesarios conocimientos previos para aprender con este libro, lo único que es necesario es saber utilizar un ordenador y saber navegar por la Web.
</p>


<h2>Contenido del libro</h2>

<p>
El contenido de este libro se estructura en tres apartados bien diferenciados:
</p>

<ul id="contenido">
<li>En la primera parte del libro se trabajan conceptos generales que son necesarios para poder desarrollar páginas web; se explican conceptos de estructura física y estructura lógica (o estructura de navegación) de un sitio web. Se detalla cómo influye la estructura física en las URL o direcciones que se emplean a la hora de crear los enlaces de un sitio web. Pasando por el concepto de "estándar web", un término general que se emplea para refererirse a los estándares que define su funcionamiento como HTML y CSS, empleados para el desarrollo de las páginas web en el lado del cliente.</li>

<li>En la segunda parte se trabaja HTML. Partiendo de la estructura básica de una página web, se explican las etiquetas de HTML que se utilizan para definir el texto, los enlaces, las listas, las tablas, los formularios y los elementos multimedia.</li>

<li>En la tercera y última parte se explica CSS, el lenguaje que se emplea para definir el formato y la presentación de una página web. Se explica cómo utilizar el color, cómo definir la presentación del texto, de las tablas y de los formularios; cómo realizar transformaciones y transiciones con el fin de diseñar una página web.</li>
</ul>
</body>
</html>
en No hay comentarios:

2ª Parte Módulo 2 Actividad 15

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML &amp; CSS: Curso práctico avanzado</title>
<style>
h1 {
      border-bottom: 2px solid #00F;
}

h2 {
      border: 2px solid #AAA;
}

#datos {
      border-top: 4px dotted #F00;
      border-bottom: 4px dotted #F00;
}

#contenido {
      border: 2px dashed #0F0;
}

</style>
</head>
<body>
<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<h2>Datos del libro</h2>

<ul id="datos">
<li>Título: HTML &amp; CSS: Curso práctico avanzado</li>
<li>Autor: Sergio Luján Mora</li>
<li>Editorial: Publicaciones Altaria</li>
<li>Año de publicación: 2015</li>
<li>ISBN: 978-84-944049-4-8</li>
</ul>


<h2>Descripción del libro</h2>

<p>
Aunque los inicios de Internet se remontan a los años sesenta, no ha sido hasta los años noventa cuando, gracias a la Web, se ha extendido su uso por todo el mundo. En pocos años, la Web ha evolucionado enormemente: se ha pasado de páginas sencillas, con pocas imágenes y contenidos estáticos que eran visitadas por unos pocos usuarios a páginas complejas, con contenidos dinámicos que provienen de bases de datos y que son visitadas por miles de usuarios al mismo tiempo.
</p>

<p>
Todas las páginas están internamente construidas con la misma tecnología, con el Lenguaje de marcas de hipertexto (Hypertext Markup Language, HTML) y con las Hojas de estilo en cascada (Cascading Style Sheets, CSS).
</p>

<p>
Este libro es adecuado para cualquiera que tenga interés en aprender a desarrollar sus propias páginas web. No son necesarios conocimientos previos para aprender con este libro, lo único que es necesario es saber utilizar un ordenador y saber navegar por la Web.
</p>


<h2>Contenido del libro</h2>

<p>
El contenido de este libro se estructura en tres apartados bien diferenciados:
</p>

<ul id="contenido">
<li>En la primera parte del libro se trabajan conceptos generales que son necesarios para poder desarrollar páginas web; se explican conceptos de estructura física y estructura lógica (o estructura de navegación) de un sitio web. Se detalla cómo influye la estructura física en las URL o direcciones que se emplean a la hora de crear los enlaces de un sitio web. Pasando por el concepto de "estándar web", un término general que se emplea para refererirse a los estándares que define su funcionamiento como HTML y CSS, empleados para el desarrollo de las páginas web en el lado del cliente.</li>

<li>En la segunda parte se trabaja HTML. Partiendo de la estructura básica de una página web, se explican las etiquetas de HTML que se utilizan para definir el texto, los enlaces, las listas, las tablas, los formularios y los elementos multimedia.</li>

<li>En la tercera y última parte se explica CSS, el lenguaje que se emplea para definir el formato y la presentación de una página web. Se explica cómo utilizar el color, cómo definir la presentación del texto, de las tablas y de los formularios; cómo realizar transformaciones y transiciones con el fin de diseñar una página web.</li>
</ul>
</body>
</html>
en No hay comentarios:

lunes, 18 de septiembre de 2017

2ª Parte Módulo 2 Actividad 6

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Curriculum Vitae de Bruce Wayne</title>
<style>

body {
    font-family: Calibri, Arial, Helvetica, sans-serif;
}

h1  {
    font-family: Cambria, Times, serif;
    color: #1F497D;
    background-color: #BFBFBF;
    font-size: 24px;
    letter-spacing: 0.5em;
    word-spacing: 1.5em;
    text-align: center;
    text-transform: uppercase;
}

h2 {
    font-family: Cambria, Times, serif;
    color: #632423;
    font-size: 18px;
    letter-spacing: 0.5em;
    text-transform: uppercase;
}

li {
    font-style: italic;
    font-weight: bold;
}

strong {
    font-style: normal;
    font-variant: small-caps;
}

</style>
</head>
<body>

<h1>Curriculum Vitae de Bruce Wayne</h1>

<h2>Datos personales</h2>
<ul>
<li>Nombre completo: <strong>Bruce Wayne</strong></li>
<li>Fecha de nacimiento: <strong>1/5/1939</strong></li>
<li>Lugar de nacimiento: <strong>Gotham City</strong></li>
</ul>

<h2>Formación académica</h2>
<ul>
<li>1956-1961: <strong>Universidad del Espantapájaros</strong></li>
<li>1952-1956: <strong>Instituto de Dos Caras</strong></li>
<li>1944-1952: <strong>Escuela Primaria del Joker</strong></li>
</ul>

<h2>Experiencia laboral</h2>
<ul>
<li>1975-1985: <strong>En el paro</strong></li>
<li>1965-1975: <strong>Cazavillanos y demás chusma</strong></li>
<li>1962-1965: <strong>Aprendiz de superhéroe</strong></li>
</ul>

</body>
</html>
en No hay comentarios:

2ª Parte Módulo 2 Actividad 5

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Curriculum Vitae de Bruce Wayne</title>
<style>

h1 {
    text-align: center;
    text-transform: uppercase;
}

h2 {
    text-transform: uppercase;
}

strong {
    text-decoration: underline;
}

</style>
</head>
<body>

<h1>Curriculum Vitae de Bruce Wayne</h1>

<h2>Datos personales</h2>
<ul>
<li>Nombre completo: <strong>Bruce Wayne</strong></li>
<li>Fecha de nacimiento: <strong>1/5/1939</strong></li>
<li>Lugar de nacimiento: <strong>Gotham City</strong></li>
</ul>

<h2>Formación académica</h2>
<ul>
<li>1956-1961: <strong>Universidad del Espantapájaros</strong></li>
<li>1952-1956: <strong>Instituto de Dos Caras</strong></li>
<li>1944-1952: <strong>Escuela Primaria del Joker</strong></li>
</ul>

<h2>Experiencia laboral</h2>
<ul>
<li>1975-1985: <strong>En el paro</strong></li>
<li>1965-1975: <strong>Cazavillanos y demás chusma</strong></li>
<li>1962-1965: <strong>Aprendiz de superhéroe</strong></li>
</ul>

</body>
</html>
en No hay comentarios:

2ª Parte Módulo 2 Actividad 4

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Curriculum Vitae de Bruce Wayne</title>
<style>

body {
    font-family: Arial, Verdana;
}

h1 {
    font-family: Georgia;
    font-size: 32px;
    font-variant: small-caps;
}

h2 {
    font-family: Georgia;
    font-size: 24px;
    font-variant: small-caps;
    font-style: italic;
}

li {
    font-weight: bold;
}

strong {
    font-weight: normal;
}

</style>
</head>
<body>

<h1>Curriculum Vitae de Bruce Wayne</h1>

<h2>Datos personales</h2>
<ul>
<li>Nombre completo: <strong>Bruce Wayne</strong></li>
<li>Fecha de nacimiento: <strong>1/5/1939</strong></li>
<li>Lugar de nacimiento: <strong>Gotham City</strong></li>
</ul>

<h2>Formación académica</h2>
<ul>
<li>1956-1961: <strong>Universidad del Espantapájaros</strong></li>
<li>1952-1956: <strong>Instituto de Dos Caras</strong></li>
<li>1944-1952: <strong>Escuela Primaria del Joker</strong></li>
</ul>

<h2>Experiencia laboral</h2>
<ul>
<li>1975-1985: <strong>En el paro</strong></li>
<li>1965-1975: <strong>Cazavillanos y demás chusma</strong></li>
<li>1962-1965: <strong>Aprendiz de superhéroe</strong></li>
</ul>

</body>
</html>
en No hay comentarios:

2ª Parte Módulo 2 Actividad 3 

<style>
ul {
     list-style-type: none;
     text-align: center;
   /* Suficiente anchura para que quepa "Presentación" */
  width: 120px;
     padding: 0;
}

li {
    background-color: #00F;
    color: #FFF;
  /* El borde blanco separa los elementos */
  border: 2px solid #FFF;
}

li a {
    color: #FFF;
   text-decoration: none;
  /* Necesario para que el enlace ocupe todo el ancho del elemento  de la lista */
  display: block;
    width: 100%;
}

  /* Efecto cuando se situa el ratón encima de un elemento de la lista o cuando recibe el foco del teclado */
li a:hover, li a:focus {
 /* ¿Qué pasa si se utiliza la propiedad border */
  outline: 2px solid #F00;
}

</style>
en No hay comentarios:

sábado, 16 de septiembre de 2017

2ª Parte Módulo 2 Actividad 2

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejemplo de listas</title>
<style>

.none {
   list-style-type: none;
}

.circle {
   list-style-type: circle;
}

.square {
   list-style-type: square;
}

.numRom {
   list-style-type: lower-roman;
}

.greekLet {
   list-style-type: lower-alpha;
}

</style>
</head>
<body>
<p>Lista sin elemento gráfico:</p>
<ul class="none">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>

<p>Lista con círculos:</p>
<ul class="circle">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>

<p>Lista con cuadrados:</p>
<ul class="square">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>

<p>Lista con números romanos:</p>
<ol class="numRom">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>

<p>Lista con letras griegas:</p>
<ol class="greekLet">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
</body>
</html>
en No hay comentarios:

viernes, 15 de septiembre de 2017

2ª Parte Módulo 1 Examen

En CSS el selector "h1, p" selecciona:

- Selecciona todos los h1 y los p.

En CSS, que pseudo clase se emplea para definir una propiedad cuando un elemento recibe el foco

- Hover

En CSS, ¿Cómo se escribe un selector para que una regla se aplique a todo el texto en negrita que se encuentre dentro de una lista no ordenada?

- ul b

En CSS, la expresión ".elemento" es un selector

- De clase

¿Qué atributo de HTML se emplea para definir un estilo en línea?

- Style

¿Qué código hexacecimal equivale al color rgb(0, 255, 255) en CSS?

- #00FFFF

En CSS, para indicar el juego de caracteres en una hoja de estilo se emplea

- @charset

¿Cuál de los siguientes no es un código válido de color en CSS?

- rgb(100, 200, 300)

En CSS, ¿cómo se selecciona la primera letra de un párrafo?

- p:first-letter

En CSS, para definir el color del margen de un elemento se emplea la propiedad

- Las anteriores respuestas no son correctas.
en No hay comentarios:

2ª Parte Módulo 1 Actividad 19

Este ejercicio resulta bastante difícil. Y sobre el hecho de encontrar las imágenes y ponerlas, no he sido capaz.

<style>
table {
   font-family: Arial, Helvetica, sans-serif;
   text-align: center;
}

table, tr, th, td {
   border: 1px solid #333;
   line-height: 2em;
}

th {
   background-color: #F5F5F5;
   padding: 0 .5em;
}

td {
   padding: 0 .3em;
}

th.euro {
  background: #E6F3FF;
  padding: 0 .3em 0 1.2em;
}

th.dolar {
  background: #E6F3FF;
  padding: 0 .3em 0 1.2em;
}
th.libra {
  background: #E6F3FF;
  padding: 0 .3em 0 1.2em;
}
th.yen {
  background: #E6F3FF;
  padding: 0 .3em 0 1.2em;
}

tr:nth-child(n+1) td {
   text-align: right;
}

tr:nth-child(2n) {
   background-color: #FFFFCC;
}

tr:hover {
   background: #FFFF66;
}

</style>
en No hay comentarios:

2ª Parte Módulo 1 Actividad 18

<style>
h2:first-letter {
   font-size: 2em;
}

h2 + p{
  text-indent: 2em;
}

a:before{
  content: "→";
}

abbr:after{
  content: "(" attr(title) ")";
  font-style: italic;
}

</style>
en No hay comentarios:

2ª Parte Módulo 1 Actividad 13

<style>
a {
color: #F00;
text-decoration: none;
}
a:visited {
color: #0A0;
}
a:hover {
color: #FFF;
background-color: #F00;
text-decoration: underline;
}
a:focus {
color: #00F;
text-decoration: underline;
}
a:active {
color: #F60;
background-color: #FFF;
}

</style>
en No hay comentarios:

2ª Parte Módulo 1 Actividad 12

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejercicio de selectores</title>
<style>
#fila1 {color: teal;}
#fila2 {color: red;}
#fila3 {color: blue;}
#fila4 {color: orange;}
#fila5 {color: purple;}
#fila6 {color: olive;}
#fila7 {color: fuchsia;}
#fila8 {color: green;}

td + td {background-color: red;}
td + td + td {background-color: green;}
td + td + td + td {background-color: blue;}
</style>
</head>
<body>
<table border="1">
<tr id="fila1"><td>teal</td><td>teal</td><td>teal</td><td>teal</td></tr>
<tr id="fila2"><td>red</td><td>red</td><td>red</td><td>red</td></tr>
<tr id="fila3"><td>blue</td><td>blue</td><td>blue</td><td>blue</td></tr>
<tr id="fila4"><td>orange</td><td>orange</td><td>orange</td><td>orange</td></tr>
<tr id="fila5"><td>purple</td><td>purple</td><td>purple</td><td>purple</td></tr>
<tr id="fila6"><td>olive</td><td>olive</td><td>olive</td><td>olive</td></tr>
<tr id="fila7"><td>fuchsia</td><td>fuchsia</td><td>fuchsia</td><td>fuchsia</td></tr>
<tr id="fila8"><td>green</td><td>green</td><td>green</td><td>green</td></tr>
</table>
</body>
</html>
en No hay comentarios:

2ª Parte Módulo 1 Actividad 11

<style>
/* Todos los elementos de la pagina */
* {
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
}

/* Todos los parrafos de la pagina */
p {
  color: #555;
}

/* Todos los párrafos contenidos en #primero */
#primero p {
  color: #369;
}

/* Todos los enlaces la pagina */
a {
  color: #C30;
}

/* Los elementos <em> contenidos en #primero */
#primero em {
  color: #0000BB;
  background-color: #FFFFCC;
}

/* Todos los elementos <em> con la clase "especial" en toda la pagina */
em .especial {
  color: #FFFF00;
  background: #000000;
}

/* Todos los elementos <span> contenidos en la clase "normal" */
.normal span {
  font-weight: bold;
}
</style>
en No hay comentarios:

jueves, 14 de septiembre de 2017

2ª Parte Módulo 1 Actividad 6




<meta charset="utf-8">
<title>HTML &amp; CSS: Curso práctico avanzado</title>
<link href="estilos.css" rel="stylesheet">

<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<h2>Datos del libro</h2>

<ul>
<li><span>Título:</span> HTML &amp; CSS: Curso práctico avanzado</li>
<li><span>Autor:</span> Sergio Luján Mora</li>
<li><span>Editorial:</span> Publicaciones Altaria</li>
<li><span>Año de publicación:</span> 2015</li>
<li><span>ISBN:</span> 978-84-944049-4-8</li>
</ul>


<h2>Descripción del libro</h2>

<p>
Aunque los inicios de <strong>Internet</strong> se remontan a los años sesenta, no ha sido hasta los años noventa cuando, gracias a la <strong>Web</strong>, se ha extendido su uso por todo el mundo. En pocos años, la <strong>Web</strong> ha evolucionado enormemente: se ha pasado de páginas sencillas, con pocas imágenes y contenidos estáticos que eran visitadas por unos pocos usuarios a páginas complejas, con contenidos dinámicos que provienen de bases de datos y que son visitadas por miles de usuarios al mismo tiempo.
</p>

<p>
Todas las páginas están internamente construidas con la misma tecnología, con el Lenguaje de marcas de hipertexto (<em>Hypertext Markup Language, HTML</em>) y con las Hojas de estilo en cascada (<em>Cascading Style Sheets, CSS</em>).
</p>

<p>
Este libro es adecuado para cualquiera que tenga interés en aprender a desarrollar sus propias páginas web. No son necesarios conocimientos previos para aprender con este libro, lo único que es necesario es saber utilizar un ordenador y saber navegar por la <strong>Web</strong>.
</p>


<h2>Contenido del libro</h2>

<p>
El contenido de este libro se estructura en tres apartados bien diferenciados:
</p>

<ul>
<li>En la primera parte del libro se trabajan conceptos generales que son necesarios para poder desarrollar páginas web; se explican conceptos de estructura física y estructura lógica (o estructura de navegación) de un sitio web. Se detalla cómo influye la estructura física en las <em>URL</em> o direcciones que se emplean a la hora de crear los enlaces de un sitio web. Pasando por el concepto de "estándar web", un término general que se emplea para refererirse a los estándares que define su funcionamiento como <em>HTML</em> y <em>CSS</em>, empleados para el desarrollo de las páginas web en el lado del cliente.</li>

<li>En la segunda parte se trabaja <em>HTML</em>. Partiendo de la estructura básica de una página web, se explican las etiquetas de <em>HTML</em> que se utilizan para definir el texto, los enlaces, las listas, las tablas, los formularios y los elementos multimedia.</li>

<li>En la tercera y última parte se explica <em>CSS</em>, el lenguaje que se emplea para definir el formato y la presentación de una página web. Se explica cómo utilizar el color, cómo definir la presentación del texto, de las tablas y de los formularios; cómo realizar transformaciones y transiciones con el fin de diseñar una página web.</li>
</ul>



/******************************/
/* Escribe aquí el código CSS */
/******************************/

h1 {
color: #F00;
font-family: Verdana, Calibri, sans-serif;
font-size: 32px;
}

h2 {
color: #A00;
font-family: Verdana, Calibri, sans-serif;
font-size: 24px;
}

span {
color: #060;
}

strong {
font-size: 20px;
}

em {
color: #FFF;
background-color: #000;
}
en No hay comentarios:

2ª Parte Módulo 1, Actividad 5

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML &amp; CSS: Curso práctico avanzado</title>
<style>

body {
     color: #00F;
     background-color: #CFC;
     font-family: Georgia, Cambria, serif;
     font-size: 16px;
}

h1 {
     color: #F00;
     font-family: Verdana, Calibri, sans-serif;
     font-size: 32px;
}

h2 {
     color: #A00;
     font-family: Verdana, Calibri, sans-serif;
     font-size: 24px;
}

span {
      color: #060;
}

strong {
      font-size: 20px;
}

em {
      color: #FFF;
      background-color: #000;
}

</style>

</head>
<body>
<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<h2>Datos del libro</h2>

<ul>
<li><span>Título:</span> HTML &amp; CSS: Curso práctico avanzado</li>
<li><span>Autor:</span> Sergio Luján Mora</li>
<li><span>Editorial:</span> Publicaciones Altaria</li>
<li><span>Año de publicación:</span> 2015</li>
<li><span>ISBN:</span> 978-84-944049-4-8</li>
</ul>


<h2>Descripción del libro</h2>

<p>
Aunque los inicios de <strong>Internet</strong> se remontan a los años sesenta, no ha sido hasta los años noventa cuando, gracias a la <strong>Web</strong>, se ha extendido su uso por todo el mundo. En pocos años, la <strong>Web</strong> ha evolucionado enormemente: se ha pasado de páginas sencillas, con pocas imágenes y contenidos estáticos que eran visitadas por unos pocos usuarios a páginas complejas, con contenidos dinámicos que provienen de bases de datos y que son visitadas por miles de usuarios al mismo tiempo.
</p>

<p>
Todas las páginas están internamente construidas con la misma tecnología, con el Lenguaje de marcas de hipertexto (<em>Hypertext Markup Language, HTML</em>) y con las Hojas de estilo en cascada (<em>Cascading Style Sheets, CSS</em>).
</p>

<p>
Este libro es adecuado para cualquiera que tenga interés en aprender a desarrollar sus propias páginas web. No son necesarios conocimientos previos para aprender con este libro, lo único que es necesario es saber utilizar un ordenador y saber navegar por la <strong>Web</strong>.
</p>


<h2>Contenido del libro</h2>

<p>
El contenido de este libro se estructura en tres apartados bien diferenciados:
</p>

<ul>
<li>En la primera parte del libro se trabajan conceptos generales que son necesarios para poder desarrollar páginas web; se explican conceptos de estructura física y estructura lógica (o estructura de navegación) de un sitio web. Se detalla cómo influye la estructura física en las <em>URL</em> o direcciones que se emplean a la hora de crear los enlaces de un sitio web. Pasando por el concepto de "estándar web", un término general que se emplea para refererirse a los estándares que define su funcionamiento como <em>HTML</em> y <em>CSS</em>, empleados para el desarrollo de las páginas web en el lado del cliente.</li>

<li>En la segunda parte se trabaja <em>HTML</em>. Partiendo de la estructura básica de una página web, se explican las etiquetas de <em>HTML</em> que se utilizan para definir el texto, los enlaces, las listas, las tablas, los formularios y los elementos multimedia.</li>

<li>En la tercera y última parte se explica <em>CSS</em>, el lenguaje que se emplea para definir el formato y la presentación de una página web. Se explica cómo utilizar el color, cómo definir la presentación del texto, de las tablas y de los formularios; cómo realizar transformaciones y transiciones con el fin de diseñar una página web.</li>
</ul>
</body>
</html>
en No hay comentarios:

2ª Parte Módulo 1, Actividad 4

<meta charset="utf-8">
<title>HTML &amp; CSS: Curso práctico avanzado</title>


<h1 style="color: #F00; font-family: Verdana, Calibri, sans-serif; font-size: 32px;">HTML &amp; CSS: Curso práctico avanzado</h1>

<h2 style="color: #A00; font-family: Verdana, Calibri, sans-serif; font-size: 24px;">Datos del libro</h2>

<ul>
<li><span style="color: #060;">Título:</span> HTML &amp; CSS: Curso práctico avanzado</li>
<li><span style="color: #060;">Autor:</span> Sergio Luján Mora</li>
<li><span style="color: #060;">Editorial:</span> Publicaciones Altaria</li>
<li><span style="color: #060;">Año de publicación:</span> 2015</li>
<li><span style="color: #060;">ISBN:</span> 978-84-944049-4-8</li>
</ul>


<h2 style="color: #A00; font-family: Verdana, Calibri, sans-serif; font-size: 24px;">Descripción del libro</h2>

<p>
Aunque los inicios de <strong><span style="font-size: 20px;">Internet</span></strong> se remontan a los años sesenta, no ha sido hasta los años noventa cuando, gracias a la <strong><span style="font-size: 20px;">Web</span></strong>, se ha extendido su uso por todo el mundo. En pocos años, la <strong><span style="font-size: 20px;">Web</span></strong> ha evolucionado enormemente: se ha pasado de páginas sencillas, con pocas imágenes y contenidos estáticos que eran visitadas por unos pocos usuarios a páginas complejas, con contenidos dinámicos que provienen de bases de datos y que son visitadas por miles de usuarios al mismo tiempo.
</p>

<p>
Todas las páginas están internamente construidas con la misma tecnología, con el Lenguaje de marcas de hipertexto (<em><span style="color: #FFF; background-color: #000;">Hypertext Markup Language, HTML</span></em>) y con las Hojas de estilo en cascada (<em><span style="color: #FFF; background-color: #000;">Cascading Style Sheets, CSS</span></em>).
</p>

<p>
Este libro es adecuado para cualquiera que tenga interés en aprender a desarrollar sus propias páginas web. No son necesarios conocimientos previos para aprender con este libro, lo único que es necesario es saber utilizar un ordenador y saber navegar por la <strong><span style="font-size: 20px;">Web</span></strong>.
</p>


<h2 style="color: #A00; font-family: Verdana, Calibri, sans-serif; font-size: 24px;">Contenido del libro</h2>

<p>
El contenido de este libro se estructura en tres apartados bien diferenciados:
</p>

<ul>
<li>En la primera parte del libro se trabajan conceptos generales que son necesarios para poder desarrollar páginas web; se explican conceptos de estructura física y estructura lógica (o estructura de navegación) de un sitio web. Se detalla cómo influye la estructura física en las <em><span style="color: #FFF; background-color: #000;">URL</span></em> o direcciones que se emplean a la hora de crear los enlaces de un sitio web. Pasando por el concepto de "estándar web", un término general que se emplea para refererirse a los estándares que define su funcionamiento como <em><span style="color: #FFF; background-color: #000;">HTML</span></em> y <em><span style="color: #FFF; background-color: #000;">CSS</span></em>, empleados para el desarrollo de las páginas web en el lado del cliente.</li>

<li>En la segunda parte se trabaja <em><span style="color: #FFF; background-color: #000;">HTML</span></em>. Partiendo de la estructura básica de una página web, se explican las etiquetas de <em><span style="color: #FFF; background-color: #000;">HTML</span></em> que se utilizan para definir el texto, los enlaces, las listas, las tablas, los formularios y los elementos multimedia.</li>

<li>En la tercera y última parte se explica <em><span style="color: #FFF; background-color: #000;">CSS</span></em>, el lenguaje que se emplea para definir el formato y la presentación de una página web. Se explica cómo utilizar el color, cómo definir la presentación del texto, de las tablas y de los formularios; cómo realizar transformaciones y transiciones con el fin de diseñar una página web.</li>
</ul>

en No hay comentarios:

miércoles, 13 de septiembre de 2017

Módulo 4 Actividad 14

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Formulario de prueba de HTML5</title>
</head>
<body>

<h1>Formulario de prueba de HTML5</h1>

<form action=" " method="get">

<p>
<label for="name">Nombre:</label>
<input type="text" name="name_control" id="name"  autofocus=" " required=" ">
</p>

<p>
<label for="email">Email:</label>
<input type="email" name="email_control" id="email" required=" ">
</p>

<p>
<label for="website">URL:</label>
<input type="url" name="url_control" id="url" placeholder="Escribe la URL de tu página web personal">
</p>

<p>
<label for="fecha">Fecha:</label>
<input type="date" name="date" id="date">
</p>

<p>
<label for="tiempo">Tiempo:</label>
<input type="time" name="time" id="time">
</p>

<p>
<label for="fechahora">Fecha y hora:</label>
<input type="datetime" name="fechahora" id="fechahora">
</p>

<p>
<label for="mes">Mes:</label>
<input type="month" name="mes" id="mes">
</p>

<p>
<label for="semana">Semana:</label>
<input type="week" name="semana" id="semana">
</p>

<p>
<label for="numero">Número:</label>
<input type="number" name="numero" id="numero" min="-10" max="10">
</p>

<p>
<label for="telefono">Teléfono:</label>
<input type="tel" name="tlfn" id="tlfn">
</p>

<p>
<label for="search">Buscar:</label>
<input type="search" name="search" id="search">
</p>

<p>
<label for="color">Color favorito:</label>
<input type="color" name="color" id="color">
</p>

<p>
<label for="enviar">Enviar:</label>
<input type="submit" name="submit" id="submit">
</p>

</form>
</body>
</html>

en No hay comentarios:

jueves, 7 de septiembre de 2017

Módulo 4 Actividad 5

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Desempleo</title>
      <style>
          table,
          tr,
          th,
          td {
          border: 1px solid black;
          }
      </style>
   </head>
   <body>
<h1>El desempleo en España</h1>
<p>
La siguiente tabla muestra la evolución del desempleo en España, comparado con la media de los 27 países de la Unión Europea, Grecia, que compite con España en ser el primero en esta vergonzosa competición y Estados Unidos y Japón, dos de las primeras economías mundiales.
</p>
<table>
   <tbody><tr>
      <th>País</th>
      <th>2000</th>
      <th>2001</th>
      <th>2002</th>
      <th>2003</th>
      <th>2004</th>
      <th>2005</th>
      <th>2006</th>
      <th>2007</th>
      <th>2008</th>
      <th>2009</th>
      <th>2010</th>
      <th>2011</th>
      <th>2012</th>
      <th>2013</th>
   </tr>
   <tr>
      <td>UE (27 países)</td>
      <td>8.9</td>
      <td>8.7</td>
      <td>9</td>
      <td>9.1</td>
      <td>9.3</td>
      <td>9</td>
      <td>8.2</td>
      <td>7.2</td>
      <td>7</td>
      <td>9</td>
      <td>9.6</td>
      <td>9.6</td>
      <td>10.4</td>
      <td>10.8</td>
   </tr>
   <tr>
      <td><strong>España</strong></td>
      <td><strong>11.9</strong></td>
      <td><strong>10.6</strong></td>
      <td><strong>11.5</strong></td>
      <td><strong>11.5</strong></td>
      <td><strong>11</strong></td>
      <td><strong>9.2</strong></td>
      <td><strong>8.5</strong></td>
      <td><strong>8.2</strong></td>
      <td><strong>11.3</strong></td>
      <td><strong>17.9</strong></td>
      <td><strong>19.9</strong></td>
      <td><strong>21.4</strong></td>
      <td><strong>24.8</strong></td>
      <td><strong>26.1</strong></td>
   </tr>
   <tr>
      <td>Grecia</td>
      <td>11.2</td>
      <td>10.7</td>
      <td>10.3</td>
      <td>9.7</td>
      <td>10.6</td>
      <td>10</td>
      <td>9</td>
      <td>8.4</td>
      <td>7.8</td>
      <td>9.6</td>
      <td>12.7</td>
      <td>17.9</td>
      <td>24.5</td>
      <td>27.5</td>
   </tr>
   <tr>
      <td>Estados Unidos</td>
      <td>4</td>
      <td>4.8</td>
      <td>5.8</td>
      <td>6</td>
      <td>5.5</td>
      <td>5.1</td>
      <td>4.6</td>
      <td>4.6</td>
      <td>5.8</td>
      <td>9.3</td>
      <td>9.6</td>
      <td>8.9</td>
      <td>8.1</td>
      <td>7.4</td>
   </tr>
   <tr>
      <td>Japón</td>
      <td>4.7</td>
      <td>5</td>
      <td>5.4</td>
      <td>5.3</td>
      <td>4.7</td>
      <td>4.4</td>
      <td>4.1</td>
      <td>3.9</td>
      <td>4</td>
      <td>5.1</td>
      <td>5.1</td>
      <td>4.6</td>
      <td>4.3</td>
      <td>4</td>
   </tr>
</table>
<p>
Fuente: <a href="http://epp.eurostat.ec.europa.eu/tgm/table.do?tab=table&init=1&language=en&pcode=tsdec450&plugin=1">Índice de desempleo anual</a>, Eurostat
</body>
<html>
en No hay comentarios:
Suscribirse a: Entradas (Atom)

2ª Parte Módulo 3 Examen

1) En CSS, desde el interior hacia afuera de un elemento, ¿cuál es el orden correcto del modelo de caja? content, padding, border, margin 2)...

  • 2ª Parte Módulo 1 Examen
    En CSS el selector "h1, p" selecciona: - Selecciona todos los h1 y los p. En CSS, que pseudo clase se emplea para definir una ...
  • 2ª Parte Módulo 3, Actividad 18
    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML &amp; CSS: Curso práctico...
  • 2ª Parte Módulo 2 Examen
    1 En CSS para indicar que una declaración de estilo sobrescribe a cualquier otra, independientemente de su especificidad, se emplea: !imp...