Tecnologias para Internet - 2013.1 - Aula 2

408 visualizações

Publicada em

Tecnologias para Internet - 2013.1 - Aula 2

Publicada em: Tecnologia
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
408
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
19
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Tecnologias para Internet - 2013.1 - Aula 2

  1. 1. Tecnologias para Internet Prof. Thyago Prof.º Thyago Maia Gestão da TI – 2013.1
  2. 2. Aula 2: Introdução ao HTML çObjetivos • Introduzir a linguagem HTML q g • 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  primeiro documento HTML 2
  3. 3. Introdução ao HTMLIntrodução ao HTML
  4. 4. Introdução ao HTML ç• HTML – Hypertext Markup Language, ou linguagem de  marcação de hipertexto; marcação de hipertexto; – Utilizada na descrição e produção de páginas  Web; W b – Lembre‐se: Não é uma linguagem de  programação!! – Composta por uma série de TAGs de marcação; p p ç ; 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>); –NNormalmente são utiilizadas em pares. Ex.: l ã iili d E • <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:<html><body><h1>Meu primeiro título</h1><p>Meu primeiro título</p></body></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
  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; i í ld á i – O texto entre <h1> e </h1> é apresentado em  destaque, como um título; – O texto entre <p> e </p> é apresentado em um  p /p p parágrafo; 9
  10. 10. Introdução ao HTML ç• Do que eu preciso para escrever documentos  HTML? – Um editor de texto: • Bloco de Notas; Bloco de Notas; • Notepad++; • Gedit (Linux); • Entre outros; – OBS: Sempre salve os arquivos com a extensão html ou htm OBS: Sempre salve os arquivos com a extensão .html ou .htm – Um navegador Web: Um navegador Web: • Firefox, IE, Chrome, etc.; 10
  11. 11. Exemplos de TagsExemplos de Tags HTML
  12. 12. Exemplos de Tags HTML p g 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:<html><body><h1>Título da página</h1><h2>Subtítulo</h2><h3>Subtítulo do subtítulo</h3></body></html> 12
  13. 13. Exemplos de Tags HTML p g Tag de Parágrafo É definida através das tags <p> e </p>; g p /p ; Exemplos:<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> p p p /p</body></html> / 13
  14. 14. Exemplos de Tags HTML p g Tag de Link É definida através das tags <a> e </a>; g / ; Exemplos:<html><body><a href=”http://www.sportrecife.com.br”>Ir para o site do Sport Club do Recife</a> /</body></html> / 14
  15. 15. Exemplos de Tags HTML p g Tag de Imagem É definida através das tag <img>; g g ; Exemplos:<html><body> y<img src=”bandeira.jpg” width=”104” height=”142” /></body></html> 15
  16. 16. Exemplos de Tags HTML p g Linhas HTML A tag <hr/> cria uma linha horizontal em uma página  HTML, podendo ser usada para separar conteúdo; Exemplo:<html><body> y<p>Sport Club do Recife</p><hr/> /<p>Campeão de 87!!!</p></body> / y</html> 16
  17. 17. Exemplos de Tags HTML p g 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;<html><body><!-- Isto é um comentário --><p>Parágrafo</p></body></html> 17
  18. 18. Exemplos de Tags HTML p g Quebras de Linha HTML Use a tag <br/> caso deseje pular uma linha em  g / j p um documento HTML; Exemplo:<html><body>Parágrafo<br/>Parágrafo</body></html> 18
  19. 19. Elementos HTMLElementos HTML
  20. 20. Elementos HTML Elementos HTML Um elemento HTML é o conjunto formado por  j p uma tag de abertura, uma tag de fechamento e  seu conteúdo (o que estiver entre as tags); ( q g );<html><body><a href=”http://www.sportrecife.com.br”>Ir para o site do Sport Club do Recife</a></body> Um elemento HTML</html> 20
  21. 21. Elementos HTMLSintaxe 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); i ) Elementos sem conteúdo são fechados na própria tag de  abertura (como na tag de imagem); abertura (como na tag de imagem); Vários elementos HTML podem ter atributos (como na tag de imagem e de link); de imagem e de link); 21
  22. 22. Elementos HTML Aninhamento de elementos HTML Alguns elementos HTML podem ser aninhados,  g p , isto é, podemos inserir elementos HTML como  conteúdo de outros elementos; ;<html><body> y<p>Sport Club do Recife</p><p><img src=”fig.jpg” widht=”200” height=”10” p g g jpg g/></p><p><b>O melhor do Nordeste</b></p></body></html> 22
  23. 23. Atributos HTMLAtributos HTML
  24. 24. Atributos HTMLAtributos HTML Atributos fornecem informações adicionais aos  ç elementos HTML; Elementos HTML podem ou não ter atributos; 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” ” l ” 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  p g endereço do link é especificado pelo atributo  href; ;<html><body> y<a href=”http://www.sportrecife.com.br”>Ir para o site do Sport Club do Recife p p</a></body> / y</html> 25
  26. 26. Tags de formatação de formatação
  27. 27. Tags de formatação g ç Tags de formatação em HTML HTML fornece tags como <b> (negrito) e <i>  g ( g ) (itálico) para formatação de texto; Exemplo:<html><body> y<b>Este texto será exibido em negrito</b><br/><i>Este texto será exibido em itálico</i> /</body></html> / 27
  28. 28. Tags de formatação g ç 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:<html><body><b d ><font size=“5” face=“arial” color=“red”>Tamanho 5 f t arial, cor vermelhaT h 5, fonte i l lh</font></body></b d ></html> 28
  29. 29. Tabelas HTMLTabelas HTML
  30. 30. Tabelas HTML Tabelas HTML São definidas a partir da tag <table>; Uma tabela é dividida em linhas (Tag <tr>); Cada linha é dividida em células (Tag <td>);<html><body> <table> <t bl > <tr> <td>Linha 1 – Coluna 1</td> <td>Linha <td>Li h 1 – C l Coluna 1</td> </tr> </table></body></b d ></html> 30
  31. 31. Listas HTMLListas HTML
  32. 32. Listas HTML Listas não ordenadas em HTML São definidas a partir da tag <ul>; p g ; Cada elemento da lista é definido a partir da tag <li>;<html><body> <ul> <li>Elemento 1</li> <li>Elemento 2</li> <li>El t </ul></body></b d ></html> 32
  33. 33. Listas HTML Listas ordenadas em HTML São definidas a partir da tag <ol>; p g ; Cada elemento da lista é definido a partir da tag <li>;<html><body> <ol> <li>Elemento 1</li> <li>Elemento 2</li> <li>El t </ol></body></b d ></html> 33
  34. 34. Listas HTML Listas de Definição em HTML São definidas a partir da tag <dl>; Tal lista possui vários itens (Tag <dt>); Cada item possui uma descrição (Tag <dd>);<html><body> <dl> <dt>Sport</dt> <dd>Campeão Brasileiro de 87</dd> <dt>Botafogo-PB</dt> <dt>B t f PB</dt> <dd>O maior campeão estadual da Paraíba</dd> </dl></body></b d ></html> 34
  35. 35. Formulários HTMLFormulários HTML
  36. 36. Formulários HTML Formulários HTML A tag <form> é utilizada na definição de um  g ç formulário;<html><body> <form> <!-- Elementos de entrada --> </form></body></html> 36
  37. 37. Formulários HTML Formulários HTML (Campos de Texto) A tag <input type=“text” /> é utilizada na  g p yp / definição de um campo de texto com uma linha;<html><body> <form> Nome: <input type=“text” name=“nome” /> <br/> Sobrenome: <input type=“text” name=“sobrenome” type= text name= sobrenome/> </form></body></html> 37
  38. 38. Formulários HTML Formulários HTML (Campos de Senha) A tag <input type=“password” /> é utilizada na  g p yp p / definição de um campo de senha;<html><body> <form> Senha: <input type=“password” name=“senha” /> </form></body></html> 38
  39. 39. Formulários HTML Formulários HTML (Radio Buttons) A tag <input type=“radio” /> é utilizada na definição de  um radio button; Radio Buttons permitem aos usuários selecionarem  apenas uma opção em uma lista;<html><body><b d ><form><input type=“radio” name=“time” value=“SPT” />Sport<br/><b /><input type=“radio” name=“time” value=“FLA” />Flamengo</form></f ></body> 39</html>
  40. 40. Formulários HTML Formulários HTML (Checkboxes) A tag <input type=“checkbox” /> é utilizada na definição de um  checkbox;  h kb Checkboxes permitem aos usuários selecionarem uma ou mais  opções em uma lista; pç ;<html><body><form><input type=“checkbox” name=“carro” value=“ferrari”/>Ferrari<br/><input type=“checkbox” name=“carro” value=“Fusca”/> Fusca</form></body></html> 40
  41. 41. Formulários HTMLFormulários HTML (Botão de Submissão) A tag <input type=“submit” /> é utilizada na definição de  um botão de submissão; um botão de submissão; Um botão de submissão é usado para enviar os dados do  p formulário para um servidor; ; Os dados são enviados para uma página específica,  indicada no atributo action da tag <form>; O arquivo indicado no referido atributo normalmente  executa algum processamento nos dados enviados pelo  formulário; 41
  42. 42. Formulários HTML Formulários HTML (Botão de Submissão) Exemplo: p<html><body><form action=“recebe.php” method=“GET”>Nome: <input type=“text” name=“nome” /> type= text name= nome<input type=“submit” value=“Enviar” /></form></body></html> 42
  43. 43. Frames HTMLFrames HTML
  44. 44. Frames HTMLFrames HTML A partir dos frames, uma ou mais páginas podem ser  apresentadas ao mesmo tempo na mesma janela/aba de  um navegador; Cada documento é chamado de frame, e cada frame é  independente dos demais; Desvantagens: D Frames não serão suportados em versões futuras do HTML; Frames são difíceis de usar; Frames são difíceis de usar; Um desenvolvedor Web deve manter sua atenção para várias  páginas ou mesmo tempo; 44
  45. 45. Frames HTML O elemento frameset Um frameset é um conjunto de um ou mais frames; Cada frame especifica um documento HTML a parte; Tal elemento especifica como cada coluna ou linha de  páginas serão apresentadas no navegador;<html><ht l><frameset cols=“25%, 75%”><frame src=“www.sportrecife.com.br” /><frame src=“globoesporte.com/pe” /><f “ l b t / ”</frameset></html> 45
  46. 46. Frames HTML Iframes HTML Um iframe é utilizado para apresentar uma  p p página HTML dentro de outra; Exemplo:<html><body><iframe src="demo_iframe.htm" width="200“height= 200 ></iframe>height="200"></iframe></body></html> 46

×