HTML5 e CSS3

Aula sobre introdução ao HTML5 e ao CSS3 para os alunos do Centro de Educação e Inovação Tecnológica CEIT em Santa Cruz Cabralia, Bahia (https://www.facebook.com/ceit.pr3g)

Transcript

1. & Vitor Leal - 2014
2. O que é? HTML é a abreviação de HyperText Markup Language.! É uma linguagem de marcação utilizada para criar páginas Web. HTML CSS é a abreviação de Cascading Style Sheets. É uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação. CSS 2
3. Conteúdo/Informação Estilo/Apresentação 3 O que é?
5. Como iniciar?
6. 6 Como iniciar? Como criamos nossa primeira página HTML? • Crie um arquivo chamado index.html Abra este arquivo em um editor de texto de sua preferência (ex: Sublime Text, NotePad++). • Vamos inserir a estrutura básico de uma página HTML
7. Estrutura Básica HTML
8. 8 Estrutura básica HTML
9. 9 DOCTYPE Sempre iniciamos uma página HTML com o DOCTYPE. ! Ele é a definição do tipo do documento e server para definir de que forma os navegadores vão se comportar ao ler seu código. No nosso caso o DOCTYPE é para indicar que é uma página HTML5.
10. 10 Depois do DOCTYPE abrimos e fechamos a tag HTML. Dentro dela é onde vamos inserir a tag HEAD e a tag BODY. HTML
11. 11 Dentro da tag HEAD vamos sempre inserir a tag TITLE, que será o título da nossa página html. Neste exemplo “Aula de HTML”. HEAD
12. 12 Dentro da tag BODY é onde vamos inserir o conteúdo da nossa página, tudo que vai ser visualizado pelo usuário no navegador. BODY
13. Tag de Marcação
14. 14 No HTML5 temos novas tags para definir a estrutura do nosso site. TAGS de marcação • header - Tag usada para definir o cabeçalho • nav - Tag usada para definir menus! • main - Tag que fica entre o header e o footer • section - Tag para definir sessões • aside - Tag para áreas laterais (sidebar) • footer - Tag para definir rodapé
15. 15 <header></header> <nav></nav> <section></section> <aside>! </aside> <footer></footer> TAGS de marcação <main></main>
16. 16 TAGS de marcação
17. Tag de Conteúdo
18. 18 Temos muitas tags que podemos utilizar para criar o conteúdo para a nossa página, cada uma delas tem uma utilização específica. Veja os exemplos neste link. http://codepen.io/vitorleal/pen/nJBdr TAGS de conteúdo • h1, h2, h3, h4, h5, h6 • Listas • Títulos • ol, ul, li • Links • a • p • Imagem • Parágrafos • Img!
19. 19 Temos 6 tipos de títulos definidos no html. Títulos - h1, h2, h3, h4, h5, h6 O h1 é o o título mais importante da página e o h6 o menos importante.
20. 20 A tag <ol> serve para criar listas que serão ordenadas, vão iniciar com números na frente. Lista Ordenada - ol Como essa lista aparece no navegador: ! 1. Primeiro Item 2. Segundo Item 3. Terceiro Item
21. 21 A tag <ul> serve para criar listas que não serão numeradas. Lista Desordenada - ul Como essa lista aparece no navegador: ! • Primeiro Item • Segundo Item • Terceiro Item
22. 22 Temos a tag <a> para criar um hyperlink, serve para “linkar” uma página para outra. Links - a O atributo href é utilizado para inserir o endereço que o site deve seguir quando o link for “clicado”.
23. 23 Temos a tag <p> para inserir parágrafos de texto. Parágrafos - p
24. Elementos Block e Inline
25. 25 Um elemento block é um elemento que ocupa uma linha inteira para ele. Nenhuma outra tag fica ao lado. Elementos Block e Inline <div></div> <p></p> <ul></ul>
26. 26 Um elemento inline é um elemento que se mantém em linha com outros elementos. Não ocupa uma linha inteira. Elementos Block e Inline
27. 27 Elementos Block e Inline Neste exemplo temos um parágrafo com texto que tem uma tag strong (negrita) e um link. No navegador o usuário vai visualizar este texto em uma só linha. Como no exemplo abaixo: Lorem ipsum dolor sit amet Link
29. Como iniciar?
30. 30 Como iniciar? Como criamos nosso primeiro arquivo CSS? • Crie uma pasta chamada css! • Dentro da pasta crie um arquivo chamado style.css Abra este arquivo em um editor de texto de sua preferência (ex: Sublime Text, NotePad++). • Vamos começar a inserir os estilos
31. 31 Como iniciar? Para carregar nossa folha de estilos no nosso HTML temos que inserir ele na HEAD da nossa página. Para isso vamos usar a tag <link>, o atributo rel identifica esse link como sendo uma folha de estilo e no atributo href inserimos o caminho para nosso .css.
32. Como adicionar estilo ! em um elemento?
33. Como adicionar estilo em um elemento? Aqui estamos adicionando a cor vermelha em todos as tag <p> do nosso site, definindo que todos os títulos <h2> vão ter margem 0 e que todos os links terão a cor preta.
34. Class e Id
35. Class e Id Agora vamos falar sobre class e sobre id. Eles são atributos das tags html que podem ser usadas para inserir estilos para os elementos. • class - Uma tag pode ter varias classes ! ! ! ! • id - Uma tag só pode ter um id e esse id
 deve ser único na página
36. Para adicionar um estilo específico para uma class você tem que colocar um . (ponto) na frente do nome da class no css. Nesse caso a tag que tenha o atributo class=“verde” vai ter a cor verde. Class e Id
37. Para adicionar um estilo específico para um id você tem que colocar um # (hash) na frente do nome do id no css. Nesse caso a tag que tenha o atributo id=“meuID” vai ter a cor preta e 20px de margem para baixo. Class e Id
38. Box Model
39. 39 Box Model Box model (modelo da caixa) detalha as opções de ajuste de margens, bordas, padding e conteúdo para cada elemento. Conteúdo Padding Border Margin
40. 40 Box Model O padding significa um espaço para dentro do conteúdo e o margin um espaço para fora do conteúdo. Conteúdo Padding Border Margin
41. Atributos de CSS
42. 42 Atributos de CSS Temos muitas possibilidades para customizar um elemento HTML. Estes são alguns exemplos:
43. O que tem de! novo no CSS3?
44. 44 O que tem de novo no CSS3? Quais são as principais diferenças do CSS para suas versões anteriores? • cores • transparência • múltiplos backgrounds • bordas arredondadas • fontes
45. 45 O que tem de novo no CSS3? - Cores rgb(255, 255, 255);! rgba(255, 255, 255, 1);! ! !
46. 46 Qual a diferença? - Transparência opacity: 0 = totalmente transparente ! ! ! ! 1 = totalmente opaco
47. 47 Qual a diferença? - Múltiplos backgrounds background: url(url da imagem) eixo-X eixo-Y repete-?,! ! ! ! ! url(outra imagem) eixo-X eixo-Y repete-?,
48. 48 Qual a diferença? - Bordas arredondadas border-radius: medida! border-eixoY-eixoX-radius: medida
49. 49 Qual a diferença? - Fontes
50. 50 Qual a diferença? - Fontes Google fontes tem + de 600 fontes open source para inserir rapidamente no seu projeto. https://www.google.com/fonts
51. 51 Qual a diferença? - Transformações e Animações • transformações: • animações:
52. 52 CrossBrowser Mas como nem tudo é perfeito ainda temo que lidar com as diferentes implementações de cada navegador. -webkit-border-radius -moz-border-radius -o-border-radius -ms-border-radius
53. 53 Debug Como eu consigo fazer o debug do HTML e do CSS que estou criando para o meu projeto?
54. 54 CodeStyle Ao trabalhar em equipe o ideal é que o código escrito por todos pareça que foi escrito por uma só pessoa. http://vitorleal.com/frontend-styleguide/
55. Vitor Leal http://vitorleal.com github.com/vitorleal @vitorleal github: twitter: