Emmet - HTML na brži način

Danas ćemo učiti o korisnom alatu, zvanom Emmet, koji je implementiran u sve moderne editore.

Koristi se da ubrza kodiranje u HTML-u i da skrati kucanje kostura HTML fajla. Proći ću kroz neke proste primere, da bi bilo jasno o čemu se radi.

Za ovaj tutorijal, biće vam potrebna samo jedna stranica: index.html.

U zavisnosti od toga koji editor koristite, sam poziv Emmet-a se može razlikovati, ili je na Tab dugme, ili na Enter. S obzirom da ja koristim Brackets, koristim Tab. Počećemo sa kucanjem samo ! i pritiskanjem Tab-a. Ovo će nam generisati sve tagove koje inače kucamo kada tek otvorimo prazan .html fajl: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Sada kada imamo osnovu, možemo nastaviti sa dodavanjem tagova unutar body taga. Na primer, treba nam div sa klasom header, div sa id-jem main i div sa klasom footer-index. Znamo da klasu referišemo tačkom, npr. .header, a id referišemo tarabom, npr. #main. Na osnovu toga, kucanjem div.header i pritiskanjem Tab-a (ili Enter-a), div#main + Tab i div.footer-index + Tab generišemo: 

<div class="header"></div>
<div id="main"></div>
<div class="footer-index"></div>

Hajde da zađemo još dublje. Neka nam je potreban div sa id-jem list i unutar tog div-a imamo listu sa 3 stavke unutar nje. Pomoću Emmet-a, to radimo ovako: div#list>ul>li*3 + Tab (ili Enter), što generiše: 

<div class="list">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

Možemo čak i ubacivati tekst direktno u elemente. Na primer, potreban nam je h1 sa klasom main-title koji kaže "Dobrodošli!". Pomoću Emmet-a, ovo generišemo kodom: h1.main-title{Dobrodošli!} :

    <h1 class="main-title">Dobrodošli!</h1>

Ovo su neke osnovne ideje, koje ubrzavaju kodiranje. Vremenom možete razviti kompleksnije izraze koji još više skraćuju kod, zavisno od vaših potreba.



Hvala što ste čitali, nadam se da je bilo korisno :)

Lazar Ristić