Prefeitura de Volta Redonda Secretaria Municipal de Educação Implementação de Informática Aplicada à Educação Oficina de produção de tutoriais AMANDA - TUTORIAL HTML Básico
Oficina 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 Scite que é um editor de códigos fonte, seleção de imagem com o Ksnapshot e montagem da apresentação no Impress (BrOffice 2.4). O resultado final foi salvo também em PDF, afim de preservar formatação e poder ser aberto em qualquer Sistema Operacional, utilizando para tal o próprio editor de textos (exportar como PDF), Todos os aplicativos estão inseridos na Distribuição GNU-Linux VRLivre 2.0, preparada pela Equipe de Implementação de 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 trabalhar no editor apenas com de texto. códigos, Aqui, que vamos 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.
Início da Página Cabeça da Página Corpo da Página Fim 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!
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 colocado até 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 cada frase 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ítulo Obs.: 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 teremos diferentes resultados!
Note a diferença no tamanho do texto das 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áginas Depois 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!!!
www.cultura.ufpa.br www.laurapoesias.com www.magiagifs.com.br
Créditos Oficina de Produção 01/12/08 à 12/12/08 Implementadores do 6º ao 9º ano Local: E.M. São Francisco de Assis Realização: Coordenação de IAE Oficina : Pivot Autor : Amanda Delgado Email: amandavr@portalvr.com U.E.: Colégio Getúlio Vargas