Linguagem de Programação WEB

Prévia do material em texto

*
*
Linguagem de Programação WEB
Arquitetura CLIENTE / SERVIDOR
*
*
Cliente/Servidor
Modelo onde os processos são divididos entre aplicações
“cliente” e aplicações “servidor”:
Cliente:
	Requisita uma informação a outro computador (servidor)
	Formata a requisição e a resposta do servidor
Servidor:
	Recebe a requisição cliente
	Responde
*
*
Cliente/Servidor
A maioria das aplicações na Internet são cliente/servidor:
	HTTP
	Browser (cliente) 	Servidor HTTP (servidor)
	FTP
	Cliente FTP (cliente) 	Servidor FTP (servidor)
	Banco de Dados
	Browser/Aplicativo 	Servidor de Banco de Dados (servidor)
*
*
Cliente/Servidor
Como Funciona:
	O Browser – CLIENTE - envia uma solicitação, por exemplo, para http://www.senac.br
	Na máquina que responde por senac.br (servidor) existe uma aplicação SERVIDOR, chamado Servidor HTTP, que responde as requisições por páginas
	O Servidor http localiza os arquivos do site e envia ao browser solicitante
	O browser recebe os arquivos do site e “formata” para a exibição para o usuário. A formatação é feita seguindo as instruções do HTML, uma linguagem criada especificamente para formatação de dados na Internet.
*
*
Cliente/Servidor
Como Funciona:
O endereço do site é digitado no navegador (software cliente de http)
O navegador então faz uma requisição pela internet ao servidor especificado no endereço
Máquina do usuário
Navegador
(cliente)
*
*
Cliente/Servidor
Como Funciona:
servidor
O software que serve (servidor) o serviço de web responde a requisição do cliente e envia os dados. Como estamos tratando de web, esses dados serão enviados junto com uma formatação, especificando a forma como esses dados serão exibidos/tratados, usando para isso a linguagem de formatação HTML.
*
*
Cliente/Servidor
A maioria das aplicações na Internet são cliente/servidor:
O modelo Cliente/Servidor diz respeito ao modo como a informação é tratada, em nível de SOFTWARE, dentro de uma estrutura de rede também cliente/servidor.
*
*
Formatação de Documentos - HTML
*
*
HTML
O que é?
	HTML (HyperText Markup Language) é uma “linguagem”, ou um conjunto de comandos (chamados de “tag”) que dizem respeito a formatação de um documento, ou seja, tratam da forma como o documento será exibido no navegador (browser).
	Portanto, um arquivo HTML (ou uma página web) é apenas um documento que contém informações adicionais (comandos HTML ou simplesmente “tags”) de formatação que são interpretadas por um navegador.
Exemplo:
					Texto Digitado		Texto Exibido
Texto comum:		Boa Noite!		Boa Noite!
Com o efeito negrito:		<b>Boa Noite!</b>	Boa Noite!
	
*
*
HTML
Outros Exemplos:
				Texto Digitado			Resultado
Texto comum:		Boa Noite!			Boa Noite!
Com o efeito negrito:	<b>Boa Noite!</b>		Boa Noite!
Com o efeito negrito:	Boa <b>Noite!</b>		Boa Noite!
Com o efeito itálico:		<i>Boa Noite!</i>			Boa Noite!
Com o efeito sublinhado:	<u>Boa Noite!</u>		Boa Noite!
Negrito e sublinhado:	<u><b>Boa Noite!</b></u>	Boa Noite!
	
*
*
HTML
Primeiras Conclusões:
	HTML se resume a comandos (tags) posicionados dentro de um documento dependendo da formatação desejada
	Fazer uma página consiste em criar um documento com elementos de formatação
	As “tags” HTML são instruções colocadas dentro de < e >
	As “tags” possuem inicio e fim. No exemplo “boa noite”, observe que foi usado para aplicar o efeito negrito uma tag <b> para iniciar o efeito, e a partir daquele ponto segue o negrito ate que seja encontrado uma tag para terminar o efeito, que no caso foi usado a </b> 
	A diferença entre a tag de inicio e fim é apenas uma / inserida dentro da tag de finalização.
*
*
HTML
Por que estudar HTML?
	Apesar de existirem uma grande variedade de softwares chamados de editores de HTML, que facilitam o trabalho evitando que o usuário entenda tags html para fazer web sites (como o FrontPage, HomeSite, entre outros), é importante e extremamente recomendado o conhecimento de HTML porque:
	Vários editores possuem limitações
	Você poderá criar os efeitos que quiser
	Você poderá compreender a formatação HTML de outros sites e incorporá-los na sua página.
	Necessidade de inserir tags em aplicações PHP
