Calificación FINAL (Faltan tareas)

Hola saludos
Les publico las calificaciones obtenidas considerando las prácticas, y tareas entregadas. Muchos de ustedes no me han mostrado las firmas con sus tareas, eso los ayudará para acreditar la materia, tienen hasta mañana 25 de octubre para entregarlas.
Mientras tanto aquí esta la imagen con su situación actual:

Mañana martes pueden localizarme a las 8:40am en el centro de computo.

Por favor, no dejen pasar el tiempo, porque debo realizar la entrega de calificaciones a control escolar el día Jueves.

Saludos!!!

Colección de páginas HTML

Con un pequeño menú CSS he integrado las páginas HTML que desarrollamos durante el curso de "INFORMATICA VI. Creación de páginas Web básicas con HTML"

Aunque ante tanta actividad de protección civil no logramos ver el tema dedicado a la publicación de nuestros HTML en servidores de Internet públicos, realmente no es tarea complicada porque en muchos de los casos el proveedor de "Hosting" o "Servidor" de Internet ofrece herramientas para hacer un UPLOAD a los archivos que deseamos publicar.

El link del listado final de HTML es:
www.fraternum.com/puntosCiber/UGM/InformaticaVI/HTML/


NOTA:
El día miércoles 19 de octubre los esperé en clase para explicar y acordar la calificación final, les recuerdo que el examen es el viernes 21.
Si alguie desea entregar practicas para tener máximo 6 de calificación en cada una de ellas, tienen hasta el viernes, si usan el código aquí publicado por favor realicenle modificaciones para contarlas.

PRÁCTICA 4. Diseño de menus con CSS y Listas

El diseño de menús fundamentalmente tiene sus bases en el manejo de CSS y Listas de tipo <UL>

La práctica 4 que no logramos completar en clase tiene como finalidad ejemplicar:

1. Tres diferentes formas de ver una lista utilizando CSS 
           a) Lista sin viñeta

        <style type="text/css">

            #navi1 {
                list-style:none;
                margin:0;
                padding:0;
            }

        </style>

        <ul id="navi1" >
            <li><a href="#">inicio</a></li>
            <li><a href="#">acerca de</a></li>
            <li><a href="#">contactos</a></li>
        </ul>  

       

      b) Lista con viñeta en forma de círculos

         <style type="text/css">

            #navi2 {
                list-style-type:circle;
            }

        </style>

        <ul id="navi2" >
            <li><a href="#">inicio</a></li>
            <li><a href="#">acerca de</a></li>
            <li><a href="#">contactos</a></li>
        </ul>

Clic derecho para descargar

1. c) Lista con viñetas usando imagenes ".png" (la imagen debe estar dentro de la misma carpeta que contiene el archivo HTML)

         <style type="text/css">

            #navi3 {
                list-style-image:url(User.png);
            }

        </style>

        <ul id="navi3" >
            <li><a href="#">inicio</a></li>
            <li><a href="#">acerca de</a></li>
            <li><a href="#">contactos</a></li>
        </ul>

     2.  Titulos <H1> para cada tipo de lista: sin viñetas, con viñetas circulares y de imagen, y  un titulo principal  <H2>. El código fuente que agrupa las 3 listas anteriores es el siguiente:

    <style type="text/css">

            h1 {
                color: #12cc33;
            }
            h2 {
                color: #cccc33;
            }

    </style>

         <h2>Página Web con menú de opciones creado con LISTAS y CSS</h2>
        <br><br>
   
        <h1>Listado sin viñeta</h1>
        <ul id="navi1" >
            <li><a href="#">inicio</a></li>
            <li><a href="#">acerca de</a></li>
            <li><a href="#">contactos</a></li>
        </ul>
        <br><br>
       
        <h1>Listado con viñeta circulos</h1>
        <ul id="navi2">
            <li>inicio</li>
            <li>acerca de</li>
            <li>contactos</li>
        </ul>
       <br>
       
        <h1>Listado con imagenes de viñeta</h1>
        <ul id="navi3">
            <li>inicio</li>
            <li>acerca de</li>
            <li>contactos</li>
        </ul>


El código CSS necesario para que la primera lista tome la forma de un menú es el siguiente:
            #navi1 li{
                margin:2px;
                padding:0;
                border:1px solid#CCCCCC;
                float:left;
            }
            #navi1 li a {
                display:block;
                width:200px;
                padding:4px 0;
                text-decoration:none;
                text-align:center;
                font-size:20px;
                color:#FFFFFF;
                background-color:#000000;
                border-left:10px solid #666666;
            }
            #navi1 li a:hover {
                color:#99CC00;
                background-color:#003366;
                border-left-color:#99CC00;            }           


                  Quedando la página con una apariencia parecida con la siguiente:

Para completar la página solo deberán acomodar todo el código en un solo documento HTML, donde todo el código CSS debe estar ubicado dentro de las etiquetas <STYLE type="text/css">  </STYLE> y el código HTML dentro de <BODY> </BODY>

¡Bienvenidos!

Saludos
Este será el medio por el cual tendremos comunicación para las prácticas de la materia de Informática VI, por ahora les comento:

• La práctica de hoy se logró satisfactoriamente, por lo cual todos han acomulado el 25% de la calificación de prácticas.
• La página HTML realizada en clase deberán tenerla impresa y pegada a la libreta para dejarla como evidencia, el día lunes la firmare.

Sin mas, nos vemos pronto.