Baixado 27 vezes
HTML
- 1.
- 2.
- 3. O que éHTML?HyperText Markup Language
- 4.
- 5. Não é linguagemde programação
- 6. Pode ser escritoemeditoresde texto simples, comoBloco de Notas
- 7. Aosalvar o arquivo,é precisosalvarcomoformato ".htm" ou ".html"
- 8. Porconvenção, o nomedapáginaprincipal de um site deve ser "index.html", pois é o arquivoque o servidoriráprocurarcasonãosejasolicitado um arquivoespecíficoTagsComandos do código HTML queformam a página
- 9. Para abriruma tag,coloque o comandocorrespondente entre "<" e ">“
- 10. Para fechar atag, coloque o comandocorrespondente entre "</" e ">" Estruturabásica de umapágina<html> <head> <title>Nome dapágina</title> </head> <body> (Conteúdodapágina, comotexto, links, imagens, vídeos e etc.) </body></html>
- 11. Propriedades de <body>Atravésdos atributos de <body>, podemosdefinircor do texto, cor dos links, cor de fundo e imagem de fundo.<body bgcolor="cor" text="cor" link="cor" alink="cor" vlink="cor" background="endereçodaimagem">bgcolor: cor do fundodapágina. Padrão: branco
- 12. text: cor dotexto. Padrão: preto
- 13. link: cor doslinks. Padrão: azul
- 14. alink: cor dolink quandoacionado. Padrão:azul
- 15. vlink: cor doslinks jávisitados. Padrão: azul
- 16. background: endereçodaimagem debackground. Padrão: Sem background.
- 17. align: alinhamento dotexto (Esquerda = left, Centralizado = center, Direita = right). Padrão: esquerdaCoresÉ possívelinserirosvalores das cores das seguintesformas:Colocando o nomedacoreminglês. Ex.: Branco = White, Preto = Black, Azul = Blue, Rosa = PinkColocandoosvalores RGB da cor. Ex.: Branco = RGB(255,255,255), Preto = RGB(0,0,0), Amarelo = RGB(255,255,0)Colocando o valor hexadecimal da cor. Ex.: Branco = #FFFFFF, Preto = #000000, Verde = #00FF00Tabela de cores: http://www.efeitosespeciais.net/tabela.htm
- 18. HeadingA tag <hx>é utilizadaparadestacar o textocolocando-o emnegrito e definindo um tamanho, ondexvaria entre 1 (maiortamanho) e 6 (menostamanho).<h1>Maiortamanho de heading possível</h1><h6>Menortamanho de heading possível</h6>
- 19. Para editar otexto de forma mais personalizada, é possível utilizar a tag <font> e seus atributosface: nome da fonte (Arial, Times, Courier)color: cor da fontesize: tamanho da fonte entre 1 e 7Ex.: <font face="Arial" color="blue" size=5>Fonte Arial azul tamanho 5</font>Font
- 20.
- 21. Para indicar umparágrafo, utilizamos a tag <p>.Nela, podemos atribuir o alinhamento do texto.<p align=“left”>Alinhado à esquerda</p><p align=“center”>Texto centralizado</p><p align=“right”>Alinhado à direita</p><p align=“justify”>Texto justificado</p>Parágrafo e Alinhamento
- 22. As imagens podemno mesmo local da sua página ou em outro endereço web, mas precisam estar nos formatos gif, png ou jpgA tag para inserir uma imagem é <img>, e o local da imagem é indicado pelo atributo srcEx.: <imgsrc=“imagens/foto.jpg”>Imagem
- 23. AtributosHeight: altura daimagemWidth: largura da imagemAlt: Texto alternativo da imagemBorder: Tamanho da borda da imagemAlign: Alinhamento do texto em relação a imagem (top, middle, left, right)Ex.: <imgsrc=“imagens/foto.jpg” width=100 height=300 alt=“Minha foto” border=1 align=“left”>Imagem
- 24. Pontos clicáveis quelevam a documentos, outros sites ou parte específica da mesma páginaPara indicar a existência de um link, utilizamos a tag <a>, e para definir para onde o link levará, utilizamos o atributo href.Ex.: <a href=“www.google.com”>Clique aqui para acessar o Google</a>Links
- 25. href=mailto:nome@email.com.brtarget: indica ondea nova página deve ser aberta - Mesma página = “_self” (Padrão)- Nova página = “_blank”Links
- 26. Lista ordenadaA tag<ol> indica o início de uma lista ordenada, e cada item dessa lista é indicado pela tag <li><ol><li>Primeiro item</li><li>Segundo item</li></ol>Lista
- 27. Lista não ordenadaAtag <ul> indica o início de uma lista não ordenada, e cada item dessa lista é indicado pela tag <li><ul><li>Primeiro item</li><li>Segundo item</li></ul>Lista
- 28. Atributo type para<li> em lista ordenadatype=A: Ordena em letras maiúsculastype=a: Ordena em letras minúsculastype=I: Ordena em numerais romanos maiúsculostype=i: Ordena em numerais romanos minúsculosLista
- 29. Atributo type para<li> em lista não ordenadatype=disc: Formato de disco (padrão)type=circle: Formato de círculotype=square: Formato de quadradoLista
- 30. A tag<table> indicaa criação de uma tabelaA tag<tr> indica a criação de uma linha na tabelaA tag<td> indica a criação de uma célula na linhaTabela
- 31. <table> <tr> <td>Célula 1</td> <td>Célula 2</td> </tr> <tr> <td>Célula3</td> <td>Célula 4</td> </tr></table> Tabela
- 32. Atributosborder: espessura daborda da tabela em pixelswidth: largura da tabela em pixels ou %align: alinhamento horizontal do conteúdo da tabela, linha ou célula (left, center, right)valign: alinhamento vertical do conteúdo da tabela, linha ou célula (top, middle, bottom)Tabela
- 33. Inserindo uma linha,é possível criar separações no conteúdo da página. Basta inserir a tag<hr>.Atributoswidth: largura da linha em px ou %align: alinhamento da linha (left, center, right)color: cor da linhaLinha
- 34. Serve para darum comportamento diferente ao conteúdo inserido nele. A tag utilizada para isso é <marquee>.Atributosbehavior: tipo de efeito (scroll ou slide)width: tamanho do letreiro na telaLetreiro