docBaixar PDF - Languages
download 
Denúncia Transcrição
Baixar PDF - Languages
HTML
&CSS
1
FelizAniversário
AllCodeClubsmustberegistered.Byregisteringyourclubwecanmeasureour
impact,andwecancontinuetoprovidefreeresourcesthathelpchildrenlearnto
code.Youcanregisteryourclubatcodeclubworld.org.
Introdução
Nesteprojeto,vocêcomeçaráasuajornadapeloHTMLeCSS
aprendendoafazerseuprópriocartãodeaniversáriocustomizado.
Listadeatividade
SigaestasINSTRUÇÕESumaauma
Testeseuprojeto
CliquenabandeiraverdeparaTESTAR
Salveseuprojeto
Certifique-sedeSALVARseutrabalho
1
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Passo1:OqueéHTML?
HTMLsignifica__LinguagemdeMarcaçãodeHipertexto_(HyperText
MarkdownLanguage),eéalinguagemusadaparacriaraspáginasda
web.Vamosdarumaolhadaemumexemplo!
Listadeverificaçãodeatividade
VocêutilizaráumwebsitechamadoTrinketparaescrever
HTML.AbraoTrinket:bit.ly/html-introducao.Sevocê
estiverlendoissoonline,vocêtambémpoderáusara
versãoembutidadoTrinket,abaixo.
OcódigoquevocêvêàesquerdadoTrinketéHTML.À
direitadoTrinketvocêpodeverapáginawebqueo
códigoHTMLcriou.
HTMLusatagsparaconstruirpáginasweb.Vocêpodever
essecódigoHTMLnalinha8doseucódigo?
<p>Oi.MeunomeéAndy.</p>
<p>
éumexemplodeumatag,eéutilizadapara
parágrafo.Vocêpodecomeçarumparágrafocom <p> e
finalizaroparágrafocom </p> .
Vocêconseguedetectaralgumaoutratag?Umaoutra
tag,quepodeserdetectadanalinha9,éa <b> ,quequer
dizerbold(negritoeminglês):
<b>correr</b>
2
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Aquiestãomaisalgumas:
<html>
e </html> marcaoinícioeofimde
umdocumentoHTML;
<head>
e </head> éondecoisascomoCSS
sãocolocadas(nósvamoschegaraisso
maistarde!);
<body>
e </body> éondeoconteúdode
suapáginawebécolocada.
+Façaumamudançaemumdosparágrafosdotexto,noHTML(à
esquerda).Cliqueem‘Run’evocêdeveversuapáginawebmudar(à
direita)!
Sevocêcometeuumerroequerdesfazerasmudanças,
vocêpodeiratéomenueclicarem‘Reset’.Tente!
3
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
4
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Salveseuprojeto
VocênãoprecisadeumacontanoTrinketparasalvarseusprojetos!
SevocênãotemumacontanoTrinket,cliquenasetaparabaixoe
depoiscliqueem‘Link’.Issotedaráumlinkquevocêpodesalvare
acessardepois.Vocêprecisaráfazerissotodasasvezesquefizeralguma
mudança,porqueolinkmuda!
SevocêtemumacontanoTrinket,amaneiramaisfácildesalvarsua
páginawebéclicarnobotão‘Remix’notopodoTrinket.Issosalvará
umacópiadoTrinketnoseuperfil.
5
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Desafio:Adicionaroutroparágrafo
Vocêpodeadicionarum3ºparágrafodetextonasua
páginawebabaixodosoutrosdois?Lembre-sequeseu
parágrafodeveiniciarcomatag <p> ,eterminarcom
</p>
.
Aquiestácomosuapáginawebdeveparecer:
Vocêpodeadicionarnegritoesublinhadoaoseunovo
parágrafo?Vocêdeveusar <u> e </u> paratexto
sublinhado.
Salveseuprojeto
Passo2:OqueéCSS?
CSSsignificaFolhadeEstilosemCascata,eéalinguagemutilizada
paraestilizarpáginaswebetorná-lasmaislegais.Vocêpodelinkarsua
páginawebaumarquivoCSSno <head> deumdocumentoHTML,
assim:
Listadeverificaçãodeatividade
CSSlistatodasaspropriedadesporumatagparticular.
6
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Cliquenaaba‘style.css’paraveroCSSdesuapágina
web.
Encontreessecódigo:
p{
color:black;
}
EssecódigoCSStemumapropriedadeparaparágrafos,
queéacordotextodeveserpreta.
Mudeapalavra‘black’noCSSpara‘blue’.Vocêdevever
acordotextodetodooparágrafomudarparaazul.
Salveseuprojeto
7
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Desafio:Adicionemaisestilo
Vocêpodedeixarosparágrafosdotextonacorlaranja?Ou
ofundocinza?
Salveseuprojeto
Passo3:Fazendoumcartãodeaniversário
VamosusaroquevocêaprendeusobreHTMLeCSSparafazerseu
própriocartãodeaniversáriocustomizado.
Listadeverificaçãodeatividade
AbraesseTrinket:bit.ly/cartao-aniversario,ouusea
versãoembutidaabaixo,sevocêestálendoonline.
Nãoseprepcupesevocênãoentendertodoocódigo.Essecartãode
aniversárioparecemuitochato,entãovocêfaráalgumasmudanças
nesseHTMLeCSS.
Cliquenobotãoemfrenteaocartão,evocêdeveverele
seabrirerevelarseuinterior.
8
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Váparaalinha13docódigo.Comonoexemploanterior,
vocêpodeeditaralgumtextonoHTMLparacustomizar
seucartão.
VocêpodeencontrarocódigoHTMLdaimagemdorobô?
(Dica:estánalinha16!)Mudeapalavra robot para sun ,
evocêveráaimagemmudar!
Vocêpodeusaralgumadaspalavras boy , diamond ,
dinosaur
sun
, flowers , girl , rainbow , robot , spaceship ,
, tea ,ou trophy .
9
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
VocêtambémpodeeditaroCSSdocartãodeaniversário.
Cliquenaaba“style.css”.ElecomeçacomtodooCSS
paraa saida docartão.Mudeo background-color para
lightgreen
.
Vocêtambémpodemudarotamanhodeumaimagem.
Váparaalinha29doCSS,emudeo width e height da
imagemdesaidapara 200px ( px significapixels).
Afontepodesermodificadatambém.Váparaalinha24e
mudeo font-family para ComicSansMS eo font-size
para 16pt .
Vocêpodeusaroutrasfontes,comoarial,ImpacteTahoma.
10
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Salveseuprojeto
Desafio:Crieumcartãopersonalizado
UsetudoquevocêaprendeusobreHTMLeCSSpara
finalizarfazendoumcartãopersonalizado.Nãoprecisaser
umcartãodeaniversário,podeserparaqualquerocasião!
Aquiestáumexemplo:
Salveseuprojeto
Agoraquevocêfinalizouseucartão,vocêpodecompartilharouenviar
poremailparaalguém.
11
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Documentos relacionados
Baixar PDF
para a linha 8 do seu template e adicione este HTML,
substituindo o texto no título
pelo nome da sua receita: Leia mais
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
trabalho difícil para você! Esta função obtém a imagem
do Pokemon, que pode ser mostrada em uma etiqueta.
Primeiro, vamos criar uma etiqueta para mostrar a
imagem dentro. Adicione este código em al...
