Informatica Programacao Web HTML Css PHP PDF

Escola Estadual de Educao Profissional - EEEP
Ensino Mdio Integrado Educao Profissional
Curso Tcnico em Informtica
Programao Web HTML - CSS - PHP
Governador Cid Ferreira Gomes Vice Governador Francisco Jos Pinheiro
Secretria da Educao Maria Izolda Cela de Arruda Coelho Secretrio Adjunto Maurcio Holanda Maia
Secretrio Executivo Antnio Idilvan de Lima Alencar
Assessora Institucional do Gabinete da Seduc Cristiane Carvalho Holanda Coordenadora de Desenvolvimento da Escola Maria da Conceio vila de Misquita Vins Coordenadora da Educao Profissional SEDUC Thereza Maria de Castro Paes Barreto
Escola Estadual de Educao Profissional [EEEP]
Ensino Mdio Integrado Educao Profissional
ndice
O que Internet .......................................................................................................................... 6 O que World-Wide Web........................................................................................................... 7 HTTP ............................................................................................................................................... 8 URL ................................................................................................................................................. 8 HTML .............................................................................................................................................. 8 Introduo Linguagem HTML ................................................................................................ 8 Publicao de documentos ......................................................................................................... 9 Documento bsico e seus componentes ................................................................................... 10 A seo <BODY> .......................................................................................................................... 12 Atributos de <BODY>....................................................................................................................... 12 Cabealhos..................................................................................................................................... 12 Cabealho centralizado.................................................................................................................. 14 Cabealho alinhado direita .............................................................................................................. 14 Separadores.................................................................................................................................... 14 Quebra de linha .................................................................................................................................. 14 Pargrafos .......................................................................................................................................... 14 Linha Horizontal ................................................................................................................................ 15 Listas em HTML ........................................................................................................................... 15 Listas de Definio ............................................................................................................................ 15 Listas no-numeradas ........................................................................................................................ 16 Listas e sub-listas ........................................................................................................................... 19 Blocos de texto .............................................................................................................................. 20 <PRE> ............................................................................................................................................... 20 <BLOCKQUOTE> ............................................................................................................................ 20 <ADDRESS>..................................................................................................................................... 20 Formatao de frases ..................................................................................................................... 20 Estilos Lgicos................................................................................................................................... 21 Estilos Fsicos .................................................................................................................................... 21 Cores e fontes ................................................................................................................................ 23 Cores .................................................................................................................................................. 23 Tamanho............................................................................................................................................. 23 Fontes ................................................................................................................................................. 23 Caminhos (uso de links) ................................................................................................................ 24 Caminho relativo ............................................................................................................................... 25 Caminho absoluto .............................................................................................................................. 25 Atributos bsicos de imagem......................................................................................................... 26 ALT .................................................................................................................................................... 26 WIDTH e HEIGHT ........................................................................................................................... 26 BORDER ........................................................................................................................................... 27 ALIGN ............................................................................................................................................... 27 Tabelas...................................................................................................................................... 29 Elementos bsicos de tabelas ................................................................................................... 30 Ttulos, linhas e elementos ................................................................................................................ 30 Ttulos compreendendo mais de uma coluna ou linha....................................................................... 30 Tabelas sem borda.............................................................................................................................. 31 Alinhamentos em tabelas ......................................................................................................... 31 Alinhamentos simples ........................................................................................................................ 32 Alinhamentos combinados................................................................................................................. 32
Informtica - Programao WEB (HTML-CSS-PHP) 1
Alinhamentos de linhas...................................................................................................................... 32 Atributos de largura.................................................................................................................. 33 Atributos de espaamento ........................................................................................................ 35 Extenses de tabelas ...................................................................................................................... 37 Cor de fundo ...................................................................................................................................... 37 Cor de borda ...................................................................................................................................... 37 Imagem de fundo ............................................................................................................................... 38 Frames ...................................................................................................................................... 38 Formulrios .............................................................................................................................. 40 CGI Scripts .................................................................................................................................... 42 Viso Geral ........................................................................................................................................ 43 udio e Vdeo .......................................................................................................................... 46 Folhas de Estilo ........................................................................................................................ 46 Um ttulo genrico ............................................................................................................................. 47 Introduo as CSS .................................................................................................................... 49 O HTML atual ............................................................................................................................... 49 Os problemas criados .................................................................................................................... 49 A soluo proposta ........................................................................................................................ 50 As restries .................................................................................................................................. 50 O efeito cascata ............................................................................................................................. 51 A regra CSS .............................................................................................................................. 52 A regra CSS e sua sintaxe.............................................................................................................. 52 Agrupamento de Seletores ............................................................................................................ 53 O seletor classe .............................................................................................................................. 53 O seletor ID ................................................................................................................................... 55 Inserindo comentrios nas CSS ..................................................................................................... 55 Vinculando folhas de estilo a documentos ............................................................................... 56 A propriedade font ................................................................................................................... 58 As fontes nos elementos HTML .................................................................................................... 58 Valores vlidos para as propriedades da fonte............................................................................... 58 color ... A cor da fonte ................................................................................................................... 60 font-family...O tipo de fonte ......................................................................................................... 61 font-size...O tamanho de fonte ..................................................................................................... 61 font-style...O estilo de fonte ......................................................................................................... 62 font-variant...fontes maisculas "menores" ................................................................................... 62 font-weight...Peso das fontes - negrito (intensidade da cor) ......................................................... 63 font...Todas as propriedades das fontes em uma declarao nica................................................ 63 A propriedade text ................................................................................................................... 65 Os textos nos elementos HTML .................................................................................................... 65 Valores vlidos para as propriedades do texto............................................................................... 66 color ... A cor do texto ................................................................................................................... 67 letter-spacing...O espao entre letras ............................................................................................. 68 word-spacing...O espao entre palavras ........................................................................................ 68 text-align...Alinhar o texto ............................................................................................................ 69 text-decoration...Decorao do texto ............................................................................................. 70 text-indent...Recuo do texto .......................................................................................................... 70 text-transform...Forma das letras do texto ..................................................................................... 71 A propriedade margin ............................................................................................................. 72 A propriedade border ............................................................................................................... 75 As bordas nos elementos HTML ................................................................................................... 75 Valores vlidos para as propriedades das bordas........................................................................... 76 border-width, border-style e border-color ..................................................................................... 77
border-style .................................................................................................................................... 78 border-width .................................................................................................................................. 79 Definir a espessura das bordas superior, esquerda e direita .......................................................... 79 border (declarao nica) .............................................................................................................. 79 Propriedades CSS das bordas ........................................................................................................ 80 A propriedade padding ........................................................................................................... 80 A propriedade background ..................................................................................................... 83 O fundo dos elementos HTML ...................................................................................................... 83 Valores vlidos para as propriedades do fundo ............................................................................. 83 A cor do fundo .............................................................................................................................. 85 A imagem de fundo ...................................................................................................................... 85 Repetir verticalmente a imagem de fundo .................................................................................... 85 Repetir horizontalmente a imagem de fundo ................................................................................ 86 Posicionar uma imagem de fundo ................................................................................................. 86 Ajustar uma imagem de fundo fixa, que no "rola" com a tela. .................................................... 87 Todas as propriedades do fundo em uma declarao nica ........................................................... 87 A propriedade list ................................................................................................................... 88 Mudando o estilo das listas HTML ............................................................................................... 88 Valores vlidos para as propriedades do lista ................................................................................ 88 list-style-image...imagem para marcadores de lista....................................................................... 89 list-style-position...posio dos marcadores de lista ..................................................................... 90 list-style-type...os tipos de marcadores de lista ............................................................................. 91 Definir os marcadores de listas no ordenadas.............................................................................. 91 Definir os marcadores de listas ordenadas .................................................................................... 92 list-style...duas propriedades das listas em uma declarao nica ................................................ 94 Pseudo-elementos CSS ........................................................................................................... 94 Controlando as entrelinhas e o espaamento entre elementos HTML ................................... 97 As propriedades line-height e margin............................................................................................ 97 Alterando o espaamento entre linhas ........................................................................................... 98 E o espaamento (a distncia) entre os pargrafos? ...................................................................... 99 Dicas adicionais ........................................................................................................................... 101 As medidas CSS de comprimento ........................................................................................ 101 Introduo .................................................................................................................................... 101 Unidades de medida de comprimento CSS vlidas ..................................................................... 102 UNIDADE RELATIVA ............................................................................................................... 102 UNIDADE ABSOLUTA ............................................................................................................. 102 Entendendo as unidades de medida CSS .................................................................................... 103 Definindo cores em uma regra CSS ..................................................................................... 104 Introduo ao PHP ..................................................................................................................114 O que PHP ? .............................................................................................................................. 114 Como surgiu ? .................................................................................................................................. 114 Porque aprender PHP ? .................................................................................................................... 115 Sintaxe bsica .............................................................................................................................. 115 Delimitador e separador do cdigo em PHP.................................................................................... 115 Comentrios ..................................................................................................................................... 116 Extenso de arquivos ....................................................................................................................... 116 Comandos de sada(output) ............................................................................................................. 116 Tipo de Dados .................................................................................................................................. 117 Variveis ...................................................................................................................................... 126 Constantes ................................................................................................................................... 126 Operadores................................................................................................................................... 127 Operadores de atribuio ................................................................................................................. 127
Operadores aritmticos .................................................................................................................... 128 Operadores de comparao .............................................................................................................. 128 Operadores lgicos .......................................................................................................................... 129 Operadores de strings ...................................................................................................................... 130 Precedncia de Operadores .............................................................................................................. 130 Expresses ................................................................................................................................... 130 Trabalhando com Arrays ............................................................................................................. 132 O que um array? ........................................................................................................................... 132 Arrays numericamente indexados.................................................................................................... 133 Acessando o contedo de array ....................................................................................................... 133 Utilizando loops para acessar o array .............................................................................................. 134 Arrays Associativos ......................................................................................................................... 134 Arrays multidimensionais ................................................................................................................ 135 Estruturas de Controle ................................................................................................................. 137 IF ...................................................................................................................................................... 137 ELSE ................................................................................................................................................ 137 ELSEIF ............................................................................................................................................ 138 SWITCH .......................................................................................................................................... 138 BREAK ............................................................................................................................................ 139 CONTINUE ..................................................................................................................................... 140 FOR.................................................................................................................................................. 140 FOREACH ....................................................................................................................................... 141 WHILE ............................................................................................................................................ 141 DO...WHILE .................................................................................................................................... 142 Funes ........................................................................................................................................ 142 Criao ............................................................................................................................................. 142 Retornando Valores de uma Funo ................................................................................................ 143 Criando bloco de cdigos reutilizveis ....................................................................................... 144 require( ) .......................................................................................................................................... 144 include( ) .......................................................................................................................................... 144 Funes de Data .......................................................................................................................... 147 Date .................................................................................................................................................. 147 Getdate ............................................................................................................................................ 149 Time ................................................................................................................................................. 150 Mktime............................................................................................................................................. 150 Formulrios.................................................................................................................................. 151 Mtodos GET e POST ..................................................................................................................... 151 Formulrios na prtica ..................................................................................................................... 152 Acessando o MySQL via PHP ......................................................................................................... 153 Sesses e Cookies ........................................................................................................................ 155 Sesses ............................................................................................................................................. 156 Cookies ............................................................................................................................................ 157
O que Internet
Estamos acostumados a ouvir que Internet a "grande rede mundial de computadores" Entretanto, essa definio no exata. Na realidade, Internet "o conjunto de diversas redes de computadores que se comunicam atravs dos protocolos TCP/IP" O hardware para conexo Internet Para conexo discada, preciso ter um modem para comunicao com o provedor de acesso via linha telefnica comum. Para conexo dedicada ADSL, preciso ter uma placa de rede Ethernet 10/100 e um modem ADSL, alm de um separador de sinais do telefone e da transmisso de dados. Para conexo dedicada a cabo, preciso um cablemodem e tambm um separador de sinais de TV e dos dados. Para conexo dedicada wireless, preciso um receptor de microondas e uma antena externa para o acesso rede do provedor. O software bsico para conexo Internet Cada equipamento de hardware tem seus programas prprios para seu funcionamento. Alm do software associado ao hardware para conexo Internet, preciso ter pelo menos um browser (navegador) para se poder visitar os sites disponveis. Exemplos de browser (navegador): Netscape, Internet Explorer, Opera, Mozilla. Protocolos Assim como temos nossas regras sociais de comunicao (por exemplo, em uma palestra somente uma pessoa fala; em uma assemblia, so vrias as pessoas que falam e, mesmo assim, uma pessoa fala por vez), tambm os computadores precisam de algumas regras para trocar informaes. No caso da Internet, essas regras bsicas esto reunidas no conjunto de protocolos chamados TCP/IP. O protocolo IP Na Internet cada computador tem um nmero IP prprio, assim como cada casa tem um endereo nico. Empresas que tm redes ligadas dia e noite na Internet possuem o que se chama acesso dedicado, isto , as conexes de sua rede tm sempre um mesmo nmero IP na Internet. Quando temos acesso Internet atravs de um provedor, usamos o que se chama acesso discado, e nossa conexo com a Internet em geral ganha nmeros IP diferentes a cada acesso. Mesmo assim, quando nosso computador se conecta ao provedor, o nmero IP atribudo a ele nico em toda a Internet. O protocolo TCP Suponhamos que em dado computador existem vrios programas se comunicando atravs da rede em um mesmo instante - por exemplo, uma pgina da Web sendo carregada enquanto se verifica a caixa postal. Como o computador "sabe" que a pgina da Web deve ir para o browser e os e-mails para o programa que l e-mails?
Isso possvel porque cada programa em execuo recebe tambm seu endereo prprio dentro do computador: no caso de programas que se comunicam pela Internet, esse endereo o nmero TCP. Assim, continuando a comparao com endereos fsicos, suponhamos que seu computador um prdio de apartamentos com um dado nmero IP; seu browser e seu programa de e-mail seriam apartamentos distintos nesse prdio, cada qual com seu nmero TCP. Outros protocolos Veremos que, para cada tipo de recurso disponvel pela Internet, tambm existe um protocolo de comunicao especfico, alm do TCP/IP. Recursos da Internet E-mail Servio de intercmbio assncrono de mensagens, o "correio eletrnico" utiliza-se dos protocolos POP ou IMAP e SMTP. FTP Permite a transferncia de arquivos, pelo protocolo FTP - File Transfer Protocol. Telnet Permite a conexo e interao com computadores remotos, simulando um terminal, pelo protocolo telnet. Gopher Sistema precursor da World-Wide Web, utiliza o protocolo gopher para apresentar menus de navegao, documentos e imagens.
O que World-Wide Web

A World-Wide Web (tambm chamada Web ou WWW) , termos gerais, a interface grfica da Internet. Ela um sistema de informaes organizado de maneira a englobar todos os outros sistemas de informao disponveis na Internet. Sua idia bsica criar um mundo de informaes sem fronteiras, prevendo as seguintes caractersticas: - interface consistente; - incorporao de um vasto conjunto de tecnologias e tipos de documentos; - "leitura universal". Para isso, implementa trs ferramentas importantes: - um protocolo de transmisso de dados - HTTP; - um sistema de endereamento prprio - URL; - uma linguagem de marcao, para transmitir documentos formatados atravs da rede - HTML. HTTP
HTTP
significa HyperText Transfer Protocol - Protocolo de Transferncia de Hipertexto.
O HTTP o protocolo usado para a transmisso de dados no sistema World-Wide Web. Cada vez que voc aciona um link, seu browser realiza uma comunicao com um servidor da Web atravs deste protocolo.
URL O sistema de endereamento da Web baseado em uma sintaxe chamada URI (Universal Resource Identifier - Identificador Universal de Recursos). Os endereos que utilizamos atualmente so os URLs, que seguem essa sintaxe.
URL
significa Uniform Resource Locator - Localizador Uniforme de Recursos.
Um exemplo de URL :
http://www.icmc.usp.br/ensino/material/html/url.html
Esse endereo identifica: - o protocolo de acesso ao recurso desejado (http), - a mquina a ser contactada (www.icmc.usp.br), - o caminho de diretrios at o recurso (ensino/material/html/), e - o recurso (arquivo) a ser obtido (url.html). Atravs de URLs tambm acionamos programas (scripts), enviamos parmetros para esses programas, etc. HTML
HTML
significa HyperText Markup Language - Linguagem de Marcao de Hipertexto.
No possvel programar em linguagem HTML, pois ela simplesmente uma linguagem de marcao: ela serve para indicarmos formataes para textos, inserir imagens e ligaes de hipertexto. Os browsers so os responsveis por identificar as marcaes em HTML e apresentar os documentos conforme o que foi especificado por essas marcaes.
Introduo Linguagem HTML

HTML (HyperText Markup Language - Linguagem de Formatao de Hipertexto) fruto do "casamento" dos padres HyTime e SGML. HyTime - Hypermedia/Time-based Document Structuring Language Hy Time (ISO 10744:1992) - padro para representao estruturada de hipermdia e informao baseada em tempo. Um documento visto como um conjunto de eventos concorrentes dependentes de tempo (udio, vdeo, etc.), conectados por webs ou hiperlinks. O padro HyTime independente dos padres de processamento de texto em geral. Ele fornece a base para a construo de sistemas hipertexto padronizados, consistindo de documentos que alicam os padres de maneira particular SGML - Standard Generalized Markup Language Padro ISO 8879 de formatao de textos: no foi desenvolvido para hipertexto, mas torna-se conveniente para transformar documentos em hiper-objetos e para descrever as ligaes. SGML no padro aplicado de maneira padronizada: todos os produtos SGML tm seu prprio sistema para traduzir as etiquetas para um particular formatador de texto.
DTD - Document Type Definition - define as regras de formatao para uma dada classe de documentos. Um DTD ou uma referncia para um DTD deve estar contido em qualquer documento conforme o padro SGML.
Portanto, HTML definido segundo um DTD de SGML.
Todo documento HTML apresenta elementos entre parnteses angulares (< e >); esses elementos so as etiquetas (tags) de HTML, que so os comandos de formatao da linguagem. A maioria das etiquetas tem sua correspondente de fechamento:
<etiqueta>...</etiqueta>
Isso necessrio porque as etiquetas servem para definir a formatao de uma poro de texto, e assim marcamos onde comea e termina o texto com a formatao especificada por ela. Alguns elementos so chamados vazios, pois no marcam uma regio de texto, apenas inserem alguma coisa no documento:
<etiqueta>
Todos os elementos podem ter atributos:

<etiqueta atributo1=valor1 atributo2=valor2>...</etiqueta>
HTML um recurso muito simples e acessvel para a produo de documentos. Nestes captulos, ser possvel aprender grande parte de seus elementos.
Publicao de documentos
Para que uma pgina esteja permanentemente disponvel pela Web, ela precisa ter um endereo fixo, alojada em um servidor. Existem vrios provedores de espao (hosting) gratuitos e tambm os provedores de acesso geralmente oferecem espao para os sites de seus assinantes. Sites com fins lucrativos geralmente so hospedados em provedores de espao pagos. Definida a hospedagem, basta enviar para o provedor os arquivos de seu site (via FTP ou por uma pgina de envio no prprio provedor de espao) e suas pginas j estaro disponveis para visitas.
Na rede do ICMC Para ter sua pgina pessoal, necessrio ter uma rea na rede. Tendo sua rea, o primeiro passo criar, em seu diretrio raiz, um diretrio de nome WWW (em letras maisculas). A partir do momento da criao desse diretrio WWW, o URL
http://www.icmc.usp.br/~seulogin/
- ou http://www.grad.icmc.usp.br/~seulogin/, no caso de alunos de graduao passa a ser reconhecido pelo servidor. Nesse diretrio WWW deve haver um arquivo index.html, que ser a sua pgina principal. A seguir, certifique-se de que sua rea e o diretrio WWW dentro dela estejam com permisso de leitura para "todos" (no ambiente UNIX, d o comando chmod 755 WWW). Feito isso, se voc aluno do ICMC faa o cadastro de sua pgina aqui. Obs.: Estas diretivas se aplicam em particular rede do ICMC; outros sistemas podem ter outras configuraes especficas. Se voc no usurio do ICMC, visite a pgina de seu provedor de acesso Internet ou provedor de e-mail (webmail) e procure informaes sobre hospedagem de pginas.
Documento bsico e seus componentes

A estrutura de um documento HTML apresenta os seguintes componentes:
<HTML> <HEAD><TITLE>Titulo do Documento</TITLE></HEAD> <BODY> texto, imagem, links, ... </BODY> </HTML>
As etiquetas HTML no so sensveis caixa. Traduzindo: tanto faz escrever <HTML>, <Html>, <html>, <HtMl>, ... Os documentos se dividem em duas sees principais, que veremos a seguir. A seo <HEAD> contm informaes sobre o documento. O elemento <TITLE>, por exemplo, define um ttulo, que mostrado no alto da janela do browser. Nesta pgina, por exemplo, est definido assim:
<HEAD> <HEAD><TITLE>A seo <HEAD> - Tutorial HTML do ICMC-USP</TITLE></HEAD>
Todo documento WWW deve ter um ttulo; esse ttulo referenciado em buscas pela rede, dando uma identidade ao documento. Para ver na prtica a importncia do ttulo, se voc adicionar esta pgina aos seus Favoritos (Bookmarks). Note que o ttulo da pgina se tornou a ncora de atalho para ela. Por isso sugerido que os ttulos dos documentos sejam sugestivos, evitando-se ttulos genricos como "Introduo". O ttulo tambm bastante significativo para a listagem de uma pgina nos resultados de pesquisas nos catlogos da Internet. Alm do ttulo, <HEAD> contm outras informaes de importncia para os robs de pesquisa, indicadas nos campos <META>. Campos <META> Os campos <META> tm dois atributos principais:
NAME, indicando um nome para HTTP-EQUIV,
a informao
que faz uma correspondncia com campos de cabealho do protocolo HTTP; a informao desse campo pode ser lida pelos browsers, e provocar algumas aes.
<HEAD> <TITLE>Ttulo do Documento</TITLE> <META NAME="nome" CONTENT="valor"> <META HTTP-EQUIV="nome" CONTENT="valor"> </HEAD>
Este documento, por exemplo, tem as seguintes informaes:

<HEAD> <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-1"> <META HTTP-EQUIV="pragma" CONTENT="no-cache"> <TITLE>A seo <HEAD> - Tutorial HTML do ICMC-USP</TITLE> <META NAME="Author" CONTENT="Maria Alice Soares de Castro - masc@icmc.usp.br">
<META NAME="Generator" CONTENT="Namo WebEditor v5.0"> <META NAME="Description" CONTENT="Manual de referncia para webdesigners e desenvolvedores de sites"> <META NAME="KeyWords" CONTENT="HTML, WWW, Webpublishing, Internet, Webdesign"> <LINK REL="stylesheet" HREF="folhatut.css"> </HEAD>
Alguns valores dos atributos META NAME so inseridos automaticamente por alguns editores, por exemplo: Generator e Author. Os campos Description e KeyWords ajudam a classificao da pgina em algumas ferramentas de busca. Essas informaes no tm qualquer efeito na apresentao da pgina, mas servem como uma explicao ou documentao sobre as informaes contidas nela. H poucos valores para META HTTP-EQUIV em uso. O mais comum content-type, que indica o conjunto de caracteres usado na pgina: essa informao ajuda o browser a exibir corretamente os caracteres especiais que estiverem presentes no texto. Um exemplo de uso comum do atributo HTTP-EQUIV promover a mudana automtica de pginas, atribuindo-lhe o valor Refresh.
<HEAD> <TITLE> ... </TITLE> <META HTTP-EQUIV="Refresh" CONTENT="segundos; URL= pagina.html"> </HEAD>
onde: pagina.html a pgina a ser carregada automaticamente segundos o nmero de segundos passados at que a pgina indicada seja carregada. Como foi comentado no exemplo, o efeito interessante, mas para que serve? Se no pensamos em uma finalidade til para esse efeito, camos na tentao de us-lo toa. A aplicao mais utilizada a atualizao automtica de um documento que, por exemplo, tenha uma foto produzida por uma cmara de vdeo: pode-se forar, com o Refresh, a atualizao dessa pgina, mostrando para o leitor sempre uma imagem mais atual de algum evento sendo focalizado pela cmara. Outra utilizao em chats, ou em pginas que desviem a navegao por documentos desenvolvidos para browsers avanados. A seo <BODY> Tudo que estiver contido em <BODY> ser mostrado na janela principal do browser, sendo apresentado ao leitor. <BODY> pode conter cabealhos, pargrafos, listas, tabelas, links para outros documentos, imagens, formulrios, animaes, vdeos, sons e scripts embutidos. Veja um documento bsico em HTML.
Atributos de <BODY>
Atravs de atributos de <BODY>, podemos definir cores para os textos, links e para o fundo das pginas, bem como uma imagem de fundo (marca dgua):
<BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" ALINK="#rrggbb" VLINK="#rrggbb" BACKGROUND="URL">
onde:
BGCOLOR
cor de fundo (quando no indicada, o browser ir mostrar uma cor padro, geralmente o cinza ou branco; alguns editores podero estabelecer o branco para o fundo da pgina)
TEXT
cor dos textos da pgina (padro: preto)

LINK
cor dos links (padro: azul)

ALINK
cor dos links, quando acionados (padro: vermelho)

VLINK
cor dos links, depois de visitados (padro: azul escuro ou roxo) Seus valores so dados em hexadecimal, equivalentes a cores no padro RGB (Red, Green, Blue). Existem tabelas de cores com esses valores, mas grande parte dos editores j oferece uma interface bem amigvel atravs da qual escolhemos as cores desejadas, sem nos preocuparmos com nmeros esdrxulos tais como #FF80A0. Browsers que seguem a definio de HTML 3.2 em diante, tambm aceitam 16 nomes de cores, tirados da paleta VGA do Windows - por exemplo, podemos escrever BGCOLOR="BLUE". Porm, browsers mais antigos no apresentaro as cores indicadas.
BACKGROUND
indica o URL da imagem a ser replicada no fundo da pgina, como uma marca dgua. Veja o exemplo de uma pgina cuja imagem de fundo . Para efeitos de design, possvel fixar a imagem de fundo, para que ela no se mova junto com o texto ao se rolar a pgina. Esse efeito no padro e funciona no Internet Explorer. Cabealhos H seis nveis de cabealhos em HTML, de <H1> a <H6>:
<H1>Este um cabealho de nvel 1</H1><H2>Este um cabealho de nvel 2</H2> <H3>Este um cabealho de nvel 3</H3><H4>Este um cabealho de nvel 4</H4> <H5>Este um cabealho de nvel 5</H5><H6>Este um cabealho de nvel 6</H6>
Esses cabealhos so mostrados da seguinte forma:
Este um cabealho de nvel 1

Este um cabealho de nvel 3 Este um cabealho de nvel 4
Aninhamento de cabealhos
Os cabealhos no podem ser aninhados, isto , a formatao:
<H2>Este <H1>um cabealho de nvel 1</H1> dentro de um cabealho de nvel 2</H2>
pode produzir algum resultado prximo ao desejado:

Dentro de um cabealho de nvel 2
mas o mais comum que os browsers "entendam" essa formatao como sendo:
<H2>Este </H2> <H1>um cabealho de nvel 1</H1> dentro de um cabealho de nvel 2</H2>
- ou seja, como se estivesse faltando uma etiqueta de fechamento de <H2> antes de <H1>, e faltando uma abertura de <H2> depois do fechamento de <H1>, oferecendo o seguinte resultado:

dentro de um cabealho de nvel 2
Os editores WYSIWYG naturalmente no permitem o aninhamento de cabealhos.
Alinhamento
Os cabealhos tm atributos de alinhamento:
<H2 ALIGN=CENTER>Cabealho centralizado</H2>
Cabealho centralizado
<H3 ALIGN=RIGHT>Cabealho alinhado direita</H3>
Cabealho alinhado direita

