prefeitura de volta redonda secretaria municipal de...
TRANSCRIPT
![Page 1: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/1.jpg)
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
![Page 2: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/2.jpg)
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
![Page 3: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/3.jpg)
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.
![Page 4: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/4.jpg)
Tutorial B sicoá
![Page 5: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/5.jpg)
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!
![Page 6: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/6.jpg)
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).
![Page 7: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/7.jpg)
Usaremos para construir nossa página o programa SciTE, que fica em Aplicações/Programação/SciTE Text Editor.
![Page 8: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/8.jpg)
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.
![Page 9: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/9.jpg)
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
![Page 10: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/10.jpg)
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.
![Page 11: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/11.jpg)
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
![Page 12: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/12.jpg)
Agora que salvamos o arquivo, vamos abrir a página para visualizar. Então abra seu navegador, clique em Arquivo/Abrir Arquivo.
![Page 13: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/13.jpg)
Selecione a sua Página na pasta e clique em Abrir.
![Page 14: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/14.jpg)
Como eu disse, a página está vazia, apenas o título da Página foi colocadoaté agora!
![Page 15: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/15.jpg)
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.
![Page 16: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/16.jpg)
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.
![Page 17: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/17.jpg)
Observe como inseri o “tag” <br> ao fim de cadafrase da mensagem. Agora vou salvar para
ver o resultado!
![Page 18: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/18.jpg)
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!
![Page 19: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/19.jpg)
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>.
![Page 20: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/20.jpg)
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>.
![Page 21: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/21.jpg)
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.
![Page 22: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/22.jpg)
Abaixo temos duas tabelas, uma de códigos como falei e a outra com o nome das cores que podemos utilizar.
![Page 23: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/23.jpg)
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”>
![Page 24: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/24.jpg)
A Página ficará assim...
![Page 25: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/25.jpg)
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!
![Page 26: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/26.jpg)
Colocando esses três “tags” de título teremosdiferentes resultados!
![Page 27: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/27.jpg)
Note a diferença no tamanho do textodas três primeiras linhas..
![Page 28: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/28.jpg)
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!
![Page 29: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/29.jpg)
![Page 30: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/30.jpg)
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!
![Page 31: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/31.jpg)
RESULTADO
![Page 32: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/32.jpg)
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>
![Page 33: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/33.jpg)
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>)
![Page 34: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/34.jpg)
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”
![Page 35: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/35.jpg)
![Page 36: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/36.jpg)
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!
![Page 37: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/37.jpg)
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!!!
![Page 39: Prefeitura de Volta Redonda Secretaria Municipal de ...sergiogracas.com/tutoriais/pdf/oficina_html_basico_amanda_getulio... · Oficina de produção de tutoriais Esta oficina foi](https://reader033.vdocuments.pub/reader033/viewer/2022052609/5be46a0009d3f233038d3963/html5/thumbnails/39.jpg)
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