Escolar Documentos
Profissional Documentos
Cultura Documentos
Classe: 11ª
Curso: Informática de Gestão
O Docente
_____________________
António João Banga
Luanda, 2022
Conhecendo a Planilha
Pasta De Trabalho
Cada arquivo é uma “Pasta” e cada “Pasta” tem várias “Planilhas”. Estas
“Planilhas” são a área de trabalho do Excel propriamente dita. Na barra inferior da área
de trabalho do Excel poderá verificar quais as planilhas que se encontram na sua pasta. A
predefinição é de três planilhas com os nomes Plan1, Plan2 e Plan3. O Excel comporta
até 255 planilhas em uma pasta.
Linhas e colunas
Formatar fonte
Na Excel a formatação está presente na guia inicio - grupo fonte.
Bordas ou Contorno
Quebra de texto
1. Na planilha, selecione as células que deseja formatar.
2. Na guia Página Inicial, no grupo Alinhamento, clique em Quebrar texto
automaticamente.
Observações:
✓ Os dados na célula são quebrados para encaixar na largura da coluna.
Ao alterar a largura da coluna, a quebra de dados será ajustada
automaticamente.
✓ Se todo o texto quebrado não estiver visível, é possível que a linha esteja
configurada para uma altura específica.
Para inserir uma ou mais linhas de tabela, selecione uma ou mais linhas da tabela
acima das quais você deseja inserir uma ou mais linhas em branco.
1. Clique na guia início – grupo células – opção inserir.
2. Em inserir, clique na opção inserir linhas na planilha.
ATIVIDADE DA LIÇÃO
1. O que é Célula no Excel?
2. Em uma planilha do Excel as colunas são representadas por números e as linhas por
letras? Verdadeiro ( ) Falso ( )
3. Às vezes o texto inserido pode não caber no tamanho da célula da tabela do Excel.
Qual a maneira mais rápida para ajustar o tamanho de uma linha ou coluna de acordo
com o texto?
Número
O Excel sendo um programa cujas funções principais são os cálculos, tem neste
tipo de dados a sua maior força. Aliás, os dados numéricos são bastante abrangentes: o
Excel considera números quer datas, horas, percentagens, moedas, fracções e claro os
números propriamente ditos;
Fórmulas
As fórmulas são expressões matemáticas criadas pelo usuário. São sempre
iniciadas com o sinal de (=).
Funções
As funções também iniciam com o sinal de igual e se diferenciam da formula, por
serem expressões matemáticas predefinidas com nomes.
Exemplo SOMA, MÉDIA, MÁXIMO, entre outros. Entre parênteses são
inseridas as opções e células que formaram o resultado da função.
Formatos de Número
No Excel, podemos alterar os tipos de dados da célula, com a opção Formato de
número. Ao aplicar diferentes formatos a números, você pode alterar a aparência de um
número sem alterar o próprio número. Um formato de número não afeta o valor real da
célula que o Microsoft Excel usa para efetuar cálculos.
O Excel fornece formatos de números disponíveis na guia Página Inicial no grupo
Número.
Operadores aritméticos
Para efetuar operações matemáticas básicas como adição, subtração ou
multiplicação; combinar números e produzir resultados numéricos, utilize os seguintes
operadores aritméticos:
Operadores de comparação
Com os seguintes operadores pode comparar dois valores. Quando dois valores
são comparados utilizando estes operadores, o resultado é um valor lógico
VERDADEIRO ou FALSO.
Operadores de referência
Combine intervalos de células para cálculo com os seguintes operadores.
Fórmulas
✓ Toda fórmula sempre começa com sinal de igual para que o Excel entenda que
é um cálculo e não um texto qualquer que está digitando.
1. Selecione a célula que contém a fórmula que você deseja preencher nas células
adjacentes.
2. Posicione o cursor no canto inferior direito para que ela se transforme
em um sinal de adição (+), como este:
Endereços Absolutos não mudam quando a fórmula é copiada para outra célula.
Chamamos este procedimento de travar células. Para isso coloca-se um cifrão ($) antes
da letra e um antes do número da célula. Por exemplo: $A$1.
Use este endereço em valores de índice, que serão usados para cálculos em toda a
tabela de dados e que normalmente ficam em separado na sua planilha.
2 Funções
Vimos na aula anterior que o Excel disponibiliza uma opção na qual podemos
trabalhar com fórmulas prontas, ou seja funções. Essa ferramenta consiste em uma série
de cálculos que atuarão sobre ou com valores fornecidos, que são chamados de
argumentos ou critérios. Esses argumentos ou critérios podem ser números, textos, testes
lógicos, referências, entre outros.
As fórmulas podem, às vezes, resultar em valores de erro, além de retornar
resultados indesejados. A seguir, estão algumas ferramentas que você pode usar para
localizar e investigar as causas, e determinar soluções para esses erros. A tabela a seguir
descreve esses erros em detalhes.
Função SOMA
Com a função soma podemos realizar o processo de adição de forma mais rápida
e simples. Basta apenas indicar o intervalo de valores que será somado, que a conta será
realizada.
SOMA (número1, [número2], ...)
Por exemplo:
Elaborado pelo Eng. António João Banga / Antolí 12
• =SOMA (A2:A10)
• =SOMA (A2:A10; C2:C10)
Função MÉDIA
Esta é uma das principais e mais usadas funções no Microsoft Office Excel. É
utilizada para calcular a média aritmética de um intervalo de argumentos na planilha.
Observação: Média Aritmética é a soma dos valores dividida pela quantidade dos
elementos.
Por exemplo, se o intervalo A1:A20 contiver números, a fórmula
=MÉDIA(A1:A20) retornará a média desses números.
=MÉDIA(núm1, [núm2], ...)
Função MÁXIMO
Encontra o maior número dentro de um intervalo de células.
=MÁXIMO(número1, [número2], ...)
Função MÍNIMO
Encontra o menor valor de um intervalo de células.
=MÍNIMO(número1, [número2], ...)
Função MENOR
Retorna o menor valor conjunto de dados. Use esta função para retornar valores
com uma posição específica relativa em um conjunto de dados.
=MENOR(matriz;k)
A sintaxe da função MENOR tem os seguintes argumentos:
✓ Matriz. Uma matriz ou intervalo de dados numéricos cujo menor valor você
deseja determinar.
✓ K. A posição (a partir do menor) na matriz ou intervalo de dados a ser
fornecido
Função SOMASE
Você pode usar a função SOMASE para somar os valores em um intervalo que
atendem aos critérios que você especificar. Por exemplo, suponha que, em uma coluna
que contém números, você quer somar apenas os valores que são maiores do que 5. Você
pode usar a seguinte fórmula: = SOMASE (B2:B25,"> 5").
=SOMASE(intervalo; critérios; [intervalo_soma])
IMPORTANTE: Qualquer critério de texto ou qualquer critério que inclua símbolos
lógicos ou matemáticos deve estar entre aspas duplas ("). Se os critérios forem numéricos,
as aspas duplas não serão necessárias.
Funções de contagem
O Excel dispõe de funções de contagem, as quais facilitam a organização e melhor
construção das tabelas a serem trabalhadas.
Podemos fazer contagens de células baseadas em uma determinada lista de dados,
onde pode se especificar o que se deseja contar, ou até mesmo criar uma condição para
realizar a contagem.
Função CONT.NUM
A função CONT.NÚM conta o número de células que contêm números e conta
os números na lista de argumentos. Use a função CONT.NÚM para obter o número de
entradas em um campo de número que esteja em um intervalo ou uma matriz de números.
=CONT.NÚM(valor1; [valor2]; ...)
OBSERVAÇÃO: Os argumentos podem conter vários tipos de dados diferentes, ou
podem fazer referência a vários tipos de dados diferentes, mas apenas os números são
contados.
Como exemplo, utilizaremos uma planilha contendo nomes de alguns alunos e suas
respectivas médias escolares, onde se deseja conhecer qual sua situação, levando-se em
consideração de que a média de aprovação é de 6,5. Veja como proceder no passo a passo
abaixo:
Função E
A função =E funciona da seguinte maneira: Para ela retornar VERDADEIRO,
todos os termos da fórmula condicional precisam ser verdadeiros. Por exemplo, se você
colocar 100 termos e 99 foram verdadeiros e apenas 1 for falso, seu resultado será falso.
A sintaxe é bastante simples: =E("Comparação 1"; "comparação 2"...).
Um uso comum para a função E é expandir a utilidade de outras funções que realizam
testes lógicos. Por exemplo, a função SE realiza uma condição e, em seguida, retornará
um valor se a condição for avaliada como VERDADEIRA e outro valor se a condição for
avaliada como FALSA. Usando a função E como argumento da condição da função SE,
você pode testar várias condições diferentes em vez de apenas uma.
No exemplo a seguir você tem uma planilha onde tem a idade e altura de seus
alunos. Haverá uma competição e somente aqueles que tem Idade Maior que 15 e Altura
maior ou igual que 1,70 participarão da competição. Neste caso você utilizará a condição
SE e a condição E. Porque?
É simples, porque para o aluno participar ele dever possuir a idade maior que 15
e altura maior ou igual 1,70. As duas condições devem ser verdadeiras, caso uma seja
falsa, ele não participará. Veja o exemplo:
Função OU
A função =Ou é uma função que trabalha com os valores VERDADEIRO e
FALSO, por isso é uma função lógica. Uma expressão construída com =Ou será
considerada verdadeira quando pelo menos 1 das suas partes for verdadeira. Ela, portanto,
somente será Falsa se nenhuma das partes forem verdadeira. Desta forma, mesmo que sua
construção tenha 100 frases, sendo 99 falsas e 1 verdadeira, o valor retornado será
VERDADEIRO.
A sintaxe da função é =OU ('valor1', 'valor2', ...). A função pode ser escrita com
até 255 condições e, geralmente, é usada dentro de um =Se para concatenar comparações.
Embora a função 'Ou' já seja por si só bastante útil, para resultados mais
específicos ela é costumeiramente mesclada com a função 'Se' ou então a função 'E'.
Aula 05
Formatação condicional
A Formatação Condicional é uma ferramenta extremamente útil do Excel que
nos permite formatar um conjunto de células de uma planilha a partir de condições pré-
estabelecidas pelo usuário.
Isso permite criar planilhas com um aspecto gráfico que seja útil para que o
usuário consiga analisar com facilidade, as informações contidas em sua planilha, já que
a formatação mostrará a ele se a condição adotada foi atingida ou não.
Formatação Condicional – Nova regra
Na planilha na qual deseja configurar a formatação condicional e selecione o
intervalo de células a qual a formatação será aplicada – apenas algumas células ou toda a
tabela;
Porcentagem
Como o nome já diz, porcentagem é um valor com denominador igual a 100, ou
seja, 10% = 10/100, logo 10% = 0,1. Veja os exemplos:
100% → 1
50% → 0,5
10% → 0,1
8% → 0,08
Calculando desconto
Suponha que você adquiriu um empréstimo a ser pago mensalmente entres os
meses de Março a Setembro, no valor de 250 000,00 mensais. Caso efetue o pagamento
antecipadamente receba um desconto de 7%, sob o valor da prestação.
Suponha que você adquiriu um empréstimo a ser pago mensalmente entres os
meses de Março a Setembro, no valor de R$ 650,00 mensais. Caso efetue o pagamento
antecipadamente receba um desconto de 7%, sob o valor da prestação.
Gráficos
Uma das melhores ferramentas de análise do Excel são os gráficos. Com eles você
consegue ter total compreensão do que está acontecendo com as informações da sua
planilha em uma questão de segundos.
Podemos acessar algumas opções de gráficos na Guia Inserir – Grupo Gráficos
e escolher colunas, linhas, pizza entre outros.
Agora abra o Excel e crie uma tabela semelhante à da imagem. Serão utilizados
os anos de 2012 e 2013 como exemplo. Os valores arrecadados em vendas de uma
empresa fictícia também serão usados, para exemplificar o processo.
Depois de criada a tabela, é hora de fazer o gráfico comparativo. Selecione os
dados dos meses e dos anos, como feito na imagem. Clique em “Inserir” e escolha um
modelo. No exemplo, optamos por gráficos de coluna.
Quando escolhemos um tipo de gráfico o Excel automaticamente exibirá na tela,
a guia contextual ferramentas de gráfico, onde encontramos as guias Design e Layout.
Na guia design encontramos opções para modificar o gráfico, opções como:
layouts e estilos. Essas opções nos permitem a formatação do gráfico, apresentando
modelos predefinidos que podem ser aplicados ao gráfico.
Na Guia Layout podemos configurar os itens apresentados nos gráficos
como: título, eixos, títulos dos eixos, plano de fundo entre outros.
Comentário
Comentários são muito úteis àqueles que os sabem usar com clareza. Poupam
tempo, organizam seu trabalho, facilita na hora de compartilhar seu trabalho com alguém
e fazê-lo entender, etc.
Para inserir um comentário, basta clicar na célula, clique com o botão direito do
mouse em cima dela e clique na opção inserir comentário.
Logo que a caixa de texto do comentário for aberta você poderá fazer a anotação
que deseja.
Elaborado pelo Eng. António João Banga / Antolí 21
Agora toda vez que você quiser ver seu comentário é só passar o mouse por cima da seta
que aparecerá no canto superior da célula.
Impressão
Esta ferramenta oferecida pelo Excel é de grande importância quando se quer ter
uma noção de espaço na tabela e os seus limites de impressão, ou até mesmo quando se é
exigido um tamanho padrão de tabelas.
Para definirmos uma área de impressão, ou seja, onde somente serão impressos os
dados/informações que estiveram naquele espaço selecionado, é simples. Veja a seguir
como realizar esta tarefa:
1- Abra a planilha Excel e marque o campo dentro dela que pretendes editar, e
selecione Definir área de impressão, contido na opção Área de Impressão, da Guia Layout
da Página.
Veja que a área selecionada ficará com uma linha tracejada para que, durante a
colocação dos dados, tenhamos a dimensão do tamanho demarcado inicialmente.
Agora, quando você for imprimir o documento, veja que só será impresso a área
marcada.
Excluir um slide
No painel à esquerda, clique com o botão direito do mouse na miniatura de slide
que você deseja excluir e então clique em Excluir Slide.
Layout de slide
Se não encontrar um layout de slide que corresponda ao conteúdo dos slides, você
poderá alterar um layout existente.
1. Na guia Página Inicial, clique em Layout e selecione o layout desejado.
Na caixa de diálogo aparecerá várias opções de formatação de plano de fundo. Você deve
clicar aplicar a tudo para inserir a mudança a todos os slides, mas se for alterar apenas o
slide atual clicar em fechar.
Transição de Slides
A Microsoft Office PowerPoint 2007 inclui vários tipos diferentes de transições
de slides. Basta clicar no guia transição e escolher a transição de slide desejada.
Animações
Anime textos ou objetos em sua apresentação para dar a elas efeitos sonoros ou
efeitos visuais, incluindo o movimento. Você pode usar animação para se concentrar em
Elaborado pelo Eng. António João Banga / Antolí 26
pontos importantes, controlar o fluxo de informações e para aumentar o interesse
visualizador em sua apresentação.
Aplicar um efeito de animação a um texto ou objeto
1. Selecione o texto ou objeto que você deseja animar.
2. Na guia Animações, no grupo Animações, clique em Animação Personalizada
3. Clique em Adicionar efeito, no painel de tarefas personalizar animação.
Exibir Apresentação
Para exibir uma apresentação de slides no Power Point.
1. Clique na guia Apresentação de Slides, grupo Iniciar Apresentação de Slides
2. Clique na opção Do começo ou pressione a tecla F5, para iniciar a apresentação a
partir do primeiro slide.
3. Clique na opção Do Slide Atual, ou pressione simultaneamente as teclas SHIFT
e F5, para iniciar a apresentação a partir do slide atual.
Inserir imagens
1. Clique na guia inserir, grupo ilustrações, opção imagem.
2. Na caixa de diálogo, localize no computador a figura e dê dois cliques rápidos na
imagem desejada.
3. A imagem será inserida no slide.
Inserir SmartArt
Um elemento gráfico SmartArt é uma representação visual de suas informações
que você pode rapidamente e facilmente cria, escolhendo entre vários layouts diferentes,
efetivamente se comunicar sua mensagem ou ideias.
1. Na guia Inserir, no grupo Ilustrações, clique em SmartArt.
2. Na caixa de diálogo Escolher Elemento Gráfico SmartArt, clique no tipo e no
layout desejados.
3. Para digitar o texto, Clique em [Texto] no painel Texto e, em seguida, digite
o texto.
Inserir Gráfico
Para criar um gráfico simples a partir do zero no PowerPoint
1. Clique na guia inserir, grupo ilustrações, opção Gráfico.
2. Clique no tipo de gráfico e depois clique duas vezes no gráfico desejado.
3. Na planilha exibida, substitua os dados padrão pelas suas próprias
informações.
4. Quando terminar, feche a planilha.
Inserir tabela
1. Selecione o slide ao qual deseja adicionar uma tabela.
2. Na guia Inserir, no grupo Tabelas, clique em Tabela.
3. Insira os dados na tabela.
Inserir vídeo
1. Na guia Inserir, no grupo Clipes Mídia, clique em Filme.
2. Na caixa de diálogo Inserir Vídeo, localize e clique no vídeo que deseja inserir
e clique em Inserir.
3. Se necessário, clique na alça de dimensionamento de canto do vídeo e arraste
para dimensioná-lo de forma a se ajustar à tela de fundo inteira do slide.
Elaborado pelo Eng. António João Banga / Antolí 28
Inserir áudio
1. Na guia Inserir, no grupo Clipes Mídia, clique em Som.
2. Clique em Som do Arquivo, localize o clipe de áudio desejado e clique em
Inserir.
Quando você adiciona música ou outros sons a um slide, os controles de mídia são
exibidos no slide.
Cabeçalho e rodapé
Cabeçalhos e rodapés são ótimos lugares para adicionar o título da apresentação,
a data, a hora ou outras informações à parte superior ou inferior dos folhetos e das páginas
de anotações.
PowerPoint atualmente não dá suporte a cabeçalhos de adição para próprios slides
de apresentação. Você só pode adicionar cabeçalhos à sua apresentação no modo de
exibição de Folheto ou Anotações.
1. Na guia Inserir, grupo Texto, escolha Cabeçalho e Rodapé.
2. Para adicionar cabeçalhos e rodapés a anotações ou folhetos, na guia anotações e
folhetos, verifique o cabeçalho, rodapé ou ambos e digite o texto que você deseja que
apareça na parte superior ou inferior de cada página de anotações ou folhetos.
3. Para adicionar rodapés aos slides, na guia Slide, marque rodapé e digite o texto que
você deseja que apareça na parte inferior dos slides.
4. Clique em Aplicar a Todos.
Inserir numeração
1. Na guia Inserir, grupo Texto, selecione Número do Slide.
2. Na guia Slide, marque a caixa Número do Slide.
OBSERVAÇÃO: Se não desejar que um número apareça no slide de título, marque também
a caixa Não mostrar no slide de título.
3. Selecione Aplicar a Todos.
Tim concebeu apenas como uma linguagem que serviria para interligar
computadores do laboratório e outras instituições de pesquisa e exibir
documentos científicos de forma simples e fácil de aceder.
A web avançou rapidamente. Em 1993 já era comum em universidades que
estudantes mais inteligentes fizessem páginas com informações pessoais. O que na
realidade determinou o seu crescimento foi a criação de um programa
chamado Mosaic, que permitia o acesso Web num ambiente gráfico, tipo
Windows. Antes deste programa só era possível exibir textos na Web.
Hoje a Web é o segmento da Internet que mais cresce. A chave do sucesso da
Web é o HyperText. Os textos e imagens são interligados através de palavras –
chave, tornando à navegação simples e agradável.
2 Funcionamento da Internet
Na presente lição vamos abordar sobre os mecanismos necessários para
acedermos à rede de internet. Assim como os serviços providenciados pela internet.
O que é preciso para aceder à Internet?
Para aceder à internet precisa de dispor dos seguintes dispositivos:
▪ Um modem;
▪ Uma linha telefónica, cabo ou acesso móvel (wireless);
▪ Uma conta de acesso a um fornecedor de serviços internet (ISP –
Internet Service Provider);
▪ Um computador.
▪ Protocolos (linguagem que todos os computadores conectados na rede
devem usar para poderem comunicar-se).
Os serviços da Internet mais utilizados são: a www ou web, o correio electrónico
ouE-mail, News (serviços que providenciam informações pela internet), as redes sociais
através de dados móveis, etc.
2.3 WWW
Toda vez que um site for acessado é necessário digitar: “www”, padrão mundial.
Esta é uma sigla que significa Word Wide Web, conhecida simplesmente como web. É
Elaborado pelo Eng. António João Banga / Antolí 31
um sistema que reúne várias mídias interligadas por meio eletrônico onde é possível
acessar texto, imagens e sons.
2.4 Nome do site
Corresponde ao “local” que desejamos acessar. Por exemplo, google,
terra, uol, facebook, etc.
2.5 Domínio
Todo Site Tem No Final De Seu Endereço Uma Palavra Que Definimos Como
Domínio. O Domínio Explicita Duas Coisas: Com Qual Finalidade Aquele Site Foi
Criado: Se Ele É Comercial, Governamental, Ou Educacional;
2.6 Link
Link é uma palavra, texto ou imagem que quando é clicada pelo usuário, o
encaminha para outra página na internet, que pode conter outros textos ou imagens.
3 Navegadores
O browser ou navegador é um programa utilizado para navegar na internet.
Através dele você procura o endereço (site) que desejar acessar. Ele permite a
visualização dos sites, das páginas da internet. Existem vários browsers, alguns exemplos
são: Google Chrome, Mozilla Firefox e Internet Explorer.
3.1 Internet Explorer
Foi desenvolvido pela Microsoft para seu sistema operacional Windows. Todo
computador com Windows possui o Internet Explorer.
3.2 Google Chrome
Desenvolvido pela Google, é um software gratuito e pode ser utilizado no
Windows, Linux e MacOS. O Google Chrome é leve, rápido no carregamento de páginas
e é muito utilizado em dispositivos móveis. O software foi criado em 1998 e desde o seu
desenvolvimento tem sofrido muitas alterações e melhorias.
3.3 Mozilla Firefox
Desenvolvido pela Mozilla Foundation, sem fins lucrativos, foi criado
inicialmente para sistemas Linux, mais existem versões para Windows e MacOS. Assim
como o Google Chrome, também sofreu muitas alterações. É um software leve, rápido e
da mesma forma bastante seguro.
2 Fazendo download
Aprenderemos agora a fazer o download de um arquivo da internet. Mas antes
vamos aprender a diferença entre download e upload.
• Download: É um termo em inglês que significa “baixar”. Na Web, o
conceito de Download faz referência a retirar (baixar) um arquivo que
está na internet para o seu computador.
• Upload: É o processo contrário do Download. Fazer upload é enviar um arquivo
do seu computador para a Web. Um conceito simples de Upload seria anexar um
arquivo em um e-mail.
SaveFrom
Outro Site muito utilizado para download é o 4shared. Basta se cadastrar no site e
pronto! Você já pode começar a baixar seus vídeos e músicas favoritas.
3 Compras on-line
Tags HTML
a HTML funciona baseada em marcações específicas chamadas tags. Uma tag é um
conjunto de palavras entre sinais de colchete angular, conforme representado a seguir.
Na imagem anterior, você consegue perceber o uso da tag <p> para a criação de um
parágrafo simples. A maioria das tags possuem uma abertura e um fechamento, e você
identifica isso pela presença da barra no fechamento da tag.
Além disso, as tags também podem ter atributos e valores, que vão configurar seu
comportamento:
Como já vimos anteriormente, as CSS são as Cascading Style Sheets (Folhas de Estilo
em Cascata). Elas são usadas para configurar um resultado visual dos elementos HTML.
As configurações das CSS são realizadas através dos seletores. Vamos ver a anatomia de
um seletor.
Note que, ao final de cada declaração, temos que colocar ponto-e-vírgula para indicar
que ela se encerrou.
Todas as propriedades devem ter seu valor, e eles devem ser separados por dois
pontos. Você não é obrigado(a) a usar nenhuma declaração específica. Só utilize a
propriedade que você realmente deseja alterar.
• Linha 1: Indica que o documento atual será escrito na versão mais atualizada da
linguagem (no caso, HTML5)
• Linhas 2 e 11: Delimitam o documento HTML, que é sempre dividido em duas
partes: a cabeça e o corpo. Na linha 2, também estamos indicando que o conteúdo
desse site será no idioma Português do Brasil.
• Linhas 3 e 7: Delimitam a cabeça da página, local onde são realizadas algumas
configurações iniciais como formatos, estilos, ícone de favoritos, etc.
• Linha 4: adiciona ao documento atual o suporte a caracteres acentuados.
Remover essa linha pode causar erros de renderização de algumas letras na tela.
• Linha 5: Indica que o conteúdo aparecerá, por padrão, ocupando todo o espaço
disponível da tela e com uma escala de 1:1.
• Linha 6: Configura o título da página, que aparecerá como identificação da aba
do navegador, ao lado do favicon.
• Linhas 8 e 10: Delimitam o corpo da página, a maior porção do site, que vai
aparecer na tela. É aqui onde colocaremos todo o nosso conteúdo.
Actividade
O que nós criamos no código aí acima foram dois parágrafos. Note que eu criei várias
quebras de linha dentro de cada parágrafo. Salve o seu projeto e veja o resultado.
Na verdade, todas aquelas quebras que causamos não servem de ABSOLUTAMENTE
NADA! Isso acontece porque quem comanda quebras de linhas/parágrafos não é o
fato de apertar Enter. Quem manda são as tags HTML. A única quebra que
REALMENTE aconteceu foi após a palavra “específico” no segundo parágrafo. Isso
porque colocamos a tag <br> nesse local.
A tag <br> significa literalmente “quebre a linha” (break row) e agora que você sabe o
significado, não precisa nem de explicação né?
Outra coisa que você deve ter notado é que tivemos problemas para fazer uma tag
aparecer no seu navegador. Isso acontece porque, se você colocar <br> no seu
código, o navegador vai entender como “quebre a linha” e não pra fazer ela aparecer.
Para isso, no lugar de usar os colchetes angulares <>, usamos caracteres especiais
referentes ao código desses símbolos. No código anterior, quando usamos:
• Um < estamos pedindo pra colocar o símbolo menor que (less than).
• Um > estamos pedindo para coloca o símbolo maior que (greater than).
Existem alguns outros símbolos que podem ser exibidos usando códigos. Esses
códigos são chamados de HTML Entities, basta uma breve consulta para descobrir
Formatos de Imagem
Existem vários formatos de imagem, cada um com suas características, vantagens e
desvantagens. Porém, vamos nos focar aqui nos dois formatos compactados mais
usados para a criação de sites: JPEG e PNG.
A grande vantagem do uso de arquivos JPG (em formato JPEG) é gerar arquivos
muito pequenos e que ocupam pouco espaço em disco. Isso é muito importante, pois
quando colocarmos nosso site no ar, ele tem que ser leve e carregar as imagens muito
rapidamente. Só toma cuidado para não exagerar na hora de configurar o nível de
compactação. Isso pode fazer com que sua imagem fique horrível e toda borrada (dá
só uma olhada na imagem abaixo).
De forma resumida, na hora de escolher o formato de imagem para o seu site, opte
sempre pelo formato JPEG com uma compactação entre 30% e 50%. O formato PNG
só deverá ser usado quando precisarmos de transparência na foto.
Na linha 11, adicionamos a tag <img>, responsável por carregar imagens que estão
na pasta do projeto atual ou em links externos. Essa tag tem como parâmetros
básicos o src (que vem de source, origem) e alt (que vem de alternative ou texto
alternativo).
A linha 13 vai carregar a imagem logo-css.png que está dentro da pasta fotos, como vimos
anteriormente. Note que foi necessário colocar o nome da pasta seguido de uma barra
antes de colocar o nome do arquivo. Se isso não for obedecido, simplesmente a imagem
não vai carregar!
Por fim, na linha 15 fizemos a carga de um arquivo que não estava na pasta do
projeto. A imagem js-small.gif está localizada em outro domínio, o jsdotgit.com.
Nesse caso, precisamos indicar o caminho completo (URL) da imagem.
Podemos obter a URL completa de qualquer imagem, abra um site no Google
Chrome, clique com o botão direito do mouse sobre a imagem e escolha a opção
“Copiar endereço da imagem”. Aí é só voltar no seu código HTML, colocar o cursor
do teclado dentro das aspas da propriedade src da sua imagem e apertar Ctrl+V.
Toda imagem deve ter um texto alternativo, mesmo você achando que isso é muito
chato de fazer. Textos alternativos ajudam muito na indexação do seu site em
mecanismos de busca e também ajudam muito na Acessibilidade, pois se um
visitante for deficiente visual, seu navegador vai ser capaz de descrever que tipo de
foto está sendo mostrada ali.
Tente ser objetivo na descrição da sua imagem, mas crie textos que fazem sentido.
Tem um monte de gente que coloca o texto “foto” como descrição de uma imagem. Aí
não dá!
Os textos alternativos também auxiliam o Google a saber o que tem dentro da sua
foto e exibi-la nos resultados de busca do Google Imagens.
Elaborado pelo Eng. António João Banga / Antolí 42
Usando Ícone de Favoritos (favicon)
Você já ouviu falar em favicon? Talvez você não os identifique pelo nome, mas com
certeza já viu aqueles pequenos ícones que aparecem ao lado dos sites que visitamos, na
parte superior do seu navegador. É o mesmo local onde aparecem o texto que você
colocou na tag <title> do seu site.
Após ter seu favicon salvo na pasta do seu projeto,vamos nos focar no código HTML para
carregá-lo.
Depois faça uma simples alteração na sua área <head>, incluindo uma tag <link>,
digitando apenas a palavra link em uma linha em branco e escolhendo a opção
link:favicon.
OBS: se seu arquivo não se chamar favicon.ico, você deve adaptar a linha 6, colocando
o nome do seu ícone.
Infelizmente nem todo navegador é compatível com esse formato e acaba causando
algumas inconsistências na exibição do nosso site em outras plataformas.
Negrito e Itálico
Vamos ver agora algumas formatações bem usadas das últimas versões da
linguagem, começando pelos famosos negrito e itálico.
Como vimos anteriormente, existem as tags <b> e <i> para essa tarefa, mas elas
não possuem significado e focam apenas na forma, sendo assim, são pouco semânticos.
Sendo assim, recomendamos que você passe a usar as tags <strong> e <em> para
realizar essas mesmas formatações visuais, só que agora com sentido.
A tag <strong> significa que o termo delimitado possui força dentro da frase.
Logo, ele aparecerá em negrito.
Já a tag <em> significa que queremos dar ênfase (do Inglês emphasis) ao termo.
Logo, ele aparecerá em itálico.
Note que, ao usar <strong> e <em> no lugar de <b> e <i>, damos mais
significado aos nossos termos e conteúdos. Como eles vão ser representados visualmente
(forma), vai depender das nossas folhas de estilo CSS.
“Citações”
Se você já escreveu um texto sequer na sua vida, com certeza já teve que fazer
citações. Uma citação é um trecho de texto, escrito ou dito por outra pessoa, que vai
ilustrar perfeitamente algo que você quer explicar.
Para criar uma citação em HTML, podemos usar a tag <q> (do Inglês quote, que
significa citar). O texto que estiver entre <q> e </q> já vai receber automaticamente
as aspas, mas não terá nenhum deslocamento. Essa técnica é mais usada quando
queremos uma citação no meio de um parágrafo.
Também podemos criar citações mais longas (em bloco) e que tenham um
parágrafo só para si. Nesse caso, colocaremos tudo dentro de <blockquote> e
</blockquote> e o texto ganha um recuo automaticamente. Podemos também colocar um
link para o texto original, usando o parâmetro cite dentro da tag.
Elaborado pelo Eng. António João Banga / Antolí 45
Abreviações
Essa é uma novidade da HTML5 e que ajuda muito em áreas como a de Tecnologia,
que usa muitas siglas e abreviações. Sempre que você quiser escrever uma sigla, mas
deixar claro ao usuário (e aos mecanismos de busca) o significado dela, use a tag
<abbr>.
Aula 18
Listas com HTML 5
Listas Ordenadas
A HTML chama de ordered lists todas aquelas listas onde a ordem dos itens é
algo muito importante. Um passo-a-passo para criar um bolo, uma lista de aprovados no
vestibular e uma lista com os carros mais caros do mundo são exemplos de listas
ordenadas.
Para criar uma ordered list, vamos usar a tag <ol> para delimitar a lista e <li> (list item)
para identificar cada item da lista.
A tag <ol> possui um parâmetro type, onde configuramos o tipo de marcador da lista
atual. As opções de valores para esse parâmetro são:
Lista de Definições
É como se fosse um dicionário, temos os termos e as suas descrições. É uma lista sem
demarcadores, mas bem útil em alguns casos.
Toda lista de definições está dentro de uma tag <dl> </dl> (definition list) Cada
termo é um <dt> (definition term) e cada descrição é um <dd> (definition description).
Assim como os itens da lista, essas duas últimas tags possuem fechamento opcional,
segundo a referência oficial da HTML5.
Vamos ver um exemplo simples que cria uma lista com três definições que já
conhecemos bem aqui pelo curso.
Para poder controlar onde o site de destino vai abrir, podemos usar o atributo target,
que suporta os seguintes valores:
✓ _blank vai abrir o link em uma nova janela em branco
✓ _self vai abrir o link na janela ou frame atual (padrão)
✓ _top vai desfazer todos os frames e abrir o destino no navegador completo
✓ _parent similar ao uso do _top em uma referência à janela mãe
✓ nome-do-frame caso esteja usando frames, indicar o nome da janela a abrir
Como o uso de frames é uma técnica quase em desuso, vamos nos basear apenas nas
duas primeiras opções _blank e _self.
Aula 20
Introdução as CSS
Eu costumo sempre dizer que você pode ter o melhor conteúdo do mundo, mas se ele não
for bem-apresentado, o alcance dele diminui consideravelmente. Visitantes de sites
gostam da beleza, mesmo que eles não conheçam nada de design. É uma sensação
satisfatória ver um conteúdo organizado e bonito. Esse capítulo vai te mostrar os
primeiros passos com o uso de CSS, aplicando esses conceitos em seus códigos
A técnica mais versátil: CSS external style
Manter as folhas de estilo fora do código HTML, além de uma maior organização
faz com que tudo seja reaproveitado de maneira mais eficiente nas outras páginas do
nosso site. Para isso, utilizamos a tag <link> especialmente configurada para
trabalhar com arquivos externos de estilo. Essa tag deve ser colocada dentro da área
<head> do seu documento HTML.
Fontes
Para configurar a família tipográfica que será aplicada a um determinado texto,
usamos a propriedade font-family das CSS. Se indicarmos mais de uma família na
sequência, estamos indicando ao navegador que dê preferência para a primeira. Caso
ela não seja encontrada, tente a próxima. E essa estratégia se seguirá até a última,
que geralmente é a família genérica serif, sans-serif ou monospaced.
No exemplo acima, todo título <h2> do nosso documento será 1.5x o tamanho padrão
da fonte de referência.