Sem Preceito » HTML http://www.sempreceito.com Artigos e tutoriais para blogueiros e seus blogs. Wed, 28 Jul 2010 17:29:14 +0000 en hourly 1 http://wordpress.org/?v=3.0 6 Códigos Essenciais para Blogueiros Iniciantes http://www.sempreceito.com/2009/11/6-codigos-essenciais-para-blogueiros-iniciantes.html http://www.sempreceito.com/2009/11/6-codigos-essenciais-para-blogueiros-iniciantes.html#comments Mon, 02 Nov 2009 12:10:46 +0000 Luan Felipe http://www.sempreceito.com/?p=402

Ser blogueiro é uma tarefa difícil, entretanto rende bons frutos se for levada a sério. Para ser um bom blogueiro, antes de tudo, você deve conhecer uma linguagem um pouco difícil, o HTML. Abaixo vou citar 6 pontos (códigos) do HTML que você deve conhecer, entender e conseguir produzir sem a ajuda de programas. Como dito, é uma tarefa difícil que exige disciplina.

Com o HTML você pode criar links, colocar imagens em uma página, colocar fundo na página, criar tabelas, entre outras coisas. Os pontos que irei colocar abaixo serão poder ordem de importância. Leia-os por completo. Junto com eles irei disponibilizar links para você aprender melhor determinada ferramenta, esses links poderão ser do Sem Preceito ou de outros metablogs.

1. Estrutura do HTML:
É muito importante você aprender a estrutura padrão do HTML. Ela é dividida em três grandes grupos: A primeira, que engloba todo o resto do código, começa com <HTML> e termina com </HTML>. Toda a página fica entre estas duas tags, assim como os outros dois grupos também pertencem a ele. A segunda <HEAD> e </HEAD> é o cabeçalho da página. A terceira é o <BODY> e </BODY> onde fica todos os códigos que serão visíveis na página.

Aprenda mais:

2. Links:
Todo blogueiro que se preze deve ao menos conhecer a estrutura dos códigos de links. Você não sabe?! Corre aqui e aprenda a fazer, ou pelo menos entenda como é a criação e para que cada tag serve. Com os links você pode ligar várias páginas umas nas outras, assim como linkar artigos interessantes de outros sites e blogs. Use os links com moderação. :D

Aprenda mais:

3. Imagens:
A essa altura do campeonato você já deve ao menos reconhecer um código de imagem, estou certo? Você não sabe?! Como assim? Nunca pesquisou? Só ficou dependendo dos programas? Esta na hora de aprender caro leitor, você deve ao menos dominar o simples do HTML, como criar links e inserir imagens. Para a prender bem certinho leia o post que eu fiz, você vai gostar, está bem explicado.

Aprenda mais:

4. Formatar textos:
Esse tópico já não é tão necessário saber, entretanto é importante entender. Mudar um texto de cor, colocar em negrito, itálico ou sublinhá-lo é uma forma de formatação de textos. Editores de texto dão essas ferramentas sem você precisar mexer nos códigos, entretanto, como dito, é muito importante saber e entender.

Aprenda mais:

5. Background’s:
Este passo já não é bem um código, mas é bom saber como colocar um background em um blog. Os passos são simples e muito rápidos. Você pode colocar imagens e cores, posicioná-las no centro, nas laterais, no topo, onde desejar.

Aprenda mais:

6. Mexer e criar tabelas:
Os códigos para criar tabelas já são um pouco mais complicados, nesse caso você não precisa aprender, mas sim, entender. É fácil e rápido. Depois de algumas leituras você já sabe identificar para que cada tag serve. Além de que você também aprenderá a modificar a tabela ao seu gosto.

Aprenda mais:

Esta aí, 6 tópicos importantes para você blogueiro, iniciante ou não, aprender e entender. Com o tempo essa lista poderá aumentar. Entretanto fique de olho no Sem Preceito, por que postarei tutoriais sobre HTML, no estilo dos descritos acima. Boa sorte na sua jornada bloguística.

