tecnologias para internet - 2016.2 - aula 3
Post on 09-Jan-2017
139 Views
Preview:
TRANSCRIPT
Tecnologias para Internet
Prof.º Thyago Maia
Tabelas HTML
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>);
3
<html><body>
<table><tr>
<td>Linha 1 – Coluna 1</td><td>Linha 1 – Coluna 1</td>
</tr></table>
</body></html>
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>;
5
<html><body>
<ul><li>Elemento 1</li><li>Elemento 2</li>
</ul>
</body></html>
Listas HTML
Listas ordenadas em HTML São definidas a partir da tag <ol>; Cada elemento da lista é definido a partir da tag
<li>;
6
<html><body>
<ol><li>Elemento 1</li><li>Elemento 2</li>
</ol>
</body></html>
Formulários HTML
Formulários HTML
Formulários HTML A tag <form> é utilizada na definição de um
formulário;
8
<html><body>
<form>
<!-- Elementos de entrada -->
</form>
</body></html>
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;
9
<html><body>
<form>Nome: <input type=“text” name=“nome” /><br/>Sobrenome: <input type=“text”
name=“sobrenome” /></form>
</body></html>
Formulários HTML
Formulários HTML (Campos de Senha) A tag <input type=“password” /> é utilizada na
definição de um campo de senha;
10
<html><body>
<form>
Senha: <input type=“password” name=“senha” />
</form>
</body></html>
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);
11
<html><body>
<textarea name=“texto” rows=“5” cols=“60”>Digite aqui o texto
</textarea>
</body></html>
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;
12
<html><body>
<form><input type=“radio” name=“time” value=“SPT”
/>Sport<br/>
<input type=“radio” name=“time” value=“FLA” /> Flamengo
</form></body></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;
13
<html><body>
<form><input type=“checkbox” name=“carro”
value=“ferrari” />Ferrari<br/>
<input type=“checkbox” name=“carro” value=“Fusca” /> Fusca
</form></body></html>
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>;
14
<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>
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:
16
<html><body>
<form action=“recebe.php” method=“GET”>Nome: <input type=“text” name=“nome” /><input type=“submit” value=“Enviar” /></form>
</body></html>
Exercícios
Exercícios Faça um Front-End HTML que siga as
especificações a seguir:
18
Tag de título
Links dentro de uma tabela
Background Cinza
Fonte Arial
Exercícios
19
Background Cinza
Fonte Arial
Exercícios
20
Background Cinza
Fonte Arial
top related