Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • PRACTICA 2 Google Fonts PDF

    Cargado por

    Martin San
    36 vistas3 páginas

    Título original

    PRACTICA 2 Google Fonts.pdf

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    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 PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    36 vistas3 páginas

    PRACTICA 2 Google Fonts PDF

    Cargado por

    Martin San

    Copyright:

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

    Desarrollo de Sitios Web

    - PRACTICA 2 GOOGLE FONTS-

    Jos Luis Prez Resendiz

    - 1-

    PRCTICA 2. GOOGLE FONTS.


    En esta actividad lograremos incorporar una fuente de las que ofrece Google
    Fonts para poderla incorporar a nuestras pginas web. Siga las indicaciones paso
    a paso.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Prueba con Fuentes de Google</title>
    <link href="misestilos.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec accumsan
    turpis, eget sagittis lectus. Cras mi mauris, faucibus sit amet commodo eu, tincidunt
    vitae orci. Aenean nec. Phasellus ultricies odio ac congue tempus.
    </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec accumsan
    turpis, eget sagittis lectus. Cras mi mauris, faucibus sit amet commodo eu, tincidunt
    vitae orci. Aenean nec ligula a urna rho odio ac congue tempus.
    </p>
    </body>
    </html>

    ciberecus.mx

    a. Genere un nuevo sitio web de forma local en donde existan dos archivos
    enlazados: index.html y misestilos.css. El archivo html debe contener texto
    (Lorem Ipsum) en un par de prrafos incrustados:

    Desarrollo de Sitios Web

    - PRACTICA 2 GOOGLE FONTS-

    Jos Luis Prez Resendiz

    - 2-

    b. Acceda al siguiente enlace: https://www.google.com/fonts ; y busque la fuente


    denominada: Lobster.

    Puede ver varias caractersticas de la fuente entre ellas un medidor de carga


    de la fuente, el cual le permitir estimar el tiempo en el cual se cargar esa
    fuente dentro de su pgina.

    d. Recorra las descripciones y propiedades de la fuente hasta ubicarse en


    el rea de Add this code to your websites:. Seleccione y copie la
    lnea de cdigo que ah aparece:

    e. Ahora vaya a su pgina index.html y pegue ese cdigo en el rea de


    <head>.
    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

    El cdigo del index.html debera parecerse a este:


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title> Prueba con Fuentes de Google </title>

    ciberecus.mx

    c. Haga clic en el icono Quick-use de la ficha de la fuente:

    Desarrollo de Sitios Web

    - PRACTICA 2 GOOGLE FONTS-

    Jos Luis Prez Resendiz

    - 3-

    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet'


    type='text/css'>

    </head>
    <body>
    p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec accumsan
    turpis, eget sagittis lectus. Cras mi mauris, faucibus sit amet commodo eu, tincidunt
    vitae orci. Aenean nec. Phasellus ultricies odio ac congue tempus.
    </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec accumsan
    turpis, eget sagittis lectus. Cras mi mauris, faucibus sit amet commodo eu, tincidunt
    vitae orci. Aenean nec ligula a urna rho odio ac congue tempus.
    </p>
    </body>
    </html>

    f. Para hacer uso de la fuente, solo necesita hacer referencia de ella en la


    seccin de CSS, incrustada dentro de una regla aplicada a un prrafo.

    El archivo de CSS debera parecerse a este:


    p{
    color: #900;
    font-family: 'Lobster', cursive;
    font-size: 25px;
    }

    g. Si guarda todos los cambios y prueba con un navegador debera ver la


    nueva fuente incrustada en su pgina web.

    ciberecus.mx

    <link href="misestilos.css" rel="stylesheet" type="text/css" />

    También podría gustarte