*
*
HTML
Arquivo .HTML:
	Os documentos formatados com HTML, conhecidos também como páginas web, são arquivos com extensão .htm ou .html … 
	
	… armazenados em uma máquina que possui um software Servidor, que envia os dados desses arquivos pela internet de acordo com as requisições dos clientes (browsers)
	por exemplo, produtos.html é um arquivo formatado com HTML
*
*
HTML
Por dentro do arquivo .HTML:
		
	
	
	armazenados em uma máquina que possui um software Servidor, que envia os dados desses arquivos pela internet de acordo com as requisições dos clientes (browsers)
Tags
*
*
HTML
Resultado do arquivo .HTML:
		
	
	
	
*
*
HTML
Estrutura do arquivo .HTML:
<html>
</html>
<head>
</head>
<body>
</body>
Cabeçalho:
	com título e informações técnicas do documento
Corpo:
	o documento propriamente dito, todo o conteúdo do site que será formatado e exibido
*
*
HTML
Exemplo:
<html>
<head>
	<title>Página do SENAC CRATO</title>
</head>
<body>
	<b>Boa Noite!</b> Conheça aqui nossos cursos
</body>
</html>
Obs.: 	Este documento pode ser digitado usando qualquer editor 
		de html ou em editores de “somente texto” como o Bloco de Notas.
		O exemplo acima foi digitado no bloco de notas e salvo com o nome 	pagina.html
*
*
HTML
Resultado da primeira página:
*
*
HTML
Conjunto de “tags”:
<html>	- inicio/fim do documento
<head>	- inicio/fim do cabeçalho
<title>	- inicio/fim do título da página
<body>	- inicio/fim do corpo da página
<b>		- negrito
<i>		- itálico
<u>		- sublinhado
<br>		- salto (ou “quebra”) de linha
<sup>		- texto em sobrescrito
<sub>		- texto em subscrito
<font face=“nome-da-fonte” size=tamanho color=“cor”>
	 		- define a fonte do texto	
*
*
HTML
Exemplo:
<html>
<head>
	<title>Página do SENAC CRATO</title>
</head>
<body>
<b><font face=“Verdana” size=4>Boa Noite!</font></b>
<br><br>
<font face=“Arial” size=3 color=“blue”>
	Conheça aqui nossos cursos </font>
</body>
</html>
*
*
HTML
Resultado:
*
*
HTML
2º Conjunto de “tags”:
<basefont face=nome-da-fonte size=tamanho color=cor>
			- define fonte para toda a página - não tem tag-fim
<p>		- inicio/fim do parágrafo (equivalente a 2 <br>) 
<p align=“tipo”> - left/right/center
			- alinhamento do parágrafo
<center>	- centraliza o texto
<div align=“tipo”> - left/right/center/justify
			- alinhamento do texto
*
*
HTML
Exemplo:
<html>
<head>
	<title>Página do SENAC CRATO</title>
</head>
<body>
	
	<basefont face="Verdana" size=2>
<b><center><font size=4>Boa Noite!</font></center></b>
<br><br>
<p align="right">Conheça aqui nossos cursos</p>
<p align="left">Administração</p>
<div align="left">Saúde</div>
<p align="left"><font color="blue">Informática</font></p>
<p align="left">Arte</p>
</body>
</html>
*
*
HTML
Resultado:
*
*
HTML
Listas:
<ul type=“tipo”> - circle/square/disc
			- define listas (marcadores) de itens
<li>		- especificação de cada item na lista
<ol type=“tipo” start=“inicio”> - 1/I/i/A/a
			- define listas (numeradores) de itens
<li>		- especificação de cada item na lista
*
*
HTML
Exemplo:
<html>
<head>
	<title>Página do SENAC CRATO</title>
</head>
<body>
	
	<basefont face="Verdana" size=2>
<b><center><font size=4>Boa Noite!</font></center></b>
<br><br>
<p align=“center">Conheça aqui nossos cursos</p>
	<ul type=“disc”>
	<li>Administração</li>
	<li>Saúde </li> 
		<li><font color="blue">Informática</font></li> 
	<li>Arte</li>
	</ul>
</body>
</html>
*
*
HTML
Resultado:
Usando 
	<ol type="1" start="7"> 
