html, css e javascript - alfamídia [versão 2007]

8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]

1/136

WEB

HTML, CSS e

JavaScript

Agosto de 2007Versão 1


2/136

Web, HTML, CSS e JavaScript

2 2007 Alfamidia Prow LTDA.

Todos os direitos reservados para Alfamídia Prow LTDA.

AVISO DE RESPONSABILIDADE

As informações contidas neste material de treinamento são distribuídas “NO ESTADO EMQUE SE ENCONTRAM”, sem qualquer garantia, expressa ou implícita. Embora todas as precauções tenham sido tomadas na preparação deste material, a Processor AlfamídiaLTDA. não tem qualquer responsabilidade sobre qualquer pessoa ou entidade com respeitoà responsabilidade, perda ou danos causados, ou alegadamente causados, direta ouindiretamente, pelas instruções contidas neste material ou pelo software de computador e produtos de hardware aqui descritos.

01/08/2007

Alfamídia Prow LTDAAv. Cristóvão Colombo 1496Porto Alegre, RS(51) 3073-2100http://www.alfamidia.com.br


3/136



WEB,

HTML, CSS eJavaScript

UNIDADE 1 ARQUITETURA DE APLICAÇÕES WEB................................................................................................. 7

1.1 I NTERNET – UM POUCO DE HISTÓRIA ............................................................................................... 7 1.2 PÁGINAS ESTÁTICAS ....................................................................................................................... 7 1.3 I NTRODUÇÃO A CLIENT SIDE SCRIPTS E SERVER SIDE SCRIPTS ...................................................... 8

1.3.1 Client Side Scripts e Server Side Scripts ................................................................................... 8 1.3.2 Client Side scripts – Javascript ................................................................................................. 8 1.3.3 Server Side Scripts – ASP, ASP.NET, PHP e JSP ..................................................................... 9

1.4 AMBIENTE DE DESENVOLVIMENTO ............................................................................................... 11 1.5 SERVIDORES WEB E DE APLICAÇÃO ............................................................................................. 11

1.5.1 O que é um Servidor WEB? ..................................................................................................... 11 1.5.2 O que é um servidor de aplicações? ........................................................................................ 13

1.6 NAVEGADORES ............................................................................................................................. 13 1.6.1 Padronização e protocolos de acesso .......... .......... ........... .......... ........... .......... .......... ........... ... 14 1.6.2 HTTPS (HyperText Transfer Protocol Secure) ............ ........... .......... ........... .......... .......... ....... 14

UNIDADE 2 INTRODUÇÃO AO HTML E WEB STANDARDS.................................................................................. 16

2.1 A LINGUAGEM HTML E A I NTERNET ............................................................................................ 16 2.2 AS LIMITAÇÕES DO HTML ........................................................................................................... 16

2.3 OS WEB STANDARDS .................................................................................................................... 17 2.4 W3C ............................................................................................................................................. 17 2.5 IMPORTÂNCIA DOS WEB STANDARDS ........................................................................................... 17

UNIDADE 3 HTML – RECURSOS BÁSICOS ............................................................................................................. 19

3.1 POR QUE E NTENDER O HTML? ..................................................................................................... 19 3.2 CONCEITOS BÁSICOS DE HTML ................................................................................................... 19 3.3 TAGS BÁSICAS .............................................................................................................................. 20

3.3.1 Exemplo de HTML com Tags Básicas ........... .......... ........... .......... .......... ........... .......... ........... . 20 3.3.2 Familiarizando-se com o HTML .......... .......... ........... .......... ........... .......... .......... ........... .......... 21

3.4 FORMATAÇÃO DE TEXTOS ............................................................................................................ 21 3.4.1 Exemplo de Títulos e Subtítulos .......... ........... .......... .......... ........... .......... .......... ........... ........... . 22 3.4.2 Exemplo de Alinhamentos ........... ........... .......... .......... ........... .......... ........... .......... ........... ........ 23 3.4.3

Exemplo de Formatação de Textos.......... ........... .......... ........... .......... ........... .......... .......... ....... 25

3.5 CORES EM HTML ......................................................................................................................... 26 3.5.1 Utilizando o Vermelho ............................................................................................................. 27 3.5.2 Utilizando o Vermelho com Verde .......... .......... ........... .......... .......... ........... .......... .......... ......... 28

UNIDADE 4 INCLUINDO IMAGENS EM UMA PÁGINA ............................................................................................ 29

4.1 FAZENDO R EFERÊNCIA A OUTROS DOCUMENTOS ......................................................................... 29 4.1.1 Referência Relativa ........... .......... ........... .......... ........... .......... .......... ........... .......... .......... ......... 29 4.1.2 Referência Absoluta ........... .......... ........... .......... ........... .......... .......... ........... .......... .......... ......... 29 4.1.3 Referência Externa .......... .......... ........... .......... ........... .......... ........... .......... ........... .......... .......... 30


4/136



4.2 I NCLUINDO IMAGENS COM A TAG IMG ......................................................................................... 30 4.2.1 Incluindo Imagens – Exemplo 1 .............................................................................................. 30 4.2.2 Alinhando Imagens – Exemplo2 .............................................................................................. 31

4.3 I NCLUINDO IMAGENS NO FUNDO DA PÁGINA – TAG BODY ......................................................... 33 4.3.1 Fundo com Padronagem ............... .......... ........... .......... ........... .......... ........... .......... .......... ....... 34

UNIDADE 5 CRIANDO LINKS .................................................................................................................................... 35

5.1 HIPERLINKS................................................................................................................................... 35 5.1.1 Página com Links – Exemplo 1 ............................................................................................... 35

UNIDADE 6 CRIANDO TABELAS .............................................................................................................................. 37

6.1 TABELAS E LAYOUT DE PÁGINAS .................................................................................................. 37 6.2 CONSTRUINDO UMA TABELA ........................................................................................................ 37

6.2.1 Exemplo de uma Tabela Simples .......... .......... ........... .......... ........... .......... .......... ........... .......... 38 6.2.2 Tabelas Mais Sofisticadas ....................................................................................................... 39 6.2.3 Construindo uma Tabela mais Sofisticada .............................................................................. 43 6.2.4 Integrando Recursos em Tabelas............. ........... .......... ........... .......... .......... ........... .......... ....... 44

UNIDADE 7 FORMULÁRIOS ...................................................................................................................................... 45

7.1 I NTRODUÇÃO A FORMULÁRIOS ..................................................................................................... 45 7.2 CRIANDO UM FORMULÁRIO .......................................................................................................... 45 7.3 UM PRIMEIRO FORMULÁRIO ......................................................................................................... 46 7.4 FORMULÁRIOS COM DIFERENTES TIPOS DO INPUT ...................................................................... 47 7.5 E NTRADA DE VÁRIAS LINHAS DE TEXTO - TEXTAREA ................................................................ 49 7.6 MENUS COM OPÇÕES - SELECT ................................................................................................... 50

UNIDADE 8 INTRODUÇÃO A ESTILOS CSS ............................................................................................................ 52

8.1 O CSS ........................................................................................................................................... 52 8.2 BENEFÍCIOS EM UTILIZAR CSS ..................................................................................................... 52 8.3 CSS PARA SEPARAR CONTEÚDO DA APRESENTAÇÃO ................................................................... 53 8.4 PÁGINAS COM SEMÂNTICA CORRETA ........................................................................................... 54 8.5 SINTAXE DO CSS .......................................................................................................................... 55 8.6 APLICANDO ESTILOS A UMA PÁGINA ............................................................................................. 56

8.6.1 Aplicando estilos a toda a página HTML ........... .......... ........... .......... ........... .......... .......... ....... 56 8.6.2 Aplicando estilos à apenas uma tag HTML específica .......... .......... ........... .......... .......... ......... 56 8.6.3 Utilizando um arquivo de estilos externo ................................................................................ 57

8.7 FORMAS DE UTILIZAÇÃO DOS SELETORES ..................................................................................... 57 8.7.1 Aplicando estilos à uma tag: .............. ........... .......... .......... ........... .......... ........... .......... ........... . 57 8.7.2 Definindo estilos para mais um grupo de tags ............... .......... ........... .......... ........... .......... ..... 58 8.7.3 Definindo uma classe de estilos .......... ........... .......... .......... ........... .......... .......... ........... ........... . 59 8.7.4 Definindo um ID de estilos ................. ........... .......... .......... ........... .......... ........... .......... ........... . 59

8.8 EXERCÍCIOS .................................................................................................................................. 62

UNIDADE 9

CSS NA PRÁTICA .................................................................................................................................. 63 9.1 UTILIZANDO CSS EM SITUAÇÕES R EAIS ....................................................................................... 63

