SlideShare uma empresa Scribd logo
1 de 54
Baixar para ler offline
HTML + CSS
         Uma introdução



Dep.	
  Eng.	
  Informá/ca	
  -­‐	
  FCTUC

   Universidade	
  de	
  Verão
             Julho	
  de	
  2010



            Pedro	
  Gaspar
    TwiGer:	
  @pedrogaspar
  Web:	
  hGp://pedrogaspar.com/
O QUE SÃO?




HTML         CSS
Conteúdo   Apresentação
HTML               CSS

Conteúdo             Propriedades visuais
                     das estruturas definidas
Estrutura            em HTML

 Título                       Título


                                Notícia 1
 Menu                 Menu


                                Notícia 2
 Notícia 1


                                Notícia 3
 Notícia 2




                 3
COMO FUNCIONA?
   Pedidos e Respostas
COMO FUNCIONA?
     Pedidos e Respostas



                 ml
             .ht
      in dex
    T/
  GE
COMO FUNCIONA?
     Pedidos e Respostas



                 ml
             .ht
      in dex
    T/
  GE
COMO FUNCIONA?
     Pedidos e Respostas



                 ml
             .ht
      in dex
    T/
  GE
HTML
HTML - SINTAXE



      <p>...</p>

 <img	
  src=”...”	
  />
HTML - TAGS COMUNS

Parágrafo                 <p>...</p>

Cabeçalhos   <h1>...</h1>,	
  <h2>...</h2>,	
  etc.

  Lista            <ul>	
  <li>...</li>	
  </ul>

 Imagem               <img	
  src=”...“	
  />

  Link              <a	
  href=”...“>...</a>

  Bloco                <div>...</div>
HTML - PARÁGRAFO

<p>
   Texto...
   Fim.
</p>
HTML - PARÁGRAFO

<p>
   Texto...
   Fim.
</p>

  <br	
  />
HTML - TEXTO

<p>
  <i>Itálico</i>
  <br	
  />
  <small>Pequeno</small>
  <br	
  />
  <b>Negrito</b>
  <br	
  />
  <i><b>Composto</b></i>
</p>
HTML - TEXTO

<pre>
 <i>Itálico</i>
 <small>Pequeno</small>

   <b>Negrito</b>
   <i><b>Composto</b></i>

  Um	
  dois	
  	
  	
  	
  	
  três.
</pre>
HTML - CABEÇALHOS

<h1>O	
  meu	
  Livro</h1>
   <h2>Capítulo	
  1</h2>
    <p>...</p>
   <h2>Capítulo	
  2</h2>
    <h3>Capítulo	
  2.1</h3>
      <p>...</p>
    <h3>Capítulo	
  2.2</h3>
      <p>...</p>
...
HTML - LISTAS

<h3>A	
  Fazer</h3>

<ul>
  <li>Limpar	
  a	
  casa</li>
  <li>Lavar	
  o	
  carro</li>
  <li>Estudar</li>
  <li>Ir	
  de	
  Férias!</li>
  <li>etc...</li>
</ul>
HTML - LISTAS

<h3>A	
  Fazer</h3>

<ol>
  <li>Limpar	
  a	
  casa</li>
  <li>Lavar	
  o	
  carro</li>
  <li>Estudar</li>
  <li>Ir	
  de	
  Férias!</li>
  <li>etc...</li>
</ol>
HTML - IMAGENS


<img	
  src=”pessoa.png“	
  />


  O atributo src indica o
  caminho para a imagem
  a mostrar.

  Pode mesmo ser um
  URL.
HTML - LINKS

<a	
  href=”hSp://google.pt“>
  Link	
  para	
  o	
  Google
</a>

  O atributo href indica o
  URL para onde o link
  aponta.

  Pode ser um caminho
  local.
HTML - BLOCOS

<div>
  <p>Texto...</p>
</div>

  O div pode conter
  qualquer elemento
  dentro de sí.

  Principalmente usado
  através do CSS.
