Mostrando entradas con la etiqueta estilo. Mostrar todas las entradas
Mostrando entradas con la etiqueta estilo. Mostrar todas las entradas

jueves, 26 de abril de 2012

S07C02 : Inspeccionando las Paginas Web


Cuando estamos creando una pagina web podemos inspeccionar el HTML con la cual esta construida, los estilos que se están utilizando, los recursos descargados, los guiones en ejecución, el tiempo y la cantidad de datos que se descargaron de la red. Esto es posible gracias a que la mayoría de navegadores (Firefox. Chrome, Safari) traen consigo un Inspector de Paginas que nos deja inspeccionar estos datos de cualquier pagina que carguemos. 

Con solo presionar las teclas Ctrl-Shift-I se visualiza bajo el navegador o en una pantalla a parte como :

  • El HTML de la pagina a la cual estamos visitando 
  • Los estilos CSS usados por cada elemento, cuales esta heredando y de quien 
  • Moviendo el ratón sobre la pagina original nos mostrara en la ventana de inspección el trozo de HTML que hace referencia a dicho elemento 
  • Los recursos usados por l pagina (scripts. imagenes, etc)
  • Las propiedades de cada elemento 
  • Los scritps que se están ejecutando 
  • Visualizar cuanto demoro la pagina en cargar incluyendo todos sus elementos y el total de bytes para cargar la pagina totalmente 
Esta información es muy útil cuando estamos desarrollando paginas por que permite identificar las propiedades de cada elemento permitiendo su cambio de manera rápida y fácil. 

miércoles, 28 de marzo de 2012

S04T01 : Terminar Actividad 05



Actividad 05 : 

  • Descargar el archivo de la actividad 5 
    mcpw_actividad_05.zip
  • Ir al directorio sitio/css y abrir el archivo style.css 
  • Adicionar el color de fondo de la pagina :
    body
    {
        background-color: lightgray;
    }
  • Abrir cada archivo HTML y adicionar la definición del estilo 
    <head>
       <link rel="stylesheet" href="css/style.css" type="text/css" />
    </head>
  • Hacer que las paginas estén separadas por 100 pixels del borde de la ventana
  • Hacer que el contenido de los párrafos estén justificados
  • Cambiar el estilo de los encabezados (h1) para que el fondo sea azul, la letra sea blanca y el texto este centrado
  • Eliminar el subrayado de los enlaces 
  • Hacer que la lista de pregrado se visualice con un cuadrado 
  • Hacer que la lista de posgrado se visualice con números romanos

martes, 27 de marzo de 2012

S04C01 : Hojas de Estilo



Hasta el momento hemos utilizado el lenguaje HTML para estructurar el contenido de nuestros sitios, ahora con las hojas de estilo podemos cambiar la apariencia de nuestras paginas asignando colores a los diferentes elementos, alineando el texto en pantalla y modificando un sin numero de características visuales de cada uno de los elementos. 

Temas : 
  • La apariencia de las paginas web y el HTML 
  • Las Hojas de Estilo (CSS)
    • Que es una hoja de estilo 
    • Creación de un archivo con la hoja de estilo 
    • Asignar a la pagina la hoja de estilo 
    • Cambiando el color de fondo de una pagina
  • Espacio entre elemenos 
    • Margenes (margin)
    • Acolchamiento  (padding)
  • Manejo de los Colores 
  • Alineación del Texto : 
    • Centrar
      text-align:center;
    • Justificar
      text-align:justify;
    • Izquierda
      text-align:left;
    • Derecha 
      text-align:right;
  • Decorando los enlaces :
    • a:link
    • a:visited 
    • a:hover 
    • a:active 
  • Decorando las listas : 
    • Listas con circulos
      list-style-type: circle;
    • Listas con cuadrados
      list-style-type: square;
    • Listas ordenas con numeros romanos :
      list-style-type: upper-roman;
    • Listas ordenas con letras :
      list-style-type: lower-alpha;

Actividad 05 : 
  • Descargar el archivo de la actividad 5 
    mcpw_actividad_05.zip
  • Ir al directorio sitio/css y abrir el archivo style.css 
  • Adicionar el color de fondo de la pagina :
    body
    {
        background-color: lightgray;
    }
  • Abrir cada archivo HTML y adicionar la definición del estilo 
    <head>
       <link rel="stylesheet" href="css/style.css" type="text/css" />
    </head>
  • Hacer que las paginas estén separadas por 100 pixels del borde de la ventana
  • Hacer que el contenido de los párrafos estén justificados
  • Cambiar el estilo de los encabezados (h1) para que el fondo sea azul, la letra sea blanca y el texto este centrado
  • Eliminar el subrayado de los enlaces 
  • Hacer que la lista de pregrado se visualice con un cuadrado 
  • Hacer que la lista de posgrado se visualice con números romanos