0% acharam este documento útil (0 voto)

8 visualizações

HTML e CSS

O documento é um guia sobre HTML5 e CSS, abordando desde a introdução à web até a criação de páginas e formatação com CSS. Ele inclui aulas estruturadas, revisões práticas e conteúdos sobre a importância de tags, links e a funcionalidade de navegadores. O material também destaca a evolução do HTML e a utilização do CSS para estilização de layouts.

Enviado por

lucasassissaraiva

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

8 visualizações

HTML e CSS

Enviado por

lucasassissaraiva

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 160

HTML5 com CSS

AULA MATÉRIA PÁGINA

Aula 1 Introdução 5

Aula 2 Iniciando o projeto 25

Aula 3 Formatação com CSS 51

Revisão Prática 1 75

Aula 4 Cabeçalho e rodapé 83

Aula 5 Formulário e seletores 107

Aula 6 Criando um logo 135

Revisão Prática 2 147

Revisão Prática Final 151

Atualização 18/08/2015

Publicação 19/01/2015

Lote 01-08/15

3
HTML5 com CSS

Aula Praticar Teste Nota Visto Instrutor

1 - Introdução

2 - Iniciando o projeto

3 - Formatação com CSS

4 - Cabeçalho e rodapé

5 - Formulário e
seletores

6 - Criando um logo

Teste Final

Ficha Pedagógica
4
HTML5 com CSS

Aula 1 - Introdução
Conteúdo:
• O que é World Wide Web?
• Apresentando o HTML
• Conhecendo as tags
• Apresentando o CSS

O que é World Wide Web?

A internet, hoje, se consagrou como uma grande “caixa de utilidades“ do

dia-a-dia, pois a maioria das coisas que precisamos encontra-se nela como:
assistir seriados, filmes, receber mensagens por meio de e-mails, fazer novas
amizades pelas redes sociais (twitter, facebook, dentre outros) e se comunicar
com as mensagens instantâneas disponíveis em redes sociais e alguns e-mails.

Considerada um fenômeno, mais que um modismo, a internet é uma

realidade para muitas classes sociais. Mais de um milhão de computadores co-
nectados e usuários, diversificados em noventa países. Esses valores mudam
a cada dia que passa.

WWW ou World Wide Web, em português significa (Mundo Grande Teia ou

Grande Rede Mundial). Nada mais é do que uma estrutura de navegação espa-
lhada por diversos itens de dados em milhares de computadores diferentes.

5
HTML5 com CSS
Para usufruir desse recurso é necessário utilizar de um meio muito co-
mum chamado de WebSite; sendo assim, a interface gráfica da internet.

WebSite é um conjunto de páginas que contém um conteúdo, como

vídeos, áudios ou textos.

Um exemplo de fácil associação são as revistas. Quando você navega em

um site, seria como se folheasse as páginas de uma revista, com conteúdo e
imagens que facilita o entendimento do que está sendo abordado.

Entendendo o funcionamento da Web

Para o funcionamento do computador são necessárias duas ferramen-

tas essenciais: Hardware (parte física) e Software (parte lógica).

Introdução
6
HTML5 com CSS
Para haver o acesso a um website são necessários alguns componentes
essenciais como:

Pcs e gadgets com placa de rede ou dispositivos wireless

(sem fio).

Browsers ou navegadores web instalados no seu computador

ou nos gadgets.

Servidores Web que armazenam e dispõe de páginas web,

enviando-as ao browser.

7
HTML5 com CSS

A dependência do Servidor WEB

O servidor é como um computador conectado 24 horas, 7 dias por se-

mana à internet, aguardando as solicitações dos navegadores.

Mas que tipo de solicitações? De imagens, sons, páginas ou até mesmo

vídeos. Assim que o servidor recebe a solicitação, ele procura, em diversos
servidores, o que foi solicitado e envia uma resposta para o browser (nave-
gador), sendo o que foi requisitado ou uma mensagem que aquilo não existe
mais (Page Not Found / 404).

A funcionalidade do browser (Navegador)

Peças fundamentais para a existência da web, os browsers permitem o

acesso à internet sem dificuldades.

Como funciona um browser? Eles solicitam

aos servidores páginas em HTML ou outros
recursos, como imagens, vídeos, áudios, etc.

Introdução
8
HTML5 com CSS

Qual a sua função? Ele é um “tradutor” para

os servidores, onde converte suas solicitações em
códigos de forma que o servidor entenda.

O servidor, por sua vez, recebe esse

código e procura-o na rede, como foi falado
anteriormente.

Depois de ter um resultado, é enviado para o seu browser

uma sequência de códigos e o navegador traduz esses códi-
gos transformando em uma forma visual, sendo em páginas
web em HTML, áudios, documentos ou vídeos.

Para que as páginas de um website possam

ser criadas, é preciso que você utilize um conjunto
de códigos (feito em HTML) que serão interpretados
pelos browsers.

Apresentando o HTML
Em meados da década de 90, alguns cientistas se deram conta de que
necessitavam de um acesso a troca de informações e de documentação de
pesquisas, entre cientistas de diferentes universidades.

9
HTML5 com CSS

Dessa forma, Tim Berners-Lee criou a linguagem HTML, sendo um

grande sucesso de início e, por meio deste projeto, surgiram as fundações da
internet, tal como a conhecemos.

HTML (HyperText Markup Language) tem o significado de Linguagem de

Marcação de Hipertexto, sendo uma linguagem universal de códigos padrões
destinados à criação de páginas para exibição nos navegadores web.

Tendo seu foco em documentos estáticos, no início a função do HTML

era apenas exibir documentos de texto informativos e compartilhados em
intranets, pequenas redes internas de empresas ou organizações.

Graças o HTML que a internet se tornou a maior rede de computadores

do mundo e, apesar de hoje existirem diversas outras linguagens e métodos
de programação que enriquecem o mundo digital da internet, ela continua sendo
indispensável para a criação das páginas da web.

Introdução
10
HTML5 com CSS

Vale ressaltar que o HTML não é uma linguagem de programação como

Java, C++, dentre outras linguagens, pois não possui códigos de comparação
de valores, nem scripts complicados. Portanto, não é necessário noções
anteriores de programação.

O HTML é, também, eficiente na apresentação de filmes, mp3, imagens

convencionais e de alta definição aos navegadores.

Para a criação dessas páginas, existem diversos aplicativos. Entretan-

to, pode ser usado apenas um editor de textos, ou seja, o bloco de notas do
Windows.

11
HTML5 com CSS

Ressaltando que um documento HTML é um simples documento de

texto, ao invés da extensão (.TXT) em seus arquivos, ele possui a extensão
(.HTML) ou somente (.HTM).

Links
Segundo o dicionário on-line Michaelis:

“link
link
(línc) sm (ingl) 1 Telev Participação ao vivo de um repórter ou alguém
que não se encontra na própria estação de TV (na rua, por exemplo): A apre-
sentadora do programa pediu um link para que os visitantes da feira pudessem
fazer perguntas ao entrevistado. 2 Inform V ligação, acepções 14 e 15.”

Na criação de sites, links tem o sentido de ligação, “linkar” uma coisa a

outra. Também são chamados de hipervínculos quando se trata de figuras, os
links ou vínculos são textos ou figuras “clicáveis” que possuem um determi-
nado “endereço de outra página” vinculado a eles.

Cada documento HTML na verdade é uma página e vários documentos

se tornam um website. As várias páginas de um site interligam entre si por meio
dos links, ou os chamados vínculos.

Introdução
12
HTML5 com CSS

Em um grande texto, os links podem estar “disfarçados”

em seu meio. Existem algumas formas de diferenciar o link
do texto, uma delas é a presença do sublinhado em uma
palavra ou frase, ou o texto pode estar de outra cor, geralmente
na cor azul.

Essas formatações, citadas acima, não são uma re-

gra, podendo ser utilizados outros métodos para vincular
uma palavra, frase ou figura.

Um conceito que você, futuro desenvolvedor web, deve saber é que cada
página HTML criada é um arquivo. Sempre que o usuário clica em um link, é
um arquivo que está sendo chamado.

As páginas vêm acompanhadas de um nome como: cadastro.html, ou

compras.html. Entretanto, a página principal tem um nome específico e não
deve ser alterado, ela recebe o nome de index ou default. (index.html / default.
html).

Index ou default são nomes utilizados por todos

desenvolvedores web, desde o início do html, se tornando
um padrão. Por isso não é aconselhável mudar esses
nomes, entretanto, não é uma regra mantê-los.

Uma característica que define uma página HTML é o seu conteúdo está-
tico, ou seja, se o desenvolvedor não alterar, o texto permanecerá. Páginas
feitas com outras linguagens como AspScript ou JavaScript podem apresentar
um conteúdo dinâmico. Um grande exemplo de sites dinâmicos são os sites
do Uol ou Yahoo.

13
HTML5 com CSS

Uma forma interessante de identificar se uma página faz parte de um site

é observando seu endereço inicial. Por exemplo, para descobrir se o arquivo
aprendendohipertexto.html faz parte do mesmo site do arquivo webestatica.
html, basta visualizar o começo do seu endereço; se ele for o mesmo, eles
pertencem ao mesmo site:

Note o mesmo endereço inicial em ambos:

Quando você digita um site qualquer na barra de endereço e tecla ENTER,

o browser irá chamá-lo automaticamente, exibindo o novo endereço na barra
de endereços.

Digamos que você deseja acessar imediatamente o curso do HTML5 do

site “Cursos TI”, sem precisar passar pela página principal e que já sabe que
o arquivo dessa página chama-se html5.html. Então, basta abrir o navegador
e digitar www.cursosti.com.br/cursos/html5.html.

Obs.: O site citado no parágrafo acima é fictício, serve apenas para fins
de explicação.

Introdução
14
HTML5 com CSS

URL
Certamente você já ouviu falar deste nome, URL (Uniform Resource Loca-
tor), que em português significa Localizador-Padrão de Recursos. Ao acessar
um endereço, o navegador primeiro “baixa” do site hospedeiro todo o conteúdo
da página, só depois disso, é exibido na página do navegador.

Os arquivos multimídia são armazenados no servidor. No documento

HTML existem apenas os caminhos e os códigos para que o navegador exiba
essas imagens.

Conhecendo as tags
Como foi dito anteriormente, “Para que as páginas de um website possam
ser criadas, é preciso que você utilize um conjunto de códigos (feito em HTML)
que serão interpretados pelos browsers”.

Esse conjunto de códigos é organizado no HTML por meio de um re-

curso chamado Tag. Sua estrutura permite indicar instruções em blocos de
documento.

Uma tag é identificada por meio dos símbolos de < (menor) e > (maior).
Um exemplo é a inserção do negrito em uma palavra. Para isso, a tag deve ser
empregada da seguinte forma:

15
HTML5 com CSS

Existem tags de abertura e de fechamento. O que caracteriza uma TAG

de fechamento é uma barra ( / ), por exemplo: </P>, demonstrando que a TAG
do parágrafo foi fechada. Já o de abertura não possui a barra: <P>.

Destacando a seguinte regra: todo o texto que for incluído entre seus
delimitadores de abertura e fechamento sofrerá as alterações produzidas
por ele.

A importância da indentação
Nesse momento será comentado sobre dois recursos pouco usados
pelos desenvolvedores, e que são de suma importância para quem desenvolve,
desde o iniciante ao avançado: a indentação e os comentários.

A indentação é responsável por acrescentar espaços ou tabulações no

código, facilitando assim seu entendimento. Com isso é possível saber que uma
tag está contida em outra, como no exemplo abaixo:

Repare como ficou fácil de entender o código acima, onde aponta os

passos para a pessoa estar na cozinha.

Fica a seu critério o uso da indentação, pois ele não altera o funciona-
mento da execução do HTML ou em qualquer outra linguagem.

Introdução
16
HTML5 com CSS

Tag de comentário
A tag de comentário, na maioria das vezes, é inserida na tag <HEAD>,
não sendo uma regra, porém alguns web designers têm o hábito de inserir co-
mentários na tag <BODY>.

Geralmente é utilizado para especificar a função do código, para que,

no futuro, possa ser entendido sua atividade, facilitando uma possível
manutenção no site.
Como vimos anteriormente, existem as tags de abertura e fechamento. A
tag de comentário entra na lista de algumas tags que não utiliza o fechamento,
sendo usada no código da seguinte forma:

Você aprenderá sobre as principais tags para a criação de um site em

HTML. Não se preocupe tanto, pois isso será automático para ti daqui em diante.
Preste atenção em cada explicação:

< ! DOCTYPE HTML>: Essa é uma nova tag, começou a ser usa-
da no HTML5, e ela indica, para o navegador, qual o tipo de código que
será utilizado, nesse caso, passando para o português claro: < ! Tipo de
documento HTML>.

< HTML></HTML>: A tag HTML determina que todo o texto con-

tido dentro dele será da linguagem do HiperTexto.

< HEAD></HEAD>: Praticamente tudo que contiver dentro desta

tag serão informações especiais disponíveis da página e também o
seu nome. Detalhe: este nome é a frase exibida na barra de títulos do
navegador, quando a página é carregada no browser.

17
HTML5 com CSS

<BODY></BODY>: A maior parte do seu trabalho será feita na tag

do “corpo”, onde você irá escrever os códigos para inserir figuras,
sons e outros.

Para destacar como é fácil fazer algo e exibí-lo no browser, apenas com
essas quatro tags já pode-se criar uma página web, podendo ser chamada de
site.
<TITLE></TITLE>: Esta tag tem a função de inserir um título
na barra de título do navegador quando a página é carregada. Sempre
dentro da tag <HEAD>, esta tag tem a função de dar um título à página.

Baseado nas informações anteriores, percebe-se que a estrutura base

padrão para um documento em HTML é a seguinte:

< !DOCTYPE HTML>

<HTML>
<HEAD>
<TITLE>
*** Título da página ***
</TITLE>
*** Informações sobre a página e o título ***
</HEAD>
<BODY>
*** Todo o código da página ***
</BODY>
</HTML>

Apresentando o CSS
CSS (Cascading Style Sheets ou Folhas de estilo em cascata) é uma lin-
guagem utilizada para a formatação do layout do HTML, manipulando desde um
tipo de fonte até a coloração de palavras, letras, parágrafos ou textos inteiros.

Introdução
18
HTML5 com CSS

Cascata, na informática, tem o sentido

de preferência, prioridade ou privilégio, pois
se um determinado texto necessita de uma
formatação diferenciada, significa que deve ter
um procedimento preferencial, prioritário ou
privilegiado para atender essa necessidade.

Os códigos, nas versões anteriores do HTML, eram gigantes, pois havia

a mistura da estrutura (esqueleto) do site com a formatação do site.

Um exemplo para visualizar com facilida-

de como funciona o CSS: A função de um calçado
é proteger os pés da sujeira e de detritos do
chão, mas a variedade de modelos faz com que
você crie um novo estilo.

Como se faz um novo calçado? É necessário um projeto. Se ele será

aberto, fechado, com salto, sem salto, de couro, de pano, de borracha, será
colorido, será monocolor?

19
HTML5 com CSS

O calçado em si é o código HTML, sendo ela sua

estrutura e o projeto, onde deve existir as alterações
a serem feitas no calçado, virando uma sandália, ou
um sapato, relacionado ao layout e as artes é o CSS.

A estrutura HTML possibilita a formatação por meio do seu código

até hoje; porém, o CSS dispõe de mais recursos e facilita o processo do
desenvolvimento.

A grande vantagem em utilizar o CSS é “centralizar” todo o layout do site

em um arquivo, onde uma alteração realizada nesse arquivo se altera no site
inteiro, onde antigamente, se fosse necessário realizar alguma alteração, teria
que verificar o código inteiro, encontrar o texto para ser formatado e, assim,
fazer o procedimento.

Introdução
20
HTML5 com CSS

Conclusão da aula

Muito bem! Você terminou esse tópico aprendendo o que é CSS e a

vantagem em utilizá-lo. Aprendeu nessa aula o que é o HTML, o que são tags e
o que significa World Wide Web (WWW).

Na próxima aula você aprenderá:

• Iniciando com HTML

• Primeiras configurações
• Formatação

Exercícios de Fixação

Não deixe de fazer os exercícios de fixação da sua apostila

pessoal e intransferível. Responda-os utilizando uma caneta e no final
peça a assinatura do seu instrutor.

1 - O que é website?
__________________________________________________________
_________________________________________________________________
_________________________________________________________________

2 - Quais são as ferramentas essenciais para obter acesso aos Websites?

_________________________________________________________
________________________________________________________________

3 - WWW é uma estrutura de criação de sites em HTML. Essa afirmação

é...
( ) Falsa ( ) Verdadeira

Justifique: ________________________________________________
_______________________________________________________________
________________________________________________________________

4 - Qual a função do navegador?

__________________________________________________________
________________________________________________________________

21
HTML5 com CSS

Sugestão de exercício
Baseado no exemplo da camiseta branca (tela) e do calçado (apostila),
crie um novo exemplo que demonstre de forma clara e fácil para o seu instrutor,
o funcionamento do CSS utilizando um exemplo de estrutura e uma tabela
com possíveis modificações. Em seguida, salve seu arquivo com o nome de
exemplo_css em sua pasta pessoal.

