blog feature image
Índice


Começar com seu site pode ser uma tarefa assustadora. Isso é especialmente verdadeiro se você tem experiência limitada com construção de sites. Para ajudá-lo a começar, a Dynadot fornece hospedagem gratuita de uma página com cada compra de domínio. Nossa hospedagem de uma página apresenta um "wizard" para ajudar pessoas que não sabem HTML a construir seus sites. No entanto, nosso assistente não permite que você faça tanto pelo seu site quanto o HTML faz, então aqui estão alguns básicos para você começar*:

<b>negrito</b>
<i>itálico</i>
<u>sublinhado</u>

Tamanho da Fonte
A maneira mais fácil de alterar o tamanho da fonte é usar estas tags:

<big>aumenta a fonte em um tamanho</big>
<small>diminui a fonte em um tamanho</small>

Se você precisar ir ainda maior ou menor com sua fonte, pode usar estas tags mais específicas:

<font size="+2">aumenta o tamanho da fonte pelo número nas aspas</font>
<font size="-2">diminui o tamanho da fonte pelo número nas aspas</font>

Você também pode ser ainda mais específico com o tamanho da sua fonte especificando um número de 1 a 7 como o tamanho da fonte, sendo 1 o menor tamanho e 7 o maior:

<font size="1">menor fonte 8 pt</font>
<font size="7">maior fonte 36 pt</font>

Outra opção com tamanho de fonte é usar as tags de cabeçalho 1-6, que também colocam espaçamento em volta do texto:

 

 

<h1>cabeçalho maior</h1>

 

 

<h6>cabeçalho menor</h6>


Cor da Fonte
Além de alterar o tamanho da sua fonte, também pode ajustar a cor.

<font color="blue">azul</font>
<font color="red">vermelho</font>

Se você quiser usar um tom diferente de vermelho ou azul, pode inserir um número hexadecimal de seis dígitos em vez da palavra "red" ou "blue." Todas as cores são compostas de vermelho, azul e verde, e cada cor tem seu próprio "code." Os dois primeiros números (ou às vezes letras) do código representam o vermelho, depois os próximos dois representam o verde e os últimos dois representam o azul. Você pode baixar Color Cop para PC ou Medidor de Cor Digital para Mac e usar esses produtos para passar o mouse sobre qualquer cor na sua tela e ele dará o código que você precisa. Por exemplo, se você fosse usar o código para o azul que vê acima, ficaria assim:

<font color="#0000FF">mesmo azul</font>
<font color="#3DC6EA">e aqui está um exemplo de outro tom de azul que você pode escolher usando o código</font>

Tipo de Fonte
Finalmente, você pode mudar o tipo de letra da sua fonte. Você pode usar o Microsoft Word se precisar de ideias.

<font face="arial">fonte arial</font>
<font face="comic sans ms">fonte comic sans ms</font>
<font face="lucida handwriting">lucida handwriting</font>

Agora você precisará juntar tudo. Para qualquer coisa com a palavra "font" você pode simplesmente colocar todas as informações em uma tag. Se quiser usar as tags de cabeçalho ou adicionar negrito, itálico ou sublinhado, pode adicionar isso em sua própria tag.

<font size="4" color="376E1E" face="calibri">você pode juntar tudo</font>

<b><font size="4" color="376E1E" face="calibri">você pode colocar tudo em negrito</font></b>

<font size="4" color="376E1E" face="calibri">ou pode colocar em negrito <b>parte</b> dele</font>

Espaçamento
Agora que você consegue ajustar sua fonte, você vai querer criar parágrafos, quebras de linha e, em alguns casos, pode precisar adicionar espaços manualmente:


<p>usar as tags de parágrafo coloca o seu texto no seu próprio parágrafo...</p>

<p>...e na próxima linha</p>

Usar quebras de linha é como...<br>
...pressionando enter para ir para a próxima linha e, ao contrário de tudo mais nesta página, não precisa de uma tag de fechamento (esta é uma tag de fechamento </p>). Você pode simplesmente inseri-la novamente...<br>
...para ir para a próxima linha novamente.

