Exercícios HTML by Alexandre Julio Rui Tiago https://padlet.com/UFCD0792/su5csowe0lkh7inw en-us 2023-01-05 12:26:05 UTC 2023-01-09 22:20:20 UTC hello@padlet.com Simbologia dos destaques pg49721 https://padlet.com/UFCD0792/su5csowe0lkh7inw/wish/2434581996 Output primário do navegador (browser)

Fontes externas

Valor passado a um atributo

Fontes externas passado para um atributo


]]> 2023-01-05 12:27:24 UTC https://padlet.com/UFCD0792/su5csowe0lkh7inw/wish/2434581996 Exercício Aula 1 pg49721 https://padlet.com/UFCD0792/su5csowe0lkh7inw/wish/2434582373 <html>  <!--início doc HTML-->
<head>  <!--início cabeçalho-->
<title>  <!--início de título de página-->
  HTML - Aula 1
</title>  <!--fim titulo de página-->
</head>  <!--fim de cabeçalho-->
<body>  <!--início de corpo de página-->
  Teste de corpo   <!--Conteúdo do corpo-->
</body>  <!--Tag fim de corpo de página-->
</html>  <!--fim de documento HTML-->]]> 2023-01-05 12:27:57 UTC https://padlet.com/UFCD0792/su5csowe0lkh7inw/wish/2434582373 Exercício Aula 2 pg49721 https://padlet.com/UFCD0792/su5csowe0lkh7inw/wish/2434583086 <html>
<head>
<title>
  HTML - Aula 2
</title>
</head>
<body>
  <h1>Título 1</h1>
  <h2>Título 2</h2>
  <h3>Título 3</h3>
  <h4>Título 4</h4>
  <h5>Título 5</h5>
  <h6>Título 6</h6>
  <hr>
  <p>
    Este é o exemplo de uma afirmação inserida num parágrafo,<br>e que a meio tem uma quebra de linha.
  </p>
  <p>
    Este é outro exemplo, sem quebra de linha, e com um termo <u>sublinhado</u>.
  </p>
  <p>
    Este é outro exemplo, sem quebra de linha, e com um termo a <b>negrito</b>.
  </p>
  <p>
    Este é outro exemplo, sem quebra de linha, e com um termo em <i>itálico</i>.
  </p>
  <p>
    Este é outro exemplo, sem quebra de linha, e com efeitos <u><b><i>combinados</u></b></i>.
  </p>
  <hr>
  <ol>
    <li>Pêra</li>
    <li>Maçã</li>
    <li>Laranja</li>
  </ol>
  <ul>
    <li>Ananás</li>
    <li>Manga</li>
    <li>Maracujá</li>
  </ul>
  <hr>
  <p>
    Exemplo de um endereço de email: <a href="josecardoso@exemplo.com">José Cardoso</a>
  </p>
  <p>
    Outro exemplo de um endereço de email: <a href="josecardoso@exemplo.com">josecardoso@exemplo.com</a>
  </p>
</body>
</html>]]> 2023-01-05 12:28:55 UTC https://padlet.com/UFCD0792/su5csowe0lkh7inw/wish/2434583086 Exercício Aula 3 pg49721 https://padlet.com/UFCD0792/su5csowe0lkh7inw/wish/2434583539 <html>
<head>
<title>
  HTML - Aula 3
</title>
</head>
<body>
  <p>
    Exemplo de hiperligaçao padrão: <a href="https://www.google.com/">Ir para o Google</a>.
  </p>
  <p>
    Abrir hiperligaçao numa nova aba: <a href="https://www.google.com/" target="_blank">Ir para o Google</a>.
  </p>
  <p>
    Abrir hiperligaçao no frame principal: <a href="https://www.google.com/" target="_parent">Ir para o Google</a>.
  </p>
  <p>
    Abrir hiperligaçao na janela principal: <a href="https://www.google.com/" target="_top">Ir para o Google</a>.
  </p>
  <p>
    Abrir hiperligaçao num iframe específico: <a href="https://www.w3schools.com/w3css/tryw3css_templates_band.htm" target="iframe_1">Ir para o site da Banda</a>.
  </p>
  <p>
    Abrir imagem num iframe específico: <a href="https://www.kreedon.com/wp-content/uploads/2022/10/high-gaming-pc-696x464.jpg" target="iframe_1">Ir para a foto do Computador</a>.
  </p>
  <p>
    Exemplo de hiperligação de um <a href="tel:+123456789">Número de Telefone</a>.
  </p>
  <hr>
  <img src="https://www.kreedon.com/wp-content/uploads/2022/10/high-gaming-pc-696x464.jpg" alt="Foto de um Computador" title="Computador" tootip="asdasd" width="300" height="200">
  <hr>
  <iframe name="iframe_1" src="https://www.w3schools.com/w3css/tryw3css_templates_band.htm" width="300" height="300" title="Exemplo de um iFrame">
  </iframe>