9.2 CRIANDO TABELAS COM ESTILOS CSS ......................................................................................... 63 9.3 DADOS EXIBIDOS EM UMA TABELA COM CSS ............................................................................... 63 9.4 ALTERANDO O ESTILO CSS .......................................................................................................... 65 9.5 DADOS E FORMULÁRIOS COM CSS................................................................................................ 66 9.6 EXERCÍCIOS COM CSS ................................................................................................................... 68

UNIDADE 10 INTRODUÇÃO AO JAVASCRIPT ..................................................................................................... 69


5/136



10.1 O QUE É JAVASCRIPT?................................................................................................................... 69 10.2 O NDE OS SCRIPT PODEM SER EXECUTADOS ? ................................................................................ 69

UNIDADE 11 NOÇÕES BÁSICAS DE JAVASCRIPT ............................................................................................. 70

11.1 UTILIZANDO COMENTÁRIOS ......................................................................................................... 70 11.2 TIPOS DE DADOS ............................................................................................................................ 70

11.2.1 Tipos de dados Primitivos (por valor) ................................................................................ 71 11.2.2 Tipos de dados Compostos (por referência) ....................................................................... 71 11.2.3 Tipos de dados especiais (undefined e Null) .......... ........... .......... ........... .......... ........... ........ 71

11.3 VARIÁVEIS .................................................................................................................................... 72 11.4 OPERADORES ................................................................................................................................ 73 11.5 A ESTRUTURA DE UM SCRIPT JAVASCRIPT .................................................................................... 74 11.6 CRIANDO UM SCRIPT EM UMA PÁGINA HTML ............................................................................... 75 11.7 ESTRUTURAS DE TESTE ................................................................................................................. 75 11.8 ESTRUTURAS DE REPETIÇÃO ......................................................................................................... 77

11.8.1 While ................................................................................................................................... 77 11.8.2 For ........... .......... ........... .......... ........... .......... .......... ........... .......... ........... .......... ........... ........ 77

UNIDADE 12 UTILIZANDO FUNÇÕES ................................................................................................................... 79

12.1 UTILIZANDO FUNÇÕES NO JAVASCRIPT ......................................................................................... 79 12.2 AS FUNÇÕES INTRÍNSECAS DO JAVASCRIPT ................................................................................... 79

12.2.1 A função Eval() ........... .......... ........... .......... ........... .......... ........... .......... ........... .......... .......... 79 12.2.2 A função parseInt() e parseFloat() ................ .......... ........... .......... ........... .......... .......... ....... 80 12.2.3 Função escape() e unescape() ................ .......... ........... .......... ........... .......... .......... ........... ... 81 12.2.4 A função isNaN() ............. ........... .......... .......... ........... .......... ........... .......... .......... ........... ..... 81

12.3 FUNÇÕES CRIADAS PELO USUÁRIO ................................................................................................ 81

UNIDADE 13 UTILIZANDO OBJETOS ................................................................................................................... 83

13.1 OBJETOS INTRÍNSECOS .................................................................................................................. 83 13.1.1 O Objeto Date ..................................................................................................................... 83 13.1.2 O Objeto Array ................................................................................................................... 84 13.1.3 O Objeto Math .................................................................................................................... 85 13.1.4 O Objeto String ................................................................................................................... 86

13.2 OBJETOS CRIADOS PELO USUÁRIO ................................................................................................. 86 13.3 MÉTODOS ...................................................................................................................................... 87

13.3.1 Métodos estáticos .......... .......... ........... .......... .......... ........... .......... ........... .......... .......... ......... 87 13.3.2 A declaração this ............................................................................................................ 87 13.3.3 A declaração with ............................................................................................................ 87

UNIDADE 14 CONHECENDO OBJECTS DOM ...................................................................................................... 89

14.1 I NTRODUÇÃO A DOM: .................................................................................................................. 89 14.2 O QUE É HTML DOM? ................................................................................................................ 89 14.3 QUANDO DEVEMOS USAR JAVASCRIPT ......................................................................................... 89 14.4 AS DIVISÕES DE DOM ................................................................................................................... 89 14.5 ALTERAR CONTEÚDO COM HTML DOM ...................................................................................... 89 14.6 DOCUMENT OBJECTS .................................................................................................................... 90 14.7 PROPRIEDADES DO OBJETO BODY .................................................................................................. 90 14.8 OBJETO FORM ............................................................................................................................... 91

14.8.1 Atributos do Form .......... ........... .......... ........... .......... ........... .......... ........... .......... .......... ....... 93 14.8.2 Métodos de um FORM .......... ........... .......... ........... .......... ........... .......... ........... .......... .......... 93 14.8.3 Eventos de um form ........... .......... ........... .......... ........... .......... ........... .......... ........... .......... ... 93 14.8.4 “Elements” de um FORM ................................................................................................... 94


6/136



14.9 MÉTODO GETELEMENTBYID......................................................................................................... 94 14.10 OBJETO FRAMESET ....................................................................................................................... 95

14.10.1 Atributos do Objeto frameset ........... .......... ........... .......... ........... .......... .......... ........... .......... 96

14.10.2 Metodos de Objeto Frameset ........... .......... ........... .......... ........... .......... .......... ........... .......... 96 14.10.3 Eventos de objeto de um Frameset ................ .......... ........... .......... ........... .......... .......... ....... 96

UNIDADE 15 MANIPULANDO FORMS COM DOM ................................................................................................ 98

15.1 TUTORIAL ..................................................................................................................................... 98 15.2 MAPEANDO EVENTOS DE UM FORMULÁRIO ................................................................................. 102

15.2.1 Mapeando Eventos através da tag script .......... ........... .......... ........... .......... ........... .......... . 102 15.2.2 Mapeando eventos através de funções ........... .......... ........... .......... ........... .......... .......... ..... 103 15.2.3 Mapeamento de eventos através de atribuição .......... .......... ........... .......... ........... .......... ... 104

15.3 EXTRAINDO INFORMAÇÕES DOS FORMULÁRIOS HTML .............................................................. 105 15.3.1 Buscando informações de formulários não nomeados ................... .......... .......... ........... ... 105 15.3.2 Buscando informações de formulários nomeados .......... ........... .......... .......... ........... ........ 106

15.4 VALIDANDO INFORMAÇÕES NO FORMULÁRIO ............................................................................. 107 15.4.1 Validando informações de caixas de texto .......... .......... ........... .......... ........... .......... .......... 107 15.4.2 Validando listas de seleção simples e múltipla (Combo e ListBox) .......... ........... .......... ... 108 15.4.3 Validando caixas de escolha simples e múltipla (RadioButton e CheckBox) ................... 110 15.4.4 Criando uma função para mascaras de campos .......... .......... ........... .......... ........... .......... . 112

15.5 VALIDAÇÃO COM R EGULAR EXPRESSIONS (R EGEX)................................................................... 114

UNIDADE 16 OBJETO WINDOW .......................................................................................................................... 115

7.1 MÉTODOS DO OBJETO WINDOW ................................................................................................... 115

UNIDADE 17 - ANEXO 1 PRINCIPAIS TAGS ....................................................................................................... 119

UNIDADE 18 - ANEXO 2 FRAMES ....................................................................................................................... 124

18.1 ESTRUTURA BÁSICA - FRAMESET ................................................................................................ 124 18.1.1 Atributos de Frameset .......... .......... ........... .......... .......... ........... .......... ........... .......... .......... 125

18.1.2 Frame............ .......... ........... .......... ........... .......... ........... .......... ........... .......... ........... .......... . 130


7/136



Unidade 1

Arquitetura de Aplicações WEB

1.1 Internet – um pouco de história

A Internet teve início nos Estados Unidos em 1969 sob o nome de ARPANET. Compostainicialmente de quatro computadores interligados, ela tinha como finalidade demonstraras potencialidades da construção de redes usando computadores dispersos em uma grandeárea. Em 1972, 50 universidades e instituições militares já possuíam conexões.

Hoje a Internet é uma arquitetura de software e hardware interligados que são mantidas por organizações comerciais e governamentais. Uma de suas principais características é

que não possui um proprietário único, responsável pelo seu funcionamento. Existemapenas associações e grupos que se dedicam a desenvolver protocolos e procedimentos para suportar a interligação entre os computadores, ratificar padrões e resolver questõesoperacionais.

1.2 Páginas Estáticas

A exibição de páginas estáticas na Web inclui dois componentes: o navegador e oservidor Web. O processo é o seguinte:

1. O usuário solicita a página digitando a URL em um navegador.

