8ª Aula de Web Design
Autor: Lú | Publicado: 2011-05-02T18:49:00-07:00

HTML
Cores Hexadeciamais - RGB

R - Red
G- Green
B - Blue

Cores importantes - Branco, vermelho, verde, azul amarelo.

Body Backgroung="?" Iamegem de fundo. Mais ou menos como uma "marca d' água" O arquivo deve estar de preferência em formato .GIF, .JPG, ou .PNG
bgproperties= "fixed" (imagem estática).
&nbsp;Texto em sequências de itens (lista)&nbsp;Assim como os cabeçalhos, outra forma de estruturar um documento HTML é a utilização de listas.Elas podem funcionar como ponto de partida para acessar outras partes de um documento.Existem basicamente dois tipos de listas: as não ordenadas, que encadeiam uma série de itens sem numerá-las e as ordenadas, que atribuem um número a cada elemento.&lt;UL&lt;/UL&gt; Unordered list.lista nãonumerada. Deve ser escrita ao início e ao final da lista.
Cada item da lista é antecipado da marcação
&lt;LI&gt;
&lt;UL&gt;
&lt;LI&gt; texto do item &lt;/LI&gt;
&lt;LI&gt; texto do item &lt;/LI&gt;
&lt;/UL&gt;

&lt;OL &lt;/OL&gt; Ordere list. Lista numerada. Deve ser escrita ao início e ao fim da lista.
&lt;OL&gt;
&lt;LI&gt; caneta &lt;/LI&gt;
&lt;LI&gt; lápis &lt;/LI&gt;
&lt;/OL&gt;

Tipos de marcadores da lista numerada:
&lt;UL TYPE =&nbsp; "DISC", "CIRCLE" E "SQUARE"

Tipo de marcadores da lista numerada

&lt;OL TYPE - "1" START = "1"&gt; START = "INÍCIO. "1", "I", "i", "A"

Som de fundo

