Tecnologias para Internet - 2014.2 - Aula 3

252 visualizações

Publicada em

Tecnologias para Internet - 2014.2 - Aula 3

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

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

Nenhuma nota no slide

Tecnologias para Internet - 2014.2 - Aula 3

  1. 1. Tecnologias para Internet Prof.º Thyago Maia Gestão da TI – 2014.2
  2. 2. Aula 3: 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. Tabelas HTML
  5. 5. 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>); 5 <html> <body> <table> <tr> <td>Linha 1 – Coluna 1</td> <td>Linha 1 – Coluna 1</td> </tr> </table> </body> </html>
  6. 6. Listas HTML
  7. 7. Listas HTML  Listas não ordenadas em HTML  São definidas a partir da tag <ul>;  Cada elemento da lista é definido a partir da tag <li>; 7 <html> <body> <ul> <li>Elemento 1</li> <li>Elemento 2</li> </ul> </body> </html>
  8. 8. Listas HTML  Listas ordenadas em HTML  São definidas a partir da tag <ol>;  Cada elemento da lista é definido a partir da tag <li>; 8 <html> <body> <ol> <li>Elemento 1</li> <li>Elemento 2</li> </ol> </body> </html>
  9. 9. Formulários HTML
  10. 10. Formulários HTML  Formulários HTML  A tag <form> é utilizada na definição de um formulário; 10 <html> <body> <form> <!-- Elementos de entrada --> </form> </body> </html>
  11. 11. Formulários HTML  Formulários HTML (Campos de Texto)  A tag <input type=“text” /> é utilizada na definição de um campo de texto com uma linha; 11 <html> <body> <form> Nome: <input type=“text” name=“nome” /> <br/> Sobrenome: <input type=“text” name=“sobrenome” /> </form> </body> </html>
  12. 12. Formulários HTML  Formulários HTML (Campos de Senha)  A tag <input type=“password” /> é utilizada na definição de um campo de senha; 12 <html> <body> <form> Senha: <input type=“password” name=“senha” /> </form> </body> </html>
  13. 13. 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> <form> <input type=“radio” name=“time” value=“SPT” />Sport <br/> <input type=“radio” name=“time” value=“FLA” /> Flamengo </form> </body> </html> 13
  14. 14. Formulários HTML  Formulários HTML (Checkboxes)  A tag <input type=“checkbox” /> é utilizada na definição de um checkbox;  Checkboxes permitem aos usuários selecionarem uma ou mais opções em uma lista; <html> <body> <form> <input type=“checkbox” name=“carro” value=“ferrari” />Ferrari <br/> <input type=“checkbox” name=“carro” value=“Fusca” /> Fusca </form> </body> </html> 14
  15. 15. Formulários HTML  Formulá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 é usado para enviar os dados do 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; 15
  16. 16. Formulários HTML  Formulários HTML (Botão de Submissão)  Exemplo: 16 <html> <body> <form action=“recebe.php” method=“GET”> Nome: <input type=“text” name=“nome” /> <input type=“submit” value=“Enviar” /> </form> </body> </html>

×