Ir para conteúdo
View in the app

A better way to browse. Learn more.

GGames Fórum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Noções Basicas HTML - Imagens #2

Como inserir imagens e cores de fundo

Imagens de Fundo e Cores de Fundo

Cor de Fundo

 

Para usar cores de fundo deve-se procurar uma combinação entre a cor de fundo e a cor do texto que não dificulte a leitura. Normalmente as cores de fundo claras funcionam bem com uma cor de texto escura.
Para usar uma cor de fundo na sua página você deve usar o seguinte código dentro da tag <body>:
 

Spoiler

<body bgcolor="blue"> 

Pode também utilizar os códigos HEX para definir as cores que combinem melhor. 


Inserir uma Imagem de Fundo

Se você quiser definir uma imagem de fundo use o seguinte código:

Spoiler

<body background="fotos/imagem.jpg">

Lembre-se que "fotos/imagem.jpg" é a localização do ficheiro da imagem. Trata-se de um URL relativo que aponta para a pasta "fotos" que está no seu site. Pode também usar um URL absoluto, que pode também apontar para o seu site ou então para outra imagem localizada algures na internet. Um exemplo do código da imagem de fundo com URL absoluto é:

Spoiler

<body background="http://www.seudominio.com/fotos/imagem.jpg">

 

Inserir Imagens

A tag para se inserir imagens é <img src="imagem.jpg"> .
Deve-se ter em atenção que o endereço da imagem a introduzir em "src" deve ter em conta a pasta onde a imagem está arquivada no servidor. Assim se a nossa página estiver na raiz, e a imagem estiver numa pasta chamada "fotos", a nossa tag para aquela imagem deveria ser:

Spoiler

<img src="fotos/imagem.jpg"> .

Atributo "alt"

O atributo "alt" deve ser usado para quando queremos que um texto apareça sempre que passarmos o rato sobre a imagem. Este texto também aparece como texto descritivo quando a exibição das imagens não está ativa. A tag fica:

Spoiler

<img src="imagem.jpg" alt="Aniversário da Joana"> 


Definir Altura e Largura
Para a largura usa-se o atributo "width" e para altura o "height". Podem-se definir os valores em pixels ou em percentagem:
 

Spoiler

<img src="imagem.jpg" width="200" height="100">

Definir Altura e Largura
Para a largura usa-se o atributo "width" e para altura o "height". Podem-se definir os valores em pixels ou em percentagem:
 

Spoiler

<img src="imagem.jpg" width="200" height="100">

Múltiplos Atributos

Se quisermos definir as dimensões da imagem, um contorno, e um texto "alt", podemos definir a tag com todos esses atributos. A ordem em que os colocamos não é importante:

 

Spoiler

<img src="imagem.jpg" border="5" alt="Aniversário da Joana" width="200" height="100"> 

 

Feedback do Usuário

Comentários Recomendados

Não há comentários para mostrar.

Crie uma conta ou entre para comentar

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.