2. O navegador solicita a página ao servidor Web usando o HTTP (Hypertext TransferProtocol).

3. O servidor Web envia a página ao navegador no formato HTML.


8/136



Solicitação HTTP

4. O navegador interpreta o HTML e exibe a página para o usuário. Ele tambéminterpreta algumas linguagens de script, como JavaScript.

Processamento de página pelo navegador

1.3 Introdução a Client Side Scripts e Server Side Scripts

1.3.1 Client Side Scripts e Server Side Scripts

Embora existam diversas linguagens com diferentes objetivos, nos exemplos práticosdeste curso estaremos nos concentrando em dois tipos de linguagens muito utilizados emaplicações Web: client side scripts e server side scripts.

1.3.2 Client Side scripts – Javascript

São códigos de programa que são processados pela estação cliente. Geralmente em

aplicações voltadas à Internet, o código que é executado no cliente cuida apenas de pequenas consistências de telas e validações de entrada de dados.


9/136



Tratando-se de páginas web, os client-side scripts terão de ser processados por um browser. O maior problema de se utilizar este tipo de artifício em uma aplicação é aincompatibilidade de interpretação da linguagem entre os browsers. O Microsoft Internet

Explorer, por exemplo, é capaz de interpretar o Visual Basic Script, porém o Netscapenão o faz sem o auxílio de um plug in (que foi desenvolvido por terceiros). Há ainda o problema de versões muito antigas de navegadores, que não conseguem interpretarnenhum script.

Em grande parte das situações, não é possível exigir que o usuário final disponha dedeterminado produto para acessar a aplicação. Portanto é importante pesar todos estesfatores ao planejar alguma aplicação com client-side scripts.

A linguagem script mais indicada para se construir client-side scripts é o JavaScript,devido a sua compatibilidade com os diversos browsers (Internet Explorer, FireFox,Opera, Safári, etc).

Os scripts client-side são geralmente indicados para:

menus dinâmicos

movimento e trocas dinâmicas de imagens e textos

validação de campos de formulários sem acesso ao servidor

efeitos na página de acordo com o movimento do mouse

Funcionamento de scripts client-side

1.3.3 Server Side Scripts – ASP, ASP.NET, PHP e JSP

São códigos de programa que são processados no servidor. Devido a este fato, não énecessário preocupar-se com a linguagem que o código foi criado: o servidor é quem seencarrega de interpretá-lo e de devolver uma resposta para o cliente. Em páginas Asp, sãoesses códigos os maiores responsáveis pelos resultados apresentados, e a linguagemdefault utilizada é o Visual Basic Script. Em páginas PHP, a linguagem é o próprio PHP.Em páginas JSP, a linguagem utilizada é o Java.


10/136



A cada acesso a uma página, estes scripts geram dinamicamente uma página que éenviada para o browser. Desta forma, diferente de scripts no cliente, estes nunca sãovistos pelo cliente, não podendo ser copiados.

Os scripts server-side são geralmente indicados para:

acesso a bancos de dados

criação de páginas em tempo real

lojas virtuais com carrinhos de compra

sistemas de cadastro e consulta de dados

sites de busca na Internet

Requisição Normal

Requisição de página dinâmica


11/136



1.4 Ambiente de desenvolvimento

Como scripts, sejam server-side (ASP, PHP) ou client-side (Javascript) são arquivos dotipo texto (ASCII), eles podem ser escritos em um editor de textos comum – Edit ou Notepad, por exemplo. Para o desenvolvimento em ASP existe também o MS VisualStudio(ASP.NET), que proporciona um ambiente mais agradável de desenvolvimento,mas exige os mesmos conhecimentos do programador.

Diferentes fabricantes desenvolvem ambientes de desenvolvimento, que podem ou nãoser específicos para uma linguagem. A Adobe, por exemplo, tem como produto oDreamweaver, que além de definir a digramação de sites, pode da mesma forma serutilizado como ambiente de desenvolvimento

Também em software livre existem inúmeros ambientes de desenvolvimento para Java,PHP e mesmo para linguagens proprietárias como ASP.

1.5 Servidores WEB e de Aplicação

1.5.1 O que é um Servidor WEB?

Um servidor web é um aplicativo responsável por fornecer ao computador do cliente(usuários de sites e páginas eletrônicas), em tempo real, os dados solicitados. O processose inicia com a conexão entre o computador onde está instalado o servidor e ocomputador do cliente; como na web não é possível prever a que hora se dará essa

conexão, os servidores precisam estar disponíveis dia e noite. A partir daí é processado o pedido do cliente, e conforme as restrições de segurança e a existência da informaçãosolicitada, o servidor devolve os dados.

Quando falamos em servidor web, estamos na verdade falando de servidores capazes delidar com o protocolo HTTP, que é o padrão para transmissão de hipertexto. Muitosservidores trabalham, paralelamente, com outros protocolos, como HTTPS (que é oHTTP "seguro"), FTP, RPC, etc.

Além de transmitir páginas HTML, imagens e aplicativos (Java, Microsoft, etc), osservidores também podem executar programas e scripts, interagindo mais com o usuário.


12/136



Computador Cliente: Computador utilizado pelo usuário. Computador Servidor: Computador utilizado para armazenar sites, sistemas,

arquivos e conteúdos em geral.

Resumo: Servidor WEB é um programa de computador que responde requisições.Exemplo: quando digito www.alfamidia.com.br na barra de endereços do navegador eteclo ENTER, o meu computador localiza o servidor onde está hospedado o site, queresponde a minha solicitação. Os servidores mais comuns são o IIS da Microsoft, oApache da Apache Software Foundation e o TomCat da Apache Jakarta Project. Abaixo,listamos alguns servidores existentes no mercado:

Apache HTTP Server

BadBlue

Boa

Caudium, uma derivação do Roxen

Covalent Enterprise Ready Server, baseado no Apache HTTP Server Fnord

IBM HTTP Server (baseado no Apache HTTP Server), antigo Domino GoWebserver

Internet Information Services (IIS) da Microsoft, incluso no Windows

Light HTTP Server (lighttpd)

NaviServer

Oracle HTTP Server, baseado no Apache HTTP Server

Roxen TomCat da Apache Jakarta Project.

thttpd da ACME Laboratories

Zeus Web Server


13/136



1.5.2 O que é um servidor de aplicações?

Um servidor de aplicação é um software que disponibiliza um ambiente para a instalação

e execução de certas aplicações. O objetivo é disponibilizar uma plataforma, que abstraiado desenvolvedor de software algumas das complexidades de um sistema computacional. No desenvolvimento de aplicações comerciais, por exemplo, o foco dos desenvolvedoresdeve ser a resolução de problemas relacionados ao negócio da empresa, e não de questõesde infraestrutura da aplicação. O servidor de aplicações responde a algumas questõescomuns à todas as aplicações, como segurança, garantia de disponibilidade, balanceamento de carga e tratamento de exceções.

1.5.2.1 J2EE(Java 2 Enterprise Edition)

Devido a popularização da plataforma Java, o termo servidor de aplicação é

frequentemente uma referência a "Servidor de aplicação J2EE". O servidor WebSphereApplication Server da IBM e o WebLogic Server da BEA Systems são dois dos maisconhecidos servidores J2EE comerciais. Alguns servidores de software livre também sãomuito utilizados, como JBoss, JOnAS e Apache Geronimo. Como mencionado, alinguagem de programação destes softwares é Java. Os módulos Web são implementadosatravés de servlets e JSP e a lógica de negócio através de EJBs. A plataforma J2EEdisponibiliza padrões para os containers Web e EJB. O Tomcat é um exemplo decontainer de software livre, onde os módulos Web podem ser publicados.

1.5.2.2 NET

Na plataforma Microsoft .NET, o servidor de aplicação não é visto como um elementoseparado. O sistema operacional Windows 2003 contém a infraestrutura necessária paraservir aplicações, como o IIS, COM+ e Framework .NET.

1.6 Navegadores

Um dos aspectos mais visados pelos usuários e desenvolvedores é a segurança dosnavegadores, devido ao crescimento e as inovações das técnicas de invasões e infecçõesque existem hoje em dia na internet.

Atualmente, os navegadores são “obrigados” a ter proteções contra scripts maliciosos, javascripts entre outros conteúdos que poderiam existir em sites que os mesmos acessam.

Atualmente o Mozilla Firefox é considerado o navegador mais seguro (principalmente emrelação ao Internet Explorer ), mas a Microsoft está lançando periodicamente atualizaçõesem seu Windows Update. Na área de segurança o Firefox possui um interruptor de scripts(caso venham a atrapalhar sua navegação ou caso sejam maliciosos) e uma proteçãocontra sites falsos que podem ocasionar em ataques do tipo phishing entre outros.


