Please enable JavaScript.

Coggle requires JavaScript to display documents.

UNIDAD II - Coggle Diagram

- - - - CONTENIDO, texto, imagen
      - PADDING, espacio interior entre el contenido y el borde, osea por dentro del elemento
        
        ESPACIADO
        
        ejemplo padding
        
        CSS= .caja { padding: 10px; /.10px en todos lados / }
        
        ejemplo margin
        
        CSS= body { margin: 0; / Nada de margen, la pagina se pega a los bordes del navegador / }
        
        TAQUIGRAFIA, puedes escribir varias medidas en una sola linea
        
        CSS= padding: 10px 5px / 10 px arriba/abajo; 5px aarriba/abajo /
        
        margin: 10px 5px 20px 0; / arriba, derecho, abajo, izquierda /
      - BORDE, borde de la caja
      - MARGEN, espacio exterior, separa a la caja de las otras, osea por fuera del elemento
    - - width: ancho de la caja
      - heigth: alto de la caja
    - - px (pixeles): valores fijos
      - % (porcentaje): se adapta al tamaño del contenedor padre, util para diseño responsivo
        
        ejemplo:
        
        CSS= .caja { width: 300px; heigth: 100 px; }
  - - - FUENTES (font-family),, define el tipo de letra que se usa
        
        se suele usar una lista de fuentes por si una no esta disponible
        
        ejemplo
        
        CCS=
        
        body {
        
        font-family: "Roboto", Arial, sans-serif;
        
        }
        
        SE RECOMIENDA GOOGLE FONTS, es una bibiliotecade fuentes gratuitas que puedes importar con
        
        import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
      - TAMAÑO Y PESO
        
        font-size
        
        tamaño de la letra
        
        ej: 16px, 1,2em
        
        font-weight
        
        grosor de la letra
        
        ejemp: 400 normal; 700 negrita
        
        ejemplo
        
        CSS=
        
        2 more items...
      - TRANSFORMACION Y ALINEACION
        
        text-transform: convierte el texto automaticamente en mayusculas o minusculas sin cambiar el HTML
        
        ejemplo
        
        CSS=
        
        .titulo {
        
        text-transform: uppercase; / Todo en mayúsculas /
        
        }
        
        text-align: alinea el texto dentro del contenedor
        
        ejemplo
        
        CSS=
        
        .parrafo {
        
        text-align: center; / centrado /
        
        }
- - - - ABSOLUTOS
        
        son aquellos que nos levan fuera del sitio (pag) o servidor, sin http://
        
        href="blog/articulo.html"
      - RELATIVOS
        
        son aquellos que nos llevan o estan dentro del sitio o serv, incluyen el protocolo y la ruta completa hacia otro sitio
        
        href="https://www.google.com"
  - - - te permite navegar entre diferentes paginas web
        
        UTIIZA
        
        HIPERTEXTO
        
        es aquel vinculo que relaciona un texto con otros documentos
        
        HIPERMEDIA
        
        es aquel vinculo que relaciona con imagenes, videos , audios, animaciones y otros contenidos multimedia
        
        URL
        
        los hiperlinks funcionan con la URL, que es la direccion unica que te ayuda a identificar un recurso en la web, ya sea una pagina de contacto, video o imagen
        
        WEB UTILIZA HTTP
        
        permite navegar entre paginas
        
        este HTTP genera las peticiones necesarias para saltar d eun vinculo a otro
    - - HTML
        
        determina como sera la estructura de esa pagina: osea que habra y donde se situaran (ej titulos, parrafos, etc)
      - en un pagina tenes
        
        CSS
        
        determina el estilo de esa pagina, como se veran (ej. color, tamaño, margenes, bordes, etc)
        
        se expresa <hi> la infromacion va dentro de esa expresion
        
        POR ESO SE LLAMA VINCULO DE ESTRUCTURA, YA QUE NO ES PARA QUE LOS USUARIOS HAGAN CLIC COMO UN BOTON, SINO QUE SIRVE PARA CONSTRUIR COMO SE VE LA PAGINA
        
        ARCHIVO EXTERNO
        
        en vez de escribir todo el CSS dentro del HTML, normalmente se guarda en un archivo separado
        
        lo que habria dos archivos, uno para HTML y otro para CSS
      - ETIQUETA LINK
        
        es aquel que ordena silenciosamente al navegador que utilice ese archivo separado tambien, en este caso el CSS
        
        la informacion se expresa dentro de <link>
        
        dentro de lo que se escriba en <link> lo que se dice es
        
        la primer igual es la carpeta que contendra el srchivo CSS
        
        ENTONCES EL NAVEGADOR AL VER EL HTML, LO APLICA, LUEGO VE EL LINK Y APLICA EL ESTILO DE CSS AL HTML Y ASI TE MUESTRA LA PAGINA CON EL DISEÑO CORRECTO
        
        1 more item...
        
        la segunda igualdad es el archivo CSS que estara dentro de la carpeta anterior
