Actividad 8 Practica 3 Tablas y Listas en HTML

Programación Web Ing. Eusebio Bueno M.
Actividad 8 Practica 3 Tablas y listas en HTML

Cinthia Adamari Sotelo Leyva
 Instituto Tecnológico Superior de Mulegé

 Ingeniería en Tecnologías de la Información y las
Comunicaciones
 Ing. Eusebio Bueno M.
 Actividad 8 Practica 3 Tablas y listas en HTML
 Cinthia Adamari Sotelo Leyva
 1910611115
 Santa Rosalía BCS al 01 del 2022

191061115
Introducción:
En la siguiente practica al igual que en las practicas anteriores estaremos llevando acabo
practicas mediante sublime texts en HTML en esta ocasión estaremos creando tablas y
listas en HTML, al igual que en las anteriores estaremos utilizando diferentes etiquetas las
cuales iremos describiendo su función durante la elaboración de este reporte.
Desarrollo:
En la siguiente practica estaremos utilizando diferentes etiquetas, las cuales nos ayudaran
a la correcta funcionalidad de nuestra codificación.
<table> Esta etiqueta nos permite crear una tabla
<tr> Esta etiqueta nos permite crear cada fila
<td> y esta trabaja junto con las dos anteriores para crear cada columna
<ul>Define una lista desordenada
<ol>Define una lista ordenada
<li>Tanto como las ordenadas <ol> como las desordenadas >ul>se pueden anidar. Esto
ocurre cuando un iteam de la lista a su vez se puede anidar.
Para comenzar con nuestra practica comenzamos abriendo nuestro sublime text y
creando nuestra carpeta para nuestra practica:

191061115
Es importante que para que cada práctica que vallamos realizando se almacenen en su
carpeta correspondiente para mantener un orden sobre los elementos.
Seguido de esto repetimos lo que hemos hecho en clases anteriores (Ya una vez realizada
nuestra carpeta para nuestra actividad 8).
Es importante que SIEMPRE que vallamos a empezar una

nueva practica corrijamos la sintax establecida por el
programa y seleccionamos HTML para facilitar nuestra
codificación y desempeñar mejor el trabajo
Una vez realizado esto podemos presionar ctrl + s para guardar cambios al realizar este
paso sublime text nos abrirá nuestras carpetas con nuestros archivos. Por lo cual lo
haremos del siguiente modo:

191061115
Este paso es de suma importancia ya que debemos

de realizarlo de esta manera con todas nuestras
prácticas, cada cosa que deseemos agregar a
nuestra practica sea este una imagen de fondo
debe de ser primero añadida al HTML
Una vez aclarado lo anterior de crear la carpeta, modificar la sintax del sublime podemos
comenzar a codificar nuestra práctica. Para ello comenzaremos colocando la etiqueta
<html> como en todas en todas nuestras prácticas esto para evitar tanta codificación y
comenzar de una forma más eficiente nuestra práctica, del siguiente modo:

191061115
Ya si logramos apreciar ya contamos con gran parte de la estructura de nuestra práctica,

una vez hecho esto empezaremos a colocar cada una de nuestras etiquetas.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Actividad 8</title>
</head>
<body background="vintage.jpg">
<table border="2" width="40%">
<tr> <th colspan="3"> Cinthia Adamari Sotelo Leyva </th> </tr>
<tr>
Esta etiqueta viene como predeterminada Aquí el body background es como el cuerpo de nuestra pagina
en nuestra práctica al momento de colocar web, este nos sirve para el relleno del fondo de nuestra pagina
nuestro sintax pero es más que nada el este puede ser un color solido o una imagen, en mi caso obte
título o nombre que llevara la pestaña en por agregar una imagen.
nuestro clase es Actividad 8

