Aula 1 Multim Na Educ

Professor: Valdenilson dos Santos Costa
Licenciatura: Plena em Histria (UNEB) Especializao: Histria, Cultura Urbana e Memria (UNEB) Graduao: Tecnologia em Anlise e Desenvolvimento de Sistemas (UNOPAR) valdenilsoncosta@bol.com.br
Multimdia na Educao Ementa:

Sistemas de hipertexto. Tecnologia digital e multimdia. Projeto de sistemas de hipermdia: sistemas de autoria e de apoio. Projeto de aplicao hipermdia: autoria em ponto pequeno e em ponto grande. Padres em hipermdia. Aplicaes na educao e treinamento e na disseminao de informaes. Tutores inteligentes e sistemas de hipermdia. Banco de dados multimdia.
Multimdia na Educao
Aula 1 Parte prtica: HTML no bloco de notas Parte terica Tecnologia e Educao Conceitos de multimdia
HTML no bloco de notas

1 passo: abrir o bloco de notas: Para essa tarefa precisamos executar os seguintes procedimentos Iniciar->Todos os programas->Acessrios; ou Iniciar->Executar->cmd->Notepad ou Iniciar->Executar ->Notepad

2 passo: Criar um arquivo html ou htm Escreva as linhas a seguir no arquivo <html> </html> Salve este arquivo com o nome Index e com a extenso html da seguinte forma: Arquivo->Salvar como Em Nome do arquivo escreva: Index.html No desktop crie uma pasta SiteHtml para salvar suas pginas Clique no boto Salvar

Quando se salva um documento HTML, voc pode usar tanto a extenso htm quanto html. Ns usamos htm nos nossos exemplos. Este um habito gerado por softwares antigos que s aceitavam extenses com 3 letras. Com softwares novos perfeitamente seguro utilizar a extenso html.

HTML significa Hyper Text Markup Language (Linguagem de marcao de texto). Um arquivo HTML um arquivo texto contendo pequenas marcaes que sero interpretadas por um browser (como o mozilla firefox por exemplo). Estas marcaes so chamadas de TAGs (ou etiquetas). As tags mostram ao browser como exibir a pgina. Hyper se refere capacidade do HTML de linkar, conectar textos, imagens, vdeos, por isso uma linguagem multimdia. Um arquivo HTML deve ter a extenso htm ou html e pode ser criado usando um editor de texto simples como o Bloco de Notas ou um editor web que pode ser pago como o FrontPage ou gratuito como 1stPage 2000.

Todas as pginas em HTML so identificadas pela tag <HTML>, que ter obrigatoriamente que estar no incio do cdigo. Obviamente, qualquer pgina ir terminar com </HTML> Sabemos que as tags HTML no so case-sensitive: <B> o mesmo de <b>. Mas Algumas linguagens que surgiram do HTML (como a XHTML ver apndice sobre XHTML) e as prximas geraes de HTML exigem as tags em minsculo, portanto, devemos seguir esta tendncia se desejamos nos tornar profissionais desta rea.

3 passo: Abrindo o nosso arquivo Para abrir no navegador basta dar dois cliques no arquivo html que voc acabou de criar ou Abre navegador->Abrir->localize seu arquivo Para abrir no bloco de notas para continuar codificando, siga um dos procedimentos: Clique boto direito do mouse sobre arquivo-> Abrir com-> Bloco de Notas ou Iniciar->Executar ->Notepad->Abrir->localize seu arquivo

4 passo: Inserindo comentrio Escreva as linhas a seguir no arquivo <html><!aqui abrimos a seo de cdigos html> </html><!aqui fechamos a seo de cdigos html>
Obs.: Veja que em outras linguagem usamos \\ para uma linha ou \* *\ para vrias linhas de comando
Agora salve seu arquivo novamente e atualize sua pgina no navegador (F5) e confira o resultado

A tag de comentrio usada para inserir um comentrio no cdigo fonte do HTML. Um comentrio ser ignorado pelo browser. Voc pode usar comentrio para explicar seu cdigo, o que pode ajudar quando voc editar o cdigo no futuro. Note que voc precisa da exclamao na abertura mas no no fechamento da tag. <! Isto um comentrio >

As tags bsicas de HTML de presena obrigatrias nas pginas so: <HTML> - marcao de entrada do documento </HTML> - marcao de sada do documento <HEAD> - marcao de entrada do cabealho </HEAD> - marcao de sada do cabealho <BODY> - marcao de entrada do corpo </BODY> - marcao de sada do corpo
Obs.: Apenas o que est escrito entre as marcaes body aparecer na tela maior do seu browser.

5 passo: Vamos estruturar nossa pgina Vamos criar a seo de cabealho e a seo do corpo da pgina O cdigo ficar assim: <html><!aqui abrimos a seo de cdigos html> <head> </head> <body> </body> </html><!aqui fechamos a seo de cdigos html>

Dentro do cabealho (tag <head>) podemos encontrar: <title>: Define o ttulo da pgina, que exibido na barra de ttulo dos browsers. <style>: Define formatao em CSS <script>: Define programao de certas funes em pgina com scripts, e pode colocar funes de JavaScript. <meta>: Define propriedades da pgina, como codificao de caracteres, descrio da pgina, autor, etc., informaes usadas pelos mecanismos de busca como Google.

6 passo: inserindo ttulo em nossa pgina Insira as tags titles abaixo entre as tags head: <title>Aula de HTML</title> Seu cdigo ficar assim:
<html><!aqui abrimos a seo de cdigos html> <head> <title> Aula de HTML </title> </head> <body> </body> </html> <!aqui fechamos a seo de cdigos html>
Agora salve seu arquivo novamente e atualize sua pgina no navegador (F5) e confira o resultado

