Coiratus: outubro 2010

domingo, outubro 24, 2010

Tabelas II

Neste post mais umas dicas sobre tabelas.
No post anterior, foram explicados os conceitos básico da construção de uma tabela, com vista a organizar os diversos elementos de uma página de html.
Vamos aprofundar um pouco mais.
Assim vamos aprender a manipular as linhas e as colunas de uma tabela,com colspan (relativo às colunas) e rowspan(realtivo às linhas) de maneira a que a leitura dos dados se torne mais fácil para o utilizador.

O número em frente de colspan e rowspan indica o numero de colunas e linhas a colapsar respectivamente.
Se a espessura do border fôr igual a zero, os dados continuam, obviamente alinhados, e o border desaparece, pode ser muito útil em alguns casos.

O seguinte código irá produzir uma tabela de preços:

<table border="1" style="color: darkgrey; text-align: center; width: 300px;">
<tr>
<td colspan="3">
<div style="color: aquamarine; font-family: verdana; font-size: 20pt;">
Lista</div>
</td>
</tr>
<tr>
<td>
<div style="color: darkgrey;">
Item</div>
</td>
<td>
<div style="color: darkgrey;">
Preço Unitário</div>
</td>
<td>
<div style="color: darkgrey;">
Quantidade</div>
</td>
</tr>
<tr>
<td>
<div style="color: darkgrey;">
Cadernos</div>
</td>
<td>
<div style="color: darkgrey;">
1,25€</div>
</td>
<td>
<div style="color: darkgrey;">
50</div>
</td>
</tr>
<tr>
<td>
<div style="color: darkgrey;">
Lápis</div>
</td>
<td>
<div style="color: darkgrey;">
0,59€</div>
</td>
<td>
<div style="color: darkgrey;">
230</div>
</td>
</tr>
<tr>
<td ="" rowspan="2" style="color: darkgrey;">
<div ="" style="color: darkgrey;">
Borrachas</div>
</td>
<td>
<div style="color: darkgrey;">
Grandes</div>
<div style="color: darkgrey;">
1,25€</div>
</td>
<td>
<div style="color: darkgrey;">
35</div>
</td>
</tr>
<tr>
<td>
<div style="color: darkgrey;">
Pequenas</div>
<div style="color: darkgrey;">
1,09€</div>
</td>
<td>
<div style="color: darkgrey;">
44</div>
</td>
</tr>
</table>

Igual à tabela abaixo apresentada:

Lista
Item	Preço Unitário	Quantidade
Cadernos	1,25€	50
Lápis	0,59€	230
Borrachas	Grandes 1,25€	35
Borrachas	Pequenas 1,09€	44

Já sabem, não exitem em postar um comentário, se quiserem acrescentar algo, tiverem alguma dúvida, ou se quiserem ver explicado algum assunto ainda não postado.

Obrigado

quinta-feira, outubro 21, 2010

Tabelas

Numa página de HTML temos que utilizar algo, para posicionar e dividir os vários blocos que lá pretendemos inserir e assim criar diferentes zonas, dentro da página. Uma abordagem primária é a utilização de tabelas, que embora muito utilizada, não o deve ser (devem ser utilizadas folhas de estilo, de que falaremos noutro post). Não devem ser utilizadas por vários motivos, o principal será o de dificultar o acesso à informação a pessoas portadoras de deficiência física.

No entanto é o modo mais fácil de criar divisões numa página de HTML, e deve mesmo ser utilizada para mostrar dados tabulares.

Dentro da estrutura que referimos no primeiro post dedicado ao HTML, definimos a estrutura básica de uma página. Se bem se lembram existe um bloco chamado <body> </body>.

Dentro, ainda deste bloco vamos criar uma tabela simples com um rebordo (border), vejamos:

<table border="1" style="border-bottom-color: blue; border-left-color: blue; border-right-color: blue; border-top-color: blue; height: 50px; width: 250px;">
<tr>
<td style="border-bottom-color: blue; border-left-color: blue; border-right-color: blue; border-top-color: blue; width: 50%;">
</td>
<td style="border-bottom-color: blue; border-left-color: blue; border-right-color: blue; border-top-color: blue; width: 50%;">
<div style="color: green;">
Olá Navegador!</div>
</td>
</tr>
</table>

Este código irá gerar algo como

Olá Navegador!

