Anda di halaman 1dari 6

HTML

1. O que HTML e como posso utiliz-lo? Hypertext Markup Language (HTML - linguagem de marcao de hipertexto) a linguagem utilizada na produo de pginas na Internet. O HTML permite a criao de documentos que podem ser lidos em qualquer tipo de computador e transmitidos pela Internet at por correio eletrnico. Para escrever documentos HTML no necessrio mais do que um editor de texto simples e conhecimentos dos cdigos que compem a linguagem. Os cdigos, conhecidos como "tags", servem para indicar a funo de cada elemento da pgina na rede.

2. Estrutura bsica de um documento HTML <html> <head> <title>Ttulo do site</title> </head> <body>Contedo do site</body> </html>

3. Bloco de HTML <html></html> - indicam o incio e o fim de um documento. Para que o computador reconhea que voc est escrevendo um documento em HTML, todo o seu contedo dever ser colocado no meio destas duas tags.

4. Cabealho do documento <head></head> - delimitam o cabealho do documento.

5. Ttulo do documento <title></title> - entre estas duas tags, voc deve escrever o ttulo 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 contedo do site. a que aparecero os textos, as imagens, o fundo de tela, entre outras coisas. Dentro da tag <body> voc conseguir especificar:

1. Imagem de fundo <body background="imagem.gif"> - a imagem que voc deseja configurar como fundo de tela. 2. Cor de fundo <body bgcolor="cor"> - a cor de fundo de tela. 3. Cor do texto padro <body text="cor"> - a cor padro de todo o texto da pgina. 4. Cor dos links <body link="cor"> - determina a cor de todos os links da pgina. 5. Cor dos links visitados <body vlink="cor"> - determina a cor de todos os links j visitados na pgina. 6. Cor dos links ativos <body alink="cor"> - determina a cor dos links ativos. 7. Por exemplo: <body background="imagem.gif" bgcolor="cor" text="cor" link="cor" alink="cor" vlink="cor">contedo</body>

O exemplo seguinte determina que a cor de fundo do site ser amarela, o texto ser preto, os links ainda no visitados sero azuis, os links j visitados sero roxos, e os links ativos sero verdes: <body bgcolor="yellow" text="black" link="blue" vlink="purple" alink="green">contedo</body>

7. Tamanho da fonte A maneira mais fcil 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 parmetro 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. Itlico <I></I> - tudo o que for escrito entre essas duas tags vir em itlico

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. Formatao 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. Pargrafo <P></P> - essas tags delimitam um pargrafo no texto. possvel, neste caso, no fechar a tag <P>, ou seja, omitir o </P>, sem prejudicar o resultado final.

16. Alinhamento de pargrafo <P align="left"> <P align="right"> <P align="center">

17. Quebra de linha <br> - quebra linha. Mas, ao contrrio do pargrafo, no deixada uma linha em branco antes da prxima.

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. Centralizao de texto <center></center> - outra maneira de centralizar o texto

20. Rgua horizontal <HR> - parmetro utilizado para colocar linhas horizontais em uma pgina. 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 necessria para se colocar uma imagem na pgina. A tag <img> pode vir acompanhada de diversos parmetros: 1. Localizao da imagem <img src="nomedaimagem"> - especifica o endereo da imagem a ser colocada na pgina. Normalmente, as imagens tm terminao .gif ou .jpg.

2. Texto alternativo <img alt="textoalternativo"> - o texto acompanhado do alt aparecer quando o usurio passar o cursor em cima da imagem. uma legenda alternativa para a imagem. 3. Alinhamento de imagem <img align="alinhamento"> - alinha a imagem esquerda (left), direita (right), ao centro (middle), no topo da pgina (top) ou no p da pgina (bottom). 4. Borda da imagem <img border="tamanhodaborda"> - especifica o tamanho da borda, em pixels. Os nmeros tm de ser inteiros. 5. Altura em pixels <img height="alturadaimagem"> - especifica a altura da imagem, tanto em pixels como em porcentagem. 6. Largura em pixels <img width="larguradaimagem"> - especifica a largura da imagem, tanto em pixels como em porcentagem. 7. Espaamento horizontal <img hspace="espaohorizontal"> - especifica um espao 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 no ficaro grudados nela. 8. Espaamento vertical <img vspace="espaovertical"> - especifica um espao 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 no ficaro grudados nela. 9. 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 usurio passar o cursor em cima dela, aparecer o texto "Pentium 3".

22. Hipertexto 1. Referncia de hipertexto <a href="http://endereodapgina.htm">Aqui vai o nome ou o endereo da pgina para a qual voc est apontando o link</a> - estas tags criam links para outras pginas da Internet. Por exempo: para colocar um link do Brasil Online na sua pgina, escreva: <a href=http://www.bol.com.br>Brasil Online</a>. Um visitante na sua pgina que clicar sobre o link Brasil Online ser levado pgina principal do site. 2. Referncia 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. 3. Links na mesma pgina (ncora) <a name=regio> - este atributo permite que voc crie links internos na mesma pgina. Por exemplo: <a href="#explicao">Saiba mais sobre o meu site</a> . . . <a name="explicao">O meu site</a> No exemplo acima, "Saiba mais sobre o meu site" est vinculado regio chamada "O meu site", ou seja, quando um usurio clicar sobre "Saiba mais sobre o meu site", vai ser levado para a regio, na mesma pgina, chamada "Meu site". O caracter "#" indica que se trata de um link em uma mesma pgina. 4. Link para e-mail <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 endereo.

23. Veja os livros de HTML que o BOL indica Clique no nome de cada livro para comparar seu preo em diferentes livrarias, por meio do LivrosMiner: Livros em portugus:

HTML 4 - Srie para Dummies HTML - Guia de Consulta Rpida

Livros em ingls:

HTML 4.0 Sourcebook - A Complete Guide to HTML 4.0 and HTML Extensions Web Design in a Nutshell - A Desktop Quick Reference HTML 4 for Dummies - A Reference for the Rest of Us

Anda mungkin juga menyukai