Mini curso html5 slides

273 visualizações

Publicada em

MInicurso no evento Expotec do IFRN-João Camara

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

Nenhuma nota no slide

Mini curso html5 slides

  1. 1. Aprendendo Web com HTML5 Carlos Rodrigo, Júnior Mendes .
  2. 2. 1. INTRODUÇÃO
  3. 3. HTML é uma linguagem de marcação da World Wide Web. A especificação do HTML5 ainda está em construção, mas a maioria dos browsers já suportam boa parte dos novos elementos e APIs do HTML5
  4. 4. ROTEIRO E MATERIAIS 1. 3 Camadas de Desenvolvimento Web; 2. Principais Tags de uma estrutura Web; 3. Praticando as Tags; 4. Porque o novo HTML5; 5. Principais características do HTML5; 6. Desafio das funcionalidades do HTML, criando um minisite; 7. “CSS” sintaxe do css, propriedades; 8. Criando o seu primeiro site HTML com CSS.
  5. 5. ROTEIRO E MATERIAIS Ferramenta de Desenvolvimento • Editor padrão do Sist. Operacional Windows: Notepad Linux: gedit • Editor de texto que recomendo... Brackets
  6. 6. As três camadas de desenvolvimento • Primeira Camada: Informação – HTML • Segunda Camada: Formatação – CSS • Terceira Camada : Comportamento – JavaScript 3 Camadas de Desenvolvimento Web
  7. 7. Primeira Camada: Informação • O HTML marca a informação dando-lhe significado; • O conteúdo deve ser marcado entre tags. EX.: <h1> Olá Pessoal! </h1>
  8. 8. Segunda Camada: Formatação • CSS- Cascading Style Sheets • O CSS formata o conteúdo em HTML cuidando do design da página. • Existem duas formas de usar o CSS. Embutido no HTML entre as tags <style></style> ou em um arquivo externo conectado ao HTML por um link.
  9. 9. Terceira Camada: Comportamento • Com o JavaScript você pode dimensionar, rotacionar e reformatar os elementos de sua página. • Controla os valores definidos pelo CSS e manipula as propriedades.
  10. 10. Exemplo para identificar cada elemento em uma página...! “www.uol.com.br”
  11. 11. Principais Tags de uma estrutura Web • A tag <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > indicar ao browser qual a versão do HTML em que o documento está escrito. • A tag <HTML> – usado em conjunto com sua tag de fechamento < / HTML > e será colocado no início e no final do documento.
  12. 12. • A tag <HEAD> - que também terá seu tag de fechamento </HEAD> servirá para delimitar uma área de cabeçalho. • A tag <meta http-equiv="content-type" content="text/html; charset=UTF-8"> - serve para o reconhecimento da biblioteca de alfabetos • A tag <TITLE> - será usado dentro dos tags <HEAD> , e servirá apenas para colocar um título que aparecerá na barra de título do seu browser ( não esqueça o </TITLE> ) . • Dentro das tag’s <BODY> </BODY> serão colocados todos os comandos , textos e imagens da sua página
  13. 13. Porque o novo HTML5... A versão anterior do HTML foi a (4.01) que foi lançada em 1999 e não evoluiu desde lá A web, ao contrário, mudou bastante se fazendo necessário o novo... HTML5 o novo padrão para HTML!
  14. 14. Principais características do HTML5 Uma característica admirada por todos, foi a que o HTML5 acarretou todas as funcionalidades do HTML anterior. Excluíndo apenas as tags não usadas, ou as que foram melhoradas em sua funcionalidade. Exemplos de Tags tradicionais do HTML4.
  15. 15. • A tag <h> Texto qualquer </h> cria uma espécie de cabeçalho no documento. Ex.: <h1> Cabeçalho Grande </h1> . . . . . . <h6> Cabeçalho Pequeno </h6> • A tag <p> Adiciona um parágrafo na sua página.</p> • A tag <b>Negrito</b> • A tag <i> Italico</i> • A tag <u>Sublinhado</u> • A tag <center> para centralizar o texto.
  16. 16. • A tag <br/> ela é usada assim porque o valor é ela mesma, a tag é o próprio atributo, “quebra de linha”. • A tag <hr/> é do mesmo jeito. Ela cria uma linha horizontal na tela. • A tag <a href=“link”> O que vai aparecer na tela</a> essa tag vai direcionar você ao link que desejar. • A tag <img src=“diretorio da imagem.formatodaimg” alt=“nomeParaRepresentarImagem”/> essa tag é de puxar uma imagem selecionada.
  17. 17. O que temos de novidade no HTML5? • Novos elementos semânticos e atributos. Novos elementos de marcação para conteúdo <article>, <footer>, <header>, <nav>, <section> Novos controles de formulários Calendário, datas, horas, email, telefones, url, busca, etc. • APIs nativas para assistir a criação de aplicações web. • Armazemanento Local.
  18. 18. Desafio • Criar um site de um artista favorito seu... 1. Onde terá uma imagem desse artista; 2. E uma lista com 5 músicas que você mais gosta 3. Com links direcionando para algum site onde poderemos ver a letra da canção.
  19. 19. CSS O que eu posso fazer com CSS? CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais. Aguarde e você verá! Qual é a diferença entre CSS e HTML? HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados.
  20. 20. Suponha que desejamos uma cor de fundo vermelha para a página web: Usando HTML podemos fazer assim: <body bgcolor="#FF0000"> Com CSS o mesmo resultado será obtido assim: body {background-color: #FF0000;} Como você pode notar os códigos HTML e CSS são mais ou menos parecidos. O exemplo acima serve também para demonstrar o fundamento do modelo CSS: A sintaxe básica das CSS
  21. 21. Com CSS o mesmo resultado será obtido assim: body {background-color: #FF0000;}
  22. 22. Exemplos de propriedades do CSS .h1 { color: black; } .h1 {font-family: arial, verdana, sans-serif;} .h2 {font-family: "Times New Roman", serif;} .p { font-family: arial; color: blue; } .p { text-align: justify; } pode ser center para centralizar.
  23. 23. Exemplos de propriedades do CSS .a:link { color: blue; } “Links não visitados” .a:visited { color: red; } “Links Visitados” .a:active { background-color: red; } “Links Ativos” .a:hover { color: orange; font-style: italic; } “Curso sobre o link” .a { text-decoration:none; } “Aqui tira o sublinhado do link” Obs.: Você tem que colocar em todos os “a”
  24. 24. Exemplos de propriedades do CSS #img { height: 200px; width: 200px; } Obs.: na questão dos tamanhos pode usar px ou %, que equivale à porcetagem da tela. Você deve está se perguntando mas e esse “jogo da velha” no lugar do ponto...!
  25. 25. Identificando (Classes e Id’s ) . = Classe # = Id Classe é usado para um grupo de elementos. EX. .p { font-family: arial; color: blue; } Já o Id é usado para um único elemento. EX. #img { height: 200px; width: 200px; }
  26. 26. Como usar as (Classes e Id’s ) no meu HTML <body> <p class=“p”>O sabiá não sabia.</br> Que o sábio sabia.</br> Que o sabiá não sabia assobiar.</p> </body>
  27. 27. Como usar as (Classes e Id’s ) no meu HTML <body> <img id=“img” src ="imagens/anderson.jpg“> </body>
  28. 28. Desafio • Formate o site que você criou recetemente. 1. Mude o background; 2. Altere o tamanho da imagem para 200px de altura e 200px de largura; 3. Estilize os links das músicas; 4. Formate a fonte da lista de músicas; 5. Crie um cabeçalho com a frase ”Expotec de João Camara 2014” antes do nome do artista; 6. Crie um rodapé com a frase “Desenvolvido por (coloque o seu nome)”.
  29. 29. Desafio • Para ajudar no desafio segue o link com a tabela de cores: http://www.cultura.ufpa.br/dicas/htm/htm-cor1.htm
  30. 30. AGRADECIMENTOS Obrigado a todos que estão aqui presentes...

×