Developer day   2010 - html-css
Upcoming SlideShare
Loading in...5
×
 

Developer day 2010 - html-css

on

  • 578 views

 

Statistics

Views

Total Views
578
Slideshare-icon Views on SlideShare
576
Embed Views
2

Actions

Likes
1
Downloads
6
Comments
0

1 Embed 2

http://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Developer day   2010 - html-css Developer day 2010 - html-css Presentation Transcript

    • Introdução a HTML/CSS
      Marcos Roberto Ferreira
      marcos.wp@gmail.com
      @marcoooos
    • BRAVA ECM
      Empresa especialista na distribuição e prestação de serviços em soluções de GED/CM, Workflow/BPM, Qualidade e Portais, que conta com a credibilidade de ser uma empresa com o selo TOTVS Business Partner.
      10 anos de atuação no mercado
      + de 1.000 projetos entregues
      + de 1.000.000 horas
      aplicadas em projetos
      Equipe certificada e
      altamente qualificada para atendimento em toda a América Latina
    • Programação
      O que é HTML
      Como escrever HTML
      Principais tags
      Tags importantes
      Algumas tags conhecidas
      CSS
      3
    • O que é HTML?
      4
    • HyperTextMarkup Language
      5
    • Linguagem de Marcação
      “Quem aqui nunca utilizou linguagem de marcação, não é?”
      6
    • E Hypertexto?
      7
    • Nelson não gostava de texto...
      8
    • Ele queria algo não sequêncial
      9
    • E com imagens!
      10
    • HyperTexto
      11
    • HyperTexto
      Tem um texto aqui!!!!
      12
    • HyperTexto
      Tem um texto aqui!!!!
      Tem um link aqui!!!!
      13
    • Como escrever HTML?
      14
    • 15
    • tagse atributos
      16
    • atributo
      tag
      <a href=“algo.html”>
      Isto é um link
      </a>
      17
    • 18
    • Pricipaistags
      19
    • Tudo começa com a tag <html>
      20
    • Assim como nós HTML possui um <head> e um <body>
      <head>
      </head>
      <body>
      </body>
      21
    • <head> e <body>
      22
    • E não ter um deles também faz falta!
      23
    • Outras tags importantes
      24
    • <title>
      </title>
      25
    • <title>
      26
    • Headings
      <h1>
      <h2>
      </h1>
      </h2>
      <h3>
      </h3>
      27
    • <h1>, <h2>, <h3>
      28
    • Parágrafo
      <p>
      </p>
      <p>
      </p>
      29
    • <p>
      30
    • Links
      <a>
      </a>
      31
    • <a>
      32
    • Imagens
      <img>
      </img>
      33
    • <img>
      34
    • Tabelas
      <table>
      </table>
      35
    • Tabelas
      <table>
      <tr>
      </tr>
      </table>
      36
    • Tabelas
      <table>
      <tr>
      </tr>
      <td>
      </td>
      </table>
      37
    • <table>
      38
    • Forms
      <form>
      </form>
      39
    • Forms
      <form>
      <input type=“text”/>
      </form>
      40
    • Forms
      <form>
      <input type=“text”/>
      <input type=“radio” name=“campo” value=“1”>
      <input type=“radio” name=“campo” value=“2”>
      </form>
      41
    • Forms
      <form>
      <input type=“text”/>
      <select>
      <option>
      </option>
      </select>
      </form>
      42
    • <form>
      43
    • <form>
      <input id="nome" name="nome" type="text" />
      <input name="casado" id="casado" type="checkbox">
      <input name="sexo" id="sexoM" value="M" type="radio">
      <input name="sexo" id="sexoF" value=“F" type="radio">
      <select>
      <option>Ensino médio</option>
      <option>Ensino superior</option>
      <option>Pós-graduado</option>
      </select>
      44
    • Outras tags conhecidas
      <div/> define uma divisão ou seção
      <br/> pula uma linha
      <button/> cria um botão
      <textarea/>cria uma área de texto
      45
    • CSS
      Cascade Style Sheet
      46
    • 47
    • Declaração de um estilo
      48
    • Declaração CSS – Arquivo externo
      49
    • Declaração CSS – Declaração interna
      50
    • Declaração CSS – Em linha
      51
    • Exemplo com CSS
      52
    • Exemplo com CSS
      53
    • Referências
      http://webdesignledger.com/tips/the-most-common-html-and-css-mistakes-to-avoid
      http://www.w3schools.com/html/default.asp
      http://www.w3schools.com/css/default.asp
      http://piadasdaleloca.blogspot.com/2009/09/entendendo-html-em-outras-palavras.html
      http://pt.wikipedia.org/wiki/HTML
      http://pt.wikipedia.org/wiki/Hipertexto
      54
    • QUESTÕES?
      bravaecm@totvs.com.br