Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Final-HTML-Google-fonts - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 22 de febrero de 2021 por Julio G.

54 visualizaciones

Más información Capítulos Transcripción

Intro 00:00:00
Elegir tipografía 00:00:24
Embeber el código 00:01:32
Resultado final 00:05:23

Descargar la transcripción

Vamos ahora a cambiar los estilos tipográficos de nuestra página web y para ello vamos a utilizar los recursos que nos proporciona Google Fonts. 00:00:01
Vamos a ir a la página de Google Fonts y vamos a buscar la tipografía que más nos guste. 00:00:10
Yo voy a utilizar dos. Voy a coger esta que se denomina Rock and Roll One para los títulos. 00:00:27
Entonces, la he seleccionado y voy a buscar otra. Voy a volver a buscar fuentes y voy a buscar otra para el texto en general. Por ejemplo, voy a coger esta y voy a utilizar este estilo que está en italic. 00:00:38
Una vez que hemos seleccionado los estilos que queremos utilizar, tenemos que copiar el código, tenemos que embeber o incrustar el código que nos proporciona. 00:01:04
Una parte del código vamos a incrustarlo, a colocarlo en el head de nuestro documento y otro van a ser las reglas CSS que tendremos que utilizar en la hoja de estilos. 00:01:15
Vamos a copiar primero la parte que queremos incluir en el head de nuestro documento. Después de la llamada a nuestra hoja de estilos, pegamos la llamada a las fuentes de Google, por un lado, y después lo que vamos a hacer es ir a nuestra hoja de estilos y modificar. 00:01:25
vemos que al haber incluido una hoja de estilos, o sea, un enlace a los estilos de las fuentes de Google, nos aparece también en nuestro panel de estilos. 00:01:56
Y vamos a nuestra hoja de estilos y ahora vamos a utilizar la segunda parte del código que nos proporciona Google Fonts. 00:02:06
Aquí vemos que son las reglas para utilizar una u otra tipografía. 00:02:15
Vale, voy a copiar la tipografía rock and roll que la quería utilizar, hemos dicho que la quería utilizar, la voy a utilizar tanto en los enlaces, aquí la vemos, ya la había pegado, la voy a utilizar también en los encabezados, 00:02:19
y también la voy a utilizar, aquí la tengo también 00:02:39
y la voy a utilizar también, aquí ya lo tenía pegado 00:02:43
la voy a utilizar también en los 00:02:47
en estos enlaces que puse en la tabla 00:02:50
entonces, una vez que he cerrado 00:02:55
deberíamos ver que se aplica y así, aquí ya lo observamos 00:03:00
que ha cambiado la tipografía que estamos utilizando 00:03:04
Vale, también he creado el elemento H1 y le he aplicado la tipografía. 00:03:08
Por cierto, voy a cambiar, voy a aprovechar para cambiar el color de los elementos H1 00:03:15
y le vamos a colocar, no me gusta en negro, le vamos a poner el color que hemos utilizado para el... 00:03:24
Ahí lo vemos. Ojo, porque aquí, en el caso del H1, que aparece en el encabezado, el color se solapa con el propio color de fondo y no queda bien. 00:03:50
Entonces, eso también lo tenemos que tener en cuenta y modificarlo incluyendo un selector nuevo, que será un H1 del header, y eso lo dejamos con el color que tenía. 00:04:00
con el color blanco. Ahí está. Vale, pues 00:04:25
hemos comprobado, vamos a verlo también en la vista previa en el navegador 00:04:32
hemos comprobado que ha cambiado la tipografía 00:04:36
y estamos utilizando esta tipografía que queríamos para todos los elementos 00:04:40
que hemos seleccionado. Vamos ahora a cambiar 00:04:44
la tipografía del texto que aparece en la zona central, lo que hemos denominado 00:04:48
lo que es el elemento 00:04:52
article, vamos a copiar la regla CSS 00:04:55
y pues nada, vamos a ir a nuestros estilos CSS 00:05:00
la serif 00:05:04
o sea, que no era exactamente esa 00:05:08
ahora sí, debería cogerla, que es la que estábamos llamando 00:05:12
y es la que debería aparecer, ahí está 00:05:16
pues vemos que hemos modificado el aspecto 00:05:24
de la tipografía de la página utilizando 00:05:28
las fuentes de google 00:05:31
Subido por:
Julio G.
Licencia:
Reconocimiento - Compartir igual
Visualizaciones:
54
Fecha:
22 de febrero de 2021 - 13:40
Visibilidad:
Público
Centro:
IES LA CABRERA
Duración:
05′ 37″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
54.61 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid