CENTRO DE CIÊNCIAS EXATAS E TECNOLÓGICASTECNOLOGIA EM ANÁLISE E DESENVOLVIMENTO DE SISTEMAS               EDUARDO BERTOLUC...
EDUARDO BERTOLUCCITRABALHO DE HTML, CSS E JAVASCRIPT              Trabalho de HTML, CSS E JAVASCRIPT apresentado à        ...
SUMÁRIO1     INTRODUÇÃO .....................................................................................................
31 INTRODUÇÃO               A Internet possui diversos serviços. A World Wide Web (conhecidotambém como Web) é o nome do s...
42 HTML                HyperText Markup Language é a linguagem universal da Web. Éatravés dela que a informação disponível...
5               Exemplo de um documento HTML Avançado.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www....
6Figura 1 – Exemplo de um documento HTML avançado renderizado no Firefox.
73 CSS                CSS, Cascading Style Sheets, é um poderoso, contudo simplesinstrumento para escrever websites. A fin...
8               Exemplo de uma Folha de Estilo Simples.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www...
9               Exemplo de uma Folha de Estilo Avançada.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://ww...
10Figura 3 – Exemplo de uma Folha de Estilo Avançada renderizada no Firefox.
114 JAVASCRIPT               Javascript é uma linguagem de programação simples desenvolvidapela Netscape e que se tornou p...
12      acronym { border: none; text-decoration: none; font-style: normal; }      .maisinfo_oculto { display: none; }     ...
13Figura 4 - Antes de clicar no link mais informaçõesFigura 5 - Depois de clicar no link mais informações
14              Exemplo de um Javascript Avançado.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.o...
15      pagina[2].style.color = cor;      pagina[3].style.color = cor;}</script></head><body><div id="box"><h1>Eduardo Ber...
16  Figura 6 – Página com as cores normaisFigura 7 – Página com as cores modificadas.
17                                  REFERÊNCIAShttp://www.castroinfonet.com/2009/07/css-o-que-e-para-o-que-serve.htmlhttp:...
Próximos SlideShares
Carregando em…5
×

Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010

11.665 visualizações

Publicada em

