Tags mais usadas da html 5 - Rodolfo Bortoluzzi

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
se a imagem não apareceu, é mostrado este texto alternativo

se a imagem não apareceu, é mostrado este texto alternativo

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

meu estudo de html