Curso de Gestão da Informação Prof. Dr. Daniel A. Furtado Módulo 2 Universidade Federal de...
-
Upload
maria-de-mendonca-amorim -
Category
Documents
-
view
218 -
download
1
Transcript of Curso de Gestão da Informação Prof. Dr. Daniel A. Furtado Módulo 2 Universidade Federal de...
Programação para InternetCurso de Gestão da Informação
Prof. Dr. Daniel A. FurtadoMódulo 2
Universidade Federal de UberlândiaFaculdade de Computação
Programação para Internet - Prof. Dr. Daniel A. Furtado 2
Histórico da Internet, conceitos fundamentais, arquiteturas...
Introdução à linguagem HTML
Estrutura básica de um documento: tags <html>, <body>, <head>, <meta>, <title>, <p>, <strong>, <em>
Títulos de seções: <h1>, <h2>, etc.
Inserção de imagens: <img>
Hiperlinks e hiperlinks com imagens: <a>
Alguns caracteres especiais: < >
Listas: <ul>, <ol>, <li>
Na Aula Passada
Programação para Internet - Prof. Dr. Daniel A. Furtado 3
HTML: continuação
Tabelas
Nesta aula
Programação para Internet - Prof. Dr. Daniel A. Furtado 4
HTML – Tabela Simples – Tag <table>1. <!DOCTYPE html>2. <html>3. <head><meta charset="UTF-8"><title>Tabela simples</title></head>4. <body>
5. <table border="1" width="50%"> <!-- Inicio da tabela -->6.7. <tr> <!–- início da primeira linha -->8. <td>Aluno</td> <!-- primeira coluna -->9. <td>Prova 1</td> <!-- segunda coluna -->10. <td>Prova 2</td> <!-- terceira coluna -->11. </tr> <!-- fim da primeira linha -->
12. <tr> <!-- início da segunda linha -->13. <td>Marcelo</td>14. <td>28,5</td>15. <td>19,0</td>16. </tr>17. <tr>18. <td>Juliana</td>19. <td>17,0</td>20. <td>23,5</td>21. </tr>22.23. </table>24.25. </body>26. </html>
Programação para Internet - Prof. Dr. Daniel A. Furtado 5
Resultado:
OBS: os atributos border e width utilizados anteriormente na tabela são considerados obsoletos. Tais funcionalidades serão realizadas posteriormente utilizando CSS.
HTML – Tabela Simples
Programação para Internet - Prof. Dr. Daniel A. Furtado 6
Tabela com Cabeçalho, Corpo e Rodapé1. <table border="1" width="50%"> <!-- Inicio da tabela -->2.3. <!-- Título da tabela -->4. <caption><strong> Notas dos Alunos </strong></caption>5.6. <thead> <!-- Cabeçalho da tabela, em destaque -->7. <tr>8. <!-- <th> table head: Destaca o texto da célula -->
<th>Aluno</th>9. <th>Prova 1</th>10. <th>Prova 2</th>11. </tr>12. </thead>13.14. <tbody> <!– Corpo da tabela -->15. <tr>16. <td>Marcelo</td><td>28,5</td><td>19,0</td>17. </tr>18. <tr>19. <td>Juliana</td><td>17,0</td><td>23,5</td>20. </tr>21. </tbody>22.23. <tfoot> <!– Rodapé da tabela, em destaque -->24. <th>Média</th><th>22,75</th><th>21,25</th>25. </tfoot> 26. </table>
Programação para Internet - Prof. Dr. Daniel A. Furtado 7
Resultado:
Tabela com Cabeçalho, Corpo e Rodapé
Programação para Internet - Prof. Dr. Daniel A. Furtado 8
Linhas e colunas podem ser expandidas para ocupar mais de uma célula da tabela utilizando as tags <rowspan> e <colspan>
Expandindo Linhas e Colunas da Tabela
1. <table border="1" width="50%">2. <tr>3. <th></th>
4. <!-- mescla duas colunas -->5. <th colspan="2">Provas</th>6. <!– neste caso não se coloca a 3ª coluna -->
7. </tr>8.9. <tr>10. <td>Aluno</td><td>Prova 1</td><td>Prova
2</td>11. </tr>12. <tr>13. <td>Marcelo</td><td>28,5</td><td>19,0</td>14. </tr>15. <tr>16. <td>Juliana</td><td>17,0</td><td>23,5</td>17. </tr>18.19. </table>
Programação para Internet - Prof. Dr. Daniel A. Furtado 9
Resultado:
Expandindo Linhas e Colunas da Tabela
Programação para Internet - Prof. Dr. Daniel A. Furtado 10
Expandindo Linhas e Colunas da Tabela
1. <table border="1" width="50%">2. <tr>3. <td>Aluno</td>4. <td>Prova 1</td>5. <td>Prova 2</td>6. </tr>
7. <tr>8. <td>Marcelo</td>9. <td rowspan="2"> - </td>10. <td>19,0</td>11. </tr>12. <tr>13. <td>Juliana</td>14.15. <!-- <td>17,0</td> Esta célula precisa ser removida --
>16.17. <td>23,5</td>18. </tr>19.20. </table>
Programação para Internet - Prof. Dr. Daniel A. Furtado 11
Resultado:
Expandindo Linhas e Colunas da Tabela
Programação para Internet - Prof. Dr. Daniel A. Furtado 12
Expandindo Linhas e Colunas da Tabela
Outro exemplo:
Programação para Internet - Prof. Dr. Daniel A. Furtado 13
Expandindo Linhas e Colunas da Tabela
1. <table border="1" width="50%">2. <tr>3. <td colspan="2">Linha 1, cel 1</td>4. <td>Linha 1, cel 2</td>5. </tr>6. <tr>7. <td>Linha 2, cel 1</td>8. <td>Linha 2, cel 2</td>9. <td>Linha 2, cel 3</td>10. </tr>11. <tr>12. <td>Linha 3, cel 1</td>13. <td rowspan="2">Linha 3, cel 2</td>14. <td>Linha 3, cel 3</td>15. </tr>16. <tr>17. <td>Linha 4, cel 1</td>18. <td>Linha 4, cel 3</td>19. </tr>20. </table>
Código HTML da tabela anterior:
Programação para Internet - Prof. Dr. Daniel A. Furtado 14
Introdução à Linguagem HTMLFormulários
Programação para Internet - Prof. Dr. Daniel A. Furtado 15
Tags <form> e <input>
Formulários em HTML
1. <html>2. <head>3. <meta charset="UTF-8">4. <title>Primeiro Formulário</title>5. </head>6. <body>
7. <form>8. Usuário: 9. <br> 10. <input type="text" name="usuario"> <br>11. Senha: 12. <br>13. <input type="password" name="senha">14. </form>
15. </body>16. </html>
Programação para Internet - Prof. Dr. Daniel A. Furtado 16
Resultado:
Formulários em HTML
Programação para Internet - Prof. Dr. Daniel A. Furtado 17
Principais atributos do elemento <input> name – para atribuir um nome de identificação ao campo;
value – para atribuir um valor ao campo (este é o valor que será enviado quando da submissão do formulário);
type – indica o tipo de campo de entrada. Alguns possíveis valores são: text: campo de entrada de texto comum; password: campo de senha. Aparecerá na tela um * para cada caractere. radio: permite selecionar uma única opção ( ) checkbox: permite selecionar várias opções hidden: campo de entrada oculto number: para um campo de entrada do tipo número date: para um campo de entrada do tipo data
submit – cria o botão “enviar” do formulário;
reset – cria um botão para “limpar” o formulário;
Formulários em HTML
Programação para Internet - Prof. Dr. Daniel A. Furtado 18
Utilizado quando se deseja escolher apenas uma opção dentre várias disponíveis;
Todos os campos do mesmo grupo devem possuir o mesmo name
Resultado:
Formulários em HTML: Radio Button
1. <form>2. <input type="radio" name="sexo" value="masculino"
checked>Masculino3. <br>4. <input type="radio" name="sexo" value="feminino">Feminino5. </form>
Programação para Internet - Prof. Dr. Daniel A. Furtado 19
Permite ao usuário selecionar (marcar) várias opções;
Resultado:
Formulários em HTML: Checkbox Button
1. <form>
2. Indique os esportes preferidos: <br><br>3. <input type="checkbox" name="esportes" value="futebol">Futebol
<br>4. <input type="checkbox" name="esportes" value="natacao">Natação
<br>5. <input type="checkbox" name="esportes" value="corrida">Corrida
<br>6. <input type="checkbox" name="esportes" value="tenis">Tênis <br>7.8. <br>9. <input type="submit" value="Enviar">10. </form>
Programação para Internet - Prof. Dr. Daniel A. Furtado 20
Resultado:
Formulários em HTML: Checkbox Button
Programação para Internet - Prof. Dr. Daniel A. Furtado 21
Utilizado quando se deseja enviar algum dado adicional, sem que o mesmo apareça para o usuário;
Resultado:
Formulários em HTML: Campo hidden
1. <form>2. <input type="hidden" name="campo_oculto" value="teste.com.br">
<br>3. Nome: <input type="text" name="nome">4. </form>
Programação para Internet - Prof. Dr. Daniel A. Furtado 22
Campo de entrada do tipo data
Formulários em HTML: input date (HTML5)
1. <form>2. Data de Nascimento:3. <input type="date" name="data">4. </form>
Programação para Internet - Prof. Dr. Daniel A. Furtado 23
Formulários em HTML: Submit Button1. <form action="login.php">
2. Usuário: <br> <input type="text" name="usuario" value="daniel"> <br>
3. Senha: <br> <input type="password" name="senha"> <br>4. <br>
5. <input type="submit" value="Enviar">6. <input type="reset" value="Limpar">
7. </form>
Script no servidor que receberá os dados;
Apaga os campos de entrada que não possuem valores pré-definidos. Neste caso, apenas a senha.
Programação para Internet - Prof. Dr. Daniel A. Furtado 24
<form action=“action_page.php“ method=“ “>
O atributo method especifica o método HTTP que deve ser utilizado na submissão do formulário. Pode ser GET ou POST:
<form action="action_page.php" method="GET">
<form action="action_page.php" method=“POST">
Método GET
Utilizado para pequenas quantidades de dados e quando não há informações sensíveis. Os dados são enviados pela própria URL:
action_page.php?nome=daniel&endereco=uberlandia
Método GET
Oferece maior segurança, pois os dados não aparecem na URL.
Formulários em HTML: action e method
Programação para Internet - Prof. Dr. Daniel A. Furtado 25
O elemento <fieldset> agrupa dados relacionados no formulário;
O elemento <legend> define um título para o elemento <fieldset>;
Agrupando dados no formulário com <fieldset>
1. ...2. <form action="login.php">3.4. <fieldset>5. <legend>Informações Pessoais:</legend>6. Nome: <br> <input type="text" name="nome"> <br>7. CPF: <br> <input type="text" name="cpf"> <br>8. E-mail: <br> <input type="text" name="email"> <br>9. <br><br>10. </fieldset>11. <br>12.13. <fieldset>14. <legend>Endereço de Entrega</legend>15. Rua: <br> <input type="text" name="rua"> <br>16. Cidade: <br> <input type="text" name="cidade"> <br>17. Número: <br> <input type="text" name="numero"> <br>18. </fieldset>19. ...
Programação para Internet - Prof. Dr. Daniel A. Furtado 26
Resultado:
Agrupando dados no formulário com <fieldset>
Programação para Internet - Prof. Dr. Daniel A. Furtado 27
Permite selecionar a partir de uma caixa de seleção (drop-down)
O valor selected pode ser usado para indicar o item pré-selecionado;
Elemento select (caixa de seleção)
1. <form action="login.php">2.3. Nome: <br> <input type="text" name="nome"> <br>4. CPF: <br> <input type="text" name="cpf"> <br>5. E-mail: <br> <input type="text" name="email"> <br>6.7. Estado Civil: <br> 8. <select name="estadocivil">9. <option value="solteiro">Solteiro</option>10. <option value="casado" selected>Casado</option>11. <option value="divorciado">Divorciado</option>12. <option value="viuvo">Viuvo</option>13. </select>14.15. <input type="submit" value="Enviar">16. <input type="reset" value="Limpar">17.18. </form>
Programação para Internet - Prof. Dr. Daniel A. Furtado 28
Resultado:
Elemento select (caixa de seleção)
Programação para Internet - Prof. Dr. Daniel A. Furtado 29
Permite a entrada de múltiplas linhas de texto;
Elemento textarea
1. <textarea name="comentario" rows="10" cols="30">2. Este é um campo para a entrada de múltiplas linhas de texto...3. </textarea>
Programação para Internet - Prof. Dr. Daniel A. Furtado 30
CSS – Cascading Style Sheets
É uma linguagem de estilo utilizada para definir a apresentação de documentos em uma linguagem de marcação, como HTML;
Utilizada para separar a formatação gráfica do documento (estilos) de seu conteúdo propriamente dito;
Elementos tais como fontes, espaçamentos e cores podem ser especificados separadamente;
Tal separação simplifica a manutenção e a modificação de uma página Web;
Assim como no HTML, o consórcio W3C disponibiliza um serviço para validação do código CSS (jigsaw.w3.org/css-validator/)
Programação para Internet - Prof. Dr. Daniel A. Furtado 31
Define o formato de um elemento utilizando o atributo style;
CSS – Estilos inline (embutido na linha)
1. <!DOCTYPE html>2. <html>3. <head> 4. <meta charset="UTF-8">5. <title> Cascading Style Sheets </title>6. </head>7. <body>
8. <p> Parágrafo sem definição de estilos CSS </p>
9. <p style="font-size: 20pt">10. Este é um parágrafo que utiliza o estilo <em>font-
size</em> para alterar o tamanho da fonte para 20 pontos. </p>
11. <p style="font-size: 20pt; color: #00AAFF">12. Este é um parágrafo que utiliza os estilos 13. <em>font-size</em> e <em>color</em>. </p>
14. </body>15. </html>
Cada propriedade CSS é seguida por um sinal de dois pontos e seu valor;
font-size e color são propriedades;
Duas ou mais propriedades devem ser separadas por ponto-e-vírgula;
Programação para Internet - Prof. Dr. Daniel A. Furtado 32
Resultado:
CSS – Estilos inline (embutido na linha)
Programação para Internet - Prof. Dr. Daniel A. Furtado 33
Estilos CSS incorporados na seção head do documento HTML
CSS – Folha de Estilo (style sheet) Embutida
1. <!DOCTYPE html>2. <html>3. <head> 4. <meta charset="UTF-8">5. <title> Cascading Style Sheets </title>6.7. <!-- Início da folha de estilo embutida -->8. <style type="text/css">9. body {10. color: white;11. font-size: 16pt;12. background-color: #3D3F40 13. }14. </style>15. </head>16. <body>17. <p> Primeiro exemplo utilizando uma folha de estilo (<em>style
sheet</em>) embutida </p>18. </body>19. </html>
Programação para Internet - Prof. Dr. Daniel A. Furtado 34
Resultado:
CSS – Folha de Estilo (style sheet) Embutida
Programação para Internet - Prof. Dr. Daniel A. Furtado 35
Estilos CSS incorporados na seção head do documento HTML
CSS – Folha de Estilo (style sheet) Embutida
1. <head>
2. <style type="text/css">
3. body {4. color: white;5. font-size: 16pt;6. background-color:
#3D3F40 7. }
8. </style>
9. </head>
Seletor: diz ao browser qual parte do documento será afetada pela regra;
Propriedade: indica qual aspecto do layout está sendo definido;
Valor: define o valor da propriedade;
Programação para Internet - Prof. Dr. Daniel A. Furtado 36
No exemplo anterior, a propriedade color define a cor do texto para o elemento body. Entretanto, todos os demais elementos dentro de body herdam essa cor (exceto quando explicitamente alterado);
As cores podem ser especificadas pelo nome (há mais de 100 nomes de cores disponíveis) ou pelo código RGB em hexadecimal.
CSS – Definindo a Fonte
1. <style type="text/css">
2. body {3. color: white;4. font-size: 16pt;5. background-color:
#3D3F40 6. }
7. </style>
Programação para Internet - Prof. Dr. Daniel A. Furtado 37
A propriedade font-family é utilizada para definir o estilo da fonte de um elemento da página. Mais de um valor pode ser especificado; os quais serão utilizados, na ordem listada, no caso de ausência da fonte anterior;
CSS – Definindo a Fonte
1. ...
2. body {3. color: black;4. font-size: 16pt;5. background-color: #EEFFFF;6. font-family: Verdana, "Times New Roman", Times, serif;7. }8.9. h1 {10. font-family: Times, Arial, sans-serif; 11. }
12. ...
Programação para Internet - Prof. Dr. Daniel A. Furtado 38
Os estilos CSS podem ser inseridos em um arquivo de texto separadamente, com a extensão .css.
Tal arquivo é então referenciado no código HTML
CSS – Folha de estilo em arquivo externo
1. /* Comentário CSS – folha de estilo externa – arquivo styles.css */
2. body {3. color: black;4. font-size: 16pt;5. background-color: #EEFFFF;6. font-family: Verdana, "Times New Roman", Times, serif;7. }
8. h1 {9. font-family: Times, Arial, sans-serif; 10. }
Programação para Internet - Prof. Dr. Daniel A. Furtado 39
Um referência para o arquivo CSS deve ser criada dentro do arquivo HTML, dentro do cabeçalho;
Utilize o elemento <link>
CSS – Folha de estilo em arquivo externo
1. <!DOCTYPE html>2. <html>3. <head> 4. <meta charset="UTF-8">5. <title> Cascading Style Sheets </title>
6. <link rel="stylesheet" type="text/css" href="styles.css">
7. </head>8. <body>9. <h1>Alterando a fonte com CSS</h1>10. <p>Corpo do documento utilizando uma fonte diferente do título h1</p>11. </body>12. </html>
Programação para Internet - Prof. Dr. Daniel A. Furtado 40
Resultado:
CSS – Definindo a Fonte
Programação para Internet - Prof. Dr. Daniel A. Furtado 41
No Google Chrome
Botão direito Exibir código fonte
Botão direito Inspecionar elemento
Recursos Úteis
Programação para Internet - Prof. Dr. Daniel A. Furtado 42
www.w3schools.com/html/html_tables.asp
www.w3schools.com/html/html_forms.asp
www.w3.org/Style/CSS/
www.w3.org/Style/Examples/011/firstcss
www.w3.org/Style/LieBos2e/enter/
www.w3.org/MarkUp/Guide/Style
www.w3.org/Style/CSS/learning
Referências