• CSS: Mas allá del blanco y negro. A partir de este momento ya debe tener un código básico para visualizar una página web, sin embargo, es muy posible que ésta se vea muy sencilla y sin color.  Pues bien, los magos de la informática han determinado que el código HTML tiene funciones estructurales, pero el CSS tiene características presentacionales. Esto significa que, si bien el primero podría asemejarse a las columnas y vigas de una casa, el segundo podría referirse a la pintura y los acabados. De esta forma el código CSS es el encargado de hacer mas amigable la visualización del contenido de la página web.

    NOMBRE COLOR 
    COD HEX DEL  COLOR  
    COD RGB DEL  COLOR  
    NEGRO
    #000000  
    RGB(0, 0, 0)  
    AZUL OSCURO
    #000080  
    RGB(0, 0, 128)  
    AZUL
    #0000FF  
    RGB(0, 0, 255)  
    VERDE
    #008000  
    RGB(0, 128, 0)  
    VERDE AZULADO
    #008080  
    RGB(0, 128, 128)  
    LIMA
    #00FF00  
    RGB(0, 255, 0)  
    AGUA
    #00FFFF  
    RGB(0, 255, 255)  
    GRANATE
    #800000  
    RGB(128, 0, 0)  
    PÚRPURA
    #800080  
    RGB(128, 0, 128))  
    OLIVA
    #808000  
    RGB(128, 128, 0)  
    GRIS
    #808080  
    RGB(128, 128, 128)  
    PLATA
    #C0C0C0  
    RGB(192, 192, 192)  
    ROJO
    #FF0000  
    RGB(255, 0, 0)  
    FUCSIA
    #FF00FF  
    RGB(255, 0, 255))  
    AMARILLO
    #FFFF00  
    RGB(255, 255, 0)  
    BLANCO #FFFFFF RGB(255, 255, 255)

     Le invitamos a mirar el siguiente video para la creación de una cuenta en WordPress

        

    Ejercicio de repaso:

    Para demostrar la utilidad del código CSS en el diseño de páginas web, por favor incluya en el código HTML diseñado anteriormente, las siguientes sentencias:

                   

                    <html>

    <head>

                    <style type="text/css">

                    body {background-color: yellow}

                    h1 {background-color: #00ff00}

                    h2 {background-color: transparent}

                    p {background-color: rgb(250,0,255)}

                    </style>

    </head>

    <body>

    <h1>Este es el encabezado 1</h1>

    <h2>Este es el encabezado 2</h2>

    <p>Este es un párrafo</p>

    </body>

                    </html>

     

     

    Utilice Plunker para visualizar en tiempo real los siguientes cambios:

    1.            ¿Qué sucede al incluir la sentencia <p><a href="http://trustfortheamericas.org/"> Trust for the Americas </a></p>?

    2.            Intente describir lo que sucede cuando reemplaza body {background-color: yellow} por body {  width: 600px;  margin: 0 auto;  background-color: red;  padding: 0 20px 20px 20px;  border: 80px solid yellow;}

     

    A medida que se visualiza cada cambio en el visor web, imagine el ilimitado número de posibilidades disponibles para innovar en el contenido de una página web.




    banner logos pie de página