Como adicionar imagens para sua página web sobre o pi framboesa

Video: FAVICON - Como colocar ícone na aba do navegador

Adição de imagens é uma ótima maneira de animar uma página web com o Raspberry Pi e ajudá-lo a passar a sua mensagem. Por exemplo, olhe para as duas imagens nesta página: uma grande foto panorâmica como um banner na parte superior para dar ao local uma identidade visual, e uma foto tomada em uma viagem.

Para adicionar uma imagem para sua página web, inserir uma tag no seu documento HTML que informa ao navegador onde encontrar a imagem e o seu nome de arquivo é. Você também precisa dizer a ele o quão grande ele é, e fornecer uma breve descrição do mesmo. Aqui está a tag de imagem para a imagem banner:

Esta tag parece um pouco mais complicado do que os outros que você usou até agora, pois contém informação adicional, mas não é tão complexa quando você quebrá-lo para baixo.

Video: Curso de HTML5 - 09 - Imagens em HTML5 - by Gustavo Guanabara

A informação extra é formatado com uma palavra curta que explica que tipo de informação é, um sinal de igual, e, em seguida, o próprio informações entre aspas duplas. elementos de informação adicional como este em uma tag HTML são conhecidos como atributos. Os atributos na tag de imagem são

• src: Esta é a abreviação de fonte e informa ao navegador qual imagem de usar, e onde pode encontrá-lo. Se a imagem está na mesma pasta que o arquivo HTML, você pode colocar o nome do arquivo só aqui, e se ele está em uma pasta acima da pasta atual, você poderia usar a fonte ../banner.jpg.

  Você também pode colocar um link para uma imagem na web, se você incluir seu endereço do site completo, começando com http: //- por exemplo, https://example.com/testimage.jpg. Você deve evitar o uso de imagens de sites de outros sem permissão, no entanto, porque ele rouba sua largura de banda (eles poderiam ter que pagar extra para servir a imagem para seus visitantes) e é uma violação de direitos autorais.

• largura: Isso diz ao navegador como largamente a imagem deve ser mostrada na tela, medida em pixels. UMA pixels é o menor ponto da tela pode exibir, e você vai desenvolver um instinto para o tamanho certo de usar as imagens como você construir sites. A resolução do ecrã comum é 1024 × 768, o que significa que existem 1024 pixels horizontalmente e verticalmente 768 pixels.

  
  
  
  

  Se o arquivo de imagem é mais largo ou mais fino do que o tamanho especificado no tag, o navegador redimensiona a imagem. Você deve evitar o uso de arquivos de imagem que são maiores do que seu tamanho de exibição, no entanto, porque o navegador ainda tem que baixar a imagem inteira e que pode abrandar o seu site. Tome especial cuidado com as fotos de sua câmera digital, que pode ser enorme.

• altura: Isso diz ao navegador como alto a imagem deve estar na tela, medida em pixels. Novamente, ele é redimensionada pelo navegador, se necessário.

• alt: Esta é a abreviação de Texto Alternativo e fornece uma breve descrição da imagem que será usada se a imagem não pode ser mostrado ou visto por qualquer motivo. Ele ajuda os usuários da web com deficiência visual a entender o conteúdo visual, ajuda os motores de busca para entender o que as imagens contêm, e também ajuda as pessoas com computadores mais lentos, como o Raspberry Pi.

  Alguém usando o navegador Dillo, por exemplo, pode desligar as imagens para acelerar sua navegação. Eles só ver o texto alternativo que você forneceu para cada um em seu lugar. escrever um bom alt texto é uma forma de arte em si, mas a coisa chave não é tentar descrever a imagem, mas para tentar transmitir o seu significado em seu lugar.

  Por exemplo, não há problema em dizer “Logotipo do Google” sem ter que descrever o que parece. O texto alternativo é mostrado apenas quando as imagens não estão disponíveis, por isso não deve conter qualquer informação adicional não na imagem. Mantenha seu alt pequeno texto: Lembre-se que em alguns casos ele vai ser lido em voz alta por um leitor de tela, e as imagens são raramente o conteúdo mais importante na página.

Video: Imagens de Boa noite

As imagens podem ser lento para baixar, para usá-los com moderação. É melhor usar algumas fotos bem escolhidas que ajudam a contar a sua história, do que espirrar decorativo doce de olho em todos os lugares. Pictures que carregam quase instantaneamente a partir do cartão SD do Raspberry Pi pode levar um longo tempo para download através da Internet quando o seu site vai viver. Apenas .jpg e imagens em formato .jpg trabalhar de forma confiável em todos os navegadores.

Se você precisa usar a mesma imagem em diferentes páginas da web, reutilizar o src parte da sua imagem tag. Se você reutilizar exatamente a mesma cópia de uma imagem, o navegador do visitante baixa a imagem pela primeira vez, e, em seguida, reutiliza-lo sem baixá-lo pela segunda vez.

Video: Câmera IP: Configuração para acesso via Internet

Isso pode fazer o seu site muito mais rápido, especialmente se você tiver logotipos ou outras características de projeto que aparecem em todas as páginas. Ele também economiza espaço no servidor se você estiver armazenando apenas uma cópia de cada imagem.