HTML - TABELAS
<table	
  border=”1”>
  <th>Número</th>
  <th>Nome</th>

  <tr>
    <td>1</td>
    <td>Luís</td>
  </tr>
                        th - Table Header
  <tr>
    <td>2</td>
                        tr - Table Row
    <td>Armando</td>
  </tr>
                        td - Table Data
</table>
HTML - FORMS
<form>
  ...
</form>



<input	
  type=”text”	
  />
<input	
  type=”password”	
  />
<input	
  type=”radio”	
  />
<input	
  type=”checkbox”	
  />
<input	
  type=”submit”	
  />     <textarea>	
  </textarea>
                                  <label>Nome:</label>
HTML - ESTRUTURA

Início do documento
                         <html>
Elemento head             <head>
                            ...
Elemento body             </head>

                           <body>
                             ...
Tag externa que contém
                           </body>
todo o HTML
                         </html>
HTML - ESTRUTURA

Início do documento
                        <html>
Elemento head            <head>
                           ...
Elemento body            </head>

Contém tags que dão       <body>
valor semântico à           ...
página e que fazem        </body>
referência a ficheiros   </html>
com código CSS
HTML - ESTRUTURA

Início do documento
                       <html>
Elemento head           <head>
                          ...
Elemento body           </head>

                         <body>
                           ...
Tags de HTML normais     </body>
                       </html>
CSS
CSS - UTILIZAÇÃO



Código num ficheiro externo
Código no próprio ficheiro HTML
Código no atributo style de cada tag
CSS - UTILIZAÇÃO

  Na tag head ficheiro HTML

<head>
  <link	
  rel=”stylesheet”	
  type=”text/css”	
  href=”style.css”/>
</head>
CSS - SINTAXE


  h1	
  {	
  color:	
  gray;	
  font-­‐size:	
  12px;	
  }




Selector
CSS - SINTAXE


h1	
  {	
  color:	
  gray;	
  font-­‐size:	
  12px;	
  }




             Propriedade
CSS - SINTAXE


h1	
  {	
  color:	
  gray;	
  font-­‐size:	
  12px;	
  }




                              Valor
CSS - SINTAXE

h1	
  {
   color:	
  gray;
   font-­‐size:	
  12px;
}

p	
  {
         font-­‐family:	
  Arial;
}
CSS - SINTAXE

h1	
  {
   color:	
  gray;
   font-­‐size:	
  12px;
}

p	
  {
         font-­‐family:	
  Arial;
}
CSS - SELECTORS

           <div>...</div>
HTML



           <div>...</div>
           <p>...</p>
CSS




              div	
  {	
  ...	
  }
CSS - SELECTORS

       <div	
  class=”content”>...</div>
HTML



       <div>...</div>
       <p	
  class=”content”>...</p>
CSS




                 .content	
  {	
  ...	
  }
CSS - SELECTORS

       <div	
  class=”content”>...</div>
HTML



       <div>...</div>
       <p	
  class=”content”>...</p>
CSS




               div.content	
  {	
  ...	
  }
CSS - SELECTORS

        <div	
  id=”content”>...</div>
HTML



        <div>...</div>
        <p	
  class=”content”>...</p>
CSS




               #content	
  {	
  ...	
  }
EXEMPLO
EX. - BACKGROUND


      body	
  {	
  
         background-­‐color:	
  #005e1a;
         background-­‐image:	
  url(‘bg.jpg’);
CSS




         background-­‐repeat:	
  repeat-­‐x;
         font-­‐family:	
  Arial;
      }
EX. - CONTAINER

        <div	
  id=”site-­‐ftle”>
          <h1>Um	
  Blog</h1>
        </div>
HTML




        <div	
  id=”container”>
          ...
        </div>
EX. - CONTAINER


      #site-­‐/tle	
  {	
  text-­‐align:	
  center;	
  }

      #site-­‐/tle	
  h1	
  {
CSS




      	
   color:	
  white;
      	
   font-­‐family:	
  Arial;
      }
