Você está aqui: HTML5 ::: Dicas & Truques ::: Meta Tags

HTML5 para iniciantes - Como usar a meta tag viewport para controlar o layout de suas páginas HTML

Quantidade de visualizações: 5830 vezes
Quando estamos aprendendo HTML5 e queremos desenvolver páginas web responsivas, ou design responsivo, uma das primeiras tags que temos que entender e dominar bem, é a tag viewport, incluinda com a especificação do HTML5.

Mas o que é a tag viewport? Esta meta tag foi originalmente apresentada no navegador Safari Mobile, e é usada para definir a largura e escala de apresentação do conteúdo da página HTML. Dessa forma, viewport é a área da página web na qual o conteúdo é exibido para o usuário.

Como sabemos, uma página web pode ser acessada por dispositivos variados. A tela do laptop é muito maior se comparada à tela de um smartphone ou tablet.

A meta tag viewport é adicionada na seção <head> da página HTML e pode conter os seguintes elementos:

width: É a largura do viewport virtual no dispositivo.

height: É a altura do viewport virtual do dispositivo.

initial-scale: É o nível de zoom quando a página é acessada.

maximum-scale: É o limite máximo de zoom que pode ser aplicado à página.

user-scalable: Uma flag que indica se o usuário pode ou não aplicar zoom à página. Os valores permitidos são yes ou no.

Veja, por exemplo, como definir um viewport de 980px e escala inicial de zoom de 1:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<meta name="viewport" content="width=980, initial-scale=1">

No entanto, se nossa intenção é desenvolver um design responsivo, devemos passar o valor device-width para o atributo width do viewport. Isso faz com que a largura do viewport seja igual à largura do dispositivo que está acessando a página.

Veja uma página HTML completa usando esta abordagem:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<html>
<head>
<title>Estudando HTML5</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
 
</head>
<body>

<h1>Java Avançado - Como obter a largura e altura da tela 
do seu computador em pixels usando o método getScreenSize() 
da classe Toolkit do Java</h1>

<p>A classe Toolkit da linguagem Java nos fornece o 
método getScreenSize(), que retorna um objeto da 
classe Dimension contendo a largura e a altura da 
tela do nosso computador, em pixels.

Veja o código Java completo para o exemplo:</p>
 
</body>
</html>

Note que o elementos dentro do atributo content são separados por vírgulas, juntamente com seus valores individuais.

Link para compartilhar na Internet ou com seus amigos:

HTML5 ::: HTML5 + JavaScript ::: Geolocation API

Como retornar a localização do usuário usando o método getCurrentPosition() da API Geolocation do HTML5

Quantidade de visualizações: 2434 vezes
O método getCurrentPosition() da API Geolocation do HTML5 nos permite obter tanto a latitude quanto a longitude do usuário que está acessando nossas páginas web. A forma mais simples deste método requer apenas uma função JavaScript que receberá o objeto de coordenadas. Veja o trecho de código a seguir:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<html>
<head>
   <title>Obtendo a latitude e longitude usando a API
     Geolocation</title>
</head>
<body>

<script type="text/javascript">
  function mostrarPosicao(posicao) {
    document.writeln("<h1>Latitude: " + posicao.coords.latitude + 
      "; Longitude: " + posicao.coords.longitude + "</h1>");
  }
  
  // não se esqueça de testar se o navegador web suporta a API
  // Geolocation do HTML5 
  if(window.navigator.geolocation) {
    // chamamos o método getCurrentPosition() fornecendo a função
    // JavaScript que receberá o objeto de coordenadas   
    navigator.geolocation.getCurrentPosition(mostrarPosicao);
  }
  else{
    document.writeln("A API Geolocation foi encontrada.");  
  }
</script>

</body>
</html>

Ao executar este trecho de código, a primeira coisa que você verá é uma mensagem do navegador avisando que o site a partir do qual o código está sendo executado quer saber sua localização. A mensagem exibirá os botões Permitir ou Bloquear. Se você clicar no botão Permitir, a latitude e longitude serão escritas no navegador:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

