O documento resume um encontro sobre HTML e CSS. Ele discute como adicionar imagens, links e containers ao HTML e introduz os conceitos básicos de CSS, incluindo como vincular arquivos CSS, seletores, propriedades e valores. Os desafios propostos são fazer um formulário formatado com CSS e reformatar o site da aula anterior usando divs e CSS.

1. Grupo de Estudos
Front-End
Encontro 2 – Finalização do HTML 4
e introdução ao CSS 2

2. Desafios?
Quem descobriu novos atributos?
Quais atributos?
Alguem modificou as listas?
Alguma página em HTML foi feita?

3. Tira dúvida!

4. Imagens
Como colocar imagens no HTML?
<img> é a tag responsável por adicionar imagens nos
HTML
A tag não necessita ser fechada com um </img>
A tag <img> por sí não serve para nada, ela deve conter
os 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. Exemplo <img>

6. Resultado

7. Dúvidas?

8. Semântica SEO
O atributo “alt” é muito importante, pois com esse
atributo, você pode ampliar os resultados das buscas do
seu site. Além de ser um item fundamental na
acessibilidade do seu site.

9. Links
Como 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. Containers
O html 4 trabalha com o containers
Containers são feitos com a tag <div>
Diferenciados com “id” e “class”

11. Exemplo

12. ID e CLASS
ID é o identificador. Uma tag com o atributo id só pode ser
chamado uma vez pelo CSS.
CLASS é a classe do objeto. Umas tag com o atributo
class, pode e dever ser chamado mais de uma vez.

13. Exemplo

14. Dúvidas?

15. Introdução ao CSS

16. O Que é CSS?
CSS = Cascading Style Sheets (Folhas de estilo em
camada)
O CSS serve para diferenciar a camada de conteúdo da
camada de apresentação
Serve também para diagramar, organizar o conteúdo do
site, atribuir tamanho, cor, tipográfia para o site

17. Como usar?
Criar um arquivo CSS via DreamWeaver
Todo código CSS deve está nesse arquivo e ser linkado
com 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. Semântica SEO
Dentro da Semântica SEO para um CSS ser facilmente
reconhecido pelo leitor do google, ele deve contar alguns
atributos, como por exemplo o “type” e o “media”.
O atributo “type” diz o tipo de arquivo que está sendo
linkado
O atributo “media” diz o local onde o css vai ser aplicado
Melhor forma de se declarar o CSS:
<link type=“text/css” rel=“stylesheet”
href=“url_do_arquivo.css” media=“all”>

19. Como funciona?
O CSS tem uma estrutura bem simples, ele funciona com
seletores, 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 um
valor
Ex.: seletor {propriedade_1: valor1 valor2 valor3;}

20. ID e CLASS com CSS
O “id” é identificado com “#” pelo css
O “class” é identificado com “.” pelo css

21. Desafio 1 – Formulários
Como fazer um formulário em HTML?
Como formatar um formulário?
Desafio da semana é fazer um formulário, formatado com
CSS, o formulário deve conter:
Nome, e-mail, telefone, endereço, curso e matricula.
Usem a criatividade e façam mais coisas dentro do
formulário.

22. Desafio 2 – Formatação do
site da aula anterior
Usando divs e css