Confira os seguintes arquivos:

• □ exemplo_css.txt

___________________
Instrutor

Introdução
22
Anotações

______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
Anotações

Aula 2 - Iniciando o projeto

Conteúdo:

• Iniciando com HTML

• Primeiras configurações
• Formatação

Iniciando com HTML

Anteriormente você aprendeu o que é World Wide Web, conheceu o que

é HTML, CSS e o que são as tags.

Nessa aula começará a ser dado os primeiros passos para a criação

de um site.

Existem diversas formas de criar sites, que vão desde a sites prontos,
onde você altera conforme sua necessidade, a programas próprios para esse
fim como Dreamweaver e NetBeans, por exemplo.

25
HTML5 com CSS

Mas antes de ter acesso a essas ferramentas é necessário você aprender

de forma “primitiva”, colocando realmente a “mão na massa”.

Mas se existem ferramentas que podem auxiliar a desenvolver mais

rápido, por que não aprendê-las agora?

Pelo simples fato de ser o ensino gradativo, para chegar nas ferramentas
avançadas é necessário conhecer o básico. Para se chegar ao alto de um
prédio é necessário passar pelos andares, e existem duas formas de fazê-lo:
Pelo elevador ou pelas escadas.

O elevador são os programas avançados que

facilitam sua vida e que fazem você ganhar tempo e
agilidade.

As escadas o levará ao alto do prédio da

mesma forma que o elevador, porém exigirá
de você um esforço maior, e esse esforço, no
curso, se chama HTML.

Apenas não se esqueça de uma coisa, as escadas foram fundamen-

tais para a existência dos elevadores... Para isso, é necessário saber como
funciona os degraus da escada.

Iniciando o projeto
26
HTML5 com CSS

Exercícios

Esta apostila é sua, pessoal e intransferível. Nela você poderá

responder aos exercícios e fazer anotações onde desejar. Leve-a
para casa, não a devolva e nem repasse para outra pessoa.

Você aprenderá, nesse exercício, a criar uma pasta e o principal ar-

quivo para começar o desenvolvimento do site. Pode-se dizer que esse será
o “primeiro degrau da escada”.

1 - Pergunte para o seu instrutor qual local do computador pode

ser criada uma pasta. Depois de conhecido o local, crie uma pasta chamada
Academia.

2 - Clique com o botão direito do mouse no espaço em branco da tela,

posicione a seta do mouse em novo e escolha o arquivo Documento de texto.

3 - Perceba que o nome “Documento de texto” está em azul, permitindo

que você altere esse texto. Apague o Novo Documento de Texto.txt e digite
index.html e pressione Enter. Caso surja uma janela confirmando a alteração
do arquivo, clique em Sim.

Observe que ao confirmar o novo nome do arquivo, seu ícone é

alterado. Geralmente o ícone é o mesmo do seu navegador padrão, no caso
da figura Internet Explorer.

27
HTML5 com CSS

4 - Para finalizar esse exercício, você conhecerá o aplicativo para o

desenvolvimento do seu site. Clique com o botão direito do mouse no arquivo
index.html e escolha a opção Edit with Notepad++ ou Editar com Notepad++.

Depois de aberto o arquivo index, chegou o momento de construir seu

primeiro site.

1 - A primeira tag a ser colocada no arquivo é o tipo de código que o

navegador receberá. Digite <!DOCTYPE HTML> e pressione Enter.

2 - Em seguida serão inseridas mais duas tags que serão essenciais para
a construção da estrutura do site chamada HTML. Digite as tags de abertura
e fechamento do HTML: <HTML></HTML>.

3 - Clique entre os símbolos de maior / menor (...ML></HT...) e

pressione a tecla Enter.

4 - Os códigos do site serão inseridos entre essas duas tags. Para isso,
é necessário criar um espaço. Pressione mais uma vez a tecla Enter.

Caso você tenha feito os passos corretamente, você está nessa tela. Se
não estiver, peça ajuda ao seu instrutor.

Iniciando o projeto
28
HTML5 com CSS
1 - Clique no espaço criado entre as duas tags e pressione a tecla tab. Isso
fará com que o marcador que está piscando avance um espaço para a direita.

2 - A próxima tag que será inserida é a Head, em inglês significa cabeça.

Digite as tags de abertura e fechamento do HEAD: <HEAD></HEAD>.

3 - Clique entre os símbolos de maior / menor (...AD></HE...) e pres-

sione a tecla Enter.

4 - Insira um espaço entre as tags pressionando a tecla Enter.

5 - Clique no espaço criado entre as duas tags e pressione a tecla tab.

6 - A próxima tag que será inserida é a Title, em inglês significa Título.

Digite as tags de abertura e fechamento do TITLE: <TITLE></TITLE>.

7 - Clique entre os símbolos de maior / menor (...LE></TI...) e pressione

a tecla Enter.

8 - Insira um espaço entre as tags pressionando a tecla Enter.

9 - Clique no espaço criado entre as duas tags e pressione a tecla tab.

10 - Digite: Hello World!

Caso você tenha feito os passos corretamente, você estará nessa tela.
Caso não esteja, peça ajuda ao seu instrutor.

29
HTML5 com CSS
Observe que a forma como está sendo digitado deixa o código
organizado, e que uma tag está contida na outra ( a tag TITLE está dentro
da tag HEAD que está dentro da tag HTML ).

1 - A próxima tag que será inserida é a Body, em português significa

corpo. Clique no final da tag </HEAD> e, em seguida, pressione a tecla Enter.

2 - Feito isso, digite as tags de abertura e fechamento BODY: <BODY>

</BODY>.

3 - Clique entre os símbolos de maior / menor (...DY></BO...) e

pressione a tecla Enter.

4 - Insira um espaço entre as tags pressionando a tecla Enter.

5 - Clique no espaço criado entre as duas tags e pressione a tecla tab.

6 - Digite: Minha primeira página!

7 - Clique no botão Salvar.

Caso você tenha feito os passos corretamente, você estará nessa tela.
Caso não esteja, peça ajuda ao seu instrutor.

Iniciando o projeto
30
HTML5 com CSS

Parabéns! Você acabou de criar seu primeiro site! Está na hora de ver
o resultado do seu trabalho.

1 - Clique no menu Executar.

O menu Executar lhe dá opções da conferência dos seus resultados direto

no navegador, sendo eles: Internet Explorer, Mozilla Firefox, Google Chrome e
Safari.

2 - Escolha a opção Launch in IE.

Em algumas situações, o navegador não consegue interpretar uma letra

com acento, fazendo com que a palavra seja escrita de forma errada.

Você escreveu “Minha primeira página” e saiu no navegador “Minha

primeira pÃ¡gina!”. Isso aconteceu, pois faltou uma tag que corrija esse erro.

Caso isso tenha acontecido, siga os passos abaixo e insira essas tags
em seu código.

1 - Feche o navegador e, em seguida, clique no final da tag de abertura

<HEAD> e pressione a tecla Enter.

2 - Em seguida, digite a tag dessa forma: <meta charset=”UTF-8”>.

31
HTML5 com CSS

A tag Meta charset é nova, inserida na versão 5 do html onde sua função
é ligar seu código a uma tabela de caracteres à página.

UTF-8 é uma codificação, dentre várias, que representa uma gama de

caracteres. Por isso, ela é ligada à tag meta charset.

Vale ressaltar que o navegador, além de saber qual tabela de caracteres

ele deve usar, deve saber qual a língua oficial do site. Essa informação é
inserida dentro da tag HTML.

3 - Clique depois da letra L, da tag <HTML>, pressione a tecla de espaço

e digite lang=”PT-BR”, ficando dessa forma: <HTML lang=”PT-BR”>.

4 - Confira se o erro do acento foi corrigido revendo o site no navegador.

Clique no menu Executar.

5 - Escolha a opção Launch in IE.

Obs.: Caso o erro do acento permaneça, troque UTF-8 por ANSI que
também é um tipo de codificação.

Muito bem! Você terminou esse exercício! Não feche o aplicativo, pois
ele será necessário para o próximo exercício.

Iniciando o projeto
32
HTML5 com CSS

Primeiras configurações

No tópico passado você aprendeu que deve ser

escolhido um local para depositar seus arquivos, criar
uma pasta e criar a “ponta” do seu site chamado
index.html.

Conheceu a estrutura base para a criação de páginas em HTML com

as tags !DOCTYPE, HTML, HEAD, TITLE e BODY.

Eis o momento de aprender outras tags, elas serão essenciais para fazer
o site ter um formato.
A primeira tag que será apresentada é a HEADER. Uma tag, de suma
importância, inserida na versão 5 do HTML.

Sua função é deixar palavras em evidência para os buscadores como:

Google, Yahoo, Bing para o seu site ser encontrado.

Um bom exemplo para definir a tag HEADER são as lojas de roupas, pois
elas podem colocar os seus itens em promoção entre essa tag. Tudo o que for
escrito participará do contexto da tela. Exemplo: Promoção de bota fora do Verão
no Inverno! Desconto de 50% em toda a loja! Aproveite os produtos mais baratos
como cuecas, calcinhas, camisetas gola polo e bonés da marca Thunder!

Todas as palavras citadas, de Promoção a Thunder, serão referência

para seu site. No momento em que o buscador recebe a requisição da busca
de algo, ela verificará diversos sites, passeando pelas tag’s HEADER, e buscará
essas palavras.

33
HTML5 com CSS

A tag HEADER é muito confundida com a tag HEAD. A diferença entre as

duas é que a tag HEADER, como dito anteriormente, deixa palavras, frases ou
parágrafos como referência para facilitar o encontro do seu site, enquanto a
tag HEAD serve para informar as características da página.

Um exemplo: A tag <TITLE> está contida na tag <HEAD>, e a função

da tag Title é dar um nome à página na aba do navegador, sendo essa uma
característica da página.

A tag HN tem a função de declarar o tamanho do texto na tela. O N, no

lado direito do H, é representado por números (1,2,3,4,5,6), e quanto maior o
número, menor o tamanho do texto.

Exercícios

Esta apostila é sua, pessoal e intransferível. Nela você poderá

responder aos exercícios e fazer anotações onde desejar. Leve-a
para casa, não a devolva e nem repasse para outra pessoa.

Você aprenderá, nesse exercício, a inserir um conteúdo no código e

utilizar as tag’s HEADER e HN.

1 - Caso o notepad++ esteja aberto na sua tela, minimize-o e dê um clique

duplo na pasta Computador.

2 - Em seguida, dê um clique duplo em Disco Local C:.

Iniciando o projeto
34
HTML5 com CSS

3 - Diante de tantas pastas, dê um clique duplo na pasta Praticar.

4 - Localize a pasta do seu curso, HTML5.

5 - Feito isso, dê um duplo clique na pasta Aula 02.

6 - Em seguida, abra o arquivo de texto chamado Karatê Kyokugen.txt.

Esse é o texto que será usado para a criação do site e os exercícios

dessa apostila, serão o modelo para o ensinamento da linguagem HTML5.

Não sei se você reparou, mas o exercício interativo da tela também fala
de uma academia. Na verdade é a mesma e, nas aulas futuras, ligaremos 3
páginas sendo: O exercício criado em tela (Academia Corpo Bom), o exercício
criado na apostila (Karatê Kyokugen Ken) e o exercício criado na sugestão de
exercício, onde os detalhes serão dados no final dessa aula.

7 - Com o arquivo aberto, copie todo o texto do arquivo.

35
HTML5 com CSS

Feito isso, será necessário fazer algumas alterações no conteúdo

inserido do primeiro site criado por você.

1 - Em <TITLE>, substitua Hello World! por Karatê Kyokugen Ken.

2 - Em seguida, substitua o texto Minha primeira página pelo conteúdo

copiado do arquivo de texto.

Caso você tenha feito os passos corretamente, você está nessa tela.
Caso não esteja, peça ajuda ao seu instrutor.

Pronto, o que precisamos para começar aprender novas tags já está

inserido. Eis o momento de aprender, a começar pela tag HEADER.

1 - Mas, antes de aprender a usar essa tag, salve o seu projeto no Note-
pad++ e pressione a tecla F5.

Percebeu o que aconteceu? O texto está organizado no seu código HTML

mas, está desorganizado no navegador.

Isso acontece por que as tags que são necessárias para deixar o texto
estruturado, como está no código, não foram inseridas.

Iniciando o projeto
36
HTML5 com CSS

2 - Clique no final da tag de abertura <BODY> e pressione a tecla Enter.

3 - Será colocado em evidência, ou como referência, a palavra Kyokugen

Ken. Digite então a tag <HEADER>.

4 - Da mesma forma que a tag <HEADER> foi aberta, é preciso fechá-la.

Clique depois do fechamento do parêntese e pressione a tecla Enter.

5 - Seguindo a indentação da tag de abertura <HEADER>, caso não esteja

sincronizado utilize as setas do teclado para ajustar, digite a tag de fechamento
</HEADER>.

6 - Salve o seu documento clicando no botão Salvar e, em seguida,

clique no menu Executar escolhendo a opção Launch in IE.

Repare que o nome Kyokugen Ken que estava junto ao texto, agora
está semelhante a um título. Isso significa que esse texto está recebendo as
características que a tag HEADER dispõe.

Sempre que um conteúdo estiver entre as tags de abertura e fecha-

mento, ele receberá os atributos dessas tags.

7 - Feche o seu navegador.

Depois de aprender a tag HEADER, será apresentado a tag <HN>, onde

esse N receberá valores.

1 - Clique no final da tag de abertura <HEADER> e pressione a tecla

Enter.

37
HTML5 com CSS

2 - Será utilizado o maior tamanho para destacar a palavra também no

texto. Digite então a tag <H1>.

3 - Da mesma forma que a tag <H1> foi aberta, é preciso fechá-la.

Clique depois do fechamento do parêntese da palavra de língua estrangeira,
e pressione a tecla Enter.

4 - Seguindo a indentação da tag de abertura <H1>, caso não esteja

no mesmo rumo, utilize as setas do teclado para ajustar, digite a tag de fecha-
mento </H1>.

5 - Salve o seu documento clicando no botão Salvar e, em seguida,

clique no menu Executar escolhendo a opção Launch in IE.

Repare que o nome Kyokugen Ken que estava com a letra do mesmo
tamanho do texto ficou muito maior e em destaque. Quanto menor o número,
maior o tamanho da letra.

6 - Feche o seu navegador.

Iniciando o projeto
38
HTML5 com CSS

Formatação

Uma definição simples de formatação seria as alterações de seu estado

original. Uma letra que antes era preta passou a ser vermelha. Ocorreu nesse
pequeno exemplo a formatação de uma letra.

Um software que pode ser lembrado como exemplo, e que algumas de

suas funções também funcionam no HTML é o Microsoft Word.

No Microsoft Word são usados três recursos sempre que um documento de

texto precisa de palavras destacadas, são eles: Negrito, Itálico e Sublinhado.

Para aplicar o atributo dessas opções em uma palavra, no Word, deve-se

selecionar uma letra, palavra, parágrafo ou texto e escolher uma das opções.

39
HTML5 com CSS

No HTML não é diferente, é necessário escolher uma letra, palavra ou

texto e colocá-los entre as tags. Veja em um exercício como é feito.
Exercícios

Esta apostila é sua, pessoal e intransferível. Nela você poderá

responder aos exercícios e fazer anotações onde desejar. Leve-a
para casa, não a devolva e nem repasse para outra pessoa.

Você aprenderá, nesse exercício, a utilizar as tag’s relacionadas ao

Negrito, Sublinhado e Itálico.

1 - Primeira coisa que deve ser feita é identificar no texto as palavras

que são importantes e que precisam ser destacadas. A primeira palavra que
será destacada no texto será o nome do mestre. Clique à frente da letra T de
Takuma do primeiro parágrafo.

2 - Em seguida, digite a tag referente ao Negrito.

3 - Por exemplo, se o parágrafo inteiro deve estar em Negrito, basta

fechar a tag de negrito na palavra Pessoal. Como deve ser destacado apenas
o nome do mestre, clique depois da letra n, da palavra Ken e feche a tag de
negrito </B>.

Caso você tenha feito os passos corretamente, você está nessa tela. Se
não, peça ajuda ao seu instrutor.

4 - Repita os passos 1, 2 e 3 para o próximo nome: Ryo Kouji Ken.

5 - A próxima tag a ser usada é o sublinhado. O procedimento é o mesmo

para o Negrito. Repita os passos 1, 2 e 3 para a palavra Kyokugen utilizando
a tag <U>, para abertura e </U> para fechamento.

Iniciando o projeto
40
HTML5 com CSS

6 - Salve o projeto, clique no menu Executar e escolha a opção Launch

in IE.
Comece a ler o texto e observe que as palavras Takuma Kouji Ken,
Ryo Kouji Ken e Kyokugen estão formatadas, pois foram utilizadas as tags
específicas nelas.

7 - Feche o navegador e, em seguida, utilize as tags <B></B> “Negrito”

e <U></U> “Sublinhado” nas seguintes palavras:

1º Parágrafo: <B>várias técnicas foram incorporadas e/ou modificadas</B>

<U> escopo almejado </U>
<B><U> lado desportivo e físico</U></B>
<B><U> desenvolvimento pessoal</U></B>

