Colegio Nacional de Educación Profesional Técnica
Lic. "Jesus Reyes Heroles"
Nombre del Alumno: José Guadalupe Martínez Cruz
Módulo: Diseño y Elaboración de Páginas Web
Grupo: INFO-604.
Práctica: N° 12.
Práctica: N° 12.
Introducción
Se crea una tabla a la cual se le aplica hojas estilos en cascada para conseguir el aspecto que se pide en la hoja de la práctica. Además el uso de identificadores para controlar de una mejor manera el diseño de la tabla.Código HTML
Se genera el siguiente código en html para crear una tabla (en el cuerpo), y además, con sintaxis css definida entre las etiquetas <style type=”text/css”> y <style> ubicadas en el head.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//ES"> <html> <head>Practica N. 12 </head> <body>
| Uso de herramientas para aplicaciones web | |||
|---|---|---|---|
Título Del ContenidoSubtituloEscribo algo para rellenar....
Escribo algo para rellenar....
Escribo algo para rellenar....
Escribo algo para rellenar....
|
aquí puede insertar imágenes, anuncios, noticias, más enlaces, etc... |
||
| Pie de página del sitio web | |||
Explicación del código generado
Se crea una tabla que tiene 100% de ancho(abarcara todo el ancho de la ventana del navegador), sus bordes son solido y de color negro pero con de ancho, tiene un margen automatico que hace que se centre en la ventana, el espacio de los bordes es de 15 pixeles(px), el color de su letra es de un gris semi-obscuro. Todo esto se define así:table{ width:100%; border:0px solid #000; margin:auto; border-spacing: 15px; color:#707070; }
Toda la tabla consta de 5 celdas, en donde:
La primera celda es formada por “<th>” y “</th>” con el texto que el titulo de la tabla “Uso de herramientas para aplicaciones web”, esta a su ves tiene la id denominada header, este con “width:100%;” cubrirá todo el espacio disponible; “height:60px;” tendrá una altura de 60px; “border:0; border-bottom:7px solid #000;” su bordes serán de 0 a excepción de inferior que será de 7px y de color negro; “font-size:40px; text-align:left; font-weight:600; background-color:rgb(204,153,30);” con esto ultimo tendrá una letra de tmaño de 40px con alineación a la izquierda y una anchura de las letras de 600, además tener un fondo de color entre naranja y dorado. Por ultimo esta celda de cabecera cubre lo de 3 celdas más con “colspan="4"”, permitiéndole expandirse hasta los dos extremos de la tabla.
La segunda, la tercera y la cuarta celda, son identificadas por las id “iquierda”, “conteiner” y “derecha” respectivamente.
Izquierda tiene dentro una lista desordenada; a esta celda se le asigna los siguientes atributos:
“width:300px;”, “min-width:200px;” y “height:150px;” determinan que tundra un ancho de 300px, además su ancho mínimo será de 200px y su altura es 150px; “font-size:18px;” “padding-left:25px;” y “background-color:#f0f0f0;” definen que la tabla tiene una fuente de 18px, un margen interior de 25px y un color de fondo gris claro.
Conteiner será de dos filas de altos(rowspan="2"), los estilos para esta celda son un ancho de 900px, un ancho mínimo de 400px, un interlineado de 30px; esta celda contiene un titulo(<h1> y </h1>), un subtitulo(<h2> y </h2> y este a su vez tienen con font-weight:600; un grosor de 600) y cuatro párrafos (<p> y </p>).
Derecha solamente tiene un párrafo, sus estilos definen que tiene 80px de altura, su texto está justificado, su letra es de 17px y fuente “Helvetica”, un color de fondo entre crema y/o beige.
La última celda, id="footer", al igual que header abarca 3 celdas a lo ancho, tiene escrito el texto “Pie de página del sitio web”; sus estilos son, los siguientes:
“text-transform:uppercase;” con esto se declara que su texto se verá todo en mayúsculas aunque este escrito en minúsculas, “text-align:center;” su texto estará alineado al centro, y “height:35px;” tiene una altura de 35px.
Los últimos estilos son: #izquierda a, h1, #conteiner p{ color:rgb(33,100,154); text-decoration:none;} y #izquierda, #footer, #conteiner h1{ font-weight:900;}
Resultado
Todos estilos son necesarios para crear la siguiente tabla: |
| Tabla resultante |
