Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Aula 04 - HTML5

    Enviado por

    FADBA - Erik Souza Lago
    16 visualizações28 páginas

    Título original

    AULA 04 - HTML5

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    16 visualizações28 páginas

    Aula 04 - HTML5

    Enviado por

    FADBA - Erik Souza Lago

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 28

    Desenvolvimento Web

    HTML5

    Prof.: Erik Lago


    A influência do HTML5
    <!DOCTYPE html>
    <html>
    <head>
    <title>Primeira Página</title>
    </head>
    <body>
    Olá mundo!
    </body>
    </html>

    Prof.: Erik Lago


    A influência do HTML5
    <!DOCTYPE html>
    <html>
    <head>
    <title>Primeira Página</title>
    <meta charset="utf8">
    </head>
    <body>
    Olá mundo!
    </body>
    </html>

    Prof.: Erik Lago


    Títulos, parágrafos e quebra de linha
    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <title>Títulos e Parágrafos</title>
    <meta charset="utf8">
    </head>
    <body>
    <h1>Título</h1>
    <h2>Título</h2>
    <h3>Título</h3>
    <h4>Título</h4>
    <h5>Título</h5>
    <h5>Título</h5>
    </body>
    </html>

    Prof.: Erik Lago


    Títulos, parágrafos e quebra de linha
    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <title>Títulos e Parágrafos</title>
    <meta charset="utf8">
    </head>
    <body>
    <h1>Título</h1>
    <h2>Subtítulo</h2>
    <p> Lorem Ipsum é <br> simplesmente...</p>
    </body>
    </html>

    Prof.: Erik Lago


    Listas
    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <title>Listas</title>
    <meta charset="utf8">
    </head>
    <body>
    <ul>
    <li>Mochila</li>
    <li>Televisão</li>
    <li>Fogão</li>
    </ul>
    </body>
    </html>

    Prof.: Erik Lago


    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <title>Listas</title>
    <meta charset="utf8">
    </head>
    <body>
    <h1>Listas</h1>
    <h2>Lista não-ordenadas:</h2>
    <ul>
    <li>Mochila</li>
    <li>Televisão</li>
    <li>Fogão</li>
    </ul>
    <h2>Lista ordenada:</h2>
    <ol>
    <li>Mochila</li>
    <li>Televisão</li>
    <li>Fogão</li>
    </ol>
    </body>
    </html>

    Prof.: Erik Lago


    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <title>Listas</title>
    <meta charset="utf8">
    </head>
    <body>
    <h1>Listas</h1>
    <h2>Lista não-ordenadas:</h2>
    <ul>
    <li>Mochila</li>
    <li>Televisão</li>
    <li>Fogão</li>
    </ul>
    <h2>Lista ordenada:</h2>
    <ol type="1">
    <li>Mochila</li>
    <li>Televisão</li>
    <li>Fogão</li>
    </ol>
    </body>
    </html>

    Prof.: Erik Lago


    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <title>Listas</title>
    <meta charset="utf8">
    </head>
    <body>
    <h1>Listas</h1>
    <h2>Lista não-ordenadas:</h2>
    <ul>
    <li>Mochila</li>
    <li>Televisão</li>
    <li>Fogão</li>
    </ul>
    <h2>Lista ordenada:</h2>
    <ol type=“A">
    <li>Mochila</li>
    <li>Televisão</li>
    <li>Fogão</li>
    </ol>
    </body>
    </html>

    Prof.: Erik Lago


    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <title>Listas</title>
    <meta charset="utf8">
    </head>
    <body>
    <h1>Listas</h1>
    <h2>Lista não-ordenadas:</h2>
    <ul>
    <li>Mochila</li>
    <li>Televisão</li>
    <li>Fogão</li>
    </ul>
    <h2>Lista ordenada:</h2>
    <ol type=“a">
    <li>Mochila</li>
    <li>Televisão</li>
    <li>Fogão</li>
    </ol>
    </body>
    </html>

    Prof.: Erik Lago


    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <title>Listas</title>
    <meta charset="utf8">
    </head>
    <body>
    <h1>Listas</h1>
    <h2>Lista não-ordenadas:</h2>
    <ul>
    <li>Mochila</li>
    <li>Televisão</li>
    <li>Fogão</li>
    </ul>
    <h2>Lista ordenada:</h2>
    <ol type=“i">
    <li>Mochila</li>
    <li>Televisão</li>
    <li>Fogão</li>
    </ol>
    </body>
    </html>

    Prof.: Erik Lago


    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <title>Listas</title>
    <meta charset="utf8">
    </head>
    <body>
    <h1>Listas</h1>
    <h2>Lista não-ordenadas:</h2>
    <ul>
    <li>Mochila</li>
    <li>Televisão</li>
    <li>Fogão</li>
    </ul>
    <h2>Lista ordenada:</h2>
    <ol type=“I">
    <li>Mochila</li>
    <li>Televisão</li>
    <li>Fogão</li>
    </ol>
    </body>
    </html>

    Prof.: Erik Lago


    <h2>Lista de descrição:</h2>
    <dl>
    <dt>Mochila</dt>
    <dd>Saco de lona ou tecido sintético resistente que se leva às costas seguro
    por correias, us. por soldados, excursionistas, escolares etc.</dd>
    <dt>Televisão</dt>
    <dd>Transmissão e recepção de imagens visuais convertidas em sinais
    eletromagnéticos, por meio de ondas hertzianas ou de cabo coaxial.</dd>
    <dt>Fogão</dt>
    <dd>aparato de alumínio, ferro ou alvenaria, fixo ou móvel, com abertura(s)
    por onde sai uma chama alimentada por gás ou lenha, us. para cozinhar.</dd>
    </dl>

    Prof.: Erik Lago


    <h1>Listas</h1>
    <h2>Lista não-ordenadas:</h2>
    <ul>
    <li>Mochila</li>
    <li>Televisão</li>
    <ol>
    <li>LCD</li>
    <li>Smartv</li>
    </ol>
    <li>Fogão</li>
    </ul>

    Prof.: Erik Lago


    Imagens
    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <title>Imagens</title>
    <meta charset="utf8">
    </head>
    <body>
    <h1>Trabalhando com imagens</h1>
    <img src=“diretório-da-imagem“ title=“nome-da-imagem” alt=“recurso-visual”>
    </body>
    </html>

    Prof.: Erik Lago


    Imagens
    <img src=“diretório-da-imagem“ title=“nome-da-imagem” alt=“recurso-
    visual” widht=“400” height="50">

    • Inserir imagem em uma pasta para imagens, por questões de


    organização.

    Prof.: Erik Lago


    Iframe
    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <title>Iframe</title>
    <meta charset="utf8">
    </head>
    <body>
    <iframe width="500" height="500" src="listas.html"></iframe>
    </body>
    </html>

    Prof.: Erik Lago


    Iframe
    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <title>Iframe</title>
    <meta charset="utf8">
    </head>
    <body>
    <iframe width="500" height="500" src="https://adventista.edu.br"></iframe>
    </body>
    </html>

    Prof.: Erik Lago


    Links
    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <title>Links</title>
    <meta charset="utf8">
    </head>
    <body>
    <h1>Links</h1>
    <a href="https://adventista.edu.br/" target="_blank">Link Externo</a><br>
    <a href="./listas.html" target="_blank">Link Interno</a><br>
    <a href="./listas.html" target="_blank"><img src="./img/20200318-7965.jpg" width="400"></a>
    </body>
    </html>

    Prof.: Erik Lago


    Tabelas
    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <title>Tabelas</title>
    <meta charset="utf8">
    </head>
    <body>
    <h1>Tabelas/h1>
    </body>
    </html>

    Prof.: Erik Lago


    <!DOCTYPE html>
    </colgroup>
    <html lang="pt-br"> <tr>
    <head> <th>Nome:</th>
    <title>Tabelas</title> <th>Email:</th>
    <meta charset="utf8"> <th>Telefone:</th>
    <style> <th>Cargo:</th>
    table, th, td{border: 1px solid #000000;} </tr>
    td {padding: 7px;} <tr>
    .nome{background-color: red;} <td>Robério</td>
    .email{background-color: blue;} <td>roberio@gmail.com</td>
    .telefone{background-color: green;}
    <td>(75) 991458235</td>
    .cargo{background-color: yellow;}
    <td rowspan="2">Desenvolvedor Web</td>
    </tr>
    </style>
    <tr>
    </head>
    <td>Márcio</td>
    <body>
    <td>marcio@gmail.com</td>
    <h1>Tabelas</h1>
    <td>(75) 9887452369</td>
    <table>
    </tr>
    <caption>Cadastro de Clientes</caption> <tr>
    <colgroup> <td colspan="4">Total: 2</td>
    <col class="nome"> </tr>
    <col class="email"> </table>
    <col class="telefone"> </body>
    <col class="cargo"> </html>
    Prof.: Erik Lago
    Div e Span
    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <title>Div</title>
    <meta charset="utf8">
    </head>
    <body>
    <h1>Div</h1>
    </body>
    </html>

    Prof.: Erik Lago


    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <title>Div</title>
    <meta charset="utf8">
    <style>
    div{background-color: #ccc; padding: 20px;}
    span{color: red; background-color: #fff;}
    </style>
    </head>
    <body>
    <div>
    <h1>iv</h1>
    <p>Lorem Ipsum é simplesmente um texto fictício da indústria tipográfica e de impressão. Lorem Ipsum tem sido o texto
    fictício padrão da indústria desde os anos 1500, quando um impressor desconhecido pegou uma cozinha de tipos e embaralhou-
    a para fazer um livro de espécimes de tipos. Ele sobreviveu não apenas cinco séculos, mas também o salto para a composição
    eletrônica, permanecendo essencialmente inalterado. Foi popularizado na década de 1960 com o lançamento de folhas Letraset
    contendo passagens de <span>Lorem Ipsum</span> e, mais recentemente, com software de editoração eletrônica como Aldus
    PageMaker, incluindo versões de Lorem Ipsum.</p>
    </div>
    </body>
    </html>

    Prof.: Erik Lago


    Comentários
    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <title>Comentários/title>
    <meta charset="utf8">
    </head>
    <body>
    <h1>Comentários</h1>
    <!--
    <p>Lorem Ipsum é simplesmente</p>
    -->
    </body>
    </html>

    Prof.: Erik Lago


    Meta
    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <title>Meta</title>
    <meta charset="utf8">
    <meta name="description" content="FADBA">
    <meta name="keywords" content="Curso de GTI">
    <meta name="author" content="Jean do Ouro">

    <meta http-equiv="refresh" content="10">


    </head>
    <body>

    </body>
    </html>

    Prof.: Erik Lago


    Aúdio
    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <title>Aúdio</title>
    <meta charset="utf8">

    </head>
    <body>
    <audio controls autoplay loop>
    <source src="./audio/Rocky Balboa - Theme Song MP3.mp3" type="audio/mpeg">
    </audio>
    </body>
    </html>

    Prof.: Erik Lago


    Vídeo
    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <title>Vídeo</title>
    <meta charset="utf8">

    </head>
    <body>
    <video controls autoplay loop width="700" height="400">
    <source src="./video/Rocky Balboa - Theme Song MP4.mp4" type="video/mp4">
    </video>
    </body>
    </html>

    Prof.: Erik Lago


    Vídeo
    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <title>Vídeo</title>
    <meta charset="utf8">

    </head>
    <body>
    <video controls autoplay loop width="700" height="400">
    <source src="./video/Rocky Balboa - Theme Song MP4.mp4" type="video/mp4">
    <track kind="subtitles" srclang="pt-br" label="PT-BR" src="./video/legendas.srt"></track>
    </video>
    </body>
    </html>

    Prof.: Erik Lago

    Você também pode gostar