Poderão reparar que tambem inserimos estilos (côr, tamanho[fixo e percentagem] e espessura do rebordo).

Introduzimos tambem a tag DIV que cria um contentor dentro de um espaço.

Esta é uma primeira tabela, com as suas definições básicas.
Podem experimentar diversas variantes com mais colunas e linhas.

Qualquer dúvida, não exitem em postar um comentário.

Será respondido com a brevidade possivel.

Obrigado

quarta-feira, outubro 20, 2010

O Primeiro menu.

A maior característica de um site, ou de uma página de internet, são os hiperlink's. São eles que permitem a navegação entre páginas, e entre os diversos sites. O nome é "anchor" e são representados por <a> </a> no meio fica o texto que queremos que apareça ao utilizador.
Temos que lhe adicionar o endereço do sítio para onde o utilizador irá ser encaminhado, por exemplo:

<a href="http://www.rgmaster.com"> carregue aqui </a>

aparecerá:

carregue aqui

Com a ajuda de uma outra tag, a lista (ol - lista ordenada, ul - lista desordenada) podemos construir um menu de navegação, constituido por conjuntos de tag's li. Vamos experimentar.

<ul >
<li><a href="http://www.rgmaster.com"> RGmaster.com </a>
</li >
<li ><a href="http://www.MoonLevel.com.com">MoonLevel.com</a>
</li >
<li ><a href="http://www.Coiratus/blogspot.com">Coiratus</a>
</li >
</ul >

Iria surgir algo com este aspecto:

É um primeiro menu.

Já sabem, qualquer dúvida, não exitem em postar um comentário, será respondido tão breve quanto possivel.

Obrigado.

Novos Rumos

Após reflexão, decidi introduzir uma nova rubrica no Coiratus. A transmissão de conceitos básicos de construção de sites. Aliás a frase "Fame. Cogito ergo coiratus sandocha." surge como frase de enchimento, para sites experimentais, e pode ser usada livremente, embora os romanos, infelizmente para muitos, não tivessem o conceito de sandocha. Uma pena.

Assim vamos começar, hoje com a estrutura básica de uma página de HTML. A coisa mais elementar (quanto a mim) que pode ser visualizada na internet.

HTML são as iniciais de Hyper Text Markup Language , que em português se pode dizer "Linguagem de marcação de hiper texto".

A estrutura básica de uma página deste tipo é constituida por... Chamemos-lhe um envelope... O browser (programa ou aplicação que serve para navegar na net os mais conhecidos são: IE,Firefox ópera,safari,Chrome) começa a lêr o ficheiro, e percebe que se trata de um ficheiro de HTML. Dentro deste envelope existe um topo(head) e um corpo(body). Dentro do topo existe um campo obrigatório que é o título(title). Estes campos são envolvidos por palavras de código,entendidas pelo browser que por sua vez estão envolvidas pelos sinais de menor e maior sendo que o fim do campo apresenta uma barra inclinada para a direita (marota,com inclinações...), assinalando o fecho daquela TAG (nome dos campos de HTML), existem excepções.

Assim a estrutura de uma página de html em branco será:

Esta seria uma página de HTML totalmente em branco.

Dentro da tag title poderiamos escrever o titulo da página que apareceria no canto superior esquerdo da maior parte dos browser's. E dentro do body a nossa página própriamente dita (o conteúdo).

Assim vamos escrever algo indicado pela tag <marquee> fechado por
</marquee> e já agora (mesmo à portuguesa...) tambem um paragrafito, ou paragrafosito (sempre tive dúvidas nos diminuitivos...).

<html>
<head>
<title>
</title>
</head>
<body>
<marquee direction="left"> Olá pessoal!</marquee>
<p> Olá pessoal!</p>
</body>
</html>

Surgiria algo semelhante ao abaixo:

Olá pessoal!

Olá pessoal!

A tag marquee faz o texto andar (para a esquerda porque foi a direcção indicada [left] ) o p é a tag que indica um parágrafo.

Podem experimentar copiar o texto acima e colar no notePad (o melhor programa da MS), fazer saveas (ou guardar como) escolher all files e dar-lhe um nome (tadinho merece...) com a extensão ".htm", ou ".html".
Se lhe derem dois click's vai abrir no browser da vossa predilecção....

Qualquer dúvida não exitem em postar um comentário.

São bem vindos, e serão respondidos com a brevidade possível.

Obrigado.

Sites