Slides de Aula - Unidade II PDF

UNIDADE II
Programação
Web Responsiva
Prof. Me. Luiz Lozano

Criando e organizando o projeto
Chegou o momento de nós sermos apresentados formalmente para alguém que já ouvimos
falar anteriormente, mas que não havíamos encontrado pessoalmente. Para que ocorra tudo
certo no nosso primeiro encontro, vamos preparar o ambiente criando um novo projeto e
organizando as nossas pastas desta forma:
Site Robô
CSS Imagens Vídeos Index.html

Fonte: autoria própria.
Arquivo index.html
Dentro do arquivo index.html iremos inserir um código com a estrutura básica de uma
página HTML:

Criando um arquivo CSS
 Quando o objetivo é garantir uma formatação uniforme em todas as páginas de um site, as

folhas de estilo em cascata (Cascading Style Sheets) fazem com que o trabalho seja simples.
Essa tal folha de estilo é um mecanismo que adiciona estilos a elementos do HTML, como,
por exemplo: cor de fundo, espaçamentos, fontes etc. Sendo assim, o CSS nos dá a
possibilidade de ir além das barreiras de estilo impostas pelo HTML puro.
Vamos criar um arquivo CSS para adicionar estilos nas páginas HTML do nosso site, sendo
assim, dentro de seu editor de texto crie um arquivo CSS através do menu File, opção
New File:

Salvando um arquivo CSS
Após salvar o arquivo, o mesmo estará na pasta “css” dentro da pasta do projeto, conforme
imagem a seguir:

Chamando o CSS no projeto
 Para que seja possível utilizar o CSS do arquivo que criamos na nossa página index.html,
antes de tudo é necessário dizer que o HTML é onde se encontra o arquivo de folhas de
estilho, então é necessário criar um link novo.

Link dentro do head
 Note que criamos um link dentro do HEAD, ou seja, ele é um elemento que não faz parte do
corpo da página; além disso, colocamos qual a relação do link; no caso, é uma folha de
estilos então é um stylesheet.
A sintaxe do CSS
Agora, já podemos editar o nosso arquivo CSS; para isso, vamos entender como funciona a
sintaxe do CSS:
Fonte: Sintaxe do CSS. Adaptado de: w3schools, CSS Syntax, 2019.

A sintaxe do CSS
O seletor, no caso, pode ser uma tag ou uma classe (falaremos de classes mais adiante), onde
as suas propriedades devem ser declaradas e, em seguida, os valores, como o exemplo da
anterior, que está modificando a tag <h1> para a cor azul e com um tamanho de 12 pixel; esse
código, explicado anteriormente, poderia ser codificado da seguinte maneira:
 Este código não faz parte do nosso projeto, é

apenas uma amostra da estrutura do CSS.
Estilizando o <body>
 Nosso primeiro passo com o CSS, será estilizar a tag <body> com várias propriedades de
background, vamos, primeiramente, alterar a cor do nosso background da página índex.

Estilizando o <body>
Podemos definir a cor de várias formas, tanto pelo nome quanto pelo código RGB ou Hexa.
A seguir, um exemplo de alteração da cor utilizando o código RGB:

Interatividade
Quando o objetivo é garantir uma formatação uniforme em todas as páginas de um site, as

Essa tal folha de estilo é:
a) Um mecanismo que adiciona estilos aos elementos do JS.

b) Um mecanismo que adiciona cor aos comandos do HTML.
c) Um algarismo que remove estilos aos elementos do HTML.
d) Um mecanismo que remove estilos aos comandos do HTML.
e) Um mecanismo que adiciona estilos aos elementos do
HTML.
Resposta
Quando o objetivo é garantir uma formatação uniforme em todas as páginas de um site, as

Essa tal folha de estilo é:
a) Um mecanismo que adiciona estilos aos elementos do JS.

b) Um mecanismo que adiciona cor aos comandos do HTML.
c) Um algarismo que remove estilos aos elementos do HTML.
d) Um mecanismo que remove estilos aos comandos do HTML.
e) Um mecanismo que adiciona estilos aos elementos do
HTML.
Inserindo uma imagem de background
 Agora, se estava legal colocar cor no fundo de nossa página, vai ficar muito mais legal, no
presente momento, pois iremos colocar imagens com o elemento background-image.
 Faça o download de uma imagem de sua preferência; no nosso caso, baixamos uma
imagem de robôs.
Fonte: Pixabay.
Salvando a imagem do nosso projeto
 Logo após fazer o download da imagem no site Pixabay, salve a mesma dentro da pasta
“imagens”, que foi criada dentro do projeto. Essa pasta irá armazenar todas as imagens que
iremos utilizar no decorrer do projeto.

Inserindo o background-image no projeto
Em nosso arquivo styles.css iremos alterar:

