LEITE COM BISCOITOS: março 2016

7 de março de 2016

Lista de caracteres especiais

Lista de tags

Forms

Um form é uma área que contém elementos de formulário em um documento HTML.

Esses elementos são responsáveis por permitir que o usuário entre com informações (como campos de texto, áreas de texto, menus, etc.) em um formulário. São definidos pela tag "<form>".

Os formulários são constantes nas páginas encontradas na internet e basicamente todo cliente de webmail tem elementos de formulário, mais precisamente campo de texto e campo de senha para poder fazer a entrada de seu login e senha. Mesmo que você não se lembre deles agora, provavelmente verá que eles são familiares depois de alguns exemplos.

Faremos nosso primeiro exercício exatamente em cima destes dois exemplos.

Faremos nosso primeiro exercício exatamente em cima destes dois exemplos:

<html>
<head>
<title>Estamos quase acabando, paciência com os forms</title>
</head>

<body>
<p>Veja se isto te lembra algo em clientes de e-mail</p>
<form>
Login:<input type="text" name="login" /><br />
Senha:<input type="password" name="password" />
</form>
</body>
</html>

Logo acima podemos ver algumas coisas a respeito dos forms. Uma delas é que eles não têm muita serventia se não tivermos outros elementos dentro deles, os "<input>" (Lembre-se de fechar a tag com um "/" no final dela. Como já disse, todas as tags devem ser fechadas!).

São eles os responsáveis por mostrar no navegador os campos que serão responsáveis por possibilitar a entrada de algum tipo de informação por parte do usuário. O atributo "type" determina o tipo do elemento, veja abaixo alguns deles:

text: Usado quando você quer inserir caracteres, números e afins no formulário.
password: Bem parecido com o "text" mas sua entrada de dados não aparecerá explicitamente para o usuário. Usada principalmente, como o próprio nome sugere, para a entrada de senhas.
radio: São os radio buttons, ou botões de opção. Elas permitem que o usuário seja capaz de escolher um elemento entre um número limitados deles.
checkbox: As check boxes, ou caixas de seleção, têm uma finalidade parecida com a dos botões, com a diferença de permitir que sejam selecionados mais de um elementos.
submit: O botão submit serve para enviar os dados.
reset: O botão reset serve para apagar todas as entradas do formulário.

Uma outra tag que é bem comum nas páginas é a "<select>" que geralmente também estão dentro de formulários. Elá terá sub-elementos que serão as tags "<option>" que serão valores que popularão o menu drop-down. O exemplo abaixo clarifica o seu uso:

<select name="servico">
         <option value="email">E-mail</option>
         <option value="agenda">Agenda</option>
         <option value="noticias">Notícias</option>
         <option value="jogos">Jogos</option>
</select>

Podemos usar os botões de opção para fazer algo semelhante ao select:

         <input type="radio" name="servico_botao" value="email" /> E-mail<br />
         <input type="radio" name="servico_botao" value="agenda" /> Agenda<br />
         <input type="radio" name="servico_botao" value="noticias" />
Notícias<br />
         <input type="radio" name="servico_botao" value="jogos" /> Jogos<br />

Os botões de opção precisam basicamente de dois atributos para funcionar corretamente. Um deles é o "name", que diz o grupo ao qual ele pertence. Os botões devem estar agrupados para quando os dados forem recuperados na página que receber o formulários, as ações corretas sejam tomadas. O atributo "value" é o valor do botão em si, dentro do grupo e sabendo qual o nome da opção, é possível tratar de maneira precisa o que deverá ocorrer com os dados do formulário.

O mesmo conceito de grupos e valores individuais também se aplica às caixas de seleção. Da mesma maneira elas devem ser agrupadas e depois receber um valor específico para cada uma delas. O exemplo abaixo mostra isso.

      E-mail: <input type="checkbox" name="servico_cb" value="email" /><br />
      Agenda: <input type="checkbox" name="servico_cb" value="agenda" /><br />
      Notícias: <input type="checkbox" name="servico_cb" value="noticias"
/><br />
      Jogos: <input type="checkbox" name="servico_cb" value="jogos" /><br />

Como você pode perceber, elas possuem igualmente os campos "name" e "value" que funcionam da mesma maneira.

É possível colocar alguns botões também, eles podem ter várias utilidades, mas usando apenas HTML é pouco provável que você encontre alguma utilidade prática para eles. De qualquer maneira, veja abaixo como utilizá-los:

<input type="button" value="Oi, eu sou um botão">

Não há muito mistério quanto à sua sintaxe, o tipo deve ser "button" e o atributo "value" dirá o que aparecerá no texto do botão.