2º Parágrafo:<B>Takuma</B>,
<B> ensinava Karatê </B>,
<B> visão e entendimento particulares </B>,
<B><U> vários professores ensinariam uma mesma disciplina de modos
diferentes </U></B>,
inscrição <B><U> Kyokugen Ken</U></B>,
<B><U> ”Kyokugen Ken Dojo”</U></B>,

3º Parágrafo: <B>mestre Takuma</B>

4º Parágrafo: <B><U>Kyokugen Ken</U></B>

<U> Japão</U>
<U> China</U>
<B><U>Estados Unidos</U></B>

41
HTML5 com CSS

Caso você tenha feito os passos corretamente, você está nessa tela. Se
não, peça ajuda ao seu instrutor.

8 - Salve o projeto, clique no menu Executar e escolha a opção Launch in IE.

9 - Feche o navegador e não feche o aplicativo, pois ele será necessário

para o próximo exercício.

No código do exercício foram bastante utilizadas as tags de Negrito

e Sublinhado, porém, o HTML contém outras tags que podem ser utilizadas
por você.

<B></B>= Negrito: Deixa a palavra com um traço mais forte.

<I></I> = Itálico: Deixa a palavra inclinada para a direita, muito utilizado
em palavras de língua estrangeira, como “Hello World”.
<U></U> = Sublinhado: Deixa a palavra marcada com um traço em
underline (Abaixo da linha).
<S></S> ou <strike> = Tachado: Deixa a palavra com traços sobre ela,
muito usado para simbolizar que uma palavra está errada e que foi trocada
por outra. Exemplo: Eu tenho uma idéia ideia do que pode estar acontecendo.

Iniciando o projeto
42
HTML5 com CSS

No html tem diversas tags, mas essas duas são muito úteis, pois elas
fazem com que os textos comecem a ter uma “forma”. São as tags <BR> e <P>.

A tag <BR> (Break), conhecida como quebra de linha, entra em uma lista
seleta de tags que são somente de abertura. Sua função é acresentar linhas
no texto, linhas na tela.

Mesmo que o conteúdo esteja “montado” no código da estrutura, não

é apresentado da mesma forma na tela. O texto configurado na estrutura o
auxiliará na inserção das tags, para com isso, ter o resultado esperado.

A tag <P></P> significa Parágrafo, cuja função é criar blocos de texto,

será muito útil para formatar o texto inserido na estrutura.

Exercícios

Esta apostila é sua, pessoal e intransferível. Nela você poderá

responder aos exercícios e fazer anotações onde desejar. Leve-a
para casa, não a devolva e nem repasse para outra pessoa.

Você aprenderá, nesse exercício, a utilizar as tag’s relacionadas ao

parágrafo e a quebra de linha.

1 - Aproveitando que o texto na estrutura já está dividido, será inserido

com mais facilidade as novas tags. Clique à frente da letra É.

43
HTML5 com CSS

2 - Em seguida, digite a tag referente ao parágrafo <P>.

3 - Como a tag de parágrafo necessita ser fechada, clique após o ponto

final, logo depois da tag de negrito </B>.

4 - Digite a tag de fechamento do parágrafo </P>.

Caso você tenha feito os passos corretamente, você está nessa tela. Se
não, peça ajuda ao seu instrutor.

5 - Salve o projeto, clique no menu Executar e escolha a opção Launch

in IE.

Reparou que, com poucos comandos, foi possível criar um parágrafo?

Separou uma parte do texto do outro bloco.

Iniciando o projeto
44
HTML5 com CSS

6 - Feche o navegador e, em seguida, repita os passos 1, 2, 3 e 4 para

as próximas palavras e, com isso, crie novos parágrafos.

2º Parágrafo: <P>Mestre ... Dojo” ”</U></B>.</P>

3º Parágrafo: <P>A despeito...adaptando outras.</P>

4º Parágrafo: <P> O <B><U>Kyokugen Ken... em 1966.</P>

Caso você tenha feito os passos corretamente, você está nessa tela. Se
não, peça ajuda ao seu instrutor.

7 - Salve o projeto, clique no menu Executar e escolha a opção Launch

in IE.

Repare que o texto foi dividido em 4 partes, isso significa que 4 partes do
texto receberam os atributos correspondentes à tag <P>.

Depois de aprendido como inserir a tag parágrafo, aprenda nos próximos

passos como usar a tag <BR>.

1 - Feche o navegador e, em seguida, clique na linha branca que separa

o primeiro e o segundo parágrafo.

2 - Em seguida, digite a tag <BR> e pressione a tecla Enter.

3 - Digite mais uma vez a tag <BR>.

45
HTML5 com CSS

4 - Salve o projeto, clique no menu Executar e escolha a opção Launch

in IE.
Caso você tenha feito os passos corretamente, você está nessa tela.
Se não, peça ajuda ao seu instrutor.

5 - Feche o navegador e, em seguida, repita os passos 1, 2, 3 para as

próximas situações:

Entre os 2º e 3º parágrafos.

Entre os 3º e 4º parágrafos.

6 - Salve o projeto, clique no menu Executar e escolha a opção Launch

in IE.

Iniciando o projeto
46
HTML5 com CSS

Conclusão da aula

Nessa aula você aprendeu como utilizar mais duas tags, a <BR> e a
<P></P>. Aprendeu também que, para a criação de um site, é necessário ter
um local, criar uma pasta e depositar todos os arquivos nela. Aprendeu que
o arquivo index.html é a página principal de seu site, onde tudo sairá dela.

Na próxima aula você aprenderá:

• Iniciando com CSS

• Configurando a página
• Criando menu
• Efeitos

Exercícios de Fixação

Não deixe de fazer os exercícios de fixação da sua apostila

pessoal e intransferível. Responda-os utilizando uma caneta e no final
peça a assinatura do seu instrutor.

1 - Qual o procedimento para se criar um arquivo Index?

2 - Qual o nome da tag cuja função é ligar uma tabela de caracteres à

página?
__________________________________________________________
_______________________________________________________________

3 - Escreva todas as tags necessárias para criar a estrutura base de

um site HTML.
__________________________________________________________
_______________________________________________________________

4 - Qual a função da tag Header?

__________________________________________________________
________________________________________________________________
________________________________________________________________

47
HTML5 com CSS

5 - As tags <BR> e <P> têm a mesma função? Se não, justifique.

__________________________________________________________
________________________________________________________________
________________________________________________________________

Sugestão de exercício
Crie uma página em HTML utilizando todo o conteúdo aprendido até
o momento. Ao invés de falar sobre Karatê, mude a arte marcial para o Judô.

* Salve o arquivo com o nome de judo.html.

Confira os seguintes arquivos:

• □ index.html
• □ judo.html

___________________
Instrutor

Iniciando o projeto
48
Anotações

Aula 3 - Formatação com CSS

Conteúdo:
• Iniciando com CSS
• Configurando a página
• Criando menu
• Efeitos

Iniciando com CSS

Na aula anterior você aprendeu como iniciar um projeto, inserir as pri-
meiras tags e algumas partes sobre a formatação como negrito, sublinhado,
itálico ou tachado.

Nessa aula você aprenderá a fundo como utilizar e o que é o CSS.

A função do CSS ( Cascading Style Sheets ) é centralizar toda a parte

da formatação da página em um arquivo, facilitando a manutenção e deixando
o código HTML limpo.

51
HTML5 com CSS

Em versões anteriores do HTML, a formatação do conteúdo, inserção

de imagens ou mudança na cor da página, era realizada junto a estrutura,
com o conteúdo e as tags.

Com isso, a linha de código se tornava gigante e de difícil manutenção,

pois era preciso pesquisar todo o código para encontrar o trecho da página
que necessitava de formatação.

Com a chegada do CSS, toda essa parte de

formatação ficou em um arquivo separado.

Para utilizar esses recursos é necessário

que esse arquivo esteja “conectado” à página.

Podem ser criados quantos arquivos CSS quiser e com diversas fun-
ções, mas não terão nenhuma função se não estiver conectado à página HTML.

Formatação com CSS

52
HTML5 com CSS

Exercícios

Esta apostila é sua, pessoal e intransferível. Nela você poderá

responder aos exercícios e fazer anotações onde desejar. Leve-a
para casa, não a devolva e nem repasse para outra pessoa.

Você aprenderá nesse exercício a criar um arquivo CSS.

Obs.: Caso você tenha digitado os valores semelhantes aos da apostila

e sua página esteja diferente, ajuste os valores manualmente do CSS, pois
eles podem variar.

1 - O arquivo CSS ficará na pasta Academia, criada na aula passada.

Localize esse diretório e dê um clique duplo nele.

2 - Clique com o botão direito do mouse no espaço em branco da tela,

posicione a seta do mouse em novo, escolha a opção Pasta e dê o nome de CSS.

3 - Feito isso, dê um clique duplo na pasta CSS.

4 - Clique com o botão direito do mouse no espaço em branco da tela,

posicione a seta do mouse em novo, escolha a opção Documento de texto.

5 - Perceba que o nome “Documento de texto” está em azul, permitindo

que você altere esse texto. Apague todo o texto, digite karate.css e pressione
Enter. Caso surja uma janela confirmando a alteração do arquivo, clique em Sim.

53
HTML5 com CSS

Muito bem! Feito isso você conectou o arquivo CSS ao arquivo index.
html! Agora podem ser utilizados seus recursos, certo?

O arquivo criado dentro da pasta do site não faz com que o arquivo esteja
conectado. Para isso, é necessário uma linha código na estrutura HTML para
essa ligação.

1 - Clique no botão Voltar para retornar à pasta Academia.

2 - Em seguida, clique com o botão direito do mouse em index.html. Feito

isso, escolha a opção Edit with Notepad++.

3 - Clique no final da tag <meta charset=”utf-8”>, ou ANSI e pressione

a tecla enter.

4 - Realizado esse procedimento, digite a seguinte tag:

<LINK href= “css/karate.css“ rel=”stylesheet” type=”text/css” media=”screen”>.

5 - Salve o arquivo e mantenha-o aberto.

A tag <LINK> tem a função de fazer a ligação / conexão de páginas ou

arquivos, como o CSS por exemplo.

O atributo href significa referência, onde ele denomina o caminho da

localização do arquivo. Nesse exemplo é citado entre as aspas “(pasta) css /
(arquivo) karate.css”.

Formatação com CSS

54
HTML5 com CSS

O atributo rel define o tipo de arquivo ou página que está sendo re-
lacionado com a estrutura HTML. Nesse caso “stylesheet“ significa folha de
estilo (CSS).

O atributo type define os valores do que serão inseridos nos elementos

HTML, nesse caso Texto (text/css).

Por fim, o atributo media define o tipo de media, um certo código CSS é
direcionado. Nessa situação, screen é usado para dispositivos e monitores
com resolução adequada e telas coloridas.

Agora sim! Esse é o procedimento padrão para a conexão entre arquivos

externos e uma página em HTML.

Configurando a página
Até o momento foi passado qual é a função do CSS e como ligá-lo ao
arquivo index.html.

Nesse tópico será apresentada a forma de inserção dos códigos no

arquivo CSS, analisando as diferenças entre um código em HTML e em CSS.

Apenas para recordar:

Para formatar uma letra, palavra, parágrafo ou o texto completo no
Word, basta selecionar o texto desejado e, em seguida, clicar nos botões
correspondentes aos efeitos. No exemplo citado foi o Negrito, Sublinhado,
Itálico ou Tachado.

55
HTML5 com CSS

Já no HTML a forma de inserir esses efeitos é colocar uma letra, palavra,

parágrafo ou o texto completo entre as tags.

No CSS a história é diferente pois os códigos são ligados às tags.

Exercícios

Esta apostila é sua, pessoal e intransferível. Nela você poderá

responder aos exercícios e fazer anotações onde desejar. Leve-a
para casa, não a devolva e nem repasse para outra pessoa.

Você aprenderá o procedimento de formatação da página por meio do

CSS.

1 - Vá na pasta Academia e dê um clique duplo no diretório CSS.

2 - Em seguida, clique com o botão direito do mouse no arquivo

karate.css e escolha a opção Edit with Notepad++.

A primeira coisa que deve ser feita é ajustar a margem e o espaçamento

da página.

A estrutura dos códigos em CSS é diferente da estrutura HTML, pois o

CSS não se relaciona de forma direta com o conteúdo, como é feito no HTML.

3 - Digite: *{}.

4 - Feito isso, clique entre as chaves e pressione a tecla Enter duas vezes.

Formatação com CSS

56
HTML5 com CSS

Caso você tenha feito os passos corretamente, você está nessa tela. Se
não, peça ajuda ao seu instrutor.

5 - Clique na linha 2 e pressione a tecla TAB.

6 - Depois de pressionado a tecla TAB digite: margin:0;.

Um detalhe importante, tudo o que for digitado deve terminar com ponto
e vírgula ( ; ).

7 - Logo em seguida pressione a tecla Enter para passar para a linha de

baixo e digite: padding:0;.
Caso você tenha feito os passos corretamente, você está nessa tela. Se
não, peça ajuda ao seu instrutor.

O que foi feito? Esse código fez com que o espaçamento e a margem da
página fossem zerados. Pode-se dizer que isso foi um “reset”.

O grande diferencial do CSS é a formatação pelas tags de forma

individual, mas para isso acontecer elas devem estar citadas no código.

1 - Vamos citar a tag <BODY> formatando-a de forma idêntica a do

exercício feito em tela. Isso é feito para manter um padrão, mas nas aulas
futuras iremos configurar as páginas de acordo com o seu tema. Clique após a
chave de fechamento do código acima e pressione a tecla Enter 2 vezes.

2 - Em seguida, digite BODY {}.

3 - Feito isso, clique entre as chaves e pressione a tecla Enter duas vezes.

4 - Clique na linha 7 e pressione a tecla TAB.

5 - Depois de pressionado a tecla TAB digite: margin:0 auto; e pressione

a tecla Enter.

57
HTML5 com CSS

Caso você tenha feito os passos corretamente, você está nessa tela. Se
não, peça ajuda ao seu instrutor.

Relembrando: Margin é relacionado a espessura das margens da

página em HTML. O número 0 representa que não terá nenhum valor de
margem e o auto significa que isso será padrão.

6 - Digite essa sequência de códigos:

padding: 25px 0;
width: 940px;
font: 20px Tahoma;
background-color: #FFFF33;

Padding é relacionado com o espaço entre o conteúdo e as

bordas da página. 25px, PX (pixels) é uma unidade de medida como
CM = Centímetro por exemplo, e o 25 é o valor do espaço.

Width é relacionado a largura de um box. Por exemplo: Imagine

que sua página tem a configuração de 1024 X 768. Colocando no CSS
que sua largura é de 940 ele limita-a a esse tamanho.

A propriedade font permite que você altere o tipo da letra e

seu tamanho (20px).

Background-color é responsável pela cor do fundo da página.

7 - Você analisará como está ficando sua página pelo navegador. Clique
no botão Salvar.
8 - Em seguida, clique na aba index.html. Caso ela não esteja aberta
no seu programa, vá até a pasta Academia e abra-a no Notepad++.

9 - No menu Executar escolha a opção Launch in IE.

Formatação com CSS

58
HTML5 com CSS

Caso você tenha feito os passos corretamente, você está nessa tela. Se
não, peça ajuda ao seu instrutor.

Analise abaixo como era a página sem a aplicação do CSS:

As mudanças são claras; repare que o tipo de letra e espessura são

diferentes, que o espaçamento entre os parágrafos foi reduzido, que o fundo
deixou de ser branco e passou a ser amarelo.
Todo o conteúdo, desde o título até o texto, recebeu a nova
configuração, pois no CSS foram inseridos os códigos referentes a tag <BODY>.

Criando um menu
O menu nada mais é do que uma forma de ter conhecimento sobre
opções. Isso se refere a tudo, como em um restaurante, por exemplo, onde é
necessário mostrar para o cliente o que seu estabelecimento fornece e quanto
custa para obter aquele produto.

59
HTML5 com CSS

Para a criação de um menu, tanto na horizontal como na vertical, é

necessário ter o conhecimento de algumas tags.

A tag NAV <NAV> é uma das novidades no HTML 5, e sua função é

permitir a criação de um grupo de links de navegação.

Essa tag foi promovida em sua função; no HTML4 ela era apenas um
atributo para ser a “cabeça” de uma sequência de códigos no HTML5.

A tag <OL> representa a classe das listas ordenadas, pois seus símbolos
são números ordinais e romanos.

A tag <UL> representa a classe das listas não ordenadas, pois suas
marcações são figuras como círculos, quadrados ou discos.

A tag <LI> define o conteúdo que terá na lista.

As listas contêm várias funções, dentre as mais usadas estão a

identificação de assuntos abordados no site, e direcionamento de conteúdo.

Esse direcionamento de conteúdo funciona da seguinte forma:

Formatação com CSS

60
HTML5 com CSS

Nessa situação essa lista têm as funções citadas acima. Para ir ao ín-
dice do site, basta clicar na palavra índice; para assistir aos vídeos interativos,
basta clicar na palavra vídeos interativos e a mesma coisa com Exercícios de
HTML5 com CSS.
Quando isso acontece, é dito que esse texto está linkado, ligado, conec-
tado com outra página que contém esse conteúdo. Para fazer isso é utilizada
a tag <A>.
A tag <A> é responsável por transformar o texto da lista em um link.

