Você está na página 1de 22

Estilizando imagens

Aula 14
Pensamento
Computacional

Série: 1ª série

Estilizando imagens

Aula 14

2
O que vamos aprender?
Criar identificadores para marcar elementos
específicos do código.

Como adicionar imagens à página.

Explorar as propriedades height, width,


border, padding e margin.

A organização de uma equipe formada por


pessoas especialistas em Front-End.

Acompanhe o vídeo da aula.

3
Identificador de elemento e tag de imagem
O objetivo é organizarmos o código desenvolvido Também podemos mover todo nosso conteúdo
até o momento. Por exemplo, a tag style está CSS direto para o arquivo. No código, temos as
vazia, portanto, podemos removê-la. tags body, h1 e p com estilos definidos.
Padronizamos tudo no arquivo CSS.

4
Identificador de elemento e tag de imagem
No nosso código, porém, temos uma tag p com um comando CSS específico para aquele parágrafo.

Para resolver isso, precisamos ter uma marcação para o HTML exclusiva à tag p e referenciá-la no CSS. Esse marcador
de identificação denomina-se ID. Escrevemos id = “ ” e, entre as aspas, colocamos um nome que será usado no
nosso CSS, à nossa escolha. Criaremos, então, o id “missao” a esse parágrafo. No HTML, escrevemos sem acentos.

Em seguida, citamos no arquivo CSS.

No arquivo CSS, escrevemos


No arquivo
desta forma,CSS, escrevemos
iniciando com o
desta forma,
símbolo #. com o
iniciando
símbolo #.

5
Tag de imagem
Organizamos o nosso código HTML e o arquivo CSS, o site continua do jeito que gostaríamos.

Agora, iremos evoluir ainda mais nosso código. Adicionaremos mais conteúdo à página: uma imagem.

6
Tag de imagem
A imagem se encontra na pasta do nosso projeto, disponível para fazer download. Nela estão duas cadeiras de
barbearia e um balcão atrás, com o nome banner.jpg.

Também podemos baixá-la ao acessar o link


disponível aqui. Lembre-se de salvar a imagem na
mesma pasta em que o projeto se encontra no
computador.

7
Tag de imagem
Assim como o CSS, a imagem também é um arquivo externo. Colocaremos a chamada para o CSS no na tag head,
porque é uma informação que estamos passando ao navegador. A imagem é uma informação que queremos
exibir na nossa página, logo, inserimos dentro da tag body. Na estrutura visual da nossa página, a imagem será o
primeiro item a aparecer, por isso, será chamada acima das tags h1 e p. Usamos a tag img para a adição da
imagem ao conteúdo.

8
Tag de imagem
A tag img serve para nomearmos uma imagem; como é um arquivo externo, precisamos indicar o local em que
está, ou seja, mencionar qual é a fonte dessa imagem. Para tanto, empregamos a propriedade source. Abreviamos
para src e colocamos o endereço <img src=”banner.jpg”>, o nome do nosso arquivo. É muito importante que
o nome esteja escrito igual, caso contrário, o arquivo não será localizado e a imagem não aparecerá no site.

Como essa é uma tag de chamada de arquivo externo, não abrimos e fechamos. Ela apenas define a
tag.

9
Tag de imagem
Se salvarmos o arquivo e abrirmos no navegador, recarregando a página, a nossa imagem já estará disponível
para visualização.

10
CSS para imagens
Aprenderemos a ajustar alguns elementos do nosso site: largura, altura, padding (espaço interno) e margens.

A primeira coisa que faremos é ajustar a imagem do banner à largura da página, pois ela não ocupa todo espaço
necessário. Para isso, criaremos um id específico para o banner:

Depois, no arquivo CSS, fazemos referência, sempre iniciando com #, no qual escreveremos
exatamente o que faremos com a id do banner. A ação deve entrar no código entre as
chaves({}). Precisamos ter em mente as hierarquias no CSS, a imagem está acima da tag h1.
Assim, a imagem deve permanecer nessa ordem.
11
CSS para imagens
Antes de definirmos o estilo, ao ir no navegador e
apertar a tecla F12 do teclado, veremos o
developers tools (ferramentas para o
desenvolvedor, em inglês). No developers tools,
temos uma divisão muito clara entre o que é o
HTML, o que é o CSS e o que se mostra no nosso
elemento.
Por exemplo, temos a definição do nosso h1, em
que escrevemos Sobre a Barbearia Alura no código
desenvolvido no Sublime.

