CHTML-B-Ejercicio-TablasHTML

•

Outros

0

marketingdigital1995

17/6/2023

¡Este material tiene más páginas!

Entonces, ¿te gustó este material?

Ayude a animar a otros estudiantes a mejorar el contenido

¿Te gustó este material? ¡Compartir! 🧡

Libros

93.124 Materiales compartidos

Descarga la aplicación para disfrutar aún más

Lea materiales sin conexión, sin usar Internet. Además de muchas otras características!

Vista previa del material en texto

www.globalmentoring.com.mx
www.globalmentoring.com.mx
Crear un proyecto para practicar el concepto de tablas con 
HTML. Al finalizar deberemos observar lo siguiente:
www.globalmentoring.com.mx
Vamos a crear el proyecto:
www.globalmentoring.com.mx
Vamos a crear el archivo estilos.css:
www.globalmentoring.com.mx
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilos.css">
<title>Ejercicio Tablas HTML</title>
</head>
<body>
<h1>Ejercicio Tablas HTML</h1>
<table width="500" border="1">
<caption>
Tabla Lenguajes Programaci&oacute;n
</caption>
<tr>
<th>
Nombre
</th>
<th>
Descripci&oacute;n
</th>
<th>
Creador
</th>
</tr>
<tr class="row1">
<td>
Java
</td>
Archivo index.html Dar click para ir al código
http://icursos.net/cursos/HTML/Leccion04/ManejoTablas/index.txt
www.globalmentoring.com.mx
<td>
Desarrollo de aplicaciones generales, su fuerte está en las aplicaciones empresariales
</td>
<td>
James Gosling
</td>
</tr>
<tr class="row2">
<td>
JavaScript
</td>
<td>
Desarrollo aplicaciones para Internet, mayormente enfocadas en el front end de las aplicaciones Web
</td>
<td>
Brendan Eich
</td>
</tr>
<tr class="row1">
<td>
PHP
</td>
<td>
Lenguaje para crear aplicaciones Web de rápido desarrollo
</td>
<td>
Rasmus Lerdorf
</td>
</tr>
</table>
</body>
</html>
Archivo index.html Dar click para ir al código
http://icursos.net/cursos/HTML/Leccion04/ManejoTablas/index.txt
www.globalmentoring.com.mx
body {
background:#f1f3fe;;
font-family:"Comic Sans MS";
}
caption{
height:30pt;
font-weight:bold;
color:#004080;
}
th{
text-align:center;
color:#4d4d4d;
background:#a8d3ff;
}
td{
text-align:justify;
color:#5b5b5b;
/*background:#f5f5f5;*/
font-size:small;
vertical-align:middle;
}
.row1{
background:#ffffff;
}
.row2{
background:#e5e5e5;
}
Archivo estilos.css Dar click para ir al código
http://icursos.net/cursos/HTML/Leccion04/ManejoTablas/estilos.css
www.globalmentoring.com.mx
El resultado es como sigue:
www.globalmentoring.com.mx
• Realizar la inspección con el navegador Web y entender 
cada uno de los elementos que componen la página Web, 
además revisar los estilos CSS aplicados a cada elemento de 
la tabla HTML.
• Recordar que la inspección del código HTML consiste en 
seleccionar una parte del código desde el navegador Web, 
dar click derecho y seleccionar inspeccionar.
www.globalmentoring.com.mx
• Con este ejercicio hemos puesto en práctica el concepto de 
tablas con HTML. Hemos visto cada uno de sus elementos, 
así como aplicamos algunos estilos para mejorar la 
apariencia visual de nuestra tabla HTML.
www.globalmentoring.com.mx
Por: Ing. Ubaldo Acosta