Your SlideShare is downloading. ×
  • Like
  • Save
HTML
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

HTML

  • 919 views
Published

apresentação sobre html por andré rossiter do tutor brasil. …

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Apenas um detalhe. Na página 8 sua definição de Strict e Transitional está invertida.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
919
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
6
Comments
1
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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