# Criando relatórios do HTML

Os relatórios HTML contêm arquivos HTML e de imagem. Eles são distribuídos aos usuários como arquivos .zip.

Este tutorial mostra como:

* criar um HTML
* incorporar imagens em um relatório HTML
* adicionar um nível
* adicionar uma tag de variável de nível como um rótulo

O relatório final terá um título e imagens apropriadas em um quadro para cada um dos três anos. Relatórios HTML oferecem suporte à maioria dos objetos do Qlik Sense. Consulte: [Trabalhando com objetos do Qlik](https://help.qlik.com/pt-BR/nprinting/February2025/Content/NPrinting/ReportsDevelopment/Qlik-objects-supported-NP.htm) (somente em inglês)



## Testes

Você pode usar nossos arquivos de amostra para criar seu relatório. Para fazer download desses arquivos, consulte: [Arquivos de amostra](https://help.qlik.com/pt-BR/nprinting/February2025/Content/NPrinting/Examples/Examples.htm) (somente em inglês).

## Criando um novo relatório do HTML

Faça o seguinte:

1. Selecione Relatórios no menu principal do Qlik NPrinting e, em seguida, clique em Criar relatório.

2. Insira um Título para o relatório.

3. Selecione HTML na lista suspensa Tipo.

4. Selecione um aplicativo na lista suspensa Aplicativo.

5. Selecione um Modelo nas opções disponíveis:

   * Modelo vazio - usa um modelo vazio

   * Modelo padrão - use o modelo padrão (disponível somente se um modelo padrão tiver sido definido nas Configurações do relatório.

     Consulte [Carregar um arquivo do Office, HTML ou PixelPerfect como um modelo](https://help.qlik.com/pt-BR/nprinting/February2025/Content/NPrinting/ReportsDevelopment/Load-file-as-template.htm) (somente em inglês)

   * Personalizado - escolha um arquivo para usar como modelo.

6. Clique em Criar para criar o relatório.

### Selecionando conexões e objetos

Faça o seguinte:

1. Clique em Editar modelo para abrir o Editor de Modelos.
2. Clique com o botão direito no nó Imagens e selecione Adicionar objetos.
3. Selecione os objetos que você deseja adicionar como imagens.
4. Clique em OK.
5. Arraste e solte seus objetos de imagem para linhas entre as tags `<body>` e `</body>`.
6. Clique em Visualizar.
7. Verifique o relatório, feche-o e edite o modelo novamente, se necessário.
8. Clique em Salvar e Fechar para salvar o modelo e fechar o Editor de Modelos.

## Relatório resultante

```
 <html>
	<body Style="text-align: center;">
		<h3 Style="text-align: center; font: 21px verdana;">		   10 países principais 		</h3> 			  <img src="%%CH320%%" alt="CH320"> 		<h3 Style="text-align: center; font: 21px verdana;">		   10 produtos principais 		</h3> 			<img src="%%CH184%%" alt="CH184"> 	</body>
</html>			
```

## Abrindo a janela de seleção de níveis

Você pode produzir um relatório HTML com níveis que circulam a cada ano.

Faça o seguinte:

1. Clique com o botão direito no nó Níveis e selecione Adicionar níveis.

2. Selecione Year na lista de níveis.

3. Clique em OK.

4. Expanda o nó Níveis.

5. Arraste e solte o token do nó Year\_Level na linha entre as tags `<body>` e `</body>`.

   Adicione linhas, se necessário.

   O resultado são três novas linhas, `%%/Year_Level%%`, `%%Year_Level%%` e uma linha em branco entre elas.

6. Organize a linha `%%Year_Level%%` antes dos elementos que você deseja incluir no ciclo do nível e a linha `%%Year_Level%%` após os elementos que você deseja incluir no ciclo do nível.

7. Expanda o nó `Year_Level`.

8. Arraste e solte o token do nó Year até uma linha entre as linhas `%%Year_Level%%` e `%%Year_Level%%`.

9. Adicione elementos de estilo inline. Veja os exemplos de código abaixo.

## Relatório resultante

O código HTML a seguir, por exemplo, cria um relatório HTML correspondente. O relatório terá três seções com título, uma para cada ano.

```
<html>
	<body Style="text-align: center;"> 		%%Year_Level%% 		<h2 Style="font: 24px verdana;font-weight: bold;">%%Year%%</h2>
			<h3 Style="text-align: center; font: 21px verdana;">10 países principais</h3> 			<img src="%%CH320%%" alt="CH320"> 			<h3 Style="text-align: center; font: 21px verdana;">10 produtos principais</h3> 			 <img src="%%CH184%%" alt="CH184"> %%/Year_Level%%  	</body>
</html>
```

### Fluxos relacionados

* [Relatórios do HTML](https://help.qlik.com/pt-BR/nprinting/February2025/Content/NPrinting/HTMLReports/IntroHTML.htm)

## Saiba mais

* [Relatórios do HTML](https://help.qlik.com/pt-BR/nprinting/February2025/Content/NPrinting/HTMLReports/IntroHTML.htm)