</body>
</html>]]> 2023-01-05 12:29:35 UTC https://padlet.com/UFCD0792/su5csowe0lkh7inw/wish/2434583539 Excercício Aula 4 pg49721 https://padlet.com/UFCD0792/su5csowe0lkh7inw/wish/2434583943 <html>
<head>
<title>
  HTML - Aula 4
</title>
<style>
table, th, td {
  border:1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>
  <table style="width:560px;">
    <tr>
      <th style="text-align:left;">Cabeçalho 1</th>
      <th style="text-align:center;">Cabeçalho 2</th>
      <th style="text-align:right;">Cabeçalho 3</th>
    </tr>
    <tr>
      <td style="text-align:right;">Conteúdo</td>
      <td style="text-align:center;">Conteúdo</td>
      <td style="text-align:left;">Conteúdo</td>
    </tr>
    <tr>
      <td style="text-align:left;"><b>Conteúdo</b></td>
      <td style="text-align:center;"><u>Conteúdo</u></td>
      <td style="text-align:right;"><i>Conteúdo</i></td>
    </tr>
  </table>
  <hr>
  <table style="width:560px;margin-left:auto;margin-right:auto;">
    <tr>
      <th style="text-align:left;">Corgi 1</th>
      <th style="text-align:center;">Corgi 2</th>
      <th style="text-align:right;">Corgi 3</th>
    </tr>
    <tr>
      <td style="text-align:right;"><img src="https://img.icons8.com/color/99/corgi.png" alt="Corgi"></td>
      <td style="text-align:center;"><img src="https://img.icons8.com/color/99/corgi.png" alt="Corgi"></td>
      <td style="text-align:left;"><img src="https://img.icons8.com/color/99/corgi.png" alt="Corgi"></td>
    </tr>
    <tr>
      <td style="text-align:right;"><a href="https://www.google.com/">Ir para o Google</a></td>
      <td style="text-align:center;"><a href="josecardoso@exemplo.com">Enviar Email</a></td>
      <td style="text-align:left;"><a href="tel:+123456789">Fazer chamada</a></td>
    </tr>
  </table>
  <hr>
  <img src="https://www.gifex.com/images/0X0/2009-09-17-2409/Mapa_de_la_la_Region_Norte_de_Portugal.gif" alt="Mapa" usemap="#mapanorte" width="600" height="437">
  <map name="mapanorte">
      <area target="_blank" alt="Viana do Castelo" title="Viana do Castelo" href="https://pt.wikipedia.org/wiki/Viana_do_Castelo" coords="226,118,109,58" shape="rect">
      <area target="_blank" alt="Braga" title="Braga" href="https://pt.wikipedia.org/wiki/Braga" coords="101,135,223,127,256,205,129,205" shape="poly">
      <area target="_blank" alt="Porto" title="Porto" href="https://pt.wikipedia.org/wiki/Porto" coords="208,223,87,278" shape="rect">
      <area target="_blank" alt="Aveiro" title="Aveiro" href="https://pt.wikipedia.org/wiki/Aveiro" coords="115,319,38" shape="circle">
      <area target="_blank" alt="Viseu" title="Viseu" href="https://pt.wikipedia.org/wiki/Viseu" coords="162,298,321,324,283,401" shape="poly">
      <area target="_blank" alt="Vila Real" title="Vila Real" href="https://pt.wikipedia.org/wiki/Vila_Real" coords="245,136,286,189,231,290,312,304,396,176" shape="poly">
      <area target="_blank" alt="Bragança" title="Bragança" href="https://pt.wikipedia.org/wiki/Bragança_(Portugal)" coords="447,269,93" shape="circle">
  </map>
</body>
</html>]]> 2023-01-05 12:30:15 UTC https://padlet.com/UFCD0792/su5csowe0lkh7inw/wish/2434583943 Excercício Aula 5 pg49721 https://padlet.com/UFCD0792/su5csowe0lkh7inw/wish/2434584313 <html>
<head>
<title>
  HTML - Aula 5
