Apostila de HTML

Usei + no lugar de < e - no lugar de > ento se esquea de trocar! 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+/html3. 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+/body7. 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+/H6O +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+/H39. 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.+/fontOBS: 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 +imgpode 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+/aNo 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.