Escolar Documentos
Profissional Documentos
Cultura Documentos
PROGRAMAO WEB
Curso Tcnico de Nvel Mdio em Informtica
Goinia / 2011
Av. Alexandre de Morais, n 450. Qd. rea, Lt. rea, Anexo rea C, Parque Amaznia Goinia Gois
CEP: 74.840-570 - Goinia / Gois
Fone: (62) 3548-3301
ORGANIZAO DO MATERIAL
Prof. Davi Taveira Alencar Alarco
REVISO TCNICA
Prof. Davi Taveira Alencar Alarco
REVISO
Prof Aparecida Caixeta
FORMATAO
Prof. Davi Taveira Alencar Alarco
FEVEREIRO 2011
Av. Alexandre de Morais, n 450. Qd. rea, Lt. rea, Anexo rea C, Parque Amaznia Goinia Gois
CEP: 74.840-570 - Goinia / Gois
Fone: (62) 3548-3301
SUMRIO
1. HTML BSICO ................................................................................................................................................ 1
1.1 DEFINIO ................................................................................................................................................................................................ 1
1.2 REQUISITOS PARA O DESENVOLVIMENTO DE UMA PGINA WEB ............................................................................................. 1
1.3 TAGS
1
2. CARACTERES ESPECIAIS.......................................................................................................................... 12
3. IMAGENS ........................................................................................................................................................ 12
4. LINKS 14
4.1 LINKS PARA O MESMO DIRETRIO ................................................................................................................................................... 14
4.2 LINKS PARA OUTRO DIRETRIO ....................................................................................................................................................... 16
4.3 PARMETRO NAME .............................................................................................................................................................................. 16
5. LISTAS 17
5.1 - CRIANDO LISTAS ORDENADAS ....................................................................................................................................................... 17
5.2 - CRIANDO LISTAS NO ORDENADAS .............................................................................................................................................. 18
6. TABELAS ........................................................................................................................................................ 28
6.1 - CONSTRUINDO TABELAS COM O ELEMENTO TABLE ................................................................................................................ 28
7.2.1 GET 34
7.2.2 POST........................................................................................................................................................... 34
7.2.3 INPUT ......................................................................................................................................................... 35
7.2.4 TEXTAREA .................................................................................................................................................. 37
7.2.5 SELECT ........................................................................................................................................................ 37
7.2.6 Exemplo completo de formulrio............................................................................................................... 38
8. FRAMES .......................................................................................................................................................... 40
Av. Alexandre de Morais, n 450. Qd. rea, Lt. rea, Anexo rea C, Parque Amaznia Goinia Gois
CEP: 74.840-570 - Goinia / Gois
Fone: (62) 3548-3301
8.1 - ESTRUTURA.......................................................................................................................................................................................... 40
8.2 - SINTAXE ................................................................................................................................................................................................ 41
8.3 FRAMESET............................................................................................................................................................................................ 41
8.4.1 SRC 43
8.4.2 - NAME.......................................................................................................................................................... 43
8.4.3 SCROLLING ................................................................................................................................................. 44
8.4.4 NORESIZE ................................................................................................................................................... 44
8.4.5 TARGET ...................................................................................................................................................... 45
8.5 BORDER ................................................................................................................................................................................................ 45
47
ALGORITMO
Descrio de um conjunto de aes que, quando obedecido, dentro de um padro de
comportamento definido, resulta uma sucesso finita de passos, atingindo-se o objetivo.
COMENTRIOS
Informaes auxiliares que facilitam o entendimento do algoritmo.
CONSTANTES
Valores inseridos em cada parte da memria do computador, que permanecem os
mesmos do incio ao fim do algoritmo.
CONSTANTES LITERAIS
Todo e qualquer valor literal, tambm conhecido por alfanumricos (conjunto
composto por letras, dgitos ou smbolos especiais: -, %, $, etc), que devem ser colocados
entre aspas.
CONSTANTES LGICAS
So os valores lgicos verdadeiro e falso.
CONSTANTES NUMRICAS
Todo e qualquer valor numrico positivo ou negativo.
EXPRESSES LITERAIS
Expresses que utilizam operadores e/ou variveis literais que tm como resultado
valores literais. Diferentemente das expresses aritmticas, as literais aceitam somente o
operador de concatenao.
EXPRESSES LGICAS
Expresses compostas por expresses relacionais com operadores lgicos. As lgicas
retornam valores lgicos.
EXPRESSES RELACIONAIS
Expresses compostas por expresses relacionais com operadores relacionais. As
relacionais retornam valores lgicos.
FLAG OU MARCA
Tcnica que marca um evento que deve ocorrer com uma varivel para indicar o
trmino de uma repetio.
FLUXOGRAMA
Modelo de representao que utiliza figuras para representar o fluxo dos dados e os
comandos do algoritmo.
LGICA
Utilizada para ordenar e corrigir pensamentos ou aes voltados para a soluo de
problemas.
APRESENTAO
As mudanas aceleradas no sistema produtivo exigem uma permanente atualizao
nas capacitaes, qualificaes e habilitaes existentes e a identificao de novos perfis
profissionais. Para tanto, a Educao Profissional demanda importantes estratgias que
possibilitem aos cidados efetivo acesso s conquistas cientficas e tecnolgicas da sociedade.
habilidade manual, somam-se s novas competncias relacionadas com a
inovao, a criatividade, o trabalho em equipe e a autonomia na tomada de decises mediada
por tecnologias da informao.
O Centro de Educao Profissional Sebastio de Siqueira CEPSS busca
diversificar programas e cursos, desenvolvendo projetos de capacitao, qualificao e
habilitao do trabalhador com a misso de promover a educao profissional e a pesquisa, de
modo a contribuir para o desenvolvimento regional e a melhoria das condies de vida da
populao, em consonncia com os requisitos da sociedade e do setor produtivo, a fim de que
se torne referncia nessa modalidade de ensino.
1. HTML BSICO
1.1 Definio
HTML significa Hyper Text Markup Language e a linguagem de marcao de hipertexto,
ou seja, a linguagem na qual so escritas as pginas da Web interpretada pelo navegador.
As informaes esto ligadas na forma de pginas ligadas entre si. A pgina transferida de
um computador remoto para o usurio, onde o browser faz o trabalho de interpretar os cdigos
naquele documento e mostra a pgina que o usurio v.
A Web est estruturada em dois princpios bsicos: HTTP (Hiper Text Transfer Protocol) e
HTML (Hiper Text Markup Language). HTTP o protocolo de transferncia de hipertexto, ou seja,
o protocolo que permite a navegao na Web, com o simples clicar do mouse sobre o texto (ou
imagem) que esteja associado a outro link.
1.3 TAGs
Os comandos HTML so chamados de TAGs. Apresentam marcas padres que so
utilizadas para fazer indicaes a um browser. Assim como em outras linguagens, os comandos tm
uma sintaxe prpria e seguem algumas regras:
As TAGs aparecem sempre entre sinais de menor que (<) e maior que (>);
Geralmente so utilizadas aos pares, sendo que a TAG de finalizao de um comando
qualquer finalizada com a precedncia de uma barra (/).
Exemplos:
TAG nico
<br>
TAG duplo
<center> XXX </center>
2. Iniciando um documento
Centro de Educao Profissional Sebastio de Siqueira CEPSS
Todo documento HTML fica contido entre os TAGs: <HTML> e </HTML>. Uma pgina
HTML possui trs partes bsicas: estrutura principal, um cabealho e um corpo de pgina.
Possui uma estrutura dividida em 4 TAGs bsicas:
<HTML> ... </HTML>
<HEAD> ... </HEAD>
<TITLE> ... </TITLE>
<BODY> ... </BODY>
rgos
rgos
rgos
rgos
rgos
com H6
Colegiados</H1>
Colegiados</H2>
Colegiados</H3>
Colegiados</H4>
Colegiados</H5>
centralizado: rgos Colegiados</CENTER></H6>
<B>...</B>
Aplica o estilo negrito.
<I>...</I>
Aplica o estilo itlico.
<U>...</U>
Aplica o estilo sublinhado (nem todos os browser o reconhecem).
<SUP>...</SUP>
sobrescrito
<SUB>...</SUB>
Faz com que o texto fique
subscrito
<PRE>...</PRE>
Utiliza a pr-formatao, ou seja, deixa o texto da maneira em que foi digitado.
<P>
A TAG responsvel pela quebra de pargrafos a <P> que finaliza o pargrafo e insere
automaticamente uma linha em branco entre pargrafos.
Sintaxe do comando:
<P align=posio> Texto do pargrafo.
Posio pode ser:
a) Left: alinhamento esquerda.
b) Center: centralizado
c) Right: alinhamento direita
Exemplo:
Crie um novo arquivo com o nome EstiloTexto e insira o cdigo abaixo:
<html>
<body>
<title>Curso de HTML</title>
<B>Estilo negrito.</B>
<br>
<I>Estilo itlico.</I>
<br>
<U>estilo sublinhado (nem todos os browser o reconhecem)</U>
<br>
<SUP>Texto sobrescrito.</SUP>
<br>
<SUB>Texto subscrito.</SUB>
<br>
<PRE>Este um pequeno texto com estilo pr-formatado.</PRE>
<p align="center"> Este um exemplo do primeiro pargrafo
centralizado.
<p> Este um exemplo do segundo pargrafo.
</body>
</html>
2.5.3 Fontes
Para inserir em sua pgina um texto com fontes de tamanhos, cores e tipos diferentes
utilizamos a TAG <FONT> ... </FONT>.
Sintaxe do comando:
<FONT size=n face=nome color=cor> TEXTO </FONT>
Onde:
a) SIZE=n: n varia de 1 a 7 e 3 o valor padro da maioria dos navegadores;
b) FACE=nome: nome da fonte a ser utilizada (Arial, Tahoma, etc);
c) COLOR=cor: cor da fonte definida em hexadecimal, ou atravs de um nome prdefinido de cores. Veja no captulo 9 desta apostila.
Exemplo:
Crie um arquivo chamado Fontes.html e insira o cdigo abaixo:
<html>
<body>
<title>Curso de HTML</title>
10
11
d) NOSHADE: Linha sem sombra. O padro a linha sombreada, utilizando esse atributo
temos uma linha sem sombra.
Exemplo:
Crie um arquivo chamado LinhaHorizontal.html e insira o cdigo abaixo:
<html>
<body>
Primeiro exemplo com a linha horizontal
<HR width="100%" align="left" size="2" color="silver" >
<br>
<center>Segundo exemplo com a linha horizontal</center>
<HR width="70%" align="center" size="3" color="blue" >
<br>
Terceiro exemplo com a linha horizontal
<HR width="30%" align="center" size="5" color="red" noshade>
<br>
</body>
</html>
12
2. Caracteres Especiais
3. IMAGENS
Para inserir uma imagem em uma pgina web utilizamos o comando, tag, <img src> e seus
atributos. Os formatos mais usados so o GIF e o JPG, ambos com compactao de pixels.
Sintaxe:
<IMG SRC="endereo da imagem WIDTH=n% HEIGHT=n%
ALIGN=posio ALT=texto>
Atributos:
a) WIDTH: Define a largura da imagem, o que pode ser feito em pixels (nmero
absoluto) ou em percentual da tela (com o smbolo de %).
b) HEIGHT: Define a altura da linha, o que pode ser feito em pixels (nmero absoluto)
ou em percentual da tela (com o smbolo de %).
13
14
4. LINKS
O principal poder do HTML vem da capacidade de interligar partes de um texto, imagens a
outros documentos.
A interligao entre documentos no se restringe somente s ligaes com outras pginas.
Em pginas muito longas onde um assunto tem vrios tpicos, podemos utilizar ndices onde os links
tm a funo de interligar os tpicos de um texto e que com apenas um clique em um dos tpicos do
ndice, o item exibido.
15
Onde:
a) A: abertura da TAG de link;
b) HREF=nomeDoArquivo.extenso: deve ser informado o nome completo do
arquivo que ser acessado;
c) Texto ou imagem: que servir como link;
d) /A: encerra a TAG de link.
Exemplo:
Edite o primeiro arquivo que criamos index.html.
Substitua o cdigo pelo o que est abaixo:
<html>
<head>
<title>
Curso de HTML
</title>
</head>
<body >
<h1><font face="arial" color="orange">MENU</font></h1>
<HR width="100%" align="left" size="2" color="silver" >
<A HREF
<br>
<A HREF
<br>
<A HREF
<br>
<A HREF
<br>
<A HREF
</body>
</html>
= "EstiloTexto.html">Estilo de Texto</A>
= "ExemploTitulo.html">Ttulos e Subttulos</A>
= "LinhaHorizontal.html">LinhaHorizontal</A>
= "Fontes.html">Fontes</A>
= "Imagem.html">Imagem</A>
16
17
5. LISTAS
5.1 - CRIANDO LISTAS ORDENADAS
Listas ordenadas so tambm denominadas listas numeradas, pois, quando um navegador
encontra uma TAG, iniciando uma lista ordenada, ele passa a mostrar cada item utilizando
nmeros, como 1, 2, 3, e assim sucessivamente.
Listas ordenadas so iniciadas pela TAG <OL>. Cada item utiliza a TAG <LI>.
Finalmente, </OL>.
Sintaxe:
<OL TYPE=formato START=n>
<LI> Tpico 1
<LI> Tpico 2
<LI> Tpico n
</OL>
Onde:
a) <OL>: incio da lista numerada;
b) TYPE=formato: o formato da numerao pode ser:
1: lista numrica (no necessrio ser definido);
A: lista alfabtica com letras maisculas;
A: lista alfabtica com letras minsculas;
I: Lista numrica com nmeros romanos maisculos;
I: lista numrica com nmeros romanos minsculos;
c) START=n: o valor inicial de uma lista numerada;
d) <LI>: tpicos da lista;
e) </OL>: fim da lista numerada;
Exemplo:
Crie um arquivo chamado Listas.html e insira o cdigo abaixo:
<html>
<title>Curso de HTML</title>
<body>
<center><h1>Listas Ordenadas</h1></center>
<h3>Cursos</h3>
<OL>
<LI>Graduao
<LI>Ps-Graduao Lato Sensu
<LI>Cursos de Ps-Graduao Stricto Sensu
</OL>
</body>
</html>
18
Onde:
a) <UL> : Incio da lista pontuada;
b) TYPE=formato: o formato do marcador pode ser:
disc: o marcador um ponto (padro utilizado pelos navegadores, no
precisa indicar);
square: o marcador um quadrado;
circle: o marcador um ponto.
c) <LI>: tpicos da lista, no necessrio encerrar a TAG;
d) </UL>: fim da lista pontuada
Exemplo:
Acrescente o cdigo abaixo no arquivo Listas.html:
<br>
<center><h1>Listas No Ordenadas</h1></center>
<h3>Membro da Comunidade Acadmica</h3>
<UL TYPE = disc>
<LI>Aluno
<LI>Docente
<LI>Tcnico Administrativo
</UL>
27
28
6. TABELAS
Tabelas correspondem a um timo formato para originar informaes, e por essa
razo que eles foram acrescentados linguagem HTML.
29
6.2.1 - BORDER
Um atributo opcional para ser usado com TABLE o atributo BORDER. Se ele
estiver presente, a tabela ser formatada com linhas de borda.
Ateno: Todas as explicaes acima como as que esto por vir, foram feitas, para
que voc possa saber o que significa a TAG em questo.
Exemplo:
<TABLE BORDER>
<CAPTION> Nota da primeira avaliao </CAPTION>
<TD>Notas/Alunos</TD>
<TH>Eduardo</TH>
<TH>Ana Lcia</TH>
<TH>Andra</TH>
<TR>
<TH>Notas</TH>
<TD>8,0</TD>
<TD>9.3<TD>
<TD>7.8</TD>
<TR>
<TH>No de Inscrio</TH>
<TD>376234809</TD>
<TD>387349048</TD>
<TD>502350432</TD>
</TABLE>
Veja o resultado:
O atributo BORDER pode tambm receber um valor que vai estabelecer qual a
espessura (alm da existncia) da linha de borda da tabela (BORDER="valor"). Se o valor
atribudo for 0 (zero), o BORDER funciona exatamente como o caso padro, sem o
BORDER. Dessa maneira, possvel colocar tabelas em maior destaque, atribuindo um valor
maior que 1 para o BORDER.
30
<TABLE BORDER=5>
<TR>
<TD>TESTE</TD>
<TD>TESTE2</TD>
<TD>TESTE3</TD>
</TR>
<TR>
<TD>TESTE4</TD>
<TD>TESTE5</TD>
<TD>TESTE6</TD>
</TR>
</TABLE>
Veja o resultado:
6.2.2 - ALIGN
Este atributo pode ser aplicado a TH, TD ou TR e controla o alinhamento do texto
dentro de uma clula, com relao as bordas laterais. Quando aplicado a TR, ele define o
alinhamento de toda uma linha da tabela.
O exemplo abaixo mostra como o ALIGN aceita os valores LEFT, CENTER ou
RIGHT, para alinhar esquerda, centralizar ou alinhar direita, respectivamente.
<TABLE BORDER>
<TD>Primeira clula</TD>
<TD>Segunda clula</TD>
<TD>Terceira clula</TD>
<TR>
<TD ALIGN="CENTER">Centro</TD>
<TD ALIGN="LEFT">Esquerda</TD>
<TD ALIGN="RIGHT">Direita</TD>
<TR>
</TABLE>
Veja o resultado:
31
6.2.3 - VALIGN
Pode ser aplicado a TH e TD e define o alinhamento do texto em relao s bordas
superior e inferior.
Aceite os valores TOP, MIDDLE, E BOTTOM para alinhar na parte de cima, no
meio e na parte de baixo, respectivamente.
Veja o exemplo:
<TABLE BORDER>
<TD>Teste de alinhamento</TD>
<TD VALIGN="TOP">TOP</TD>
<TD VALIGN="middle">MIDDLE</TD>
<TD VALIGN="bottom">BOTTOM</TD>
</TABLE>
Veja o resultado:
6.2.4 CELLSPACING
Este atributo compreende a distncia entre clulas e linhas. Deve ser adicionado dentro
da TAG <TABLE>. Como padro dos navegadores a distncia 2 pixels.
Exemplo:
6.2.5 CELLPADDING
Este atributo utilizado para formatar o espao entre o contedo de uma clula e
suas bordas em todos os sentidos. aplicado dentro da TAG <TABLE>.
Exemplo:
Acrescente o cdigo abaixo no arquivo Table.html:
32
6.2.6 ROWSPAN
Define quantas linhas uma mesma clula pode abranger. Por padro, na maioria dos
navegadores de Internet cada clula adicionada em uma tabela corresponde a uma linha. Pode
ser aplicado em TH ou TD, proporcionando o mesmo efeito.
Exemplo:
Acrescente o cdigo abaixo no arquivo Table.html.
<TABLE BORDER=1 WIDTH=380 CELLPADDING=7 ALIGN=center>
<TR>
<TD WIDTH=16% ROWSPAN=3> 3 linhas </TD>
<TD WIDTH=16%> coluna 2 </TD>
<TD WIDTH=16%> coluna 3 </TD>
<TD WIDTH=17%> coluna 4 </TD>
<TD WIDTH=17%> coluna 5 </TD>
</TR>
<TR>
<TD WIDTH=16%> coluna 2 </TD>
<TD WIDTH=16%> coluna 3 </TD>
<TD WIDTH=17%> coluna 4 </TD>
<TD WIDTH=17%> coluna 5 </TD>
</TR>
<TR>
<TD WIDTH=16%> coluna 2 </TD>
<TD WIDTH=16%> coluna 3 </TD>
<TD WIDTH=17%> coluna 4 </TD>
<TD WIDTH=17%> coluna 5 </TD>
</TR>
</TABLE>
6.2.7 COLSPAN
Este atributo define quantas colunas uma clula pode abranger. Por padro, na
maioria dos navegadores de Internet cada clula adicionada em uma tabela corresponde a uma
coluna. Pode ser aplicado em TH ou TD, proporcionando a mesma abrangncia.
<h3>Exemplo com COLSPAN</h3>
<TABLE BORDER=1 WIDTH=80% ALIGN=center>
<TR>
<TD WIDTH=24% COLSPAN=3>Clula com 3 colunas </TD>
<TD WIDTH=20%>coluna 4</TD>
Centro de Educao Profissional Sebastio de Siqueira CEPSS
<TD
</TR>
<TR>
<TD
<TD
<TD
<TD
<TD
</TR>
</TABLE>
33
WIDTH=20%>coluna 5</TD>
WIDTH=20%>coluna
WIDTH=20%>coluna
WIDTH=20%>coluna
WIDTH=20%>coluna
WIDTH=20%>coluna
1</TD>
2</TD>
3</TD>
4</TD>
5</TD>
34
<TABLE BORDER=0>
<TR>
<TD WIDTH=150 BGCOLOR=RED>VERMELHO </TD>
<TD WIDTH=150 BGCOLOR=BLUE>AZUL </TD>
<TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD>
</TR>
<TR>
<TD WIDTH=150 BGCOLOR=BLUE>AZUL</TD>
<TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD>
<TD WIDTH=150 BGCOLOR=BLUE> AZUL</TD>
</TR>
</TABLE>
7. FORMULRIOS
A linguagem HTML tambm permite que o cliente (navegador) interaja com o
servidor, preenchendo campos, clicando em botes e passando informaes.
O elemento FORM, da linguagem HTML, justamente o responsvel por tal
interao. Ele prov uma maneira agradvel e familiar para coletar dados do usurio atravs
da criao de formulrios com janelas de entrada de textos, botes, etc.
35
7.2.3 INPUT
A TAG <INPUT> especifica uma variedade de campos editveis dentro de um
formulrio. Ele pode receber diversos atributos que definem o tipo de mecanismo de entrada
(botes, janelas de texto, etc.), o nome da varivel associada com o dado da entrada, o
alinhamento e o campo do valor mostrado. O atributo mais importante do INPUT o NAME.
Ele associa o valor da entrada do elemento. Por
exemplo, quando voc for receber os dados, j, processados, ir vir o name: = resposta dada
pelo visitante. Outro atributo importante o TYPE. Ele determina o campo de entradas de
dados. Veja como se usa este atributo:
<INPUT TYPE="TEXT" NAME="nome">
Para mudar o tamanho, da janela padro, voc tem que colocar o comando SIZE. Por
exemplo:
<INPUT
desejado)
TYPE
"TEXT"
NAME="nome"
SIZE=8>(ou
nmero
NAME="voc
gostou
dessa
home
page?"
<INPUT TYPE="RADIO"
VALUE="nao">no<p>
NAME="voc
36
gostou
dessa
home
page?"
Repare:
7.2.3.3 - TYPE="PASSWORD"
Este comando serve para fazer um campo de senhas! Quando a pessoa digitar,
aparecer o sinal de "*"! O comando :
<INPUT TYPE="PASSWORD" NAME="SENHA" MAXLENGHT=6>
7.2.3.4 - TYPE="CHECKBOX"
Esse comando vlido quando apenas uma resposta, esperada. Mas nem sempre
esta a situao. O tipo CHECKBOX prov outros botes atravs dos quais mais de uma
alternativa, pode ser escolhida.
Definio dos checkboxs:
<INPUT TYPE="CHECKBOX"
Netscape<p>
<INPUT TYPE="CHECKBOX"
Explorer<p>
<INPUT TYPE="CHECKBOX"
<INPUT TYPE="CHECKBOX"
Java<P>
NAME="netscape" VALUE="net">
NAME="Explorer" VALUE="exp"> Internet
NAME="Mosaic" VALUE="mos"> Mosaic<P>
NAME="Hot Java" VALUE="hot"> Hot
Veja o resultado:
7.2.3.5 - TYPE="SUBMIT"
Esse o boto que submete os dados do formulrio quando pressionados, ou seja,
possibilitam, o envio, dos dados para o script que vai trat-los. Veja como se adiciona o
boto:
37
7.2.3.6 - TYPE="RESET"
No caso dos botes RESET, quando o boto clicado, ele automaticamente limpa
todos os campos j preenchidos no formulrio, voltando situao inicial.
<INPUT TYPE="RESET" VALUE="Limpar">
7.2.4 TEXTAREA
Para se limitar o tamanho do campo mostrado na tela, faz-se o uso dos atributos
COLS e ROWS que especificam, respectivamente, o nmero de colunas e linhas que se
deseja mostrar para o usurio. O atributo NAME obrigatrio, e especifica o nome da
varivel, que ser associada entrada do cliente (navegador). O atributo VALUE no aceito
nesse elemento, mas voc pode colocar j um texto da seguinte maneira. Veja como ele
colocado:
<TEXTAREA NAME="nome" COLS=20 ROWS=3>texto</TEXTAREA>
7.2.5 SELECT
Permite definir uma lista de opes, com barra de rolagem ou fixa na tela do
navegador. uma TAG que deve ser iniciada com <SELECT> e finalizada com </SELECT>.
Sintaxe:
<SELECT MULTIPLE NAME=nomeDaLista>
<OPTION SELECTED VALUE=valor de retorno> Valor Visualizado
<OPTION VALUE=Valor de retorno> Valor Visualizado 2
</SELECT>
38
Onde:
a) NAME: obrigatrio, serve para a identificao da lista;
b) OPTION: item da lista;
c) MULTIPLE: com este atributo a lista aparecer sempre aberta;
d) SELECTED: indica o valor padro da lista;
e) VALUE: valor a ser retornado ao servidor.
Exemplo:
<SELECT MULTIPLE NAME=Estados>
<OPTION SELECTED VALUE=SP> So Paulo
<OPTION VALUE=RJ> Rio de Janeiro
<OPTION VALUE=MG> Minas Gerais
<OPTION VALUE=ES> Esprito Santo
</SELECT>
<tr>
<td width="15%"><font size="3" face="arial">Nome</font></td>
<td><input type="text" name="nome" size="100"></td>
</tr>
<tr>
<td width="15%"><font size="3" face="arial">Tipo</font></td>
<td>
<select name="tipo">
<option >
<option value="1">COMISSOES TRANSITORIAS DE ESTUDOS
<option value="2">CONSELHOS DE DEPARTAMENTO
<option value="3">COMISSOES PERMANENTES DE UNIDADE
ADMINISTRATIVA
</select>
</td>
</tr>
<tr>
<td width="15%"><font size="3"
face="arial">Fundamento</font></td>
<td>
<TEXTAREA NAME="fundamento" COLS=50 ROWS=3></TEXTAREA>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<INPUT TYPE="SUBMIT" VALUE="Salvar">
</td>
</tr>
</table>
</FORM>
</body>
</html>
39
40
8. FRAMES
um recurso que permite dividir uma pgina de Internet em outras, na mesma
pgina. Nada mais que uma pgina que chama outras na pgina inicial que um documento
html que contm frames.
Em um determinado arquivo como o index.html, onde pode ser definido a estrutura
das novas janelas para o seu HTML.
8.1 - ESTRUTURA
Assim como o corpo do HTML, os FRAMES tem sua estrutura. Eles entram no lugar
do corpo, substituindo o <BODY></BODY> por <FRAMESET></FRAMESET>.
Exemplo:
<HTML>
<HEAD>
<TITLE> Ttulo do Documento </TITLE>
</HEAD>
<FRAMESET>
Sintaxe dos Frames
</FRAMESET>
</HTML>
41
8.2 - SINTAXE
Primeiramente devemos fazer um documento HTML para ele ser especificado pela
sintaxe de FRAMES, no caso chamado de Frame1.htm.
<HTML>
<HEAD>
<TITLE> Frame 1 </TITLE>
</HEAD>
<BODY>
<FONT SIZE=+1> <B> Frame n1 </B> </FONT>
</BODY>
</HTML>
8.3 FRAMESET
A primeira especificao o FRAMESET, que acompanhado pelas definies
ROWS e COLS.
8.3.1 - ROWS
Especifica o nmero de FRAMES e a altura de cada um. Exemplo:
<FRAMESET ROWS="20%,30%,50%">
<FRAME SRC="Frame1.html">
<FRAME SRC="Frame1.html">
<FRAME SRC="Frame1.html">
</FRAMESET>
Neste exemplo de cima, ele chama trs FRAMES, o 1 com 20% da tela, o 2 com
30% da tela, o 3 com 50% da tela (ambos em altura).
42
8.3.2 COLS
Especifica o nmero de FRAMES e a largura de cada um. Exemplo:
<FRAMESET COLS="20%,30%,50%">
<FRAME SRC="Frame1.html">
<FRAME SRC="Frame1.html">
<FRAME SRC="Frame1.html">
</FRAMESET>
Neste exemplo de cima, ele chama trs FRAMES, o 1 com 20% da tela, o 2 com
30% da tela, o 3 com 50% da tela (ambos em largura).
43
8.4 FRAME
A segunda especificao o FRAME, que acompanhado pelas definies SRC,
NAME, SCROLLING, NORESIZE, TARGET.
8.4.1 SRC
Especifica o documento de formato HTML chamado para o FRAME. Indispensvel,
por que sem ele s o documento aparecer vazio, s com as divises. Exemplo:
<FRAMESET COLS="20%,30%,50%">
<FRAME SRC="Frame1.html">
<FRAME SRC="Frame1.html">
<FRAME SRC="Frame1.html">
</FRAMESET>
8.4.2 - NAME
Especifica o nome do documento de formato HTML chamado para o FRAME.
extremamente necessrio para o uso do TARGET, que ser visto a seguir. Exemplo:
<FRAMESET COLS="20%,30%,50%">
<FRAME SRC="Frame1.html" NAME="Principal">
<FRAME SRC="Frame1.html">
<FRAME SRC="Frame1.html">
44
</FRAMESET>
8.4.3 SCROLLING
Define se o Frame ter barra de rolagem, o default Auto. Fornece as opes: Yes,
No, Auto.
a) Yes - Exibe a barra de rolagem independente do tamanho do documento.
b) No - No exibe a barra de rolagem, mesmo que o documento seja maior que o tamanho
especificado.
c) Auto - S exibe a barra de rolagem se o documento for maior que a rea especificada.
Exemplo:
<FRAMESET COLS="20%,30%,50%"
<FRAME SRC="Frame1.html" SCROLLING="no">
<FRAME SRC="Frame1.html" SCROLLING="yes">
<FRAME SRC="Frame1.html" SCROLLING="auto">
</FRAMESET>
8.4.4 NORESIZE
Impossibilita o usurio de mudar o tamanho da rea especificada do FRAME.
Por default o usurio pode mudar esta rea.
Exemplo:
<FRAMESET COLS="20%,30%,50%">
Centro de Educao Profissional Sebastio de Siqueira CEPSS
45
8.5 BORDER
Define qual a borda que o FRAME ter. Mais til na utilizao de
BACKGROUNDS iguais. Exemplo:
<FRAMESET COLS="20%,30%,50%" FRAMEBORDER="NO" BORDER=0>
<FRAME SRC="Frame1.html" FRAMEBORDER="NO" BORDER=0>
<FRAME SRC="Frame1.html" FRAMEBORDER="NO" BORDER=0>
<FRAME SRC="Frame1.html" FRAMEBORDER="NO" BORDER=0>
</FRAMESET>
46
9. TABELAS DE CORES
Esta tabela de cores pode ser usar quando quiser definir as cores de uma fonte de um
texto ou ento quando quiser definir o fundo de uma pgina. Deve-se usar o nome que est em
ingls.
47
10. CSS
10.1 O QUE CSS?
CSS a mesma coisa que Style Sheets e que Folhas de Estilo. Voc j deve ter visto
esses nomes em vrios lugares. CSS mais uma forma de aperfeioar seus documentos, o
CSS tem muitos tipos de definio aqui veremos muitas delas.
No que eles podem nos ajudar?
Economizar o seu tempo.
Diminuir o tamanho do cdigo de sua pgina.
Sua pgina ir carregar mais rapidamente.
Mais facilidade de manter e fazer alteraes na pgina.
Mais controle no layout da pgina.
48
todos os sinais de ponto-e-vrgula e colchetes nos lugares corretos. Por exemplo, aqui est
uma regra que diz que os pargrafos aparecero em fonte Times, 12 pontos, azul e recuados
meia polegada a partir da margem esquerda da pgina:
P {font-family: Times; font-size: 12pt; color: blue;
margin-left: 0.5in}
Note como fcil aplicar todas as declaraes ao elemento pargrafo (P) e como
cada declarao, exceto a ltima, seguida pelo caracter de ponto-e-vrgula exigido.
49
Agora, para utilizar os estilos definidos neste arquivo .css voc precisa adicionar a
tag a seguir ao cabealho da pgina, onde nome_do_arquivo uma referncia absoluta ou
relativa ao arquivo .css.
<LINK REL="STYLESHEET"
TYPE="text/css">
HREF="
OrgaoColegiado.css"
OBS: Voc deve inserir este texto entre as tags <HEAD>...</HEAD>, e colocar a
localizao correta do seu arquivo e seu nome.
10.3.2 ESTILOS INCORPORADOS
Se quiser criar um conjunto de estilos que se aplicam a uma nica pgina, voc pode
configurar os estilos exatamente como fizemos no exemplo dos estilos externos - mas em vez
de colocar as tags <STYLE>...</STYLE>, e as regras em um arquivo separado, coloque estas
tags na prpria pgina HTML. A estrutura bsica de uma pgina da web que utiliza estilos
incorporados semelhante ao seguinte cdigo:
<HTML>
<HEAD>
<TITLE>Exemplo
Estilos
Incorporados</TITLE>
TYPE="text/css">
<!-P {
background-color: #FFFFFF;
font-family:'Comic Sans MS';
font-size: 14pt
}
--></STYLE>
</HEAD>
</BODY>
</HTML>
<STYLE
text-decoration:
none"
Note que em vez das tags <STYLE>...</STYLE>, voc apenas utiliza um atributo
STYLE dentro da tag para definir o estilo. E, em vez de colocar as regras de CSS entre
colchetes, voc as coloca entre aspas, separando-as com ponto-e-vrgula como de costume.
50
51
52
<SPAN
53
bold;
font-
54
cursor
display
filter
float
font
@font-face
font-family
font-size
font-style
Fonte-variant
font-weight
height
@import
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-left
margin-right
margin-bottom
margin-top
overflow
55
Tipo de ponteiro do
mouse.
Se o elemento exibido e
o espao reservado
para ele.
Tipo de filtro aplicado ao
elemento.
Se o elemento flutua.
Estilo, variante, peso,
tamanho e altura da linha
do tipo de fonte.
Incorporao da fonte ao
arquivo HTML.
Tipo de fonte.
Tamanho da fonte.
Fonte itlico.
Fonte bold.
Peso da fonte de claro a
negrito.
Altura exibida ao
elemento.
Folha de estilo a
importar.
Posio do elemento em
relao a margem
esquerda da pgina.
Distncia entre as letras.
Distncia entre linhas de
base.
Tipo, imagem e posio
doestilo da lista.
Marcador de item de
lista.
Posio do marcador de
item da lista.
Marcador de item de lista
alternativo.
Tamanho de todas as 4
margens.
Tamanho da margem
esquerda.
Tamanho da margem
direita.
Tamanho da margem
inferior.
Tamanho da margem
superior.
Exibio de imagens que
so maiores do que suas
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
position
text-align
text-decoration
text-indent
text-transform
top
vertical-align
visibility
width
z-index
56
molduras.
Espao em torno de um
elemento em todos os
lados.
Espao a partir da
margem inferior de um
elemento.
Espao esquerda do
elemento.
Espao direita do
elemento.
Espao a partir da
margem superior do
elemento.
Inserir quebra de pgina
depois de um elemento.
Inserir quebra de pgina
antes de um elemento.
Como o elemento
posicionado na pgina.
Alinhamento do texto.
Sublinhado, sobrelinhado
ou riscado.
Recuo da primeira linha
dopargrafo.
Transformao para
todas maisculas,
minsculas ou inicial
maiscula.
Posio do elemento em
relao a parte superior
da pgina.
Alinhamento vertical do
elemento.
Se elemento visvel ou
invisvel.
Largura do elemento.
Posio do elemento na
pilha.
57
11. BIBLIOGRAFIA
Silva, Maurcio Samy Criando sites com HTML : sites de alta qualidade com
HTML e CSS. So Paulo: Novatec Editora, 2008.
Chicoli, Milton Guia Prtico de Criao de Sites - Html Css Javascript
Dreamweaver Hospedagem e Publicao de Sites. Rio de Janeiro: Digerati Books, 2009.
Robbins, Jennifer Niederst Html & Xhtml - Guia de Bolso. So Paulo: Alta Books,
2009.
UNICAMP Acessado em 02 de Fevereiro de 2011 - Estrutura de Dados e Lgica
de Programao - http://www.dca.fee.unicamp.br/cursos/EA876/apostila/HTML/node1.html.