s16.s1 Material Informatica

Diseño de
Páginas Web II
Sesión N° 16
Semestre 2022-I
AGENDA
❖ Logro de la Sesión
❖ Saberes previos
❖ Listas Ordenadas y Desordenadas
❖ Listas anidadas
❖ Gestionar Tablas
❖ Formularios
❖ Ejercicios Prácticos
❖ Conclusiones
LOGRO DE LA SESIÓN
Al finalizar esta sesión, el estudiante

diseña Listas ordenadas, desordenadas,
tablas y formularios usando diferentes
etiquetas en un documento HTML.
Saberes Previos
¿Las etiquetas <th> siempre

tienen que ir al principio de
una fila o columna?
Respuesta:
Toda etiqueta <tr> se puede cambiar por una
etiqueta <th>. Esto hace que el texto que está
en la etiqueta <th> se muestre en negrita en el
navegador. Aunque las etiquetas <th> se usan
principalmente para los headings, no es
necesario usarlas solo para ellos.
Diseño de Páginas Web II
Listas Ordenadas y Desordenadas
Las listas representan uno de los instrumentos más difundidos para

organizar la información dentro de los sitios web. Una de sus
características principales es la de proporcionar un cuadro claro y sintético
del tema tratado.
Realizar la siguiente lista ordenada:
Realizar la siguiente lista ordenada que empiece

desde 5:
Realizar la siguiente lista desordenada:

Ejercicio Propuesto:
Realizar la siguiente lista anidada.
Gestionar Tablas
<TABLE></TABLE>
La Altura y Anchura global de una Tabla, se indica dentro del atributo

<TABLE>, que señala la apertura y cierre de una Tabla.
Las dimensiones se definen mediante WIDTH (ancho) y HEIGHT (alto)

y pueden expresarse en píxel o en tantos por ciento respecto a la
página.
<TABLE WIDTH=500>
</TABLE>
<TABLE WIDTH=50%>
</TABLE>
Como vemos por esta imagen, el atributo <TABLE> genera la Tabla, mientras
que <TD> sirve para definir los campos presentes dentro de esta Tabla.
He aquí cómo el diseño puede ser transformado en código y, por tanto, en

una tabla propiamente dicha:
<TABLE BORDER=1 WIDTH=300>

<TD WIDTH=100></TD>
<TD WIDTH=100></TD>
<TD WIDTH=100></TD>
</TABLE>
Como podemos observar, hemos introducido una nueva marca <TR>, que es una
especie de Salto de Fila dentro de la Tabla. He aquí cómo el diseño puede ser
transformado en código.
<TABLE BORDER=1 WIDTH=300>

<TR>
<TD WIDTH=100></TD>
<TD WIDTH=100></TD>
<TD WIDTH=100></TD>
</TR>
<TR>
<TD WIDTH=100></TD>
<TD WIDTH=100></TD>
<TD WIDTH=100></TD>
</TR>
</TABLE>
El espacio entre los diversos campos de una Tabla se define dentro de la

marca </TABLE> con CELLSPACING=X y CELLPADDING=X, donde X es la
distancia en píxel.
La colocación del texto y de las imágenes dentro de los distintos campos

<TD> de la Tabla puede ser modificada de varias maneras:
<TABLE WIDTH=300 HEIGHT=200>

<TD WIDTH=100 VALIGN=TOP>prueba </TD>
<TD WIDTH=100 VALIGN=BOTTOM>prueba </TD>
<TD WIDTH=100 VALIGN=MIDDLE>prueba </TD>
</TABLE>

<TD width=100 ALIGN=RIGHT>prueba </TD>
<TD WIDTH=100 ALIGN=CENTER>prueba </TD>
<TD WIDTH=100 ALIGN=LEFT>prueba </TD>
</TABLE>

<TD width=100 BGCOLOR="red">prueba </TD>
<TD WIDTH=100BGCOLOR="yellow">prueba </TD>
<TD WIDTH=100BGCOLOR="gray">prueba </TD>
</TABLE>
Construir la siguiente tabla, cada columna debe tener un título tal

como se muestra en la imagen.
La página tendrá como título Turnos semanales, con formato

encabezado nivel 2. Solo debes usar elementos de table.
En este ejercicio vas a ponerle un pie a la tabla uniendo todas las

celdas de la última fila. En el pie irá la nota aclaratoria "La masa es
relativa a la masa de la tierra" y tendrá formato de encabezado
nivel 5.
La tabla tendrá un título: El sistema solar que irá con formato de

encabezado nivel 3.
Crear la tabla de la imagen. Como ves esta tabla combina todas las celdas de la
primera columna para colocar una imagen de Júpiter, con el atributo alt igual a
Planeta Jupiter. También se unen la segunda y tercera celdas de cabecera para poner
el texto Datos. La tabla posee un título El Planeta Júpiter colocado en el caption.
Por su parte el título de la página será Planeta Júpiter.

