Buscar

02_HTML03_biblioteca

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

*
*
Desenvolvimento para Internet
Professora: Clênia Melo Mendonça
E-mail: cleniamendonca@gmail.com
INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA
Julho de 2014
*
*
PARTE 2
HTML
Hype Text Markup Language
*
*
Tópicos a serem abordados
Formulários
Layout do site
*
*
Formulário
São utilizados para passar dados para um servidor
Pode conter elementos de entrada como:
texto
checkbox
radio-buttons
botões de submissão
*
*
Formulário
Pode conter elementos:
Lista de seleção
Textarea
Conjunto de campos
Legenda
Rótulos
*
*
Formulário
O elemento de entrada - input type
Campos Texto
Define um campo de entrada no qual o usuário pode digitar texto
<input type="text" />
Exemplo:
<form>
 Nome: <input type="text" name="nome" /><br />
 Endereço: <input type="text" name="endereco" />
</form> 
*
*
Formulário
O elemento de entrada - input type
Campos Texto
Resultado
*
*
Formulário
O elemento de entrada - input type
Campos Textarea
É um elemento que permite a escrita de um texto com múltiplas linhas.
Exemplo:
<html>
 <body>
 <p> Elemento textarea
 </p> 
 <textarea rows="10" cols="30"> Digite um texto aqui. </textarea>
 </body>
</html>
*
*
Formulário
O elemento de entrada - input type
Resultado
*
*
Formulário
O elemento de entrada - input type
Campo de senha - password field
Define um campo de senha
<input type="password" />
Exemplo:
<form>
 Senha: <input type="password" name="pwd" />
</form>
*
*
Formulário
O elemento de entrada - input type
Campo de senha - password field
Resultado
*
*
Formulário
O elemento de entrada - input type
Radio Button
Define um botão no qual só pode ser selecionada apenas uma opção
<input type="radio" />
Exemplo:
<form>
<input type="radio" name="sexo" value="masculino" /> Masculino<br />
<input type="radio" name="sexo" value="feminino" /> Feminino
</form> 
*
*
Formulário
O elemento de entrada - input type
Radio Button
Resultado
*
*
Formulário
O elemento de entrada - input type
Checkbox
Permite selecionar uma ou mais opções numa lista de alternativas
<input type="checkbox" />
Exemplo:
<form>
<input type="checkbox" name="idioma" value="Português" /> Eu compreendo português<br />
<input type="checkbox" name="idioma" value="Inglês" /> Eu compreendo inglês <br />
</form>
*
*
Formulário
O elemento de entrada - input type
Checkbox
Resultado
*
*
Formulário
O elemento de entrada - input type
Botão de submissão
Utilizado para enviar dados para o servidor
O dados é envidado para uma página especificada no atributo action do formulário
O arquivo definido no atributo action geralmente realiza alguma coisa com o dado recebido.
<input type="submit" />
*
*
Formulário
O elemento de entrada - input type
Botão de submissão
Exemplo:
<form name="input" action="formPessoa.html" method="get">
Nome: <input type="text" name="usuario" />
<input type="submit" value="Submit" />
</form>
*
*
Formulário
O elemento de entrada - input type
Botão de submissão
Resultado
*
*
Formulário
O elemento de entrada - input type
Lista Drop-down 
Exemplo:
<html>
 <body>
 <form action="">
 <select name="Profissão">
 <option value="Analista">Analista de Sistema</option>
 <option value="Desenvolvedor">Desenvolvedor</option>
 <option value="Redes">Administrador de Rede</option>
 <option value="BancoDados">Administrador de Banco de Dados</option>
 </select>
 </form>
