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° 11.

Introducción

Se utiliza el código de la práctica anterior al cual se le aplican nuevos estilos para mejorar la imagen de la página.

Código HTML

La modificación del código de la práctica 10 queda de la siguiente manera:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//ES">
<html>
            <head>
            <title>Practica N. 11</title>
            </head>
            
                        <style type="text/css">
                                   body { color: blue }
                                   body { background-color: #F3F781 }
                                   body { font-family: Georgia, “Times New Roman”, Times, serif }
                                   h1 { Font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif ;}

                                   .navbar{list-style-type: none; padding: 20; margin: 0; float: left;}                                                      .navbar li{
                                   background: white;
                                   margin: 0.5em 0;
                                   padding: 0.3em;
                                   border-right: 1em solid black;
                                   text-decoration: none;}

                        a:link{ color:blue; }
                                   a:visited{color:blue; }
                        </style>
<body id="arriba">
            <ul class="navbar">
                        <li><a href="#arriba">Página principal</a></li>
                        <li><a href="practica10.html" target="_ablank">Altas</a></li>
                        <li><a href="#arriba">Bajas</a></li>
                        <li><a href="#arriba">Modificaciones</a></li>
                        <li><a href="#arriba">Consultas</a></li>
            </ul>
            <h1>Uso de herramientas aplicaciones web</h1>
            <p>¡En este ejemplo haremos uso de hojas de estilo en cascada! </p>
            <p>¡Daremos formato al texto y a los enlaces! </p>
            <p> Esta Página no cuenta con imágenes, pero contiene enlaces, aunque no te lleven a ningún sitio… </p>
            <p> Debería haber más cosas aquí, pero es suficiente para lo que necesitamos ejemplificar</p>
</body>
</html>

Explicación del código generado

En el archivo se modificó la lista que estaba en la parte superior de la página:

A esta lista se le añadió la clase navbar en el inicio de la lista que dando “<ul class="navbar">”; se logra observar que se añadió la propiedad class=””, la cual puede ser colocada en cualquier elemento de un página.
A este selector se le aplicaron los siguientes estilos para cambiar el diseño de la lista:
.navbar{list-style-type: none; padding: 20; margin: 0 auto; float: left;}
La primera propiedad define que la lista no tendrá ningún estilo, es decir, no tendrá alguna figura para las viñetas.
La segunda, que es padding, dará un margen interior de 20px, seguido está el margen de la todo la lista con respecto en donde se localize.
Float es para dejar la lista como flotante, esta estará en izquierdad con float:left;

Seguido se define lo siguiente: .navbar li{ …estilos….}, con esto se seleccionan todos los elementos li dentro de donde este marcada la clase, en este caso es el elemento ul, en esta se declaran los estilos, primero un fondo blanco(background: white;), seguido el margin de los list ítem (margin: 0.5em 0;), luego la separación del borde a lo contengan(padding: 0.3em;), después el borde derecho será de un 1em y de color negro(border-right: 1em solid black;), y finalente los caracteres que contenga no podrán estar subrayados(text-decoration: none;).
Ademà en este código se les asigna un color a los enlaces no visitados y visitados con las pseudo-clases que los selecciona, :link para los no visitados y :visited para los ya visitados.
a:link{ color:blue; } a:visited{color:blue; }

Resultado

Se observa el cambio que ha pasado la página, lo anteriormente explicado mejora su apariencia y su estructura:

Links sin visitar

Links Visitados

Conclusión

Para la mejora de la apariencia de un sitio o de una página web se pueden utilizar hojas de estilo en cascada (CSS), además de utilizar los selectores por etiqueta se pueden utilizar las clases y pseudo-clases para tener un mayor control de diferentes elementos, definiendo un estilo para los que contengan el atributo class con el nombre de la clase, o generalizando pseudo-clases que controlan a los elementos que sufren alguna acción.