52464384 Informatica Programacao Web HTML Css Php

Escola Estadual deEducao Profissional - EEEPEnsino Mdio Integrado Educao Profissional

Curso Tcnico em Informtica

Programao WebHTML - CSS - PHP

Governador

Vice Governador

Secretrio Executivo

Assessora Institucional do Gabinete da Seduc

Cid Ferreira Gomes

Francisco Jos Pinheiro

Antnio Idilvan de Lima Alencar

Cristiane Carvalho Holanda

Secretria da Educao

Secretrio Adjunto

Coordenadora de Desenvolvimento da Escola

Coordenadora da Educao Profissional SEDUC

Maria Izolda Cela de Arruda Coelho

Maurcio Holanda Maia

Maria da Conceio vila de Misquita Vins

Thereza Maria de Castro Paes Barreto

Escola Estadual de Educao Profissional [EEEP] Ensino Mdio Integrado Educao Profissional

Informtica - Programao WEB (HTML-CSS-PHP) 1

ndiceO que Internet .......................................................................................................................... 6O que World-Wide Web........................................................................................................... 7

HTTP ............................................................................................................................................... 8URL ................................................................................................................................................. 8HTML .............................................................................................................................................. 8

Introduo Linguagem HTML ................................................................................................ 8Publicao de documentos ......................................................................................................... 9Documento bsico e seus componentes ................................................................................... 10

A seo .......................................................................................................................... 12Atributos de ....................................................................................................................... 12

Cabealhos ..................................................................................................................................... 12Cabealho centralizado .................................................................................................................. 14

Cabealho alinhado direita .............................................................................................................. 14Separadores.................................................................................................................................... 14

Quebra de linha .................................................................................................................................. 14Pargrafos .......................................................................................................................................... 14Linha Horizontal ................................................................................................................................ 15

Listas em HTML ........................................................................................................................... 15Listas de Definio ............................................................................................................................ 15Listas no-numeradas ........................................................................................................................ 16Listas e sub-listas ........................................................................................................................... 19

Blocos de texto .............................................................................................................................. 20 ............................................................................................................................................... 20 ............................................................................................................................ 20 ..................................................................................................................................... 20

Formatao de frases ..................................................................................................................... 20Estilos Lgicos ................................................................................................................................... 21Estilos Fsicos .................................................................................................................................... 21

Cores e fontes ................................................................................................................................ 23Cores .................................................................................................................................................. 23Tamanho............................................................................................................................................. 23Fontes ................................................................................................................................................. 23

Caminhos (uso de links) ................................................................................................................ 24Caminho relativo ............................................................................................................................... 25Caminho absoluto .............................................................................................................................. 25

Atributos bsicos de imagem......................................................................................................... 26ALT .................................................................................................................................................... 26WIDTH e HEIGHT ........................................................................................................................... 26BORDER ........................................................................................................................................... 27ALIGN ............................................................................................................................................... 27

Tabelas ...................................................................................................................................... 29Elementos bsicos de tabelas ................................................................................................... 30

Ttulos, linhas e elementos ................................................................................................................ 30Ttulos compreendendo mais de uma coluna ou linha ....................................................................... 30Tabelas sem borda .............................................................................................................................. 31

Alinhamentos em tabelas ......................................................................................................... 31Alinhamentos simples ........................................................................................................................ 32Alinhamentos combinados ................................................................................................................. 32

Alinhamentos de linhas ...................................................................................................................... 32Atributos de largura .................................................................................................................. 33Atributos de espaamento ........................................................................................................ 35

Extenses de tabelas ...................................................................................................................... 37Cor de fundo ...................................................................................................................................... 37Cor de borda ...................................................................................................................................... 37Imagem de fundo ............................................................................................................................... 38

Frames ...................................................................................................................................... 38Formulrios .............................................................................................................................. 40

CGI Scripts .................................................................................................................................... 42Viso Geral ........................................................................................................................................ 43

udio e Vdeo .......................................................................................................................... 46Folhas de Estilo ........................................................................................................................ 46

Um ttulo genrico ............................................................................................................................. 47Introduo as CSS .................................................................................................................... 49

O HTML atual ............................................................................................................................... 49Os problemas criados .................................................................................................................... 49A soluo proposta ........................................................................................................................ 50As restries .................................................................................................................................. 50O efeito cascata ............................................................................................................................. 51

A regra CSS .............................................................................................................................. 52A regra CSS e sua sintaxe .............................................................................................................. 52Agrupamento de Seletores ............................................................................................................ 53O seletor classe .............................................................................................................................. 53O seletor ID ................................................................................................................................... 55Inserindo comentrios nas CSS ..................................................................................................... 55

Vinculando folhas de estilo a documentos ............................................................................... 56A propriedade font ................................................................................................................... 58

As fontes nos elementos HTML .................................................................................................... 58Valores vlidos para as propriedades da fonte ............................................................................... 58color ... A cor da fonte ................................................................................................................... 60font-family...O tipo de fonte ......................................................................................................... 61font-size...O tamanho de fonte ..................................................................................................... 61font-style...O estilo de fonte ......................................................................................................... 62font-variant...fontes maisculas "menores" ................................................................................... 62font-weight...Peso das fontes - negrito (intensidade da cor) ......................................................... 63font...Todas as propriedades das fontes em uma declarao nica................................................ 63

A propriedade text ................................................................................................................... 65Os textos nos elementos HTML .................................................................................................... 65Valores vlidos para as propriedades do texto ............................................................................... 66color ... A cor do texto ................................................................................................................... 67letter-spacing...O espao entre letras ............................................................................................. 68word-spacing...O espao entre palavras ........................................................................................ 68text-align...Alinhar o texto ............................................................................................................ 69text-decoration...Decorao do texto ............................................................................................. 70text-indent...Recuo do texto .......................................................................................................... 70text-transform...Forma das letras do texto ..................................................................................... 71

A propriedade margin ............................................................................................................. 72A propriedade border ............................................................................................................... 75

As bordas nos elementos HTML ................................................................................................... 75Valores vlidos para as propriedades das bordas ........................................................................... 76border-width, border-style e border-color ..................................................................................... 77

