• Olá Visitante, se gosta do forum e pretende contribuir com um donativo para auxiliar nos encargos financeiros inerentes ao alojamento desta plataforma, pode encontrar mais informações sobre os várias formas disponíveis para o fazer no seguinte tópico: leia mais... O seu contributo é importante! Obrigado.

HTML Básico - Criação e configuração de links

helldanger1

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
Objetivo:

O objetivo deste tutorial ensinar a usar atributos para página link, vlink e alink e criar lista desordenas sempre de uma forma bem objetiva , tudo mostrado através das telas.



Pré-requisito:

Para você poder acompanhar o desenvolvimento deste tutorial, será necessário ter conhecimento no mínimo do de informática básica e Parte 1, Parte 2, Parte 3 e Parte 4 do tutorial html básico.



Nota:

Irei ensinar a linguagem de html de uma forma bem objetiva, ou seja, iremos aprender na prática através da criação páginas.



Para começar irei explicar a função de cada um dos atributos link, vlink e alink dentro da tag <body>:



Link: podemos utilizar para definir a cor dos link que não foram visitados;



Vlink: podemos utilizar para definir a cor dos links já visitados;



Alink: podemos utilizar para ver a cor dos link ativos, ou seja, quando clicamos no link.



Abra o bloco de notas copie a página link.html abaixo para ver um exmplo de cada um.



<html>

<head>Links</head>

<body>



<A HREF="">Definição de cor dos links</A>



</body>

</html>



Vejamos como vai ficar a página:
htmlbasico005_clip_image002.jpg
 

helldanger1

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
Tela 001



Note que a cor do link esta azul mas agora utilizando o atributo link iremos definir a cor verde, o mesmo deve ficar assim <body link=”green”> vamos inserir no bloco de notas:

htmlbasico005_clip_image004.jpg


Tela 002



Agora salve a página e atulize em seu navegador, a mesma deve ficar igual a tela abaixo:

htmlbasico005_clip_image006.jpg


Tela 003



Agora iremos inserir vlink, o procedimento é o mesmo, vamos inserir a cor vermelha, veja o procedimento abaixo:

htmlbasico005_clip_image008.jpg


Tela 004

htmlbasico005_clip_image010.jpg


Tela 005 (Clique sobre o link, o mesmo vai ficar desta cor)



Agora por último iremos ver o alink para o mesmo vamos definir a cor preta, note que estou colocando os tres atributos juntos na página:

htmlbasico005_clip_image012.jpg
 

helldanger1

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
Tela 006



Não irei mostrar a tela seguinte para ver a cor do mesmo quando e clicado por que este procedimento é muito rápido para capturar a tela.



Agora iremos aprender a criar listas desordenadas que podem servir para definir e enumerar elementos, cabeçalhos, titulos entre outros, sua criação é simples e para cria-las utilizamos as etiquetas <ul></ul> sendo que cada um dos elementos fica citado por outra etiqueta que é <li></li> sendo assim as memas ficaram:



<ul>

<li> Internet</li>

<li> Computador</li>

<li> Site</li> </ul>



Na mesma página que fizemos os exemplos de utilizaçao dos atributos para link, iremos utilizar para ver este exemplo.

htmlbasico005_clip_image014.jpg


Tela 007

htmlbasico005_clip_image016.jpg


Tela 008



Também podemos definir o tipo de marcador, para isso utilizamos mais um atributo que é o “type” que deve ser incluido dentro da etiqueta <u> sendo que podemos definir os seguintes tipos de marcadores e o mesmo ficaria assim:



<ul type=”Square”>



Circle

Square

Disc



Vamos ver os tipos square e circle, na orde abaixo, sendo que o tipo disc é o mesmo que mostrei na tela 008 copie e cole no bloco de notas, salve e deposi atualize a página:



<ul type=”square”>

<li> Internet</li>

<li> Computador</li>

<li> Site</li>

</ul>

htmlbasico005_clip_image018.jpg


Tela 009


htmlbasico005_clip_image020.jpg


Tela 010



Agora utilizaremos os seguintes:



<ul type="circle">

<li> Internet</li>

<li> Computador</li>

<li> Site</li>

</ul>

htmlbasico005_clip_image022.jpg


Tela 011

htmlbasico005_clip_image024.jpg

Tela 012
 
Topo