©2010 Sem Preceito. Todos os Direitos Reservados!

]]> http://www.sempreceito.com/2009/11/6-codigos-essenciais-para-blogueiros-iniciantes.html/feed 11 Background – Aprenda a colocar um! http://www.sempreceito.com/2009/11/background-aprenda-a-colocar-um.html http://www.sempreceito.com/2009/11/background-aprenda-a-colocar-um.html#comments Sun, 01 Nov 2009 17:53:17 +0000 Luan Felipe http://www.sempreceito.com/?p=400

Colocar um fundo em uma página é fácil, deixa a página mais bonita, com uma ar mais profissional. Entretanto, cuide com o que você vai colocar no fundo. Se for colocar uma cor, procure uma que combine com o resto da página. Se for colocar uma foto/imagem, também. Tudo o que for fazer procure fazer de uma forma que combine com o todo.

Muitos metablogs já ensinaram a colocar fundo em sites e blogs. Eu já ensinei a colocar em tabelas, agora vou ensinar a colocar em sites e blogs com a ajuda de CSS, é fácil.

Veja outros posts sobre o assunto:

Como colocar:

Vamos colocar um background em toda a página, para isso pesquise por “body”. Você tem que achar isso, ou algo parecido:

body {
...
}


Procure entre a tag { e } se existe algo parecido com isso (se não tiver, é só acrescentar):

background:...;


Sendo que o que esta em vermelho simboliza um possível conteúdo.

Para colocar somente uma cor no fundo da página você não precisa saber muitos códigos. Veja o exemplo abaixo onde colocarei a cor preta de fundo.

background:#000000;

Você pode utilizar outras cores, entretanto você deve saber os códigos delas. Recomendo que dê uma olhada nessa palheta de cores.

Background de Imagens:

Para colocar imagens o código é esse:

