HTML5

Vanderson Sander
Flashcards by Vanderson Sander, updated more than 1 year ago
Vanderson Sander
Created by Vanderson Sander about 5 years ago
24
1

Description

Curso HTML5

Resource summary

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 &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 &copy;
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"
Show full summary Hide full summary

Similar

CET_TARDE - MTA HTML5 Application Development Fundamentals 2
Hawerth Castro
Introdução a JavaScript
Emerson Costa
Introdução a JavaScript
Eder Sena
Introdução a JavaScript
Vanessa Borges
Introdução a JavaScript
Vanessa Borges
Introdução a JavaScript
Daniel Lobão
CET_TARDE - MTA HTML5 Application Development Fundamentals 1
Hawerth Castro
Tags HTML
Sionise Gomes
Linguagens de Programação
gonventura
Introdução ao HTML
Educx Fortaleza