Algumas dicas para blogs....
Tutorial de HTML
01. O que é HTML?
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.
02. Estrutura básica de um documento
HTML
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.
02. Estrutura básica de um documento
HTML
Uma página, de qualquer tipo, e para qualquer
objetivo, deve ter pelo menos a seguinte estrutura de comandos
HTML:
objetivo, deve ter pelo menos a seguinte estrutura de comandos
HTML:
<html>
<head>
<title>Título do
site</title>
</head>
<body>Conteúdo
do site</body>
</html>
a) Bloco de HTML
<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.
b) Cabeçalho do
documento
<head></head> - delimitam o cabeçalho do
documento.
c) Título do documento
<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.
d) Corpo do documento
<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.
<head>
<title>Título do
site</title>
</head>
<body>Conteúdo
do site</body>
</html>
a) Bloco de HTML
<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.
b) Cabeçalho do
documento
<head></head> - delimitam o cabeçalho do
documento.
c) Título do documento
<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.
d) Corpo do documento
<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.
Cada tag é
composto de 2 símbolos especiais: o sinal "<" denominado "menor que", e o
sinal ">" denominado "maior que". No meio desses símbolos especiais vem o
comando propriamente dito, sempre uma palavra na língua inglesa, como body
(corpo). Não importa se tais comandos são digitados em maiúsculas ou minúsculas,
porém o ideal, e também um padrão de fato, é se utilizar apenas de comandos em
minúsculas.
composto de 2 símbolos especiais: o sinal "<" denominado "menor que", e o
sinal ">" denominado "maior que". No meio desses símbolos especiais vem o
comando propriamente dito, sempre uma palavra na língua inglesa, como body
(corpo). Não importa se tais comandos são digitados em maiúsculas ou minúsculas,
porém o ideal, e também um padrão de fato, é se utilizar apenas de comandos em
minúsculas.
Um cuidado importante com estes, e
na verdade com quase todos os demais tags, é que eles sempre andam aos pares.
Para cada tag de abertura (ex: <head>) deve existir um outro tag de
fechamento (ex: </head>). E este tag de fechamento é idêntico ao de
abertura, apenas com a adição de uma barra logo após o sinal de "menor que".
na verdade com quase todos os demais tags, é que eles sempre andam aos pares.
Para cada tag de abertura (ex: <head>) deve existir um outro tag de
fechamento (ex: </head>). E este tag de fechamento é idêntico ao de
abertura, apenas com a adição de uma barra logo após o sinal de "menor que".
03. Imagem de fundo
<body background="imagem.gif"> - a imagem
que você deseja configurar como fundo de tela.
04. Cor de
fundo
que você deseja configurar como fundo de tela.
04. Cor de
fundo
<body bgcolor="cor"> - a cor de fundo de
tela.
05. Cor do texto padrão
tela.
05. Cor do texto padrão
<body text="cor"> - a cor padrão de todo o
texto da página.
06. Links
texto da página.
06. Links
a) Cor dos links
<body link="cor"> -
determina a cor de todos os links da página.
b) Cor dos links
visitados
<body vlink="cor"> - determina a cor de todos os links já
visitados na página.
c) Cor dos links ativos <body alink="cor"> -
determina a cor dos links ativos.
Por exemplo: <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:
<body bgcolor="yellow" text="black" link="blue" vlink="purple"
alink="green">conteúdo</body>
07. Tamanho da fonte
<body link="cor"> -
determina a cor de todos os links da página.
b) Cor dos links
visitados
<body vlink="cor"> - determina a cor de todos os links já
visitados na página.
c) Cor dos links ativos <body alink="cor"> -
determina a cor dos links ativos.
Por exemplo: <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:
<body bgcolor="yellow" text="black" link="blue" vlink="purple"
alink="green">conteúdo</body>
07. Tamanho da fonte
A maneira mais fácil de mudar o tamanho da fonte é
utilizar as tags:
utilizar as tags:
<H1>texto tamanho
H1</H1>
<H2>texto tamanho H2</H2>
<H3>texto
tamanho H3</H3>
<H4>texto tamanho
H4</H4>
<H5>texto tamanho H5</H5>
<H6>texto
tamanho H6</H6>
O <H1> deixa a letra maior que o <H2>,
e assim por diante.
08. Alinhamento do texto
H1</H1>
<H2>texto tamanho H2</H2>
<H3>texto
tamanho H3</H3>
<H4>texto tamanho
H4</H4>
<H5>texto tamanho H5</H5>
<H6>texto
tamanho H6</H6>
O <H1> deixa a letra maior que o <H2>,
e assim por diante.
08. 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:
<H1 align="left">texto alinhado à
esquerda</H1>
<H2 align="right">texto alinhado à
direita</H2>
<H3 align="center">texto alinhado ao
centro</H3>
a) Negrito
<b></b> - tudo o que for
escrito entre essas duas tags virá em negrito.
b) Itálico
<I></I> - tudo o que for escrito entre essas duas tags virá em
itálico.
c) Sublinhado
<U></U> - tudo o que for escrito
entre essas duas tags virá sublinhado.
d) Subscrito
<sub></sub> - essas tags rebaixam o texto. Por exemplo: H2O.
Ficaria: H2O.
e) Sobrescrito
<sup></sup> - essas tags
elevam o texto. Exemplo: 400 m2. Seria: 400 m2.
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:
<H1 align="left">texto alinhado à
esquerda</H1>
<H2 align="right">texto alinhado à
direita</H2>
<H3 align="center">texto alinhado ao
centro</H3>
a) Negrito
<b></b> - tudo o que for
escrito entre essas duas tags virá em negrito.
b) Itálico
<I></I> - tudo o que for escrito entre essas duas tags virá em
itálico.
c) Sublinhado
<U></U> - tudo o que for escrito
entre essas duas tags virá sublinhado.
d) Subscrito
<sub></sub> - essas tags rebaixam o texto. Por exemplo: H2O.
Ficaria: H2O.
e) Sobrescrito
<sup></sup> - essas tags
elevam o texto. Exemplo: 400 m2. Seria: 400 m2.
f) Centralização de texto
<center></center> - outra maneira de centralizar o texto
<center></center> - outra maneira de centralizar o texto
09. Formatação de fonte
<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:<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.
10. Parágrafo
color="cor"></font> - determina o tipo da fonte, o tamanho e a cor do
texto que vier escrito entre essas tags.
Por exemplo:<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.
10. Parágrafo
<P></P> - essas tags delimitam um
parágrafo no texto. É possível, neste caso, não fechar a tag <P>, ou seja,
omitir o </P>, sem prejudicar o resultado final.
a) Alinhamento de
parágrafo
<P align="left">
<P align="right">
<P
align="center">
11. Quebra de linha
parágrafo no texto. É possível, neste caso, não fechar a tag <P>, ou seja,
omitir o </P>, sem prejudicar o resultado final.
a) Alinhamento de
parágrafo
<P align="left">
<P align="right">
<P
align="center">
11. Quebra de linha
<br> - quebra linha. Mas, ao contrário do
parágrafo, não é deixada uma linha em branco antes da próxima.
12. Alinhamento de bloco de texto
parágrafo, não é deixada uma linha em branco antes da próxima.
12. Alinhamento de bloco de texto
<div align="…"></div> - configura o
alinhamento de um bloco todo de texto. O alinhamento pode ser à esquerda (left),
à direita (right) e ao centro (center).
13. Régua horizontal
alinhamento de um bloco todo de texto. O alinhamento pode ser à esquerda (left),
à direita (right) e ao centro (center).
13. Régua horizontal
<HR> - 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: <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
14. Imagem
linhas horizontais em uma página. Você pode determinar a altura, a largura e o
alinhamento da linha.
Por exemplo: <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
14. Imagem
<img> - é a tag necessária para se colocar
uma imagem na página. A tag <img> pode vir acompanhada de diversos
parâmetros:
a) Localização da imagem
<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.
b) Texto alternativo
<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.
c) Alinhamento de imagem
<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).
d) Borda da
imagem
<img border="tamanhodaborda"> - especifica o tamanho da borda,
em pixels. Os números têm de ser inteiros.
e) Altura em pixels
<img
height="alturadaimagem"> - especifica a altura da imagem, tanto em pixels
como em porcentagem.
f) Largura em pixels
<img
width="larguradaimagem"> - especifica a largura da imagem, tanto em pixels
como em porcentagem.
g) Espaçamento horizontal
<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.
h)Espaçamento vertical
<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: <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".
15. Hipertexto
a) Referência de hipertexto
<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 UOL na sua
página, escreva: <a href=http://www.uol.com.br>UOL</a>.Um visitante
na sua página que clicar sobre o link UOL será levado à página principal do
site.
b) Referência de hipertexto com imagem
<a
href=http://www.uol.com.br><img src="uol.gif border=0
alt="UOL"></a> - neste caso, em vez de colocar o link em um texto, você
estará colocando o link em uma imagem.
c) Links na mesma página
(âncora)
<a name=região> - este atributo permite que você crie links
internos na mesma página. Por exemplo:
<a href="#explicação">Saiba mais
sobre o meu site</a>
<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.
d) Link para e-mail
<a href=mailto:
\n
uma imagem na página. A tag <img> pode vir acompanhada de diversos
parâmetros:
a) Localização da imagem
<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.
b) Texto alternativo
<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.
c) Alinhamento de imagem
<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).
d) Borda da
imagem
<img border="tamanhodaborda"> - especifica o tamanho da borda,
em pixels. Os números têm de ser inteiros.
e) Altura em pixels
<img
height="alturadaimagem"> - especifica a altura da imagem, tanto em pixels
como em porcentagem.
f) Largura em pixels
<img
width="larguradaimagem"> - especifica a largura da imagem, tanto em pixels
como em porcentagem.
g) Espaçamento horizontal
<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.
h)Espaçamento vertical
<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: <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".
15. Hipertexto
a) Referência de hipertexto
<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 UOL na sua
página, escreva: <a href=http://www.uol.com.br>UOL</a>.Um visitante
na sua página que clicar sobre o link UOL será levado à página principal do
site.
b) Referência de hipertexto com imagem
<a
href=http://www.uol.com.br><img src="uol.gif border=0
alt="UOL"></a> - neste caso, em vez de colocar o link em um texto, você
estará colocando o link em uma imagem.
c) Links na mesma página
(âncora)
<a name=região> - este atributo permite que você crie links
internos na mesma página. Por exemplo:
<a href="#explicação">Saiba mais
sobre o meu site</a>
<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.
d) Link para e-mail
<a href=mailto:
\n
-->-->
>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.
16. Tabelas
Inicie uma tabela com: <table
border="largura_da_borda">.
Após isso selecione os campos usando:
<tr><td>Campo1</td><td>Campo2</td> e assim
seguidamente.
Quando acabar de selecionar os campos, finalize os campos com:
</tr>
Depois é só adicionar os items usando:
<tr><td>Item1</td><td>Item2</td></tr> e
depois criando uma nova lista de itens com:
<tr><td>Item1</td><td>Item2</td></tr>
Finalize
a tabela com: </table>
17. Música de Fundo
Para por uma música de fundo adicione o seguinte comando:
<embed src="arquivo.ext" autostart="true"
loop="numero_de_vezes_que_vai_tocar">.
As explicações foram simples e diretas, pude entender muita coisa. Parabéns!
ResponderExcluirameeeeeeei
ResponderExcluirMuito bom (:
ResponderExcluir