Warning: fopen() [function.fopen]: Unable to access ../log/logs/MSG_PHP.log in /home/diver/elgios/public_html/linux/artigoHTML.php on line 11

Warning: fopen(../log/logs/MSG_PHP.log) [function.fopen]: failed to open stream: No such file or directory in /home/diver/elgios/public_html/linux/artigoHTML.php on line 11

Warning: fwrite(): supplied argument is not a valid stream resource in /home/diver/elgios/public_html/linux/artigoHTML.php on line 15

Warning: fwrite(): supplied argument is not a valid stream resource in /home/diver/elgios/public_html/linux/artigoHTML.php on line 16

Warning: fwrite(): supplied argument is not a valid stream resource in /home/diver/elgios/public_html/linux/artigoHTML.php on line 17

Warning: fwrite(): supplied argument is not a valid stream resource in /home/diver/elgios/public_html/linux/artigoHTML.php on line 18

Warning: fclose(): supplied argument is not a valid stream resource in /home/diver/elgios/public_html/linux/artigoHTML.php on line 20

Como primeira contribuição para o Grupo, segue um artigo sobre HTML escrito em HTML.

O HTML possui duas partes distintas: cabeçalho e corpo. No cabeçalho podem ser definidos alguns parâmetros, como a versão do HTML, o título do documento, definição padrão das fontes de letras e tantas outras coisas. Um exemplo bem simples de Cabeçalho é o usado neste documento que pode ser visualizado no Exemplo 1. Neste exemplo o cabeçalho tem apenas a descrição de que o documento é um texto em html e que o padrão de acentuação usado é o ISO-8859-1,além do título do documento.



   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
   <html>
   <head>
   <meta content="text/html; charset=ISO-8859-1">
   <title>Artigo HTML - Grupo PHP</title>
   </head>

Exemplo 1: Cabeçalho do HTML

A segunda parte constitui o corpo html, onde está a página propriamente dita.

Os comandos em HTML estão entre o símbolo de menor e maior que e a maioria deles precisa ser aberto e fechado. Por exemplo, para escrever em Itálico basta usar o comando para ligar o modo itálico e desligá-lo quando não se deseja mais: <I>Itálico</I>. O mesmo procedimento para Negrito (do inglês Bold): <B>Negrito</B>

Pode-se observar, desta forma, que estes comandos de formatação possuem início e fim. Alguns exemplos de formatação podem ser vistos no Exemplo 2.



  <center>
        Texto   centralizado na página
  </center>

  <font color=red>
        Texto na cor  especifica (vermelho)
  </font>

  <b> 
     Texto todo em Negrito
  </b>

  <big> 
     Fonte maior em <i>Itálico</i> com <BR>quebra de linha
  </big>

  <tt>
        Texto     em 
      fonte     fixa
  </tt>

  <pre>
        Texto 
            literal,       puro
  </pre>

Efeito Gerado:
Texto centralizado na página
Texto na cor especifica (vermelho) Texto todo em Negrito Fonte maior em Itálico com
quebra de linha
Texto em fonte fixa
        Texto 
            literal,       puro
  

Exemplo 2: Alguns comandos HTML

Um detalhe importante a ser observado pelo exemplo 2 é que não importa quantos espaços em branco separem uma palavra de outra, ao ser interpretado, apenas um espaço será usado. Também não importa a existência de quebras de linhas. Elas serão completamente ignoradas pelo HTML. Se quiser inserir uma quebra de linha o mesmo deve ser feito com o comando <BR>. Se for desejável imprimir espaços em brando extras, é necessário usar outro comando para isto. Outro fato interessante é o uso do comando PRE. Neste caso todo e qualquer espaço e todo e qualquer quebra de linha será interpretado como espaço e quebra de linha. Não haverá formatação, nem alinhamento (embora mesmo no PRE funcionem os comandos HTML para isto).

Uma vez que os caracteres "<" e ">" constituem comandos, como se faz para imprimir os próprios caracteres (como estou fazendo neste artigo)? A resposta é: novos comandos, como os vistos no exemplo 3.



    <BR>   Quebra de linha
    &nbsp; Inserção de um espaço.
    &quot; Aspas simples
    &lt;   Menor que
    &gt;   Maior que
    &amp;  O próprio &
    <hr>   Linha horizontal

Exemplo 3: Outros comandos úteis do HTML

Existem muitos comandos HTML, alguns para representar acentos (preservando os caracteres em ASCII padrão, de 7 bits. Hoje já se pode usar o acento binário, desde que devidamente identificado o conjunto de caracteres usados).

Outros comandos são usados para realizar links, justamente o maior benefício do HTML. Links levam o usuário para outra página ou mesmo inserem uma figura. Cada link pode ter um texto de referência por exemplo ou mesmo uma imagem. O Exemplo 4 demonstra esta facilidade.



Precisamos de uma página oficial do grupo.
Ela poderia ser hospedada em 
<a href="http://gravatai.ulbra.tche.br">
Gravataí.
</a>
<br>
Mas o servidor Linux não está ainda pronto para 
PHP. De qualquer maneira, já temos uma 
<a href="mailto:php-l@ulbra.tche.br">
lista de discussão.
</a>

Efeito Gerado:
Precisamos de uma página oficial do grupo. Ela poderia ser hospedada em Gravataí.
Mas o servidor Linux não está ainda pronto para PHP. De qualquer maneira, já temos uma lista de discussão.

