Primeros Pasos: Html 📝 & CSS 🎨
En este nivel aprenderemos dos de las herramientas básicas para crear una página web, las cuales son HTML y CSS.
Last updated
Was this helpful?
En este nivel aprenderemos dos de las herramientas básicas para crear una página web, las cuales son HTML y CSS.
Last updated
Was this helpful?
Las siglas de HTML en ingles significan: HyperText Markup Language o lenguaje de marcado de Hipertexto en nuestro idioma.
El HTML, es el lenguaje base con el que se hacen las páginas web.
No es un lenguaje de programación, sino un lenguaje descriptivo, una serie de etiquetas 🏷️ que el navegador reconoce para mostrar el contenido en la pantalla 💻.
Una página o documento HTML contiene unas etiquetas que son indispensables:
<html> Aquí irá todo el contenido de nuestra página </html>
Dentro de las etiquetas anteriores van dos pares de etiquetas muy importantes:
<head> Son etiquetas cabecera del documento, contienen información sobre la página</head>
<body> Estas etiquetas son el cuerpo del documento, aquí es donde incluimos todas las etiquetas para nuestro contenido, como: <div></div><p></p>, entre otras</body>
!!!Es hora de la Acción!!! 😝
En este desafío crearemos una "Card" de un personaje, paso a paso.
Crearemos algo como lo siguiente:
¿Estás list@?
Seleccionamos el texto del archivo app.component.html, lo borramos (presionando la tecla delete de tu compu 💻) y guardamos los cambios, seleccionando en la parte superior la opción de 'Save' 💾
Como vamos a usar Stackbliz y la estructura de una aplicación de Angular, en este archivo app.componen.html, no necesitamos incluir las etiquetas bases (<html><head><body>), estas ya vienen creadas por defecto
Para esto vamos a incluir unas etiquetas que nos van a ayudar a organizar la información de nuestra card.
En el archivo app.component.html, incluiremos lo siguiente:
Las etiquetas anteriores nos sirven para definir una sección de nuestro documento.
Dentro de las etiquetas <section></section>, vamos a añadir un título, una imagen y una descripción.
En el archivo app.component.html, incluiremos lo siguiente:
Hasta el momento tendremos nuestro código así:
Puedes incluirle más texto si lo deseas. Incluirle más párrafos (<p></p>)
Las siglas de CSS significan “Cascade Style Sheet” u "Hoja de estilo en cascada".
Son un conjunto de instrucciones que nos permiten definir la apariencia de los diferentes elementos o etiquetas del HTML.
Hay diferentes formas de aplicar el CSS, podemos colocarlo en cada etiqueta o podemos hacerlo haciendo uso de un archivo adicional.
Si queremos aplicar por ejemplo un color a un párrafo, dentro de la etiqueta <p></p>, se haría algo así:
Ahora usaremos nuestra card para colocarle algo de estilos.
¿Estás list@?
En el CSS existe algo llamados selectores, que nos permiten definir sobre que tipo de elemento vamos a aplicar un conjunto de reglas o propiedades para cambiar la apariencia de los elementos HTML.
Existen selectores de tipo clase, Id, universales y de atributo.
Incluiremos selectores tipo clase en nuestra Card en el app.component.html. Nuestro código quedaría así:
Añadimos las clases en nuestro CSS, para esto en el app.component.css, vamos a colocar cada una de las clases que creamos en el HTML.
Nuestro Stackblitz se vería así:
Hasta ahora hemos añadido los selectores de clase. Lo que vamos a añadirle son algunas propiedades para que nuestra card se vea más bonita.
En el archivo app.component.css, incluiremos lo siguiente:
Vamos a centrar los títulos, para esto usaremos la propiedad: text-align: center;
Colocaremos un ancho por defecto a nuestra sección de card, usaremos la propiedad: width: 400px;
Le colocaremos a todo el card una fuente de sans-serif, quedaría así: font-family: sans-serif;
Colocaremos un tamaño de fuente para la descripción y para los títulos. A la clase del elemento <h1> le pondremos 30px, al <h3> una fuente de 24px y al párrafo <p> una de 18px. Para esto usaremos la propiedad: font-size.
Todas las propiedades las incluiremos dentro de las respectivas clases de los elementos, en el archivo app.component.css.
Podemos incluirle todos los estilos que queramos y usar tantas propiedades como lo desees.
A continuación encontrarás una hoja con algunas propiedades, para que puedas aplicar en tu Card.
¡Felicitaciones hemos terminado el primer desafío!
🎉 ¡LO LOGRASTE! 🎉
Parece que nuestra Card está lista, pero tiene pocos estilos y no se ve tan bonita 😵.
Tu misión especial es que le pongas un lindo color de fondo a tu Card y añadas algunos colores a los títulos y la descripción.
Puedes añadirle más cosas adicionales si lo deseas, como más imágenes, emojis, entre otros.
Has completado el desafío #0 de HTL & CSS, ahora vamos a el desafío #0 de JavaScript 👇
Primero iremos al inicio de y crearemos una App de Angular.
puedes encontrar el ejercicio resuelto.
