Olá! Saturday, 18 de November de 2017.



Dicas CódigoFonte.net
Sunday, 25 de July de 2004

Dicas em HTML para criar seu BLOG

1. O que é HTML e como posso utilizá-lo?

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.


2. Estrutura básica de um documento HTML
  1. <title>Título do site</title>
  2. </head>
  3. <body>Conteúdo do site</body>
  4. </html>



3. Bloco de HTML
  1. <html></html>
- 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.


4. Cabeçalho do documento
  1. <head></head>
- delimitam o cabeçalho do documento.


5. Título do documento
  1. <title></title>
- entre estas duas tags, você deve escrever o título do site, que deve aparecer na barra no topo da tela de seu navegador.


6. Corpo do documento
  1. <body></body>
- 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 você conseguirá especificar:

Imagem de fundo
  1. <body background="imagem.gif">
- a imagem que você deseja configurar como fundo de tela.

Cor de fundo
  1. <body bgcolor="cor">
- a cor de fundo de tela.

Cor do texto padrão
  1. <body text="cor">
- a cor padrão de todo o texto da página.

Cor dos links
  1. <body link="cor">
- determina a cor de todos os links da página.

Cor dos links visitados
  1. <body vlink="cor">
- determina a cor de todos os links já visitados na página.

Cor dos links ativos
  1. <body alink="cor">
- determina a cor dos links ativos.

Por exemplo:
  1. <body background="imagem.gif" bgcolor="cor" text="cor" link="cor" alink="cor" vlink="cor">conteúdo</body>


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:
  1. <body bgcolor="yellow" text="black" link="blue" vlink="purple" alink="green">conteúdo</body>



7. Tamanho da fonte
A maneira mais fácil de mudar o tamanho da fonte é utilizar as tags:

  1. <H1>texto tamanho H1</H1>
  2. <H2>texto tamanho H2</H2>
  3. <H3>texto tamanho H3</H3>
  4. <H4>texto tamanho H4</H4>
  5. <H5>texto tamanho H5</H5>
  6. <H6>texto tamanho H6</H6>


O deixa a letra maior que o , e assim por diante.


8. Alinhamento do texto
O parâmetro que deve ser utilizado é o ALIGN, seguido de:

LEFT - se você quiser que o texto fique alinhado à esquerda.
RIGHT - se você quiser que o texto fique alinhado à direita.
CENTER - se você quiser que o texto fique alinhado ao centro.

Por exemplo:
  1. <H1 align="left">texto alinhado à esquerda</H1>
  2. <H2 align="right">texto alinhado à direita</H2>
  3. <H3 align="center">texto alinhado ao centro</H3>



9. Negrito
  1. [b][/b]
- tudo o que for escrito entre essas duas tags virá em negrito


10. Itálico
  1. <I></I>
- tudo o que for escrito entre essas duas tags virá em itálico

11. Sublinhado
  1. <U></U>
- tudo o que for escrito entre essas duas tags virá sublinhado

12. Subscrito
  1. <sub></sub>
- essas tags rebaixam o texto. Por exemplo: H2O. Ficaria: H2O.

13. Sobrescrito
  1. <sup></sup>
- essas tags elevam o texto. Exemplo: 400 m2. Seria: 400 m2.

14. Formatação de fonte
  1. <font face="tipologia" size="tamanho" color="cor"></font>
- determina o tipo da fonte, o tamanho e a cor do texto que vier escrito entre essas tags.


Por exemplo:
  1. <font face="arial" size=6 color="red">O texto será escrito em vermelho, com fonte arial e tamanho 6.</font>

OBS: O tamanho da fonte pode variar de 1 a 7, sendo 1 a menor fonte, e 7, a maior.


15. Parágrafo
  1. <P></P>
- essas tags delimitam um parágrafo no texto. É possível, neste caso, não fechar a tag , ou seja, omitir o
  1. </P>
, sem prejudicar o resultado final.


16. Alinhamento de parágrafo
  1. <P align="left">
  2. <P align="right">
  3. <P align="center">



17. Quebra de linha
  1.  
- quebra linha. Mas, ao contrário do parágrafo, não é deixada uma linha em branco antes da próxima.


18. Alinhamento de bloco de texto
  1. <div align="…"></div>
- configura o alinhamento de um bloco todo de texto. O alinhamento pode ser à esquerda (left), à direita (right) e ao centro (center).