Vamos agora tratar o caso de dois botões bem comuns em formulários, "submit" e "reset". Cada um deles é um tipo especial de elemento usados, respectivamente, para enviar o formulário e apagar tudo que foi entrado no mesmo. Para usá-los, o tipo (type) da tag "<input>" deve ser "submit" ou "reset". Além disso, você pode dar um outro nome para o botão, alterando o valor do atributo "value".

<input type="submit" value="Enviar" />
<input type="reset" value="Apagar" />

As linhas acima mostram o exemplo de um botão "submit" e um "reset", os dois estão com seus "value"s alterados para poder exibir nomes em português. Coloque-os em um documento de exemplo, junto com mais campos de formulário e clique em ambos para entender o funcionamento deles. O botão reset tem uma característica mais explícita, você verá os campos que já estavam preenchidos serem todos esvaziados, e é exatamente isso que ele deve fazer. No caso do "submit" os dados também serão apagados, mas algo mais acontece. Veja na barra de endereços do navegador que o URL será alterado de acordo com os dados que você tiver inserido. É exatamente dessa maneira que as páginas se comunicam.

É verdade que não faz muito sentido esse exercício, já que os dados inseridos não são utilizados para nada. O tratamento dessas informações é feita, de maneira mais básica, pelo CGI mas podem também ser usadas diversas linguagens de programação para os mais variados fins. Isso, porém, foge do escopo do presente material e portanto não será explicado.

Entretanto, fica aqui mais um instrução referente à formulários, eles podem ser usados para redirecionar à alguma outra página com as informações que foram fornecidas. Isso é feito através do atributo "action" da tag "<form>".

<form name="entrada" action="pagina_redirecionada.html">

Esse atributo está intimamente ligado ao botão "submit", uma vez que esse endereço será acessado ao clicar nele. Resumindo, você coloca em um formulário a ação que deverá ser desempenhada ao se clicar no botão "submit". O documento receberá as informações que estavam contidas no formulário e poderão, conseqüentemente, ser tratadas para algum fim específico. Faça o teste preenchendo um formulário e em seguida clicando no botão "submit" que redirecione para uma página local válida, você poderá ver que no final do URL haverão os dados que estavam no formulário da página anterior.

HTML - TABELAS

Tabelas

As tabelas são em HTML exatamente o que são em qualquer outro lugar. Elas servem para organizar os dados de uma maneira que fique mais fácil para as pessoas entenderem ou tornar mais rápida a comunicação em determinadas ocasiões.

Vamos diretamente ao uso dessas tabelas para depois entrarmos em detalhes. Crie um arquivo chamado "tabelas.html" e coloque o seguinte código.

<html>
<head>
<title>Uma página com tabelas</title>
</head>

<body>
<table border="1">
<tr>

        <th>Parte do computador</th>
        <th>O que ela faz</th>
</tr>
<tr>
        <td>Teclado</td>
        <td>Onde você digita</td>
</tr>
<tr>
         <td>Mouse</td>
         <td>Onde você mexe a seta</td>
</tr>
</table>
</body>
</html>

Você vai criar uma tabela com a tag "<table>". A partir daí, você deve definir as linhas com a tag "<tr>" e as colunas com "<td>". Cada um dos valores colocados entre as tags "<td>" é considerado estar dentro de uma célula. A tag "<th>" é usada para o cabeçalho da tabela, um texto destacado para explicar um pouco sobre a coluna em questão.

O atributo "border" da tag "<table>" determina a largura da borda da tabela, experimente usar um valor diferente para ver o resultado.

Agora insira dentro da tabela, depois dos outros itens as seguintes linhas:

<tr>
<td>Adesivo no monitor</td>
<td></td> 
</tr>

Recarregue o arquivo e você notará que a célula onde não há nada também ficará sem borda, o que pode dar uma aparência desagradável para o usuário, solucione o problema colocando o caracter especial " " nela.

<tr>
<td>Adesivo no monitor</td>
<td> </td> 
</tr>

Ele faz com que serja inserido um caracter em branco (non-breaking space), diferente de se colocar um espaço normal lá, que o navegador deixa de interpretar. Dessa forma, você engana a tabela como se tivesse realmente algo escrito lá, que de fato há, mas o usuário não verá isso.

É possível também fazer tabelas sem bordas, dependendo do seu objetivo:

<h4>A mesma tabela, sem bordas e com legenda</h4>
<table border="0">
<caption align="top"><i>Minha legenda</i></caption>
<caption align="bottom"><i>Minha outra legenda, abaixo da tabela</i></caption>
<tr>
          <th>Parte do computador</th>
          <th>O que ela faz</th>
</tr>
<tr>
          <td>Teclado</td>
          <td>Onde você digita</td>
</tr>
<tr>
          <td>Mouse</td>
          <td>Onde você mexe a seta</td>
</tr>
<tr>
          <td>Adesivo no monitor</td>
          <td> </td> 