ao invés do 
	<ul>
*
*
HTML
Background:
<body bgcolor=“cor”>
			- define uma cor para o “background” da página
<body background=“arquivo-de-imagem”>
			- define uma imagem para o background
			se uma imagem for menor que a página, ela é 				repetida automaticamente preenchendo a página
			Obs.: 	nas próximas páginas iremos falar sobreimagens e cores
*
*
HTML
Exemplo:
<html>
<head>
	<title>Página do SENAC CRATO</title>
</head>
<body bgcolor=“skyblue”>
	
	<basefont face="Verdana" size=2>
<b><center><font size=4>Boa Noite!</font></center></b>
<br><br>
<p align=“center">Conheça aqui nossos cursos</p>
	<ul type=“disc”>
	<li>Administração</li>
	<li>Saúde </li> 
		<li><font color="blue">Informática</font></li> 
	<li>Arte</li>
	</ul>
</body>
</html>
*
*
HTML
Resultado:
Usando 
<body background=“jornal.jpg“> 
*
*
*
HTML
Resumo da aula anterior:
	HTML é uma linguagem de formatação baseada em comandos (tags) posicionados dentro do documento, com extensão .html
	Um documento HTML segue um padrão de estrutura, com <html> (documento), <head> (cabeçalho) e <body> (corpo)
Tags:
	Estrutura: <html>, <head>, <title>, <body>
	Texto: <b>, <i>, <u>, <sub>, <sup>, <font>, <basefont>
	Alinhamento: <br>, <center>, <p>, <div>
	Listas: <ol>, <ul>, <li>
	Background: parâmetros bgcolor e background no <body>
	
*
*
HTML
Imagens:
	Na construção de uma página usamos imagens de formatos específicos. Os 2 formatos mais usados são: GIF e JPG
	Os formatos representam o modo como as imagens são armazenadas. Como na Internet o fator velocidade é importante, os formatos GIF e JPG oferecem compressão, reduzindo o tamanho do arquivo final que o usuário irá “baixar” da página
	
1.psd
2.psd
*
*
HTML
Características dos formatos GIF e JPG:
	GIF: 	* 256 cores no máximo
			* suporta efeito de transparência
			* suporta efeito de animação
				- bom para: cliparts, figuras e imagens de texto
				- ruim para: fotografias
	JPG: 	* “ilimitadas” cores
			* não suporta efeito de transparência
			* não suporta efeito de animação
				- bom para: fotografias
				- ruim para: cliparts, figuras e imagens de texto
		Ou seja, imagens complexas e fotos usamos JPG, outros casos, 	usamos GIF
*
*
HTML
Imagens:
	
jpg
gif
3.psd
*
*
HTML
1 - jpg
2 - gif
*
*
HTML
Colocando imagens do HTML:
<img src=“arquivo da imagem”>	- insere a imagem
<img src=“arquivo da imagem” width=“largura” height=“altura”> 	- altera largura e altura da imagem
<img src=“arquivo da imagem” border=“tipo”>
					- insere uma bordana imagem
<img src=“arquivo da imagem” alt=“texto explicativo”>	
					- insere “ajuda” para a imagem
<img src=“arquivo da imagem” align=“alinhamento”>	
					- alinhamento da imagem em relação ao 				texto
*
*
HTML
Exemplos:
<body>
<img src="f1.jpg">A Federação Internacional de Automobilismo (FIA) divulgou esta segunda-feira a lista oficial das equipes
que vão disputar a próxima temporada da Fórmula-1. O Alemão Michael Schumacher ficou com o tradicional número 1, 
reservado ao campeão mundial, enquanto o brasileiro Rubens Barrichello será o 2. 
</body>
<body>
<img src="f1.jpg“ align="left">A Federação Internacional de Automobilismo (FIA) divulgou esta segunda-feira a lista oficial das equipes que vão disputar a próxima temporada da Fórmula-1. O Alemão Michael Schumacher ficou com o tradicional número 1, 
reservado ao campeão mundial, enquanto o brasileiro Rubens Barrichello será o 2. 
</body>
*
*
HTML
Resultados:
*
*
HTML
Detalhes sobre o formato GIF:
	Na construção de um arquivo .gif podemos determinar (usando um editor gráfico apropriado) áreas do gif que serão transparentes:
	