<table>
<caption>
<b>El planeta Júpiter</b>
</caption>
<tr>
<th>Imagen</th>
<th colspan="2">Datos</th>
</tr>
<tr>
<td rowspan="6"><img src="C:\Users\TOSHIBA\Desktop\ejemplo\jupiter.jpg" width="216" height="216"></td>
<td>Distancia desde el Sol:</td>
<td>778,5 millones km</td>
</tr>
<tr>
<td>Radio</td>
<td>69.911 km</td>
</tr>
<tr>
<td>Gravedad</td>
<td>24,79 m/s²</td>
</tr>
<tr>
<td>Masa</td>
<td>1,898 × 10<sup>27</sup> kg</td>
</tr>
<tr>
<td>Superficie:</td>
<td>61,42 miles de milloneskm²</td>
</tr>
<tr>
<td>Duración del día</td>
<td>0d 9h 56m</td>
</tr>
</table>
La etiqueta <form>
El elemento <form> como contenedor de otro tipo elementos como campos de texto,
botones de opción, casillas de verificación, botones de envío, etc.
Al escribir la etiqueta <form> estarás iniciando tu formulario. Recuerda que este

elemento funciona como contenedor, del mismo modo que lo hacen otras etiquetas
tales como <div></div> o <table></table>.
Elementos principales:
El elemento HTML <form> puede contener uno o más de los siguientes elementos de
formulario:
<form> <labe> <select> <textarea> <button> <fieldset> <legend> <datalist>

<output><option> <option> <optgroup>
Crear el siguiente Formulario:

<form>
<h3>TEXT</h3>
<label>nombre:</label> <input required>
<h3>datalist</h3>
<label>Buscador</label>
<input list="browsers">
<datalist id="browsers">
<option value ="Internet Explorer">
<option value ="Opera">
<option value ="Chrome">
<option value ="Safari">
</datalist >
<h3>password</h3> <label> Keyword:</label> <input required>
<h3>checkbox</h3>
<input type="checkbox"> I have a bike <br>
<input type="checkbox"> I have a car <br>
<h3>Color</h3> <label> Color:</label> <input required>
<h3>Fecha</h3> <label> Fecha:</label> <input required>
<h3>Fecha de nacimiento</h3> <label> Fecha de nacimiento:</label> <input
required>
<h3>Email</h3> <label> Email:</label> <input required>
<h3>Number</h3> <label> Number:</label> <input required>
<h3>Points</h3> <label> Numeros desde y hasta:</label> <input type="Number"
min="0" max="10"
><br><br>
<input type="submit" name="submit">
</form>
Conclusiones
❖ Las etiquetas son el contenido que se coloca entre las
etiquetas HTML, con la finalidad de darle formato
correctamente. Usa el símbolo menor que (<) y el mayor que
(>). Un símbolo de barra oblicua también se utiliza como
etiqueta de cierre.
❖ Los comentarios se utilizan en un documento HTML para

tomar notas esenciales y ayudar a los desarrolladores a
señalar cualquier modificación que se incorpore
posteriormente. No parecen mostrarse en el navegador
cuando se ejecuta el código. ¡Los comentarios en HTML
empiezan con "<!-" y terminan con "->".
❖ Se otorga un atributo adicional a cada etiqueta para alterar el

comportamiento de la etiqueta. Los atributos se definen
instantáneamente después del nombre de la etiqueta,
incluido entre paréntesis angulares. Aparecen en las
etiquetas de apertura y nunca pueden aparecer en las
etiquetas de cierre.

s16.s1 Material Informatica

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

s16.s1 Material Informatica

Cargado por

Copyright:

Formatos disponibles

Diseño de

❖ Listas Ordenadas y Desordenadas

Al finalizar esta sesión, el estudiante

¿Las etiquetas <th> siempre

Listas Ordenadas y Desordenadas

Las listas representan uno de los instrumentos más difundidos para

Realizar la siguiente lista ordenada:

Realizar la siguiente lista ordenada que empiece

Realizar la siguiente lista desordenada:

La Altura y Anchura global de una Tabla, se indica dentro del atributo

Las dimensiones se definen mediante WIDTH (ancho) y HEIGHT (alto)

He aquí cómo el diseño puede ser transformado en código y, por tanto, en

<TABLE BORDER=1 WIDTH=300>

<TABLE BORDER=1 WIDTH=300>

El espacio entre los diversos campos de una Tabla se define dentro de la

La colocación del texto y de las imágenes dentro de los distintos campos

<TABLE WIDTH=300 HEIGHT=200>

<TABLE WIDTH=300 HEIGHT=200>

<TABLE WIDTH=300 HEIGHT=200>

Construir la siguiente tabla, cada columna debe tener un título tal

La página tendrá como título Turnos semanales, con formato

En este ejercicio vas a ponerle un pie a la tabla uniendo todas las

La tabla tendrá un título: El sistema solar que irá con formato de

Por su parte el título de la página será Planeta Júpiter.

Al escribir la etiqueta <form> estarás iniciando tu formulario. Recuerda que este

<form> <labe> <select> <textarea> <button> <fieldset> <legend> <datalist>

Crear el siguiente Formulario:

❖ Los comentarios se utilizan en un documento HTML para

❖ Se otorga un atributo adicional a cada etiqueta para alterar el

También podría gustarte