03 - HMTL/CSS - Curso de Programação

241 visualizações

Publicada em

Curso de Formação - Introdução à programação em HTML e CSS
- Elementos, Tags, Atributos e Valores

Publicada em: Tecnologia
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

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

Nenhuma nota no slide

03 - HMTL/CSS - Curso de Programação

  1. 1. TAG INICIAL TAG FINAL
  2. 2. Tags são o conjunto de caracteres que criam uma marcação associados a um valor/atributo pré-definido pela linguagem. 1.  U%lizamos o sinal de menor ( < ) 2.  Seguido do nome do elemento 3.  E o sinal de maior ( > ) 4.  U%lizamos o sinal de menor ( < ) + barra ( / ), 5.  Nome do elemento 6.  E o sinal de maior ( > ). PARA CRIAR UMA TAG PARA FECHAR TAG <b> </b> Criar TAG bold Fechar TAG bold
  3. 3. Abrir: Notepad ++ ou Sublime Text Escrever: Olá Mundo! Salvar Como: tags.html Criar uma 2ª linha: Com o mesmo texto 1# EXERCÍCIO
  4. 4. <b> Bold <i> Italic <small> Smaller <strong> Important <sub> Subscripted <sup> Superscripted <ins> Inserted <del> Deleted <mark> Highlighted <hr> Horizontal Rule Text FormaXng Elements Vamos ver como funciona ? Estas TAGS são usadas para estruturar gráficamente o texto.
  5. 5. Abrir: - Documento tags.html - Criar 9 linhas com o texto “Olá Mundo!” - Marcar cada texto/linha com as tags anteriores. 2# EXERCÍCIO
  6. 6. Notas: -  A TAG <br> cria uma quebra de linha. -  A TAG <p> cria um novo paragrafo e deixa uma margem de intervalo antes de recomeçar o texto. Vamos ver como funciona ? FormaXng Paragraphs Estas TAGS são usadas para estruturar gráficamente o texto. <p> Defines a paragraph <br> Inserts a single line break <pre> Defines pre-formaaed text
  7. 7. Abrir: - Documento .tags.html - Criar 1 romance com 3 parágrafos! J - Aplicar as TAGS: - <p> e <pre> 3# EXERCÍCIO
  8. 8. Notas: -  Existem 6 tamanhos dis%ntos ordenados de forma decrescente do H1 para o H6. Vamos ver como funciona ? FormaXng Headings Estas TAGS são usadas para atribuir níveis hieráquicos nas secções dos textos <h1> <h2> <h3> <h4> <h5> <h6>
  9. 9. Criar: - Documento headings.html - Escrever 6 vezes incons%tucionalissimamente! -  Aplicar as 6 TAGS de cabeçalhos. 4# EXERCÍCIO
  10. 10. Exemplo: <!--Isto é um comentário --> <p> Isto é um parágrafo <p/> Vamos ver como funciona ? Create Comments Os comentários são de extrema importância para organizar o código e orientar o programador. Início: <!-- Fim: -->
  11. 11. Criar: - Documento comments.html - Escrever 1 poema! J -  Comentar as estrofes… 5# EXERCÍCIO
  12. 12. Create Lists As listas são marcações ideais para ajudar o u%lizador a iden%ficar a informação que pretende. Notas: -  Estas TAGS são úteis para organizar dados em lista e facilitar a leitura da informação. <ol> - Lista Ordenada <ul> - Lista não Ordenada <dl> - Lista de Descrição 3 TIPOS DE LISTAS
  13. 13. Create Lists <ol> - Lista Ordenada Notas: -  Usar sempre a tag list <li> para criar a respe%va linha <ol> <li>Benfica</li> <li>Porto</li> <li>Spor%ng</li> </ol>
  14. 14. Create Lists <ul> - Lista Não Ordenada Notas: -  Usar sempre a tag list <li> para criar a respe%va linha <ul> <li>Benfica</li> <li>Porto</li> <li>Spor%ng</li> </ul>
  15. 15. Create Lists <dl> - Lista de Descrição Notas: -  Usar sempre a tag list <dt> para criar a 1ª linha -  Usar sempre a tag list <dd> para criar a linha subsequente <dl> <dt>SLB</dt> <dd>- Spor%ng Lisboa e Benfica</dd> <dt>FCP</dt> <dd>- Futebol Clube do Porto</dd> </dl>
  16. 16. Criar: - Documento lists.html - Criar 1 lista ordenada: <ol> - Criar 1 lista sem ordenação: <ul> - Criar 1 Lista com Definição: <dl> 6# EXERCÍCIO Nota: Cada lista deve ter pelo menos 3 linhas
  17. 17. Create Tables As tabelas podem ser usadas para expor informações de forma clara e facilmente organizada por linhas e colunas. <table> - TAG para criar tabela <tr> - TAG para criar coluna (Row) <td> - TAG para criar células (Date) 3 TAGS IMPORTANTES SIMPLIFICANDO
  18. 18. Create Tables EXEMPLIFICANDO <table border="1"> <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> Row 1 Cell 1 Row 1 Cell 2 Row 2 Cell 1 Row 2 Cell 2 Vamos ver como funciona ?
  19. 19. Create Tables COMPLICANDO Através da TAG <th> (Table Header) Podemos criar/destacar os cabeçalhos da tabela. <th> CABEÇALHOS
  20. 20. EXEMPLIFICANDO <table border="1"> <tr> <th>CABEÇALHO 1</th> <th>CABEÇALHO 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> Row 1 Cell 1 Row 1 Cell 2 Row 2 Cell 1 Row 2 Cell 2 CABEÇALHO 11 CABEÇALHO 21
  21. 21. Create Tables IMPLICANDO Através do ATRIBUTO colspan Podemos fazer a fusão com colunas COLSPAN UNINDO <td colspan=“2">FUSÃO!!</td>
  22. 22. EXEMPLIFICANDO <table border="1"> <tr> <th>Row 1 Cell 1</td> <th>Row 1 Cell 2</td> </tr> <tr> <td>Row 1 Cell 1</td> <td>Row 1 Cell 2</td> </tr> <tr> <td colspan="2">FUSÃO!</td> </tr> </table> Row 1 Cell 1 Row 1 Cell 2 FUSÃO! CABEÇALHO 11 CABEÇALHO 21
  23. 23. A EXPLORAR… <colspan> Fusão de colunas <capXon> Legenda da tabela <colgroup> - Estas TAGS permitem agrupar colunas. <thead> <tbody> <moot> - Com estes elementos podemos agrupar linhas de tabelas num cabeçalho, num rodapé e numa ou mais secções do corpo da tabela.
  24. 24. Criar: -  Criar um novo documento index.html de acordo com a seguinte estrutura: [ VER AQUI] -  Enviar para: j.almeidabrandao@gmail.com 7# EXERCÍCIO Notas: Atenção à indentação Atenção à estrutura Head e Body
  25. 25. [ VER EXEMPLO ] www.m-voice.org
  26. 26. HTML Layout <!DOCTYPE html> <html> <head> </head> <body> <body> <html> Informa o browser da versão HTML u%lizada na página. ABRIR TAG HTML FECHAR TAG HTML Inclui informações importantes sobre a página, ztulo, descrição, keywords e autor Inclui o conteúdo da página, desde Títulos, parágrafos, tabelas, listas, Imagens, entre outros...
  27. 27. INDENTAÇÃO <!DOCTYPE html> <html> <head> <%tle> Home </%tle> </head> <body> <h1> Home </h1> <p> Home </p> <body> <html>
  28. 28. <!DOCTYPE html> <html> <head> <%tle> Home </%tle> </head> <body> <h1> Home </h1> <p> Home </p> <body> <html> INDENTAÇÃO
  29. 29. <!DOCTYPE html> <html> <head> <%tle> Home </%tle> </head> <body> <h1> Home </h1> <p> Home </p> <body> <html> INDENTAÇÃO
  30. 30. Criar: - Criar documento index.html com a seguinte estrutura 8# EXERCÍCIO <!DOCTYPE html> <html> <head> </head> <body> </body> </html> Nota: Atenção à indentação
  31. 31. HTML Layout <head> </head> <header> <Xtle> Página Pessoal </Xtle> <!DOCTYPE html>
  32. 32. HTML Layout <head> </head> FECHAR TAG HTML <header> <%tle> Página Pessoal </%tle> <meta charset="UTF-8"> <meta name="descrip%on" content="Página pessoal de J. Brandão"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="Jorge Brandão">
  33. 33. Criar: - Criar documento index.html com a seguinte estrutura 8# EXERCÍCIO <!DOCTYPE html> <html> <head> <%tle> Página Pessoal </%tle> <meta charset="UTF-8"> <meta name="descrip%on" content="Página Pessoal "> <meta name="keywords" content="HTML,CSS"> <meta name="author" content="Jorge Brandão”> </head> <body> </body> </html> Nota: Atenção à indentação
  34. 34. Creat HTML Tags Tal como referido, anteriormente, existem algumas TAGS que têm obrigatóriamente de ser fechadas ao contrário de outras, exemplos; TAGS COM ENCERRAMENTO: <h1> texto </h1> <p> texto </p> <div> texto </div> TAGS SEM ENCERRAMENTO <br> <hr>
  35. 35. Creat HTML Blocks Todos os ELEMENTOS HTML estão apresentados, por defeito, sob 2 formas, em linha ou em bloco, sejam eles cabeçalhos <h1> parágrafos <p>, entre outos… ELEMENTOS APRESENTADOS EM BLOCO: <h1> texto </h1> <p> texto </p> <div> texto </div> ELEMENTOS APRESENTADOS EM LINHA: <b> <i> <ul>

×