Disciplina: Programação para WEB

(1)

Disciplina: Programação para WEB

Recordando...

Na aula anterior foi apresentado: - Introdução a disciplina; - Introdução a Internet; - Introdução ao HiperTexto; - Introdução ao HTML; - Tags HTML: - <HTML> </HTML> - <HEAD> </HEAD> - <TITLE> </TITLE> - <META> </META> - <META HTTP-EQUIV=”REFRESH”>

Completando a 1ª aula, temos: - <BR> : quebra de linha - <HR> : linha de separação

(2)

Disciplina: Programação para WEB

BODY

Tudo que estiver contido em <BODY> será mostrado na janela principal do browser, sendo apresentado ao leitor. <BODY> pode conter cabeçalhos, parágrafos, listas, tabelas, links para outros documentos, imagens, formulários, animações, vídeos, sons e scripts embutidos.

Atributos

Através de atributos de <BODY>, podemos definir cores para os textos, links e para o fundo das páginas, bem como uma imagem de fundo (marca d’água):

<BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb"

ALINK="#rrggbb" VLINK="#rrggbb" BACKGROUND="URL">

Onde:

BGCOLOR: Background Color, ou seja, cor de fundo da página. Quando não

é indicada a cor de fundo, o browser irá mostrar uma cor padrão, geralmente cinza ou branco.

TEXT: Cor dos textos da página (padrão: preto). LINK: Cor dos links (padrão: azul).

ALINK: Cor dos links quando acionados, clicados (padrão: vermelho).

VLINK: Cor dos links depois de visitados (padrão: azul escuro ou roxo). Seus

valores são dados em hexadecimal, equivalentes a cores no padrão RGB (Red, Green, Blue). Existem tabelas de cores com esses valores, mas grande parte dos editores já oferece uma interface bem amigável através da qual escolhemos as cores desejadas, sem nos preocuparmos com números esdrúxulos tais como #FF80A0.

Browsers que seguem a definição de HTML 3.2 em diante, também aceitam

16 nomes de cores, tirados da paleta VGA do Windows - por exemplo,

podemos escrever BGCOLOR="BLUE". Porém, browsers mais antigos não apresentarão as cores indicadas.

BACKGROUND: Indica a URL da imagem a ser replicada no fundo da página,

como uma marca d’água. Para efeitos de design, é possível fixar a imagem de fundo, para que ela não se mova junto com o texto ao se rolar a página. Esse efeito não é padrão e funciona no Internet Explorer.

(3)

Disciplina: Programação para WEB

Dica: O nome das cores - os 16 nomes de cores aceitos desde a versão 3.2

da HTML são: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.

Exemplo: <html>

<head>

<title>Aprendendo HTML</title>

<body BGCOLOR="green" TEXT="black" LINK="white"

ALINK="yellow" VLINK="gray" BACKGROUND="anhanguera.jpg"> Maurício Scoton Antonio - professor de Programação e design web. </body>

</html>

Exercícios de Fixação:

1. Repetir o exercício acima, retirando o BACKGROUND.

2. Agora, mude as cores do TEXT e do BGCOLOR e veja o resultado. CUIDADO: para não deixar o fundo do texto na mesma cor do texto. Isso fará com que o texto simplesmente “desapareça” ...

CABEÇALHO

Há seis níveis de cabeçalhos em HTML, de <H1> a <H6>: <H1> Este é um cabeçalho de nível 1 </H1>

<H2> Este é um cabeçalho de nível 2 </H2> <H3> Este é um cabeçalho de nível 3 </H3> <H4> Este é um cabeçalho de nível 4 </H4> <H5> Este é um cabeçalho de nível 5 </H5> <H6> Este é um cabeçalho de nível 6 </H6>

Esses cabeçalhos serão mostrados no browser da seguinte forma:

Este é um cabeçalho de nível 1

Este é um cabeçalho de nível 2

Este é um cabeçalho de nível 3

(4)

Disciplina: Programação para WEB

Este é um cabeçalho de nível 5 Este é um cabeçalho de nível 6

Aninhamento de cabeçalhos - os cabeçalhos não podem ser aninhados,

isto é, a formatação:

<H2>Este é <H1>um cabeçalho de nível 1</H1> dentro de um cabeçalho de nível 2</H2>

Não poderá produzir algum resultado desejado.

Alinhamento de cabeçalhos - os cabeçalhos têm atributos de alinhamento: ALIGN=”CENTER” - Cabeçalho centralizado

ALIGN=”RIGHT” - Cabeçalho alinhado à direita

ALIGN=”LEFT” - Cabeçalho alinhado à esquerda (default=padrão).

<H2 ALIGN=”CENTER”>Cabeçalho centralizado</H2>

Cabeçalho centralizado

<H3 ALIGN=”RIGHT”>Cabeçalho alinhado à direita</H3>

Cabeçalho alinhado à direita

<H4 ALIGN=”LEFT”>Cabeçalho alinhado à esquerda</H4>

Cabeçalho alinhado à esquerda

TAG FONTE

Tag usada para definir o tipo, tamanho e cor do texto no browser. Sintaxe

<FONT SIZE=”[tamanho]” COLOR=”[COR]” FACE=”[fonte,fonte,opcional,...]”> TEXTO

</FONT> Exemplos:

Cores: <FONT COLOR="red"> Texto </FONT>

Produzirá na página: a palavra Texto escrita na cor vermelha.

Assim, um trecho de texto pode ter uma cor diferente da definição geral de cores.

(5)

Disciplina: Programação para WEB

Produzirá na página: a palavra Texto como o

tamanho 3

.

Este comando permite que o autor do documento altere o tamanho das letras em trechos específicos de texto. O tamanho básico dos textos é 3 (padrão). 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

FACE - Permite a escolha da fonte para os textos:

<FONT FACE="Arial"> Texto </FONT>

Produzirá: a palavra Texto com a fonte (tipo de letra) Arial.

Exercício de Fixação

Acrescente, ao nosso exemplo, o seguinte trecho: <H1 ALIGN=”center”>

<FONT FACE="Algerian" SIZE=”6”> Contrato de Exemplo </FONT> </H1>

Cláusula 1 – Objetivo deste contrato </FONT><BR>

Este contrato não possui nenhum objetivo. Por isso, vamos apresentar todos os motivos para o qual ele não foi escrito. </FONT><BR><BR>

<FONT FACE="Arial BLack" SIZE=”3”> Parágrafo 1 – Qualquer coisa. </FONT><BR>

Para vocês verem que este contrato não possui nenhum objetivo, continuo escrevendo besteiras nele.

</FONT><BR><BR><BR>

<FONT FACE="Times New Roman" SIZE=”1”> Entrelinhas do contrato sacana

</FONT><BR>

Nas palavras acentuadas, retire as tags especiais de acentuação e coloque as letras acentuadas normalmente. Vejam o resultado.

(6)

Disciplina: Programação para WEB

<PRE></PRE>

Apresenta o texto na mesma maneira em que foi digitado, mantendo quebras de linha e tabulações:

<pre> uma linha aqui, outra ali,

etc. </pre> Resulta em:

uma linha aqui, outra ali,

etc.

As Tags HTML continuam funcionando dentro da tag <PRE>.

Tags de Formatações Lógicas

<CITE> Para títulos de livros, filmes e citações curtas </CITE> <CODE> Para indicar trechos de códigos de programa </CODE>

<DFN> Indica definição de uma palavra. Em geral apresenta o texto em itálico </DFN>

<EM> Ênfase. Apresenta o texto em itálico </EM> <KBD> Indica uma entrada via teclado </KBD> <SAMP> Indica um exemplo </SAMP>

<STRONG> Forte ênfase, mostra o texto em negrito </STRONG> <VAR> Indica variável ou valores que o usuário deve indicar </VAR> <ADDRESS> Assinatura da página. Quebra a linha e apresenta em itálico. </ADDRESS>

Exemplos: Acrescente o texto a seguir no exemplo de aula e veja o resultado.

Exemplo 1 : <CITE> Utilização do estilo CITE </CITE><BR><BR> Exemplo 2 : <CODE> Utilização do estilo CODE </CODE><BR><BR> Exemplo 3 : <DFN> Utilização do estilo DFN </DFN><BR><BR> Exemplo 4 : <EM> Utilização do estilo EM </EM><BR><BR> Exemplo 5 : <KBD> Utilização do estilo KBD </KBD><BR><BR> Exemplo 6 : <SAMP> Utilização do estilo SAMP </SAMP><BR><BR> Exemplo 7 : <STRONG> Utilização do estilo STRONG

</STRONG><BR><BR>

Exemplo 8 : <VAR> Utilização do estilo VAR </VAR><BR><BR> Exemplo 9 : <ADDRESS> Utilização do estilo ADDRESS

(7)

Disciplina: Programação para WEB

Tags de Estilos Físicos

<B></B> Quando disponível no browser, é mostrado em negrito (em alguns browsers,

pode aparecer sublinhado).

<I></I> Itálico

<U></U> Sublinhado. Deve ser usado com cuidado, pois pode confunde com a

apresentação de links.

<STRIKE> ou <S> - </STRIKE></S> Frase riscada. <BIG> Fonte um pouco maior.

<SMALL> Fonte um pouco menor.

<SUB> Frase em estilo índice, como em H2O, por exemplo.

<SUP> Frase em estilo expoente, como em Km2, por exemplo.

Exemplos:

Exemplo 1 : <B> Utilização do estilo B </B><BR><BR> Exemplo 2 : <I> Utilização do estilo I </I><BR><BR> Exemplo 3 : <TT> Utilização do estilo T </TT><BR><BR> Exemplo 4 : <U> Utilização do estilo U </U><BR><BR> Exemplo 5 : <S> Utilização do estilo STRIKE </S><BR><BR> Exemplo 6 : <BIG> Utilização do estilo BIG </BIG><BR><BR>

Exemplo 7 : <SMALL> Utilização do estilo SMALL </SMALL><BR><BR> Exemplo 8 : <SUB> Utilização do estilo SUB </SUB><BR><BR>

Exemplo 9 : <SUP> Utilização do estilo SUP </SUP>

<BLINK></BLINK>

Apresenta o texto piscando na tela.

Nota: Evite usar o BLINK. É possível substituir esse recurso por outros

efeitos de JavaScript. Felizmente, são poucos os browsers que mostram o efeito dessa formatação. O Internet Explorer é um dos browsers que

não consideram o BLINK. Ao usar o BLINK, aplique-o somente em

pequenos detalhes (palavras ou flechinhas), nunca em grande quantidade,

(8)

Disciplina: Programação para WEB

LETREIROS ANIMADOS

Utilizado pela Tag <MARQUIEE></MARQUIEE>. Com esta Tag pode-se fazer o texto se mover de um lado para o outro da página.

Sintaxe: <MARQUEE BEHAVIOR=”[scroll/slide/alternate]” DIRECTION=”[left/rigth]” LOOP=”[1..n/infinite]” ALIGN=”[left/right/center]” BGCOLOR=”[cor]” SCROLLAMOUNT=”[espaço]” SCROLLDELAY=”[tempo]” HEIGHT=”[altura]” WIDTH=”[largura]” HSPACE=”[espaço horizontal]” VSPACE=”[espaço vertical]”> Texto </MARQUEE>

BEHAVIOR: define como o texto vai deslizar na tela. Pode ser:

• SCROLL: continua rodando continuamente em um mesmo sentido • SLIDE: parte de um ponto da tela e vai até o outro lado e pára • ALTERNATE: desliza até o outro lado da tela, bate e volta, ou seja,

fica indo e voltando.

DIRECTION: define a direção em que o texto vai deslizar. • LEFT: da direita para esquerda (padrão)

• RIGHT: da esquerda para a direita • TOP: de baixo para cima

• BOTTON: de cima para baixo

Nota: os atributos TOP e BOTTON não funcionam em algumas das versões do Internet Explorer.

LOOP: determina quantas vezes o texto deslizará na tela. Para que deslize infinitamente utilize “infinite”, ou simplesmente não insira o atributo LOOP. HEIGHT e WIDTH: definem a altura e a largura da tela por onde o texto deslizará. Os valores podem ser em pixels ou em porcentagem.

HSPACE e VSPACE: definem, em pixels, o espaço que deve ficar livre em torno do texto. HSPACE determina o espaço horizontal e o VSPACE o espaço vertical.

(9)

Disciplina: Programação para WEB

BGCOLOR: define a cor do fundo do texto.

SCROLLAMOUNT e SCROLLDELAY: definem a velocidade do letreiro. O SCROLLDELAY define o tempo, em milissegundos, que o texto vai demorar em cada quadro e o SCROLLAMOUNT define a quantidade de pixels que será percorrido em cada quadro.

Exercício de fixação:

Acrescente em nosso exemplo cada uma das linhas a seguir e veja o resultado (acrescente uma linha e faça o teste. Vá fazendo assim até completar todas as linhas do exercício):

