Crea tu primera página web - Aprende a utilizar las etiquetas HTML y a crear estilos con CSS

View this thread on: d.buzz | hive.blog | peakd.com | ecency.com
·@luis96xd·
0.000 HBD
Crea tu primera página web - Aprende a utilizar las etiquetas HTML y a crear estilos con CSS
<center>

[![](https://img.3speakcontent.co/ydtecfkh/thumbnails/default.png)](https://3speak.tv/watch?v=luis96xd/ydtecfkh)

▶️ [Watch on 3Speak](https://3speak.tv/watch?v=luis96xd/ydtecfkh)

</center>

---

¡Hola a todos! Bienvenidos. En el video anterior vimos los conceptos básicos sobre el Desarrollo Web, los bloques básicos (HTML, CSS, JavaScript) ¡Pero toda su teoría necesita su parte práctica!

Así que en este video crearemos nuestra primera página web, para ello crearemos un documento HTML (**Hyper Text Markup Language**) y a través de sus etiquetas iremos estructurando el contenido que aparecerá en nuestra página.

Podemos encontrar títulos o encabezados, párrafos, imágenes, listas ordenadas, listas no ordenadas, contenedores, etc.

En **HTML**, la mayoría de las etiquetas funcionan en pares, con una etiqueta de apertura y una etiqueta de cierre, señalada con los signos de menor qué y mayor qué (<>) 
**Ejemplo:**

```<etiqueta>``` El contenido va aquí ```</etiqueta>```

|**Etiquetas:**||
|-|-|
|```<html></html>```| Es la etiqueta principal de todo documento HTML.|
|```<head></head>```|Es la cabecera de la página, incluye metadatos importantes para la misma, pero que no son visibles al expectador.|
|```<body></body>```|Representa el cuerpo del documento, aquí colocarás todas las etiquetas que representan elementos visibles para tu página.|
|```<div></div>```| Representa un contenedor.|
|```<p></p>```|Representa un párrafo.|
|```<ol></ol>```| Crea una lista ordenada. (Enumeradas).|
|```<ul></ul>```| Crea una lista no ordenada (Solo viñetas)|
| ```<li></li>``` | Crea un elemento de la lista. (Se tiene que colocar dentro de la etiqueta ```<ol>``` o ```<ul>```.|
|```<h1></h1>```| Representa un título |
|```<h2></h2>```| Representa un subtítulo |
|...|...|
|```<h6></h6>```| Representa el subtítulo más pequeño que puedes lograr.|

También aprenderemos a darle estilos a cada elemento utilizando CSS (Cascading Style Sheets). En la cual utilizamos **selectores** que indican a que elemento queremos darle estilos diferentes, por ejemplo.

|Propiedad CSS|Descripción|Valores|
|-|-|-
|text-align:| alineación del texto|left, right, center, justify|
|padding:| espaciado interno o margen interior. (entre el elemento y su contenido).| número + unidad de medida (pixeles (px), porcentajes (%), centímetros (cm).|
|margin:| espaciado externo o márgen exterior. (entre elemento y elemento)| número + unidad de medida (pixeles (px), porcentajes (%), centímetros (cm).|
|background-color: |color fondo del elemento. | colores en hexadecimal #F303F7, colores en formato RGB, rgb(10, 114, 245), nombre del color en inglés)|
|color: |color de la fuente o de la letra. | colores en hexadecimal #F303F7, colores en formato RGB, rgb(10, 114, 245), nombre del color en inglés)|

Espero que les guste este vídeo

¡Saludos y espero verlos pronto! :D

---

▶️ [3Speak](https://3speak.tv/watch?v=luis96xd/ydtecfkh)
👍 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,