Escolar Documentos
Profissional Documentos
Cultura Documentos
Scratch Apresentacao
Scratch Apresentacao
SRIE
EMPREGABILIDADE
Listas Animaes
Tags para criao de listas Desafios com Scratch, para incentivar e ajudar nas
primeiras criaes usando este software
Listas ordenadas
Todos estes materiais esto disponveis no endereo:
Listas no ordenadas
http://oficinas.pensamentodigital.org.br ou acessando o
Listas ordenadas com caracteres especiais site http://www.pensamentodigital.org.br
Links Para conhecer melhor o Scratch, visite o site <http://scratch.
Tags para criao e formatao de links mit.edu/> que congrega a comunidade de usurios de di-
Links para arquivos versas partes do mundo. Ali so compartilhados projetos e
Links para sites externos tutoriais.Tambm possvel interagir em fruns temticos.
2
LINGUAGEM BSICA
Antes de comear a trabalhar HTML, necessrio que se BROWSERS so programas que lem e interpretam ar-
conhea os termos bsicos que envolvem esta linguagem. quivos HTML enviados pela web, tambm formata-os em
pginas da web e os exibe ao usurio. Navegadores da web
INTERNET um conjunto de redes de computadores. Pode-
podem executar som ou arquivos de vdeo incorporados
mos dizer que a internet como uma cidade eletrnica com
em documentos da web, se o usurio dispuser do hard-
bibliotecas virtuais, lojas virtuais, escritrios virtuais, galerias de
ware necessrio. Existem vrios tipos de browsers, os mais
arte virtuais, etc. A internet oferece um grupo de servios para
usados so o Internet Explorer, o Firefox e o Opera, entre
usurios, como correio eletrnico, a World Wide Web, FTP,
muitos outros.
Gopher, IRC, grupos de notcias usenet, telnet e outros.
Normalmente quando abrimos uma pgina na internet usa- URL (Uniform Resource Locator ou, em portugus, Loca-
mos o www. Esta a sigla de World Wide Web que significa lizador de Recursos Uniforme) uma seqncia de caracteres
Rede Mundial (a grande rede de computadores interligados que fornece o endereo de um site da web ou um recurso
no mundo todo). Web o diminutivo para World Wide Web. da World Wide Web, juntamente com o protocolo (como
FTP ou HTTP) atravs do qual o site ou o recurso acessado.
PROTOCOLO um conjunto de regras estabelecidas com
o objetivo de permitir a comunicao entre computadores. ENDEREO o caminho at um objeto, documento, ar-
um mtodo de acesso a um documento ou servio atravs quivo, pgina ou outro destino.
da internet. So os chamados TCP/IP (Transmission Control Para entender o URL e o endereo colocamos a explica-
Protocol ou Internet Protocol). Em portugus: Protocolo de o a partir do site http://www.pensamentodigital.org.br/.
Controle de Transmisso ou Protocolo Internet. O TCP/IP
http:// = Protocolo, utilizado pelos computadores
est disponvel para qualquer tipo de CPU e sistema
ligados web para comunicar-se entre si.
operacional. Existem dois tipos principais:
www.pensamentodigital.org.br = Nome do
Protocolo HTTP (HyperText Transfer Protocol ou, em domnio. Domnio so as categorias de endereos da
portugus, Protocolo de Transferncia de Hipertexto) internet que representam pases ou tipos de organizao.
um protocolo da internet utilizado pelos computadores
www = Sigla de World Wide Web que significa rede
ligados web para comunicar-se entre si. Ele tem como
mundial.
funo ativar os navegadores da web para recuperarem
informaes de servidores da web. pensamentodigital = Nome especfico, que pode
conter uma ou mais palavras, separadas ou no por hfens
Protocolo FTP (File Transfer Protocol ou, em
(ex.: pensamento-digital).
portugus, Protocolo de Trasferncia de Arquivo) um
protocolo que possibilita a transferncia de arquivos de org = Tipo de domnio, que indica a natureza do site.
um local para outro pela Internet. No caso, como trata-se de um site de uma fundao
usa-se .org, organizaes sem fins lucrativos. Outros
HIPERTEXTO qualquer informao de texto em um exemplos: .gov (governo) e .com (endereos comerciais).
computador que contenha saltos para outras informaes, o
br = Sigla do pas, composta de duas letras, significa
que usualmente chamamos de link. Os documentos visua-
que a pgina est situada em um computador no Brasil.
lizados atravs dos browsers so escritos em hipertextos, uti-
Pginas que no possuem terminao indicando o pas
lizando-se uma linguagem especial chamada HTML
de origem esto situadas nos Estados Unidos. Outros
(HyperText Markup Language).
exemplos: .pt (Portugal) e .jp (Japo).
HOME PAGE um conjunto de pginas, documentos
diponveis na web, interligados entre si (atravs de links).
3
INTRODUO AO HTML
HTML significa HyperText Markup Language ou Linguagem REGRAS DO HTML
de Formatao de Hipertexto. a linguagem usada para criar
Quando se fala em regras no HTML, os iniciantes acreditam
pginas na web, que estabelece como um determinado ele-
que o tema abordado a seqncia lgica. Claro que isto
mento deve ser visualizado. A linguagem de formatao de
tambm, mas alm desta seqncia, as regras tratam das es-
exibio de textos funciona atravs de comandos conheci-
truturas das pginas.
dos como tags.
Para a fiscalizao do sistema foi fundada uma instituio
O documento HTML pode ser escrito em qualquer editor norteadora, a W3C, que um consrcio de empresas que cria-
de texto, como texto puro, sem formatao ou caracteres de ram o padro HTML. No site http://www.w3.org possvel verifi-
controle. Pode-se usar, portanto, o Notepad do Windows ou o car se um site est dentro do padro. Este site est em ingls,
Kedit do Linux. Hoje existem vrios programas que so pr- mas existe uma verso em portugus em http://www.w3c.br/
prios para a programao em HTML, como Mozilla Composer,
Front Page, Aptana, Notepad++, entre outros. PARTES BSICAS DO HTML
TAGS CABEALHO DA PGINA (<head>...</head>)
Contm o cabealho do documento, ou seja as informa-
Tags so os comandos que so sempre em ingls e ficam
es que no fazem parte do corpo da pgina e, portanto, no
entre <>. O padro correto escrever os comandos com
sero exibidas diretamente no site, mas, por exemplo, ser o
letras minsculas.
ttulo exibido na barra de ttulos do navegador.
Podemos dizer que existem 3 tipos de tags:
Exemplo: <head>...informaes importantes sobre o do-
Tag de abertura de comando: usada quando cumento...</head>
comeamos um comando. Exemplo: <html>
TTULO (<title>...</title>)
Tag de fechamento de comando: usada quando
finalizamos o comando. Exemplo: </html> Contm o ttulo do documento. Exibe o ttulo como nome
da janela em que a pgina visualizada. O ttulo obrigatrio.
Tag solteira:estes so comandos especficos.Exemplo:<br/>
No confunda o ttulo da pgina com o nome do arquivo
Muitas tags possuem o que chamamos de atributos. Os
gravado em disco.
atributos so complementos dos comandos, seriam funes
a mais que os comandos possuem. Exemplo: <title>Escola de Fbrica</title>
SCRIPT (<script>...</script>)
ESTRUTURA BSICA
utilizado para insero de cdigo script, como Java Script,
A estrutura bsica de um documento HTML a seguinte:
VB Script, etc, dentro do documento HTML.
<html> => Incio do documento
Exemplo: <script>...cdigo em linguagem script conhe-
<head> => Incio do cabealho do documento cida pelo browser...</script>
<title> => Incio do ttulo do documento
META (<meta>)
Aqui entra o ttulo do documento
Define valores especiais. Os valores so definidos como
</title> => Fim do ttulo do documento pares name/value, ou seja nome/valor.
</head> => Fim do cabealho do documento
Atributos de Meta
<body> => Incio do contedo do documento
Name: Especifica um nome ao qual um determinado valor
Aqui entra todo o contedo que ser exposto pelo
ser associado. O navegador precisa entender esse nome para
browser
que a tag tenha utilidade.
</body> => Fim do contedo do documento
Exemplo: <meta name="keywords" content =
</html> => Fim do documento
INFORMTICA, EDUCAO, APRENDIZADO">
Se observarmos a estrutura acima, podemos dizer que a
pgina divide-se entre cabealho, que fica entre as tags Content: Especifica o valor associado a um Name.
<head> e </head> e corpo, que fica entre <body> e </body>. Exemplo: <meta name="keywords" content=
Tudo que vai aparecer na pgina deve estar em corpo. "INFORMTICA, EDUCAO, APRENDIZADO">
4
PARTES BSICAS DO HTML
obrigatria a presena do atributo Name ou do atributo NEGRITO, ITLICO E SUBLINHADO
HTTP-EQUIV. <meta http-equiv="Content-Type" content= NEGRITO (Bold <b>...</b>) OU STRONG
"text/html; charset=iso-8859-1"> (<strong>...</strong>)
O tag meta utilizado, tambm, para especificar palavras
Indica que o texto deve ser apresentado em negrito.
chaves que sero catalogadas por Ferramentas de Busca.
Exemplo: <b>Pensamento Digital</b>
CORPO DO TEXTO (<body>...</body>)
Visualizao: Pensamento Digital
Este o corpo da pgina, a prpria pgina.Todo o conte-
do do site estar entre <body> e </body>. ITLICO (<i>...</i> ) ou EM (<em>...</em>)
Atributos de Body Indica que o texto deve ser apresentado em itlico.
Background: Define uma imagem que ser utilizada como SUBLINHADO (<u>...</u>)
fundo da pgina. Caso a imagem tenha um tamanho inferior Indica que o texto deve ser apresentado sublinhado.
ao da pgina, ela ser repetida diversas vezes de forma a
cobrir o fundo do documento Exemplo: <u>Pensamento Digital</u>
5
PARTES BSICAS DO HTML
FONTES (<font>...</font>) Para outros sites
Existem 7 tamanhos de fonte em HTML, numeradas de 1 a Deve-se usar a URL completa da pgina destino.
7. O tamanho padro 3 que equivalente a 12 pt.
Exemplo:
Exemplo: <font>Texto</font>
<a href="http://www.google.com.br">Link para site exter-
Atributos de Fonte
no</a>
Size: Indica qual o tamanho de fonte que deve ser usado
Visualizao:
dentro de sua rea de influncia.
Link para site externo
Exemplo e visualizao: <font size="3">Pensamento Di-
gital</font> LINK ESPECIAL: "MAILTO"
Pensamento Digital Existe um tipo de link que chamamos de "mailto:". Se o
protocolo utilizado for "mailto:", ao invs de "http://", o link
Color: Indica qual a cor da fonte dentro de sua rea de
abrir uma janela especial para que se possa enviar um e-mail
influncia.
(correio eletrnico) para o endereo especfico.
Exemplo e visualizao:
Exemplo:
<font color= "#000000">Pensamento Digital</font>
<font color="black">Pensamento Digital</font> Mande um<a href="mailto:contato@pensamentodigital.
org.br" >e-mail</a>para a Pensamento Digital.
Pensamento Digital
Visualizao:
Face: Determina a fonte (tipo de letra) a ser utilizada. Deve
ter um nome entre aspas ou uma lista de nomes de fontes Mande um e-mail para a Pensamento Digital.
separados por vrgula e entre aspas. O navegador procurar
IMAGENS (<img>)
estas fontes em ordem.
Esta tag insere uma imagem na pgina.
Exemplo e visualizao:
<font face="Verdana, Arial, Helvetica">Pensamento Atributos de IMG
Digital</font> SRC: Indica a URL da imagem a ser exibida. Podem ser
usados dois tipos:
Pensamento Digital
URL absoluto (http://www.pensamentodigital.org.br/
LINK (<a>...</a>) images/log.png)
Indica a regio a ser tratada como hyperlink URL relativo (/images/logo.png). Esta tag obrigatria.
Exemplo: <a href="http://www.pensamentodigital. org. Exemplo: <img src="/images/logo.png">
br">Fundao Pensamento Digital</a>
ALT: Indica um texto associado imagem.Quando a imagem
Visualizao: Fundao Pensamento Digital no for exibida, o texto ser exibido em seu lugar. O texto tam-
bm ser exibido quando o cursor ficar parado sobre a imagem.
Atributos de A
HREF: Define que sua rea de influncia um link. Exemplo: <img src="/images/logo.png" alt="Logotipo da
Fundao Pensamento Digital">
Exemplo e visualizao: <p> Clique <a href="http://
www.pensamentodigital.org.br">aqui</a> para acessar a Align: Determina o alinhamento da imagem em relao
pgina da Fundao Pensamento Digital.</p> ao texto existente na mesma linha. Os valores vlidos so
"TOP", "MIDDLE", "BOTTOM", "LEFT" e "RIGHT".
Clique aqui para acessar a pgina da Fundao Pensamen-
to Digital. Exemplo: <img src="/images/logo.png" align="top">
Width: Determina a largura, em pixels, da imagem.
Veja algumas formas de especificar um link:
Exemplo: <img src="/images/logo.png " width="100">
Para outras pginas de um mesmo site
Height: Determina a altura da borda da imagem.
O local precisa ter um nome. Este nome definido da se-
Exemplo: <img src="/images/logo.png " height="100">
guinte forma: <a href="#nome.html">Link</a>
Border: Determina a largura da borda da imagem.
Exemplo: <img src="/images/logo.png " border="2">
6
APRESENTAO DO SCRATCH
Scratch uma nova linguagem de programao que per- Para fazer download do Scratch, entre no site http://
mite a criao de histrias, animaes, jogos e outras produ- scratch.mit.edu/download e aps preencher um formulrio ser
es. Tudo pode ser feito a partir de comandos prontos que possvel escolher a verso para download. Ele gratuito. Abaixo
devem ser agrupados. veja a tela principal do Scratch traduzida para o portugus:
7 2
6 5
4
FALAR ALGO
No Scratch possvel fazer um objeto falar. Para isto,basta usar
o bloco de comando Diga. Nele voc pode determinar o que
ser dito e o tempo que essa mensagem ficar aparecendo.
Coloque esse bloco no script
do objeto que dever falar.
OBJETO NOVO
Quando o Scratch aberto, no palco j est aparecendo o
gato. Mas nem sempre se deseja us-lo e ento possvel
inserir ou criar um novo objeto. Da mesma forma, possvel
ter vrios objetos em uma programao.
Depois faa o script do objeto que ser animado. Use o
Veja abaixo como aparece um novo objeto no palco:
bloco Sempre e dentro dele o bloco prximo traje. Este bloco
faz o objeto alternar entre seus trajes j criados.
10
ENTENDENDO O SCRATCH
Dentro do bloco se, coloque o que acontece quando a Acrescente na rea de edio de scripts o bloco se, seno
bola tocar o gato, ou seja, acrescente o bloco aponte para a que fica na categoria Controle.
direo. Isto significa que quando a bola tocar no gato, ela ir
mudar sua direo para aquela determinada no script.
11
ENTENDENDO O SCRATCH
Coloque o teste (se, seno) dentro de um bloco Sempre COMPARTILHAR
para que este teste seja feito o tempo todo. Depois coloque
No Scratch, aps fazer seu projeto, possvel compartilh-
um controle que determine o incio do script. No caso foi
lo com outros publicando-o no site do Scratch. Para isso, bas-
pedido que a bola ande quando for clicada com o mouse,
ta clicar no boto Compartilhar na parte superior da tela do
mas outros controles podem ser usados.
Scratch.
Mas ateno: para compartilhar seu projeto no site do
Scratch voc precisa ter feito seu cadastro. Se ainda no fez,
entre em http://scratch.mit.edu e faa seu cadastro. gratui-
to e fcil de fazer.
FONTES
http://oficinas.pensamentodigital. org.br http://pt.wikipedia.org