Grupo de Estudos   Front-End  Encontro 2 – Finalização do HTML 4        e introdução ao CSS 2
Desafios?Quem descobriu novos atributos?Quais atributos?Alguem modificou as listas?Alguma página em HTML foi feita?
Tira dúvida!
ImagensComo colocar imagens no HTML?<img> é a tag responsável por adicionar imagens nosHTMLA tag não necessita ser fechada...
Exemplo <img>
Resultado
Dúvidas?
Semântica SEOO atributo “alt” é muito importante, pois com esseatributo, você pode ampliar os resultados das buscas doseu ...
LinksComo fazer links em HTML?<a>…</a><a> é a âncora.A tag <a> deve ser seguida do atributo “href”<a href=“contatos.html”>...
ContainersO html 4 trabalha com o containersContainers são feitos com a tag <div>Diferenciados com “id” e “class”
Exemplo
ID e CLASSID é o identificador. Uma tag com o atributo id só pode serchamado uma vez pelo CSS.CLASS é a classe do objeto. ...
Exemplo
Dúvidas?
Introdução ao CSS
O Que é CSS?CSS = Cascading Style Sheets (Folhas de estilo emcamada)O CSS serve para diferenciar a camada de conteúdo daca...
Como usar?Criar um arquivo CSS via DreamWeaverTodo código CSS deve está nesse arquivo e ser linkadocom o HTML.  Para linka...
Semântica SEODentro da Semântica SEO para um CSS ser facilmentereconhecido pelo leitor do google, ele deve contar algunsat...
Como funciona?O CSS tem uma estrutura bem simples, ele funciona comseletores, propriedades e valores  Ex.: seletor {propri...
ID e CLASS com CSSO “id” é identificado com “#” pelo cssO “class” é identificado com “.” pelo css
Desafio 1 – FormuláriosComo fazer um formulário em HTML?Como formatar um formulário?Desafio da semana é fazer um formulári...
Desafio 2 – Formatação do   site da aula anteriorUsando divs e css
Upcoming SlideShare
Loading in …5
×

Aula 02 - Font End

252 views
183 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
252
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Aula 02 - Font End

  1. 1. Grupo de Estudos Front-End Encontro 2 – Finalização do HTML 4 e introdução ao CSS 2
  2. 2. Desafios?Quem descobriu novos atributos?Quais atributos?Alguem modificou as listas?Alguma página em HTML foi feita?
  3. 3. Tira dúvida!
  4. 4. ImagensComo colocar imagens no HTML?<img> é a tag responsável por adicionar imagens nosHTMLA tag não necessita ser fechada com um </img>A tag <img> por sí não serve para nada, ela deve conteros atributos “src” e “alt” “src” é o atributo responsável por definir o caminho da imagem “alt” é o atributo responsável por dar uma descrição textual da imagem
  5. 5. Exemplo <img>
  6. 6. Resultado
  7. 7. Dúvidas?
  8. 8. Semântica SEOO atributo “alt” é muito importante, pois com esseatributo, você pode ampliar os resultados das buscas doseu site. Além de ser um item fundamental naacessibilidade do seu site.
  9. 9. LinksComo fazer links em HTML?<a>…</a><a> é a âncora.A tag <a> deve ser seguida do atributo “href”<a href=“contatos.html”>Contatos</a>
  10. 10. ContainersO html 4 trabalha com o containersContainers são feitos com a tag <div>Diferenciados com “id” e “class”
  11. 11. Exemplo
  12. 12. ID e CLASSID é o identificador. Uma tag com o atributo id só pode serchamado uma vez pelo CSS.CLASS é a classe do objeto. Umas tag com o atributoclass, pode e dever ser chamado mais de uma vez.
  13. 13. Exemplo
  14. 14. Dúvidas?
  15. 15. Introdução ao CSS
  16. 16. O Que é CSS?CSS = Cascading Style Sheets (Folhas de estilo emcamada)O CSS serve para diferenciar a camada de conteúdo dacamada de apresentaçãoServe também para diagramar, organizar o conteúdo dosite, atribuir tamanho, cor, tipográfia para o site
  17. 17. Como usar?Criar um arquivo CSS via DreamWeaverTodo código CSS deve está nesse arquivo e ser linkadocom o HTML. Para linkar basta colocar uma tag <link> Ex.: <link rel = “stylesheet” href = “url_do_arquivo.css”> O atributo “rel” significa a relevância do link para o arquivo O atributo “href” é o ondereço do arquivo .css
  18. 18. Semântica SEODentro da Semântica SEO para um CSS ser facilmentereconhecido pelo leitor do google, ele deve contar algunsatributos, como por exemplo o “type” e o “media”.O atributo “type” diz o tipo de arquivo que está sendolinkadoO atributo “media” diz o local onde o css vai ser aplicadoMelhor forma de se declarar o CSS: <link type=“text/css” rel=“stylesheet” href=“url_do_arquivo.css” media=“all”>
  19. 19. Como funciona?O CSS tem uma estrutura bem simples, ele funciona comseletores, propriedades e valores Ex.: seletor {propriedade: valor;}O CSS adimite mútiplas declarações Ex.: seletor {propriedade_1: valor; propriedade_2: valor;}No CSS algumas propriedades podem conter mais de umvalor Ex.: seletor {propriedade_1: valor1 valor2 valor3;}
  20. 20. ID e CLASS com CSSO “id” é identificado com “#” pelo cssO “class” é identificado com “.” pelo css
  21. 21. Desafio 1 – FormuláriosComo fazer um formulário em HTML?Como formatar um formulário?Desafio da semana é fazer um formulário, formatado comCSS, o formulário deve conter: Nome, e-mail, telefone, endereço, curso e matricula.Usem a criatividade e façam mais coisas dentro doformulário.
  22. 22. Desafio 2 – Formatação do site da aula anteriorUsando divs e css

×