Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Actividad 2 Del Módulo 2

    Cargado por

    Gopeman
    10 vistas3 páginas

    Título original

    Actividad 2 del Módulo 2

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOC, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como DOC, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    10 vistas3 páginas

    Actividad 2 Del Módulo 2

    Cargado por

    Gopeman

    Copyright:

    © All Rights Reserved
    Descargue como DOC, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 3

    CURSO DISEÑO DE PÁGINAS WEB CON HTML, CSS Y JAVASCRIPT

    Probando el uso de CSS en una Hoja de estilo externa.


    (Valor 25 puntos).

    Continuando con las prácticas correspondientes a esta semana de actividades,


    en esta ocasión vamos a poner en práctica y a probar las propiedades básicas
    de CSS para darle estilo a un documento HTML, pero ahora, vamos a hacer
    uso de ellas de forma externa, colocando las propiedades de estilos en un
    documento externo y enlazándolo a la página HTML mediante el código: <link
    rel="stylesheet" href="estilos.css"> que colocaremos en la sección <head> del
    documento HTML, a través del cual enlazaremos las propiedades CSS que
    colocaremos en el archivo estilos.css

    Este es el método más utilizado en CSS y brinda la ventaja de que podemos


    aplicarle estilos a varias páginas web utilizando un solo documento CSS, es
    decir, podemos aplicar estilos a 100 páginas web enlazándolas a un solo
    documentos CSS que contenga las propiedades a utilizar.

    Para ir conociendo CSS vamos a aplicarle color de fondo y color al texto en una
    página HTML, para hacerlo utilizaremos las propiedades color y background-
    color

    Guía:

    1. Cree una carpeta

    2. Abra el bloc de notas, copie y pegue el siguiente código y guarde el


    archivo como pagina.html dentro de la carpeta que acaba de crear:

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="estilos.css">
    <title>Mi primera página con CSS</title>
    </head>
    <body>
    <h1>Curso HTML, CSS y Javascript Infotep</h1>
    <div class="job-title">Desarrollador Web</div>
    <p>Far far away, behind the word mountains, far from the
    countries Vokalia and Consonantia, there live the blind texts. Separated
    they live in Bookmarksgrove right at the coast of the Semantics, a large
    language ocean.</p>

    <p>A small river named Duden flows by their place and supplies it
    with the necessary regelialia. It is a paradisematic country, in which
    roasted parts of sentences fly into your mouth. </p>
    <div align="center"><iframe width="560" height="315"
    src="https://www.youtube.com/embed/TADyKnxxENg" frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media;
    gyroscope; picture-in-picture" allowfullscreen></iframe> </div>
    <h2>Información de contacto</h2>
    <ul>
    <li>Email: <a
    href="mailto:jane@example.com">jane@example.com</a></li>
    <li>Web: <a href="http://example.com">INFOTEP</a></li>
    <li>Tel: 123 45678</li>
    </ul>
    </body>
    </html> <h1> Mis primeros pasos en CSS </h1>
    </body>
    </html>

    3. Luego abra un nuevo bloc de notas copie y pegue el siguiente código y


    guarde el archivo como estilos.css dentro de la carpeta que acaba de
    crear:
    body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: lightblue;
    }

    h1 {
    color: #375e97;
    font-size: 2em;
    font-family: Georgia, 'Times New Roman', Times, serif;
    border-bottom: 1px solid #375e97;
    }

    h2 {
    font-size: 1.5em;
    }

    .job-title {
    color: #999999;
    font-weight: bold;
    }

    a:link, a:visited {
    color: #fb6542;
    }

    a:hover {
    text-decoration: none;
    }

    4. Ahora vaya a la carpeta que contiene los archivos y abra pagina.html, si


    se visualiza correctamente con los colores correspondientes, buen
    trabajo, ahora, comprima la carpeta y súbala a la plataforma en el
    espacio correspondientes.

    También podría gustarte