Giters

cmarih / curso-em-video-HTML5

Aprendendo HTML5

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

HTML5

Estrutura do HTML:

<!DOCTYPE html> <!-- Informa o navegador a versão do HTML-->
    <html lang="pt-br"> <!-- Indica o inicio do documento html e informa o idioma do site-->
        <head> <!--aqui serão adicionadas informações importantes para o navegador, chamamos esa tag de 'cabeça'-->
            <meta charset="UTF-8"> <!--Ajusta o texto, para que seja possivel usar ç, acentos e etc-->
            <title>Básico de HTML5</title> <!--Adiciona um titulo a página-->
        </head> <!--Fechamento da tag 'cabeça'-->
        <body> <!--aqui adicionamos as informações da pagina que serão visualizadas pelo usuário, chamamos ela de 'corpo'-->
    
        </body> <!--Fechamento da tag 'corpo'-->
    </html><!--Fechamento da tag HTML-->

Implementando CSS:

<head>
    /*A tag de estilo <style> pode ser adicionada junto a tag <head>, porem, é mais adequado usá-la em um arquivo externo*/
    <style>
        h1{
            font-family: Arial, Helvetica, sans-serif;
            font-size: 30pt;
            color: blueviolet;
        }
    </style>
</head>

Tags básicas

  • Cabeçalho de seção (h1, h2, h3, h4, h5 e h6): representam seis níveis de título de seção. H1 é o nível de seção mais alto, o mais importante e H6 é o mais baixo, nem tão importante assim.

    <h1>Cabeçalho nível 1</h1>
    <h2>Cabeçalho nível 2</h2>
        <h3>Cabeçalho nível 3</h3>
            <h4>Cabeçalho nível 4</h4>
                <h5>Cabeçalho nível 5</h5>
                    <h6>Cabeçalho nível 6</h6>

IMPORTANTE: Não use níveis menores para diminuir o tamanho da fonte do cabeçalho: use a propriedade css.

  • Tag <div>: é um container genérico para conteúdo de fluxo, que de certa forma não representa nada. Ele pode ser utilizado para agrupar elementos para fins de estilos (usando class ou id), ou porque eles compartilham valores de atributos, como lang. Ele deve ser utilizado somente quando não tiver outro elemento de semântica (tal como 'article' ou 'nav').

    <div>
    <p>Qualquer tipo de conteúdo aqui.</p>
    <img src="imagem.png">
</div>

  • Tag <hgroup>: Agrupamento de títulos com subtítulos da mesma categoria. Não há diferença visualmente, mas sim, semânticamente.

    <hgroup>
    <h1>Olá mundo!!</h1>
    <h2>Me livrando da maldição!</h2>
</hgroup>

  • Tag <img>: Adiciona imagens a página. É uma tag que não possue fechamento (/img)

    <img src="imagem.png">

  • Tag <header>: representa um grupo de suporte introdutório ou navegacional. Pode conter alguns elementos de cabeçalho mas também outros elementos como um logo, seções de cabeçalho, formulário de pesquisa, e outros.

    <header>
    <h1>Título da Página Principal</h1>
    <img src="logo.png" alt="logo">
