O HTML que deves saber enquanto blogger

o html que deves saber enquanto blogger
6 min

Um dos maiores monstros que assombra os empreendedores é a programação. Tenho muita gente, tanto no Programa de Mentoria como no serviço de Criação de site em WordPress que se assuta só de ouvir falar em HTML ou CSS.
Parece tudo muito complicado mas não é assim tanto!
Se tens um negócio teu, sejas tu blogger, freelancer ou com um pequenos negócio que tem uma loja/site online, então este artigo é para ti. Há pequenas coisas de HTML que podes e deves saber e te irão facilitar imenso a vida.
Eu comecei a interessar-me por código com 11 anos mas não sou nenhuma expert. Aliás, a maior parte das coisas que aprendi foram efetivamente em pesquisas para alterar os meus blogs e sites. A internet está cheia de respostas, mas eu decidi agrupar algumas dicas que te vão dar uma mãozinha.
Esta lista de códigos HTML é perfeita para iniciantes e para pessoas que não estão seguras de como fazer pequenas alterações nos seus sites. Escolhi apenas dicas básicas, que são essencialmente o que irás precisar mais numa base diária.

Se achares este artigo útil, guarda-o numa pasta no Pinterest para o encontrares sempre que queiras!

código HTML que deves saber enquanto blogger

 

Clica na lista abaixo para veres diretamente o ponto que te interessa

Formato do texto
Formato do Conteúdo
Links
Formato da página
Negrito

Existem duas formas de meter o texto a negrito, uma que é chamada de “bold” e outra de “strong”. Visualmente o aspeto é igual mas para efeitos SEO se usares o código “strong” e meteres a negrito palavras-chave do teu texto isso tem efeito no posicionamento do teu artigo nos motores de pesquisa

Itálico

Texto em itálico.

Sublinhado

Texto sublinhado.

Títulos

Os títulos vão de H1 (Título 1) a H6 (Título 6). H1 é o título maior e H6 é o mais pequenos. H1 é normalmente o título principal, sendo usado quase sempre como título dos artigos e páginas, e a partir de H2 são considerados sub-títulos e devem ser usados por ordem, do maior para o mais pequeno sendo que se tens um H2 sõ faz sentido ter texto em H3 se ele estiver relacionado com o H2, como um sub-menu do menu superior. Se for um sub-título independente, deves voltar a usar H2.

H1

H2

H3

H4

H5
H6

Rasurado

Este texto estará rasurado.

Cor da fonte

Substitui a cor pela cor da tua preferência, o código HEX ou o código RGB da cor. Substitui o “p” por H1, H2, etc se queres adicionar a cor a um título.

Texto com cor.

Família da fonte

Primeiro tens de ter a certeza que estás a utilizr uma fonte (tipo de letra) que esteja instalada no teu website. Existe um grupo de fontes que estão sempre disponíveis, mas se o tema do teu WordPress usa Google Fonts essas também poderão estar já instaladas. Se precisares de uma fonte não instalada, terás de a instalar primeiro no teu site.
Substitui “p” por H1, H2, etc se queres mudar a fonte de um título.

Tamanho da fonte

Podes usar em’s, %, ou pixels para que a fonte fique de outro tamanho, mas o mais comum são mesmo os pixels. Substitui “p” por H1, H2, etc, para ajustares o tamanho dos teus títulos.

Este texto está a 30px

Texto acima e abaixo da linha

Criar texto abaixo da linha irá fazer com que o teu texto apareça mais abaixo. Criar texto acima da linha irá fazer com que o teu texto apareça mais acima.

<sub>Subscript text here</sub>
<sup>Superscript text here</sup>

 

 

 

Alinhamento dos parágrafos ou dos títulos

Se quiseres alinhar o teu texto à esquerda, à direita, ao centro ou justificado podes usar este código para fazer essa pequena alteração.
Podes substituir o “p” por H1, H2, etc, e o “center” por left, right ou justify.

Parágrafo

O texto de parágrafo é normalmente o texto do corpo do teu conteúdo.

Caixa de texto

Este código irá criar uma caixa de texto como estas que tenho vindo a partilhar ao longo do artigo.

Block Quote

“Isto é o formato de quote. O formato pode mudar de tema para tema.”

Lista ordenada

A lista ordenada é uma lista numerada.

  1. Primeiro item
  2. Segundo item
  3. Terceiro item
