Você está na página 1de 32

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

HTML no bloco de notas


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

HTML no bloco de notas


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 no bloco de notas


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.

HTML no bloco de notas


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.

HTML no bloco de notas


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

HTML no bloco de notas


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

HTML no bloco de notas


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 >

HTML no bloco de notas


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.

HTML no bloco de notas


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>

HTML no bloco de notas


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.

HTML no bloco de notas


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

HTML no bloco de notas


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

HTML no bloco de notas


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.

HTML no bloco de notas


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>

HTML no bloco de notas


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

HTML no bloco de notas


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>

HTML no bloco de notas


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

HTML no bloco de notas


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

HTML no bloco de notas


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>

HTML no bloco de notas


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>

HTML no bloco de notas


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>

HTML no bloco de notas


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>

HTML no bloco de notas


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>

HTML no bloco de notas


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)

HTML no bloco de notas


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