HTML y CSS parte 1: mi primera página - 04

tag <img> uso de archivo de estilo con selector de id '#'
2023-04-09 00:21:19 -04:00 · 2023-04-09 00:21:19 -04:00 · ce78ad3209
commit ce78ad3209
parent 9a8266052a
4 changed files with 101 additions and 4 deletions
--- a/004_primeras_paginas/README.md
+++ b/004_primeras_paginas/README.md
@ -10,4 +10,67 @@ Diferencias entre [html y css](https://www.aluracursos.com/blog/html-css-javascr

 > en NeoVim `set ff=unix`

- Página [barbería](./index.html).
+Página [barbería](./index.html).
+
+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](./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)
+
--- a/004_primeras_paginas/banner/banner.jpg
+++ b/004_primeras_paginas/banner/banner.jpg
--- a/004_primeras_paginas/index.html
+++ b/004_primeras_paginas/index.html
@ -4,19 +4,24 @@
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Barbería Alura</title>
+        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
-        <h1 style="text-align: center;">Sobre la Barbería Alura</h1>
+        <img id="banner"
+             src="./banner/banner.jpg"
+             alt="barbería con dos sillas, fondo con dos espejos y muchos cuadros"/>
+
+        <h1>Sobre Barbería Alura</h1>

        <p>Ubicada en el corazón de la ciudad, la <strong>Barbería Alura</strong> trae
        para el mercado lo que hay de mejor para su cabello y barba. Fundada en 2020,
        la Barbería Alura ya es destaque en la ciudad y conquista nuevos clientes
        diariamente.</p>

-        <p style="font-size: 20px; text-align: center;"><em>Nuestra misión es: <strong>"Proporcionar autoestima y calidad de vida a
+        <p id="mision"><em>Nuestra misión es: <strong>"Proporcionar autoestima y calidad de vida a
        nuestros clientes"</strong></em></p>

-        <p style="text-align: center;">Ofrecemos profesionales experimentados que están constantemente observando los
+        <p>Ofrecemos profesionales experimentados que están constantemente observando los
        cambios y movimiento en el mundo de la moda, para así ofrecer a nuestros clientes
        las últimas tendencias. El atendimiento posee un padrón de excelencia y agilidad,
        garantizando calidad y satisfacción de nuestros clientes.</p>
--- a/004_primeras_paginas/style.css
+++ b/004_primeras_paginas/style.css
@ -0,0 +1,29 @@
+body{
+    background-color: #1a1c1d;
+}
+
+#banner{
+    width: 100%;
+}
+
+p{
+    color: #FFFCC6;
+    text-align: center;
+    /*background: #fc9304;*/
+    /*background: #df28f6;*/
+}
+
+h1{
+    text-align: center;
+    background: #046dfc;
+}
+
+/* selección de diferentes selectores de stilo*/
+em strong{
+    color: red;
+}
+
+/* selector de id */
+#mision {
+    font-size: 20px;
+}