Ejercicios Extra HTML

1. Enunciado
Crea una página web que contenga un formulario con los siguientes campos
de información:
 El nombre, con un control de tipo texto.
 Los apellidos, con un control de tipo texto.
 El sexo, con dos opciones excluyentes hombre o mujer.
 El correo electrónico, con un control de tipo texto.
 La opción de registro, que debe ser elegida de entre: Directa, Indirecta,
Llamada telefónica o Redireccionamiento web y que estén agrupadas de la
siguiente forma: Directa e Indirecta dentro del epígrafe “Datos formulario” y
las otras dos que se encuadren en el epígrafe “Recopilación externa”.
 Un cuadro de texto en el que se explique la razón por la que se desea
registrar y que tenga como texto dentro la frase: “Deseo registrarme por…” y
que se borre automáticamente cuando se empiece a escribir en él.
 Una casilla de verificación con el texto "Deseo recibir información sobre
novedades y ofertas".
 Una casilla de verificación con el texto "Declaro haber leído y aceptar las
condiciones generales del programa y la normativa sobre protección de
datos".
 Un botón de envío llamado “Enviar”.
 Realizar una agrupación de elementos tal que desde el cuadro de Nombre y
hasta el cuadro de texto de razón de registro se cree un grupo bajo el
epígrafe “Datos usuario” y el resto de elementos pertenecerá a otro grupo
bajo el título “Conformidad y envío”. Estos títulos deberán ir centrados con
respecto al recuadro.

Además, tienes que tener en cuenta los siguientes requisitos:

 El título de la página debe ser Formulario de registro - Mi web.
 El método de envío del formulario debe ser GET.
 El destino del envío del formulario debe ser "".
 La longitud máxima de entrada de datos de los controles para el nombre y
los apellidos debe ser 50 caracteres.
 La longitud máxima del cuadro de texto debe ser de 4 líneas y 50 caracteres.
 La casilla de verificación con el texto "Deseo recibir información sobre
novedades y ofertas" debe estar activada por defecto.
 Los títulos de las agrupaciones de elementos deberán ir centrados con
respecto al recuadro que los contenga.
 El botón de envío “Enviar” debe aparecer centrado dentro del grupo de
elementos al que pertenece.
Notas:

1. Para añadir opciones excluyentes utiliza en la etiqueta input en cuestión el

tipo “radio”.
2. Las casillas de verificación se indican con el tipo “checkbox” y para que
salga activada por defecto debe tener en el input correspondiente además
un atributo checked=”checked”.
3. Para determinar la longitud máxima de entrada de datos de los controles
se utiliza el atributo maxlenght=”nº” en el input de referencia.
4. Para centrar los títulos en una agrupación hay que utilizar el atributo
align=”center” dentro de la etiqueta correspondiente.
5. Para alinear cualquier elemento, ya sea dentro de un grupo, de un párrafo
o de un formulario, basta con añadir la etiqueta <center>contenido a
centrar</center>.

Debes crear una página web que tenga el mismo aspecto que la siguiente
imagen:
2. Enunciado
A partir del texto que se te proporciona, debes crear una página web que tenga
el mismo aspecto que la siguiente imagen:

Además, tienes que tener en cuenta los siguientes requisitos:

 El destino del enlace Índice de desempleo anual es la página web:
http://epp.eurostat.ec.europa.eu/tgm/table.do?tab=table&init=1&language=e
n&pcode=tsdec450&plugin=1
Además, cuando se pinche el enlace se deberá acceder a la dirección en la
misma pestaña.
3. Enunciado
Debes crear una página web que tenga el mismo aspecto que la siguiente imagen:

Selecciona para cada lista el mejor tipo de lista.

4. Enunciado
A partir del texto que se te proporciona, debes crear una página web que tenga el mismo aspecto que la siguiente imagen:
Además, tienes que tener en cuenta los siguientes requisitos:
o El título de la página debe ser Los tres pilares de la Web.
o Los enlaces que aparecen en la página deben tener los siguientes destinos:
o Tim Berners-Lee → http://es.wikipedia.org/wiki/Tim_Berners-Lee
o Web → http://es.wikipedia.org/wiki/World_Wide_Web
o HTML → enlace intradocumental al epígrafe HTML (*)
o HTTP → enlace intradocumental al epígrafe HTTP (*)
o URL → enlace intradocumental al epígrafe URL (*)
o Fuente: HTML → http://es.wikipedia.org/wiki/HTML
o Fuente: HTTP → http://es.wikipedia.org/wiki/Hypertext_Transfer_Protocol
o Fuente: URL → http://es.wikipedia.org/wiki/Localizador_de_recursos_uniforme
o Cuando se pinche en los enlaces de html, http y url de los apartados
correspondientes estos se deberán mostrar en una nueva pestaña.

