Diseño de Sitios Web
Actividad de Evaluación Formativa EJERCICIOS
1. Instrucciones generales Estimado(a) estudiante:
Una vez realizada la lectura comprensiva del material de estudio de la semana 1, lo(a) invitamos a realizar una serie de ejercicios de aplicación de conocimientos.
El objetivo de esta actividad es poner en contexto práctico lo aprendido conceptualmente.
Para responder las preguntas y/o realizar los ejercicios, refiérase principalmente a los contenidos trabajados en las semanas previas. También puede recurrir a fuentes de información segura en Internet.
2. Responda las siguientes preguntas:
Respuestas 1. B head
2. C meta 3. E form
4. Type, name y value
5. B Todos los tags input deben tener distinto nombre 6. B No
7. D value 8. <table>
<th>
</th>
<tr>
<td>
</td>
</tr>
</table>
9. C 3 10. A 1
CASO:
Código html
<!DOCTYPE html>
<html>
<head>
<title>FormularioVet</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="estilo.css"/>
</head>
<body>
<h1>Formulario Mascota</h1>
<p class="parrafo1"> Este es un formulario que debe completar con sus datos y los de su mascota, antes de recibir la atención. Con este formulario, sus datos quedarán registrados. </p>
<form>
<table border="1">
<tr>
<td>Nombre Dueño</td>
<td><input type="text" value="Ingresar texto" name="nombreD"/> </td>
</tr>
<tr>
<td>Nombre Mascota</td>
<td><input type"text" value="Ingresar texto" name="nombreM"/></td>
</tr>
<tr>
<td>Tipo de Animal</td>
<td><input type"text" value="Ingresar texto" name="animal"/></td>
</tr>
<tr>
<td>Género</td>
<td><input type="radio" name="genero"
value"masculino">Masculino
<input type="radio" name="genero"
value "femenino">Femenino
</td>
</tr>
<tr>
<td>Edad</td>
<td><input type"text" value="Ingresar número" name="edad"/> </td>
</tr>
</table>
<br>
<input type"button" class="boton" value="Aceptar"
name="aceptar"
/>
</form>
<p class="parrafo2"> Al completar los datos, debe presionar el botón aceptar, y éstos serán ingresados y guardados. </p>
</body>
</html>
Código css h1{
font-size: xx-large;
color:blue;
text-shadow: 5px 5px 6px red;
text-align: center;
}
td{
color: red;
font-variant: small-caps;
text-indent: 10px;
}
.boton{
text-align: center;
color: brown;
}
.parrafo1{
font-size: small;
color: green;
text-indent: 50px;
}
.parrafo2{
text-transform: capitalize;
text-indent: 50px;
color:purple;
}
ITEM 2
A continuación, se presentan los pasos para desarrollar el ejercicio propuesto.
1- Crear una carpeta llamada EjercicioS2 (1), la cual contendrá en su interior, un archivo llamado índex (2) el cual tendrá extensión .html.
2- Una vez creada la estructura del proyecto, editaremos el archivo index.html, se deberá crear la estructura del código del proyecto dentro de este archivo.
La estructura básica de cualquier página en HTML tiene la siguiente estructura.
Notas:
• Es importante colocar la etiqueta <meta> con el charset UTF8, ya que esto permitirá que el navegador reconozca los caracteres especiales que
utilizaremos, como las tildes de las diferentes palabras.
3- Para colocar el título de la página, utilizaremos la etiqueta <h> con la numeración 3, ya que esto nos proporciona un tamaño mediano para este ejemplo, quedando como <h3> tal como se ve a continuación:
Nota: Siempre que se abre una etiqueta es importante cerrarla. Por ejemplo, si se abre un título, utilizamos <h3> y si queremos cerrarlo o indicarle donde termina el título, utilizamos </h3>.
4- Luego de poner el título, colocaremos las etiquetas <form> que nos
permitirá agrupar elementos de entrada de un formulario; como campos de textos, botones, casillas de comprobación, etc. Una vez puestas las
etiquetas forms colocaremos las etiquetas de apertura y cierre de una tabla con la etiqueta <table> lo cual nos permitirá agrupar elementos mediante filas y columnas. La etiqueta table tiene un parámetro llamado border que indica el ancho de las líneas de división que tendrá la tabla. Entre más grande es el número, más ancho será la línea. ¿Qué ocurre si el parámetro es 0?, las líneas desaparecen.
5- Para agrupar los elementos dentro de la etiqueta <table> utilizaremos las etiquetas <tr> y <th> que corresponden a fila y columna de una tabla. Para el caso de la primera fila y sus dos columnas se utilizarán dos etiquetas de columnas dentro de una sola fila, colocando en cada columna los elementos de input solicitados en el ejercicio, de la siguiente manera:
Nota: El elemento nombre tiene un input con un type de tipo text y el elemento contraseña tiene un elemento type de tipo password. La diferencia entre ambos, es que el elemento de tipo password no deja visible los elementos que se escriban en ese espacio
6- Para la segunda fila, se agregará nuevamente una fila con la etiqueta <tr> y dos columnas con la etiqueta <th>. Para la primera columna se agregará un elemento de área de texto con la etiqueta <textarea> y su tamaño estará determinado por las propiedades cols="40" rows="5" (columnas y filas).
Para la segunda columna se utilizarán 3 elementos de entrada llamados radio que estarán unidos mediante la propiedad name. Si la propiedad name es igual para cada radio, al momento de seleccionar una de las opciones, solo se podrá elegir una. En este caso la propiedad name se llama “opción” y es igual para todos los radio.
7- En la tercera fila de la tabla, se agregarán dos columnas más, igual que en el paso anterior. Para la primera columna se utilizará el elemento
checkbox, pero en su propiedad name, se utilizarán nombres diferentes para cada checkbox. Esto hará que cada elemento actúe de forma independiente y permitirá seleccionar más de una sola opción para este apartado. Cada elemento de checkbox tiene en su propiedad name;
opcion1, opcion2 y opcion3 para este ejemplo. Para la segunda columna, se incorporó 3 títulos de diferente tamaño determinado por el numero dentro
de la etiqueta <h>.
8- Finalmente, en la última fila se agregarán dos columnas nuevamente. La primera columna tendrá un botón y la segunda columna tendrá 3 textos alineados con diferentes colores y un texto debajo de ellos de un tamaño
más grande y de color azul. Para alinear los textos en una misma línea se utilizará la etiqueta <span> para cada texto. Para dar un color a cada uno de estos textos se utilizará CSS. Para ello, se abrirá una etiqueta style en cada uno de los <span> y se colocará un color con la propiedad color. Para el texto que viene a continuación, se utilizara la etiqueta <h1> con un style adentro, que determinara el color de este título.
Te invitamos a revisar el código completo a continuación:
<!DOCTYPE html>
<html>
<head>
<title> Ejercicio S2</title>
<meta charset="UTF-8">
</head>
<body>
<h3> Ejercicio Semana 2 </h3>
<form>
<table border ="1">
<tr>
<th> Nombre: <input type="text"> </th>
<th> Contraseña: <input type="password"> </th>
</tr>
<tr>
<th> <p> Area de Texto: </p> <textarea name="mensaje"
cols="40" rows="5"> </textarea>
</br>
</br>
</th>
<th>
<p> Elije una sola opción </p>
<input type="radio" name="opcion" value="1">Opción 1 <input type = "radio" name="opcion" value="2">Opción 2 <input type="radio" name="opcion" value="3"> Opción 3 </tr>
<tr>
<th>
<p> Elije más de una opción </p>
<input type="checkbox" name="opcion1" value="op1"> Opción 1 <input type="checkbox" name="opcion2" value="op2"> Opción 2 <input type="checkbox" name="opcion3" value="op2"> Opción 3 </th>
<th>
<h1> Texto grande </h1>
<h2> Texto mediano </h2>
<h3> Texto pequeño </h3>
</th>
</tr>
<tr>
<th>
<h3> Mi Botón </h3>
<p> <button type="button">¡Hazme un clic!</button></p>
</th>
<th>
<span style="color:green"> Verde</span>
<span style="color:orange"> Naranjo</span>
<span style="color:red"> Rojo</span>
<h1 style="color:blue"> Azul </h1>
</th>
</tr>
</table>
</form>
</body>
</html>