background: url(HTTP://URLDAIMAGEM.COM);


Fácil, não?

Posicionamento de Imagens:

Agora vamos aprender os posicionamentos da imagems:

Y:

  • top: A imagem ficará no topo da página;
  • bottom: A imagem ficará no final da página;
  • center: A imagem ficará no centro da página;

X:

  • left: A imagem ficará à esquerda da página;
  • right: A imagem ficará à direita da página;
  • center: A imagem ficará no centro da página;

Você deve ter percebido que existe dois grupos de posicionamento. O primeiro podemos chamar de Y e o segundo de X.

Vamos ver como ficaria o código na prática, com o posicionamento X = Center e Y = Top:

background: url(HTTP://URLDAIMAGEM.COM) center top;


Viu que fácil? É só colocar o X primeiro e em seguida colocar o posicionamento do Y.

Repetições de Imagem:

Além do posicionamento nós temos a opção de escolher as formas de repetição, que são:

  • no-repeat: A imagem não irá repetir;
  • repeat-x: A imagem irá se repetir somente na horizontal;
  • repeat-y: A imagem só irá se repetir na vertical;
  • repeat: A imagem irá se repetir;

Você só irá colocar a tag se quiser repetir em determinada área, exemplo horizontal, ai você utiliza o repeat-x, mas se for para repetir normalmente você não precisa utilizar o código repeat. Exemplo:

background: url(HTTP://URLDAIMAGEM.COM) left top repeat-x;


No exemplo acima a imagem ficará na esquerda e no topo e só irá repetir na horizontal.

Imagem Fixa:

Você também pode deixar, ou não, a imagem fixa. O que acontece com a imagem fixa? Não importa o que você faça a imagem não vai se mexer, nem que você mexa na barra de rolagens ela ficará estática. Para fazer isso incremente o código fixed. Exemplo:

background: url(HTTP://URLDAIMAGEM.COM) fixed;

Imagem e Cor:

Você pode utilizar uma imagem e uma cor, é só juntar os códigos. Exemplo:

background: url(HTTP://URLDAIMAGEM.COM) center top repeat-x #000000;


Gostou? Agora vejamos o que você pode ou não fazer com o código de backgrouns:

  • Você pode utilizar uma imagem sozinha, assim como uma cor sozinha;
  • Você pode utilizar uma imagem e uma cor, juntas;
  • Você não pode utilizar duas imagens;
  • Você só pode utilizar um posicionamento de X e Y.
  • Você não pode utilizar dois códigos de repeat.

Importante:

Utilize essa ferramenta com moderação. Em caso de você não encontar o body {}, é só criar como no primeiro exemplo, se for no Blogger, crie antes de ]]></b:skin>.

Mas para você que não encontrou essas tags acima, procure por <body> e coloque isso antes do “>”:

style="..."


Agora é só utilizar os códigos que ensinei acima entre as aspas. Não se preocupe com os {}. Se você utilizar nessa forma, o código ficará assim:

<body style="background: url(HTTP://URLDAIMAGEM.COM) center top repeat-x #000000;">


Se tiver dúvidas ou problemas, deixe um comentário.

©2010 Sem Preceito. Todos os Direitos Reservados!

]]> http://www.sempreceito.com/2009/11/background-aprenda-a-colocar-um.html/feed 7 O que é âncora e como utilizar? http://www.sempreceito.com/2009/09/o-que-e-ancora-e-como-utilizar.html http://www.sempreceito.com/2009/09/o-que-e-ancora-e-como-utilizar.html#comments Sun, 06 Sep 2009 10:16:00 +0000 Luan Felipe http://www.sempreceito.com/2009/09/o-que-e-ancora-e-como-utilizar.html

Âncora é um link que liga áreas de uma mesma página entre si. Não entendeu? Já viu aqueles links escritos “Subir” ou “Top” que quando clicamos, nos leva para o topo da página sem carregá-la novamente? Isso é uma âncora.

Como eu utilizo uma âncora?

É muito simples, utilizamos o código para criar link, sem o link. Confuso? Veja o exemplo abaixo:

<a name=“nomedacancora” id=“nomedaancora”></a>

O código acima é uma âncora. Agora, como chamamos essa âncora? Veja o código abaixo e observe o que tem de semelhante com o código acima:

<a href=“#nomedaancora”>Nome</a>

Notou? Não? Veja que no primeiro código temos o id e o name como “nomedaancora” e no segundo código temos um link como “#nomedaancora”, ou seja, o link vai procurar no código do seu blog onde a âncora com esse nome esta, consequentemente vai enviar você até lá, sem recarregar a página.

Quer ver um exemplo prático? Acesse esta página. Ela vai abrir em outra janela.

A tag “name” e a tag “id” devem, sempre, ter o mesmo nome. Tente usar o exemplo de âncora que eu dei, não coloque nada antes da tag </a>. E o link, quando for chamar uma âncora deve, sempre, seguir o exemplo acima, #nomedaancora. Entendeu?

Dúvidas? Envie-me um e-mail ou apenas comente, terei o prazer em lhe ajudar.
Assine nosso feed e me siga no twitter.

©2010 Sem Preceito. Todos os Direitos Reservados!

]]> http://www.sempreceito.com/2009/09/o-que-e-ancora-e-como-utilizar.html/feed 4 Inserindo imagens com HTML http://www.sempreceito.com/2009/07/brincando-com-html-5-imagens.html http://www.sempreceito.com/2009/07/brincando-com-html-5-imagens.html#comments Sat, 18 Jul 2009 14:56:00 +0000 Luan Felipe http://www.sempreceito.com/2009/07/brincando-com-html-5-imagens.html

Já aprendemos a linkar, a construir tabelas e a formatar textos. Além de que aprendemos também a estrutura básica do HTML.

Quero informar que essa sessão não sairá mais nas sextas-feiras, como era feito. Agora ela não terá um dia definido, podendo sair a qualquer dia, hora ou mês.

