Unb 2012.1 - dweb - 04 - html5 básico - parte ii

  • 291 views
Uploaded on

 

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

Views

Total Views
291
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
8
Comments
0
Likes
0

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. Curso Superior de Tecnologia em Design GráficoDWEB - Design paraWeb 4 HTML 5 – básico II As quais também falamos, não com palavras de sabedoria humana, mas com as que o Espírito Santo ensina, comparando as coisas espirituais com as espirituais. 1 Coríntios 2:131 Capítulo 4 - HTML 5 básico II Tuesday, 28 de February de 12
  • 2. DWEB - Design para Web / Carlos José Contato Carlos José carlosjose.unibratec@gmail.com www.carlosjose.net twitter.com/carlosjoser2n2 Capítulo 4 - HTML 5 básico II Tuesday, 28 de February de 12
  • 3. DWEB - Design para Web / Carlos José Objetivo da Aula Apresentar a linguagem de marcação HTML 5 com seus conceitos básicos, bem como a construção de documentos.3 Capítulo 4 - HTML 5 básico II Tuesday, 28 de February de 12
  • 4. DWEB - Design para Web / Carlos José Agendan Listade tag’s e atributosn Exercícios4 Capítulo 4 - HTML 5 básico II Tuesday, 28 de February de 12
  • 5. DWEB - Design para Web / Carlos José Introdução as linguagens de marcaçãon  Introdução î Lista de Tags e atributos n  Astags apresentadas aqui formam uma compilação das definições oficiais da linguagem. î  http://www.w3schools.com î  http://www.htmldog.com5 Capítulo 4 - HTML 5 básico II Tuesday, 28 de February de 12
  • 6. DWEB - Design para Web / Carlos José HTML - <img>n  Lista de Tags e atributos î  HTML <img> tag n  Definição e forma de uso: A tag <img> incorpora uma imagem em uma página HTML. î  Observe que as imagens não são tecnicamente inserido em uma página HTML, apenas um forma de link para onde a imagem esteja armazenada. î  A tag <img> tem dois atributos obrigatórios: src e alt . n  Diferenças entre HTML 4.01, XHTML e HTML 5 î  No HTML a tag <img> não tem nenhuma marca de fim. î  Em XHTML a tag <img> devem ser fechadas corretamente. î  Os atributos "alinhamento", "border", "hspace", e "vspace" estão em desuso em HTML 4.01, e não são suportados em XHTML 1.0 Strict DTD.6 Capítulo 4 - HTML 5 básico II Tuesday, 28 de February de 12
  • 7. DWEB - Design para Web / Carlos José HTML - <img>n  Lista de Tags e atributos î HTML <img> tag n  Mozilla Firefox e o atributo alt î  Dica: O atributo alt é o texto alternativo utilizado para ser carregado caso a imagem não esteja disponível, não deve ser utilizado como um texto que aparece quando repousamos o mouse sobre uma imagem ou mapa de imagem. î  Para mostrar um texto quando repousamos o mouse sobre uma imagem ou mapa de imagem, use o atributo title, como este: §  <img src=“img.gif" alt=“img" title="Angry face" />7 Capítulo 4 - HTML 5 básico II Tuesday, 28 de February de 12
  • 8. DWEB - Design para Web / Carlos José HTML - <img>n  Lista de Tags e atributos î HTML <img> tag n  Atributos obrigatórios î  DTD indica em que DTD o atributo é permitido. S=Strict, T=Transitional, and F=Frameset. Attribute Value Description DTD alt text Especifica um texto alternativo para uma imagem STF src URL Especifica a URL de uma imagem STF8 Capítulo 4 - HTML 5 básico II Tuesday, 28 de February de 12
  • 9. DWEB - Design para Web / Carlos José HTML - <img>n  Lista de Tags e atributos î HTML <img> tag n  Atributos opcionais î  DTD indica em que DTD o atributo é permitido. S=Strict, T=Transitional, and F=Frameset. Attribute Value Description DTD align top, bottom, middle, left, Em desuso. Use CSS em vez disso. TF right Especifica o alinhamento de uma imagem de acordo com os elementos que o cercam. border pixel Em desuso. Use CSS em vez disso. TF Especifica a largura da borda ao redor de uma imagem. height pixel or % Em desuso. Use CSS em vez disso. STF Especifica a altura da imagem. width pixel or % Em desuso. Use CSS em vez disso. STF Especifica a largura da imagem. hspace pixel Em desuso. Use CSS em vez disso. TF Especifica o espaço em branco no lado esquerdo e direito da imagem vspace pixel Em desuso. Use CSS em vez disso. TF Especifica o espaço em branco no topo e no fundo de uma imagem9 Capítulo 4 - HTML 5 básico II Tuesday, 28 de February de 12
  • 10. DWEB - Design para Web / Carlos José HTML – exe04.html<!DOCTYPE HTML><html> <head> <meta charset=“utf-8”/> <title>Inserindo imagem</title> </head><body><h1>Inserindo imagem</h1><hr /> <h2>Nome da imagem: vela.jpg</h2> <img src="imagens/vela.jpg" alt="vela.jpg" title="Vela, cuidado paran&atilde;o se queimar!!!" /><hr /><p>Observe que em HTML/XHTML a imagem n&atilde;o ser&aacute; incorporada aodocumento, apenas fazemos refer&ecirc;ncia para onde a imagem est&aacute;armazenada.</p><p>Neste caso o documento exe04.html tem que ser copiado juntocom a pasta imagens.</p><p>Os dois atributos obrigat&oacute;rios para a tag&lt;img&gt; s&atilde;o: src - URL onde a imagem est&aacute; armazenada e alt -texto alternativo que entra em a&ccedil;&atilde;o quando a imagem n&atilde;o&eacute; carregada.</p></body></html>10 Capítulo 4 - HTML 5 básico II Tuesday, 28 de February de 12
  • 11. DWEB - Design para Web / Carlos José HTML – <ol> Lista ordenadan  Lista de Tags e atributos î HTML <ol> tag n  Definiçãoe forma de uso: A tag <ol> define uma lista ordenada. î  A lista pode ser numérica ou alfabética n  Diferenças entre HTML 4.01, XHTML e HTML 5 î  Os atributos da tag <ol> estão em desuso em HTML 4.01, e não são suportados em XHTML 1.0 Strict DTD. n  Dica î  Use CSS para definir o tipo da lista11 Capítulo 4 - HTML 5 básico II Tuesday, 28 de February de 12
  • 12. DWEB - Design para Web / Carlos José HTML – <ol> Lista não ordenadan  Lista de Tags e atributos î HTML <ol> tag n  Atributos opcionais î  DTD indica em que DTD o atributo é permitido. S=Strict, T=Transitional, and F=Frameset. Attribute Value Description DTD start start_on_number Em desuso. Use CSS em vez disso. TF Especifica o ponto inicial de uma lista. type A, a, I, i, 1 Em desuso. Use CSS em vez disso. TF Especifica o tipo de pontos que serão utilizados.12 Capítulo 4 - HTML 5 básico II Tuesday, 28 de February de 12
  • 13. DWEB - Design para Web / Carlos José HTML – <ul> Lista não ordenadan  Lista de Tags e atributos î HTML <ul> tag n  Definição e forma de uso: A tag <ul>define uma lista não ordenada (tipo marcadores). n  Diferenças entre HTML 4.01, XHTML e HTML 5 î  Os tipos disc, square, circle, estão em desuso em HTML 4.01, e não são suportados em XHTML 1.0 Strict DTD. n  Dica î  Use CSS para definir o tipo de lista.13 Capítulo 4 - HTML 5 básico II Tuesday, 28 de February de 12
  • 14. DWEB - Design para Web / Carlos José HTML – <ul> Lista não ordenadan  Lista de Tags e atributos î HTML <ul> tag n  Atributos opcionais î  DTD indica em que DTD o atributo é permitido. S=Strict, T=Transitional, and F=Frameset. Attribute Value Description DTD type disc, square, circle Em desuso. Use CSS em vez disso. TF Especifica o tipo da lista14 Capítulo 4 - HTML 5 básico II Tuesday, 28 de February de 12
  • 15. DWEB - Design para Web / Carlos José HTML – <li> Itens de uma Listan  Lista de Tags e atributos î HTML <li> tag n  Definição e forma de uso: A tag <li> define um item da lista. î  A tag <li> é utilizada tanto a lista ordenada (<ol>) e não ordenada (<ul>). n  Diferenças entre HTML 4.01, XHTML e HTML 5 î  Os atributos da tag <li> estão em desuso em HTML 4.01, e não são suportados em XHTML 1.0 Strict DTD. n  Dica î  Use CSS para definir o item da lista.15 Capítulo 4 - HTML 5 básico II Tuesday, 28 de February de 12
  • 16. DWEB - Design para Web / Carlos José HTML – exe05.html<!DOCTYPE HTML><html> <head> <meta charset=“utf-8” /> <title>Listas</title> </head><body><h1>Lista Ordenada e N&atilde;o Ordenada</h1><hr /> <ol><!--lista ordenada--> <li>exe01.html <a href="exe01.html">Clique aqui.</a></li> <li>exe02.html <a href="exe02.html">Clique aqui.</a></li> </ol> <ul><!--lista não ordenada--> <li>exe03.html <a href="exe03.html" target="_blank">Clique aqui.</a></li> <li>exe04.html <a href="exe04.html" target="_blank">Clique aqui.</a></li> </ul><hr /></body></html>16 Capítulo 4 - HTML 5 básico II Tuesday, 28 de February de 12
  • 17. DWEB - Design para Web / Carlos José HTML - <a> criando hiperlinksn  Lista de Tags e atributos î HTML <a> tag n  Definição e forma de uso: A tag <a> define uma âncora. Uma âncora pode ser usado de duas maneiras: î  1. Para criar um link para outro documento, usando o atributo href. §  O atributo mais importante da tag <a> é o atributo href, o que indica o destino do link. î  2. Para criar um marcador em um documento, usando o atributo nome. n  Diferenças entre HTML 4.01, XHTML e HTML 5 î  Nenhuma. n  Dica î  Use CSS para formatar a parência do link.17 Capítulo 4 - HTML 5 básico II Tuesday, 28 de February de 12
  • 18. DWEB - Design para Web / Carlos José HTML - <a> criando hiperlinksn  Lista de Tags e atributos î HTML <a> tag n  Atributos opcionais î  DTD indica em que DTD o atributo é permitido. S=Strict, T=Transitional, and F=Frameset. Attribute Value Description DTD href URL Especifica o destino de um link. STF name section_name Especifica o nome de uma âncora. STF target _blank, _parent, Especifica onde e como o documento deve abrir. TF _self, _top18 Capítulo 4 - HTML 5 básico II Tuesday, 28 de February de 12
  • 19. DWEB - Design para Web / Carlos José HTML – exe06.html<!DOCTYPE HTML><html> <head> <meta charset=“utf-8” /> <title>Link &acirc;ncora</title> </head><body> <a name="topo"></a><h1>Link &acirc;ncora</h1><hr /> <p>Para visualizar informa&ccedil;&otilde;es do cap&iacute;tulo 8, <ahref="#c8">clique aqui.</a></p> <h2>Cap&iacute;tulo 1</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesettingindustry. Lorem Ipsum has been the industrys standard dummy text eversince the 1500s, when an unknown printer took a galley of type andscrambled it to make a type specimen book.</p>... <a name="c8"></a><h2>Cap&iacute;tulo 8</h2>...</body></html> Texto utilizado do site gerador de parágrafos: http://www.lipsum.com19 Capítulo 4 - HTML 5 básico II Tuesday, 28 de February de 12
  • 20. DWEB - Design para Web / Carlos José HTML – Listas: Exercício de fixação - exe07.html20 Capítulo 4 - HTML 5 básico II Tuesday, 28 de February de 12
  • 21. DWEB - Design para Web / Carlos José Perguntas ?21 Capítulo 4 - HTML 5 básico II Tuesday, 28 de February de 12
  • 22. DWEB - Design para Web / Carlos José Considerações Finaisn  Atenção î Revisar os conceitos e fundamentos do HTML î Tentar refazer os documentos HTML pelo o que você vê no navegador, ou seja, o resultado final.Fonte: Silva, Maurício Samy., HTML 5: A linguagem de marcação do futuro, São Paulo, Novatec Brasil,julho 2011; ROBBINS, Jennifer Niederst. Aprendendo Web Design – guia para iniciantes, 3ª Edição;http://www.htmldog.com/; http://www.w3schools.com22 Capítulo 4 - HTML 5 básico II Tuesday, 28 de February de 12