Mais conteúdo relacionado
Mais procurados
Mais procurados (19)
Semelhante a Front-end 001
Semelhante a Front-end 001 (20)
Último
Último (20)
Front-end 001
- 1. Grupo de estudos Front-end Encontro – 01 Introdução
- 2. Como vai funcionar? Encontros semanais Apresentação da linguagem ou ferramenta a ser utilizada Teoria (se necessário) Prática
- 3. Grade do grupo HTML Introdução ao HMTL 4.0 O que mudou do HTML 4 para o 5 Novas tags em HTML 5 CSS Introdução ao CSS 2 O que mudou do CSS 2 para o 3 Novas tags em CSS 3
- 4. Grade do grupo JavaScrip O que é JavaScript Introdução a linguagem JavaScript Páginas dinâmicas com JavaScript jQuery O que é jQuery Qual a diferença de JavaScript e jQuery Introdução a linguagem jQuery Animações e efeitos com jQuery
- 5. E as boas práticas de programação Front-end? As boas práticas serão mostradas em todos os conteúdos Aprender a programar exige prática Aprender as boas práticas de programação exige mais prática ainda, leitura e bom senso Em cada prática do grupo, nós veremos como construir códigos corretos, limpos e bem aproveitados
- 6. E a Semântica SEO A semântica SEO vai nascer quase naturalmente das boas práticas e também das leituras complementares dos seus estudos. Dicas e truques.
- 7. Mas o que é SEO? SEO = Search Engine Optimization, ou seja, Engine de otimização de busca. Ele é o responsável por dizer quem será o mais bem colocado na busca do google.
- 8. E os FrameWorks? Serão passados após termos aprendido os conceitos básicos Utilização de framework gera vícios Programadores viaciados em framework não são bons programadores Usem com moderação
- 10. O que é Front-end O front-end é a parte visível do site
- 11. O que é Font-end O desenvolvedor font-end é quem da vida, forma e utilidade ao site Motagem do site Programação do site Efeitos do site Comportamento do site
- 12. E como faz isso? Precisamos compreender a ideia do site Ter técnica e conhecimento Ser criativo Gostar de desafio E o principal… Estar atualizado!
- 13. Como funciona um site? Como fazer um site?
- 14. Como funciona! O site é dividido em 3 camadas Conteúdo • HTML Apresentação • CSS Comportamento • Script em geral
- 15. Obs As 3 camadas não devem ser misturadas Cada camada deve ser escrita em seu arquivo específico Index.html Style.css Scripts.js
- 16. Dúvidas?
- 18. Principais Tags <html>…</html> É a tag de abertura do documento html <head>…</head> Cabeçalho da página e local onde ficam as informações adicionais <body>…</body> Corpo da página, onde fica a parte principal do seu site
- 19. “Olá Mundo!” Em HTML <html> <head> </head> <body> Olá Mundo! </body </html>
- 20. Como ficou o meu!
- 21. Resultado?
- 22. Mas porque ficou tão feio?
- 23. Teoria A sintaxe básica do HTML é em inglês, para que ele possa ser adaptado ao português, nós devemos usar um argumento que diga ao HTML que ele é um arquivo HTML em português! O Doctype e o meta, vão definir o tipo de arquivo e qual sistema de linguagem ele deve seguir! Vamos corrigir esse problema! <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- 24. Corrigido
- 25. Vamos ver!
- 26. Dúvidas?
- 27. Outras Tags importantes <title>…</title> Título da janela do browser <h1>…</h1> Título da sua página O título varia de h1 à h6 <p>…</p> Parágrafo no seu site Negrito <b>…</b> Itálico <i>…</i>
- 28. Demonstração
- 29. Resultado
- 30. Semântica SEO Uma página HTML só deve conter um título e um subtítulo! Você só deve usar um h1 e h2 por página, mas fica livre para usar quantos h3, h4, h5 e h6 você quiser. O título usado no browser, sempre deve ser igual ao conteúdo contido nele.
- 31. Mais Tags? <br /> Quebra linha <hr /> Linha horizontal <ul>…</ul> Lista simples <ol>…</ol> Lista ordenada <li>…</li> Item de uma lista
- 32. Demonstração
- 33. Resultado
- 34. Desafio 1 – Modificar lista Existe uma forma de modificar as listas. Exemplo:
- 35. Desafio 2 – Atributos Muitas tags recebem aitributos. Descubra alguma delas e traga uma aplicação delas. Exemplo: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta> é a tag, http-equiv e content são atributos da tag. E “Content-Type” e “text/html; charset=UTF-8” são os valores dos atributos.
- 36. Desafio 3 - Construção Crie uma página, apenas em HTML com todas as tags contidas nos slides e adicione atributos nas tags. Tema livre Use a criatividade Estude
- 38. Até a próxima semana!