0 Compartilhamentos 1601 Views

Blog em HTML

27 de fevereiro de 2008

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
<html>
<head>
<title>Título do site</title>
</head>
<body>Conteúdo do site</body>
</html>

3. 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.

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

5. 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.

6. 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. Dentro da tag <body>
você conseguirá especificar:

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

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

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

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

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

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>

7. Tamanho da fonte
A maneira mais fácil de mudar o tamanho da fonte é 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.

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:
<H1 align="left">texto alinhado à esquerda</H1>
<H2 align="right">texto alinhado à direita</H2>
<H3 align="center">texto alinhado ao centro</H3>

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

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

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

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

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

14. 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.

15. 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.

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

17. Quebra de linha
<br>
– 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
<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
<center></center>
– outra maneira de centralizar o texto

20. 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

21. Imagem
<img>
– é 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
<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
<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
<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
<img border="tamanhodaborda">
– especifica o tamanho da borda, em pixels. Os números têm de ser inteiros.

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

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

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.

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".

22. Hipertexto

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 Brasil Online na sua página, escreva: <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
<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)
<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.

Link para e-mail
<a href=mailto:[email protected]>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.

Carregando...

Você pode se interessar

Sir Clive Sinclair, o homem adiantado no tempo
Artigos
120 visualizações
Artigos
120 visualizações

Sir Clive Sinclair, o homem adiantado no tempo

Carlos L. A. da Silva - 18 de setembro de 2021

O inglês Clive Marles Sinclair nasceu de uma família de engenheiros. Seu avô foi engenheiro, assim como o seu pai. Com um talento natural pela Matemática e um forte interesse em eletrônica, ele se tornaria uma página importante da popularização da computação em diversas partes do mundo, construindo um legado que se perpetuará por anos […]

A cibersegurança por trás das vacinas
Artigos
227 visualizações
Artigos
227 visualizações

A cibersegurança por trás das vacinas

Carlos L. A. da Silva - 7 de setembro de 2021

Vacinas contra o coronavírus contam com aparato sofisticado de cibersegurança que bateu de frente com tentativa de ação de hackers.

Top 25 comandos do Git
Artigos
369 visualizações
Artigos
369 visualizações

Top 25 comandos do Git

Carlos L. A. da Silva - 28 de agosto de 2021

Git é uma mão na roda para source control, mas pode ficar melhor ainda conhecendo os comandos certos.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Dez anos de Kotlin: origens e futuro
Artigos
422 visualizações
422 visualizações

Dez anos de Kotlin: origens e futuro

Carlos L. A. da Silva - 20 de agosto de 2021
10 jogos que todo programador deveria conhecer
Artigos
743 visualizações
743 visualizações

10 jogos que todo programador deveria conhecer

Carlos L. A. da Silva - 1 de agosto de 2021