Me veio a seguinte pergunta à mente: “Por que eu estou ensinado os códigos HTML, sendo que, existem programas que com 1 click pode-se colocar tabela, links e formatar textos?”. A resposta veio depois. Pois se acontecer algum erro no código que o programa não consiga arrumar, você, se não quiser fazer tudo de novo, vai ter que acessar o código, procurar o erro e tentar arrumar. Para fazer isso você deve, no mínimo saber as tags principais do HTML para saber por onde começar a procurar.

Cedo ou tarde você vai ter que encarar os códigos. Mas, para não ser um blogueiro chato, que fica apertando na mesma tecla, pretendo, futuramente, ensinar com programas também. Mas, se não quiser esperar, muito menos aprender através dos códigos, sugiro que visite o Dicas Blogger. A Juliana Sardinha ensina com programas como o NVU Portable. Vale a pena conferir.

Voltando ao assunto! Vamos aprender a colocar imagens. É algo, simples, rápido e fácil. O código padrão, sem complementos:

<img src="http://dominio.com.br/imagem.jpg" />

Você pode colocar um tamanho fixo usando as tags width e height. Sendo wight a largura e height a altura. No exemplo abaixo vou usar com os tamanhos 500 de largura e 250 de altura. Os tamanhos são em pixels. Não é necessário terminação nos números (px).

<img src="http://dominio.com.br/imagem.jpg" wight="500" height="250" />

Podemos ainda colocar uma borda ou tirar uma borda com a tag border. Sendo “0” para tirar e “1” até “999” para colocar. No exemplo abaixo eu vou tirar, sendo que a borda só iria aparecer se a imagem fosse um link.

<img src="http://dominio.com.br/imagem.jpg" wight="500" height="250" border="0" />

Você notou que tem uma “/” antes do “>”? Ela serve para fechar o código. Não é como nos outro, de negrito por exemplo (<b></b>). No código de imagem não se fecha o código com </img>. E o Blogger exige que se feche os códigos, pelo menos é o que ele pede quando editamos o código de template. Além dele pedir aspas únicas (‘’) e não duplas (“”).

Não vou ensinar a colocar link nas imagens por já fiz quando aprendemos a linkar. De uma passadinha lá, não custa nada. Dúvidas? Tirem por comentários e/ou por formulário de contado.

©2010 Sem Preceito. Todos os Direitos Reservados!

]]> http://www.sempreceito.com/2009/07/brincando-com-html-5-imagens.html/feed 1 Criando e editando tabelas com HTML http://www.sempreceito.com/2009/07/brincando-com-html-4-tabelas.html http://www.sempreceito.com/2009/07/brincando-com-html-4-tabelas.html#comments Sun, 12 Jul 2009 21:53:00 +0000 Luan Felipe http://www.sempreceito.com/2009/07/brincando-com-html-4-tabelas.html

Bem, dessa vez essa sessão saiu um pouquinho mais tarde. Hoje vamos aprender a mexer com tabelas! Interessante? Talvez.
O básico da tabela é isso:

<table>
<tr>
<td>&nbsp;</td>
</tr>
</table>

O código acima cria uma tabela de 1 coluna e 1 linha. Como a maioria dos códigos nós podemos incrementar, colocando um tamanho tanto em pixels(fixo) como em porcentagem(tamanho dependente do monitor do usuário).

Uma tabela com 700px:

<table width="700px">
<tr>
<td>&nbsp;</td>
</tr>
</table>

No caso da porcentagem, o tamanho vai se definir conforme é o tamanho do monitor do usuário. Se você fizer uma tabela com o tamanho de 90%, então a tabela tomará 90% do monitor. Entendeu?

O código é esse para porcentagem:

<table width="90%">
<tr>
<td>&nbsp;</td>
</tr>
</table>

Para fazer com que informações apareçam dentro da tabela mude o que esta em vermelho (&nbsp;)

Explicando o código:

