INF0476 PROGRAMAO

PARA INTERNET
Prof. Ricardo Land Rodrigues
land@mesoipo.com.br
land@jb.com.br
21-86347852

Ementa

Internet
Intranet
Extranet
XHTML
Frame
CSS
JavaScript

Objetivos
- Compreender as diversas tecnologias
envolvidas em um ambiente de internet;
- Desenvolver pginas Internet utilizando
recursos da linguagem XHTML, recursos
de Folhas de Estilo em Cascata e
recursos da linguagem JavaScript.

 METODOLOGIA:
Aulas expositivas dialogadas e prticas;
debates; leitura de textos pertinentes ao
assunto e
estudos de casos, alm de estudos dirigidos.

AVALIAO:
Solicitao de trabalhos e/ou provas escritas
individuais.

Bibliografia

BIBLIOGRAFIA BSICA
DEITEL, Harvey M.; DEITEL, Paul J.; NIETO, T. R. Internet & World Wide
Web: como
programar. Porto Alegre: Bookman, 2003.
NEGRINO, Tom; SMITH, Dori. JavaScript para World Wide Web. Rio de
Janeiro: Campus, 2004.
PAULA FILHO, Wilson de Padua. Multimdia: conceitos e aplicaes. Rio
de Janeiro:
LTC, c2000.
BIBLIOGRAFIA COMPLEMENTAR
MANZANO, Andr Luiz N. G. Estudo dirigido de informtica bsica. 6. ed.
So Paulo: rica, 2004.
STAIR, Ralph M.; REYNOLDS, George W. Princpios de sistemas de
informao: uma
abordagem gerencial. Rio de Janeiro: LTC, 2002.

Sites de referncia
http://www.jb.com.br
http://ee.jb.com.br
http://www.agenciajb.com.br

Histria da Internet
Comeou a ser discutida na dcada de
1960 financiada pela ARPA Advanced
Research Projects do Departamento de
defesa dos Eua.
Objetivo era conectar os computadores
das diversas instituies de pesquisa em
uma conexo de 56K compartilhando os
recursos de hardware.
A aplicao principal acabou sendo o
correio eletrnico

A rede operou com tcnicas de

comutao de pacotes (packet-switching)
utilizando um protocolo que daria incio ao
TCP/IP
Uma das grandes caracterstica era que o
controle no era centralizado. Se uma
parte da rede falhasse as partes restantes
continuariam a falar entre si.
Inicialmente o objetivo era pesquisa pelas
universidades. Posteriormente foi utilizada
pelas foras armadas e depois pelas
empresas comerciais.

A preocupao da entrada da rea

comercial na Internet era que a rede
ficasse lenta. Entretanto, aconteceu
justamente o contrrio. As empresas
comearam a investir na pesado no
crescimento da Internet.

E o que a Internet
A Internet um conglomerado de redes em escala
mundial de milhes de computadores interligados pelo
Protocolo de Internet que permite o acesso a
informaes e todo tipo de transferncia de dados. A
Internet a principal das novas tecnologias de
informao e comunicao (NTICs). Ao contrrio do que
normalmente se pensa, Internet no sinnimo de
World Wide Web. Esta parte daquela, sendo a World
Wide Web, que utiliza hipermdia na formao bsica,
um dos muitos servios oferecidos na Internet. De
acordo com dados de maro de 2007, a Internet usada
por 16,9% da populao mundial[1] (em torno de 1,1
bilho de pessoas).

O que uma Intranet

Uma intranet uma rede de computadores privada que
assenta sobre a suite de protocolos da Internet.
Resumidamente, o conceito de intranet pode ser
interpretado como "uma verso privada da Internet", ou
uma mini-Internet confinada a uma organizao.
O termo foi utilizado pela primeira vez a 19 de Abril de
1995, num artigo da autoria tcnica de Stephen
Lawton[1], na Digital News & Reviews.

O que uma extranet

A Extranet de uma empresa a poro de sua rede de
computadores que faz uso da Internet para partilhar com
segurana parte do seu sistema de informao.
Tomado o termo em seu sentido mais amplo, o conceito
confunde-se com Intranet. Uma Extranet tambm pode
ser vista como uma parte da empresa que estendida a
usurios externos ("rede extra-empresa"), tais como
representantes e clientes. Outro uso comum do termo
Extranet ocorre na designao da "parte privada" de um
site, onde somente "usurios registrados" podem
navegar, previamente autenticados por sua senha
(login).

