Blog WordPress Manassés Moraes

Lição 06: Noções básicas de HTML

Lição 06: Noções básicas de HTML

HTML é um conjunto de quatro palavras que provocam arrepios em muitos iniciantes. Hoje em dia temos muitas opções em criação de sites, blogs e até páginas de captura que não necessitam de configuração em html. Porém, sabemos que em muitos casos quando não necessitam de utilizar html, o resultado final nem sempre é satisfatório.

Por isso o uso do HTML e a busca por aprender sobre ele não sai de moda, mesmo tendo muitos recursos hoje em dia nos oferecendo soluções que jogam pra escanteio o html, ainda assim ele subsiste firme pois o nível de qualidade e profissionalismo que temos no resultado final de qualquer projeto é de não se comparar com os recursos atuais.

Estamos na lição de número 6 da nossa série. E vamos conhecer algumas regras e funções básicas sobre HTML que podem salvar o seu projeto em determinadas situações. Nada muito profundo no tema mas algumas práticas comuns do dia a dia e que todo blogueiro precisa de usar constantemente.

Você pode conferir todos os artigos dessa série aqui! ainda da tempo de pegar alguns bônus nas lições anteriores.

A Definição mais básica de HTML

Não vamos usar palavras difíceis, ok! HTML, na linguagem mais popular e descomplicada para você entender; É o idioma dos navegadores. Se você não gosta muito de ler e é péssimo em português, conheça o Internet Explorer; Esse é o cara que vive a tirar notas baixas quando o assunto é ler o próprio idioma. É por isso que ele é lento pra xuxu!

Já o nerd nessa matéria e primeiro da sala é o Google Chrome (na minha opinião); Ele é o cara que consegue ler mais rápido do que os demais o seu idioma. E os códigos em HTML, por mais que sejam complicados são escritos no programa mais simples e fácil de usar do seu computador. O bloco de notas, sim! Estou falando de TXT. Bizarro neh,, quando eu não sabia disso alguns anos atrás, pensava que os códigos eram escritos em programas tão esquisitos quanto ele próprio.

Colocando dois anúncios ou banners lado a lado

Colocar dois banners lado a lado no início ou no final de um artigo ou post é algo que muitos blogueiros utilizam. E realmente da resultados, já que o início do artigo é uma área bem visível e se o visitante clicou para ler o artigo, certamente é uma visita de qualidade que esta interessada no seu conteúdo e tem potencial de adquirir o que você promove.

Aqui um tutorial completo sobre como fazer isso no seu blog WordPress.

Modificando o código do Formulário do FEED BURNER

O FeedBurner é algo que utilizo mas não enfatizo! Ou seja, não faço questão de que meus leitores e visitantes saibam que o blog possibilita acompanhamento por Feed. Pois na verdade o objetivo principal é que assinem a lista do blog e não o Feed.

Por outro lado o Aweber nos dá a opção de integrar junto ao Feed para que os assinantes do Feed fiquem na lista e recebam automaticamente as atualizações. Porém, como gosto de ter o controle do que pretendo enviar e não enviar aos assinantes, prefiro deixar essa opção desabilitada!

Mas vamos ao que interessa, se você usa o FeedBurner, é propício aprender as possibilidades que temos de modificar o seu formulário de inscrição. Nesse artigo, vamos considerar que você conhece o Feed Burner e sabe usar as funções básicas dele. Caso desconheça e precise de ajuda, deixe nos comentários para que possa ajudá-lo.

Este abaixo é um código comum e padrão de Feed. As frases destacadas são os textos dentro da caixa de Feed que podemos alterar colocando-as em português.

<form style=”border:1px solid #ccc;padding:3px;text-align:center;” action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=GanharDinheiroSempre-ManassesMoraes’, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520‘);return true”><p>Enter your email address:</p><p><input type=”text” style=”width:140px” name=”email”/></p><input type=”hidden” value=”GanharDinheiroSempre-ManassesMoraes” name=”uri”/><input type=”hidden” name=”loc” value=”pt_BR”/><input type=”submit” value=”Subscribe” /><p>Delivered by <a href=”http://feedburner.google.com” target=”_blank”>FeedBurner</a></p></form>

Uma lição simples e muito útil que você vai usar sempre em códigos HTML é que para alterar textos basta encontrá-los dentro do código. Pois eles estão espalhados no código, porém escritos da mesma forma que os vemos quando publicados. Veja como ficaria esse mesmo código se colocarmos ele na sidebar do blog, por exemplo:

[zilla_toggle title=”Código Feed Burner” state=”open”]

Enter your email address:Delivered by FeedBurner

[/zilla_toggle]

Você pode alterar o texto em vermelho e escrever o que bem desejar. Vamos ver outras alterações que podem ser feitas facilmente:

Para tirar a borda da caixa, identifique na primeira linha a palavra “Solid” e troque por “None”.

