PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com 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 1
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 MAIS UM POUCO DE HISTÓRIA Logo do Mosaic Mosaic exibindo uma página de 1994 2
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 e Internet 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. 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 dos usuários; Criação de redes sociais dás mais variadas instâncias e finalidades. 4
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úmero de pessoas. Exemplos: Companhia aérea Azul. Exemplos: Starbucks LINGUAGEM DE MARCAÇÃO E ESTILOS - HTML 5
SEPARAÇÃO EM CAMADAS HTML Conteúdo Dados e estrutura CSS Apresentação Cores, fontes e posicionamentos. JavaScript Comportamentos - Interatividade 6
HYPERTEXT MARKUP LANGUAGE Ou simplesmente HTML é uma linguagem de marcação interpretada por um navegador Web, esta linguagem é composta por diversas tags com atributos que permitem que seja escrito um 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> 7
REGRAS HTML As tags HTML devem ser escritas em letras minúsculas e devem ser fechadas, bem como atributos devem sempre ter valores e entre aspas 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 8
BODY Envolve todo o conteúdo HTML e pode receber vá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 o documento que não são mostrados, mas que podem 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> 9
META A tag ainda pode definir a linguagem natural da página, conteúdo padrão e redirecionamento de pá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 CSS em arquivos separados (organização), esta tag é utilizada para inserir o CSS diretamente no HTML de uma página. O atributo utilizado é o type. <style type= text/css > body { color: red; background-color: blue; </style> 10
SCRIPT Tag utilizada para incluir um código JavaScript em uma página HTML. Os principais atributos utilizados são: src; type; async; charset. <script type= text/javascript src= ania.js > </script> ATRIBUTOS DE FORMATAÇÃO 11
FORMATAÇÃO font u em s sub big small i sup Alteração de face (face), cor (color) e tamanho (size) Efeito sublinhado Efeito enfatizado Efeito tachado Efeito subscrito Efeito que aumenta o texto Efeito que diminui o texto Efeito itálico Efeito sobrescrito TAGS PARA CONTEÚDO 12
IMAGEM DE FUNDO O atributo background quando usado na tag body permite que seja inserido uma imagem de fundo 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 HTML separando-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> 13
CORES Para trabalhar com cores em uma página HTML devem ser utilizados os atributos color e bgcolor. <body bgcolor= #00ff99 > <hr> <p color= #ff0000 > Exemplo de texto </p> </body> CABEÇALHOS 14
PRE É utilizada para mostrar um texto em sua formatação original, desta forma todos os enters, 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 tag utilizada é a <hr>. <h1> Fabiano Taguchi </h1> <hr> <h2> fabianotaguchi@gmail.com </h2> <h3> http://fabianotaguchi.wordpress.com </h3> 15
QUEBRAS DE LINHAS As quebras de linha podem ser executadas com o 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 margem dentro da página, a tag <blockquote> é utilizada. O efeito desta tag é acumulativo. <blockquote> Está é o site da XYZ. </blockquote> <blockquote> Seja bem vindo </blockquote> 16
CENTRALIZAR Um texto pode ser centralizado se for colocado dentro da tag <center>. Esta tag é antiga, e era usada quando não havia formas de centralizar textos. <center> Está é o site da XYZ. </center> <center> Seja bem vindo </center> ALINHAMENTOS Para que outros alinhamentos sejam feitos, o atributo 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> 17
IMAGENS As imagens são inseridas em um documento Web através da tag <img>. Alguns atributos podem 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 IMAGENS Pode ainda na versão 5 do HTML fazer uso da tag <figcaption>, que cria uma legenda para imagem. <figure> <img src= img/produto.jpeg alt= Foto > <figcaption> Produto por R$ 129,90 </figcaption> </figure> 18
MAPAS SENSITIVOS Um mapa consiste em uma imagem que pode ser colocados links em áreas específicas. Como áreas podem 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>, seu principal atributo é o href que indic ao local do arquivo. Target também pode ser usado como atributo, que indica se o link será aberto na mesma página ou em uma nova. <a href= http://www.google.com.br > Google </a> 19
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 para marcar o início de uma seção no documento. No exemplo abaixo é criado a âncora para seção 1. <a href= #secao1 > Clique aqui </a> <a name= secao1 > Conteúdo a ser mostrado </a> 20
LISTAS NÃO ORDENADAS As listas não ordenadas são representadas pela tag <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 de forma 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
LISTAS DE GLOSSÁRIO Uma lista de glossário possui duas partes: termo e a definição do termo. Para o termo utiliza-se a tag <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 em páginas Web é fazendo uso da tag embed. O HTML5 possui suporte para adicionar mídia através do elemento <audio> e do elemento <video>, 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 22
Á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 23
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 uma linha pela tag <td>. <table> <tr> </tr> </table> <td> </td> <td> </td> 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 24
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> 25
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> 26
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 tabela a tag <tr> é criada. Alguns atributos podem ser utilizados nas linhas: align Alinhamento do conteúdo da linha valign Alinhamento vertical do conteúdo bgcolor Define uma cor de segundo plano para linha 27
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 28
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> 29
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> 30
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> 31
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> 32
EXERCÍCIOS EXERCÍCIOS 33