Você está aprendendo
Ver documentação
Exercícios de HTML: Teste seus conhecimentos 2
Objetivo: 3 acertos
Prêmio: 1 conquista de HTML
Progresso atual:
Olá, bem vindo a sala Teste seus conhecimentos 2 de HTML
Esta sala possui um pré-requisito recomendado
Clique no botão abaixo, desbloqueie conteúdos, exercícios e conquiste essa sala.
Temos vagas de HTML
2 vagas disponíveis
Obrigado pelo seu feedback.
Esta sala possui um pré-requisito recomendado
Conteúdo da sala
Sala
Documentação
HTML: Teste seus conhecimentos 2

Ao acessar uma página web através de um navegador, ele é capaz de interpretar o código HTML e renderizá-lo de forma compreensível para o usuário final, exibindo textos, botões, etc. com as configurações definidas por meio das diversas tags que essa linguagem dispõe.

Características

  • Criar as elementos que compõe uma página web
  • Case insensitive
  • As tags também possuem atributos

Exemplo

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Document</title>
</head>
<body>
    <!-- cabeçalhos -->
    <h1>Título de nível 1</h1>
    <h2>Título de nível 2</h2>
    <h3>Título de nível 3</h3>
    <h4>Título de nível 4</h4>
    <h5>Título de nível 5</h5>
    <h6>Título de nível 6</h6>

    <!-- parágrafos -->
    <p>Primeiro parágrafo do texto.</p>
    <p>Segundo parágrafo do texto.</p>
    <p>Terceiro parágrafo do texto.</p>

    <!-- imagens -->
    <img src="avatar.png" alt="Texto alternativo" title="Avatar"/>
    <img src="arquivo_inexistente.jpg" 
        alt="Texto alternativo" title="Outra figura"/>

    <!-- links -->
    <a href="4.imagens.html">Página 2</a>

    <!-- tabelas -->
    <table>
        <thead>
            <tr>
                <th>Produto</th>
                <th>Preço</th>
                <th>Quantidade</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Feijão</td>
                <td>R$ 8,75</td>
                <td>1</td>
            </tr>
            <tr>
                <td>Arroz</td>
                <td>R$ 4,99</td>
                <td>2</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Total</td>
                <td></td>
                <td>R$ 18,73</td>
            </tr>
        </tfoot>
    </table>

    <!-- listas -->
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>
 
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
 
    <dl>
        <dt>Título 1</dt>
        <dd>Definição 1</dd>
        <dt>Título 2</dt>
        <dd>Definição 2</dd>
        <dt>Título 3</dt>
        <dd>Definição 3</dd>
    </dl>

    <!-- formulário -->
    <form action="salvar_dados.php" method="post">
        <input type="text" placeholder="Digite aqui"> <br/>
        <input type="checkbox">Checkbox <br/>
        <input type="radio">Radio button <br/>
        <input type="range"> <br/>
        <input type="submit" value="Enviar">
    </form>

    <!-- formatação de texto -->
    <p>Texto em negrito com <b>bold</b> e <strong>strong</strong>.</p>
    <p>Texto em itálico com <i>italics<i> e <em>emphasis</em>.</p>
    <p>Texto <sup>sobrescrito</sup> e <sub>subscrito</sub>.</p>
    <p>Texto <ins>inserido</ins> e <del>excluído</del>.</p>
    <p>Texto <small>pequeno</small> e <mark>destacado</mark>.</p>

    <!-- áudio/vídeo -->
    <audio controls src="musica.mp3" >
        <source src="musica.ogg" type="audio/ogg">
        <source src="musica.mp3" type="audio/mpeg">
    </audio>
 
    <video width="640" height="480" controls>
        <source src="vdeio.webm" type="video/webm">
        <source src="video.mp4" type="video/mp4">
    </video>

    <!-- dev e span -->
    <input type="text" value="input 1">
    <input type="text" value="input 2">
    <div>
        <input type="text" value="input 3">
    </div>
    <div>
        <input type="text" value="input 4">
    </div>
    <p>Este é um texto com um <span>trecho em destaque</span>.</p>
    <p>
        Este é um texto com um 
        <span style="background: #1abc9c; border-radius:5px; padding:5px">
            trecho em destaque
        </span>.
    </p>
</body>
</html>

O que eu preciso aprender?

1. Como criar um formulário

2. Como formatar um texto

3. Como criar tabelas.

4. Como escrever uma lista ordenada

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários. Para saber mais sobre o uso de cookies,
consulte nossa política de privacidade. Ao continuar navegando em nosso site, você concorda com a nossa política.

Aceitar