12
CSS para imagens
No developers tools, experimentaremos utilizar
algumas opções para a página. Se abrirmos a tag
h1 e adicionarmos color: blue; ele mudará a cor
do elemento Sobre a Barbearia Alura para azul.
Porém, assim que recarregarmos a página, (pelo
teclado, ao apertar a tecla F5), voltará à
configuração original do código no Sublime.
Esta é apenas uma ferramenta para auxiliar os
desenvolvedores nas visualizações.
Ainda no elemento h1, vamos verificar as
dimensões. Na quesito altura, inserimos height
(altura, em inglês) e deixamos em pixels, por
exemplo, 100 pixels (100px). Esse elemento
passará a ter uma dimensão maior.

13
CSS para imagens
Agora, iremos modificar as dimensões do banner, no qual já colocamos o nosso identificador id, e alteramos a sua
largura. Conseguimos localizar o banner na developers tools:

A largura (width) de um elemento deve ser adicionada em pixels ou em percentual. Como queremos que o banner
ocupe a página inteira, colocaremos 100%.

14
CSS para imagens
A imagem da página irá abranger 100% da largura da página.

É importante notarmos que as


dimensões da imagem aumentam ou
diminuem, de modo proporcional. Isto
é, se ampliarmos a largura, a altura
aumenta de maneira correspondente.
Se aumentarmos bidimensionalmente,
precisaremos fazer um cálculo para
que a imagem não fique distorcida.

15
CSS para imagens
Agora que já aprendemos um pouco sobre altura e largura, descobriremos mais sobre o espaçamento.
Criaremos uma borda (border) no elemento h1, com 10px, formato sólido e cor preta. Ao remodelarmos as
dimensões da borda e retornarmos no navegador, é possível visualizar o resultado final das alterações na página.

16
CSS para imagens
O espaçamento interno de um elemento se chama padding, sua função é criar margem na página e pode ser
configurado de várias formas, seja para todos os lados, apenas para na margem superior, nas laterais ou somente
na margem inferior. Se aplicarmos um espaçamento de 20px internamente, ele aumenta a grossura da margem, e
gera uma margem interna no elemento, chamada de “respiro”, entre a borda e o conteúdo.

O padding, espaçamento interno, cria essa margem no elemento h1.

17
CSS para imagens
Utilizamos o padding para fazer nosso elemento se comportar melhor no espaço que ele tem. O padding auxilia,
como vimos no exemplo anterior, na elaboração de um respiro maior da borda para fora. Porém, se quisermos
que a borda não esteja colada na lateral, precisamos de um espaçamento externo lateral. Para tanto, não
utilizaremos o padding, mas sim, adicionamos a margin.

18
CSS para imagens
Podemos configurar os elementos de acordo com o que queremos. Para isso, empregaremos algumas
palavras-chave:
Right: direita.
Left: esquerda.
Top: superior (para cima).
Bottom: inferior (para baixo).

Com a ferramenta do desenvolvedor, conseguimos alterar a configuração e apresentação de todos os


itens listados a seguir:
● Largura (width);
● Altura (height);
● Borda (border);
● Espaçamento interno (padding);
● Espaçamento externo (margin).
19
CSS para imagens
Agora que já conhecemos melhor algumas funcionalidades de edição e sabemos obter a visualização da página
no navegador com a ferramenta de desenvolvedores, voltaremos ao arquivo CSS para mudar a largura da
imagem do banner.

Dessa forma, teremos o nosso site com 100% da largura da tela ocupada pelo banner.

20
Equipe de front-end
As interfaces do Front-End se atualizam constantemente, o
que as tornam mais responsivas, robustas e com mais
funções. Portanto, uma empresa precisa de uma equipe de
especialistas cada vez maior, que pode ser composta por:
● Profissionais de UX (User Experience): responsáveis
pela usabilidade do site;
● UI (User Interface): encarregados pela interface do
usuário, é composto por designers, que desenham a
forma do produto e pensam no visual.
● Desenvolvedor front-end: incumbidos por transformar
em código para web, um aplicativo ou algum sistema.

21
Desafio

Nesta aula, aprendemos a editar mais


funcionalidades e visuais do nosso site. Solte a
criatividade e experimente novas paletas.

Imagine que você está em um time de Front-End


e o pessoal de UI encomendou uma paleta de
cores em tons esverdeados, por exemplo. Vá
modificando o código no CSS para testar as
cores e encontrar algumas que combinem mais.

22

Você também pode gostar