HTML Práctico CSS

Document Sample
HTML Práctico CSS Powered By Docstoc
					Área De Servicios - Departamento De Informática




                                     HTML - Práctico CSS

1. Probar en su navegador el siguiente código HTML y CSS que ejemplifica
   distintos tipos de alineación.

<html>
  <head>
    <title>Propiedades       del texto</title>
    <style>
      h1 { text-align:       left; }
      h2 { text-align:       right; }
      h3 { text-align:       center; }
    </style>
  </head>

  <body>
    <h1>Alineación izquierda</h1>
    <h2>Alineación derecha</h2>
    <h3>Alineación centrada</h3>
  </body>
</html>



2. El espacio entre palabras se define mediante la propiedad “word-spacing” y
   puede tomar los valores “normal” (equivalente a cero) o un valor numérico.
   Dado el siguiente código HTML y CSS, agregar los estilos necesarios para que el
   espacio entre palabras sea de 1cm, 2cm, y -1cm.

<html>
  <head>
    <title>Propiedades del texto</title>
  </head>

  <body>
    <p style="word-spacing: normal;">
      Prueba de espaciado de palabras en un parrafo.
    </p>
  </body>
</html>




3. Investigue para qué sirve el atributo text-transform. Escriba una página HTML
   con CSS, que ejemplifique los valores uppercase, lowercase y capitalize.



Curso Programación Web con HTML (Práctico CSS )                          Página 1/6
Área De Servicios - Departamento De Informática




4. A partir del código HTML y CSS que se muestra, añadir el texto suficiente en el
   cuerpo (body) para probar los distintos tipos de indentación provistos en el
   ejercicio.

<html >
<head>
  <title>Propiedades del texto</title>
  <style>
       p.indentacion { text-indent: 0.25in; }
       p.indentacion_francesa { margin-left: 0.25in; text-indent: -0.25in; }
  </style>
</head>
<body>
<p class="indentacion">

</p>
<p class="indentacion_francesa">

</p>
</body>
</html>



5. Analizar y probar en su navegador el siguiente código HTML y CSS, que
   ejemplifica la diferencia entre DIV y SPAN.

<html>
<head>
  <title>Propiedades del texto</title>
  <style>
.large {
color: #00FF00;
font-family:arial;
font-size: 14pt;
}
.largefont {
color: #0066FF;
font-family:arial;
font-size: 22px;
}
  </style>
</head>
<body>
<div class="large"> DIV trabaja a nivel de parrafo (o
bloque pequenio de texto).
</div>
<p>Con Span podemos dar formato<span class="largefont">

Curso Programación Web con HTML (Práctico CSS )                           Página 2/6
Área De Servicios - Departamento De Informática




a menor nivel que DIV</span>
</p>
</body>
</html>



6. Definir las reglas CSS que permiten mostrar los enlaces con los siguientes
   estilos:

    •   En su estado normal, los enlaces se muestran de color rojo #CC0000.
    •   Cuando el usuario pasa su ratón sobre el enlace, se muestra con un color
        de fondo rojo #CC0000 y la letra de color blanco #FFFF
    •   Los enlaces visitados se muestran en color gris claro #CCC0.

7. Dado el siguiente código HTML

<html>
<head>
  <title>Mi primera página con estilo</title>
 </head>
<body>
<!-- Menú de navegación del sitio -->
<ul class="navbar">
  <li><a href="datos.html">Datos personales</a>
  </li>
  <li><a href="textos.html">Publicaciones y otros
documentos propios</a>
  </li>
  <li><a href="cursos.html">Cursos</a>
  </li>
  <li><a href="fotos.html">Album de fotos</a>
  </li>
</ul>
<!-- Contenido principal -->
<h1>Mi primera página con estilo</h1>
<p>¡Bienvenido a mi primera página con estilo!
</p>
</body>
</html>


    7.1. Crear un estilo para el “body” que incluya un color de fondo cuyo valor es
         de #d8da3d y color para la fuente cuyo valor es purple.
    7.2. Añadir dentro del estilo de “body”, el valor de tipo de fuente Times New
         Roman.


Curso Programación Web con HTML (Práctico CSS )                            Página 3/6
Área De Servicios - Departamento De Informática




    7.3. Crear un estilo para h1 que incluya el atributo font-family, cuyo valor
         puede ser Helvetica, Geneva, Arial, sans-serif.
    7.4. Dar distintos estilos a los enlaces, cambiando el estilo si el usuario pasa el
         ratón por el enlace, o si el enlace ya fue visitado.
    7.5. Crear un nuevo archivo “miestilo.css”, el cual contendrá todos estilos
         creados en este ejercicio. Realizar los cambios necesarios para que el
         archivo html pueda hacer uso de la hoja de estilo guardada en
         “miestilo.css”.


                                      Complementario

8. Determinar las reglas CSS necesarias para mostrar la siguiente tabla con el
   aspecto final mostrado en la imagen (modificar el código HTML que se
   considere necesario)




                                                             Tabla original




<html lang="es">
<head>
  <title>Ejercicio formatear tabla</title>
</head>
<body>
<table summary="Tipos de cambio" border="1">
  <tbody>
    <tr>
      <td style="font-weight: bold;">Cambio</td>
      <td style="font-weight: bold;">Compra</td>
      <td style="font-weight: bold;">Venta</td>
      <td style="font-weight: bold;">Máximo</td>
      <td style="font-weight: bold;">Mínimo</td>
    </tr>
    <tr>
      <td style="font-weight: bold;">Euro/Dolar</td>
      <td>1.2524</td>
      <td>1.2527</td>
      <td>1.2539</td>
Curso Programación Web con HTML (Práctico CSS )                               Página 4/6
Área De Servicios - Departamento De Informática




      <td>1.2488</td>
    </tr>
    <tr>
      <td style="font-weight: bold;">Dolar/Yen</td>
      <td>119.01</td>
      <td>119.05</td>
      <td>119.82</td>
      <td>119.82</td>
    </tr>
    <tr>
      <td style="font-weight: bold;">Libra/Dolar</td>
      <td>1.8606</td>
      <td>1.8611</td>
      <td>1.8651</td>
      <td>1.8522</td>
    </tr>
    <tr>
      <td style="font-weight: bold;">Euro/Yen</td>
      <td>149.09</td>
      <td>149.13</td>
      <td>149.79</td>
      <td>148.96</td>
    </tr>
  </tbody>
</table>
</body>
</html>




                                                                Tabla final




    8.1. Definir los estilos necesarios para alinear el texto de las celdas, cabeceras y
         título. Además definir los estilos para los bordes de la tabla, celdas y
         cabeceras (color gris oscuro #333).




Curso Programación Web con HTML (Práctico CSS )                               Página 5/6
Área De Servicios - Departamento De Informática




    8.2. Definir los estilos para las cabeceras de fila y columna con la imagen de
         fondo correspondiente en cada caso (fondo_gris.gif, euro.png, dolar.png,
         yen.png, libra.png).
    8.3. Definir un estilo para el tipo de letra de la tabla, utilizar Arial. El color azul
         claro es #E6F3FF.
    8.4. Definir un estilo para mostrar un color alterno en las filas de datos (color
         amarillo claro #FFFFCC).




    8.5. Crear un nuevo archivo “mitabla.css”, el cual contendrá todos estilos
         creados en este ejercicio. Realizar los cambios necesarios para que el
         archivo html pueda hacer uso de la hoja de estilo guardada en
         “mitabla.css”.




Curso Programación Web con HTML (Práctico CSS )                                  Página 6/6