<table></table>: São o começo e o fim do código da tabela, respectivamente.
width="90%" ou width="700px": É o tamanho que você vai dar para sua tabela, tanto em porcentagem(%) ou em pixels(px). Não esqueça dos símbolos.
<tr></tr>: Início e fim da coluna, respectivamente.
<td></td>: Início e fim da linha, respectivamente.
&nbsp;: É o equivalente ao um aperto na barra de espaço.

Você pode fazer com que não aja espaço entre as colunas e linhas e também entre o conteúdo e a linha. Usa-se o cellpadding para dar espaço entre o conteúdo e a linha, ou seja, o conteúdo ficara longe ou perto das linhas dependendo do número que você escolher. E o cellspacing é o espaço externo entre as colunas e linhas, ou seja, quanto maior o número escolhido mais longe umas das outras as linhas e colunas ficarão, sem afetar o conteúdo como o cellpadding. Para usar esse tipo de espaçamento coloque os seguintes códigos na tag <table>: cellpadding=”0″ cellspacing=”0″
Ficando assim:

<table cellpadding=”0″ cellspacing=”0″> ou <table width="700px" cellpadding=”0″ cellspacing=”0″>

Pode também tirar ou colocar a borda, coloque esse código na mesma tag: border="0"(para tirar) ou border="1" (para colocar, sendo que pode ser qualquer número de 1 a 999)
Ficando o código assim:

<table width="700px" border="0" cellpadding="0" cellspacing="0">(sem borda) ou <table width="700px" border=”1″ cellpadding=”0″ cellspacing=”0″>(com borda).

Também podemos colocar planos de fundo (ou cor de fundo) na tabela ou em determinada linha/coluna. Basta colocar o seguinte código na tag <table>, <tr> ou <td>.
bgcolor=”#000″: para colocar cor, que nesse exemplo foi preto. Para mais cores visite a palheta de cores.
background=”URL DA IMAGEM”: para colocar imagens como plano de fundo.

Coloque um desses códigos na tag que você quer que apareça o efeito.
Exemplo:

<table bgcolor=”#000″> ou <table background=”URL DA IMAGEM”>
<tr bgcolor=”#000″> ou <tr background=”URL DA IMAGEM”>
<td bgcolor=”#000″> ou <td background=”URL DA IMAGEM”>

Você pode unir duas colunas ou duas linhas também. Um exemplo é a imagem abaixo, o código da tabela da imagem é esse:

<table width="500px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Ela tem duas linhas e duas colunas, sem borda e com um tamanho de 500px.
Unindo as duas linhas de cima:
O código ficaria assim:

<table width="500px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

As duas linha de baixo:
O código ficaria assim:

<table width="500px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
</table>

As linhas da coluna da esquerda:O código ficaria assim:

<table width="500px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>

As linhas da coluna da direita:O código ficaria assim:

<table width="500px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
<td rowspan="2">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>

Alinhando uma tabela:
Basta colocar os seguintes códigos na tag <table>:
Centralizando: align=”center”
Alinhado à direita: align=”right”
Alinhado à esquerda: align=”left”

Ficando assim:
<table align=”center”> ou <table align=”right”> ou <table align=”left”>

Mude as informações em vermelho para as informações que você quer que apareça em sua tabela.

Dúvidas podem ser tiradas pelos comentários. Talvez algumas coisas ditas não foram absorvidas por completo, não se acanhe e pergunte.

Outros artigos indicados:
- Aprendendo a criar tabelas em HTML
- Guia de Referência HTML e XHTML – Tabelas

©2010 Sem Preceito. Todos os Direitos Reservados!

]]> http://www.sempreceito.com/2009/07/brincando-com-html-4-tabelas.html/feed 6 Formatando Textos com HTML http://www.sempreceito.com/2009/07/brincando-com-html-3-formatacao-de-texto.html http://www.sempreceito.com/2009/07/brincando-com-html-3-formatacao-de-texto.html#comments Fri, 03 Jul 2009 18:42:00 +0000 Luan Felipe http://www.sempreceito.com/2009/07/brincando-com-html-3-formatacao-de-texto.html

