Aula 4
HTML/CSS
Links Prof. Niltemberg Carvalho
Estilos
O que vamos ver hoje
● Links
● Atributo Style
Links HTML
● Os links permitem que os usuários cliquem para ir de uma
página para outra.
● Os links HTML são hiperlinks.
● Você pode clicar em um link e pular para outro documento.
● Quando você move o mouse sobre um link, a seta do mouse se
transforma em uma pequena mão.
● Observação: um link não precisa ser um texto. Um link pode ser
uma imagem ou qualquer outro elemento HTML!
Links HTML - Sintaxe
● A tag <a> define um hiperlink. Possui a seguinte sintaxe:
<a href="url">texto do link</a>
● O atributo mais importante do elemento <a> é o atributo href,
que indica o destino do link.
● O texto do link é a parte que ficará visível ao leitor.
● Clicar no texto do link enviará o leitor para o endereço URL
especificado no atributo href.
● Exemplo:
<a href="[Link] [Link]!</a>
Links HTML
● Por padrão, os links aparecerão da seguinte forma em todos os
navegadores:
○ Um link não visitado é sublinhado e em azul
○ Um link visitado é sublinhado e roxo
○ Um link ativo é sublinhado e vermelho
Links HTML - o atributo target
● Por padrão, a página vinculada será exibida na janela do
navegador atual. Para alterar isso, você deve especificar outro
target para o link.
● O atributo target especifica onde abrir o documento vinculado e
pode ter um dos seguintes valores:
Valor Descrição
target = “_self” Abre o documento na mesma janela / guia em que foi clicado
target= “_blank” Abre o documento em uma nova janela ou guia
target= “_parent” Abre o documento no frame pai
target= “_top” Abre o documento em todo o corpo da janela
URLs absolutas e URLs relativas
● Usando um URL absoluto (um endereço da web completo) no
atributo href
<a href="[Link]
<a href="[Link]
● Um link local (um link para uma página dentro do mesmo site) é
especificado com um URL relativo (sem a parte "https: // www"):
<a href="html_images.asp">HTML Images</a>
<a href="/css/[Link]">CSS Tutorial</a>
Link para endereço de email
● Use mailto: dentro do atributo href para criar um link que abre o
programa de e-mail do usuário (para permitir que ele envie um
novo e-mail):
<a href="[Link] email</a>
Links HTML - Criando Marcadores
● Os links HTML podem ser usados para criar marcadores, para
que os leitores possam pular para partes específicas de uma
página da web.
● Os marcadores podem ser úteis se uma página da web for
muito longa.
● Para criar um marcador - primeiro crie o marcador e, em
seguida, adicione um link para ele.
● Quando o link é clicado, a página rola para baixo ou para cima
até o local com o favorito.
Links HTML - Criando Marcadores
● Use o atributo id para criar um marcador:
<h2 id="C4">Chapter 4</h2>
● Em seguida, adicione um link para o marcador ("Pule para o
Capítulo 4"), de dentro da mesma página:
<a href="#C4">Pule para o capítulo 4</a>
● Você também pode adicionar um link para um favorito em outra
página:
<a href="html_demo.html#C4">Pule para o capítulo 4</a>
O atributo Style
● O atributo style é usado para adicionar estilos a um elemento,
como cor, fonte, tamanho e muito mais.
● Ele possui a seguinte sintaxe:
<nome_da_tag style="propriedade:valor;">
● A propriedade e o valor são definições de CSS.
● Você aprenderá mais sobre CSS posteriormente neste tutorial.
Cor de Fundo
● A propriedade CSS background-color define a cor de fundo de
um elemento HTML.
<body
style="background-color:powd
erblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Cor do Texto
● A propriedade CSS color define a cor do texto para um
elemento HTML
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Cor da borda
● Você pode definir a cor das bordas
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Fontes
● A propriedade CSS font-family define a fonte a ser usada para
um elemento HTML:
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Tamanho do texto
● A propriedade CSS font-size define o tamanho do texto para um
elemento HTML:
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Alinhamento do texto
● A propriedade CSS text-align define o alinhamento horizontal
do texto para um elemento HTML:
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
O atributo Style - Exemplo
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Valor Descrição
disc Atribui um disco como marcador do item (padrão)
circle Atribui um círculo como marcador do item
square atribui um quadrado como marcador do item
none os itens da lista ficam sem marcadores
Dúvidas ?