</table>

Além da borda de tamanho zero (ou sem borda, se preferir), temos mais duas tags que até então não havíamos apresentado, uma delas se refere à tabela e a outra não. A tag "<caption>" serve para se colocar uma legenda na tabela e pode carregar o atributo "align", que determinará se ela aparecerá em cima ou em baixo. A outra tag, "<i>", pode ser usada em qualquer lugar do texto e serve para deixar o texto que está entre seu início e fechamento em itálico, assim como a tag "<b>" faz ao passar para negrito.

Agora mostraremos alguns exemplos onde queremos que um determinado campo ocupe mais de uma célula.

<h4>Telefone de algumas pessoas que acabei de inventar</h4>
<table border="1">
<tr>
           <th>Nome</th>
           <th colspan="2">Telefone</th>
</tr>
<tr>
           <td>João Frango</td>
           <td>33 2548 3549</td>
           <td>33 2544 3578</td>
</tr>
<tr>
           <td>Valpano</td>
           <td>44 2578 3258</td>
           <td>44 2566 5799</td>
</tr>
</table>
<br />
<h4>Telefone das mesmas pessoas que acabei de inventar, formatando diferente</h4>
<table border="1">
<tr>
         <th>Nome</th>
         <td>João Frango</td>
         <td>Valpano</td>
</tr>
<tr>
         <th rowspan="2">Telefone</th>
         <td>33 2548 3549</td>
         <td>33 2544 3578</td>
</tr>
<tr>
         <td>44 2578 3258</td>
         <td>44 2566 5799</td>
</tr>
</table>

O exemplo acima, além da utilidade proposta, mostra mais uma coisa: os cabeçalhos não precisam necessariamente ser o primeiro elemento da coluna. Na segunda tabela percebemos que ele está na verdade referindo-se à linha onde ele está. Voltando ao tema, usamos os atributos "colspan" e "rowspan" para estendermos uma célula, ambos estão disponíveis tanto para "<th>" quanto para "<td>". O valor do atributo determinará quantas células o campo ocupará, "colspan" para colunas e "rowspan" para linhas.

Vale notar que é possível alinhas tabelas e colocar quaisquer outras tags dentro das células. É possível, por exemplo, fazer uma lista dentro de uma célula de uma tabela, inclusive aninhá-las. Só tome cuidado para não fazer algo tão complicado que você possa se perder ao desenvolver.

Outra possibilidade ao trabalhar com tabelas é alterar a distância entre o texto e as bordas da tabela. Esse parâmetro é controlado pelo atributo "cellpadding" e pode ser observado no exemplo a seguir.

<h4>Tabela sem espaçamento entre texto e bordas</h4>
<table border="1" cellpadding="0">
<tr>
          <td>1</td>
          <td>2</td>
</tr>
<tr>
          <td>3</td>
          <td>4</td>
</tr>
</table>

<br />
<h4>Tabela com espaçamento entre texto e bordas</h4>
<table border="1" cellpadding="15">
<tr>
          <td>1</td>
          <td>2</td>
</tr>
<tr>
         <td>3</td>
         <td>4</td>
</tr>
</table>

Além de espaçamento entre texto e bordas também podemos deixar uma distância entre uma célula e outra com o atributo "cellspacing", confira nesse outro exemplo.

<h4>Tabela sem espaçamento entre células</h4>
<table border="1" cellspacing="0" bgcolor="yellow">
<tr>
           <td>1</td>
           <td>2</td>
</tr>
<tr>
           <td>3</td>
           <td>4</td>
</tr>
</table>

<br />
<h4>Tabela com espaçamento entre células</h4>
<table border="1" cellspacing="15">
<tr>
         <td bgcolor="yellow">amarelo</td>
         <td bgcolor="red">vermelho<td>
</tr>
<tr>
        <td bgcolor="green">verde</td>
        <td bgcolor="blue">azul</td>
</tr>
</table>

Tanto a tabela toda como cada uma das células tratam do atributo background, assim como fizemos anteriormente com a tag "<body>". Desse modo, é possível alterar a cor desses elementos, como você pode observar no exemplo acima.

Ainda podemos alinhar o texto dentro de uma célula pelo atributo "align" da mesma maneira como fizemos em outros lugares, o exemplo abaixo é uma alteração daquela nossa "agenda de telefones".

<h4>Telefone das mesmas pessoas que acabei de inventar, formatando diferente</h4>
<table border="1">
<tr>
          <th>Nome</th>
          <td align="center">João Frango</td>
          <td align="center">Valpano</td>
</tr>
<tr>
          <th rowspan="2">Telefone</th>
          <td>33 2548 3549</td>
          <td>33 2544 3578</td>