Exemplo 4: Uso de links

Quando se faz referência à links, é imprescindível que se respeite o formato. O link tem a sintaxe <a href="Onde vai o link">TEXTO clicável</a>

Isto seria o básico do básico do HTML. Existem muitos e muitos outros comandos e os comandos também podem ter parâmetros. Por exemplo: definir tamanho de fonte, nome de fonte, cor, cor que deve ser usado de fundo, entre muitas outras coisas, como inserção de imagens, tabelas, estilos, frames, etc.

O exemplo 5 contém uma página com alguns destes recursos.



<!-- Isto é comentário em HTML. Não gera saída no navegador -->
<!-- Considerando que o header foi feito e que já teve a abertura
     do corpo do html
-->

Isto é            um  <!-- quebras de linha e espaços extras são ignorados -->
pequeno exemplo
de
tes<!-- comentário é REALMENTE ignorado pelo navegador -->te

<BR>   <!-- causa quebra de linha -->

Nova linha.

<p>    <!-- indica novo parágrafo -->

Novo parágrafo.

</p>   <!-- Fim do parágrafo -->

<b>negrito</b> <i>itálico</i>    <BR>
<b><i>Negrito e Itálico</i> </b> <BR>
    Isto esta em fonte variável  <BR>
<tt>Isto esta em fonte fixa</tt> <BR>

Exemplo de acentua&ccedil;&atilde;o em HTML.<BR>

Exemplo de uma pequena tabela sem maiores 
<font color=red>FRE</font><font color=blue>SCU</font><font color=green>RAS
</font><BR><BR>

<!-- Cada linha de uma tabela é descrita por tr /tr
     Dentro de cada linha tem colunas que ficam em td /td
     Ao criar a tabela pode-se definir se ela terá bordas
     e espessura destas. Pode-se definir cores e muitas
     outras coisas. Para não poluir, simplifiquei ao máximo
-->

<table style="border=1">  <!-- Nova tabela -->
<tbody>                    <!-- Corpo da tabela -->

<tr>                       <!-- Nova linha -->
<td>                       <!-- Nova coluna -->
    Primeira linha,        <!-- conteúdo da coluna -->
    primeira coluna 
</td>                      <!-- fim coluna -->
<td> 
    Primeira linha, 
    segunda coluna  
</td>
</tr>                      <!-- fim linha -->

<tr>
<td> Segunda linha, primeira coluna </td>
<td> Segunda linha, segunda coluna </td>
</tr>

</tbody>                   <!-- fim corpo tabela -->
</table>                   <!-- fim da tabela -->

<HR>  <!-- LINHA HORIZONTAL -->

<BR>
<center>Texto Centralizado</center>


Texto justificado à esquerda<br>

<div style="text-align: right;">
Texto justificado à direita<br>
</div>

<div style="text-align: justify;">

    Texto justificado à esquerda e
    à direita. Só que para isto ter efeito eu precisei
    escrever um monte de coisas para que houvesse a devida

   justificação. Estive pensando em falar de Roteamento IP,
   que... Bom, acho que já foi suficiente.<br>

</div>
<p> Links (com uso de tópicos): </p> 

<ul>    <!-- Inicio de tópicos -->
<li>    <!-- Inicio de um dos tópicos -->
   Grupo de PHP da Ulbra de Gravataí: ainda não tem
</li>   <!-- final de um dos tópicos -->

<li>
Página Oficial da Ulbra de 
  <a href="http://gravatai.ulbra.tche.br">
      Gravataí
  </a>
</li>
</ul>  <!-- fim de tópicos -->


Efeito Gerado:
Isto é um pequeno exemplo de teste
Nova linha.

Novo parágrafo.

negrito itálico
Negrito e Itálico
Isto esta em fonte variável
Isto esta em fonte fixa
Exemplo de acentuação em HTML.
Exemplo de uma pequena tabela sem maiores FRESCURAS

Primeira linha, primeira coluna Primeira linha, segunda coluna
Segunda linha, primeira coluna Segunda linha, segunda coluna


Texto Centralizado
Texto justificado à esquerda
Texto justificado à direita
Texto justificado à esquerda e à direita. Só que para isto ter efeito eu precisei escrever um monte de coisas para que houvesse a devida justificação. Estive pensando em falar de Roteamento IP, que... Bom, acho que já foi suficiente.

Links (com uso de tópicos):


Exemplo 5: Exemplo Página HTML

Estando depois o grupo mais afiado em PHP, pode-se descrever formulários em HTML e outras coisas mais avançadas. Uma curiosidade deve ser mencionada: a maioria dos técnicos que escrevem páginas não conhece realmente HTML. Faz tudo em ferramentas gráficas. Pior ainda é fazer uma página em editores de texto e salvar em HTML. O Word e o Excel, por exemplo, conseguem deixar o HTML tão confuso e inchado. Chegam a colocar TAGS para definir a fonte e cor de cada letra. Faça o teste. Transforme uma planilha em Excel em HTML e veja como ficou os fontes. O mesmo para... ops, desculpe. Quase me esqueci. É um grupo de PHP e como tal algumas palavras são proibidas, entre elas windows, word, excel...

Acredito que foi possível ter uma idéia do HTML.

Elgio Schlemer
13/Dezembro/2004