</header>

  • Tag <br> (Break Row): é uma tag de quebra de linha, espaçamento entre tags.

        <h1>Título da Página Principal</h1> <br><br> <!--Adicionando 2 quebras de linha-->
    <img src="logo.png" alt="logo">

  • Tag <p>: define o paragrafo do seu documento.

    <p>Aqui tem um paragrafo.</p>

  • Tag <wbr>: é uma tag para quebra de palavras.

    <p>super-<wbr>humano</p>

  • Tag <b>: Formatação em negrito.

    <p>Este texto está em <b>Negrito</b>!</p>

  • <strong>: Destaque em determinada palavra ou paragrafo.

    <p>Este texto está em <strong>Destaque</strong>!</p>

  • <em>: Ênfase em palavras e textos.

    <p>Este texto está em <em>Ênfase</em>!</p>

  • <i>: Formatação em itálico.

    <p>Este texto está em <i>Itálico</i>!</p>

  • <del>: Texto Deletado.

    <p>Este texto está em <del>Itálico</del>!</p>

  • Tag <pre>: É uma tag de pré formatação, ou seja, todos os espaços e quebras de linhas serão consideradas no html.

    <h2>Código</h2>
    <code>
        #include &lt;iostream&gt;
        int main() {
            cout << "olá munto!!";
            return 0;
        }
    </code>
    <!-- Visualização: 
    #include <iostream> int main() { cout << "olá munto!!"; return 0; }
    -->

  • Tag <code>:É uma tag semântica, que diz para o navegador que ali possui um código.

    <h2>Código</h2>
    <pre>
        <code>
            #include &lt;iostream&gt;
            int main() {
                cout << "olá munto!!";
                return 0;
            }
        </code>
    </pre>
     <!-- Visualização: 
        #include <iostream>
            int main() {
                cout << "olá munto!!";
                return 0;
            }
    -->

  • Tag <figure> e Tag <figcaption>: É uma tag semântica, que diz para o navegador que ali possui uma imagem, permite adicinar legendas e é usado para acessibilidade e mecanismos de busca.

    <h2>Tags de imagens</h2>
    <figure>
        <img src="img.png" alt="exemplo de imagem">
        <figcaption>
            <h1>Título da legenda</h3>
                <p>Adicionando uma descrição/legenda da imagem.</p>
        </figcaption>

    </figure>

  • Tag <nav> e Tag <figcaption>:É uma tag container, que diz para o navegador que ali possui uma area de navegação, utilizada principalmente para menus.

    <nav>
    <h1>Menu Principal</h1>
</nav>

Entidades HTML

Alguns caracteres são reservados em HTML. Se você usar os sinais de menor que (<) ou maior que (>) em seu texto, o navegador pode misturá-los com tags. As entidades de caracteres são usadas para exibir caracteres reservados em HTML.

  •   - non-breaking space: Espaço lateral, entre elemento. Espaço sem quebra:

    <h3>Tecnologia &nbsp; Inovações</h3>

  • ­ - Soft Hyphen: realiza quebra de palavra, adicionando o hifen (-).

    <p>video &shy; conferên &shy; cia</p>

  • > , < simbolo de maior e menor, respectivamente.

    <h2>Simbolos Especiais:</h2>
    <p>
        Maior: &gt;
        <br>
        Menor: &lt;
    </p>

  • ≤ , ≥ simbolo de menor/igual e maior/igual respectivamente.

     <h2>Simbolos Especiais:</h2>
    <p>
        Menor igual: &le;
        <br>
        Maior igual: &ge;
    </p>

  • £ , ℜ , € simbolo monetário.

     <h2>Simbolos Monetários:</h2>
    <p>
        Libras: &pound;
        <br>
        Euro: &euro;
        <br>
        Real: &real;
    </p>

  • ‰ , ∑ , ∞ , × , ± , ⊕ , √ , ≠

       <h2>Simbolos</h2>
    <p>
        &permil;
        <br>
        &sum;
        <br>
        &infin;
        <br>
        &times;
        <br>
        &plusmn;
        <br>
        &oplus;
        <br>
        &radic;
        <br>
        &ne;
    </p>

  • Δ , Λ , ω , φ

     <h2>Simbolos</h2>
    <p>
        &Delta;
        <br>
        &Lambda;
        <br>
        &omega;
        <br>
        &phi;
        
    </p>

  • © , ™ , ® simbolos de registros.

     <h2>Simbolos Especiais:</h2>
    <p>
        Copyright: &copy;
        <br>
        Marca registrada: &reg;
        <br>
        Trade mark: &trade;
    </p>

  • ← , → , ↑ , ↓ , ↔ setas.

     <h2>Setas</h2>
    <p>
        &larr;
        <br>
        &rarr;
        <br>
        &uarr;
        <br>
        &darr;
        <br>
        &harr;
        
    </p>

  • ♠ , ♣ , ♥ , ♦ Simbolos das cartas.

    <h2>Simbolos das cartas</h2>
    <p>
        &spades;
        <br>
        &clubs;
        <br>
        &hearts;
        <br>
        &diams;
                    
    </p>

