HTML

1,141 views

Published on

apresentação sobre html por andré rossiter do tutor brasil.
conheça a importância do html e saiba como trabalhar, como funciona, etc...

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
1,141
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
6
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

HTML

  1. 1. HTML<br />André Rossiter<br />
  2. 2. O que é HTML?<br />Linguagem de marcação hipertextual. <br />O que é hipertexto?<br />São documentos que possuem referencias internas a eles e a outros documentos, envolvem o conceito de biblioteconomia (armazenar, catalogar e evocar informações).<br />O que é hipermídia?<br />Extensão de referencias hipertextuais que englobam outras mídias além do texto.<br />André Rossiter<br />
  3. 3. O que o navegador (Browser) faz?<br />Interpreta os documentos hipertextuais com sua formatação para o usuário final. <br />O que é um servidor?<br />São computadores que através de softwares e conexão com a internet compartilham arquivos HTML para os usuários na rede mundial de computadores.<br />O que é uma URL?<br />Localizador de recursos uniformes. Indica o endereço de uma página na web.<br />André Rossiter<br />
  4. 4. O que significa WWW?<br />World wide web foi criada por TimBerners Lee e compõe um dos protocolos da web.<br />O que é FTP?<br />File transferprotocol, são os protocolos para transferência de arquivos na internet.<br />O que é XML?<br />Extensiblemarkuplanguage, que supre as limitações do HTML.<br />André Rossiter<br />
  5. 5. O que é a W3C?<br />World wide web Consortium, foi criada por TimBerners Lee em 1994 para ajudar a elevar ao máximo o potencial da world wide web, unificando a sua codificação, garantindo a sua interoperabilidade.<br />http://www.w3.org<br />André Rossiter<br />
  6. 6. Qual o objetivo da W3C ?<br />Controle sobre design, posicionamento e tipografia nos navegadores gráficos;<br />Formatação sofisticada que funcione em vários navegadores e diferentes plataformas;<br />Acessibilidade sem sacrificar a beleza, o desempenho ou a sofisticação;<br />Suportar múltiplos navegadores sem ter a necessidade de criar versões diferentes .<br />André Rossiter<br />
  7. 7. Documenttypedefinition<br />André Rossiter<br />
  8. 8. XHTML Strict<br />Quando você quer deixar suas tags HTML livres de formatação por completo.<br /><"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />XHTML Transitional<br />Quando você não pode abrir mão de formatação no HTML.<br />< "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />XHTML Frameset<br />Permite a estrutura de frames no documento HTML.<br />< "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><br />André Rossiter<br />
  9. 9. Estrutura HTML<br />André Rossiter<br />
  10. 10. André Rossiter<br />
  11. 11. Meta tag’s<br />André Rossiter<br />
  12. 12. http-equiv: Serve paraenviarinformaçõesespeciaisaosnavegadoresquando o documento é carregado. <br />São informaçõesespecificadaspeloscabeçalhos http.<br />Identifica o tipo de conteúdopadrão e o tipo de conjunto de caracteres.<br /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><br />Especifica a data e hora de expiração do documento.<br /><meta http-equiv="expires" content="Mon, 14 Jul 2003 10:00:00 GMT" /><br />Controla o usoda cache nosnavegadores<br /><meta http-equiv="pragma" content="no-cache" /><br />Intervaloemsegundosparaque o documentocarregueautomaticamenteoutrodocumento.<br /><meta http-equiv="refresh" content="5;url=http://www.site.com.br/index2.html" /><br />André Rossiter<br />
  13. 13. Meta -name: guardainformaçõessobreosdocumentos e não tem cabeçalhos http associado.<br />Descrição do documento. É utilizadopelosmecanismos de busca.<br /><meta name="description" content="site exemplo de padrões W3C" /><br />Palavraschavequeidentificam o documento. É utilizadopelosmecanismos de busca.<br /><meta name="keywords" content="html, xhtml, css, w3c" /><br />Identificação dos autores do documento WEB.<br /><meta name="author" content="Bruno Abreu, Carlos Eduardo" /><br />Define informaçõessobreosdireitosautorais do documento WEB.<br /><meta name="copyright" content="FaculdadeMarista" /><br />Define endereço de email paracontato.<br /><meta name=“reply-to” content=“joao@gmail.com” /><br />Define a lingua utilizada no site.<br /><meta name=“language” content=“pt-br” /><br />André Rossiter<br />
  14. 14. Atributos de cores<br />André Rossiter<br />
  15. 15. 16 cores podem ser usadaspelonome<br />As demaisprecisamusar o código RGB<br />Ex. bgcolor=“RGB”<br />Cadaletra (R, G e B) podevariar de 0 até 256 em Hexadecimal (De 00 até FF)<br />André Rossiter<br />
  16. 16. 000000<br />000033<br />000066<br />000099<br />0000CC<br />0000FF<br />003300<br />003333<br />003366<br />003399<br />0033CC<br />0033FF<br />006600<br />006633<br />006666<br />006699<br />0066CC<br />0066FF<br />009900<br />009933<br />009966<br />009999<br />0099CC<br />0099FF<br />00CC00<br />00CC33<br />00CC66<br />00CC99<br />00CCCC<br />00CCFF<br />00FF00<br />00FF33<br />00FF66<br />00FF99<br />00FFCC<br />00FFFF<br />330000<br />330033<br />330066<br />330099<br />3300CC<br />3300FF<br />333300<br />333333<br />333366<br />333399<br />3333CC<br />3333FF<br />336600<br />336633<br />336666<br />336699<br />3366CC<br />3366FF<br />339900<br />339933<br />339966<br />339999<br />3399CC<br />3399FF<br />33CC00<br />33CC33<br />33CC66<br />33CC99<br />33CCCC<br />33CCFF<br />33FF00<br />33FF33<br />33FF66<br />33FF99<br />33FFCC<br />33FFFF<br />660000<br />660033<br />660066<br />660099<br />6600CC<br />6600FF<br />663300<br />663333<br />663366<br />663399<br />6633CC<br />6633FF<br />666600<br />666633<br />666666<br />666699<br />6666CC<br />6666FF<br />669900<br />669933<br />669966<br />669999<br />6699CC<br />6699FF<br />66CC00<br />66CC33<br />66CC66<br />66CC99<br />66CCCC<br />66CCFF<br />66FF00<br />66FF33<br />66FF66<br />66FF99<br />66FFCC<br />66FFFF<br />990000<br />990033<br />990066<br />990099<br />9900CC<br />9900FF<br />993300<br />993333<br />993366<br />993399<br />9933CC<br />9933FF<br />996600<br />996633<br />996666<br />996699<br />9966CC<br />9966FF<br />999900<br />999933<br />999966<br />999999<br />9999CC<br />9999FF<br />99CC00<br />99CC33<br />99CC66<br />99CC99<br />99CCCC<br />99CCFF<br />99FF00<br />99FF33<br />99FF66<br />99FF99<br />99FFCC<br />99FFFF<br />CC0000<br />CC0033<br />CC0066<br />CC0099<br />CC00CC<br />CC00FF<br />CC3300<br />CC3333<br />CC3366<br />CC3399<br />CC33CC<br />CC33FF<br />CC6600<br />CC6633<br />CC6666<br />CC6699<br />CC66CC<br />CC66FF<br />CC9900<br />CC9933<br />CC9966<br />CC9999<br />CC99CC<br />CC99FF<br />CCCC00<br />CCCC33<br />CCCC66<br />CCCC99<br />CCCCCC<br />CCCCFF<br />CCFF00<br />CCFF33<br />CCFF66<br />CCFF99<br />CCFFCC<br />CCFFFF<br />FF0000<br />FF0033<br />FF0066<br />FF0099<br />FF00CC<br />FF00FF<br />FF3300<br />FF3333<br />FF3366<br />FF3399<br />FF33CC<br />FF33FF<br />FF6600<br />FF6633<br />FF6666<br />FF6699<br />FF66CC<br />FF66FF<br />FF9900<br />FF9933<br />FF9966<br />FF9999<br />FF99CC<br />FF99FF<br />FFCC00<br />FFCC33<br />FFCC66<br />FFCC99<br />FFCCCC<br />FFCCFF<br />FFFF00<br />FFFF33<br />FFFF66<br />FFFF99<br />FFFFCC<br />FFFFFF<br />
  17. 17. Para cadauma das tags quepertencemao body, com exceção do comentário, estaspossuematributosemcomum. <br />id: Identifica um elemento, atribuindo a ele um nome. Essenomedeve ser únicodentro do documento. Geralmenteassociado a umafolha de estilo.<br />class: identificaque o elementopertence a umaclasseespecífica de elementos.Geralmenteassociado a umafolha de estilo.<br />style: Especifica as regras de formatação de folhas de estilopara o elementoemquestão.<br />André Rossiter<br />
  18. 18. title: especifica um títulopara um elemento. O valordesseatributospode ser mostradopornavegadores de maneiradiferente.<br />dir: indica a direçãoque o textodeve ser lido. Possuidoisvalorespossíveis: <br />ltr(left ro right – daesquerdaparadireita)<br />rtl (right to left – dadireitaparaesquerda)<br />lang: define o idioma no qual o conteúdo do elementodeve ser escrito.<br />André Rossiter<br />
  19. 19. Como definir um paragrafo?<br />Porpadrãoosparágrafossãoalinhados à esquerdadapágina.<br />É possívelalinharda forma comovocêdesejar<br />Centro ("center")<br />Esquerda ("left")<br />Direita ("right")<br />Justificado ("justify")<br />André Rossiter<br />
  20. 20. Estruturas de cabeçalho<br />André Rossiter<br />
  21. 21. Todas as tags para texto possuem os seguintes atributos: <br />id, class, style, title, dir, lang.<br />TAGS:<br /><abbr>... </abbr>:<br />Indica que o texto incluído é uma abreviação<br /><acronym>...</ acronym>:<br />Uma abreviação que indica a primeira letra de cada palavra.<br /><q>...</q>:<br />Citações Externas curtas.<br /><blockquote>...</blockquote>:<br />Citações Externas Longas<br /><cite>...</cite>: <br />Criação ou referência a fonte externa de um documento.<br />André Rossiter<br />
  22. 22. TAGS:<br /><em>... </em >:<br />Enfatizar o texto, geralmente os navegadores mostram em itálico.<br /><strong>...</strong >:<br /> Dá uma ênfase mais forte ao texto, geralmente os navegadores mostram em negrito.<br /><kbd>...</kbd >:<br />Indica que texto é para ser digitado pelo teclado<br /><samp>...</samp>: <br />Texto é um exemplo de uma saída de um programa,script ou outra fonte de dados.<br /><hr/><br />Para criar uma linha horizontal<br /><span>... </span><br />Associadasao CSS podemaplicarregras de formatação a todososelementos<br />André Rossiter<br />
  23. 23. TAGS:<br /><sub>... </sub>:<br />Para subscrever um texto <br /><sup>... </sup>:<br />Para sobrescrever um texto <br /><code>...</code>:<br /> Trecho de código fonte de alguma linguagem de programação<br /><var>... </ var >:<br />Variável, ou argumento de algum programa<br /><br/><br />Como pular linha para fazer um paragrafo<br />André Rossiter<br />
  24. 24. Atributos de imagem<br />André Rossiter<br />
  25. 25. <imgsrc=“caminho da imagem” alt=“atributo descreve imagem & acessibilidade”<br />Title=“texto descritivo quando mouse passa por cima”/><br />img - atributo que define o tipo do parâmetro como imagem<br />src - atributo que define o caminho físico onde está a imagem<br />alt - atributo de acessibilidade q/ descreve a imagem p/ leitores de ecrã e buscadores<br />title - define um texto quando o mouse passa por cima da imagem<br />OBS– existem outros atributos de imagem porem não são tão relevantes para SEO<br />André Rossiter<br />
  26. 26. Link’s<br />André Rossiter<br />
  27. 27. <ahref=“url – localizador de recursos uniformes – o link propriamente dito”><br />Textoreferenteao link<br /></a><br />a – define a tag para link’s – trabalha em conjunto com todos os demais atributos HTML como: color, align, margin& possui atributos próprios.<br />href – define a url – localizador de recursos uniformes – o endereço www do site ou link que você deseja mencionar em sua página HTML <br />Accesskey– indicaumatecla de atalhopara o link<br />André Rossiter<br />
  28. 28. <ahref=“http://www.tutorbr.com” target=“_blank”><br />Educaçãoaoalcance de todos<br /></a><br />Podeterosseguintesvalores (target)<br />_blank Abreemuma nova Janela<br />_self AbrenaprópriaJanela<br />_parent<br />_top<br />André Rossiter<br />
  29. 29. Link<br /><a href=“#ancora”>texto do link</a><br />âncora<br /><a name=“ancora”>Texto da âncora</a><br />André Rossiter<br />
  30. 30. <a href=“documento.html#ancora”>texto do link</a><br />Link<br />âncora<br /><a name=“ancora”>Texto da âncora</a><br />André Rossiter<br />
  31. 31. HTTP (Hypertext Transfer Protocol)<br /><ul><li>Transfereinformaçõesparaosnavegadores
  32. 32. Ex.: http://www.foo.com/home/foo/index.html</li></ul>Host<br />Protocolo<br />Diretório e arquivo<br />André Rossiter<br />
  33. 33. André Rossiter<br />
  34. 34. www.facebook.com/tutorbrasil<br />webrossiter@gmail.com<br />André Rossiter<br />

×