Profº Thyago Maia Tecnologias para Internet Aula 2
Sumário <ul><li>Camada de Apresentação </li></ul><ul><ul><li>Introdução ao HTML </li></ul></ul>
Introdução ao HTML <ul><li>HTML: Hypertext Markup Language, ou Linguagem de marcação de hipertexto; </li></ul><ul><li>Trat...
Introdução ao HTML <ul><li>Tags HTML </li></ul><ul><ul><li>São palavras chave, digitadas entre  <  e  > , como em  <html> ...
Introdução ao HTML <ul><li>Documentos HTML = Páginas Web </li></ul><ul><ul><li>Documentos HTML descrevem páginas Web; </li...
Introdução ao HTML <ul><li>Corpo (simples) de uma página HTML: </li></ul><ul><li>Onde: </li></ul><ul><ul><li>O texto entre...
Introdução ao HTML <ul><li>Do que eu preciso para escrever e documentos HTML? </li></ul><ul><ul><li>Um editor de texto (ap...
Introdução ao HTML <ul><li>Como salvar um documento HTML? </li></ul><ul><ul><li>Todo documento HTML deverá ser salvo com a...
Introdução ao HTML <ul><li>Tags de Título </li></ul><ul><ul><li>São definidas através das tags  <hx>  e  </hx> , onde o x ...
Introdução ao HTML <ul><li>Tag de Parágrafo </li></ul><ul><ul><li>É definida através das tags  <p>  e  </p> ; </li></ul></...
Introdução ao HTML <ul><li>Tag de Link </li></ul><ul><ul><li>É definida através das tags  <a>  e  </a> ; </li></ul></ul><u...
Introdução ao HTML <ul><li>Tag de Imagem </li></ul><ul><ul><li>É definida através das tag  <img> ; </li></ul></ul><ul><ul>...
Introdução ao HTML <ul><li>Elementos HTML </li></ul><ul><ul><li>Um elemento HTML é o conjunto formado por uma tag de abert...
Introdução ao HTML <ul><li>Sintaxe dos elementos HTML </li></ul><ul><ul><li>Um elemento HTML começa com uma tag de abertur...
Introdução ao HTML <ul><li>Aninhamento de elementos HTML </li></ul><ul><ul><li>Alguns elementos HTML podem ser aninhados, ...
Introdução ao HTML <ul><li>Atributos HTML </li></ul><ul><ul><li>Atributos fornecem informações adicionais aos elementos HT...
Introdução ao HTML <ul><li>Exemplo de atributo HTML </li></ul><ul><ul><li>Links HTML são definidos pela tag  <a> . O ender...
Introdução ao HTML <ul><li>Linhas HTML </li></ul><ul><ul><li>A tag  <hr/>  cria uma linha horizontal em uma página HTML, p...
Introdução ao HTML <ul><li>Comentários HTML </li></ul><ul><ul><li>Comentários podem ser inseridos em um código HTML para t...
Introdução ao HTML <ul><li>Quebras de Linha HTML </li></ul><ul><ul><li>Use a tag <br/> caso deseje pular uma linha em um d...
Upcoming SlideShare
Loading in …5
×

Tecnologias para Internet - Aula 2

786 views
707 views

Published on

Tecnologias para Internet - Aula 2

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
786
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tecnologias para Internet - Aula 2

  1. 1. Profº Thyago Maia Tecnologias para Internet Aula 2
  2. 2. Sumário <ul><li>Camada de Apresentação </li></ul><ul><ul><li>Introdução ao HTML </li></ul></ul>
  3. 3. Introdução ao HTML <ul><li>HTML: Hypertext Markup Language, ou Linguagem de marcação de hipertexto; </li></ul><ul><li>Trata-se de uma linguagem de marcação, utilizada na descrição de páginas Web; </li></ul><ul><ul><li>Não é uma linguagem de programação!!!! </li></ul></ul><ul><ul><li>Uma linguagem de marcação é composta por uma série de TAGs de marcação; </li></ul></ul><ul><ul><li>Não é case sensitive; </li></ul></ul>
  4. 4. Introdução ao HTML <ul><li>Tags HTML </li></ul><ul><ul><li>São palavras chave, digitadas entre < e > , como em <html> ; </li></ul></ul><ul><ul><li>Normalmente são utilizadas em pares, como em <b> Texto em Negrito </b> , onde... </li></ul></ul><ul><ul><ul><li>< b > : Tag de abertura; </li></ul></ul></ul><ul><ul><ul><li></ b > : Tag de fechamento; </li></ul></ul></ul>
  5. 5. Introdução ao HTML <ul><li>Documentos HTML = Páginas Web </li></ul><ul><ul><li>Documentos HTML descrevem páginas Web; </li></ul></ul><ul><ul><li>Documentos HTML contém tags HTML e texto; </li></ul></ul><ul><li>Navegadores (Browsers) </li></ul><ul><ul><li>Lêem documentos HTML, apresentando-os como páginas Web; </li></ul></ul><ul><ul><li>Não apresentam as tags HTML... </li></ul></ul><ul><ul><ul><li>Usam as tags para interpretar o conteúdo de uma página Web; </li></ul></ul></ul>
  6. 6. Introdução ao HTML <ul><li>Corpo (simples) de uma página HTML: </li></ul><ul><li>Onde: </li></ul><ul><ul><li>O texto entre <html> e </html> descreve a página Web; </li></ul></ul><ul><ul><li>O texto entre <body> e </body> é o conteúdo visível da página; </li></ul></ul><ul><ul><li>O texto entre <h1> e </h1> é apresentado como um título; </li></ul></ul><ul><ul><li>O texto entre <p> e </p> é apresentado como um parágrafo; </li></ul></ul><html> <body> <h1> Meu primeiro título </h1> <p> Meu primeiro título </p> </body> </html>
  7. 7. Introdução ao HTML <ul><li>Do que eu preciso para escrever e documentos HTML? </li></ul><ul><ul><li>Um editor de texto (apenas!!) ... </li></ul></ul><ul><ul><ul><li>Bloco de notas; </li></ul></ul></ul><ul><ul><ul><li>Word Pad; </li></ul></ul></ul><ul><ul><ul><li>Notepad++; </li></ul></ul></ul><ul><ul><ul><li>Gedit (Linux); </li></ul></ul></ul><ul><ul><ul><li>Entre outros; </li></ul></ul></ul><ul><ul><li>Um navegador Web </li></ul></ul><ul><ul><ul><li>Firefox, IE, Chrome... </li></ul></ul></ul>
  8. 8. Introdução ao HTML <ul><li>Como salvar um documento HTML? </li></ul><ul><ul><li>Todo documento HTML deverá ser salvo com a extensão .htm ou .html; </li></ul></ul>
  9. 9. Introdução ao HTML <ul><li>Tags de Título </li></ul><ul><ul><li>São definidas através das tags <hx> e </hx> , onde o x define o nível do título, através de um número de 1 a 6; </li></ul></ul><ul><ul><li>Exemplos: </li></ul></ul><html> <body> <h1> Título da página </h1> <h2> Subtítulo </h2> <h3> Subtítulo do subtítulo </h3> </body> </html>
  10. 10. Introdução ao HTML <ul><li>Tag de Parágrafo </li></ul><ul><ul><li>É definida através das tags <p> e </p> ; </li></ul></ul><ul><ul><li>Exemplos: </li></ul></ul><html> <body> <p> Sport Club do Recife </p> <p> Campeão Brasileiro de 87 </p> <p> Campeão da Copa do Brasil de 2008 </p> </body> </html>
  11. 11. Introdução ao HTML <ul><li>Tag de Link </li></ul><ul><ul><li>É definida através das tags <a> e </a> ; </li></ul></ul><ul><ul><li>Exemplos: </li></ul></ul><html> <body> <a href=” http://www .sportrecife.com.br”> Ir para o site do Sport Club do Recife </a> </body> </html>
  12. 12. Introdução ao HTML <ul><li>Tag de Imagem </li></ul><ul><ul><li>É definida através das tag <img> ; </li></ul></ul><ul><ul><li>Exemplos: </li></ul></ul><html> <body> <img src=”bandeira.jpg” width=”104” height=”142” /> </body> </html>
  13. 13. Introdução ao HTML <ul><li>Elementos HTML </li></ul><ul><ul><li>Um elemento HTML é o conjunto formado por uma tag de abertura, uma tag de fechamento e seu conteúdo (o que estiver entre as tags); </li></ul></ul><html> <body> <a href=” http://www .sportrecife.com.br”> Ir para o site do Sport Club do Recife </a> </body> </html> Um elemento HTML
  14. 14. Introdução ao HTML <ul><li>Sintaxe dos elementos HTML </li></ul><ul><ul><li>Um elemento HTML começa com uma tag de abertura e termina com uma tag de fechamento; </li></ul></ul><ul><ul><li>O conteúdo de um elemento HTML é tudo aquilo que está entre tags; </li></ul></ul><ul><ul><li>Vários elementos HTML não tem conteúdo (como a tag de imagem); </li></ul></ul><ul><ul><li>Elementos sem conteúdo são fechados na própria tag de abertura (como na tag de imagem); </li></ul></ul><ul><ul><li>Vários elementos HTML podem ter atributos (como na tag de imagem e de link); </li></ul></ul>
  15. 15. Introdução ao HTML <ul><li>Aninhamento de elementos HTML </li></ul><ul><ul><li>Alguns elementos HTML podem ser aninhados, isto é, podemos inserir elementos HTML como conteúdo de outros elementos; </li></ul></ul><html> <body> <p> Sport Club do Recife </p> <p> <img src=”fig.jpg” widht=”200” height=”10” /> </p> <p> <b> O melhor do Nordeste </b> </p> </body> </html>
  16. 16. Introdução ao HTML <ul><li>Atributos HTML </li></ul><ul><ul><li>Atributos fornecem informações adicionais aos elementos HTML; </li></ul></ul><ul><ul><li>Elementos HTML podem ou não ter atributos; </li></ul></ul><ul><ul><li>Atributos são sempre especificados nas tags de abertura; </li></ul></ul><ul><ul><li>Atributos são formados pelo seguinte conjunto: nome=”valor” </li></ul></ul><ul><ul><li>Valores de atributos sempre devem estar delimitados por aspas duplas ou simples; </li></ul></ul>
  17. 17. Introdução ao HTML <ul><li>Exemplo de atributo HTML </li></ul><ul><ul><li>Links HTML são definidos pela tag <a> . O endereço do link é especificado pelo atributo href ; </li></ul></ul><html> <body> <a href=” http://www .sportrecife.com.br” > Ir para o site do Sport Club do Recife </a> </body> </html>
  18. 18. Introdução ao HTML <ul><li>Linhas HTML </li></ul><ul><ul><li>A tag <hr/> cria uma linha horizontal em uma página HTML, podendo ser usada para separar conteúdo; </li></ul></ul><ul><ul><li>Exemplo: </li></ul></ul><html> <body> <p> Sport Club do Recife </p> <hr/> <p> Campeão de 87!!! </p> </body> </html>
  19. 19. Introdução ao HTML <ul><li>Comentários HTML </li></ul><ul><ul><li>Comentários podem ser inseridos em um código HTML para torná-lo mais legível e compreensível; </li></ul></ul><ul><ul><li>São ignorados pelo navegador e não são apresentados; </li></ul></ul><html> <body> <!-- Isto é um comentário --> <p>Parágrafo</p> </body> </html>
  20. 20. Introdução ao HTML <ul><li>Quebras de Linha HTML </li></ul><ul><ul><li>Use a tag <br/> caso deseje pular uma linha em um documento HTML; </li></ul></ul><ul><ul><li>Exemplo: </li></ul></ul><html> <body> Parágrafo <br/> Parágrafo </body> </html>

×