Tecnologias para Internet - 2014.1 - Aula 3
Upcoming SlideShare
Loading in...5
×
 

Tecnologias para Internet - 2014.1 - Aula 3

on

  • 695 views

Tecnologias para Internet - 2014.1 - Aula 3

Tecnologias para Internet - 2014.1 - Aula 3

Statistics

Views

Total Views
695
Views on SlideShare
695
Embed Views
0

Actions

Likes
0
Downloads
26
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Tecnologias para Internet - 2014.1 - Aula 3 Tecnologias para Internet - 2014.1 - Aula 3 Presentation Transcript

  • Tecnologias para Internet Prof.º Thyago Maia Gestão da TI – 2014.1
  • 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
  • Introdução ao HTML View slide
  • Tabelas HTML View slide
  • 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> <tr> <td>Linha 1 – Coluna 1</td> <td>Linha 1 – Coluna 1</td> </tr> </table> </body> </html> 5
  • Listas HTML
  • 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>; <html> <body> <ul> <li>Elemento 1</li> <li>Elemento 2</li> </ul> </body> </html> 7
  • Listas HTML  Listas ordenadas em HTML   São definidas a partir da tag <ol>; Cada elemento da lista é definido a partir da tag <li>; <html> <body> <ol> <li>Elemento 1</li> <li>Elemento 2</li> </ol> </body> </html> 8
  • Formulários HTML
  • Formulários HTML  Formulários HTML  A tag <form> é utilizada na definição de um formulário; <html> <body> <form> <!-- Elementos de entrada --> </form> </body> </html> 10
  • 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; <html> <body> <form> Nome: <input type=“text” name=“nome” /> <br/> Sobrenome: <input type=“text” name=“sobrenome” /> </form> </body> </html> 11
  • Formulários HTML  Formulários HTML (Campos de Senha)  A tag <input type=“password” /> é utilizada na definição de um campo de senha; <html> <body> <form> Senha: <input type=“password” name=“senha” /> </form> </body> </html> 12
  • 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> 13 </html>
  • 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> 14 </html> 
  • 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
  • Formulários HTML  Formulários HTML (Botão de Submissão)  Exemplo: <html> <body> <form action=“recebe.php” method=“GET”> Nome: <input type=“text” name=“nome” /> <input type=“submit” value=“Enviar” /> </form> </body> </html> 16