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

22
Programação Dinâmica para Web Prof.º Thyago Maia Sistemas para Internet

Transcript of Programação Dinâmica para Web - 2016.1 - Aula 3

Page 1: Programação Dinâmica para Web - 2016.1 - Aula 3

Programação Dinâmica para Web

Prof.º Thyago MaiaSistemas para Internet

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

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

Page 3: Programação Dinâmica para Web - 2016.1 - Aula 3

Introdução ao HTML

Page 4: Programação Dinâmica para Web - 2016.1 - Aula 3

Tabelas HTML

Page 5: Programação Dinâmica para Web - 2016.1 - Aula 3

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>

Page 6: Programação Dinâmica para Web - 2016.1 - Aula 3

Listas HTML

Page 7: Programação Dinâmica para Web - 2016.1 - Aula 3

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>

Page 8: Programação Dinâmica para Web - 2016.1 - Aula 3

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>

Page 9: Programação Dinâmica para Web - 2016.1 - Aula 3

Formulários HTML

Page 10: Programação Dinâmica para Web - 2016.1 - Aula 3

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>

Page 11: Programação Dinâmica para Web - 2016.1 - Aula 3

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>

Page 12: Programação Dinâmica para Web - 2016.1 - Aula 3

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>

Page 13: Programação Dinâmica para Web - 2016.1 - Aula 3

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>

Page 14: Programação Dinâmica para Web - 2016.1 - Aula 3

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>

Page 15: Programação Dinâmica para Web - 2016.1 - Aula 3

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>

Page 16: Programação Dinâmica para Web - 2016.1 - Aula 3

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>

Page 17: Programação Dinâmica para Web - 2016.1 - Aula 3

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

Page 18: Programação Dinâmica para Web - 2016.1 - Aula 3

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>

Page 19: Programação Dinâmica para Web - 2016.1 - Aula 3

Exercícios

Page 20: Programação Dinâmica para Web - 2016.1 - Aula 3

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

Page 21: Programação Dinâmica para Web - 2016.1 - Aula 3

Exercícios

21

Background Cinza

Fonte Arial

Page 22: Programação Dinâmica para Web - 2016.1 - Aula 3

Exercícios

22

Background Cinza

Fonte Arial