00 a linguagem html

332 visualizações

Publicada em

HTML5 Programming

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

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

Nenhuma nota no slide
  • p22
  • p22
  • p22
  • p22
  • p23
  • 00 a linguagem html

    1. 1. NOME PROJECTO DATA CLIENTE DATA HMTLHYPERTEXT MARK-UP LANGUAGE LINGUAGEM DE FORMATAÇÃO DE DOCUMENTOS
    2. 2. COMO FUNCIONA UMA WEB APPLICATION Um conjunto de Clientes acede a um Web Server para obter conteúdos. Os clientes podem ser computadores, tablets, telefones ou qualquer outro dispositivo com acesso à Internet.
    3. 3. Como Funciona uma Web Application Para aceder os conteúdos dos servidores ligados à Internet estes dispositivos utilizam um Web browser. Web browser
    4. 4. Como Funciona uma Web Application Para criar conteúdos para a Web em HTML e CSS não é necessário entender todo o funcionamento da Internet mas convém ter algumas noções básicas.
    5. 5. Como Funciona uma Web Application Para se criar uma Web Application é necessário ter uma rede um web server e um conjunto de dispositivos ligados a esse server que se designam por clientes.
    6. 6. Aplicações a Instalar Windows / Mac Google Chrome (free) https://www.google.com/intl/pt-BR/chrome/browser/?hl=pt-BR Dreamweaver(trial) http://www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver Windows Notepad++(free) http://notepad-plus-plus.org/download/v6.2.html Mac TextWrangler(free) http://www.barebones.com/products/textwrangler/
    7. 7. Linguagem e Documentos HTML Documento HTML Index.txt Index.html
    8. 8. Linguagem e Documentos HTML DESMARCAR OPÇÂO
    9. 9. Linguagem e Documentos HTML Depois de guardar um ficheiro alterar a sua extensão: Index.txt Index.html Cuidado para não ficar Index.hml.txt
    10. 10. Linguagem e Documentos HTML A Linguagem HTML HTML = HyperText Markup Language Permite definir o conteúdo e a estrutura de uma webpage O código de uma página de designa-se por “Documento HTML”
    11. 11. Linguagem e Documentos HTML Texto em que se pode clicar para aceder a um novo documento. É uma referência à capacidade das páginas Web conterem links umas para as outras. Documento HTML HTML = HyperText Markup Language
    12. 12. Linguagem e Documentos HTML • Marcadores (Tags) que aplicam formatações convencionadas a texto simples. Documento HTML HTML = HyperText Markup Language
    13. 13. Linguagem e Documentos HTML • Os documentos HTML são descritos pelos marcadores da linguagem. • Cada marcador da linguagem descreve um tipo de conteúdo diferente. Documento HTML HTML = HyperText Markup Language
    14. 14. Linguagem e Documentos HTML Referência ao facto de o HTML ser considerado uma linguagem de programação. Documento HTML HTML = HyperText Markup Language
    15. 15. HTML5 Web Technologies html 5 Markup Language CSS 3 Style Sheets JavaScript
    16. 16. Fases para a criação de um website 1. Criação do documento HTML Notepad, DreamWeaver, VisualStudio,etc 2. Registar um nome de domínio .com, .net, .pt 3. Contratar o Alojamento Onde hospedar os ficheiros do seu site
    17. 17. A Estrutura do Site Antes de defina as páginas que precisa: Home Page Catálogo de Produtos Informação da Empresa Formulário de Encomendas Página de Contactos Apoio e FAQ Notícias
    18. 18. Mapa do Site Home Page Produtos A Empresa Ferramentas da empresa Contactos Novidades Produto 1 Produto 2 O Nosso Blog Os Nossos Clientes As nossas Ferramentas Um de um site é normalmente apresentado numa estrutura em árvore sendo a Home Page colocada no topo da hierarquia que representa as páginas do site. É uma boa prática desenhar um mapa do site seja em papel ou em qualquer aplicação. Por exemplo:
    19. 19. Regras para a elaboração do conteúdo 1. Colocar os visitantes em primeiro lugar Considere aquilo que os seus visitantes deverão procurar no site em primeiro lugar, e coloque essa informação em primeiro lugar.2. Evite becos sem saída Todas as páginas têm de proporcionar ao visitante a possibilidade de navegar para um conteúdo - por exemplo, para comprar um produto, ou para contactar a empresa. 3. Seja directo As páginas não devem ter mais de 400 páginas. Estruture as ideias por tópicos de modo a que a informação seja mais facilmente absorvida.
    20. 20. 4. Seja Pessoal Um tom casual como o de conversação resulta bem na Internet - evite ser demasiado formal. 5. Utilize Imagens e Vídeo Quando escolhidas de forma criteriosa as imagens e vídeos podem dar vida ao seu site. 6. Não se esqueça do seu Objectivo Cada elemento do seu site deve ser utilizado tendo em vista o objectivo global do site definido à partida. Regras para a elaboração do conteúdo
    21. 21. Editores de documentos - exemplos Editores de texto Notepad Notepad ++ Editores WYSIWYG ("What You See Is What You Get“) Dreamweaver Visual Studio
    22. 22. Componentes de uma página web Uma webpage é formada por 3 componentes básicos: 1. Texto: Texto simples que aparece na página para mostrar informações sobre o site aos visitantes. 2. Referências a outros ficheiros: Conteúdos carregados para a página HTML através da referência a outros ficheiros como imagens, sons, vídeo, outras páginas HTML, ficheiros de CSS, ficheiros de JavaScript, ou outras.
    23. 23. Uma webpage é formada por 3 componentes básicos: 3. Marcadores: Elementos da linguagem HTML que descrevem o conteúdo da página e tornam possíveis as referências a outros documentos. Componentes de uma página web
    24. 24. Componentes de uma página web Todos estes componentes: Texto Referências a outros ficheiros Marcadores são criados utilizando apenas texto simples.
    25. 25. Componentes de uma página web Para além disso uma página inclui um conjunto de informações sobre a própria página. Esta informação destina a passar informação ao search engines e aos browsers. Exemplos: Descrição do conteúdo da página Definição do idioma da página Definição da codificação de página. Outros
    26. 26. Regras básicas html é uma sequência de texto que se encontra definido entre um conjunto de símbolos que designam por tags ou marcadores.
    27. 27. Regras básicas html é uma sequência de texto que se encontra definido entre um conjunto de símbolos que designam por tags ou marcadores. Os tags indicam o local onde deve ser aplicada a formatação: <i>Todos os artigos em saldo</i> Itálico
    28. 28. Regras básicas html é uma sequência de texto que se encontra definido entre um conjunto de símbolos que designam por tags. Os tags indicam o local onde deve ser aplicada a formatação: <i>Todos</i> os artigos em saldo Início da formatação Fim da formatação
    29. 29. Regras básicas html é uma sequência de texto que se encontra definido entre um conjunto de símbolos que designam por tags. Os tags indicam o local onde deve ser aplicada a formatação: <i>Todos</i> os artigos em saldo tag ou marcador inicial tag ou marcador final
    30. 30. Regras básicas html é uma sequência de texto que se encontra definido entre um conjunto de símbolos que designam por tags. Os tags indicam o local onde deve ser aplicada a formatação: <i>Todos</i> os artigos em saldo ELEMENTO
    31. 31. Regras básicas Um elemento provoca uma alteração na página html e pode ter um TAG inicial e um TAG final. <i>Formata o texto em itálico</i>
    32. 32. Regras básicas Um elemento provoca uma alteração na página html e pode ter um TAG inicial e um TAG final. Para alguns elementos o tag final é opcional: <p>Formata o texto em itálico</p> <p>Formata o texto em itálico
    33. 33. Regras básicasUm elemento provoca uma alteração na página html e pode ter um TAG inicial e um TAG final. Para alguns elementos o tag final é opcional e para outros é obrigatório. <table> … </table>
    34. 34. Regras básicas Um elemento provoca uma alteração na página html e pode ter um TAG inicial e um TAG final. Para alguns elementos o tag final é opcional e para outros é obrigatório. Outros elementos não têm tag final. <br>
    35. 35. Elementos que contêm outros Num documento html, uma tabela é um elemento. Esse elemento pode conter outros elementos, por exemplo, as linhas da tabela. <table> <tr> <td>…. </td> </tr> </table>
    36. 36. ELEMENTOS Uma lista numerada é um elemento. Cada item da lista é um elemento contido no elemento que define a lista.
    37. 37. Regras básicas Um documento html é constituído por um conjunto de elementos, representados por uma sequência de símbolos – TAG
    38. 38. Regras básicas Cada TAG é sempre escrita entre o símbolo < e o símbolo >
    39. 39. Regras básicas Grande parte das TAGs têm que ser iniciadas e finalizadas, utilizando o caracter / Uma TAG pode conter outras TAGs. A finalização das TAGs é na ordem inversa da sua criação
    40. 40. ELEMENTOS vs TAGS Num documento html, cada elemento é representado por uma sequência de símbolos que o identificam. Essa sequência de símbolos é designada por tag. Um parágrafo de texto é um elemento. Esse elemento é representado pelo tag inicial <P> e pelo tag final </P>. Entre o tag inicial e o tag final, pode ser colocado o texto do parágrafo. <P>Este texto é um parágrafo.</P> TAG INICIAL TAG FINAL
    41. 41. ELEMENTOS vs TAGS BLOCO DE CONTEÚDO ELEMENTO Num documento html, cada elemento é representado por uma sequência de símbolos que o identificam. Essa sequência de símbolos é designada por tag. Um parágrafo de texto é um elemento. Esse elemento é representado pelo tag inicial <P> e pelo tag final </P>. Entre o tag inicial e o tag final, pode ser colocado o texto do parágrafo. <P>Este texto é um parágrafo.</P>
    42. 42. Regras básicas Deve criar o hábito de escrever as TAGs com letra minúscula As linhas de comentário tem um tag inicial <! - - e um tag final - - > <p>Este é um parágrafo</p> <!-- Primeiro parágrafo -->
    43. 43. Regras básicas 3 tipos de elementos: TAG FINAL obrigatório-explo: <table>... </table> TAG FINAL opcional-explo: <p>... [</p>] Sem TAG FINAL – explo: <hr> <br> <img src=“logo.gif” alt=“Logo”>
    44. 44. Elementos e Atributos <ELEMENTO atributo1=valor1 atributo2=valor2... atributon=valorn...> ... ... </ELEMENTO> Os elementos podem ter atributos e o seu respectivo valor
    45. 45. Elementos e Atributos <ELEMENTO atributo1=valor1 atributo2=valor2...atributon=valorn...> ... ... </ELEMENTO> <P ID=p1 CLASS=“Paragrafotexto” ALIGN=“left” TITLE=“Parágrafo Importante”>Texto que aparece na página do documento. </P>
    46. 46. Elementos e Atributos <ELEMENTO atributo1=valor1 atributo2=valor2...atributon=valorn...> ... ... </ELEMENTO> <P ID=p1 CLASS=“Paragrafotexto” ALIGN=“left” TITLE=“Parágrafo Importante”>Texto que aparece na página do documento. </P> As aspas não são obrigatórias mas devem ser utilizadas sobretudo quando o valor do atributo é composto mais de uma palavra
    47. 47. <ELEMENTO atributo1=valor1 atributo2=valor2...atributon=valorn...> ... ... </ELEMENTO> <p ID=p1 CLASS=“Paragrafotexto” ALIGN=“left” TITLE=“Parágrafo Importante”>Texto que aparece na página do documento. </p> Elementos e Atributos Identificação Interna do parágrafo. Útil quando utilizadas Style- Sheets.
    48. 48. Elementos e Atributos <ELEMENTO atributo1=valor1 atributo2=valor2...atributon=valorn...> ... ... </ELEMENTO> <P ID=p1 CLASS=“Paragrafotexto” ALIGN=“left” TITLE=“ParagrafoImportante”>Texto que aparece na página do documento. </P> Define o formato de alinhamento do parágrafo.
    49. 49. Elementos e Atributos <ELEMENTO atributo1=valor1 atributo2=valor2...atributon=valorn...> ... ... </ELEMENTO> <P ID=p1 CLASS=“Paragrafotexto” ALIGN=“left” TITLE=“ParagrafoImportante”>Texto que aparece na página do documento. </P> Cria uma etiqueta
    50. 50. Exemplos com atributos Elemento de abertura com 1 atributo: <a href=contacto.html>Contacto</a> Elemento de abertura com 3 atributos: <a href=contacto.html alt=Contacto class=nav_click> Contacto </a> Elemento sem fecho com 2 atributos: <img src=imagem1.gif alt=logo>
    51. 51. Exemplos com atributos Atributo LANG Atributo TITLE Atributo WIDTH e HEIGHT Atributo ALT
    52. 52. Exemplos com atributos Atributo LANG Define o idioma de um elemento ou de uma página. A declaração do idioma é importante para as aplicações de acessibilidade como os leitores de texto (conversão para voz) ou para os motores de busca:
    53. 53. Exemplos com atributos Atributo LANG <!DOCTYPE HTML> <html lang="pt-PT"> <head> <meta charset=UTF-8> <title>Untitled Document</title> </head> <body> <p>Prágrafo número 1</p> </body> </html>
    54. 54. Estrutura do documento base html head body Define o início e o fim do documento Cabeçalho – informações sobre o documento Contém o conteúdo do documento Define a versão do HTMLdoctype
    55. 55. Indica o tipo de standard ou versão do html a cuja conformidade o documento obedece. <!DOCTYPE html> html 5 1 Estrutura do documento basedoctype
    56. 56. <!DOCTYPE html> <html> </html> html 5 Início e fim do documento html Designa-se por elemento raíz ou root element. 2 html Estrutura do documento base
    57. 57. <!DOCTYPE html> <html lang=“pt”> </html> html 5 Definir o idioma principal do documento. Não indica a codificação de caracteres da página. 3 lang Estrutura do documento base
    58. 58. <!DOCTYPE html> <html lang=“pt-br”> </html> html 5 As duas primeiras letras indicam o idioma. Caso exista um dialecto - como brasileiro - então são utilizadas também as duas últimas letras. 4 lang Estrutura do documento base
    59. 59. 4 Estrutura do documento base <!DOCTYPE html> <html lang=“pt”> <head> … </head> <body> … </body> </html> Um documento encontra-se dividido em duas grandes secções o Head e o Body. O elemento HEAD pode incluir: •Um titulo para o documento •Scripts de diversas linguagens •Estilos •Metadata •Links para outros documentos •Não é uma secção obrigatória
    60. 60. <!DOCTYPE html> <html lang=“pt”> <head> <title>Meu documento html</title> </head> </html> html 5 Titulo do documento “Meu documento html” 5 Estrutura do documento base
    61. 61. <!DOCTYPE html> <html lang=“pt”> <head> <title>Meu documento html</title> </head> <body> Escrever directamente sobre o documento. </body> </html> Estrutura do documento base ver
    62. 62. <!DOCTYPE html> <html lang=“pt”> <head> <title>Meu documento html</title> </head> <body> <h1>O Cabeçlho da Página</h1> <p>O primeiro parágrafo.</p> </body> </html> Estrutura do documento base
    63. 63. <!DOCTYPE html> <html lang=“pt”> <head> <title>Meu documento html</title> <link rel=“stylesheet” href=“estilo.css”> </head> </html> Ligações para outros documentos, neste caso, uma página externa de estilos. (Voltamos aos estilos mais tarde !!!!) 6 Estrutura do documento base
    64. 64. <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=“utf-8”> </head> </html> html 5 É também no HEAD que se inclui a codificação de caracteres. A definição correcta da codificação de permite a utilização de símbolos específicos de um determinado idioma de acordo com um determinado layout de teclado. 7 Estrutura do documento base
    65. 65. <!DOCTYPE html> <html lang=“pt”> <head> <meta name=“description” content=“Descrição do conteúdo da página”> <meta name=“keywords” content=“HTML, CSS, Aulas”> <meta name=“author” content=“Vasco Salada”> </head> Esta codificação é considerada metainformação e por isso utiliza o elemento <meta>. Metainformação é um conjunto de informações que descrevem um determinado conjunto de dados. 8 Estrutura do documento base
    66. 66. <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </head> </html> html 5 Estrutura do documento base O elemento <meta> permite também a especificação de caracteres em português. Pode ser feita dando ao atributo charset um dos seguintes valores: Latin-1 ISO-8859-1 9
    67. 67. <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </head> </html> O elemento <meta> permite também a especificação de caracteres em português. Pode ser feita dando ao atributo charset um dos seguintes valores: • Latin-1 • ISO-8859-1 html 5 Para verificar os códigos de página para os diferentes grupos de caracteres consulte: http://www.terena.org/activities/multilin g/ml-docs/iso-8859.html Estrutura do documento base 9
    68. 68. <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </head> <body> </body> </html> html 5 No elemento BODY ficam todos os conteúdos principais como texto, imagens, vídeos, etc. Estrutura do documento base 10 SECÇÔES E CONTEÙDOS
    69. 69. <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </head> <body> </body> </html> html 5 No elemento BODY ficam todos os conteúdos principais como texto, imagens, vídeos, etc. Estrutura do documento base 10 <header>, <footer>, <article>, <section>, <nav>, <aside> SECÇÕES – “document sectioning elements”
    70. 70. <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </head> <body> </body> </html> html 5 No elemento BODY ficam todos os conteúdos principais como texto, imagens, vídeos, etc. Estrutura do documento base 10 Parágrafos Listas Citações (blockquotes) Listas Imagens CONTEÚDOS– “Content Grouping Elements”
    71. 71. <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </head> <body> </body> </html> html 5 No elemento BODY ficam todos os conteúdos principais como texto, imagens, vídeos, etc. Estrutura do documento base 10 • Utilização dos <hn> • O elemento <section> • O elemento <article> • O elemento <aside> TEXTO SEMÂNTICO– “Text Level Semantics”
    72. 72. <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </head> <body> </body> </html> html 5 No elemento BODY ficam todos os conteúdos principais como texto, imagens, vídeos, etc. Estrutura do documento base 10 <table> <tr> <td> <th> .. DADOS EM TABELAS
    73. 73. <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </head> <body> </body> </html> html 5 No elemento BODY ficam todos os conteúdos principais como texto, imagens, vídeos, etc. Estrutura do documento base 10 <FORM> .. INTRODUÇÃO DE DADOS
    74. 74. <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </head> <body> </body> </html> html 5 No elemento BODY ficam todos os conteúdos principais como texto, imagens, vídeos, etc. Estrutura do documento base 10 <EMBED> <AUDIO> <VIDEO> .. DADOS EMBEBIDOS
    75. 75. <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </head> <body> </body> </html> html 5 No elemento BODY ficam todos os conteúdos principais como texto, imagens, vídeos, etc. Estrutura do documento base 10 PRECISAM DE JAVASCRIPT PARA FUNCIONAR .. ELEMENTOS INTERATIVOS
    76. 76. <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </head> <body> <p id=p1 class=”ParagrafoTexto” align=”left” title=”Este parágrafo é importante”> Este é o texto do parágrafo. É este texto que aparece na página do documento. Os atributos align e title têm um efeito visível na página. Os atributos id e class são utilizados apenas internamente. </p> </body> </html> A cada elemento está associado um conjunto de atributos. Esses atributos podem ser utilizados para identificar o elemento e para definir critérios de formatação. Os atributos são inseridos no tag inicial, entre o símbolo < e o símbolo >. Esquematicamente, os atributos podem ser representados do seguinte modo: <ELEMENTO atributos1= ... atributo2= ... atributoN= ... </ELEMENTO>
    77. 77. Nested Elements <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </head> <body> <b><i>Nested Elements</i></b> </body> </html> Um elemento pode ficar contido dentro de outros elementos. <b><i>Nested Elements</i></b> <i><b>Nested Elements</i></b>
    78. 78. Comentários <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </head> <body> <!-- 0 elemento seguinte é um parágrafo. Este texto é um comentário --> <P>Este é o texto do parágrafo que aparece na janela do documento.</P> </body> </html> Num documento html podem ser incluídas linhas de comentário. Essas linhas têm como objectivo fornecer informação sobre o código do documento, mas não têm qualquer efeito em termos de formatação. Um comentário tem um tag inicial e um tag final obrigatório. O tag incial é <!-- . O tag final é --> <!-- comentário html -->
    79. 79. Caracteres Especiais Alguns caracteres não podem ser escritos directamente no documento HTLM porque fazem parte da estrutura da linguagem sobretudo: < &lt; < > &gt; > / /
    80. 80. Hipertexto Links e URLs Link - Origem de uma ligação que pode conter: Apontador para novo recurso: Novo Documento html ou de outro tipo. Novo Endereço URL Endereço de E-Mail
    81. 81. Hiperlink Endereço protocolo Localização do servidor Localização do recurso no servidor: // http www.istec.pt Web/index.html: // ftp www.istec.pt Web/index.html: // mailto vsf@istec.pt Subject=assunto: ? file computador caminho/index.html: //
    82. 82. Hipertexto Links e URLs Link – Para endereço externo: <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </head> <body> <P> Para obter mais informações sobre este produto consulte o site da <a href=”http://www.microsoft.com”> Microsoft Corporation. </a> </P> </body> </html>
    83. 83. Hipertexto Links e URLs Link – Para documento externo na mesma pasta: <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </head> <body> <p> Para obter mais informações sobre este produto consulte o site da <a href=”http://www.microsoft.com”> Microsoft Corporation. </a> </p> <p>Aceda ao nosso <a href=“form.htm”>formulário</a> </p> …
    84. 84. Hipertexto Links e URLsLink – Para documento externo numa pasta dentro do local de origem- ficheiro index.html <p> Para obter mais informações sobre este produto consulte o site da <a href=”http://www.microsoft.com”> Microsoft Corporation. </a> </p> <p> Aceda ao nosso <a href=“formularios/form1.htm”> Formulário Pasta x Index Pasta Formulario s form1
    85. 85. Hipertexto Links e URLs Link – Para um e-mail <p> Para obter mais informações sobre este produto consulte o site da <a href=”mailto:vsf@istec.pt?subject=assuntoxpto?body=texto da msg”> Microsoft Corporation. </a> </p> <p> Aceda ao nosso <a href=“formularios/form1.htm”>formulário</a> VER
    86. 86. Base Define o URL base do documento, a partir do qual são formados todos os URL relativos que fazem parte do documento. <!DOCTYPE html> <html> <head> <base href=http://abc.com/def/> <!--Em alguns casos a referência aos url ou ficheiros pode precisar de “”-“http://abc.com/def/”--> </head> <body> <p>Para obter mais informações consulte <a href=ghi/pagina1.html> página1 </a> </p> </body> </html> VER
    87. 87. O URL definido neste exemplo é: http://abc.com/def/ghi/pagina1.html BASE  Define o URL base do documento, a partir do qual são formados todos os URL relativos que fazem parte do documento. <!DOCTYPE html> <html> <head> <base href=http://abc.com/def/> <!--Em alguns casos a referência aos url ou ficheiros pode precisar de “”-“http://abc.com/def/”-- > </head> <body> <p>Para obter mais informações consulte <a href=ghi/pagina1.html> página1 </a> </p> </body> </html>
    88. 88. html 5 3 Objectivos Principais da Especificação: 1. Definir alguns comportamentos do browser que podem ser personalizados 2. Definir o tratamento de erros pela primeira vez em html 3. Desenvolvimento da linguagem para facilitar a criação de web applications - aplicações concebidas para serem acedidas pelos utilizadores através de uma rede intranet ou da Internet.
    89. 89. html 5 1. Criar uma nova página de início definindo o tipo de documento como html 5 <!doctype html> </html>
    90. 90. html 5 2. Definir o idioma da página utilizado o Atributo lang do Elemento <html>: <!doctype html> <html lang=“pt”> </html> Indica que a página foi escrita no idioma português.
    91. 91. html 5 3. Definir a codificação de caracteres com um meta tag: <!doctype html> <html lang=“pt”> <head> <meta charset=ISO-8859-1> </head> </html> Não indica a codificação de caracteres
    92. 92. html 5 4. Definir um título para a página: <!doctype html> <html lang=“pt”> <head> <meta charset=ISO-8859-1> <title>Benvindo ao html</title> </head> </html>
    93. 93. Exemplos O ELEMENTO TITLE <!DOCTYPE html> <html lang="pt"> <head> <title>Meu documento HTML</title> </head> <body> </body> </html> st/Users/vascosalada/Documents/Aulas ISTEC/Web MM1/Exercícios/02 A Linguagem HTML/00 E
    94. 94. ESCREVER DIRECTAMENTE NO BROWSER <!DOCTYPE html> <html lang="pt"> <!-- Meramente Indicativo não indica a codificação de caracteres --> <head> <meta charset=ISO-8859-1> <!-- Codificação simplificada de caracteres em Português --> <title>Benvindo ao HTML</title> </head> <body> Escrever Directamente no browser sem elemento </body> </html> EXEMPLO
    95. 95. PARÁGRAFOS E COMENTÁRIOS <!DOCTYPE html> <html lang="pt"> <!-- Meramente Indicativo não indica a codificação de caracteres --> <head> <meta charset=ISO-8859-1> <!-- Codificação simplificada de caracteres em Português --> <title>Benvindo ao HTML</title> </head> <body> <!--Estrofe 1, Canto I --> <p>As armas e os barões assinalados,</p> <p>Que da ocidental praia Lusitana,</p> <p>Por mares nunca de antes navegados,</p> <p>Passaram ainda além da Taprobana,</p> <p>Em perigos e guerras esforçados,</p> <p>Mais do que prometia a força humana,</p> <p>E entre gente remota edificaram</p> <p>Novo Reino, que tanto sublimaram;</p> </body> </html> VER
    96. 96. ATRIBUTO TITLE Coloca um toolltip text no elemento: <body> <p title="E1V1">As armas e os barões assinalados,</p> <p title="E1V2">Que da ocidental praia Lusitana,</p> <p title="E1V13">Por mares nunca de antes navegados,</p> <p>Passaram ainda além da Taprobana,</p> <p>Em perigos e guerras esforçados,</p> <p>Mais do que prometia a força humana,</p> <p>E entre gente remota edificaram</p> <p>Novo Reino, que tanto sublimaram;</p> </body> </html> Exemplo
    97. 97. ATRIBUTO ALIGN <!DOCTYPE html> <html lang="pt"> <!-- Meramente Indicativo não indica a codificação de caracteres --> <head> <meta charset=ISO-8859-1> <!-- Codificação simplificada de caracteres em Português --> <title>Benvindo ao HTML</title> </head> <body> <!--Estrofe 1, Canto I --> <p align="justify">É pouco o que se sabe de Luís Vaz de Camões, e esse pouco é, ainda assim e na maioria dos casos, duvidoso. (…)</p> <p title="E1V1" align="center">As armas e os barões assinalados,</p> <p title="E1V2" align="right">Que da ocidental praia Lusitana,</p> <p title="E1V13" align="left">Por mares nunca de antes navegados,</p> <p>Passaram ainda além da Taprobana,</p> <p>Em perigos e guerras esforçados,</p> <p>Mais do que prometia a força humana,</p> <p>E entre gente remota edificaram</p> <p>Novo Reino, que tanto sublimaram;</p> Exemplo
    98. 98. HEADINGS <!DOCTYPE html> <html lang="pt"> <head> <meta charset=ISO-8859-1> <title>Headings de HTML</title> </head> <body> <h1>Cabeçalho de nível 1</h1> <h2>Cabeçalho de nível 2</h2> <h3>Cabeçalho de nível 3</h3> <h4>Cabeçalho de nível 4</h4> <p>Parágrafo</p> <h5>Cabeçalho de nível 5</h5> <h6>Cabeçalho de nível 6</h6> </body> </html> Exemplo
    99. 99. LINHAS HORIZONTAIS <!DOCTYPE html> <html lang="pt"> <head> <meta charset=ISO-8859-1> <title>Headings de HTML</title> </head> <body> h1>Cabeçalho de nível 1</h1> <hr> <h2>Cabeçalho de nível 2</h2> <hr width=50%> <h3>Cabeçalho de nível 3</h3> <hr size=30> <h4>Cabeçalho de nível 4</h4> <hr noshade> <p>Parágrafo</p> <hr width=50% align=right> (…) Exemplo
    100. 100. Exemplos Bold, Itálico e Sublinhado Quebras de linha Exemplo com vários elementos Texto semântico O elemento <em> O elemento <strong>
    101. 101. 11/22/13 OK, mas como é que isto funciona no browser ?
    102. 102. 11/22/13 1 O browser carrega o documento que incluiu elementos de marcação escritos em HTML e estilos escritos em CSS
    103. 103. 11/22/13 1 O browser carrega o documento que incluiu elementos de marcação escritos em HTML e estilos escritos em CSS À medida que o browser carrega a página, cria um modelo interno do documento que contém todos os elementos de HTML 2 html head body title script h1 p em
    104. 104. 11/22/13 À medida que o browser carrega a página, cria um modelo interno do documento que contém todos os elementos de HTML 2 html head body title script h1 p em 3 Por cada elemento no documento HTML, o browser cria um objecto que o representa e coloca-o numa estrutura do tipo árvore com todos os outros elementos.
    105. 105. 11/22/13 4 html head body title script h1 p em Chamamos a esta árvore hierárquica o Document Object Model ou DOM (Mais tarde voltamos a falar dele!!)
    106. 106. 11/22/13 Existem algumas melhorias com a introdução dos novos elementos da linguagem HTML5 Os estilos da página, caso existam são escritos na linguagem CSS3 e transformam a forma como os elementos de HTML são apresentados na página. HTML5 WEB TECHNOLOGIES
    107. 107. 11/22/13 Enquanto o browser está a ler a página, está também a ler o código JavaScript que normalmente começa a ser executado depois do HTML ter sido completamente carregado.
    108. 108. Os nomes das páginas Regras para a definição dos nomes das páginas HTML: 1. Usar nomes em letra minúscula 2. Separar diversas palavras com um traço: historia-da-empresa.html meus-filmes-favoritos.html 3. Utilizar a extensão correcta Dependendo do webserver deve utilizar a extensão correctamente: .htm para linux ou unix .html para windows
    109. 109. URLs Uniform Resource Locator O URL básico contém: - Protocolo - Nome do Servidor - Caminho - Nome do Ficheiro
    110. 110. Ranking de Compatibilidade com HTML5 Uniform Resource Locator Browser Versão Pontuação (Máximo 450) Google Chrome 12 343 Opera 11 286 Mozilla Firefox 8 313 Apple Safari 5 293 Internet Explorer 9 141
    111. 111. Exercício Crie website baseado na sua informação pessoal com as seguintes páginas: Dados Biográficos Dados Escolares Dados Profissionais Interesses

    ×