Programação Dinâmica para
Web
Prof.º Thyago Maia
Sistemas para Internet
Objetivos
Aula 2: Introdução ao HTML
• Introduzir a linguagem HTML
• Enquadrar a tecnologia em sua
respectiva camada na ar...
Introdução ao HTML
Introdução ao HTML
• HTML
– Hypertext Markup Language, ou linguagem de
marcação de hipertexto;
– Utilizada na descrição e ...
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 pares....
Introdução ao HTML
• Exemplo de um documento HTML:
– Digite o exemplo acima em um editor de texto
simples, como o notepad,...
Introdução ao HTML
• Onde:
– O texto entre <html> e </html> descreve a página
Web;
– O texto entre <body> e </body> será o...
Introdução ao HTML
• Do que eu preciso para escrever documentos
HTML?
– Um editor de texto:
• Bloco de Notas;
• Notepad++;...
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, a...
Exemplos de Tags HTML
 Tag de Parágrafo
 É definida através das tags <p> e </p>;
 Exemplos:
13
<html>
<body>
<p>Sport C...
Exemplos de Tags HTML
 Tag de Link
 É definida através das tags <a> e </a>;
 Exemplos:
14
<html>
<body>
<a href=”http:/...
Exemplos de Tags HTML
 Tag de Imagem
 É definida através das tag <img>;
 Exemplos:
15
<html>
<body>
<img src=”bandeira....
Exemplos de Tags HTML
 Linhas HTML
 A tag <hr/> cria uma linha horizontal em uma página
HTML, podendo ser usada para sep...
Exemplos de Tags HTML
 Comentários HTML
 Comentários podem ser inseridos em um código HTML
para torná-lo mais legível e ...
Exemplos de Tags HTML
 Quebras de Linha HTML
 Use a tag <br/> caso deseje pular uma linha em
um documento HTML;
 Exempl...
Elementos HTML
Elementos HTML
 Elementos HTML
 Um elemento HTML é o conjunto formado por
uma tag de abertura, uma tag de fechamento e
s...
Elementos HTML
 Sintaxe dos elementos HTML
 Um elemento HTML começa com uma tag de abertura e
termina com uma tag de fec...
Elementos HTML
 Aninhamento de elementos HTML
 Alguns elementos HTML podem ser aninhados,
isto é, podemos inserir elemen...
Atributos HTML
Atributos HTML
 Atributos HTML
 Atributos fornecem informações adicionais aos
elementos HTML;
 Elementos HTML podem ou ...
Atributos HTML
 Exemplo de atributo HTML
 Links HTML são definidos pela tag <a>. O
endereço do link é especificado pelo ...
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 de ...
Tags de formatação
 Tag de formatação de fontes em HTML
 A partir da tag <font>, podemos formatar a cor, tamanho
e tipo ...
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 1 pon...
Próximos SlideShares
Carregando em…5
×

Programação Dinâmica para Web - 2016.1 - Aula 2

575 visualizações

Publicada em

Programação Dinâmica para Web - 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
575
No SlideShare
0
A partir de incorporações
0
Número de incorporações
106
Ações
Compartilhamentos
0
Downloads
11
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Programação Dinâmica para Web - 2016.1 - Aula 2

  1. 1. Programação Dinâmica para Web Prof.º Thyago Maia Sistemas para Internet
  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é 18/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

×