# data[].attributes.body
Output primário do navegador (browser)

Fontes externas

Valor passado a um atributo

Fontes externas passado para um atributo

# data[].attributes.body
<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-->

# data[].attributes.body
<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>

# data[].attributes.body
<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>

# data[].attributes.body
<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>

# data[].attributes.body
<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>

# data[].attributes.body
<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>