border-style .................................................................................................................................... 78border-width .................................................................................................................................. 79Definir a espessura das bordas superior, esquerda e direita .......................................................... 79border (declarao nica) .............................................................................................................. 79Propriedades CSS das bordas ........................................................................................................ 80

A propriedade padding ........................................................................................................... 80 A propriedade background ..................................................................................................... 83

O fundo dos elementos HTML ...................................................................................................... 83Valores vlidos para as propriedades do fundo ............................................................................. 83A cor do fundo .............................................................................................................................. 85A imagem de fundo ...................................................................................................................... 85Repetir verticalmente a imagem de fundo .................................................................................... 85Repetir horizontalmente a imagem de fundo ................................................................................ 86Posicionar uma imagem de fundo ................................................................................................. 86Ajustar uma imagem de fundo fixa, que no "rola" com a tela. .................................................... 87Todas as propriedades do fundo em uma declarao nica ........................................................... 87

A propriedade list ................................................................................................................... 88Mudando o estilo das listas HTML ............................................................................................... 88Valores vlidos para as propriedades do lista ................................................................................ 88list-style-image...imagem para marcadores de lista....................................................................... 89list-style-position...posio dos marcadores de lista ..................................................................... 90list-style-type...os tipos de marcadores de lista ............................................................................. 91Definir os marcadores de listas no ordenadas .............................................................................. 91Definir os marcadores de listas ordenadas .................................................................................... 92list-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 ............................................................................................ 97Alterando o espaamento entre linhas ........................................................................................... 98E o espaamento (a distncia) entre os pargrafos? ...................................................................... 99Dicas adicionais ........................................................................................................................... 101

As medidas CSS de comprimento ........................................................................................ 101Introduo .................................................................................................................................... 101Unidades de medida de comprimento CSS vlidas ..................................................................... 102UNIDADE RELATIVA ............................................................................................................... 102UNIDADE ABSOLUTA ............................................................................................................. 102Entendendo as unidades de medida CSS .................................................................................... 103

Definindo cores em uma regra CSS ..................................................................................... 104Introduo ao PHP .................................................................................................................. 114

O que PHP ? .............................................................................................................................. 114Como surgiu ? .................................................................................................................................. 114Porque aprender PHP ? .................................................................................................................... 115

Sintaxe bsica .............................................................................................................................. 115Delimitador e separador do cdigo em PHP .................................................................................... 115Comentrios ..................................................................................................................................... 116Extenso de arquivos ....................................................................................................................... 116Comandos de sada(output) ............................................................................................................. 116Tipo de Dados .................................................................................................................................. 117

Variveis ...................................................................................................................................... 126Constantes ................................................................................................................................... 126Operadores ................................................................................................................................... 127

Operadores de atribuio ................................................................................................................. 127

Operadores aritmticos .................................................................................................................... 128Operadores de comparao .............................................................................................................. 128Operadores lgicos .......................................................................................................................... 129Operadores de strings ...................................................................................................................... 130Precedncia de Operadores .............................................................................................................. 130

Expresses ................................................................................................................................... 130Trabalhando com Arrays ............................................................................................................. 132

O que um array? ........................................................................................................................... 132Arrays numericamente indexados .................................................................................................... 133Acessando o contedo de array ....................................................................................................... 133Utilizando loops para acessar o array .............................................................................................. 134Arrays Associativos ......................................................................................................................... 134Arrays multidimensionais ................................................................................................................ 135

Estruturas de Controle ................................................................................................................. 137IF ...................................................................................................................................................... 137ELSE ................................................................................................................................................ 137ELSEIF ............................................................................................................................................ 138SWITCH .......................................................................................................................................... 138BREAK ............................................................................................................................................ 139CONTINUE ..................................................................................................................................... 140FOR .................................................................................................................................................. 140FOREACH ....................................................................................................................................... 141WHILE ............................................................................................................................................ 141DO...WHILE .................................................................................................................................... 142

Funes ........................................................................................................................................ 142Criao ............................................................................................................................................. 142Retornando Valores de uma Funo ................................................................................................ 143

Criando bloco de cdigos reutilizveis ....................................................................................... 144require( ) .......................................................................................................................................... 144include( ) .......................................................................................................................................... 144

Funes de Data .......................................................................................................................... 147Date .................................................................................................................................................. 147 Getdate ............................................................................................................................................ 149Time ................................................................................................................................................. 150Mktime ............................................................................................................................................. 150

Formulrios.................................................................................................................................. 151Mtodos GET e POST ..................................................................................................................... 151Formulrios na prtica ..................................................................................................................... 152Acessando o MySQL via PHP ......................................................................................................... 153

Sesses e Cookies ........................................................................................................................ 155Sesses ............................................................................................................................................. 156Cookies ............................................................................................................................................ 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 dosprotocolos TCP/IP"

O hardware para conexo Internet

Para conexo discada, preciso ter um modem para comunicao com o provedor de acesso via linhatelefnica comum.

Para conexo dedicada ADSL, preciso ter uma placa de rede Ethernet 10/100 e um modem ADSL, almde 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 dosdados.

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 umapessoa fala; em uma assemblia, so vrias as pessoas que falam e, mesmo assim, uma pessoa fala porvez), 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 nossaconexo com a Internet em geral ganha nmeros IP diferentes a cada acesso. Mesmo assim, quando nossocomputador 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 ummesmo 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 quel e-mails?

Isso possvel porque cada programa em execuo recebe tambm seu endereo prprio dentro docomputador: 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 prdiode apartamentos com um dado nmero IP; seu browser e seu programa de e-mail seriam apartamentosdistintos nesse prdio, cada qual com seu nmero TCP.

Outros protocolos

Veremos que, para cada tipo de recurso disponvel pela Internet, tambm existe um protocolo decomunicao especfico, alm do TCP/IP.

Recursos da Internet

E-mail

Servio de intercmbio assncrono de mensagens, o "correio eletrnico" utiliza-se dos protocolos POP ouIMAP 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 protocolotelnet.

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 deinformao 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 vocaciona 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 ResourceIdentifier - 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: elaserve 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 documentosconforme 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 informaobaseada em tempo. Um documento visto como um conjunto de eventos concorrentesdependentes de tempo (udio, vdeo, etc.), conectados por webs ou hiperlinks.O padro HyTime independente dos padres de processamento de texto em geral. Ele fornece abase para a construo de sistemas hipertexto padronizados, consistindo de documentos quealicam os padres de maneira particular

