Carregar apresentação
A apresentação está carregando. Por favor, espere
1
Curso de Gestão da Informação Prof. Dr. Daniel A. Furtado Módulo 2 Universidade Federal de Uberlândia Faculdade de Computação
2
Histórico da Internet, conceitos fundamentais, arquiteturas... Introdução à linguagem HTML Estrutura básica de um documento: tags,,,,,,, Títulos de seções:,, etc. Inserção de imagens: Hiperlinks e hiperlinks com imagens: Alguns caracteres especiais: < > Listas:,, Programação para Internet - Prof. Dr. Daniel A. Furtado 2
3
HTML: continuação Tabelas Programação para Internet - Prof. Dr. Daniel A. Furtado 3
4
4 1. 2. 3. Tabela simples 4. 5. 6. 7. 8. Aluno 9. Prova 1 10. Prova 2 11. 12. 13. Marcelo 14. 28,5 15. 19,0 16. 17. 18. Juliana 19. 17,0 20. 23,5 21. 22. 23. 24. 25. 26.
5
Resultado: OBS: os atributos border e width utilizados anteriormente na tabela são considerados obsoletos. Tais funcionalidades serão realizadas posteriormente utilizando CSS. Programação para Internet - Prof. Dr. Daniel A. Furtado 5
6
6 1. 2. 3. 4. Notas dos Alunos 5. 6. 7. 8. table head: Destaca o texto da célula --> Aluno 9. Prova 1 10. Prova 2 11. 12. 13. 14. 15. 16. Marcelo 28,5 19,0 17. 18. 19. Juliana 17,0 23,5 20. 21. 22. 23. 24. Média 22,75 21,25 25. 26.
7
Resultado: Programação para Internet - Prof. Dr. Daniel A. Furtado 7
8
Linhas e colunas podem ser expandidas para ocupar mais de uma célula da tabela utilizando as tags e Programação para Internet - Prof. Dr. Daniel A. Furtado 8 1. 2. 3. 4. 5. Provas 6. 7. 8. 9. 10. Aluno Prova 1 Prova 2 11. 12. 13. Marcelo 28,5 19,0 14. 15. 16. Juliana 17,0 23,5 17. 18. 19.
9
Resultado: Programação para Internet - Prof. Dr. Daniel A. Furtado 9
10
10 1. 2. 3. Aluno 4. Prova 1 5. Prova 2 6. 7. 8. Marcelo 9. - 10. 19,0 11. 12. 13. Juliana 14. 15. 17,0 Esta célula precisa ser removida --> 16. 17. 23,5 18. 19. 20.
11
Resultado: Programação para Internet - Prof. Dr. Daniel A. Furtado 11
12
Programação para Internet - Prof. Dr. Daniel A. Furtado 12 Outro exemplo:
13
Programação para Internet - Prof. Dr. Daniel A. Furtado 13 1. 2. 3. Linha 1, cel 1 4. Linha 1, cel 2 5. 6. 7. Linha 2, cel 1 8. Linha 2, cel 2 9. Linha 2, cel 3 10. 11. 12. Linha 3, cel 1 13. Linha 3, cel 2 14. Linha 3, cel 3 15. 16. 17. Linha 4, cel 1 18. Linha 4, cel 3 19. 20. Código HTML da tabela anterior:
14
Formulários Programação para Internet - Prof. Dr. Daniel A. Furtado 14
15
Tags e Programação para Internet - Prof. Dr. Daniel A. Furtado 15 1. 2. 3. 4. Primeiro Formulário 5. 6. 7. 8. Usuário: 9. 10. 11. Senha: 12. 13. 14. 15. 16.
16
Resultado: Programação para Internet - Prof. Dr. Daniel A. Furtado 16
17
Principais atributos do elemento 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; Programação para Internet - Prof. Dr. Daniel A. Furtado 17
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: Programação para Internet - Prof. Dr. Daniel A. Furtado 18 1. 2. Masculino 3. 4. Feminino 5.
19
Permite ao usuário selecionar (marcar) várias opções; Resultado: Programação para Internet - Prof. Dr. Daniel A. Furtado 19 1. 2. Indique os esportes preferidos: 3. Futebol 4. Natação 5. Corrida 6. Tênis 7. 8. 9. 10.
20
Resultado: Programação para Internet - Prof. Dr. Daniel A. Furtado 20
21
Utilizado quando se deseja enviar algum dado adicional, sem que o mesmo apareça para o usuário; Resultado: Programação para Internet - Prof. Dr. Daniel A. Furtado 21 1. 2. 3. Nome: 4.
22
Campo de entrada do tipo data Programação para Internet - Prof. Dr. Daniel A. Furtado 22 1. 2. Data de Nascimento: 3. 4.
23
Programação para Internet - Prof. Dr. Daniel A. Furtado 23 1. 2. Usuário: 3. Senha: 4. 5. 6. 7. Script no servidor que receberá os dados; Apaga os campos de entrada que não possuem valores pré- definidos. Neste caso, apenas a senha.
24
O atributo method especifica o método HTTP que deve ser utilizado na submissão do formulário. Pode ser GET ou 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. Programação para Internet - Prof. Dr. Daniel A. Furtado 24
25
O elemento agrupa dados relacionados no formulário; O elemento define um título para o elemento ; Programação para Internet - Prof. Dr. Daniel A. Furtado 25 1.... 2. 3. 4. 5. Informações Pessoais: 6. Nome: 7. CPF: 8. E-mail: 9. 10. 11. 12. 13. 14. Endereço de Entrega 15. Rua: 16. Cidade: 17. Número: 18. 19....
26
Resultado: Programação para Internet - Prof. Dr. Daniel A. Furtado 26
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; Programação para Internet - Prof. Dr. Daniel A. Furtado 27 1. 2. 3. Nome: 4. CPF: 5. E-mail: 6. 7. Estado Civil: 8. 9. Solteiro 10. Casado 11. Divorciado 12. Viuvo 13. 14. 15. 16. 17. 18.
28
Resultado: Programação para Internet - Prof. Dr. Daniel A. Furtado 28
29
Permite a entrada de múltiplas linhas de texto; Programação para Internet - Prof. Dr. Daniel A. Furtado 29 1. 2. Este é um campo para a entrada de múltiplas linhas de texto... 3.
30
Programação para Internet - Prof. Dr. Daniel A. Furtado 30 É 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/)
31
Define o formato de um elemento utilizando o atributo style; Programação para Internet - Prof. Dr. Daniel A. Furtado 31 1. 2. 3. 4. 5. Cascading Style Sheets 6. 7. 8. Parágrafo sem definição de estilos CSS 9. 10. Este é um parágrafo que utiliza o estilo font-size para alterar o tamanho da fonte para 20 pontos. 11. 12. Este é um parágrafo que utiliza os estilos 13. font-size e color. 14. 15. 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;
32
Resultado: Programação para Internet - Prof. Dr. Daniel A. Furtado 32
33
Estilos CSS incorporados na seção head do documento HTML Programação para Internet - Prof. Dr. Daniel A. Furtado 33 1. 2. 3. 4. 5. Cascading Style Sheets 6. 7. 8. 9. body { 10. color: white; 11. font-size: 16pt; 12. background-color: #3D3F40 13. } 14. 15. 16. 17. Primeiro exemplo utilizando uma folha de estilo ( style sheet ) embutida 18. 19.
34
Resultado: Programação para Internet - Prof. Dr. Daniel A. Furtado 34
35
Estilos CSS incorporados na seção head do documento HTML Programação para Internet - Prof. Dr. Daniel A. Furtado 35 1. 2. 3. body { 4. color: white; 5. font-size: 16pt; 6. background-color: #3D3F40 7. } 8. 9. 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;
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. Programação para Internet - Prof. Dr. Daniel A. Furtado 36 1. 2. body { 3. color: white; 4. font-size: 16pt; 5. background-color: #3D3F40 6. } 7.
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; Programação para Internet - Prof. Dr. Daniel A. Furtado 37 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....
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 Programação para Internet - Prof. Dr. Daniel A. Furtado 38 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. }
39
Um referência para o arquivo CSS deve ser criada dentro do arquivo HTML, dentro do cabeçalho; Utilize o elemento Programação para Internet - Prof. Dr. Daniel A. Furtado 39 1. 2. 3. 4. 5. Cascading Style Sheets 6. 7. 8. 9. Alterando a fonte com CSS 10. Corpo do documento utilizando uma fonte diferente do título h1 11. 12.
40
Resultado: Programação para Internet - Prof. Dr. Daniel A. Furtado 40
41
No Google Chrome Botão direito Exibir código fonte Botão direito Inspecionar elemento Programação para Internet - Prof. Dr. Daniel A. Furtado 41
42
www.w3schools.com/html/html_tables.asp www.w3schools.com/html/html_tables.asp www.w3schools.com/html/html_forms.asp www.w3.org/Style/CSS/ www.w3.org/Style/CSS/ www.w3.org/Style/Examples/011/firstcss www.w3.org/Style/Examples/011/firstcss www.w3.org/Style/LieBos2e/enter/ www.w3.org/Style/LieBos2e/enter/ www.w3.org/MarkUp/Guide/Style www.w3.org/MarkUp/Guide/Style www.w3.org/Style/CSS/learning www.w3.org/Style/CSS/learning Programação para Internet - Prof. Dr. Daniel A. Furtado 42
Apresentações semelhantes