Dentro do corpo (tag <body>) podemos encontrar outras vrias tags, como por exemplo: <h1>, <h2>,... <h6>: cabealhos e ttulos no documento em diversos tamanhos. <p>: novo pargrafo. <br>: quebra de linha. <font>: forma um texto (fonte, cor e tamanho) de um trecho do texto. <b>, <i>, <u> e <s>: negrito, itlico, sublinhado e riscado, respectivamente. <img src>: inserir imagem na pgina. <a href>: hiperlink para uma pgina, ou para um endereo de Email. <embed src>: inserir vdeos na pgina <marquee behavior> : ttulo em movimento

O melhor modo de aprender html ou qualquer linguagem de programao, seja web ou desktop, trabalhando. Temos exemplos da utilizao de algumas destas tags acima. As demais sero vistas ao decorrer do curso.

7 passo: Vamos inserir um texto no corpo da pgina, entre as tags body como abaixo: <body> <h1>HTML</h1> <h2>significado<h2> <p>O <b>HTML <b>significa Hyper Text Markup Language (Linguagem de marcao de texto).</p> <br> <p>Isso significa que serve para formatar textos e criar conexes com outros textos ou objetos digitais</p> </body>

8 passo: criando mais uma pgina de nosso site Crie mais um arquivo com o nome Conceito.htm contendo esse cdigo padro abaixo: <html> <head> </head> <body> </body> </html> Obs.: Site um conjunto de pginas de uma pessoa ou empresa na internet

9 passo: linkando uma pgina outra Insira as linhas abaixo no corpo de sua primeira pgina: <br> <p><h6>Leia tambm sobre:<h6></p> <p><a href= Conceito.htm> Conceito de HTML</a></p>

9 passo: linkando uma pgina outra na mesma janela Insira mais estas linhas abaixo no corpo de sua primeira pgina: <p><a href= Conceito.htmtarget="blank"> Conceito de HTML na mesma janela</a></p> Obs.: J temos um hyper texto em nosso site

10 passo: inserindo imagem em nossa pgina Dentro da pasta SiteHtml, crie uma pasta imagens e salve dentro dela uma imagem com o nome Editor.jpg Insira as linhas abaixo no corpo de sua primeira pgina: <p>Exemplo de Editor Html</p> <img src=imagens/Editor.jpg></a></p><br> Obs.: J temos hyper mdia em nosso site

11 passo: criando mais uma pgina de nosso site Crie mais um arquivo com o nome VideoAula1.htm contendo esse cdigo padro abaixo: <html> <head> </head> <body> </body> </html>

12 passo: Linkando um vdeo Dentro da pasta SiteHtml, crie uma pasta Videos e salve dentro dela uma imagem com o nome VideoAula.jpg Insira as linhas abaixo no corpo de sua primeira pgina: <EMBED SRC="videos/AulaHtml1.avi" align="center" width="600" height="400"</EMBED>

13 passo: linkando uma nova pgina ao nosso site Insira mais estas linhas abaixo no corpo de sua primeira pgina: <p><h6>Aprenda tambm por vdeos turoriais:<h6></p> <p><a href= VideoAula1.htm target="blank"> Vdeo aula 1 sobre HTML</a></p>

14 passo: linkando a pgina Index nas outras pginas Insira no corpo das outras pginas as seguinte linhas: <br> <p><a href=Index.html>Voltar para pgina Inicial</a></p>

15 passo: Inserindo um ttulo animado Abra o arquivo Conceito.htm no bloco de notas No corpo da pgina insira as linhas abaixo:
<font color="red" size="18"><center><b><i> <p><marquee behavior="alternate" width="1000" eight="50" scrollamount="10" direction="left" onmouseover="this.stop()" onmouseout="this.start()"> Aprendendo HTML ! </marquee>

Como vimos tambm podemos modificar a fonte do texto: A fonte tambm pode ser alterada, claro. Para isso usamos a tag <font> e alguns atributos. Os atributos principais desta tag so: size: define o tamanho da fonte; color: define a cor da fonte; face: define a fonte a ser usada; (ex: face=Times)

Atividade Crie mais pginas para este site com mais vdeos aulas, textos complementares, imagens ilustrativas. Formate as letras das pginas, pesquise, acrescente. E assim voc est construindo um ODA, objeto digital de aprendizagem. Bons estudos
Tecnologia e Educao
Conceitos de multimdia

Aula 1 Multim Na Educ

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Aula 1 Multim Na Educ

Transféré par

Droits d'auteur :

Formats disponibles

Professor: Valdenilson dos Santos Costa

Multimdia na Educao Ementa:

HTML no bloco de notas

HTML no bloco de notas

HTML no bloco de notas

HTML no bloco de notas

HTML no bloco de notas

HTML no bloco de notas

HTML no bloco de notas

HTML no bloco de notas

HTML no bloco de notas

HTML no bloco de notas

HTML no bloco de notas

HTML no bloco de notas

HTML no bloco de notas

HTML no bloco de notas

HTML no bloco de notas

HTML no bloco de notas

HTML no bloco de notas

HTML no bloco de notas

HTML no bloco de notas

HTML no bloco de notas

HTML no bloco de notas

HTML no bloco de notas

HTML no bloco de notas

HTML no bloco de notas

HTML no bloco de notas

HTML no bloco de notas

Vous aimerez peut-être aussi