Aula 1 linguagem html (1)

4,791 views

Published on

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,791
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
204
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Aula 1 linguagem html (1)

  1. 1. Linguagem HTMLDesenvolvimento de Aplicações Web Bruno Tenório Ávila
  2. 2. Escopo• Introdução;• Formatação;• Imagens;• Links;• Listas;• Agrupamentos;• Formulários;• Tabelas;
  3. 3. INTRODUÇÃO
  4. 4. HTML• Hyper Text Markup Language: – não é uma linguagem de programação; – usa tags para descrever páginas;• Documento HTML: – formato texto, portanto pode ser feito em qualquer editor simples de texto; – extensão .htm ou .html; – visualizado no navegador (eg. firefox, ie, chrome);
  5. 5. Editor HTML• Na Web: – http://www.w3schools.com/html/tryit.asp?filena me=tryhtml_intro• Editores: – Notepad, Ultraedit, Notepad++;• Editores Avançados: – Adobe Dreamweaver;
  6. 6. Sintaxe HTML• Tag: <tag> ... </tag>• Tag com atributos: <tag atributo1=“...” atributo2=“...”> ... </tag>• Tag sem marcador final: <tag />• Tag com atributos e sem marcador final: <tag atributo1=“...” atributo2=“...” />
  7. 7. Estrutura de um Documento HTML<html><head> <title>Meu título</title></head><body> <!-- Comentário --> <h1>Meu cabeçalho</h1> <p>Meu primeiro parágrafo</p></body></html>
  8. 8. Tag BODY• A tag <body> refere-se ao corpo da página web;• Possui os seguintes atributos: – bgcolor: cor de fundo; – text: cor do texto; – link: cor dos links; – alink: cor do link ativo; – vlink: cor dos links visitados;
  9. 9. Cores• Por nome em inglês: – red, green, blue, orange, black; <body bgcolor=“red”> <h1>Fundo em vermelho</h1> </body>• Por valor em hexadecimal no formato RGB: • #FF0000 ou #F00 refere-se a cor vermelha; • #AA0000 ou #A00 refere-se a cor vermelha com um tom mais escuro; • #8F8F8F – quando os três componentes são iguais, a cor resultante é cinza;
  10. 10. Exercícios• Exercício 1: – alterar a cor de fundo e do texto da página do exemplo anterior;
  11. 11. Resposta do Exercício 1 <html> <head> <title>Meu título</title> </head> <body bgcolor="red" text="#0000DD"> <!-- Comentário --> <h1>Meu cabeçalho</h1> <p>Meu primeiro parágrafo</p> </body> </html>
  12. 12. FORMATAÇÃO
  13. 13. Formatação• Negrito: <b>Estou em negrito</b>• Itálico: <i>Estou em itálico</i>• Fonte: <font face=“arial” size=“12” color=“red”>Texto</font>• Cores: – pode ser em inglês: red, green, blue, orange, black; – pode ser em RGB: #0000FF, #8f8f8f
  14. 14. Texto• Cabeçalho: <h1>Título Principal</h1> <h2>Subtítulo</h2>• Parágrafo: <p>Isso é um parágrafo.</p>• Linha de separação de texto: <hr />• Quebra de linha de texto: <br />
  15. 15. Exercícios• Exercício 1: – reproduzir a seguinte frase em HTML: HTML não é uma linguagem de programação.• Exercício 2: – fazer um título em negrito e verde; – fazer um subtítulo em itálico e cinza; – fazer um parágrafo com a fonte verdana com tamanho 9pt;
  16. 16. Resposta do Exercício 1<html><body> HTML <b>não</b> é uma <font color="red">linguagem</font> de <b><font color="red">programação</font></b> .</body></html>
  17. 17. Resposta do Exercício 2 <html> <body> <h1><b> <font color="green">Título</font> </b></h1> <h2><i> <font color="gray">Subtítulo</font> </i></h2> <p> <font face="verdana" size="9">Parágrafo</font> </p> </body> </html>
  18. 18. IMAGENS
  19. 19. Imagens• Sintaxe: <img src=“logo.png” width=“50” border=“0” /> <img src=“http://www.google.com/logo.gif” height=“50” alt=“Logo da Google”> <img src=“logo.jpg”>• Observação: – não especificando a altura nem a largura, o navegador exibe-a com o tamanho original;
  20. 20. Exercícios• Exercício 1: – fazer uma página com a logo do google;
  21. 21. Resposta do Exercício 1 <html> <body> <img src="http://www.google.com.br/logos/ classicplus.png"> </body> </html>
  22. 22. LINKS
  23. 23. Links• Sintaxe: <a href=“sobre.html”>Sobre a empresa</a> <a href=“sobre.html” target="_blank">Sobre</a>• Link para uma parte de uma página: <a href="#c3“>clique aqui</a> <a name=“c3”>outra parte</a>
  24. 24. Links• Link para uma outra parte da mesma página: <p><a href="#c3">See also Chapter 3.</a></p> <h2>Chapter 1</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p> <h2><a name=“c3”>Chapter 3</a></h2> <p>This chapter explains ba bla bla</p>
  25. 25. Exercícios• Exercício 1: – abrir uma outra página web ao clicar em uma imagem;• Exercício 2: – fazer uma página web com três partes (texto mesmo); – fazer um menu para navegar entre elas;
  26. 26. Resposta do Exercício 1 <html> <body> <a href="http://www.google.com/"> <img src="http://www.google.com.br/logos/ classicplus.png"> </a> </body> </html>
  27. 27. Resposta do Exercício 2 <html> <body> <a href="#p1">Parágrafo 1</a><br> <a href="#p2">Parágrafo 2</a><br> <a href="#p3">Parágrafo 3</a><br><br> <p><a name="p1">A</a> Advocacia-Geral da União entrou com uma ação no Judiciário, neste mês, pedindo ressarcimento do prejuízo que o MEC teve na aplicação do Enem 2009. </p> <p><a name="p2">Quando</a> a prova vazou, R$ 38 milhões já haviam sido pagos ao consórcio responsável pela aplicação do exame, o Connasel. Hoje o valor atualizado do prejuízo é de cerca de R$ 46 milhões. </p> <p><a name="p3">O</a> MEC diz que esgotou todas as possibilidades de cobranças administrativas ao consórcio. Procurado na noite de ontem, o grupo disse que só se manifestaria hoje.</p> </body> </html>
  28. 28. LISTAS
  29. 29. Lista Não-Ordenada• Lista não-ordenada é definida pela tag <ul>: – <li> inicia um item; – </li> termina um item; Exemplo: Resultado Final: <ul> <li>Coffee</li> <li>Milk</li> </ul>
  30. 30. Lista Ordenada• Lista ordenada é definida pela tag <ol>: – <li> inicia um item; – </li> termina um item; Exemplo: Resultado Final: <ol> <li>Coffee</li> <li>Milk</li> </ol>
  31. 31. Lista Ordenada• A tag <ol> tem o atributo type: – define o tipo da enumeração; – pode ser A, a, I, i Exemplo: Resultado Final: <ol type="a"> <li>Apples</li> <li>Bananas</li> </ol>
  32. 32. Exercícios• Exercício 1: – reproduzir a seguinte lista:
  33. 33. Resposta do Exercício 1 <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li> </ul>
  34. 34. AGRUPAMENTO
  35. 35. Tag DIV• Usado para definir uma divisão ou uma seção da página pelo agrupamento de um conjunto de elementos HTML;• Extremamente utilizado para construir páginas;• Trabalharemos mais com ele quando aprendermos a linguagem CSS;• Atributos: – id: identificador único no documento HTML; – class: especifica um conjunto de classes CSS; – style: especifica um conjunto de atributos CSS;
  36. 36. Tag DIV• Exemplo: <div id=“frases1”> <b>Estou em negrito.</b> <i>Estou em itálico.</i> </div> <div id=“frases2”> <i><b>Estou em negrito e em itálico.</b></i> </div>
  37. 37. Tag SPAN• Similar à tag <div>, exceto que: – o DIV quebra a linha, ou seja, dois elementos DIV aparecem um em baixo do outro; – o SPAN não quebra a linha, ou seja, dois elementos SPAN aparecem um no lado do outro;• Exemplo: <div>em cima</div> <div>em baixo</div> <span>esquerda</span> <span>direita</span>
  38. 38. FORMULÁRIOS
  39. 39. Envio de Dados para o Servidor DADOS VIA HTTP Cliente Servidor USANDO O MÉTODO POST OU GET• GET: – os dados são codificados na URL; – exemplo: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_span• POST: – os dados são codificados no corpo da mensagem HTTP;
  40. 40. Envio de Dados para o ServidorGET /index.html?userid=joe&password=guessme HTTP/1.1Host: www.mysite.comUser-Agent: Mozilla/4.0POST /login.jsp HTTP/1.1Host: www.mysite.comUser-Agent: Mozilla/4.0Content-Length: 27Content-Type: application/x-www-form-urlencodeduserid=joe&password=guessme
  41. 41. Formulários• Um formulário é definido pela tag <form>: – atributo action define a página que será solicitada; – atributo method define o método {POST, GET} que será usado para enviar os dados do formulário; – <input> define um controle de entrada de dados;<form name="meuForm" action="cadastrar.jsp"method="get"> <input name="..." type="..." /></form>
  42. 42. Controles de Formulários – Botão• Controle Botão é definido por <input type=“button” value=“...” />• Para submeter os dados de um formulário: <input type=“submit” value=“...” />• Para limpar os dados de um formulário: <input type=“reset” value=“...” />
  43. 43. Controles de Formulários – Botão• Exemplo:<form name="meuForm" action="cadastrar.php"method="get"> <input type="submit" value="Submeter" /> <input type="reset" value="Limpe-me" /> <input type="button" value="Aperte-me" /></form>
  44. 44. Controles de Formulários – Linha de Texto• Controle Linha de Texto é definido por <input type=“text” name=“...” />• Rótulo do controle é definido por <label for=“...”>rótulo</label><form name="meuForm" action="cadastrar.php"method="get"> <label for="cpf">CPF:</label> <input type="text" name="cpf" /> <input type="submit" value="Submeter" /></form>
  45. 45. Controles de Formulários – Senha• Controle Senha é definido por <input type=“password” name=“...” /><form name="login" action="login.php"method="get"> <label for="cpf">CPF:</label> <input type="text" name="cpf" /> <label for="senha">Senha:</label> <input type="password" name="senha" /> <input type="submit" value="Entrar" /></form>
  46. 46. Controles de Formulários – Radio• Controle Radio é definido por <input type=“radio” name=“...” value=“...” /><form name="login" action="selecionar.php"method="get"> <input type="radio" name="tipo" value="CPF" /> <input type="radio" name="tipo" value="CNPJ" /> <input type="submit" value="Escolher" /></form>
  47. 47. Controles de Formulários – Marcador• Controle Marcador é definido por<input type=“checkbox” name=“...” /><form name="login" action="formatar.php"method="get"> <input type="checkbox" name="vermelho“ />Vermelho <input type="checkbox" name="negrito" />Negrito <input type="submit" value="Formatar" /></form>
  48. 48. Controles de Formulários – Seleção• Controle Seleção é definido pela tag <select>: – <option value=“...”> inicia uma opção;<select name="carro"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option></select>
  49. 49. Controles de Formulários – Texto• Controle Texto é definido pela tag <textarea>: – atributo rows e cols definem o número de linhas e colunas, respectivamente;<textarea name="observacao" rows="10"cols="30">The cat was playing in the garden.</textarea>
  50. 50. Exemplo – Enviar Email<form action="mailto:alguem@exemplo.com" method="post"enctype="text/plain">Nome:<br /><input type="text" name="nome" value="seu nome" /><br />E-mail:<br /><input type="text" name="email" value="seu email" /><br />Comentário:<br /><textarea name="comentario" rows="10" cols="30" />seuscomentários</textarea><br /><br /><input type="submit" value="Enviar"><input type="reset" value="Limpar">
  51. 51. Exercícios• Exercício 1: – fazer um formulário para alunos com nome, matéria (selecionar de uma lista) e duas notas; – colocar botão de Adicionar e Limpar;• Exercício 2: – fazer um formulário para clientes com CPF ou CNPJ, razão social e faturamento anual; – colocar botão de Adicionar e Limpar;
  52. 52. Resposta do Exercício 1 <form name="aluno" action="adicionar_aluno.jsp" method="post"> <label for="nome">Nome:</label> <input type="text" name="nome" /> <label for="materia">Matéria:</label> <select name="materia"> <option name="des_web">Desenvolvimento Web</option> <option name="emp">Empreendedorismo</option> </select> <label for="nota1">Nota 1:</label> <input type="text" name="nota1" /> <label for="nota2">Nota 2:</label> <input type="text" name="nota2" /> <input type="submit" value="Adicionar" /> <input type="reset" value="Limpar" /> </form>
  53. 53. Resposta do Exercício 2 <form name="cliente" action="adicionar_cliente.jsp" method="post"> <label for="razao">Razão Social:</label> <input type="text" name="razao" /><br /> <input type="radio" name="cpf_ou_cnpj" value="cpf">CPF<br /> <input type="radio" name="cpf_ou_cnpj" value="cnpj">CNPJ<br /> <label for="faturamento">Faturamento Anual:</label> <input type="text" name="faturamento" /><br> <input type="submit" value="Adicionar" /> <input type="reset" value="Limpar" /> </form>
  54. 54. TABELAS
  55. 55. Tabela• Uma tabela é definida com a tag <table> que tem os seguintes atributos: – border: espessura da borda; – cellpadding: espaçamento entre o texto e a borda da célula; – cellspacing: espaçamento entre duas células; – width e height: pode ser em número de pontos ou em porcentagem;
  56. 56. Tabela• Partes de uma tabela: – <tr> inicia uma linha; – <td> inicia uma coluna; – <th> inicia um cabeçalho;
  57. 57. Tabela<table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr></table>
  58. 58. Atributos de TR, TD e TH• width e height: – pode ser em pontos ou em porcentagem; – exemplo: • <td width=“50%”></td> significa que a célula terá 50% da largura total da tabela;• align: – alinhamento do texto na horizontal; – pode ser: left, right, center;• valign: – alinhamento do texto na vertical; – pode ser: top, middle, bottom;• bgcolor: – cor de fundo;
  59. 59. Exercícios• Exercício 1: – fazer uma tabela com cabeçalho, três colunas e 8 linhas; – intercalar as cores das linhas entre cinza claro e branco (usar o atributo de TR chamado bgcolor);
  60. 60. Atributos de TD• colspan=número – indica o número de colunas que a célula será unida;• Exemplo: <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table>
  61. 61. Atributos de TD• rowspan=número – indica o número de linhas que a célula será unida;• Exemplo: <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table>
  62. 62. Exercícios• Exercício 2: – construir a seguinte tabela: (usar o atributo de TD chamado align=“center”)
  63. 63. Exercícios• Exercício 3: – construir uma página com o seguinte layout: • cabeçalho em cima • menu à esquerda; • conteúdo à direita;
  64. 64. CONSIDERAÇÕES FINAIS
  65. 65. Conclusões• Linguagem HTML: – utilizado para especificar a exibição dos elementos de uma página web;• Próxima aula: – linguagem CSS.
  66. 66. Referências HTML• HTML 4.01 Specification – http://www.w3.org/TR/html4/• W3Schools – http://www.w3schools.com/
  67. 67. Lista para Próxima Aula• 5 páginas web sobre a linguagem HTML: – tem que ser codificados em HTML; – tem que ter: • título, tabelas, figuras, formatação; – coloquem o seu nome em cada página web; – trabalho individual; – será utilizado para avaliação.

×