Html básico 1

1.244 visualizações

Publicada em

HTML básico usado na disciplina PROGRAMAÇÃO PARA INTERNET.

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
1.244
No SlideShare
0
A partir de incorporações
0
Número de incorporações
6
Ações
Compartilhamentos
0
Downloads
50
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Html básico 1

  1. 1. HTML BÁSICO Professor Luciano Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 1
  2. 2. O que é HTML? HTML é a "língua mãe" do seu navegador. HTML é a abreviatura de "HyperText Mark-up Language" Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 2
  3. 3. O que são Tags HTML? Tags são rótulos usados para informar ao navegador como deve ser apresentado o website. Todas as tags têm o mesmo formato: começam com um sinal de menor "<" e acabam com um sinal de maior ">". Genericamente falando, existem dois tipos de tags - tags de abertura: <comando> e tags de fechamento: </comando>. A diferença entre elas é que na tag de fechamento existe um barra "/". Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 3
  4. 4. Estrutura básica de umapágina web.<html> <head> </head> <body> </body></html> Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 4
  5. 5. Título da página do site. Para dar um título ao documento, título este que apareça no topo da barra do navegador você deverá usar a seção"head". A tag para acrescentar um título é <title>: <title>Minha primeira página web</title> Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 5
  6. 6. Tag de parágrafo A letra p na tag <p> é a abreviatura para "paragraph" (parágrafo) que é exatamente o que o texto é - um texto parágrafo. <p>Esta é a minha primeira página web.</p> Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 6
  7. 7. Tags de cabeçalhos <h1>Cabeçalho</h1> <h2>Subtítulo</h2> <h3>Sub-subtítulo1</h3> <h4>Sub-subtítulo2</h4> <h5>Sub-subtítulo3</h5> <h6>Sub-subtítulo4</h6> Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 7
  8. 8. Tags de negrito e itálico <b>Torna o texto negrito.</b> <i>Torna o texto itálico.</i> Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 8
  9. 9. Tag SMALL Para deixar o texto com letras menores, utilize a tag small, desta forma: <small>Este texto deve ser com letras em tamanho small.</small> Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 9
  10. 10. Posso usar várias tagssimultaneamente? Sim você pode usar quantas tags queira desde de que as aninhe convenientemente. Veja como fazer isto no exemplo abaixo: Para escrever um texto em negrito e itálico faça como mostrado a seguir: <b><i>Texto em negrito e itálico.</i></b> Observe que no primeiro exemplo a primeira tag de abertura <b> corresponde a última tag de fechamento </b>, e o aninhamento está certo. Isto evita confusão para quem escreve o código e para o navegador que lê o código. Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 10
  11. 11. Tags que são abertas efechadas em única tag Estas tags são comandos isolados, ou seja, não contém nenhum texto dentro delas para poder funcionar. Um exemplo é a tag <br /> que serve para criar uma quebra de linha: Exemplo: Um texto<br /> e mais texto em nova linha Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 11
  12. 12. Tag HR Esta tag <hr /> que serve para definir uma linha horizontal ("hr" vem "horizontal rule" - régua horizontal ): Exemplo:<hr /> Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 12
  13. 13. Tag para fazer “comentários”no código Caso queira fazer comentários ou apenas anular parte do código sem apagá-lo, usa-se as seguintes tags: <!-- Tag para comentar algo no código --> Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 13
  14. 14. Lista não numerada A Tag <ul>, com a tag auxiliar <li>, são usadas para criar uma lista de itens não numerada. Veja:<ul> <li>Um item de lista</li> <li>Outro item de lista</li></ul> Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 14
  15. 15. Lista numerada ou ordenada É semelhante a anterior não numerada, exceto porque utiliza a marcação <ol> ao invés de <ul> Veja:<ol> <li>Um item de lista</li> <li>Outro item de lista</li></ol> Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 15
  16. 16. Atributos Em algumas tags você pode ser mais específico, acrescentando na tag, informações adicionais de comando. Isto é feito através dos atributos. Exemplo:<h2 style="background- color:#ff0000;">Eu adoro HTML</h2> Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 16
  17. 17. Como é isto? Existem vários atributos. O primeiro que você aprenderá é o atributo style. Com o atributo style você pode adicionar estilização e layout ao seu website. Por exemplo, uma cor de fundo e cor da letra: Exemplo:<html><head></head><body style="background-color:black; color:white;"></body></html> Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 17
  18. 18. Como funciona as cores nocódigo? Cada cor é representada por um número hexadecimal. A seguir alguns exemplos:Branco: #FFFFFFPreto: #000000 (zeros)Vermelho: #FF0000Azul: #0000FFVerde: #00FF00Amarelo: #FFFF00 Um código hexadecimal para cores é formado por um sinal # seguido de seis dígitos e/ou letras. Para algumas cores, você pode usar o nome das cores em inglês (white, black, red, blue, green e yellow - branco, preto, vermelho, azul, verde, amarelo). Exemplo:<body style="background-color: red;"> Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 18
  19. 19. Atributo style em outras tags Posso também aplicar o atributo style em outras tags como parágrafo e cabeçalhos. Veja: <h1 style="background-color:white; color:blue;">CABEÇALHO 1</h1> <p style="color:blue;">primeiro site html</p> Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 19
  20. 20. Sub-comandos da tag BODY Os atributos BGCOLOR e TEXT também são usados na tag <body> para alterar a cor do fundo e a cor da letra, respectivamente. Veja: Exemplo:<body bgcolor=black text=blue> Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 20
  21. 21. Exercícios para fixação Criar algumas páginas que compõem o site usando as seguintes formatações. Utilizar as tags aprendidas nesta aula, tags de cabeçalhos, parágrafos, negrito, itálico, etc. Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 21
  22. 22. Empresa.html Titulo: Luciano Enxovais Conteúdo: A Luciano Enxovais nasceu em 1999 em Ibitinga, capital nacional do bordado, mas nossa experiência em produzir bordado de alta qualidade existe a mais de 20 anos. Durante todo esse tempo aprendemos que um produto de qualidade é aquele feito sob medida para você. Por isso cada peça produzida na Luciano Enxovais é minuciosamente preparada para tornar o seu lar ainda mais belo. A Luciano Enxovais se preocupa com a qualidade e delicadeza na produção de cada peça do começo ao fim. Este é o compromisso da Luciano Enxovais. Deixando sua casa ainda mais bela, do jeito que você gosta. Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 22
  23. 23. Departamentos.html Titulo: departamentos da empresa Criar uma lista usando as tags específicas da seguinte forma:Comercial  André  JuniorFinanceiro1. Adriana2. Juliana Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 23

×