Dicas de HTML 5

Linguagem de Marcação HTML 5

Inserindo estilo na tag body:

Inserindo estilo na tag p:

<p style="font-family: Arial, Helvetica, sans-serif; font-size:20px; color:#ff0000">Parágrafo com estilo</p>

Inserindo áudio em html5:

Nota: Foi especificado mp3 e webm, pois alguns navegadores podem não executar o primeiro formato. Webm é considerado padrão para áudio, por ser suportado por todos navegadores

Inserindo vídeo em html5:

Inserindo formulário em html5:

<form>
Nome: <input type="text" required placeholder="Informe seu nome" autofocus="autofocus">
Idade: <input type="number" required min="18" max="120">
Url: <input type="url" required>
E-mail: <input type="email" required>
Data de nascimento: <<input type="date" required>
Busca: <input type="search" required>
<input type="submit" value="Cadastrar">
</form>
autofocus: o foco (cursor) é inserido na caixa especificada placeholder: É inserido um texto de ajuda. Quando o usuário digitar alguma informação, o mesmo é apagado.
required: É obrigatório o preenchimento do campo. Quando clica no botão de envio dos dados é apresentada mensagem de erro.
text: Atributo que permite a entrada de qualquer dado, seja alfabético, numérico, ou símbolos como: (!@#$%, etc.).
number: Atributo que permite somente a entrada de valores numérico. Os atributos min e max, estabelecem os valores mínimo e máximo.
url: Atributo para ser utilizado em endereços de páginas. Ele faz a validação da url.
email: Atributo para ser utilizado em e-mail. Ele faz a validação do e-mail.
date: Atributo para ser utilizado em data. É apresentado um calendário. O tipo de calendário, depende do navegador.
search: Atributo para realização de busca na página.

Inserindo formulário em html5 expressões regulares:

<form>
Nome: <input type="text" required placeholder="Informe seu nome" autofocus>
Idade: <input type="number" required min="18" max="120">
Url: <input type="url" required>
E-mail: <input type="email" required>
Data de nascimento: <input type="date" required>
Busca: <input type="search" required>
Cor: <input type="color" required>
Placa de carro: <input type="text" pattern="[A-Za-z]{3}-[0-9] {4}" maxlength="8" required>
<input type="submit" value="Cadastrar">
</form>

pattern: Atributo que permite estabelecer através de expressões regulares, a validação dos dados do campo. No exemplo acima: permite 3 letras maiúsculas, 3 letras minúsculas, 4 números de O a 9, mais o traço. Maxlength: tamanho de 8.

Algumas tags Implementadas no HTML5

<article>
<aside>
<nav>
<header>
<footer>
<section>
<main>
<video>
<audio>
<canvas>
<svg>
<details>
<summary>
Entre outras...

Estas tags semânticas ajudam a estruturar o conteúdo de forma mais clara e significativa.

Bootstrap Online

Exemplos bootstrap:

Cores (contextuais)
Você pode trocar o estilo facilmente:
<input type="submit" value="Enviar" class="btn btn-primary">
<input type="submit" value="Enviar" class="btn btn-success">
<input type="submit" value="Enviar" class="btn btn-danger">
<input type="submit" value="Enviar" class="btn btn-warning">
<input type="submit" value="Enviar" class="btn btn-info">
<input type="submit" value="Enviar" class="btn btn-secondary">
<input type="submit" value="Enviar" class="btn btn-dark">
<input type="submit" value="Enviar" class="btn btn-light">

Botões com borda (outline)
<input type="submit" value="Enviar" class="btn btn-outline-primary">

Tamanhos
<input type="submit" value="Grande" class="btn btn-primary btn-lg">
<input type="submit" value="Pequeno" class="btn btn-primary btn-sm">

Botão ocupando toda largura
<input type="submit" value="Enviar" class="btn btn-primary w-100">

Botão desabilitado
<input type="submit" value="Enviar" class="btn btn-primary" disabled>

Com espaçamento
<input type="submit" value="Enviar" class="btn btn-primary mt-3">

Em vez de input, use button:

<button type="submit" class="btn btn-primary">
    Enviar
</button>

Vantagens:

- Permite ícones
- Mais flexível
- Melhor para estilização

Botões com ícones
<div class="d-flex gap-2 mt-4">
	<button type="submit" class="btn btn-success w-100">
		<i class="bi bi-check-circle"> Enviar
	</button>

	<button type="reset" class="btn btn-outline-secondary w-100">
		<i class="bi bi-x-circle"></i> Limpar
	</button>
</div>