Outras consideraes
Internet Conexo de redes distintas
Internet Fora da empresa / Longe da
Empresa
Internet Interface de programas via WEB
Extranet Parte da Empresa acessada de
fora da empresa
Extranet Interface de programas via WEB
Intranet Rede dentro da empresa
Intranet Programas cliente/servidor.
Acesso rpido
Intranet/Extranet/Internet Protocolo TCP/IP

WWW
A World Wide Web (Web e WWW) um sistema de
documentos em hipermdia que so interligados e executados
na Internet. Os documentos podem estar na forma de vdeos,
sons, hipertextos e figuras. Para visualizar a informao,
pode-se usar um programa de computador chamado
navegador para descarregar informaes (chamadas
"documentos" ou "pginas") de servidores web (ou "stios") e
mostr-los na tela do usurio. O usurio pode ento seguir as
hiperligaes na pgina para outros documentos ou mesmo
enviar informaes de volta para o servidor para interagir com
ele. O ato de seguir hiperligaes comumente chamado de
"navegar" ou "surfar" na Web.

HiperMidia - Segundo Laufer & Scavetta,

hipermdia (ou Hipermdia em Portugal) a
reunio de vrias mdias num suporte
computacional, suportado por sistemas
eletrnicos de comunicao
Hipertexto o termo que remete a um texto em
formato digital, ao qual agrega-se outros
conjuntos de informao na forma de blocos de
textos, imagens ou sons, cujo acesso se d
atravs de referncias especficas denominadas
hiperlinks, ou simplesmente links.

 Criada em 1990 por Tim Bernes-Lee do

CERN Laboratrio europeu de pesquisa
nuclear sobre a internet visando a troca
de informao em forma hipertexto
Em 1994 foi criado o W3C World Wide
Web Consortium dedicado a criar
tecnologias interoperveis no
proprietrias para a WEB. O W3C
(www.wc.org) uma organizao de
padronizao.

O que so recomendaes
O W3C publica recomendaes. Uma
recomendao no um software mas os
objetivos e as regras que uma dada
tecnologia deve seguir.
No DIZ como fazer e sim como fazer

Etapas de uma recomendao

Working Draft Rascunho
Candidate Recommendation Verso
Candidata A industria pode comear a
implementar
Proposed Recommendation Proposta.
Uma recomendao madura usada e
testada por um tempo.

Por trs da Internet

Funcionamento bsico
Resposta/Pgina html

Solicitaao HTTP

Arquivo

Navegador
IE
Firefox
Chrome

Servidor WEB

Safari

IIS//APACHE
ZOPE/TOMCAT/JBO
SS

Definies
URL- Um URL (de Uniform Resource
Locator), em portugus Localizador de
Recursos Universal, o endereo de um
recurso (um arquivo, uma impressora
etc.), disponvel em uma rede; seja a
Internet, ou uma rede corporativa, uma
intranet.

URL = PROTOCOLO+ENDEREO+PORTA+RECURSO

 URI - Uniform Resource Indicator - um

nome utilizado para identificar um recurso
na internet. Uma URI pode ser uma URL
ou uma URN
URN - Uniform Resource Name Especifica um nome na internet que utiliza
um schema no necessariamente
disponvel .
Ex: urn:isbn:0451450523 // The URN for "The Last Unicorn", identified
by its book number.

Podemos dizer que enquanto uma URN especifica o nome de

uma pessoa, a URL especifica o endereo da pessoa.

Protocolo - Regra de comunicao entre

duas ou mais entidades
PROTOCOLOS INTERNET
HTTP - Hipertext Transfer Protocol - 80
FTP - File Transfer Protocol - Transferncia
de arquivos 20/21
SMTP - Simple Mail Protocol - 25 - Correio
POP -Post Office Protocol - 110 - Correio
Eletrnica - Parte Cliente
TELNET - Servio Termianal - 23

Navegador Web - Um navegador, tambm

conhecido pelos termos ingleses web
browser ou simplesmente browser, um
programa de computador que habilita
seus usurios a interagirem com
documentos virtuais da Internet, tambm
conhecidos como pginas HTML, que
esto hospedadas num servidor Web.

 Servidor WEB - Um programa de