191061115
<tr> <th colspan="3"> Cinthia Adamari Sotelo Leyva </th> </tr>
<tr>
<th bgcolor="9AECB9">
<ol>
<li> Itics </li>
<li> Electrómecanica</li>
<li> IGE </li>
</ol>
</th>
<ul>
<li> Industrial </li>
<li> Renovables </li>
<li> Alimentarias </li>
</ul>
</th>
<ol>
<li> Programaciónn </li>
<li> Base de datos</li>
<li> Redes </li>
</ol>
</th>
</tr>/
<tr> <th colspan="3"> <marquee> Actividad 8 </marquee> </th> </tr>
</table>
</body>
</html>
Tenemos como segunda parte de nuestro código la etiqueta <tr> que como bien ya
sabemos define una fila de celdas en una tabla. Estas pueden ser una mezcla de
elementos <td> y <th>.
Tambien esta nuestra etiqueta <th bgcolor= > que nos servirá para colocar color a
nuestro cuadro o celdas del mismo.
Continuo de esto en nuestro código también encontramos <li> </li> que nos sirve para
ubicar los elementos agrupados dentro de nuestra tabla.

191061115
 Finalizamos nuestra línea de comando cerrando con </ol> que como bien ya
sabemos esta etiqueta es la encargada de El elemento ol permite definir listas o
viñetas ordenadas (“Ordered List”), bien con numeración o alfabéticamente. Sus
etiquetas son: <ol> y </ol> (ambas obligatorias). Crea una caja: en bloque.
 Al igual <li> esta etiqueta el elemento li del ingles item list o elemento de lista
declara cada uno de los elementos de una lista. Sus etiquetas son: <li> y </li> (la
de cierre es opcional). Crea una caja: en bloque.
 Por ultimo es importante aclarar la importancia del colspan los atributos colspan y
rowspan permiten unir una celda con las celdas contiguas, tanto horizontal como
verticalmente. El valor de colspan indica la cantidad de celdas unidas en
horizontal y el valor de rowspan indica la cantidad de celdas unidas en vertical.
Por ultimo agregamos un marquee a nuestra actividad 8 para colocar movimiento en la

reproducción del texto.
Quedando nuestra práctica de la siguiente manera en nuestro navegador:

191061115
Conclusión:
Esta práctica en lo particular me pareció bastante interesante la agrupación y la utilización
de las diferentes etiquetas para la ejecución de la práctica, y es realmente importante
conocer la importancia y función de cada una de estas etiquetas, espero seguir
aumentando cada vez más mis conocimientos respecto a las diferentes funciones de HTML.

191061115

Actividad 8 Practica 3 Tablas y Listas en HTML

Cargado por

Información del documento

Descripción original:

Título original

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

Actividad 8 Practica 3 Tablas y Listas en HTML

Cargado por

Copyright:

Formatos disponibles

Programación Web Ing. Eusebio Bueno M.

Actividad 8 Practica 3 Tablas y listas en HTML

 Instituto Tecnológico Superior de Mulegé

Cinthia Adamari Sotelo Leyva

<table> Esta etiqueta nos permite crear una tabla

<tr> Esta etiqueta nos permite crear cada fila

<ul>Define una lista desordenada

<ol>Define una lista ordenada

ocurre cuando un iteam de la lista a su vez se puede anidar.

Cinthia Adamari Sotelo Leyva

Es importante que SIEMPRE que vallamos a empezar una

Cinthia Adamari Sotelo Leyva

Este paso es de suma importancia ya que debemos

Cinthia Adamari Sotelo Leyva

Ya si logramos apreciar ya contamos con gran parte de la estructura de nuestra práctica,

Cinthia Adamari Sotelo Leyva

<tr> <th colspan="3"> Cinthia Adamari Sotelo Leyva </th> </tr>

Cinthia Adamari Sotelo Leyva

Por ultimo agregamos un marquee a nuestra actividad 8 para colocar movimiento en la

Cinthia Adamari Sotelo Leyva

Cinthia Adamari Sotelo Leyva

También podría gustarte