Criado por Vanderson Sander
mais de 8 anos atrás
|
||
Questão | Responda |
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 | ­ ; |
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" |
Quer criar seus próprios Flashcards gratuitos com GoConqr? Saiba mais.