Navegação entre as pastas
 A página onde está o arquivo .html, que estamos editando, está dentro da pasta “páginas”
e a imagem está dentro da pasta “imagens”; ambas as pastas estão na raiz do projeto,
portanto o ../ faz voltarmos à raiz do projeto e, assim, colocamos o endereço da pasta de
“imagens”.
Site Robô
CSS Imagens Vídeos Index.html

Retirando a repetição
Note, também, que a imagem por padrão está se repetindo quando executamos a página
index.html no navegador; caso não seja essa a intenção existe a propriedade
background-repeat:

Trabalhando com duas imagens de fundo
Podemos também trabalhar com duas imagens de fundo, ao mesmo tempo, utilizando,
também, a propriedade background-repeat. Para isso, iremos fazer o download de outra
imagem qualquer e inseri-la na pasta “imagens” do nosso projeto. A imagem escolhida para os
nossos exemplos foi a imagem a seguir; ela possui o nome robos02.png:
Fonte: Pixabay.
Trabalhando com duas imagens de fundo
Iremos implementar o seguinte código dentro do arquivo styles.css:

Definindo o tamanho das imagens
Podemos, também, escolher o tamanho da imagem; vamos continuar utilizando o no-repeat

para facilitar o entendimento e vamos deixar, apenas, uma imagem como background:
 Como resultado teremos uma imagem gigante e estourada,

pois não fazemos ideia de quantos pixels têm o monitor da
pessoa que acessará o nosso site; isso sem contar a perda
de qualidade na imagem.
Definindo o tamanho das imagens
 Para conseguirmos colocar a imagem no plano de fundo inteiro e distorcê-la o menos

possível, podemos utilizar, no lugar de valores em pixels, valores em porcentagem, e agora
ativando o repeat novamente.
 Note que, no caso, a imagem ocupará 100% da página, não

importando o tamanho do browser. Agora que já aprendemos
um pouco sobre o background-size, vamos adotar essa
configuração para continuar o nosso projeto.
Utilizando fontes de terceiros
 Para melhorar o nosso site, precisamos de fontes novas e mais legais; para isso, entraremos
no site https://fonts.google.com/ e procuraremos alguma fonte bacana.
Fonte: https://fontes.google.com
Ao escolhermos a nossa fonte nós clicaremos no símbolo de + Selected this type, que aparece
logo ao lado direito do nome dela:
Você irá perceber um ponto vermelho no logo, no canto direito superior. Se parar o mouse em
cima do logo, irá ver a opção View your selected families:
Clicando na opção, abrirá uma pequena janela com diversas opções para escolhermos,
referentes à fonte que selecionamos. Note que na opção <link> poderemos copiar um bloco de
código para inserir em nossa página. É exatamente isso que iremos fazer:
Assim sendo, nós adicionaremos o link a nossa página HTML índex dentro do head:
 Dessa forma, teremos o acesso a essa fonte durante a

confecção de nossa página. O nome da fonte que
importamos é Itim; mais adiante, esse nome será
importante.
Interatividade
Ao criarmos um arquivo CSS dentro de uma subpasta de nosso projeto principal nós acabamos
alterando o caminho que o mesmo se encontrava anteriormente; para isso, usamos o comando
../ dentro do caminho, para que:
a) Seja possível excluir uma pasta antes do caminho apontado.

b) Seja possível retornar uma pasta antes do caminho apontado.
c) Seja possível avançar uma pasta depois do caminho apontado.
d) Seja possível excluir um arquivo antes do caminho apontado.
e) Seja possível retornar um arquivo antes do caminho apontado.
Resposta
Ao criarmos um arquivo CSS dentro de uma subpasta de nosso projeto principal nós acabamos
alterando o caminho que o mesmo se encontrava anteriormente; para isso, usamos o comando
../ dentro do caminho, para que:
a) Seja possível excluir uma pasta antes do caminho apontado.

b) Seja possível retornar uma pasta antes do caminho apontado.
c) Seja possível avançar uma pasta depois do caminho apontado.
d) Seja possível excluir um arquivo antes do caminho apontado.
e) Seja possível retornar um arquivo antes do caminho apontado.
Estilizando a tag <main>
 Apenas o ato de abrir e fechar a tag já é suficiente para que possamos trabalhar o CSS dela;
então, vamos lá: no nosso arquivo CSS digite o seguinte código:

Vamos, agora, entender cada parte que será feita nesta estilização. Como seletor temos a tag
main, ou seja, tudo o que estiver dentro da tag main receberá estes estilos, que são:
 Nós já aprendemos a como escrever cores em RGB, mas,

desta vez, colocamos RGBA; isso significa que o canal alpha
está presente. Daí, você me pergunta: “o que é o canal alpha?”
E a resposta é simples: canal alpha é aonde se encontra a
transparência.
 O padding existe para nos ajudar com o espaçamento entre o conteúdo e as bordas;
