HTML -- Criação de Home Page

Transcrição

1 PPáággi innaa 1 LISTAS Na linguagem HTML existem elementos específicos para a criação de listas, que podem ser listas ordenadas (OL), listas sem ordenação (UL), ou listas de definição (DL). Um detalhe interessante é que podem ser criadas listas aninhadas, ou seja, listas dentro de listas. A seguir, veremos as características de cada uma delas. Liisttas Ordenadas <OL TYPE=... START=...>... </OL> São os elementos delimitadores de listas ordenadas (OL - Ordered List). A estrutura das listas ordenadas é bastante simples: entre os elementos de início e fim, os item da lista <LI></LI>. Os itens são apresentados em linhas consecutivas e precedidos por uma numeração atribuída pelo paginador. O parâmetro opcional TYPE define como será o tipo de numeração de cada linha. Os tipos disponíveis são: "A" (A, B,... Z), "a" (a, b,... z), "I" (I, II, III, IV, etc), "i" (i, ii, iii, iv, etc), e "1" (1, 2, 3, 4 etc). Se omitido, é utilizado o tipo padrão (1, 2, 3, 4 etc). O parâmetro opcional START define a partir de que elemento a numeração deve se iniciar. Ele deve receber como valor um número indicado em que posição a contagem deve se iniciar. Exemplo: ex-ol.htm <HTML> <HEAD> <TITLE>Listas Ordenas</TITLE> </HEAD> <BODY> <H2>Lista ordenada por número.</h2> <OL> <LI> Elemento 1 </LI> <LI> Elemento 2 </LI> <LI> Elemento 3 </LI> <LI> Elemento 4 </LI> </OL> <H2>Lista ordenada por letras, iniciando em D.</H2> <OL TYPE="A" START=4> <LI> Elemento 1 </LI> <LI> Elemento 2 </LI> <LI> Elemento 3 </LI> <LI> Elemento 4 </LI> </OL> </BODY> </HTML>

2 PPáággi innaa 2 Liisttas não ordenada <UL>...</UL> São os elementos de listas sem ordenação ( UL- Uniordered List ). A estrutura das listas sem ordenação é a mesma das listas ordenadas, sendo que, na apresentação, os itens serão precedidos por um marcador (bullet). No caso de listas sem ordenação aninhadas (listas dentro de listas), o paginador utilizará um marcador (bullet) diferente para os itens de cada lista. Exemplo: ex-ul.htm <HTML> <HEAD> <TITLE>Lista não-ordenadas</title> </HEAD> <BODY> <H2>Listas não-ordenadas</h2> <UL> <LI> Elemento 1 </LI> <LI> Elemento 2 </LI> <LI> Elemento 3 </LI> <LI> Elemento 4 </LI> </UL> <H2> Duas listas não-ordenadas aninhadas</h2> <UL TYPE="SQUARE"> <LI> Elemento 1 </LI> <LI> Elemento 2 <UL> <LI> Elemento 2.1 </LI> <LI> Elemento 2.2 </LI> <LI> Elemento 2.3 </LI> </UL> </LI> <LI> Elemento 3 </LI> <LI> Elemento 4 </LI> </UL> </BODY> </HTML> Como já vimos acima, <LI>...</LI> é o elemento que define um item de uma lista ordenada ou sem ordenação. O seu conteúdo pode ser texto, outras listas, imagens, links etc. Liistta de Deffiiniição <DL>...</DL> São as marcas que englobam uma lista de definição, idéias para a criação de glossários e coisas do gênero. A estrutura desta lista é diferente das outras, pois existem dois elementos - o