19. Centralização de texto
  1. <center></center>
- outra maneira de centralizar o texto


20. Régua horizontal
- parâmetro utilizado para colocar linhas horizontais em uma página. Você pode determinar a altura, a largura e o alinhamento da linha.


Por exemplo:
  1. <hr size=8 align="center" width=75%>

Size - configura a espessura da linha
Width - configura a largura da linha (pode ser em porcentagem ou em pixels)
Align - determina o posicionamento da linha


21. Imagem
- é a tag necessária para se colocar uma imagem na página. A tag <img> pode vir acompanhada de diversos parâmetros:

Localização da imagem
  1. <img src="nomedaimagem">
- especifica o endereço da imagem a ser colocada na página. Normalmente, as imagens têm terminação .gif ou .jpg.


Texto alternativo
  1. <img alt="textoalternativo">
- o texto acompanhado do alt aparecerá quando o usuário passar o cursor em cima da imagem. É uma legenda alternativa para a imagem.


Alinhamento de imagem
  1. <img align="alinhamento">
- alinha a imagem à esquerda (left), direita (right), ao centro (middle), no topo da página (top) ou no pé da página (bottom).

Borda da imagem
  1. <img border="tamanhodaborda">
- especifica o tamanho da borda, em pixels. Os números têm de ser inteiros.

Altura em pixels
  1. <img height="alturadaimagem">
- especifica a altura da imagem, tanto em pixels como em porcentagem.

Largura em pixels
  1. <img width="larguradaimagem">
- especifica a largura da imagem, tanto em pixels como em porcentagem.

Espaçamento horizontal
  1. <img hspace="espaçohorizontal">
- 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.

Espaçamento vertical
  1. <img vspace="espaçovertical">
- 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.

Por exemplo:
  1. <img src="computador.gif" alt="Pentium 3" align="right" border=1 height=180 width=120 hspace=10 vspace=10>
- a imagem estará alinhada à direita, e toda vez que um usuário passar o cursor em cima dela, aparecerá o texto "Pentium 3".


22. Hipertexto

Referência de hipertexto
  1. <a href="http://endereçodapágina.htm">Aqui vai o nome ou o endereço da página para a qual você está apontando o link</a>
- estas tags criam links para outras páginas da Internet.
Por exempo: para colocar um link do Brasil Online na sua página, escreva:
  1. <a href=http://www.bol.com.br>Brasil Online</a>
.
Um visitante na sua página que clicar sobre o link Brasil Online será levado à página principal do site.

Referência de hipertexto com imagem
  1. <a href=http://www.bol.com.br><img src="bol.gif border=0 alt="BOL"></a>
- neste caso, em vez de colocar o link em um texto, você estará colocando o link em uma imagem.

Links na mesma página (âncora)
  1. <a name=região>
- este atributo permite que você crie links internos na mesma página. Por exemplo:

  1. <a href="#explicação">Saiba mais sobre o meu site</a>
  2. .
  3. .
  4. .
  5. <a name="explicação">O meu site</a>


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.


Link para e-mail
  1. <a href=mailto:username@provedor.com.br>Mande-me um e-mail</a>
- Essas tags permitem que os visitantes mandem e-mail para o autor do site, ao clicar no endereço.

Dúvidas, postem no fórum.

Comentários do artigo [Novo comentário]

