Tecnologias para Internet - 2016.1 - Aula 2

313 visualizações

Publicada em

Tecnologias para Internet - 2016.1 - Aula 2

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

  • Seja a primeira pessoa a gostar disto

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

Nenhuma nota no slide

Tecnologias para Internet - 2016.1 - Aula 2

  1. 1. Tecnologias para Internet Prof.º Thyago Maia Gestão da TI
  2. 2. Objetivos Aula 2: Introdução ao HTML • Introduzir a linguagem HTML • Enquadrar a tecnologia em sua respectiva camada na arquitetura de sistemas Web • Definir e apresentar as principais tags HTML • Fazer com que o aluno crie seu primeiro documento HTML 2
  3. 3. Introdução ao HTML
  4. 4. Introdução ao HTML • HTML – Hypertext Markup Language, ou linguagem de marcação de hipertexto; – Utilizada na descrição e produção de páginas Web; – Lembre-se: Não é uma linguagem de programação!! – Composta por uma série de TAGs de marcação; 4
  5. 5. Arquitetura de Sistemas Web • Qual camada a linguagem HTML se enquadra? 5
  6. 6. Arquitetura de Sistemas Web • Qual camada a linguagem HTML se enquadra? 6
  7. 7. Introdução ao HTML • Tags HTML – Palavras chave, digitadas entre < e > (Ex.: <b>); – Normalmente são utiilizadas em pares. Ex.: • <b>Texto em negrito</b> – Onde: • <b> - Tag de abertura; • </b> - Tag de fechamento; 7
  8. 8. Introdução ao HTML • Exemplo de um documento HTML: – Digite o exemplo acima em um editor de texto simples, como o notepad, gedit ou Notepad++; – Salve o arquivo com a extensão .htm ou .html 8 <html> <body> <h1>Meu primeiro título</h1> <p>Meu primeiro título</p> </body> </html>
  9. 9. Introdução ao HTML • Onde: – O texto entre <html> e </html> descreve a página Web; – O texto entre <body> e </body> será o conteúdo visível da página; – O texto entre <h1> e </h1> é apresentado em destaque, como um título; – O texto entre <p> e </p> é apresentado em um parágrafo; 9
  10. 10. Introdução ao HTML • Do que eu preciso para escrever documentos HTML? – Um editor de texto: • Bloco de Notas; • Notepad++; • Gedit (Linux); • Entre outros; – OBS: Sempre salve os arquivos com a extensão .html ou .htm – Um navegador Web: • Firefox, IE, Chrome, etc.; 10
  11. 11. Exemplos de Tags HTML
  12. 12. Exemplos de Tags HTML  Tags de Título  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;  Exemplos: 12 <html> <body> <h1>Título da página</h1> <h2>Subtítulo</h2> <h3>Subtítulo do subtítulo</h3> </body> </html>
  13. 13. Exemplos de Tags HTML  Tag de Parágrafo  É definida através das tags <p> e </p>;  Exemplos: 13 <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>
  14. 14. Exemplos de Tags HTML  Tag de Link  É definida através das tags <a> e </a>;  Exemplos: 14 <html> <body> <a href=”http://www.sportrecife.com.br”> Ir para o site do Sport Club do Recife </a> </body> </html>
  15. 15. Exemplos de Tags HTML  Tag de Imagem  É definida através das tag <img>;  Exemplos: 15 <html> <body> <img src=”bandeira.jpg” width=”104” height=”142” /> </body> </html>
  16. 16. Exemplos de Tags HTML  Linhas HTML  A tag <hr/> cria uma linha horizontal em uma página HTML, podendo ser usada para separar conteúdo;  Exemplo: 16 <html> <body> <p>Sport Club do Recife</p> <hr/> <p>Campeão de 87!!!</p> </body> </html>
  17. 17. Exemplos de Tags HTML  Comentários HTML  Comentários podem ser inseridos em um código HTML para torná-lo mais legível e compreensível;  São ignorados pelo navegador e não são apresentados; 17 <html> <body> <!-- Isto é um comentário --> <p>Parágrafo</p> </body> </html>
  18. 18. Exemplos de Tags HTML  Quebras de Linha HTML  Use a tag <br/> caso deseje pular uma linha em um documento HTML;  Exemplo: 18 <html> <body> Parágrafo <br/> Parágrafo </body> </html>
  19. 19. Elementos HTML
  20. 20. Elementos HTML  Elementos HTML  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); 20 <html> <body> <a href=”http://www.sportrecife.com.br”> Ir para o site do Sport Club do Recife </a> </body> </html> Um elemento HTML
  21. 21. Elementos HTML  Sintaxe dos elementos HTML  Um elemento HTML começa com uma tag de abertura e termina com uma tag de fechamento;  O conteúdo de um elemento HTML é tudo aquilo que está entre tags;  Vários elementos HTML não tem conteúdo (como a tag de imagem);  Elementos sem conteúdo são fechados na própria tag de abertura (como na tag de imagem);  Vários elementos HTML podem ter atributos (como na tag de imagem e de link); 21
  22. 22. Elementos HTML  Aninhamento de elementos HTML  Alguns elementos HTML podem ser aninhados, isto é, podemos inserir elementos HTML como conteúdo de outros elementos; 22 <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>
  23. 23. Atributos HTML
  24. 24. Atributos HTML  Atributos HTML  Atributos fornecem informações adicionais aos elementos HTML;  Elementos HTML podem ou não ter atributos;  Atributos são sempre especificados nas tags de abertura;  Atributos são formados pelo seguinte conjunto: nome=”valor”  Valores de atributos sempre devem estar delimitados por aspas duplas ou simples; 24
  25. 25. Atributos HTML  Exemplo de atributo HTML  Links HTML são definidos pela tag <a>. O endereço do link é especificado pelo atributo href; 25 <html> <body> <a href=”http://www.sportrecife.com.br”> Ir para o site do Sport Club do Recife </a> </body> </html>
  26. 26. Tags de formatação
  27. 27. Tags de formatação  Tags de formatação em HTML  HTML fornece tags como <b> (negrito) e <i> (itálico) para formatação de texto;  Exemplo: 27 <html> <body> <b>Este texto será exibido em negrito</b><br/> <i>Este texto será exibido em itálico</i> </body> </html>
  28. 28. Tags de formatação  Tag de formatação de fontes em HTML  A partir da tag <font>, podemos formatar a cor, tamanho e tipo de fontes a ser utilizada no conteúdo do referido elemento;  Exemplo: 28 <html> <body> <font size=“5” face=“arial” color=“red”> Tamanho 5, fonte arial, cor vermelha </font> </body> </html>
  29. 29. Prática em Laboratório
  30. 30. Prática em Laboratório • Faça um documento HTML que estruture um currículo online (o seu!) – A atividade vale de 0 a 1 ponto para a nota do 1º estágio; – Data de entrega: Até 23/02/2016 • Enviar os arquivos para thyagomaia@gmail.com – Critérios de avaliação: Conteúdo (uso de texto, imagem, vídeo, etc.), Formatação, Organização do Código e Pesquisa (o aluno pesquisou e utilizou tags não apresentadas em sala de aula); – Os documentos deverão ser editados APENAS através dos softwares Notepad++, Notepad ou Gedit; 30

×