programaÇÃo em ambiente web i · 21/08/2016 2 www Éumgrandeconjuntodedocumentos(páginas)...
TRANSCRIPT
21/08/2016
1
PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi
[email protected]://fabianotaguchi.wordpress.com
UM POUCO DE HISTÓRIA
Tudo começou com a ARPANET;
1977ARPANET nasce
1987Das universidades, volta-se a fins comerciais
1991É criado o HTML – HTTP - WWW
21/08/2016
2
WWW
É um grande conjunto de documentos (páginas)interligados, onde cada uma dessas páginaspode conter um tipo de hipermídia:
VídeosSonsHipertextosFiguras
MAIS UM POUCO DE HISTÓRIA
Logo do Mosaic
Mosaic exibindo uma página de 1994
21/08/2016
3
HISTÓRIA: HTML
1992: Primeira aparição do HTML;
1993: HTML + algumas definições de aparência,tabelas e formulários.
1994: HTML 2.0 + padronização de características
1994: HTML 3.0 + extensão do HTML
1995: HTML 3.2 + padronização do Netscape eInternet Explorer.
HISTÓRIA: HTML
2000: XHTML é criado (versão do HTML 4.0);
2004: Surge a Web 2.0;
2008: W3c anuncia a especificação do HTML 5.
2011: Crescente o desenvolvimento do HTML5.
2012: Previsão da versão final do HTML5
Hoje: Difusão de uso do HTML5.
21/08/2016
4
WEB 1.0
Tinha como características:
Estática, não existia interatividade;Destaque para o surgimento dos grandes portais;1994 – Apenas 10 mil sites hospedados.
WEB 2.0
Tinha (tem) como características:
Web colaborativa;Oferece conteúdo dinâmico com interatividade dosusuários;Criação de redes sociais dás mais variadasinstâncias e finalidades.
21/08/2016
5
WEB 3.0
Terá como características:
Geração de conteúdo através da coletividade;Ferramentas para inovação;Terceirização de tarefas para um grande númerode pessoas.
Exemplos: Companhia aérea Azul.Exemplos: Starbucks
LINGUAGEM DE MARCAÇÃO E ESTILOS - HTML
21/08/2016
6
SEPARAÇÃO EM CAMADAS
HTMLConteúdo – Dados e estrutura
CSSApresentação – Cores, fontes e posicionamentos.
JavaScriptComportamentos - Interatividade
21/08/2016
7
HYPERTEXT MARKUP LANGUAGE
Ou simplesmente HTML é uma linguagem demarcação interpretada por um navegador Web,esta linguagem é composta por diversas tagscom atributos que permitem que seja escritoum site.
Tag indica estruturaAtributos são as propriedades de uma estrutura.
ESTRUTURA DE UMA PÁGINA
<!DOCTYPE html><html>
<head><meta charset=“UTF-8” /><title> Minha primeira página em HTML </title>
</head>
<body>Minha primeira informação.
</body></html>
21/08/2016
8
REGRAS HTML
As tags HTML devem ser escritas em letrasminúsculas e devem ser fechadas, bem comoatributos devem sempre ter valores e entreaspas duplas. Exemplos:
<p> Começamos um novo parágrafo </p><b><p> Parágrafo em negrito </p></b><br /><hr /><img src=“imagem.gif” alt=“Foto da cidade” />
TAGS ESTRUTURAIS
21/08/2016
9
BODY
Envolve todo o conteúdo HTML e pode recebervários atributos, dentre eles destacam-se:
bgcolor – Cor de fundobackground – Imagem como plano de fundotext – Cor do texto principallink – Cor dos links existentes na páginaalink – Cor do link que foi ativadovlink – Cor do link que já foi visitado
META
Esta tag fornece informações sobre odocumento que não são mostrados, mas quepodem ser utilizados em buscadores.
<head><meta name=“aula” content=“Programação Web” /><meta name=“keywords” content=“HTML, CSS” /><meta name=“author” content=“Fabiano Taguchi” /><meta charset=“UTF-8” />
</head>
21/08/2016
10
META
A tag ainda pode definir a linguagem natural dapágina, conteúdo padrão e redirecionamento depáginas.
<head><meta http-equiv=“Content-Language” content=“pt-br”><meta http-equiv=“Content-Type” content=“text/html”><meta http-equiv=“refresh” content=“5”; URL=“p1.html”>
</head>
STYLE
Apesar de ser recomendado utilizar regras CSSem arquivos separados (organização), esta tagé utilizada para inserir o CSS diretamente noHTML de uma página. O atributo utilizado é otype.
<style type=“text/css”>body {
color: red;background-color: blue;
</style>
21/08/2016
11
SCRIPT
Tag utilizada para incluir um código JavaScriptem uma página HTML. Os principais atributosutilizados são:
src;type;async;charset.
<script type=“text/Javascript” src=“ania.js”></script>
ATRIBUTOS DE FORMATAÇÃO
21/08/2016
12
FORMATAÇÃO
font Alteração de face (face), cor (color) e tamanho (size)
u Efeito sublinhado
em Efeito enfatizado
s Efeito tachado
sub Efeito subscrito
big Efeito que aumenta o texto
small Efeito que diminui o texto
i Efeito itálico
sup Efeito sobrescrito
TAGS PARA CONTEÚDO
21/08/2016
13
IMAGEM DE FUNDO
O atributo background quando usado na tagbody permite que seja inserido uma imagem defundo em uma página.
<body background=“fotos/Cores.png”>Informações a serem exibidas na página
</body>
PARÁGRAFOS
Representada pela tag <p>, seu objetivo éorganizar textos dentro de uma página HTMLseparando-os. O principal atributo é o align.
<p> Começamos um novo parágrafo </p><p align=“right”> Parágrafo à direita </p><p align=“left”> Parágrafo à esquerda</p>
21/08/2016
14
CORES
Para trabalhar com cores em uma página HTMLdevem ser utilizados os atributos color ebgcolor.
<body bgcolor=“#00ff99”><hr><p color=“#ff0000”> Exemplo de texto </p>
</body>
CABEÇALHOS
21/08/2016
15
PRE
É utilizada para mostrar um texto em suaformatação original, desta forma todos osenters, tab e espaços são preservados.
<pre> Texto separado por dois espaços </pre><pre>
Textoem quebras de linha
</pre>
LINHA HORIZONTAL
Para ser criado uma linha horizontal, a tagutilizada é a <hr>.
<h1> Fabiano Taguchi </h1><hr><h2> [email protected] </h2><h3> http://fabianotaguchi.wordpress.com </h3>
21/08/2016
16
QUEBRAS DE LINHAS
As quebras de linha podem ser executadas como uso da tag <br>.
<p> Esse texto ficaráNa mesma linha. <br>E este em outra linha. </p><font color=“ff0000” size=“3”>
As páginas Web são escritas em HTML</font>
TABULAÇÃO
Para que seja deixado um espaço de margemdentro da página, a tag <blockquote> é utilizada.O efeito desta tag é acumulativo.
<blockquote> Está é o site da XYZ. </blockquote><blockquote> Seja bem vindo </blockquote>
21/08/2016
17
CENTRALIZAR
Um texto pode ser centralizado se for colocadodentro da tag <center>. Esta tag é antiga, e erausada quando não havia formas de centralizartextos.
<center> Está é o site da XYZ. </center><center> Seja bem vindo </center>
ALINHAMENTOS
Para que outros alinhamentos sejam feitos, oatributo align é inserido em várias tags.
<h1 align=“center”> Cabeçalho centralizado </h1><p align=“left”> Parágrafo alinhado à esquerda </p><p align=“right”> Parágrafo alinhado à direita </p><p align=“center”> Parágrafo centralizado </p>
21/08/2016
18
IMAGENS
As imagens são inseridas em um documentoWeb através da tag <img>. Alguns atributospodem ser inseridos:
src – Especifica o caminho físico da imagemalt – Indica um texto alternativotitle – Exibida quando cursor fica sobre a imagemwidth e height – Atributos de largura e alturaborder – Cria borda ao redor da imagem
IMAGENS
Pode ainda na versão 5 do HTML fazer uso datag <figcaption>, que cria uma legenda paraimagem.
<figure><img src=“img/produto.jpeg” alt=“Foto”><figcaption> Produto por R$ 129,90 </figcaption>
</figure>
21/08/2016
19
MAPAS SENSITIVOS
Um mapa consiste em uma imagem que pode sercolocados links em áreas específicas. Como áreaspodem ser usadas: rect, circle ou poly.
<img src="planets.gif“ usemap="#planetmap">
<map name=“mapa1”><area shape=“rect” coords=“300,2,60,60” href= “#”>
</map>
LINKS
A tag que representa um link é a tag <a>, seuprincipal atributo é o href que indic ao local doarquivo. Target também pode ser usado comoatributo, que indica se o link será aberto namesma página ou em uma nova.
<a href=“http://www.google.com.br”> Google </a>
21/08/2016
20
PERSONALIZANDO LINKS
<body vlink=“#ff0000” text=“#ff00ff”><h2>
<a href=“http://www.google.com.br”>Link para acesso ao site do Google
</a></h2>
</body>
ÂNCORAS
São utilizadas como ponto de referência paramarcar o início de uma seção no documento. Noexemplo abaixo é criado a âncora para seção 1.
<a href=“#secao1”> Clique aqui </a><a name=“secao1”> Conteúdo a ser mostrado </a>
21/08/2016
21
LISTAS NÃO ORDENADAS
As listas não ordenadas são representadas pelatag <ul>. Cada item dentro de uma lista estácontido dentro das tags <li>.
<ul type=“square”><li> Tome uma xícara de café </li><li> Veja o sol nascer </li><li> Ouça o canto dos pássaros </li><li> Ouça o vento </li>
</ul>
LISTAS ORDENADAS
São listas nas quais cada item é numerado deforma sequencial. Para criar uma lista ordenada,utilizamos a tag <ol>.
<ol start=“10” type=“A”><li> Inseria o CD-ROM </li><li> Selecione executar </li><li> Digite a letra para o drive de CD-ROM </li><li> siga as instruções de instalação </li>
</ol>
21/08/2016
22
LISTAS DE GLOSSÁRIO
Uma lista de glossário possui duas partes: termoe a definição do termo. Para o termo utiliza-se atag <dt>, para a definição a tag usada é a <dd>.
<dl><dt> Manjericão </dt>
<dd>Anual. Pode crescer até quatro pés de altura
</dd></dl>
ÁUDIO E VÍDEO
Uma forma de adicionar áudio e vídeo empáginas Web é fazendo uso da tag embed. OHTML5 possui suporte para adicionar mídiaatravés do elemento <audio> e do elemento<video>, fazendo uso de alguns atributos:
controls – Cria controles padrão para áudio e vídeoautoplay – Reprodução automáticaloop – Repetição automaticamente do arquivowidht e height – Largura e altura do elemento
21/08/2016
23
ÁUDIO E VÍDEO
Exemplos de aplicação dos elementos <audio> e <video>:
<audio src=“musica.mp3”></audio><video src=“filme.wma”></video><video src=“audio.mp3” width=“300px” height=“300px” controls=“controls” autoplay=“autoplay” />
TABELAS
21/08/2016
24
TABELAS
Uma tabela é criada a partir da tag <table>.Cada linha dentro da tabela é criado com a tag<tr>, por sua vez cada célula dentro de umalinha pela tag <td>.
<table><tr>
<td> </td><td> </td>
</tr></table>
TABELAS
Entre os principais atributos de tabela temos:
background – Imagem do plano de fundo;bgcolor – Cor do plano de fundo;border – Largura da borda em pixels;cellpading – Espaçamento nas células;cellspacing – Espaçamento entre as células;width – Largura da tabelaalign – Alinhamento da tabelabordercolor – Cor na borda da tabela
21/08/2016
25
TABELAS
<table border=“1”><tr>
<td> Primeira coluna </td><td> Segunda coluna </td><td> Terceira coluna </td>
</tr><tr>
<td> Primeira coluna </td><td> Segunda coluna </td><td> Terceira coluna </td>
</tr></table>
TABELAS
<table border=“2”><caption> Dados do curso </caption><tr>
<td> Nome do curso </td><td> Valor do curso </td><td> Nome do professor </td>
</tr></table>
21/08/2016
26
TABELAS
<table border=“2” cellpading=“2”><tr>
<td colspan=“2”> Primeira linha </td></tr><tr>
<td> Primeira coluna </td><td> Segunda coluna </td>
</tr></table>
TABELAS
<table border=“2” cellpading=“2”><tr>
<td> Programação Web </td><td> R$ 250,00 </b><td rowspan=“2”> José Joaquim </n>
</tr><tr>
<td> Lógica de Programação </td><td> R$ 120,00 </td>
</tr></table>
21/08/2016
27
TABELAS
<table border=“2” cellpading=“2”><caption> Dados do curso </caption><tr>
<th> Nome do curso </th><th> Valor do curso </th><th> Nome do professor </th>
</tr><tr>
<td> Programção Web </td><td> R$ 250,00 </td><td> José Joaquim </td>
</tr></table>
LINHAS DE TABELAS
Como visto, para criar uma linha de uma tabelaa tag <tr> é criada. Alguns atributos podem serutilizados nas linhas:
align – Alinhamento do conteúdo da linhavalign – Alinhamento vertical do conteúdobgcolor – Define uma cor de segundo plano para linha
21/08/2016
28
TABELAS
<table border=“2” align=“center” bgcolor=“ff4321”><tr>
<td> Nome do curso </td><td valign=“top” nowrap> Valor </td>
</tr><tr>
<td> Programação Web </td><td> R$ 250,00 </td>
</tr></table>
EXERCÍCIO
21/08/2016
29
FRAMES
FRAMES
<html><head>
<title> Usando frames </title></head><frameset cols=“150,650”>
<frame src=“menu.html” name=“Menu”><frame src=“principal.html” name=“Principal”>
</frameset></html>
21/08/2016
30
PÁGINA MENU.HTML
<html><head>
<title> Menu </title></head><body bgcolor=“#99ff33”>
<a href=“Principal.html” target=“Principal”> </a><a href=“Java.html” target=“Principal”> </a><a href=“JavaMe.html” target=“Principal”> </a>
</body></html>
PÁGINA PRINCIPAL.HTML
<html><head>
<title> Principal </title></head><body bgcolor=“#669966”>
Principal</body>
</html>
21/08/2016
31
PÁGINA JAVA.HTML
<html><head>
<title> Java </title></head><body bgcolor=“#669966”>
Java</body>
</html>
PÁGINA JAVAME.HTML
<html><head>
<title> Java </title></head><body bgcolor=“#669966”>
Java ME</body>
</html>
21/08/2016
32
FRAMES – DOIS FRAMESETS
<html><head>
<title> Usando frames </title></head><frameset rows=“150,400”>
<frame src=“cabecalho.html” name=“Cabecalho”><frameset cols=“150,650”>
<frame src=“menu.html” name=“Menu”><frame src=“principal.html” name=“Principal”>
</frameset></frameset>
</html>
PÁGINA CABECALHO.HTML
<html><head>
<title> Cabeçalho </title></head><body bgcolor=“#669966”>
<font align=“center”> Cabeçalho </font></body>
</html>
21/08/2016
33
EXERCÍCIOS
EXERCÍCIOS