PRACTICA 2 Google Fonts.pdf
-
Upload
martin-san -
Category
Documents
-
view
222 -
download
0
Transcript of 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.
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.
-
7/23/2019 PRACTICA 2 Google Fonts.pdf
2/3
Desarrollo de Sitios Web - PRACTICA 2 GOOGLE FONTS- Jos Luis Prez Resendiz - 2-
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
-
7/23/2019 PRACTICA 2 Google Fonts.pdf
3/3
Desarrollo de Sitios Web - PRACTICA 2 GOOGLE FONTS- Jos Luis Prez Resendiz - 3-
c i b e r e c u s m
x
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.
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.
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.