Já aprendemos a estrutura básica e também aprendemos a criar links. Hoje vamos aprender a formatar textos. Colocar em negrito, itálico, sublinhado, riscado colocar alguma cor, alinhar para a esquerda, direita ou centro. No básico pretendo ensinar tudo isso.

Vamos iniciar aprendendo 6 tags de títulos: <h1> <h2> <h3> <h4> <h5> <h6>. Sendo o <h1> com estilo maior e o <h6> com estilo menor.

O código e o resultado são esses:

Temos também as tags de negrito, itálico, sublinhado e riscado, respectivamente: <b> <strong> <em> <i> <u> <strike>

<b> <strong>: Servem para a mesma coisa, deixar o texto em negrito.
<em> <i>: Servem para deixar o texto em itálico.
<u>: Deixa o texto sublinhado.
<strike>: Risca o texto.


Também temos o parágrafo (<p>), quebra de linha(<br />) e um outro código que utilizo para colocar estilos (<span>).

Para colocar cor no texto recomendo que utilize o código <span></span>:
Um exemplo é colocar o texto em vermelho:

Código:

<span style="color:red;">TEXTO</span>

Resultado:
TEXTO

Você pode escrever o nome da cor em inglês ou colocar o número da palheta de cores:

Código:

<span style="color:#FF0000;">TEXTO</span>

Resultado:
TEXTO

O alinhamento também é simples.

Centralizado: <center></center>
Esquerda: <p align=”left”></p> ou <div align=”left”></div>
Direita: <p align=”right”></p> ou <div align=”right”></div>

Gostou? É simples, não? No próximo tutorial vou ensinar a criar tabelas.

Não se esqueça de fechar as tags como nos exemplos.

Artigos Recomendados:
- Formatação de Texto em HTML e CSS
- HTML Básico

©2010 Sem Preceito. Todos os Direitos Reservados!

]]> http://www.sempreceito.com/2009/07/brincando-com-html-3-formatacao-de-texto.html/feed 1 O que são e como criar links? http://www.sempreceito.com/2009/06/brincando-com-html-2-links.html http://www.sempreceito.com/2009/06/brincando-com-html-2-links.html#comments Fri, 26 Jun 2009 16:22:00 +0000 Luan Felipe http://www.sempreceito.com/2009/06/brincando-com-html-2-links.html

No post passado aprendemos a estrutura básica do HTML. Hoje vamos aprender sobre os links!

Links são como cordas que ligam janelas. Confuso? Sim. Vou recorrer ao winkpédia.

[...] É uma referência num documento em hipertexto a outras partes deste documento ou a outro documento. Saiba mais...


A estrutura básica do código que forma o link é essa:

<a href="http://seulink.com.br">Texto Link</a>


Nós podemos incrementar mais o código, fazendo com que ele abra em uma nova janela adicionando o código target=”_blank”.
O código completo ficaria assim:

<a href="http://seulink.com.br" target="_blank">Texto Link</a>


Podemos também colocar um nome no link, quando colocarmos o mouse em cima do link vai apacer o texto digitado (também é bom para os buscadores como o Google), como na imagem:

O código vai ficar assim:

<a href="http://seulink.com.br" title="Nome do seu link">Texto Link</a>


Mas, e como eu coloco link em imagens?
Não se preocupe, vou ensinar. O código basico das imagens é esse:

<img src="http://dominio.com.br/imagem.jpg"/>


Nos códigos de links que coloquei acima o “Texto Link” é a área clicavel, agora é só substituir o “Texto Link” pelo código da imagem. Além disso eu recomendo acrescentar mais um código que retira a borda da imagem: border=”0″.

O Código completo para linkar imagens ficaria assim:

<a href="http://seulink.com.br" title="Nome do seu link/imagem"><img src="http://dominio.com.br/imagem.jpg" border="0" /></a>


Para fazer o link abrir em uma nova pagina é só seguir o passo citado acima, basta acrescentar target=”_blank” dentro do código do link, não acrescente no código da imagem!