Exercícios

Esta apostila é sua, pessoal e intransferível. Nela você poderá

responder aos exercícios e fazer anotações onde desejar. Leve-a
para casa, não a devolva e nem repasse para outra pessoa.

Você criará algumas listas e as transformará em links.

1 - Clique no final da tag <BODY> e pressione a tecla Enter.
2 - Em seguida, digite a tag própria para a criação de grupo de links de
navegação: <NAV></NAV>.
3 - Feito isso, clique entre o sinal de maior / menor e pressione duas
vezes a tecla Enter (...AV>/</NA...).

4 - Clique no espaço entre as tags e pressione a tecla TAB.

5 - Após clicar no espaço solicitado, digite a tag <UL></UL>.

6 - Depois clique entre o sinal de maior / menor e pressione duas vezes

a tecla Enter (...L>/</U...).
7 - Clique no espaço entre as tags e pressione a tecla TAB.
8 - Feito isso, digite a tag <LI></LI>.
9 - Em seguida, clique entre o sinal de maior / menor (<LI>/</LI>).
Uma dúvida, por que agora eu não pressionei duas vezes a tecla Enter
nessa situação? Pelo simples fato de que entre essas tags será inserido o
conteúdo.

61
HTML5 com CSS

Caso você tenha feito os passos corretamente, você está nessa tela. Se
não, peça ajuda ao seu instrutor.

10 - Digite: <a href=”#”> Página inicial </a>.

11 - Feito isso, clique no final da tag </LI>, pressione a tecla Enter e digite
em sequência:
<LI><a href=”#”> Karatê Kyoukugen-ken </a></LI>
<LI><a href=”#”> Judô </a></LI>
<LI><a href=”#”> Fitness </a></LI>

Relembrando: o atributo href significa referência, ele denomina o caminho

da localização do arquivo. Nesse exemplo é citado pelo jogo da velha “#“, pois
ainda não há um arquivo ou página para inserir nesse exercício.

12 - Salve seu código e, em seguida, clique no menu Executar abrindo

sua página pelo Internet Explorer.

Veja como está sua página no momento:

Formatação com CSS

62
HTML5 com CSS
Reparou que, com poucas linhas de código, é possível criar funções
úteis para uma página? Esse é o princípio para a criação de um menu.

Essa pequena lista aponta quais páginas / tópicos o site tem. Caso clique
em alguma opção, aparecerá esse caminho na barra de endereço do navegador:

Como no código foi colocado no href o símbolo do jogo da velha ( # ), ele

apareceu na barra de endereço. Se tivesse colocado o endereço de um site ou
uma página do seu site, ela abriria no mesmo momento.

13 - Feche o seu navegador Internet Explorer.

14 - Faça um teste inserindo essa página na lista referente ao Judô.

Apague o jogo da velha e digite:

http://quillan-college.e-monsite.com/medias/images/judo.jpg

15 - Salve seu código e, em seguida, clique no menu Executar abrindo

sua página pelo Internet Explorer.

16 - Clique em Judô.

63
HTML5 com CSS

Repare que a barra de endereço passou a ser o endereço digitado no

código ao invés do jogo da velha.
17 - Substitua o link inserido pelo sinal do jogo da velha semelhante as
linhas acima.
18 - Feche o seu navegador Internet Explorer.

Seletores

As tags citadas nesse exercício foram inseridas na estrutura HTML, pois

elas deram funções ao texto. Entretanto, tem um atributo associado a essas
tags que auxilia na formatação chamado de seletores.

Eles são usados com frequência no CSS e permitem que as tags que
tenham o seletor inserido recebam a formatação, sendo os mais utilizados o
Class e o ID.

O seletor ID ( ID = identificação ) é único no código. A tag que tiver esse

atributo faz com que apenas ela tenha essa formatação em todo o site. Um
exemplo que auxilia na assimilação de sua função é o CPF, pois ele é um
documento único.

Sua representação no CSS é o jogo da velha.

O seletor Class ( Class = Classe ) permite que a configuração possa ser

inserida em outras tags, desde que ela tenha esse atributo. Ele pode ser
comparado ao café, depositado em uma garrafa e disponível para todos.
Todas as pessoas que tomarem desse café sentirão o mesmo sabor.

Caso queiram um café mais doce ou mais amargo, deveria ser feito um
outro tipo para um determinado público, isso seria a criação de outra classe.
Sua representação no CSS é um ponto ( . ).

Formatação com CSS

64
HTML5 com CSS

Quando usar um ID ou Class?

ID é usado quando a configuração é exclusiva para uma tag.

Quando essa configuração exclusiva necessita expandir para outras

tags, aí é utilizado uma Class.

Exercícios

Esta apostila é sua, pessoal e intransferível. Nela você poderá

responder aos exercícios e fazer anotações onde desejar. Leve-a
para casa, não a devolva e nem repasse para outra pessoa.

Nesse exercício será ensinado a inserção de uma Class ou ID.

1 - Clique logo após a segunda aspa do jogo da velha da segunda lista.

2 - Pressione a barra de espaço e digite: class=”destaque”.

3 - Feito isso, salve o seu código.

Uma curiosidade: No HTML 4.01, a utilização do atributo NAV era uma

identificação na tag de listas ficando da seguinte forma:

65
HTML5 com CSS

Já no HTML5, o atributo NAV foi “promovido” para tag, ficando da seguinte

forma:

Efeitos
Relembrando: No CSS, para definir a formatação no
texto é necessário colocar o nome da tag acompanhado
de chaves ( { } ).

A palavra BODY na estrutura HTML é uma tag, portanto as configurações

ali feitas alteram todo o corpo da página.

E para a criação do menu, por meio do CSS, todos os atributos e tags

deverão ser lembradoeu vou fazs obedecendo uma sequência.

Exercícios

Esta apostila é sua, pessoal e intransferível. Nela você poderá

responder aos exercícios e fazer anotações onde desejar. Leve-a
para casa, não a devolva e nem repasse para outra pessoa.

Nesse exercício será ensinado como formatar a lista para criar um menu.

1 - Clique na aba referente ao CSS, karate.css.

2 - Em seguida, clique depois da chave de fechamento de BODY

( } ) e pressione duas vezes a tecla Enter.

3 - Feito isso, digite NAV {}.

Formatação com CSS

66
HTML5 com CSS

4 - Em seguida, clique entre as chaves de abertura e fechamento e

pressione a tecla Enter duas vezes.

Caso você tenha feito os passos corretamente, você está nessa tela. Se
não, peça ajuda ao seu instrutor.

5 - Feito isso, clique no espaço criado e pressione a tecla TAB.

6 - Com isso, digite: display: block;.

Display permite que o usuário determine a forma como sua página será
gerada. No caso acima, esse block é de bloco. Esse bloco contém um espaço
em branco que não permite outros elementos HTML ao seu lado.

7 - Em seguida, clique depois da chave de fechamento de NAV e

pressione duas vezes a tecla Enter.

8 - Feito isso, digite NAV UL {}.

9 - Em seguida, clique entre as chaves de abertura e fechamento e

pressione a tecla Enter duas vezes.

10 - Feito isso, clique no espaço criado e pressione a tecla TAB.

11 - Com isso, digite: list-style: none;.

List-style é aquela bolinha ou quadradinho que fica na frente da lista,

determinada como none, o CSS retira esses simbolos.

Volte à página 66, e repare na imagem da promoção da tag NAV que a tag
<LI> está dentro da tag <UL> e que está dentro da tag <NAV>.

67
HTML5 com CSS

Reparou no exercício que a primeira tag a ser formatada nesse exercício

foi a <NAV> e, em seguida, a <UL>?

Como foi dito, é necessário ser inserida a formatação em sequência. A

próxima tag a ser formatada é a <LI>.

12 - Clique após a chave de fechamento da estrutura NAV UL, pressione

a tecla Enter 2 vezes e digite os códigos a seguir dessa forma:

NAV UL LI {
float:left;
}

NAV UL LI A {
display: block;
height: 30px;
padding: 0 30px;
font-size: 14px;
line-height: 30px;
text-align: center;
text-decoration: none;
font-weight: bold;
color: #000;
}

Height: Define a altura do elemento;

Font-size: Define o tamanho da fonte / letra;

Line-height: Define a altura da linha;

Text-align: Define o alinhamento do texto;

Text-decoration: Acrescenta um enfeite ao texto;

Font-weight: Define o estilo da fonte, se será mais grosso, fino, inclinado;

Color: Define a cor do texto, por meio do nome ou de código;

Formatação com CSS

68
HTML5 com CSS

Caso você tenha feito os passos corretamente, você está nessa tela. Se
não, peça ajuda ao seu instrutor.

O passo a seguir exige um pouco de atenção pois será inserida a

formatação na tag que contém uma classe.

13 - Clique após a chave de fechamento da estrutura NAV UL LI A,

pressione a tecla Enter 2 vezes e digite:

NAV UL LI A.destaque {
background-color: #34ABE0;
margin-left: 10px;
color: #FFF;
height: 25px;
line-height: 25px;
margin-top: 2px;
}
Background-color: Define a cor de fundo da página;
Margin-left: Define o ajuste da margem esquerda de um elemento;
Margin-top: Define o ajuste da margem superior de um elemento;

Repare que foi declarada todas as tags e um ( .destaque ), isso

simboliza que essa configuração é de uma CLASSE, pois ela vem acompanhada
de um ponto e o seu nome. Caso você queira que um conteúdo tenha essas
configurações, basta colocá-la na mesma classe.

69
HTML5 com CSS

Para finalizar, você aprenderá um comando que faz um efeito

interessante no menu.
14 - Digite:
NAV UL LI A:hover {
color: #04F99A;
}
Hover é um efeito aplicado quando a seta do mouse está em cima do
menu.

15 - Salve o documento CSS e clique na aba index.html.

16 - Em seguida, clique no final da tag de fechamento </NAV>.

17 - Pressione a tecla Enter duas vezes e insira, em cada linha, a tag de

quebra de linha <BR>.

18 - Salve o documento index.html e veja o resultado da alteração feita

no CSS por meio do Internet Explorer.

Caso você tenha feito os passos corretamente, você está nessa tela. Se
não, peça ajuda ao seu instrutor.

19 - Feche seu navegador e, em seguida o NotePad++. E caso o sistema

pergunte se deseja salvar o arquivo, clique em Sim.

Formatação com CSS

70
HTML5 com CSS

Conclusão da aula

Nessa aula você aprendeu que a estrutura do CSS é completamente

diferente do HTML e necessita que seja respeitada uma sequência. Conheceu
o procedimento para a criação de um arquivo CSS e a realizar alterações na
página.

Na próxima aula você aprenderá:

• Revisão prática I

Exercícios de Fixação

Não deixe de fazer os exercícios de fixação da sua apostila

pessoal e intransferível. Responda-os utilizando uma caneta e no final
peça a assinatura do seu instrutor.

1 - Qual a função do CSS?

2 - Digite a tag de ligação do CSS no index.html.

__________________________________________________________
_______________________________________________________________

3 - O que faz o atributo background-color?

__________________________________________________________
_______________________________________________________________

4 - A tag <OL> é responsável por inserir listas não ordenadas,

simbolizadas por figuras geométricas. Essa afirmação é falsa? Porquê?
__________________________________________________________
________________________________________________________________
________________________________________________________________

5 - Qual a função do atributo Text-align?

__________________________________________________________
________________________________________________________________
________________________________________________________________

71
HTML5 com CSS

Sugestão de exercício
Crie um arquivo CSS com o nome de judo e utilize todo o conteúdo
aprendido nessa aula deixando o arquivo judo.html idêntico à página criada
no exercício da apostila.

* Salve o arquivo com o nome de judo.css.

Confira os seguintes arquivos:

• □ index.html
• □ karate.css
• □ judo.html
• □ judo.css

Obs.: Antes de começar a aula 04, será solicitada a prática de uma re-
visão, onde será pedido todo o conteúdo ensinado até o momento. Lembre-o
de levar o arquivo fitness.txt que está na pasta C:\Praticar\HTML5\Revisão_
Prática_I para que ele possa fazer os exercícios.

___________________
Instrutor

Formatação com CSS

72
Anotações

Revisão Prática I
Esta revisão abrange:

• Aula 1 - Introdução
• Aula 2 - Iniciando o projeto
• Aula 3 - Formatação com CSS

Faça essa revisão prática com muita atenção, pois esse arquivo será
utilizado em exercícios futuros.

Exercícios

Esta apostila é sua, pessoal e intransferível. Nela você poderá

responder aos exercícios e fazer anotações onde desejar. Leve-a
para casa, não a devolva e nem repasse para outra pessoa.

Obs.: Caso você tenha digitado os valores semelhantes aos da apostila

e sua página esteja diferente, ajuste os valores manualmente do CSS pois
eles podem variar.
1 - Abra a pasta Academia.

2 - Depois de aberta a pasta, crie um arquivo chamado fitness.html.

3 - Abra-o por meio do Notepad++.

4 - Crie a estrutura base com as tags:

<DOCTYPE>, <HTML>, <HEAD>, <META CHARSET=”ANSI”>, <TITLE>
e <BODY>.

5 - Dê o nome do título de: Academia Corpo Bom - Fitness.

75
HTML5 com CSS

6 - Minimize todas as telas até chegar a área de trabalho e dê um clique

duplo em Computador.

7- Feito isso, dê um clique duplo em Disco Local ( C: ).

8 - Dentre tantas pastas, localize a pasta Praticar e dê um clique duplo.

9 - Em seguida, localize a pasta Revisão prática I dentro de HTML 5 e

dê um clique duplo.

10 - Abra o arquivo fitness.txt.

11 - Copie todo o texto e cole entre as tag’s <BODY>.

12 - Clique depois da letra L, da tag <HTML>, pressione a tecla de espaço

e digite lang=”PT-BR”, ficando dessa forma: <HTML lang=”PT-BR”>.

13 - Coloque o título Fitness entre a tag <HEADER> / </HEADER>.

14 - Em seguida, coloque o mesmo título entre as tags <H1> / </H1>.

Revisão Prática I
76
HTML5 com CSS

15 - Depois de inserido o título nas tags <HEADER> e <H1>, coloque essas

palavras do texto, em sequência, na tag Negrito.

* “estar em boa forma física”

* prática de atividade física
* bom condicionamento físico
* bem estar físico e mental
* “fit”
* “ness”
* “happiness”
* “felicidade”
* resistência ou condição do corpo
* todas as atividades do dia a dia
* saudável
* “aptidão”
* 24 horas / Corujão

17 - Coloque essas palavras na tag Itálico ( <I> / </I> ). Quando terminar,

salve o documento.
* Fitness (parágrafo)
* hapiness
* fitness
* fitness

77
HTML5 com CSS

18 - Clique no menu Executar e escolha a opção Launch in IE.

Repare que todo o texto está “junto”, é necessário separar o texto em

parágrafos.

19 - Insira a tag de parágrafo <P> nesses trechos do texto:

* <P>Fitness é uma... físico e mental</B>. </P>
* <P>A palavra é formada... s <B>”felicidade”</B>). </P>
* <P>Portanto, fitness... <B>saudável</B>. </P>
* <P>O termo fitness... aos seus descendentes. </P>

20 - Insira a tag de quebra <BR> nesses trechos do texto:

* Título: <BR>Fitness
* Logo abaixo do Fitness ( <BR><BR> )
* físico e mental</B>. </P><BR>
* significa <B>”felicidade”</B>). </P><BR>
* <B>saudável</B>. </P><BR>
* aos seus descendentes. </P><BR>

Revisão Prática I
78
HTML5 com CSS

21 - Localize a pasta Academia, dê um clique duplo na pasta CSS.

22 - Crie um arquivo CSS chamado fitness.css.

23 - Clique com o botão direito do mouse no arquivo recém criado e

escolha a opção Edit with NotePad++.

24 - Clique na aba fitness.html.

25 - Faça a ligação do arquivo CSS com o fitness.html. Caso você não

se lembre ele fica abaixo da tag <META CHARSET =”ANSI”>.

26 - Depois da ligação do arquivo CSS com o HTML, clique na aba

fitness.css.
27 - Digite:
*{
margin: 0;
padding: 0;
}

Lembre-se que a estrutura de código do CSS é diferente em relação

ao HTML.

28 - Insira essas linhas de código para formatar apenas BODY, como no

passo 27:
margin: 0 auto;
padding: 30px 0;
width: 1000px;
font: 20px Tahoma;
background-color: #AAFF11;

29 - Volte ao código HTML, clique no final da tag de abertura <BODY>,

pressione a tecla Enter e crie uma lista não ordenada desses itens:
* Página Inicial
* Karatê Kyoukugen-Ken
* Judô
* Fitness

79
HTML5 com CSS

30- Identifique a lista Fitness como classe dando o nome de “destacado”.

31 - Feito isso, volte para o documento fitness.css e clique no final da

chave de fechamento do BODY.

32 - Formate a tag NAV utilizando o código: “display: block;”.

33 - Formate a tag NAV UL utilizando o código: “list-style: none;”.

34 - Formate a tag NAV UL LI utilizando o código: “float: left;”.