EX. - CONTAINER


      #container	
  {
      	
   width:	
  700px;
      	
   background-­‐color:	
  white;
CSS




      	
   margin:	
  auto;
      	
   margin-­‐boSom:	
  20px;
      }
EX. - MENU

       <div	
  id=”menu”>
           <ul>
             <li><a	
  href=”sobre.html”>Sobre</a></li>
HTML




       	
   <li><a	
  href=”fotos.html”>Fotos</a></li>
             <li><a	
  href=”hSp://google.com”>Google</a></li>
           </ul>
       </div>
       ...
       <div	
  class=”clear”></div>
EX. - MENU
      #menu	
  {
      	
   width:	
  150px;
      	
   float:	
  lek;
      	
   background-­‐color:	
  #DDD;
      	
   border-­‐boSom:	
  1px	
  solid	
  gray;
CSS




      	
   border-­‐right:	
  1px	
  solid	
  gray;
      	
   padding:	
  1px;
      }

      #menu	
  li	
  {	
  list-­‐style:	
  circle;	
  }
      .clear	
  {	
  clear:	
  both;	
  }
EX. - MENU

      a,	
  a:visited,	
  a:link	
  {
             text-­‐decorafon:	
  none;
             color:	
  #333;
      }
CSS




      a:hover	
  {
         color:	
  #777;
         font-­‐weight:	
  bold;
      }
EX. - POSTS



        <div	
  class=”post”>
HTML




          <p>Texto...</p>
          ...
        </div>
EX. - POSTS

                                <div	
  class=”post”>
HTML


                                  <p>Texto...</p>
                                  ...
                                </div>

       .post	
  {
       	
   margin:	
  20px	
  0px	
  5px	
  24px;
       	
   float:	
  right;
                                                     .post	
  p	
  {
CSS




       	
   background-­‐color:	
  #EEE;
                                                     	
   margin:	
  0px;
       	
   color:	
  #555;
                                                     }
       	
   width:	
  480px;
       	
   padding:	
  10px;
       }
Photo	
  by	
  Al_HikesAZ
EXPERIMENTEM

hGp://nei.dei.uc.pt/workshop-­‐html-­‐css/
         hSp://w3schools.com/
        hSp://colourlovers.com/
hSp://www.famfamfam.com/lab/icons/
     Google:	
  “background	
  gradient”

Mais conteúdo relacionado

Mais procurados

Aula 3 – Linguagem HTML - formatação de texto
Aula 3 – Linguagem HTML -  formatação de textoAula 3 – Linguagem HTML -  formatação de texto
Aula 3 – Linguagem HTML - formatação de texto
André Constantino da Silva
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao css
Léo Dias
 

Mais procurados (20)

01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação web
 
Html5 - Estrutura Básica
Html5 - Estrutura BásicaHtml5 - Estrutura Básica
Html5 - Estrutura Básica
 
HTML e CSS para pequenas gafanhotas
HTML e CSS para pequenas gafanhotasHTML e CSS para pequenas gafanhotas
HTML e CSS para pequenas gafanhotas
 
Css
CssCss
Css
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
 
HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2
 
Aw aula 04
Aw aula 04Aw aula 04
Aw aula 04
 
HTML - HyperText Markup Language - 3
HTML - HyperText Markup Language - 3HTML - HyperText Markup Language - 3
HTML - HyperText Markup Language - 3
 
Desenvolvimento sites html
Desenvolvimento sites htmlDesenvolvimento sites html
Desenvolvimento sites html
 
Aula 4 e 5 css e java script
Aula 4 e 5   css e java scriptAula 4 e 5   css e java script
Aula 4 e 5 css e java script
 
Ambiente web
Ambiente webAmbiente web
Ambiente web
 
HTML - HyperText Markup Language - 1
HTML - HyperText Markup Language - 1HTML - HyperText Markup Language - 1
HTML - HyperText Markup Language - 1
 
Internet I - Aula 04 - Coisando o HTML com o CSS
Internet I - Aula 04 - Coisando o HTML com o CSSInternet I - Aula 04 - Coisando o HTML com o CSS
Internet I - Aula 04 - Coisando o HTML com o CSS
 