(*): Para hacer referencia a un enlace intradocumental hay que definir el atributo
referencia del enlace como sigue: <a href=”#nombre” >Texto bajo el que aparecerá
el enlace</a>, teniendo en cuenta que el enlace al que se hace referencia en verdad
no es un enlace, sino un apartado del documento al que nos lleva el enlace cuando
pinchamos sobre él. Para terminar, al definir dicho apartado hay que ponerle un
atributo id=”nombre”.
5. Enunciado
Crea una página web que contenga un formulario con los siguientes campos de
información:
 Nombre, con un control de tipo texto obligatorio y con autofoco.
 Correo electrónico, con un control de tipo email obligatorio.
 URL, con un control de tipo url que muestre la ayuda "Escribe la URL de tu
página web personal".
 Fecha, con un control de tipo date.
 Tiempo, con un control de tipo time.
 Fecha y hora, con un control de tipo datetime.
 Mes, con un control de tipo month.
 Semana, con un control de tipo week.
 Número, con un control de tipo number que limite la entrada a un valor entre -10
y 10.
 Teléfono, con un control de tipo tel.
 Término de búsqueda, con un control de tipo search.
 Color favorito, con un control de tipo color.
 Un botón de envío.
Además, tienes que tener en cuenta los siguientes requisitos:
 El título de la página debe ser Formulario de prueba de HTML5.
 El método de envío del formulario debe ser GET.
 El destino del envío del formulario debe ser "".

Notas:

1. Para insertar un autofoco en un formulario se utiliza el atributo

autofocus=”autofocus” en el input del campo en el que se quiera activar.
2. Para hacer que un control sea obligatorio hay que añadir en su input la
expresión “required”.
3. Para limitar un control de tipo número con un valor mínimo y otro máximo hay
que usar en su input las expresiones min=”nº” y max=”nº”, si bien para
especificar de qué valor se parte hay que indicarlo con value=”nº”
4. Para obligar a que un control tome valores de 9 dígitos y que estos sean del 0
al 9 se utiliza el atributo pattern=”[0-9]{9}”
5. si al validar el código HTML de tu página web con el validador del W3C se
muestran mensajes de advertencia como The date input type is not supported
in all browsers. Please be sure to test, and consider using a polyfill. no te
preocupes, el validador te está avisando de que tengas cuidado al usar una
característica de HTML5 que no está admitida por todos los navegadores
actuales.
 6. por lo anterior, cuando realices esta actividad y compruebes cómo se visualiza
tu página web en distintos navegadores es muy probable que obtengas
diferentes resultados.

Debes crear una página web que tenga el mismo aspecto que la siguiente imagen:
6. Enunciado
Se da el siguiente archivo de estilos CSS:

* {
margin:3;
padding:3;
}
a:link, a:visited, a:hover, a:active {
color:red;
font-size:1.3em;
}
body {
background:#003;
font-family:Times New Roman;
}
h2 {
color:yellow;
font-size:2.1em;
padding-bottom:.8em;
}
img {
height:auto;
margin-bottom:.7em;
margin-top:.4em;
max-width:85%;
}
li {
margin-left:1.9em;
padding-bottom:.7em;
padding-right:.7em;
}
p {
font-size:1.4em;
padding-bottom:.9em;
color: lime;
}
table, td, th, tr {
border:4px solid black;
text-align:center;
}
table {
border-collapse:collapse;
width:80%;
}
td, th {
padding:5px;
}
thead {
color:blue;
}
tfoot {
color:grey;
}
tbody {
color:brown;
}
#titulos {
background-color:green;
color:lime;
padding:1%;
}
#bloques {
overflow:hidden;
padding-bottom:2%;
}
#contenedor {
margin:2px auto;
width: 100%;
}
#texto1 {
background-color:#aaa;
float:left;
margin-bottom:-32767px;
padding:2%;
padding-bottom:32767px;
width:25%;
}
#opciones {
background-color:#700;
float:left;
margin-bottom:-32767px;
padding:2%;
padding-bottom:32767px;
width:20%;
}
#texto2 {
background-color: red;
float:left;
color:yellow;
font-size:32px;
margin-bottom:-32767px;
padding:2%;
width:43%;
height:32767px;
}
#lineaultima {
background-color:#f96;
clear:both;
padding:2%;
text-align:center;
}

Se pide que a partir de él y utilizando divisores (contenedores), se escriba el código

HTML asociado al archivo CSS para que al abrirlo en un navegador el resultado sea
como el que se muestra a continuación:
Habrá que tener en cuenta las siguientes consideraciones:
1. El link de las opciones de la primera de las columnas (Opción1,…, Opción8)
tendrá como referencia “#”.
2. Para la imagen del balón podéis elegir la que prefiráis de internet y deberá
tener una altura (heigth) de 60 y un ancho (width) de 230.
3. El método de envío del formulario debe ser GET.
4. El destino del envío del formulario debe ser "".
5. El campo Nombre y apellidos del formulario debe tener una longitud máxima
de 50 caracteres y el tamaño de la fuente que se emplea ha de ser de 18px.
6. El tamaño de la fuente de la lista de selección debe ser de 22px.
7. El tamaño de la fuente del botón “ENVIAR” será de 20px y el tamaño del
propio botón de 90px de ancho y 40px de alto.
8. El tamaño de la fuente del título de la tabla es de 20px.