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


HTML: continuação

Tabelas

Nesta aula

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%"> 6.7. <tr> <!–- início da primeira linha -->8. <td>Aluno</td> 9. <td>Prova 1</td> 10. <td>Prova 2</td> 11. </tr> 

12. <tr> 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>


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

Tabela com Cabeçalho, Corpo e Rodapé1. <table border="1" width="50%"> 2.3. 4. <caption><strong> Notas dos Alunos </strong></caption>5.6. <thead> 7. <tr>8. 

<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>


Resultado:

Tabela com Cabeçalho, Corpo e Rodapé

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. 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>


Resultado:


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>


Resultado:




Outro exemplo:



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:


Introdução à Linguagem HTMLFormulários


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>


Resultado:



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;



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>


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>


Resultado:

Formulários em HTML: Checkbox Button


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>


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>


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.


<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


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. ...


Resultado:

Agrupando dados no formulário com <fieldset>


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>


Resultado:

Elemento select (caixa de seleção)


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>


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/)


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;


Resultado:

CSS – Estilos inline (embutido na linha)

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. 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>


Resultado:



Estilos CSS incorporados na seção head do documento HTML


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;


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>


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;


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. ...


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. }


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>


Resultado:



No Google Chrome

Botão direito Exibir código fonte

Botão direito Inspecionar elemento

Recursos Úteis


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

http://www.w3.org/Style/Examples/011/firstcss



http://www.w3.org/Style/LieBos2e/enter/

http://www.w3.org/MarkUp/Guide/Style

http://www.w3.org/Style/CSS/learning

curso de gestão da informação prof. dr. daniel a. furtado módulo 2 universidade federal de...

Documents