diferentemente da margem que dá um espaçamento externo, o padding dá um
espaçamento interno.

 O margin-top cria uma margem com o topo do site, nós colocamos em pixels, mas, também,
pode ser colocado em porcentagem.

 E, por fim, temos o border-radius que define o arredondamento das esquinas do main
utilizando, como referência, o raio das bordas.

Containers <div> e a classificação de tag
Vamos, agora, dividir o nosso conteúdo em pequenos containers que, como o nome já sugere,
são espaços separados onde o conteúdo ficará guardado. Usaremos o logo a seguir; será
necessário que você faça o download de um logo de sua escolha e salve na pasta “imagens”:

Agora que já possuímos a imagem para o nosso logo, vamos digitar o seguinte código na
nossa página índex:

Essa <div> que colocamos foi classificada como “logo”; o nome “logo” foi dado por nós, se
colocássemos qualquer nome iria funcionar da mesma forma. Dentro dessa <div> colocamos a
imagem referente ao logo da nossa página e, então, editaremos o seu estilo no CSS:

 O item margin define o espaçamento entre os elementos, enquanto o item text-align faz o
alinhamento do texto, que, no caso, queremos que fique no centro. Independente de
colocarmos uma imagem ou um texto, o alinhamento será feito da mesma maneira.

Estilização de componentes
 Note que, dessa vez, ao invés de usar como seletor a tag que vamos modificar, nós
utilizamos a classe que criamos, pois, na mesma página, teremos várias <div> que podem
ou não ser diferentes; sendo assim, o mais prudente é colocar a classe como seletor.
Interatividade
Nós já aprendemos como escrever cores em_____, mas, desta vez, colocamos RGBA, isso
significa que o canal ____ está presente, que é aonde se encontra a _____. O valor dela é
medido na ____ entre 0 e 1, sendo 0, totalmente visível, e 1, totalmente invisível.
Assinale a alternativa que preenche corretamente as lacunas do parágrafo:
a) HTML, foxtrot, transparência, variação.

b) HTML, beta, displicência, continuação.
c) RGB, alpha, transparência, variação.
d) RGB, gama, displicência, continuação.
e) PDF, beta, transparência, variação.
Resposta
Nós já aprendemos como escrever cores em_____, mas, desta vez, colocamos RGBA, isso
significa que o canal ____ está presente, que é aonde se encontra a _____. O valor dela é
medido na ____ entre 0 e 1, sendo 0, totalmente visível, e 1, totalmente invisível.
Assinale a alternativa que preenche corretamente as lacunas do parágrafo:
a) HTML, foxtrot, transparência, variação.

b) HTML, beta, displicência, continuação.
c) RGB, alpha, transparência, variação.
d) RGB, gama, displicência, continuação.
e) PDF, beta, transparência, variação.
Estilizando as tags de título
Vamos, agora, voltar a trabalhar com os títulos, mudando as suas propriedades com classes
que nós já aprendemos a fazer; insira o seguinte código na página índex:

 Podemos colocar essas classificações com as mesmas características, então, nós só iremos
adicionar mais classes na mesma declaração no CSS.

 Mas note que, no navegador, é possível perceber que a cor da fonte pode apresentar um
conflito com a cor do fundo; sendo assim, vamos mudá-la para facilitar a visualização do
texto.

 Como o problema é generalizado para todas as classes, o mais sensato é colocarmos a

estilização dentro do <body>, para que todas as alterações a seguir recebam os estilos
herdados dela.

 Note que estamos usando, agora, a fonte que baixamos com o elemento font-family e
também o color para pintarmos a nossa fonte de branco.

Inserindo os vídeos na página
 Vamos, agora, colocar vídeos na nossa página html; para isso, você precisará encontrar um
vídeo para o site.
Em nosso caso, a nossa pasta de vídeos ficou da seguinte maneira:

Agora que já possuímos o vídeo do robô, vamos inserir o seguinte código na página index.html
na sequência da tag <main>:

 Assim como a tag <img> busca uma imagem, a tag <source> busca um recurso, que, no
caso, é um vídeo. Declaramos no CSS separadamente das outras de preferência, pois pode
ser que seja necessário aplicar algumas mudanças com o tempo, então, vamos deixá-la com
as mesmas características do logo, mas em uma declaração diferente.

O resultado disso é o nosso site, agora com o recurso de vídeo:

Estilizando a tag <article>
Agora, vamos fazer o nosso primeiro artigo do site, contendo os parágrafos e a imagem; para
isso, insira o seguinte código na sequência da tag <main>, na página índex:

Mesmo sem colocar nenhum estilo na tag <article>, podemos ver que ela já está herdando
estilos do <body>, utilizamos, também, a tag <hr> que faz uma linha entre um conteúdo e
outro:

