A intenção deste arquivo é o aprendizado da linguagem HTML 5
Aprendendo HTML 5! - Todos os comandos mais utilizados
Oi sou o Rodolfo. Programando em HTML 5.
"Declare variáveis e não guerra"
formatação
This is regular text
bold text
big text
italic text
small text
strong text
subscripted text
superscripted text
inserted text
deleted text
Alinhando no centro
voltando para a esquerda
A próxima é uma imagem bacana
e essa é uma forma de redimensionar a imagem utilizando escala de pixels. Nessa usei altura de 150 pixels e largura de 150 pixels.
e essa é uma forma de redimensionar a imagem utilizando porcentagens. Nesta vou usar 10% da altura original e 10% da largura original
e se eu quiser colocar uma moldura na imagem posso usar assim...
Mudando de assunto. Para inserir um link na página podes fazer assim:
Essa é a minha página!Essa é a minha página em nova guia
Agora vamos ver como funcionam as listas. Primeiro a lista ordenada:
- Primeiro
- Segundo
- Terceiro
Abaixo a lista não ordenada:
- Red
- Blue
- Green
Vamos ver como fazer tabelas!
| coluna 1 | coluna 2 | coluna 3 |
As vezes precisamos formatar as tabelas:
| título da coluna 1 | título da coluna 2 | título da coluna 3 |
|---|---|---|
| Red | Blue | Green |
| centro | ||
| azul | ||
Vamos fazer uma barra verde de título usando o elemento div!
Este texto será exibido em branco.
O fundo deve estar verde...eu acho.
Usando o elemento span destacamos partes importantes do texto
As vezes precisamos pedir dados aos usuários. Para isso usamos o elemento form. Abaixo um formulário para login:
Se necessitamos de uma escolha única usamos o elemento "radio". Por exemplo para verificar se algo é verdadeiro ou falso:
Se necessitamos de uma escolha multipla usamos o elemento "CheckBox". Por exemplo para selecionar acessórios de um carro...:
Para receber os dados informados por usuários devemos ter um botão para que ele confirme que tudo está pronto para ser enviado a página ou servidor.
Isso é feito utilizando a tag "input" (declara-se o tipo: Neste caso "submit" e o valor "Enviar":
Um formulário de contato pode ser criado com essas mesmas tags:
Entre em contato:
Podemos apresentar vídeos utilizando a tage iframe
Meu vídeo da aula de resistência de materiais
Até agora vimos HTML em sua forma mais simples...Da linha em diante vamos para o HTML5...
Trabalhando com dados, podemos usar os métodos sessionStorage e localStorage para guardar dados localmente
localStorage.setItem("key1", "value1"); alert(localStorage.getItem("key1")); localStorage.removeItem("key1"); localStorage.clear();No lugar de div podemos usar article e section para separar seções da página
Esta parte funciona com um item do tipo "article" e funciona independentemente do resto da página
Pode ser usado como um post, um windget ou como um blog com várias postagens na forma de outros elemetos "article" aninhados
Colocando um player de audio na página usando "audio controls"
Colocando um player de vídeo na página usando "video controls" são suportados MP4, WebM, and OGG."
Outro elemento muito utilizado é o "progress" bar que tem os atributos min, max e value
Status:Também podemos configurar conteúdo com base na localização do usuário utilizando a geolocalização
navigator.geolocation.getCurrentPosition();Drag and Drop é outra característica introduzida pelo HTML 5, no código fonte desta página há exemplo de como utilizar.
Para desenhar formas como cículos podemos usar uma tag svg, como abaixo:
Para desenhar formas como quadrados e retângulos também usamos uma tag svg, como abaixo:
Linhas:
Poli-linhas:
Elípses:
Polígonos:
Todas as formas SGV podem ser animadas como aparece com o quadrado abaixo:
O canvas é um método para utilizar gráficos mais elaborados em páginas web usando html 5. O último desenho foi feito em javaScript dentro de Canvas
Exemplos de manipulação em Canvas
Comentários
Postar um comentário
Seu comentário é sempre bem vindo. Em alguns casos analisaremos o conteúdo antes da publicação.