<H4 ALIGN=LEFT>Cabealho alinhado esquerda (default)</H4>
Cabealho alinhado esquerda (default) Separadores Como vimos no primeiro exemplo, as quebras de linha do texto fonte no so significativas na apresentao de documentos em HTML. Para organizar os textos, precisamos de separadores, apresentados aqui.
Quebra de linha
Quando queremos mudar de linha, usamos o elemento <BR>. Isso s necessrio quando queremos uma quebra de linha em determinado ponto, pois os browsers j quebram as linhas automaticamente para
apresentar os textos. Com sucessivos <BR>, podemos inserir diversas linhas em branco nos documentos. Esse elemento tem um atributo especial, que ser apresentado no item sobre insero de imagens.
Pargrafos
Para separar blocos de texto, usamos o elemento <P>:
Pargrafo 1;<P>Pargrafo 2.
que produz: Pargrafo1;
Pargrafo2. Combinando pargrafos e quebras de linha, temos:

Pargrafo 1;<br> linha 1 do pargrafo 1, <br>linha 2 do pargrafo 1.<P>Pargrafo 2;<br> linha 1 do pargrafo 2, <br>linha 2 do pargrafo 2.
O resultado da marcao acima : Pargrafo 1; linha 1 do pargrafo 1, linha 2 do pargrafo 1.
Pargrafo 2; linha 1 do pargrafo 2, linha 2 do pargrafo 2.

<P> tem atributo de alinhamento, como os cabealhos: <P ALIGN=CENTER>Assim como os trens, as boas idias s vezes chegam com atraso. <BR>(Giovani Guareschi)</P>
Assim como os (Giovani Guareschi)
trens,
as
boas
idias
vezes
chegam
com
atraso.
<P ALIGN=RIGHT>Como diz o provrbio chins: melhor passar por ignorante uma vez do que permanecer ignorante para sempre.</P>
Como diz o provrbio chins: melhor passar por ignorante uma vez do que permanecer ignorante para sempre.
<P ALIGN=LEFT>Este o alinhamento padro (default), e por isso no vou colocar nenhuma frase especial.</P>
Este o alinhamento padro (default), e por isso no vou colocar nenhuma frase especial.
Linha Horizontal
insere uma linha horizontal: Erro! Indicador no definido. Essa linha tem diversos atributos, oferecendo resultados diversos.
<HR>
insere uma linha de largura 7 (pixels): Erro! Indicador no definido. <HR WIDTH=50%> insere uma linha que ocupa 50% do espao horizontal disponvel: Erro! Indicador no definido. <HR WIDTH=30% ALIGN=RIGHT NOSHADE> insere uma linha de comprimento 30% (do espao horizontal disponvel), alinhada direita, sem efeito tridimensional: Erro! Indicador no definido. <HR SIZE=70 WIDTH=2 ALIGN=LEFT> insere uma linha de largura 70 (pixels), comprimento 2 (pixels), alinhada esquerda (o Netscape, aparentemente, no aceita esta formatao de <HR>):
<HR SIZE=7>
Listas em HTML H vrios tipos de listas em HTML, sendo estas as mais usadas e corretamente apresentadas pelos browsers:
Listas de Definio
Estas listas so chamadas tambm Listas de Glossrio, uma vez que tm o formato:
<DL> <DT>termo a ser definido <DD>definio <DT>termo a ser definido <DD>definio </DL>
Que produz: termo a ser definido definio termo a ser definido definio Este tipo de lista muito utilizado para diversos efeitos de organizao de pginas, por permitir a tabulao do texto. Um exemplo so os ndices de navega_1o presentes nas pgi nas deste tutorial; outro exemplo a lista composta abaixo:
<DL> <DT>Imperadores do Brasil: <DD>D. Pedro I <DL> <DD>Nome completo: Pedro de Alcntara Francisco Antnio Joo Carlos Xavier de Paula Miguel Rafael Joaquim Jos Gonzaga Pascoal Cipriano Serafim de Bragana e Bourbon </DL> <DD>D. Pedro II <DL> <DD>Nome completo: Pedro de Alcntara Joo Carlos Leopoldo Salvador Bibiano Francisco Xavier de Paula Leocdio Miguel Gabriel Rafael Gonzaga </DL> </DL>
Imperadores do Brasil: D. Pedro I Nome completo: Pedro de Alcntara Francisco Antnio Joo Carlos Xavier de Paula Miguel Rafael Joaquim Jos Gonzaga Pascoal Cipriano Serafim de Bragana e Bourbon D. Pedro II Nome completo: Pedro de Alcntara Joo Carlos Leopoldo Salvador Bibiano Francisco Xavier de Paula Leocdio Miguel Gabriel Rafael Gonzaga
Listas no-numeradas
So equivalentes s listas com marcadores do MS Word:
<UL> <LI>item de uma lista <LI>item de uma lista, que pode ser to grande quanto se queira, sem que seja necessrio se preocupar com a formatao das margens de texto <LI>item </UL>
item de uma lista item de uma lista, que pode ser to grande quanto se queira, sem que seja necessrio se preocupar com a formatao das margens de texto item
A diferena entre o resultado da marcao HTML e do Word est na mudana dos marcadores, assinalando os diversos nveis de listas compostas:
<UL> <LI>Documentos bsicos <LI>Documentos avanados <UL> <LI>formulrios <UL> <LI>CGI </UL> <LI>contadores <LI>relgios </UL> <LI>Detalhes sobre imagens </UL>
Documentos bsicos Documentos avanados

o
formulrios
CGI
o o
contadores relgios
Detalhes sobre imagens
Essa lista pode ter marcadores diferentes, indicados atravs do atributo TYPE, que assume os valores CIRCLE, SQUARE e DISC (default):
<UL TYPE=CIRCLE> <LI>um item <LI>mais um item </UL> o o
um item mais um item
Cada item tambm pode ter seu atributo especfico:

<UL> <LI TYPE=DISC>um item <LI TYPE=CIRCLE>mais um item <LI TYPE=SQUARE>ltimo item </UL>
um item
mais um item ltimo item
Listas Numeradas
<OL> <LI>item de uma lista numerada <LI>item de uma lista numerada, que pode ser to grande quanto se queira, sem que seja necessrio se preocupar com a formatao das margens de texto <LI>item de lista numerada </OL>
1. item de uma lista numerada 2. item de uma lista numerada, que pode ser to grande quanto se queira, sem que seja necessrio se preocupar com a formatao das margens de texto 3. item de lista numerada Estas listas no apresentam numerao em formato 1.1, 1.2 etc., quando compostas: 1. Documentos bsicos 2. Documentos avanados 1. formulrios 1. CGI 2. contadores 3. relgios 2. Detalhes sobre imagens Porm, atravs do atributo TYPE (HTML 3.2), <OL TYPE=I> <LI>Documentos bsicos <LI>Documentos avanados <OL TYPE=a> <LI >formulrios <OL TYPE=i> <LI>CGI </OL> <LI>contadores <LI>relgios </OL> <LI>Detalhes sobre imagens </OL> I. II. Documentos bsicos Documentos avanados a. formulrios i. b. c. III. CGI pode-se lidar com a numerao dos itens:
contadores relgios
Detalhes sobre imagens
Ainda segundo HTML 3.2, o atributo START pode indicar o incio da numerao da lista:
<OL START=4 TYPE=A> <LI>um item <LI>outro item <LI>mais um item </OL>
D. um item E. outro item F. mais um item
Listas e sub-listas
As listas podem ser aninhadas. Por exemplo:
<DL> <DT>termo a ser definido <DD>definio <OL> <LI>item de uma lista numerada <LI>item de uma lista numerada <UL> <LI>item de uma lista </UL> <LI>item de uma lista numerada </OL> <DT>termo a ser definido <DD>definio </DL>
termo a ser definido definio 1. item de uma lista numerada 2. item de uma lista numerada
o
item de uma lista
3. item de uma lista numerada termo a ser definido definio Formatao de textos e caracteres H dois tipos de formatao em HTML: lgico e fsico. Os efeitos de apresentao na tela so os mesmos: o motivo da distino entre eles se deve idia bsica de independncia entre especificao e apresentao. Quando formatamos um trecho de texto como cabealho de nvel 1, no explicitamos se esse tipo de cabealho deve ser em alguma fonte determinada, em um tamanho determinado, justificado esquerda ou direita, ou centralizado. Esses detalhes de apresentao so deixados para o browser - o dispositivo de apresentao do documento - que pode ser configurado de acordo com o leitor (usurio final). Desse modo, alm de facilitar enormemente o trabalho de quem escreve os documentos, a linguagem garante a uniformidade de apresentao de cabealhos, pargrafos, listas, etc. A formatao lgica segue o significado lgico do texto marcado: um endereo de e-mail, uma citao etc. Sua apresentao final varia conforme o browser, podendo oferecer resultados mais ricos.
A formatao fsica especifica explicitamente o estilo que se quer para o texto: itlico, grifado etc. Sua apresentao final no sofre grandes variaes. Blocos de texto HTML oferece as seguintes formataes de blocos de texto:
<PRE>
Apresenta o texto na mesma maneira em que foi digitado, mantendo quebras de linha e tabulaes:
<pre>uma outra ali, etc.</pre> linha aqui,
Resulta em:
uma linha aqui, outra ali, etc. Uma vez que <PRE> mantm
o texto original, no se deve forar espaos com essa marcao dentro de outra marcao que j apresente tabulaes e espaos especficos.
<BLOCKQUOTE>
usado para citaes longas:

<blockquote>A massa do Sol arqueia o espao-tempo de tal maneira que, ainda que a Terra siga uma trajetria reta no espao-tempo quadridimensional, parece-nos que se desloca em rbita circular no espao tridimensional.</blockquote> (Stephen W. Hawking, Uma Breve Histria do Tempo)
A massa do Sol arqueia o espao-tempo de tal maneira que, ainda que a Terra siga uma trajetria reta no espao-tempo quadridimensional, parece-nos que se desloca em rbita circular no espao tridimensional.
(Stephen W. Hawking, Uma Breve Histria do Tempo)
<ADDRESS>
Usado para formatar endereos E-mail e referncias a autores de documentos:

Envie crticas e sugestes para <address>webmaster@icmc.usp.br</address>
Envie crticas e sugestes para webmaster@icmc.usp.br Formatao de frases Como visto anteriormente (em Formatao de Textos e Caracteres), HTML permite dois tipos de formatao: lgico e fsico; aqui veremos as formataes mais utilizadas:
Estilos Lgicos
<CITE>
Para ttulos de livros, filmes, e citaes curtas. Exemplo: Assisti Guerra nas Estrelas umas oito vezes!
<CODE>
Para indicar trechos de cdigo de programas. Exemplo:

for (x=0); cl &&(!feof(stdin)); x++)); <DFN>
Indica definio de uma palavra, em geral apresenta o texto em itlico. Exemplo: CERN: Centre dstudes et Recherches Nucleaires
<EM>
nfase, tambm normalmente apresentado em itlico. Exemplo: preciso pesquisar muito para encontrar o termo exato.
<KBD>
Indica uma entrada via teclado. Exemplo: Para ler mensagens recebidas, digite pine -i
<SAMP>
Indica uma seqncia de caracteres, por exemplo uma mensagem de erro ou um resultado. Exemplo: O resultado do primeiro applet : Hello, World!
<STRONG>
Forte nfase, mostrado normalmente em negrito. Exemplo: Antes de enviar um e-mail, confira o campo Subject:!
<VAR>
Indica variveis, ou valores que o usurio dever escrever; geralmente mostrado em itlico. Exemplo: No campo Login, escreva guest.
Estilos Fsicos
<B>
Quando disponvel no browser, mostrado em negrito (em alguns browsers, pode aparecer sublinhado)
<I>
Itlico (em alguns casos, caracteres inclinados)

<TT>
Tipo teletype - fonte de espaamento fixo.

<U>
Sublinhado; deve ser usado com cuidado, pois confunde-se com a apresentao de links. <STRIKE> ou <S> Frase riscada.
<BIG>
Fonte um pouco maior.

<SMALL> Fonte um pouco menor. <SUB>
Frase em estilo ndice, como em H2O.

<SUP>
Frase em estilo expoente, como em Km2. Caracteres especiais HTML permite que caracteres especiais sejam representados por seqncias de escape, indicadas por trs partes: um & inicial, um nmero ou cadeia de caracteres correspondente ao caracter desejado, e um ; final. Quatro caracteres ASCII - <, >, e & tm significados especiais em HTML, e so usados dentro de documentos seguindo a correspondncia: Entidade Caracter
< > &
< > &
Outras sequncias de escape suportam caracteres ISO Latin1. Aqui est uma tabela com os caracteres mais utilizados em Portugus: Erro! Indicador no definido. Erro! Indicador no definido. Como vemos, as sequncias de escape so sensveis caixa. Os editores de HTML fazem essa traduo automaticamente. Alguns editores, no entanto, mantm a acentuao, sem usar as entidades de formatao. Quando isso acontece, deve-se inserir uma indicao do esquema de codificao ISO Latin1, escrevendo:
<HTML> <HEAD> <TITLE>...</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1"> </HEAD> ...
Existem alguns smbolos que vm sendo incorporados ao conjunto de caracteres reconhecidos em HTML. Por exemplo, ©, que o smbolo , ® para , e § para . Tambm se pode usar seqncias com cdigos ASCII, por exemplo:
¿Qu pasa, seor?
Qu pasa, seor? Cores e fontes
Cores
As cores so introduzidas atravs do elemento <FONT>, usando o sistema RGB para cores (da mesma forma que vimos para cores de documentos):
<FONT COLOR="#rrggbb">Texto</FONT>
Assim, um trecho de texto pode ter uma cor diferente da definio geral de cores, feita atravs dos atributos de <BODY>.
Tamanho
A formatao
<FONT SIZE=tamanho_da_letra>Texto</FONT>
permite que o autor do documento altere o tamanho das letras em trechos especficos de texto. O tamanho bsico dos textos 3. Podemos indicar tamanhos relativos a esse, por exemplo:
<FONT SIZE=+2>Letra maior</FONT> Letra normal <FONT SIZE=-2>Letra menor</FONT>
Letra maior Letra normal Letra menor

Fontes
Uma evoluo que permite a escolha da fonte para os textos, o atributo FACE:
<FONT FACE="fonte_da_letra">Texto</FONT>
Por exemplo:
<FONT FACE="Verdana" COLOR="#0000AA">Fonte Verdana azul</FONT> Fonte Verdana azul
<FONT FACE="Arial" COLOR="#00AA00">Fonte Arial verde</FONT> Fonte Arial verde
<FONT FACE="Courier New" COLOR="#AA0000">Fonte Courier New vermelha</FONT> Fonte Courier New vermelha
Marquee possvel obter o efeito de animao de texto, atravs da formatao <MARQUEE>.

<MARQUEE BEHAVIOR=efeito>Texto</MARQUEE>
Atributos de largura e direo do efeito permitem diversas apresentaes diferentes. Por exemplo (o efeito s executado no Internet Explorer e em verses recentes do Netscape - e de maneiras diferentes):
<MARQUEE BEHAVIOR=SCROLL WIDTH=30%>Texto</MARQUEE> <MARQUEE BEHAVIOR=SCROLL WIDTH=30%>Texto</MARQUEE> <MARQUEE BEHAVIOR=SLIDE DIRECTION=RIGHT>Texto</MARQUEE> <MARQUEE BEHAVIOR=SLIDE DIRECTION=LEFT>Texto</MARQUEE>
Ligaes (uso de links) Com HTML possvel fazermos ligaes de uma regio de texto (ou imagem) a um outro documento. Nestas pginas, temos visto exemplos dessas ligaes: o browser destaca essas regies e imagens do texto, indicando que so ligaes de hipertexto - tambm chamadas hypertext links ou hiperlinks ou simplesmente links. Para inserir um link em um documento, utilizamos a etiqueta <A>, da seguinte forma:
<A HREF = "arq_destino">ncora</A>
onde:
arq_destino
o URL do documento de destino;

ncora
o texto ou imagem que servir de ligao hipertexto do documento sendo apresentado para o documento de destino.
Atributos
<A> HREF
tem vrios atributos, utilizados de acordo com a ao associada ao link. Os mais usados so: Indica o arquivo de destino da ligao de hipertexto.
TARGET
Indica o frame em que ser carregado o arq_destino. Maiores detalhes na seo sobre frames.
NAME
Marca um indicador, isto , uma regio de um documento como destino de uma ligao. Caminhos (uso de links) Os links podem estar indicados como caminhos relativos ou absolutos.
Caminho relativo
O caminho relativo pode ser usado sempre que queremos fazer referncia a um documento armazenado no mesmo servidor do documento atual. Atravs do campo de endereo do browser, vemos que este documento est localizado em um diretrio /ensino/material/html/ do servidor www.icmc.usp.br. Para escrevermos um link deste documento para o documento doc2.html no diretrio /ensino/material/html/exemplos/, tudo que precisamos fazer escrever:
Veja o <A HREF="exemplos/doc2.html">exemplo de caminho relativo</A>.
Da mesma forma, se quisermos um link deste documento para um outro que esteja em diretrio diferente neste mesmo servidor, escrevemos, por exemplo:
<A HREF="/ensino/material/">Instituto Material Didtico</A> de Cincias Matemticas e de Computao -
que produz o link: Instituto de Cincias Matemticas e de Computao - Material Didtico Para usar links com caminhos relativos preciso, portanto, conhecer a estrutura do diretrio do servidor no qual estamos trabalhando. Quando h alguma dvida, o melhor usar o caminho absoluto.
Caminho absoluto
Utilizamos o caminho absoluto quando desejamos referenciar um documento que esteja em outro servidor, por exemplo:
<A HREF="http://www.labes.icmc.usp.br/">Laboratrio de Engenharia de Software</A>
que oferece um link para um documento no servidor WWW do Laboratrio de Engenharia de Software: Laboratrio de Engenharia de Software Com a mesma sintaxe, possvel escrever links para qualquer servidor de informaes da Internet. Indicadores (uso de links)
Como foi dito anteriormente, o atributo NAME permite indicar um trecho de documento como ponto de chegada de uma ligao hipertexto.
A formatao:
<A NAME="inicio">Indicadores (uso de links)</A>
faz com que Se escrevermos:
ncora
Indicadores
(uso
de
links)
seja
destino
de
um
link.
<A HREF="#inicio">Topo do documento</A>.
teremos uma ligao hipertexto para um trecho deste mesmo documento: Topo do documento. Da mesma forma, construmos links para trechos determinados de outros documentos, desde que saibamos quais trechos do documento destino esto marcados para ponto de chegada de um link. Por exemplo:
So Carlos um tecnologia</A>. <A HREF= "/ambiente/saocarlos/histprog.html#polo">plo de alta
produz um link para um pargrafo marcado com <A NAME="polo"> no arquivo histprogr.html sobre a cidade de So Carlos, no diretrio /ambiente/saocarlos/: So Carlos um plo de alta tecnologia. Insero de imagens O elemento IMG insere imagens que so apresentadas junto com os textos. Um atributo SRC deve estar presente, da seguinte forma:
<IMG SRC="URL_imagem">
onde URL_imagem o URL do arquivo que contm a imagem que se quer inserir; pode ser referenciada uma imagem que esteja em um outro servidor (o que, logicamente, no conveniente). Assim, escrevendo:
<IMG SRC = "/icones/newred.gif">
inserimos a figura
no documento.
As imagens usadas na Web so armazenadas em arquivos com extenso *.gif, *.xbm, *.jpg (ou *.jpeg), *.png. Atributos bsicos de imagem
ALT
Indica um texto alternativo, descrevendo brevemente a imagem, que apresentado no lugar da imagem nos browsers texto, ou quando se desabilita o carregamento de imagens em browsers grficos. recomendvel que esteja sempre presente.
<IMG SRC="URL_imagem" ALT="descrio_da_imagem">
Dessa forma, <IMG SRC="/icones/newred.gif" ALT="Novo!"> apresentado nos browsers grficos assim: e, nos browsers texto, assim: [Novo!]
WIDTH e HEIGHT
Atributos de dimenso da imagem, em pixels. Grande parte dos editores HTML coloca automaticamente os valores destes atributos, quando indicamos a insero de uma imagem.
<IMG SRC="imagem" ALT="descrio" WIDTH="largura" HEIGHT="altura">
Uma das vantagens de se usar esses atributos que o browser pode montar mais rapidamente as pginas, por saber de antemo o espao que dever ser reservado a elas.
BORDER
Quando uma frase marcada como ncora de um link, ela se apresenta sublinhada; quando uma imagem faz as vezes de ncora, ganha uma borda que indica sua condio. Por exemplo: Porm, por questes de apresentao, nem sempre interessa termos essa borda ao redor da imagem. Assim, com o atributo BORDER, podemos controlar esse detalhe. Se quisermos uma borda mais larga...
<A HREF="URL"><IMG SRC="imagem" ALT="descrio" BORDER=4></A>
Se quisermos uma imagem sem borda...

<A HREF="URL"><IMG SRC="imagem" ALT="descrio" BORDER=0></A>
Essa borda pode ser apresentada tambm em imagens que no so ncora de links. Basta aplicar, por exemplo, a formatao
<IMG SRC="icones/fotoicm.gif" ALT="Foto antiga do ICMC" BORDER=2>
Assim, possvel dar mais destaque a uma imagem, sem ser necessrio edit-la:
Foto original
Foto com borda gerada por HTML
ALIGN
<IMG SRC="imagem" ALT="descrio" ALIGN=alinhamento>
Existem tambm atributos de alinhamento, que produzem os seguintes resultados:
ALIGN=TOP Alinha o texto adjacente com o topo da imagem, embora com linhas compridas o resultado no seja muito bom.
ALIGN=MIDDLE Alinha o texto adjacente com o meio da imagem, embora com linhas compridas o resultado no seja muito bom
ALIGN=BOTTOM
Alinha o texto adjacente com a parte de baixo da imagem (default)
Alinha imagem direita, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem.
ALIGN=RIGHT
Alinha imagem esquerda, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem.
ALIGN=LEFT
Para ter duas imagens, uma em cada margem, numa mesma linha, escreva:
<IMG align=left SRC="imagem.gif" alt="imagem"><IMG align=right alt="imagem">...e se pode escrever vontade entre as imagens! SRC="imagem.gif"
Um detalhe surgido com o alinhamento de imagens foi a necessidade de se liberar o texto desse alinhamento. Ou seja: Suponhamos um texto mais ou menos curto, que desejamos colocar aqui, com a imagem ilustrativa... ...mas gostaramos que este trecho j estivesse abaixo da imagem! De acordo com o comprimento da primeira frase, no seria possvel usar o alinhamento TOP. Para conseguir isso, seria necessrio incluir diversos <BR> consecutivos, inserindo linhas em branco; mesmo assim, o resultado final poderia ser bem pouco elegante. Surgiu, ento, o atributo CLEAR para <BR>. Com esse atributo, podemos, por exemplo... ...ter um texto posicionado no ponto em que a margem direita fica livre, com <BR CLEAR=RIGHT> ou no ponto em que a margem esquerda fica livre, com <BR CLEAR=LEFT> Dessa maneira, podemos controlar bem a posio relativa dos textos. Tambm se pode posicionar o texto no ponto em que ambas as margens esto livres. Isso conseguido com <BR CLEAR=ALL> E, assim, vimos tudo sobre quebras de linha depois de imagens! Molduras de imagem Para melhorar ainda mais a apresentao das imagens junto com os textos, foram desenvolvidos atributos de moldura. Estes atributos definem o espao - vertical e horizontal - deixado entre as imagens e os textos circundantes:
<IMG SRC="imagem" VSPACE=espao_vertical> <IMG SRC="imagem" HSPACE=espao_horizontal>
O efeito desses atributos pode ser percebido nos textos abaixo. No primeiro texto, as imagens no tm atributos de moldura ( fcil notar como o texto fica "grudado" na imagem) O Instituto de Cincias Matemticas e de Computao (ICMC-USP) formado pelos Departamentos de Matemtica e de Cincias de Computao e Estatstica. O ICMC originou-se em 1953, como Departamento de Matemtica da Escola de Engenharia de So Carlos (EESC-USP), fundado por renomados matemticos italianos e brasileiros. Atualmente, o Departamento de Matemtica oferece
cursos de Licenciatura e Bacharelado em Matemtica em nvel de graduao, alm de um programa de ps-graduao que inclui mestrado e doutorado na rea de Matemtica. O Departamento de Computao e Estatstica responsvel pelo curso de Bacharelado em Cincia de Computao, no qual ingressam 40 alunos por ano. Em nvel de ps-graduao oferece, desde 1975, o programa de mestrado em Cincias de Computao e Matemtica Computacional e, a partir de agosto de 1995, o programa de doutorado na mesma rea. Neste segundo texto so usadas, respectivamente, as formataes:
<IMG SRC="icones/fotoicm.gif" WIDTH="148" HEIGHT="95" ALIGN=left VSPACE="30">
e
<IMG SRC="icones/smallpos.gif" WIDTH="160" HEIGHT="71" ALIGN=right HSPACE="30">
O Instituto de Cincias Matemticas e de Computao (ICMC-USP) formado pelos Departamentos de Matemtica e de Cincias de Computao e Estatstica. O ICMC originou-se em 1953, como Departamento de Matemtica da Escola de Engenharia de So Carlos (EESC-USP), fundado por renomados matemticos italianos e brasileiros. Atualmente, o Departamento de Matemtica oferece cursos de Licenciatura e Bacharelado em Matemtica em nvel de graduao, alm de um programa de ps-graduao que inclui mestrado e doutorado na rea de Matemtica. O Departamento de Computao e Estatstica responsvel pelo curso de Bacharelado em Cincia de Computao, no qual ingressam 40 alunos por ano. Em nvel de ps-graduao oferece, desde 1975, o programa de mestrado em Cincias de Computao e Matemtica Computacional e, a partir de agosto de 1995, o programa de doutorado na mesma rea. Os dois atributos de moldura podem estar presentes ao mesmo tempo. Vejamos primeiro o texto com a imagem sem moldura: "A cultura UNIX comeou a ser apreciada por usurios brasileiros ainda na dcada de 70, pelos contatos de pesquisadores brasileiros em cursos de aperfeioamento no exterior - notadamente na Amrica do Norte. O contingente era, contudo, pequeno e restrito a acadmicos. A disseminao da cultura UNIX no mercado comercial s teve incio com o advento da dcada de 80." (Citao de texto encontrado pgina 18 do livro UNIX - Guia do Usurio - Autores: Marcus C. Sampaio, Jacques P. Sauv e J. Anto B. Moura - McGraw-Hill, 1988) Abaixo, vemos a aplicao dos dois atributos, atravs da formatao:
<IMG SRC="icones/earth.gif" VSPACE="20"> ALIGN="LEFT" WIDTH="63" HEIGHT="68" HSPACE="20"
"A cultura UNIX comeou a ser apreciada por usurios brasileiros ainda na dcada de 70, pelos contatos de pesquisadores brasileiros em cursos de aperfeioamento no exterior - notadamente na Amrica do Norte. O contingente era, contudo, pequeno e restrito a acadmicos. A disseminao da cultura UNIX no mercado comercial s teve incio com o advento da dcada de 80." (Citao de texto encontrado pgina 18 do livro UNIX - Guia do Usurio - Autores: Marcus C. Sampaio, Jacques P. Sauv e J. Anto B. Moura - McGraw-Hill, 1988)
Tabelas
A formatao de tabelas foi adotada bem antes de sua incluso na definio de HTML. A manipulao de tabelas, mesmo em editores, trabalhosa; a maior diferena entre tabelas em HTML e em editores como o MS Word, entretanto, o fato das tabelas em HTML serem definidas apenas em termos de linhas e no de colunas. Mas isso ser percebido no decorrer destas pginas. As tabelas foram uma grande conquista para os autores de documentos para a Web. Com elas possvel, por exemplo, termos estas pginas do tutorial organizadas em colunas, sendo uma delas reservada aos
links de navegao dentro de cada seo. Tabelas implementam um conceito importante de layout: as grades, segundo as quais organizamos textos e ilustraes de maneira harmoniosa. Como j foi possvel perceber, as tabelas contm textos, listas, pargrafos, imagens, formulrios e vrias outras formataes - inclusive outras tabelas. Novas verses de HTML e de browsers populares vm acrescentando diversos atributos s tabelas, e nosso objetivo aqui saber lidar com a maioria desses recursos disponveis.
Elementos bsicos de tabelas

