AULA 02 - fabianotaguchi.files.wordpress.com · 17/01/2016 1 PROGRAMAÇÃO EM AMBIENTE WEB I Prof....
22
17/01/2016 1 PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi [email protected] http://fabianotaguchi.wordpress.com UM POUCO DE HISTÓRIA Tudo começou com a ARPANET; 1977 ARPANET nasce 1987 Das universidades, volta-se a fins comerciais 1991 É criado o HTML – HTTP - WWW WWW É um grande conjunto de documentos (páginas) interligados, onde cada uma dessas páginas pode conter um tipo de hipermídia: Vídeos Sons Hipertextos Figuras
Transcript of AULA 02 - fabianotaguchi.files.wordpress.com · 17/01/2016 1 PROGRAMAÇÃO EM AMBIENTE WEB I Prof....
17/01/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
WWW
É um grande conjunto de documentos (páginas)interligados, onde cada uma dessas páginaspode conter um tipo de hipermídia:▸ Vídeos▸ Sons▸ Hipertextos▸ Figuras
17/01/2016
2
MAIS UM POUCO DE HISTÓRIA
Logo do Mosaic
Mosaic exibindo uma página de 1994
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.
17/01/2016
3
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.
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
17/01/2016
4
LINGUAGEM DE MARCAÇÃO E ESTILOS - HTML
SEPARAÇÃO EM CAMADAS▸ HTML▸ Conteúdo – Dados e estrutura▸ CSS▸ Apresentação – Cores, fontes e posicionamentos.▸ JavaScript▸ Comportamentos - Interatividade
17/01/2016
5
HYPERTEXT MARKUP LANGUAGE
Ou simplesmente HTML é uma linguagem demarcação interpretada por um navegador Web,esta linguagem é composta por diversas tags
com atributos que permitem que seja escritoum site.▸ Tag indica estrutura▸ Atributos 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>
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” />
17/01/2016
6
TAGS ESTRUTURAIS
BODY
Envolve todo o conteúdo HTML e pode recebervários atributos, dentre eles destacam-se:▸ bgcolor – Cor de fundo▸ background – Imagem como plano de fundo▸ text – Cor do texto principal▸ link – Cor dos links existentes na página▸ alink – Cor do link que foi ativado▸ vlink – 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>
17/01/2016
7
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>
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>
17/01/2016
8
ATRIBUTOS DE FORMATAÇÃO
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
17/01/2016
9
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>
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>
17/01/2016
10
CABEÇALHOS
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>▸ Texto▸ em 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>
17/01/2016
11
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>
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>
17/01/2016
12
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>
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 imagem▸ alt – Indica um texto alternativo▸ title –exibida quando cursor fica sobre a imagem▸ width e height – Atributos de largura e altura▸ border – Cria borda ao redor da imagem▸ align – Alinhamento da imagem com um texto.
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>
17/01/2016
13
MAPAS SENSITIVOS
Um mapa consiste em uma imagem que pode sercolocados links em áreas específicas. Como áreaspodem ser usadas: rect, circle ou poly.▸ <map name=“mapa1”>▸ <área 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>
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>
17/01/2016
14
Â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>
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>
17/01/2016
15
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<vídeo>, fazendo uso de alguns atributos:▸ controls – Cria controles padrão para áudio e vídeo▸ autoplay – Reprodução automática▸ loop – Repetição automaticamente do arquivo▸ widht e height – Largura e altura do elemento
Á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” />
17/01/2016
16
TABELAS
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 tabela▸ align – Alinhamento da tabela▸ bordercolor – Cor na borda da tabela
17/01/2016
17
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>
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>
17/01/2016
18
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>
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 linha▸ valign – Alinhamento vertical do conteúdo▸ bgcolor – Define uma cor de segundo plano para linha
17/01/2016
19
TABELAS▸ <table border=“2” align=“center” bgcolor=“ff4321”>▸ <tr>▸ <td> Nome do curso </td>▸ <td valign=“top” nowrap> Valor </td>▸ </tr>▸ <tr>▸ <td> Programção Web </td>▸ <td> R$ 250,00 </td>▸ </tr>▸ </table>
FRAMES
EXERCÍCIO
17/01/2016
20
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>
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>
17/01/2016
21
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>
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>
17/01/2016
22
PÁGINA CABECALHO.HTML▸ <html>▸ <head>▸ <title> Cabeçalho </title>▸ </head>▸ <body bgcolor=“#669966”>▸ <font align=“center”> Cabeçalho </font>▸ </body>▸ </html>
EXERCÍCIOS
EXERCÍCIOS
