Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html

583 views

Published on

Primeira aula de html

Published in: Education
  • Be the first to comment

  • Be the first to like this

Html

  1. 1. HTML Aula X
  2. 2. Formatação de texto <ul><li>Tags básicas </li></ul><ul><li>Formatação de parágrafo </li></ul><ul><li>Formatação de fonte </li></ul>
  3. 3. Tags Básicas Teste <b><i><u>Teste</u></i></b> Teste <u> Teste </u> Teste <s> Teste </s> Teste <i> Teste </i> Teste <b> Teste </b>
  4. 4. Formatação de Parágrafo <ul><li>É utilizada através do conjunto de tags <hX> onde x vai de 1 até 6. </li></ul><ul><li>Formata o texto com tamanhos predefinidos e com uma quebra de linha automática após a finalização da tag: </li></ul><ul><ul><ul><li><h1> ... </h1> <h2> ... </h2> </li></ul></ul></ul><ul><ul><ul><li><h3> ... </h3> <h4> ... </h4> </li></ul></ul></ul><ul><ul><ul><li><h5> ... </h5> <h6> ... </h6> </li></ul></ul></ul>
  5. 5. Formatação de fonte <ul><li>A tag para formatação de fonte é a <font>. </li></ul><ul><li>Ela possui parâmetros que nos permite alterar a cor, o tamanho e o tipo da fonte. </li></ul><ul><li>Esses parâmetros podem ser combinados. </li></ul><ul><li><font color=“”>  cor em inglês ou sua codificação hexadecimal. </li></ul><ul><li><font face=“”>  nome do tipo de fonte </li></ul><ul><li><font size=“”>  tamanho de 1 à 7 </li></ul>
  6. 6. Formatação de fonte Teste <font color=“green” face=“courier new” size=“7”> <b> Teste </b> </font> Teste <font color=“red” face=“comic sans ms”> Teste </font> Teste <font size=“3” color=“red”> Teste </font>
  7. 7. Exercícios <ul><li>Construa uma página da web onde serão desenvolvidos os exercícios abaixo </li></ul><ul><li>1) Escreva a frase “Meu Brasil brasileiro” com cada letra com um tipo e uma cor diferente. </li></ul><ul><li>2) Escreva a frase “Um país de várias culturas, raças, povos, nações, um mundo dentro de um país, um país dentro de um mundo” utilizando negrito ou sublinhado para destacar as palavras culturas / raças / povos / nações / mundo . </li></ul>
  8. 8. HTML Aula X
  9. 9. Imagens <ul><li>Tipos de imagens </li></ul><ul><li>Inserindo uma imagem na página </li></ul><ul><li>Inserindo uma imagem no fundo da página </li></ul>
  10. 10. Tipos de Imagens <ul><li>JPG </li></ul><ul><li>GIF </li></ul><ul><li>PNG </li></ul><ul><li>BMP </li></ul><ul><li>ICO </li></ul>
  11. 11. Inserindo uma imagem na página <ul><li>Com o comando img podemos inserir uam imagem na página. </li></ul><ul><li><img src=“caminhodaimagem”> </li></ul><ul><li>Existem parâmetros para: </li></ul><ul><ul><ul><li>Alterar altura e largura: height / width , os valores devem ser em pixel(não utiliza nenhum simbolo) ou porcentagem (%) </li></ul></ul></ul><ul><li><img src=“foto.jpg” width=“10%”> </li></ul><ul><li><img src=“foto.jpg” width=“100”> </li></ul><ul><li>No primeiro exemplo a imagem será exibida com á largura de 10% de seu tamanho original, já no segundo a imagem será exibida com á largura de 100 pixels. </li></ul>
  12. 12. Inserindo uma imagem na página <ul><li>ALT </li></ul><ul><ul><li>O parâmetro alt é utilizado para quando a imagem não for carregada exibir um texto(no mesmo local da imagem) ALTernativo, este texto também é exibido quando o cursor estiver sobre a imagem. </li></ul></ul><ul><ul><li><img src=“bat.jpg” alt=“Cartaz do Batman”> </li></ul></ul>
  13. 13. Inserindo uma imagem no fundo da página <ul><li>Para inserir um imagem como fundo de nossa página web, devemos alterar a tag body acrescentando o parametro background. </li></ul><ul><li><body background=“fundo.jpg”> </li></ul><ul><li>Cada documento deve ter apenas uma tag BODY </li></ul>
  14. 14. HTML Aula x
  15. 15. Listas <ul><li>Listas ordenadas </li></ul><ul><li>Listas desordenadas </li></ul>
  16. 16. Listas Ordenadas <ul><li>Uma lista ordenada consiste em criar uma lista com numeração. </li></ul><ul><li>A tag para criar uma lista ordenada é a tag ol (ordened list). </li></ul><ul><li>Cada item da lista deve ter o comando li (list item): </li></ul><ul><li><ol> </li></ul><ul><li><li> Primeiro item da lista </li> </li></ul><ul><li><li> Segundo item da lista </li> </li></ul><ul><li></ol> </li></ul>
  17. 17. Listas Ordenadas <ul><li>O comando ol tem os seguintes parâmetros: </li></ul><ul><ul><ul><li>Start  escolher em que posição sua lista ira iniciar </li></ul></ul></ul><ul><ul><ul><li>Type  escolher o tipo de numerador pra lista entre: 1 / i / I / a / A </li></ul></ul></ul><ul><li><ol start=“3” type=“a”> </li></ul><ul><li><li> Primeiro item da lista </li> </li></ul><ul><li><li> Segundo item da lista </li> </li></ul><ul><li></ol> </li></ul>
  18. 18. Listas Desordenadas <ul><li>Uma lista desordenada consiste em criar uma lista com marcadores. </li></ul><ul><li>A tag para criar uma lista ordenada é a tag ul (unordened list). </li></ul><ul><li>Cada item da lista deve ter o comando li (list item): </li></ul><ul><li><ul> </li></ul><ul><li><li> Primeiro item da lista </li> </li></ul><ul><li><li> Segundo item da lista </li> </li></ul><ul><li></ul> </li></ul>
  19. 19. Listas Desordenadas <ul><li>O comando ul tem os seguintes parâmetros: </li></ul><ul><ul><ul><li>Type  escolher o tipo de marcador pra lista entre: square / circle / disc </li></ul></ul></ul><ul><li><ul type=“square”> </li></ul><ul><li><li> Primeiro item da lista </li> </li></ul><ul><li><li> Segundo item da lista </li> </li></ul><ul><li></ul> </li></ul>
  20. 20. Exercícios <ul><li>Construa uma página da web onde serão desenvolvidos os exercícios abaixo. </li></ul><ul><li>1) Insira uma foto de um estádio como plano de fundo. </li></ul><ul><li>2) Insira o brasão de 5 times de futebol. </li></ul><ul><li>3) Crie uma lista ordenada com o nome dos 4 primeiros clubes do campeonato brasileiro. </li></ul><ul><li>4) Crie uma lista ordenada com o nome dos 4 últimos clubes do campeonato brasileiro. </li></ul><ul><li>5) Crie uma lista desordenada com os candidatos a prefeito de Americana. </li></ul>
  21. 21. HTML Aula X
  22. 22. Tabelas <ul><li>Criando tabelas </li></ul><ul><li>Mesclando linhas/colunas </li></ul><ul><li>Formatação de tabelas </li></ul>
  23. 23. Criando Tabelas <ul><li>Uma tabela é formada por linhas e colunas </li></ul>Linha Coluna
  24. 24. Criando Tabelas <ul><li>Para criar a tabela anterior segue código: </li></ul><ul><li><table> </li></ul><ul><li><tr> </li></ul><ul><li><td> .... </td> </li></ul><ul><li><td> .... </td> </li></ul><ul><li><td> .... </td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td> .... </td> </li></ul><ul><li><td> .... </td> </li></ul><ul><li><td> .... </td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>
  25. 25. Criando Tabelas <ul><li>Analisando o código anterior temos: </li></ul><ul><ul><li>Cirando a tabela: <table> </li></ul></ul><ul><ul><li>Criando a linha: <tr> </li></ul></ul><ul><ul><li>Criando coluna: <td> </li></ul></ul><ul><ul><li>Sabendo isso, quantas linhas e colunas temos no código a seguir? </li></ul></ul>
  26. 26. <ul><li><table> </li></ul><ul><li><tr> </li></ul><ul><li><td> Segunda </td> <td> Terça </td><td> Quarta </td> <td>Quinta</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td> Dentista </td> <td> Academia </td><td> Curso </td> </li></ul><ul><li><td>Leitura</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td> Dentista </td> <td> Academia </td><td> Curso </td> </li></ul><ul><li><td>Leitura</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>
  27. 27. <ul><li>LINHAS </li></ul>
  28. 28. <ul><li><table> </li></ul><ul><li><tr> </li></ul><ul><li><td> Segunda </td> <td> Terça </td><td> Quarta </td> <td>Quinta</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td> Dentista </td> <td> Academia </td><td> Curso </td> </li></ul><ul><li><td>Leitura</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td> Dentista </td> <td> Academia </td><td> Curso </td> </li></ul><ul><li><td>Leitura</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>
  29. 29. <ul><li>Colunas </li></ul>
  30. 30. <ul><li><table> </li></ul><ul><li><tr> </li></ul><ul><li><td> Segunda </td> <td> Terça </td><td> Quarta </td> <td> Quinta </td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td> Dentista </td> <td> Academia </td><td> Curso </td> </li></ul><ul><li><td> Leitura </td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td> Dentista </td> <td> Academia </td><td> Curso </td> </li></ul><ul><li><td> Leitura </td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>
  31. 31. Criando Tabelas <ul><li>A tabela possui 5 linhas com 4 colunas em cada linha </li></ul>

×