</title>
</head>
<body>
  <form action="\">
    <label for="nome">Nome:</label><br>
    <input type="text" id="nome" name="nome" value=""><br>
    <label for="apelido">Apelido:</label><br>
    <input type="text" id="apelido" name="apelido" value=""><br><br>
    <input type="reset" value="Reset">
    <input type="submit" value="Submeter">
  </form>
  <hr>
  <form action="\">
    <fieldset>
      <legend>Dados de contacto:</legend>
      <label for="morada">Morada:</label>
      <input type="text" id="morada" name="morada" required><br><br>
      <label for="porta">Número de Porta:</label>
      <input type="number" id="porta" name="porta" min="1" max="9999"><br><br>
      <label for="cpostal">Código Postal:</label>
      <input type="text" id="cpostal" name="cpostal" placeholder="4200-123" pattern="[0-9]{4}-[0-9]{3}" required><br><br>
      <label for="pais">País:</label>
      <select name="pais" id="pais">
        <option value="Portugal">Portugal</option>
        <option value="Espanha">Espanha</option>
        <option value="França">França</option>
        <option value="Suiça">Suiça</option>
      </select><br><br>
      <label for="telemovel">Telemóvel:</label>
      <input type="tel" id="telemovel" name="telemovel" placeholder="351 91 1234567" pattern="[0-9]{3} [0-9]{2} [0-9]{7}" required><br><br>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email"><br><br>
      <label for="nascimento">Data de Nascimento:</label>
      <input type="date" id="nascimento" name="nascimento"><br><br>
      <input type="reset" value="Reset">
      <input type="submit" value="Submeter">
    </fieldset>
  </form>
  <hr>
  <form action="\">
    <fieldset>
      <legend>Dados facultativos:</legend>
      <form action="\"> 
        <table>
          <tr>
           <td>
             Sexo:<br>
             <input type="radio" id="masculino" name="sexo" value="masculino">
             <label for="masculino">Masculino</label><br>
             <input type="radio" id="feminino" name="sexo" value="feminino">
             <label for="age2">Feminino</label><br><br>
             Interesses:<br>
             <input type="checkbox" id="interesse1" name="interesse1" value="Desporto">
             <label for="interesse1"> Desporto</label><br>
             <input type="checkbox" id="interesse2" name="interesse2" value="Musica">
             <label for="interesse2"> Música</label><br>
             <input type="checkbox" id="interesse3" name="interesse3" value="Leitura">
             <label for="interesse3"> Leitura</label><br>
             <input type="checkbox" id="interesse4" name="interesse4" value="Gastronomia">
             <label for="interesse4"> Gastronomia</label><br>
             <input type="checkbox" id="interesse5" name="interesse5" value="Cinema">
             <label for="interesse5"> Cinema</label><br><br>
           </td>
           <td width="50">
           </td>
           <td>
             Mais sobre si:<br>
             <textarea id="sobre" name="sobre" rows="10" cols="70"></textarea>
           </td>
         </tr>
        </table>   
        <input type="reset" value="Reset">
        <input type="submit" value="Submeter">
      </form>
    </fieldset>
  </form>