Para mudar isso, precisamos sobrepor os estilos:

 Nós alinhamos o texto no centro, mudamos o estilo da fonte, deixamos o tamanho da fonte
como 20 pixels, além de deixarmos a fonte em uma cor de tom rosado.

Interatividade
Como qualquer tipo de linguagem de marcação, o CSS possui uma sintaxe própria e bem
definida, sendo possível identificar, exatamente, como ela funciona com as suas propriedades.
Com base no texto, assinale como verdadeiro (V) ou falso (F) as afirmações a seguir:
( ) h1 é um exemplo de seletor.
( ) {color:blue} é um exemplo de declaração.
( ) 12px é um exemplo de valor.
( ) font-size é um exemplo de propriedade.
Agora, assinale a alternativa que apresenta a sequência correta:

a) V, V, V, F.
b) V, V, F, F.
c) V, V, V, V.
d) F, F, F, V.
e) F, F, V, V.
Resposta
Como qualquer tipo de linguagem de marcação, o CSS possui uma sintaxe própria e bem
definida, sendo possível identificar, exatamente, como ela funciona com as suas propriedades.
Com base no texto, assinale como verdadeiro (V) ou falso (F) as afirmações a seguir:
(V) h1 é um exemplo de seletor.
(V) {color:blue} é um exemplo de declaração.
(V) 12px é um exemplo de valor.
(V) font-size é um exemplo de propriedade.
Agora, assinale a alternativa que apresenta a sequência correta:

a) V, V, V, F.
b) V, V, F, F.
c) V, V, V, V.
d) F, F, F, V.
e) F, F, V, V.
ATÉ A PRÓXIMA!

Slides de Aula - Unidade II PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Slides de Aula - Unidade II PDF

Enviado por

Direitos autorais:

Formatos disponíveis

UNIDADE II

Prof. Me. Luiz Lozano

CSS Imagens Vídeos Index.html

Fonte: autoria própria.

 Quando o objetivo é garantir uma formatação uniforme em todas as páginas de um site, as

Fonte: autoria própria.

Fonte: autoria própria.

Fonte: autoria própria.

Fonte: Sintaxe do CSS. Adaptado de: w3schools, CSS Syntax, 2019.

Fonte: autoria própria.

 Este código não faz parte do nosso projeto, é

Fonte: autoria própria.

Fonte: autoria própria.

Quando o objetivo é garantir uma formatação uniforme em todas as páginas de um site, as

a) Um mecanismo que adiciona estilos aos elementos do JS.

Quando o objetivo é garantir uma formatação uniforme em todas as páginas de um site, as

a) Um mecanismo que adiciona estilos aos elementos do JS.

Fonte: autoria própria.

Em nosso arquivo styles.css iremos alterar:

Fonte: autoria própria.

CSS Imagens Vídeos Index.html

Fonte: autoria própria.

Fonte: autoria própria.

Iremos implementar o seguinte código dentro do arquivo styles.css:

Fonte: autoria própria.

Podemos, também, escolher o tamanho da imagem; vamos continuar utilizando o no-repeat

Fonte: autoria própria.

 Como resultado teremos uma imagem gigante e estourada,

 Para conseguirmos colocar a imagem no plano de fundo inteiro e distorcê-la o menos

Fonte: autoria própria.

 Note que, no caso, a imagem ocupará 100% da página, não

Fonte: autoria própria.

 Dessa forma, teremos o acesso a essa fonte durante a

a) Seja possível excluir uma pasta antes do caminho apontado.

a) Seja possível excluir uma pasta antes do caminho apontado.

Fonte: autoria própria.

Fonte: autoria própria.

 Nós já aprendemos a como escrever cores em RGB, mas,

Fonte: autoria própria.

Fonte: autoria própria.

Fonte: autoria própria.

Fonte: autoria própria.

Fonte: autoria própria.

Fonte: autoria própria.

Fonte: autoria própria.

Assinale a alternativa que preenche corretamente as lacunas do parágrafo:

a) HTML, foxtrot, transparência, variação.

Assinale a alternativa que preenche corretamente as lacunas do parágrafo:

a) HTML, foxtrot, transparência, variação.

Fonte: autoria própria.

Fonte: autoria própria.

Fonte: autoria própria.

 Como o problema é generalizado para todas as classes, o mais sensato é colocarmos a

Fonte: autoria própria.

Fonte: autoria própria.

Em nosso caso, a nossa pasta de vídeos ficou da seguinte maneira:

Fonte: autoria própria.

Fonte: autoria própria.

Fonte: autoria própria.

O resultado disso é o nosso site, agora com o recurso de vídeo:

Fonte: autoria própria.

Fonte: autoria própria.

Fonte: autoria própria.