Scribd Logo
Upload

Welcome to Scribd!

  • HTML5

    Uploaded by

    Felipe Motta
    29 views5 pages
    Resumo HTML5

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Resumo HTML5

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    29 views5 pages

    HTML5

    Uploaded by

    Felipe Motta
    Resumo HTML5

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    <!DOCTYPE html> <!

    -- Informa a
    versão do doc. como html5 -->
    <html> <!-- Tag de
    abertura html -->
    <head> <!-- Metadatas
    do doc. html -->
    <title>Titulo</title> <!-- Titulo do
    html, mostrado na aba/navegador -->
    <meta charset="utf-8"> <!--
    Codificação de caracteres utf-8 - SEO-->
    <meta name="author" content="Chris Mills"> <!-- Metadata
    custimizado com informações - SEO-->
    <meta name="description" content="A Área de Aprendizagem do
    MDN tem como objetivo proporcionar novatos completos à Web
    com tudo o que eles precisam saber para começar a desenvolver
    sites e aplicativos."> <!-- Metadata
    custimizado com informações - SEO-->
    <meta property="og:image" content="https://site.net/og.png"> <!-- Open
    Graph Protocol - várias propertys -->
    <meta property="og:description" content="description here"> <!-- og =
    metadados para redes sociais -->
    <meta property="og:title" content="Mozilla Developer Network"> <!--
    Apresentados no compart. em redes sociais -->
    <link rel="shortcut icon" href="fav.ico" type="image/x-icon"> <!-- Favicon
    mostrado ao lado do titulo do html -->
    <link rel="stylesheet" href="my-css-file.css"> <!-- Aplica
    CSS ao html -->
    <script src="my-js-file.js"></script> <!-- Aplica
    javascript ao html -->
    <html lang="pt-BR"> <!-- Define
    idioma do html - SEO-->
    <base href="http://www.exemplo.com/news/removido.html"> <!-- Url base
    para links relativos e forms -->
    <base href="link" target="_blank"> <!-- Link
    usando o baseurl abrem em nova aba -->
    </head>
    <body> <!-- Corpo
    html -->
    <h1>Texto</h1> <!-- Titulo -
    SEO -->
    ...
    <h6>Texto</h6> <!-- Ultimo
    nivel hierarquico de titulos - SEO -->

    <p>Texto</p> <!-- Parágrafo


    -->

    <ol> <!-- Lista


    ordenada-->
    <li>Item lista</li> <!-- Item da
    lista -->
    <li>Item lista</li> <!-- Item da
    lista -->
    </ol>

    <ul> <!-- Lista


    desordenada -->
    <li>Item lista</li> <!-- Item da
    lista -->
    <li>Item lista</li> <!-- Item da
    lista -->
    </ul>

    <a> <!-- links


    -->
    <a href="http://endereco_link.com">Texto link</a> <!-- Link
    para Url -->
    <a href="sobre.html">Texto link</a> <!-- Link
    para relative path -->
    <a href="#top">Texto link</a> <!-- Link
    para tag com id = top -->
    <a href="sobre.html#top">Texto link</a> <!-- Link
    relative path = sobre.html, e id =top -->
    <a href="mailto:endereco@dominio.com">Enviar email</a> <!-- Abre
    MTA para envio de email-->
    <a href="arquivo.pdf" download>Texto link</a> <!-- Força
    download do link-->
    <a href="link" target="_blank">Texto link</a> <!-- Abre
    link em uma nova aba -->
    <a href="link" hreflang="es">Texto link</a> <!--
    Especifíca a linguagem do link -->
    <a href="link" title="Texto tooltip">Texto link</a> <!--
    Apresenta um tooltip do link - SEO -->
    </a>

    <caption>Texto aqui</caption> <!-- Descrição


    da tabela -->
    <table> <!-- Cria
    estrutura de tabela -->
    <colgroup> <!-- Grupo de
    colunas -->
    <col> <!-- Equivale
    a primeira coluna -->
    <col span="3"> <!-- Conta 3
    colunas a partir da anterior -->
    </colgroup>
    <thead> <!-- Informa
    cabeçalho da tabela -- >
    <tr> <!-- Cria
    linha na tabela-->
    <th>Texto</th> <!-- Cria
    coluna(cabeçalho) na tabela -->
    <td>Texto</td> <!-- Cria
    coluna na tabela -->
    </tr>
    </thead>
    <tbody> <!-- Informa
    corpo da tabela -- >
    <tr>
    <th colspan="3">Texto</th> <!-- Texto
    ocupará 3 colunas na linha-->
    <td rowspan="2">Texto</td> <!-- Texto
    ocupará 2 linhas na coluna -->
    </tr>
    </tbody>
    <tfoot> <!-- Informa
    rodapé da tabela -- >
    <tr>
    <th>Texto</th>
    <td>Texto</td>
    </tr>
    </tfoot>
    </table>

    <dl> <!-- Lista de


    definição-->
    <dt>Texto</dt> <!-- Titulo
    definição-->
    <dd>Texto</dd> <!--
    Definição-->
    <dt>Texto</dt>
    <dd>Texto</dd>
    </dl>

    <figure>
    <img src="imagem" alt="descrição"/> <!-- Add.
    imagem ao doc. html -->
    <figcaption>Texto</figcaption>
    </figure>

    <!-- TAGS de formulário-->


    <div id="formulario">
    <form action="destino_infos.html" method="POST"> <!-- Envia
    infos para "action" com metodo POST -->
    <label for="usuario">Rótulo</label> <!-- Rótulo
    para input com name=usuario -->
    <input type="text" name="usuario"> <!-- Input
    para texto curto -->
    <input type="text" name="usuario" required> <!-- Define
    campo como requirido -->
    <input type="text" name="BO" minlength="20" maxlength="100"><!-- Define
    tamanho max e min do input -->
    <input type="text" name="BO" pattern="[a-zA-Z0-9]+"> <!-- Define
    padrão(regex) do input -->
    <input type="password" id="password_user"> <!-- Input
    para password -->
    <input type="number" value="5" step="2"> <!-- Input para número,
    valor padrão 5, altera de 2 em 2 -->
    <input type="range" min="0" max="5" step="0.5"> <!-- Input para
    range, renderiza um slider no html-->

    <label for="id1">Checkbox1</label>
    <input type="checkbox" id="id1" name="group" value="item1"> <!-- Input
    tipo checkbox -->
    <label for="id2">Checkbox2</label>
    <input type="checkbox" id="id2" name="group" value="item2"> <!-- Input
    tipo checkbox, agrupa "group" -->

    <label for="rd1">Radio1</label>
    <input type="radio" id="rd1" name="rgroup" value="yes"> <!-- Input
    tipo radio-->
    <label for="rd2">Radio2</label>
    <input type="radio" id="rd2" name="rgroup" value="no">

    <label for="lunch">What's for lunch?</label>


    <select id="lanche" name="lanche"> <!-- Input
    tipo dropdown -->
    <option value="pizza">Pizza</option> <!-- Opções do
    dropdown -->
    <option value="salada">Salada</option>
    <option value="tacos">Tacos</option>
    </select>

    <input list="temperos" id="tempero"> <!-- Input


    tipo datalist-->
    <datalist id="temperos">
    <option value="ketchup">Ketchup</option> <!-- Opções do
    datalist-->
    <option value="mostarda">Mostarda</option>
    <option value="oregano">Oregano</option>
    </datalist>

    <label for="blog">TextArea </label>


    <textarea id="blog" name="blog" rows="5" cols="30"> <!-- Input
    tipo Textarea -->
    </textarea>

    <input type="submit" name="texto_botao"> <!-- Input


    tipo botão -->

    </form>
    </div>

    <!-- TAGS de formatação -->


    <div id="formatacao">
    Texto <small>diminuido</small> <!-- Diminui
    parte do texto -->
    Texto com parte <em>enfatizada</em> <!--
    Enfatiza(itálico) parte do texto <em> -->
    Texto com parte <strong>destacada</strong> <!--
    Destaca(negrito) parte do texto <strong> -->
    <abbr title="Significado da abreviação">Abreviação</abbr> <!--
    Abreviação de um termo -->
    40<sup>o</sup> graus <!-- Chars.
    elevados, graus(°), cubo(³), etc -->
    H<sub>2</sub>O <!-- Chars.
    abaixo do nível, fórmulas(H²0), etc-->
    <code>Texto</code> <!--
    Formatação de código -->
    <pre>Texto</pre> <!--
    Formatação como escrito no html -->
    <var>Texto</var> <!--
    Formatação para variáveis -->
    <kbd>Texto</kbd> <!--
    Formatação para atalhos de teclado -->
    <samp>Texto</samp> <!--
    Formatação para console(PC) -->
    <br> <!-- Quebra de
    linha -->
    <hr> <!-- Linha
    horizontal -->
    <details open> <!-- Cont.
    minimizado, clicavel para max. -->
    <summary>Texto</summary> <!-- Texto
    apresentado para clicar -->
    <p>Conteudo</p>
    </details>
    <fieldset disabled name="nome" form="associa_ao_form"> <!-- Agrupa
    forms,(form) associa a um form -->
    <legend>Texto</legend> <!-- Caption
    do fieldset-->
    <input type="" name="">
    </fieldset>
    </div>

    <!-- TAGS de Organização de Conteúdo -->


    <div id="conteudo">
    <address>Texto</address> <!-- Contem
    informações de contato/Rede Social -->
    <article>Texto</article> <!-- Contem
    post, artigo, textos diversos-->
    <aside>Texto</aside> <!-- Contem
    inf. apresentadas na barra laretal -->
    <footer>Texto</footer> <!-- Contem
    inf. rodapé -->
    <header>Texto</header> <!-- Contem
    cabeçalho(introdução) do doc. html-->
    <hgroup><h1>Texto</h1><h2>Texto</h2></hgroup> <!-- Contem
    tags de título -->
    <main>Texto</main> <!-- Contem
    inf. principais do doc html -->
    <nav>Texto</nav> <!-- Contem
    inf. de navegação, menus, indices-->
    <section>Texto</section> <!-- Contem
    inf. diversas -->
    <blockquote>Texto</blockquote> <!-- Citação
    longa -->
    <cite>Texto</cite> <!-- Citação
    curta, + utilizada no blockquote-->
    <div>Texto</div> <!-- Agrupador
    genérico -->
    <figure><img src="imagem" /></figure> <!-- Contem
    elementos de imagem <img> -->
    <figcaption>Texto</figcaption> <!-- Caption
    para imagem em <figure> -->
    </div>
    </body>
    </html>

    You might also like