programação dinâmica para web - 2016.1 - aula 3
TRANSCRIPT
![Page 1: Programação Dinâmica para Web - 2016.1 - Aula 3](https://reader036.vdocuments.site/reader036/viewer/2022070509/58a80d091a28ab3d6e8b5e25/html5/thumbnails/1.jpg)
Programação Dinâmica para Web
Prof.º Thyago MaiaSistemas para Internet
![Page 2: Programação Dinâmica para Web - 2016.1 - Aula 3](https://reader036.vdocuments.site/reader036/viewer/2022070509/58a80d091a28ab3d6e8b5e25/html5/thumbnails/2.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022070509/58a80d091a28ab3d6e8b5e25/html5/thumbnails/3.jpg)
Introdução ao HTML
![Page 4: Programação Dinâmica para Web - 2016.1 - Aula 3](https://reader036.vdocuments.site/reader036/viewer/2022070509/58a80d091a28ab3d6e8b5e25/html5/thumbnails/4.jpg)
Tabelas HTML
![Page 5: Programação Dinâmica para Web - 2016.1 - Aula 3](https://reader036.vdocuments.site/reader036/viewer/2022070509/58a80d091a28ab3d6e8b5e25/html5/thumbnails/5.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022070509/58a80d091a28ab3d6e8b5e25/html5/thumbnails/6.jpg)
Listas HTML
![Page 7: Programação Dinâmica para Web - 2016.1 - Aula 3](https://reader036.vdocuments.site/reader036/viewer/2022070509/58a80d091a28ab3d6e8b5e25/html5/thumbnails/7.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022070509/58a80d091a28ab3d6e8b5e25/html5/thumbnails/8.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022070509/58a80d091a28ab3d6e8b5e25/html5/thumbnails/9.jpg)
Formulários HTML
![Page 10: Programação Dinâmica para Web - 2016.1 - Aula 3](https://reader036.vdocuments.site/reader036/viewer/2022070509/58a80d091a28ab3d6e8b5e25/html5/thumbnails/10.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022070509/58a80d091a28ab3d6e8b5e25/html5/thumbnails/11.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022070509/58a80d091a28ab3d6e8b5e25/html5/thumbnails/12.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022070509/58a80d091a28ab3d6e8b5e25/html5/thumbnails/13.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022070509/58a80d091a28ab3d6e8b5e25/html5/thumbnails/14.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022070509/58a80d091a28ab3d6e8b5e25/html5/thumbnails/15.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022070509/58a80d091a28ab3d6e8b5e25/html5/thumbnails/16.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022070509/58a80d091a28ab3d6e8b5e25/html5/thumbnails/17.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022070509/58a80d091a28ab3d6e8b5e25/html5/thumbnails/18.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022070509/58a80d091a28ab3d6e8b5e25/html5/thumbnails/19.jpg)
Exercícios
![Page 20: Programação Dinâmica para Web - 2016.1 - Aula 3](https://reader036.vdocuments.site/reader036/viewer/2022070509/58a80d091a28ab3d6e8b5e25/html5/thumbnails/20.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022070509/58a80d091a28ab3d6e8b5e25/html5/thumbnails/21.jpg)
Exercícios
21
Background Cinza
Fonte Arial
![Page 22: Programação Dinâmica para Web - 2016.1 - Aula 3](https://reader036.vdocuments.site/reader036/viewer/2022070509/58a80d091a28ab3d6e8b5e25/html5/thumbnails/22.jpg)
Exercícios
22
Background Cinza
Fonte Arial