</body>
</html>
*
*
Formulário
O elemento de entrada - input type
Lista Drop-down 
Resultado
*
*
Formulário
Definindo um layout para o conjunto de dados
Exemplo:
<html>
<body>
<form action="">
<fieldset>
<legend>Dados Pessoais:</legend>
Nome completo: <input type="text" size="30" /><br />
E-mail: <input type="text" size="30" /><br />
Data de Nascimento: <input type="text" size="10" />
</fieldset>
</form>
</body>
</html>
*
*
Formulário
Definindo um layout para o conjunto de dados
Resultado
*
*
Cores
Site w3schools
http://www.w3schools.com/html/html_colors.asp
*
*
Trabalhando com o Layout
Utilizando Tabela
Exemplo:
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Título da página principal</h1>
</td>
</tr>
*
*
Trabalhando com o Layout
Utilizando Tabela
Exemplo:
<tr valign="top">
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;text-align:top;">
Aqui fica o conteúdo</td>
</tr>
*
*
Trabalhando com o Layout
Utilizando Tabela
Exemplo:
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Utilizando tabelas</td>
</tr>
</table>
*
*
Trabalhando com o Layout
Utilizando Tabela
Resultado
*
*
Trabalhando com o Layout
Utilizando elementos DIV
É um elemento que agrupa outros elementos HTML
Exemplo:
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Título Principal da página web</h1></div>
*
*
Trabalhando com o Layout
Utilizando elementos DIV
Exemplo:
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Aqui fica o conteúdo</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Aprendendo HTML</div>
</div>
</body>
*
*
Trabalhando com o Layout
Utilizando elementos DIV
Resultado
*
*
Atividade
Para o site da Biblioteca Virtual, acrescente TODOS os recursos que você acabou de aprender:
Na página que você criou para os usuários:
Links:
Página Principal – para link externo
Cadastro (de usuário) – para link dentro do próprio documento
Consulta (de usuário) – para link dentro do próprio documento
Informações (para o usuário) – para link dentro do próprio documento
*
*
Atividade
Para o site da Biblioteca Virtual, acrescente TODOS os recursos que você acabou de aprender:
Na página que você criou para os usuários:
Cadastro de Usuário - dados
Professor / Aluno
Matrícula
Login
Senha
Confirmar Senha
Nome
Email
Curso (oferecer opções pré-definidas)
Obs: Colocar estes campos dentro de um fieldset
*
*
Atividade
Para o site da Biblioteca Virtual, acrescente os recursos que você acabou de aprender:
Na página que você criou para os usuários:
Consulta de usuário
Pelo nome
Pela matrícula
Obs: Colocar estes campos dentro de um fieldset
Informações úteis para os usuários
*
*
Atividade
Para o site da Biblioteca Virtual, acrescente TODOS os recursos que você acabou de aprender:
Crie uma página somente para Sugestões
Deve conter um formulário com o nome do usuário, e-mail e uma área para descrever a sugestão.
*
*
Atividade 
Para ratificar o que foi visto em HTML, faça uso da mesma ideia para o link de Empréstimo
Links
Página Principal – para link externo
Emprestar – para link dentro do próprio documento
Consultar Empréstimo (de usuário) – para link dentro do próprio documento
Devolver – para link dentro do próprio documento
Informações – para link dentro do próprio documento
*
*
Atividade 
Para ratificar o que foi visto em HTML, faça uso da mesma ideia para o link de Empréstimo
Links
Empréstimo de Livros – dados
Matrícula
Opções de livros (por enquanto vai ser uma relação fixa de livros) – o aluno poderá pegar emprestado mais de um livro
Data do empréstimo
Data da devolução
Obs: Colocar estes campos dentro de um fieldset
*
*
Atividade 
Para ratificar o que foi visto em HTML,
faça uso da mesma ideia para o link de Empréstimo
Links
Devolução de Livros – dados
Matrícula
Relação de livros pega pelo aluno (por enquanto vai ser uma relação fixa de livros) – o aluno poderá devolver mais de um livro
Data efetiva da devolução
Obs: Colocar estes campos dentro de um fieldset
*
*
Atividade 
Para ratificar o que foi visto em HTML, faça uso da mesma ideia para o link de Empréstimo
Links
Consultar empréstimo – dados
Matrícula
Obs: Colocar estes campos dentro de um fieldset

Teste o Premium para desbloquear

Aproveite todos os benefícios por 3 dias sem pagar! 😉
Já tem cadastro?

Outros materiais