Aula 3 – Linguagem HTML - formatação de texto
Aula 3 – Linguagem HTML -  formatação de textoAula 3 – Linguagem HTML -  formatação de texto
Aula 3 – Linguagem HTML - formatação de texto
 
HTML&CSS 2 - Intermediate HTML
HTML&CSS 2 - Intermediate HTMLHTML&CSS 2 - Intermediate HTML
HTML&CSS 2 - Intermediate HTML
 
14 CSS Introdução
14 CSS Introdução14 CSS Introdução
14 CSS Introdução
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao css
 
XHTML Básico
XHTML BásicoXHTML Básico
XHTML Básico
 
Html apresentação
Html apresentaçãoHtml apresentação
Html apresentação
 
Introdução a HTML5 - Tags e Conceitos
Introdução a HTML5 - Tags e ConceitosIntrodução a HTML5 - Tags e Conceitos
Introdução a HTML5 - Tags e Conceitos
 

Semelhante a HTML + CSS

Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Eduardo Bertolucci
 
Básico em (X)HTML e CSS
Básico em (X)HTML e CSSBásico em (X)HTML e CSS
Básico em (X)HTML e CSS
Kako Botasso
 

Semelhante a HTML + CSS (20)

HTML Básico
HTML BásicoHTML Básico
HTML Básico
 
03css2005
03css200503css2005
03css2005
 
HTML & CSS - Aula 2
HTML & CSS - Aula 2HTML & CSS - Aula 2
HTML & CSS - Aula 2
 
HTML
HTMLHTML
HTML
 
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
 
Aula html5
Aula html5Aula html5
Aula html5
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
PW00 - Programação Web html e estilo CSS.pdf
PW00 - Programação Web html e estilo CSS.pdfPW00 - Programação Web html e estilo CSS.pdf
PW00 - Programação Web html e estilo CSS.pdf
 
Html5 workshop
Html5 workshopHtml5 workshop
Html5 workshop
 
Iniciação em HTML
Iniciação em HTMLIniciação em HTML
Iniciação em HTML
 
CSS3 e Html5 - O que há de novo / parte 1
CSS3 e Html5 - O que há de novo / parte 1CSS3 e Html5 - O que há de novo / parte 1
CSS3 e Html5 - O que há de novo / parte 1
 
Básico em (X)HTML e CSS
Básico em (X)HTML e CSSBásico em (X)HTML e CSS
Básico em (X)HTML e CSS
 
Aula 4 – Linguagem HTML - Imagens e links
Aula 4 – Linguagem HTML - Imagens e linksAula 4 – Linguagem HTML - Imagens e links
Aula 4 – Linguagem HTML - Imagens e links
 
O que é html
O que é htmlO que é html
O que é html
 
Php aula1
Php aula1Php aula1
Php aula1
 
Introdução a desenvolvimento web
Introdução a desenvolvimento webIntrodução a desenvolvimento web
Introdução a desenvolvimento web
 
Htmlbasico
HtmlbasicoHtmlbasico
Htmlbasico
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
 
Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2
 
HTML & CSS - Aula 4
HTML & CSS - Aula 4HTML & CSS - Aula 4
HTML & CSS - Aula 4
 

Último

Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Dirceu Resende
 

Último (11)

ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docxATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
 
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAEAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
 
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docxATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
 
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfFrom_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
 
Entrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiEntrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo Pagliusi
 
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINASCOI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
 
Apostila e caderno de exercicios de WORD
Apostila e caderno de exercicios de  WORDApostila e caderno de exercicios de  WORD
Apostila e caderno de exercicios de WORD
 
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPalestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
 
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
 
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docxATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
 