Fácil? Sim. Agora, você já viu aqueles link para e-mail? É diferente dos citados acima. O básico é esse:

<a href="mailto:seuemail@dominio.com.br" title="Nome do seu link">Entre em contato comigo.</a>


Você também pode colocar uma imagem no lugar do “Entre em contato comigo.”, é só colocar o código que coloquei acima.

Edite todas as informações que estão em vermelho. Assim o código irá funcionar da maneira que você quer.

Gostou? Você aprendeu a linkar, coisa que todo o blogueiro adora. Use para indicar blogs que você gosta e para linkar a fonte de pesquisa de seus posts ou até mesmo linkar os créditos.

Terminamos essa aula aqui. Na próxima vou trazer as formatação de texto.

Outros artigos:
- Coloque efeitos de CSS nos links.
- Como abrir links em nova aba ou janela.

©2010 Sem Preceito. Todos os Direitos Reservados!

]]> http://www.sempreceito.com/2009/06/brincando-com-html-2-links.html/feed 5 Estrutura básica do HTML http://www.sempreceito.com/2009/06/brincando-com-html-1-estrutura.html http://www.sempreceito.com/2009/06/brincando-com-html-1-estrutura.html#comments Fri, 19 Jun 2009 14:58:00 +0000 Luan Felipe http://www.sempreceito.com/2009/06/brincando-com-html-1-estrutura.html

O Sem Preceito traz mais um tutorial que entrará no ar todas as sextas-feiras. Vamos, juntos, aprender a entender essa linguagem “complicada”, dessa forma você terá uma base para editar seus blogs, mudar algumas coisas em uma enquete, entre outras coisas que te impediam de fazer por não saber HTML.

Vou postar os códigos aqui, entretanto tente entender o código. Para ver os resultados, copie os códigos no bloco de notas e salvar na extensão .html, depois abra o arquivo com um navegador.

A estrutura de um HTML, sem programas de edição como o Dreamweaver, é basicamente essa:

<html> } Início da página. Todos os códigos ficam entre essa e essa (</html>)
<head> } Início do cabeçalho da página.
<title>Página 1</title> } Título da página
</head> } Fim do cabeçalho.
<body> } Início do corpo da página.
Conteúdo
</body> } Fim do corpo da página.
</html> } Fim dos códigos HTML. (fim da página)

Já com o Dreamweaver a estrutura é cheia de outros códigos, mais complicada para fazer pelo bloco de notas:

Conhecendo a estrutura:

<html></html>: ficam todo o código da pagina, independentemente do que seja.

<head></head>: ficam as estruturas responsáveis pelo cabeçalho, os códigos de estilos (CSS) e códigos em javascript.

<body></body>: você colocará todos os códigos que queira exibir na pagina, tabelas, links, imagens, textos, tudo o que quiser.

Essas são as três principais estruturas que complementam uma pagina em HTML. Dentro de cada uma existem mais centenas de códigos, irei explicar as mais importantes e que são fundamentais para a construção de uma página para a internet, não farei isso agora, pois se não o tutorial ficaria muito grande, vamos aprender aos poucos, certo?

Próxima aula: Aprenda a linkar!

Artigos complementares:
- Básico de HTML
- Guia de Referência HTML e XHTML

©2010 Sem Preceito. Todos os Direitos Reservados!

]]> http://www.sempreceito.com/2009/06/brincando-com-html-1-estrutura.html/feed 2 Por que linkar é tão importante? http://www.sempreceito.com/2009/06/por-que-linkar-e-tao-importante.html http://www.sempreceito.com/2009/06/por-que-linkar-e-tao-importante.html#comments Sat, 13 Jun 2009 19:12:00 +0000 Luan Felipe http://www.sempreceito.com/2009/06/por-que-linkar-e-tao-importante.html

A idéia desse post partiu após a leitura de um post gigantesco do Gasosa Rosa, que copiou o post do Tetra, claro que citando a fonte.

