Sessão 2 - Criar uma página pessoal
This commit is contained in:
269
ex01.html
Normal file
269
ex01.html
Normal file
@@ -0,0 +1,269 @@
|
||||
<!doctype html>
|
||||
<html lang="pt">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<title>UC00622 – Criar aplicações em HTML5</title>
|
||||
|
||||
<!-- Meta -->
|
||||
<meta name="description" content="A minha página em HTML5" />
|
||||
<meta name="author" content="Luís Carlos Alves" />
|
||||
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" href="favicon.ico" />
|
||||
<link rel="shortcut icon" href="favicon.svg" type="image/svg" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img
|
||||
src="images/html-js-css-icon-style.jpg"
|
||||
style="display: inline; margin: 1em"
|
||||
title="versão JPG"
|
||||
width="300px"
|
||||
/>
|
||||
<img
|
||||
src="images/html-js-css-icon-style.svg"
|
||||
style="display: inline; margin: 1em"
|
||||
title="versão SVG"
|
||||
width="300px"
|
||||
/>
|
||||
<h1>Elementos HTML5 e exemplos de utilização</h1>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<h2>Listas</h2>
|
||||
<h3>Filmes</h3>
|
||||
<ul class="movie-list">
|
||||
<li>
|
||||
<img src="images/shawshank.jpg" alt="The Shawshank Redemption poster" />
|
||||
<span>The Shawshank Redemption</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="images/12-angry-men.jpg" alt="12 Angry Men poster" />
|
||||
<span>12 Angry Men</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="images/lotr.jpg" alt="The Lord of the Rings poster" />
|
||||
<span>The Lord of the Rings</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="images/forrest-gump.jpg" alt="Forrest Gump poster" />
|
||||
<span>Forrest Gump</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="images/silence-of-the-lambs.jpg" alt="The Silence of the Lambs poster" />
|
||||
<span>The Silence of the Lambs</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="images/seven-samurai.jpg" alt="Seven Samurai poster" />
|
||||
<span>Shichinin no samurai (Seven Samurai)</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="images/matrix.jpg" alt="The Matrix poster" />
|
||||
<span>The Matrix</span>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Livros</h3>
|
||||
<ol>
|
||||
<li>Dom Quixote — Miguel de Cervantes</li>
|
||||
<li>Harry Potter e a Pedra Filosofal — J.K. Rowling</li>
|
||||
<li>O Senhor dos Anéis: A Sociedade do Anel — J.R.R. Tolkien</li>
|
||||
<li>O Pequeno Príncipe — Antoine de Saint-Exupéry</li>
|
||||
<li>1984 — George Orwell</li>
|
||||
<li>The Gallaghers of Ardmore — Nora Roberts</li>
|
||||
<li>A Culpa é das Estrelas — John Green</li>
|
||||
</ol>
|
||||
<h2>Tabelas</h2>
|
||||
<h3>Calendário da Formação</h3>
|
||||
<table class="schedule" style="margin: 1em auto">
|
||||
<colgroup>
|
||||
<col width="60px" />
|
||||
<col width="190px" />
|
||||
<col width="70px" span="3" />
|
||||
<col width="190px" />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Sessão</th>
|
||||
<th>Data</th>
|
||||
<th>Início</th>
|
||||
<th>Termino</th>
|
||||
<th>Duração</th>
|
||||
<th>ID da Sessão / Ligação</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>sab, 31 de janeiro</td>
|
||||
<td>09:00</td>
|
||||
<td>13:30</td>
|
||||
<td>4h30</td>
|
||||
<td rowspan="8" style="line-height: 2em">
|
||||
840 8135 5122<br />
|
||||
<span style="font-weight: bold; border-radius: 6px; padding: 12px; background-color: rgb(14, 113, 235)">
|
||||
<a style="color: white" href="https://us02web.zoom.us/j/84081355122" moz-do-not-send="true"
|
||||
>Iniciar Reunião</a
|
||||
></span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>sab, 7 de fevereiro</td>
|
||||
<td>09:00</td>
|
||||
<td>13:30</td>
|
||||
<td>4h30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>sab, 21 de fevereiro</td>
|
||||
<td>09:00</td>
|
||||
<td>13:30</td>
|
||||
<td>4h30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>sab, 28 de fevereiro</td>
|
||||
<td>09:00</td>
|
||||
<td>13:30</td>
|
||||
<td>4h30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>sab, 7 de março</td>
|
||||
<td>09:00</td>
|
||||
<td>13:30</td>
|
||||
<td>4h30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>sab, 14 de março</td>
|
||||
<td>09:00</td>
|
||||
<td>13:30</td>
|
||||
<td>4h30</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>Formulário de contacto</h2>
|
||||
<form>
|
||||
<label for="nome">Nome:</label>
|
||||
<input type="text" id="nome" name="nome" placeholder="Digite o seu nome" />
|
||||
<br />
|
||||
<label for="email">Email:</label>
|
||||
<input type="email" id="email" name="email" placeholder="exemplo@email.com" /><br /><br />
|
||||
|
||||
<label for="password">Senha:</label>
|
||||
<input type="password" id="password" name="password" /><br /><br />
|
||||
|
||||
<label for="genero">Género:</label>
|
||||
<select id="genero" name="genero">
|
||||
<option value="masculino">Masculino</option>
|
||||
<option value="feminino">Feminino</option>
|
||||
<option value="outro">Outro</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Interesses:</label>
|
||||
<div style="margin-left: 10em">
|
||||
<input type="checkbox" id="html" name="interesse" value="html" />
|
||||
<label for="html">HTML</label><br />
|
||||
<input type="checkbox" id="css" name="interesse" value="css" />
|
||||
<label for="css">CSS</label><br />
|
||||
<input type="checkbox" id="js" name="interesse" value="js" />
|
||||
<label for="js">JavaScript</label><br /><br />
|
||||
<button type="submit">Enviar</button>
|
||||
</div>
|
||||
</form>
|
||||
<h2>Glossário</h2>
|
||||
<dl>
|
||||
<dt>HTML</dt>
|
||||
<dd>
|
||||
<p>
|
||||
HTML (abreviação para a expressão inglesa HyperText Markup Language, que significa: "Linguagem de Marcação
|
||||
de Hipertexto") é uma linguagem de marcação utilizada na construção de páginas na Web. Documentos HTML podem
|
||||
ser interpretados por navegadores. A tecnologia é fruto da junção entre os padrões HyTime e SGML.
|
||||
</p>
|
||||
<p>
|
||||
Mais informação em
|
||||
<a href="https://pt.wikipedia.org/wiki/HTML" target="_blank">Wikipédia</a>
|
||||
</p>
|
||||
</dd>
|
||||
<dt>Cascading Style Sheets</dt>
|
||||
<dd>
|
||||
<p>
|
||||
Cascading Style Sheets (abreviado CSS) é um mecanismo para adicionar estilos (cores, fontes, espaçamento,
|
||||
etc.) a uma página web, aplicado diretamente nas tags HTML ou ficar contido dentro das tags
|
||||
<code><style\></code>. Também é possível, adicionar estilos adicionando um link para um arquivo CSS
|
||||
que contém os estilos. Assim, quando se quiser alterar a aparência dos documentos vinculados a este arquivo
|
||||
CSS, basta modifica-lo.
|
||||
</p>
|
||||
</dd>
|
||||
<dt>Canvas (HTML5)</dt>
|
||||
<dd>
|
||||
<p>
|
||||
Canvas é um elemento da HTML5 destinado a delimitar uma área para renderização dinâmica de gráficos. Todo o
|
||||
trabalho de criação e animação é realizado através de linguagens de programação dinâmica (usualmente
|
||||
Javascript).
|
||||
</p>
|
||||
<p>
|
||||
O elemento foi originalmente introduzido pela Apple Inc. para o navegador Safari. As aplicações da Mozilla
|
||||
ganharam suporte ao canvas começando pelo Gecko 1.8 (Firefox 1.5). O Internet Explorer possui suporte ao
|
||||
elemento a partir da versão 9. Para adicionar suporte as versões anteriores desse navegador, basta incluir
|
||||
um script feito pela Google chamado Explorer Canvas. Navegadores baseados em Chromium, como Google Chrome e
|
||||
Opera, também suportam o canvas.
|
||||
</p>
|
||||
</dd>
|
||||
<dt>JavaScript</dt>
|
||||
<dd>
|
||||
<p>
|
||||
JavaScript (frequentemente abreviado como JS) é uma linguagem de programação interpretada estruturada, de
|
||||
script em alto nível com tipagem dinâmica fraca e multiparadigma (protótipos, orientado a objeto, imperativo
|
||||
e funcional). Juntamente com HTML e CSS, o JavaScript é uma das três principais tecnologias da World Wide
|
||||
Web. JavaScript permite páginas da Web interativas e, portanto, é uma parte essencial dos aplicativos da
|
||||
web. A grande maioria dos sites usa, e todos os principais navegadores têm um mecanismo JavaScript dedicado
|
||||
para executá-lo. É atualmente a principal linguagem para programação client-side em navegadores web. É
|
||||
também bastante utilizada do lado do servidor através de ambientes como o node.js.
|
||||
</p>
|
||||
<p>
|
||||
Mais informação em
|
||||
<a href="https://pt.wikipedia.org/wiki/JavaScript" target="_blank">Wikipédia</a>
|
||||
</p>
|
||||
</dd>
|
||||
|
||||
<dt>WebGL</dt>
|
||||
<dd>
|
||||
<p>
|
||||
WebGL (Web Graphics Library) é uma API em JavaScript, disponível a partir do novo elemento canvas da HTML5,
|
||||
que oferece suporte para renderização de gráficos 2D e gráficos 3D. Pode ser implementado em uma aplicação
|
||||
web sem a necessidade de plug-ins no navegador. A especificação foi lançada, sob versão 1.0, em 10 de
|
||||
fevereiro de 2011. WebGL é administrado pelo Khronos Group.
|
||||
</p>
|
||||
<p>
|
||||
Mais informação em
|
||||
<a href="https://pt.wikipedia.org/wiki/WebGL" target="_blank">Wikipédia</a>
|
||||
</p>
|
||||
</dd>
|
||||
</dl>
|
||||
<h2>Controlos de Média</h2>
|
||||
<h3>Áudio</h3>
|
||||
<audio controls>
|
||||
<source src="media/aplauso.mp3" type="audio/mpeg" />
|
||||
O seu navegador não suporta áudio.
|
||||
</audio>
|
||||
<h3>Vídeo</h3>
|
||||
<video controls width="600">
|
||||
<source src="media/video.mp4" type="video/mp4" />
|
||||
O seu navegador não suporta vídeo.
|
||||
</video>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2026 Luís Carlos Alves</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user