Você não precisará usar código para espaços entre o texto (como da barra de espaço), a menos que queira adicionar espaços adicionais, porque o HTML só reconhecerá um, mesmo que você coloque mais de um com a barra de espaço. Para dar espaço entre o texto, você pode usar o código: &nbsp;

Links
Uma coisa que você provavelmente vai querer adicionar ao seu site são links para outras páginas do seu site ou até mesmo para outros sites. Os links são fáceis de adicionar usando este código:

<a href="http://www.dynadot.com">este link leva à página inicial da Dynadot</a>

Você pode notar que, se clicar no link acima, ele abre em uma aba ou janela separada no seu navegador, dependendo das configurações do seu navegador. Isso é algo fácil de adicionar e é recomendado se você estiver vinculando para fora do seu site ou não quiser perder pessoas em uma determinada página (como um blog), porque mantém essa página aberta para seus clientes voltarem sem precisar clicar no botão de voltar no navegador. Tudo o que você precisa fazer é adicionar target="_blank" após o seu link:

<a href="http://www.dynadot.com" target="_blank">este link leva à página inicial da Dynadot</a>

Imagens
Finalmente, você pode querer adicionar imagens ao seu site. Para adicionar uma imagem com HTML, você precisará hospedá-la em algum lugar. Se não tiver um lugar para hospedar a imagem você mesmo, pode usar um serviço como Tiny Pic.com que permite que você faça upload de suas imagens gratuitamente e gera a tag HTML para você. Se você não quiser criar uma conta, pode simplesmente salvar o HTML que ele gera (apenas não salve no Microsoft Word, pois o Word às vezes adiciona coisas que fazem o código parar de funcionar). Lembre-se de que algumas imagens são muito grandes e você pode querer otimizá-las para que ocupem menos espaço. Existem alguns otimizadores de imagem gratuitos que você pode usar para reduzir o tamanho do arquivo das suas imagens, como Image Optimizer.net. Aqui está um exemplo de uma tag de imagem básica:
<img src="https://i45.tinypic.com/9bkglk.jpg"> que se parece com isto: Dynadot logo

Você também pode adicionar bordas à sua imagem, mudar o tamanho e adicionar espaçamento em volta dela:

Dynadot logo<img src="https://i45.tinypic.com/9bkglk.jpg" border="2" width="100" height="30" vspace="10" hspace="20" align="left">

Como você pode ver, a imagem tem uma borda, é mais larga e mais curta, e foi espaçada ao redor do topo, da base, da direita e da esquerda. Também está alinhada à esquerda, então o texto agora aparece ao lado da imagem.

Você também pode adicionar um link à sua imagem. Você só precisa colocar as tags de link em volta da tag da imagem assim:

<a href="http://www.dynadot.com" target="_blank"><img src="https://i45.tinypic.com/9bkglk.jpg" border="0"></a>
Agora pode clicar nesta imagem e ela leva-o à nossa página inicial: Dynadot logo

Isso às vezes adiciona uma borda ao redor da imagem na cor azul que você vê nos links de texto. Para removê-la, basta adicionar border="0" à sua tag de imagem. Você também pode notar que o HTML gerado pelo Tiny Pic.com tem alt="Image and video hosting by Tiny Pic" dentro da tag de imagem. Você pode usar isso para colocar texto com sua imagem caso ela não seja exibida corretamente no navegador de alguém. Adicionar texto alternativo também pode ajudar na Otimização para Mecanismos de Busca (SEO).

Agora que você está, esperamos, se sentindo melhor com HTML, pode colocar suas habilidades à prova no seu site. Mas antes de salvar com HTML potencialmente imperfeito, sugerimos testar seu HTML com um serviço gratuito como onlinehtmleditor.net. Ele até tem alguns botões HTML fáceis no topo para ajudá-lo. Agora você só precisa conseguir seu domínio se ainda não tiver um e comece com o seu site hoje!

*Por favor, note que a tag de fonte está obsoleta e pode não ser exibida corretamente em todos os navegadores. É melhor definir o estilo da fonte em CSS, o que abordaremos em um post de blog posterior.

Postado por Robyn Norgan

Compartilhar
AUTOR
Robyn Norgan