</body>
</html>]]> 2023-01-05 12:30:43 UTC https://padlet.com/UFCD0792/su5csowe0lkh7inw/wish/2434584313 Exercicio Aula 6 pg49721 https://padlet.com/UFCD0792/su5csowe0lkh7inw/wish/2436728324 <html>
  <head>
    <title>HTML - Aula 6</title>
  </head>
  <body>
    <div>
    <form action="/">
      <h1>Criar conta</h1>
      <fieldset>
        <legend>
          <h3>Detalhes de conta</h3>
        </legend>
        <div>
          <div><label>Email* </label><input type="text" name="email" required></div><br>
          <div><label>Password* </label><input type="password" name="password" required></div><br>
          <div><label>Repetir email* </label><input type="text" name="remail" required></div><br>
          <div><label>Repetir password* </label><input type="password" name="rpassword" required></div>
        </div>
      </fieldset>
      <fieldset>
        <legend>
          <h3>Detalhes pessoais</h3>
        </legend>
        <div>
          <div>
            <div><label>Nome* </label><input type="text" name="nome" required></div><br>
            <div><label>Telefone* </label><input type="text" name="telefone" required></div><br>
            <div><label>Morada </label><input type="text" name="morada"></div><br>
            <div><label>Localidade* </label><input type="text" name="localidade" required></div><br>
            <div>
              <label>País* </label> 
              <select>
                <option value=""></option>
                <option value="Portugal">Portugal</option>
                <option value="Armenia">Armenia</option>
                <option value="Alemanha">Alemanha</option>
                <option value="França">França</option>
                <option value="Espanha">Espanha</option>
                <option value="Marrocos">Marrocos</option>
              </select>
            </div><br>
            <div><label>Website</label><input type="text" name="website"></div><br>
          </div>
          <div>
            <div>
              <label>Sexo* </label>
              <div>
                <input type="radio" value="none" id="masc" name="sexo" required/>
                <label for="masc" class="radio">Masculino</label>
                <input type="radio" value="none" id="fem" name="sexo" required/>
                <label for="fem" class="radio">Feminino</label>
              </div><br>
            </div>
            <div>
              <label>Data nascimento* </label>
              <div>
                <select required>
                  <option value=""></option>
                  <option value="01">01</option>
                  <option value="02">02</option>
                  <option value="03">03</option>
                  <option value="04">04</option>
                  <option value="05">05</option>
                  <option value="06">06</option>
                  <option value="07">07</option>
                  <option value="08">08</option>
                  <option value="09">09</option>
                  <option value="10">10</option>
                  <option value="11">11</option>
                  <option value="12">12</option>
                  <option value="13">13</option>
                  <option value="14">14</option>
                  <option value="15">15</option>
                  <option value="16">16</option>
                  <option value="17">17</option>
                  <option value="18">18</option>
                  <option value="19">19</option>
                  <option value="20">20</option>
                  <option value="21">21</option>
                  <option value="22">22</option>
                  <option value="23">23</option>
                  <option value="24">24</option>
                  <option value="25">25</option>
                  <option value="26">26</option>
                  <option value="27">27</option>
                  <option value="28">28</option>
                  <option value="29">29</option>
                  <option value="30">30</option>
                  <option value="31">31</option>
                </select>
                <select required>
                  <option value=""></option>
                  <option value="Janeiro">Janeiro</option>
                  <option value="Fevereiro">Fevereiro</option>
                  <option value="Março">Março</option>
                  <option value="Abril">Abril</option>
                  <option value="Maio">Maio</option>
                  <option value="Junho">Junho</option>
                  <option value="Julho">Julho</option>
                  <option value="Agosto">Agosto</option>
                  <option value="Setembro">Setembro</option>
                  <option value="Outubro">Outubro</option>
                  <option value="Novembro">Novembro</option>
                  <option value="Dezembro">Dezembro</option>
                </select>
                <input type="text" name="ano" required>
              </div>
            </div>
            <div>
              <label>Nacionalidade* </label>             
              <select required>
                <option value=""></option>
                <option value="Portuguesa">Portuguesa</option>
                <option value="Armena">Armena</option>
                <option value="Alemã">Alemã</option>
                <option value="Francesa">Francesa</option>
                <option value="Espanhola">Espanhola</option>
                <option value="Marroquina">Marroquina</option>
              </select>
            </div>
            <div>
              <label>Filhos* </label>
              <div><input type="checkbox" name="filhos" required></div>
            </div>
          </div>
        </div>
      </fieldset>
      <fieldset>
        <legend>
          <h3>Termos e newslwtter</h3>
        </legend>
        <div>
          <div>
            <input type="checkbox" name="politicas"><span>Aceito as <a href="https://www.w3docs.com/privacy-policy">Políticas de privacidade</a>.</span>
          </div><br>
          <div>
            <input type="checkbox" name="newsletter"><span>Quero receber ofertas e campanhas promovidas pelo site.</span>
          </div>
      </fieldset>
      <button type="submit" href="/">Submit</button>
    </form>
    </div> 
  </body>
</html>]]> 2023-01-08 11:59:15 UTC https://padlet.com/UFCD0792/su5csowe0lkh7inw/wish/2436728324