- - - - ejemplo:
        
        <div class="menu">
        
        <a href="inicio.html">Inicio</a>
        
        </div>
        
        <a href="contacto.html">Contacto</a>
  - - - <main>
        
        parte principal de la pagina, contenido principal, no esta repetido en otras pag
      - <section>
        
        es una seccion de contenido relacionado, ej seccion de sv
      - <article>
        
        contenido independiente que se entiende solo, ej blog post, tweet, noticia
      - <nav> es el menu de navegacion con enlaces principales
        
        ejemplos
        
        <header>
        
        <h1>Mi Sitio</h1>
        
        <nav>
        
        <a href="inicio.html">Inicio</a>
        
        </nav>
        
        </header>
        
        <main>
        
        <section>
        
        <h2>Nuestros servicios</h2>
        
        <p>Contenido sobre servicios.</p>
        
        </section>
        
        <article>
        
        <h3>Última noticia</h3>
        
        <p>Noticia independiente.</p>
        
        </article>
        
        </main>
        
        <footer>
        
        <p>© 2026 Mi Sitio</p>
        
        </footer>
      - <header> encabezado de una seccion o de toda una pagina, ej logo titulo, menu
      - <footer> pie de pagina o de seccion, ej contacto, derechos
- - - - color: color del texto
        
        ejemplo
        
        CSS=
        
        body {
        
        color: #333; / texto oscuro /
        
        background-color: #eee; / fondo claro /
        
        }
        
        SI APLICAS COLOR AL CONTENEDOR PADRE (EJEMPLO BODY) MUCHOS ELEMENTOS HIJOS LO HEREDAN, OSEA QUE NO SE NECESITA DEFINIRLO DE NUEVO
      - background-color: color del fondo de un elemento (ej color del fondo de un parrafo)
    - - border: define el borde del elemento
        
        ejemplo
        
        CSS=
        
        .caja {
        
        border: 2px solid #000; / 2px de ancho, sólido, negro /
        
        }
      - border-radius: redondea las esquinas
        
        ejemplo
        
        CSS=
        
        .caja {
        
        border-radius: 10px; / misma curvatura en todas las esquinas /
        
        }
- - - - los enlaces normalmente son
        
        sin visitar: azul
        
        en CSS se puede cambiar eso
        
        ejemplo
        
        CSS=
        
        a {
        
        2 more items...
        
        }
        
        PSEUDOCLASA
        
        con :hover cambias el estilo solo caundo el raton pasa por encima, lo que el usuario ve que el boton es clickeable
        
        ejemplo
        
        1 more item...
        
        SELECTORES ESPECIFICOS
        
        SELECTORES DESCENDENTES
        
        permite apuntar a elementos dentro de otros, ESTO AFECTA SOLO A LOS BOTONES DENTRO DEL PIE DE PAGINA Y NO A TODOS DE LA PAGINA
        
        1 more item...
        
        visitados: purpura
        
        al hacer clic: rojo o diferente
- - - - display: flex, este lo pones en un contenedor y sus hijos se alinean en fila por defecto
        
        ejemplo
        
        CSS=
        
        .contenedor {
        
        display: flex;
        
        }
    - - justify-content: controla como se distribuye el espacio en la fila
        
        valores tipicos
        
        center: todo centrado
        
        space-between: huecos iguales entre elementos, sin espacio en los bordes
        
        ejemplo
        
        CSS=
        
        .contenedor {
        
        2 more items...
        
        }
        
        space-around: espacio alrededor de cada elemento