fundamentos de web - html, css e js esp. marcelo mendes esp. arnaldo costa desenvolvimento java -...
TRANSCRIPT
![Page 1: Fundamentos de WEB - HTML, CSS e JS Esp. Marcelo Mendes Esp. Arnaldo Costa Desenvolvimento Java - Turma I](https://reader036.vdocuments.net/reader036/viewer/2022062512/552fc111497959413d8c6240/html5/thumbnails/1.jpg)
Fundamentos de WEB - HTML, CSS e JS
Esp. Marcelo Mendes
Esp. Arnaldo Costa
Desenvolvimento Java - Turma I
![Page 2: Fundamentos de WEB - HTML, CSS e JS Esp. Marcelo Mendes Esp. Arnaldo Costa Desenvolvimento Java - Turma I](https://reader036.vdocuments.net/reader036/viewer/2022062512/552fc111497959413d8c6240/html5/thumbnails/2.jpg)
Programação
Período: 31/01/2011 a 11/02/2011CH: 30 horasAvaliações: 1Conteúdo: www.mrmsistemas.com.br/mendesE-mail: [email protected]
![Page 3: Fundamentos de WEB - HTML, CSS e JS Esp. Marcelo Mendes Esp. Arnaldo Costa Desenvolvimento Java - Turma I](https://reader036.vdocuments.net/reader036/viewer/2022062512/552fc111497959413d8c6240/html5/thumbnails/3.jpg)
Tópicos abordados Mundo Web Processos de software Cenário de desenvolvimento Linguagens HTML, xHTML, CSS Padrões W3C Linguagem Javascript Linguagem PHP
![Page 4: Fundamentos de WEB - HTML, CSS e JS Esp. Marcelo Mendes Esp. Arnaldo Costa Desenvolvimento Java - Turma I](https://reader036.vdocuments.net/reader036/viewer/2022062512/552fc111497959413d8c6240/html5/thumbnails/4.jpg)
Linguagem HTML
HTML – Hyper Text Markup Language Desenvolvida por Tim Berners-Lee
Durante década de 90Conhecida através do browser Mosaic(NCSA)
Linguagem entendida mundialmente Interpretada por browser’s (navegadores)
![Page 5: Fundamentos de WEB - HTML, CSS e JS Esp. Marcelo Mendes Esp. Arnaldo Costa Desenvolvimento Java - Turma I](https://reader036.vdocuments.net/reader036/viewer/2022062512/552fc111497959413d8c6240/html5/thumbnails/5.jpg)
Linguagem HTML
Facilidade na codificação Facilidade na formatação Essencial em um sistema web Requer padronização Compatibilidade com navegadores
![Page 6: Fundamentos de WEB - HTML, CSS e JS Esp. Marcelo Mendes Esp. Arnaldo Costa Desenvolvimento Java - Turma I](https://reader036.vdocuments.net/reader036/viewer/2022062512/552fc111497959413d8c6240/html5/thumbnails/6.jpg)
Linguagem XHTML e Padrões W3C
XHTML e W3C – Padronização de tags W3C – Comitê de validação Tags em letras minúsculas Atualizar tags obsoletas Especificar tipo de documento html
![Page 7: Fundamentos de WEB - HTML, CSS e JS Esp. Marcelo Mendes Esp. Arnaldo Costa Desenvolvimento Java - Turma I](https://reader036.vdocuments.net/reader036/viewer/2022062512/552fc111497959413d8c6240/html5/thumbnails/7.jpg)
ExemplosErrado:<DIV><P>Aqui um texto</P></DIV> Certo:<div><p>Aqui um texto</p></div>
Errado:<div><i><p>Aqui um texto negrito</i></p></div>Certo:<div><i><p>Aqui um texto negrito</p></i></div>
Errado:<p>Um parágrafo.<p>Outro parágrafo.Certo:<p>Um parágrafo.</p><p>Outro parágrafo.</p>
![Page 8: Fundamentos de WEB - HTML, CSS e JS Esp. Marcelo Mendes Esp. Arnaldo Costa Desenvolvimento Java - Turma I](https://reader036.vdocuments.net/reader036/viewer/2022062512/552fc111497959413d8c6240/html5/thumbnails/8.jpg)
Estrutura de uma página validada pelo W3C
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Página Exemplo</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body><b><font color=“blue" size="3" face="Verdana">Olá Mundo!</font></b><br><img src="imagens/w3cxhtml.bmp" title=“Comitê W3C"> </body></html>
![Page 9: Fundamentos de WEB - HTML, CSS e JS Esp. Marcelo Mendes Esp. Arnaldo Costa Desenvolvimento Java - Turma I](https://reader036.vdocuments.net/reader036/viewer/2022062512/552fc111497959413d8c6240/html5/thumbnails/9.jpg)
Estrutura de uma página com imagem e link
![Page 10: Fundamentos de WEB - HTML, CSS e JS Esp. Marcelo Mendes Esp. Arnaldo Costa Desenvolvimento Java - Turma I](https://reader036.vdocuments.net/reader036/viewer/2022062512/552fc111497959413d8c6240/html5/thumbnails/10.jpg)
CSS - Cascading Style SheetsLinguagem de Estilos
Define a apresentação de documentos escritos em HTML;
Benefício: Prover a separação entre o formato e o conteúdo de um documento
![Page 11: Fundamentos de WEB - HTML, CSS e JS Esp. Marcelo Mendes Esp. Arnaldo Costa Desenvolvimento Java - Turma I](https://reader036.vdocuments.net/reader036/viewer/2022062512/552fc111497959413d8c6240/html5/thumbnails/11.jpg)
CSS - Cascading Style SheetsLinguagem de Estilos
<html><head><title>Exemplo de CSS</title><style>body{ font-family: Arial, Verdana, sans-serif; background-color: #FFF; margin: 5px 10px;}</style></head><body>OLÁ MUNDO.</body></html>
![Page 12: Fundamentos de WEB - HTML, CSS e JS Esp. Marcelo Mendes Esp. Arnaldo Costa Desenvolvimento Java - Turma I](https://reader036.vdocuments.net/reader036/viewer/2022062512/552fc111497959413d8c6240/html5/thumbnails/12.jpg)
CSS - Cascading Style SheetsLinguagem de Estilos
<html><head><title>Exemplo de CSS</title><link rel="stylesheet" type="text/css" href="estilos.css"></head><body>OLÁ MUNDO.</body></html>
Incluindo CSS na página através de link
![Page 13: Fundamentos de WEB - HTML, CSS e JS Esp. Marcelo Mendes Esp. Arnaldo Costa Desenvolvimento Java - Turma I](https://reader036.vdocuments.net/reader036/viewer/2022062512/552fc111497959413d8c6240/html5/thumbnails/13.jpg)
![Page 14: Fundamentos de WEB - HTML, CSS e JS Esp. Marcelo Mendes Esp. Arnaldo Costa Desenvolvimento Java - Turma I](https://reader036.vdocuments.net/reader036/viewer/2022062512/552fc111497959413d8c6240/html5/thumbnails/14.jpg)
Formulários, Tabelas e Formatações
<form name=“formcad” method=“post” action=“endereco.html”
…
</form>
![Page 15: Fundamentos de WEB - HTML, CSS e JS Esp. Marcelo Mendes Esp. Arnaldo Costa Desenvolvimento Java - Turma I](https://reader036.vdocuments.net/reader036/viewer/2022062512/552fc111497959413d8c6240/html5/thumbnails/15.jpg)
Formulários, Tabelas e Formatações
![Page 16: Fundamentos de WEB - HTML, CSS e JS Esp. Marcelo Mendes Esp. Arnaldo Costa Desenvolvimento Java - Turma I](https://reader036.vdocuments.net/reader036/viewer/2022062512/552fc111497959413d8c6240/html5/thumbnails/16.jpg)
Formulários, Tabelas e Formatações
![Page 17: Fundamentos de WEB - HTML, CSS e JS Esp. Marcelo Mendes Esp. Arnaldo Costa Desenvolvimento Java - Turma I](https://reader036.vdocuments.net/reader036/viewer/2022062512/552fc111497959413d8c6240/html5/thumbnails/17.jpg)
Formulários, Tabelas e Formatações
![Page 18: Fundamentos de WEB - HTML, CSS e JS Esp. Marcelo Mendes Esp. Arnaldo Costa Desenvolvimento Java - Turma I](https://reader036.vdocuments.net/reader036/viewer/2022062512/552fc111497959413d8c6240/html5/thumbnails/18.jpg)
Atividade
![Page 19: Fundamentos de WEB - HTML, CSS e JS Esp. Marcelo Mendes Esp. Arnaldo Costa Desenvolvimento Java - Turma I](https://reader036.vdocuments.net/reader036/viewer/2022062512/552fc111497959413d8c6240/html5/thumbnails/19.jpg)
Linguagem JavaScript
Executada no cliente Não protege o código fonte Executada pelo navegador Incompatibilidade com navegadores Bastante utilizada para efeito visuais Utilizada em checagem de formulários
![Page 20: Fundamentos de WEB - HTML, CSS e JS Esp. Marcelo Mendes Esp. Arnaldo Costa Desenvolvimento Java - Turma I](https://reader036.vdocuments.net/reader036/viewer/2022062512/552fc111497959413d8c6240/html5/thumbnails/20.jpg)
Exemplo de JS
![Page 21: Fundamentos de WEB - HTML, CSS e JS Esp. Marcelo Mendes Esp. Arnaldo Costa Desenvolvimento Java - Turma I](https://reader036.vdocuments.net/reader036/viewer/2022062512/552fc111497959413d8c6240/html5/thumbnails/21.jpg)
Código fonte JavaScript
![Page 22: Fundamentos de WEB - HTML, CSS e JS Esp. Marcelo Mendes Esp. Arnaldo Costa Desenvolvimento Java - Turma I](https://reader036.vdocuments.net/reader036/viewer/2022062512/552fc111497959413d8c6240/html5/thumbnails/22.jpg)
Linguagem PHP
Breve histórico da linguagem Personal Home Page Tools – PHP Hipertext Preprocessador – PHP Software livre Independência de Sistema Operacional Código fonte somente no servidor Trabalha em conjunto com html (form’s)
![Page 23: Fundamentos de WEB - HTML, CSS e JS Esp. Marcelo Mendes Esp. Arnaldo Costa Desenvolvimento Java - Turma I](https://reader036.vdocuments.net/reader036/viewer/2022062512/552fc111497959413d8c6240/html5/thumbnails/23.jpg)
Linguagem PHP
Permite mesclagem de HTML+PHP Versão 5 POO – Programação Orientada a Objetos Concorrente da Linguagem JAVA (JEE) Tem suporte a maioria dos banco de dados
![Page 24: Fundamentos de WEB - HTML, CSS e JS Esp. Marcelo Mendes Esp. Arnaldo Costa Desenvolvimento Java - Turma I](https://reader036.vdocuments.net/reader036/viewer/2022062512/552fc111497959413d8c6240/html5/thumbnails/24.jpg)
Características
Independência de servidor web Case sensitive Identifica dinamicamente os tipos de variáveis Segurança Rápido Flexível na configuração (warnings e erros) Não necessita de instalação no cliente
![Page 25: Fundamentos de WEB - HTML, CSS e JS Esp. Marcelo Mendes Esp. Arnaldo Costa Desenvolvimento Java - Turma I](https://reader036.vdocuments.net/reader036/viewer/2022062512/552fc111497959413d8c6240/html5/thumbnails/25.jpg)
Exemplos
![Page 26: Fundamentos de WEB - HTML, CSS e JS Esp. Marcelo Mendes Esp. Arnaldo Costa Desenvolvimento Java - Turma I](https://reader036.vdocuments.net/reader036/viewer/2022062512/552fc111497959413d8c6240/html5/thumbnails/26.jpg)
Resultado no browser
![Page 27: Fundamentos de WEB - HTML, CSS e JS Esp. Marcelo Mendes Esp. Arnaldo Costa Desenvolvimento Java - Turma I](https://reader036.vdocuments.net/reader036/viewer/2022062512/552fc111497959413d8c6240/html5/thumbnails/27.jpg)
Mãos a obra!