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.
💡Introducción al HTML💡
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 💻.
Estructura básica de una página Web
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>
Todas las etiquetas deben cerrarse. Hay etiquetas que tienen una que abre y cierra como esta: <p></p>
y hay otras etiquetas que no requieren un par, se puede hacer el cierre en una sola, como: <img />
!!!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@?
Paso 1: Creemos nuestra App de Angular ⭐️
Primero iremos al inicio de www.stackblitz.com y crearemos una App de Angular.
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
Paso 2: Crearemos la estructura de nuestra Card
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:
En el código anterior incluimos varias etiquetas, las cuales te explicaré a continuación:
<h1></h1> Sirve para colocar un título muy grande.
<img /> Sirve para incluir una imagen, puede ser incluso un gif animado.
<h3></h3> Sirve para colocar un título un poco grande
<p></p> Sirve para poner un párrafo.
Hasta el momento tendremos nuestro código así:
Puedes incluirle más texto si lo deseas. Incluirle más párrafos (<p></p>)
🎨Introducción al CSS🎨
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@?
Paso 1: Incluiremos selectores a nuestra Card
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.
Selectores de tipo: Aplica los estilos al elemento que coincide con su nombre. Por ejemplo: h1 { color: red}
Selectores de Clase: Aplica los estilos al elemento que tiene el atributo class. Por ejemplo: <p class="text"></p>
Selectores de Id: Aplica los estilos al elemento que tiene el atributo Id especificado. Por ejemplo: <p id="text"></p>
Selectores universales: Selecciona todos los elementos. Por ejemplo: * {}
Selectores de atributo: Aplica los estilos al elemento basándose en el valor de un determinado atributo. Por ejemplo:
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í:
Paso 2: Daremos estilo a nuestra Card
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! 🎉
Aquí puedes encontrar el ejercicio resuelto.
😎 Tu Misión Especial 😎
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 👇
Nota:
Si necesitas mentoría adicional con este ejercicio puedes contactar a:
Vanessa M. Aristizabal Twitter: @vanessamarely Correo: vanessamarely@gmail.com
Last updated
