4697196
Flashcards by Vanderson Sander, updated more than 1 year ago
|
|
Created by Vanderson Sander
about 5 years ago
|
|
Description
| Question | Answer |
| 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" |