3 PPáággi innaa 3 termo a ser definido (DT), e a definição propriamente dita (DD). Na apresentação cada termo aparece em uma linha, e a respectiva definição na linha seguinte, deslocada para a direita. Exemplo: ex-dl.htm <HTML <HEAD> <TITLE>Listas de definição</title> </HEAD> <BODY> <H2>LISTAS DE DEFINIÇÃO</H2> <DL> <DT>HTML</DT> <DD>HIPER TEXT MARKUP LANGUAGE</DD> <DT>OL</DT> <DD>LISTAS ORDENADAS COM NUMERAÇÃO</DD> <DT>UL</DT> <DD>LISTAS SEM ORDENAÇÃO</DD> <DT>LI</DT> <DD>ELEMENTO DE LISTA</DD> </DL> <BR> <H2>LISTAS NÃO ORDENADA COMBINADAS<BR> COM UMA LISTA DE DEFINIÇÃO</H2> <DL> <DT>PARAMETROS DO ELEMENTO OL</DT> <DD> <UL> <LI>TYPE</LI> <LI>START</LI> </UL> </DD> <DT>PARAMETROS DO ELEMENTO IMG</DT> <DD> <UL> <LI>SRC</LI> <LI>ALT</LI> <LI>BORDER</LI> <LI>WIDTH</LI> <LI>HEIGHT</LI> <LI>USPACE</LI> <LI>HSPACE</LI> </UL> </DD> </DL> </BODY> </HTML> Ao fazer suas listas, lembre-se sempre que você pode combinar tipos diferentes para chegar ao resultado esperado.

4 PPáággi innaa 4 FORMULÁRIOS Interagindo com o visitante Com certeza você já deve Ter preenchido algum formulário em suas viagens pela Internet. Seja para cadastros, pesquisas ou mesmo envio de comentários, os formulários aumentam o poder de interação da Web e são uma forma diferenciada de receber dados dos visitantes de sua página. Todas as informações fornecidas um formulário são agrupadas e enviadas para um programa, mais conhecido como Script CGI, que é escrito especialmente para processar esses dados de acordo com alguma necessidade ou especificação. Atualização ou consultas a base de dados por , ou simplesmente a construção uma nova página (gerada a partir dos novos dados) são algumas das aplicações mais comuns. Você deve estar pensando que tudo isso é muito complicado e o melhor que você tem a fazer é esquecer esta história SCRIPTS CGI Os programas que associamos aos formulários são conhecidos como Scripts CGI. CGI (Common Gateway Interface) é um mecanismo que permite que os browsers executem programas nos servidores WWW. Scripts CGI são aplicações que servem para criar páginas dinâmicas ou para processar os dados de um formulário (como exemplo, o script AnyForm processa os dados passando-os por ). O CGI estabelece alguns padrões, e, se você seguir estes padrões, você pode usar qualquer linguagem de programação para escrever o seu. de formulários. Realmente escrever um script CGI não é uma tarefa fácil para a maioria dos internautas, mas existem vários CGI pre-fabricados disponíveis gratuitamente na Rede, que processam as informações fornecidas de forma transparente. Para utiliza-los, você só precisa saber pouco mais de meia dúzia de comandos HTML. Os pre-fabricados mais conhecidos na Internet são AnyForm, FormMail, CGI e MailMerge. Para apresentar mais este recurso da linguagem HTML, escolheremos o AnyForm para ensinar como colocar um formulário em uma home page. Para começar, nada como os bons e velhos exemplos! Exemplo: <HTML> <HEAD> <TITLE>Deixe aqui seus comentários!</title> em de

5 PPáággi innaa 5 </HEAD> <BODY> <FONT FACE= Arial SIZE= 4 COLOR= blue ><B><I> Deixe aqui seus comentários! </I></B></FONT> <FONT FACE= Arial SIZE= 3 > Olá! Obrigado por visitar o meu web site. <BR> Use este formulário para deixar aqui os seus comentários: <FORM ACTION=" METHOD="POST"> <INPUT TYPE="HIDDEN" NAME="AnyFormMode" VALUE="mail"> <INPUT TYPE="HIDDEN" NAME="AnyFormDisplay" VALUE=" <INPUT TYPE="HIDDEN" NAME="AnyFormTo" VALUE="[email protected]"> <INPUT TYPE="HIDDEN" NAME="AnyFormSubject" VALUE="Comentários sobre O WebSite"> Entre com o seu <INPUT TYPE="TEXT" NAME="AnyFormFrom" SIZE="40"> Entre com o seu nome: <INPUT TYPE="TEXT" NAME="Nome" SIZE="40"> Você gostou da minha página: <INPUT TYPE="RADIO" NAME="Gostou" VALUE="Sim">Sim <INPUT TYPE="RADIO" NAME="Gostou" VALUE="Mais ou Menos" CHECKED> Mais ou Menos <INPUT TYPE="RADIO" NAME="Gostou" VALUE="Não">Não Qual a página de que você mais gostou? <SELECT NAME="Melhor Página"> <OPTION VALUE="Links">Links <OPTION VALUE="Curriculum">Curriculum <OPTION VALUE="Galeria">Galeria de Fotos <OPTION VALUE="Clipart">Biblioteca Imagens </SELECT> Deixe aqui os seus comentários: <BR>

6 PPáággi innaa 6 <TEXTAREA NAME="Comentarios" ROWS="5" COLS="40"></TEXTAREA> Você gostaria que eu responde-se a este seu comentário? <INPUT TYPE="CHECKBOX"NAME="Quer Resposta" VALUE="SIM">Sim <INPUT TYPE="SUBMIT" VALUE="Enviar os Comentários"> <INPUT TYPE="RESET"VALUE="Limpar todos os campos"> </FORM> </FONT> </BODY> </HTML> ELEMENTOS HTML para Formulláriios 1. <FORM ACTION=... METHOD=... TARGET=...>... </FORM> Estes são os elementos que delimitam um formulário numa página. O parâmetro ACTION (ação) deve conter o endereço do programa que vai receber os dados do formulário. O endereço do AnyForm é O parâmetro METHOD (método) define como os dados serão transmitidos para o programa que os processará. Ele deve Ter os valores GET ou POST, e a diferença entre eles é a dada pela forma que cada um empacota esses dados. Normalmente, nas instruções do programa que você vai usar, é indica o valor a ser usado, portanto você não precisa se preocupar com isso. Com o AnyForm deve-se usar POST. O parâmetro TARGET (alvo) é opcional e necessário quando você está usando frames, e deseja que a resposta ao formulário seja exibida em um frame diferente do que está o formulário. 2. <INPUT TYPE=... NAME=... VALUE=... SIZE=... MAXLENGHT=... CHECKED> INPUT significa entrada de dados, logo este é um dos elementos que determina como será a entrada de dados nos campos de um formulário. O parâmetro TYPE (tipo) é muito importante pois define o tipo do elemento: caixa de texto, botão de escolha, ou botão simples.

7 PPáággi innaa 7 O parâmetro NAME deve conter o nome, ou identificador, do campo e o parâmetro VALUE pode conter um valor predefinido para o campo. É o elemento INPUT que define o formato da entrada dos dados no formulário. Use-o para montar caixas de texto, botões e até caixas de verificação de senhas. TIPOS DE ELEMENTOS INPUT 2.1 <INPUT TYPE=TEXT NAME=... VALUE=... SIZE=... MAXLENGHT=...> O valor TEXT (texto) no parâmetro TYPE indica que o campo será de texto, ou seja, um campo onde você digita os dados. O parâmetro VALUE (valor), neste caso, pode ser usado se você quiser definir um valor prévio para o campo, de tal forma que, quando a página for carregada, este valor já venha preenchido. O parâmetro SIZE (tamanho) configura o tamanho do campo e é baseado no número de caracteres. Se você quiser um campo com tamanho de 40 caracteres, deverá colocar SIZE=40. Note, porém, que este valor não limita o campo em 40 caracteres, ele somente define o tamanho com que será mostrado na página. O que define o número máximo de caracteres que podem ser digitados é o parâmetro MAXLENGHT (comprimento máximo), que é opcional. Usamos este tipo de campo para definir um campo AnyFormFrom e Nome. 2.2 <INPUT TYPE=PASSWORD NAME=... VALUE=... SIZE=... MAXLENGHT=...> Com o valor PASSWORD (senha) no parâmetro TYPE, tudo funciona da mesma forma que o valor TEXT, exceto que todas as letras digitadas aparecem como um asterisco "*" (tal como quando você digita sua senha para se conectar à internet). 2.3 <INPUT TYPE=RADIO NAME=... VALUE=... CHECKED> O valor RADIO no parâmetro TYPE define botões de escolha. Eles são usados para questões onde somente uma opção pode ser selecionada. O parâmetro NAME, neste caso, deve ser igual para todos os campos deste tipo, pois estará identificando a questão formulada. O parâmetro VALUE deve conter o valor do campo, que será passado ao programa.

