Embed Size (px)
Citation preview
Prefeitura de Volta RedondaSecretaria Municipal de Educação
Implementação de Informática Aplicada à Educação
AMANDA - TUTORIAL
HTML – BásicoHTML – Básico
Oficina de produção de tutoriaisOficina de produção de tutoriais
Oficina de produção de tutoriaisOficina de produção de tutoriais
Esta oficina foi oferecida para a preparação e aperfeiçoamento dos implementadores de informática aplicada à educação para 6º à 9º anos, quanto à utilização dos aplicativos mais destacados para fins educacionais, bem como, para a produção de tutoriais que deverão estar disponibilizados para professores e alunos.
Orientadores: Teodoro Almeida Sergio Graças Giany Abreu
Para a produção deste Tutorial utilizamos o Para a produção deste Tutorial utilizamos o Scite que é um editor de códigos fonte, Scite que é um editor de códigos fonte, seleção de imagem com o Ksnapshot e seleção de imagem com o Ksnapshot e montagem da apresentação no Impress montagem da apresentação no Impress (BrOffice 2.4). O resultado final foi salvo (BrOffice 2.4). O resultado final foi salvo
também em PDF, afim de preservar também em PDF, afim de preservar formatação e poder ser aberto em qualquer formatação e poder ser aberto em qualquer Sistema Operacional, utilizando para tal o Sistema Operacional, utilizando para tal o
próprio editor de textos (exportar como PDF), próprio editor de textos (exportar como PDF), Todos os aplicativos estão inseridos na Todos os aplicativos estão inseridos na Distribuição GNU-Linux VRLivre 2.0, Distribuição GNU-Linux VRLivre 2.0,
preparada pela Equipe de Implementação de preparada pela Equipe de Implementação de Informática Aplicada à Educação da SME-VR.Informática Aplicada à Educação da SME-VR.
Tutorial B sicoá
Na construção de páginas não podemos digitar e apenas selecionar o texto para formatá-lo (mudar a cor, tipo de letra, tamanho, etc), assim como também não vamos conseguir mudar o plano de fundo, inserir imagens, pelos mesmos caminhos que utilizamos no editor de texto. Aqui, vamos trabalhar apenas com códigos, que são os chamados “tags”. Cada “tag” terá uma função para criar e formatar a página da maneira que você quiser!
Os tags terão sempre o mesmo modelo. Começarão com o sinal de menor < e terminarão com o sinal de maior > , havendo sempre um “tag” de abertura e um de fechamento da seguinte forma: <comando> que é um “tag” de abertura e </comando> que é um “tag” de fechamento. A diferença entre os dois é a apenas a barra. Sendo assim, o que estiver entre os “tags” de abertura e fechamento ficará formatado (obedecerá o comando que você escolheu). Os “tags” devem sempre ter abertura e fechamento, com exceção daqueles que servem para inserir um objeto (uma imagem por exemplo).
Usaremos para construir nossa página o programa SciTE, que fica em Aplicações/Programação/SciTE Text Editor.
Vamos aos “tags” indispensáveis para a construção de uma página:
1º HTML: Ele fará com que o seu navegador leia o documento como uma página e não como um simples texto.
2º HEAD: Ele é o cabeçalho da página, fica logo abaixo do “tag” <html>.
3º TITLE: Fica dentro do “tag <head>. Ele determinará o título da sua Página.
4º BODY: Ele é o corpo da página, tudo o que você inserir entre <body> e </body> (textos, imagens, barras, etc.) aparecerá na
tela da página.
Cabeça da Página
Corpo da Página
Essa é a estrutura básica que acabamos de ver, exatamente nessa ordem! Observe que o “tag” <html> não só inicia a página, como
também demarca seu fim!
Início da Página
Fim da Página
Depois que montamos a estrutura, vamos salvar o nosso arquivo para poder visualizar já em forma de página, que a princípio não terá nada na tela, pois não digitamos nada entre <body> e </body>, apenas o título da Página. Então é só
clicar em File/Save.
Abrirá uma janela para salvar o arquivo, selecione a pasta em que deseja salvar, escolha um nome para o arquivo e coloque a extensão .htm ou .html, para salvar o documento como página e não como texto e clique em salvar.
Ex: pagina.htm
Agora que salvamos o arquivo, vamos abrir a página para visualizar. Então abra seu navegador, clique em Arquivo/Abrir Arquivo.
Selecione a sua Página na pasta e clique em Abrir.
Como eu disse, a página está vazia, apenas o título da Página foi colocadoaté agora!
Depois que escolhermos o conteúdo da página (No meu caso uma mensagem de Natal),
vamos inserir sempre entre os “tags” <body> e </body>, lembrando sempre de salvar as
alterações para verificar o resultado.
Repare que mesmo tendo inserido o texto todo organizado no SciTE ele apareceu de forma diferente na tela, então o que temos que fazer é digitar o “tag” <br> onde
apertamos ENTER em nosso teclado, pois aqui o <br> significa a tecla Enter, teremos o mesmo efeito (os espaços desejados). Este <br>dá instruções
ao navegador para fazer uma mudança de linha.
Observe como inseri o “tag” <br> ao fim de cadafrase da mensagem. Agora vou salvar para
ver o resultado!
Sempre que fizermos alguma modificação na página (o <br> por ex.) temos que atualizá-la para ver o resultado! Agora o texto
ficou mais organizado!
Para centralizar toda a mensagem, vamos inserir o “tag” <center> no início do texto (antes do título) e após a
última palavra colocaremos o </center>.
Atualizando novamente a página podemos observar o resultado. Se quiser deixar uma linha de espaço entre as frases basta inserir novamente o <br>.
Agora vamos colocar cor no plano de fundo da página e no texto, para isto teremos que encontrar na internet a tabela universal de cores HTML, pois também vamos inserir as cores através de códigos.
Abaixo temos duas tabelas, uma de códigos como falei e a outra com o nome das cores que podemos utilizar.
Devemos colocar o código da cor sempre entre “aspas”. Escolhi as cores #ff0033 para deixar o fundo vermelho (também poderia ser
“red”) e para o texto #ffffff que ficará branco (também poderia ser “white). A cor também faz parte do corpo da página, por isso, ficará entre os “tags”
<body> e </body>.O comando ficará assim:
<body bgcolor = “cor escolhida p/ o fundo” text = “cor escolhida p/ texto”>
A Página ficará assim...
Alguns “tags” mais utilizados:
<b> o texto ficará em negrito </b>o texto ficará em negrito
<i> o texto ficará em itálico </i>o texto ficará em itálico
<u> o texto ficará sublinhado </u>o texto ficará sublinhado
Tags de Título:<h1> Seu Título </h1>
Seu TítuloObs.: Os tags de título vão até o <h6>. Sua letra vai diminuindo.. Podendo
ser usado como sub-título também!
Colocando esses três “tags” de título teremosdiferentes resultados!
Note a diferença no tamanho do textodas três primeiras linhas..
Para inserir uma imagem na página digitaremos o comando <IMG SRC = nomedaimagem.gif”>. A imagem deverá estar na
mesma pasta em que está salva a página. Coloquei entre <center> e </center> para centralizá-la.
Atenção: barranatal.gif é o nome que a imagem está
salva na pasta e sua extensão!
Inserindo uma linha horizontal:
Serve para fazer separação de um quadro para outro, de textos, ou apenas para enfeitar. Basta colocar o comando <hr color = “cor”>
entre <body> e </body>. Coloquei a cor branca (#ffffff) para combinar!
RESULTADO
Um texto pode entrar na página e percorrê-la da direita para a esquerda ou em sentido contrário, como um letreiro. Isso é obtido
usando-se a formatação Marquee.
O código é: <marquee>Escreva seu texto</marquee>.
Da Direita para a esquerda:<marquee behavior=scroll>Escreva seu texto</marquee></span>
Alternado (Vai e Volta) <marquee behavior="alternate"> Escreva seu texto </marquee>
Da esquerda para a direita:<marquee behavior=slide direction=right>Escreva seu texto</marquee>
Ou até com imagens como foi utilizado!<marquee behavior="alternate"><img src="nomedaimagem.gif"></marquee>
Inserindo o efeito <marquee behavior = "alternate"><img src = "mini.gif"> </marquee> a imagem, no meu caso um GIF,
fica se movimentando de um lado a outro da tela! Como falado na tela anterior. Basta colocá-lo onde quiser, desde
que esteja no corpo da página. (Entre <body> e </body>)
Para finalizar, inseri mais um GIF ao final da página! Uma árvore de Natal que muda de cor!! Novamente com o comando
<img src =”imagem.gif”
Esses são os primeiros passos para a construção de uma página na internet, o resto vai depender do seu objetivo
final e sua imaginação!Você poderá colocar efeitos no mouse, no cursor, barra de
rolagem colorida e uma infinidade de acessórios como relógio, calendário, contador de acessos, etc. Para isso,
basta você procurar na internet o que quer acrescentar na sua página.
Exemplo: Barra de rolagem colorida HTML
Uma infinidade de tutoriais irá aparecer, é só ler as instruções e aplicar o código no seu projeto!
Publicação de páginasDepois de feita a "home page" é necessário publicá-la,
ou seja colocar todos os arquivos em uma área de um provedor que permitirá sua visualização via Internet.
Quando se faz isso obtém-se uma URL ou seja, um endereço, que será acessável pelo serviço WWW da
Internet. Assim, as informações, imagens e sons ali colocados serão acessíveis por qualquer computador conectado no planeta
e poderão ser copiadas (salvas) no computador local.Vários provedores oferecem espaço para hospedar
homepages, inclusive espaços grátis.Então é só aproveitar as dicas e soltar a imaginação!!!
Oficina de Produção01/12/08 à 12/12/08
Implementadores do 6º ao 9º anoLocal: E.M. São Francisco de AssisRealização: Coordenação de IAE
Oficina : Pivot Autor : Amanda Delgado
Email: [email protected] U.E.: Colégio Getúlio Vargas
CréditosCréditos