<MARQUEE BEHAVIOR="slide" DIRECTION="right"> Letreiro animado </MARQUEE>

<MARQUEE BEHAVIOR="scroll" DIRECTION="left"> Letreiro animado </MARQUEE>

<MARQUEE BEHAVIOR="alternate" LOOP="3"> Letreiro animado </MARQUEE>

<MARQUEE BEHAVIOR="scroll" HEIGHT=30% WIDTH=40%

BGCOLOR="#CCCCFF" DIRECTION="top"> Letreiro animado </MARQUEE> <MARQUEE HEIGHT=30 WIDTH=150 BGCOLOR="#CCFFCC" HSPACE="7" VSPACE="7" DIRECTION="botton"> Letreiro animado </MARQUEE><BR>

<MARQUEE BEHAVIOR="scroll" SCROLLAMOUNT="5"

SCROLLDELAY="1000"> Letreiro animado </MARQUEE><BR>

(10)

Disciplina: Programação para WEB

PARÁGRAFO

A tag <P></P> serve para indicar o início de um novo parágrafo. Com ela pode-se definir onde inicia e onde termina cada parágrafo de sua página. Se usar a tag <P> antes de um título (H1 a H6), a marca do parágrafo será ignorada.

Sintaxe:

<P ALIGN=”[left/right/center]”> texto </P>

BLOCO DE TEXTO

A tag <BLOCKQUOTE> determina um parágrafo recuado tanto do lado esquerdo quanto do lado direito. Este recuo é utilizado normalmente para indicar citações, comentários ou trechos em destaque.

Sintaxe:

<BLOCKQUOTE> texto </BLOCKQUOTE>

<HR> insere uma linha horizontal. Essa linha tem diversos atributos,

oferecendo resultados diversos:

<HR SIZE=7> insere uma linha de largura 7 (pixels)

<HR WIDTH=50%> insere uma linha que ocupa 50% do espaço horizontal disponível

<HR WIDTH=30% ALIGN=RIGHT NOSHADE> insere uma linha de

comprimento 30% (do espaço horizontal disponível), alinhada à direita, sem efeito tridimensional

<HR SIZE=70 WIDTH=2 ALIGN=LEFT> insere uma linha de largura 70 (pixels), comprimento 2 (pixels), alinhada à esquerda.

DIVISÃO DE TEXTO

As divisões de texto definem onde o texto deve se dividir e também podem definir o alinhamento do parágrafo.

Sintaxe:

(11)

Disciplina: Programação para WEB

Nota: a tag <DIV> também é usada para dividir o HTML em camadas, ou

seja, em divisões para que se possa trabalhar separadamente com elas. Porém este assunto é para se tratar mais em frente.

LISTAS - Apresentam-se de três formas:

• Lista de definição • Lista não-ordenada • Lista ordenada

Listas de Definição

Estas listas são chamadas também “Listas de Glossário”, uma vez que têm o seguinte formato:

<DL>

<DT> termo a ser definido <DD> definição

</DL> Que produz:

termo a ser definido definição termo a ser definido

definição

DL: Definition List – Delimita o inicio e o fim de uma lista de definição

DT: Definition Term – Define o termo de uma lista, a palavra ou o assunto a ser abordado

DD: Definition Detail – Determina a definição do termo apresentado.

Este tipo de lista é muito utilizado para diversos efeitos de organização de páginas, por permitir a tabulação do texto. Um exemplo é a lista composta abaixo:

<DL>

<DT> Imperadores do Brasil: <DD> D. Pedro I

<DL>

<DD> Nome completo: Pedro de Alcântara Francisco Antônio João Carlos Xavier de Paula Miguel Rafael Joaquim José Gonzaga Pascoal Cipriano Serafim de Bragança e Bourbon

</DL>

<DD> D. Pedro II <DL>

(12)

Disciplina: Programação para WEB

<DD> Nome completo: Pedro de Alcântara João Carlos Leopoldo Salvador Bibiano Francisco Xavier de Paula Leocádio Miguel Gabriel Rafael Gonzaga

</DL> </DL>

Imperadores do Brasil: D. Pedro I

Nome completo: Pedro de Alcântara Francisco Antônio João Carlos Xavier de Paula Miguel Rafael Joaquim José Gonzaga Pascoal Cipriano Serafim de Bragança e Bourbon