8 PPáággi innaa 8 O parâmetro CHECKED deve ser usado quando você deseja que uma das opções esteja selecionada como padrão. 2.4 <INPUT TYPE=CHECKBOX NAME=... VALUE=... CHECKED> O valor CHECKBOX no parâmetro TYPE define botões de "checagem". A tradução do termo checkbox é meio difícil, mas, ao contrário dos botões de escolha (do tipo RADIO), ele deve ser usado quando uma ou mais opções são válidas. O parâmetro NAME, neste caso, deve ser diferente para cada cada campo. O parâmetro VALUE deve conter o valor do campo, que será passadi ao programa interpretador do formulário. O parâmetro CHECKED pode ser usado se você desejar que a opção esteja seleciona como padrão. 2.5 <INPUT TYPE=RESET VALUE=...> O valor RESET no parâmetro TYPE define um botão que limpa todos os campos, colocando os mesmos valores de quando a página foi carregada. No parâmetro VALUE, pode-se definir o que estará escrito no botão. Caso nenhum valor seja definido, aparecerá escrito somente "Reset". 2.6 <INPUT TYPE=SUBMIT NAME=... VALUE=...> O valor SUBMIT no parâmetro TYPE define um botão que aciona o envio das informações preenchidas no formulário ao programa interpretador (aquele definido no parâmetro ACTION do elemento FORM). O parâmetro VALUE define o que estará escrito no botão. Caso nenhum valor seja definido, aparecerá escrito "Submit". Para definir o botão "Enviar os comentários", usamos este tipo de elemento. 2.7 <INPUT TYPE=IMAGE NAME=... SRC=... ALT=...> Alternativamente ao botão tipo SUBMIT, pode-se usar uma imagem. Para isso, existe o tipo IMAGE. Neste caso, passam a existir os parâmetros SRC e ALT normalmente usados no elemento que define uma imagem. O parâmetro SRC define o endereço ou nome do arquivo da imagem. O parâmetro ALT, opcional, define o texto que será mostrado caso a imagem não seja carregada. 2.8 <INPUT TYPE=HIDDEN NAME=... VALUE=...> O valor HIDDEN (escondido) no parâmetro TYPE define dados que devem ser passados ao programa interpretador, mas que não que devem aparecer para quem está vendo a sua página.

9 PPáággi innaa 9 Neste caso, NAME identifica o dado e VALUE define o valor que deve ser passado. 3. <SELECT NAME=... SIZE=...> <OPTION VALUE=...> <OPTION VALUE=...>... </SELECT> O elemento SELECT possibilita definir uma lista de opções para o visitante escolher. DICA! Você certamente já viu na Internet menus para escolher páginas e seções de um site. Eles se abrem com o clique do mouse e lhe permitem escolher um ou mais itens. Eles são feitos com o elemento SELECT. O parâmetro NAME define o nome desta lista, e SIZE define quantos elementos serão exibidos na tela simultaneamente. Se omitido, somenteuma opção aparecerá por vez. Cada opção da lista é definida através de um elemento OPTION e o parâmetro VALUE deste elemento é que determinará o valor de cada opção. 4. <TEXTAREA NAME=... ROWS=... COLS=...>... </TEXTAREA> O elemento TEXTAREA (área de texto) permite definir um campo de texto com varias linhas. O parâmetro ROWS define o número de linhas da caixa de texto, e o parâmetro COLS define quantos caracteres (colunas) cada linha possui. O parâmetro NAME define o nome da caixa de texto. COMO USAR O AnyForm Com os elementos apresentados, você está apto a criar qualquer formulário na Web. Como falamos no início, o programa que usamos em nosso exemplo chama-se AnyForm. O AnyForm envia os dados preenchidos no formulário para um que você indicar. Este é um programa público e você pode usa-lo nos formulários em sua página sem depender do seu provedor. Para fazer os fomulários, não é necessário estar conectado, mas para testá-los é, pois, lembre-se, o programa não fica no seu computador, mas sim em um servidor, que no caso AnyForm está localizado na Univesidade de Kentucky nos Estados Unidos.

