---
description: >-
  En este nivel aprenderemos dos de las herramientas básicas para crear una
  página web, las cuales son HTML y CSS.
---

# Primeros Pasos: Html 📝 & 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>**&#x20;

Dentro de las etiquetas anteriores van dos pares de etiquetas muy importantes:

**\<head>** Son etiquetas cabecera del documento, contienen información sobre la págin&#x61;**\</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 otra&#x73;**\</body>**

{% hint style="info" %}
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 />**
{% endhint %}

**!!!Es hora de la Acción!!! 😝**

En este desafío crearemos una **"Card**" de un personaje, paso a paso.

Crearemos algo como lo siguiente:&#x20;

![Card de mi personaje](https://3418570209-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW1Rd6Lo-WMisT20MSI%2F-LrnUhw_35S2DW2THEXL%2F-Lrnagc97UskbcOzto_A%2FScreen%20Shot%202019-10-22%20at%208.14.04%20AM.png?alt=media\&token=970ea0da-34a3-47b3-b2b1-d75c8083c0f1)

¿Estás list@?

## Paso 1: **Creemos nuestra App de Angular** ⭐️

Primero iremos al inicio de [**www.stackblitz.com**](https://stackblitz.com) y crearemos una App de Angular.

![Vamos al inicio de Stackblitz y damos click en el botón.](https://3418570209-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW1Rd6Lo-WMisT20MSI%2F-Lfm1buzeVgzyc9sla4K%2F-LfmF2EIn_D3rx1gxAJJ%2FScreen%20Shot%202019-05-25%20at%2010.41.44%20PM.png?alt=media\&token=eff358e9-e6bb-4a39-a072-8de632c75ac2)

![Seleccionamos la opción de Angular](https://3418570209-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW1Rd6Lo-WMisT20MSI%2F-Lfm1buzeVgzyc9sla4K%2F-LfmFnfwUkx_kYXbVEwL%2FScreen%20Shot%202019-05-25%20at%2010.48.40%20PM.png?alt=media\&token=3050fc43-1746-4a98-993d-94c250b1a2a3)

![Verás algo como esto 👆](https://3418570209-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW1Rd6Lo-WMisT20MSI%2F-Lfm1buzeVgzyc9sla4K%2F-LfmGCMN4j_IokU0vzTP%2FScreen%20Shot%202019-05-25%20at%2010.52.23%20PM.png?alt=media\&token=b9630837-c8a0-4388-93a5-0474b2f6f7e5)

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' 💾

![En este archivo colocaremos nuestro HTML](https://3418570209-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW1Rd6Lo-WMisT20MSI%2F-Lfm1buzeVgzyc9sla4K%2F-LfmHJVm7_7cFa8fmSA3%2FWebp.net-gifmaker%20\(1\).gif?alt=media\&token=8924bfbd-4c41-4857-b397-9e9f32e455de)

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&#x20;

## 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:

{% code title="app.component.html" %}
```markup
<section>
</section>
```
{% endcode %}

![Etiquetas \<section>\</section>](https://3418570209-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW1Rd6Lo-WMisT20MSI%2F-LrlR9aQN9Ego06B-GmH%2F-Lrlc-xDSPietClVIuzD%2FScreen%20Shot%202019-10-21%20at%2010.54.39%20PM.png?alt=media\&token=6847d126-a27d-4b11-89df-8ce11e2aa47b)

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:

{% code title="app.component.html" %}
```markup
<section>
    <h1>Mr Cat</h1>
    <img src="https://www.incimages.com/uploaded_files/image/970x450/getty_513189787_110007.jpg" alt="Mr Cat" />
    <h3>Description</h3>
    <p>He is a funny cat!!!</p>
</section>
```
{% endcode %}

{% hint style="info" %}
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.
{% endhint %}

Hasta el momento tendremos nuestro código así:

![Incluimos las etiquetas](https://3418570209-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW1Rd6Lo-WMisT20MSI%2F-LrlR9aQN9Ego06B-GmH%2F-LrldPpOhce02ns2z09i%2FScreen%20Shot%202019-10-21%20at%2011.05.39%20PM.png?alt=media\&token=83a8cd52-ca8b-4125-ba1d-2cb72eb850ef)

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".&#x20;

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í:&#x20;

```markup
<p style="color:red">Text</p>
```

![Así luciría el texto](https://3418570209-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW1Rd6Lo-WMisT20MSI%2F-LrliL8IZsNbiV9sIcuK%2F-LrljV2ipaaawIASezDX%2FScreen%20Shot%202019-10-21%20at%2011.33.29%20PM.png?alt=media\&token=ef0fee56-bb0f-4b2f-b8ed-9f93c4ee6d56)

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.

{% hint style="info" %}
**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:&#x20;

```css
a[title] {
  color: purple;
}
```
{% endhint %}

Incluiremos selectores tipo clase en nuestra Card en el **app.component.html**. Nuestro código quedaría así:

{% code title="app.component.html" %}
```markup
<section class="card">
    <h1 class="title">Mr Cat</h1>
    <img class="card-image" src="https://www.incimages.com/uploaded_files/image/970x450/getty_513189787_110007.jpg" alt="Mr Cat" />
    <h3 class="description-title">Description</h3>
    <p class="description">He is a funny cat!!!</p>
</section>
```
{% endcode %}

![Añadimos las clases](https://3418570209-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW1Rd6Lo-WMisT20MSI%2F-LrliL8IZsNbiV9sIcuK%2F-LrlmaQEdBY6A97q_Mu0%2FScreen%20Shot%202019-10-21%20at%2011.47.00%20PM.png?alt=media\&token=45338a02-a800-4d4a-8954-6d55d2f2325d)

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**.

{% code title="app.component.css" %}
```css
.card {
}
.title {
}
.card-image {
}
.description-title {
}
.description {
}
```
{% endcode %}

Nuestro **Stackblitz** se vería así:

![Incluimos nuestras clases](https://3418570209-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW1Rd6Lo-WMisT20MSI%2F-LrliL8IZsNbiV9sIcuK%2F-LrlnZPFNJiE6pbwDUf4%2FScreen%20Shot%202019-10-21%20at%2011.51.15%20PM.png?alt=media\&token=256a99ca-c307-4261-9052-9c1f5bbc8a69)

## 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:

1. Vamos a centrar los títulos, para esto usaremos la propiedad: **text-align: center;**
2. Colocaremos un ancho por defecto a nuestra sección de card, usaremos la propiedad: **width: 400px;**
3. Le colocaremos a todo el card una fuente de sans-serif, quedaría así: **font-family: sans-serif;**
4. 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.**

{% code title="app.component.css" %}
```css
.card {
  font-family: sans-serif;
  width: 400px;
}
.title {
  font-size: 30px;
  text-align: center;
}
.card-image {
  width: 100%;
}
.description-title {
  font-size: 24px;
  text-align: center;
}
.description {
  font-size: 18px;
}
```
{% endcode %}

Podemos incluirle todos los estilos que queramos y usar tantas propiedades como lo desees.

![Card con estilos aplicados.](https://3418570209-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW1Rd6Lo-WMisT20MSI%2F-LrnUhw_35S2DW2THEXL%2F-LrnZdDxHIeLBQTdm_Tx%2FScreen%20Shot%202019-10-22%20at%208.05.14%20AM.png?alt=media\&token=6c9feb47-6484-4a41-94e1-7d168486c651)

A continuación encontrarás una hoja con algunas propiedades, para que puedas aplicar en tu Card.

![Aquí podrás encontrar más propiedades si deseas incluirlas en tu Card](https://3418570209-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW1Rd6Lo-WMisT20MSI%2F-LrnUhw_35S2DW2THEXL%2F-LrnZr38lu1WpmBzDJXP%2FcheatSheet.png?alt=media\&token=8efd5af8-0b09-4b13-a4a9-c0d853353496)

¡Felicitaciones hemos terminado el primer desafío!

🎉 ¡**LO LOGRASTE!** 🎉

{% hint style="info" %}
[**Aquí**](https://stackblitz.com/edit/angular-catparty) puedes encontrar el ejercicio resuelto.
{% endhint %}

## 😎 Tu Misión Especial 😎

Parece que nuestra Card está lista, pero tiene pocos estilos y no se ve tan bonita 😵.&#x20;

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.

{% hint style="success" %}
Has completado el **desafío #0 de HTL & CSS**, ahora vamos a el **desafío #0 de JavaScript 👇**
{% endhint %}



{% hint style="info" %}
**Nota:**

Si necesitas mentoría adicional con este ejercicio puedes contactar a:

Vanessa M. Aristizabal\
Twitter: @vanessamarely\
Correo: vanessamarely@gmail.com
{% endhint %}