Agora eu pergunto caro leitor, por que linkar é tão importante?

Imagine você, blogueiro, na frente de seu computador quebrando a cabeça para achar um assunto para escrever em seu blog. Horas e mais horas pensando e de repente a luz brilha e um assunto que vai estremecer as bases de seu blog surge das cinzas! Então depois de mais algumas horas seu post esta devidamente estruturado e pronto para ser postado. Você sabe que seu post vai gerar discussões, visitas e seu blog vai ser reconhecido com apenas aquele post que demorou horas para ficar pronto. Depois de publicado você corre para o Twitter e faz um tweet anunciando seu post com um link reduzido pelo migre.me e pedindo RT para todos os seus seguidores. Correndo em direção ao LinkLog e ao Ocioso, preenche o formulário, procura uma imagem boa para ser mostrado ao lado do link e clica em enviar.

Após fazer todas as indicações começam a aparecer um ou dois visitantes, você apaixonado por comentários fica atualizando freneticamente a caixa de manutenção de comentários no blogger, mas cadê os comentários? As visitas não param, sobem para seis visitantes online. Um deles, de um blog super famoso. Ele gosta de seu post e resolve dar um CRTL+A e um CRTL+C/CRTL+V para postar no blog dele. Minutos depois de postado, o blog do “copiador” já recebeu dez comentários e mais vinte estão na lista de aprovação, o link do post “copiador” reduzido pelo migre.me registra mais de duzentas visualizações e as visitas pelo LinkLog e Ocioso estão na casa dos trezentos, e subindo a cada segundo.

Você, verdadeiro autor do post fica comendo moscas sabendo pelo twitter que seu post foi “recomendado” por um blog super famoso, feliz da vida corre até ele, lê seu o post, copiado na integra, e procura um link que leve para seu blog, agora abandonado as sombras do esquecimento. Indignado corre até a pagina de contato do blog que copiou seu post, escreve que se ele quiser o post no blog ele teria que ao menos linkar da onde ele tirou o post, clica em enviar. Você sabe que a resposta se vier pode demorar dias ou até semanas.

Imaginou? Você já teve um post copiado completamente e não foi linkado? Eu não, por enquanto. Sentiu a sensação? Agora, se você já copiou algo e não linkou tente imaginar o que o autor verdadeiro sentiu. Raiva? Ódio? Talvez ele até parou de te visitar ou nem ao menos sabe que foi copiado.

O Dicas Blogger mostrou uma maneira de impedir a ação de “kibadores” que copiam seu blog através dos feeds, o Sem Preceito entrou nessa também e produziu um artigo explicativo para lhe ensinar a se prevenir. Claro que isso não vai impedir a ação citada acima, a cópia através do CRTL+A e CRTL+C, mas saiba, se você estiver sendo copiado e se já entrou em contato com o blog plagiador e não foi atendido, você tem o direito de reclamar. O Dicas Blogger fez um guest-post com o Usuário Compulsivo explicando como reagir e preencher um formulário de reclamação para enviar ao Blogger.

Entendeu por que é importante linkar?

UPDATE 16/06/2009

Aprenda a linkar:

Linkar nada mais é que criar um link para determinado blog ou site na internet. Créditos, fonte, amigos, indicados, posts, imagens, entre outros podem ser linkados com esse código:

<a href="http://www.seulinkaqui.com.br">TEXTO, PALAVRA, FRASE, QUALQUER COISA</a>

Edite os espaços em vermelho, e se quiser que o link abra em uma nova pagina acrescente esse código: target=”_blank”. O código completo ficará assim:

<a href="http://www.seulinkaqui.com.br" target="_blank">TEXTO, PALAVRA, FRASE, QUALQUER COISA</a>

Conhece? É um simples código que cria links! Não é tão difícil é?

©2010 Sem Preceito. Todos os Direitos Reservados!

]]> http://www.sempreceito.com/2009/06/por-que-linkar-e-tao-importante.html/feed 13