Latitude: -16.7143838; Longitude: -49.2327622

É claro que, se você estiver executando o código em um laptop ou desktop, o resultado será muito diferente daquele mostrado no seu celular. O motivo é que, em geral, um GPS não está disponível nos laptops e desktops. Por essa razão, o navegador vai obter sua localização usando posicionamento de WI-FI e também por meio do seu endereço IP (Internet Protocol).


HTML5 ::: Canvas Element ::: Linhas

Computação gráfica usando HTML 5 - Como usar o método lineTo() do objeto Canvas do HTML5 para desenhar retas

Quantidade de visualizações: 2696 vezes
O método lineTo() do objeto Canvas do HTML5 nos permite desenhar linhas retas entre um ponto x e um ponto y. Para isso, usamos o método moveTo() para mover a caneta (ou pena) de desenho para um coordenada x, y e a partir deste ponto nós especificamos as coordenadas x, y para a outra extremidade da linha.

O trecho de código a seguir desenha uma linha saindo das coordenadas x = 20, y = 20 e chegando até x = 300, y = 150. Veja:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

contexto.moveTo(20, 20); // move a caneta para x, y
contexto.lineTo(300, 150); // coordenadas x, y

E aqui estão os códigos HTML e JavaScript para o exemplo completo:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<!doctype html>
<html>
<head>
  <title>O objeto Canvas do HTML5</title>
</head>
 
<body>
 
<Canvas id="canvas1" width="500" height="350"></Canvas>
 
<script type="text/javascript">
  // obtemos uma referência ao elemento Canvas  
  var canvas = document.getElementById("canvas1");
  // obtemos o contexto de desenho
  var contexto = canvas.getContext("2d");
     
  contexto.beginPath(); // inicia ou reseta o caminho anterior
  contexto.moveTo(20, 20); // move a caneta para x, y
  contexto.lineTo(300, 150); // coordenadas x, y
  contexto.stroke(); // finaliza o desenho
</script>
 
</body>
</html>

Ao abrir esta página HTML nós teremos o seguinte resultado:




HTML5 ::: Referência Tags/Elementos HTML5 ::: Tag/Elemento <Video>

Como usar a tag/elemento <video> do HTML5 em suas aplicações web

Quantidade de visualizações: 1604 vezes
A tag/elemento <video> do HTML5 é usada quando queremos incorporar um vídeo em nossos documentos HTML sem incluir plugs adicionais, tais como o Flash Player. Contudo, o suporte a este elemento pode variar de navegador para navegador (faça testes com seus navegadores alvos antes).

Em geral, navegadores que dão suporte ao elemento <video> suportam os seguintes formatos de vídeo: MP4, Ogg e WebM.

Veja um documento HTML que carrega um vídeo MP4:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<title>Como usar a tag video do HTML5</title>
  
</head>
<body>
 
<video controls="controls" src="filme.mp4">
  Seu browser não dá suporte ao elemento video do HTML5.
</video> 
  
</body>
</html>

Quando você abrir esta página HTML, você verá um vídeo na tela já com os controles para iniciar, pausar, e parar a execução (contanto que você tenha informado um endereço válido para o vídeo). Note que não especificamos o tamanho do vídeo na página, o que fará com que o elemento <video> tenha as dimensões do vídeo que foi carregado.


Veja mais Dicas e truques de HTML5

Dicas e truques de outras linguagens

Códigos Fonte

Programa de Gestão Financeira Controle de Contas a Pagar e a Receber com Cadastro de Clientes e FornecedoresSoftware de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimento
Diga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais
Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesControle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidades
Tenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais

Linguagens Mais Populares

1º lugar: Java
2º lugar: Python
3º lugar: C#
4º lugar: PHP
5º lugar: C
6º lugar: Delphi
7º lugar: JavaScript
8º lugar: C++
9º lugar: VB.NET
10º lugar: Ruby



© 2025 Arquivo de Códigos - Todos os direitos reservados
Neste momento há 80 usuários muito felizes estudando em nosso site.