10 PPáággi innaa 10 O programa AnyForm ( estabelece que o elemento FORM deve ser da seguinte forma: <FORM ACTION= METHOD=POST> Alem disso, alguns dados precisam sempre ser definidos. São eles: AnyFormMode: deve ser preenchido sempre com o valor Mail. AnyFormDisplay: pode ser preenchido com Short, Standard, ou com o endereço de um página (será exibida após os dados serem enviados). AnyFormTo: deve conter o de quem receberá os dados do formulário. AnyformFrom: deve conter o de quem está preenchendo o formulário. AnyFormSubject: deve conter o assunto do que a pessoa receberá com os dados do formulário (tal como quando você envia um mail para alguém). Você pode definir estes valores da forma que você quiser, usando, é claro, algum dos elementos HTML que acabamos de mostrar. No nosso exercício, você pode ver que todos os dados foram definidos como HIDDEN, exceto o AnyFormFrom, pois deve ser preenchido pelo visitante. TABELAS Assim como as listas as listas que você viu, no HTML existem elementos específicos para a criação e formatação de tabelas. O recurso de tabelas é muito interessante e muito usado nas páginas Web. O conceito é o mesmo conhecido usualmente: ela tem linhas e colunas, e na interseção delas estão as células. Na linguagem HTML, você pode inserir nas células tudo que normalmente faz parte do corpo de um documento, como textos, links, imagens, listas e até outras tabelas. Ellementtos Básiicos de Tabellas <TABLE>...</TABLE> São as marcas que englobam a definição de uma tabela. Todas as demais marcas referentes a tabelas - linhas e células - somente serão consideradas se incluídas entre <TABLE> e </TABLE>. <CAPTION>...</CAPTION>

11 PPáággi innaa 11 Trata-se de um elemento opcional que define o título da tabela, e deve constar entre as marcas que definem a tabela, mas separado das marcas que definem linhas e colunas. Sem parâmetros, o título é apresentado acima da tabela e centralizado. <TR>...</TR> Table Row ou linha de Tabela Este é o elemento utilizado na definição de linhas de tabelas. Tabelas são definidas em linhas, sendo as linhas compostas de células. O número de linhas de uma tabela corresponde ao número de <TR></TR> existentes. <TD>...</TD> Table Data ou Dado de Tabela Marcas que delimitam as células que compõem as linhas, e assim sendo devem estar inseridas entre marcas de linhas. Uma célula pode conter tudo o que normalmente consta do corpo de um documento HTML - links, referências a imagens, textos, e até tabelas. O alinhamento padrão de uma célula é à esquerda horizontalmente e centralizado verticalmente, e caso o número de células varie e uma linha para outra, as linhas com menos células são completadas à direita com células em branco. <TH>...</TH> Table Header ou Cabeçalho de Tabelas Elemento que define células de cabeçalhos têm características idênticas a células de dados definidas por <TD>, a não ser pelo alinhamento default (padrão) horizontal, que é centralizado, e pela utilização de fonte em negrito. Com os elementos básico descritos acima você já pode construir uma tabela e visualizá-la no seu browser. No exemplo abaixo, você tem acesso a uma tabela básica. Exemplo1: <html> <head> <title>tabela</title> </head> <body> <div aling="center"> <center> <table border="2" cellspacing="1" width="77%" height="50%"> <tr> <td width="37%" height="19"></td>

12 PPáággi innaa 12 <td width="33%" height="19"></td> <td width="35%" height="19"></td> <td width="35%" height="19"></td> </tr> <tr> <td width="37%" height="19"></td> <td width="33%" height="19"></td> <td width="35%" height="19"></td> <td width="35%" height="19"></td> </tr> </table> </center> </div> </body> </html> Parâmetros Estes elementos básicos, entretanto, possuem alguns parâmetros que permitem um maior controle sobre alguns detalhes da apresentação da tabela. Nasa Informatica