Apres Programacao Web

IFPA - ETEC - UAB
Programao Web
Joo Siqueira Novaes
Novembro - 2010
Objetivos
Apresentar os conceitos da programao para web;
2 de 56
Roteiro
Introduo ao Universo Web; Modelos e tecnologias Linguagens HTML
3 de 56
Conceitos Bsicos
WWW A Internet um conglomerado de redes em escala mundial. A World Wide Web, "a Web" ou "WWW", uma rede de computadores na Internet que fornece informao em forma de hipertexto. Outros sevios: acesso remoto a outras mquinas, transferncia de arquivos, correio eletrnico, boletins eletrnicos, bate-papo online, mensagens instantneas.
4 de 56
Conceitos Bsicos
Web Sites Um site ou stio, um conjunto de pginas Web, isto , de hipertextos acessveis geralmente pelo protocolo HTTP na Internet. O conjunto de todos os sites pblicos existentes compe a World Wide Web.
5 de 56
Conceitos Bsicos
Web Sites Estticos So web sites que no existem nenhum tipo de personalizao. Toda e qualquer informao est disponvel para o pblico em geral. Web Sites Dinmicos Ao contrrio dos web sites estticos, web sites dinmicos so web sites que trabalha com personalizao. As informaes iro variar por visitante.
6 de 56
Conceitos Bsicos
Navegao Para ver a informao na Web, pode-se usar um software chamado navegador (browser) para descarregar informaes (chamadas "documentos" ou "pginas") de servidores de internet (ou "sites") e mostr-los na tela do usurio.
7 de 56
Modelos e tecnologias
Modelo Cliente-Servidor
8 de 56
Estrutura URI Sequncia de caracteres, cujo contedo permite identificar elementos da rede, sejam eles fsicos ou virtuais.
9 de 56
Protocolo HTTP HTTP (Protocolo de Transferncia de Hipertexto) e o protocolo utilizado por clientes e servidores para transferncia de dados hipermdia na World Wide Web.
10 de 56
Programao do lado cliente

HTML CSS JavaScript
11 de 56
Programao do lado cliente

A programao do lado cliente tudo aquilo que executado no browser, sem precisar que seja requisitado ao servido. Essas linguagens so executadas diretamente pelo navegador.
12 de 56
Programao do lado servidor

PHP .NET Java Servidores web
13 de 56
Programao do lado servidor

