Scribd Logo
Carica

Benvenuto in Scribd!

  • Diseño en HTML

    Caricato da

    GerenciaVirtual
    78 visualizzazioni3 pagine
    Material elaborado por: Lic. Francisco Reaño Silva

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    Material elaborado por: Lic. Francisco Reaño Silva

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    78 visualizzazioni3 pagine

    Diseño en HTML

    Caricato da

    GerenciaVirtual
    Material elaborado por: Lic. Francisco Reaño Silva

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 3

    GERENCIA VIRTUAL

    “Capacitación y asesoría a solo un click”

    El “layout” o Diseño en HTML


    Los sitios web a menudo muestran contenido en múltiples columnas (como una revista).
    HTML5 ofrece nuevos elementos semánticos que definen las diferentes partes de una página web:

     <header> Define un encabezado para un


    <header> documento o una sección.
     <nav> Define un contenedor para enlaces
    <nav> de navegación.
     <section> Define una sección en un
    documento.
     <article> Define un artículo autónomo
    independiente.
    <section>  <aside> Define contenido aparte del
    contenido (como una barra lateral).
    <aside>
     <footer> Define un pie de página para un
    <article> documento o una sección.
     <details> Define detalles adicionales.
    <footer>  <summary> Define un encabezado para el
    elemento <details>.

    Técnicas de diseño HTML


    Hay cuatro formas diferentes de crear diseños de múltiples columnas. Cada forma tiene sus pros y
    sus contras: Tablas HTML, Propiedad de flotación de CSS, Marco CSS y CSS flexbox.

    ¿Cuál elegir?
    Tablas HTML
    El elemento <table> no fue diseñado para ser una herramienta de diseño, El propósito del
    elemento <table> es mostrar datos tabulares. Por lo tanto, no use tablas para el diseño de su
    página. Ellos traerán un desastre a tu código. Imagine lo difícil que será rediseñar su sitio después
    de un par de meses.

    Marcos de CSS
    Si desea crear su diseño rápidamente, puede usar una plantilla marco, como las ofrecidas
    gratuitamente en la web o Bootstrap.

    Flotación de CSS
    Es común hacer diseños web completos utilizando la propiedad de flotación de CSS. Float es fácil
    de aprender, solo necesitas recordar cómo funcionan las propiedades de flotación.
    Desventajas: los elementos flotantes están vinculados al flujo de documentos, lo que puede
    dañar la flexibilidad. Estos tópicos pertenecen a un curso avanzado de CSS.
    GERENCIA VIRTUAL
    “Capacitación y asesoría a solo un click”

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf8">
    <style>
    div.container {
    width: 100%;
    border: 1px solid gray;
    }
    header, footer {
    padding: 1em;
    color: white;
    background-color: black;
    clear: left;
    text-align: center;
    }
    nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
    }
    nav ul { list-style-type: none; padding: 0; }
    nav a { text-decoration: none; }

    article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <header>
    <h1>Gerencia Virtual</h1>
    </header>
    <nav>
    <ul>
    <li><a href="http://www.gerenciavirtual.net.ve">Venezuela</a></li>
    <li><a href="http://www.gerenciavirtual.com.mx">México</a></li>
    </ul>
    </nav>
    <article>
    <p>Gerencia Virtual es un emprendimiento que utiliza los recursos multimedia y
    los entornos virtuales para brindar capacitación a distancia.</p>
    </article>
    <footer>Copyright &copy; Gerencia Virtual</footer>
    </div>
    </body>
    </html>

    Código 92.html
    GERENCIA VIRTUAL
    “Capacitación y asesoría a solo un click”

    CSS Flexbox
    Flexbox es un nuevo modo de diseño en CSS3. El uso de flexbox asegura que los elementos se
    comporten de manera predecible cuando el diseño de la página debe acomodar diferentes
    tamaños de pantalla y diferentes dispositivos de visualización.
    Desventajas: no funciona en IE10 y versiones anteriores.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf8">
    <style>
    .flex-container {
    display: -webkit-flex;
    display: flex; -webkit-flex-flow: row wrap;
    flex-flow: row wrap; text-align: center;
    }
    .flex-container > * {padding: 15px; -webkit-flex: 1 100%; flex: 1 100%;}
    .article {text-align: left;}
    header {background: black; color:white;}
    footer {background: #aaa; color:white;}
    .nav {background:#eee;}
    .nav ul {list-style-type: none; padding: 0;}
    .nav ul a { text-decoration: none;}
    @media all and (min-width: 768px) {
    .nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-
    order:1;order:1;}
    .article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
    footer {-webkit-order:3;order:3;}
    }
    </style>
    </head>
    <body>
    <div class="flex-container">
    <header>
    <h1>Gerencia Virtual</h1>
    </header>
    <nav class="nav">
    <ul>
    <li><a href="http://www.gerenciavirtual.net.ve">Venezuela</a></li>
    <li><a href="http://www.gerenciavirtual.com.mx">México</a></li>
    </ul>
    </nav>
    <article class="article">
    <p> Gerencia Virtual es un emprendimiento que utiliza los recursos multimedia
    y los entornos virtuales para brindar capacitación a distancia.</p>
    </article>
    <footer>Copyright &copy; W3Schools.com</footer>
    </div>
    </body>
    </html>

    Código 93.html

    Potrebbero piacerti anche