HTML

Etiquetas que não podemos deixar de falar.

Por vezes usamos textos retirados de um livro ou até mesmo de outro site, nestes casos devemos usar a tag <blockquot="nome do autor ou site a quem pertence o texto"></ blockquot> antes do texto, o conteúdo desta tag não é visível no corpo da página.

Âncoras alvo.

Âncora alvo permite a ligação para uma posição especifica dentro do documento HTML quer seja da mesma página ou em uma página diferente.
<a href> será o link <a name> o alvo.

Para construir uma ligação a um alvo dentro da mesma página usamos o seguinte.

<a href="#nome do alvo">exemplo</a>
<a name="nome do alvo">exemplo</a>

Para construir uma ligação a um alvo numa outra página usamos o seguinte.

<a href="url da página#nome do alvo">exemplo</a>
<a name="nome do alvo">exemplo</a>

Logotipo na barra de endereço.

Com certeza já viram muitos sites com um icon com o logotipo da empresa na barra de endereços do navegador.
Este icon é chamado de favicon.
Vamos ver como colocar um logotipo na barra de endereço do nosso site.
Para começar precisamos de criar uma imagem que será o nosso logotipo e guardar com a extensão .gif.
O ideal será a nossa imagem ter um tamanho de 16x16pixels.
A imagem deve ser simples, porque devido ao seu tamanho reduzido uma imagem complexa não vai ficar com apresentação.
Criada a imagem precisamos converter para a extensão .ico, e salvar com o nome favicon.ico (existem alguns sites que nos permitem fazer isso sem precisarmos instalar qualquer software).
De seguida colocamos o nosso favicon.ico no servidor, na pasta que desejarmos, e usamos a seguinte linha de código dentro da secção , em todas as páginas.

<link rel="shortcut icon" type="image/x-icon" href="url do favicon.ico">
Alguns browsers suportam imagens no formato .gif .png e .jpg neste caso teríamos de usar a linha de código:
<link rel=" shortcut icon" type="image/gif" href="url do gif">

Podemos ainda usar um icon animado, para isso temos de criar um gif animado, salvar com o nome animated_favicon.gif e usar a seguinte linha de código:

<link rel="icon" type="image/gif" href="url do gif animado">

Listas ordenadas, não ordenadas e de definição.

Lista ordenada é aquela á qual atribuímos uma ordem numérica ou alfabética.
Lista não ordenada é idêntica mas atribuímos marcadores antes de cada elemento.
Lista de definição possibilita uma listagem de termos e definições.

O uso de números ou letras leva-nos a esperar uma sequência ordenada de itens.
O uso de marcadores leva-nos a esperar uma coleção de itens (que não precisa ter, necessariamente, uma ordem)

Exemplos:

Lista ordenada.

<ol>
<li> exemplo1 </li>
<li> exemplo1 </li>
<li> exemplo1 </li>
</ol>
<br><hr><br>

Lista não ordenada.

<ul>
<li> exemplo2 </li>
<li> exemplo2 </li>
<li> exemplo2 </li>
</ul>

Verificamos que por defeito o browser coloca uma ordem numérica iniciada em 1 na lista ordenada e um circulo como marcador na lista não ordenada.
Vamos conhecer alguns atributos para melhorar a formatação das listas.
Lista ordenada, elemento <ol>.

Atributos:

<ol type="?" >, define o tipo de marcador.
1 - Ordena por números.
a - Ordena por letras minúsculas do alfabeto.
A - Ordena por letras maiúsculas do alfabeto.
I - Ordena por números romanos em maiúsculas.
i - Ordena por números romanos em minúsculas.

<ol start="?"> este atributo indica em que sítio começa o marcador.

Exemplo:

<ol type=" I" start="5">
<li> exemplo </li>
<li> exemplo </li>
<li> exemplo </li>
</ol>

Lista não ordenada, elemento <ul>.

Atributos:

<ul type="?" >, define o tipo de marcador.
circle - Desenha um circulo vazio.
disc - Desenha um circulo cheio.
square - Desenha um quadrado cheio

Exemplo:

<ul type="square">
<li> exemplo </li>
<li> exemplo </li>
<li> exemplo </li>
</ul>

É possível ainda colocar listas dentro de listas, (aninhar listas).

Exemplo:

<ol type="I">
<li> Exemplo1
<ol><li> exemplo2 </li><li> exemplo2 </li><li> exemplo2 </li></ol>
<li> Exemplo1
<ol><li> exemplo2 </li>
<ul type="disc"><li> exemplo3 </li><li> exemplo3 </li></ul>
<li> exemplo2 </li><li> exemplo2 </li></ol>
</ol>

Listas de definição.

A lista de definição foi criada para possibilitar uma listagem de termos e definições, exemplo do uso deste tipo de lista são os glossários, catálogos de produtos, etc…
Dentro de uma <dl> podemos usar parágrafos, quebras de linha, imagens, etc..

<dl> </dl> (definition list), define uma lista de definições.
<dt> </dt> (defenition term), define um termo de definição.
<dd> </dd> (definition description), define uma descrição de definição.

Para perceber melhor o efeito da lista de definição vamos analisar alguns exemplos:

Exemplo1:

<dl><dt> exemplo1 </dt><dd> exemplo1 </dd><dt> exemplo1 </dt><dd> exemplo1 </dd></dl>

Exemplo2:

<dl><dd> exemplo2 <dl><dd> exemplo2 <dl><dd> exemplo2 </dd></dl>

Exemplo3:

<dl><dt> exemplo3 </dt><dd> exemplo3 </dd><dt> exemplo3 </dt><dd> exemplo3 </dd><dd> exemplo3 <dl><dd> exemplo3 <dl><dd> exemplo3 </dd></dl><dl><dt> exemplo3 </dt><dd> exemplo3 </dd><dt> exemplo3 </dt></dl>

Podem ser criadas listas com diferentes disposições, tudo depende da necessidade e da criatividade de cada um.


0|1|2|3|4|5|6|7|8|9|10|11|12|13|14