HTML

440 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
440
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
27
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

HTML

  1. 1. HTML<br />Introdução a MicroinformáticaTurma J<br />
  2. 2. Como funcionaumapágina?<br />
  3. 3. O que é HTML?<br /><ul><li>HyperText Markup Language
  4. 4. Linguagempadrãoda internet
  5. 5. Não é linguagem de programação
  6. 6. Pode ser escritoemeditores de texto simples, comoBloco de Notas
  7. 7. Aosalvar o arquivo, é precisosalvarcomoformato ".htm" ou ".html"
  8. 8. Porconvenção, o nomedapágina principal de um site deve ser "index.html", pois é o arquivoque o servidoriráprocurarcasonãosejasolicitado um arquivoespecífico</li></li></ul><li>Tags<br /><ul><li>Comandos do código HTML queformam a página
  9. 9. Para abriruma tag, coloque o comandocorrespondente entre "<" e ">“
  10. 10. Para fechar a tag, coloque o comandocorrespondente entre "</" e ">" </li></li></ul><li>Estruturabásica de umapágina<br /><html><br />    <head><br />        <title>Nome dapágina</title><br />    </head><br />    <body><br />        (Conteúdodapágina, comotexto, links, imagens, vídeos e etc.)<br />    </body><br /></html><br />
  11. 11. Propriedades de <body><br />Através dos atributos de <body>, podemosdefinircor do texto, cor dos links, cor de fundo e imagem de fundo.<br /><body bgcolor="cor" text="cor" link="cor" alink="cor" vlink="cor" background="endereçodaimagem"><br /><ul><li>bgcolor: cor do fundodapágina. Padrão: branco
  12. 12. text: cor do texto. Padrão: preto
  13. 13. link: cor dos links. Padrão: azul
  14. 14. alink: cor do link quandoacionado. Padrão:azul
  15. 15. vlink: cor dos links jávisitados. Padrão: azul
  16. 16. background: endereçodaimagem de background. Padrão: Sem background.
  17. 17. align: alinhamento do texto (Esquerda = left, Centralizado = center, Direita = right). Padrão: esquerda</li></li></ul><li>Cores<br />É possívelinserirosvalores das cores das seguintesformas:<br />Colocando o nomedacoreminglês. Ex.: Branco = White, Preto = Black, Azul = Blue, Rosa = Pink<br />Colocandoosvalores RGB da cor. Ex.: Branco = RGB(255,255,255), Preto = RGB(0,0,0), Amarelo = RGB(255,255,0)<br />Colocando o valor hexadecimal da cor. Ex.: Branco = #FFFFFF, Preto = #000000, Verde = #00FF00<br />Tabela de cores: http://www.efeitosespeciais.net/tabela.htm<br />
  18. 18. Heading<br />A tag <hx> é utilizadaparadestacar o textocolocando-o emnegrito e definindo um tamanho, ondexvaria entre 1 (maiortamanho) e 6 (menostamanho).<br /><h1>Maiortamanho de heading possível</h1><br /><h6>Menortamanho de heading possível</h6><br />
  19. 19. Para editar o texto de forma mais personalizada, é possível utilizar a tag <font> e seus atributos<br />face: nome da fonte (Arial, Times, Courier)<br />color: cor da fonte<br />size: tamanho da fonte entre 1 e 7<br />Ex.: <font face="Arial" color="blue" size=5>Fonte Arial azul tamanho 5</font><br />Font<br />
  20. 20. <b>negrito</b><br /><i>itálico</i><br /><u>sublinhado<</u><br />Negrito, Itálico e Sublinhado<br />
  21. 21. Para indicar um parágrafo, utilizamos a tag <p>.<br />Nela, podemos atribuir o alinhamento do texto.<br /><p align=“left”>Alinhado à esquerda</p><br /><p align=“center”>Texto centralizado</p><br /><p align=“right”>Alinhado à direita</p><br /><p align=“justify”>Texto justificado</p><br />Parágrafo e Alinhamento<br />
  22. 22. As imagens podem no mesmo local da sua página ou em outro endereço web, mas precisam estar nos formatos gif, png ou jpg<br />A tag para inserir uma imagem é <img>, e o local da imagem é indicado pelo atributo src<br />Ex.: <imgsrc=“imagens/foto.jpg”><br />Imagem<br />
  23. 23. Atributos<br />Height: altura da imagem<br />Width: largura da imagem<br />Alt: Texto alternativo da imagem<br />Border: Tamanho da borda da imagem<br />Align: Alinhamento do texto em relação a imagem (top, middle, left, right)<br />Ex.: <imgsrc=“imagens/foto.jpg” width=100 height=300 alt=“Minha foto” border=1 align=“left”><br />Imagem<br />
  24. 24. Pontos clicáveis que levam a documentos, outros sites ou parte específica da mesma página<br />Para indicar a existência de um link, utilizamos a tag <a>, e para definir para onde o link levará, utilizamos o atributo href.<br />Ex.: <a href=“www.google.com”>Clique aqui para acessar o Google</a><br />Links<br />
  25. 25. href=mailto:nome@email.com.br<br />target: indica onde a nova página deve ser aberta <br />- Mesma página = “_self” (Padrão)<br />- Nova página = “_blank”<br />Links<br />
  26. 26. Lista ordenada<br />A tag <ol> indica o início de uma lista ordenada, e cada item dessa lista é indicado pela tag <li><br /><ol><br /><li>Primeiro item</li><br /><li>Segundo item</li><br /></ol><br />Lista<br />
  27. 27. Lista não ordenada<br />A tag <ul> indica o início de uma lista não ordenada, e cada item dessa lista é indicado pela tag <li><br /><ul><br /><li>Primeiro item</li><br /><li>Segundo item</li><br /></ul><br />Lista<br />
  28. 28. Atributo type para <li> em lista ordenada<br />type=A: Ordena em letras maiúsculas<br />type=a: Ordena em letras minúsculas<br />type=I: Ordena em numerais romanos maiúsculos<br />type=i: Ordena em numerais romanos minúsculos<br />Lista<br />
  29. 29. Atributo type para <li> em lista não ordenada<br />type=disc: Formato de disco (padrão)<br />type=circle: Formato de círculo<br />type=square: Formato de quadrado<br />Lista<br />
  30. 30. A tag<table> indica a criação de uma tabela<br />A tag<tr> indica a criação de uma linha na tabela<br />A tag<td> indica a criação de uma célula na linha<br />Tabela<br />
  31. 31. <table><br /> <tr><br /> <td>Célula 1</td><br /> <td>Célula 2</td><br /> </tr><br /> <tr><br /> <td>Célula 3</td><br /> <td>Célula 4</td><br /> </tr><br /></table> <br />Tabela<br />
  32. 32. Atributos<br />border: espessura da borda da tabela em pixels<br />width: largura da tabela em pixels ou %<br />align: alinhamento horizontal do conteúdo da tabela, linha ou célula (left, center, right)<br />valign: alinhamento vertical do conteúdo da tabela, linha ou célula (top, middle, bottom)<br />Tabela<br />
  33. 33. Inserindo uma linha, é possível criar separações no conteúdo da página. Basta inserir a tag<hr>.<br />Atributos<br />width: largura da linha em px ou %<br />align: alinhamento da linha (left, center, right)<br />color: cor da linha<br />Linha<br />
  34. 34. Serve para dar um comportamento diferente ao conteúdo inserido nele. A tag utilizada para isso é <marquee>.<br />Atributos<br />behavior: tipo de efeito (scroll ou slide)<br />width: tamanho do letreiro na tela<br />Letreiro<br />

×