Escolar Documentos
Profissional Documentos
Cultura Documentos
Protocolo
Protocolo o conjunto de regras sobre o modo como que se dar a comunicao das partes envolvidas.
Protocolo
Os protocolos (de camada de aplicao) mais comuns na internet so: HTTP: Navegao de Pginas FTP: Transferncia de Arquivos HTTPS: Navegao de Pginas Seguras
TCP/IP
TCP/IP o protocolo padro utilizado na internet. A grosso modo, podemos dizer que o protocolo responsvel por enviar e receber mensagens. Ele faz uma ligao virtual entre o computador de origem e o computador de destino.
TCP/IP
IP
Todo dispositivo conectado a internet identificado por um endereo de rede denominado endereo IP. O endereo ip nico, cada dispositivo possui um endereo vlido e com o nmero de designao diferente. Nas redes internas de computadores, os endereos ip s so denominados ips falsos, pois esto fora da faixa de ips reais (Internet).
IP
Portas
Todas as aplicaes e servios que funcionam em rede utilizam portas para comunicao. Exemplos: HTTP: Utiliza porta 80. HTTPS: Utiliza porta 443. FTP: Utiliza porta 21.
Portas
HTTP PORTA 80
HTTP PORTA 80
Manda o endereo http://www.terra.com.br Servidor DNS retorna o endereo ip Computador Acessa o Site
MTODOS
Mtodos em HTML so utilizados para submeter valores de uma pgina para outra pgina ou script. Os mtodos mais utilizados so POST e GET.
POST
Envia os dados para o servidor, porm, no os envia atravs da URL. Os dados so enviados no corpo da mensagem. Utilizar mtodo POST quando:
O resultado do pedido tem efeito persistente no servidor. Se houver muitos dados a serem enviados
GET
Envia informaes ao servidor utilizando a URL como meio de passar os dados. Utilizar mtodo GET quando:
Quando for fazer apenas uma pesquisa simples. No houver efeito persistente no servidor. Os dados dos input Fields forem menores que 1k
HTML
Hypertext Markup Language
HTML
Antes de surgir o HTML, o ciberespao j possua os seus navegantes, porm, os servios oferecidos eram insuficientes. Troca de mensagem e transferncia de arquivos eram os principais servios. Quando o HTML foi inventado por Tim Berners Lee, ele pensou apenas em facilitar os detalhes que envolvem a publicao de documentos na web.
HTML
A linguagem HTML foi criada para simplificar a elaborao de textos mescaldos com figuras, sons, animaes e ligaes (link) entre diversos textos. Esses textos que mesclam recursos multimdia e links so chamados de hipertextos (hyperlinks).
HTML
HTML uma linguagem especializada, dedicada construo e exibio de pginas Web. Consiste exclusivamente de linhas de programas em forma de texto comum e de cdigos especiais (comandos) conhecidos como TAGs. Da mesma forma que outra linguagem, em HTML o programador tambm precisa escrever o cdigo fonte seguindo uma sintaxe especfica.
HTML
Mais tarde este cdigo interpretado linha a linha pelo navegador (browser) que executar o contedo da pgina. Quando um navegador exibe uma determinada pgina de internet, ele l internamente o comandos (tags) daquela pgina e executa-os on-line, exibindo em segundos o resultado na janela do navegador.
HTML Nveis
Estrutura HTML em nveis:
1 nvel 2 nvel 3 Nvel
<html>
<head> <body>
HTML Nveis
Outros nveis: Os outros nveis de html esto todos dentro do corpo da pgina html (body). Esses nveis so tags para formatao da pgina.
HTML Comando H*
<H*> -> A tag <H*> indica ao html que dentro dessa tag haver um cabealho (Ttulo). Essa tag pode ir do nmero 1 ao nmero 5. Exemplo: <h1></h1> <h4></h4> <h2></h2> <h5></h5> <h3></h3> <h3></h3>
HTML Exerccio
1 - Crie uma pgina HTML com a estrutura bsica. Dentro do corpo da pgina digite as 5 formas diferentes de cabealhos (tag h)
HTML BR
<br /> -> A tag <br /> utilizada para saltar linha. Antigamente os desenvolvedores utilizavam apenas <BR> sem o /. No padro de hoje (w3c) a tag br possui o / pois toda tag deve ser fechada.
O endereo da imagem deve ser escrito completo quando voc estiver inserindo imagem de outro site. Quando a imagem estiver dentro do prprio site e na mesma pasta da pgina html, bata informar o nome da imagem.
Imagem na Internet
<img src= http://www.xemplo.com.br/mario.gif width= 100 height= 200 alt= Super Mrio Bros />
HTML Comando HR
<hr/> Este comando faz aparecer na pgina HTML uma linha horizontal. Seus atributos so: Size Define a espessura da linha Width Define o comprimento da linha Color Define a cor da linha A formatao da tag <hr/> geralmente feita em CSS, no mais utilizando seus atributos html.
HTML Comando HR
Exemplo: <hr width= 600 size= 4 color= red /> O comando pode tambm ser utilizado sem atributos ou formatao CSS.
HTML Comando P
<p> A tag <p> define um pargrafo no html. Quando declarado, automaticamente salta uma linha. A formatao desta tag deve ser feita toda em CSS conforme padro w3c. Exemplo: <p>Aqui o texto a ser inserido</p>
Listas
HTML Listas
Existem trs tipos de listas: Ordenada (ordered) tag <OL> No ordenadas (unordered) tag <UL> De definio (definition) tag <DL>
Lista Exerccio
1 - Crie 5 pginas HTML. Cada pgina deve conter uma lista com no mnimo dez itens no ordenados. Utilize a criatividade para gerar as pginas sem repertir as listas.
Formulrios WEB
Formulrios WEB
Assim como nas linguagens desktop, o html possui tags que possibilitam o usurio interagir com as pginas html atravs de labels, inputs, etc. atravs do formulrio que o usurio poder enviar informaes para o site e tais informaes podero ser armazenadas em bancos de dados.
Formulrios WEB
Tags dos formulrios: <form> - Essa tag define o incio de um formulrio dentro da pgina HTML. Os elmentos de interao esto localizados dentro desta tag. A tag form sem elementos no serve para nada. Parmetros da tag <form>: Method Especifica qual mtodo ser utilizado para o envio dos dados. GET ou POST
Formulrios WEB
Action Define uma ao a ser realizada com o formulrio. Existem duas possibilidades:
O formulrio enviado a um endereo eletrnico. O formulrio enviado a um programa ou script que processa o seu contedo.
Name Define o nome do formulrio para posteriormente ser usado com JavaScript.
Formulrios WEB
Enctype Indica a forma na qual viajar a informao que for mandada pelo formulrio. No caso mais comum, enviar um formulrio para um correio eletrnico, o valor deste atributo deve ser text/plain . Esse atributo define que o contedo ser enviado como um texto plano dentro do e-mail.
Formulrios WEB
Exemplos:
<form action="mailto:endereo@correio.com" ></form> <form method= post action= cadastrar.php ></form> <form name= form1 method= get action= pesquisar > </form> <form action="mailto:endereo@correio.com (ou o nome do arquivo de processo)" method="post" enctype="text/plain">
Formulrios WEB
A tag <form> a tag principal de um formulrio. No desenvolvimento WEB clssico, todos os elementos de inputs ,labels, selects, etc. precisam estar dentro desta tag. Hoje com a tecnologia AJAX a tag form j no mais necessria. Capturamos os dados, definimos o mtodo e chamamos o script utilizando JavaScript.
Nesse exemplo eu necessito usar ids e nomes iguais. Se forem diferentes, no possvel capturar a escolha do usurio.
length
index
index
Cols: Define a quantidade de colunas. Rows: define a quantidade de linhas. Value: Define o contedo padro no campo text area.
Frames
Frames
O objetivo dos frames mostrar mais de uma pgina HTML na mesma janela do browser. Cada frame declarado possui uma pgina HTML diferente. O uso do frame deve levar em conta o bom senso. Vamos estudar vantagens e desvantagens de se utilizar os frames:
Frames
Vantagens: Navegao de pginas mais rpida. O primeiro carregamento igual enquanto os demais sero mais rpidos por as pginas j estarem em cache. Processo de desenvolvimento das pginas se torna mais rpido por reaproveitar partes da pgina (por exemplo menu).
Frames
Desvantagens: Fora o usurio a utilizar sempre a pgina que contm os frames. Se ele entrar no caminho direto de um HTML que seja parte de um frame, ele no ver o resto do contedo da pgina. Adicionar a pgina aos favoritos pode ser um problema (h mais de uma pgina para ser salva)
Frames
Desvantagens: Pode interferir negativamente no uso do java script
Frames
Tag <frameset> A tag frameset serve para dividir a janela em frames. Cada Frameset define um conjunto de linhas ou colunas. Para utilizar o frameset de forma correta, devemos usar os atributos cols (coluna) e rows (linhas).
Frames
Exemplo:
<frameset cols= 25%,25%,* <frame src= pagina1.html <frame src= pagina2.html <frame src= pagina3.html </frameset> > /> /> />
A coluna de um frameset (cols) pode ser definido por porcentagem ou por pixels. O * neste caso significa que o terceiro ter 50%
Frames
Em uma pgina principal de frames ns no temos a tag body. Exemplo:
<html> <frameset rows= 25%,25%,* > <frame src= pagina1.html /> <frame src= pagina2.html /> <frame src= pagina3.html /> </frameset> </html>
Frames
Atributos: Framespacing: Define a distncia de um frame do outro. FrameBorder: Se voc colocar o valor 0, as bor das desaparecem ( o aconselhvel). Noresize: Parmetro que define que o frame no pode ser redimensionado. (noresize= noresize ).
Frames
Atributos: Scrolling: Permite que o frame possua rolamento. No usar esse atributo quanto usar o atributo noresize (no funcionar).
Frames
Tag noframes: usado para navegadores que no possuam suporte a frames. Dentro dessa tag voc pode construiur o body do seu html. Observao: Dificilmente hoje voc ter browsers que no suportam frames.
IFRAMES
IFrames
IFRAME: Essa tag ir criar dentro do seu html um frame. No necessrio utilizar a tag frameset. Exemplo: <iframe src= www.terra.com.br ></iframe> Esta soluo mais interessante do que o uso dos frames tradicionais.
IFrames
Atributos: Src Define o endereo da pgina que ir aparecer dentro do seu html. Frameborder Define a borda do frame.
Eventos HTML
Eventos HTML
Todas as tags html podem acionar comandos Java Script. Para isso, h uma srie de eventos conforme seguir: onblur Ocorre toda vez que um objeto perde o foco, seja atravs da seleo de um outro objeto na pgina com o mouse, ou pressionando a tecla tab.
Eventos HTML
onchange Ocorre toda vez que um elemento perde o foco e seu contedo tiver sido modificado. onclick Ocorre toda vez que um elemento seja clicado pelo mouse. ondbclick Ocorre toda vez que um elemento recebe um clique duplo com o mouse.
Eventos HTML
onfocus Ocorre toda vez que um elemento recebe o foco. onkeydown Ocorre toda vez que uma tecla pressionada sobre um elemento na pgina. onkeypress Ocorre toda vez que uma tecla pressionada e liberada sobre um elemento na pgina.
Eventos HTML
onkeyup Ocorre toda vez que uma tecla liberada sobre um objeto na pgina. onload Ocorre toda vez que uma pgina carregada. Serve para o body e o frameset. onmousedown Ocorre toda vez que o boto de seleo do mouse for pressionado sobre um elemento na pgina.
Eventos HTML
onmousemove Ocorre toda vez que o cursor do mouse for movido sobre um objeto na pgina. onmouseout Ocorre toda vez que o cursor do mouse sair de cima de um objeto na onmouseover Ocorre toda vez que o cursor do mouse estiver em cima de um objeto na pgina.
Eventos HTML
onmouseup Ocorre toda vez que o boto de seleo do mouse for liberado sobre um objeto na pgina. onreset Ocorre toda vez que o contedo de um formulrio for resetado. Este evento se aplica apeans tag form. onselect - Ocorre toda vez que o usurio selecionar um contedo na pgina.
Eventos HTML
onsubmit Ocorre toda vez que um formulrio for submetido. Este evento se aplica somente tag form. onunload Ocorre toda vez que o navegador remove a pgina ou um frame. Por exemplo, toda vez que o navegador fechado ou uma nova pgina aberta, este evento ocorre. Este evento pode esr usado apenas com as tags body e frameset.