Scribd
Cargar
155 vistas9 páginas

Practicas HTML Avanzado

El documento proporciona instrucciones para crear varias páginas web con diferentes elementos como listas, formularios y tablas de acuerdo a imágenes de ejemplo. Incluye código base y requisitos para cada página, como la estructura, etiquetas y atributos a utilizar.

Cargado por

Marco Busto
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
155 vistas9 páginas

Practicas HTML Avanzado

El documento proporciona instrucciones para crear varias páginas web con diferentes elementos como listas, formularios y tablas de acuerdo a imágenes de ejemplo. Incluye código base y requisitos para cada página, como la estructura, etiquetas y atributos a utilizar.

Cargado por

Marco Busto
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 9

Ejercicios - Listas 1

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 título de la página debe ser Curriculum Vitae de Bruce
Wayne.
 El resto de la estructura de la página debes deducirlo a partir
de la imagen proporcionada.
 Utiliza los elementos <li> <strong> para armar la lista.
Código base:
Curriculum Vitae de Bruce Wayne

Datos personales
Nombre completo: Bruce Wayne
Fecha de nacimiento: 1/5/1939
Lugar de nacimiento: Gotham City

Formación académica
1956-1961: Universidad del Espantapájaros
1952-1956: Instituto de Dos Caras
1944-1952: Escuela Primaria del Joker
Experiencia laboral
1975-1985: En el paro
1965-1975: Cazavillanos y demás chusma
1962-1965: Aprendiz de superhéroe

Ejercicios - Listas 2
Debes crear una página web que tenga el mismo aspecto que la
siguiente imagen:

Utiliza y coloca donde corresponden las etiquetas


 <ol></ol>
 <li></li>
 <ul></ul>
 <dl></dl>
 <dt></dt>
 <dd></dd>
Ejercicios - Formularios 1
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.
 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 leido y
aceptar las condiciones generales del programa y la normativa
sobre protección de datos".
 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 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 casilla de verificación con el texto "Deseo recibir
información sobre novedades y ofertas" debe estar activada
por defecto.
Debes crear una página web que tenga el mismo aspecto que la
siguiente imagen:
<!DOCTYPE html>
<html>
<head>
<title>Formulario de registro - Mi web</title>
</head>
<body>

<h1>Formulario de registro</h1>

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


<p>
Nombre: <input type="text" name="nombre" maxlength="50" />
</p>

<p>
Apellidos: <input type="text" name="apellidos" maxlength="50" />
</p>

<p>
Sexo: <input type="radio" name="sexo" value="h" /> hombre <input
type="radio" name="sexo" value="m" /> mujer
</p>

<p>
Correo: <input type="text" name="correo" maxlength="100" />
</p>

<p>
<input type="checkbox" name="info" checked="checked" /> Deseo
recibir información sobre novedades y ofertas
</p>

<p>
<input type="checkbox" name="condiciones" /> Declaro haber leido
y aceptar las condiciones generales del programa y la normativa
sobre protección de datos
</p>

<p>
<input type="submit" value="Enviar" />
</p>
</form>

</body>
</html>
Ejercicios - Formularios 2

En la actividad anterior se te proponía realizar el siguiente


formulario:

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.
 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 leido y
aceptar las condiciones generales del programa y la normativa
sobre protección de datos".
 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 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 casilla de verificación con el texto "Deseo recibir
información sobre novedades y ofertas" debe estar activada
por defecto.
Al formulario anterior le tienes que añadir los siguientes campos de
información:

 Población, una lista desplegable con las opciones Alicante,


Madrid, Sevilla y Valencia.
 Descripción, un área de texto multilínea.

 Además, tienes que asociar la etiqueta de cada control a su


control para mejorar la usabilidad y la accesibilidad.

Debes crear una página web que tenga el mismo aspecto que la
siguiente imagen:

Código de ayuda:
Input sexo
<p>
Sexo: <input type="radio" name="sexo" id="sexo-h" value="h" /> <label
for="sexo-h">hombre</label> <input type="radio" name="sexo" id="sexo-
m" value="m" /> <label for="sexo-m">mujer</label>
</p>
Input población y text área
<p>
<label for="poblacion">Población:</label>
<select name="poblacion" id="poblacion">
<option>Alicante</option>
<option>Madrid</option>
<option>Sevilla</option>
<option>Valencia</option>
</select>
</p>

<p><label for="descripcion">Descripción:</label>
<textarea name="descripcion" id="descripcion" rows="6"
cols="60"></textarea>
</p>

TABLAS
CODIGO EJEMPLO DE TABLAS

<TABLE BORDER>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

Con el código de ejemplo y la información siguiente crea una tabla


en html.

También podría gustarte