SGML - Standard Generalized Markup LanguagePadro ISO 8879 de formatao de textos: no foi desenvolvido para hipertexto, mas torna-seconveniente para transformar documentos em hiper-objetos e para descrever as ligaes. SGML no padro aplicado de maneira padronizada: todos os produtos SGML tm seu prpriosistema para traduzir as etiquetas para um particular formatador de texto.

DTD - Document Type Definition - define as regras de formatao para uma dada classe dedocumentos. Um DTD ou uma referncia para um DTD deve estar contido em qualquerdocumento conforme o padro SGML.

Portanto, HTML definido segundo um DTD de SGML.

Todo documento HTML apresenta elementos entre parnteses angulares (< e >); esses elementos so asetiquetas (tags) de HTML, que so os comandos de formatao da linguagem. A maioria das etiquetastem sua correspondente de fechamento:

...

Isso necessrio porque as etiquetas servem para definir a formatao de uma poro de texto, e assimmarcamos 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 algumacoisa no documento:

Todos os elementos podem ter atributos:

...HTML um recurso muito simples e acessvel para a produo de documentos. Nestes captulos, serpossvel 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 geralmenteoferecem espao para os sites de seus assinantes. Sites com fins lucrativos geralmente so hospedados emprovedores de espao pagos.

Definida a hospedagem, basta enviar para o provedor os arquivos de seu site (via FTP ou por uma pginade 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, emseu 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, queser a sua pgina principal.

A seguir, certifique-se de que sua rea e o diretrio WWW dentro dela estejam com permisso de leiturapara "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 outrasconfiguraes 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:

Titulo do Documento

texto,imagem,links,...

As etiquetas HTML no so sensveis caixa. Traduzindo: tanto faz escrever , , ,, ...

Os documentos se dividem em duas sees principais, que veremos a seguir.

A seo

contm informaes sobre o documento. O elemento , por exemplo, define um ttulo, que mostrado no alto da janela do browser. Nesta pgina, por exemplo, est definido assim:

A seo - Tutorial HTML do ICMC-USP

Todo documento WWW deve ter um ttulo; esse ttulo referenciado em buscas pela rede, dando umaidentidade 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 dosdocumentos 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 daInternet.

Alm do ttulo, contm outras informaes de importncia para os robs de pesquisa, indicadasnos campos .

Campos

Os campos tm dois atributos principais:

NAME, indicando um nome para a informao HTTP-EQUIV, que faz uma correspondncia com campos de cabealho do protocolo HTTP; a

informao desse campo pode ser lida pelos browsers, e provocar algumas aes.

Ttulo do Documento

Este documento, por exemplo, tem as seguintes informaes:

A seo - Tutorial HTML do ICMC-USP

Alguns valores dos atributos META NAME so inseridos automaticamente por alguns editores, porexemplo: Generator e Author. Os campos Description e KeyWords ajudam a classificao da pginaem 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 oconjunto de caracteres usado na pgina: essa informao ajuda o browser a exibir corretamente oscaracteres 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.

...

onde:pagina.html

a pgina a ser carregada automaticamentesegundos

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 umafinalidade 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 fotoproduzida 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 desenvolvidospara browsers avanados.

A seo Tudo que estiver contido em ser mostrado na janela principal do browser, sendo apresentado aoleitor. 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 Atravs de atributos de , podemos definir cores para os textos, links e para o fundo das pginas,bem como uma imagem de fundo (marca dgua):

onde:BGCOLOR

cor de fundo (quando no indicada, o browser ir mostrar uma cor padro, geralmente o cinza oubranco; 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 bemamigvel atravs da qual escolhemos as cores desejadas, sem nos preocuparmos com nmeros esdrxulostais como #FF80A0.Browsers que seguem a definio de HTML 3.2 em diante, tambm aceitam 16 nomes de cores, tirados dapaleta VGA do Windows - por exemplo, podemos escrever BGCOLOR="BLUE". Porm, browsers maisantigos no apresentaro as cores indicadas. BACKGROUND

indica o URL da imagem a ser replicada no fundo da pgina, como uma marca dgua. Veja oexemplo 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 otexto ao se rolar a pgina. Esse efeito no padro e funciona no Internet Explorer.

Cabealhos

H seis nveis de cabealhos em HTML, de a :

Este um cabealho de nvel 1Este um cabealho de nvel 2Este um cabealho de nvel 3Este um cabealho de nvel 4Este um cabealho de nvel 5Este um cabealho de nvel 6

Esses cabealhos so mostrados da seguinte forma:Este um cabealho de nvel 1

Este um cabealho de nvel 2





Aninhamento de cabealhos

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

Este um cabealho de nvel 1 dentro de um cabealho de nvel 2

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:

Este um cabealho de nvel 1 dentro de um cabealho de nvel2

- ou seja, como se estivesse faltando uma etiqueta de fechamento de antes de , e faltando umaabertura de depois do fechamento de , 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:

Cabealho centralizado

Cabealho centralizadoCabealho alinhado direita

Cabealho alinhado direitaCabealho alinhado esquerda (default)

Cabealho alinhado esquerda (default)

SeparadoresComo vimos no primeiro exemplo, as quebras de linha do texto fonte no so significativas naapresentao de documentos em HTML. Para organizar os textos, precisamos de separadores,apresentados aqui.

Quebra de linhaQuando queremos mudar de linha, usamos o elemento . Isso s necessrio quando queremos umaquebra de linha em determinado ponto, pois os browsers j quebram as linhas automaticamente para

apresentar os textos.Com sucessivos , podemos inserir diversas linhas em branco nos documentos. Esse elemento tem umatributo especial, que ser apresentado no item sobre insero de imagens.

PargrafosPara separar blocos de texto, usamos o elemento :Pargrafo 1;Pargrafo 2.que produz:

Pargrafo1;

Pargrafo2.

Combinando pargrafos e quebras de linha, temos:Pargrafo 1; linha 1 do pargrafo 1, linha 2 do pargrafo 1.Pargrafo2; linha 1 do pargrafo 2, 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.

tem atributo de alinhamento, como os cabealhos:Assim como os trens, as boas idias s vezes chegam com atraso.(Giovani Guareschi)

Assim como os trens, as boas idias s vezes chegam com atraso.(Giovani Guareschi)

Como diz o provrbio chins: melhor passar por ignorante uma vez doque permanecer ignorante para sempre.

Como diz o provrbio chins: melhor passar por ignorante uma vez do que permanecer ignorante parasempre.

Este o alinhamento padro (default), e por isso no vou colocarnenhuma frase especial.

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.

insere uma linha de largura 7 (pixels):Erro! Indicador no definido. insere uma linha que ocupa 50% do espao horizontal disponvel:Erro! Indicador no definido. insere uma linha de comprimento 30% (do espao horizontaldisponvel), alinhada direita, sem efeito tridimensional:Erro! Indicador no definido. insere uma linha de largura 70 (pixels), comprimento 2 (pixels),alinhada esquerda (o Netscape, aparentemente, no aceita esta formatao de ):

Listas em HTMLH vrios tipos de listas em HTML, sendo estas as mais usadas e corretamente apresentadas pelosbrowsers:

Listas de DefinioEstas listas so chamadas tambm Listas de Glossrio, uma vez que tm o formato:

termo a ser definidodefiniotermo a ser definidodefinio

Que produz:termo a ser definido

definiotermo a ser definido

definioEste tipo de lista muito utilizado para diversos efeitos de organizao de pginas, por permitir atabulao do texto. Um exemplo so os ndices de navega_1o presentes nas pgi nas deste tutorial;outro exemplo a lista composta abaixo:

Imperadores do Brasil:D. Pedro I

Nome completo: Pedro de Alcntara Francisco Antnio Joo Carlos Xavier dePaula Miguel Rafael Joaquim Jos Gonzaga Pascoal Cipriano Serafim de Bragana eBourbon

D. Pedro II

Nome completo: Pedro de Alcntara Joo Carlos Leopoldo Salvador BibianoFrancisco Xavier de Paula Leocdio Miguel Gabriel Rafael Gonzaga

Imperadores do Brasil:

D. Pedro INome completo: Pedro de Alcntara Francisco Antnio Joo Carlos Xavier de Paula MiguelRafael Joaquim Jos Gonzaga Pascoal Cipriano Serafim de Bragana e BourbonD. Pedro IINome completo: Pedro de Alcntara Joo Carlos Leopoldo Salvador Bibiano Francisco Xavier dePaula Leocdio Miguel Gabriel Rafael Gonzaga

Listas no-numeradasSo equivalentes s listas com marcadores do MS Word:

item de uma listaitem de uma lista, que pode ser to grande quanto se queira, sem que sejanecessrio se preocupar com a formatao das margens de textoitem

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:

Documentos bsicosDocumentos avanados

formulrios

CGI

contadoresrelgios

Detalhes sobre imagens

Documentos bsicos Documentos avanados

o formulrios

CGI

o contadores

o relgios

Detalhes sobre imagensEssa lista pode ter marcadores diferentes, indicados atravs do atributo TYPE, que assume os valoresCIRCLE, SQUARE e DISC (default):

um itemmais um item

o um item

o mais um itemCada item tambm pode ter seu atributo especfico:

um itemmais um itemltimo item

um item

o mais um item

ltimo itemListas Numeradas

item de uma lista numeradaitem de uma lista numerada, que pode ser to grande quanto se queira, sem queseja necessrio se preocupar com a formatao das margens de textoitem de lista numerada

1. item de uma lista numerada

2. item de uma lista numerada, que pode ser to grande quanto se queira, sem que seja necessrio sepreocupar com a formatao das margens de texto

3. item de lista numeradaEstas 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 imagensPorm, atravs do atributo TYPE (HTML 3.2), pode-se lidar com a numerao dos itens:

Documentos bsicosDocumentos avanados

formulrios

CGI

contadoresrelgios

Detalhes sobre imagens

I. Documentos bsicos

II. Documentos avanados

a. formulrios

i. CGI

b. contadores

c. relgios

III. Detalhes sobre imagens

Ainda segundo HTML 3.2, o atributo START pode indicar o incio da numerao da lista:

um itemoutro itemmais um item

D. um item

E. outro item

F. mais um item

Listas e sub-listasAs listas podem ser aninhadas. Por exemplo:

termo a ser definidodefinio item de uma lista numerada item de uma lista numerada item de uma lista item de uma lista numerada termo a ser definidodefinio

termo a ser definido

definio1. item de uma lista numerada

2. item de uma lista numerada

o item de uma lista

3. item de uma lista numeradatermo a ser definido

definioFormatao 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 eapresentao.

Quando formatamos um trecho de texto como cabealho de nvel 1, no explicitamos se esse tipo decabealho 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 deapresentao 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 linguagemgarante 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 citaoetc. 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. Suaapresentao final no sofre grandes variaes.

Blocos de textoHTML oferece as seguintes formataes de blocos de texto:

Apresenta o texto na mesma maneira em que foi digitado, mantendo quebras de linha e tabulaes:uma linha aqui,outra ali, etc.Resulta em:uma linha aqui,outra ali, etc.Uma vez que mantm o texto original, no se deve forar espaos com essa marcao dentro deoutra marcao que j apresente tabulaes e espaos especficos.

usado para citaes longas:

A massa do Sol arqueia o espao-tempo de tal maneira que, ainda que aTerra siga uma trajetria reta no espao-tempo quadridimensional, parece-nos que sedesloca em rbita circular no espao tridimensional. (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 noespao-tempo quadridimensional, parece-nos que se desloca em rbita circular no espao tridimensional.

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

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

Envie crticas e sugestes para [email protected]

Envie crticas e sugestes para

[email protected]

Formatao de frasesComo visto anteriormente (em Formatao de Textos e Caracteres), HTML permite dois tipos deformatao: lgico e fsico; aqui veremos as formataes mais utilizadas:

Estilos Lgicos

Para ttulos de livros, filmes, e citaes curtas. Exemplo:

Assisti Guerra nas Estrelas umas oito vezes!

Para indicar trechos de cdigo de programas. Exemplo:

for (x=0); cl &&(!feof(stdin)); x++));

Indica definio de uma palavra, em geral apresenta o texto em itlico. Exemplo:

CERN: Centre dstudes et Recherches Nucleaires

nfase, tambm normalmente apresentado em itlico. Exemplo:

preciso pesquisar muito para encontrar o termo exato.

Indica uma entrada via teclado. Exemplo:

Para ler mensagens recebidas, digite pine -i

Indica uma seqncia de caracteres, por exemplo uma mensagem de erro ou um resultado. Exemplo:

O resultado do primeiro applet : Hello, World!

Forte nfase, mostrado normalmente em negrito. Exemplo:

Antes de enviar um e-mail, confira o campo Subject:!

Indica variveis, ou valores que o usurio dever escrever; geralmente mostrado em itlico. Exemplo:

No campo Login, escreva guest.

Estilos Fsicos

Quando disponvel no browser, mostrado em negrito (em alguns browsers, pode aparecer sublinhado)

Itlico (em alguns casos, caracteres inclinados)

Tipo teletype - fonte de espaamento fixo.

Sublinhado; deve ser usado com cuidado, pois confunde-se com a apresentao de links. ou Frase riscada.

Fonte um pouco maior.

Fonte um pouco menor.

Frase em estilo ndice, como em H2O.

Frase em estilo expoente, como em Km2.Caracteres especiais

HTML permite que caracteres especiais sejam representados por seqncias de escape, indicadas por trspartes: 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 dedocumentos seguindo a correspondncia:

Entidade Caracter

< >& &

Outras sequncias de escape suportam caracteres ISO Latin1. Aqui est uma tabela com os caracteresmais 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 traduoautomaticamente.

Alguns editores, no entanto, mantm a acentuao, sem usar as entidades de formatao. Quando issoacontece, deve-se inserir uma indicao do esquema de codificao ISO Latin1, escrevendo:

...

...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

CoresAs cores so introduzidas atravs do elemento , usando o sistema RGB para cores (da mesmaforma que vimos para cores de documentos):

Texto

Assim, um trecho de texto pode ter uma cor diferente da definio geral de cores, feita atravs dosatributos de .

TamanhoA formatao

Texto

permite que o autor do documento altere o tamanho das letras em trechos especficos de texto. O tamanhobsico dos textos 3. Podemos indicar tamanhos relativos a esse, por exemplo:

Letra maiorLetra normalLetra menor

Letra maior Letra normal Letra menor

FontesUma evoluo que permite a escolha da fonte para os textos, o atributo FACE:

Texto

Por exemplo:

Fonte Verdana azulFonte Verdana azul

Fonte Arial verdeFonte Arial verde

Fonte Courier New vermelhaFonte Courier New vermelha

Marquee possvel obter o efeito de animao de texto, atravs da formatao .TextoAtributos de largura e direo do efeito permitem diversas apresentaes diferentes. Por exemplo (o efeitos executado no Internet Explorer e em verses recentes do Netscape - e de maneiras diferentes):TextoTexto

Texto

Texto

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 dotexto, indicando que so ligaes de hipertexto - tambm chamadas hypertext links ou hiperlinks ousimplesmente links.

Para inserir um link em um documento, utilizamos a etiqueta , da seguinte forma:

ncora

onde:arq_destino

o URL do documento de destino;ncora

o texto ou imagem que servir de ligao hipertexto do documento sendo apresentado para odocumento de destino.

Atributos

tem vrios atributos, utilizados de acordo com a ao associada ao link. Os mais usados so:HREF

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 relativoO caminho relativo pode ser usado sempre que queremos fazer referncia a um documento armazenadono 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 documentopara o documento doc2.html no diretrio /ensino/material/html/exemplos/, tudo que precisamosfazer escrever:

Veja o exemplo de caminho relativo.

Da mesma forma, se quisermos um link deste documento para um outro que esteja em diretrio diferenteneste mesmo servidor, escrevemos, por exemplo:

Instituto de Cincias Matemticas e de Computao -Material Didtico

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 servidorno qual estamos trabalhando. Quando h alguma dvida, o melhor usar o caminho absoluto.

Caminho absolutoUtilizamos o caminho absoluto quando desejamos referenciar um documento que esteja em outroservidor, por exemplo:

Laboratrio de Engenharia de Software

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 dechegada de uma ligao hipertexto.

A formatao:Indicadores (uso de links)faz com que a ncora Indicadores (uso de links) seja o destino de um link.Se escrevermos:Topo do documento.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 quesaibamos quais trechos do documento destino esto marcados para ponto de chegada de um link.

Por exemplo:

So Carlos um plo de altatecnologia.

produz um link para um pargrafo marcado com no arquivo histprogr.html sobre acidade 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 estarpresente, da seguinte forma:

onde URL_imagem o URL do arquivo que contm a imagem que se quer inserir; pode ser referenciadauma imagem que esteja em um outro servidor (o que, logicamente, no conveniente).

Assim, escrevendo:

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

ALTIndica um texto alternativo, descrevendo brevemente a imagem, que apresentado no lugar da imagemnos browsers texto, ou quando se desabilita o carregamento de imagens em browsers grficos. recomendvel que esteja sempre presente.

Dessa forma, apresentado nos browsers grficosassim: e, nos browsers texto, assim: [Novo!]

WIDTH e HEIGHTAtributos de dimenso da imagem, em pixels. Grande parte dos editores HTML coloca automaticamenteos valores destes atributos, quando indicamos a insero de uma imagem.

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.

BORDERQuando uma frase marcada como ncora de um link, ela se apresenta sublinhada; quando uma imagemfaz 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...

Se quisermos uma imagem sem borda...

Essa borda pode ser apresentada tambm em imagens que no so ncora de links. Basta aplicar, porexemplo, a formatao

Assim, possvel dar mais destaque a uma imagem, sem ser necessrio edit-la:

Foto original Foto com borda gerada por HTML

ALIGN

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 oresultado no seja muito bom.

ALIGN=MIDDLE Alinha o texto adjacente com o meio da imagem, embora com linhas compridaso resultado no seja muito bom

ALIGN=BOTTOM Alinha o texto adjacente com a parte de baixo da imagem (default)

ALIGN=RIGHT Alinha imagem direita, e tudo o que houver ao redor (texto, outras imagens) a partir dotopo da imagem.

ALIGN=LEFT Alinha imagem esquerda, e tudo o que houver ao redor (texto, outras imagens) a partir dotopo da imagem.

Para ter duas imagens, uma em cada margem, numa mesma linha, escreva:

...e se pode escrever vontade entre as imagens!

Um detalhe surgido com o alinhamento de imagens foi a necessidade de se liberar o texto dessealinhamento. 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 daprimeira frase, no seria possvel usar o alinhamento TOP.Para conseguir isso, seria necessrio incluir diversos consecutivos, inserindo linhas em branco;mesmo assim, o resultado final poderia ser bem pouco elegante. Surgiu, ento, o atributo CLEAR para.Com esse atributo, podemos, por exemplo......ter um texto posicionado no ponto em que a margem direita fica livre, com ou no ponto em que a margem esquerda fica livre, com 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 conseguidocom E, assim, vimos tudo sobre quebras de linha depois de imagens!Molduras de imagemPara melhorar ainda mais a apresentao das imagens junto com os textos, foram desenvolvidos atributosde moldura. Estes atributos definem o espao - vertical e horizontal - deixado entre as imagens e os textoscircundantes:

O efeito desses atributos pode ser percebido nos textos abaixo. No primeiro texto, as imagens no tmatributos de moldura ( fcil notar como o texto fica "grudado" na imagem)O Instituto de Cincias Matemticas e de Computao (ICMC-USP) formado pelos Departamentos deMatemtica e de Cincias de Computao e Estatstica. O ICMC originou-se em 1953, comoDepartamento de Matemtica da Escola de Engenharia de So Carlos (EESC-USP), fundado porrenomados 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 deps-graduao que inclui mestrado e doutorado na rea de Matemtica. O Departamento de Computaoe Estatstica responsvel pelo curso de Bacharelado em Cincia de Computao, no qual ingressam 40alunos por ano. Em nvel de ps-graduao oferece, desde 1975, o programa de mestrado em Cincias deComputao e Matemtica Computacional e, a partir de agosto de 1995, o programa de doutorado namesma rea.

Neste segundo texto so usadas, respectivamente, as formataes:

e

O Instituto de Cincias Matemticas e de Computao (ICMC-USP) formado pelos Departamentos deMatemtica e de Cincias de Computao e Estatstica. O ICMC originou-se em 1953, comoDepartamento de Matemtica da Escola de Engenharia de So Carlos (EESC-USP), fundado porrenomados matemticos italianos e brasileiros. Atualmente, o Departamento de Matemtica oferececursos de Licenciatura e Bacharelado em Matemtica em nvel de graduao, alm de um programa deps-graduao que inclui mestrado e doutorado na rea de Matemtica. O Departamento de Computaoe Estatstica responsvel pelo curso de Bacharelado em Cincia de Computao, no qual ingressam 40alunos por ano. Em nvel de ps-graduao oferece, desde 1975, o programa de mestrado em Cincias deComputao e Matemtica Computacional e, a partir de agosto de 1995, o programa de doutorado namesma rea.

Os dois atributos de moldura podem estar presentes ao mesmo tempo. Vejamos primeiro o texto com aimagem sem moldura:

"A cultura UNIX comeou a ser apreciada por usurios brasileiros ainda na dcada de 70, pelos contatosde pesquisadores brasileiros em cursos de aperfeioamento no exterior - notadamente na Amrica doNorte. O contingente era, contudo, pequeno e restrito a acadmicos. A disseminao da cultura UNIX nomercado 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:

"A cultura UNIX comeou a ser apreciada por usurios brasileiros ainda na dcada de 70, pelos contatosde pesquisadores brasileiros em cursos de aperfeioamento no exterior - notadamente na Amrica doNorte. O contingente era, contudo, pequeno e restrito a acadmicos. A disseminao da cultura UNIX nomercado 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 detabelas, mesmo em editores, trabalhosa; a maior diferena entre tabelas em HTML e em editores como oMS Word, entretanto, o fato das tabelas em HTML serem definidas apenas em termos de linhas e no decolunas. 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 organizamostextos e ilustraes de maneira harmoniosa.

Como j foi possvel perceber, as tabelas contm textos, listas, pargrafos, imagens, formulrios e vriasoutras formataes - inclusive outras tabelas. Novas verses de HTML e de browsers populares vmacrescentando diversos atributos s tabelas, e nosso objetivo aqui saber lidar com a maioria dessesrecursos disponveis.

Elementos bsicos de tabelas... delimita uma tabela. Um atributo bsico BORDER, que indica a apresentao daborda.

...

Ttulos, linhas e elementos...

define o ttulo da tabela...

delimita uma linha...

define um cabealho para colunas ou linhas (dentro de )...

delimita um elemento ou clula (dentro de )Uma tabela simples:

Primeiro exemploColuna 1Coluna 2linha1, coluna 1 linha 1, coluna 2linha 2, coluna 1linha 2, coluna 2

Primeiro exemploColuna 1 Coluna 2linha1, coluna 1 linha 1, coluna 2linha 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 (paralinhas):

Colunas 1 e 2linha1, coluna 1 linha 1, coluna 2linha 2, coluna 1linha 2, coluna 23 linhasuma linhaduas linhastres linhas

Colunas 1 e 2linha1, coluna 1 linha 1, coluna 2linha 2, coluna 1 linha 2, coluna 2

uma linhaduas linhas3 linhastres linhas

Neste exemplo, vemos que o cabealho Colunas 1 e 2 compreende duas colunas (COLSPAN=2); ocabealho 3 linhas compreende, por sua vez, 3 linhas (ROWSPAN=3).

Tabelas sem bordaAs pginas deste tutorial foram construdas com tabelas sem borda. Para tanto, foi empregada a seguintedelarao:

...

Alinhamentos em tabelasEste exemplo servir para estudarmos alinhamentos, controle de larguras e espaamento em tabelas:

Prdio principal do ICMC-USP

O Instituto de Cincias Matemticas e de Computao (ICMC-USP) formado pelos Departamentos de Matemtica e de Cincias deComputao e Estatstica.

O ICMC originou-se em 1953, como Departamento de Matemtica daEscola de Engenharia de So Carlos (EESC-USP), fundado porrenomados matemticos italianos e brasileiros.

Departamento de Matemtica(SMA)

Atualmente, o Departamento de Matemtica oferece cursos deLicenciatura e Bacharelado em Matemtica e de Bacharelado emMatemtica Aplicada e Computao Cientfica.

Departamento de Computaoe Estatstica (SCE)

O Departamento de Computao e Estatstica responsvel peloBacharelado em Cincia de Computao e pelo curso noturno deBacharelado em Informtica.

Para maiores informaes:Cursos de Graduao: [email protected] de Ps-Graduao: [email protected]

O contedo informativo, porm a apresentao no agradvel devido disposio do texto na tabela.Primeiro, vamos mexer com os alinhamentos.

Alinhamentos simplesOs alinhamentos padro em tabelas, como podemos ver no exemplo acima, so:

no sentido horizontal: alinhamento esquerdano sentido vertical: alinhamento no centro da clula

As linhas e clulas podem ter alinhamentos definidos atravs dos atributos:ALIGN = alin_horizontalVALIGN = alin_vertical

Vejamos como esses alinhamentos funcionam nas clulas:

Texto da clulaTexto da clula

Padro ALIGN=LEFT ALIGN=CENTER ALIGN=RIGHT

PadroVALIGN=TOP

VALIGN=MIDDLEVALIGN=BOTTOM

Obs.: a tabela acima foi feita especialmente para mostrar as diferenas entre os alinhamentos. Uma tabelacomum ajusta o tamanho de suas clulas ao contedo, desta forma:

Padro align=left align=center align=rightPadro valign=top valign=middle valign=bottom

Alinhamentos combinadosUma mesma clula pode ter atributos ALIGN e VALIGN:

Texto da clula

Por exemplo:

Padro ALIGN=LEFT,VALIGN=BOTTOM

ALIGN=CENTER,VALIGN=TOP ALIGN=RIGHT,VALIGN=MIDDLE

Alinhamentos de linhasO alinhamento pode ser aplicado a linhas inteiras, com:

Texto da clula

Porm, o alinhamento declarado em uma clula prevalece sobre o alinhamento da linha, como se v noexemplo:

center center center TD ALIGN=RIGHT

bottom

TD VALIGN=TOP

bottom bottomIsso pode ser interessante para algumas aplicaes. J conseguimos mexer um pouco na tabela inicial, inserindo alinhamentos combinados; sero necessriosmais alguns passos para que a tabela fique realmente "apresentvel" - o exemplo continua nos itens sobrelarguras e espaamentos.

Prdio principal do ICMC-USP

O Instituto de Cincias Matemticas e de Computao (ICMC-USP) formado pelos Departamentos de Matemtica e de Cincias deComputao e Estatstica.

O ICMC originou-se em 1953, como Departamento de Matemtica daEscola de Engenharia de So Carlos (EESC-USP), fundado por

renomados matemticos italianos e brasileiros.

Departamento de Matemtica(SMA)

Atualmente, o Departamento de Matemtica oferece cursos deLicenciatura e Bacharelado em Matemtica e de Bacharelado emMatemtica Aplicada e Computao Cientfica.

Departamento de Computaoe Estatstica (SCE)

O Departamento de Computao e Estatstica responsvel peloBacharelado em Cincia de Computao e pelo curso noturno deBacharelado em Informtica.

Atributos de larguraNo item anterior, foi comentado que uma tabela comum ajusta o tamanho de suas clulas ao contedo.Por exemplo:

janeiro fevereiro maroabril maio junhoPara 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

janeiro fevereiro maroabril maio junho

Ex.2: Tabela ocupando 50% do espao disponvel, com uma coluna de 60% do espao disponvel natabela

janeirofevereiromaro

abrilmaiojunho


Ex3.: O controle da largura da tabela est limitado dimenso de seu contedo:


abrilmaiojunho

janeiro fevereiro maro

abril maio junho

De volta ao exemplo inicial, j podemos melhorar um pouco mais nossa tabela. Mantendo osalinhamentos definidos na seo anterior, aplicaremos atributos de largura:

Prdio principal doICMSC-USP

O Instituto de Cincias Matemticas e de Computao (ICMC-USP) formadopelos Departamentos de Matemtica e de Cincias de Computao e Estatstica.

O ICMC originou-se em 1953, como Departamento de Matemtica da Escola deEngenharia de So Carlos (EESC-USP), fundado por renomados matemticositalianos e brasileiros.

Departamento deMatemtica (SMA)

Atualmente, o Departamento de Matemtica oferece cursos de Licenciatura eBacharelado em Matemtica e o Bacharelado em Matemtica Aplicada eComputao Cientfica.

Departamento deComputao eEstatstica (SCE)

O Departamento de Computao e Estatstica responsvel pelo Bacharelado emCincia de Computao e o curso noturno de Bacharelado em Informtica.

Atributos de espaamentoDois atributos permitem o controle de espaamento em tabelas:

CELLPADDING - espao entre o texto e as bordas da clulaCELLSPACING - espao entre clulas

Tomemos a mesma tabela simples da seo anterior:janeiro fevereiro maroabril maio junho

Ex.1: Espao entre o texto e as bordas


Ex.2: Espao entre clulas


Ex3.: Espao entre texto e bordas, e espao entre clulas

janeiro fevereiro maro

abril maio junho

Assim, damos mais uma mexida na tabela inicial:

Prdio principal doICMSC-USP








Como toque final, retiramos a borda:

Prdio principal doICMC-USP








Agora j vimos grande parte dos recursos disponveis para manipular tabelas, que permitem produzir bonsefeitos de apresentao.

Extenses de tabelasDiversas extenses de tabelas possibilitam a apresentao de efeitos muito bons nas pginas.

Cor de fundo


janeirofevereiromaroabrilmaiojunho


Cor de borda

janeiro fevereiro maroAbril maio junho


abrilmaiojunho


Imagem de fundo



Frames

Os frames so divises da tela do browser em diversas telas (ou quadros). Com isso, torna-se possvelapresentar mais de uma pgina por vez: por exemplo, um ndice principal em uma parte pequena da tela, eos textos relacionados ao ndice em outra parte.

muito fcil colocar frames em pginas; porm, nem todos os usurios gostam deles, pois nem sempre anavegao fcil, alm de problemas para a impresso e a marcao dos documentos interiores aosframes nos bookmarks. A alternativa natural para os frames so as tabelas.

Uma pgina com frames tem um texto fonte semelhante a:

Assunto X

Bem-vindo pgina do assunto X!

Bl bl bl bl blbl bl bl bl bl

A parte FRAMESET define a diviso da pgina em quadros. Neste exemplo, a pgina ser dividida emduas colunas, sendo a primeira com 20% do tamanho da tela, e a segunda coluna com os restantes 80% datela.

Dentro da formatao de FRAMESET, temos os FRAME SRC, que so referncias s pginas que seromostradas nos frames definidos

Assim, no cdigo acima vemos que a pgina indice1.html ser mostrada na primeira coluna (queocupar 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 browsersque 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:

Frame sem barra de rolagem:

[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 leitora 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

TARGET="_blank" abre uma nova janela do browser para apresentar a pgina de destino

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 fazerformulrios aprender as etiquetas que desenham as janelinhas de entrada de dados, para depoistrabalharmos com os scripts, que so os programas que tratam esses dados, oferecendo os serviosdesejados (acesso a banco de dados, envio de e-mail, etc.).

O elemento delimita um formulrio e contm uma seqncia de elementos de entrada e deformatao do documento.

...

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 oservidor;- 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 outrosformulrios. Em especial, colocamos dentro da marcao de as formataes para campos deentrada de dados, que so trs: , e .

Todos os campos de entrada de dados tm um atributo NAME, ao qual associamos um nome, que serutilizado posteriormente pelo script. So os scripts que organizam esses dados de entrada em um conjuntode 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 fazerformulrios aprender as etiquetas que desenham as janelinhas de entrada de dados, para depoistrabalharmos com os scripts, que so os programas que tratam esses dados, oferecendo os serviosdesejados (acesso a banco de dados, envio de e-mail, etc.).

O elemento delimita um formulrio e contm uma seqncia de elementos de entrada e deformatao do documento.

...

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 oservidor;- 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 outrosformulrios. Em especial, colocamos dentro da marcao de as formataes para campos deentrada de dados, que so trs: , e .

Todos os campos de entrada de dados tm um atributo NAME, ao qual associamos um nome, que serutilizado posteriormente pelo script. So os scripts que organizam esses dados de entrada em um conjuntode informaes significativas para determinado propsito.

Primeiro vamos ver os tipos de campos para montar um formulrio, e depois passaremos aos scripts.

SELECT

apresenta uma lista de valores, atravs de campos OPTION.

AbacaxiCremeMorangoChocolate

Tambm possvel estabelecer uma escolha-padro, atravs do atributo SELECTED


Com o atributo SIZE, escolhe-se quantos itens da lista sero mostrados (no exemplo, SIZE=4):


Com o atributo MULTIPLE, define-se que se pode selecionar mais de um item (pressionando a tecla Shiftdo teclado enquanto se selecionam os itens):


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.

Deixe seu comentrio

CGI ScriptsCGI, ou Common Gateway Interface, uma interface definida de maneira a possibilitar a execuo deprogramas - "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 osresultados correspondentes. Esse documento retornado pode existir previamente, ou pode ser gerado peloscript 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 retornarrespostas - ou seja, qualquer linguagem de programao! A linguagem determinada de acordo com aplataforma do servidor e da aplicao a ser implementada.

Viso GeralOs 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 declculos, 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:

...

onde ACTION indica o URL do script que receber os dados (ainda no vamos nos preocupar com o campoMETHOD)

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 algunsexemplos.

Um campo de texto simples, tal como:

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) evalor a entrada oferecida pelo usurio.

Note que os espaos em branco so substitudos por sinais de +. Se o formulrio tiver mais algum campode informao, por exemplo:

com uma entrada

o browser estar gerando uma linha nica com todos esses dados, desta forma:

nome=Prof.+Achille+Bassi&[email protected]

Isto , os campos de informao so separados por &. Tambm todos os acentos e smbolos especiais socodificados 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 estassociado a um script. Esse envio est sujeito a um mtodo especfico, que definir como o script irrecuperar essas informaes para process-las.

Antes de ver os mtodos, bom conhecer as variveis de ambiente, que sero muito teis no tratamentode informaes.

CGI Scripts usando PHP

A principal diferena entre o uso de Perl e PHP para criar pginas dinmicas que o PHP pode sertotalmente embutido em uma pgina comum de HTML. Assim, no preciso fazer com que o script gereuma pgina de resposta com as formataes: os comandos de PHP podem ficar embutidos de maneirabem 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 fimda pgina est a formatao completa do formulrio.

Se voc tiver dvidas sobre essas formataes, veja antes a seo sobre formulrios.

form1.php ser o script em PHP que ir trabalhar com os dados entrados por meio deste formulrio; eleir escrever, na prxima pgina, as informaes entradas neste formulrio.

Nome:

E-mail:

Esportes quevoc pratica:

FutebolVleiNataoBasqueteTnisBochaFutebolVlei

Seu time docorao:

Palmeiras; Nutico; Flamengo; Grmio; Santos; Atltico; Corinthians; Fluminense;Internacional; Cruzeiro; Botafogo; Santa Cruz; So Paulo; AEA.Palmeiras;Nutico;Flamengo;

Sabor desorvete queprefere:

AbacaxiCreme

MorangoChocolate

Algo mais? Escreva umcomentrio

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 umpoder ser selecionado.

Experimente entrar

52464384 Informatica Programacao Web HTML Css Php

Documents

Transcript of 52464384 Informatica Programacao Web HTML Css Php