Beruflich Dokumente
Kultur Dokumente
SÉRIE
EMPREGABILIDADE
Listas Animações
Tags para criação de listas Desafios com Scratch, para incentivar e ajudar nas
primeiras criações usando este software
Listas ordenadas
Todos estes materiais estão disponíveis no endereço:
Listas não 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 criação e formatação de links mit.edu/> que congrega a comunidade de usuários de di-
Links para arquivos versas partes do mundo. Ali são compartilhados projetos e
Links para sites externos tutoriais.Também é possível interagir em fóruns temáticos.
2
LINGUAGEM BÁSICA
Antes de começar a trabalhar HTML, é necessário que se BROWSERS são programas que lêem e interpretam ar-
conheça os termos básicos que envolvem esta linguagem. quivos HTML enviados pela web, também formata-os em
páginas da web e os exibe ao usuário. Navegadores da web
INTERNET é um conjunto de redes de computadores. Pode-
podem executar som ou arquivos de vídeo incorporados
mos dizer que a internet é como uma cidade eletrônica com
em documentos da web, se o usuário dispuser do hard-
bibliotecas virtuais, lojas virtuais, escritórios virtuais, galerias de
ware necessário. Existem vários tipos de browsers, os mais
arte virtuais, etc. A internet oferece um grupo de serviços para
usados são o Internet Explorer, o Firefox e o Opera, entre
usuários, como correio eletrônico, a World Wide Web, FTP,
muitos outros.
Gopher, IRC, grupos de notícias usenet, telnet e outros.
Normalmente quando abrimos uma página na internet usa- URL (Uniform Resource Locator ou, em português, Loca-
mos o www. Esta é a sigla de World Wide Web que significa lizador de Recursos Uniforme) é uma seqüência de caracteres
Rede Mundial (a grande rede de computadores interligados que fornece o endereço 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) através do qual o site ou o recurso é acessado.
PROTOCOLO é um conjunto de regras estabelecidas com
o objetivo de permitir a comunicação entre computadores. É ENDEREÇO é o caminho até um objeto, documento, ar-
um método de acesso a um documento ou serviço através quivo, página ou outro destino.
da internet. São os chamados TCP/IP (Transmission Control Para entender o URL e o endereço colocamos a explica-
Protocol ou Internet Protocol). Em português: Protocolo de ção a partir do site http://www.pensamentodigital.org.br/.
Controle de Transmissão ou Protocolo Internet. O TCP/IP
http:// = Protocolo, utilizado pelos computadores
está disponível 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 domínio. Domínio são as categorias de endereços da
português, Protocolo de Transferência de Hipertexto) é internet que representam países ou tipos de organização.
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.
função ativar os navegadores da web para recuperarem
informações de servidores da web. pensamentodigital = Nome específico, que pode
conter uma ou mais palavras, separadas ou não por hífens
Protocolo FTP (File Transfer Protocol ou, em
(ex.: pensamento-digital).
português, Protocolo de Trasferência de Arquivo) é um
protocolo que possibilita a transferência de arquivos de org = Tipo de domínio, que indica a natureza do site.
um local para outro pela Internet. No caso, como trata-se de um site de uma fundação
usa-se .org, organizações sem fins lucrativos. Outros
HIPERTEXTO é qualquer informação de texto em um exemplos: .gov (governo) e .com (endereços comerciais).
computador que contenha saltos para outras informações, o
br = Sigla do país, composta de duas letras, significa
que usualmente chamamos de link. Os documentos visua-
que a página está situada em um computador no Brasil.
lizados através dos browsers são escritos em hipertextos, uti-
Páginas que não possuem terminação indicando o país
lizando-se uma linguagem especial chamada HTML
de origem estão situadas nos Estados Unidos. Outros
(HyperText Markup Language).
exemplos: .pt (Portugal) e .jp (Japão).
HOME PAGE é um conjunto de páginas, documentos
diponíveis na web, interligados entre si (através de links).
3
INTRODUÇÃO AO HTML
HTML significa HyperText Markup Language ou Linguagem REGRAS DO HTML
de Formatação de Hipertexto. É a linguagem usada para criar
Quando se fala em regras no HTML, os iniciantes acreditam
páginas na web, que estabelece como um determinado ele-
que o tema abordado é a seqüência lógica. Claro que isto
mento deve ser visualizado. A linguagem de formatação de
também, mas além desta seqüência, as regras tratam das es-
exibição de textos funciona através de comandos conheci-
truturas das páginas.
dos como tags.
Para a fiscalização do sistema foi fundada uma instituição
O documento HTML pode ser escrito em qualquer editor norteadora, a W3C, que é um consórcio de empresas que cria-
de texto, como texto puro, sem formatação ou caracteres de ram o padrão HTML. No site http://www.w3.org é possível verifi-
controle. Pode-se usar, portanto, o Notepad do Windows ou o car se um site está dentro do padrão. Este site está em inglês,
Kedit do Linux. Hoje existem vários programas que são pró- mas existe uma versão em português em http://www.w3c.br/
prios para a programação em HTML, como Mozilla Composer,
Front Page, Aptana, Notepad++, entre outros. PARTES BÁSICAS DO HTML
TAGS CABEÇALHO DA PÁGINA (<head>...</head>)
Contém o cabeçalho do documento, ou seja as informa-
Tags são os comandos que são sempre em inglês e ficam
ções que não fazem parte do corpo da página e, portanto, não
entre <>. O padrão correto é escrever os comandos com
serão exibidas diretamente no site, mas, por exemplo, será o
letras minúsculas.
título exibido na barra de títulos do navegador.
Podemos dizer que existem 3 tipos de tags:
Exemplo: <head>...informações importantes sobre o do-
Tag de abertura de comando: usada quando cumento...</head>
começamos um comando. Exemplo: <html>
TÍTULO (<title>...</title>)
Tag de fechamento de comando: usada quando
finalizamos o comando. Exemplo: </html> Contém o título do documento. Exibe o título como nome
da janela em que a página é visualizada. O título é obrigatório.
Tag solteira:estes são comandos específicos.Exemplo:<br/>
Não confunda o título da página com o nome do arquivo
Muitas tags possuem o que chamamos de atributos. Os
gravado em disco.
atributos são complementos dos comandos, seriam funções
a mais que os comandos possuem. Exemplo: <title>Escola de Fábrica</title>
SCRIPT (<script>...</script>)
ESTRUTURA BÁSICA
É utilizado para inserção de código script, como Java Script,
A estrutura básica de um documento HTML é a seguinte:
VB Script, etc, dentro do documento HTML.
<html> => Início do documento
Exemplo: <script>...código em linguagem script conhe-
<head> => Início do cabeçalho do documento cida pelo browser...</script>
<title> => Início do título do documento
META (<meta>)
Aqui entra o título do documento
Define valores especiais. Os valores são definidos como
</title> => Fim do título do documento pares name/value, ou seja nome/valor.
</head> => Fim do cabeçalho do documento
Atributos de Meta
<body> => Início do conteúdo do documento
Name: Especifica um nome ao qual um determinado valor
Aqui entra todo o conteúdo que será exposto pelo
será associado. O navegador precisa entender esse nome para
browser
que a tag tenha utilidade.
</body> => Fim do conteúdo do documento
Exemplo: <meta name="keywords" content =
</html> => Fim do documento
“INFORMÁTICA, EDUCAÇÃO, APRENDIZADO">
Se observarmos a estrutura acima, podemos dizer que a
página divide-se entre cabeçalho, 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 página deve estar em corpo. "INFORMÁTICA, EDUCAÇÃO, APRENDIZADO">
4
PARTES BÁSICAS DO HTML
É obrigatória a presença do atributo Name ou do atributo NEGRITO, ITÁLICO 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, também, para especificar palavras
Indica que o texto deve ser apresentado em negrito.
chaves que serão catalogadas por Ferramentas de Busca.
Exemplo: <b>Pensamento Digital</b>
CORPO DO TEXTO (<body>...</body>)
Visualização: Pensamento Digital
Este é o corpo da página, a própria página.Todo o conteú-
do do site estará entre <body> e </body>. ITÁLICO (<i>...</i> ) ou EM (<em>...</em>)
Atributos de Body Indica que o texto deve ser apresentado em itálico.
Background: Define uma imagem que será utilizada como SUBLINHADO (<u>...</u>)
fundo da página. Caso a imagem tenha um tamanho inferior Indica que o texto deve ser apresentado sublinhado.
ao da página, ela será repetida diversas vezes de forma a
cobrir o fundo do documento Exemplo: <u>Pensamento Digital</u>
5
PARTES BÁSICAS 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 página destino.
7. O tamanho padrão é 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
Visualização:
dentro de sua área de influência.
Link para site externo
Exemplo e visualização: <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 invés 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
influência.
(correio eletrônico) para o endereço específico.
Exemplo e visualização:
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
Visualização:
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 vírgula e entre aspas. O navegador procurará
IMAGENS (<img>)
estas fontes em ordem.
Esta tag insere uma imagem na página.
Exemplo e visualização:
<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 região a ser tratada como hyperlink URL relativo (/images/logo.png). Esta tag é obrigatória.
Exemplo: <a href="http://www.pensamentodigital. org. Exemplo: <img src="/images/logo.png">
br">Fundação Pensamento Digital</a>
ALT: Indica um texto associado à imagem.Quando a imagem
Visualização: Fundação Pensamento Digital não for exibida, o texto será exibido em seu lugar. O texto tam-
bém será exibido quando o cursor ficar parado sobre a imagem.
Atributos de A
HREF: Define que sua área de influência é um link. Exemplo: <img src="/images/logo.png" alt="Logotipo da
Fundação Pensamento Digital">
Exemplo e visualização: <p> Clique <a href="http://
www.pensamentodigital.org.br">aqui</a> para acessar a Align: Determina o alinhamento da imagem em relação
página da Fundação Pensamento Digital.</p> ao texto existente na mesma linha. Os valores válidos são
"TOP", "MIDDLE", "BOTTOM", "LEFT" e "RIGHT".
Clique aqui para acessar a página da Fundação 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 páginas 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
APRESENTAÇÃO DO SCRATCH
Scratch é uma nova linguagem de programação que per- Para fazer download do Scratch, entre no site http://
mite a criação de histórias, animações, jogos e outras produ- scratch.mit.edu/download e após preencher um formulário será
ções. Tudo pode ser feito a partir de comandos prontos que possível escolher a versão para download. Ele é gratuito. Abaixo
devem ser agrupados. veja a tela principal do Scratch traduzida para o português:
7 2
6 5
4
FALAR ALGO
No Scratch é possível 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 então é possível
inserir ou criar um novo objeto. Da mesma forma, é possível
ter vários objetos em uma programação.
Depois faça 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 próximo 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 edição de scripts o bloco se, senão
bola tocar o gato, ou seja, acrescente o bloco aponte para a que fica na categoria Controle.
direção. Isto significa que quando a bola tocar no gato, ela irá
mudar sua direção para aquela determinada no script.
11
ENTENDENDO O SCRATCH
Coloque o teste (se, senão) dentro de um bloco Sempre COMPARTILHAR
para que este teste seja feito o tempo todo. Depois coloque
No Scratch, após fazer seu projeto, é possível compartilhá-
um controle que determine o início 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 botão Compartilhar na parte superior da tela do
mas outros controles podem ser usados.
Scratch.
Mas atenção: para compartilhar seu projeto no site do
Scratch você precisa ter feito seu cadastro. Se ainda não fez,
entre em http://scratch.mit.edu e faça seu cadastro. É gratui-
to e fácil de fazer.
FONTES
http://oficinas.pensamentodigital. org.br http://pt.wikipedia.org