desafio_encriptador/004_primeras_paginas/README.md

# Formación programacion

## Primeros pasos

### 04 Crea tus primeras paginas HTML5 y CSS

#### Parte 1 Mi primera página web

Diferencias entre [html y css](https://www.aluracursos.com/blog/html-css-javascript-cuales-son-las-diferencias).

- Descarga archivo [texto-base.txt](./html_css_parte1/texto-base.txt)
(archivo en formato `dos`).

> en NeoVim `set ff=unix`

Página [barbería](./html_css_parte1/index.html) -
estilo.[css](./html_css_parte1/style.css).

Formas de aplicar estilo CSS:

- style inline.

    ```html
        <h1 style="text-align: center;">Sobre la Barbería Alura</h1>
    ```

- style block con tag `<style>`.

    ```html
        <style>
            p {
                text-align: center;
            }
        </style>
    ```

- style [file](./html_css_parte1/style.css).

##### Sistema hexadecimal

Sistema número que consta de las 6 primeras letras del alfabeto y los números
del 0 al 9.

```txt
0 1 2 3 4 5 6 7 8 9 A B C D E F
```

La combinación de estos 16 elementos permiten la representación de mas valores,
en menos caracteres, que por ejemplo, en un sistema binario. Es por esto que es
ampliamente utilizado en el mundo imformático.

La representación de los colores en 6 posiciones

```txt

  0 0 0 0 0 0 <--- Mínimo
  F F F F F F <--- Máximo
# _ _ _ _ _ _
  r r g g b b

  Negro  -> #000000
  Blanco -> #FFFFFF
```

```txt
  0   = Mínimo
  255 = Máximo

  Negro  -> rgb(0,0,0)
  Blanco -> rgb(255,255,255)
```

##### Equipo de Front End

- Programador Front End
- Responsable por UX (user experiencie)
- Responsable por UI (user interface)
- Copywriter (Generador de Contenido)
- SEO (Search Engine Optimization)

Final curso HTML5 y CSS parte 1 - Página
[barbería](./html_css_parte1/index.html) -
estilo.[css](./html_css_parte1/style.css).

#### Parte 2 - Posicionamiento, listas y navegación

Página [productos](./html_css_parte2/productos.html) y
[estilo](./html_css_parte2/productos.css).

- Base de un archivo HTML.
- Lista html no ordenada.
- Posicionamiento listas y 'menu' de navegación.
- Posicionamiento encabezado de página.