<TABLE>...</TABLE>
delimita uma tabela. Um atributo bsico BORDER, que indica a apresentao da
borda.
<TABLE BORDER="borda"> ... </TABLE>
Ttulos, linhas e elementos

<CAPTION>...</CAPTION>
define o ttulo da tabela

<TR>...</TR>
delimita uma linha

<TH>...</TH>
define um cabealho para colunas ou linhas (dentro de <TR>)

<TD>...</TD>
delimita um elemento ou clula (dentro de <TR>) Uma tabela simples:

<TABLE BORDER=4> <CAPTION>Primeiro exemplo</CAPTION> <TR><TH>Coluna 1</TH><TH>Coluna 2</TH></TR> <TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR> <TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD></TR> </TABLE>
Primeiro exemplo Coluna 1 Coluna 2 linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2
Ttulos compreendendo mais de uma coluna ou linha

possvel englobar colunas e linhas, atravs dos atributos COLSPAN (para colunas) e ROWSPAN (para linhas):
<TABLE BORDER=1> <TR><TH COLSPAN=2>Colunas 1 e 2</TH></TR> <TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR> <TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD></TR> <TR><TH ROWSPAN=3>3 linhas</TH><TD>uma linha</TD></TR> <TR><TD>duas linhas</TD></TR> <TR><TD>tres linhas</TD></TR> </TABLE>
Colunas 1 e 2 linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2
uma linha 3 linhas duas linhas tres linhas Neste exemplo, vemos que o cabealho Colunas 1 e 2 compreende duas colunas (COLSPAN=2); o cabealho 3 linhas compreende, por sua vez, 3 linhas (ROWSPAN=3).
Tabelas sem borda

As pginas deste tutorial foram construdas com tabelas sem borda. Para tanto, foi empregada a seguinte delarao:
<TABLE BORDER="0"> ... </TABLE>
Alinhamentos em tabelas
Este exemplo servir para estudarmos alinhamentos, controle de larguras e espaamento em tabelas: O Instituto de Cincias Matemticas e de Computao (ICMC-USP) formado pelos Departamentos de Matemtica e de Cincias de Computao e Estatstica. O ICMC originou-se em 1953, como Departamento de Matemtica da Escola de Engenharia de So Carlos (EESC-USP), fundado por renomados matemticos italianos e brasileiros.
Prdio principal do ICMC-USP
Atualmente, o Departamento de Matemtica oferece cursos de Departamento de Matemtica Licenciatura e Bacharelado em Matemtica e de Bacharelado em (SMA) Matemtica Aplicada e Computao Cientfica. O Departamento de Computao e Estatstica responsvel pelo Departamento de Computao Bacharelado em Cincia de Computao e pelo curso noturno de e Estatstica (SCE) Bacharelado em Informtica. Para maiores informaes: Cursos de Graduao: grad@icmc.usp.br Cursos de Ps-Graduao: posgrad@icmc.usp.br O contedo informativo, porm a apresentao no agradvel devido disposio do texto na tabela. Primeiro, vamos mexer com os alinhamentos.
Alinhamentos simples
Os alinhamentos padro em tabelas, como podemos ver no exemplo acima, so: no sentido horizontal: alinhamento esquerda no sentido vertical: alinhamento no centro da clula As linhas e clulas podem ter alinhamentos definidos atravs dos atributos: ALIGN = alin_horizontal VALIGN = alin_vertical
Vejamos como esses alinhamentos funcionam nas clulas:
<TD ALIGN=alin_horizontal>Texto da clula</TD> <TD VALIGN=alin_vertical>Texto da clula</TD>
Padro Padro
ALIGN=LEFT VALIGN=TOP
ALIGN=CENTER
ALIGN=RIGHT
VALIGN=MIDDLE VALIGN=BOTTOM
Obs.: a tabela acima foi feita especialmente para mostrar as diferenas entre os alinhamentos. Uma tabela comum ajusta o tamanho de suas clulas ao contedo, desta forma: Padro align=left align=center align=right Padro valign=top valign=middle valign=bottom
Alinhamentos combinados
Uma mesma clula pode ter atributos ALIGN e VALIGN:
<TD ALIGN=alin_horizontal VALIGN=alin_vertical>Texto da clula</TD>
Por exemplo: Padro

ALIGN=LEFT, VALIGN=BOTTOM ALIGN=CENTER, VALIGN=TOP ALIGN=RIGHT, VALIGN=MIDDLE
Alinhamentos de linhas
O alinhamento pode ser aplicado a linhas inteiras, com:
<TR ALIGN=alin_horizontal VALIGN=alin_vertical>Texto da clula</TR>
Porm, o alinhamento declarado em uma clula prevalece sobre o alinhamento da linha, como se v no exemplo: center center
TD VALIGN=TOP
center
TD ALIGN=RIGHT
bottom bottom Isso pode ser interessante para algumas aplicaes.
bottom
J conseguimos mexer um pouco na tabela inicial, inserindo alinhamentos combinados; sero necessrios mais alguns passos para que a tabela fique realmente "apresentvel" - o exemplo continua nos itens sobre larguras e espaamentos. O Instituto de Cincias Matemticas e de Computao (ICMC-USP) formado pelos Departamentos de Matemtica e de Cincias de Computao e Estatstica. O ICMC originou-se em 1953, como Departamento de Matemtica da Escola de Engenharia de So Carlos (EESC-USP), fundado por
Prdio principal do ICMC-USP
renomados matemticos italianos e brasileiros. Departamento de Matemtica Atualmente, o Departamento de Matemtica oferece cursos de Licenciatura e Bacharelado em Matemtica e de Bacharelado em (SMA) Matemtica Aplicada e Computao Cientfica. Departamento de Computao O Departamento de Computao e Estatstica responsvel pelo Bacharelado em Cincia de Computao e pelo curso noturno de e Estatstica (SCE) Bacharelado em Informtica.
Atributos de largura
No item anterior, foi comentado que uma tabela comum ajusta o tamanho de suas clulas ao contedo. Por exemplo: janeiro fevereiro maro abril maio junho Para apresentar uma tabela ocupando determinado espao disponvel na linha, usamos o atributo WIDTH. Esse atributo pode ser aplicado tambm a linhas e clulas. Essa largura pode ser definida em porcentagem (do espao disponvel):
WIDTH=x%
ou em pixels:
WIDTH=x
Ex.1: Tabela ocupando 50% do espao disponvel

<TABLE BORDER=1 width=50%>
janeiro abril
fevereiro maio
maro junho
Ex.2: Tabela ocupando 50% do espao disponvel, com uma coluna de 60% do espao disponvel na tabela
<TABLE BORDER=1 width=50%> <TR> <TD>janeiro</TD><TD width=60%>fevereiro</TD><TD>maro</TD> </TR> <TR> <TD>abril</TD><TD width=60%>maio</TD><TD>junho</TD> </TR> </TABLE>
janeiro abril
fevereiro maio
maro junho
Ex3.: O controle da largura da tabela est limitado dimenso de seu contedo:

<TABLE BORDER=1 width=50%> <TR> <TD>janeiro</TD><TD width=1%>fevereiro</TD><TD>maro</TD> </TR> <TR> <TD>abril</TD><TD width=1%>maio</TD><TD>junho</TD> </TR> </TABLE>
janeiro
fevereiro maro
abril
maio
junho
De volta ao exemplo inicial, j podemos melhorar um pouco mais nossa tabela. Mantendo os alinhamentos definidos na seo anterior, aplicaremos atributos de largura: O Instituto de Cincias Matemticas e de Computao (ICMC-USP) formado pelos Departamentos de Matemtica e de Cincias de Computao e Estatstica. O ICMC originou-se em 1953, como Departamento de Matemtica da Escola de Engenharia de So Carlos (EESC-USP), fundado por renomados matemticos italianos e brasileiros.
Prdio principal ICMSC-USP
do
Departamento deAtualmente, o Departamento de Matemtica oferece cursos de Licenciatura e Matemtica (SMA) Bacharelado em Matemtica e o Bacharelado em Matemtica Aplicada e Computao Cientfica. Departamento de O Departamento de Computao e Estatstica responsvel pelo Bacharelado em Computao e Cincia de Computao e o curso noturno de Bacharelado em Informtica. Estatstica (SCE)
Atributos de espaamento
Dois atributos permitem o controle de espaamento em tabelas: CELLPADDING - espao entre o texto e as bordas da clula CELLSPACING - espao entre clulas Tomemos a mesma tabela simples da seo anterior: janeiro fevereiro maro abril maio junho
Ex.1: Espao entre o texto e as bordas

<TABLE BORDER=1 CELLPADDING=20>
janeiro abril
fevereiro maio
maro junho
Ex.2: Espao entre clulas

<TABLE BORDER=1 CELLSPACING=20>
janeiro abril
fevereiro maio
maro junho
Ex3.: Espao entre texto e bordas, e espao entre clulas

<TABLE BORDER=1 CELLPADDING=20 CELLSPACING=20>
janeiro
fevereiro
maro
abril
maio
junho
Assim, damos mais uma mexida na tabela inicial: O Instituto de Cincias Matemticas e de Computao (ICMC-USP) formado pelos Departamentos de Matemtica e de Cincias de Computao e Estatstica. O ICMC originou-se em 1953, como Departamento de Matemtica da Escola de Engenharia de So Carlos (EESC-USP), fundado por renomados matemticos italianos e brasileiros.
Prdio principal ICMSC-USP
do
Departamento Matemtica (SMA)
Departamento Computao Estatstica (SCE) Para maiores informaes: Cursos de Graduao: grad@icmsc.sc.usp.br Cursos de Ps-Graduao: posgrad@icmsc.sc.usp.br Como toque final, retiramos a borda:
deAtualmente, o Departamento de Matemtica oferece cursos de Licenciatura e Bacharelado em Matemtica e o Bacharelado em Matemtica Aplicada e Computao Cientfica. de O Departamento de Computao e Estatstica responsvel pelo Bacharelado em e Cincia de Computao e o curso noturno de Bacharelado em Informtica.
O Instituto de Cincias Matemticas e de Computao (ICMC-USP) formado pelos Departamentos de Matemtica e de Cincias de Computao e Estatstica. O ICMC originou-se em 1953, como Departamento de Matemtica da Escola de Engenharia de So Carlos (EESC-USP), fundado por renomados matemticos italianos e brasileiros.
Prdio principal ICMC-USP
do
Departamento Matemtica (SMA)
Departamento Computao Estatstica (SCE) Para maiores informaes: Cursos de Graduao: grad@icmc.usp.br Cursos de Ps-Graduao: posgrad@icmc.usp.br Agora j vimos grande parte dos recursos disponveis para manipular tabelas, que permitem produzir bons efeitos de apresentao. Extenses de tabelas Diversas extenses de tabelas possibilitam a apresentao de efeitos muito bons nas pginas.
de Atualmente, o Departamento de Matemtica oferece cursos de Licenciatura e Bacharelado em Matemtica e o Bacharelado em Matemtica Aplicada e Computao Cientfica. de O Departamento de Computao e Estatstica responsvel pelo Bacharelado em e Cincia de Computao e o curso noturno de Bacharelado em Informtica.
Cor de fundo
<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10 BGCOLOR="#E1FFD9">
janeiro abril
fevereiro maio
maro junho
<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10> <TR><TD BGCOLOR="#E1FFD9">janeiro</TD><TD>fevereiro</TD> <TD BGCOLOR="#E1FFD9">maro</TD></TR> <TR><TD>abril</TD><TD BGCOLOR="#E1FFD9">maio</TD><TD>junho</TD></TR> </TABLE>
janeiro abril
fevereiro maio
maro junho
Cor de borda
<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10 BGCOLOR="#E1FFD9" BORDERCOLOR="#00FF00">
janeiro Abril
fevereiro maio
maro junho
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING=10 BORDERCOLOR="#00FF00"> <TR> <TD bgcolor="#E1FFD9">janeiro</TD><TD>fevereiro</TD> <TD bgcolor="#E1FFD9">maro</TD> </TR> <TR> <TD>abril</TD><TD bgcolor="#E1FFD9">maio</TD><TD>junho</TD> </TR> </TABLE>
janeiro abril
fevereiro maio
maro junho
Imagem de fundo
<TABLE BORDER=5 BACKGROUND="imagem">
janeiro abril
fevereiro maio
maro junho
<TD BACKGROUND="imagem">
janeiro abril
fevereiro maio
maro junho
Frames
Os frames so divises da tela do browser em diversas telas (ou quadros). Com isso, torna-se possvel apresentar mais de uma pgina por vez: por exemplo, um ndice principal em uma parte pequena da tela, e os textos relacionados ao ndice em outra parte.
muito fcil colocar frames em pginas; porm, nem todos os usurios gostam deles, pois nem sempre a navegao fcil, alm de problemas para a impresso e a marcao dos documentos interiores aos frames nos bookmarks. A alternativa natural para os frames so as tabelas. Uma pgina com frames tem um texto fonte semelhante a:
<HTML> <HEAD><TITLE>Assunto X</TITLE></HEAD> <FRAMESET COLS="20%, 80%"> <FRAME SRC="indice1.html"> <FRAME SRC="apresenta.html" NAME="principal"> <NOFRAME> <BODY> <H2>Bem-vindo pgina do assunto X!</h2> <P> Bl bl bl bl bl bl bl bl bl bl </BODY> </NOFRAME> </FRAMESET> </HTML>
A parte FRAMESET define a diviso da pgina em quadros. Neste exemplo, a pgina ser dividida em duas colunas, sendo a primeira com 20% do tamanho da tela, e a segunda coluna com os restantes 80% da tela. Dentro da formatao de FRAMESET, temos os FRAME SRC, que so referncias s pginas que sero mostradas nos frames definidos Assim, no cdigo acima vemos que a pgina indice1.html ser mostrada na primeira coluna (que ocupar 20% da tela), e a pgina apresenta.html ser mostrada na segunda (ocupando 80% da tela). A formatao de frames inclui tambm uma parte NOFRAME, que mostrada normalmente pelos browsers que no suportam sua apresentao. Atributos de Frames At este ponto, vimos os atributos COLS e ROWS (para FRAMESET), SRC e NAME (para FRAME). Outros atributos permitem um maior controle sobre a apresentao: Eliminao das bordas dos frames:
<FRAMESET COLS="20%, 80%" FRAMEBORDER="no"> <FRAME SRC="indice4.html"> <FRAME SRC="apresenta4.html" NAME="principal"> </FRAMESET>
Frame sem barra de rolagem:

<FRAMESET COLS="20%, 80%"> <FRAME SRC="indice4.html" SCROLLING="no"> <FRAME SRC="apresenta4.html" NAME="principal"> </FRAMESET>
[Veja o exemplo] bom lembrar que a barra de rolagem de um frame fica sempre direita; no possvel, atualmente, mudar essa caracterstica. Aplicaes de Frames e Cuidados Frames so interessantes para apresentar conjuntos de pginas com um ndice fixo para a navegao.
Alm disso, torna-se possvel mostrar diversas pginas e/ou mdias em uma nica janela do browser. Um cuidado procurar controlar bem a navegao, evitando que o acionamento de links no leve o leitor a ver seu browser criar frames dentro de frames, gerando uma grande confuso (veja item seguinte, sobre "limpar" a tela). Limpando a tela H basicamente dois efeitos possveis para limpar a apresentao de frames, e isso feito com "targets" especiais (o atributo TARGET foi apresentado no item Links com frames):
TARGET="_top"
limpa os frames que estiverem ativos, apresentando a pgina de destino na tela inteira abre uma nova janela do browser para apresentar a pgina de destino
TARGET="_blank"
Interao A interao realizada de duas formas diferentes: 1. atravs de programas executados/interpretados pelo browser (isto , do lado do cliente); 2. atravs de programas executados pelo servidor HTTP. Conforme a aplicao, apenas um destes tipos de interao pode ou deve ser utilizado.
Formulrios
Um formulrio um modelo para a entrada de um conjunto de dados. O primeiro passo para fazer formulrios aprender as etiquetas que desenham as janelinhas de entrada de dados, para depois trabalharmos com os scripts, que so os programas que tratam esses dados, oferecendo os servios desejados (acesso a banco de dados, envio de e-mail, etc.). O elemento <FORM> delimita um formulrio e contm uma seqncia de elementos de entrada e de formatao do documento.
<FORM ACTION="URL_de_script" METHOD=mtodo>...</FORM>
Os atributos de FORM que nos interessam agora so:

ACTION
Especifica o URL do script ao qual sero enviados os dados do formulrio.

METHOD
Seleciona um mtodo para acessar o URL de ao. Os mtodos usados atualmente so GET e POST. Ambos os mtodos transferem dados do browser para o servidor, com a seguinte diferena bsica:
POST
- os dados entrados fazem parte do corpo da mensagem enviada para o servidor; - transfere grande quantidade de dados.
GET
- os dados entrados fazem parte do URL (endereo) associado consulta enviada para o servidor; - suporta at 128 caracteres. Veremos maiores detalhes sobre mtodos no item CGI.
FORM
tambm pode apresentar o atributo:
ENCTYPE
Indica o tipo de codificao dos dados enviados atravs do formulrio. O tipo default application/x-www-form-urlencoded. Outro tipo aceito por alguns browsers text/plain. Os formulrios podem conter qualquer formatao - pargrafos, listas, tabelas, imagens - exceto outros formulrios. Em especial, colocamos dentro da marcao de <FORM> as formataes para campos de entrada de dados, que so trs: <INPUT>, <SELECT> e <TEXTAREA>. Todos os campos de entrada de dados tm um atributo NAME, ao qual associamos um nome, que ser utilizado posteriormente pelo script. So os scripts que organizam esses dados de entrada em um conjunto de informaes significativas para determinado propsito. Primeiro vamos ver os tipos de campos para montar um formulrio, e depois passaremos aos scripts. Formulrios Um formulrio um modelo para a entrada de um conjunto de dados. O primeiro passo para fazer formulrios aprender as etiquetas que desenham as janelinhas de entrada de dados, para depois trabalharmos com os scripts, que so os programas que tratam esses dados, oferecendo os servios desejados (acesso a banco de dados, envio de e-mail, etc.). O elemento <FORM> delimita um formulrio e contm uma seqncia de elementos de entrada e de formatao do documento.
<FORM ACTION="URL_de_script" METHOD=mtodo>...</FORM>
Os atributos de FORM que nos interessam agora so:

ACTION
Especifica o URL do script ao qual sero enviados os dados do formulrio.

METHOD
Seleciona um mtodo para acessar o URL de ao. Os mtodos usados atualmente so GET e POST. Ambos os mtodos transferem dados do browser para o servidor, com a seguinte diferena bsica:
POST
- os dados entrados fazem parte do corpo da mensagem enviada para o servidor; - transfere grande quantidade de dados.
GET
- os dados entrados fazem parte do URL (endereo) associado consulta enviada para o servidor; - suporta at 128 caracteres. Veremos maiores detalhes sobre mtodos no item CGI.
FORM
tambm pode apresentar o atributo: Indica o tipo de codificao dos dados enviados atravs do formulrio. O tipo default application/x-www-form-urlencoded. Outro tipo aceito por alguns browsers text/plain.
ENCTYPE
Os formulrios podem conter qualquer formatao - pargrafos, listas, tabelas, imagens - exceto outros formulrios. Em especial, colocamos dentro da marcao de <FORM> as formataes para campos de entrada de dados, que so trs: <INPUT>, <SELECT> e <TEXTAREA>. Todos os campos de entrada de dados tm um atributo NAME, ao qual associamos um nome, que ser utilizado posteriormente pelo script. So os scripts que organizam esses dados de entrada em um conjunto de informaes significativas para determinado propsito. Primeiro vamos ver os tipos de campos para montar um formulrio, e depois passaremos aos scripts.
SELECT
<SELECT>
apresenta uma lista de valores, atravs de campos OPTION.

NAME="sabor">
<SELECT <OPTION>Abacaxi <OPTION>Creme <OPTION>Morango <OPTION>Chocolate </SELECT>
Tambm possvel estabelecer uma escolha-padro, atravs do atributo SELECTED

<SELECT <OPTION>Abacaxi <OPTION <OPTION>Morango <OPTION>Chocolate </SELECT> NAME="sabor"> SELECTED>Creme
Com o atributo SIZE, escolhe-se quantos itens da lista sero mostrados (no exemplo, SIZE=4):
<SELECT <OPTION>Abacaxi <OPTION <OPTION>Morango <OPTION>Chocolate </SELECT> NAME="sabor" SIZE=4> SELECTED>Creme
Com o atributo MULTIPLE, define-se que se pode selecionar mais de um item (pressionando a tecla Shift do teclado enquanto se selecionam os itens):
<SELECT <OPTION>Abacaxi <OPTION <OPTION>Morango <OPTION>Chocolate </SELECT> NAME="sabor" SIZE=4 MULTIPLE> SELECTED>Creme
TEXTAREA abre uma rea para entrada de texto, de acordo com atributos para nmero de colunas, linhas, e - se for o caso - um valor inicial.
<TEXTAREA> <TEXTAREA COLS=40 ROWS=5 NAME="comentario"> Deixe seu comentrio </TEXTAREA>
CGI Scripts
CGI,
ou Common Gateway Interface, uma interface definida de maneira a possibilitar a execuo de programas - "gateways" - sob um servidor HTTP. Neste contexto, os "gateways" so programas ou scripts (tambm chamados "cgi-bin") que recebem requisies de informao, retornando um documento com os resultados correspondentes. Esse documento retornado pode existir previamente, ou pode ser gerado pelo script especialmente para atender quela requisio especfica do usurio (diz-se que o documento gerado on the fly). Exemplos de aplicao de CGI incluem:
processamento de dados submetidos atravs de formulrios: consulta a banco de dados, cadastramento em listas, livros de visita, pesquisas de opinio; criao de documentos personalizados on the fly; gerenciamento de contadores de acesso; processamento de mapas.
Tais scripts podem ser escritos em qualquer linguagem que possa ler variveis, processar dados e retornar respostas - ou seja, qualquer linguagem de programao! A linguagem determinada de acordo com a plataforma do servidor e da aplicao a ser implementada.
Viso Geral
Os scripts tm uma forma geral comum: 1. leitura de dados entrados pelo usurio (e/ou campos de informao de um pacote HTTP); 2. processamento dos dados (armazenamento dos dados em um banco de dados, realizao de clculos, recuperao de dados etc.); 3. montagem de uma pgina Web ou gerao de uma imagem com os resultados produzidos. Submisso de formulrios Suponhamos um formulrio cuja marcao principal seja:
<FORM ACTION="/cgi-bin/teste.cgi" METHOD=mtodo> ... </FORM>
onde ACTION indica o URL do script que receber os dados (ainda no vamos nos preocupar com o campo METHOD) Quando submetemos os dados de um formulriom, o browser organiza os dados entrados pelo usurio, assegurando que as informaes chegaro em ordem e sero compreendidas pelo script. Vejamos alguns exemplos. Um campo de texto simples, tal como:
<INPUT TYPE=TEXT NAME="nome">
cuja entrada tenha sido...
ser organizado pelo browser da seguinte forma:

nome=Prof.+Achille+Bassi
Isto , passa a assumir um formato nome = valor, onde: nome foi definido nas etiquetas do formulrio (pelo atributo NAME de cada campo) e valor a entrada oferecida pelo usurio. Note que os espaos em branco so substitudos por sinais de +. Se o formulrio tiver mais algum campo de informao, por exemplo:
<INPUT TYPE=TEXT NAME="email">
com uma entrada
o browser estar gerando uma linha nica com todos esses dados, desta forma:
nome=Prof.+Achille+Bassi&email=bassi@icmc.usp.br
Isto , os campos de informao so separados por &. Tambm todos os acentos e smbolos especiais so codificados em hexadecimal para o envio dos dados. Esta codificao dos dados de um formulrio padro. Feita essa codificao, o browser envia uma requisio para o URL indicado em ACTION, que est associado a um script. Esse envio est sujeito a um mtodo especfico, que definir como o script ir recuperar essas informaes para process-las. Antes de ver os mtodos, bom conhecer as variveis de ambiente, que sero muito teis no tratamento de informaes. CGI Scripts usando PHP A principal diferena entre o uso de Perl e PHP para criar pginas dinmicas que o PHP pode ser totalmente embutido em uma pgina comum de HTML. Assim, no preciso fazer com que o script gere uma pgina de resposta com as formataes: os comandos de PHP podem ficar embutidos de maneira bem elegante e intuitiva entre as marcaes de HTML. Abaixo de cada campo do formulrio foi colocado um exemplo da formatao usada para cri-lo. Ao fim da pgina est a formatao completa do formulrio. Se voc tiver dvidas sobre essas formataes, veja antes a seo sobre formulrios.
<form action=form1.php method=post> form1.php ser o script em PHP que ir trabalhar
com os dados entrados por meio deste formulrio; ele ir escrever, na prxima pgina, as informaes entradas neste formulrio. Nome:
<input type="text" name="nome" size="35">
E-mail:
<input type="text" name="email" size="25">
Esportes que Futebol voc pratica: Vlei Natao Basquete Tnis Bocha
<input type="checkbox" name="esporte1" value="futebol">Futebol<br> <input type="checkbox" name="esporte2" value="volei" checked>Vlei<br>
Seu time corao:
do Palmeiras; Nutico; Flamengo; Grmio; Santos; Atltico; Corinthians; Fluminense; Internacional; Cruzeiro; Botafogo; Santa Cruz; So Paulo; AEA.
<input type=radio name="time" value="palmeiras">Palmeiras; <input type=radio name="time" value="nautico">Nutico; <input type=radio name="time" value="fla">Flamengo;
Sabor sorvete prefere:
de que <select <option>Abacaxi