</tr>
<tr>
          <td>44 2578 3258</td>
          <td>44 2566 5799</td>
</tr>
</table>

Note que o nome das pessoas agora estão centralizados nas células.

Existem outros atributos que não apresentaremos aqui para não alongarmos demais essa parte, com o conteúdo apresentando até aqui já é possível construir tabelas bem completas.

HTML - LISTAS

Listas

Nós temos três tipos de listas em HTML, listas ordenadas, listas não ordenadas e listas de definições. Uma lista não ordenada simplesmente coloca um marcador antes de cada um de seus elementos enquanto a lista ordenada numera-os. Além delas temos a lista de definições, que se difere por não ser uma lista de itens. Ela é uma lista de termos e definições. Vamos mostrar alguns exemplos para que você veja melhor. Crie um novo arquivo de texto como nome "listas.html".

<html>
<head>
<title>Alguns exemplos de listas</title>
</head>
<body>

<p>Vejamos abaixo algumas listas e suas diferentes características.</p>
<br />

<p>Primeiramente, uma lista não ordenada.</p>

<h4>Frutas</h4>
<ul>

     <li>Maçã</li>
     <li>Morango</li>
     <li>Laranja</li>
     <li>Limão</li>
     <li>Abacaxi</li>
</ul>

<br />

<p>Veja agora uma lista ordenada.</p>

<h4>Resultados finais do campeonato de Fórmula 1 de 1991.</h4>
<ol>

     <li>Senna</li>
     <li>Mansell</li>
     <li>Patrese</li>
     <li>Berger</li>
     <li>Prost</li>
     <li>Piquet</li>
</ol>

<br />
<p>Vamos definir algumas coisas abaixo.</p>

<h4>Bebidas</h4>
<dl>
<dt>Café</dt>
          <dd>Bebida quente e preta</dd>
<dt>Chá</dt>
          <dd>Tem de várias cores e pode ser servido tanto quente como gelado</dd>
<dt>Água</dt>
           <dd>Sem cor, e com certeza gelada! ;)</dd>
</dl>

</body>
</html>

O exemplo é auto-explicativo com relação aos tipos de listas empregados, mas alguns detalhes serão deixados para você praticar. As listas possuem atributos também. Alguns deles serão explicados aqui.

Em essência, você usa tags "<ul>" ou "<ol>" para iniciar suas listas (não ordenada e ordenada), e "<li>" para cada um dos itens listados. As tags devem sempre ser acompanhadas de fechamento. No caso da lista de definição você tem uma pequena alteração. Além da sua tag, que é "<dl>" cada um dos elementos dela devem ter duas tags diferentes, a "<dt>" para o item em si e "<dd>" para a definição do mesmo.

Para mudar um pouco suas listas ordenadas, tente coisas como:

<ol type="A">

Isso fará que ao invés de números, a lista seja ordenada com letras do alfabeto maiúsculas.

A. Maçã
B. Morango
C. Laranja
D. Limão
E. Abacaxi

Usar:

<ol type="a">

fará a mesma coisa, só que desta vez com letras minúsculas.

É ainda possível usar algarismos romanos para a numeração. Para isso, faça o seguinte.

<ol type="I">

O resultado será

I. Maçã
II. Morango
III. Laranja
IV. Limão
V. Abacaxi

Quer algarismos romanos minúsculos?

<ol type="i">

Prontinho!

Para mudar o tipo de marcadores usados nas listas não ordenadas, use:

<ul type="disc">
<ul type="circle">
<ul type="square">

O primeiro valor do atributo type fará com que os marcadores sejam discos preenchidos, o segundo discos vazios no meio (círculos) e o último mostrará quadrados. É bem simples, tente todos eles.

Outra idéia interessante de listas é que é possível aninhar várias delas. No seu arquivo "listas.html", adicione o seguinte código.

<p>Uma lista aninhada para complicar um pouco</p>
<h4>Bebidas e alguns de seus tipos</h4>
<ul type="circle">
        <li>Café</li>
                    <ul type="square">
                    <li>com leite</li>
                    <li>preto</li>
                    <li>frappé</li>
                    </ul>
        <li>Chá</li>
                    <ul type="square">
                    <li>mate</li>
                    <li>erva doce</li>
                    <li>camomila</li>
                    </ul>
        <li>Água</li>
                    <ul type="square">
                    <li>com gás</li>
                    <li>sem gás</li>
                   </ul>
</ul>

Agora você tem uma lista aninhada dentro do seu documento e pode ver como ela funciona. É possível aninhar vários níveis, o que pode ser útil dependendo do tipo de lista que você pretende criar. Isso pode ser usado, por exemplo, para definir a árvore genealógica de uma família, embora provavelmente isso te dará muito trabalho! Use sua imaginação.

Assinar: Postagens ( Atom )