Tecnologias para Internet - 2015.1 - Aula 3

347 visualizações

Publicada em

Tecnologias para Internet - 2015.1 - Aula 3

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
347
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
22
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Tecnologias para Internet - 2015.1 - Aula 3

  1. 1. Tecnologias para Internet Prof.º Thyago Maia Gestão da TI – 2015.1
  2. 2. Objetivos Aula 3: 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. 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 (Text Area)  A tag <textarea> é utilizada na definição de uma área de texto (com mais de uma linha); 13 <html> <body> <textarea name=“texto” rows=“5” cols=“60”> Digite aqui o texto </textarea> </body> </html>
  14. 14. 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; 14 <html> <body> <form> <input type=“radio” name=“time” value=“SPT” />Sport <br/> <input type=“radio” name=“time” value=“FLA” /> Flamengo </form> </body> </html>
  15. 15. 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; 15 <html> <body> <form> <input type=“checkbox” name=“carro” value=“ferrari” />Ferrari <br/> <input type=“checkbox” name=“carro” value=“Fusca” /> Fusca </form> </body> </html>
  16. 16. Formulários HTML  Formulários HTML (Select)  A tag <select> é utilizada na definição de listas drop-down (comboboxes);  Cada opção da lista é definida pela tag <option>; 16 <html> <body> <form> <select name=“Time”> <option value=“Sport”>Sport</option> <option value=“Grêmio”>Grêmio</option> <option value=“Vasco”>Vasco</option> </select> </form> </body> </html>
  17. 17. 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; 17
  18. 18. Formulários HTML  Formulários HTML (Botão de Submissão)  Exemplo: 18 <html> <body> <form action=“recebe.php” method=“GET”> Nome: <input type=“text” name=“nome” /> <input type=“submit” value=“Enviar” /> </form> </body> </html>
  19. 19. Exercícios
  20. 20. Exercícios  Faça um Front-End HTML que siga as especificações a seguir: 20 Tag de título Links dentro de uma tabela Background Cinza Fonte Arial
  21. 21. Exercícios 21 Background Cinza Fonte Arial
  22. 22. Exercícios 22 Background Cinza Fonte Arial

×