<option>Creme
value=sabor
name="sorvete">
<option>Morango <option>Chocolate </select>
Algo mais?
<textarea cols=40 comentrio</textarea>
rows=5
name="comentario">Escreva
um
<input type="submit" name="submit" <input type="reset" name="cancela" value="Apagar">
value="Enviar">
Note que, na entrada de dados sobre esportes, cada item tem um nome diferente (esporte1, esporte2,...), pois mais de um esporte pode ser escolhido. No caso da entrada sobre o time preferido, todos os itens tm o mesmo nome (time), pois somente um poder ser selecionado. Experimente entrar dados nesse formulrio - ou apenas pressione "Enviar" - e veja como conseguido o resultado. Aqui est a formatao completa do formulrio acima, abrangendo uma tabela:
<form name="form1" action=form1.php method=post> <table class="conteudo" border="0" cellpadding="5" cellspacing="0" width="95%" align="center"> <tr> <td valign="top" bgcolor="#CCCCCC"> <p class="conteudo">Nome:</p></td> <td bgcolor="#CCCCCC"> <p class="conteudo"><input type="text" name="nome" size="35"></p> </td> </tr> <tr> <td valign="top"> <p>E-mail:</p></td> <td><p class="conteudo"><input type="text" name="email" size="25"></p> </td> </tr> <tr> <td valign="top" bgcolor="#CCCCCC"> <p class="conteudo">Esportes que voc pratica:</p> </td> <td bgcolor="#CCCCCC"> <p class="conteudo"><input type="checkbox" name="esporte1" value="futebol">Futebol<br><input type="checkbox" name="esporte2" value="volei" checked>Vlei<br><input type="checkbox" name="esporte3" value="natacao" checked>Natao<br><input type="checkbox" name="esporte4" value="basquete">Basquete<br><input type="checkbox" name="esporte5" value="tenis">Tnis<br><input type="checkbox" name="esporte6" value="bocha">Bocha</p> </td> </tr> <tr> <td valign="top"> <p class="conteudo">Seu time do corao:</p> </td> <td> <p class="conteudo"><input type=radio name="time" value="palmeiras">Palmeiras; <input type=radio name="time" value="nautico">Nutico; <input type=radio name="time" value="fla">Flamengo; <input type=radio name="time" value="gremio">Grmio; <input type=radio name="time" value="santos">Santos; <input type=radio name="time" value="atletico">Atltico; <input type=radio name="time" value="corinthians">Corinthians; <input type=radio name="time" value="flu">Fluminense; <input type=radio name="time" value="inter">Internacional; <input type=radio name="time" value="cruzeiro">Cruzeiro; <input type=radio
name="time" value="botafogo">Botafogo; <input type=radio name="time" value="santa">Santa Cruz; <input type=radio name="time" value="saopaulo">So Paulo; <input type=radio name="time" value="aea" checked>AEA.</p> </td> </tr> <tr> <td valign="top" bgcolor="#CCCCCC"> <p class="conteudo">Sabor de sorvete que prefere:</p></td> <td bgcolor="#CCCCCC"><select value=sabor name="sorvete" size="1"> <option>Abacaxi <option>Creme <option>Morango <option>Chocolate </select></td> </tr> <tr> <td valign="top"><p class="conteudo">Algo mais? </p></td> <td><textarea cols=40 rows=5 name="comentario">Escreva um comentrio</textarea></td> </tr> <tr> <td valign="top" bgcolor="#CCCCCC"> <p> </p> </td> <td bgcolor="#CCCCCC"><p class="conteudo"> <input type="submit" name="submit" value="Enviar"> <input type="reset" name="cancela" value="Apagar"></p> </td> </tr> </table> </form>
udio e Vdeo
O uso de udio e vdeo na Internet vem ganhando muito destaque nos ltimos dois anos, e bom saber como usar bem estas mdias. udio e vdeo so classificados como "mdias contnuas", pois so geradas segundo determinadas taxas, devendo ser reproduzidas nessa mesma taxa, para evitar distores. Quanto mais informaes de uma seqncia de udio ou vdeo digital so armazenados, melhor a qualidade do udio ou vdeo reproduzido. Isso implica, logicamente, no fato de arquivos de udio e vdeo serem geralmente muito grandes, o que torna invivel o uso mais freqente dessas mdias em pginas Web. Alm de procurarmos lidar sempre com pequenos trechos de udio e vdeo, podemos explorar tecnologias recentes que permitem a transmisso em tempo real.
Folhas de Estilo
Um avano interessante na linguagem HTML aps a verso 3.2 foi a introduo das Style Sheets ou Cascading Style Sheets. Essas folhas de estilo permitem o uso de formataes uniformes em um site, de maneira bastante "econmica". Logo nas primeiras sees deste tutorial (Cores e fontes de textos), vimos que, para poder formatar um texto, era preciso escrever uma marcao parecida com:
<h3><font face="Arial" color="#4A7D7B">Um ttulo genrico</font></h3> <p><font face="Arial" size="2">Um texto genrico com algum </font><font face="Arial" size="2" color="red">destaque qualquer</font><font face="Arial" size="2"> junto, aps um ttulo genrico, etc.</font></p>
para ter o resultado:
Um ttulo genrico
Um texto genrico com algum destaque qualquer junto, aps um ttulo genrico, etc.
Acontece que, de um documento para outro, pode acontecer de esquecermos o tamanho da fonte usada no texto, qual a fonte ou a cor dos ttulos de determinada subseo, e a uniformidade de apresentao das pginas acaba ficando prejudicada. Com as folhas de estilo, podemos declarar estilos apropriados para sees de texto, aplicando esses estilos sem nos preocuparmos com detalhes de fontes, cor e tamanhos. E mais: se for necessrio modificar algum dia as cores de todos os ttulos ou dos destaques ao longo dos textos, simplesmente alteramos a folha de estilo, atualizando imediatamente a apresentao de todos os documentos que fazem referncia a ela. Para o exemplo acima, poderamos criar a seguinte folha de estilo:
BODY { H3 { .destaque { color: red } font: 10pt color:#4A7D7B Arial } }
E assim, para ter o mesmo resultado do exemplo acima, a formatao seria muito mais simples que a primeira:
<h3>Um ttulo genrico</h3> <p>Um texto genrico com algum <span class="destaque">destaque qualquer</span> junto, aps um ttulo genrico, etc.</p>
A definio da folha de estilo deve ficar dentro de <HEAD>, da seguinte forma, se a folha for definida dentro do mesmo documento em que est sendo usada:
<HEAD> ... <STYLE BODY H3 .destaque </STYLE> ... </HEAD>
{ { {
font:
10pt color:#4A7D7B color:
TYPE="text/css"> Arial } } red }
Ou ento,quando a folha de estilo definida externamente:

<HEAD> ... <LINK ... </HEAD>
REL="stylesheet"
HREF="folha_de_estilo.css">
Neste caso, uma mesma folha de estilo pode ser usada por vrios documentos HTML, que tambm podero ter suas prprias folhas de estilo internas.
Introduo as CSS O HTML atual

E, j com vrias inovaes o HTML era usado para construo de pginas Web, que no incio limitavamse a exibir informaes contidas nos documentos.
A evoluo vinha atropelando tudo com uma avalanche de novos aplicativos, facilidades, softwares, hardware etc. E o HTML no passou ao largo, pelo contrrio, a simples linguagem de marcao destinada a apresentar contedos carecia de uma maior flexibilidade no sentido de manipular visualmente os contedos.
Novas tags e atributos foram inventados, tais como a tag font e o atributo color que permitiam alterar a aparncia de textos. Assim nasceu a estilizao dos contedos.
E a evoluo trazendo novas descobertas, corre clere neste dinamismo alucinante que estamos testemunhando at os dias de hoje. Novas tags e novos atributos de estilo foram introduzidos no HTML. Com isso, a velha linguagem de marcao passou a exercer uma dupla funo. A funo de estruturar o contedo atravs da marcao e a funo de apresent-lo ou seja de dar a aparncia final.
Os problemas criados
Mas, esta dupla funo do HTML, se por um lado resolveu uma necessidade dos designers e projetistas por outro acabou trazendo srios problemas aos projetos criados. Os documentos Web publicados na Internet, cada vez mais sofisticados e extensos, estavam fugindo do controle de seus criadores.
Para ilustrar suponha o seguinte exemplo:
Seu melhor cliente telefona s 17:00h da tarde de uma sexta-feira (sempre ligam nesta hora para solicitar alguma coisa no mesmo?) e diz o seguinte;
teremos uma reunio aqui na empresa, na segunda-feira s 0800h com um potencial comprador e nossa inteno fazer uma apresentao dos nossos produtos atravs do site que voc criou e mantm. Seguindo uma sugesto do nosso departamento de marketing precisamos mudar a cor de todos os ttulos no site de verde para vermelho, pois que esta a cor principal da marca do nosso comprador e com isso pretendemos fixar uma cumplicidade subliminar. Isto bem simples de fazer, no ? Afinal s mudar a cor! D para voc 'botar no ar' at s 19:30h ? Quero dar uma olhadinha antes de encerrar o expediente. OK?
Claro que voc concorda e responde que vai providenciar rapidinho, afinal s para mudar a cor. Mas, so 180 pginas no site! E os ttulos so tags de cabealho deste tipo:
<h1><font color="#00FF00">Ttulo</font></h1>
Supondo uma mdia de 3 ttulos por pgina, voc tem um total de 540 tags font para editar e mudar o atributo color. E se o seu cliente tivesse pedido para mudar a cor dos textos, e do fundo? Bem, este exemplo simples d uma dimenso de um dos problemas criados com a mistura de marcao com apresentao - estilizao!
A soluo proposta
Cada vez mais ficava evidente que esta mistura que maravilhou os projetistas Web no incio, tornara-se uma grande dor de cabea. E claro, a soluo passava por dissociar linguagem de marcao da estilizao.
Desta necessidade, eu diria mesmo uma imposio, nasceu as CSS, sigla em ingls para Cascading Style Sheet que em portugus foi traduzido para Folha de Estilo em Cascata.
A introduo deste conceito preconiza o uso dos elementos (tags) HTML, exclusivamente para marcar e estruturar o contedo do documento. Nenhum elemento HTML ser usado para alterar a apresentao, ou seja estilizar o contedo. A tarefa de estilizao ficar a cargo das CSS que nada mais do que um arquivo independente do arquivo HTML no qual so declaradas propriedades e valores de estilizao para os elementos do HTML.
Estas declaraes de estilo, quer sejam estruturadas em um arquivo externo com extenso .css quer sejam declaradas de outros modos (importadas, lincadas, incorporadas ou inline), contm todas as regras de estilo para os elementos do documento HTML.
Voltando quela situao criada no item anterior, agora voc mudaria a cor de TODOS os cabealhos h1 em TODO o site em CINCO SEGUNDOS. s 19:20h voc retorna a ligao do cliente e pede para a secretria avis-lo de que "j est no ar", sem maiores traumas, correrias e estresses. Ah e mais, mesmo que o site tivesse 1.800 pginas e no as 180 da situao criada, voc gastaria os mesmos cinco segundos.
As restries
A idia, a filosofia mesmo, de projeto Web aponta para uso amplo das CSS, ainda no explorada em toda sua potencialidade por razes de incompatibilidades de certas propriedades CSS com navegadores mais antigos e com as interpretaes diferentes das CSS por parte das aplicaes de usurios criadas por fabricantes distintos.
Contudo, h uma tendncia - e torcemos para que se concretize rapidamente - de que as novas tecnologias voltadas para o desenvolvimento, no s das variadas aplicaes de usurio como tambm de softwares e hardwares, atendam e se enquadrem dentro das recomendaes e especificaes dos rgos normatizadores, notadamente as standards do W3C.
Quando o projeto Web em todas as suas incontveis variantes, seguir a normatizao e padronizao recomendada pelo W3C, teremos uma Web muito mais fcil, dinmica e agradvel.
O efeito cascata
Que estilo ser aplicado, quando h conflito de estilos especificados (por exemplo: uma regra de estilo determina que os pargrafos sero na cor preta e outra que sero na cor azul) para um mesmo elemento HTML?
Aqui entra o efeito cascata, que nada mais , do que o estabelecimento de uma prioridade para aplicao da regra de estilo ao elemento. Para determinar a prioridade so considerados diversos fatores, entre eles, o tipo de folha de estilo, o local fsico da folha de estilo no seu todo, o local fsico da regra de estilo na folha de estilo e a especificidade da regra de estilo.
A prioridade para o efeito cascata em ordem crescente: 1. folha de estilo padro do navegador do usurio; 2. folha de estilo do usurio; 3. folha de estilo do desenvolvedor;
o o o
estilo externo (importado ou linkado). estilo incorporado (definido na seo head do documento); estilo inline (dentro de um elemento HTML);
4. declaraes do desenvolvedor com !important; 5. declaraes do usurio com !important; Assim, uma declarao de estilo com !important definido pelo usurio prevalece sobre todas as demais, a de mais alta prioridade. Entre as folhas de estilo definidas pelo desenvolvedor do site, os estilos inline (dentro de um elemento HTML) tem a prioridade mais elevada, isto , prevalecer sobre a folha de estilo definida na seo head, e, esta prevalecer sobre uma folha de estilo externa. A prioridade mais baixa para estilos padro do navegador.
Agora voc j sabe o porqu de "cascata" no nome Folha de Consulte os diversos tutoriais deste site para saber mais sobre o efeito cascata.
estilo
em
cascata.
A regra CSS A regra CSS e sua sintaxe

Uma regra CSS uma declarao que segue uma sintaxe prpria e que define como ser aplicado estilo a
um ou mais elementos HTML . Um conjunto de regras CSS formam uma Folha de Estilos. Uma regra CSS, na sua forma mais elementar, compe-se de trs partes: um seletor, uma propriedade e um valor e tem a sintaxe conforme mostrado abaixo:
seletor { propriedade: valor; }
Seletor: genericamente, o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, ou etc., e para o qual a regra ser vlida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
Propriedade: o atributo do elemento HTML ao qual ser aplicada a regra (por exemplo: font, color, background, etc...).
Valor: a caracterstica especfica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc...)
Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e valor separados por dois pontos e entre chaves { }. Quando mais de uma propriedade for definida na regra, deve-se usar ponto-evrgula para separ-las. O ponto-e-vrgula facultativo no caso de propriedade nica e tambm aps a declarao da ltima propriedade no caso de mais de uma.
No entanto de boa tcnica usar-se sempre o ponto-e-vrgula aps cada regra para uma propriedade.
Ver os exemplos abaixo:

p { font-size: 12px; /* ponto-e-vrgula facultativo */ } body { color: #000000; background: #FFFFFF; font-weight: bold; /*ponto-e-vrgula facultativo */ }
No exemplo abaixo, o seletor o "documento todo" (body - a pgina web), a propriedade o fundo do documento e o valor a cor branca.
body { background: #FFFFFF; }
Se o valor for uma palavra composta, dever estar entre aspas duplas " ", ou simples ':
h3 { font-family: "Comic Sans MS" }
Para maior legibilidade das folhas de estilo, de boa prtica usar linhas distintas para escrever cada uma das declaraes propriedade e seu valor , como mostrado abaixo:
p { text-align: right; color: #FF0000; }
Isto no obrigatrio! A regra abaixo tem o mesmo efeito da regra acima e ambas as sintaxes esto corretas:
p {text-align: right;color: #FF0000;}
NOTA: A razo do uso de ponto e vrgula na ltima declarao ou mesmo quando s h uma declarao que durante a fase de projeto da Folha CSS quase sempre estaremos acresentando novas declaraes e a ltima declarao quase nunca a ltima na fase de projeto. Assim, esta prtica certamente nos poupar revises por ter esquecido um ponto e vrgula.!!!!
Agrupamento de Seletores
Uma regra CSS quando vlida para vrios seletores, estes podem ser agrupados. Separe cada seletor com uma vrgula. No exemplo abaixo agrupamos todos os elementos cabealho. A cor de todos os cabealhos ser verde.
h1, h2, h3, h4, h5, h6 { color: #00FF00; }
O seletor classe
Mas voc no est restrito somente aos elementos HTML (tags) para aplicar regras de estilo!
Voc pode "inventar" um nome e com ele criar uma classe a qual definir as regras CSS. E o mais interessante das classes, que elas podem ser aplicadas a qualquer elemento HTML. E mais ainda, voc pode aplicar estilos diferentes para o mesmo tipo de elemento do HTML, usando classes diferentes para cada um deles.
A sintaxe para o seletor classe mostrada abaixo. Elemento HTML mais um nome qualquer que voc "inventa" precedido de . (ponto):
elemento HTML.minhaclasse { propriedade: valor; }
Nota: Para o nome que voc "inventa" evite usar nmeros e caracteres especiais. Tanto quanto possvel use s letras de a-z e de A-Z. H restries quanto ao uso de nmeros e caracteres. Minha experincia e conselho: Use s letras!
Por exemplo: suponha que voc queira ter dois tipos de pargrafos em seu documento: um pargrafo com
letras na cor preta e um pargrafo com letras na cor azul.

p.corum { color:#000000; } p.cordois { color:#0000FF; }
No seu documento HTML as regras seriam aplicadas conforme abaixo:

<p class ="corum"> este pargrafo ter cor preta.</p> <p class ="cordois"> este pargrafo ter cor azul. </p>
Este item foi atualizado em 2007/07/03 Em CSS 1 no vlido atribuir mais de uma classe para um elemento HTML. O exemplo abaixo est errado:
<p class ="corum" class ="cordois"> Aqui h um erro. </p>
Nota: CSS 2 mudou este conceito, permitindo declarar mais de uma classe, desde que o nome das classes sejam separados por um espao.
<p class ="corum cordois"> Aqui no h erro. </p>
Ao criar uma classe voc talvez queira que ela seja aplicvel a qualquer elemento HTML. Neste caso basta que se omita o nome do elemento antes da classe. Por exemplo: a regra CSS a seguir pode ser aplicada a qualquer elemento HTML ao qual voc deseja atribuir cor azul:
.cortres { color: #0000FF; }
No exemplo a seguir tanto o cabealho <h2> como o pargrafo <p> tero cor azul:
<h2 class="cortres"> Este cabealho azul. </h2> <p class="cortres"> Este pargrafo azul. </p >
O seletor ID
O seletor ID difere do seletor de classe, por ser NICO. Um seletor ID s pode ser aplicado a UM e somente UM elemento HTML dentro do documento.
Voc pode "inventar" um nome e com ele criar uma ID a qual definir as regras CSS. Uma ID s pode ser aplicada a UM elemento HTML.
A sintaxe para o seletor ID mostrada abaixo. Um nome qualquer que voc "inventa" precedido de # ("tralha", "jogo-da-velha" :-)):
#minhaID { propriedade: valor; }
Nota: Para o nome que voc "inventa" evite usar nmeros e caracteres especiais. Tanto quanto possvel use s letras de a-z e de A-Z. H restries quanto ao uso de nmeros e caracteres. Minha experincia e conselho: Use s letras!
Inserindo comentrios nas CSS

Voc pode inserir comentrios nas CSS para explicar seu cdigo, e principalmente ajud-lo a relembrar de como voc estruturou e qual a finalidade de partes importantes do cdigo. Daqui h alguns meses a menos que voc seja um privilegiado, ter esquecido a maior parte daquilo que voc levou horas para "bolar". O comentrio introduzido no cdigo, ser ignorado pelo browser. Um comentrio nas CSS comea com o "/*", e termina com " */". Veja o exemplo abaixo:
/* este um comentrio*/ p { font-size: 14px; /* este outro comentrio*/ color: #000000; font-family: Arial, Serif; }
Vinculando folhas de estilo a documentos
Os trs tipos de vinculao de folhas de estilo

As folhas de estilo podem ser vinculadas a um documento de trs maneiras distintas: 1. Importadas ou lincadas; 2. Incorporadas; 3. Inline.
Folha de estilo externa

Uma folha de estilo dita externa, quando as regras CSS esto declaradas em um documento a parte do documento HTML. A folha de estilo um arquivo separado do arquivo html e que tem a extenso .css Uma folha de estilo externa ideal para ser aplicada a vrias pginas. Com uma folha de estilo externa , voc pode mudar a aparncia de um site inteiro mudando um arquivo apenas (o arquivo da folha de estilo).
O arquivo css da folha de estilo externa dever ser lincado ou importado ao documento HTML, dentro da tag <head> do documento. A sintaxe geral para lincar uma folha de estilo chamada estilo.css mostrada abaixo.
<head> ........... <link rel="stylesheet" type="text/css" href="estilo.css"> .......... </head>
A sintaxe geral para importar uma folha de estilo chamada estilo.css mostrada abaixo:
<head> ........... <style type="text/css"> @import url("estilo.css"); </style> .......... </head>
O browser ler as regras de estilo do arquivo estilo.css, e formatar o documento de acordo com elas. Uma folha de estilo externa pode ser escrita em qualquer editor de texto. O arquivo no deve conter nenhuma tag HTML. As folhas de estilo devem ser "salvas" com uma extenso .css
Folha de estilo incorporada ou interna

Uma folha de estilo dita incorporada ou interna, quando as regras CSS esto declaradas no prprio documento HTML. Uma folha de estilo incorporada ou interna, ideal para ser aplicada a uma nica pgina. Com uma folha de estilo incorporada ou interna, voc pode mudar a aparncia de somente um documento, aquele onde a folha de estilo esta incorporada. As regras de estilo, vlidas para o documento, so declaradas na seo <head> do documento com a tag de estilo <style>, conforme sintaxe mostrada abaixo:
<head> ........... <style type="text/css"> <!-body { background: #000000; url("imagens/minhaimagem.gif"); } h3 { color: #FF0000; } p { margin-left: 15px; padding:1.5em; } --> </style> ........... </head>
O browser ler agora as regras de estilo na prpria pgina, e formatar o documento de acordo com elas. Nota: Um browser ignora normalmente as tags desconhecidas. Isto significa que um browser velho que no suporte estilos, ignorar a tag <style>, mas o contedo da tag ser mostrado na tela. possvel impedir que um browser velho mostre o contedo da tag, "escondendo-o" atravs do uso da marcao de comentrio do HTML.
Observe a incluso dos smbolos  (fecha comentrio) no cdigo acima.
Folha de estilo inline

Uma folha de estilo dita inline, quando as regras CSS esto declaradas dentro da tag do elemento HTML. Um estilo inline s se aplica a um elemento HTML. Ele perde muitas das vantagens de folhas de estilo pois mistura o contedo com a apresentao. Use este mtodo excepcionalmente, como quando quiser aplicar um estilo a uma nica ocorrncia de um elemento. A sintaxe para aplicar estilo inline mostrada a seguir:
<p style="color:#000000; margin: 5px;"> Aqui um pargrafo de cor preta e com 5px nas 4 </p>
margens.
Folhas mltiplas de estilo

Se alguma propriedade for definida para um mesmo elemento em folhas de estilo diferentes, entrar em ao, o EFEITO CASCATA e prevalecero os valores da folha de estilo mais especfica. Suponha, uma folha de estilo externa com as seguintes propriedades para o seletor h2:
h2 { color: #FFCC00; text-align: center; font: italic 9pt Verdana, Sans-serif; }
e, uma folha de estilo interna com as seguintes propriedades para o seletor h2:
h2 { color: #FFCC00; text-align: center; font: italic 10pt Verdana, Sans-serif; }
Se ambas as pginas estiverem vinculadas ao documento, como h um conflito no tamanho das letras para <h2>, prevalecer a folha interna e a letra de <h2> ter o tamanho igual a 10 pt.
A propriedade font As fontes nos elementos HTML

As propriedades para as fontes, definem as caractersticas (os valores na regra CSS) das letras que constituem os textos dentro dos elementos HTML.
As propriedades bsicas para fontes e que abordaremos neste tutorial so as listadas abaixo:

color:...................cor da fonte font-family:..........tipo de fonte font-size:.............tamanho de fonte
font-style:............estilo de fonte font-variant:.........fontes maisculas de menor altura font-weight:.........quanto mais escura a fonte (negrito) font:....................maneira abreviada para todas as propriedades
Valores vlidos para as propriedades da fonte
color: 1. cdigo hexadecimal: #FFFFFF 2. cdigo rgb: rgb(255,235,0) 3. nome da cor: red, blue, green...etc
font-family: 1. nome da famlia de fontes p. ex:"verdana", "helvetica", "arial", etc. 2. nome da famlia genrica: p. ex:"serif", "sans-serif", "cursive", etc. : define-se define-se pelo pelo nome nome da fonte, genrico,
font-size: 1. xx-small 2. x-small 3. small 4. medium 5. large 6. x-large 7. xx-large 8. smaller 9. larger 10. length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) 11. %
font-style: 1. normal: fonte normal na vertical 2. italic: fonte inclinada 3. oblique:fonte obliqua
font-variant:
1. normal: fonte normal 2. small-caps: transforma em maisculas de menor altura
font-weight: 1. normal 2. bold 3. bolder 4. lighter 5. 100 6. 200 7. 300 8. 400 9. 500 10. 600 11. 700 12. 800 13. 900
Vamos a seguir analisar cada uma delas detalhadamente atravs de exemplos prticos. Como estudar e entender os exemplos Para cada propriedade apresento as regras CSS para um ou mais elementos HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras.
A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o cdigo no seu editor, mude os valores e veja o resultado no browser. Esta a melhor e mais rpida maneira de voc aprender CSS. Bons estudos! E faa timo proveito dos tutoriais.
color ... A cor da fonte

<html> <head> <style type="text/css"> <!-h1 {color: #FF0000;} h2 {color: #00FF00;} p {color: rgb(0,0,255);} --> </style> </head> <body>
<h1>Cabealho com letras vermelhas</h1> <h2>Cabealho com letras verdes</h2> <p>Pargrafo com letras azuis</p> </body> </html>
Este o efeito da folha de estilo acima:
Cabealho com letras vermelhas

Cabealho com letras verdes
Pargrafo com letras azuis
font-family...O tipo de fonte

<html> <head> <style type="text/css"> <!-h2 {font-family: arial, helvetica, serif;} p {font-family: sans-serif;} --> </style> </head> <body> <h2>Famlia por nome: arial, helvetica, serif;</h2> <p>Famlia genrica: sans-serif;<p> </body> </html>
Famlia por nome: arial, helvetica, serif;

Famlia genrica: sans-serif;
Notas: A propriedade font-family usada para definir uma lista de tipos de fontes.
O browser assume o primeiro nome que ele reconhece na lista.
Separar cada nome por uma vrgula e sempre prever um nome genrico.
Se o nome da fonte for composto (mais de uma palavra, p. ex: Comic Sans MS), usar aspas duplas no
nome. Se estiver definindo um atributo de "style" em HTML, onde as aspas duplas j esto presentes usar no nome de fonte composto, aspas simples.
font-size...O tamanho de fonte

<html> <head> <style type="text/css"> <!-h1 {font-size: 14px;} h2 {font-size: smaller;} p {font-size: 100%;} --> </style> </head> <body> <h1>Letras com tamanho: 14px</h1> <h2>Letras com tamanho: smaller</h2> <p>Letras com tamanho:100%</p> </body> </html>
Letras com tamanho: 14px
Letras com tamanho: smaller
Letras com tamanho:100%
font-style...O estilo de fonte

<html> <head> <style type="text/css"> <!-h1 {font-style: italic;} h2 {font-style: normal;} p {font-style: oblique;} --> </style> </head> <body> <h1>Este o estilo italic</h1> <h2>Este o estilo normal</h2> <p>Este o estilo oblique</p> </body> </html>
Este o estilo italic
Este o estilo normal

Este o estilo oblique
font-variant...fontes maisculas "menores"
<html> <head> <style type="text/css"> <!-h3 {font-variant: normal;} p{font-variant: small-caps;} --> p</style> </head> <body> <h3>Este cabealho com letras normais</h3> <p>Este pargrafo com letras em "small-caps"</p> </body> </html>
Este cabealho com letras normais

ESTE PARGRAFO COM LETRAS EM "SMALL-CAPS"
font-weight...Peso das fontes - negrito (intensidade da cor)

<html> <head> <style type="text/css"> <!-p {font-weight: bold;} --> </style> </head> <body> <p> Este um pargrafo em negrito</p> </body> </html>
Este um pargrafo em negrito
font...Todas as propriedades das fontes em uma declarao nica

Esta a maneira abreviada de voc escrever uma regra para as propriedades das fontes.
A sintaxe geral esta: font: [style] [variant] [weight] [size] [/line-height] [family] | caption | icon | menu | message-box | small-caption | status-bar | inherit
Voc pode declarar todas ou algumas das propriedades.
Os valores size e family so obrigatrios. Os demais so facultativos (se voc os omitir ser adotado o valor default ou herdado do elemento pai).
Os valores style, variant, weight e size, podem ser declarados em qualquer ordem.
<html> <head> <style type="text/css"> <!-p { font: italic small-caps bold 14px "Comic Sans MS", sans-serif; } --> </style> </head> <body> <p>Pargrafo em declarao nica</p> </body> </html>

PARGRAFO EM DECLARAO NICA
O valores caption, icon, menu, message-box, small-caption e status-bar referem-se s fontes usadas pelo sistema operacional do visitante do site e devem ser declarados isolados na propriedade font.

caption............fontes usadas em botes; icon.................fontes usadas em cones; menu...............fontes usadas em menus; message-box...fontes ussadas em caixas de mensagens; small-caption...fontes usadas em pequenos controles; status-bar........fontes usadas na barra de status;
O valor inherit usado para herdar a fonte usada pelo elemento pai e tambm deve ser declarados isolados na propriedade font.
<html> <head> <style type="text/css"> <!-.p1 { font: status-bar; } .p2 { font: inherit; .p3 { font: small-caption ; } } --> </style> </head> <body> <p class="p1">Pargrafo com fonte status-bar</p> <p class="p2">Pargrafo com fonte inherit</p> <p class="p3">Pargrafo com fonte small-caption</p> </body> </html>
Pargrafo com fonte status-bar
Pargrafo com fonte inherit
Pargrafo com fonte small-caption
Voc poder fazer uso de um excelente editor para a propriedade font e descobrir mais efeitos para complementar este tutorial, nesta pgina interativa.
A propriedade text Os textos nos elementos HTML

As propriedades para textos, definem as caractersticas (os valores na regra CSS) dos textos inseridos dentro dos elementos HTML.
As propriedades para textos so as listadas abaixo:

color.....................cor do texto; letter-spacing........espaamento entre letras;
word-spacing.........espaamento entre palavras; text-align..............alinhamento do texto; text-decoration......decorao do texto; text-indent............recuo do texto; text-transform.......forma das letras; direction...............direo do texto; white-space.........como o browser trata os espaos em branco;
Valores vlidos para as propriedades do texto
letter-spacing: 1. normal: o espaamento default 2. lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) So vlidos valores negativos
word-spacing: 1. normal: o espaamento default 2. lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) So vlidos valores negativos
text-align: 1. left: alinha o texto a esquerda 2. right: alinha o texto a direita 3. center: alinha o texto no centro 4. justify: fora o texto a ocupar toda a extenso da linha da esquerda a direita
text-decoration: 1. none: nenhuma decorao 2. underline: coloca sublinhado no texto 3. overline: coloca um sobrelinhado no texto 4. line-through: coloca uma linha em cima do texto 5. blink: faz o texto piscar
text-indent: 1. lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) 2. % : porcentagem da largura do elemento pai
text-transform: 1. none: texto normal 2. capitalize: todas as primeiras letras do texto em maisculas 3. uppercase: todas as letras do texto em maisculas 4. lowercase: todas as letras do texto em minsculas
direction: 1. ltr: texto escrito da esquerda para a direita 2. rtl: texto escrito da direita para a esquerda
white-space: 1. normal: os espaos em branco sero ignorados pelo browser 2. pre: os espaos em branco sero preservados pelo browser 3. nowrap: o texto ser apresentado todo ele numa linha nica na tela. No h quebra de linha at ser encontrada uma tag <br>
Vamos a seguir analisar cada uma delas detalhadamente atravs de exemplos prticos.
Como estudar e entender os exemplos
Para cada propriedade apresento as regras CSS para um ou mais elementos HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras.
color ... A cor do texto

<html> <head> <style type="text/css"> <!-h1 {color: #FF0000;} h2 {color: #00FF00;} p {color: rgb(0,0,255);} --> </style> </head>
<body> <h1>Este cabealho vermelho</h1> <h2>Este cabealho verde</h2> <p>Este pargrafo azul</p> </body> </html>
Este cabealho vermelho

Este cabealho verde
Este pargrafo azul
letter-spacing...O espao entre letras

<html> <head> <style type="text/css"> <!-h2 {letter-spacing: 1.2em;} p {letter-spacing: 0.4cm;} --> </style> </head> <body> <h2> Este o cabealho</h2> <p> Este o pargrafo</p> </body> </html>
E s t e
E s t e
c a b e a l h o
p a r a g r f o
word-spacing...O espao entre palavras

<html> <head> <style type="text/css"> <!-h2 {word-spacing: 1.8em;} p {word-spacing: 80px;} --> </style> </head>
<body> <h2> Este o cabealho</h2> <p> Este o pargrafo</p> </body> </html>
Este o cabealho
Este o paragrfo
text-align...Alinhar o texto
<html> <head> <style type="text/css"> <!-h1 {text-align: left;} h2 {text-align: center;} h3 {text-align: right;} p {text-align: justify;} --> </style> </head> <body> <h1>Este o cabealho 1</h1> <h2>Este o cabealho 2</h2> <h3>Este o cabealho 3</h3> <p>Este o pargrafo cujo texto ...</p> </body> </html>
Este o cabealho 1
Este o cabealho 2
Este o cabealho 3
Este o pargrafo cujo texto foi alongado para mais de duas linhas para que voc possa visualizar o efeito de text-align: justify que fora o texto a estender-se desde a direita at a esquerda.
text-decoration...Decorao do texto
<html> <head> <style type="text/css"> <!-h1 {text-decoration: underline;} h2 {text-decoration: line-through;} h3 {text-decoration: overline;} a {text-decoration: none;} --> </style> </head> <body> <h1>Texto com sublinhado</h1> <h2>Texto com linha em cima</h2> <h3>Texto com sobrelinhado</h3> <p> <a Este um link sem sublinhado</a> </p> </body> </html>
href="http://www.maujor.com">
Texto com sublinhado

Texto com linha em cima
Texto com sobrelinhado
Este um link sem sublinhado
text-indent...Recuo do texto
<html> <head> <style type="text/css"> <!-h3 {text-indent: 80px;} p {text-indent: 3em;} --> </style> </head> <body> <h3>Texto com recuo de 80 pixel</h3> <p>Texto com recuo de 3.0em</p> </body> </html>
Texto com recuo de 80 pixeis

Texto com recuo de 3.0em
text-transform...Forma das letras do texto

<html> <head> <style type="text/css"> <!-h1 {text-transform: none;} h2 {text-transform: capitalize;} h3 {text-transform: uppercase;} h4 {text-transform: lowercase;} --> </style> </head> <body> <h1>Texto com letras como digitadas</h1> <h2>Texto com primeira letra das palavras, maisculas</h2> <h3>Texto com todas letras, maisculas</h3> <h4>Texto com letras minsculas</h4> </body> </html>
Texto com letras como digitadas

Texto com primeira letra das palavras, maisculas
TEXTO COM TODAS LETRAS, MAISCULAS
Texto com letras minsculas
Voc poder fazer uso de um excelente editor para a propriedade background e descobrir mais efeitos para complementar este tutorial, nesta pgina interativa.
A propriedade margin
As margens nos elementos HTML

A propriedade para margens, define um valor para espessura das margens dos elementos HTML. As propriedades para margens so as listadas abaixo:
margin-top..........define a margem superior; margin-right........define a margem direita; margin-bottom.......define a margem inferior; margin-left.........define a margem esquerda; margin..............maneira abreviada para todas as margens
Valores vlidos para a propriedade margin

1. auto: valor default da margem 2. length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) 3. %: porcentagem da largura do elemento pai Vamos a seguir analisar cada uma delas detalhadamente atravs de exemplos prticos. Como estudar e entender os exemplos Para cada propriedade apresento as regras CSS vlidas para um elemento HTML, e, definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras. A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o cdigo no seu editor, mude os valores e veja o resultado no browser. Bons estudos! E faa timo proveito do tutorial. Nota: Coloquei um fundo cinza mais escuro nos exemplos para facilitar a visualizao.
margin-top
...a margem superior
<html> <head> <style type="text/css"> <!-p {margin-top: 2cm;} --> </style> </head> <body> <p>Uma margem superior de 2cm</p> </body> </html>
Uma margem superior de 2cm

margin-right
...a margem direita
<html> <head> <style type="text/css"> <!-p {margin-right: 300px;} --> </style> </head> <body> <p>Uma margem direita de 300px nesta frase mais longa dentro do pargrafo</p> </body> </html>
Este o efeito da folha de estilo acima: Uma margem direita de 300px nesta frase mais longa
dentro do pargrafo
margin-bottom
...a margem inferior
<html> <head> <style type="text/css"> <!-p {margin-bottom: 2em;} --> </style> </head> <body> <p>Uma margem inferior de 2.0em</p> </body> </html>
Este o efeito da folha de estilo acima: Uma margem inferior de 2.0em
margin-left
...a margem esquerda
<html> <head> <style type="text/css"> <!-p {margin-left: 10%;} --> </style> </head> <body> <p>Uma margem esquerda de 10%</p> </body> </html>
Este o efeito da folha de estilo acima: Uma margem esquerda de 10%

margin
...todas as quatro margens em uma declarao nica
A propriedade da margin permitem que voc controle o espaamento em volta dos elementos HTML. So vlidos valores negativos para margem, com o objetivo de sobrepor elementos. Em declarao nica a ordem das margens : superior, direita, inferior e esquerda. H quatro modos de se declarar abreviadamente as margens: 1. margin: valor1......as 4 margens tero valor1; 2. margin: valor1 valor2......margem superior e inferior tero valor1 - margem direita e esquerda tero valor2 3. margin: valor1 valor2 valor3......margem superior ter valor1 - margem direita e esquerda tero valor2 - margem inferior ter valor3 4. margin: valor1 valor2 valor3 valor4....margens superior, direita, inferior e esquerda nesta ordem.
<html> <head>
<style type="text/css"> <!-p {margin: 20px 40px 80px 5px;} --> </style> </head> <body> <p>Uma margem superior de 20px, uma margem direita de 40px, uma margem inferior de 80px e uma margem esquerda de 5px</p> </body> </html>
Este o efeito da folha de estilo acima: Uma margem superior de 20px, uma margem direita de 40px, uma margem inferior de 80px e uma margem esquerda de 5px
A propriedade border As bordas nos elementos HTML

As propriedades para as bordas, definem as caractersticas (os valores na regra CSS) das quatro bordas de um elemento HTML.
As propriedades para as bordas so as listadas abaixo:

border-width:................espessura da borda border-style:................estilo da borda border-color:................cor da borda ----------------------------------------border-top-width:............espessura da borda superior border-top-style:............estilo da borda superior border-top-color:............cor da borda superior ----------------------------------------border-right-width:.........espessura da borda direita border-right-style:..........estilo da borda direita border-right-color:..........cor da borda direita ----------------------------------------border-bottom-width:.........espessura da borda inferior border-bottom-style:.........estilo da borda inferior border-bottom-color:.........cor da borda inferior
----------------------------------------border-left-width:...........espessura da borda esquerda border-left-style:...........estilo da borda esquerda border-left-color:...........cor da borda esquerda ----------------------------------------border-top:...maneira abreviada para todas as propriedades da borda superior border-right:..maneira abreviada para todas as propriedades da borda direita border-bottom:..maneira abreviada para todas as propriedades da borda inferior border-left:..maneira abreviada para todas as propriedades da borda esquerda border:.........maneira abreviada para todas as quatro bordas
Valores vlidos para as propriedades das bordas
style: 1. none: nenhuma borda 2. hidden: equivalente a none 3. dotted: borda pontilhada 4. dashed: borda tracejada 5. solid: borda contnua 6. double: borda dupla 7. groove: borda entalhada 8. ridge: borda em ressalto 9. inset: borda em baixo relevo 10. outset: borda em alto relevo
width: 1. thin: borda fina 2. medium: borda mdia 3. thick: borda grossa
4. length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) Vamos a seguir analisar algumas delas detalhadamente atravs de exemplos prticos.
A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o cdigo no seu editor, mude os valores e veja o resultado no browser. Bons estudos! E faa timo proveito dos tutoriais.
border-width, border-style e border-color

<html> <head> <style type="text/css"> <!-h3 { border-width: medium; border-style: solid; border-color: #0000FF; } p { border-width: 6px; border-style: dashed; border-color: #FF0000; } --> </style> </head> <body> <h3>Borda mdia, contnua e azul</h3> <p>Borda 6px, tracejada e vermelha</p> </body> </html>
Borda mdia, contnua e azul
Borda 6px, tracejada e vermelha
Nota: A propriedade border-color no reconhecida pelo Internet Explorer se for usada isolada. Use a propriedade border-style para ser reconhecida pelo Internet Explorer.
Nota: A propriedade border-color no reconhecida pelo Netscape. Use a propriedade border para ser reconhecida pelo Netscape.
border-style
Abaixo os estilos de bordas obtidos com a declarao border-style: valor (dotted, dashed, etc..)
Borda dotted
Borda dashed
Borda solid
Borda double
Borda groove
Borda ridge
Borda inset
Borda outset
border-width
Estude o cdigo abaixo e tire suas concluses de como obter outros efeitos com espessuras de bordas
<html> <head> <style type="text/css"> p { border-style: solid; border-bottom-width: 10px; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px; } </style> </head>
<body> <p>Borda com espessura inferior de 10px</p> </body> </html>
Borda com espessura inferior de 10px
Nota: A propriedade border-bottom-width no reconhecida pelo Internet Explorer se usada isoladamente. Use border-style para ser reconhecida pelo Internet Explorer.
Definir a espessura das bordas superior, esquerda e direita

Proceda de modo semelhante ao mostrado acima. Erro! Indicador no definido.
border (declarao nica)

Esta a maneira abreviada de voc escrever uma regra para as propriedades das bordas.
Voc pode declarar todas as tres propriedadesdas bordas em uma regra nica:
size style A sintaxe geral esta: border: Nota: Aconselho a escolher, e adotar, sempre a mesma ordem. <html> <head> <style type="text/css"> <!-p { border: thick groove rgb(255,0,255) } </style> </head> <body> <p>Bordas em declarao nica</p> </body> </html>
color;
em
qualquer
ordem.
Bordas em declarao nica
Propriedades CSS das bordas

As propriedades das bordas permitem que voc controle o estilo a cor e a espessura das bordas de um elemento HTML. As propriedades so muitas e como voc viu, podem ser declaradas para cada uma das quatro bordas individualmente.
Neste tutorial abordei sumariamente algumas das propriedades, fornecendo as bases para seus estudos mais completos.
Voc poder fazer uso de um excelente editor de bordas para descobrir mais efeitos e complementar este tutorial, nesta pgina interativa.
A propriedade padding
Os espaamentos nos elementos HTML

A propriedade para espaamentos (alguns traduzem como "enchimento"), define um valor para os espaamentos entre o contedo e as bordas dos elementos HTML. As propriedades para espaamentos so as listadas abaixo:

padding-top..........define a espaamento superior; padding-right........define a espaamento direita; padding-bottom.......define a espaamento inferior; padding-left.........define a espaamento esquerda; padding..............maneira abreviada para todas os espaamentos
Valores vlidos para as propriedades de espaamento

1. auto: valor default da margem 2. length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) 3. %: porcentagem da largura do elemento pai Vamos a seguir analisar cada uma delas detalhadamente atravs de exemplos prticos. Como estudar e entender os exemplos Para cada propriedade apresento as regras CSS para um elemento HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras. A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o cdigo no seu editor, mude os valores e veja o resultado no browser. Bons estudos! E faa timo proveito dos tutorial. Nota: Coloquei um fundo cinza mais escuro nos exemplos para facilitar a visualizao.
padding-top
...o espaamento superior
<html> <head> <style type="text/css"> <!-p {padding-top: 2cm;} --> </style> </head> <body> <p>Um espaamento superior de 2cm</p> </body> </html>
Este o efeito da folha de estilo acima: Um espaamento superior de 2cm

padding-right
...o espaamento direito
<html> <head> <style type="text/css"> <!-p {padding-right: 300px;} --> </style> </head> <body> <p>Um espaamento direito de 300px nesta frase mais longa dentro do pargrafo</p> </body> </html>
Este o efeito da folha de estilo acima: Um espaamento a direita de 300px nesta frase mais longa dentro do pargrafo
padding-bottom
...o espaamento inferior
<html> <head> <style type="text/css"> <!-p {padding-bottom: 2em;} --> </style> </head> <body> <p>Um espaamento inferior de 2.0em</p> </body> </html>
Este o efeito da folha de estilo acima: Um espaamento inferior de 2.0em

padding-left
...o espaamento esquerdo
<html> <head> <style type="text/css">  </style> </head> <body> <p>Um espaamento esquerdo de 10%</p> </body> </html>
Este o efeito da folha de estilo acima: Um espaamento esquerdo de 10%

padding
...todos os quatro espaamentos em uma declarao nica
A propriedade padding permite que voc controle o espaamento entre o contedo e as bordas dos elementos HTML. No so vlidos valores negativos para espaamento. Em declarao nica a ordem das espaamentos : superior, direito, inferior e esquerdo. H quatro modos de se declarar abreviadamente os espaamentos: 1. padding: valor1......os 4 espaamentos tero valor1; 2. padding: valor1 valor2......espaamento superior e inferior tero valor1 - espaamento direito e esquerdo tero valor2 3. padding: valor1 valor2 valor3......espaamento superior ter valor1 - espaamento direito e esquerdo tero valor2 - espaamento inferior ter valor3 4. padding: valor1 valor2 valor3 valor4....os espaamentos superior, direito, inferior e esquerdo nesta ordem.
<html> <head> <style type="text/css"> <!-p {padding: 20px 40px 80px 5px;} --> </style> </head> <body> <p>Um espaamento superior de 20px, um espaamento direito de 40px, um espaamento inferior de 80px e um espaamento esquerdo de 5px</p> </body> </html>
Este o efeito da folha de estilo acima: Um espaamento superior de 20px, um espaamento direito de 40px, um espaamento inferior de 80px e um espaamento esquerdo de 5px
A propriedade background O fundo dos elementos HTML

A propriedade background define as caractersticas (os valores na regra CSS) do fundo dos elementos HTML.
As propriedades background so as listadas abaixo:

background-color............... cor do fundo; background-image............. imagem de fundo; background-repeat............. maneira como a imagem de fundo posicionada; background-attachment.......se a imagem de fundo "rola" ou no com a tela; background-position............como e onde a imagem de fundo posicionada; background........................maneira abreviada para todas as propriedades;
Valores vlidos para as propriedades do fundo
background-color: 1. cdigo hexadecimal: #FFFFFF 2. cdigo rgb: rgb(255,235,0) 3. nome da cor: red, blue, green...etc 4. transparente: transparent
background-image: 1. URL: url(caminho/imagem.gif)
background-repeat: 1. no repete: no-repeat 2. repete vertical e horizontal: repeat 3. repete vertical: repeat-y 4. repete horizontal: repeat-x
background-attachment: 1. imagem fixa na tela: fixed 2. imagem "rola" com a tela: scroll
background-position:
1. x-pos y-pos 2. x-% y-% 3. top left 4. top center 5. top right 6. center left 7. center center 8. center right 9. bottom left 10. bottom center 11. bottom right Vamos a seguir analisar cada uma delas detalhadamente atravs de exemplos prticos.
A cor do fundo
<html> <head> <style type="text/css"> <!-body {background-color: #CCFFFF;} /*azul claro*/ h2 {background-color: #FF0000;} /* vermelho */ p {background-color: #00FF00;} /* verde */ --> </style> </head> <body> <h2>Estude CSS</h2> <p>Com CSS voc controla melhor seu layout</p> </body> </html>
Estude CSS
Com CSS voc controla melhor seu layout
A imagem de fundo
<html> <head> <style type="text/css"> <!-body { background-image: url("/images/css.gif");} --> </style> </head> <body> </body> </html>
Repetir verticalmente a imagem de fundo

<html> <head> <style type="text/css"> <!-body { background-image: url("/images/css.gif"); background-repeat: repeat-y; } --> </style> </head> <body> </body> </html>
Repetir horizontalmente a imagem de fundo

<html> <head> style type="text/css"> <!-body { background-image: url("/images/css.gif"); background-repeat: repeat-x; } --> </style </head> <body> </body> </html>
Posicionar uma imagem de fundo

<html> <head> <style type="text/css"> <!-body { background-image: url("/images/css.gif"); background-repeat: no-repeat; background-position: 200px 70px; } --> </style> </head> <body> </body> </html>
Este o efeito da folha de estilo acima: a imagem esta posicionada a 200 pixel da margem esquerda e 70 pixel da margem superior
Ajustar uma imagem de fundo fixa, que no "rola" com a tela.

<html> <head> <style type="text/css"> <!-body { background-image: url("/images/css.gif"); background-repeat: no-repeat; background-attachment: fixed; } --> </style> </head> <body> </body> </html>
Este o efeito da aplicao das regras CSS acima em uma pgina web.
Todas as propriedades do fundo em uma declarao nica

Esta a maneira abreviada de voc escrever uma regra para as propriedades do fundo.
Voc pode declarar todas ou algumas das propriedades estudadas em uma regra nica:
A
background:
sintaxe
color image
geral
repeat
attachment
esta:
position;
em qualquer ordem, podendo ser omitido um mais valores.
Veja o exemplo abaixo:

<html> <head>> <style type="text/css">/> <!-body { background: #00FF00 url("css.gif") no-repeat fixed 200px 70px; } --> </style> </head>
Voc poder fazer uso de um excelente editor para a propriedade background e descobrir mais efeitos para complementar este tutorial, nesta pgina interativa.
A propriedade list Mudando o estilo das listas HTML

A propriedade list define as caractersticas (valores) das listas HTML.
As propriedades list so as listadas abaixo:

list-style-image............. imagem como marcador da lista; list-style-position..........onde o marcador da lista posicionado; list-style-type...............tipo do marcador da lista; list-style........................maneira abreviada para todas as propriedades;
Valores vlidos para as propriedades do lista

list-style-image:
1. none 2. URL: url(caminho/marcador.gif)

list-style-position:
1. outside: marcador fora do alinhamento do texto 2. inside: marcador alinhado com texto
list-style-type:
1. none: sem marcador 2. disc: crculo (bolinha cheia) 3. circle: circunferncia (bolinha vazia)
4. square: quadrado cheio 5. decimal: nmeros 1, 2, 3, 4, ... 6. decimal-leading-zero 7. lower-roman: romano minsculo i, ii, iii, iv, ... 8. upper-roman: romano maisculo I, II, III, IV, ... 9. lower-alpha: letra minscula a, b, c, d, ... 10. upper-alpha: letra maiscula A, B, C, D, ... 11. lower-greek 12. lower-latin 13. upper-latin 14. hebrew 15. armenian 16. georgian 17. cjk-ideographic 18. hiragana 19. katakana 20. hiragana-iroha 21. katakana-iroha Os tipos de 11 a 20 so de uso especfico e sem suporte total pelos navegadores atuais e no sero tratados neste tutorial.
Vamos a seguir analisar cada uma delas detalhadamente atravs de exemplos prticos. Como estudar e entender os exemplos Para cada propriedade apresento as regras CSS para o elemento lista HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras.
A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o cdigo no seu editor, mude os valores e veja o resultado no browser. Bons estudos! E faa timo proveito do tutorial.
list-style-image...imagem
para marcadores de lista
Este exemplo demonstra como definir uma imagem de marcador de listas

<html> <head> <style type="text/css"> <!-ul { list-style-image: url("seta.gif"); } --> </style> </head> <body> <ul> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ul> </body> </html>
A folha de estilo acima resultar nesta lista:

Item um Item dois Item tres
list-style-position...posio
dos marcadores de lista
Este exemplo demonstra como posicionar os marcadores de listas

html> <head> <style type="text/css"> <!-ul.inside { list-style-position: inside; } ul.outside { list-style-position: outside; } --> </style> </head> <body> <ul class="inside"> <li>Este texto destina-se a demonstrar o valor: "inside" dos marcadores de listas.</li> <li>E aqui continuamos com mais texto para fixar o valor:"inside" dosmarcadores de listas.</li> </ul> <ul class="outside">
<li>Este texto destina-se a demonstrar o valor: "outside" dos marcadores de listas.</li> <li>E aqui continuamos com mais texto para fixar o valor:"outside" dos marcadores de listas.</li> </ul> </body> </html>

Este texto destina-se a demonstrar o valor: "inside" dos marcadores E aqui continuamos com mais texto para fixar o valor:"inside" dos marcadores de listas. Este texto destina-se a demonstrar o valor: "outside" dos marcadores E aqui continuamos com mais texto para fixar o valor:"outside" dos marcadores de listas.
list-style-type...os
tipos de marcadores de lista
Definir os marcadores de listas no ordenadas

Este exemplo demonstra como definir os marcadores de listas no ordenadas.
<html> <head> <style type="text/css"> <!-ul.none { list-style-type: none; } ul.disc { list-style-type: disc; } ul.circle { list-style-type: circle; } ul.square { list-style-type: square; } --> </style> </head> <body> <ul class="none"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ul> <ul class="disc"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ul> <ul class="circle"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ul>
<ul class="square"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ul> </body> </html>

Item um Item dois Item tres Item um Item dois Item tres Item um Item dois Item tres Item um Item dois Item tres
Definir os marcadores de listas ordenadas

Este exemplo demonstra como definir os marcadores de listas ordenadas.
<html> <head> <style type="text/css"> <!-ol.decimal { list-style-type: decimal; } ol.lroman { list-style-type: lower-roman; } ol.uroman { list-style-type: upper-roman; } ol.lalpha { list-style-type: lower-alpha; } ol.ualpha
{ list-style-type: upper-alpha; } --> </style> </head> <body> <ol class="decimal"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ol> <ol class="lroman"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ol> <ol class="uroman"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ol> <ol class="lalpha"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ol> <ol class="ualpha"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ol> </body> </html>
Este o efeito da folha de estilo acima: 1. Item um 2. Item dois 3. Item tres 1. Item um 2. Item dois 3. Item tres 1. Item um 2. Item dois 3. Item tres 1. Item um 2. Item dois 3. Item tres
1. Item um 2. Item dois 3. Item tres

list-style...duas
propriedades das listas em uma declarao nica
Esta a maneira abreviada de voc escrever uma regra para as propriedades das listas.
Voc pode declarar duas das propriedades estudadas em uma regra nica:
A sintaxe geral esta: list-style: position; imagem ou list-style: position; type podendo inverter a ordem.
Veja o exemplo abaixo:

<html> <head> <style type="text/css"> <!-ul { list-style: inside url("seta.gif"); } --> </style> </head> <body> <ul> <li>Texto para demonstrar a propriedade de declarao nica para listas usando CSS - Folhas de Estilo em Cascata;</li> <li>Item dois;</li> <li>Item tres.</li> </ul> </body> </html>
Texto para demonstrar a propriedade de declarao nica para listas usando CSS - Folhas de Estilo em Cascata; Item dois; Item tres.
Pseudo-elementos CSS
Sintaxe
So usados em CSS, para adicionar efeitos a um seletor, ou a parte de um seletor. A sintaxe dos pseudo-elementos:
seletor:pseudo-elemento {propriedade: valor;}
As classes em CSS podem tambm ser usadas com pseudo-elementos. Esta regra permite que voc defina diferentes efeitos para pseudo-elementos localizados em diferentes lugares em uma mesma pgina.
seletor.classe:pseudo-elemento {propriedade: valor;}
O pseudo-elemento first-letter
O pseudo-elemento first-letter usado para obter um efeito especial na primeira letra de um texto.
<html> <head> <style type="text/css"> p { font-size: 12pt } p:first-letter { font-size:300%; } </style> </head> <body> <p>Este texto destina-se a demonstrar o pseudo-elemento first-letter, bla...bla...bla... bla... bla...bla...bla...bla...bla... bla...bla... bla... bla...bla...bla...bla...bla... bla...bla...</p> </body> </html>
O cdigo acima produzir esse efeito Este texto destina-se a demosnstrar o pseudo-elemento first-letter, bla...bla...bla...bla...bla... bla...bla... bla... bla...bla...bla...bla...bla... bla...bla...bla...bla...bla... bla...bla... bla... bla...bla...bla...bla...bla... bla...bla... bla...bla...bla... bla...bla... bla... bla...
O pseudo-elemento first-letter somente pode ser usado com elementos de bloco.
Propriedades aplicveis ao pseudo-elemento first-letter

font - propriedades de letras color - propriedades de cores background - propriedades de fundo margin - propriedades de margens padding - propriedades de espaamentos border - propriedades de bordas text-decoration vertical-align (somente para "float: none) text-transform
line-height float clear
O pseudo-elemento first-line
O pseudo-elemento first-line usado para obter um efeito especial na primeira linha de um texto.
<html> <head> <style type="text/css"> p { font-size: 12pt } p:first-line { color: #0000FF; font-variant: small-caps; } </style> </head> <body> <p>Um texto qualquer dentro de um pseudo-elemento first-line, para um efeito especial na primeira linha</p> </body> </html>
O cdigo acima produzir esse efeito Um texto qualquer dentro de um pseudo-elemento first-line, para um efeito especial na primeira linha. Notar a mudana de cor e o tipo de letra small-caps na primeira linha. No exemplo acima toda a primeira linha sofre o efeito da definio do pseudo-elemento. A "quebra" da linha depente do tamanho da janela do browser. O pseudo-elemento first-line somente pode ser usado com elementos de bloco.
Propriedades aplicveis ao pseudo-elemento first-line

font - propriedades de letras color - propriedades de cores background - propriedades de fundo word-spacing - espaamento entre palavras letter-spacing - espaamento entre letras text-decoration vertical-align text-transform line-height clear
Pseudo-elementos em classes CSS

Pseudo-elementos podem ser combinados com classes CSS
<html> <head> <style type="text/css"> p.combinado:first-letter { color: #FF0000; font-size:xx-large; } </style> </head> <body> <p class="combinado"> Uma frase com efeito especial combinado </p> </body> </html>
O cdigo acima produzir esse efeito Uma frase com efeito especial combinado
Controlando as entrelinhas e o espaamento entre elementos HTML As propriedades line-height e margin

A propriedade CSS de dimensionamento line-height permite controlar o espaamento entre linhas e a propriedade CSS margin permite controlar o espaamento entre elementos HTML.
Observe abaixo o cdigo HTML para um texto composto de dois pargrafos:

<html> <head> </head> <body> <p> 1o. Pargrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis. </p> <p> 2o.Pargrafo.......Sed blandit est non ante. Ut imperdiet sagittis mi. Sed gravida sodales nisl. Ut hendrerit ipsum eu enim. Duis tempus consequat mauris. In hac habitasse platea dictumst. Vivamus lectus justo, commodo in, rutrum non, eleifend eget, pede. Sed ac lacus. In tortor. </p> </body>
</html>
O cdigo acima renderizado pelo navegador conforme mostrado abaixo.
Notar a distncia entre as linhas em cada pargrafo, ou seja as entrelinhas (no confunda com distncia entre pargrafos):
1o. Pargrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis.
2o.Pargrafo.......Sed blandit est non ante. Ut imperdiet sagittis mi. Sed gravida sodales nisl. Ut hendrerit ipsum eu enim. Duis tempus consequat mauris. In hac habitasse platea dictumst. Vivamus lectus justo, commodo in, rutrum non, eleifend eget, pede. Sed ac lacus. In tortor.
Alterando o espaamento entre linhas

No cdigo HTML mostrado acima vamos inserir uma regra CSS para line-height que a propriedade CSS que controla as entrelinhas. Observe abaixo o mesmo cdigo com a regra, definindo uma entrelinha igual a 200%.
Nota: A entrelinha default do bronwser 100%.
Voc pode usar qualquer medida de comprimento, vlida em CSS (px, cm, em, %, in...) para o valor da propriedade line-height.
<html> <head> <style type="text/css"> <!-p { line-height:200%; } --> </style> </head> <body> <p> 1o. Pargrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis. </p>
<p> 2o.Pargrafo.......Sed blandit est non ante. Ut imperdiet sagittis mi. Sed gravida sodales nisl. Ut hendrerit ipsum eu enim. Duis tempus consequat mauris. In hac habitasse platea dictumst. Vivamus lectus justo, commodo in, rutrum non, eleifend eget, pede. Sed ac lacus. In tortor. </p> </body> </html>
Notar que a entrelinha que era default 100%, agora est 200% ou seja dobrou:
Nota: Faa algumas experincias com o valor de line-height, usando inclusive valores abaixo de 100% e tambm outras medidas vlidas (por exemplo: 12px, 2.3em, 3cm...etc...) e voc vai constatar que tem o controle total das entrelinhas.
2o.Pargrafo.......Sed blandit est non ante. Ut imperdiet sagittis mi. Sed gravida sodales nisl. Ut hendrerit ipsum eu enim. Duis tempus consequat mauris. In hac habitasse platea dictumst. Vivamus lectus justo, commodo in, rutrum non, eleifend eget, pede. Sed ac lacus. In tortor.
E o espaamento (a distncia) entre os pargrafos?

Aqui tambm o controle todo seu via CSS.
E quem dita as regras para este espaamento a propriedade margin.
Vamos acresentar mais uma regra CSS no nosso cdigo.
Se voce no lembra da propriedade margin, leia este tutorial sobre margens
<html> <head> <style type="text/css"> <!-p { line-height:200%; margin: 40px 0 40px 0; --> </style> </head> <body> <p> 1o. Pargrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis. </p> <p> 2o.Pargrafo.......Sed blandit est non ante. Ut imperdiet sagittis mi. Sed gravida sodales nisl. Ut hendrerit ipsum eu enim. Duis tempus consequat mauris. In hac habitasse platea dictumst. Vivamus lectus justo, commodo in, rutrum non, eleifend eget, pede. Sed ac lacus. In tortor. </p> </body> </html>
Notar que a entrelinha continua em 200% e agora o espaamento entre pargrafos cresceu para 40 pixels, cumprindo a regra CSS, escrita.
2o.Pargrafo.......Sed blandit est non ante. Ut imperdiet sagittis mi. Sed gravida sodales nisl. Ut hendrerit
ipsum eu enim. Duis tempus consequat mauris. In hac habitasse platea dictumst. Vivamus lectus justo, commodo in, rutrum non, eleifend eget, pede. Sed ac lacus. In tortor.
Voc deve ter notado que o espaamento do 1o. pargrafo para a borda superior do quadro amarelo e tambm a do 2o. pargrafo para a borda inferior do quadro amarelo, ambas AUMENTARAM.
Sim, este aumento no espaamento cumpriu o prescrito na nova regra, ou seja: 40 pixel de margem superior e 40 pixel de margem inferior nos pargrafos.
Mas lembre-se o controle SEU. Tem como evitar este espaamento no previsto :-) Veja o item 1-) abaixo.
Dicas adicionais
1-) Para evitar aquele espaamento referido acima, crie e aplique uma classe no pargrafo superior com margin-top: 0; (ou n pixels) e outra classe ao pargrafo inferior com margin-bottom: 0; (ou n pixels);
Voc pode tambm declarar: margin: 0 0 40px 0; e suprimir o espaamento superior, ou ainda margin: 40px 0 0 0; e suprimir o espaamento inferior. E, uma srie de outras combinaes que ficam a ttulo de exerccios para voc.
2-) Se voc deseja aplicar regras CSS em alguns elementos do documento e no em todos (por exemplo: alguns pargrafos na pgina seguiro uma regra line-height outros no) crie classes e aplique aos elementos.
As medidas CSS de comprimento

Introduo
Unidades de medida de comprimento CSS As unidades de medida de comprimento CSS referem-se a medidas na horizontal ou na vertical (e em sentido mais amplo, em qualquer direo).
O formato para declarar o valor de uma unidade de medida CSS um nmero com ou sem ponto decimal imediatamente precedido do sinal '+' (mais) ou do sinal '-' (menos), sendo o sinal '+' (mais) o valor "default" e imediatamente seguido por uma unidade identificadora (medida CSS vlida - p.ex., px, em, deg, etc...). A unidade identificadora opcional quando se declara um valor '0' (zero).
Algumas das propriedades CSS permitem que sejam declarados valores negativos para unidades de medida. A adoo de valores negativos podem complicar a formatao do elemento e devem ser usados com cautela. Se valores negativos no forem suportados pela aplicao de usurio, eles sero convertidos para o valor mais prximo suportado (e isso pode tornar-se desastroso para um layout).
Unidades de medida de comprimento CSS vlidas

So dois os tipos de unidade de medida de comprimento CSS:
UNIDADE RELATIVA

em ex px - pixel % - percentagem
as unidades relativas so referenciadas a outras unidades como veremos a seguir.
UNIDADE ABSOLUTA

pt - point :1/72 in; pc - pica :12 points ou 1/6 in; mm - milmetro :1/10 cm; cm - centmetro :1/100 m; in - polegada :2,54 cm;
Unidade relativa- aquela tomada em relao a uma outra medida. Folhas de Estilo em Cascata que usam unidades de comprimento relativas so mais apropriadas para ajustes de uso em diferentes tipos de mdia. (p. ex., de uma tela de monitor para uma impressora laser).
O valor tomado em relao:

em: ...ao tamanho da fonte ('font-size') herdada; ex: ...a altura da letra x (xis) da fonte herdada; px: ...ao dispositivo (midia) de exibio; %: ... a uma medida previamente definida.
Unidade absoluta - aquela que no esta referenciada a qualquer outra unidade e nem herdada. So unidades de medida de comprimento definidas nos sistemas de medidas pela fsica e em fim so os
conhecidos "centmetros, polegadas etc...). So indicadas para serem usadas quando as mdias de exibio so perfeitamente conhecidas.
Abaixo exemplos ilustrativos do uso destas medidas de comprimento CSS:

div { margin: 1.5em; } h4 { margin: 2ex; } p { font-size: 14px; } .classe { padding: 90%; } hr { width: 14pt; } h1 { margin: 1pc; } h2 { font-size: 4mm; } p.classe { padding: 0.3cm; } h5.classe { padding: 0.5in; }
Nota: Relembro que uma regra CSS tem a seguinte sintaxe
seletor {propriedade: valor;}
Entendendo as unidades de medida CSS

Vamos a seguir definir e analisar cada uma das unidades de medida CSS e apresentar exemplos prticos. A unidade de medida - pixel A unidade de medida de comprimento pixel relativa a resoluo do dispositivo de exibio (p.ex: a tela de um monitor).
Sem entrar em maiores consideraes tericas a mais simplista definio de pixel que encontrei esta:
Pixel o menor elemento em um dispositivo de exibio, ao qual possivel atribuir-se uma cor.
Considere um dispositivo de exibio construido com uma densidade de 90 dpi (dpi = dots per inch = pontos por polegada). Por definio, a referncia padro para pixel igual a um ponto no citado dispositivo. Da pode-se concluir que 1 pixel naquele dispositivo de exibio igual a 1/90 inch = 0,28 mm.
Para uma densidade de 300 dpi 1 pixel igual a 1/300 inch = 0,085mm
Assim, pixel uma medida relativa a resoluo do dispositivo de exibio. A unidade de medida - em A unidade de medida de comprimento em referencia-se ao tamanho da fonte (letra) do seletor onde for
declarada. Quando em for declarada para a propriedade font-size referencia-se ao tamanho da fonte (letra) do elemento pai. Quando em for declarada para o elemento raiz do documento (p. ex: <html> em documentos html) referencia-se ao valor inicial (default) do tamanho de fonte (letra).
Os exemplos abaixo esclarecem as definies:

h1 { line-height: 1.2em }
line-height de <h1> ser 20% maior do que o tamanho das letras de <h1>
h1 { font-size: 1.2em }
font-size de <h1> ser 20% maior do que o tamanho das letras herdado por <h1> p.ex.: se h1 estiver contido numa div com font-size=10px ento font-size de h1 = 12px A unidade de medida - ex A unidade de medida de comprimento ex igual a altura da letra x(xis) minscula). A unidade de medida - percentagem, % Valores em percentagem so relativos a um outro valor anterior declarado. Este valor anterior h que estar bem definido e em geral esta definio est em uma determinada propriedade do mesmo elemento, na propriedade do elemento "pai" (por exemplo: uma medida CSS de comprimento) ou mesmo no contexto geral da formatao (por exemplo: a largura do bloco de contedo).
p { font-size: 10px } p { line-height: 120% }/*120% de'font-size'=12px*/
Definindo cores em uma regra CSS
Objetivo
Detalhar as diferentes maneiras de se escrever a sintaxe para os valores das cores em uma regra CSS
Valores vlidos para cores em CSS

Observe as regras de estilo a seguir:
1-) div.um {background-color: #FF0000;} 2-) div.dois {background-color: #F00;} 3-) div.tres {background-color: rgb(255, 0, 0);} 4-) div.quatro {background-color: rgb(100%, 0%, 0%);} 5-) div.cinco {background-color: red;} 6-) div.seis {background-color: ThreeDShadow;}
Como voc j deve ter concluido apresentei 06 (seis) maneiras diferentes de definir uma cor de fundo para uma DIV . E, se considerarmos que para as duas primeiras regras vlido usar letras minsculas, existem 08 (oito) maneiras de se definir uma cor em uma regra CSS. As maneiras mais usadas so as mostradas em 1 e em 2, ou seja, com uso do cdigo hexadecimal de cores.
O efeito das regras no navegador

Observe agora no screenshot a seguir como estas seis DIV's sero renderizadas.
As cinco primeiras esto com a mesma cor de fundo, vermelha o que nos leva a concluir que as cinco primeiras regras mostradas so equivalentes, ou seja so cinco maneiras diferentes de definir um mesmo valor para uma cor. #FF0000 = #F00 = rgb(255,0,0) = rgb(100%,0%,0%) = red A sexta cor, ThreeDShadow depende do equipamento do usurio. Vejamos cada uma delas detalhadamente.
Definir uma cor pelo seu cdigo hexadecimal

Esta a maneira mais conhecida de definir uma cor. Convm ressaltar que em uma regra CSS indiferente usar letras maisculas ou minsculas na sintaxe hexadecimal de cores e tambm que vlido abreviar a notao para trs dgitos. Na notao abreviada cada um dos trs dgitos automaticamente dobrado conforme exemplos a seguir:
#FFF = #FFFFFF #CF9 = #CCFF99 #cde = #ccddee #49c = #4499cc
No do escopo deste tutorial detalhar o cdigo hexadecimal, contudo ressalto que os dezesseis dgitos hexadecimais so: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F e somente eles so vlidos para definir uma cor, podendo em geral ser usada qualquer combinao deles. Assim: #FFDDHH no define uma cor, pois H no vlido. Existem vrias ferramentas online para determinar o cdigo hexadecimal de uma cor. Uma das que eu costumo usar e indico para vocs esta: http://www.colorschemer.com/online.html
Definir uma cor pelo seu cdigo rgb

rgb r g b = blue (azul) = = abreviatura red green para: (vermelha) (verde)
Assim o cdigo rgb(xxx, yyy, zzz) indica uma cor obtida com a mistura de uma quantidade xxx de vermelho com yyy de verde e com zzz de azul. Duas so as maneiras de se definir a quantidade de cada uma das trs cores: Uma faixa de Em percentagem de 0% at 100% nmerao de 0 (zero) at 255
No vlido usar em uma definio nmero e percentagem. Exemplos: definies

rgb(145, 230, 50) - rgb(20%, 0%, 70%)
vlidas no vlida
definio
rgb(255, 20%, 120)
No do escopo deste tutorial detalhar as misturas de cor rgb. No link indicado no item anterior possvel determinar tambm, o cdigo rgb de uma cor
Definir cor por palavra-chave

Voc pode definir uma cor usando o nome da cor. Os nomes de cor vlidos so os listados nas recomendaes CSS do W3C. As Recomendaes para CSS 2.1 listam as seguintes 17 cores: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, e yellow
Assim, as regras a seguir so vlidas para definir cor

p div {background-color: teal;} {color: aqua;}
Definir cor baseado no sistema operacional do usurio

As recomendaes para CSS2.1 preconizam a definio da cor baseado nas cores adotadas pelo sistema operacional do usurio. Este tipo de unidade de definio de cor denominado System Colors est em desuso e no dever constar das futuras Recomendaes CSS3. Trata-se de uma lista de nomes de cores vlidas semelhana da listagem de cores por palavra-chave e que se refere a reas do sistema operacional. As cores previstas so: ActiveBorder, ActiveCaption, AppWorkspace, Background, ButtonFace, ButtonHighlight, ButtonShadow, ButtonText, CaptionText, GrayText, Highlight, HighlightText, InactiveBorder, InactiveCaption, InactiveCaptionText, InfoBackground, InfoText, Menu, MenuText, Scrollbar, ThreeDDarkShadow, ThreeDFace, ThreeDHighlight, ThreeDLightShadow, ThreeDShadow, Window, WindowFrame, WindowText Embora os valores CSS sejam "case insensitives" recomenda-se usar a grafia com letras maisculas e minsculas ao se escrever o nome das cores de sistema por razes de legibilidade. Exemplos:
p {color: div {background: ButtonShadow;}
ThreeDLightShadow;}
Abreviando declaraes e valores em regras CSS
Relembrando a sintaxe e a terminologia de uma regra CSS

comum encontrar-se em muitos artigos sobre CSS escritos em blogs e sites, em textos de posts em fruns, em listas de discusso e at mesmo em revistas e jornais, diferentes referncias e denominaes equivocadas para os componentes de uma regra CSS Seletores so chamados de elementos ou de tags, propriedades so chamadas de seletores ou de atributos, valores so chamados de atributos ou de propriedades, declaraes so chamadas de regras ou funes CSS e por a vai em uma diversificada combinao dos termos acima citados em uma salada que acaba por confundir iniciantes e as vezes at mesmo outros j com alguma experincia com folhas de estilo em cascata. Com a finalidade de facilitar o entendimento desta matria e esclarecer a confuso que vem se formando em torno do assunto, vamos rever a sintaxe e a terminologia de uma regra CSS para que quando eu escrever seletor, declarao, propriedade e valor, no haja dvidas sobre a poro da regra CSS a que estou me referindo e voc no fique se perguntando onde esto os "atributos CSS, as tags CSS, e outros tantos termos equivocados". Vejamos o que diz as Recomendaes do W3C para Folhas de Estilo, nvel 1 na seo intitulada Conceitos Bsicos O projeto, ou desenho do layout, das folhas de estilos fcil. preciso apenas conhecer um pouco da linguagem HTML e possuir noes bsicas dos termos usados em publicao eletrnica. Como exemplo, para ajustar a cor das letras de um elemento 'H1' para azul, basta fazer:
H1 {color: blue}
Este exemplo mostra o que uma 'regra' simples em CSS. Uma regra composta de duas partes principais: um selector ('H1') e uma declarao ('color: blue'). Por sua vez, esta declarao tambm possui duas partes: uma propriedade ('color') e seu valor ('blue'). Embora este exemplo especifique apenas uma das vrias propriedades necessrias para montar um documento HTML, ela constitui por si s uma 'folha de estilo'. Quando for combinada com outras folhas de estilo ela determinar a apresentao final do documento (uma caracterstica fundamental que as folhas de estilo podem ser combinadas). O seletor funciona como a ponte de ligao entre o documento HTML e a folha de estilo, e todos os elementos HTML podem funcionar como possveis seletores. Os vrios elementos HTML esto definidos na Recomendao HTML etc. A Recomendao do W3C define claramente que uma regra CSS composta de um seletor e uma declarao e que a declarao compreende uma propriedade e um valor. Na regra CSS a seguir:
H1 {color: blue}
a terminologia correta :
H1
- seletor; - declarao;
{color: blue}
color blue
- propriedade;
- valor.
e a sintaxe correta :

Escrever o seletor e a seguir a declarao; A declarao deve estar entre { } (chaves); Na declarao, separar a propriedade e o valor por : (dois pontos); permitido usar espaos em branco em qualquer quantidade entre cada um dos caracteres da regra; permitido grupar declaraes em uma mesma regra e neste caso as declaraes devero ser separadas por ; (ponto-e-vrgula) podendo todas elas estar em uma mesma linha ou em linhas distintas. facultativo o uso de ; (ponto-e-vrgula) aps a ltima declarao na regra; indiferente o uso de maisculas e minsculas em uma regra CSS, contudo as classes e ID's devem seguir a mesma grafia constante da marcao.
Estes so os termos normatizados de uma regra CSS e os que usaremos. Portanto, no existe "atributo CSS" ou "tag CSS" ou "elemento CSS" ou "funo CSS" ou tantos outros equivocadamente escritos. No do escopo deste tutorial detalhar as boas prticas de escrita das regras em uma folha de estilos. Sobre este assunto escrevi e recomendo a leitura do tutorial Dicas bsicas para projetar folhas de estilos.
Abreviando valores de cores hexadecimais

O formato hexadecimal uma das opes sintticas mais usadas para se escrever o valor das cores em regras CSS. A regra a seguir define que os pargrafos sero na cor vermelha (#ff0000).
p {color: #ff0000;}
e que poder ser abreviada para:

p {color: #f00;}
vlido abreviar cores hexadecimais para 3 dgitos. Valores escritos com 3 dgitos so interpretados como se cada um dos dgitos tivesse sido sido declarado duas vezes, isto : genericamente, #abc equivalente #aabbcc Exemplos:
#c30 #999 #ff0 #d61 = = = = #cc3300 #999999 # ffff00 #dd6611
fcil concluir que a abreviao de cores hexadecimais somente possvel para as cores constituidas por 3 pares de dgitos hexadecimais.
Valores para os quatro lados de um elemento nvel de bloco

Um elemento nvel de bloco ou uma 'caixa' admite estilizao em seus quatro lados para algumas propriedades como border e padding entre outras. Por exemplo: voc pode definir um padding superior, um padding direita, um padding inferior e um
padding
esquerda para uma div.
A sequncia em que voc escreve os valores para estilizar os quatro lados de uma 'caixa' rgida e fixa em uma regra CSS e obedece a seguinte ordem: em cima , lado direito, embaixo, lado esquerdo Faa uma analogia com o relgio para no esquecer 12 horas (superior), 3 horas (direita), 6 horas (inferior), 9 horas (esquerda).
div {padding: 2px 3px 8px A regra um padding inferior um padding superior um padding esquerda um padding direita igual a 3px. 7px;}
a para a a
sequncia. a
div: 8px: 2px; 7px:
define
igual igual igual
Alm da mostrada acima vlido abreviar declaraes que envolvem os quatros lados de uma 'caixa' de outras 3 maneiras diferentes como mostradas a seguir: 1. div {padding: 10px;} padding de 10px para os 4 lados; 2. div {padding: 6px 8px;} padding de 6px para os lados superior e inferior e de 8px para os lados direito e esquedo; 3. div {padding: 2px 4px 9px;} padding de 2px para o lado superior, de 4px para os lados direito e esquerdo e de 9px para o lado inferior.
Propriedades que admitem abreviao

Veremos ao longo deste tutorial, como abreviar as seguintes propriedades CSS: 1. margin; 2. padding; 3. background; 4. font; 5. list; 6. outline; 7. border.
Abreviando margin
As regras a seguir definem valores para as 4 margens para uma div:
div { margin-top:10px; margin-right:8px; margin-bottom:0; margin-left:5px; }
E pode ser abreviada para:

div { margin:10px 8px 0 5px;
Abreviando padding
As regras a seguir definem valores para os 4 paddings de um pargrafo:
p { padding-bottom:6px; padding-top:12px; padding-left:1px; padding-right:2px; }

div { padding:12px 2px 6px 1px; }
Abreviando background
As regras a seguir definem valores para propriedades background de uma div:
div { background-color:#ffffcc; background-image:url(fundo.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:20px 10px; }

div { background:#ffc url(fundo.gif) no-repeat fixed 20px 10px; }
Abreviando font
As regras a seguir definem valores para propriedades de font em um documento:
body { font-style:italic; font-variant:small-caps; font-weight:bold; font-size:11px; line-height:15px; font-family:Arial, Helvetica, Sans-serif; }

body { font:italic small-caps bold 11px/15px Arial, Helvetica, Sans-serif; }
Nota: Para abreviar a propriedade font obrigatrio definir no mnimo os valores de tamanho e famlia da font. Os demais valores so facultativos. A ordem de declarao dos valores importante e deve ser assim: 1. comear com font-style, font-variant e font-weight sedo que estes trs valores so facultativos e podem ser escritos em qualquer ordem; 2. a seguir declarar obrigatoriamente font-size e opcionalmente line-height (font-size/lineheight);
3. finalmente declarar obrigatoriamente font-family.
Abreviando list
As regras a seguir definem valores para propriedades de listas:
ul { list-style-type:square; list-style-position:inside; list-style-image:url(image.gif); }

ul {list-style:square inside url(image.gif);}
A propriedade: list-style-type pode ser abreviada para Por exemplo: list-style-type:none pode ser abreviada para list-style:none;
list-style.
Abreviando outline
A propriedade outline pouco conhecida e empregada. Serve para colocar uma margem ao redor de um elemento, com a finalidade de destac-lo no contexto. Difere da propriedade border por no interferir com as dimenses do box model, isto , no ocupa espao no box do elemento e em consequncia no afeta o posicionamento do box e nem dos boxes adjacentes. As regras a seguir definem a marcao de um 'destaque' em linha vermelha slida de 1px ao redor do elemento h2:
h2 { outline-color:#f00; outline-style:solid; outline-width:1px; }

h2 { outline:#f00 solid 1px; }
Exemplo: Para este pargrafo eu defini um destaque (outline) de 5px em linha tracejada na cor azul que ser visualizado nos Mozillas e no pera, mas no no Internet Explorer que no suporta outline.
Abreviando border
As regras a seguir definem valores para propriedades de borda:
div { border-width:1px; border-style:solid; border-color:#f00; }

div {border:1px solid #f00;}
Erro! Indicador no definido. As regras a seguir definem valores para espessuras de borda:
p { border-top-width:2px; border-right-width:1px; border-bottom-width:3px;
border-left-width:5px; }

p {border-width:2px 1px 3px 5px;}
Erro! Indicador no definido. As regras a seguir definem valores para cores de borda:
h1 { border-top-color:#f00; border-right-color:#ccc; border-bottom-color:#00f; border-left-color:#999; }

p {border-color:#f00 #ccc #00f #999;}
Erro! Indicador no definido. As regras a seguir definem valores para estilos de borda:
p { border-top-style:solid; border-right-style:ridge; border-bottom-style:double; border-left-style:dotted; }

p {border-style:solid ridge double dotted;}
Introduo ao PHP
O que PHP ?
HP acrnimo de Hypertext Preprocessor (pr-processador de hipertexto), uma poderosa linguagem de programao mundialmente usada principalmente no ambiente Web para gerar contedos dinmicos na internet.
O PHP um produto de cdigo-fonte aberto, o que significa que voc tem acesso ao seu cdigo-fonte. possvel utiliz-lo, alter-lo e redistribu-lo sem pagar nada. Dentro de uma pgina HTML, voc pode embutir cdigo PHP que ser executado toda vez que a pgina for visitada. O cdigo PHP interpretado no servidor Web e gera HTML ou outra sada que o visitante ver. Vejamos um exemplo da utilizao do PHP:
Este exemplo produz esta pgina HTML:
Como surgiu ?
PHP foi concebido em 1994 como resultado do trabalho de uma nica pessoa, Rasmus Lerdorf. O PHP foi adotado por outras pessoas inteligentes e foi reescrito trs para proporcionar o amplo e aperfeioado produtos que hoje. Em outubro de 2002, ele era utilizado em mais de nove milhes de domnios em todo o mundo e esse nmero est crescendo rapidamente. Voc pode constatar o nmero atual em www.php.net/usage.php.
A principal verso atual do PHP a verso 5.
Porque aprender PHP ?
prender PHP lhe capacitar a construir Web sites dinmicos do mundo real, onde os usurios podero interagir de modo significativo, diferente de um contedo esttico de um Web site construdo utilizando somente HTML. Formulrios de cadastro ou contato; Fruns Web; Sistemas de gerenciamento de contedo; Sistemas de compra e venda de produtos via Web (E-commerce); Sites dinmicos alimentados pelo Banco de Dados; Sistemas complexos: gerenciamento de servidores, mala-direta, usurios, etc.
Com o PHP possvel desenvolver diversos tipos de projetos, dentre eles podemos destacar:
At aqui voc j deve ter notado as grandes possibilidades do PHP, seguindo este ponto positivo temos tambm a portabilidade onde o PHP est disponvel para muitos sistemas operacionais diferentes. Voc pode escrever o cdigo de PHP em sistemas operacionais do tipo Unix gratuitos como Linux e o FreeBSD, verses comerciais do Unix como o Solaris e IRIX, ou em verses diferentes do Microsoft Windows. Um cdigo bem escrito normalmente funcionar sem modificaes em um sistema diferente, executando o PHP. Neste curso abordaremos desde o bsico at o avanado. Sinta-se vontade para navegar pela apostila, voltando quando desejar. E ento, preparado? Vamos l! Sintaxe bsica
PHP tem uma sintaxe muito simples e enxuta, o que facilita muito a organizao dos scripts a serem desenvolvidos. Outro ponto interessante que veremos que os cdigos
em PHP so embutidos no HTML, ao invs de ger-lo por completo, facilitando muito a anlise de possveis erros nos scripts desenvolvidos.
Delimitador e separador do cdigo em PHP

O cdigo de um programa escrito em PHP deve estar contido entre os seguintes delimitadores:
Comentrios
xistem 3 maneira de inserir comentrios num cdigo PHP. Duas delas so para comentrio de uma nica e linha, e a outra para comentrios de mais de uma linha.
Em comentrios de 1 linha, voc pode usar // ou #. J para comentrios de vrias linhas, delimite-o com /* e */.
Extenso de arquivos
A forma mais comum de nomear programas em PHP a seguinte:
Extenso .php .class.php .inc.php Significado Arquivo PHP contendo um programa. Arquivo PHP contendo uma classe. Arquivo PHP a ser includo, pode incluir constantes ou configuraes.
Comandos de sada(output)
stes so comandos utilizados para gerar uma sada em tela(output).Se um script php geralmente tem como resultado uma pgina html, ou algum outro texto. Para gerar esse resultado, deve ser utilizada uma das funes de impresso, echo e print. Para utiliz-las deve-se utilizar um dos seguintes formatos:
echo um comando que imprime uma ou mais variveis no console. Exemplo:
Resultado: abc print uma funo que imprime uma string no console. Exemplo:
Resultado: abc
Tipo de Dados O PHP suporta oito tipos primitivos. So quatros tipos bsicos:

boolean ; integer ; float (nmero de ponto flutuante, ou tambm 'double') ; string . array ; object . resource ; NULL .
Dois tipos compostos:

E finalmente dois tipos especiais:

O PHP utiliza uma checagem dinmica de tipos,isto ,uma varivel pode conter valores de diferentes tipos em diferentes momentos da execuo do script. Por esse motivo,no preciso declarar o tipo de uma varivel para implement-la. O interpretador PHP decidir qual o tipo daquela varivel,verificando o contedo em tempo de execuo. Ainda assim, permitido converter os valores de um tipo para outro, utilizando o typecasting ou a funo settype. Tipo Booleano Tambm chamado de BOOLEAN. Este o tipo mais fcil. Um booleano expressa um valor de verdade. Ele pode ser TRUE ou FALSE. Para especificar um literal booleano, use as palavras chave TRUE ou FALSE. Ambas so insensitivas ao
caso. Isso quer dizer, que tanto faz voc escrever TRUE, True ou true.
Vejamos agora exemplos sobre como fazer comparaes com o tipo booleano:
No PHP pode-se fazer a converso de tipos. Para converter explicitamente um valor para booleano, utilize-se dos modificadores (bool) ou (boolean). Entretanto, na maioria dos casos, voc no precisa utilizar o modificador, desde que qualquer valor ser convertido automaticamente se um operador, funo ou estrutura de controle requerer um argumento booleano.Quando convertendo para booleano, os seguintes valores so considerados FALSE:

o prprio booleano FALSE o inteiro 0 (zero) o ponto flutuante 0.0 (zero) uma string vazia e a string "0" um array sem elementos um objeto sem elementos membros o tipo especial NULL (incluindo variveis no definidas)
Qualquer outro valor considerado TRUE (incluindo qualquer recurso).Exemplo de converso:
Tipo Inteiro Tambm chamado de INTEGER.Um inteiro um nmero do conjunto Z = {..., -2, -1, 0, 1, 2, ...}. Inteiros podem ser especificados em notao decimal (base 10), hexadecimal (base 16) ou octal (base 8), opcionalmente precedido de sinal (- ou +).Para usar a notao octal, voc precisa preceder o nmero com um 0 (zero). Para utilizar a notao hexadecimal, preceda nmero com 0x. Exemplo de definies:
Assim como vimos no tipo Booleano, o PHP tambm permite a converso de outros tipos para Inteiro. Para converter explicitamente um valor para inteiro, utilize-se dos modificadores (int) ou (integer). Entretanto, na maioria dos casos, voc no precisa utilizar o modificador, desde que qualquer valor ser automaticamente convertido se um operador, funo ou estrutura de controle requerer um argumento inteiro. Voc tambm pode converter o valor de um inteiro com a funo intval(). Exemplo de converso:
Tipo Ponto Flutuante Tambm chamado de FLOAT ou DOUBLE.Nmeros de ponto flutuante podem ser especificados utilizando qualquer uma das sintaxes seguintes:
Tipo String String so conjunto de caracteres e pode ser definida de trs formas diferentes: com apstrofo, aspas ou sintaxe heredoc.A maneira mais simples para especificar uma string delimit-la entre apstrofos (o caracter '). Para especificar um apstrofo dentro da string, voc precisar "escap-la" com uma contra barra (\), como em muitas outras linguagens. Se uma contra barra precisa ocorrer antes de um apstrofo ou no final da string, voc precisa duplic-la. Note que se voc tentar escapar qualquer outro caracter, a contra barra tambm ser impressa! Ento geralmente no necessrio escapar a prpria contra barra. Vejamos exemplos abaixo:
Em caso de dvida,consulte a tabela seguinte:

\n \r \t \\ \$ \' \ Nova linha Retorno de carro (semelhante a \n) Tabulao horizontal A prpria barra (\) O smbolo $ Aspa simples Aspa dupla
Tipo Array Array, ou Vetor, atualmente um mapa ordenado. Um mapa um tipo que relaciona valores por chaves.Um array pode ser criado com o construtor de linguagem array(). Ele pega um certo nmero de pares separados por vrgula chave => valor. Exemplo:
Observe que a chave tanto pode ser uma string (chave) quanto um inteiro (3).J o valor pode conter qualquer tipo suportado pelo PHP. Um valor pode ainda, conter outro array, como segue no exemplo:
Alm de definir arrays com o comando array(), voc ainda pode definir diretamente com atribuio. Veja o exemplo:
Como vimos, as chaves podem conter inteiros. Voc pode ainda inserir novos valores num array, apenas usando os colchetes. Continuando o exemplo anterior:
Para apagar uma chave do vetor, voc pode utilizar a funo unset(). Como no exemplo a seguir:
Mais informaes sobre Arrays, voc ir visualizar na seo dedicada: Trabalhando com Arrays.
Tipo Objetos Objetos so instncias de classes definidas pelo usurio.Para inicializar um objeto, voc usa a instruo new, criando uma instncia do objeto em uma varivel. Exemplo:
Tipo NULL O valor especial NULL representa que a varivel no tem valor. NULL o nico valor possvel do tipo NULL.H apenas um nico valor do tipo NULL, e a palavra (insensitiva ao caso) NULL. Exemplo:
Para verificar se uma varivel NULL, utilize a funo is_null(), passando como parmetro a varivel. Exemplo:
Variveis
s variveis no PHP so representadas por um cifro ($) seguido pelo nome da varivel. Os nomes de varivel no PHP fazem distino entre maisculas e minsculas.
Os nomes de varivel seguem as mesmas regras como outros rtulos no PHP. Um nome de varivel vlido se inicia com uma letra ou sublinhado, seguido de qualquer nmero de letras, algarismos ou sublinhados. No vlido, portanto, variveis que iniciem com nmeros. Exemplo:
Constantes
ma constante um identificador (nome) para um nico valor. Como o nome sugere, esse valor no pode mudar durante a execuo do script. As constantes so sensveis ao caso por padro. Por conveno, os nomes de constantes so sempre em maisculas.
O nome de uma constante tem as mesmas regras de qualquer identificador no PHP. Um nome de constante vlida comea com uma letra ou sublinhado, seguido por qualquer nmero de letras, nmeros ou sublinhados.Voc pode definir uma constante utilizando-se da funo define(). Quando uma constante definida, ela no pode ser mais modificada ou anulada. Estas so as diferenas entre constantes e variveis:

Constantes no podem ter um sinal de cifro ($) antes delas; Constantes s podem ser definidas utilizando a funo define(), e no por simples assimilao; Constantes podem ser definidas e acessadas de qualquer lugar sem que as regras de escopo de variveis seja aplicadas; Constantes no podem ser redefinidas ou eliminadas depois que elas so criadas; Constantes s podem conter valores escalares.
Os tipos de dados aceitos numa constante so: Booleano, Inteiro, Float e String.Exemplo de definio de constante:
Operadores
m operador algo que voc alimenta com um ou mais valores (ou expresses, no jargo de programao) e que devolve outro valor (e por isso os prprios construtores se tormam expresses). Assim, voc pode pensar que as funes e os construtores que retornam valores (como o print) so operadores e os outros que no retornam nada (como echo) como uma outra coisa. H trs tipos de operadores. Primeiramente, os operadores unrios, que operam em apenas um valor. Por exemplo, ! (operador de negao) ou o ++ (operador de incremento). No segundo grupo esto os operadores binrios, o o grupo que contm a maioria dos operadores que o PHP suporta, com uma lista completa logo abaixo. O terceiro grupo do operador ternrio: ?:. Ele pode ser usado para selecionar entre dois valores dependendo de uma terceira, em vez de selecionar duas sentenas ou encadeamentos de execuo. Englobar expresses ternrias com parnteses uma boa idia.
Operadores de atribuio
O operador bsico de atribuio "=". A sua primeira vista deve ser a de definir isto como " igual". No. Isto quer dizer, na verdade, que o operando da esquerda recebe o valor da expresso da direita, ou seja, " configurado para". O valor de uma expresso de atribuio o valor atribudo. Ou seja, o valor de "$a = 3" 3. Isto permite que voc faa alguns truques. No exemplo abaixo, $a igual a 9 agora e $b foi configurado como 4:
H ainda o que chamamos de operadores combinados. Significa combinar operadores aritmticos e de concatenao com o operador de atribuio. Exemplo: vamos verificar como concatenar duas strings, fazendo uso dos operadores combinados.
Acima o operador .= significa concatenar com o valor anterior da varivel, o novo valor passado.
Vejamos outro exemplo, com operador aritmtico: O operador += soma varivel, o valor passado. Neste caso foi somado o valor 3 ao valor 5. Da mesma forma voc pode usar -= para subtrao, *= para multiplicao, etc.
Operadores aritmticos
Lembra-se da aritmtica bsica da escola? Estes operadores funcionam exatamente como aqueles.
Exemplo $a + $b $a - $b $a * $b $a / $b $a % $b Nome Adio Subtrao Multiplicao Diviso Mdulo Resultado Soma de $a e $b. Diferena entre $a e $b. Produto de $a e $b. Quociente de $a por $b. Resto de $a dividido por $b.
O operador de diviso ("/") sempre retorna um valor com ponto flutuante (fracionrio), mesmo que os dois operandos sejam inteiros (ou strings convertidos para inteiros).
Operadores de comparao
Operadores de comparao, como os seus nomes implicam, permitem que voc compare dois valores. A tabela abaixo lista os operadores de comparao existentes no PHP:
Exemplo $a == $b $a === $b $a != $b $a <> $b $a !== $b $a < $b $a > $b $a <= $b $a >= $b Nome Igual Idntico Diferente Diferente No idntico Menor que Maior que Menor ou igual Maior ou igual Resultado
Verdadeiro (TRUE) se $a igual a $b. Verdadeiro (TRUE) se $a igual a $b, e eles so do mesmo tipo (somente para PHP4).
Verdadeiro se $a no igual a $b. Verdadeiro se $a no igual a $b. Verdadeiro de $a no igual a $b, ou eles no so do mesmo tipo (somente para o PHP4). Verdadeiro se $a estritamente menor que $b. Verdadeiro se $a estritamente maior que $b. Verdadeiro se $a menor ou igual a $b. Verdadeiro se $a maior ou igual a $b.
Outro operador condicional o operador "?:" (ou ternrio), que opera como no C e em muitas outras linguagens. Vejamos um exemplo do operador ?::
Explicando: o operador ?: funciona como um IF e ELSE, mas numa mesma linha, para operaes simples condicionais. Neste caso, se a varivel $a for verdadeira (TRUE) ento a varivel $b assume a string Verdadeiro, caso contrrio, a varivel $b assume a string Falso.Da mesma forma, poderamos fazer:
Operadores lgicos
Os operadores lgicos, assim como os de comparao, examina 2 variveis e retorna um resultado binrio Falso (FALSE) ou Verdadeiro (TRUE). A tabela abaixo lista os tipos de operadores lgicos:
Exemplo $a and $b $a or $b $a xor $b ! $a $a && $b $a || $b Nome E OU XOR NO E OU Resultado
Verdadeiro (TRUE) se tanto $a quanto $b so verdadeiros.

Verdadeiro se $a ou $b so verdadeiros. Verdadeiro se $a ou $b so verdadeiros, mas no ambos. Verdadeiro se $a no verdadeiro. Verdadeiro se tanto $a quanto $b so verdadeiros. Verdadeiro se $a ou $b so verdadeiros.
A razo para as duas variantes dos operandos "and" e "or que eles operam com precedncias diferentes.
Operadores de strings
H dois operadores de string. O primeiro o operador de concatenao ., que retorna a concatenao dos seus argumentos direito e esquerdo. O segundo o operador de atribuio de concatenao .= (previamente explicado em Operadores de atribuio), que acrescenta o argumento do lado direito no argumento do lado esquerdo. Exemplo:
Precedncia de Operadores
A precedncia de um operador especifica quem tem mais prioridade quando h duas delas juntas. Por exemplo, na expresso, 1 + 5 * 3, a resposta 16 e no 18 porque o operador de multiplicao ("*") tem prioridade de precedncia que o operador de adio ("+"). Parnteses podem ser utilizados para forar a precedncia, se necessrio. Assim, (1 + 5) * 3 avaliado como 18.
Expresses
xpresses so as peas de construo mais importantes do PHP. No PHP, quase tudo o que voc escreve so expresses. A maneira mais simples e ainda mais precisa de definir uma expresso "tudo o que tem um valor". As formas mais bsicas de expresses so constantes e variveis. Quando voc digita "$a = 5", voc est atribuindo '5' para $a. '5', obviamente, tem o valor 5 (neste caso, '5' uma constante inteira). Depois desta atribuio, voc pode esperar que o valor de $a seja 5. Assim se voc escrever $b = $a, voc pode esperar que $b se comporte da mesma forma que se voc escrevesse $b = 5. H mais uma expresso que podem parecer estranha se voc no a viu em outras linguagens, o operador condicional ternrio:
Explicando: se o valor da primeira sub-expresso verdadeiro (TRUE, no-zero), ento a segunda subexpresso avaliada, e este o resultado da expresso condicional. Caso contrrio, a terceira subexpresso avaliada e este o valor. Poderia ser escrita tambm assim:
Outro tipo comum de expresso, so as expresses de comparao. O PHP suporta:

Simbolo > >= == Maior que Maior ou igual Igual Significado
!= < <= === !==
diferente menor que menor ou igual igual e do mesmo tipo diferente ou no do mesmo tipo
Estas expresses so usadas mais freqentemente dentro de instrues condicionais, como em comandos if. Outro bom exemplo de orientao de expresso o pr e o ps-incremento e decremento. Se voc quer somar 1 varivel $a, pode fazer de 2 formas:
Da mesma forma voc pode usar para subtrao. A diferena entre pr e ps-incremento, de que no princremento o valor calculado antes e retornado depois. No ps-incremento, o valor retornado, e s depois calculado.Ainda em se tratando de expresses, outro caso importante o de combinar operadoratribuio. Voc j sabe que se voc quer incrementar $a de 1, voc s precisa escrever $a++ ou ++$a. Mas e se voc quiser somar mais que um a ele, por exemplo 3? Voc poderia escrever $a++ vrias vezes, mas esta obviamente no uma forma muito eficiente ou confortvel. Uma prtica muito mais comum escrever $a = $a + 3. $a + 3 avaliada como o valor de $a mais 3, e atribudo de volta a $a, que resulta em incrementar $a de 3. Em PHP, como em vrias outras linguagens como o C, voc pode escrever isto de uma forma mais curta, que com o tempo se torna mais limpa e rpida de se entender tambm. Somar 3 ao valor corrente de $a pode ser escrito $a +=3. Qualquer operador de dois parmetros pode ser usado neste modo operador-atribuio, por exemplo $a -= 5 (subtrai 5 do valor de $a), $ b *= 7 (multiplica o valor de $b por 7), etc.O exemplo a seguir mostra os tipos de expresses explicados nesta parte:
Trabalhando com Arrays
vimos no captulo sobre Tipos, que um Array, ou Vetor, um mapa ordenado que relaciona valores por chaves. Neste captulo vamos aprofundar um pouco mais os estudos neste tipo de dados, que largamente utilizados em muitas operaes no PHP.
O que um array?
Uma varivel escalar uma localizao identificada com um nome em que armazenado um valor; de maneira semelhante, um array um lugar identificado com um nome para armazenar um conjunto de valores, permitindo que voc agrupe valores escalares. Uma lista de frutas ser o array para nosso exemplo. Na figura abaixo, voc pode ver uma lista de trs frutas armazenadas em um formato de array e uma varivel, chamada $cesta, que armazena os trs valores. (Veremos como criar uma varivel como essa em um minuto).
Os valores armazenados em um array so chamados elementos do array. Cada elemento do array tem um ndice associado (tambm denominado chave) que utilizado para acessar o elemento. Os arrays, na maioria das linguagens de programao, tm ndices numricos que geralmente iniciam em zero ou um. O PHP permite o uso de nmeros e strings como ndices de array. possvel usar arrays da maneira tradicional indexada numericamente ou agrupar as chaves para que a indexao seja mais significativa e til. (Essa abordagem deve ser familiar caso voc j tenha usado arrays associativos ou mapas em outras
linguagens de programao.) A abordagem de programao pode variar um pouco dependendo se voc est usando array indexados numericamente de forma padro ou valores de ndice mais interessantes. Iniciaremos examinando arrays numericamente indexados e depois veremos as chaves definidas pelo usurio.
Arrays numericamente indexados

Esses arrays so suportados na maioria das linguagens de programao. Em PHP, os ndices iniciam no zero por padro, embora voc possa alterar isso. Inicializando arrays numericamente indexadosPara criar o array mostrado na figura logo acima, em nossa
cesta de frutas, utilize a seguinte linha de cdigo de PHP: Isso criar um array chamado $cesta contendo os trs valores dados Pra, Uva e Ma. Note que, como echo, array( ) na realidade uma construo da linguagem em vez de uma funo. Dependendo do contedo que voc precise no array, talvez no seja necessrio inicializ-lo manualmente como no exemplo anterior. Se tiver os dados de que precisa em outro array, voc simplesmente pode copiar um array para outro utilizando o operador =.
Acessando o contedo de array

Para acessar o contedo de uma varivel, utilize o nome dela. Se a varivel for um array, acesse o contedo utilizando o nome da varivel e uma chave ou ndice. A chave ou ndice indica quais valores armazenados acessamos. O ndice colocado entre colchetes depois do nome. Digite $cesta[0], $cesta[1], $cesta[2] para utilizar o contedo do array $cesta. Por padro, o elemento zero o primeiro elemento do array. Esse o mesmo esquema de numerao utilizado em C, C++, Java e em vrias outras linguagens, mas talvez voc precise de algum tempo para se acostumar com ele se no conhec-lo. Como com outras variveis, o contedo dos elementos do array alterado utilizando o operador =. A
prxima linha substituir o primeiro elemento no array Pra por Banana. A linha a seguir poderia ser utilizada para adicionar um novo elemento Banana ao final do array,
fornecendo um total de quatro elementos:
Para exibir o contedo, poderamos digitar: Observe que embora a anlise sinttica da string de PHP seja relativamente inteligente, voc pode confundi-la. Se voc estiver tendo problemas com arrays ou outras variveis que no so interpretadas
corretamente quando so inseridas dentro de uma string entre aspas duplas, pode coloc-las fora das aspas. A instruo echo anterior funcionar corretamente, mas, em muitos dos exemplos mais complexos, voc notar que as variveis est fora das strings entre aspas. Como com outras variveis de PHP, os arrays no precisam ser inicializados ou criados antecipadamente. Eles so criados de forma automtica na primeira vez em que voc os utiliza.
O cdigo a seguir criar o mesmo array $cesta criado anteriormente com a instruo array( ): Se $cesta no existir ainda, a primeira linha criar um novo array com apenas um elemento. As linhas subseqentes adicionam valores ao array. O array redimensionado dinamicamente medida que voc adiciona elementos a ele. Essa funcionalidade de redimensionamento no est presente na maioria das outras linguagens de programao.
Utilizando loops para acessar o array

Como o array est indexado por uma seqncia de nmeros, podemos utilizar um loop for mais facilmente para exibir o contedo:
Esse loop fornecer sada semelhante ao cdigo anterior, mas exigir menos digitao do que escrever o cdigo manualmente para trabalhar com cada elemento em um array grande. A capacidade de utilizar um loop simples para acessar cada elemento um excelente recurso de arrays. Tambm podemos usar o loop foreach, visto anteriormente, especialmente projetado para usar com os arrays, poderamos utiliz-lo como a seguir:
Por sua vez, esse cdigo armazena cada ndice do array em $chave e cada valor em $valor e os imprime.
Arrays Associativos
No array $cesta, permitimos que o PHP oferea um ndice padro a cada item. Isso significa que o primeiro item que adicionamos tornou-se o item 0, o segundo item, 1 e assim por diante. O PHP tambm suporta arrays em que podemos associar qualquer chave ou ndice que quisermos a cada valor. Inicializando um array O cdigo a seguir cria um array associativo com nome de frutas como chaves, e preos como valores.
O smbolo entre as chaves e os valores simplesmente um sinal de igual seguido imediatamente de um sinal de maior que.
Acessando os elementos do array Novamente, acessamos o contedo utilizando o nome da varivel e uma chave, ento podemos acessar as informaes que armazenamos no array de preos como $precos[ Pra ], $precos[ Uva ] e $precos[ Ma ]. O cdigo a seguir criar o mesmo array $precos. Em vez de criar um array com trs elementos, essa
verso cria um array com somente um elemento e ento acrescenta outros dois. Eis outra parte, ligeiramente diferente, mas equivalente de cdigo. Nesta verso, no criamos explicitamente um array. O array automaticamente criado quando adicionamos a ele o primeiro
elemento.
Arrays multidimensionais
Os arrays no tm de ser uma lista simples de chaves e valores cada localizao no array pode armazenar outro array. Dessa maneira, podemos criar um array bidimensional. Voc pode pensar em um array de duas dimenses como sendo uma matriz ou grade, com largura e altura ou linhas e colunas. Se quisssemos armazenar mais de uma parte de dados sobre cada item da cesta, poderamos utilizar um array bidimensional. A figura abaixo mostra os itens da cesta representados como um array bidimensional com cada linha representando um produto individual e cada coluna representando um atributo do produto armazenado.
Utilizando PHP, escreveramos o cdigo a seguir para configurar os dados no array mostrado na figura acima.
Voc pode ver a partir dessa definio que nosso array de produtos agora contm trs arrays. Para acessar os dados em um array dimensional, lembre-se de que precisamos do nome dos arrays e do ndice dos elementos. Um array bidimensional semelhante, exceto que cada elemento tem dois ndices uma linha e uma coluna. (A linha superior a linha 0 e a coluna na extremidade esquerda a coluna 0.) Para exibir o contedo desse array, poderamos acessar manualmente cada elemento no pedido deste modo:
Alternativamente, poderamos colocar um loop for dentro de outro para alcanar o mesmo resultado. As duas verses desse cdigo produzem a mesma sada no navegador:
Estruturas de Controle
A
IF
s estruturas que veremos a seguir so comuns para as linguagens de programao imperativas, bastando, portanto, descrever a sintaxe de cada uma delas, resumindo o funcionamento.
O IF usado como estrutura condicional. Indica que se uma expresso for verdade, ento faa tal ao.Sua sintaxe simples. Se a ao a ser executada for de uma nica linha, as chaves so opcionais, caso contrrio, se a ao tiver vrios comandos a serem executados, as chaves so obrigatrias. Veja um exemplo:
ELSE O ELSE usado para que uma ao seja executada caso a expresso analisada no IF seja falsa. Em outras palavras, se uma expresso for verdade, faa a ao do IF, seno faa a ao do ELSE. Veja um exemplo:
ELSEIF A estrutura ELSEIF faz com que o usurio possa definir vrias situaes para que uma ao ocorra. Suponha que voc quer executar uma ao para cada valor da uma varivel. Por exemplo: se $var for igual a x, execute tal ao, se for igual a y, outra ao, se for igual a z, outra ao, e assim por diante. Exemplo:
SWITCH A instruo switch similar a uma srie de instrues IFs seguidas. Os exemplos seguintes mostram duas maneiras diferentes de escrever a mesma coisa, uma utilizando uma srie de IFs e ELSEIFs e a outra utilizando a instruo switch:
importante entender como a instruo switch funciona para evitar enganos. A instruo switch executa linha a linha. No incio, nenhum cdigo executado. Somente quando uma instruo case encontrada com um valor que combina com a expresso do switch faz com que o PHP execute as instrues a partir da.O PHP continua executando as instrues at o fim do bloco switch ou na primeira vez que encontrar uma instruo break. Se voc no escrever uma instruo break no fim das instrues case, o PHP continuar executando os cases seguintes. Um case especial o default. Esse case executado quando nenhum outro case combina. Ele precisa ser a ltima instruo case. Por exemplo:
BREAK BREAK cancela a execuo do comando for, foreach while, do..while ou switch atual.Break aceita um argumento numrico opcional que diz a ele quantas estruturas aninhadas englobadas devem ser quebradas.
CONTINUE CONTINUE usado dentro de estruturas de loops para saltar o resto da iterao do loop atual e continuar a execuo no incio da prxima iterao.Continue aceita um argumento numrico opcional que diz a ele de quantos nveis de loops aninhados ele deve saltar at o fim.
Ilustrao : ex_continue.php
FOR A estrutura de lao (loop) FOR, realiza repetidas aes a depender das expresses passadas como parmetro. No total so 3 expresses:
A primeira expresso (expr1) avaliada (executada) uma vez no comeo do loop. No comeo de cada iterao, expr2 avaliada. Se ela avaliada como TRUE, o loop continua e o(s) comando(s) aninhado(s) (so) executado(s). Se avaliada como FALSE, a execuo do 'loop' termina. No fim de cada iterao, expr3 avaliada (executada). Veja um exemplo que imprime nmeros de 1 a 10 na tela:
Explicando: a varivel $i iniciada com valor 1, em seguida feita a verificao ($i <= 10) se for verdade entra no loop, caso contrrio termina, e em cada iterao a varivel $i incrementada em 1 ($i++).
FOREACH O construtor foreach permite interagir com arrays de forma mais simples, em fora de lao, percorrendo todo o vetor. til caso voc queira, por exemplo, usar os valores de todo o vetor para realizar alguma operao, ou imprimir na tela. Tem-se 2 tipos de sintaxe. A primeira no leva em considerao a chave do array, e a segunda utiliza as chaves.
Sintaxe: Vejamos um exemplo:
WHILE While outra estrutura de lao (loop) mais simples. Enquanto a expresso (passada como parmetro) for verdade, ser executada aes dentro do bloco de chaves.
Vejamos o mesmo exemplo de impresso de nmeros de 1 a 10, mas agora utilizando a estrutura While:
Observe que o incremento feito manualmente dentro do lao. Se voc esquecer de incrementar, neste exemplo, o script ficar em loop infinito e ser abortado pelo PHP.
DO...WHILE O lao do...while funciona de maneira bastante semelhante ao while, com a simples diferena que a expresso testada ao final do bloco de comandos.Isso significa que a ao feita no mnimo 1 vez. O lao do...while possui apenas uma sintaxe, que a seguinte:
Funes
ma funo um pedao de codigo com um objetivo especifico,encapsulado sob uma estrutura unica que recebe um conjunto de parmetros e retorna um dado.Uma funo declarada uma unica vez ,mas pode ser utilizada diversas vezes. uma das estruturas mais bsicas para prover reusabilidade.
Criao
Para declarar uma funo em PHP,utiliza-se o operador function seguido do nome que desejamos lhe atribuir ,sem espaos em branco e iniciando obrigatoriamente com uma letra. Na mesma linha ,digitamos a lista de argumentos (parmetros) que a funo ir receber,separados por virgula. Em seguida ,encapsulado por chaves {}, vem o cdigo da funo. No final ,utiliza-se a clausula return para retornar o resultado da funo (integer,strig,array,objeto etc).
No exemplo a seguir criamos uma funo que calcula o ndice de obesidade de alguem. A funo recebe dois parmetros ($peso e $altura) e retorna um valor definido por uma formula.
Resultado: 20.45288531775
Retornando Valores de uma Funo

possvel a uma funo retornar um valor,o qual pode ser de qualquer tipo aceito pelo PHP (inteiro,ponto flutuante,booleano,string,array,etc.). Para isso devemos utilizar a instruo return seguida do valor que desejamos retornar 9ou expresso).
O resultado desse script : O cubo de 7 343
Valores so retornados pelo uso de comandos opcionais de retorno. Qualquer tipo pode ser retornado, incluindo listas e objetos.
Ilustrao : func_return_val.php
Criando bloco de cdigos reutilizveis

estiver projetando seu site da Web, voc apontar alguns elementos encontrados em muitas Quando pginas em todo o site. Tais elementos podem ser barras de navegao ou uma linha de base com o endereo de e-mail do seu webmaster. Outros elementos podem ser fragmentos de cdigos para exibir o dia, dados computados financeiros padro e muitos outros cdigos padronizados de HTML ou PHP, como por exemplo, constantes.
require( )
A instruo require( ) e include( ) so idnticos em todas as formas exceto pela manipulao de erros.O include( ) produz Warning enquanto require( ) produzir um Fatal Error. Em outras palavras, no hesite em utilizar require( ) se na falta de um arquivo quiser parar o processamento da pgina.O include( ) no se comporta da mesma maneira, e o script poder continuar nessa situao. Veja os exemplos abaixo de sua utilizao:
Nota: At o PHP 4.0.2, havia o seguinte comportamento: require( ) ocorre mesmo que a linha onde ele est nunca seja executada. por isso que instrues condicionais no afetam require( ). Entretanto, se a linha onde ocorre o require( ) no for executada, nada do cdigo includo do arquivo tambm ser. Similarmente, estruturas de loop no afetam o funcionamento do require( ). Mas o cdigo includo pela funo ser submetido ao loop. A instruo require( ) apenas ocorre uma vez.
include( )
A instruo include( ) inclui e avalia o arquivo informado. Sua semelhana com o require dispensa maiores explicaes.Qualquer varivel disponvel da linha onde a chamada da incluso ocorre estar disponvel para o arquivo includo, daquele ponto em diante. Veja os exemplos de include( ):
Ilustrao : includ.php
Ilustrao : ex_include.php Se o include ocorre dentro de uma funo do arquivo principal, ento todo o cdigo includo ser executado como se ele tivesse sido definido dentro daquela funo. Da mesma forma, ele seguir o escopo de variveis da funo.
Ilustrao : ex_include_2.php Quando um arquivo includo, o interpretador sai do modo PHP e entra no modo HTML (no comeo do arquivo includo), e alterna novamente no seu fim. Por isso,qualquer cdigo dentro do arquivo includo que precisa ser executado como cdigo PHP tem de ser delimitado por tags lidas de abertura e fechamento.Se "URL fopen wrappers" esto ativas no PHP (normalmente na configurao padro), voc pode especificar um arquivo utilizando uma URL (via HTTP) em vez de um caminho local. Se o servidor apontado interpreta o arquivo informado como cdigo PHP, variveis podem ser passadas ao arquivo includo na URL de requisio como num HTTP GET. Isto no necessariamente a mesma coisa que incluir o arquivo e compartilhar o escopo de varivel do arquivo principal: o script ser executado no servidor remoto e apenas seu resultado ser includo no script local.
Por serem include( ) e require( ) dois construtores de linguagem especiais, voc precisa delimit-los como um bloco de instrues quando utilizados dentro de instrues condicionais.
Tambm possvel executar uma instruo return( ) dentro de um arquivo includo de maneira a finalizar o processamento daquele arquivo e retornar para o script que o chamou. Tambm possvel retornar valores de arquivos includos. Voc pode pegar o valor de retorno de um include como faria com uma funo normal. O return( ) se aplica apenas para a funo e no para todo o arquivo.
Ilustrao : ex_return_inc.php
Ilustrao : ex_return_inc_2.php
Ilustrao : ex_return_inc_3.php $teste2 assimila o valor 1 porque a incluso foi realizada com sucesso. Verifique a diferena entre os exemplos. O primeiro utiliza return( ) dentro do arquivo includo enquanto que o outro no. H outras maneiras de "incluir" arquivos dentro de variveis, com fopen( ), file( ) ou utilizando include( ).
Funes de Data
ma das tarefas mais comum, em se tratando de PHP, o uso de funes para trabalhar com Datas. Aqui veremos as mais comuns.
Date
A funo date() utilizada para formatar data e hora locais (do servidor onde o PHP est rodando). Tabela com os caracteres utilizados junto com a funo.
Caractere de formato
A A d D F
Descrio
Retorna Ante meridiem e Post meridiem em minsculo Retorna Ante meridiem e Post meridiem em mausculo Dia do ms, 2 digitos com leading zeros Uma representao textual de um dia, trs letras Uma representao textual de um ms, tal como janeiro ou Maro g 12-hour formato de hora sem zeros G 24-hour formato de hora sem zeros h 12-hour formato de hora com zeros H 24-hour formato de hora com zeros i Minutos com zeros I (i maisculo)Se a data est ou no em horrio de vero
j l ('L'
Exemplo de valores retornados am or pm AM ou PM 01 to 31 Mon through Sun Janeiro a Dezembro

1 a 12 0 a 23 01 a 12 00 a 23 00 para 59 1 Horrio de Vero, 0
Dia do ms sem leading zeros Uma representao completa textual de um dia da semana Se ano bissexto
sem Horrio de Vero. 1 to 31 Domingo a Sbado

1 ano bissexto, 0 ano no bissexto.
minsculo)
L
m M n O r
Representao numrica de um ms, com leading zeros Uma representao textual curta de um ms, trs letras Representao numrica de um ms, sem leading zeros Diferena ao horrio de Greenwich (GMT) em horas RFC 2822 formatted date Segundos, com leading zeros Sufixo ordinal ingls para o dia do ms, 2 caracteres Nmero de dias do dado ms Timezone setting of this machine Seconds since the Unix Epoch (January 1 1970 00:00:00 GMT) Representao numrica do dia da semana
s S t T U w W
01 a 12 Jan a Dec 1 a 12 Exemplo: +0200 Exemplo: Thu, 21 Dec 2000 16:01:07 +0200 00 a 59 st, nd, rd ou th. Funciona bem com j 28 a 31 Examples: EST, MDT ...
See also time()

0 (para Domingo) a 6
Y y z Z
(para Sbado) Nmero da semana do ano ISO-8601, semanas comeadas na Exemplo: 42 (a 42nd segunda-feira (adicionado no PHP 4.1.0) (quadragsima segunda) semana do ano) Uma representao completa do ano, 4 dgitos Examples: 1999 ou
2003
Representao do ano em dois dgitos Examples: 99 ou 03 O dia do ano (comeando de 0) 0 a 365 Timezone offset in seconds. The offset for timezones west of -43200 at 43200 UTC is always negative, and for those east of UTC is always positive.
Vejamos sua utilizao:
Getdate A funo getdate() retorna a data e hora local, em formato de Array. Abaixo, a tabela com as respectivas chaves retornadas no array:
Chave "seconds" "minutes" "hours" "mday" "wday" "mon" "year" "yday" "weekday" Descrio Representao numrica dos segundos Representao numrica dos minutos Representao numrica das horas Representao numrica do dia do ms Representao numrica do dia da semana Representao numrica de um ms Representao numrica completa do ano, 4 digitos Numeric representation of the day of the year Representao textual completa do dia da semana Exemplo dos valores retornados
0 a 59 0 a 59 0 a 23 1 a 31 0 (para Sunday) a 6 (para Saturday) 1 a 12 Exemples: 1999 ou 2003 0 a 366 Sunday a Saturday
"month" 0
Representao textual completa de um ms, January a December tal como January ou March
Segundos desde a poca UNIX, similar System Dependent, tipicamente de 2147483648 a 2147483647. aos valores retornados por time() e usados por date().
Vejamos sua utilizao:
Time
A funo time() retorna o timestamp Unix atual.Um timestamp a hora atual medida no nmero de segundos desde a Era Unix (01/01/1970).
Exemplo:
Mktime
A funo mktime() utilizada para se retornar um timestamp Unix (formato utilizado para datas no PHP) a partir de uma data qualquer maior que 01/01/1970.
Sua sintaxe simples: Depois de obtido o timestamp, voc pode utiliz-lo com as funes previamente citadas, a exemplo da funo date. Veja um exemplo:
Formulrios
s formulrios so recursos oferecidos desde o HTML que, dentre outras funcionalidades, tem o intuito de interagir com o usurio. Seja em forma de enquetes, contato, pesquisas, etc.
Mtodos GET e POST Para se trabalhar com formulrios existem 2 tipos de mtodos utilizados para o trfego dos dados: GET e POST. O primeiro deles, o mtodo GET, trafega os dados de forma visvel ao usurio, na barra de endereos do navegador (browser). til para fazer marcao de URLs, como exemplo de sites de busca, onde o usurio deseja salvar a pgina para consulta posterior. O mtodo POST, trafega os dados de forma oculta, onde somente o navegador (browser) e o servidor de onde foi postado os dados, tem acesso leitura destes. utilizado para trfego de dados de pesquisas por exemplo, onde o usurio no usar novamente a pgina para favoritar, etc. Esses mtodos so definidos na tag <form> do HTML:
No lado do PHP, os dados so tratados utilizando-se de variveis globais. Para o mtodo GET usado a varivel $_GET, e no mtodo POST, a varivel $_POST. Existe ainda a varivel $_REQUEST, que associa automaticamente o mtodo recebido (GET ou POST). Todas estas variveis so tratadas como arrays, onde a chave o nome do campo do formulrio. Assim se voc tem um campo chamado nome, no PHP pode ser apontado como $_REQUEST[nome] . A diferena entre GET e POST est basicamente na capacidade do envio de dados, uma vez que GET limitado cerca de 2KB de dados e POST no possui limite. Outra diferena est na forma de envio. GET envia os dados anexados ao nome do script informado (utiliza-se para isso o smbolo ? aps o nome do script, seguido da relao de campos e seus respectivos valores separados por &). J no mtodo POST os dados so enviados no corpo da mensagem que ser enviada no servidor.
Formulrios na prtica
Nesta seo veremos na prtica um exemplo de um formulrio completo, com uso dos tipos texto, senha, radio, etc. Uma observao importante: se voc tem vrios campos com o mesmo nome e de mltipla escolha no formulrio (como o caso dos checkboxs), esses campos sero tratados como array do array global. O exemplo a seguir figurativo (uma pesquisa de gostos por livros), e ser usado como base para voc
aprender a manusear dados de um formulrio. Exemplo de um formulrio HTML:
Exemplo do arquivo envia.php, que ser submetido pelo formulrio:
Perceba que j fizemos uso do construtor foreach acima, pois o campo estilo[ ] do formulrio mltiplaescolha, logo, ele considerado um array no PHP. Repare ainda que o campo possui os colchetes []. Isso precisa ser determinado para que o PHP entenda como um Array.
Acessando o MySQL via PHP

Para acessar bases de dados num servidor MySQL, necessrio antes estabelecer uma conexo. Para isso, deve ser utilizado o comando mysql_connect, ou o mysql_pconnect. A diferena entre os dois comandos que o mysql_pconnect estabelece uma conexo permanente, ou seja, que no encerrada ao final da execuo do script. As assinaturas dos dois comandos so semelhantes, como pode ser verificado a seguir: int mysql_connect(string [host[:porta]] , string [login] , string [senha] ); int mysql_pconnect(string [host[:porta]] , string [login] , string [senha] );
O valor de retorno um inteiro que identifica a conexo, ou falso se a conexo falhar. Antes de tentar estabelecer uma conexo, o interpretador PHP verifica se j existe uma conexo estabelecida com o mesmo host, o mesmo login e a mesma senha. Se existir, o identificador desta conexo retornado. Seno, uma nova conexo criada. Uma conexo estabelecida com o comando mysql_connect encerrada ao final da execuo do script. Para encerr-la antes disso deve ser utilizado o comando mysql_close, que tem a seguinte assinatura: int mysql_close(int [identificador da conexo] );
Se o identificador no for fornecido, a ltima conexo estabelecida ser encerrada. IMPORTANTE: o comando mysql_close no encerra conexes estabelecidas com o comando mysql_pconnect. Selecionando a base de dados Depois de estabelecida a conexo, preciso selecionar a base de dados a ser utilizada, atravs do
comando mysql_select_db, que segue o seguinte modelo: int mysql_select_db(string base, int [conexao] ); Novamente, se o identificador da conexo no for fornecido, a ltima conexo estabelecida ser utilizada. Realizando consultas Para executar consultas SQL no MySQL, utiliza-se o comando mysql_query, que tem a seguinte assinatura: int mysql_query(string query, int [conexao] ); Onde query a expresso SQL a ser executada, sem o ponto-e-vrgula no final, e conexao o identificador da conexo a ser utilizada. A consulta ser executada na base de dados selecionada pelo comando mysql_select_db. bom lembrar que uma consulta no significa apenas um comando SELECT. A consulta pode conter qualquer comando SQL aceito pelo banco. O valor de retorno falso se a expresso SQL for incorreta, e diferente de zero se for correta. No caso de uma expresso SELECT, as linhas retornadas so armazenadas numa memria de resultados, e o valor de retorno o identificador do resultado. Alguns comandos podem ser realizados com esse resultado: Apagando o resultado int mysql_free_result(int result);
O comando mysql_free-result deve ser utilizado para apagar da memria o resultado indicado. Nmero de linhas int mysql_num_rows(int result);
O comando mysql_num_rows retorna o nmero de linhas contidas num resultado. Utilizando os resultados Existem diversas maneiras de ler os resultados de uma query SELECT. As mais comuns sero vistas a seguir: int mysql_result(int result, int linha, mixed [campo] );
Retorna o contedo de uma clula da tabela de resultados.

result o identificador do resultado; linha o nmero da linha, iniciado por 0; campo uma string com o nome do campo, ou um nmero correspondente ao nmero da coluna. Se foi utilizado um alias na consulta, este deve ser utilizado no comando mysql_result.
Este comando deve ser utilizado apenas para resultados pequenos. Quando o volume de dados for maior, recomendado utilizar um dos mtodos a seguir: array mysql_fetch_array(int result);
L uma linha do resultado e devolve um array, cujos ndices so os nomes dos campos. A execuo seguinte do mesmo comando ler a prxima linha, at chegar ao final do resultado. array mysql_fetch_row(int result);
Semelhante ao comando anterior, com a diferena que os ndices do array so numricos, iniciando pelo 0 (zero). Alterando o ponteiro de um resultado int mysql_data_seek(int result, int numero);
Cada resultado possui um ponteiro, que indica qual ser a prxima linha lida com o comando mysql_fetch_row (ou mysql_fetch_array). Para alterar a posio indicada por esse ponteiro deve ser utilizada a funo mysql_data_seek, sendo que o nmero da primeira linha de um resultado zero.
Sesses e Cookies
este captulo vamos estudas duas das funcionalidades mais utilizadas no PHP. Ambas so utilizadas para armazenar dados por um perodo e diferem no sentido de que as Sesses expiram quando o usurio fecha o browser, e os Cookies podem perdurar um tempo definido pelo programador.
Uma das utilizaes destas funcionalidades so por exemplo, os carrinho de compras, que armazenam as compras feitas pelo usurio. Outro exemplo o de criar funo de login, rea restrita de acesso, etc. Vamos estudar cada uma separadamente.
Sesses
As sesses so forma simples de armazenar dados temporrios. Os dados so apagados assim que o usurio fechar o browser. Mas, importante que voc saiba, que voc pode excluir sesses quando quiser. Imagine o seguinte problema: voc tem um site, e quer que em algumas sees, apenas usurios que saibam uma determinada senha consigam acessar. Voc pode utilizar sesses neste caso. Vamos ver como? O ponto de partida para o uso de sesses, com sua inicializao, fazendo uso da funo session_start(). Vale lembrar, que at us-la, no se pode imprimir nada na tela (seja via echo, print, avisos ou erros de algum trecho de cdigo). Por estes motivos, recomenda-se que voc insira a funo logo na primeira linha do seu script. Sempre que for utilizar sesses, voc vai precisar inicializar esta funo. Exemplo:
Dentro da seo, fazemos uso da varivel global $_SESSION para definir variveis e valores.Agora voltemos ao problema inicial. Precisamos restringir acesso a algumas sees. Vamos fazer isso, utilizando uma varivel de sesso para saber se o usurio passou pela tela de login e informou a senha corretamente. Nas sees onde a rea ser restrita, fazemos a verificao se o usurio logou.
Veja o exemplo da pagina_secreta.php: Entendendo o cdigo: primeiro inicializamos a sesso com a funo session_start(). Em seguida fazemos a verificao: se no existir (uso da !) a varivel de sesso logado ou se ela for igual a falso (booleano), redirecionamos para a pgina de login (funo header) e finalizamos o script (funo die). Caso contrrio, o script prossegue, e a sesso mostrada normalmente. Vamos entender agora a pgina de login. Primeiro vamos criar o formulrio do login.htm:
Agora vejamos o arquivo login.php:
Entendendo o cdigo: primeiro feita a inicializao da sesso (funo session_start). Em seguida feita a comparao, se a senha digitada igual a secreta (pode ser alterada), em caso verdadeiro definida a varivel de sesso logado como verdadeiro e redireciona o usurio para a pgina secreta. Caso contrrio, imprime na tela senha incorreta.
Cookies
Cookies, na livre traduo, so biscoitos. Cookies so mecanismos para armazenar e consultar informaes nos browsers dos visitantes da pgina. O PHP atribui cookies utilizando a funo setcookie, que deve ser utilizada antes de qualquer impresso na pgina (mesmo esquema das sesses). O uso de cookies no recomendado quando se trata de informaes sigilosas. Os dados dos cookies so armazenados no diretrio de arquivos temporrios do visitante, sendo facilmente visualizado por pessoas mal intencionadas. A diferena entre sesses e cookies, que os cookies podem ser acessados mesmo depois de o usurio ter fechado seu browser. Outra questo importante, que a opo aceitar cookies (do navegador browser) que pode ser desativada a qualquer momento pelo visitante. Para uma transmisso de dados segura recomendvel o uso de sesses. Sintaxe bsica: setcookie(nome_do_cookie,seu_valor,tempo_de_vida,path,domnio,conexo_segura )
Nome_do_cookie = o nome que, posteriormente, se tornar a varivel e o que o servir de referncia para indicar o cookie. Seu_valor = o valor que a varivel possuir. Esse valor pode ser de todos os tipos. Tempo_de_vida = o tempo, em segundos, que o cookie existir no computador do visitante. Uma vez excedido esse prazo o cookie se apaga de modo irrecupervel. Se esse argumento ficar vazio, o cookie se apagar quando o visitante fechar o browser.
Path = endereo da pgina que gerou o cookie automtico Domnio = domnio ao qual pertence o cookie automtico Conexo_segura = Indica se o cookie dever ser transmitido somente em uma conexo segura HTTPS.
Depois de definida um cookie, voc pode acess-lo atravs da varivel global $_COOKIE[nome_do_cookie].
Fontes Bibliogrficas
http://www.icmc.usp.br/ensino/material/html/ http://maujor.com/tutorial/insetut.php
Hino Nacional
Ouviram do Ipiranga as margens plcidas De um povo herico o brado retumbante, E o sol da liberdade, em raios flgidos, Brilhou no cu da ptria nesse instante. Se o penhor dessa igualdade Conseguimos conquistar com brao forte, Em teu seio, liberdade, Desafia o nosso peito a prpria morte! Ptria amada, Idolatrada, Salve! Salve! Brasil, um sonho intenso, um raio vvido De amor e de esperana terra desce, Se em teu formoso cu, risonho e lmpido, A imagem do Cruzeiro resplandece. Gigante pela prpria natureza, s belo, s forte, impvido colosso, E o teu futuro espelha essa grandeza. Terra adorada, Entre outras mil, s tu, Brasil, Ptria amada! Dos filhos deste solo s me gentil, Ptria amada,Brasil! Deitado eternamente em bero esplndido, Ao som do mar e luz do cu profundo, Fulguras, Brasil, floro da Amrica, Iluminado ao sol do Novo Mundo! Do que a terra, mais garrida, Teus risonhos, lindos campos tm mais flores; "Nossos bosques tm mais vida", "Nossa vida" no teu seio "mais amores." Ptria amada, Idolatrada, Salve! Salve! Brasil, de amor eterno seja smbolo O lbaro que ostentas estrelado, E diga o verde-louro dessa flmula - "Paz no futuro e glria no passado." Mas, se ergues da justia a clava forte, Vers que um filho teu no foge luta, Nem teme, quem te adora, a prpria morte. Terra adorada, Entre outras mil, s tu, Brasil, Ptria amada! Dos filhos deste solo s me gentil, Ptria amada, Brasil!
Hino do Estado do Cear

Poesia de Thomaz Lopes Msica de Alberto Nepomuceno Terra do sol, do amor, terra da luz! Soa o clarim que tua glria conta! Terra, o teu nome a fama aos cus remonta Em claro que seduz! Nome que brilha esplndido luzeiro Nos fulvos braos de ouro do cruzeiro! Mudem-se em flor as pedras dos caminhos! Chuvas de prata rolem das estrelas... E despertando, deslumbrada, ao v-las Ressoa a voz dos ninhos... H de florar nas rosas e nos cravos Rubros o sangue ardente dos escravos. Seja teu verbo a voz do corao, Verbo de paz e amor do Sul ao Norte! Ruja teu peito em luta contra a morte, Acordando a amplido. Peito que deu alvio a quem sofria E foi o sol iluminando o dia! Tua jangada afoita enfune o pano! Vento feliz conduza a vela ousada! Que importa que no seu barco seja um nada Na vastido do oceano, Se proa vo heris e marinheiros E vo no peito coraes guerreiros? Se, ns te amamos, em aventuras e mgoas! Porque esse cho que embebe a gua dos rios H de florar em meses, nos estios E bosques, pelas guas! Selvas e rios, serras e florestas Brotem no solo em rumorosas festas! Abra-se ao vento o teu pendo natal Sobre as revoltas guas dos teus mares! E desfraldado diga aos cus e aos mares A vitria imortal! Que foi de sangue, em guerras leais e francas, E foi na paz da cor das hstias brancas!

Informatica Programacao Web HTML Css PHP PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Informatica Programacao Web HTML Css PHP PDF

Enviado por

Direitos autorais:

Formatos disponíveis

Escola Estadual de Educao Profissional - EEEP

Ensino Mdio Integrado Educao Profissional

Curso Tcnico em Informtica

Programao Web HTML - CSS - PHP

Governador Cid Ferreira Gomes Vice Governador Francisco Jos Pinheiro

Secretrio Executivo Antnio Idilvan de Lima Alencar

Escola Estadual de Educao Profissional [EEEP]

Ensino Mdio Integrado Educao Profissional

O que World-Wide Web

significa HyperText Transfer Protocol - Protocolo de Transferncia de Hipertexto.

significa Uniform Resource Locator - Localizador Uniforme de Recursos.

significa HyperText Markup Language - Linguagem de Marcao de Hipertexto.

Introduo Linguagem HTML

Portanto, HTML definido segundo um DTD de SGML.

Todos os elementos podem ter atributos:

Documento bsico e seus componentes

Este documento, por exemplo, tem as seguintes informaes:

cor dos textos da pgina (padro: preto)

cor dos links (padro: azul)

cor dos links, quando acionados (padro: vermelho)

Esses cabealhos so mostrados da seguinte forma:

Este um cabealho de nvel 1

Os cabealhos no podem ser aninhados, isto , a formatao:

<H2>Este <H1>um cabealho de nvel 1</H1> dentro de um cabealho de nvel 2</H2>

pode produzir algum resultado prximo ao desejado:

Este um cabealho de nvel 1

Este um cabealho de nvel 1

Os editores WYSIWYG naturalmente no permitem o aninhamento de cabealhos.

Os cabealhos tm atributos de alinhamento:

<H2 ALIGN=CENTER>Cabealho centralizado</H2>

Cabealho alinhado direita

que produz: Pargrafo1;

Pargrafo2. Combinando pargrafos e quebras de linha, temos:

O resultado da marcao acima : Pargrafo 1; linha 1 do pargrafo 1, linha 2 do pargrafo 1.

Pargrafo 2; linha 1 do pargrafo 2, linha 2 do pargrafo 2.

Assim como os (Giovani Guareschi)

Documentos bsicos Documentos avanados

Detalhes sobre imagens

um item mais um item

Cada item tambm pode ter seu atributo especfico:

mais um item ltimo item

Detalhes sobre imagens

D. um item E. outro item F. mais um item

item de uma lista

usado para citaes longas:

(Stephen W. Hawking, Uma Breve Histria do Tempo)

Usado para formatar endereos E-mail e referncias a autores de documentos:

Para indicar trechos de cdigo de programas. Exemplo:

Itlico (em alguns casos, caracteres inclinados)

Tipo teletype - fonte de espaamento fixo.

Fonte um pouco maior.

Frase em estilo ndice, como em H2O.

&lt; &gt; &amp;

< > &

Qu pasa, seor? Cores e fontes

<FONT SIZE=+2>Letra maior</FONT> Letra normal <FONT SIZE=-2>Letra menor</FONT>

Letra maior Letra normal Letra menor

<FONT FACE="Verdana" COLOR="#0000AA">Fonte Verdana azul</FONT> Fonte Verdana azul

<FONT FACE="Arial" COLOR="#00AA00">Fonte Arial verde</FONT> Fonte Arial verde

Marquee possvel obter o efeito de animao de texto, atravs da formatao <MARQUEE>.

o URL do documento de destino;

faz com que Se escrevermos:

<A HREF="#inicio">Topo do documento</A>.

< > &