Your SlideShare is downloading. ×
  • Like
Curso de XHTML
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

Curso de XHTML

  • 2,023 views
Published

 

Published in Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,023
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
64
Comments
0
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. x(html)
  • 2. (X)HTMLhttp://www.w3schools.com/html/default.asp
  • 3. (X)HTMLconceitos introdutóriosatualmente um documento HTML é composto por uma série de elementosformatados por CSS.Em HTML (normalmente referimos como HTML o que é XHTML) existe uma claradistinção entre estrutura e forma.O XHTML é uma versão mais restrita e limpa do HTML e é definido como umaaplicação XML. O XHTML é uma combinação de HTML com XML, uma depuraçãodo HTML tendo em conta a organização estrutural do XML.
  • 4. (X)HTMLconceitos introdutóriosalém disso, o XHTML • é uma linguagem de “marcação” / markup (e não programação!) usada nas páginas da web; • os documentos são escritos apenas com texto; • cada página é um ficheiro que tem a extensão .htm (ou .html); • o nome do ficheiro tem de ser em minúsculas, sem acentos e sem espaços (tal como todos os ficheiros utilizados no projeto web tais como imagens, scripts, pastas, etc...).
  • 5. (X)HTMLconceitos introdutórios | identação do código
  • 6. (X)HTMLconceitos introdutóriosum elemento HTML é constituídopreferencialmente por 3 partes • marcador / etiquetas (tags) de inicio constituída pelos símbolos < e > e uma palavra reservada (p, elemento form, img, etc...) • um conteúdo <p> html </p> • marcador (tags) de fim <marcador de início> conteúdo </marcador de fim>
  • 7. (X)HTMLconceitos introdutórios | marca de iníciocomo foi referido anteriormente, o marcador de inicio é constituída pelos símbolos< e > e uma palavra reservada. <marcador de início> conteúdo </marcador de fim>exemplo:<a><p>No entanto, alguns têm ainda atributos que o personalizam ou complementam eque podem ser obrigatórios ou opcionais. O seu valor é colocado entre aspas.exemplos:<a href=”index.htm”> <img src=”test.jpg”> <div id=”intro”> <marcador de início atributo=””> conteúdo </marcador de fim>
  • 8. (X)HTMLconceitos introdutórios | conteúdoconteúdo é basicamente o texto que aparece nas páginas;Pode ser escrito em português, com maiúsculas, minúsculas, acentos e espaços <marcador de início> conteúdo </marcador de fim>
  • 9. (X)HTMLconceitos introdutórios | marca de fima marca de fim serve exclusivamente para indicar que o fim do elemento queestamos a utilizarUsa-se o sinal /Por exemplo: </p> </table> <marcador de início> conteúdo </marcador de fim>
  • 10. (X)HTMLconceitos introdutórios | características do XHTMLo XHTML exige uma sintaxe limpa e apresenta as seguintes características: • Os elementos têm que ser claramente aninhados (nested) da seguinte forma:<b><i> Isto é um texto a bold e itálico </i></b>e não desta<b><i> Este é um texto a bod e itálico </b></i> • Os seus elementos devem ser sempre fechados<p>Isto é um parágrafo</p> • Os elementos vazios, também, devem ser fechados e com um espaço extraantes da barra<br /> <hr /> <img src="imagem.jpg" /> • Os seus elementos devem ser sempre em minúsculas
  • 11. (X)HTMLestrutura da páginaexemplo da estrutura base de um documento HTML:<html> <head> ... cabeçalho </head> <body> corpo ... </body></html>
  • 12. (X)HTMLestrutura da páginaà luz do XHTML, um documento vazio teria então o seguinte aspeto:<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""www.w3.org—xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> .... cabeçalho </head> <body> .... corpo </body></html>
  • 13. (X)HTMLestrutura da página | definição do DTDDOCTYPE – O tipo de DTD (document type definition) indica ao browser qual otipo de marcação que está a ser usada e um link para o documento.Por defeito pomos a última mais usada:<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""www.w3.org—xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
  • 14. (X)HTMLestrutura da página | o cabeçalho | titleo cabeçalho do documento contém diversas informações importantes para ocorreto funcionamento e formatação do conteúdo do documento (pode serentendido como os bastidores do palco principal).Por exemplo, é nesta área que se define o titulo que aparece na barra superior donavegador (ou mais recentemente, no separador). De que forma? Recorrendo àetiqueta <title>Ex.<title> atelier de multimédia </title>
  • 15. (X)HTMLestrutura da página | o cabeçalho | metao elemento <meta> é usado para conter meta-informação sobre os conteúdos dodocumento, de forma a que os mecanismos de pesquisa possam mais facilmenteidentificar e catalogar os documentos encontrados. • keywords (palavras chave para os motores de busca) • tipo de conteúdos e de linguagem • tipo de codificação dos caracteres • autor • descrição da página • tempo de atualização automática • entre outros...
  • 16. (X)HTMLestrutura da página | o cabeçalho | exemplo de meta info.<head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>atelier de multimédia</title><meta name="author" content=“marco pinheiro"><meta name="description" content=“página da uc"><meta name="keywords" content=“palavras chave, separadas, por, virgulas"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/><link rel="StyleSheet" href="stylesheet.css" type="text/css"media="all" /><script type="text/javascript" src="javascriptfile.js"></script></head>
  • 17. (X)HTMLestrutura da página | o cabeçalho | ex. de links declaradosé ainda nesta zona que se definem os links para os ficheiros externos.<head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>atelier de multimédia</title><meta name="author" content=“marco pinheiro"><meta name="description" content=“página da uc"><meta name="keywords" content=“palavras chave, separadas, por, virgulas"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/><link rel="StyleSheet" href="stylesheet.css" type="text/css"media="all" /><script type="text/javascript" src="javascriptfile.js"></script></head>
  • 18. (X)HTMLestrutura da página | o corpo (body)o elemento body contêm todos os elementos, atributos e informação que a páginadeve apresentar ao leitor.O elemento body deve ser composto depois do elemento head e antes da tag defecho do elemento html:...<body> Todos os conteúdos do documento XHTML.</body>...
  • 19. (X)HTMLestrutura da página | os comentárioso elemento <!-- --> permite-nos inserir comentários no código HTML. Oscomentários não são lidos pelo browser, embora sejam visíveis na source dodocumento. <!—Isto é um comentário num doc. XHTML -->
  • 20. (X)HTMLestrutura da página | elementos do corpo | <h1> ... <h6>títulos (cabeçalhos)existem 6 níveis de títulos (headings).o nível de importância é definido por umnúmero entre 1 e 6.o mais importante será o <h1> e o menosimportante o <h6>. Esta importância Ex. <h1>Mais importante</h1> <h2>2º mais importante</h2> <h6>Último</h6>
  • 21. (X)HTMLestrutura da página | elementos do corpo | <p>; <br />parágrafo e quebra de linhaparágrafos: delimitam blocos deinformação<p> conteúdo do parágrafo </p>quebra de linha:<br />(elemento que não precisa demarca do fim)Ex.<p> Em OM temos três áreas: HTML, CSSe Drupal. A UC tem 60 horas. <br /> Odocente é o Marco Pinheiro, quer gostemquer não!</p>
  • 22. (X)HTMLestrutura da página | as réguas horizontais hro elemento hr permite definir réguashorizontais que podem ser usadas paraquebrar textos longos ou para estruturarmelhor um documento.o elemento hr é um elemento vazio, logo,não tem tag de fecho, devendo ser fechadona tag de abertura, precedida de um espaço.<p>Textos muito longos podem ser divididos emsecções com headings ou, em alternativa,réguas horizontais</p> <hr /> <h3>Um headingtambém quebra o texto.</h3> <p>Podendo um novotexto começar imediatamente a seguir.</p>As réguas são formatadas por defeito a todaa largura da janela do documento, comsombreado.
  • 23. (X)HTMLestrutura da página | elementos do corpo | formatação txtnegrito<b>…</b><strong> ... </strong>itálico<i>…</i><em> ... </em>sublinhado (underline)<u>…</u> Ex. <p> Em OM temos três áreas: <b>HTML, CSS e Drupal</b>. A <i>UC</i> tem 60 horas. <br /> O docente é o <u>Marco Pinheiro</u>, quer gostem quer não!</p>
  • 24. (X)HTMLestrutura da página | elementos do corpo | formatação txte agora estarão a pensar: e como se formata o tipode letra, tamanho, cor, etc.? >> CSS (mais adiante).
  • 25. (X)HTMLestrutura da página | elementos do corpo | imagensAs imagens são normalmente usadas inline, ie, inseridas num bloco de texto.O elemento img é sempre usado com o atributo src (source) que aponta para a urlda imagem, no servidor que aloja o documento html ou outro e com o atributo alt,que fornece uma descrição em texto da imagem. O elemento img é um elementovazio, devendo portanto ser sempre fechado com />.O atributo alt permite que os browsers possam apresentar texto em lugar daimagem caso o suporte de imagens esteja desligado, o browser apenas suportetexto, enquanto a imagem é carregada, ou se a imagem estiver, por alguma razão,inacessível.As imagens são dimensionadas automaticamente pelo browser quando carregadas.Contudo, em documentos complexos, por vezes é recomendável utilizar também osatributos width e height para indicar ao browser a dimensão das mesmas, de formaa que a página possa ser formatada mesmo que estas estejam inacessíveis oudemorem mais tempo a carregar.
  • 26. (X)HTMLestrutura da página | elementos do corpo | imagensimagem<img src=“caminho e nome da imagem com aextensão” [alt=”texto alternativo”] [width=”largura”][height=”altura”] /> <img src=“logotipo.jpg” />nota: ter em atenção que o caminho e o nome do ficheiroda imagem têm de ser escritos partindo do ponto de partidado documento; ou seja, se a imagem estiver na directoriado documento HTML só se escreve o nome do ficheiro. Seestiver noutra directoria temos de seguir os mesmocuidados que nas hiperligaçõesmais uma vez: usar minúsculas, não usar acentos eespaços nos nomes das imagens!
  • 27. (X)HTMLestrutura da página | elementos do corpo | imagensimagem<img src=“caminho e nome da imagem com a extensão” /> <p> Uma imagem com o tamanho real: <img src="http://meusregistros.pbwiki.com/f/ grav_criancas_sala_de_aula2.jpg" /> </p>no caso de se pretender apresentar a imagem com dimensões diferentes dooriginal, poderão ser utilizadas as propriedades width (largura) e height(altura) e especificar a medida (em píxeis). <p>Uma imagem com 48 pixeis de comprimento e 48 pixeis de altura <img src="http://meusregistros.pbwiki.com/f/grav_criancas_sala_de_aula2.jpg" width="48" height="48" /> </p> <p>Uma imagem com 148 pixeis de comprimento e 48 pixeis de altura <img src="http://meusregistros.pbwiki.com/f/grav_criancas_sala_de_aula2.jpg" width="148" height="48" /> </p> (nota: caso não se especifique uma destas duas propriedades, o redimensionamento será feito de forma proporcional, o que é bastante útil)
  • 28. (X)HTMLestrutura da página | elementos do corpo | image mapsimagem<img src=“caminho e nome da imagem com a extensão” /> <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" /> <map name="planetmap">   <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sol" />   <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercúrio" />   <area shape="circle" coords="124,58,8" href="venus.htm" alt="Vénus" /> </map>uma vez que a tarefa pode tornar-se demorada, existem diversas ferramentas queajudam a fazer esta tarefa: • http://www.maschek.hu/imagemap/imgmap • editores de html (dreamweaver, kompozer, etc.)
  • 29. (X)HTMLestrutura da página | elementos do corpo | listas numeradaslista<ol>…</ol>elemento de uma lista<li>…</li> Ex. <ol> <li>Informatica</li> <li>Fotografia</li> <li>Video</li> </ol>
  • 30. (X)HTMLestrutura da página | elementos do corpo | listas numeradas Ex. <font size=1> <h4>Lista numeradas:</h4> <ol> <li>Maças</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol> <h4>Lista com letras:</h4> <ol type="A"> <li>Maças</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol> ...
  • 31. (X)HTMLestrutura da página | elementos do corpo | listas numeradas Ex. <font size=1> <h4>Lista com letras minusculas:</h4> <ol type="a"> <li>Maças</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol> <h4>Lista com numeros romanos:</h4> <ol type="I"> <li>Maças</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol> ...
  • 32. (X)HTMLestrutura da página | elementos do corpo | listas numeradas Ex. <font size=1> <h4>Lista com numeros romanos minusculos:</h4> <ol type="i"> <li>Maças</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol> </font>
  • 33. (X)HTMLestrutura da página | elementos do corpo | listas n/ numeradaslista<ul>…</ul>elemento de uma lista<li>…</li> Ex. <ul> <li>Informatica</li> <li>Fotografia</li> <li>Video</li> </ul>
  • 34. (X)HTMLestrutura da página | elementos do corpo | âncorasO elemento a (anchor) define ligações relativas ou absolutas. Ao contrário da maiorparte dos elementos, o elemento a requer sempre ou o atributo href ou o atributoname.<a href=”documento”> descrição </a><a name=”zona1”> descrição </a>
  • 35. (X)HTMLestrutura da página | elementos do corpo | âncoras (internas)O elemento a (anchor) define ligações relativas ou absolutas. Ao contrário da maiorparte dos elementos, o elemento a requer sempre ou o atributo href ou o atributoname.O atributo name permite que secções de um documento XHTML sejam rotuladascom uma referência específica. O atributo name permite criar links para umasecção específica dentro do documento. Assim, se tivermos um documento longopodemos criar dentro do documento um link para o topo, por exemplo.A utilização deste elemento apenas com o atributo name não resulta na criação deum link visível mas sim na marcação de um alvo para criação de links.
  • 36. (X)HTMLestrutura da página | elementos do corpo | âncoras (internas)Assim, o link<a href="#topo">Topo</a>remete-nos para o topo desta página. Quando os links são feitos dentro de ummesmo documento, devemos sempre especificar o name com #,<a name=”topo”> bla bla bla </a>mesmo quando queremos linkar ao topo do documento (e neste caso deveremoscriar um name no topo), caso contrário, especificando apenas o nome dodocumento, faremos com que o browser recarregue a página.
  • 37. (X)HTMLestrutura da página | elementos do corpo | âncoras (externas)hiperligação (link)faz a ligação a outros documentos<a href=”documento”> descrição </a> Ex. <p>Já passaste pelo <a href="http:// elearning.esev.ipv.pt/moodle1112/course/view.php? id=613">Moodle de OM</a>? É bastante útil!</p>
  • 38. (X)HTMLestrutura da página | elementos do corpo | âncoras (externas)hiperligação (link)faz a ligação a outros documentos Ex. Ligação de um ficheiro que está em w:tmficheiro1.htm para um que está em w:tmficheiro2.htm <a href=“ficheiro2.htm>…</a> Ligação de um ficheiro que está em w:tmficheiro1.htm para um que está em w:tmteorica ficheiro2.htm <a href=“teorica/ficheiro2.htm>…</a> Ligação de um ficheiro que está em w:tmficheiro1.htm para um que está em w:hjficheiro2.htm <a href=“../hj/ficheiro2.htm>…</a>
  • 39. (X)HTMLestrutura da página | elementos do corpo | âncoras (externas)a nova página abre na janela atual do navegador. Sedesejarmos abrir uma nova janela em cima da jáaberta, utilizar o atributo target=”_BLANK” <a href=”documento” target=”_BLANK”> descrição </a>pode e deve ainda ser adicionada descrição àhiperligação recorrendo ao atributo title <a href=”documento” target=”_BLANK” title=”clique para aceder à nossa unidade curricular”> descrição </a>
  • 40. (X)HTMLestrutura da página | elementos do corpo | as tabelasmuitas vezes é usada para estruturar a informaçãotabela<table>…</table>linha (table row)<tr>…</tr>célula (table data)<td>…</td> (no caso de ser a primeira linha: <th> ... </th> - cabeçalho) <table border=“2”> <tr> <th>título 1</th> <th>título 2</th> </tr> <tr> <td>Célula da 2ª linha e 1ª Coluna</td> <td>Célula da 2ª linha e 2ª Coluna</td> </tr> </table>
  • 41. (X)HTMLestrutura da página | elementos do corpo | as tabelastambém pode ser adicionada uma legenda à tabela<caption>Legenda</caption>Ex. <h4> Esta tabela tem legenda e borda de 6: </h4> <table border="6"> <caption>Legenda da tabela...</caption> <tr> <th>tit1</th> <th>tit2</th> <th>tit3</th> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>
  • 42. (X)HTMLestrutura da página | elementos do corpo | iframesas iframes servem para abriruma janela para outro local (oudocumento) dentro do própriodocumento. É como que uma“janela” para outro local!<iframe src="URL"></iframe>Ex. <iframe src="demo_iframe.htm" width="200" height="200"></ iframe>
  • 43. (X)HTMLembeber conteúdos externos | widgets sociais youtube.com twitter.com/about/ resources/widgets/ http://web.appstorm.net/how-to/social-media-how-to/6- tools-to-create-a-google-plus-profile-widget-for-your-site/ http://developers.facebook.com/docs/plugins/
  • 44. (X)HTMLvalidação do código escritohttp://validator.w3.org
  • 45. (X)HTMLestrutura da página | formulários
  • 46. (X)HTMLestrutura da página | formulários http://www.w3schools.com/html/html_forms.asp
  • 47. (X)HTMLestrutura da página | formulários | tags essenciais • Dentro do grupo dos formulários, o HTML oferece os seguintes elementos: • Input • text fields (caixa de input de uma linha) • file fields • checkbox (liga/desliga) • buttons (submit / reset) • radio (caixa de opção) • hidden fields (campos oculos) • textareas (áreas de texto) • select (caixas de combinação / listagem) • fieldset’s (delimitação e agrupamento de campos)
  • 48. (X)HTMLestrutura da página | formulários | tags essenciais | form • Qualquer formulário criado em HTML é delimitado com as tags <form> (e </form>...) • A tag form tem as seguintes propriedades: • action - ficheiro que irá receber / processar os dados • method - tipo de envio (GET ou POST) • enctype - tipo de dados a ser enviado pode ser de dois tipos: • application/x-www-form-urlencoded - envio apenas de texto • multipart/form-data - envio de texto / ficheiro (binário) Ex. upload de uma foto, documento, etc. • Ex. <form action="formProcessa.php" method="post" enctype="application/x-www-form-urlencoded" name=”formulario”>
  • 49. (X)HTMLestrutura da página | formulários | tags essenciais | input • A tag <input type=”text”> desenha uma caixa de texto • Tem a seguinte propriedade: • size - número de caracteres que mostrará antes de desaparecerem • Ex. <input type="text" size="45" name="nome">
  • 50. (X)HTMLestrutura da página | formulários | tags essenciais | input • A tag <input type=”password”> desenha uma caixa de texto • Tem a seguinte propriedade: • size - número de caracteres que mostrará antes de desaparecerem • Ex. <input type="password" name="passwd" size="45">
  • 51. (X)HTMLestrutura da página | formulários | tags essenciais | input • As tags <input type=”hidden”> criam um campo cujo valor é definido apenas no código html e como tal, nunca aparecerá desenhado junto dos outros campos. • Obs. se o utilizador tiver curiosidade e for ver o código fonte da página, terá acesso ao valor declarado no mesmo! • Ex. <input type="hidden" name="escondido" value="192.168.1.1">
  • 52. (X)HTMLestrutura da página | formulários | tags essenciais | input • A tag <input type=”checkbox”> criam uma caixa cujo valor será de uma lógica booleana, ou seja, sim ou não • Caso o utilizador active esta caixa, será enviado para o servidor o valor atribuido à mesma (value). Caso contrário, a variável é passada para o servidor com valor nulo • Caso o programador queira ter a caixa activada de forma predefinida, deverá adicionar a propriedade checked com o valor checked • Ex. <input type="checkbox" name="aceita" value="sim" checked="checked">
  • 53. (X)HTMLestrutura da página | formulários | tags essenciais | input • A tag <input type=”radio”> criam uma caixa cujo valor será de uma lógica booleana, ou seja, sim ou não • Caso o programador queira ter a caixa activada de forma predefinida, deverá adicionar a propriedade checked. Nota importante: Se for dado o mesmo nome às tags (neste caso - prato), o utilizador pode apenas escolher uma opção! Caso contrário, poderia activar diversas tags radio. • Exemplos: <label>Peixe<input type="radio" name="prato" value="Peixe" checked></label> <label>Carne<input type="radio" name="prato" value="Carne"></label> <label>Salada<input type="radio" name="prato" value="Salada"></label>
  • 54. (X)HTMLestrutura da página | formulários | tags essenciais | input • A tag <input type=”file”> desenha uma caixa que permite seleccionar um ficheiro do computador do cliente (que mais tarde será enviado para o servidor) • Ex. <input type="file" name="foto" >
  • 55. (X)HTMLestrutura da página | formulários | tags essenciais | input • As tags <input type=”submit”> e <input type=”reset”> desenham um botão no formulário • A única diferença entre eles é apenas o fim a que se destinam. • reset - limpa todos os campos que constam do formulário • submit - envia os dados do formulário para o servidor para ser processado • Ex. <input type="submit" name=”bt_encomenda” value=”Encomendar”> • Ex. <input type="reset" name=”bt_reseta” value=”Limpar campos”>
  • 56. (X)HTMLestrutura da página | formulários | tags essenciais | select • A tag <select> criam uma caixa se listagem capaz de mostrar diversos valores sempre que o utilizar clicar na mesma. • Só será enviado para o servidor a opção seleccionada pelo utilizador. • Exemplo: <select name="sexo"> <option value="Masc" selected>M</option> <option value="Fem">F</option> <option value="Hibrido">H</option> </select>
  • 57. (X)HTMLestrutura da página | formulários | tags essenciais | textarea • Ao contrário da tag <input type=”text”> que cria uma caixa de uma só linha, a tag <textarea> permite que o utilizador tenha uma caixa de introdução de dados mas desta feita com várias linhas ao seu dispor. • Tem as seguintes propriedades: • cols - número de caracteres que mostrará em largura !! ao contrário das outras caixas de input, esta tag necessita ser • rows - número de linhas que a caixa terá fechada! • Ex. <textarea cols="50" rows="5" name="mensagem"> </textarea>
  • 58. (X)HTMLestrutura da página | formulários | tags essenciais | label • A tag <label> cria um rótulo para o campo de input de forma a que o utilizador tenha conhecimento do que se pretende com o mesmo. • Ex. <label> nome do utilizador <input type="text" name="nomeUser"> </label>
  • 59. (X)HTMLestrutura da página | formulários | tags essenciais | fieldset • A tag <fieldset> desenha uma moldura em volta de um ou vários campos do formulário de forma a agrupá-los visualmente com uma moldura em torno dos mesmos; • Acrescenta ainda uma pequena legenda que descreve o “tema” a que os campos se referem. • Ex. <fieldset><legend>dados profissionais</legend> ... (campos aqui!) ... </fieldset>
  • 60. (X)HTMLreferências • cheat sheet de HTML: http://elearning.esev.ipv.pt/moodle1112/file.php/613/html/html-cheat-sheet.pdf
  • 61. (X)HTMLreferências • http://www.w3schools.com/html • http://www.leonelcunha.net/aulas12p/recursos/ppm_2_XHTML_CSS.pdf • tutoriais vídeo: • http://www.guanabara.info/category/lp/html/
  • 62. o futuro?
  • 63. HTML5http://www.w3schools.com/html5/html5_reference.asp CSS3 http://html5-showcase.com/