computador responsvel por aceitar
pedidos HTTP de clientes, geralmente os
navegadores, e servi-los com respostas
HTTP, incluindo opcionalmente dados,
que geralmente so pginas web, tais
como documentos HTML com objetos
embutidos (imagens, etc.);

Protocolo HTTP
HTTP (acrnimo para Hypertext Transfer Protocol, que
significa Protocolo de Transferncia de Hipertexto) um
protocolo de comunicao (na camada de aplicao
segundo o Modelo OSI) utilizado para transferir dados
por intranets e pela World Wide Web.
Normalmente, este protocolo utiliza o porta 80 e usado
para a comunicao de stios web, comunicando na
linguagem HTML. Contudo, para haver comunicao
com o servidor do stio necessrio utilizar comandos
adequados, que no esto em linguagem HTML.

um protocolo sem estado, stateless, ou

seja, as informaes so passadas entre
as pginas WEB no sendo armazenado
a informao anterior.
Quando acessamos uma pgina web no
sabemos nada da pgina anterior

Demonstrao Prtica
Demonstrao prtica do
protocolo HTTP utilizando
TELNET, IIS

Linguagens de marcao

Linguagens de Marcao
uma linguagem de marcao um conjunto
de cdigos aplicados a um texto ou a dados,
com o fim de adicionar informaes
particulares sobre esse texto ou dado, ou
sobre trechos especficos.
Caracteriza-se pela utilizao de TAGS
(marcas) ao longo do documento
Linguagens de marcao so usadas, por
exemplo, na indstria editorial para marcar a
formatao (exibio grfica) de pginas

10

SGML
O Standard Generalized Markup Language
(SGML) uma metalinguagem atravs da qual se
pode definir linguagens de marcao para
documentos.
um metalinguagem uma linguagem usada para
descrever algo sobre outra(s) linguagens (linguagens
objeto). Modelos formais sintticos para descrio
gramatical

A SGML foi inicialmente concebida para permitir a

partilha de documentos que permitissem a leitura
por mquina em projetos de grande dimenso
governamentais e na indstria aeroespacial

Caracterizada pelo uso dos sinais < e > nas

marcaes
<QUOTE TYPE="exemplo"> Tipicamente algo
como <ITALICS>isto</ITALICS> </QUOTE>

usado extensivamente nas indstrias de

impresso e publicao, mas a sua
complexidade tem dificultado a sua difuso
em outros campos
A SGML uma norma ISO
A Organizao Internacional para Padronizao
(em lngua inglesa: "International Organization for
Standardization - ISO"; em lngua francesa:
"L'Organisation internationale de normalisation"),
popularmente conhecida como ISO[1] uma
entidade que atualmente congrega os grmios de
padronizao/normalizao de 158 pases.

HTML e XML so ambas derivadas do

SGML. Enquanto a HTML uma
aplicao da SGML, a XML um perfil-um subconjunto especfico da SGML,
projetada para ser mais simples de se
analisar gramaticalmente e de se
processar do que SGML
A XML uma tentativa de simplificar
SGML para aplicaes de aplicao geral,
tais como a Web semntica. A XML tem
sido usada num largo nmero de
aplicaes, incluindo as notaveis XHTML,
RSS, XML-RPC e SOAP.

11

Introduo a Linguagem XML

um subtipo de SGML capaz de
descrever diversos tipos de dados. Seu
propsito principal a facilidade de
compartilhamento de informaes atravs
da Internet. Entre linguagens baseadas
em XML incluem-se XHTML (formato para
pginas Web), RDF,SDMX ,SMIL,
MathML (formato para expresses
matemticas), NCL, XBRL, XSIL e SVG
(formato grfico vetorial).

XML (eXtensible Markup Language)

uma recomendao da W3C
World Wide Web Consortium (W3C)
comeou a trabalhar em meados da
dcada de 1990 em uma linguagem de
marcao que combinasse a flexibilidade
da SGML com a simplicidade da HTML.

Objetivos
Simplicidade e Legibilidade, tanto para
humanos quanto para computadores
Possibilidade de criao de tags sem
limitao
Criao de arquivos para validao de
estrutura (Chamados DTDs)
Concentrao na estrutura da informao,
e no na sua aparncia
Devem ser salvos em arquivos com
extenso xml

12