<ol>
  <li>Primeiro item</li>
  <li>Segundo item</li>
  <li>Terceiro item</li>
</ol>

Para adicionares mais itens à lista cria mais linhas <li></li> antes de fechares a tag </ol>.

 

Lista não ordenada

Esta é uma lista não ordenada.

  • Primeiro item
  • Segundo item
  • Terceiro item
<ul>
  <li>Primeiro item</li>
  <li>Segundo item</li>
  <li>Terceiro item</li>
</ul>

Para adicionares mais itens à lista cria mais linhas <li></li> antes de fechares a tag </ul>.

 

Tabela
linha 1, coluna 1 linha 1, coluna 2 linha 1, coluna 3 linha1, coluna 4
linha 2, coluna 1 linha 2, coluna 2 linha 2, coluna 3 linha 2, coluna 4
linha 3, coluna 1 linha 3, coluna 2 linha 3, coluna 3 linha 3, coluna 4

Observa com cuidado o código que cria as tabelas.

A tag ‘tr’ cria linhas e a tag ‘td’, criada dentro das linhas, cria colunas.

Para criares uma tabela maior basta adicionares mais tags para colunas ou linhas.

<table>
  <tbody>
    <tr>
      <td>linha 1, célula 1</td>
      <td>linha 1, célula 2</td>    
      <td>linha 1, célula 3</td>
      <td>linha 1, célula 4</td>
    </tr>
    <tr>
      <td>linha 2, célula 1</td>
      <td>linha 2, célula 2</td>
      <td>linha 2, célula 3</td>
      <td>linha 2, célula 4</td>
    </tr>
    <tr>
      <td>linha 3, célula 1</td>
      <td>linha 3, célula 2</td>
      <td>linha 3, célula 3</td>
      <td>linha 3, célula 4</td>
    </tr>
  </tbody>
</table>
Imagem

O WordPress permite-te adicionar imagens sem precisares de recorrer a qualquer código. Assim como permite fazer quase todas as coisas que apresento nesta lista. Mas nunca é demais saber e, por vezes, podes precisar de procurar determinado elemento no código e se souberes como é composto é muito mais fácil conseguires encontrá-lo.

Para colocares uma fotografia deves substituir o URL pelo URL da tua imagem. A imagem deve estar carregada para o teu site previamente ou, se for uma imagem de outro site, deves copiar o URL direto da imagem (normalmente termina em .jp, .png ou .gif).

Este código permite-te também alterar as dimensões da tua imagem, mas lembra-te que se não colocares dimensões proporcionais a imagem irá esticar e deformar.

 

O primeiro código irá criar um link que abrirá na mesma janela. O segundo código irá criar um link que abrirá num separador à parte.


Para criar uma imagem como link é bastante fácil, partes do código HTML que cria o link e colocas o código da imagem no meio.

Para criares uma imagem com link que abre num novo separador basta adicionares o código target=”_blank” como farias num link normal. Vê abaixo:

 

Link de email

Cria um link que envia as pessoas diretamente para a caixa de email, com o teu endereço de email no destinatário.

Exemplo: Contacta-nos

 

Linha horizontal

Cria uma linha horizontal, que pode servir para separar conteúdo por exemplo.


 

Espero que este artigo te ajude a perceber um bocadinho mais de todo o código que está por detrás do teu website. Pequenas alterações que são até bastante simples podem parecer um bicho-de-sete-cabeças para quem não percebe nada do assunto. Mas agora poderás fazê-las por ti própria.

0

2 comentários

O HTML que deves saber enquanto blogger

  • Mafalda Mascarenhas

    Ótima referência. Aprendi algum HTML no codacademy mas depois o dificil é por em prática no nosso site específico. Mudas isso no HTML do artigo ou é possível mudar para todo o site? (CSS?)

    0
    • Bloglogia

      Olá Mafalda, estes são especificamente para artigos, páginas e widgets. Mas percebendo de algumas coisas é possível fazeres também alterações no CSS (por exemplo mudar cores, tamanhos de fontes, etc)

      0

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *

Agir com estratégia é essencial para quem se quer diferenciar.



Subscreve e recebe as melhores dicas
de MARKETING DE INFLUÊNCIA


.

Recursos grátis

  • kit para parcerias com marcas
  • 572 ideias de conteúdo
  • planner de artigo de blog

entra em contacto