36 - Aplique essa configuração para a classe destacado, inserida no

HTML:
* background-color: #34ABE0;
* margin-left: 10px;
* color: #FFF;
* height: 25px;
* line-height: 25px;
* margin-top: 2px;

Revisão Prática I
80
HTML5 com CSS

37 - Para finalizar, aplique o efeito HOVER no menu criado utilizando esse

código: “color: #FF33FF;”.

38 - Salve seus documentos ( HTML e CSS ).

39 - Clique na aba HTML e execute o código analisando a página no

navegador Internet Explorer.

40 - Feche o navegador e o programa NotePad++.

Confira os seguintes arquivos:

• □ fitness.html
• □ fitness.css
• □ fitness.txt ( Pasta praticar )

___________________
Instrutor

81
Anotações

Aula 4 - Cabeçalho e rodapé

Conteúdo:
• Criando um artigo
• Mídia
• Tags Aside, Div e Section

Criando um artigo

A palavra Artigo contém diversas definições, dentre elas tem uma que
se encaixa ao que se refere a páginas virtuais.

Segundo o site significados.com.br, em jornalismo é considerado um ar-

tigo uma publicação escrita para um jornal ou uma revista (ou mesmo para ser
veiculada por meio do rádio ou televisão), e que contenha a opinião do autor
sobre um tema específico. Os artigos de jornais impressos geralmente são
escritos por autores convidados para comentarem sobre um determinado tema.

Os artigos são divididos em três partes:

A primeira parte do artigo é separada para o título, data de postagem

e, em algumas situações, o nome do autor. Essa parte chama-se Cabeçalho.

83
HTML5 com CSS

A segunda parte do artigo é separada para o conteúdo. Todo o assunto

pode ser texto, figura ou texto e figura.
A terceira e última parte é separada para a “assinatura do artigo”, po-
dendo reservar um espaço para links ou contato. Essa parte chama-se Rodapé.

O conteúdo gerado nas páginas virtuais são feitos seguindo o estilo dos
jornais, contendo um título, data de postagem, uma imagem para ilustrar o
texto e o conteúdo em si.

E no HTML? Quais são as tags que separam o texto em cabeçalho,

conteúdo e rodapé?

<ARTICLE></ARTICLE>: Essa tag é responsável pela criação do ar-

tigo. No site ela será sempre para inserir um conteúdo, tornando o texto
independente.

<HEADER></HEADER>: Essa tag, que já é conhecida, é responsável

pela criação do cabeçalho do texto.

<TIME></TIME>: Essa tag é responsável por codificar as datas e horários

de forma legível para o sistema, no caso o HTML.

<ADDRESS></ADDRESS>: A tag Address é muito útil, pois ela será

responsável por apresentar as informações do contato (proprietário ou
autor do texto).

<FOOTER></FOOTER>: Por fim, essa tag é responsável pelo rodapé

do artigo. Nela pode conter informações como apêndices, termos de licença,
índices ou encerramento da seção.

Cabeçalho e rodapé
84
HTML5 com CSS

Exercícios

Esta apostila é sua, pessoal e intransferível. Nela você poderá

responder aos exercícios e fazer anotações onde desejar. Leve-a
para casa, não a devolva e nem repasse para outra pessoa.

Nesse exercício será inserido as novas tags na página em

desenvolvimento.
Obs.: Caso você tenha digitado os valores semelhantes aos da apostila
e sua página esteja diferente, ajuste os valores manualmente do CSS pois
eles podem variar.

1 - Abra os arquivos index.html e karate.css por meio do NotePad++.

Caso não se lembre, peça ajuda ao seu instrutor.

2 - Caso não esteja ativa, clique na aba index.html.

Para entender a função das novas tags na prática, é necessário a inserção

de um novo texto.

3 - Abra o arquivo Artigo.txt localizado na pasta C:\Praticar\HTML5\

Aula 04.

4 - Selecione todo o texto, clique com o botão direito do mouse no

texto selecionado e escolha a opção Copiar.
5 - Clique no aplicativo NotePad++ já aberto.

6 - Com a aba index.html aberta, localize e clique antes na tag de

abertura Header (<HEADER>) e pressione a tecla Enter 10 vezes.

85
HTML5 com CSS

O que foi feito até o momento foi ajustar a estrutura HTML para receber
o novo conteúdo e as novas tags. Eles serão inseridos antes do texto que
estava anteriormente.

1 - Logo abaixo da tag de quebra de linha <BR>, digite a tag <AR-

TICLE class=”artigo”></ARTICLE>.

2 - Clique no meio das duas tags e pressione a tecla Enter 2 vezes.

3 - Feito isso, clique na linha em branco entre as tags e pressione a

tecla TAB.

Caso você tenha feito os passos corretamente, você chegou nessa tela.

4 - Edite o cabeçalho desse artigo digitando:

<header>
<H1>Exame de graduação!</H1>
<P>Postado em:<time pubdate datetime=”2014-09-29T11:00:26-03:00”>
29 de setembro de 2014</time></P>
<BR>
</header>

<header></header>: Foi criado o cabeçalho com o título “Exame de

graduação” com uma data de postagem.

Cabeçalho e rodapé
86
HTML5 com CSS

<time></time>: A tag Time foi utilizada para determinar o horário em que

foi postado o artigo. Repare que em datetime foi postado a data de trás para
frente, o horário e um -03:00. Essa é a forma que o HTML entende que o artigo foi
postado no dia 29 de setembro de 2014 às 11:00 no horário de Brasília (-03:00).

Mídia

A mídia é uma forma de comunicação em massa, que transmite a

informação por meio de alguns meios como: internet, televisão, jornal, rádio,
dentre outros.

Salvo o rádio, todos os meios de comunicação em massa utilizam de

recursos importantíssimos, que em diversas vezes passam de forma
despercebida: as imagens e os vídeos.

Revistas e jornais utilizam o recurso de imagens para ilustrar o fato,

facilitando o entendimento do conteúdo, exigindo pouco do leitor e
transmitindo apenas o essencial.

87
HTML5 com CSS

Quando eles criam uma matéria, artigo ou reportagem que não faz uso
desses recursos, o texto deve ser mais elaborado e detalhista, fazendo com
que o leitor “imagine” a cena. Esse processo é semelhante ao livro.

A maioria dos sites utilizam-se de artigos para transmitir a sua opinião

sobre algo e, os recursos mais utilizados para ilustrar o texto são as imagens,
vídeos e áudios.

Essas tags são responsáveis por inserir vídeos e imagens:

<FIGURE></FIGURE>: Ela é uma tag nova inserida a partir

do HTML5. Sua função é inserir imagens como: fotos, diagramas,
dentre outros.

<FIGCAPTION></FIGCAPTION>: Essa tag é responsável por

inserir legendas em vídeos ou imagens.

Cabeçalho e rodapé
88
HTML5 com CSS

Para a inserção de vídeos são utilizadas duas tags, pois há duas

situações de inserção.

<IFRAME></IFRAME>: Essa tag é muito interessante, pois

permite que seja inserido vídeos armazenados na internet, como o
Youtube e o Vimeo, por exemplo.

<VIDEO></VIDEO>: Diferente da tag iframe, a tag video

permite que seja inserido vídeos armazenados do seu computador.
Os formatos aceitáveis são: MP4, WebM e Ogg.

Exercícios

Esta apostila é sua, pessoal e intransferível. Nela você poderá

responder aos exercícios e fazer anotações onde desejar. Leve-a
para casa, não a devolva e nem repasse para outra pessoa.

Nesse exercício serão inseridas uma imagem e um vídeo do youtube

falando sobre o Karatê.

1 - Clique após a tag de encerramento </HEADER>, inserido dentro

da tag <ARTICLE>, pressione a tecla Enter e cole o conteúdo copiado do
documento de texto chamado Artigo.

Obs.: Caso tenha perdido a seleção, abra o arquivo Artigo.txt, na pasta

Praticar, copie e cole o texto no local solicitado pelo passo anterior.

2 - Coloque as tags de parágrafo e quebra de linha como na imagem

abaixo:

89
HTML5 com CSS

3 - Depois do primeiro parágrafo, clique após a primeira tag de quebra

de linha e pressione a tecla Enter.

4 - Feito isso, clique na linha inserida.

Para a realização do próximo passo é necessário ter conexão com a
internet. Caso não tenha, pule para o passo nº 14 digitando todo o código.

5 - Abra o navegador Internet Explorer e acesse o site www.youtube.

com.br.
6 - Feito isso, procure o vídeo com o nome Karatê - Técnicas de Defesa
Pessoal.

7 - Localize o vídeo abaixo e clique nele.

8 - Logo abaixo do nome Karatê - Técnicas de Defesa pessoal, clique

no menu Compartilhar.

9 - Clique em Incorporar e, em seguida em Mostrar mais.

Repare que ao clicar em Incorporar, surge abaixo uma linha de código.
Essa linha será inserida no código HTML.

10 - Desmarque a opção “Mostrar vídeos sugeridos quando o vídeo

terminar” e copie todo o código, do <iframe> até a tag de fechamento
</iframe>.

Cabeçalho e rodapé
90
HTML5 com CSS

11 - Feche o navegador aberto com o Youtube e, em seguida, abra o

aplicativo NotePad++ e selecione a aba index.html.

12 - Insira o código copiado entre as tags de quebra de linha.

13 - Esse código gerado pelo youtube está incompleto. Para que o vídeo
seja apresentado de forma correta, é necessário fazer um ajuste. Clique após
a primeira aspa dupla depois do atributo src.

14 - Digite http:, fazendo com que o código apareça dessa forma:

Obs.: Caso o HTTP já esteja inserido, desconsidere o passo 14 e se seguir

os próximos passos e não funcionar, volte ao passo 14 e continue com a aula.

15 - Antes do atributo frameborder, localize o atributo rel=0.

16 - Selecione-o e substitua-o por autoplay=1.

O atributo autoplay faz com que o vídeo inicie de forma automática logo
quando a página é aberta.

17 - Salve o documento e execute a página no navegador Internet

Explorer para ver como está ficando.

Caso o Internet Explorer lhe faça um pedido de permissão de Active X,

aceite ou permita o conteúdo bloqueado.

Até o momento foi inserido um novo conteúdo, utilizando as tags de

parágrafo, quebra de linha para ajustar o texto e a inserção de um vídeo.

18 - Feche o navegador e volte para o NotePad++.

91
HTML5 com CSS

Aprenda a colocar uma legenda para esse vídeo, podendo ser usado
também em imagens.

1 - Clique no final da tag de encerramento do iframe </iframe> e

pressione a tecla Enter.

2 - Feito isso, digite:

<figcaption>Graduação para faixa preta</figcaption>.

3 - Salve o documento e execute a página no navegador Internet

Explorer para ver como está ficando. Em seguida, feche o navegador.

4 - Depois de inserido um vídeo da internet, chegou o momento de

inserir uma imagem no artigo. Após o segundo parágrafo, clique no final da
primeira tag de quebra de linha e pressione a tecla Enter.

5 - Abra o arquivo exame.png localizado na pasta C:\Praticar\HTML5\

Aula 04 e copie.

Cabeçalho e rodapé
92
HTML5 com CSS

6 - Procure a pasta Academia e crie na raiz uma pasta chamada img.

7- Deposite nessa pasta a imagem copiada do passo 5, exame.png.

8 - Clique no aplicativo NotePad++ e selecione a aba index.html.

9 - Na linha inserida, após o segundo parágrafo, entre as tags de

quebra de linha, digite:

<img width=”420” height=”315” src=”img/exame.png” alt=”Amarrando a faixa” />

<figcaption>Estou te esperando...</figcaption>

</figure>

<figure></figure>: Essa tag é responsável por inserir imagens na página,

nesse caso no artigo.

img src=”img/exame.png”: Esse atributo indica o caminho de onde está

a imagem.

alt=”Amarrando a faixa”: Caso a imagem não apareça, surgirá esse

texto no lugar.

10 - Salve o documento e execute a página no navegador Internet

Explorer para ver como está ficando. Em seguida, feche o navegador.

93
HTML5 com CSS

Caso você tenha feito os passos corretamente, você está nessa tela. Se
não, peça ajuda ao seu instrutor.

Tags Aside, Div e Section

Para finalizar essa aula, você aplicará essas três tags, Aside, Div e
Section.

Essas tags serão utilizadas para “estruturar” todo o site e o melhor, serão
grandes “parceiros” do CSS, pois elas facilitarão na formatação e, no HTML,
ajudará a organizar o conteúdo.

Cabeçalho e rodapé
94
HTML5 com CSS

A tag Aside faz parte da categoria de tags de abertura e encerramento,

sua função é inserir um conteúdo, além dos que já existem. Como na figura
acima, esse espaço é reservado para Menu de navegação ou comple-
mento do texto.

Exemplo: Imagine que no lado esquerdo da imagem acima tenha um

artigo falando sobre os mamíferos. A tag <ASIDE></ASIDE> pode conter um
“Você Sabia?”. Você sabia que a baleia é um dos maiores mamíferos do
mundo? Clique aqui para saber mais!

A tag Div faz parte da categoria de tags de abertura e encerramento,

cuja função é criar divisões ou seções. Ela facilita muito o trabalho do CSS
auxiliando na estruturação e formatação da página.

É de costume que, sempre que haja uma tag DIV seja inserida uma tag
de quebra de linha antes da tag de abertura e depois da tag de
encerramento (<BR><DIV></DIV></BR>).

95
HTML5 com CSS

A tag Section faz parte da categoria de tags de abertura e encerramento,

cuja função é marcar as seções de conteúdo em um documento, como
cabeçalhos, capítulos, rodapés ou em diversas seções da página.

Percebeu como essas tags são semelhantes? Porém, cada uma tem uma
função importante.

A tag Aside: é própria para peças de informação que está vinculado

com a informação principal, ou até um novo menu de navegação.

A tag DIV: é própria para fazer agrupamento de uma área de conteúdo,

que será muito utilizado pelo CSS.

A tag Section: é própria para criar áreas de funcionalidades distintas

em seções diferentes.

Exercícios

Esta apostila é sua, pessoal e intransferível. Nela você poderá

responder aos exercícios e fazer anotações onde desejar. Leve-a
para casa, não a devolva e nem repasse para outra pessoa.

Nesse exercício serão inseridas as tags Aside, Div e Section.

1 - Com o NotePad++ aberto, vá até a aba Index, clique antes da tag de

abertura Article e pressione a tecla Enter.

Cabeçalho e rodapé
96
HTML5 com CSS

2 - Clique entre as tags <BR> e <ARTICLE>, digite a tag DIV

acompanhada de uma classe chamada graduação. Digite:

3 - Clique após a tag de encerramento </ARTICLE>, pressione a tecla

Enter e digite a tag de encerramento </DIV>.

Até o momento não foi feito nada demais, apenas a inserção da tag Div
e uma classe para ela. Por enquanto a deixaremos de lado para a inserção de
mais uma tag.

1 - Clique após a tag de encerramento </ARTICLE>, pressione a tecla

Enter.
2 - Digite a tag: <ASIDE class=”nova_arte”></ASIDE>.

3 - Clique entre as duas tags e pressione a tecla Enter duas vezes.

4 - Feito isso, clique na linha inserida e pressione a tecla TAB.

5 - Digite a tag: <SECTION></SECTION>.

6 - Clique entre as duas tags e pressione a tecla Enter duas vezes.

7 - Feito isso, clique na linha inserida e pressione a tecla TAB.

97
HTML5 com CSS

8 - Digite:

<ul>
<h1>Campeonatos e graduações</h1>
<li><a href=”#”>Campeonato no Japão: Time Kyoukugen-ken</a></li>
<li><a href=”#”>Campeonato nos EUA: Time Kyoukugen-ken</a></li>
<li><a href=”#”>Graduação: Faixas Branca e Azul (2013)</a></li>
<li><a href=”#”>Graduação: Faixas Marrom e Preta (2011)</a></li>
</ul>

Até o momento foi inserida a tag Div e uma classe para ela e criou a tag
Aside, denominando um conteúdo paralelo ao principal, mas de mesmo foco.

9 - Salve seu documento e execute essa página por meio do menu

executar, utilizando o Internet Explorer para ver como está ficando. Em seguida,
feche o navegador.

Para finalizar a parte do HTML, você irá inserir a tag restante dessa aula,
Section.
1 - Clique após a tag de encerramento </ASIDE>, pressione a tecla
Enter.
2 - Digite a tag: <FOOTER></FOOTER>.

3 - Clique entre as duas tags e pressione a tecla Enter duas vezes.

4 - Feito isso, clique na linha inserida e pressione a tecla TAB.

Cabeçalho e rodapé
98
HTML5 com CSS

5 - Digite a tag: <SECTION class=”nova_arte”></SECTION>.

6 - Clique entre as duas tags e pressione a tecla Enter duas vezes.

7 - Feito isso, clique na linha inserida e pressione a tecla TAB.

8 - Digite:
<H1>Futuras artes marciais</H1>
<UL class=”marcacao”>
<LI><a href=”#”>Muay Thai</a></LI>
<LI><a href=”#”>Taekwondo</a></LI>
<LI><a href=”#”>Boxe</a></LI>
<LI><a href=”#”>Boxe (Para fins estéticos)</a></LI>
</UL>
<BR>
<BR>
Caso tenha feito os passos corretamente, seu código ficou dessa forma:

