Baixe o app para aproveitar ainda mais
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
Compartilhar