Listas em HTML

  • Lista ordenada <ol>:

        <nav>
        <h1>Menu Principal</h1>
        <ol>
            <li>Home</li>
            <li>Especificações</li>
            <li>Fotos</li>
            <li>Multimídia</li>
            <li>Fale conosco</li>
        </ol>
    </nav>

    <!--
        Menu Principal
        1. Home
        2. Especificações
        3. Fotos
        4. Multimídia
        5. Fale conosco
    -->

    • Tipos de lista ordenada <ol>:

      1. Ordenado númericamente:

            <nav>
        <h1>Menu Principal</h1>
        <ol type="1">
            <li>Home</li>
            <li>Especificações</li>
            <li>Fotos</li>
            <li>Multimídia</li>
            <li>Fale conosco</li>
        </ol>
    </nav>

    <!--
        Menu Principal
        1. Home
        2. Especificações
        3. Fotos
        4. Multimídia
        5. Fale conosco
    -->

      2. Ordenado alfabeticamente:

            <nav>
        <h1>Menu Principal</h1>
        <ol type="a">
            <li>Home</li>
            <li>Especificações</li>
            <li>Fotos</li>
            <li>Multimídia</li>
            <li>Fale conosco</li>
        </ol>
    </nav>

    <!--
        Menu Principal
        a. Home
        b. Especificações
        c. Fotos
        d. Multimídia
        e. Fale conosco
    -->

    <nav>
        <h1>Menu Principal</h1>
        <ol type="A">
            <li>Home</li>
            <li>Especificações</li>
            <li>Fotos</li>
            <li>Multimídia</li>
            <li>Fale conosco</li>
        </ol>
    </nav>

    <!--
        Menu Principal
        A. Home
        B. Especificações
        C. Fotos
        D. Multimídia
        E. Fale conosco
    -->

      3. Ordenado em numeração romana:

            <nav>
        <h1>Menu Principal</h1>
        <ol type="i">
            <li>Home</li>
            <li>Especificações</li>
            <li>Fotos</li>
            <li>Multimídia</li>
            <li>Fale conosco</li>
        </ol>
    </nav>

    <!--
        Menu Principal
        i. Home
    ii. Especificações
    iii. Fotos
    iv. Multimídia
        v. Fale conosco
    -->

    <nav>
        <h1>Menu Principal</h1>
        <ol type="I">
            <li>Home</li>
            <li>Especificações</li>
            <li>Fotos</li>
            <li>Multimídia</li>
            <li>Fale conosco</li>
        </ol>
    </nav>

    <!--
        Menu Principal
        I. Home
    II. Especificações
    III. Fotos
    IV. Multimídia
        V. Fale conosco
    -->

  • Lista não ordenada <ul>:

        <nav>
        <h1>Menu Principal</h1>
        <ul>
            <li>Home</li>
            <li>Especificações</li>
            <li>Fotos</li>
            <li>Multimídia</li>
            <li>Fale conosco</li>
        </ul>
    </nav>

    <!--
        Menu Principal
        • Home
        • Especificações
        • Fotos
        • Multimídia
        • Fale conosco
    -->

    • Tipos de lista não ordenadas <ol>:

      1. Ordenação square:

            <nav>
        <h1>Menu Principal</h1>
        <ol type="square">
            <li>Home</li>
            <li>Especificações</li>
            <li>Fotos</li>
            <li>Multimídia</li>
            <li>Fale conosco</li>
        </ol>
    </nav>

    <!--
        Menu Principal
        � Home
        � Especificações
        � Fotos
        � Multimídia
        � Fale conosco
    -->

      2. Ordenação circle:

            <nav>
        <h1>Menu Principal</h1>
        <ol type="circle">
            <li>Home</li>
            <li>Especificações</li>
            <li>Fotos</li>
            <li>Multimídia</li>
            <li>Fale conosco</li>
        </ol>
    </nav>

    <!--
        Menu Principal
        ° Home
        ° Especificações
        ° Fotos
        ° Multimídia
        ° Fale conosco
    -->

      3. Ordenação disc:

            <nav>
        <h1>Menu Principal</h1>
        <ol type="disc">
            <li>Home</li>
            <li>Especificações</li>
            <li>Fotos</li>
            <li>Multimídia</li>
            <li>Fale conosco</li>
        </ol>
    </nav>

    <!--
        Menu Principal
        • Home
        • Especificações
        • Fotos
        • Multimídia
        • Fale conosco
    -->

Semântica em HTML

Tags semânticas do HTML5

  • Tag <section>: Usado para dividir seções na página.

  • Tag <aside>: Cria uma seção lateral

  • Tag <footer>: Cria um rodapé.

  • Tag <footer>: Cria um campo de artigo.

About

Aprendendo HTML5

Languages

Language:HTML 87.6%Language:CSS 12.2%Language:JavaScript 0.2%