Tecnologias para Internet - 2013.2 - Aula 2

345 visualizações

Publicada em

Tecnologias para Internet - 2013.2 - Aula 2

Publicada em: Educação
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
345
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
17
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Tecnologias para Internet - 2013.2 - Aula 2

  1. 1. Tecnologias para Internet Prof.º Thyago MaiaProf.  Thyago Maia Gestão da TI – 2013.2
  2. 2. Aula 2: Introdução ao HTMLç Objetivos • Introduzir a linguagem HTML • Enquadrar a tecnologia em sua q g respectiva camada na arquitetura de  sistemas Web • Definir e apresentar as principais tags HTMLHTML • Fazer com que o aluno crie seu  primeiro documento HTMLprimeiro documento HTML  2
  3. 3. Introdução ao HTMLIntrodução ao HTML
  4. 4. Introdução ao HTMLç • HTML – Hypertext Markup Language, ou linguagem de  marcação de hipertexto;marcação de hipertexto; – Utilizada na descrição e produção de páginas  W bWeb; – Lembre‐se: Não é uma linguagem de  programação!! – Composta por uma série de TAGs de marcação;p p ç ; 4
  5. 5. Arquitetura de Sistemas Web • Qual camada a linguagem HTML se enquadra?   5
  6. 6. Arquitetura de Sistemas Web • Qual camada a linguagem HTML se enquadra?   6
  7. 7. Introdução ao HTMLç • Tags HTML – Palavras chave, digitadas entre < e > (Ex.: <b>); N l ã iili d E– Normalmente são utiilizadas em pares. Ex.: • <b>Texto em negrito</b> – Onde: • <b>  ‐ Tag de abertura; • </b> ‐ Tag de fechamento; 7
  8. 8. Introdução ao HTMLç • Exemplo de um documento HTML: <html><html> <body> <h1>Meu primeiro título</h1><h1>Meu primeiro título</h1> <p>Meu primeiro título</p> </body></body> </html> – Digite o exemplo acima em um editor de texto  simples, como o notepad, gedit ou Notepad++; – Salve o arquivo com a extensão .htm ou .html 8
  9. 9. Introdução ao HTMLç • Onde: – O texto entre <html> e </html> descreve a página  Web;Web; – O texto entre <body> e </body> será o conteúdo  i í l d á ivisível da página; – O texto entre <h1> e </h1> é apresentado em  destaque, como um título; – O texto entre <p> e </p> é apresentado em um p /p p parágrafo; 9
  10. 10. Introdução ao HTMLç • Do que eu preciso para escrever documentos  HTML? – Um editor de texto: • Bloco de Notas;Bloco de Notas; • Notepad++; • Gedit (Linux);• Gedit (Linux); • Entre outros; – OBS: Sempre salve os arquivos com a extensão html ou htmOBS: Sempre salve os arquivos com a extensão .html ou .htm – Um navegador Web:Um navegador Web: • Firefox, IE, Chrome, etc.; 10
  11. 11. Exemplos de Tags HTMLExemplos de Tags HTML
  12. 12. Exemplos de Tags HTMLp g Tags de Título São definidas através das tags <hx> e </hx>, onde o x  define o nível do título, através de um número de 1 a 6; Exemplos: <html> <body><body> <h1>Título da página</h1> <h2>Subtítulo</h2><h2>Subtítulo</h2> <h3>Subtítulo do subtítulo</h3> </body> 12 </body> </html>
  13. 13. Exemplos de Tags HTMLp g Tag de Parágrafo É definida através das tags <p> e </p>;g p /p ; Exemplos: <html> <body> <p>Sport Club do Recife</p> <p>Campeão Brasileiro de 87</p> <p>Campeão da Copa do Brasil de 2008</p>p p p /p </body> </html> 13 /
  14. 14. Exemplos de Tags HTMLp g Tag de Link É definida através das tags <a> e </a>;g / ; Exemplos: <html> <body> <a href=”http://www.sportrecife.com.br”> Ir para o site do Sport Club do Recife </a>/ </body> </html> 14 /
  15. 15. Exemplos de Tags HTMLp g Tag de Imagem É definida através das tag <img>;g g ; Exemplos: <html> <body>y <img src=”bandeira.jpg” width=”104” height=”142” /> </body> </html> 15
  16. 16. Exemplos de Tags HTMLp g Linhas HTML A tag <hr/> cria uma linha horizontal em uma página  HTML, podendo ser usada para separar conteúdo; Exemplo: <html> <body>y <p>Sport Club do Recife</p> <hr/>/ <p>Campeão de 87!!!</p> </body> 16 / y </html>
  17. 17. Exemplos de Tags HTMLp g Comentários HTML Comentários podem ser inseridos em um código HTML  para torná‐lo mais legível e compreensível; São ignorados pelo navegador e não são apresentados; <html> <body><body> <!-- Isto é um comentário --> <p>Parágrafo</p><p>Parágrafo</p> </body> </html> 17 </html>
  18. 18. Exemplos de Tags HTMLp g Quebras de Linha HTML Use a tag <br/> caso deseje pular uma linha em g / j p um documento HTML; Exemplo:Exemplo: <html> <body><body> Parágrafo <br/><br/> Parágrafo </body> 18 </body> </html>
  19. 19. Elementos HTMLElementos HTML
  20. 20. Elementos HTML Elementos HTML Um elemento HTML é o conjunto formado por j p uma tag de abertura, uma tag de fechamento e  seu conteúdo (o que estiver entre as tags);( q g ); <html> <body> <a href=”http://www.sportrecife.com.br”> Ir para o site do Sport Club do Recife </a> </body> Um elemento HTML 20 </html>
  21. 21. Elementos HTML Sintaxe dos elementos HTML Um elemento HTML começa com uma tag de abertura e  termina com uma tag de fechamento; O conteúdo de um elemento HTML é tudo aquilo que está  entre tags; Vários elementos HTML não tem conteúdo (como a tag de  i )imagem); Elementos sem conteúdo são fechados na própria tag de  abertura (como na tag de imagem);abertura (como na tag de imagem); Vários elementos HTML podem ter atributos (como na tag de imagem e de link);de imagem e de link); 21
  22. 22. Elementos HTML Aninhamento de elementos HTML Alguns elementos HTML podem ser aninhados, g p , isto é, podemos inserir elementos HTML como  conteúdo de outros elementos;; <html> <body>y <p>Sport Club do Recife</p> <p><img src=”fig.jpg” widht=”200” height=”10”p g g jpg g /></p> <p><b>O melhor do Nordeste</b></p> 22 </body> </html>
  23. 23. Atributos HTMLAtributos HTML
  24. 24. Atributos HTML Atributos HTML Atributos fornecem informações adicionais aos ç elementos HTML; Elementos HTML podem ou não ter atributos;Elementos HTML podem ou não ter atributos; Atributos são sempre especificados nas tags de  abertura;abertura; Atributos são formados pelo seguinte conjunto:  ” l ”nome=”valor” Valores de atributos sempre devem estar  delimitados por aspas duplas ou simples; 24
  25. 25. Atributos HTML Exemplo de atributo HTML Links HTML são definidos pela tag <a>. O p g endereço do link é especificado pelo atributo  href;; <html> <body>y <a href=”http://www.sportrecife.com.br”> Ir para o site do Sport Club do Recifep p </a> </body> 25 / y </html>
  26. 26. Tags de formataçãoTags de formatação
  27. 27. Tags de formataçãog ç Tags de formatação em HTML HTML fornece tags como <b> (negrito) e <i> g ( g ) (itálico) para formatação de texto; Exemplo:Exemplo: <html> <body>y <b>Este texto será exibido em negrito</b><br/> <i>Este texto será exibido em itálico</i>/ </body> </html> 27 /
  28. 28. Tags de formataçãog ç Tag de formatação de fontes em HTML A partir da tag <font>, podemos formatar a cor, tamanho  e tipo de fontes a ser utilizada no conteúdo do referido  elemento; Exemplo: <html> <b d ><body> <font size=“5” face=“arial” color=“red”> T h 5 f t i l lhTamanho 5, fonte arial, cor vermelha </font> </b d > 28 </body> </html>
  29. 29. Tabelas HTMLTabelas HTML
  30. 30. Tabelas HTML Tabelas HTML São definidas a partir da tag <table>; Uma tabela é dividida em linhas (Tag <tr>); Cada linha é dividida em células (Tag <td>); <html> <body> <t bl ><table> <tr> <td>Linha 1 – Coluna 1</td> <td>Li h 1 C l 1</td><td>Linha 1 – Coluna 1</td> </tr> </table> </b d > 30 </body> </html>
  31. 31. Listas HTMLListas HTML
  32. 32. Listas HTML Listas não ordenadas em HTML São definidas a partir da tag <ul>;p g ; Cada elemento da lista é definido a partir da tag <li>;<li>; <html> <body> <ul> <li>Elemento 1</li> <li>El t 2</li><li>Elemento 2</li> </ul> </b d > 32 </body> </html>
  33. 33. Listas HTML Listas ordenadas em HTML São definidas a partir da tag <ol>;p g ; Cada elemento da lista é definido a partir da tag <li>;<li>; <html> <body> <ol> <li>Elemento 1</li> <li>El t 2</li><li>Elemento 2</li> </ol> </b d > 33 </body> </html>
  34. 34. Listas HTML Listas de Definição em HTML São definidas a partir da tag <dl>; Tal lista possui vários itens (Tag <dt>); Cada item possui uma descrição (Tag <dd>); <html> <body> <dl><dl> <dt>Sport</dt> <dd>Campeão Brasileiro de 87</dd> <dt>B t f PB</dt><dt>Botafogo-PB</dt> <dd>O maior campeão estadual da Paraíba</dd> </dl> </b d > 34 </body> </html>
  35. 35. Formulários HTMLFormulários HTML
  36. 36. Formulários HTML Formulários HTML A tag <form> é utilizada na definição de um g ç formulário; <html><html> <body> <form><form> <!-- Elementos de entrada --> </form> </body> 36 </body> </html>
  37. 37. Formulários HTML Formulários HTML (Campos de Texto) A tag <input type=“text” /> é utilizada na g p yp / definição de um campo de texto com uma linha; <html><html> <body> <form><form> Nome: <input type=“text” name=“nome” /> <br/> Sobrenome: <input type=“text” name=“sobrenome”Sobrenome: <input type= text name= sobrenome /> </form> 37 </body> </html>
  38. 38. Formulários HTML Formulários HTML (Campos de Senha) A tag <input type=“password” /> é utilizada na g p yp p / definição de um campo de senha; <html><html> <body> <form><form> Senha: <input type=“password” name=“senha” /> </form> </body> 38 </body> </html>
  39. 39. Formulários HTML Formulários HTML (Radio Buttons) A tag <input type=“radio” /> é utilizada na definição de  um radio button; Radio Buttons permitem aos usuários selecionarem  apenas uma opção em uma lista; <html> <b d ><body> <form> <input type=“radio” name=“time” value=“SPT” />Sport <b /><br/> <input type=“radio” name=“time” value=“FLA” /> Flamengo </f > 39 </form> </body> </html>
  40. 40. Formulários HTML Formulários HTML (Checkboxes) A tag <input type=“checkbox” /> é utilizada na definição de um  h kbcheckbox;  Checkboxes permitem aos usuários selecionarem uma ou mais  opções em uma lista;pç ; <html> <body> <form><form> <input type=“checkbox” name=“carro” value=“ferrari” />Ferrari <br/><br/> <input type=“checkbox” name=“carro” value=“Fusca” /> Fusca </form> 40 </form> </body> </html>
  41. 41. Formulários HTML Formulários HTML (Botão de Submissão) A tag <input type=“submit” /> é utilizada na definição de  um botão de submissão;um botão de submissão; Um botão de submissão é usado para enviar os dados do  formulário para um servidor;p ; Os dados são enviados para uma página específica,  indicada no atributo action da tag <form>; O arquivo indicado no referido atributo normalmente  executa algum processamento nos dados enviados pelo  formulário; 41
  42. 42. Formulários HTML Formulários HTML (Botão de Submissão) Exemplo:p <html> <body><body> <form action=“recebe.php” method=“GET”> Nome: <input type=“text” name=“nome” />Nome: <input type= text name= nome /> <input type=“submit” value=“Enviar” /> </form> </body> </html> 42
  43. 43. Prática em LaboratórioPrática em Laboratório
  44. 44. Prática em Laboratório • Faça um documento HTML que estruture um  currículo online (o seu!)( ) – A atividade vale de 0 a 3 pontos para a nota do 1º estágio; – Data de entrega: Até 02/09/2013g / / • Enviar o site para provas@thyagomaia.net – Critérios de avaliação: Conteúdo (uso de texto, imagem,  vídeo, etc.), Formatação, Organização do Código e  Pesquisa (o aluno pesquisou e utilizou tags não  t d l d l )apresentadas em sala de aula); – Os documentos deverão ser editados APENAS através dos  softwares Notepad++ Notepad ou Gedit;softwares Notepad++, Notepad ou Gedit; 44

×