Maquetación y tipografía para web

Comenzar a trabajar desde una página básica

¡Prueba gratis durante 10 días

nuestros 1270 cursos !

Prueba gratis Mostrar modalidades de suscripción
Vamos a definir el archivo HTML y el CSS para comenzar a trabajar desde una página básica: volcamos un texto, cargamos las fuentes elegidas y lo dejamos listo para empezar a refinar nuestro tratamiento de texto.
04:09

Transcripción

Vamos a definir la página básica en la que vamos a empezar a trabajar. Para ello, he escogido los tres primeros párrafos del primer capítulo del Quijote, la obra magna de la lengua en español, de nuestra lengua, para que nos sirva como guía para todo lo que vamos a aprender. Como digo, primero definimos la página básica. He creado una archivo index.html y un archivo, en el mismo directorio, estilo.css ¿Qué da como resultado? Bueno, pues esta página plana de texto en la que definimos el tipo de documento, el lenguaje... en la cabecera ponemos el título, el juego de caracteres, la propiedad 'viewport' para que se vea correctamente en todo tipo de dispositivos y luego las dos llamadas a Google Fonts que yo he hecho. He elegido estas dos tipografías: Crimson Text y Cinzel Decorative, luego vemos qué tal quedan, si he acertado o no. Y bueno, luego la llamada al CSS. Así pues, luego en el 'body', pues nada he añadido una etiqueta h1 para el Quijote, h2 para el autor y luego tres párrafos, como decía. Nada del otro mundo, y de hecho da como resultado esto. Lo que tenemos que hacer para empezar a definir el estilo general es trabajarnos un poquito el CSS. Para ello vamos a, como digo, configurar la página básica. Vamos con el 'body', vamos a ponerle una anchura máxima de 40 por ejemplo, que esté centrado, es decir, ni arriba ni abajo márgenes, pero los lados automático. Pero sí un "padding" –para que no se nos peguen los bordes– de dos, en por ejemplo... Y luego iríamos con la fuente. Vamos a ponerla normal 100 % de tamaño, que en este caso sería 16 píxeles, y 1 de factor de interlineado. La llamada sería Crimson Text, y si no la puedes cargar desde Google porque se ha acabado el mundo y Google está caído, me pones la Serif por defecto del sistema. Y el peso, hemos cargado Crimson Text 400. Pues bien, ponemos aquí 400 y me lo alineas a la izquierda, aunque por defecto el navegador ya lo hace, y ya lo tendríamos. Guardamos, actualizamos y vemos que ya lo tendríamos, de hecho, el h1 y el h2 los pondría más grandes porque son los estándares que maneja en este caso Safari, aunque tendremos que modificarlos a nuestro gusto. Así pues esta es la definición básica de la página con la que vamos a trabajar. Repetimos, pues creamos un archivo HTML normal y corriente con su título, su juego de caracteres, el 'viewport' y las llamadas sobre todo tanto a Google Fonts como a nuestro archivo estilo CSS, si no difícilmente podremos trabajar. Y luego, yo en mi caso, pero tú puedes hacerlo ya con el texto con el que vayas a trabajar, yo he puesto un texto de ejemplo que ha sido pues los tres primeros párrafos del Quijote. Y en CSS, recordemos, he puesto una anchura máxima de 40 ems, márgenes y "paddings", bueno, pues para que trabaje en armonía, y he cargado la tipografía. Y el resultado es este. Así pues, ya tendríamos nuestra página básica con la que empezar a trabajar.

Maquetación y tipografía para web

Aprende cómo seleccionar una fuente óptima para su lectura en pantalla y cómo exprimirla para aprovechar en tus proyectos web todas las posibilidades de las fuentes OpenType.

2:10 horas (25 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:30/09/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.