Para inserir uma imagem acima da caixa, basta inserir um comando de imagem antes de todo o código, igual a este: <img src=”LINK DA IMAGEM” border=”0″ width=”250″ height=”120″ /> Os números 250 e 120 representam largura e altura da imagem respectivamente.

Para mudar a cor de fundo, identifique na primeira linha do código o (#ccc) e escolha a cor de sua preferência nessa tabela de cores html mas o aconselhável é deixar transparente usando esse código: (#transparente), ou seja, código nenhum.

Viu que são mudanças simples mas que fazem boa diferença! Fiz umas pequenas alterações nesse mesmo formulário, veja como ficou abaixo:

[zilla_toggle title=”Mesmo código com alterações básicas” state=”open”]

Entre com seu melhor E-mail:Criado por: Manassés Moraes

[/zilla_toggle]

02 Programas que facilitam a vida

HTML é uma coisa muito chata de lidar. Pelo menos para mim é um pé no saco, aja paciência pra ficar inserindo códigos e etc. Por isso, existem alguns programas que facilitam a nossa vida nessas horas. Pois quando se trata de um pequeno código de formulário, ainda dá pra encarar… Mas quando se trata de um site inteiro, fica tudo mais complicado e demorado também.

Por isso, te apresento alguns programas que podem mudar a sua vida na hora de editar páginas em HTML.

  • NVU – Muito simples de usar, porém com algumas limitações. Recomendado para alterações em mini sites. Você encontra esse programa facilmente no baixaki.
  • Kompozer – Trata-se e outro editor html que podemos encontrar facilmente no Baixaki e um pouco melhor de se utilizar que o NVU.

Vamos ver rapidamente como é simples utilizar o programa NVU por exemplo. Veja na imagem abaixo:

Noções básicas de HTML

Basta clicar no botão “Open” e uma janela de navegação vai abrir. Agora vá até a pasta onde esta o arquivo do seu mini site e clique sobre ele. O NVU vai carregar o mini site como se ele estivesse aberto no seu navegador. 

Assim, fica muito mais fácil e prático de realizar alterações na página. O programa é bem fácil de usar, basta fuçar um pouco que você irá descobrir que nem tudo é tão difícil quanto parece.

O que é FileZilla e como funciona?

Esse é mais um programinha bacana que resolve todos os seus problemas quando o assunto é subir ou descer arquivos do servidor. Ele pode ser baixado facilmente no Baixaki e é mais simples de utilizar do que você imagina.

Com o programa em execução, repare que ele solicita alguns dados para acessar o servidor da sua hospedagem. São eles: Host, Usuário, Senha e Porta. O host é o endereço de FTP do seu domínio, mas não se assuste, pois todos são iguais ao domínio seguido de “FTP.”. Vou explicar melhor:

Para acessar o servidor do meu blog pelo FilleZila eu digito no campo Host o seguinte: “ftp.ganhardinheirosempre.net”. E depois coloco o nome de usuário da minha hospedagem e a senha. (Esses dados são fornecidos pelo seu serviço de hospedagem na contratação do mesmo).

Bônus da Lição de Hoje!

mini sites prontosAgora que você já tem um vislumbre do que é HTML, como editar um código e como subir páginas no servidor de hospedagem. Experimente praticar um pouquinho com os brindes de hoje, que são 5 modelos de mini sites que podem ser editados facilmente usando regras básicas de html e mais fácil ainda pelo NVU.

Clique aqui para DOWNLOAD.

Lembrando que se você já esta na minha lista, com certeza já recebeu esse brinde, pois eu sempre envio primeiro pra lista antes de publicar no blog ok, logo quem já é assinante do Ganhar Dinheiro Sempre não precisa se cadastrar novamente. Forte abraço, seja sempre um sucesso!

Sobre o autor | Website

Empreendedorismo digital não é apenas obter uma renda extra, mas é um estilo de vida onde seu negócio trabalha pra você online. Uma forma simples, honesta e divertida de viver. Nesse blog, pretendo ensinar um pouco do sei sobre como ganhar dinheiro pela internet.

Ebook Gratis! 3 Dicas Secretas pra Ganhar Dinheiro na Internet

100% livre de spam.

Para enviar seu comentário, preencha os campos abaixo:

Deixe uma resposta

*

2 Comentários

  1. Olá Manassés,

    Boas dicas sobre o tema. É muito importante ter certos conhecimentos sobre HTML, mesmo não sendo programador, assim como um motorista precisa ter noções de mecânica, não é mesmo?

    Sucesso juntos!

    View Comment
    • Manassés Moraes disse:

      OLá Antonio

      Muito obrigado. Sim é verdade, no ramo em que atuamos é bom conhecer um pouco de tudo o que for útil aos negócios, certas dicas podem salvar o dia ao economizar horas de pesquisa atrás de uma informação.

      Abraços, seja sempre um sucesso!

      View Comment