O comando para tocar um som de fundo deve ser inserido na parte &lt;HEAD&gt; da página.
No internet explorer faça:
&lt;BGSOUND SRC="musica.mid"LOOP=2&gt;
O som da música.mid seria repetido duas vezes (pode ser também "infinite" para ficar tocando.
O código reconhecido pelo firefox é o seguinte:
&lt;EMBED SRC="MUSICA.MID"AUTOSTART="TRUE"&gt;
Neste caso, o atributo autostart é necessário para que o som apareça logo que a página carregar automaticamente, sem o clique do usuário.
Arquivos suportados: *.wav, *.mid

Tabelas
As tabelas tem uma estrutura parecida com a de uma planilha eletrônica: compõem-se de linhas e colunas cujas as inserções formam células.
Uma célula pode conter um texto simples, um hipertexto ou até mesmo uma imagem.

&lt;TABLE&gt;&lt;/TABLE&gt;
Cria uma tabela. Entre eles, devem ser especificadas as tags responsáveis pela criação das linhas e células, títulos, bordas e alinhamento da tabela. Como padrão, uma tabela é criada sem borda, ou seja, não aparecem as linhas horizontais e verticais que separam as células.

&lt;TR&gt; &lt;/TR&gt;
Abreviação de table row. São usadas para criar linhas, se uma tabela tiver 5 linhas, deverão ser indicados 5 pares destes comandos.

&lt;TD&gt; &lt;/TD&gt;
Abreviação de table Data. As tags TD são usadas para especificar o conteúdo de uma célula. Esses comandos são usados em pares para cada célula da linha. Devem ser usados entre os comandos &lt;TR&gt; &lt;/TR&gt;.
Ao contrário das planilhas, uma tabela não precisa ter todas as linhas como mesmo número de células. A largura de uma coluna é definida pela largura da maior célula que faz parte da coluna. O conteúdo de uma célula é alinhado pela opção align.

Atributos que pertencem a TAG TABLE (Tabela).
Border - Indica o tamanho da borda da tabela. O padrão é "O" (sem borda).
Widht - Largura que a tabela ocupará na tela. Pode ser informado em pixels ou %. Ex: 50%.
Height - Altura da tabela (normalmente não informado.)
Align - Alinhamento da tabela. (left,center,right).
Bordercolor - Cor da tabel.
Bgcolor - Cor de fundo da tabela.
Background - Imagem de fundo.
Cellspacing, Cellpadding - Espaço do texto até a borda das células e espaço entre as células.

Atributos que pertecem a tag TD (celulas)

Align - Alinhamento do texto dentre da célula ou da linha. "Center", "Left" e "Right".
Valign - É equivalente ao comando Align só que funciona para alinhar o texto verticalmente na linha ou célula. Os valores possíveis são "Top", "Middle", "Bottom" e "Baseline". "Middle" é o padrão.
Colspan - Esta opoção pode aparecer em qualquer célula da tabela e especifica quantas colunas da tabela a célula deve ocupar. O valor padrão é 1.
Rowspan - Esta opção funciona como a anterior, só que especifica quantas linhas, para baixo, a célula deve ocupar. O valor padrão é 1.
WIDTH, HEIGHT, BGCOLOR, BACKGROUND...

Criando uma tabela simples

Alógica de criação de uma tabela é a seguinte:

-Use o comando &lt;TABLE&gt; para especificar que uma tabela está sendo criada;
-Use os comandos &lt;TR&gt;...&lt;/TR&gt; para criar uma linha da tabela;
-Use os comandos &lt;TD&gt;...&lt;/TD&gt; para criar cada célula de uma linha;
-Use o comando &lt;/TABLE&gt; para encerrar a tabela;
-Use opções para mudar a aparência da tabela.

Ex: &lt;TABLE BORDER="1"
&lt;TR&gt;
&lt;TD&gt; Linha 1
Coluna 1&lt;/TD&gt;
&lt;TD&gt; Linha 1
Coluna 2&lt;/TD&gt;
&lt;/TR&gt;
&lt;TR&gt;
&lt;TD&gt; Linha2
Coluna 1&lt;/TD&gt;
&lt;/TR&gt;
&lt;TR&gt;
&lt;TD&gt; Linha 2
Coluna 1&lt;/TD&gt;
&lt;TD&gt; Linha 2
Coluna 2&lt;/TD&gt;
Coluna 2&lt;/TD&gt;
&lt;/TR&gt;
&lt;/TABLE&gt;

Note que no comando Table existe a opção Border. Ela cria a borda que envolve as células da tabela. Se você não a especificar, a tabela é montada normalmente, só que sem a borda.

Ampliando uma célula para mais de uma coluna

O exemplo a seguir mostra o uso da opção Colspan para aumentar o tamanho de uma célula e fazer com que ela ocupe colunas adjacentes.

&lt;TR&gt;
&lt;TD&gt;IECEG&lt;/TD&gt;
&lt;TD&gt;INSTITUTO
CENECISTA&lt;/TD&gt;
&lt;/TR&gt;
&lt;TR&gt;
&lt;TD
COLSPAN="2"&gt;TEUTONIA/RS&lt;/TD&gt;
&lt;/TR&gt;

Expandindo uma célula para mais de uma linha

A opção Rowspan serve para aumentar o tamanho de uma célula e fazer com que ela ocupe linhas adjacentes.

&lt;TR&gt;
&lt;TD
ROWSPAN="2"&gt;IECEG&lt;/TD&gt; 
&lt;TD&gt;INSTITUTO
CENECISTA&lt;/TD&gt;
&lt;/TR&gt;
&lt;TR&gt;
&lt;TD&gt;TEUTONIA/RS&lt;/TD&gt;
&lt;/TR&gt;

Texto nas tabelas:

&lt;TD&gt;&lt;FONT COLOR="?" FACE="?"
SIZE="?"&gt;&lt;B&gt;TEXTO&lt;&lt;/B&gt;/FONT&gt;&lt;/TD&gt;
==&gt; EM CADA CÉLULA...

Alinhamento do texto&gt; &lt;TD ALIGN="center"&gt;TEXTO&lt;/TD&gt;

Imagem numa tabela: &lt;TD&gt;&lt;IMG SRC="IMAGEM.JPG"&gt;&lt;/TD&gt;

Texto que mais de uma parágrafo:
&lt;TD&gt;IECEG&lt;P&gt;É UM ORGULHO&lt;/P&gt;&lt;P&gt;ESTAR AQUI!&lt;/P&gt;&lt;/TD&gt;