Rafael Lúcio Pereira Pires - 24 de August de 2008 - 17:31
Excelente para quem tá começando agora....lindo post!!
obrigado!
Maria Martha - 15 de September de 2008 - 09:00
Bom dia pessoal,
Eu, Maria Martha quero aviso no e-mail quando receber novo recado no Mural.
Estou brava com voc? viu? rssss
Ent? vou ter "NOVAMENTE" estes avisos no meu e-mail? :(
Boa semana
MMartha
Terezinha Oliveira Santos - 24 de October de 2008 - 08:20
Adorei as explicações.Didáticas e eficientes.Bjos.
Maria de Fátima da silva - 02 de November de 2008 - 15:19
"A essência da vida é saber e compreender o que a vida nos proporciona,viva bem,viva a paz,sejas ponderado,pois somente assim saberás colher o fruto da sabedoria".
Boa Semana! Beijos...
Charles Rodrigues - 15 de November de 2008 - 00:50
Muito Bom esse post! Me ajudou muito. Parabéns e muio obrigado.
julio cesar martins malta da cunha - 19 de November de 2008 - 00:37
MUITO BOM MESMO
ivan ferreira - 27 de November de 2008 - 13:24
muito bom! adorei esse site vlw pessoal me ajudou muito ;)
Lisete Nazareth - 27 de November de 2008 - 23:38
muito bom adorei!
Lêda Freire - 07 de December de 2008 - 23:52
Oi sou muito grata a vcs td muito didatico e vcs são mesmo feras,mas ando até entendo do tal do HTML e é ai q o bicho pega tò tentando colocar a cx de alerta mas o blog do msn só tem <DIV></DIV> e como fazer p/usar a tag do codigo q copiei .... tem cheito de vcs me SOS.Se então help meeeeeeeeee,bjus e obrigada.
Isabella Resende Marques - 16 de December de 2008 - 21:14
Ei gente será que dava pra vcs fazerem um template com afoto das meninas malvadas e escrito Radio Magiaji para mim (um template para uol blog) eu não entendei nadaaaaaaaaaaa.Vcs saão super bons e eu :P eu não sei nada necas pacas NADA
Clarinda Santos Peres - 14 de February de 2009 - 00:51
DEsejo saber como fazer para colocar meus awards na janela de rolamento,não consigo colocar,o mais longe que vou é colocar no meio como apenas imagem ,e não na barra de rolagem.Me ajudem por favor. obrigada
natalia dos santos - 15 de March de 2009 - 19:16
É muito dez. inclusive para os leigos no assunto como eu.
Me ajudou muito mesmo!
Brigadim...
Roberto Resende Leite - 15 de June de 2009 - 20:35
<img src="nomedaimagem"> seguindo raciocínio Pergunto: como fazer pra minha imagem aparecer na minha página? pois ela está em meus documentos / fotos / foto1
igo romero costa de souza - 20 de October de 2009 - 18:10
ops
blz
em gostei muito das dicas queria que algume
explicasse mais um pouco
a parte de css
vlw
Denise Malafaia Cerqueira - 15 de November de 2009 - 01:49
Estou amando o que estou aprendendo com vcs!
Obrigada!
MARIA ELISIANE SALVIANO SOUSA - 20 de November de 2009 - 13:29
quero colocar um mural de recados no meu blog
leila araujo - 14 de January de 2010 - 15:32
sem querer excluir o contador de acesso do meu blog , fiquem nervosa pensando que ao inserir iria reiniciar a contagem ..........ainda bem que a conta aqui é permandente e armazena as informaçoes basicas que precisamos

abraço
www.historianailhadomiriti.blogspot.com
Renata Floriano - 31 de January de 2010 - 03:06
amei a explicação, mas não consegui entender onde exatamente consigo colocar o código de bloqueio do botão direito??? se puder me ajudar, agradeço muito!!!! abçs
www.arkaencantada.blogspot.com
Paulo Santos - 17 de February de 2010 - 16:18
Vlw a dica ! muito bom mesmo.
micheli brga desouza - 02 de March de 2010 - 11:58
vivendo eaprendendo mesmo vlw
sydnei rafael moreira - 08 de March de 2010 - 21:33
to expert no html me add no msn quem quiser ajuda rafael_embassado@hotmail.com
Danilo Santos - 18 de October de 2010 - 10:18
estes códigos fonte só server para criar Blog ou também serve para criar paginas em html ?

obrigado
claudio vinicius gonçalves cabral - 11 de March de 2011 - 23:28
Foi muito útil para mim, excelente.
Franciely Cristina Coelho da Silva - 01 de May de 2011 - 21:57
aushuahsuahs adorei *-*
Stone - 19 de May de 2011 - 01:44
Gostei muito estou disposto a ir praticar agora...
Obrigado!
EDILSON DE LIMA SILVA PONTES - 18 de March de 2015 - 16:56
Perfeito galera!
Achei muito útil todos os questionamentos, dúvidas e o post em sí...
Para adicionar um comentário você deve efetuar o login


Gostou do CódigoFonte.net? Quer indicar a um amigo?
Preencha os campos a seguir.
Seu Nome:
Seu E-mail:
E-mail de seu Amigo:


CodigoFonte.net » Meu Mural » Competiva - Criação de Sites » Todos os Direitos Reservados © 2002/2010