Linguagens de programao de alto nvel com recursos como: Orientao a objetos Acesso a banco de dados Trabalham em conjunto com o HTML
14 de 56
Servidores web
Um programa de computador responsvel por aceitar pedidos HTTP de clientes Responde tambm em HTTP Normalmente pginas web, tais como documentos HTML com objetos embutidos (imagens, etc.) Ex: Apache, IIS, Apache TomCat
15 de 56
HTML
HyperText Markup Language, que significa Linguagem de Marcao de Hipertexto Linguagem de marcao utilizada para produzir pginas na Web Documentos HTML podem ser interpretados por navegadores.
16 de 56
HTML
Elementos bsicos
<html> <head> <title>e-Tec IFPA</title> </head> <body> Texto livre <p>Paragrafo</p> Texto livre com quebra<br> Texto livre com quebra </body> </html>
17 de 56
HTML
Cabealho
<html> <head> <title>e-Tec IFPA</title> </head> <body> <h1>Cabealhos Nvel 1</h1> <h2>Cabealhos Nvel 2</h2> <h2>Cabealhos Nvel 2</h2> </body> </html>
18 de 56
HTML
Listas
<html> <body> <ul> <li>Introduo <li>HTML <ul> <li>Inserindo texto <ul> <li>Cor do texto </ul> <li>Inserindo imagens <li>Tabelas </ul> <li>CSS </ul> </body> </html>
19 de 56
HTML
Formatao do texto
<html> <head> <title>e-Tec IFPA</title> </head> <body> <b>negrito</b> <br> <i>itlico</i> <br> <u>sublinhado</u> <p>Mas a <b><i>formatacao</i></b> tambem pode aparece no meio de outros marcadores<p> </body> </html>
20 de 56
HTML
Formatao do texto: cor, tamanha e fonte
<html> <head> <title>e-Tec IFPA</title> </head> <body> <font color="#0000FF">Letra na cor azul</font><br> <font size="15">Letra tamanho 15</font><br> <font face="arial">Fonte da letra</font><br> <font color="red" size="5" face="verdana">Cor, tamanho e fonte na mesma tag</font><br> </body> </html>
21 de 56
HTML
Formatao para toda pgina
<html> <head> <title>e-Tec IFPA</title> </head> <body> <body bgcolor="#E9967A" text="#00008B"> Assim defino cor do fundo e do texto para toda a pagina!<br> Eh isso ai!<br> Eh verdade mesmo!<br> <font color="red" size="5" face="verdana">Mas posso definir outras formataes</font><br> </body> </html>
22 de 56
HTML
Imagem
<html> <head> <title>e-Tec IFPA</title> </head> <body> <body> Imagem no tamanho natural<br> <img src="ifpa_logo.jpg"><br> Imagem com tamanho definido no html<br> <img src="ifpa_logo.jpg" width="100" height="50"> </body> </html>
23 de 56
HTML
Localizao da imagem
<html> <head> <title>e-Tec IFPA</title> </head> <body> <body> Se a imagem estive na mesma pasta<br> <img src="ifpa_logo.jpg"><br> Se a imagem estive em outra pasta<br> <img src="/imagens/ifpa_logo.jpg"><br> Pode at voltar uma pasta<br> <img src="../imagens/ifpa_logo.jpg"><br> </body> </html>
24 de 56
HTML
Links
<html> <body> <a href=musicas.html>Abrir outra pagina de seu site</a><br> <a href="http://www.ifpa.edu.br">Abrir outro site</a><br> <a href="http://www.ifpa.edu.br" target="_blank">Abrir outro site em outra instancia do navegador</a> </body> </html>
25 de 56
HTML
Imagem como link
<html> <body> <a href="http://www.ifpa.edu.br/"><img src="ifpa_logo.jpg"></a> </body> </html>
26 de 56
HTML
Tabelas
<html> <body> <table width="400" border="1" bgcolor="#836FFF"> <tr> <th align="center">Alunos</th> <th align="left ">aluno01</th> <th align="right">aluno02</th> </tr> <tr> <td align="center">Sistemas Operacionais</td> <td align=" left ">10</td> <td align="right">9</td> </tr> </table> </body> </html>
27 de 56
HTML
Tabelas
<html> <body> <table border=1 bgcolor='yellow'> <tr> <td colspan=2 bgcolor='red'>Titulo celula mesclada</td> </tr> <tr> <td>1 coluna - 2 linha</td><td>2 coluna - 2 linha</td> </tr> </table> </body> </html>
28 de 56
HTML
Formulrio
<html> <body> Cadastro de Alunos<br> <form name="input" action="acao.php" method="post"> Nome: <input type=text name=nome size=35><br> Matricula: <input type=text name=matricula size=10><br> Senha: <input type=Password name=senha size=10><br> Sexo: <input type="radio" name="sexo" value="masculino"/> Masculino <input type="radio" name="sexo" value="feminino"/> Feminino<br> Curso: <select name="curso"> <option value="1">Informtica <option value="2">Turismo <option value="3">Eletrnica </select><br> <input type="submit" value="Enviar"/> <input type="reset" value="Limpar"/> </form> </body> </html>
29 de 56
CSS
Arquivo CSS Estilo para a pagina toda
body { font: 14px times; background-color:#EFEFF7; margin: 1px; }
30 de 56
CSS
Arquivo CSS Estilo para uma tag especifica
p { text-align: center; color: black; font-family: arial }
31 de 56
CSS
Arquivo CSS Estilo para uma classe
.textopreto { font-family: tahoma, verdana, arial; font-size: 11px; color: #000000; font-style: bold; }
32 de 56
CSS
Anexando o arquivo ccs ao html
<head> <link href="estilos.css" rel="stylesheet" type="text/css" /> </head>
33 de 56
CSS
Exemplo
<html> <head> <link href="estilos.css" rel="stylesheet" type="text/css" /> </head> <body> O estilo deste texto eh definido pelo seletor body <p>Jah este pelo seletor p</p> <h1 class="textopreto">Mas esse usa o seletor de classe chamado textopreto</h1> </body> </html>
34 de 56

Apres Programacao Web

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apres Programacao Web

Enviado por

Direitos autorais:

Formatos disponíveis

IFPA - ETEC - UAB

Joo Siqueira Novaes

Programao do lado cliente

Programao do lado cliente

Programao do lado servidor

Programao do lado servidor

Você também pode gostar