Your SlideShare is downloading. ×
Unb   2012.1 - dweb - 04 - html5 básico - parte ii
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

307
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
307
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
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