docBaixar PDF
download 
Denúncia Transcrição
Baixar PDF
HTML
&CSS
1
Receita
AllCodeClubsmustberegistered.Byregisteringyourclubwecanmeasureour
impact,andwecancontinuetoprovidefreeresourcesthathelpchildrenlearnto
code.Youcanregisteryourclubatcodeclubworld.org.
Introdução
Nesteprojetovocêaprenderáacriarumapáginadeinternetpara
suareceitafavorita.
Listadeatividade
SigaestasINSTRUÇÕESumaauma
Testeseuprojeto
CliquenabandeiraverdeparaTESTAR
Salveseuprojeto
Certifique-sedeSALVARseutrabalho
1
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Passo1:Escolhaumareceita
Antesdecomeçaracodificar,vocêprecisarescolherumareceita.
ListadeAtividades
Pensequereceitavocêquercompartilharcomseus
amigos.Podeser:
Umareceitaquevocêachounainternet;
Suarefeiçãofavorita;
Algoquevocêinventou!
Areceitaexemploquevocêveránesteprojetoéparafazerum
milkshakedebanana.Vocêpodecopiarestareceita,sevocênão
conseguirsedecidirporalgumaprópria.
Passo2:Ingredientes
Vamoslistarosingredientesquesãonecessáriosparasuareceita.
ListadeAtividades
Abraestetemplatetrinket:http://bit.ly/codeclubtemplate.Sevocêestiverlendoonline,vocêpodeusara
versãoembutidadotrinketabaixo.
Parasualistadeingredientes,vocêusaráumalistasem
ordenação,usandoatag <ul> (ulvemdoinglês
‘unorderedlist’,quesignificalistasemordenação).Vá
paraalinha8doseutemplateeadicioneesteHTML,
substituindootextonotítulo <h1> pelonomedasua
receita:
2
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
<h1>MilkshakedeBanana</h1>
<h3>Ingredientes:</h3>
<ul>
</ul>
Vejasuapáginadeinternet,vocêdeveráalgoparecido
comisto:
Masvocêaindanãoverásualistaainda,porquevocêaindanão
acrescentounenhumitemàlistadeingredientes!
Opróximopassoconsisteemacrescentaritemsàsua
lista,usandoatag <li> (livemdoinglês‘listitem’,que
significaitemdalista).Adicioneocódigoabaixodentroda
suatag <ul> :
<li>1banana</li>
3
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Comosualistaésemordenação,nãohánenhumnúmeronaslinhasde
items,apenasmarcadoresemformadebolinhas.
Desafio:Maisingredientes
Vocêconsegueacrescentartodososingredientesdasua
receita?
Asuapáginadeinternetdeveseparecercomesta:
SalveSeuProjeto
Passo3:Método
4
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Emseguida,vamosexplicarcomofazerareceita.
ListadeAtividades
VocêusaráumaoutralistaparaescreveroModode
Preparo,masdestavezvocêusaráumalistaordenada,
utilizandoatag <ol> (olvemdoinglês‘orderedlist’,que
significalistacomordenação).
Umalistaordenadaéumalistaquemostranúmerosantesdositems.
Eladeveserusadaquandoaordemdospassoséimportante.
Acrescenteestecódigoabaixodasualistadeingredientes,masgaranta
queeleestejadentrodatag <body> :
<h3>MododePreparo:</h3>
<ol>
</ol>
Agoravocêprecisaacrescentaritemsnasuanovalista
ordenada:
<li>Descasqueabananaecoloque-anoliquidificador</li>
5
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Notequeositemsdalistasãoautomaticamentenumerados!
Desafio:Maispassos
Vocêconsegueacrescentartodosospassosparapreparara
suareceita?
OseuMododePreparodeveseparecercomeste:
6
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
SalveSeuProjeto
Passo4:Cores!
Vamosacrescentaralgumascoresàpáginadeinternetdasuareceita.
ListadeAtividades
Vocêjáaprendeucomoadicionarumtextocoloridoàsua
páginadeinternet.Acrescenteestecódigoaoseuarquivo
style.css
,parafazercomquetodotextonocorpo(body)
dasuapáginafiqueazul:
body{
color:blue;
}
Oseubrowserconhececorescomo blue (azul), yellow
(amarelo)eatémesmo lightgreen (verdeclaro),mas
vocêsabiaqueseubrowsersabeosnomesdemaisde
500coresdiferentes?
Aquivocêpodeencontrarumalistacomtodososnomesdecoresque
vocêpodeusar:jumpto.cc/web-colours,istoincluinomesdecorescomo
tomato
(tomate), firebrick (tijolodefogo)e peachpuff (soprode
pêssego).
7
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Mudeacordeseutextode blue (azul)para tomato (tomate).
Oseubrowsersabeonomede140cores,masele
conhecerovalordemaisde16milhõesdecores!
Comovocêtalvezsaiba,todasascorespodemsercriadasapartirdas
coresprimárias:red(vermelho),green(verde)andblue(azul).Para
dizerparaobrowserqualcormostrar,vocêpodesimplesmentedizer
quantodecadacorprimáriaeledeveusar.
Aquantidadedevermelho(red),verde(green)eazul(blue)aserem
usadassãoescritascomonúmerosentre 0 e 255 .
AcrescenteestecódigoaoCSSparaocorpo(body)dausapáginade
internet,paramostrarumfundo(background)amareloclaro(light
yellow):
background:rgb(250,250,210);
8
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Sevocêpreferir,vocêpodedizeraobrowserquecorusar
usandocódigohexadecimal(ouhexcode).Oscódigo
hexadecimalfuncionamdeformaparecidaao rgb()
utilizadoacima,excetoquehexcodessemprecomeça
comum # ,eutiliza‘números’entre 00 e ff paraos
valoresdered(vermelho),green(verde)eblue(azul).
Substituaocódigo rgb() emseuCSSporestecódigohexadecimal:
background:#fafad2;
Vocêteráqueveromesmoamareloclaroquevocêtinhaantes!
SalveSeuProjeto
Passo5:Toquesfinais
VamosacrescentarumpoucomaisdeHTMLeCSSparamelhorarsua
página.
ListadeAtividades
Vocêpodeacrescentarumalinhahorizontalnofinalda
9
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
suareceita,utilizandoatag
.
Notequeestatagnãotemumatagdefechamento,éassimtambém
comatag <img> .
Alinhaquevocêacaboudeacrescentarnãocombinacom
oestilodorestantedapágina.Vamosconsertaristo
acrescentandoalgunscódigosCSS:
hr{
height:2px;
border:none;
background-color:tomato;
}
Vocêpodeatémesmomudaraaparênciadosmarcadores
dalistacomcódigoCSS:
ul{
10
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
list-style-type:square;
}
Desafio:Maiscores!
Mudeascoresnoseucódigoutilizandoonomedascores,
valoresem rgb() ecódigohexadecimais.Existeumalista
comváriascoresnestelinkjumpto.cc/web-colours.
Aquitemosalgunsexemplosdecores:
Vermelho(Red)podeserescritocomo:
red
(obviamente!)
rgb(255,0,0)
(Muitovermelho,nenhumverdee
nenhumazul)
#ff0000
Olivapodeserescritacomo:
olive
rgb(128,128,0)
(umpoucodevermelho,verdee
nenhumazul)
#808000
Tentegarantirqueascoresquevocêusacombinemcom
suareceita!
SalveSeuProjeto
11
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Desafio:Comentários
Peçaparaalgunsdeseusamigosparadeixarum
comentáriosobresuareceita.Vocêprecisaráfazeroutra
listaparaobteristo.
SalveSeuProjeto
Desafio:Maisestilização
Vocêconsegueadicionarumaimagemàsuapágina?Ou
mudarafonteusada?Aquivocêtemumexemplode
comosuapáginapoderiaser:
12
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Eaquivocêtemocódigoqueteajudaráaobteresse
resultado:
font-family:Arial/ComicSansMS/Courier/Impact/
Tahoma;
font-size:12pt;
font-weight:bold;
<imgsrc="aquivocêcolocaolinkparaaimagem">
SalveSeuProjeto
13
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Documentos relacionados
Baixar PDF - Languages
All Code Clubs must be registered. By registering your club we can measure our
impact, and we can continue to provide free resources that help children learn to
code. You can register your club at ...
Minecraft 2D
Na pasta de Minecraft2D você verá que existem muitas
imagens, uma para cada recurso. Se você clicar com o
botão direito em uma dessas imagens e abrí-la no editor
de imagem, você poderá mudar o gráfi...
Caça fantasmas
Fazer com que os fantasmas apareçam com
uma frequência menor;
Fazer os fantasmas menores.
Teste seu jogo algumas vezes até que você esteja
satisfeito com o nível de dificuldade.
Jogo da Memória
All Code Clubs must be registered. By registering your club we can measure our
impact, and we can continue to provide free resources that help children learn to
code. You can register your club at ...
Arte em ASCII
Execute o arquivo clicando em Run -> Run Module . Você
verá outra janela aparecer, que é o Shell do Python. Esse
é o lugar onde seu programa vai rodar. Se tudo funcionou
como esperado, você verá ...
Secret Messages
All Code Clubs must be registered. By registering your club we can measure our
impact, and we can continue to provide free resources that help children learn to
code. You can register your club at ...
Baixar PDF
Seu Pokedex pode ter uma aparência diferente desta. Você
pode usar diferentes fontes, por exemplo Times , Courier ,
ou qualquer outra fonte instalada no seu computador.
Você também pode escolher ...