14/136



1.6.1 Padronização e protocolos de acesso

Navegadores se comunicam com servidores Web usando o protocolo HTTP (HyperText

Transfer Protocol), que são por sua vez identificadas por uma URL (ex:http://www.alfamidia.com.br ). O protocolo HTTP permite aos navegadores tantorecuperar como submeter informações para um servidor de Internet. O formato dearquivo que uma página usa geralmente é o HTML, sendo identificado no protocoloHTTP através de um indicador do seu tipo de conteúdo (content type) MIME.

A maioria dos navegadores suporta uma grande variedade de formatos em adição aoHTML, tais como JPEG, GIF e PNG para imagens, e também podem geralmente serestendidos para suportar outros formatos através de plugins. Da mesma forma, muitosnavegadores suportam vários outros tipos de URLs com seus protocolos correspondentes,tais como ftp, gopher , https(uma versão encriptada via SSL do HTTP). A combinação dotipo de conteúdo e da URL do protocolo de transferência de arquivos permite que

desenvolvedores de páginas Web publiquem imagens, animações, sons e vídeo nasmesmas, ou tornem tais conteúdos acessíveis através dessas páginas.

1.6.2 HTTPS (HyperText Transfer Protocol Secure)

É uma implementação do protocolo HTTP sobre uma camada SSL (Secure SocketsLayer), criado pela Netscape Corporation e vem se tornando sinônimo de segurança paraaplicações que utilizam a internet para efetuarem negócios on-line. O SSL foi concebido primordialmente pela necessidade de se ter um mecanismo que possibilitasse o sigiloabsoluto dos dados e a garantia de autenticidade dos mesmos nas transações eletrônicason-line. Desde sua concepção, o protocolo SSL vem se tornando padrão de fato a cada

dia. As principais características do SSL são: Segurança em conexões cliente/servidor: o SSL garante o sigilo dos dados trocados

entre as partes envolvidas na conexão através do uso de criptografia simétrica. A fimde evitar que as mensagens, mesmo decifradas, sejam modificadas e com isso umataque de escuta ativa seja possível, o SSL adiciona à todas as mensagens um MAC(Message Authentication Code). Calculado a partir de funções de hash seguras, oMAC garante a integridade das mensagens trocadas. Além de sigilo e integridade, oSSL ainda provê a autenticação das partes envolvidas a fim de garantir e verificar aidentidade das mesmas. Neste processo, o SSL utiliza criptografia assimétrica ecertificados digitais (ex: todas as URLs que aparecem o https:// antes do endereço).

Independência de protocolo: o SSL roda sobre qualquer protocolo de transporte

confiável. Porém, a maioria das implementações são feitas para redes TCP/IP. Interoperabilidade: dado a sua especificação bem detalhada e o uso de algoritmos

criptográficos conhecidos, diferentes implementações do protocolo tem a garantia deinteragir entre si.

Extensibilidade: dado a necessidade, permitir que novos parâmetros e métodos decriptografia (assimétrica ou simétrica) sejam incorporados ao protocolo, sem que sejanecessária a criação de um novo protocolo ou a implementação inteira de uma nova biblioteca.

http://www.alfamidia.com.br/http://www.alfamidia.com.br/http://www.alfamidia.com.br/


15/136



Eficiência: devido a demanda por recursos computacionais que este tipo de operaçãorequer, o protocolo dispõe da opção de armazenamento em cache de informaçõesreferentes a sessão, diminuindo desta forma o esforço computacional em sucessivas

conexões. Vantagens: O SSL preenche todos os critérios que o fazem aceitável para o uso nas

transmissões das mais sensíveis informações, como dados pessoais e números docartão de crédito. A aplicação pode optar entre utilizar todos ou somente uma partedesses critérios dependendo do tipo e natureza das transações que estão sendoefetuadas.

A criptografia é a arte de empregar certas regras em mensagens ou informações de formaa esconder seu verdadeiro conteúdo. A mensagem ou informação codificada pelo uso dacriptografia, que pode ser transmitida por meios de comunicação considerados inseguros, pois só o receptor, conhecedor das regras poderá reverter o processo e ler o documentooriginal.

Com o SSL, uma conexão é estabelecida onde todos os dados trafegam criptografados pela rede, sem que haja o risco de serem interceptados e decifrados por alguém. Paragarantir a integridade dos dados, é necessário um protocolo seguro para orientar aconexão, como por exemplo, o TCP/IP. O uso do SSL se disseminou por meio de suaimplementação nos EURZVHUV da Netscape, fornecendo aos usuários uma formasegura de acessar servidores ZHE, permitindo inclusive a execução de transaçõescomerciais. Sua versão mais recente é a 3.0.

Seu funcionamento ocorre por meio do sistema de criptografia de chaves públicas e privadas desenvolvido por Rivest, Shamir e Adleman, o RSA. O SSL é mais usado nos browsers, como Mozilla, Internet Explorer entre outros.


16/136



Unidade 2

Introdução ao HTML eWeb Standards

2.1 A Linguagem HTML e a Internet

Um dos principais elementos que levaram a popularização da Internet foi a World WideWeb (teia de abrangência mundial), também conhecida como WWW. Trata-se de umanova forma dos usuários navegarem pelas informações e arquivos disponíveis nos várioscomputadores ligados a Internet. O modelo WWW é tratar todos os dados da Internet

como hipertexto, isto é, vinculações entre diferentes documentos, para permitir que asinformações sejam exploradas interativamente e não apenas de uma forma linear.

A principal linguagem que popularizou a Web, e que ainda é a linguagem mais utilizada éo HTML (Hypertext Markup Language), uma linguagem criada com o objetivo deformatar informações de um texto e definir os hiperlinks entre um texto e outro, ou seja,os pontos de vinculação entre documentos.

Hoje existem diversas ferramentas que permitem navegar na Internet e visualizar as páginas HTML. Estas ferramentas são popularmente conhecidas como navegadores oubrowsers. Da mesma forma, existem também inúmeros editores visuais, dos quais oAdobe Dreamweaver é o mais utilizado, que gravam arquivos no formato HTML.

2.2 As Limitações do HTML

A linguagem HTML originalmente tinha como propósito apenas definir a estrutura de umdocumento e os hiperlinks entre documentos. Assim, ela permitia especificar quandoiniciava e terminava um parágrafo, definir títulos, sub-títulos, listas numeradas, textos emitálico e negrito e outras características semelhantes.

Quase que imediatamente após seu surgimento, porém, novos recursos começaram a sercriados, principalmente voltados para a construção de layouts mais sofisticados. Nestemomento surgiram recursos para especificar imagens de fundo, alinhar elementos emtabelas, posicionar imagens, entre outros. Muitas destas novidades eram iniciativa dasempresas que desenvolviam os principais navegadores utilizados na internet, o que muitas

vezes obrigava o Web Designer a criar páginas diferentes para cada navegador, paraaproveitar ao máximo os novos recursos recém lançados.

Dois problemas tiveram sua origem derivada deste contexto: a falta de uma padronização, pois diferentes empresas criavam novos recursos próprios para o HTML, e a mistura entrelayout e conteúdo. Ambos, problemas endereçados pelos Web Standards, como será vistoao longo deste curso.


17/136



2.3 Os Web Standards

O W3C (World Wide Web Consortium), juntamente com outros grupos e organismosreguladores, estabeleceu tecnologias para criação e interpretação de conteúdo para a Web,visando resolver de forma definitiva os problemas mencionados anteriormente.

Estas tecnologias, a que chamamos Web Standards, têm como objetivo principal fazercom que o conteúdo desenvolvido dentro destes padrões possa ser visualizadoindependente do equipamento (computador, PDA, celular), do tipo do navegador (IE,Mozilla, Opera, Netscape, etc) e da forma (banda de conexão) com que o usuário estiveracessando a Internet. É um conceito de acessibilidade estendido.

Um dos objetivos dos Web Standards é a separação do conteúdo, definido através delinguagens estruturais como XHTML e XML, e do layout, definido através de linguagensde apresentação, em particular o CSS (Cascading Style Sheet). Outros Web Standards,como o DOM (Document Object Model) e o ECMAScript 262 (versão padrão doJavaScript) são voltados para a programação em páginas Web.

2.4 W3C

O que é o W3C?

O World Wide Web Consortium (W3C) é um consorcio de indústrias dedicado em levar aWeb ao seu potencial máximo. Fundada em 1994 por Tim Berners-Lee (invertor daWeb), o W3C tem mais de 450 organizações associadas, incluindo Microsoft, AmericaOnline (incorporou a Netscape Communications), Apple ,Adobe, Macromedia, SunMicrosystems, e uma variedade de outras empresas fabricantes de hardware e software,

provedores de conteúdo, instituições acadêmicas e empresas de telecomunicações. Oconsórcio tem o apoio (estrutura física e intelectual) de três instituições de pesquisa: MITnos EUA, INRIA na Europa e Keio University no Japão.

Qual a sua função?

O W3C desenvolve especificações abertas (padrões) para aumentar a interoperabilidadede produtos relacionados com a Web. As recomendações do W3C são desenvolvidas porgrupos de trabalhos originados das organizações membros e experts convidados.

2.5 Importância dos Web Standards

Conceber e construir sites usando estes padrões simplifica o processo e reduz os custos de produção, obtendo-se ao mesmo tempo sites acessíveis a um maior número de pessoas edispositivos com acesso a Internet. Os sites desenvolvidos desta forma continuarão afuncionar corretamente à medida que os browsers tradicionais evoluem e novosdispositivos de Internet surgem no mercado.

"Web standards têm o objetivo de ser uma base comum... um fundamento para a World

Wide Web para que navegadores e outros programas compreendam o mesmovocabulário básico".


18/136



Eric Meyer – Autor do livro Cascading Style Sheets: The Definitive Guide.


19/136



Unidade 3

HTML – Recursos Básicos

3.1 Por que Entender o HTML?

O HTML é uma linguagem de marcação utilizada para criar e formatar páginas oudocumentos Web. Com o tempo passou a ser utilizado para descrever a estrutura dosdocumentos. O HTML permite criar documentos com componentes como cabeçalhos(h1,h2,....), parágrafos (p), quebras de linha (br), tabelas (table, tr, td, th), listas (li, ul, ol),imagens (img) e links (a). Uma tecnologia complementar foi criada, o Cascading StyleSheets (CSS), responsável pela apresentação (formatação visual) dos documentos.

Novas especificações HTML não serão mais definidas. HTML 4.1 é o último padrãoHTML, e agora substituído pelo XHTML 1.0. No entanto, o XHTML não ésubstancialmente diferente do HTML, sendo na verdade um subconjunto do HTML quesegue as regras do XML. Assim sendo, ao dominarmos o HTML, estaremos tambémadquirindo os conhecimentos necessários para desenvolver também em XHTML.

3.2 Conceitos Básicos de HTML

Quando um browser exibe uma página HTML, ele lê um arquivo texto (que pode seraberto em qualquer editor de texto) com o conteúdo do site e marcações, chamadas tags,que informam os elementos da página e sua formatação.

As marcações do HTML - tags - consistem do sinal () ("maior que").

De um modo geral, as tags aparecem em pares, por exemplo, Cabeçalho. Osímbolo que termina uma determinada marcação é igual àquele que a inicia, antecedido por uma barra (/) e precedido pelo texto referente.

No exemplo, avisa ao cliente Web para iniciar a formatação do primeiro nível decabeçalho e avisa que o cabeçalho acabou.

Há tags que não exigem o fechamento, funcionando – via de regra – com ou sem adefinição de uma tag de fechamento, como é o caso da tag de definição de parágrafo

.O padrão mais recente de uso do HTML, entretanto, recomenda que esta tag seja sempre

fechada, para termos um padrão mais próximo do utilizado em XHTML, como seráexplicado nas unidades finais desta apostila.

Outras tags efetivamente não tem marcações de final, como a tag
que apenasdefine uma linha em branco, e a tag que exibe uma linha divisória.

Este tutorial tem por objetivo mostrar como criar e exibir páginas HTML. Tais páginassão criadas a partir de arquivos texto ASCII, contendo caracteres de marcação dalinguagem HTML. Uma vez criados, estes arquivos são salvos com uma extensão .html ou .htm


20/136



3.3 Tags Básicas

A seguir apresentamos as tags básicas de uma página HTML, que são suficientes paracriar uma página mínima. Nas lições seguintes apresentaremos diretamente exercíciosque incluirão novas tags que permitirão controlar diversas características da página.

Estas e todas as futuras tags são mostradas dentro de uma estrutura de tabela, parafacilitar sua consulta, e são repetidas em anexo ao final deste material, de forma a facilitarseu uso no futuro como material de referência.

TAG O QUE FAZ

Insere comentários nas páginas

Toda página HTML deve estar entre o tag de início de umdocumento HTML e o tag de fim deste documento.

Envolvem a seção de cabeçalho do documento, no qual sãoespecificadas informações que não são exibidas na página,como título do documento e informações sobre o assunto dapágina.

Indica o título do documento para o Browser. Geralmente osBrowsers apresentam este título na barra de título da suaJanela no Windows

Envolvem a seção de corpo do documento. Aqui fica oconteúdo principal da Home Page. Opcionalmente podemosindicar um arquivo de imagem para formar o fundo, usandoa opção: BACKGROUND.

Insere uma quebra de linha

3.3.1 Exemplo de HTML com Tags Básicas

Todo documento HTML deve ser identificado como HTML ( ... ), ter umaárea de cabeçalho ( ... ) com o nome do documento ( ), umtítulo principal e uma área definida como corpo ( ... ) do conteúdo do

documento. Como o exemplo a seguir, basico1.html:

Minha primeira página


21/136



Minha Primeira Página

3.3.2 Familiarizando-se com o HTML

Seguindo as orientações do instrutor, construa agora a sua primeira página HTML. Copie

ou crie um texto, utilizando o Dreamweaver, o bloco de notas do Windows ou qualquereditor de texto. Salve e abra pelo browser que estiver instalado no computador.

Apenas com os códigos acima apresentados, é fácil perceber limitações. Não há aindacomo definir títulos, salientar palavras ou frases ou fazer qualquer tipo de estruturação dainformação, exceto quebrar os parágrafos utilizando a tag
.

Para começar a melhorar sua primeira página, observe a seção seguinte. Acompanhe osexemplos mostrados com o instrutor e desenvolva novas páginas conforme orientação.

3.4 Formatação de Textos

Mesmo em uma página apenas com textos, é fundamental podermos estruturar ainformação, de forma a deixá-la mais legível. Para tanto, novas tags se fazem necessárias,como as mostradas na próxima tabela.

TAG O QUE FAZ

Marca um título. Sendo que “n” representa um valor quepode ser de 1 a 6, o tamanho muda de forma decrescente,ou seja, o número 1 é o maior tamanho do título.

Insere uma linha horizontal

Marca um parágrafo

Centraliza todo o conteúdo entre as tags e

Coloca o texto em negrito

Coloca o texto em itálico


22/136



Coloca o texto sublinhado

Coloca o texto em fonte monoespaçada. (fonteCourier,como máquina de escrever)

Modifica a formatação do texto.

Atributos:

Size = define o tamanho da letra. Ex: Texto

Face = define o estilo da letra. Ex: Texto

Color = define a cor da letra. Ex:Texto

Marca um trecho formatado com fonte monoespaçada. Aformatação com espaços e entrada de parágrafos érespeitada.

Modifica a formatação padrão do texto.

Ex:

3.4.1 Exemplo de Títulos e Subtítulos

Na listagem abaixo faremos um novo exemplo e utilizaremos algumas das novas tags.Digite a listagem abaixo e salve com o nome basico2.html.

Melhorando minha home page

Este é o título Principal

Este é o título SecundárioEstou adorando criar páginas

Este é o 1º primeiro paragráfo

Esta é 2ª linha do 1º paragráfo

Com este recurso inicio um paragráfo

E com este recurso quebro uma linha


23/136



Veja o resultado no browser .

3.4.2 Exemplo de Alinhamentos

O alinhamento padrão que vem configurado nos navegadores é a esquerda, porém emmuitos casos podemos querer que todo ou parte do texto tenha outros alinhamentos Paraentender isto, digite a listagem abaixo, e salve como basico3.html, e acompanhe oconceito de tag que marcam o alinhamento dos títulos e parágrafos nas páginas.

Tags para Alinhamentos

Título Centralizado

Título À Direita

Título À Esquerda

Parágrafo ao Centro

Parágrafo à direita


24/136



Paragráfo à esquerda

Este é um texto justificado. Na linguagem HTML temos vários tipos dealinhamentos que você poderá aplicar em sua página. Nesta parte do livro,veremos como

alinhar linhas, parágrafos e cabeçalhos.

Texto com mais margem

Tem com mais margem ainda

Para ver o resultado deste exemplo abra o browser :


25/136



3.4.3 Exemplo de Formatação de Textos

Neste exemplo trabalharemos com a formatação das letras bem como cor, tamanho de

fonte e estilo. Para entender isto, digite a listagem abaixo, e salve como basico4.html,

Formatando Estilos

Mudando o Estilo dos Caracteres

Texto em Negrito

Texto em Itálico

Texto sublinhado
Texto Monoespaçado

Texto em Vermelho

Texto em Tamanho 5

Texto com a letra Verdana

Olá Mundo!!!

Você poderá os atributos para cada tipo de letra!

Olá Mundo

Estamos progredindo

no curso de HTML.

Este tag permite que todos os espaços feitos no código fonte

sejam respeitados. Certo?


26/136



3.5 Cores em HTMLA definição de cores já foi vista como atributo da tag . Entretanto, paraefetivamente utilizarmos as cores de forma eficiente no código HTML e necessárioentender como as mesmas são especificadas na linguagem.

O uso de cores em HTML pode ser feito através de duas formas básicas, utilizando onome em inglês de algumas cores específicas ou fazendo uso do código hexadecimalRGB. O segundo método é mais recomendável pois permite a definição de todas as cores possíveis.

Exemplos de uso de cores em fonte:

texto em pretotexto em branco

texto em vermelho

Nos exemplos acima, valores diferentes de código permitem a definição de coresdiferentes. É importante entendermos como estas cores são formadas para podermosmanipular estes códigos, porém na prática geralmente normalmente será utilizado algum


27/136



editor visual para escolher a cor desejada. Abaixo vamos fazer alguns exercícios paraentendermos melhor o uso de cores, utilizando as tags que já vimos anteriormente.

3.5.1 Utilizando o Vermelho

Digite o código abaixo como cores1.html

vermelhos

vermelho escuro, apenas 51 de vermelho e 0 de verde e azul

vermelho menos escuro

vermelhos cada vez mais claros

vermelho claro

o vermelho mais claro e puro possível

Observe o resultado em seu browser para poder conferir as tonalidades e note que nãoforam utilizadas as cores verde e azul. Obviamente podemos criar vários tons devermelho com parcelas também das outras cores.


28/136



3.5.2 Utilizando o Vermelho com Verde

O exemplo abaixo, cores2.html, utiliza cores misturando tons vermelhos e verde. Abaixo,

uma imagem mostra a tela resultante, mas é recomendável visualizar no browser paraobservar as cores em si.

vermelhos e verdes

laranja: vermelho com algum verde

amarelo (vermelho + verde)

amarelo esverdeado

verde puro

Observe a imagem abaixo em seu browser para poder conferir as cores:


29/136



Unidade 4

Incluindo Imagens em uma Página

4.1 Fazendo Referência a Outros Documentos

Como foi mostrado anteriormente, uma página HTML é apenas uma texto com algumastags que definem características da página. Entretanto, quando observamos uma páginaHTML normalmente visualizamos elementos gráficos que não podem ser definidos destaforma, como, por exemplo, fotos.

A forma que o HTML trata esta questão é muito simples: todas as imagens da página – assim como muitos outros elementos que veremos ao longo deste curso – não estão no

mesmo arquivo da página HTML, mas sim em outros arquivos.Antes de analisarmos a tag que define a utilização de imagens, vamos primeiro entenderalgumas formas de referência externa que podemos encontrar em documentos HTML

4.1.1 Referência Relativa

Vamos imaginar que os arquivos que desejamos referenciar estejam no mesmo diretóriode nossa página HTML. Neste caso, a referência pode ser feita simplesmenteespecificando o nome do arquivo em questão. Observe a parte em negrito do exemploabaixo (os outros elementos serão estudados em seguida):

Também podemos ter uma imagem ou outro arquivo referenciado que esteja em outrodiretório, acima ou abaixo do diretório em que está nossa página HTML, como nosexemplos abaixo:

4.1.2 Referência Absoluta

Em alguns casos, pode não ser interessante mantermos apenas referências relativas, emespecial se nosso site for um pouco mais complexo. Podemos ter muitas páginas quedesejamos colocar em diferentes diretórios que utilizem uma mesma imagem. Nestescasos, muitas vezes é mais interessante criarmos um diretório padrão que sejareferenciado por todas as páginas da mesma forma, independente da localização de cada página. O exemplo abaixo mostra este caso, fazendo uso de um diretório imagens na raizdo site:


30/136



4.1.3 Referência Externa

Poderemos ter ainda situações em que temos sites em diferentes domínios fazendo

referência ao mesmo arquivo, ou podemos querer utilizar, por exemplo, uma imagem queesteja localizada em outro site da Internet. Nestes casos fazemos uma referência externaespecificando a URL completa do site:

Obs: nestes casos nos podemos nos abster de incluir a especificação http:// , de outromodo o browser não tem como saber que não se trata de um diretório local.

4.2 Incluindo Imagens com a Tag IMG

Uma vez entendido o conceito de fazer referências a outros arquivos, incluir imagens setornou bastante simples, basta conhecermos algumas características da tag imagem,conforme apresentado na tabela abaixo.

TAG O QUE FAZ

Insere uma imagem

Atributos

src=indica o nome da imagem a ser carregado.

align=middle centraliza o base do texto com o centro daimagem

align=left faz a imagem flutuar a esquerda enquanto o textocircunda imagem à direita.

align=top alinha o texto no topo

align=right faz a imagem flutuar a direita enquanto o textocircunda imagem à esquerda.

alt=”n” indica o texto para ser exibido quando o navegadornão exibe a imagem. Sendo que n é o título que identifiquea imagem.

Exemplo:

4.2.1 Incluindo Imagens – Exemplo 1

Neste exercício exercitaremos os tags que permitem a inserção de imagens em uma página. Utilizaremos uma imagem do próprio site da Alfamídia. Crie o arquivo comoimagem1.html


31/136



Imagens

Agora estamos trabalhando com imagens

O comando acima inseriu uma imagem do site da Alfamídia nesta página.

4.2.2 Alinhando Imagens – Exemplo2

Neste exemplo trabalharemos com o alinhamento da imagem e do texto. Para entenderisto, digite a listagem a seguir, e salve como imagens2.html

Imagens

Note neste exemplo que a imagem está entre o texto

Neste exemplo a imagem está à esquerda e o texto está no topo.

Observe que quando o texto continua na l inha seguinte ele segue para abaixo da imagem


32/136



A imagem está à esquerda e o texto no centro, porém a

situação da quebra de linha persiste, com o texto seguindo, na linha seguinte, para

abaixo da imagem.

Neste exemplo a imagem ficou alinhada à esquerda,

permitindo que o texto ficasse todo à direita ao redor da imagem. Utilize este recurso

toda vez que desejar que o texto fique ao lado da imagem

Neste exemplo a imagem ficou alinhada à direita,

permitindo que o texto ficasse todo à esquerda ao redor da imagem.

Acompanhe com o professor como cada comando de alinhamento posiciona de formadiferente o texto e a imagem.


33/136



4.3 Incluindo Imagens no Fundo da Página – Tag BODY

É muito comum encontrarmos páginas com uma imagem ou padronagem como fundo.Para entendermos como isto é feito, teremos que utilizar um parâmetro de uma tag vistaanteriormente, a tag .

Envolvem a seção de corpo do documento. Aqui fica oconteúdo principal da Home Page. Opcionalmente podemosindicar um arquivo de imagem para formar o fundo, usandoa opção: BACKGROUND.

Quando definimos uma imagem para o fundo de uma página, se a página mostrada formaior que a imagem, ela será replicada na horizontal, vertical ou em ambas as dimensões.


34/136



Esta característica pode inclusive ser utilizada com um recurso de layout, permitindo, porexemplo, a repetição de um padrão.

4.3.1 Fundo com Padronagem

No exemplo a seguir, imagem3.html, uma padronagem é utilizada como fundo. Em geral, para um resultado esteticamente interessante, são utilizadas padronagens muito maissuaves, ou imagens maiores que a tela.

Exemplo com Fundo


35/136



Unidade 5

Criando Links

5.1 Hiperlinks

Hiperlink é o elemento fundamental da navegação pela internet. O conceito é simples:selecionando-se determinado elemento em uma página Web, somos levados para umanova página.

Para criarmos um site inteiro precisamos fazer uso destes links para estabelecer a ligaçãoentre as páginas de nosso site, de forma que, através de um único clique sobre a frase ouimagem, navegarmos para algum lugar no site ou na WEB.

Como padrão em nosso curso, observe a tag utilizada para a definição dos hiperlinks etrabalhe junto com o instrutor nos exemplos:

TAG O QUE FAZ

Define um link

Atributos

Href = indica o endereço do link.

Target = define onde o link será aberto:

_blank define que será aberta uma nova janela. _top define que irá abrir na mesma janela.

_self define que será aberto no mesmo Frame.

_parent define que irá abrir a em um Frame Pai.

5.1.1 Página com Links – Exemplo 1

Confira a página link1.html:

Estudando links

Exemplo de links internos

Exemplo1

Exemplo2

Exemplo de links externos


36/136



Visite o site da alfamídia

Site da Adobe

Você também pode usar imagens como links, mas é recomendável utilizar borda=0 para

não aparecer uma moldura de link.. Observe que neste exemplo o link abre em uma nova janela

Veja o resultado na figura a seguir:


37/136



Unidade 6

Criando TABELAS

6.1 Tabelas e Layout de Páginas

O recurso de tabelas foi originalmente criado, no HTML, com o objetivo de organizarinformações e exibir dados na forma de planilhas. Este ainda é um dos principais usos de planilhas em HTML, e será bastante explorado nesta unidade.

Entretanto, com este recurso também foi possível exercer um controle muito maior sobreo layout de uma página HTML. Utilizando uma série de técnicas envolvendo imagens de1 pixel de altura, planilhas com bordas invisíveis e formas inteligentes de posicionar

imagens, é possível criar layouts bastante sofisticados.Esta técnica está caindo em desuso, porém, pois com o HTML 4.1 e o CSS é possívelcontrolar de forma bastante precisa a diagramação de um site sem ter que utilizar astabelas como um subterfúgio. Nas próximas unidades serão apresentadas técnicas dediagramação sem o uso de tabelas (tableless design), enquanto que nesta unidade o foco éno uso de tabelas para a exibição de informações em planilhas.

6.2 Construindo uma Tabela

Tabelas são definidas, em HTML, com a definição das linhas e, dentro das linhas, das

células de cada coluna. Com apenas 4 tags, vistas na tabela seguinte, é possível definirdiversos tipos de tabelas:

TAG O QUE FAZ

Define uma tabela. Antes e depois de uma tabela, acontecesempre uma quebra de linha.

Atributos

Border: define espessura da borda da tabela

Cellspacing: espaço entre cada célula

Cellpadding: distância entre borda e conteúdo de cadacélula.

Width: largura da tabela, em pixels ou valor percentual

Define uma linha normal da tabela (table row).

Atributos

Align: valores left , right e center definem o alinhamento


38/136



horizontal.

Valign: valores top, middle e bottom definem o alinhamentovertical.

Esta é a marcação que define cada célula de uma tabela. As células de uma tabela devem sempre aparecer entre asmarcações de linhas ( e ). Como padrão, o textonas células é alinhado a esquerda.

Atributos

Align: valores left , right e center definem o alinhamentohorizontal.

Valign: valores top, middle e bottom definem o alinhamentovertical.

Nowrap: não há quebra de linhas dentro das células

Colspan: número de colunas que a célula irá ocupar

Rowspan: número de linhas que a célula irá ocupar

Width: largura da célula, em pixels ou valor percentual

Desta forma são definidos os títulos de uma tabela. Estespodem ser posicionados em qualquer célula. A diferençaentre a marcação de célula e título de célula é que o títuloaparece em negrito.

Atributos: os mesmos apresentados acima, para td

6.2.1 Exemplo de uma Tabela Simples

O exemplo tabelas1.html abaixo mostra uma tabela utilizando as tags apresentadas. Afigura em seqüência apresenta a imagem desta página:

Itens/Mês

JaneiroFevereiroMarço

Usuarios8093120

Linhas335


39/136



Como foi dito, a tabela é construída linha a linha. Observe os comentários no códigoacima.

6.2.2 Tabelas Mais Sofisticadas

As marcações das tabelas podem apresentar resultados diferentes, se acompanhadas dealguns atributos mostrados na tabela anterior. Vamos ver os principais em exemplos práticos:

Tabela2.html – exemplo de alinhamento horizontal (align)

Primeira célulaSegunda célulaTerceira célula

centro

esquerda

direita

Tabela3.html – alinhamento vertical (valign)

Teste para alinhamento

com relação a bordas


40/136



inferior e superior

TOP

MIDDLEBOTTOM

Tabela4.html – Célula em várias colunas (colspan)

3colunas

normal

normal

col 1

col 2col3

col 4

col 5

Tabela5.html – Célula em várias linhas (rowspan)

3 linhas

col 2

col 3


41/136



col4

col5

col 2

col 3

col4

col 5

col 2

col 3

col4

col 5

Tabela6.html –

borda maior (border)

teste1 teste2 teste3


Tabela7.html – Espaço entre células (cellspacing)


42/136





Tabela 8.html – Espaçamento interno a célula (cellpadding)



Tabela9.html – largura da tabela em percentuais (width)

segunda

terça

quarta

quinta

sexta

sábado


43/136



Tabela10.html – espaçamento em célula (width)

segunda

terça

quarta

quintasexta

sábado

6.2.3 Construindo uma Tabela mais Sofisticada

Tente reproduzir a tabela mostrada na figura abaixo utilizando códigos HTML. Observeum cuidado especial com os detalhes de alinhamento.


44/136



6.2.4 Integrando Recursos em Tabelas

Crie agora uma tabela, utilizando sua imaginação, fazendo uso do maior número possívelde recursos vistos anteriormente. Inclua imagens, links para outras páginas e asformatações de textos vistos anteriormente.


45/136



Unidade 7

Formulários

7.1 Introdução a Formulários

Até o presente momento vimos diversos recursos do HTML para criar uma página,definindo seu layout e conteúdo. Neste capítulo apresentaremos a forma principal deobter dados do usuário e poder assim interagir com ele.

O elemento FORM, da linguagem HTML, é o responsável por tal interação. Ele provêuma maneira agradável e familiar para coletar dados do usuário através da criação deformulários com janelas de entrada de textos, botões e outros elementos de entrada de

dados.Os dados que o usuário preenche em uma página HTML são enviados para o servidor, para serem então processados por um programa, por exemplo um CGI em linguagemPERL ou um página de acesso a banco de dados em ASP ou PHP. Também é possível processar localmente um campo de formulário utilizando um script em JavaScript ouVBScript, o que muitas vezes é feito para validar um campo antes do mesmo ser enviadoao servidor.

Nesta lição iremos nos concentrar em aprender todos os tags HTML de criação deformulários e a diferença entre eles.

7.2 Criando um Formulário

Observe na tabela a seguir, os principais tags utilizados na criação de formulários, eobserve os exercícios seguintes:

TAG O QUE FAZ

Define um formulário

Atributos

method: get, que envia as informações na própria URL, ou

post, que envia de forma não visível para o usuárioaction: url que será chamada, a priori um aplicativo capazde tratar os dados enviados pelo formulário (PHP, ASP,JSP).

Define uma entrada de dados

Atributos

Type: text, campo tipo texto; password, para senhas;


46/136



hidden, não aparece para o usuário; checkbox, paramarcar; radio, para escolher entre um conjunto de opções.submit cria um botão para enviar os dados e reset um

botão para limpar o formulário.Name: nome do campo

Value: valor pré-definido para o campo

Size: tamanho do campo a ser exibido

Maxlength: tamanho máximo de caracteres

Checked: para campos checkbox e radio, define comomarcado

Define uma entrada de texto com várias linhas

Atributos

Rows: número de linhas

Cols: número de colunas

Define uma lista de opções para selecionar

Atributos

Name: nome do campo

Multiple: permite selecionar vários campos da lista

Site: define o número de linhas a serem exibidas

Item de uma lista aberta

Atributos

Value: valor do campo se este item for selecionado

Selected: indica que este valor está selecionado

7.3 Um Primeiro Formulário

O exemplo a seguir mostra um formulário simples, form1.html, que apenas pergunta onome da pessoa. Ele ainda não tem um botão para confirmar, porém ao pressionarENTER o formulário será acionado.

Form1.html – utlizando um campo de formulário

Qual o seu primeiro nome?


47/136



Observe que o formulário não tem um comando action, o que significa que, ao seracionado, o formulário irá chamar a própria página. Digite seu nome, pressione ENTER eobserve a URL no topo da página mudar para incluir o parâmetro do formulário.

Experimente substituir o método de envio para POST.

7.4 Formulários com Diferentes Tipos do INPUT

Vamos agora estudar vários exemplos de pequenos formulários, cada um apresentandoum recurso diferente. Teste cada um deles para se familiarizar com a tag apresentada:

Form2.html – utilizando tipo password

Informe sua senha de acesso (8 caracteres):

Obs: neste exemplo não faz sentido utilizarmos o método get, pois a função do tipo password perderia o sentido.

Form3.html – Botões de limpar e enviar formulário (submit e reset)

Qual o seu primeiro nome?


48/136



Form4.html – Campos para marcar opções (checkbox)

Sim, eu desejo receber o boletim de notícias.

Sim, eu gostaria de receber mais informações turísticas.

Form5.html – campos de opção (radio)

Suas preferências na viagem:

Classe do bilhete:

econômica

executivaprimeira

Localização:

área fumante

área não fumante


49/136



Obs: neste exemplo os dois grupos de botões tem o valor “name” diferente. Se fosse omesmo, só poderia ser selecionada uma entre todas as cinco opções.

7.5 Entrada de várias linhas de texto - TEXTAREA

Observe o exemplo a seguir. Se você deseja que um texto seja exibido no campo textualao abrir o formulário, simplesmente coloque este texto entre as marcações de início e fimda TEXTAREA. É recomendável utilizar o método post para este tipo de campo, poisexiste uma limitação para o máximo de informações que podem ser transmitidas atravésdo método get.

Form6.hrml – Texto em várias linhas

Por favor, escreva aqui suas sugestões, dúvidas e críticas:

gostaria de obter mais informações sobre

este servidor. grato.


50/136



7.6 Menus com opções - SELECT

A marcação SELECT segue a mesma convencão de TEXTAREA. Ou seja, as opções demenu ficam entre a marcação de início e a de fim . Observe osdois exemplos a seguir:

Form7.html – Menu de opções

Onde você pretende fazer turismo nas férias?

fortaleza

Florianópolis ou Porto alegre

Rio de janeiro

BrasíliaManaus


51/136



Form8.html – Opção com múltiplas escolhas

Onde você pretende fazer turismo nas férias?

fortaleza

Florianópolis ou Porto alegre

Rio de janeiro

Brasília

Manaus


52/136



Unidade 8

Introdução a Estilos CSS

8.1 O CSS

O CSS (Cascading Style Sheets ou Folhas de Estilo em Cascata) é uma linguagem deformatação proposta pelo W3C. Visa remover a formatação dos documentos (X)HTML,separando conteúdo e formatação.

A especificação inicial, chamada CSS1, tornou-se uma recomendação do W3C no finalde 1996 e define praticamente todos estilos de apresentação utilizados hoje em dia. Asegunda versão da especificação, chamada CSS2, foi aprovada em 1998 e acrescentou

vários estilos novos, principalmente na área de posicionamento e tabelas. Uma novaversão está em desenvolvimento e espera-se que seja aprovada em um futuro próximo.

Todos os browser atuais, o Internet Explorer 6, Netscape Navigator 7, Mozilla Firefox 1,Opera 7 e Safari suportam o CSS. Entretanto o suporte ao CSS Nível 2 foi implementadoem níveis diferentes, o que torna a adoção dos conceitos de posicionamento via CSS, ouTableless, como é conhecido, ainda um pouco complicado, necessitando muitas vezes detruques de correção, conhecido como CSS Hacks.

Algumas considerações sobre CSS:

Os estilos definem para o browser como devem ser exibidos os elementos do(X)HTML.

Os estilos são geralmente definidos em folhas de estilo.

O CSS foi implementado na versão HTML 4.0 para resolver o problema deseparação entre conteúdo e formatação.

Os estilos quando armazenados em folhas de estilo externas (arquivos .css) ecompartilhadas entre documentos do mesmo website, poupam muito trabalho esimplificam enormemente a manutenção.

Definições de estilo múltiplas serão refletidas em cascata em uma definiçãoresultante final.

8.2 Benefícios em Utilizar CSS

Utilizar CSS além de ser essencial para o XHTML para garantir a separação entreconteúdo e formatação, possibilita inúmeros benefícios a desenvolvedores e usuários:


53/136



Produtividade aumentada.

Facilidade em criar sites com identidade visual unificada e coerente.

Facilidade em fazer mudanças em todo o site – basta alterar um arquivo CSSinvés de mudar todas as páginas HTML.

Arquivos mais leves => download mais rápido => experiência de usuáriomelhorada.

Menos código na página => mais fácil codificar.

Permitir que visitantes alterem suas preferências definindo estilosdinamicamente.

Mais acessível para uma ampla variedade de aparelhos.

Mais controle sobre o código - interpretação do código na ordem correta para osleitores de tela.

Disponibiliza versões para impressão sem duplicação de conteúdo, somentealternando o CSS.

Permite formatar elementos do HTML como formulários e barras de rolagem,impossível via atributos HTML.

Permite controlar aspectos visuais como tipo e cor de borda, posicionamento,

visibilidade e margens – propriedades inexistentes no HTML.

8.3 CSS para Separar Conteúdo da Apresentação

Uma das metas ao se utilizar os conceitos do Web Standards é remover toda aapresentação do código (X)HTML, deixando-o limpo e semanticamente correto.

Enquanto o (X)HTML define a estrutura, O CSS fica responsável pela formatação visuale posicionamento de elementos dentro de uma página Web.

Utilizando CSS, um desenvolvedor pode definir elementos da apresentação (o layout,fonts, cores, bordas, etc), independentemente da marcação do documento Web. Os estilos

podem (e devem, na maioria dos casos) serem definidos em um documento separado comextensão .css e compartilhados entre todos ou um grupo de documentos relacionados domesmo website. Desta forma, alterar ou implementar novos estilos é tarefa fácil, bastando para isso alterar somente um arquivo do projeto, já que ele está referenciado entrediversos documentos, sendo renderizado dinamicamente na medida que o browsercarrega o arquivo de definições ou a folha de estilos externa (.css).


54/136



Ao separar formatação do conteúdo, você está tornando seu código semanticamentecorreto. Ou seja, não utilizando marcação de conteúdo (HTML) para formatação (usoincorreto).

Outra vantagem na separação é a possibilidade de tornar disponível o mesmo conteúdo para múltiplos devices (aparelhos) sem necessidade de duplicar o conteúdo, alterandosomente a formatação (CSS). Isto inclusive pode ser feito de forma dinâmica ouutilizando linguagem script (Javascript, por exemplo). Entre os devices que suportamconteúdo Web podemos citar:

Browsers.

Impressoras.

PDAs (Personal Digital Assistants).

Telefones Celulares.

Equipamentos wireless.

Para obter uma demonstração do que pode ser conseguido visualmente por meio de umdesign baseado em CSS, acesse o site Zen Garden, onde diferentes desenvolvedorescriaram para o mesmo conteúdo (documento HTML), diferentes arquivos CSS,resultando em documentos com o design 100% diferentes entre si.Vale a pena conferir! http://www.csszengarden.com/tr/portuguese/

8.4 Páginas Com Semântica Correta

Uma marcação semanticamente correta utiliza elementos HTML para o seu objetivodefinido. Um HTML bem estruturado tem significado semântico para um amplo númerode User Agents (navegadores sem folhas de estilo, navegadores baseados em texto,PDAs, sites de busca, etc.).

Utilizar código semanticamente correto é uma forma de organizar e estruturar ainformação na Web.

Você deve utilizar HTML padrão e evitar fazer com que os elementos HTML se pareçamcom outros elementos HTML. Ou seja:

Para cabeçalhos e títulos, utilize elementos de header começando com o para o título de maior importância.

Para títulos em tabelas, utilize a tag em vez da tag .

Para listas, utilize elementos de lista , e .

Para o layout, utilize a tag em vez de .

http://www.csszengarden.com/tr/portuguese/http://www.csszengarden.com/tr/portuguese/http://www.csszengarden.com/tr/portuguese/http://www.csszengarden.com/tr/portuguese/


55/136



Conceito concebido pelo físico inglês Tom Berners-Lee, o criador do World Wide Web,cuja proposta, ainda em desenvolvimento, por um grupo de pesquisadores do W3C, porele liderado, é estruturar todo o conteúdo disponível na Internet. Essa estruturação será

baseada num conjunto de regras, que permitirá a localização eficiente e precisa dainformação desejada.

Por mais sofisticados que sejam os mecanismos de buscas, atualmente existentes, todos,sem exceção, oferecem para cada solicitação um grande número de páginas, que, em suamaioria, não atendem às necessidades do usuário. Esse é, então, obrigado a verificar umaa uma, até encontrar exatamente o que procura.

A Web semântica se propõe objetivar essa busca, de modo que o conteúdo exato sejaencontrado em uma única consulta. Esse conceito bas

html, css e javascript - alfamídia [versão 2007]

Documents