9 - Salve seu documento e execute essa página por meio do menu

executar, utilizando o Internet Explorer para ver como está ficando. Em seguida,
feche o navegador.

Muito bem! Você conheceu e aprendeu a utilizar muitas tags nessa

aula: Article, Time, Address, Footer, Figure, Figcaption, Iframe, Video, Aside,
Div e Section.

Todas essas tags foram utilizadas na estrutura HTML. Entretanto, todo

esse trabalho feito precisa ser formatado. É hora de partir para o CSS!

Obs.: Caso você tenha digitado os valores semelhantes aos da apostila

e sua página esteja diferente, ajuste os valores manualmente do CSS pois
eles podem variar.

99
HTML5 com CSS

1 - Abra no NotePad++ o arquivo karate.css.

2 - Clique após a chave de encerramento dessa função e pressione a

tecla Enter duas vezes.
NAV UL LI A:hover {
color: #04f99a;
}
3 - Feito isso, digite:
DIV.graduação{
width: 940px;
height: 1150px;
}

Nesse momento foi denominado que o tamanho do espaço referente ao

artigo é de 940px de largura e 1150px de altura.

4 - Clique após a chave de encerramento DIV.graduação e pressione a

tecla Enter duas vezes.

5 - Na sequência digite:
ARTICLE.artigo{
width: 700px;
float: left;
}

ARTICLE HEADER H1 {
text-align: justify;
}

Essa formatação é referente ao conteúdo que está envolvido na tag

ARTICLE, onde seleciona dos 940px do DIV, 700px para a inserção do artigo,
e o alinhamento do seu texto será justificado.

6 - Clique após a chave de encerramento ARTICLE HEADER H1 e

pressione a tecla Enter duas vezes.

Cabeçalho e rodapé
100
HTML5 com CSS

7 - Feito isso, digite nessa sequência:

ASIDE.nova_arte{ Lembra que foi definido que a largura

width: 240px; do artigo seria de 940px e que 700px teria
float: right; sido locado pelo Article? Pois bem, o ASIDE,
padding-top: 85px; nessa situação recruta os 240px restantes.
}

ASIDE UL { Aquelas bolinhas que denominam uma

list-style: none; lista somem com a opção list-style: none;.
}

ASIDE SECTION UL H1{

Aqui são especificados a margem
margin-bottom: 10px;
inferior e o tamanho do texto de 16px.
font-size: 16px;
}

ASIDE SECTION UL LI{ Aqui são especificados a margem

margin-left: 20px; esquerda e o tamanho do texto de 18px.
font-size: 18px;
}

8 - Clique após a chave de encerramento ASIDE SECTION UL LI e

pressione a tecla Enter duas vezes.

9 - Digite esse código em sequência:

FOOTER SECTION.nova_arte{
width: 240px;
Esse é um espaço de 240px
float: right;
usado para o rodapé do artigo.
padding-top: 47px;
margin-bottom: 75%;
}

FOOTER SECTION H1{ Aqui são especificados a margem

margin-bottom: 10px; inferior e o tamanho do texto de 16px.
font-size: 16px;
}

101
HTML5 com CSS
FOOTER SECTION UL LI{
margin-left: 20px; Aqui são especificados a margem
font-size: 18px; esquerda e o tamanho do texto de 18px.
}

10 - Clique após a chave de encerramento FOOTER SECTION UL LI e

pressione a tecla Enter duas vezes.

11 - Digite:
UL.marcacao{ Aquelas bolinhas que denominam uma
list-style: none; lista somem com a opção list-style: none;.
}

Está sendo denominado uma margem

FIGURE{
a esquerda de 12% para tudo o que estiver na
margin-left: 12%;
tag <FIGURE> no HTML.
}

FIGURE FIGCAPTION{ A legenda inserida na imagem

font-size: 12px; (FIGCAPTION) terá um tamanho nº 12 e uma
margin-left: 50%; margem a esquerda de 50%.
}

12 - Feito isso, clique após a chave de encerramento FIGURE

FIGCAPTION e pressione a tecla Enter duas vezes.

13 - Digite esse código em sequência:

IFRAME {
margin-left: 15%; Estão sendo configuradas três margens
margin-top: 10px; (esquerda, superior e inferior) para o vídeo
margin-bottom: 10px; inserido na página.
}

FIGCAPTION{ A legenda inserida no vídeo

font-size: 12px; (FIGCAPTION) terá um tamanho nº 12 e uma
margin-left: 50%; margem a esquerda de 50%.
}

Cabeçalho e rodapé
102
HTML5 com CSS

14 - Antes de salvar o arquivo karate.css, realize essas alterações nas

configurações já existentes:

BODY {
width: 1150px;
}

DIV.graduação{
width: 1150px;
height: 1150px;
}

ASIDE.nova_arte{
width: 420px;
}

FOOTER SECTION.nova_arte{
width: 420px;
}

NAV, HEADER, SECTION, ARTICLE, FOOTER, ASIDE {

display: block;
}

15 - Salve o documento karate.css, clique na aba index.html e execute

a página no Internet Explorer.

103
HTML5 com CSS

16 - Feche o navegador Internet Explorer e o programa NotePad++. E

caso o programa pergunte se deseja salvar os arquivos, clique em Sim.

Conclusão da aula

Nessa aula você conheceu as tags Aside, Div e Section, as três têm
a função de dar “suporte” ao conteúdo principal de uma página. Apesar de
serem semelhantes desempenham funções importantes. Conheceu as tags de
inserção de vídeos e o que é necessário para criar um artigo e diversas tags
como: Article, Header, Time, Address, Footer, Figure e Figcaption.

Na próxima aula você aprenderá:

• Formulário
• Tipos de CSS
• Seletores - Parte I
• Seletores - Parte II

Exercícios de Fixação

Não deixe de fazer os exercícios de fixação da sua apostila

pessoal e intransferível. Responda-os utilizando uma caneta e no final
peça a assinatura do seu instrutor.

1 - Quais são as tags necessárias para configurar apenas o Cabeçalho

e Rodapé? Elas são tags de abertura e encerramento?
__________________________________________________________
________________________________________________________________
________________________________________________________________

2 - Descreva a forma ideal do HTML de “entender” uma data inserida

em um artigo.
__________________________________________________________
________________________________________________________________
________________________________________________________________

3 - Qual a função de imagens e/ou vídeos em um artigo?

__________________________________________________________
_________________________________________________________________
________________________________________________________________

Cabeçalho e rodapé
104
HTML5 com CSS

4 - Cite a diferença entre as tags <iframe> e <video>.

__________________________________________________________
________________________________________________________________
________________________________________________________________

5 - Explique de forma simples o que faz a tag Aside.

__________________________________________________________
________________________________________________________________
________________________________________________________________

Sugestão de exercício
Abra o arquivo judo.html, inclua um novo artigo breve falando sobre a
importância do Judô nas escolas, incluindo um vídeo, uma imagem, legenda
para ambas e o arquivo judo.css. Formate essa página como a do exercício
da apostila (karate.css). Insira um menu lateral criando links para as escolas
cadastradas na academia (nomes fictícios) e graduações de novas faixas
(Iniciante e Avançado) / links não funcionais.

Confira os seguintes arquivos:

• □ judo.html
• □ judo.css
• □ index.html
• □ karate.css
• □ Artigo.txt

___________________
Instrutor

105
Anotações

Aula 5 - Formulário e seletores

Conteúdo:

• Formulário
• Tipos de CSS
• Seletores - parte I
• Seletores - parte II
Formulário
Só para relembrar: Uma imagem auxilia na interpretação do texto, isso
significa que o texto necessita ser bem elaborado e fazer com que a figura tenha
uma função.

Quando o texto não tem uma imagem ele precisa ser, além de muito
bem elaborado, apresentado com o máximo possível de detalhes, pois farão a
“função da imagem”. Isso faz com que o leitor “viaje e imagine” a versão do
fato em sua concepção, semelhante a ouvir uma história no rádio.

E qual a forma mais rápida de entrar em contato com o proprietário?

Geralmente é feita por uma opção no site chamada de Fale Conosco.

O Fale conosco é um meio de comunicação

direto com o proprietário ou empresa, onde geralmente é
preenchido alguns dados e, logo em seguida, enviada as
reclamações, sugestões ou elogios.

107
HTML5 com CSS

O fale conosco é uma espécie de formulário, onde são inseridos caixas

de texto, botões de opção e outros tipos de botões.

Exercícios

Esta apostila é sua, pessoal e intransferível. Nela você poderá

responder aos exercícios e fazer anotações onde desejar. Leve-a
para casa, não a devolva e nem repasse para outra pessoa.

Nesse exercício será ensinado como inserir, no artigo da aula passada, um

formulário dando a oportunidade para os alunos ou clientes escreverem suas
reclamações, elogios ou críticas.

1 - Abra os arquivos index.html e karate.css por meio do NotePad++.

Caso não se lembre, peça ajuda ao seu instrutor.

2 - Caso não esteja ativa, clique na aba index.html.

3 - Localize no código esse bloco:

<SECTION class=”nova_arte”>
<H1>Futuras artes marciais</H1>
<UL class=”marcacao”>
<LI><a href=”#”>Muay Thai</a></LI>
<LI><a href=”#”>Taekwondo</a></LI>
<LI><a href=”#”>Boxe</a></LI>
<LI><a href=”#”>Boxe (Para fins estéticos)</a></LI>
</UL>
<BR>
<BR>
</SECTION>
</FOOTER>
</DIV>
e clique logo após a última tag acima (</DIV>).

4 - Feito isso, pressione a tecla Enter duas vezes.

5 - Em seguida, pressione uma vez a tecla para cima do teclado, movendo

o cursor para a primeira linha inserida e coloque uma tag de quebra de linha
para cada linha inserida (<BR>).

Formulário e seletores
108
HTML5 com CSS

Caso tenha feito os passos corretamente, seu código ficou dessa forma:

6 - Aproveitando que o cursor está apontado para o final da tag <BR>,

pressione a tecla Enter para inserir uma linha.

7 - Pressione a tecla tab.

Até o momento foi preparado o espaço na estrutura HTML para receber

o formulário. O maior trabalho nessa criação é apenas no primeiro campo, pois
para fazer os outros o procedimento é mais dinâmico.

1 - A tag para a criação do formulário chama-se FORM. Digite <FORM>

</FORM>.

2 - Dê um clique entre as tags <FORM></FORM> e pressione a tecla

Enter duas vezes.

3 - A primeira coisa a se fazer, após inserir as tags de formulário, é dar uma

função a ele. Para isso, clique depois da letra M da tag de abertura <FORM>.

4 - Em seguida digite: action=”programacao_php.php” method=”post”.

O atributo action=”programacao_php.php” determina qual

procedimento será utilizado para fazer com que os dados digitados cheguem
até o proprietário. Nessa situação está sendo usada uma programação em
PHP para realizar essa transferência. O atributo method=”post” envia os
dados do formulário em uma transação por HTTP.

109
HTML5 com CSS

Feito isso, o formulário já está criado, eis

o momento de inserir os campos para o usuário
digitar os dados.

1 - Clique na linha inserida entre as tags <FORM> </FORM> e

pressione a tecla Tab.
2 - Após o procedimento acima, digite:

LABEL define um título para um elemento. INPUT especifica um campo

de entrada onde o usuário pode inserir dados.

3 - Pressione a tecla Enter duas vezes. Depois de ter pressionado,

copie as duas linhas que você criou e cole logo abaixo duas vezes como na
imagem abaixo.

4 - Nos dois labels colados, troque por esses nomes:

for=”nome” / for=”graduacao”
Nome: / Graduação:
id=”nome” / id=”graduacao”
name=”nome” / name=”graduacao”

for=”nome” / for=”email”
Nome: / E-Mail:
id=”nome” / id=”email”
name=”nome” / name=”email”

Formulário e seletores
110
HTML5 com CSS

Caso tenha feito os passos corretamente, seu código ficou dessa forma:

5 - Para finalizar essa parte, insira mais uma quebra de linha no final do
último required.

<input id=”email” name=”email” type=”text” required> <BR><BR>

6 - Execute a página por meio do Internet Explorer para ver como ficou
a inserção dos campos Nome, Graduação e E-mail.

Até o momento foram inseridos três campos simples onde receberão

dados. Falta agora o campo para o usuário escrever o que ele quer e enviar
para o proprietário.

1 - Feche o navegador e volte para o NotePad++.

2 - Em seguida, clique após a segunda tag de quebra de linha e

pressione a tecla Enter duas vezes.

3 - Digite:
<TEXTAREA name=”assunto” id=”assunto” value=””></TEXTAREA><BR><BR>
<input id=”botao” type=”submit” value=”$$Enviar$$“>

111
HTML5 com CSS

A tag <TEXTAREA> define um controle de entrada de muitos caracteres,

ou seja, um campo próprio para digitar um grande texto. Name é o nome dado
a caixa, id é a identificação dele, onde recebe o nome assunto e o atributo value
significa o valor que está na caixa de início. Nesse caso foram colocadas duas
aspas simbolizando que essa caixa está vazia.
Esse input é diferente dos anteriores, pois ele será responsável pela
criação do botão para enviar. A identificação é botão, type submit significa que
isso é um botão e o value é o que está escrito no botão. Apenas um detalhe,
você reparou que há dois cifrões na esquerda e na direita da palavra Enviar?
Eles correspondem a espaços. Sempre que quiser “falar” que ali tem um espaço,
basta colocar um cifrão.
Obs.: Caso tenha colocado no exercício, retire-os deixando dessa forma
“ Enviar “.

4 - Execute a página por meio do Internet Explorer para ver como ficou.

Esse é o procedimento para a criação de formulários. Foram utilizadas as

tags <FORM>, para criar o formulário, <LABEL>, onde definiu um título para
a caixa de texto, <INPUT> especificando um campo de entrada onde o usuário
insere os dados e a tag <TEXTAREA>, definindo uma caixa de texto para
receber uma grande quantidade de texto. Veja no CSS como será formatado
esse pequeno formulário.

Obs.: Caso você tenha digitado os valores semelhantes aos da apostila

e sua página esteja diferente, ajuste os valores manualmente do CSS, pois
eles podem variar.
1 - Clique na aba Karate.css.

2 - Clique no final da terceira condição do CSS (ASIDE), insira uma vírgula

e digite FORM.

Formulário e seletores
112
HTML5 com CSS

3 - Localize a configuração:

FIGCAPTION{
font-size: 12px;
margin-left: 50%;
}

clique no final da chave e pressione duas vezes a tecla Enter.

4 - Com muita atenção, digite esse código:

FORM LABEL {
font-size: 20px;
}

FORM INPUT{
height: 35px;
font-size: 20px;
margin-bottom: 20px;
margin-left: 43px;
}

FORM INPUT#graduacao{
margin-left: 0px;
}

FORM INPUT#email{
margin-left: 40px;
}

FORM INPUT#botao{
font-size: 25px;
padding: auto;
}

FORM TEXTAREA{
width: 700px;
height: 100px;
font-size: 25px;
}

113
HTML5 com CSS

O que foi utilizado nessas configurações não foi nada de diferente do

que já foi apresentado até o momento. Font-size significa o tamanho da letra,
Height significa altura, Margin-bottom acrescenta um espaço abaixo do texto
ou objeto, da mesma forma Margin-left acrescenta um espaço do lado esquerdo.

5 - Salve as alterações e execute a página por meio do Internet Explorer

para ver como ficou.

Caso tenha feito os passos corretamente, seu código levou a esse

resultado:

Tipos de CSS
O que seriam os tipos de CSS? Seriam as formas de inserir essas folhas
de estilo, pois até o momento foi apresentado apenas uma forma.

O arquivo CSS está na pasta referente aos arquivos da página, em

uma pasta chamada CSS, que é acessada por meio da estrutura HTML pela
tag <LINK>.

Essa é a forma mais comum e usada pelos desenvolvedores WEB.

Entretanto, existem mais três formas que podem ser utilizadas como forma
alternativa.

Algumas dessas formas são semelhantes a formas

utilizadas em versões anteriores ao HTML5.

Formulário e seletores
114
HTML5 com CSS
A primeira forma é a externa, a forma mais conhecida utilizando as tags
<LINK> ou <STYLE>.

A segunda e terceira formas são internas e recebem o nome de

folha de estilo interna ou incorporada.

Como já foi dito, a função do CSS é formatar o conteúdo que está inserido
na estrutura HTML. Até o momento foi visto que um arquivo CSS pode conter
uma configuração para uma página inteira, até mesmo para um site inteiro.

A pergunta é: Vale a pena utilizar um arquivo para tudo?

Uma coisa importante para qualquer profissional é criar um padrão de

trabalho, fazendo com que aquilo que esteja fazendo seja rápido, bom e com
qualidade.

Alguns desenvolvedores criaram um padrão interessante que é o uso

de diversos arquivos CSS integrados na estrutura HTML.

Como assim? Diversos arquivos CSS para formatar um site?

Os desenvolvedores criam diversos arquivos com efeitos pré

configurados e, com isso, é dado o nome certo as tags e unido os arquivos
de CSS desejados.

Qual a melhor forma de desenvolver então? Utilizando muitos ou um

