• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML&CSS 2 - Intermediate HTML
 

HTML&CSS 2 - Intermediate HTML

on

  • 1,123 views

Slides for my in-house HTML & CSS trainning at SAPO.

Slides for my in-house HTML & CSS trainning at SAPO.

Tables, forms (the basics), more semantic HTML elements, presentational elements to avoid, generic containers, validation.

Statistics

Views

Total Views
1,123
Views on SlideShare
1,119
Embed Views
4

Actions

Likes
2
Downloads
124
Comments
1

2 Embeds 4

http://www.linkedin.com 2
http://drive-html-viewer.pansy.at 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

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

    HTML&CSS 2 - Intermediate HTML HTML&CSS 2 - Intermediate HTML Presentation Transcript

    • HTML 2& CSSDINIS CORREIA 2011 cbn
    • HISTÓRIAESTRUTURASINTAXEDOCTYPE (X)HTMLELEMENTOS
    • HISTÓRIAESTRUTURASINTAXEDOCTYPE (X)HTMLELEMENTOS
    • HTML VS. XHTML
    • HTML XHTML <P  class=RESUMO> <p  class="resumo"> Um  parágrafo.</P> Um  parágrafo.</p><img  SRC=foto.jpg  alt=""> <img  src="foto.jpg"  alt=""  />
    • HTML XHTML <p  class="resumo"> <p  class="resumo"> Um  parágrafo.</p> Um  parágrafo.</p><img  src="foto.jpg"  alt=""> <img  src="foto.jpg"  alt=""  />
    • (X)HTML
    • HTML XHTML<!DOCTYPE  HTML  PUBLIC  "-­‐//W3C//DTD  HTML   <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  4.01//EN" 1.0  Strict//EN"  "http://www.w3.org/TR/html4/strict.dtd"> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐ strict.dtd"><!DOCTYPE  HTML  PUBLIC  "-­‐//W3C//DTD  HTML   <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  4.01  Transitional//EN"   1.0  Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd"> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐ transitional.dtd"><!DOCTYPE  HTML  PUBLIC  "-­‐//W3C//DTD  HTML   <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  4.01  Frameset//EN"   1.0  Frameset//EN"  "http://www.w3.org/TR/html4/frameset.dtd"> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐ frameset.dtd">
    • http://bit.ly/html_doctype
    • HTML5<!doctype  html>
    • ELEMENTOS
    • PARÁGRAFOS p TÍTULOS h1  h2  ...  h6 LISTAS ol  ul  dl ÊNFASE em  strong CITAÇÕES blockquote  q IMAGENS img LINKS a TABELAS table
    • TABELAS table
    • <table> <tr> <td>Nome  do  rio</td> <td>Comprimento</td> <td>Nascente</td> </tr> <tr> <td>Tejo</td> <td>1007  km</td> <td>Espanha</td> </tr> <tr> <td>Douro</td> <td>850  km</td> <td>Espanha</td> </tr> <tr> <td>Sado</td> <td>180  km</td> <td>Portugal</td> </tr></table>
    • <table> <tr> <td>Nome  do  rio</td> <td>Comprimento</td> <td>Nascente</td> </tr> <tr> <td>Tejo</td> <td>1007  km</td> <td>Espanha</td> </tr> <tr> <td>Douro</td> <td>850  km</td> <td>Espanha</td> </tr> <tr> <td>Sado</td> <td>180  km</td> <td>Portugal</td> </tr></table>
    • <table> <caption>Rios  de  Portugal</caption> <tr> <th>Nome  do  rio</th> <th>Comprimento</th> <th>Nascente</th> </tr> <tr> <td>Tejo</td> <td>1007  km</td> <td>Espanha</td> </tr> <tr> <td>Douro</td> <td>850  km</td> <td>Espanha</td> </tr> <tr> <td>Sado</td> <td>180  km</td> <td>Portugal</td> </tr></table>
    • <table  summary="Resumo  do  principais  rios  de  Portugal"> <caption>Rios  de  Portugal</caption> <thead> <tr> <th  scope="col">Nome  do  rio</th> <th  scope="col">Comprimento</th> <th  scope="col">Nascente</th> </tr> </thead> <tfoot> <tr> <td  colspan="3">Dados  de  2009.</td> </tr> </tfoot> <tbody> <tr> <th  scope="row">Tejo</th> <td>1007  km</td> <td>Espanha</td> </tr> <tr> <th  scope="row">Douro</th> <td>850  km</td> <td>Espanha</td> </tr> <tr> <th  scope="row">Sado</th> <td>180  km</td> <td>Portugal</td> </tr> </tbody></table>
    • FORMULÁRIOS form
    • <form> Nome:  <input  type="text"  name="nome"  id="nome"  value=""> Email:  <input  type="text"  name="email"  id="email"  value=""> Comentário:  <textarea  name="comentario"  id="comentario"  cols="25"   rows="3"></textarea> <input  type="submit"  value="enviar"></form>
    • <form> Nome:  <input  type="text"  name="nome"  id="nome"  value=""> Email:  <input  type="text"  name="email"  id="email"  value=""> Comentário:  <textarea  name="comentario"  id="comentario"  cols="25"   rows="3"></textarea> <input  type="submit"  value="enviar"></form>
    • <form> Nome:  <input  type="text"  name="nome"  id="nome"  value=""> Email:  <input  type="text"  name="email"  id="email"  value=""> Comentário:  <textarea  name="comentario"  id="comentario"  cols="25"   rows="3"></textarea> <input  type="submit"  value="enviar"></form>
    • <form> Nome:  <input  type="text"  name="nome"  id="nome"  value=""> Email:  <input  type="text"  name="email"  id="email"  value=""> Comentário:  <textarea  name="comentario"  id="comentario"  cols="25"   rows="3"></textarea> <input  type="submit"  value="enviar"></form>
    • <form> Nome:  <input  type="text"  name="nome"  id="nome"  value=""> Email:  <input  type="text"  name="email"  id="email"  value=""> Comentário:  <textarea  name="comentario"  id="comentario"  cols="25"   rows="3"></textarea> <input  type="submit"  value="enviar"></form>
    • <input  type="text"> <input  type="button"><input  type="password"><input  type="checkbox"> <input  type="file"> <input  type="hidden"> <input  type="image"> <input  type="radio"> <input  type="reset"> <input  type="submit">
    • <form  action="script.php"  method="post"> <p> <label  for="nome">Nome:</label> <input  type="text"  name="nome"  id="nome"  value=""  /> </p> <p> <label  for="email">Email:</label> <input  type="text"  name="email"  id="email"  value=""  /> </li> <p> <label  for="comentario">Comentário:</label> <textarea  name="comentario"  id="comentario"  cols="25"   rows="3"></textarea> </p> <p> <input  type="submit"  value="submit"  /> <input  type="reset"  value="reset"  /> </p></form>
    • MAIS ELEMENTOS
    • AUTORaddress
    • <address> <span>Dinis  Correia</span>,   <span  class="email">dinis.correia@co.sapo.pt</span></address>
    • CÓDIGOpre  code  var
    • <p>A  função  <code>run()</code>  em  JavaScript</p>
    • <p>A  função  <code>run()</code>  em  JavaScript</p><pre> <code> sub  slurp  {    my  $filename  =  foo;    my  $file          =  new  $filename;                                    if  (  defined  $file  )  {        return  <$file>;    }    return  bar; }; </code></pre>
    • <p>A  função  <code>run()</code>  em  JavaScript</p><pre> <code> sub  slurp  {    my  $filename  =  foo;    my  $file          =  new  $filename;                                    if  (  defined  $file  )  {        return  <$file>;    }    return  bar; }; </code></pre><p>O  valor  de  <var>x</var>  é  2.</p>
    • ABREVIATURAS abbr    acronym
    • <p>Estamos  a  aprender  <abbr  title="Hypertext  Markup  Language">HTML</abbr>.</p>
    • <p>Conferência  da  <acronym  title="Organização  das  Nações  Unidas">ONU</acronym>  chamada  a  fixar  novos  objectivos</p>
    • DEFINIÇÕES dfn
    • <p><dfn>HTML</dfn>:  O  HTML  é  a  linguagem  usada  para  descrever  o  conteúdo  das  páginas  web.</p>
    • SUBSCRITO,SOBRESCRITO sub    sup
    • <p>A  fórmula  química  da  água  é  H<sub>2</sub>O.</p>
    • QUEBRAS DE LINHA br
    • <p> Rua  das  Descobertas,  3<br> 1200-­‐000  Lisboa</p>
    • ALTERAÇÕES del    ins
    • <p>O  Presidente  da  República,  Mário  Soares,  anunciou...</p>
    • <p>O  Presidente  da  República,  <del>Mário  Soares</del>,  anunciou...</p>
    • <p>O  Presidente  da  República,  <del>Mário  Soares</del>  <ins>Aníbal  Cavaco  Silva</ins>,  anunciou...</p>
    • A NÃO USAR...
    • FOTO DE THOMAS HAWK c HTTP://FLIC.KR/P/3CYZH
    • font b s  strike uMUITOS OUTROS...
    • font CSS b strong  ems  strike del  ins u CSS
    • CONTAINERS div    span
    • <p>Estamos  fartos  de  jobs  for  the  boys,  sublinhou  Francisco  Louçã.</p>
    • <p>Estamos  fartos  de  <span  lang="en">jobs  for  the  boys</span>,  sublinhou  Francisco  Louçã.</p>
    • <p><q>Estamos  fartos  de  <span  lang="en">jobs  for  the  boys</span></q>,  sublinhou  Francisco  Louçã.</p>
    • <div  id="container">        <ul  class="nav">            ...        </ul>                  <div  id="login">            ...        </div>        <div  id="conteudo"> ...        </div>        <div  id="extras">            ...        </div>        <div  id="rodape">            ...        </div>  </div>
    • "DIV-ITIS"FOTO DE D. SHARON PRUITT c HTTP://FLIC.KR/P/76TB38
    • VALIDAÇÃO
    • http://validator.w3.org
    • <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  1.0  Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐strict.dtd"><html  xmlns="http://www.w3.org/1999/xhtml"  lang="en">    <head>        <title>Validar  o  HTML</title>    </head>    <body>        <h2>Cavaco  Silva  recusa  falar  sobre  FMI</h2>        <p>O  actual  Presidente  da  República  não  quis  prestar  declarações  por  <a  href="http://sapo.pt/"  colspan="3">ser  domingo</a>.</p>                <h3>Eleições</h3>        <p>Cavaco  fazia  continua  em  campanha  para  as  eleições  presidenciais.                <h3>Campanha</h3>        <p>Saiba  por  onde  ainda  vai  passar  Cavaco  Silva:</p>        <ul>            <li>Maia</li>            <li>Coimbra</li>            <li>Silves<li>            <li>Freixo  de  Espada  à  Cinta</li>        </ul>    </body>
    • EXERCÍCIO