HTML5

Pregunta	Respuesta
O que é HTML	É uma linguagem de marcação de HiperTextos (Textos, imagens, músicas, vídeos, etc)
Como identificar o documento como html 5	<!DOCTYPE html>
O que são tags em html?	São demarcações escritas entre os símbolos de "menor que" e "maior que" que precisam ter um fechamento: <tag></tag>
Onde é inserido o código html?	Entre as tags <html></html>
Como é e onde é definido a área comportamental da página?	<head> É inserido depois da tag <html>
Como é e onde é definido o corpo do texto?	<body> É inserido depois da tag </html>
Identificação do Conjunto de Caracteres a ser utilizado como UTF-8	Dentro da tag <meta> com o código charset: <meta charset="UTF-8"/>
Código para indicar que a página está no idioma Português Brasil	Insira dentro da tag <html> <html lang="pt-br">
Mudar o título da página	Na área comportamental (<head></head>) insira o código: <title>Seu título aqui</title>
Hierarquia de títulos	Código: <h1>Título 1</h1> <h2>Título 2</h2> ... Essa hierarquia abrange do h1 ao h6 é definido na área <body> do código
Como criar uma formatação dentro de uma tag	Exemplo com body <body style="formatacao_css"> </body>
Criar uma divisão	<div></div>
Inserir um identificador à tag	<div id="identificador">
Inserir um grupo de títulos	<hgroup> <h1></h1> <h2></h2> <h3></h3> </hgroup>
Inserir uma imagem	<img src="local da imagem">
Cabeçalho	<header id="cabecalho"> </header>
Quebra de linha	<br/>
Espaçamento entre palavras	Sem espaço entre o ponto e virgula e a letra p: ;
Pré formatação (texto exatamente como foi escrito)	<pre> </pre>
Informar que o trecho se trata de um código	<code> </code>
Texto em negrito	<b>
Itálico	<i>
Texto em sublinhado (método depreciado)	<u>
Ênfase no texto	<em>
Formatar pequenos trechos de texto com tag específica	<span>
Inserir um parágrafo	<p></p>
Quebra de linha automática	<mbr>
Hífen automático	&shy ;
Texto riscado (método depreciado)	<s>
Texto riscado (método novo)	<del>
Alinhar texto (metodo depreciado)	<align="alinhamento"> alinhamento: center; left; right;
Símbolo "menor que" e "maior que"	< ; > ;
Texto inferior e texto superior	Inferior: <sub> Superior: <sup>
Alterar tamanho da imagem via html	Adicionar width a tag img <img src="imagem" width="tamanho">
Delimitador semântico para o campo de imagens	<figure></figure>
Legenda para imagens	Dentro da tag <figure> adicione <figcaption></figcaption>
Comentário em HTML	<!-- Comentário -->
Especificar classe em uma tag	<tag class="classe">
Painel de Navegação	<nav>
Listas Ordenadas	<ol type="1 (numeral) \| a (alfabético)\| A (alfabético_maiusculo) \| i (romano)\| I (romano_maiusculo)" start="iniciar_lista_com (sempre nro)"> <li>Item 1</li> <li>Item 2</li> </ol>
Listas Desordenadas	<ul type="circle \| disc \| square"> <li>Item 1</li> <li>Item 2</li> <li>etc...</li> </ul>
Direcionamento para links	<a href="link" target="parametros"> val para parametros: _self = direciona link para mesma aba _blank = direciona para nova aba
Criar uma seção	<section>
Criar uma seção lateral	<aside>
Criar um rodapé	<footer>
Símbolo copyright	©
Inserir tabela	<table>
Diferença entre id e class	id pode ser usado apenas uma vez po objeto, já a classe pode ser utilizada mais de uma vez em um mesmo objeto
Criar linha em uma tabela	<table> <tr>linha</tr> </table>
Criar colunas em uma tabela	<table> <tr><td>col1</td><td>col2<td></tr> </table>
Fazer uma célula ocupar mais de uma coluna	<td colspan="nroCols">
Fazer uma célula ocupar mais de uma linha	<td rowspan="nroLinhas">
Título de uma tabela	<table> <caption> </table>
Artigo dentro de uma section	Pode haver mais de um artigo dentro de uma section para cada artigo: <article></article>
Como chamar uma função quando clicar em cima de um objeto	<objeto onclick="funcao()">
Como chamar uma função quando mover o mouse em cima de um objeto	<objeto onmousemove="funcao()">
Como chamar uma função quando o mouse sair de cima de um objeto	<objeto onmouseout="funcao()">
Como chamar uma função quando passar o mouse em cima de um objeto	<objeto onmouseover="funcao()">
Texto descritivo para imagens	<img alt="Texto alternativo">
Frame em html	<iframe src="local_arq_html" name="nome" id="id"></iframe>
Mapeamento de imagem	<img usemap="#nome_map"> <map name="nome_map"> <area shape="tipo_retang_circ_polig" coords="coordenadas" href="caminho_arquivo" target="onde_sera_aberto"> </map>
Áreas de mapeamento	Todas coordenadas são separadas por vírgulas; Se o tipo for rect (retangulo) tem duas coordenadas: x1,y1,x2,y2 Se o tipo for o tipo for circle: x1,y1,raio
Abrir um arquivo direcionando para uma area específica	caminho.html#id
Inserir aúdio em html	<audio id="musica" controls="controls"> <source src="local_arq" type="tipo"> </audio> tipo: "audio/mp3" para arquivos mp3 "audio/x-aac" para arquivos m4a "audio/ogg" para arquivos ogg
Inserir vídeo em html	<video id="id" controls="controls" poster="imagem"> <source src="local_arq" type="tipo"/> </video> tipo: "video/mp4" para vídeos mp4 "video/webm" para vídeos webm "vídeo/ogg" para vídeos ogv
Criar formulários	<form> <fieldset> <legend>legenda</legend> Conjunto de campos </fieldset> </form>
Diferença entre método post e get	<form method="post \| get"> Método post: envia os dados do formulário por pacotes Método get: envia os dados do formulário por url
Ação do formulário	Enviar por email action="mailto:email"
Formulários: Caixa de texto	<input type="text" size="tamanho" maxlength="max_carac" placeholder="dica_texto" name="tNome" id="cNome">
Formulários: Campo senha	<input type="password" size="tamanho" maxlength="max_carac" placeholder="dica_texto" name="tSenha" id="cSenha">
Formulários: Email	<input type="email" size="tamanho" maxlength="max_carac" placeholder="dica_texto" name="tEmail" id="cEmail">
Formulários: Caixa de Opção (opção única)	<input type="radio" name="rSexo" id="cSexo" /> Obs: Dois radios ou mais do mesmo grupo devem ter o mesmo nome. Para escolher um marcado por padrão, basta adicionar o parametro checked
Formulários: Data	<input type="date" id="id" name="nome_obj">
Formulários: Números	<input type="number" id="id" name="nome_obj" min="val_min" max="val_max">
Formulários: Adicionar label a um item de formulário	<input type="radio" id="opt1" name="rOpt"/> <label for="rOpt">Etiqueta</label>
Formulários: Caixa de Combinação	<select> <option value="Valor que será enviado">Item 1</option> <option value="IT2" selected>Item 2 Selecionado por padrão</padrao>
Formulários, Caixa de Combinação, Grupo de itens:	<optgroup label="Grupo de itens 1"> <option>Item 1</option> <option>Item 2</option> </optgroup> <optgroup label="Grupo de itens 2"></optgroup>
Auto Preenchimento	no text, adicione: list="idDataList" crie uma tag Datalist <datalist id="idDataList"> <option value="Item 1"></option> <option value="Item 2"></option> </datalist>
Formulários: Botão de Volume	<input type="range" min="valormin" max="valormax" step="salto" >
Formulários: Área de texto	<textarea name="nomeObj" id="idObj" col="tamanhoemColunasLateral" row="tamanhoemLinhasVertical" placeholder="textoExplicativo" />
Formulários: Caixa de checagem	<input type="checkbox"> parametro checked deixa marcado por padrão
Formulários: Caixa de cor	<input type="color" value="corPadrao"> Parametro value não é obrigatório
Impedir que o valor de um campo seja alterado	adicionar parametro readonly
Botão convencional	<input type="submit" value="textoBotao">
Botão com imagem	<input type="image" src="localImagem">
Chamar uma função quando usuário alterar o valor de um campo	<input type="text" oninput="funcao()">
Impedir página de rolar	adicionar na tag a propriedade scrolling="no"

Siguiente

Descripción

Resumen del Recurso

Similar

	Creado por Vanderson Sander hace casi 9 años