*
*
HTML
Tabelas:
	As tabelas são usadas com 2 propósitos em uma página: a tabela propriamente dita e como uma forma de construir o LAYOUT da página (o que perdeu espaço para o css)através de tabelas transparentes.
Tags principais:
<table> 	- define a tabela, início e fim
<table border=“tipo”> 	- define a tabela com borda
<tr>		- inicio/fim de uma linha dentro da tabela 
<td>		- inicio/fim de uma coluna dentro da linha
Alguns parâmetros comuns ao <table>, <tr> e <td>: 
	align, valign, bgcolor, width, height
Align = alinhamento horizontal: 
	left (esquerda), right (direita) e center (centralizado)
Valign = alinhamento vertical:
	middle (centro), top (topo) e bottom (baixo)
Width = Largura
Height = Altura
*
*
HTML
Exemplo 1:
<table border=1>
<tr>
	<td>Fortaleza</td>
	<td>Recife</td>
</tr>
<tr>
	<td>João Pessoa</td>
	<td>Aracajú</td>
</tr>
</table>
*
*
HTML
Exemplo 2:
<table border=1 align=center>
<tr>
	<td>Fortaleza</td>
	<td>Recife</td>
</tr>
<tr>
	<td>João Pessoa</td>
	<td>Aracajú</td>
</tr>
</table>
*
*
HTML
Exemplo 3:
<table border=1 width=250>
<tr>
	<td>Fortaleza</td>
	<td>Recife</td>
</tr>
<tr>
	<td>João Pessoa</td>
	<td>Aracajú</td>
</tr>
</table>
*
*
HTML
Exemplo 4:
<table border=1 width=100%>
<tr>
	<td>Fortaleza</td>
	<td>Recife</td>
</tr>
<tr>
	<td>João Pessoa</td>
	<td>Aracajú</td>
</tr>
</table>
*
*
HTML
Exemplo 5:
<table border=1 width=100%>
<tr>
	<td align="center">Fortaleza</td>
	<td bgcolor=“blue">Recife</td>
</tr>
<tr>
	<td height="80">João Pessoa</td>
	<td valign="top">Aracajú</td>
</tr>
</table>
*
*
HTML
Tabelas – mais comandos:
<table cellpadding="n" cellspacing="n"> 	
					- margem dentro da célula e distância 					entre as células
Ex: <table border=1 cellpadding=“8” cellspacing=“8” width=100%>
*
*
HTML
Tabelas – mais comandos:
<td colspan=“nºcolunas” rowspan=“nºlinhas”>
					- mescla linhas e/ou colunas
Ex: 
<table border="1" width=100%>
<tr>
	<td colspan="2" align="center">Ceará</td>
</tr>
<tr>
	<td>Fortaleza</td>
	<td>Capital</td>
</tr>
<tr>
	<td>Crato</td>
	<td>Cariri</td>
</tr>
</table>
*
*
HTML
Exercício:
*
*
HTML
Links:
	HTML, além da formatação, oferece um dos recursos que caracteriza as páginas na internet: o hipertexto. Hipertexto é o nome dado a um documento que possui vínculos (links) com outros documentos.
	Os Links podem ser de 3 tipos: 
	âncoras na página local: apontam para partes específicas na própria página
	páginas locais: apontam para outras páginas dentro do mesmo site
	páginas globais: apontam para outros sites.
	
		<a href=“link”> </a>	- cria um link
*
*
HTML
Links:
	Veja a agenda dos cursos: <a href="agenda.html">Agenda</a><br>
Depois visite esse site: 
	<a href="http://www.folha.com.br">Folha On-line</a><br>
*
*
HTML
Links:
	Um LINK possui 3 cores diferentes: a cor quando o link ainda não foi “clicado”, a cor quando o link está ativo e a cor do link já visitado
	<body link="cor" vlink=“cor" alink=“cor"> 
	
*
*
HTML
Links:
	Quando clicamos num link, a próxima página será exibida na mesma janela da página atual. Existe um parâmetro do <a href> para mudar isso:
	<a href=“agenda.html” target=“_blank”> 
		_blank abre outra janela para exibir o conteúdo da página linkada.
	
*
*
HTML
Links:
	Uma imagem também pode ser um link:
	<a href=“agenda.html”><img src=“webmaster.jpg”></a>
	
*
*
HTML
Exercício:
	Faça uma outra página chamada info.html como no exemplo ao lado e crie um link para ela na página de agenda criada no exercício anterior, no texto “Desenvolvedor para Internet” (substitua “informática Básica por este)