Logotipo

Ajuda - Inserindo tags e parâmetros

Praticamente todas as tags possuem teclas de atalho no FastHTML, algumas mais usadas com teclas simples como Imagem (F7), Âncora (F8), Div (Control+F1), além dos atalhos de formatação, como Negrito (Control+N), Itálico (Control+I), etc. Por isso, é importante que, com o tempo, você decore as teclas de atalho das principais tags. Isso irá auxiliar na velocidade de inserção delas. Mas você também pode usar a tecla F10 para buscar e acionar qualquer tag rapidamente.

A grande maioria das tags HTML possuem parâmetros. Para muitas delas, somente a tag simples é suficiente. Por isso, o FastHTML possui as tags rápidas e as tags completas. As tags rápidas, nos comandos mais comuns e simples, inserem apenas a tag principal e coloca o cursor na posição para você digitar. É o caso justamente dos atalhos de formatação: negrito, itálico, sublinhado, centralizado, quebra de linha, parágrafo, barra horizontal, colunas e linhas de tabelas, etc. Para as tags que necessitam de parâmetros, o FastHTML sempre abrirá uma janela adicional, mostrando cada parâmetro existente com uma breve descrição, pronto para você digitar (ou selecionar um arquivo, por exemplo). Os parâmetros seguem a documentação oficial da W3 Schools e, portanto, alguns parâmetros mais antigos, como os do HTML 4, podem aparecer ou não, dependendo de quanto ainda eles são usados.

Como abrir tags completas?
Para forçar o FastHTML a abrir as tags completas, mesmo com tags geralmente usadas simples, é só usar o Control da direita. Por exemplo, usando o Control+N convencional, usando o Control da esquerda, para inserir apenas <b></b>, usando o Control da direita+B, irá mostrar os parâmetros possíveis, se você precisar inserir uma classe, por exemplo: <b class="negrito"></b>. Qualquer atalho com Control (+ Shift e/ou Alt) possui este recurso.

Tags que solicitem referências de arquivos, como Âncora ou Imagem, por padrão mostram apenas a caixa de digitação para a fonte (href ou src, respectivamente). Pressione F5 para abrir o modo estendido, onde você pode selecionar um arquivo local, URL ou email, dentro dos protocolos existentes. Você pode mudar o comportamento da abertura nas Preferências, evitando o F5 inicial. Selecionando um arquivo local, se estiver com um projeto aberto, o caminho será analisado relativo a pasta raíz, caso contrário será inserido apenas o nome do arquivo.

Na janela de parâmetros, a qualquer momento você pode teclar F12 para abrir a documentação oficial da tag no W3 Schools!


Navegando entre os parâmetros

Para navegar entre os parâmetros, use a tecla Tab. A cada vez que você pressionar, o próximo parâmetro será selecionado, pronto para você digitar ou selecionar o valor para ele. Você pode usar Shift+Tab para navegar no sentido inverso. Conforme você vai inserindo os parâmetros, a parte debaixo da janela vai montando o comando, para você ver como está ficando. Ao pressionar o botão Concluir ele é inserido na posição do cursor.

Validação de conteúdo
O FastHTML não tem intenção de ser muito "travado" com relação ao conteúdo digitado. Por isso ele não faz validação do que você digitar. Teoricamente você poderia digitar um texto em campos numéricos, e será inserido como digitado. Alguns parâmetros, que realmente tem valores fixos, mesmo assim podem ser digitados. Isso não é um "bug", nós apenas assumimos que você sabe o que está fazendo, dando liberdade até para errar :)


Estilos e eventos

Na tela de parâmetros, você pode teclar F9 para abrir a tabela para inserção de estilos, e F10 para a tabela de inserção de eventos. Estas tabelas realmente tem um truque para usar, devido ao "grid" usado:

  • Na primeira coluna, comece a digitar o nome do estilo/evento
  • Tecle enter para adicioná-lo. Não use tab para selecionar, senão ele vai para a ação/valor daquele item
  • Usando enter novamente, permite você primeiro selecionar os itens e depois inserir os valores
  • Usando seta para a direita você pula para o campo de ação, inserindo o valor desejado
  • Use somente seta para direita ou esquerda para se movimentar entre cada célula
  • Não use seta para cima, se você estiver na primeira coluna, irá mudar o que você selecionou
  • Use tab ou shift+tab para navegar entre linhas e colunas do grid por completo

    • Requer um pouco de prática no começo, mas acostume-se a usar somente enter, tab, shift+tab e seta para os lados, que logo pegará o jeito.

    Validação de parâmetros e conteúdos
    A lista de estilos e ações é fixa para todo o FastHTML, obtidos da W3 Schools. Da mesma forma que o FastHTML não valida os conteúdos dos parâmetros, também não valida se o estilo ou ação selecionado existe para a tag. Então, você poderia colocar um text-align em uma tag img ou uma ação onkeypress em uma tag center. Da mesma forma, o FastHTML assume que você sabe o que está fazendo. Ele apenas monta o que você inserir, sem validar se faz sentido. Então, na dúvida, tecle F12 e veja a documentação da tag, ou o que você inserir será ignorado pelo navegador.


    Imagens (F7)

    A tag Img (F7) tem um recurso adicional aos demais comandos: a auto-detecção da largura e altura da imagem (width e height). Ao selecionar um arquivo no parâmetro src, o FastHTML irá auto-preencher o width e height para você, em pixels. Você pode, nas Preferências (F11) informar se deseja preencher somente os parâmetros (HTML 4), somente o style, ambos ou nenhum. O padrão é somente preencher via style.

    Truque:
    Muitas vezes você está fazendo um layout responsivo (mobile) e as imagens, se definidas com seu tamanho real, irão estourar na tela. O comum é não definir o height e definir o width com 100% e o max-width com o tamanho da imagem. Assim, se a tela for maior (ex: desktop), a imagem será mostrada no tamanho máximo e, caso seja menor, será auto-reduzida proporcionalmente. Para este truque, clique Shift+Concluir (mantenha o shift pressionado antes de clicar no botão Concluir). Embora não aparecerá na pré-visualização do comando, a tag será inserida com o par max-width e width.

    Nas preferências você também pode forçar o FastHTML a definir sempre loading="lazy". Este parâmetro é recomendado para sites com imagens mais pesadas e faz com que o navegador somente carregue-as quando o viewport (área de visualização) estiver perto de onde o usuário está navegando. Ou seja, a imagem só será carregada quando o usuário estiver "quase vendo ela". Isso acelera o carregamento inicial da página. Este parâmetro só é auto-preenchido se você não setá-lo manualmente.

    Outro recurso opcional é preencher o alt com o nome da imagem. Embora não seja o mais correto, ele ajuda a melhorar a pontuação com relação a acessibilidade se você esquecer de colocar uma descrição. Mas o ideal é que você, para cada imagem, coloque uma breve descrição dela no alt, a fim de ajudar as pessoas portadoras de deficiência visual. Para mais detalhes, recomendamos usar ferramentas como o Google Lighthouse.


    :: Menu principal