x(html)
(X)HTMLhttp://www.w3schools.com/html/default.asp
(X)HTMLconceitos introdutóriosatualmente um documento HTML é composto por uma série de elementosformatados por CSS.Em HTML...
(X)HTMLconceitos introdutóriosalém disso, o XHTML • é uma linguagem de “marcação” / markup (e não programação!) usada nas ...
(X)HTMLconceitos introdutórios | identação do código
(X)HTMLconceitos introdutóriosum elemento HTML é constituídopreferencialmente por 3 partes • marcador / etiquetas (tags) d...
(X)HTMLconceitos introdutórios | marca de iníciocomo foi referido anteriormente, o marcador de inicio é constituída pelos ...
(X)HTMLconceitos introdutórios | conteúdoconteúdo é basicamente o texto que aparece nas páginas;Pode ser escrito em portug...
(X)HTMLconceitos introdutórios | marca de fima marca de fim serve exclusivamente para indicar que o fim do elemento queestamo...
(X)HTMLconceitos introdutórios | características do XHTMLo XHTML exige uma sintaxe limpa e apresenta as seguintes caracter...
(X)HTMLestrutura da páginaexemplo da estrutura base de um documento HTML:<html>  <head>     ...                           ...
(X)HTMLestrutura da páginaà luz do XHTML, um documento vazio teria então o seguinte aspeto:<!DOCTYPE HTML PUBLIC "-//W3C//...
(X)HTMLestrutura da página | definição do DTDDOCTYPE – O tipo de DTD (document type definition) indica ao browser qual otipo...
(X)HTMLestrutura da página | o cabeçalho | titleo cabeçalho do documento contém diversas informações importantes para ocor...
(X)HTMLestrutura da página | o cabeçalho | metao elemento <meta> é usado para conter meta-informação sobre os conteúdos do...
(X)HTMLestrutura da página | o cabeçalho | exemplo de meta info.<head><meta http-equiv="content-type" content="text/html; ...
(X)HTMLestrutura da página | o cabeçalho | ex. de links declaradosé ainda nesta zona que se definem os links para os ficheir...
(X)HTMLestrutura da página | o corpo (body)o elemento body contêm todos os elementos, atributos e informação que a páginad...
(X)HTMLestrutura da página | os comentárioso elemento <!-- --> permite-nos inserir comentários no código HTML. Oscomentári...
(X)HTMLestrutura da página | elementos do corpo | <h1> ... <h6>títulos (cabeçalhos)existem 6 níveis de títulos (headings)....
(X)HTMLestrutura da página | elementos do corpo | <p>; <br />parágrafo e quebra de linhaparágrafos: delimitam blocos deinf...
(X)HTMLestrutura da página | as réguas horizontais hro elemento hr permite definir réguashorizontais que podem ser usadas p...
(X)HTMLestrutura da página | elementos do corpo | formatação txtnegrito<b>…</b><strong> ... </strong>itálico<i>…</i><em> ....
(X)HTMLestrutura da página | elementos do corpo | formatação txte agora estarão a pensar: e como se formata o tipode letra...
(X)HTMLestrutura da página | elementos do corpo | imagensAs imagens são normalmente usadas inline, ie, inseridas num bloco...
(X)HTMLestrutura da página | elementos do corpo | imagensimagem<img src=“caminho e nome da imagem com aextensão” [alt=”tex...
(X)HTMLestrutura da página | elementos do corpo | imagensimagem<img src=“caminho e nome da imagem com a extensão” />  <p> ...
(X)HTMLestrutura da página | elementos do corpo | image mapsimagem<img src=“caminho e nome da imagem com a extensão” />  <...
(X)HTMLestrutura da página | elementos do corpo | listas numeradaslista<ol>…</ol>elemento de uma lista<li>…</li>  Ex.  <ol...
(X)HTMLestrutura da página | elementos do corpo | listas numeradas  Ex.  <font size=1>  <h4>Lista numeradas:</h4>  <ol>  <...
(X)HTMLestrutura da página | elementos do corpo | listas numeradas  Ex.  <font size=1>  <h4>Lista com letras minusculas:</...
(X)HTMLestrutura da página | elementos do corpo | listas numeradas  Ex.  <font size=1>  <h4>Lista com numeros romanos minu...
(X)HTMLestrutura da página | elementos do corpo | listas n/ numeradaslista<ul>…</ul>elemento de uma lista<li>…</li>  Ex.  ...
(X)HTMLestrutura da página | elementos do corpo | âncorasO elemento a (anchor) define ligações relativas ou absolutas. Ao c...
(X)HTMLestrutura da página | elementos do corpo | âncoras (internas)O elemento a (anchor) define ligações relativas ou abso...
(X)HTMLestrutura da página | elementos do corpo | âncoras (internas)Assim, o link<a href="#topo">Topo</a>remete-nos para o...
(X)HTMLestrutura da página | elementos do corpo | âncoras (externas)hiperligação (link)faz a ligação a outros documentos<a...
(X)HTMLestrutura da página | elementos do corpo | âncoras (externas)hiperligação (link)faz a ligação a outros documentos  ...
(X)HTMLestrutura da página | elementos do corpo | âncoras (externas)a nova página abre na janela atual do navegador. Sedes...
(X)HTMLestrutura da página | elementos do corpo | as tabelasmuitas vezes é usada para estruturar a informaçãotabela<table>...
(X)HTMLestrutura da página | elementos do corpo | as tabelastambém pode ser adicionada uma legenda à tabela<caption>Legend...
(X)HTMLestrutura da página | elementos do corpo | iframesas iframes servem para abriruma janela para outro local (oudocume...
(X)HTMLembeber conteúdos externos | widgets sociais                       youtube.com twitter.com/about/ resources/widgets...
(X)HTMLvalidação do código escritohttp://validator.w3.org
(X)HTMLestrutura da página | formulários
(X)HTMLestrutura da página | formulários                              http://www.w3schools.com/html/html_forms.asp
(X)HTMLestrutura da página | formulários | tags essenciais   •   Dentro do grupo dos formulários, o HTML oferece os seguin...
(X)HTMLestrutura da página | formulários | tags essenciais | form   •   Qualquer formulário criado em HTML é delimitado co...
(X)HTMLestrutura da página | formulários | tags essenciais | input   •   A tag <input type=”text”> desenha uma caixa de te...
(X)HTMLestrutura da página | formulários | tags essenciais | input   •   A tag <input type=”password”> desenha uma caixa d...
(X)HTMLestrutura da página | formulários | tags essenciais | input   •   As tags <input type=”hidden”> criam um campo cujo...
(X)HTMLestrutura da página | formulários | tags essenciais | input   •   A tag <input type=”checkbox”> criam uma caixa cuj...
(X)HTMLestrutura da página | formulários | tags essenciais | input   •   A tag <input type=”radio”> criam uma caixa cujo v...
(X)HTMLestrutura da página | formulários | tags essenciais | input   •   A tag <input type=”file”> desenha uma caixa que pe...
(X)HTMLestrutura da página | formulários | tags essenciais | input   •   As tags <input type=”submit”> e <input type=”rese...
(X)HTMLestrutura da página | formulários | tags essenciais | select   •   A tag <select> criam uma caixa se listagem capaz...
(X)HTMLestrutura da página | formulários | tags essenciais | textarea   •   Ao contrário da tag <input type=”text”> que cr...
(X)HTMLestrutura da página | formulários | tags essenciais | label   •   A tag <label> cria um rótulo para o campo de inpu...
(X)HTMLestrutura da página | formulários | tags essenciais | fieldset   •   A tag <fieldset> desenha uma moldura em volta de...
(X)HTMLreferências • cheat sheet de HTML:   http://elearning.esev.ipv.pt/moodle1112/file.php/613/html/html-cheat-sheet.pdf
(X)HTMLreferências • http://www.w3schools.com/html • http://www.leonelcunha.net/aulas12p/recursos/ppm_2_XHTML_CSS.pdf • tu...
o futuro?
HTML5http://www.w3schools.com/html5/html5_reference.asp                            CSS3                 http://html5-showc...
Curso de XHTML
Próximos SlideShares
Carregando em…5
×

Curso de XHTML

2.325 visualizações

Publicada em

Publicada em: Educação
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
2.325
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
72
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Curso de XHTML

  1. 1. x(html)
  2. 2. (X)HTMLhttp://www.w3schools.com/html/default.asp
  3. 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. 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. 5. (X)HTMLconceitos introdutórios | identação do código
  6. 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. 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. 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. 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. 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. 11. (X)HTMLestrutura da páginaexemplo da estrutura base de um documento HTML:<html> <head> ... cabeçalho </head> <body> corpo ... </body></html>
  12. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 44. (X)HTMLvalidação do código escritohttp://validator.w3.org
  45. 45. (X)HTMLestrutura da página | formulários
  46. 46. (X)HTMLestrutura da página | formulários http://www.w3schools.com/html/html_forms.asp
  47. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 60. (X)HTMLreferências • cheat sheet de HTML: http://elearning.esev.ipv.pt/moodle1112/file.php/613/html/html-cheat-sheet.pdf
  61. 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. 62. o futuro?
  63. 63. HTML5http://www.w3schools.com/html5/html5_reference.asp CSS3 http://html5-showcase.com/

×