É possível criar todo o código HTML de um site em minutos, senão segundos? É possível se você estiver usando o Emmet! Essa nova abordagem permite o desenvolvimento rápido de código em HTML, XML e outros formatos de código estruturado.
Emmet é um plugin para muitos editores de texto populares. Com o Emmet, você cria o esqueleto de sua página em uma sintaxe racional, mas muito compactada, e depois o expande para um código HTML completo e adequado. O resultado parece mágico: uma linha de texto se expande para centenas de linhas de sintaxe e você tem uma página estática, ou mesmo a estrutura de um site completa, pronta em minutos.
Você aprenderá aqui como usar o Emmet para criar uma página da web totalmente estática. Código Visual Studio é usado para este tutorial, pois vem com suporte integrado para Emmet. Você pode usar o Emmet em outros editores, como o Sublime Text e o Atom, mas terá que adicionar suporte para ele por meio de uma extensão.
Crie o arquivo do seu site
Para começar, abra o Visual Studio Code.
Escolha “Arquivo -> Novo Arquivo” para criar um novo documento em branco.
Escolha “Arquivo -> Salvar como” para salvar seu arquivo, dando a ele uma extensão “html”.
Estrutura básica
Os elementos de cada página da web são organizados em grupos e subgrupos. Ao codificar com Emmet, você sempre terá que ter em mente como cada grupo contém itens que podem ser grupos de ainda mais elementos.
Nota: embora iremos explicar o básico, seria melhor se você estivesse familiarizado com o básico da sintaxe HTML antes de continuar.
Em um nível muito básico e superior, a maioria dos sites contém três grupos / seções: um cabeçalho, uma parte principal para o conteúdo principal e um rodapé. Para criá-los com Emmet, digite:
#header+#mainsite+#footer
O “#” na frente de cada palavra significa que cada grupo é um div com um ID. Pressione Enter no final da linha para ver Emmet em ação, transformando esta pequena frase em três linhas de HTML estruturado.
Estrutura do cabeçalho
O cabeçalho de um site típico contém seu logotipo e um ou dois menus. Para adicioná-los à sua página, você pode manter o HTML expandido da etapa anterior e digitar diretamente na Div do cabeçalho. Você pode então digitar algo como:
#logo+#menu_top+#menu_main
Pressione Enter para expandir isso também e você terá mais três Divs para o logotipo do seu site e dois menus dentro do cabeçalho.
Agrupando em Emmet
Com Emmet, você agrupa elementos colocando-os entre parênteses. Isso permite que você crie estruturas complexas para suas páginas. Então desfaça tudo até agora e mantenha apenas o básico #header+#mainsite+footer código de antes.
Substitua o #header em seu código com o seguinte:
(#header>.logo+.menu.top+.menu.main^)
Em Emmet, você pode descer de nível usando o > personagem e pode subir um nível usando o ^ personagem. Isso permite que você entre em um elemento, adicione outros nele e volte a subir.
O resultado deve ser semelhante ao seguinte:
(#header>.logo+.menu.top+.menu.main^)+#mainsite+footer
O texto acima seria traduzido como: “Adicione um Div (grupo) com o ID #header. Dentro dele, adicione três Divs com as classes “.logo,” “.menu.top” e “.menu.main.” Retorne um nível acima, fora do grupo, e adicione mais dois Divs ao lado dele com os IDs “#mainsite” e “#footer”.
Post Structure
Uma postagem básica em um site típico geralmente contém os seguintes elementos:
- Título
- Imagem
- Trecho (como um parágrafo de texto)
Ele também deve oferecer um link que permite ao visitante ler a postagem real e talvez links para suas categorias, tags, etc. Para simplificar, entretanto, usaremos apenas esses três elementos por enquanto.
Este é o código que vamos adicionar:
(.post>h3{Post Title $}+img+p{Post Excerpt})*5
Isso diz a Emmet para “Criar um Div com a classe .post. Dentro dele, coloque um título do cabeçalho H3, uma imagem e um parágrafo para o trecho.
Com “{TEXT}” anexado após um elemento, você define seu conteúdo. Então, com “{Post Title},” isso diz a Emmet que o conteúdo de cada título H3 será o texto de espaço reservado “Post Title”. Você pode alterar o “Título da postagem” para o seu nome ou qualquer string de texto que desejar, e ele será usado como o conteúdo dos títulos das postagens quando o código for expandido.
o $ próximo a “Post Title” é uma variável numérica que funciona em conjunto com o “5” que você pode ver fora dos parênteses. o *5 depois dos parênteses diz a Emmet para repetir o conteúdo dos parênteses cinco vezes. o $ é substituído pelo número de iteração de cada postagem. Substitua este número pelo número de postagens que você deseja em sua página.
Adicione isso ao código real. Deve ser parecido com:
(#mainsite>(.post>h3{Post Title $}+img+p{Post Excerpt})*5)
Estrutura do rodapé
Para o rodapé, estamos adicionando dois grupos – dois Divs com as classes “.design” e “.copyright”.
O código é o seguinte:
(.design>(a.designerslink))+(.copyright>(p{Copyright 2020 My Name}))
Isso criará um div com a classe “.design.” Dentro dele está um link com a classe “.designerslink.” Adicionado ao lado dele está um segundo div com a classe “.copyright.” Dentro deste div há um parágrafo de texto simples com o conteúdo “Copyright 2020 My Name”.
O resultado será este:
(#footer>(.design>(a.designerslink))+(.copyright>(p{Copyright 2020 My Name})))
Agora, basta pressionar Enter e seu site estará pronto!
Com um pressionamento de tecla, tudo o que vimos até agora, e esse grupo ultracondensado de caracteres, se transformará em dezenas de linhas de sintaxe HTML adequada para uma página inteira!
Salve as alterações no arquivo pressionando Ctrl + S ou visitando “Arquivo -> Salvar”. Para ver seu trabalho, abra o navegador. Em seguida, usando “Arquivo -> Abrir” ou um gerenciador de arquivos externo, localize seu arquivo HTML e abra-o manualmente no navegador.
Empacotando
Você aprendeu o básico do uso do Emmet para criar seu arquivo HTML. Claro, você pode retornar ao seu código a qualquer momento para ajustá-lo ou expandi-lo com mais coisas.
Você já sabia sobre Emmet? Você está usando outros atalhos que ajudam na criação de sites? Conte-nos na seção de comentários abaixo.
Relacionado:
