martes, 30 de abril de 2013

Practica 12

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.




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>


 Practica 12


 
  Uso de herramientas para aplicaciones web
 

    


 
 

 
  
Título Del Contenido

  
Subtitulo
 
  
 Escribo 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...



 

 

  




</body>
</html>

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

Conclusión

Con las hojas de estilo en cascada se pueden asignar, además de clases, identificadores con los que también se puede controlar un lugar en específico de la página o de un objeto de la misma. Estos junto a las propiedades los elementos dejan una gran gama de diseños posibles que puede mejorar el atractivo visual de un sitio web.


URL de la práctica



Publicado por en

2 comentarios:

Suscribirse a: Enviar comentarios (Atom)