Exemplos simples de XML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE alunos SYSTEM "alunos.dtd">
<!--exemplo de xml-->
<alunos>
<aluno id="1">
<nome>Carlos</nome>
<matricula>12345</matricula>
</aluno>
<aluno id="2">
<nome>Denise</nome>
<matricula>123</matricula>
</aluno>
</alunos>

Exemplo de DTD
<?xml version='1.0' encoding='UTF-8'?>
<!ELEMENT alunos (aluno)*>
<!ELEMENT aluno (matricula|nome)*>
<!ATTLIST aluno
id CDATA #IMPLIED
>
<!ELEMENT nome (#PCDATA)>
<!ELEMENT matricula (#PCDATA)>

Estrutura de um documento
XML
As trs primeiras linhas so chamadas de prlogo
(informao antes da raiz do documento
propriamente dito)
A primeira linha obrigatria e descreve que o
documento que se segue um arquivo XML
A segunda linha descreve a DTD associada ao
documento
A terceira linha um comentrio
Espaos em branco podem ser inseridos em
qualquer local
Existe diferena de letras maisculas e letras
minsculas

13

 Elementos so as TAGs propriamente

ditas. Tambm sao chamadas de tags.
Chamamos de elemento raiz (alunos) o
elemento que contm todos os outros
documentos

Atributos so informaes adicionais

colocadas nos elementos. Devem vir
sempre entre aspas.
Todos os elementos em XML possuem
marcao de incio/fim.
Os elementos em XML podem conter um
texto ou outros elementos

Chamamos de elemento vazio os

elementos que no contm outros
elementos ou texto. Devem ser
terminados por uma barra separada por
um espao (para facilitar a visualizao).
Ex : <br />

No podemos usar letras acentuadas ou

caracteres especiais nos elementos
Chamamos de documento BEM
FORMADO quando as regras bsicas de
xml so seguidas

DTD
Document Type Definition Define a
gramtica a ser seguida pelo documento.
A gramtica compreende a sintaxe e a
estrutura do documento.
O DTD descreve um conjunto de regras a
ser seguida pelo documento.
Um documento XML chamado vlido
quando possui um DTD associado e
segue sua sintaxe

14

 #PCDATA Parsed caracters Cadeia de

caracteres

XML SCHEMAS
XML Schema uma linguagem baseada no formato XML
para definio de regras de validao ("esquemas") em
documentos no formato XML.
Foi a primeira linguagem de esquema para XML a obter o
status de "recomendao" por parte do W3C.
Esta linguagem uma alternativa ao DTD (Document Type
Definition), cuja sintaxe no baseada no formato XML.
Um arquivo contendo as definies na linguagem XML
Schema chamado de XSD (XML Schema Definition). O
termo XSD muitas vezes utilizado como referncia a
linguagem XML Schema.

Porque usar Xml Schemas

XML Schema tem suporte a tipos de
dados
XML Schemas usa sintaxe XML
Toda tecnologia desenvolvida para
XML se aplica a Schemas

15

XML
<?xml version="1.0">
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder<heading>
<body>Don't forget me this weekend!</body>
</note>

DTD
<!ELEMENT note (to, from, heading, body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>

Schema
<?xml version="1.0"?>
<xs:schema
xmlns:xs="http://www.w3.org/2001/XMLSchema"
targetNamespace="http://www.w3schools.com"
xmlns="http://www.w3schools.com"
elementFormDefault="qualified">
<xs:element name="note> <xs:complexType>
<xs:sequence> <xs:element name="to"
type="xs:string"/> <xs:element name="from"
type="xs:string"/> <xs:element name="heading"
type="xs:string"/> <xs:element name="body"
type="xs:string"/> </xs:sequence> </xs:complexType>
</xs:element> </xs:schema>

16

NAMESPACE
Uma vez que o XML permite definir novas
linguagens, pode ocorrer de duas
linguagens criadas terem os mesmos
nomes de elementos. O NameSpace
permite retirar esta ambigidade
associando cada elemento e atributo a um
namespace especfico.
Os filhos de um namespace herdam o
namespace se seu pai.

<?xml version="1.0" encoding="UTF-8" ?>

<explo_Namespace>
<table xmlns="http://www.w3.org/TR/html4/">
<tr>
<td>Banana</td>
<td>Laranja</td>
</tr>
</table>
<table xmlns="http://www.explo.org/temas/">
<tr>
<td>XML</td>
<td>C++</td>
</tr>
</table>
</explo_Namespace>

Criao de um namespace
Iniciar com um nome de domnio
Adicionar informaes descritivas (como se
fosse um caminho de URL) para criar um
nome nico
URLS so usadas como namespaces porque
so exclusivas e no porque apontam para
determinado local. Embora possam apontar
para uma DTD ou um esquema no
obrigatrio.

17

XHTML

XHTML
eXtensible Hypertext Markup Language
Linguagem de marcao que especifica o
contedo de um texto a ser apresentado na
WEB
Reformulao da HTML baseada em XML
Combina as tags de marcao HTML com
regras da XML, permitindo a exibio de
pginas WEB em diversos dispositivos como
televiso PALM, Celular separando a estrutura
do documento da sua apresentao

HTML - (acrnimo para a expresso

inglesa HyperText Markup Language, que
significa Linguagem de Marcao de
Hipertexto) uma linguagem de marcao
utilizada para produzir pginas na Web.
Linguagem inicial da Internet. Junta
estrutura do documento com
apresentao

18

Exemplo
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>teste</title>
</head>
<body>
</body>
</html>

Estrutura
Primeira Linha - Define a DTD que deve
ser seguida
Marcao de incio e fim de documento
<HTML> DOCUMENTO </HTML>

Cabealho - Informaes gerais do

documento
<head><title></title></head>

Corpo (o que apresenta na tela)

<body> </body>

19

Tipos de XHTML
Estrita
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Apenas o contedo e estrutura de um documento aparea no
documento HTML. A formatao no pode aparecer. Como formatao
devemos entender posicionamento, fontes, cores e demais aspectos de
apresentao.

Transacional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Permite utilizar as tecnologias herdadas de HTML onde a formatao
pode ser usada ao longo do documento

Como testar arquivos HTHML

http://validator.w3.org/
Observao
Os TAGS em XHTML so em letras
minsculas

Comandos bsicos do
cabealho XHTML
TITLE - Define o titulo do arquivo
Comandos META - Fornecem
informaes complementares do
documento usado muitas vezes por
programas externos para avaliao do
documento

20

Comandos META
<META HTTP-EQUIV="author" CONTENT="O seu nome">
<META HTTP-EQUIV="description" CONTENT="Breve
descricao da pagina">
<META HTTP-EQUIV="keywords" CONTENT="Palavraschave da pagina">
<META HTTP-EQUIV="generator" CONTENT="O editor de
html que usa">
<META HTTP-EQUIV="copyright" CONTENT="Ultima
atualizacao">

Comandos bsicos do corpo

Cabealhos (de 1 a 6) - <h1>,
<h2>....<h6>
Representam as sesses de um documento
representando a importncia relativa das
informaes
<h1> Sesso 1 </h1>
<h2> Sub sesso </h2>

Vinculando informaes
Forma de uma URL (Uniform Resorce
Locator)
PROTOCOLO://ENDERECO:PORTA//ARQUIVO
http://www.jb.com.br:80/index.html

http : Protocolo
www.jb.com.br : Endereo
80 Porta do servio
index.html - Arquivo
Alguns destes itens podem ser omitidos dependendo da
situao

21

 Exemplos de Hiperlinks
< a href=http://www.jb.com.br>JB Online </a> (URL absoluta)
< a href=teste.html> Teste </a> (URL relativa)

Vinculaes Internas
Chamadas dentro do prprio documento
<a name=inicio>
<a href=#inicio>

Juntando tudo
<a href=http://www.jb.com.br/index.html#posicao1>Aqui</a>

Imagens
Utilizado normalmente os formatos GIF,
JPEG, PNG
<img src=nome da imagem width=largura imagem height=altura
da imagem alt = legenda da imagem />
Pomo recomendao deve ser sempre colocado a largura e altura
de uma imagem. Permite a carga mais rpida da imagem
Deve ser sempre utilizado o comando ALT para os navegadores
que no utilizam imagem e para melhorar a legibilidade.

Quebras de linhas
<p>......</p>
Pargrafo
O pargrafo-padro uma unidade de composio constituda por um
ou mais de um perodo, em que se desenvolve determinada idia
central, ou nuclear, a que se agregam outras, secundrias, intimamente
relacionadas pelo sentido e logicamente decorrentes dela.

No modo estrito todo texto tem que ser

colocado em um container, por exemplo
<p>..</p>

<br /> - Quebra de linha

22

 Destaque (negrito)- <strong> ...

</strong>
nfase (itlico) - <strong>...</strong>

Listas
Listas no numeradas
<ul>
<li>...</li>
<li>...</li>
</ul>

Listas ordenadas
<ol>
<li>...</li>
<li>...</li>
</ol>

Tipos de listas
<ol type=<TITPO>> para listas ordenadas
Tipo: I - numerias romanos em letras maisculas
Tipo: a -letras minsculas para itens da lista

<ul type=<TIPO>> para listas no ordenadas

tipo disc - Disco
tipo square - Quadrado
tipo circle - Crculo
Quando temos tipos aninhados de lista temos primeiro
disco, circulo e quadrado

23

Caracteres Especiais em
XHTML
So definidos de modo a evitar dvida nas
marcaes
&lt; -<
&gt; --

>

&amp; --

&

& copy;--
& reg;--
& sect;--.

Algumas definies
O cdigo de uma pgina (code page//Character set) de
uma pgina define o mapeamento de uma seqncia de
bits em um dado caracter.
Ex : Letra A - 65 Decimal
Cdigo 437 - Cdigo original da IBM para letras e
nmero
Cdigo 850 - Cdigo para lingua portuguesa usado
em mquinas DOS
Windows 1250 - Criado pela Microsoft para
caracteres da lingua portuguesa

A codificao de caracteres (character encoding)

consiste do mapeamento de um conjunto de caracteres
(character set tambm chamado code page) em alguma
outra coisa como nmeros, simbolos, conjunto de
pulsos, etc de modo a facilitar o arquivamento da
informao ou sua transmisso.
Ex : Cdigo morse uma seqncia de pulsos
eltricos para transmisso
Alguns exemplos :
ISO8859-1 - Conjuntos de caracteres alfabeto latino

24

Unicode
Padro de indstria que permite os
computadores representar e manipular
textos nos diversas idiomas no mundo.
Temos dois tipos bsicos de codificao
para UniCode
UTF-8 - Utiliza um byte para caracteres at
255 e at 4 bytes para demais caracteres
UTF-16 que usa de 2 at 4 bytes para
representar os caracteres

Tabelas
Servem para representar dados tabulados
<table border="1 width=40% summary=exemplo de tabela>
<caption>Pre&ccedil;os por quantidade</caption>
<thead>
<tr>
<th>Quantidade</th>
<th>Pre&ccedil;o</th></tr>
</thead>

<tbody>
<tr>
<td>1</td>
<td>10</td>
</tr>
<tr>
<td>2</td>
<td>20</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>
Total
</th>
<th>
20
</th>
</tr>
</tfoot>
</table>

25

Formulrios
Permitem a entrada de dados na WEB
Estrutura bsica :
<form action=executa.php method=post>
<input type=text name=nome><P>
<input type=submit>
</form>

form - Define um formulrio

action - Especifica a pgina que ser chamada
method - Define como as informaes do
formulrio sero passadas para pgina
chamada. Normalmente utilizado o mtodo
GET ou POST
text - Tipo entrada de texto
name - Nome do campo
submit - Envia as informaes do formulrio
value - Define o valor do campo de um
formulrio

Principais campos do formulrio

text - Campos de entrada de texto
textarea - rea para entrada de dados
password - Campo texto onde no se
visualiza os dados digitados
hidden - campo invisivel
ckeckbox - Caixa de seleo
radio - Boto de seleo
select - Caixa de seleo

26

Comando label em Radio

<form name="input" action="">
<input type="radio" name="sex" id="male" />
<label for="male">Male</label>
<br />
<input type="radio" name="sex" id="female" />
<label for="female">Female</label>
</form>

CSS
Cascating Style Sheets

CSS Cascading Style Sheets folhas de

estilo em cascata. Permitem especificar a
apresentao de uma pgina xhtml (e
portanto xml) espaamento, margens
separadamente da estrutura do
documento (seo, links,. Etc).
A separao da estrutura do layout facilita
a manuteno e modificao do
documento. Os arquivos ficam menores e
indexveis pelo google

27

Estilos inline
A declarao do elemento feita
diretamente na marca xhtml valendo
apenas para esta.
Ex :
<p style=font-size: larger;>... </p>

Estilos incorporados
Os estilos so colocados no cabealho
<head>
<style type=text/css>
p { font-size: 14pt}
</style>
</head>

Folhas estilos Externas

um arquivo de texto externo onde ficam as
declaraes das regras de estilo
<link rel=stylesheet type=text/css
href=teste.css />

Folhas de Estilos Importadas

Anlogas as folhas estilos Externas. So
arquivos externos com informao de css
chamados dentro de uma folha de estilo
incorporada.

28

Exemplo :
<style type=text/css>
p { font-size: 14pt}
@importe estilo.css;
</style>

Demonstrao de CSS

Sintaxe do CSS
Selector
{
propriedade: valor;
propriedade: valor;
propriedade: valor;

}
Os seletores podem ser alfa numricos, underscore e hifem.
Entretanto, no deve-se usar palavras acentuadas comeando com
underscore e hifem.
Ateno : Seletor no tag xhtml mas pode ser associada a
uma

29

 A tag DIV em XHTML serve para definir

um container, uma rea do texto onde
deve se aplicar um determinado formato.
<div id=teste>rea de texto</div>

A tag SPAM em XHTML server para

definir uma rea de texto dentro de um
container onde deve ser aplicado
determinado formato
<span class=teste>texto</span>

Seletores/ Algumas definies

Agrupamento - Permite agrupar seletores
de caractersticas idnticas
h1,h2 {color: red}

Seletores de identificao
So seletores que s podem ser associados
a um nico elemento HTML. Sua repetio
no pode ocorrer. Utilizado para programao
em DHTML.

#aviso { color: red;}

<div id=aviso>
Texto onde aplicado o aviso
</div>

--> Definio
-->uso

Seletor de classe - Diferente do seletor de

identificao, pode ser aplicado a diversos
elementos sendo usados para aplicar
formatao especial a diversos e
diferentes elementos da pgina.
.aviso {color: blue;}

30

 Os seletores de classe podem ser

associados a apenas um elemento.
p.aviso {color: blue;}
Apenas o p ter a classe aviso

Seletores contextuais
S afetar uma rea especfica de um
documento xhtml quando for satisfeita a
declarao do seletor contextual
#aviso .seletorcontextual {color: red;}
<div id="aviso">
<p>deciso <spanclass="seletorcontextual">ocorre nesta
</span>sexta-feira </b>Mais uma
<p><div>

Seletores de atributo
So aplicados quando determinado elemento
XHML possui determinado atributo ou
determinado valor
input[maxlength] {color: blue;}
input[type=submit] {color: blue;}
No funciona corretamente no ie6

Seletores Universais
So aplicados a todos os elementos da
pgina
* {border: 1px solid;}

Seletores de filho
So seletores aplicados apenas aos
descendentes diretos de determinados
formatos - No funciona no ie6
div > em {color: black;}
<div>
Mais <em>uma grande</em>
</div>

Seletores irmos adjacentes

Aplicadas a filhas de um mesmo pai e
adjacentes

31

 p + p{ color: red;}
<div>
<p>Cor nornal</p>
<p>cor vermelha</p>
</div>

Pseudo-Classes
As pseudo classes so utilizadas pare
aplicar efeitos especiais a um determinado
seletor. No so elementos xhmtl mas
efeitos aplicados sobre eles.
Seletor:pseudo-classe {propriedade:valor;}
seletor.classe:pseudo-classe {propriedade:valor;}

Pseudo classes para links :

:link -> hiperlinks no visitados
:visited->hiperlinks visitados
:hover ->hiperlinks com mouse posicionado
:active ->hiperlink ativados (clicados)

Pseudo classe :first-child

Aplicada ao primeiro elemento contido em
outro elemento

Pseudo classe :focus

Aplica a formatao quando ele est com
foco

32

 Exemplo:
h1:focus {
background: blue;
}

Pseudo-Elementos
Permitem formatar elementos de uma pgina
que no sejam marcadores
Ex :
p:first-letter {
color: blue;
}

:first-line - > primeira linha

:first-letter->Primeira letra
:after, :before->Antes e depois de um
conteudo xhtml. (no funciona no IE6)

Comentrios em CSS
Igual a linguagem c /*....*/

33