Publicada em: Educação
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
11.665
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
240
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010

  1. 1. CENTRO DE CIÊNCIAS EXATAS E TECNOLÓGICASTECNOLOGIA EM ANÁLISE E DESENVOLVIMENTO DE SISTEMAS EDUARDO BERTOLUCCI TRABALHO DE HTML, CSS E JAVASCRIPT Londrina 2010
  2. 2. EDUARDO BERTOLUCCITRABALHO DE HTML, CSS E JAVASCRIPT Trabalho de HTML, CSS E JAVASCRIPT apresentado à Universidade Norte do Paraná - UNOPAR, como requisito parcial para a obtenção de média bimestral na disciplina de TÓPICOS ESPECIAIS EM DESENVOLVIMENTO DE SISTEMAS. Professor: Marcio Roberto Chiaveli Londrina 2010
  3. 3. SUMÁRIO1 INTRODUÇÃO .................................................................................................... 32 HTML .................................................................................................................. 43 CSS .................................................................................................................... 74 JAVASCRIPT .................................................................................................... 11REFERÊNCIAS ....................................................................................................... 17
  4. 4. 31 INTRODUÇÃO A Internet possui diversos serviços. A World Wide Web (conhecidotambém como Web) é o nome do serviço mais popular da Internet. Por esse motivo,é freqüentemente confundida com a própria Internet. Internet é o nome dado ao conjunto de computadores, provedoresde acesso, satélites, cabos e serviços que formam uma rede mundial baseada emuma coleção de protocolos de comunicação conhecidas como TCP/IP. É essencialpra quem pretende desenvolver e colocar no ar páginas e aplicações saber disso. A World Wide web é um serviço TCP/IP baseado no protocolo denível de aplicação HTTP (HyperText Transfer Protocol – Protocolo de Transferênciade Hipertexto). É o meio virtual formado pelos servidores HTTP (servidores web),clientes HTTP (navegadores) e protocolo HTTP (regras comunicação entre cliente eservidor).
  5. 5. 42 HTML HyperText Markup Language é a linguagem universal da Web. Éatravés dela que a informação disponível nas páginas da www pode ser acessadapor máquinas de arquiteturas e sistemas operacionais diferentes. Não é umalinguagem de programação com a qual se possa construir algoritmos, mas umalinguagem declarativa que serve para organizar informações em um arquivo detextos que será visualizado em um browser. Define uma coleção de elementos paramarcação (definição de estrutura) de texto. um arquivo HTML é um arquivo de textosimples recheado de marcadores que se destacam do texto pelos caracteresespeciais "<" e ">". Com HTML é possível publicar documentos estruturados on-line,recuperar informações através de vínculos de hipertexto, projetar uma interfaceinterativa com formulários para acesso a serviços remotos como buscas e comércioeletrônico, e incluir imagens, vídeos, sons, animações e outras aplicações interativasdentro de documentos visíveis no browser. Exemplo de um documento HTML Simples. <html> <head> <title>exemplo de html</title> </head> <body> <p>olá mundo! </body> </html>
  6. 6. 5 Exemplo de um documento HTML Avançado.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang="pt-br"><head> <title>Eduardo Bertolucci - Curriculo </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <meta http-equiv="content-language" content="pt-br" /> <meta name="keywords" content="eduardo bertolucci, curriculo,curriculum, cambé, pr,site pessoal" /> <meta name="description" content="Página contendo o curriculo deEduardo Bertolucci" /></head><body><div><h1>Eduardo Bertolucci</h1><h2>Dados Pessoais</h2> <p> Estado Civil: <strong>Solteiro</strong> <br /> Data de Nasc.: <strong>03/12/1985</strong> </p><h2>Experiência Profissional</h2> <ul> <li>Webee</li> <li>Desenvolvedor <abbr title="Rede de alcance mundial" lang="pt-br">WEB</abbr></li> </ul><h2>Minhas atividades preferidas são</h2> <ol> <li>Navegar na Internet</li> <li>Passeios - <q>Gosto também de viajar</q></li> <li>Palestras</li> <li>Cursos</li> </ol><h2>Endereço</h2> <address class="hcard"> <span class="street-address">Rua Genésio G. <br /> <acronym title="Jardim">Jd.</acronym> Tarobá - CEP <spanclass="postal-code">86191-400</span> <br /> Cambé - <acronym title="Paraná">PR</acronym> <br /> <acronym title="Telefone">Fone</acronym>: <span class=""+55 439976-2138 </address></div></body></html>
  7. 7. 6Figura 1 – Exemplo de um documento HTML avançado renderizado no Firefox.
  8. 8. 73 CSS CSS, Cascading Style Sheets, é um poderoso, contudo simplesinstrumento para escrever websites. A finalidade da CSS é fácil, alterar a aparênciados elementos do site . Pode mudar, por exemplo cor, fonte, largura, altura, posição,alpha, z-index, e assim por diante. O uso de CSS é muito simples, fácil e pode sercolocado em documentos HTML. No estilo, você especifica a aparência dos elementos, neste casovocê está mudando a cor e o tamanho. Você pode mudar o tamanho para 20, o tipoda letra para Arial e cor para vermelho. Isso é facilmente feito usando CSS. Veja:<p style="font-size: 20; font-family: Arial; color: red;"> Bem-vindo ao meusite </ p> O código CSS, é feito de três coisas: a primeira é elemento HTML, idou classe, segundo é propriedade, seguido por dois pontos (:) e a terceira é o valorque vai ser mudado. Estamos mudando a cor do paragráfo.p { color: red (vermelho); } Esta é a forma como é simples. Agora, estamos mudando o tipo deletra e tamanho, usando o font-family e font-size :Font-family: Arial; font-size: 20; Aqui estão alguns dos mais utilizados.Font-weight - usado para fazer o tipo de letra negrito -normal/bold/bolder/lighterBackground-color - usado para alterar a cor do fundo - color-name/#000000/transparent/rgb(123,123,123)Background-image - utilizado para colocar uma imagem de fundo - none / url( "backgroun.jpg )Position - muda se a posição do elemento pode ser alterado pra cima e àesquerda -absolute/relativeTop - o valor y - valor (value)Left - o valor x - valor (value)Border-style - define o estilo da borda de um elemento -none/hidden/dotted/dashed/solid/double/groove/ridge/inset/outsetBorder-color - define a cor da borda - color-name/#000000/transparent/rgb(123,123,123)Border-width - define a largura da borda -thin/medium/think/(value)
  9. 9. 8 Exemplo de uma Folha de Estilo Simples.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta http-equiv="content-language" content="pt-br" /><title>CSS</title> <style type="text/css"> #nome_completo {color: #CCC;} .nome { color: red;} p span {font-size: 30px; color: #FF6600; } p.nome { color: blue; font-size: 20px; } p[lang="en"] { font-weight: bold; color: red; } p[lang="pt-br"] { font-weight: normal; color: #00ff00; } a[title] { font-size: 60px; } a[href^="ftp://"] { color: #999; font-size: 100px; } p > strong { text-transform: uppercase; } p:first-child { color: #666; } </style></head><body><p id="nome_completo" class="nome"> <strong> <ahref="http://www.eduardobertolucci.com" title="Visite meu Site">EduardoBertolucci</a> </strong> <em>TESTE<em> <span>teste</span> </p><p lang="en">Idioma Inglês</p><p lang="pt-br">Idioma Português</p><a href="ftp:eduardobertolucci.com" title="Acesso restrito ao FTP">FTP</a></body></html> Figura 2 – Exemplo de uma Folha de Estilo Simples renderizada no Firefox.
  10. 10. 9 Exemplo de uma Folha de Estilo Avançada.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang="pt-br"><head><title>Eduardo Bertolucci - Curriculo</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta http-equiv="content-language" content="pt-br" /><meta name="keywords" content="eduardo bertolucci, curriculo, curriculum, cambé,pr,site pessoal" /><meta name="description" content="Página contendo o curriculo de EduardoBertolucci" /><style type="text/css"> body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } div { width: 598px; margin: auto; padding: 10px; background: #E8EEFA; } h1 { font-size: 30px; text-transform: uppercase; } h2 { border: 1px solid #C3D9FF; background: #FFF; } p { font-size: 20px; font-weight: bold; text-align: center; color: #271672; } ul { font-weight: bold; text-transform: uppercase; color: #271672; } ol { font-weight: bold; text-transform: uppercase; color: #271672; } address { font-style: normal; border: 3px solid #FFF; text-align: right;color: #fff; background: #3c62a2; } acronym { border: none; text-decoration: none; font-style: normal; }</style></head><body><div><h1>Eduardo Bertolucci</h1><h2>Dados Pessoais</h2> <p> Estado Civil: <strong>Solteiro</strong> <br /> Data de Nasc.: <strong>03/12/1985</strong> </p><h2>Experiência Profissional</h2> <ul> <li>Webee</li> <li>Desenvolvedor <abbr title="Rede de alcance mundial" lang="pt-br">WEB</abbr></li> </ul><h2>Minhas atividades preferidas são</h2> <ol> <li>Navegar na Internet</li> <li>Passeios - <q>Gosto também de viajar</q></li> <li>Palestras</li> <li>Cursos</li> </ol><h2>Endereço</h2> <address class="hcard"> <span class="street-address">Rua Genésio G. <br /> <acronym title="Jardim">Jd.</acronym> Tarobá - CEP <span class="postal-code">86191-400</span> <br /> Cambé - <acronym title="Paraná">PR</acronym> <br /> <acronym title="Telefone">Fone</acronym>: <span class="">+55 43 9976-2138</span> </address></div></body></html>
  11. 11. 10Figura 3 – Exemplo de uma Folha de Estilo Avançada renderizada no Firefox.
  12. 12. 114 JAVASCRIPT Javascript é uma linguagem de programação simples desenvolvidapela Netscape e que se tornou padrão na Internet. Consiste numa linguagemintegrada e embutida no HTML. A linguagem Javascript permite um controle maiorna apresentação de páginas, possibilitando recursos que não são disponíveis emHTML. Por exemplo, uma janela pode ser criada usando comandos em Javascript(assim como o botão para fechá-la). Uma vez que o interpretador de Javascript estáincluida no navegador, isto o torna independente de sistemas operacionais. Assim,código Javascript incorporado em HTML é executável em Windows, Macintosh,Linux e outros sistemas. Apesar de Javascript ser muito parecida com Java (outra linguagem,desenvolvida pela Sun Microsystems), não são idênticas. Java é uma linguagemmuito mais extensa e poderosa, bastante utilizada na criação de programas appletexecutáveis no navegador. Uma diferença fundamental entre Java e Javascript éque a primeira é compilada no servidor e o código executável repassado para ocomputador cliente, enquanto que Javascript é interpretada pelo cliente. Exemplo de um Javascript Simples.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang="pt-br"><head><title>Eduardo Bertolucci - Curriculo </title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta http-equiv="content-language" content="pt-br" /><meta name="keywords" content="eduardo bertolucci, curriculo, curriculum,cambé, pr,site pessoal" /><meta name="description" content="Página contendo o curriculo de EduardoBertolucci" /><style type="text/css"> body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } div { width: 598px; margin: auto; padding: 10px; background: #E8EEFA;} h1 { font-size: 30px; text-transform: uppercase; } h2 { border: 1px solid #C3D9FF; background: #FFF; } h2 a { font-size: 11px; } p { font-size: 20px; font-weight: bold; text-align: center; color:#271672; } ul { font-weight: bold; text-transform: uppercase; color: #271672; } ol { font-weight: bold; text-transform: uppercase; color: #271672; } address { font-style: normal; border: 3px solid #FFF; text-align:right; color: #fff; background: #3c62a2; }
  13. 13. 12 acronym { border: none; text-decoration: none; font-style: normal; } .maisinfo_oculto { display: none; } .maisinfo_exibido { display: block; background: #FFFFCC; }</style><script type="text/javascript">function exibeOculta (elemento) { var objeto = document.getElementById (elemento); if (objeto.style.display !== "none") { objeto.style.display = none; } else { objeto.style.display = ; }}</script></head><body><div><h1>Eduardo Bertolucci</h1><h2>Dados Pessoais <a href="#" onclick="exibeOculta(maisinfo1);">maisinformações</a></h2> <p id="maisinfo1" style="display: none;"> Estado Civil: <strong>Solteiro</strong> <br /> Data de Nasc.: <strong>03/12/1985</strong> </p><h2>Experiência Profissional <a href="#"onclick="exibeOculta(maisinfo2);">mais informações</a></h2> <ul id="maisinfo2" style="display: none;"> <li>Webee</li> <li>Desenvolvedor <abbr title="Rede de alcance mundial" lang="pt-br">WEB</abbr></li> </ul><h2>Minhas atividades preferidas são <a href="#"onclick="exibeOculta(maisinfo3);">mais informações</a></h2> <ol id="maisinfo3" style="display: none;"> <li>Navegar na Internet</li> <li>Passeios - <q>Gosto também de viajar</q></li> <li>Palestras</li> <li>Cursos</li> </ol><h2>Endereço <a href="#" onclick="exibeOculta(maisinfo4);">maisinformações</a></h2> <address id="maisinfo4" style="display: none;" class="hcard"> <span class="street-address">Rua Genésio G. <br /> <acronym title="Jardim">Jd.</acronym> Tarobá - CEP <spanclass="postal-code">86191-400</span> <br /> Cambé - <acronym title="Paraná">PR</acronym> <br /> <acronym title="Telefone">Fone</acronym>: <span class="">+55 439976-2138</span> </address></div></body></html>
  14. 14. 13Figura 4 - Antes de clicar no link mais informaçõesFigura 5 - Depois de clicar no link mais informações
  15. 15. 14 Exemplo de um Javascript Avançado.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang="pt-br"><head><title>Eduardo Bertolucci - Curriculo </title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta http-equiv="content-language" content="pt-br" /><meta name="keywords" content="eduardo bertolucci, curriculo, curriculum,cambé, pr,site pessoal" /><meta name="description" content="Página contendo o curriculo de EduardoBertolucci" /><style type="text/css"> body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } div { width: 598px; margin: auto; padding: 10px; background: #E8EEFA;} h1 { font-size: 30px; text-transform: uppercase; } h2 { border: 1px solid #C3D9FF; background: #FFF; } h2 a { font-size: 11px; } p { font-size: 20px; font-weight: bold; text-align: center; color:#271672; } ul { font-weight: bold; text-transform: uppercase; color: #271672; } ol { font-weight: bold; text-transform: uppercase; color: #271672; } address { font-style: normal; border: 3px solid #FFF; text-align:right; color: #fff; background: #3c62a2; } acronym { border: none; text-decoration: none; font-style: normal; } .maisinfo_oculto { display: none; } .maisinfo_exibido { display: block; background: #FFFFCC; }</style><script type="text/javascript">function exibeOculta (elemento) { var objeto = document.getElementById (elemento); if (objeto.style.display !== "none") { objeto.style.display = none; } else { objeto.style.display = ; }}function alteraCorBody (){ cor = document.getElementById("cor").value; pagina = document.getElementsByTagName("body"); pagina[0].style.backgroundColor = cor;}function alteraCorBox () { cor = document.getElementById("cor").value; divcaixa = document.getElementById("box"); divcaixa.style.backgroundColor = cor;}function alteraCorTexto (){ cor = document.getElementById("cor").value; pagina = document.getElementsByTagName("h2"); pagina[0].style.color = cor; pagina[1].style.color = cor;
  16. 16. 15 pagina[2].style.color = cor; pagina[3].style.color = cor;}</script></head><body><div id="box"><h1>Eduardo Bertolucci</h1><h2>Dados Pessoais <a href="#" onclick="exibeOculta(maisinfo1);">maisinformações</a></h2> <p id="maisinfo1" style="display: none;"> Estado Civil: <strong>Solteiro</strong> <br /> Data de Nasc.: <strong>03/12/1985</strong> </p><h2>Experiência Profissional <a href="#"onclick="exibeOculta(maisinfo2);">mais informações</a></h2> <ul id="maisinfo2" style="display: none;"> <li>Webee</li> <li>Desenvolvedor <abbr title="Rede de alcance mundial" lang="pt-br">WEB</abbr></li> </ul><h2>Minhas atividades preferidas são <a href="#"onclick="exibeOculta(maisinfo3);">mais informações</a></h2> <ol id="maisinfo3" style="display: none;"> <li>Navegar na Internet</li> <li>Passeios - <q>Gosto também de viajar</q></li> <li>Palestras</li> <li>Cursos</li> </ol><h2>Endereço <a href="#" onclick="exibeOculta(maisinfo4);">maisinformações</a></h2> <address id="maisinfo4" style="display: none;" class="hcard"> <span class="street-address">Rua Genésio G. <br /> <acronym title="Jardim">Jd.</acronym> Tarobá - CEP <spanclass="postal-code">86191-400</span> <br /> Cambé - <acronym title="Paraná">PR</acronym> <br /> <acronym title="Telefone">Fone</acronym>: <span class="">+55 439976-2138</span> </address><form> <label for="cor"> Cor: <input name="cor" id="cor" type="text" value="#" size="7" /> </label> <button type="button" onclick="alteraCorBody()">Altera cor defundo</button> <button type="button" onclick="alteraCorBox()">Altera cor de Box</button> <button type="button" onclick="alteraCorTexto()">Altera cor deTexto</button> <button type="button" onclick="window.print();">Imprimir</button></form></div></body></html>
  17. 17. 16 Figura 6 – Página com as cores normaisFigura 7 – Página com as cores modificadas.
  18. 18. 17 REFERÊNCIAShttp://www.castroinfonet.com/2009/07/css-o-que-e-para-o-que-serve.htmlhttp://www6.ufrgs.br/bioquimica/proginst/oquiejs.htm

×