arquivo de CSS? Vai depender muito da situação.

115
HTML5 com CSS

Se a página for pequena, que exige poucos efeitos, recursos e se pre-

ocupa mais com o conteúdo do que com o visual, é interessante a utilização de
apenas um arquivo para administrar.

Tem situações em que as páginas são gigantescas, e colocar toda a

formatação em apenas um arquivo “dificulta” na manutenção.

Veja os exemplos de ligação de arquivos CSS em uma estrutura HTML.

<STYLE type =”text/css”>

@import url (“css/estilo.css“);
</STYLE>
Esse é um tipo externo de ligação, pois essa ligação é feita pela linha
@import url.

<STYLE type =”text/css”>

header h1{
color: blue;
}
</STYLE>

Essa é uma forma de importação interna ou incorporada. Ela é utilizada

junto a estrutura HTML por meio da tag <STYLE>.

Formulário e seletores
116
HTML5 com CSS

<HEADER>
<H1 style=”color: green”>HTML5 com CSS</H1>
</HEADER>
Essa é a segunda forma de importação interna. Ela é utilizada junto a
estrutura HTML por meio do atributo STYLE. Repare que a formatação aconteceu
dentro da própria tag <H1>; sendo assim, semelhante à função do seletor ID
(#), sendo exclusiva para essa tag. O nome desse método é INLINE.

Pode acontecer que em uma página tenha mais de uma opção de CSS
(interna e externa) ou duas internas ou duas externas. Como funcionaria?

Existe na estrutura HTML um grau de importância, ou precedência em

relação a isso, pois as condições sobrepõem as anteriores.

A configuração que tem maior precedência é a InLine, aquela que se

encontra dentro da tag e a que tem menor importância é a externa, método
utilizado no curso.

Exercícios

Esta apostila é sua, pessoal e intransferível. Nela você poderá

responder aos exercícios e fazer anotações onde desejar. Leve-a
para casa, não a devolva e nem repasse para outra pessoa.

Nesse exercício será apresentado o emprego das três formas de CSS e

analisado a precedência de cada um.
1 - Acesse a pasta Academia e crie um arquivo chamado teste.html.

2 - Em seguida, acesse a pasta CSS e crie um arquivo chamado

tipos.css.
3 - Depois dos arquivos criados, abra-os no NotePad++.

117
HTML5 com CSS

4 - Clique na aba teste.html e digite, com muita atenção, os códigos a

seguir:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>
Teste com os tipos de CSS
</TITLE>
<LINK href= “css/tipos.css” rel=”stylesheet” type=”text/css” media=”screen”>

<STYLE type=”text/css”>
@import url(“css/tipos.css”);
</STYLE>

<STYLE type=”text/css”>
header h1 {
font-size: 100px;
color:blue;
}
</STYLE>
</HEAD>
<BODY>
<header>
<h1>HTML5 com CSS</h1>
</header>
</BODY>
</HTML>
5 - Clique na aba tipos.css e digite, com muita atenção, os códigos a
seguir:
header h1{
font-size: 50px;
}

header h1 {
color: brown;
}

Formulário e seletores
118
HTML5 com CSS

O que foi feito até o momento? Foi inserido nesse pequeno código as
três formas citadas para a inserção de formatação em CSS. Entretanto foram
colocadas nas configurações cores e tamanhos diferentes para diferenciar o
tipo da inserção, todo esse processo para aprender sobre precedência.
A inserção externa, pelas tags LINK e style @import url estarão
recebendo a cor Marrom.
A inserção interna por meio da tag style header h1 está recebendo a
cor Azul.
A inserção interna InLine, por meio da H1 estará recebendo a cor Verde,
essa configuração será feita dentro de instantes.
6 - Localize esse trecho do código e selecione-o dessa forma:

7 - Clique com o botão direito do mouse sobre essa seleção e escolha

a opção Comentário de documentação.
8 - Salve seu documento e execute a página no Internet Explorer para
ver o que acontece.
Reparou que a cor do texto foi a Vermelha? Isso significa que a
configuração usada está sendo a Externa.
9 - Remova os símbolos  do texto selecionado anteriormente,
comente a inserção externa <LINK> e comente a inserção interna ou incor-
porada <style header h1>.

119
HTML5 com CSS

10 - Salve o documento e execute a página no Internet Explorer.

A cor do texto continuou Vermelha. Isso significa que a configuração

usada ainda está sendo a Externa.

11 - Retire o comentário da inserção interna <style header h1> e

comente as inserções externas <LINK e @import url>.

12 - Salve o documento e execute a página no Internet Explorer.

A cor do texto agora é Azul. Isso significa que a configuração usada

está sendo a Interna.

13 - Comente a inserção interna <style header h1> deixando todas

as opções comentadas.

14 - Localize esse trecho do código e faça essa pequena alteração:

15 - Salve o documento e execute a página no Internet Explorer.

A cor do texto agora é Verde. Isso significa que a configuração usada

está sendo a Interna InLine.

Formulário e seletores
120
HTML5 com CSS

Até o momento você viu que todas as inserções funcionam, incluindo

uma já conhecida e outras novas de forma interna. Veja como funciona o grau
de importância ou precedência.

1 - Remova os símbolos  das inserções anteriores.

<LINK href= “css/tipos.css” rel=”stylesheet” type=”text/css” media=”screen”>

<STYLE type=”text/css”>
@import url(“css/tipos.css”);
</STYLE>

<STYLE type=”text/css”>
header h1 {
font-size: 100px;
color:blue;
}
</STYLE>

</HEAD>
<BODY>
<header>
<h1 style=”color: green”>HTML5 com CSS</h1>
</header>
</BODY>
2 - Salve o documento e execute a página no Internet Explorer.

A cor do texto é Verde. Isso significa que a configuração usada é a

Interna InLine. Conclusão, de todas as inserções ativas, a InLine é a que tem
maior precedência.

3 - Localize esse trecho do código e faça essa pequena alteração:

121
HTML5 com CSS

4 - Salve o documento e execute a página no Internet Explorer.

A cor do texto é Azul. Isso significa que a configuração usada é a
Interna ou incorporada. Conclusão, de todas as inserções ativas a Incorporada
é a que tem maior precedência quando não existe a inserção interna InLine.
5 - Comente a inserção Interna ou Incorporada, salve o documento e
execute a página no Internet Explorer.
A cor do texto é Vermelha. Isso significa que a configuração usada
é a Externa.
6 - Feche as abas teste.html e tipos.css mantendo o NotePad++ ainda
aberto.
Antes de mudar de assunto, é necessário apresentar um recurso muito
legal e fácil de usar, trocar essa cor amarela “enjoativa, ufa!” por uma imagem
e separar os textos por meio de bordas, não o deixando-o solto como está.
Exercícios

Esta apostila é sua, pessoal e intransferível. Nela você poderá

responder aos exercícios e fazer anotações onde desejar. Leve-a
para casa, não a devolva e nem repasse para outra pessoa.

Nesse exercício será ensinado a trocar uma cor abstrata de fundo por
uma imagem e a colocar os conteúdos em bordas.

Obs.: Caso você tenha digitado os valores semelhantes aos da apostila

e sua página esteja diferente, ajuste os valores manualmente do CSS, pois
eles podem variar.

1 - Vá até a pasta Praticar do seu curso ( C:\Praticar\HTML5 ), localize

a pasta Aula 05 e dê um duplo clique.

2 - Copie a imagem Karate2.png e cole na pasta img referente a pasta

da tua página.

3 - Clique novamente no NotePad++ e, em seguida, na aba karate.css.

4 - Feito isso, localize a configuração referente ao BODY.

As alterações citadas no enunciado do exercício serão realizadas no CSS

e, no HTML serão inseridas algumas classes e id’s.

Formulário e seletores
122
HTML5 com CSS

5 - Repare que a configuração atual é essa:

BODY {
margin:0 auto;
padding: 25px 0;
width: 1150px;
font: 20px Tahoma;
background-color: #FFFF33;
}

altere para essa:

BODY {
margin: 0 auto;
padding: 25px 0;
width: 1150px;
height: 970px;
font: 20px Tahoma;
background:url(‘../img/karate2.png’) no-repeat fixed;
}

Todos os recursos são conhecidos, com exceção do background (plano

de fundo), pois ele é específico para inserção de imagens, e o background-
color para a inserção de cores.
6 - Localize a configuração:

NAV UL LI A.destaque {
background-color: #34ABE0;
margin-left: 10px;
color: #FFF;
height: 25px;
line-height: 25px;
margin-top: 2px;
}

clique após a chave de encerramento dessa configuração e pressione

a tecla Enter duas vezes.

123
HTML5 com CSS
7 - Digite esses códigos, um grupo abaixo do outro:

SECTION.borda2{ SECTION#borda2{
padding-bottom: 2%; padding-bottom: 2%;
padding-left: 2%; padding-left: 2%;
padding-top: 2%; padding-top: 2%;
padding-right: 2%; padding-right: 2%;
background-color: #ededed; background-color: #ededed;
text-align: justify; text-align: justify;
color: #000; color: #000;
border-style: double; border-style: double;
opacity:0.6; border-bottom-color: #ededed;
} opacity:0.6;
}

SECTION#borda3{
margin-top: 79px;
margin-bottom: 20px;
padding-bottom: 2%;
padding-left: 2%;
padding-right: 2%;
background-color: #ededed;
text-align: justify;
color: #000;
border-top-color: #ededed;
border-style: double;
width: 648px;
opacity:0.6;
}

Essas configurações são respectivas a dois seletores (1 Class e 2 ID’s),

onde a maioria dos códigos são conhecidos.

Border-style define o estilo que terá a borda, ou seja, no exemplo aponta

como uma borda dupla.

Opacity possibilita “clarear” a imagem, quanto maior o número mais

clara fica a imagem.

Formulário e seletores
124
HTML5 com CSS

Border-bottom-color define a cor da linha da borda. Nessa situação estão

sendo apontadas o “teto” (top) e o “chão” (bottom) para receber uma outra
cor, mas isso se aplica também para left (esquerda) e right (direita).

8 - Feito isso, localize a configuração referente ao FORM TEXTAREA.

9 - Repare que a configuração atual é essa:

FORM TEXTAREA{
width: 700px;
height: 100px;
font-size: 25px;
}

altere para essa:

FORM TEXTAREA{
width: 660px;
height: 100px;
font-size: 25px;
}

10 - Salve o documento CSS e clique na aba index.html.

Para finalizar o exercício, basta inserir as classes e as identificações

no código HTML para fazer valer as configurações digitadas até o momento.

1 - Localize essa parte no código e insira essa nova tag acompanhada

por uma identificação.

Será utilizado no código a tag Section para a inserção das classes e

identificações.

125
HTML5 com CSS

2 - Localize essa parte no código e insira a tag de fechamento do

Section.

3 - Feito isso, localize essa parte no código e insira mais uma tag
Section com a identificação de borda3.

4 - Em seguida, insira a tag de fechamento do Section nesse ponto.

5 - Para finalizar encontre essa parte no código e insira a tag Section

com a classe borda2.

6 - Feito isso, insira a tag de fechamento do Section nesse ponto.

Formulário e seletores
126
HTML5 com CSS

7 - Salve o documento e execute a página pelo Internet Explorer.

Seletores - Parte I
Para relembrar, os seletores (Class e ID) são grandes parceiros do CSS,
pois por meio deles é possível formatar páginas sem dificuldades.

E para declarar esses seletores no CSS é necessário seguir algumas

regras.

Por exemplo, nas linguagens de programação é aconselhável que, ao

declarar um identificador, use apenas letras minúsculas, sem espaços e
acentos.

Um identificador na criação de um sistema é responsável por receber

um valor, dado ou resultado de uma operação.

Um exemplo prático é o da criação do formulário, onde um identificador

chamado nome recebe o que foi digitado na caixa de texto nome, da mesma
forma se estende para o email e graduação.

nome := conteúdo da caixa de texto nome;

email := conteúdo da caixa de texto email;
graduacao := conteúdo da caixa de texto graduação;

127
HTML5 com CSS

Esses nomes: nome, email e graduação, no CSS, seria o nome das

classes e id’s criados no HTML. E para a criação dos nomes de uma Class ou
ID pode ser usado:

Caracteres alfa numérico ( a-z, A-Z, 0-9 );

Hifen ( - );

Essas são as opções que devem ser evitadas:

Início com hífen ( DIV.-Nome {} );

Início com números ( DIV.3Nome {} );

Início com símbolos ou acentos ( DIV.§Nome {} );

Início com underline ( DIV._Nome {} );

Espaços ( DIV. Nome );

Seguindo essas regras é possível desenvolver qualquer página

utilizando um padrão universal, fazendo com que a manutenção seja facilitada.

Formulário e seletores
128
HTML5 com CSS

Um recurso interessante para o desenvolvimento de sites é a Árvore e

Ancestrabilidade.

No desenvolvimento de sistemas, é utilizado um recurso chamado UML.

Como mostra a figura abaixo, o UML descreve quais são os campos,

seus tipos e qual está “ligado” com o outro por meio de relacionamentos.

Da mesma forma é criada a árvore de tags, auxiliando o desenvolvedor

a saber se realmente o efeito está sendo utilizado de forma correta.

129
HTML5 com CSS

Seletores - Parte II
Para formatação do conteúdo, o mesmo deve estar entre tag‘s, como já
foi visto.

Haverá situações em que para formatar um determinado conteúdo é

necessário a criação de várias tags para o mesmo conteúdo. O nome dessa
possível situação chama-se Descendência.

Essa situação traz dicas de um bolo. Esse conteúdo foi repartido em três
tags e formatado por dois seletores.

A SPAN class=”final” é descendente da SPAN id=”recheio” que é

descendente da SPAN=”cobertura”. No CSS existe a possibilidade de agrupar
esses seletores e dar a eles o mesmo efeito.

Formulário e seletores
130
HTML5 com CSS

Conclusão da aula

Você terminou esse tópico aprendendo que os seletores podem contar

com descendências. Aprendeu quais caracteres podem e não podem ser
utilizados para “declarar” o nome da função no CSS. Conheceu também as
três formas possíveis de inserção do CSS e como criar um formulário web.

Na próxima aula você aprenderá:

• O que é o InkScape?
• Criando um logo com o InkScape
Exercícios de Fixação

Não deixe de fazer os exercícios de fixação da sua apostila

pessoal e intransferível. Responda-os utilizando uma caneta e no final
peça a assinatura do seu instrutor.

1 - Descreva a diferença entre os input’s.

2 - Dê um exemplo de inserção interna InLine de CSS utilizando a cor

Rosa.
__________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________

3 - Qual a função do atributo Opacity?

131
HTML5 com CSS

Sugestão de exercício
Abra o arquivo judo.html e crie um formulário logo abaixo da matéria
inserida no exercício anterior. Coloque os textos da sua página dentro de
bordas e uma imagem de fundo de toda a página, como feito no Karatê. Tire
o exercício da apostila como modelo.

Confira os seguintes arquivos:

• □ index.html
• □ karate.css
• □ teste.html
• □ tipos.css
• □ karate2.png

___________________
Instrutor

Formulário e seletores
132
Anotações

Aula 6 - Criando um logo

Conteúdo:

• O que é o InkScape?
• Criando um logo com o InkScape

O que é o InkScape?

Na aula anterior você aprendeu que os seletores podem contar com

descendências. Aprendeu quais caracteres podem e não podem ser utilizados
para “declarar” o nome da função no CSS. Conheceu também as três formas
possíveis de inserção do CSS e como criar um formulário web.

Nessa aula você conhecerá um novo software onde, por meio dele, será
possível a criação da logomarca do seu site.

O software utilizado chama-se InkScape. Ele é

um software livre que utiliza como base uma se-
quência de pontos delimitando suas coordenadas (X,
Y) chamando de Vetor, método vetorial.

Software livre, segundo a definição criada pela Free Software Foundation