D. Pedro II

Nome completo: Pedro de Alcântara João Carlos Leopoldo

Salvador Bibiano Francisco Xavier de Paula Leocádio Miguel Gabriel Rafael Gonzaga

Listas não-numeradas

São equivalentes às listas com marcadores do MS-Word, por exemplo: Sintaxe:

<LI TYPE=”[disk/circle/square]”> item de uma lista </UL>

A diferença entre o resultado da marcação HTML e do Word está na mudança dos marcadores, assinalando os diversos níveis de listas compostas.

Exemplo: <UL>

<LI> Documentos básicos <LI> Documentos avançados <UL> <LI> formulários <UL> <LI> CGI </UL> <LI> contadores <LI> relógios </UL>

<LI> Detalhes sobre imagens </UL>

Resulta em:

Documentos básicos Documentos avançados

(13)

Disciplina: Programação para WEB

§ CGI o contadores o relógios

Detalhes sobre imagens

Listas Ordenadas

São listas que definem uma ordem para seus dados, que pode ser arábica, romana, por letras minúsculas ou maiúsculas.

Sintaxe:

TYPE: define como o marcador será apresentado. Pode ser:

1 – organiza a lista em algarismos arábicos (1,2,3,....). Este é o padrão; I – organiza a lista em algarismos romanos maiúsculos (I,II,III,...); i – organiza a lista em algarismos romanos minúsculos (i,ii,iii,...); A – organiza a lista em ordem alfabética maiúscula (A,B,C,...); a – organiza a lista em ordem alfabética minúscula (a,b,c,...).

START: dá início a uma numeração da lista no valor que for determinado no START.

VALUE: permite indicar um novo valor a qualquer item da lista e dali para frente a lista assumirá aquele valor em sua sequência.

Exercício de Fixação

Dado o texto a seguir: Fases de um projeto Web

1. Levantamento

I. Contato inicial com o Cliente II. Levantamento de requisitos III. Cronograma geral

2. Análise

I. Cronograma Detalhado

II. Diagramas e protótipos necessários para o desenvolvimento A. Protótipo do leiaute do site

B. Diagrama de entidade-relacionamento III. Documentação

C. Detalhamento dos requisitos D. Especificação detalhada do Projeto

(14)

Disciplina: Programação para WEB

3. Desenvolvimento

. Criação das páginas e imagens I. testes unitários e caixa branca 4. Teste

. Testes integrados

I. Testes de stress e carga II. Teste de caixa preta 10.Implantação

Determine o HTML que de deu origem a ele. Resposta:

<TITLE> Programando em HTML 4.0 </TITLE> </HEAD>

<BODY>

<P> Fases de um projeto Web</P> <OL>

<LI> Levantamento <OL TYPE="I">

<LI> Contato inicial com o Cliente <LI> Levantamento de requisitos <LI> Cronograma geral

</OL>

<LI> Análise <OL TYPE="I">

<LI> Cronograma Detalhado

<LI> Diagramas e protótipos necessários para o desenvolvimento

<LI> Protótipo do leiaute do site <LI> Diagrama de entidade-relacionamento </OL>

<LI> Documentação <OL TYPE="A" START="3">

<LI> Detalhamento dos requisitos

<LI> Especificação detalhada do Projeto </OL>

</OL>

<LI> Desenvolvimento <OL TYPE="I">

<LI> Criação das páginas e imagens <LI> testes unitários e caixa branca

</OL> <LI> Teste

<LI> Testes integrados <LI> Testes de stress e carga <LI>Teste de caixa preta

(15)

Disciplina: Programação para WEB

</OL>

<LI VALUE=10> Implantação </OL>

</BODY> </HTML>

(16)

Disciplina: Programação para WEB

Caracteres Especiais

HTML permite que caracteres especiais sejam representados por seqüências de escape, indicadas por três partes: um & inicial, um número ou cadeia de caracteres correspondente ao caractere desejado, e um ; final.

Três caracteres ASCII - <, >, e & têm significados especiais em HTML e são usados dentro de documentos seguindo a correspondência:

Entidade | Caractere

< < > > & &

Outras seqüências de escape suportam caracteres ISO Latin1.

Alguns editores, no entanto, mantêm a acentuação, sem usar as entidades de formatação. Quando isso acontece, deve-se inserir uma indicação do esquema de codificação ISO Latin1,escrevendo: