practica 2 google fonts.pdf

7/23/2019 PRACTICA 2 Google Fonts.pdf

1/3

Desarrollo de Sitios Web - PRACTICA 2 GOOGLE FONTS- Jos Luis Prez Resendiz - 1-

c i b e r e c u s m

x

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.

a. Genere un nuevo sitio web de forma local en donde existan dos archivos

enlazados: index.htmly misestilos.css. El archivo html debe contener texto

(Lorem Ipsum) en un par de prrafos incrustados:

Prueba con Fuentes de Google

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.



vitae orci. Aenean nec ligula a urna rho odio ac congue tempus.


2/3


c i b e r e c u s m

x

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

denominada: Lobster.

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

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 esafuente 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 lalnea de cdigo que ah aparece:

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

.

El cdigo del index.htmldebera parecerse a este:

Prueba con Fuentes de Google


3/3


c i b e r e c u s m

x

p>



vitae orci. Aenean nec. Phasellus ultricies odio ac congue tempus.



vitae orci. Aenean nec ligula a urna rho odio ac congue tempus.

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.

practica 2 google fonts.pdf

Documents