HTML + CSS

  • 1. HTML + CSS Uma introdução Dep.  Eng.  Informá/ca  -­‐  FCTUC Universidade  de  Verão Julho  de  2010 Pedro  Gaspar TwiGer:  @pedrogaspar Web:  hGp://pedrogaspar.com/
  • 2. O QUE SÃO? HTML CSS Conteúdo Apresentação
  • 3. HTML CSS Conteúdo Propriedades visuais das estruturas definidas Estrutura em HTML Título Título Notícia 1 Menu Menu Notícia 2 Notícia 1 Notícia 3 Notícia 2 3
  • 4. COMO FUNCIONA? Pedidos e Respostas
  • 5. COMO FUNCIONA? Pedidos e Respostas ml .ht in dex T/ GE
  • 6. COMO FUNCIONA? Pedidos e Respostas ml .ht in dex T/ GE
  • 7. COMO FUNCIONA? Pedidos e Respostas ml .ht in dex T/ GE
  • 9. HTML - SINTAXE <p>...</p> <img  src=”...”  />
  • 10. HTML - TAGS COMUNS Parágrafo <p>...</p> Cabeçalhos <h1>...</h1>,  <h2>...</h2>,  etc. Lista <ul>  <li>...</li>  </ul> Imagem <img  src=”...“  /> Link <a  href=”...“>...</a> Bloco <div>...</div>
  • 11. HTML - PARÁGRAFO <p> Texto... Fim. </p>
  • 12. HTML - PARÁGRAFO <p> Texto... Fim. </p> <br  />
  • 13. HTML - TEXTO <p> <i>Itálico</i> <br  /> <small>Pequeno</small> <br  /> <b>Negrito</b> <br  /> <i><b>Composto</b></i> </p>
  • 14. HTML - TEXTO <pre> <i>Itálico</i> <small>Pequeno</small> <b>Negrito</b> <i><b>Composto</b></i> Um  dois          três. </pre>
  • 15. HTML - CABEÇALHOS <h1>O  meu  Livro</h1> <h2>Capítulo  1</h2> <p>...</p> <h2>Capítulo  2</h2> <h3>Capítulo  2.1</h3> <p>...</p> <h3>Capítulo  2.2</h3> <p>...</p> ...
  • 16. HTML - LISTAS <h3>A  Fazer</h3> <ul> <li>Limpar  a  casa</li> <li>Lavar  o  carro</li> <li>Estudar</li> <li>Ir  de  Férias!</li> <li>etc...</li> </ul>
  • 17. HTML - LISTAS <h3>A  Fazer</h3> <ol> <li>Limpar  a  casa</li> <li>Lavar  o  carro</li> <li>Estudar</li> <li>Ir  de  Férias!</li> <li>etc...</li> </ol>
  • 18. HTML - IMAGENS <img  src=”pessoa.png“  /> O atributo src indica o caminho para a imagem a mostrar. Pode mesmo ser um URL.
  • 19. HTML - LINKS <a  href=”hSp://google.pt“> Link  para  o  Google </a> O atributo href indica o URL para onde o link aponta. Pode ser um caminho local.
  • 20. HTML - BLOCOS <div> <p>Texto...</p> </div> O div pode conter qualquer elemento dentro de sí. Principalmente usado através do CSS.
  • 21. HTML - TABELAS <table  border=”1”> <th>Número</th> <th>Nome</th> <tr> <td>1</td> <td>Luís</td> </tr> th - Table Header <tr> <td>2</td> tr - Table Row <td>Armando</td> </tr> td - Table Data </table>
  • 22. HTML - FORMS <form> ... </form> <input  type=”text”  /> <input  type=”password”  /> <input  type=”radio”  /> <input  type=”checkbox”  /> <input  type=”submit”  /> <textarea>  </textarea> <label>Nome:</label>
  • 23. HTML - ESTRUTURA Início do documento <html> Elemento head <head> ... Elemento body </head> <body> ... Tag externa que contém </body> todo o HTML </html>
  • 24. HTML - ESTRUTURA Início do documento <html> Elemento head <head> ... Elemento body </head> Contém tags que dão <body> valor semântico à ... página e que fazem </body> referência a ficheiros </html> com código CSS
  • 25. HTML - ESTRUTURA Início do documento <html> Elemento head <head> ... Elemento body </head> <body> ... Tags de HTML normais </body> </html>
  • 26. CSS
  • 27. CSS - UTILIZAÇÃO Código num ficheiro externo Código no próprio ficheiro HTML Código no atributo style de cada tag
  • 28. CSS - UTILIZAÇÃO Na tag head ficheiro HTML <head> <link  rel=”stylesheet”  type=”text/css”  href=”style.css”/> </head>
  • 29. CSS - SINTAXE h1  {  color:  gray;  font-­‐size:  12px;  } Selector
  • 30. CSS - SINTAXE h1  {  color:  gray;  font-­‐size:  12px;  } Propriedade
  • 31. CSS - SINTAXE h1  {  color:  gray;  font-­‐size:  12px;  } Valor
  • 32. CSS - SINTAXE h1  { color:  gray; font-­‐size:  12px; } p  { font-­‐family:  Arial; }
  • 33. CSS - SINTAXE h1  { color:  gray; font-­‐size:  12px; } p  { font-­‐family:  Arial; }
  • 34. CSS - SELECTORS <div>...</div> HTML <div>...</div> <p>...</p> CSS div  {  ...  }
  • 35. CSS - SELECTORS <div  class=”content”>...</div> HTML <div>...</div> <p  class=”content”>...</p> CSS .content  {  ...  }
  • 36. CSS - SELECTORS <div  class=”content”>...</div> HTML <div>...</div> <p  class=”content”>...</p> CSS div.content  {  ...  }
  • 37. CSS - SELECTORS <div  id=”content”>...</div> HTML <div>...</div> <p  class=”content”>...</p> CSS #content  {  ...  }
  • 39. EX. - BACKGROUND body  {   background-­‐color:  #005e1a; background-­‐image:  url(‘bg.jpg’); CSS background-­‐repeat:  repeat-­‐x; font-­‐family:  Arial; }
  • 40.
  • 41. EX. - CONTAINER <div  id=”site-­‐ftle”> <h1>Um  Blog</h1> </div> HTML <div  id=”container”> ... </div>
  • 42. EX. - CONTAINER #site-­‐/tle  {  text-­‐align:  center;  } #site-­‐/tle  h1  { CSS   color:  white;   font-­‐family:  Arial; }
  • 43.
  • 44. EX. - CONTAINER #container  {   width:  700px;   background-­‐color:  white; CSS   margin:  auto;   margin-­‐boSom:  20px; }
  • 45.
  • 46. EX. - MENU <div  id=”menu”> <ul> <li><a  href=”sobre.html”>Sobre</a></li> HTML   <li><a  href=”fotos.html”>Fotos</a></li> <li><a  href=”hSp://google.com”>Google</a></li> </ul> </div> ... <div  class=”clear”></div>
  • 47. EX. - MENU #menu  {   width:  150px;   float:  lek;   background-­‐color:  #DDD;   border-­‐boSom:  1px  solid  gray; CSS   border-­‐right:  1px  solid  gray;   padding:  1px; } #menu  li  {  list-­‐style:  circle;  } .clear  {  clear:  both;  }
  • 48.
  • 49. EX. - MENU a,  a:visited,  a:link  { text-­‐decorafon:  none; color:  #333; } CSS a:hover  { color:  #777; font-­‐weight:  bold; }
  • 50.
  • 51. EX. - POSTS <div  class=”post”> HTML <p>Texto...</p> ... </div>
  • 52. EX. - POSTS <div  class=”post”> HTML <p>Texto...</p> ... </div> .post  {   margin:  20px  0px  5px  24px;   float:  right; .post  p  { CSS   background-­‐color:  #EEE;   margin:  0px;   color:  #555; }   width:  480px;   padding:  10px; }
  • 54. EXPERIMENTEM hGp://nei.dei.uc.pt/workshop-­‐html-­‐css/ hSp://w3schools.com/ hSp://colourlovers.com/ hSp://www.famfamfam.com/lab/icons/ Google:  “background  gradient”

Notas do Editor