Html básico
Autor: Ulquioorraa | Publicado: 2012-04-04T17:01:00-07:00

Dicas em HTML para criar seu BLOG1. O que é HTML e como posso utilizá-lo?&nbsp;Hypertext Markup Language (HTML - linguagem de marcação de hipertexto) é a linguagem utilizada na produção de páginas na Internet. O HTML permite a criação de documentos que podem ser lidos em qualquer tipo de computador e transmitidos pela Internet até por correio eletrônico. Para escrever documentos HTML não é necessário mais do que um editor de texto simples e conhecimentos dos códigos que compõem a linguagem. Os códigos, conhecidos como "tags", servem para indicar a função de cada elemento da página na rede.&nbsp;2. Estrutura básica de um documento HTML&nbsp;&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Título do site&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;Conteúdo do site&lt;/body&gt;
&lt;/html&gt; 3. Bloco de HTML&nbsp;&lt;html&gt;&lt;/html&gt;- indicam o início e o fim de um documento. Para que o computador reconheça que você está escrevendo um documento em HTML, todo o seu conteúdo deverá ser colocado no meio destas duas tags.&nbsp;4. Cabeçalho do documento&nbsp;&lt;head&gt;&lt;/head&gt;- delimitam o cabeçalho do documento.&nbsp;5. Título do documento&nbsp;&lt;title&gt;&lt;/title&gt;- entre estas duas tags, você deve escrever o título do site, que deve aparecer na barra no topo da tela de seu navegador.&nbsp;6. Corpo do documento&nbsp;&lt;body&gt;&lt;/body&gt;- estas duas tags delimitam todo o conteúdo do site. É aí que aparecerão os textos, as imagens, o fundo de tela, entre outras coisas. Dentro da tag&lt;body&gt;você conseguirá especificar:&nbsp;Imagem de fundo&nbsp;&lt;body background="imagem.gif"&gt;- a imagem que você deseja configurar como fundo de tela.&nbsp;Cor de fundo&nbsp;&lt;body bgcolor="cor"&gt;- a cor de fundo de tela.&nbsp;Cor do texto padrão&lt;body text="cor"&gt;- a cor padrão de todo o texto da página.&nbsp;Cor dos links&lt;body link="cor"&gt;- determina a cor de todos os links da página.&nbsp;Cor dos links visitados&lt;body vlink="cor"&gt;- determina a cor de todos os links já visitados na página.&nbsp;Cor dos links ativos&lt;body alink="cor"&gt;- determina a cor dos links ativos.&nbsp;Por exemplo:&lt;body background="imagem.gif" bgcolor="cor" text="cor" link="cor" alink="cor" vlink="cor"&gt;conteúdo&lt;/body&gt; O exemplo seguinte determina que a cor de fundo do site será amarela, o texto será preto, os links ainda não visitados serão azuis, os links já visitados serão roxos, e os links ativos serão verdes:&nbsp;&lt;body bgcolor="yellow" text="black" link="blue" vlink="purple" alink="green"&gt;conteúdo&lt;/body&gt; 7. Tamanho da fonte&nbsp;A maneira mais fácil de mudar o tamanho da fonte é utilizar as tags:&nbsp;&lt;H1&gt;texto tamanho H1&lt;/H1&gt;
&lt;H2&gt;texto tamanho H2&lt;/H2&gt;
&lt;H3&gt;texto tamanho H3&lt;/H3&gt;
&lt;H4&gt;texto tamanho H4&lt;/H4&gt;
&lt;H5&gt;texto tamanho H5&lt;/H5&gt;
&lt;H6&gt;texto tamanho H6&lt;/H6&gt;O&lt;H1&gt;deixa a letra maior que o&lt;H2&gt;, e assim por diante.&nbsp;8. Alinhamento do texto&nbsp;O parâmetro que deve ser utilizado é o ALIGN, seguido de:&nbsp;LEFT - se você quiser que o texto fique alinhado à esquerda.&nbsp;RIGHT - se você quiser que o texto fique alinhado à direita.&nbsp;CENTER - se você quiser que o texto fique alinhado ao centro.&nbsp;Por exemplo:&nbsp;&lt;H1 align="left"&gt;texto alinhado à esquerda&lt;/H1&gt;
&lt;H2 align="right"&gt;texto alinhado à direita&lt;/H2&gt;
&lt;H3 align="center"&gt;texto alinhado ao centro&lt;/H3&gt; 9. Negrito&nbsp;[b][/b]- tudo o que for escrito entre essas duas tags virá em negrito&nbsp;10. Itálico&nbsp;&lt;I&gt;&lt;/I&gt;- tudo o que for escrito entre essas duas tags virá em itálico&nbsp;11. Sublinhado&nbsp;&lt;U&gt;&lt;/U&gt;- tudo o que for escrito entre essas duas tags virá sublinhado&nbsp;12. Subscrito&nbsp;&lt;sub&gt;&lt;/sub&gt;- essas tags rebaixam o texto. Por exemplo: H2O. Ficaria: H2O.&nbsp;13. Sobrescrito&nbsp;&lt;sup&gt;&lt;/sup&gt;- essas tags elevam o texto. Exemplo: 400 m2. Seria: 400 m2.&nbsp;14. Formatação de fonte&nbsp;&lt;font face="tipologia" size="tamanho" color="cor"&gt;&lt;/font&gt;- determina o tipo da fonte, o tamanho e a cor do texto que vier escrito entre essas tags.&nbsp;Por exemplo:&nbsp;&lt;font face="arial" size=6 color="red"&gt;O texto será escrito em vermelho, com fonte arial e tamanho 6.&lt;/font&gt;OBS: O tamanho da fonte pode variar de 1 a 7, sendo 1 a menor fonte, e 7, a maior.&nbsp;15. Parágrafo&nbsp;&lt;P&gt;&lt;/P&gt;- essas tags delimitam um parágrafo no texto. É possível, neste caso, não fechar a tag&lt;P&gt;, ou seja, omitir o&lt;/P&gt;, sem prejudicar o resultado final.&nbsp;16. Alinhamento de parágrafo&nbsp;&lt;P align="left"&gt;
&lt;P align="right"&gt;
&lt;P align="center"&gt;17. Quebra de linha&nbsp;- quebra linha. Mas, ao contrário do parágrafo, não é deixada uma linha em branco antes da próxima.&nbsp;18. Alinhamento de bloco de texto&nbsp;&lt;div align="…"&gt;&lt;/div&gt;- configura o alinhamento de um bloco todo de texto. O alinhamento pode ser à esquerda (left), à direita (right) e ao centro (center).&nbsp;19. Centralização de texto&nbsp;&lt;center&gt;&lt;/center&gt;- outra maneira de centralizar o texto&nbsp;20. Régua horizontal&nbsp;&lt;HR&gt;- parâmetro utilizado para colocar linhas horizontais em uma página. Você pode determinar a altura, a largura e o alinhamento da linha.&nbsp;Por exemplo:&nbsp;&lt;hr size=8 align="center" width=75%&gt;Size - configura a espessura da linha&nbsp;Width - configura a largura da linha (pode ser em porcentagem ou em pixels)&nbsp;Align - determina o posicionamento da linha&nbsp;21. Imagem&nbsp;&lt;img&gt;- é a tag necessária para se colocar uma imagem na página. A tag &lt;img&gt; pode vir acompanhada de diversos parâmetros:&nbsp;Localização da imagem&nbsp;&lt;img src="nomedaimagem"&gt;- especifica o endereço da imagem a ser colocada na página. Normalmente, as imagens têm terminação .gif ou .jpg.&nbsp;Texto alternativo&nbsp;&lt;img alt="textoalternativo"&gt;- o texto acompanhado do alt aparecerá quando o usuário passar o cursor em cima da imagem. É uma legenda alternativa para a imagem.&nbsp;Alinhamento de imagem&nbsp;&lt;img align="alinhamento"&gt;- alinha a imagem à esquerda (left), direita (right), ao centro (middle), no topo da página (top) ou no pé da página (bottom).&nbsp;Borda da imagem&nbsp;&lt;img border="tamanhodaborda"&gt;- especifica o tamanho da borda, em pixels. Os números têm de ser inteiros.Altura em pixels&nbsp;&lt;img height="alturadaimagem"&gt;- especifica a altura da imagem, tanto em pixels como em porcentagem.&nbsp;Largura em pixels&nbsp;&lt;img width="larguradaimagem"&gt;- especifica a largura da imagem, tanto em pixels como em porcentagem.&nbsp;Espaçamento horizontal&nbsp;&lt;img hspace="espaçohorizontal"&gt;- especifica um espaço em branco a ser deixado entre as bordas esquerda e direita da imagem, em pixels. Ou seja, os textos que forem escritos ao redor da imagem não ficarão grudados nela.&nbsp;Espaçamento vertical&nbsp;&lt;img vspace="espaçovertical"&gt;- especifica um espaço em branco a ser deixado entre o topo e o pé da imagem, em pixels. Ou seja, os textos que forem escritos ao redor da imagem não ficarão grudados nela.&nbsp;Por exemplo:&nbsp;&lt;img src="computador.gif" alt="Pentium 3" align="right" border=1 height=180 width=120 hspace=10 vspace=10&gt;- a imagem estará alinhada à direita, e toda vez que um usuário passar o cursor em cima dela, aparecerá o texto "Pentium 3".&nbsp;22. Hipertexto&nbsp;Referência de hipertexto&nbsp;&lt;a href="http://endereçodapágina.htm"&gt;Aqui vai o nome ou o endereço da página para a qual você está apontando o link&lt;/a&gt;- estas tags criam links para outras páginas da Internet.&nbsp;Por exempo: para colocar um link do Brasil Online na sua página, escreva:&lt;a href=http://www.bol.com.br&gt;Brasil Online&lt;/a&gt;.&nbsp;Um visitante na sua página que clicar sobre o link Brasil Online será levado à página principal do site.&nbsp;Referência de hipertexto com imagem&nbsp;&lt;a href=http://www.bol.com.br&gt;&lt;img src="bol.gif border=0 alt="BOL"&gt;&lt;/a&gt;- neste caso, em vez de colocar o link em um texto, você estará colocando o link em uma imagem.&nbsp;Links na mesma página (âncora)&nbsp;&lt;a name=região&gt;- este atributo permite que você crie links internos na mesma página. Por exemplo:&nbsp;&lt;a href="#explicação"&gt;Saiba mais sobre o meu site&lt;/a&gt;
.
.
.
&lt;a name="explicação"&gt;O meu site&lt;/a&gt;No exemplo acima, "Saiba mais sobre o meu site" está vinculado à região chamada "O meu site", ou seja, quando um usuário clicar sobre "Saiba mais sobre o meu site", vai ser levado para a região, na mesma página, chamada "Meu site". O caracter "#" indica que se trata de um link em uma mesma página.&nbsp;Link para e-mail&nbsp;&lt;a href=mailto:username@provedor.com.br&gt;Mande-me um e-mail&lt;/a&gt;- Essas tags permitem que os visitantes mandem e-mail para o autor do site, ao clicar no endereço.&nbsp;