4.Parágrafos:
<P align=”center” valign=”top”> ... </P>
A marcação acima determina um parágrafo – que, por padrão, equivale a duas quebras de linha - e muda o alinhamento do texto.
O alinhamento vertical, como regra geral, só funciona dentro de tabelas que tenham sua altura definida e que tenham, em seu interior, texto que respeite esta altura.
Align=”center”
Centraliza o texto. Outras opções de alinhamento horizontal:
Left = esquerda Right = direita Justify = margens iguais
Valign=”top”
Alinhamento vertical do texto, neste caso alinhado ao topo. Outras opções:
Bottom = ao fundo (abaixo).
5.Linha Horizontal
<hr width=”200” size=”1” color=”#FF8000”>
Size=””
Espessura da linha
Width=””
Comprimento da linha
Color=””
Cor da linha
6.Imagens e Sons:
Imagens:
<img src=”figura.gif” width=”90” height=”40” border=”0”>
Src=””
Determina o endereço da figura na web.
Width=””
Determina a largura da figura.
Height=””
Determina a altura da figura.
Border=””
Determina a largura da borda.
Sons:
<embed src=”som.mid” autostart=”true” loop=1 hidden=”false”>
Src=””
Indica o endereço do som (o “caminho” até ele) na web.
Autostart=””
Determina se o som deverá começar sozinho ou somente se o internauta apertar o play.
True = Sim (começa sozinho) False = Não
Loop=””
Determina quantas vezes o som deverá se repetir. Um número negativo (ex.: -1) determina que o som toque indefinidamente.
Hidden=””
Determina se o controle do som deverá estar oculto na página ou não.
True = Sim False = Não
Se não estiver oculto, o internauta poderá utilizá-lo para diminuir o volume, iniciar ou pausar a música, etc.. De preferência, esta propriedade deve estar configurada como “false”, caso contrário você corre o risco de espantar alguns visitantes com uma música insistente.
7.Links Internos e Externos:
<a href=”pagina2.html” target=_blank>Clique Aqui!</a>
Tudo o que estiver entre <a ..> e </a> servirá de link (ligação) para outra página. Você pode colocar uma marcação de imagem entre eles, por exemplo, para que a figura sirva de link para outra página.
href=””
Determina o destino para onde leva esse link. Pode ser outra página do site: nomedapagina.html, pode ser outro website: http://www.outrosite.com/pagina.html, ou pode ser um documento qualquer que não uma página da web: texto.txt, arquivo.zip.
target=_blank
Determina a janela em que a nova página deverá ser aberta.
Se você indicar “janela1”, por exemplo, o destino será aberto na janela nomeada “janela1”. Se ainda não houver uma janela com esse nome, ele abrirá uma janela nova e a nomeará “janela1”.
No exemplo acima, _blank indica que uma nova janela deverá ser aberta.
Esta é uma propriedade opcional, mas você pode também indicar _self para que o novo documento seja aberto na mesma janela.
<a href=”mailto:nome@email.com.br”>nome@email.com.br</a>
No exemplo acima, o link é um endereço de e-mail. Caso a pessoa utilize um programa de e-mail integrado ao navegador, bastará clicar no link para abrir o programa.
<a name=”02”>Parte 2:</a>
As marcações acima podem ser usadas para indicar uma âncora na parte do texto que estiver entre elas. Desta forma, você pode criar um link para esta parte da página, de qualquer outro lugar, digitando:
<a href=”#02”>Clique aqui para ir para a segunda parte.</a>
Você pode também indicar um link de uma página para uma parte de outra página. Exemplo:
<a href=”http://www.site.com/pagina.html#02”>
Segunda parte da página. </a>
Usando imagens como links:
<a href=”pagina2.html”><img src=”figura.gif”></a>
Para utilizar imagens como links, basta envolver a marcação da imagem <img> com a marcação de link (<a href=””> e </a>).
8. Listas Ordenadas e Não-Ordenadas:
Listas Ordenadas:
<ol type="1"> ( OL = ordered list = lista ordenada )
<li> Item 1 </li> ( LI = list item = item da lista )
<li> Item 2 </li>
</ol>
A lista acima terá seus itens listados utilizando números, como os tópicos deste tutorial.
- Item 1
- Item 2
Outras opções:
<ol type="A">
<li> Item 1</li>
<li> Item 2</li>
</ol>
A lista acima terá seus itens listados utilizando as letras maiúsculas do alfabeto.
Trocando “A” por “a”, serão utilizadas as letras minúsculas.
<ol type="I">
<li> Item 1</li>
<li> Item 2</li>
</ol>
A lista acima terá seus itens listados utilizando numerais romanos.
Listas Não-Ordenadas:
<ul type="disc"> ( UL = unordered list = lista não-ordenada )
<li> Item 1</li> ( LI = list item = item da lista )
<li> Item 2</li>
</ul>
O exemplo acima ficaria assim:
- Item 1
- Item 2
<ul type="circle">
<li> Item 1</li>
<li> Item 2</li>
</ul>
O exemplo acima ficaria assim:
- Item 1
- Item 2
<ul type="square">
<li> Item 1</li>
<li> Item 2</li>
</ul>
O exemplo acima ficaria assim:
- Item 1
- Item 2
Você pode, também, criar uma hierarquia entre os itens da lista:
<ul type="square">
<li> Item 1
<ul>
<li> Sub-item 1</li>
<li> Sub-item 2</li>
</ul>
</ul>
<ol type="1">
<li> Item 1
<ol type="a">
<li> Sub-item 1</li>
<li> Sub-item 2</li>
</ol>
</ol>
- Item 1
- Sub-item 1
- Sub-item 2
Listas Descritivas:
<DL>
<DT> Item 1
<DD> Descrição 1</DD>
<DT> Item 2
<DD> Descrição 2</DD>
</DL>
Item 1
Descrição 1
Item 2
Descrição 2
PLANO DE AÇÃO:
1.Abra para edição, mais uma vez, a página criada no plano de ação anterior;
2.Acrescente à sua página uma lista ordenada (<li>), listando as dúvidas que você ainda tenha sobre a criação de páginas da web. Faça outra lista (<li>) com as idéias para criação de sites que você possa ter tido durante a leitura deste tutorial.
3.Coloque uma âncora no topo da sua página, nomeando-a “topo”. Crie, no final da sua página, um link interno com o texto “Voltar para o início”. Esse link deverá levar o internauta de volta para o topo da página (ou seja, deverá apontar para a âncora “topo”).
Coloque a solução em nosso fórum:
http://criarwebsite.com/forum