Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Emmet atajoscódigoh

    Cargado por

    GabrielJaimeGiraldo
    591 vistas6 páginas
    Este documento presenta varios atajos útiles en Emmet para generar estructuras HTML de manera rápida. Algunos atajos incluyen ! + tab para crear la estructura básica de HTML, main#principal>div.contenedor para anidar divisiones con clases y IDs, y section.segunda>article.$*2 para duplicar artículos. Emmet provee una forma eficiente de escribir código HTML a través de atajos de sintaxis.

    Descripción original:

    Comu usar emet

    Título original

    Atajos en Emmet Para Escribir Código HTML

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    Este documento presenta varios atajos útiles en Emmet para generar estructuras HTML de manera rápida. Algunos atajos incluyen ! + tab para crear la estructura básica de HTML, main#principal>div.contenedor para anidar divisiones con clases y IDs, y section.segunda>article.$*2 para duplicar artículos. Emmet provee una forma eficiente de escribir código HTML a través de atajos de sintaxis.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    591 vistas6 páginas

    Emmet atajoscódigoh

    Cargado por

    GabrielJaimeGiraldo
    Este documento presenta varios atajos útiles en Emmet para generar estructuras HTML de manera rápida. Algunos atajos incluyen ! + tab para crear la estructura básica de HTML, main#principal>div.contenedor para anidar divisiones con clases y IDs, y section.segunda>article.$*2 para duplicar artículos. Emmet provee una forma eficiente de escribir código HTML a través de atajos de sintaxis.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 6

    Atajos en emmet para escribir código html

    ! + tab Genera la estructura básica de html

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    Meta:vp + tab

    <title>Document</title>

    Link*3 + tab

    </head>

    <body>

    header.cabezote>h1{Realizando practica de Emmet}+p{Seré el


    mejor}+nav>ul*4>a:link[target="_blank"].enlaces{Inicio} + tab

    main#principal>div.contenedor>section.central>article.primero>h2.titulo_art{Titulo}+img[src="i
    mg/logo.jpg"]+p.info>+lorem + tab

    section.segunda>article.$*2>h2.titulo_art{Titulo}+img[src="img/logo.jpg"]+p.info>+lorem +tab

    </body>

    </html>

    Meta:vp + tab Permite que la página sea responsiva o adaptable

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,


    maximum-scale=1.0, minimum-scale=1.0">

    Link*3 + tab Permite generar el link para enlazar otros archivos puedo multiplicarlo lo que sea
    necesario

    <link rel="stylesheet" href="">

    <link rel="stylesheet" href="">

    <link rel="stylesheet" href="">


    main>div>section> + tab Al colocar el símbolo > estamos anidando una etiqueta dentro de otra

    <main>

    <div>

    <section>

    </section>

    </div>

    </main>

    main.principal>div.contenedor>section.central> + tab Al agregar .y un nombre estamos


    declarando una clase

    <main class="principal">

    <div class="contenedor">

    <section class="central">

    </section>

    </div>

    </main>

    main#principal>div#contenedor>section#central> + tab Con el signo # se agrega un Id

    <main id="principal">

    <div id="contenedor">

    <section id="central">

    </section>
    </div>

    </main>

    Con este código creo completo el cabezote con nombre y menú

    header.cabezote>h1{Realizando practica de Emmet}+p{Seré el


    mejor}+nav>ul*4>a:link[target="_blank"].enlaces{Inicio} + tab

    <header class="cabezote">

    <h1>Realizando practica de Emmet</h1>

    <p>Seré el mejor</p>
    <nav>

    <ul><a href="http://" target="_blank" class="enlaces">Inicio</a></ul>

    <ul><a href="http://" target="_blank" class="enlaces">Inicio</a></ul>

    <ul><a href="http://" target="_blank" class="enlaces">Inicio</a></ul>

    <ul><a href="http://" target="_blank" class="enlaces">Inicio</a></ul>

    </nav>

    </header>

    Con Este código creo la sección principal

    main#principal>div.contenedor>section.primeral>article.primero>h2.titulo_art{Titulo}+img[src=
    "img/logo.jpg"]+p.info>+lorem + tab Se pueden utilizar los dos el . y el #

    < <main id="principal">

    <div class="contenedor">

    <section class="primeral">

    <article class="primero">

    <h2 class="titulo_art">Titulo</h2>

    <img src="img/logo.jpg" alt="">

    <p class="info">Lorem ipsum dolor sit amet, consectetur


    repudiandae, nisi quam alias voluptatem dolores nobis odit, eius
    fuga magni cumque molestias vero hic impedit.</p>

    </article>

    </section>

    </div>

    </main>
    Con este atajo creo otra sección con dos artículos e iría dentro del main debajo de la primera
    sección

    section.segunda>article.uno*2>h2.titulo_art{Titulo}+img[src="img/logo.jpg"]+p.info>+lorem +
    tab

    <section class="segunda">

    <article class="uno">

    <h2 class="titulo_art">Titulo</h2>

    <img src="img/logo.jpg" alt="">

    <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit.


    Optio, nobis laboriosam ipsa temporibus mollitia quisquam adipisci
    commodi voluptatem ducimus</p>

    </article>

    <article class="uno">

    <h2 class="titulo_art">Titulo</h2>

    <img src="img/logo.jpg" alt="">

    <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit.


    Optio, nobis laboriosam ipsa temporibus mollitia quisquam adipisci
    commodi voluptatem ducimus</p>

    </article>

    </section>

    Con este ataho creo títulos

    h$[title=sopa $]{Header $}*3

    <h1 title="sopa" 1="">Header 1</h1>

    <h2 title="sopa" 2="">Header 2</h2>

    <h3 title="sopa" 3="">Header 3</h3>


    Con este atajo se crea un menú enumerado desde un número especifico

    ul>li.item$@3*5 +tab

    <ul>

    <li class="item3"></li>

    <li class="item4"></li>

    <li class="item5"></li>

    <li class="item6"></li>

    <li class="item7"></li>

    </ul>

    Con este atajo estoy agrupando un div, un header, una ul, dos li, dos a dos footer y dos parrafos

    div>header>ul>li*2>a:link[target="_blank"]+footer>p + tab

    <div>

    <header>

    <ul>

    <li>

    <a href="http://www.vocerodelcafe.com.co" target="_blank">Hola</a>

    <footer>

    <p></p>

    </footer>

    </li>

    <li>

    <a href="http://" target="_blank"></a>

    <footer>

    <p></p>

    </footer>

    </li>

    </ul>

    </header>
    </div>

    Para colocar el Gato ( # )

    Shif + #

    También podría gustarte