Html

474 views
430 views

Published on

Primeira aula de html

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
474
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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>

×