Tecnologias para Internet
Prof.º Thyago MaiaGestão da TI – 2014.1
Objetivos
Aula 2: 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
Introdução ao HTML
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>);
5
<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>;
7
<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>;
8
<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;
10
<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;
11
<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;
12
<html><body>
<form>
Senha: <input type=“password” name=“senha” />
</form>
</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;
13
<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;
14
<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 (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>
Top Related