é qualquer programa de computador que pode ser usado, copiado, estudado,
modificado e redistribuído com algumas restrições. A liberdade de tais diretrizes
é central ao conceito, o qual se opõe ao conceito de software proprietário, mas
não ao software que é vendido almejando lucro (software comercial). A maneira
usual de distribuição de software livre é anexar a este uma licença de software
livre, e tornar o código fonte do programa disponível.
(http://www.softwarelivre.gov.br/tire-suas-duvidas/o-que-e-software-livre)

Resumindo, o software livre é um sistema que contém a sua estrutura

aberta para qualquer usuário. Toda novidade feita no software é distribuída de
forma gratuita, podendo ser modificado por qualquer pessoa.

135
HTML5 com CSS

Esse tipo de software é ideal para desenhos técnicos ou artísticos,

pois necessitam de uma precisão muito alta. Com isso, caso haja um
redimensionamento ou giro, o desenho não perde qualidade.

Componentes da janela principal

Conheça os componentes da janela principal do InkScape.

Barra de menus.

Barra de comandos.

Barra de controle de ferramentas.

Barra de ferramentas.

Paleta de cores

Barra de status

Criando um logo
136
HTML5 com CSS

Barra de alinhamento

Régua

Área de trabalho

Criando um logo com o InkScape

Apesar do InkScape ser próprio para desenhos artísticos ou técnicos,

que exige bastante de pontos e coordenadas para a perfeição, ele pode ser útil
para a criação de artes menores como a que será criada nessa aula.

Na tela do computador foi demonstrado em um vídeo interativo a criação

de um logo muito simples de uma construtora chamada de teste construções.

Para relembrar, nesse vídeo foi inserido a figura de uma casa e foi
agregado a esse desenho o texto “teste construções” e exportado logo em
seguida.

O procedimento será o mesmo para a criação do logo para a página da

academia.

137
HTML5 com CSS

Exercícios

Esta apostila é sua, pessoal e intransferível. Nela você poderá

responder aos exercícios e fazer anotações onde desejar. Leve-a
para casa, não a devolva e nem repasse para outra pessoa.

Nesse exercício será criada um logo por meio do aplicativo InkScape

para a página e, em seguida, será inserido.

Obs.: Caso você tenha digitado os valores semelhantes aos da apostila

e sua página esteja diferente, ajuste os valores manualmente do CSS, pois
eles podem variar.

1 - Localize a pasta do HTML5 na pasta Praticar (C:\Praticar\HTML5\

Aula06), acesse a pasta Aula 06 e copie o arquivo logo.png.

2 - Acesse a pasta da sua página, crie uma nova pasta e dê o nome de

Logo.

3 - Dê um clique duplo na pasta criada e cole o arquivo.

4 - Depois de colado o arquivo na pasta Logo, abra o aplicativo InkScape.

5 - Feito isso, ajuste o zoom da área de trabalho para 70% no canto
inferior direito. ( Resolução 1280 X 1024 ).

Obs.: Caso a resolução seja 1024 X 768, insira o valor de 46% ao invés
de 70.
6 - Depois de ajustado a área de trabalho, é o momento de importar o
logo para o palco. Clique no menu File.
7 - Em seguida clique na opção Import.

Criando um logo
138
HTML5 com CSS

8 - Após essa ação será aberta a janela Select file to import. Localize a
pasta Logo, clique na imagem Logo.png e aperte no botão Abrir.

9 - Na próxima janela que abre em seguida, clique em OK.

Muito bem! Até o momento foi ajustada a área de trabalho e importado

o logo da pasta criada no começo do exercício. Nesse momento será ensinado
a ajustar a imagem na área de trabalho e inserir o nome da academia.

1 - Localize essas configurações na parte superior ao palco.

2 - Digite esses valores e compare se o logo ficou como na imagem abaixo:

X = 7,200
Y = 583,500
W = 211,000
H = 166,000

3 - Feito isso, clique na ferramenta para criar e editar caixas de texto.

139
HTML5 com CSS

4 - Desenhe um retângulo ao lado do logo.

5 - Localize essa configuração na parte superior ao palco.

6 - Clique na seta para baixo na caixa referente ao nome da fonte,

nesse caso Airbus Special.

7 - Localize e escolha a fonte Ruach LET.

8 - Depois de escolhida a fonte, digite: Academia Corpo Bom.

9 - Feito isso, selecione o texto e clique na seta para baixo referente

ao tamanho da letra.

10 - Escolha a opção nº 56.

11 - Retire a seleção do texto clicando na primeira ferramenta da barra

de ferramentas.

12 - Localize essas configurações na parte superior da área de trabalho

e digite esses valores:

X = 237
Y = 626
W = 465
H = 53

Criando um logo
140
HTML5 com CSS

Caso tenha feito os passos de forma correta, você chegou nessa situação.

Se deixasse dessa forma já estaria legal, uma fonte moderna e um

desenho representando de forma simples e impactante sua academia.
Entretanto, existem meios de deixar isso mais interessante e não exige muito
esforço.

1 - Aproveitando que o texto está selecionado, copie e cole na área de

trabalho.

2 - Na paleta de cores localize o grupo dos verdes e, passando a seta

do mouse sobre as cores, encontre e clique no verde referente a esse código:
#55D400.

3 - Localize essas configurações na parte superior da área de trabalho

e digite esses valores:

X = 234,643
Y = 622,929
W = 465,000
H = 53,000

141
HTML5 com CSS

Caso tenha feito os passos de forma correta, você chegou nessa situação.

Observe no texto atrás que a cor preta passou a ser sombra do texto
verde.

Até o momento foi inserida uma imagem e dois textos, com isso tem-se
3 elementos. Agora é o momento de fazer com que esses elementos se tornem
um, criando assim o logo final.

4 - Pressione e mantenha pressionada a tecla control (CTRL) e aperte

a tecla A. Isso fará com que todos os elementos sejam selecionados.

5 - Feito isso, clique no menu Object e escolha a opção Group.

6 - Muito bem! Os elementos foram agrupados em uma única imagem.

Agora exporte essa imagem para a pasta que você criou clicando no menu File.

7 - Em seguida, escolha a opção Export Bitmap.

Criando um logo
142
HTML5 com CSS

8 - Assim que a janela for aberta, clique no botão Browse.

9 - Localize a pasta Logo, criada no começo do exercício e dê o nome
de logo_oficial, salvando em PNG.
10 - Voltando na janela Export Bitmap, escolha a opção Export.

11 - Feche a janela Export Bitmap e o programa InkScape e se o programa

perguntar se deseja salvar, clique em Close without saving.

Para finalizar o exercício, chegou o momento de inserir o logo na página,

dando assim o toque final.
1 - Abra o NotePad++ sua página relacionada ao karatê.

2 - Localize a tag de abertura <BODY>, clique no final dela e pressione

uma vez a tecla Enter.

3 - Digite as linhas de código para a inserção de uma imagem:

Caso tenha feito os passos de forma correta, você chegou nessa situação.

4 - Salve as alterações realizadas e execute a página por meio do

Internet Explorer.

143
HTML5 com CSS

Esse é o resultado final da sua página.

Conclusão da aula

Você terminou esse tópico conhecendo um pouco sobre o InkScape e

como criar um logo simples utilizando esse sistema. Com isso foi encerrado
o curso de HTML5 com CSS. Agora você está apto a realizar os outros cursos
que essa unidade coloca à sua disposição.

Exercícios de Fixação

Não deixe de fazer os exercícios de fixação da sua apostila

pessoal e intransferível. Responda-os utilizando uma caneta e no final
peça a assinatura do seu instrutor.

1 - O que é software livre?

___________________
Instrutor

Criando um logo
144
Anotações

Revisão Prática II
Esta revisão abrange:

• Aula 4 - Cabeçalho e rodapé

• Aula 5 - Formulário e seletores
• Aula 6 - Criando um logo
Exercícios

Esta apostila é sua, pessoal e intransferível. Nela você poderá

responder aos exercícios e fazer anotações onde desejar. Leve-a
para casa, não a devolva e nem repasse para outra pessoa.

Obs.: Caso você tenha digitado os valores semelhantes aos da apostila

e sua página esteja diferente, ajuste os valores manualmente do CSS, pois
eles podem variar.
1 - Abra os arquivos fitness.html e fitness.css por meio do Notepad++.

2 - Em seguida, utilize o texto que se encontra na pasta C:\Praticar \

Revisão prática 2 e insira-o na página em formato de artigo com a data de 02
de outubro de 2014 com o título Terceira idade no Fitness?.
3 - Com a pasta Revisão prática 2 ainda aberta, copie e cole a imagem
academia-da-terceira-idade.jpg para a pasta IMG que se encontra dentro da
pasta Academia.

4 - Deixe em negrito as palavras:

1º parágrafo
são fundamentais;
longevidade saudável;

2º parágrafo
mesa de refeições;
verdadeiro remédio sem efeitos colaterais;
retardo do processo de envelhecimento;
manutenção do peso adequado;
performance mental e física;
fortificando o sistema imunológico;
maior resistência às doenças;

147
HTML5 com CSS

3º parágrafo
prática regular de atividade física;

5 - Entre no youtube e procure um vídeo chamado Academia da terceira

idade na China. Posicione-o entre o primeiro e segundo parágrafos com a
legenda Exercícios básicos na terceira idade.

6 - Em seguida, insira a imagem copiada no começo do exercício entre

os parágrafos 2 e 3 com a legenda É só o aquecimento.

7 - Clique antes da tag de abertura Article e pressione a tecla Enter.

Insira duas quebras de linha e uma tag DIV com uma classe chamada exercício.
8 - Insira uma classe na tag ARTICLE, abaixo da tag DIV, com o nome
materia.

9 - Insira duas quebras de linha e, abaixo da tag de fechamento

ARTICLE, crie uma tag SECTION com uma classe chamada Comentarios.

Revisão Prática II
148
HTML5 com CSS

10 - Crie um formulário com os campos: Nome, Idade, E-mail e

Comentários entre as tags SECTION.

11 - Salve as alterações e execute a página por meio do Internet Explorer.

Caso tenha feito os passos de forma correta, você chegou nessa situação.

Confira os seguintes arquivos:

• □ fitness.html
• □ academia-da-terceira-idade.jpg
• □ artigo_fitness.txt ( Pasta praticar )

___________________
Instrutor

149
Anotações

Revisão Prática Final

Esta revisão abrange:
O conteúdo de CSS usado nas aulas 4, 5 e 6, com a inserção de links
no lado direito da página e a alteração do plano de fundo.

Exercícios

Esta apostila é sua, pessoal e intransferível. Nela você poderá

responder aos exercícios e fazer anotações onde desejar. Leve-a
para casa, não a devolva e nem repasse para outra pessoa.

Obs.: Caso você tenha digitado os valores semelhantes aos da apostila

e sua página esteja diferente, ajuste os valores manualmente do CSS, pois
eles podem variar.
1 - Entre as tags de quebra de linha e <SECTION class=”comentarios”>
insira esses códigos:
<ASIDE class=”atividades”>
<SECTION>
<ul>
<H1>Atividades disponíveis</H1>
<li><a href=”#”>Caminhada com alongamento</a></li>
<li><a href=”#”>Tai chi chuan</a></li>
<li><a href=”#”>Corrida</a></li>
<li><a href=”#”>Hipertrofia moderada</a></li>
</ul>
</SECTION>
</ASIDE>
<FOOTER>
<SECTION class=”atividades”>
<H1>Atividades futuras</H1>
<UL class=”marcacao”>
<LI><a href=”#”>Natação</a></LI>
<LI><a href=”#”>Hidroginastica</a></LI>
<LI><a href=”#”>Pilates</a></LI>
<LI><a href=”#”>RPG</a></LI>
</UL>
<BR>
<BR>
</SECTION>
</FOOTER>

151
HTML5 com CSS

2 - Clique na aba fitness.css e altere os valores que estiverem diferente

para esses valores:

BODY {
margin: 0 auto;
padding: 25px 0;
width: 1150px;
height: 970px;
font: 20px Tahoma;
background-color: #AAFF11;
}
3 - Digite o código referente a tag DIV logo abaixo dessa configuração:

NAV UL LI A:hover { DIV.exercicio {

color: #FF33FF; width: 1150px;
} height: 1353px;
}
4 - Logo abaixo, utilize esses códigos para formatar o artigo inserido:

ARTICLE.materia{ ARTICLE HEADER H1 {

width: 700px; text-align: justify;
float: left; }
}
5 - Salve as alterações e execute a página por meio do Internet Explorer.
Caso tenha feito os passos de forma correta, você chegou nessa tela.

Revisão Final
152
HTML5 com CSS

6 - Retorne ao CSS e formate os links do lado direito com esses códigos:

ASIDE.atividades{ ASIDE UL {
width: 420px; list-style: none;
float: right; }
padding-top: 50px;
}

ASIDE SECTION UL H1{ ASIDE SECTION UL LI{

margin-bottom: 10px; margin-left: 20px;
font-size: 16px; font-size: 18px;
} }

FOOTER SECTION.atividades{ FOOTER SECTION H1{

width: 420px; margin-bottom: 10px;
float: right; font-size: 16px;
padding-top: 47px; }
}

FOOTER SECTION UL LI{

margin-left: 20px;
font-size: 18px;
}

7 - Retire as bolinhas dos links das atividades futuras.

UL.marcacao{
list-style: none;
}

8 - Utilize os códigos abaixo para configurar a imagem e sua legenda.

FIGURE{ FIGURE FIGCAPTION{
margin-left: 12%; font-size: 12px;
} margin-left: 50%;
}
9 - Feito isso, faça o mesmo configurando o vídeo com sua legenda.

IFRAME { FIGCAPTION{
margin-left: 5%; font-size: 12px;
margin-top: 10px; margin-left: 54%;
margin-bottom: 10px; }
}

153
HTML5 com CSS

10 - Salve as alterações e execute a página por meio do Internet Explorer.

Caso tenha feito os passos de forma correta, você chegou nessa tela.

11 - Crie uma DIV nos 3 parágrafos e dê uma classe a ela com o nome
de alinhamento. No CSS, insira esses códigos referente a essa classe.
DIV.alinhamento{
text-align: justify;
margin-right: 30px;
}

12 - Em seguida, utilize esses códigos para formatar o formulário.

FORM LABEL { FORM INPUT{
font-size: 20px; height: 35px;
margin-left: 35px; font-size: 20px;
margin-bottom: 20px;
FORM INPUT#nome{ margin-left: 43px;
margin-left: 39px; }
}

FORM INPUT#idade{ FORM INPUT#email{

margin-left: 40px; margin-left: 37px;
} }

FORM INPUT#botao{ FORM TEXTAREA{

font-size: 25px; width: 400px;
padding: auto; height: 100px;
margin-left: 364px; font-size: 25px;
} margin-left: 35px;
}

Revisão Final
154
HTML5 com CSS

13 - Analisando esse código, insira-o no CSS e ajuste o HTML para o

texto / assunto receber a configuração das bordas.
SECTION#borda{
padding-bottom: 2%;
padding-left: 2%;
padding-top: 2%;
padding-right: 2%;
background-color: #ededed;
text-align: justify;
color: #000;
border-style: double;
opacity:0.8;
}
14 - Salve as alterações e execute a página por meio do Internet Explorer.
Caso tenha feito os passos de forma correta, você chegou nessa tela.

15 - Vá até a pasta referente à sua página, localize o arquivo chamado

index.html, relacionado ao karatê, e renomeie para karate.html.

155
HTML5 com CSS
16 - Localize a pasta Praticar \ Revisão_final, copie as imagens e cole
na pasta IMG.
17 - Volte para o NotePad++, clicando na aba CSS e use a imagem
idoso_fundo2.png como plano de fundo da página.
18 - Utilize a imagem logo_oficial.png no topo da página com uma
quebra de linha entre a imagem e o menu.
19 - Abra o InkScape e crie um logo utilizando a mesma fonte do logo
da academia com a imagem logo_fitness.png. Abaixo do logo escreva Melhor
idade, de roxo.

Tamanho da imagem final com o nome

Obs.: Caso não consiga deixar a imagem desse tamanho, deixe o mais
próximo disso.
20 - Dê o nome de fitness_MI,salve em PNG na pasta Logo.

21 - Volte para o NotePad++ e insira esse novo logo no lado direito do

logo da academia por meio do CSS. Interprete o código e analise o tipo de
seletor usado.
FIGURE.direita{
position: fixed;
top: 50px;
right: 155px;
}
22 - Salve as alterações e execute a página por meio do Internet Explorer.
Caso tenha feito os passos de forma correta, você chegou nessa tela.

Para finalizar serão ligadas todas as páginas nos links de navegação

horizontal.
23 - Acesse a pasta praticar \ Revisão_final \ Páginas, copie o arquivo
index.html e cole na pasta da sua página junto com os outros htmls.

Revisão Final
156
HTML5 com CSS

Caso falte algum arquivo (HTML, CSS ou IMG), copie da

pasta Revisão_Final e cole na sua pasta.

24 - Repita o mesmo procedimento para as pastas CSS com o arquivo

academia.css e as imagens, colando em suas respectivas pastas.

25 - Abra todos os arquivos HTML no NotePad++.

Os passos a seguir exige muito de sua atenção, para que ocorra o

resultado esperado.
26 - Clique na aba index.html e localize essa parte da imagem abaixo.

27 - Em exercícios anteriores foi pedido para colocar o símbolo de (#)

para representar um link. Serão colocadas em todas as páginas o endereço
referente as páginas criadas durante o curso. Entre na pasta onde se encontram
os arquivos da sua página.

28 - Clique na sua barra de endereços e observe que mudará o endereço

para C:\Academia. Copie esse endereço e volte para o NotePad++.

Esse caminho C:\Academia corresponde ao diretório onde

se encontra os arquivos criados pelo desenvolvedor do curso.
Caso o seu instrutor tenha criado uma pasta em um local diferente,
o endereço será diferente a esse da imagem. Portanto, utilize o
endereço correspondente aos seus arquivos.

29 - Em seguida, selecione apenas o símbolo de (#) referente ao Karatê

e cole o caminho copiado do passo anterior.

157
HTML5 com CSS

30 - Cole o texto da barra de endereço e complete digitando \karate.html.

31 - Foi feito o primeiro, agora restam os outros links: Judô e Fitness.

Vá até a pasta onde estão os arquivos e anote o nome de todas as páginas
em HTML.
Caso você tenha feito corretamente, seu código está dessa forma:

Repare no código que a primeira linha não tem link, isso significa que não
tem a necessidade de ter um link na página em que o usuário está atualmente.