HTML5

Descrição

Curso HTML5
Vanderson Sander
FlashCards por Vanderson Sander, atualizado more than 1 year ago
Vanderson Sander
Criado por Vanderson Sander mais de 8 anos atrás
27
2

Resumo de Recurso

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 &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"

Semelhante

Introdução a JavaScript
Daniel Lobão
CET_TARDE - MTA HTML5 Application Development Fundamentals 2
Hawerth Castro
Tags HTML
Sionise Gomes
CET_TARDE - MTA HTML5 Application Development Fundamentals 1
Hawerth Castro
Linguagens de Programação
gonventura
Introdução ao HTML
Educx Fortaleza
CURSO JavaScript
Nicolas Wursthorn
Crie um site do zero com Boostrap
Milano Rodrigo Ribeiro de Abreu
PENSAMENTO COMPUTACIONAL
João Vitor Valentim
HTML5: introdução
Talissa Moura