Tecnologias para Internet 
Prof.º Thyago Maia 
Gestão da TI – 2014.2
Aula 2: Introdução ao HTML 
Objetivos 
• Introduzir a linguagem HTML 
• Enquadrar a tecnologia em sua 
respectiva camada n...
Introdução ao HTML
Introdução ao HTML 
• HTML 
– Hypertext Markup Language, ou linguagem de 
marcação de hipertexto; 
– Utilizada na descriçã...
Arquitetura de Sistemas Web 
• Qual camada a linguagem HTML se enquadra? 
5
Arquitetura de Sistemas Web 
• Qual camada a linguagem HTML se enquadra? 
6
Introdução ao HTML 
• Tags HTML 
– Palavras chave, digitadas entre < e > (Ex.: <b>); 
– Normalmente são utiilizadas em par...
Introdução ao HTML 
• Exemplo de um documento HTML: 
– Digite o exemplo acima em um editor de texto 
simples, como o notep...
Introdução ao HTML 
• Onde: 
– O texto entre <html> e </html> descreve a página 
Web; 
– O texto entre <body> e </body> se...
Introdução ao HTML 
• Do que eu preciso para escrever documentos 
HTML? 
– Um editor de texto: 
• Bloco de Notas; 
• Notep...
Exemplos de Tags HTML
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...
Exemplos de Tags HTML 
 Tag de Parágrafo 
 É definida através das tags <p> e </p>; 
 Exemplos: 
13 
<html> 
<body> 
<p>...
Exemplos de Tags HTML 
 Tag de Link 
 É definida através das tags <a> e </a>; 
 Exemplos: 
14 
<html> 
<body> 
<a href=...
Exemplos de Tags HTML 
 Tag de Imagem 
 É definida através das tag <img>; 
 Exemplos: 
15 
<html> 
<body> 
<img src=”ba...
Exemplos de Tags HTML 
 Linhas HTML 
 A tag <hr/> cria uma linha horizontal em uma página 
HTML, podendo ser usada para ...
Exemplos de Tags HTML 
 Comentários HTML 
 Comentários podem ser inseridos em um código HTML 
para torná-lo mais legível...
Exemplos de Tags HTML 
 Quebras de Linha HTML 
 Use a tag <br/> caso deseje pular uma linha em 
um documento HTML; 
 Ex...
Elementos HTML
Elementos HTML 
 Elementos HTML 
 Um elemento HTML é o conjunto formado por 
uma tag de abertura, uma tag de fechamento ...
Elementos HTML 
 Sintaxe dos elementos HTML 
 Um elemento HTML começa com uma tag de abertura e 
termina com uma tag de ...
Elementos HTML 
 Aninhamento de elementos HTML 
 Alguns elementos HTML podem ser aninhados, 
isto é, podemos inserir ele...
Atributos HTML
Atributos HTML 
 Atributos HTML 
 Atributos fornecem informações adicionais aos 
elementos HTML; 
 Elementos HTML podem...
Atributos HTML 
 Exemplo de atributo HTML 
 Links HTML são definidos pela tag <a>. O 
endereço do link é especificado pe...
Tags de formatação
Tags de formatação 
 Tags de formatação em HTML 
 HTML fornece tags como <b> (negrito) e <i> 
(itálico) para formatação ...
Tags de formatação 
 Tag de formatação de fontes em HTML 
 A partir da tag <font>, podemos formatar a cor, tamanho 
e ti...
Prática em Laboratório
Prática em Laboratório 
• Faça um documento HTML que estruture um 
currículo online (o seu!) 
– A atividade vale de 0 a 2 ...
Próximos SlideShares
Carregando em…5
×

Tecnologias para Internet - 2014.2 - Aula 2

331 visualizações

Publicada em

Tecnologias para Internet - 2014.2 - 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
331
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
7
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Tecnologias para Internet - 2014.2 - Aula 2

  1. 1. Tecnologias para Internet Prof.º Thyago Maia Gestão da TI – 2014.2
  2. 2. Aula 2: Introdução ao HTML Objetivos • 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 2 pontos para a nota do 1º estágio; – Data de entrega: Até 26/08/2014 • Enviar o site para provas@thyagomaia.net – 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

×