alves.lcc/UC00622
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sessão 2 - Criar uma página pessoal

Browse Source
This commit is contained in:
Luís Carlos Alves
2026-04-22 22:23:04 +01:00
parent 06b29be786
commit edcca05f36
17 changed files with 662 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -12,3 +12,4 @@
# Built Visual Studio Code Extensions # Built Visual Studio Code Extensions
*.vsix *.vsix
*.code-workspace

269
ex01.html Normal file
View 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 &ndash; 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>&lt;style\&gt;</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>&copy; 2026 Luís Carlos Alves</p>
</footer>
</body>
</html>

BIN
favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

71
favicon.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
images/12-angry-men.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 212 KiB

BIN
images/forrest-gump.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 149 KiB

BIN
images/html-js-css-icon-style.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 260 KiB

71
images/html-js-css-icon-style.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
images/lotr.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 491 KiB

BIN
images/matrix.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 318 KiB

BIN
images/seven-samurai.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 346 KiB

BIN
images/shawshank.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 257 KiB

BIN
images/silence-of-the-lambs.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 347 KiB

0
index.html Normal file
View File

BIN
media/aplauso.mp3 Normal file
View File

Binary file not shown.

BIN
media/video.mp4 Normal file
View File

Binary file not shown.

250
styles.css Normal file
View File

@@ -0,0 +1,250 @@
html {
margin: 0 auto;
max-width: 1600px;
}
body {
background-color: #f2f2f2;
color: black;
font-size: 14pt;
font-style: normal;
font-family: Carlito, Calibri, sans-serif;
}
.MsoNormal,
p {
color: black;
font-size: 14pt;
font-style: normal;
font-family: Carlito, Calibri, sans-serif;
margin: 0.5em 0 0 0;
}
ol,
ul {
font-size: 14pt;
font-style: normal;
font-family: Carlito, Calibri, sans-serif;
margin: 0.5em 0em 1em 1em;
}
ol,
ol.number {
list-style-type: decimal;
}
ol > ol,
ol.alpha {
list-style-type: lower-alpha;
}
ul {
list-style-type: none;
}
li {
margin-bottom: 0.25em;
}
ul li {
text-indent: -0.7em;
}
ul li:before {
content: "\2013\a0";
}
ul > ul {
list-style-type: square;
margin: 0;
}
ul > ul > ul {
list-style-type: circle;
margin: 0;
}
ul > ul > li::before {
content: none;
}
ul > ul > li {
text-indent: 0em;
}
hr {
border-top: 3px double #444;
margin: 1.5em 0;
}
h1 {
color: black;
margin: 0.2em 0em 0.8em;
}
h2,
h3 {
color: black;
margin: 0.8em 0em;
}
h2 span,
h3 span {
display: block;
font-size: 70%;
}
h4,
h5,
h6 {
text-align: justify;
color: black;
margin: 0.8em 0em 0.5em;
}
h1 {
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 250%;
text-transform: uppercase;
font-style: bold;
margin-bottom: 1em;
}
h2 {
font-size: 200%;
}
h3 {
font-size: 150%;
}
h4 {
font-size: 120%;
font-weight: bold;
}
h5 {
font-size: 110%;
font-weight: bold;
}
h6 {
font-size: 100%;
font-style: italic;
}
a:link {
color: #275aa6;
text-decoration: none;
}
a:visited {
color: #c17a00;
}
a:hover {
color: #7db500;
text-decoration: underline;
}
a:active {
color: #c61f84;
text-decoration: underline;
}
.doneact {
color: dimgray;
-webkit-text-decoration: line-through 2px; /* Safari */
text-decoration: line-through 2px;
}
.admonition {
display: flex;
align-items: flex-start;
border-left: 5px solid;
border-radius: 6px;
padding: 0.8em;
margin: 0.5em auto;
background-color: #f9f9f9;
font-family: Carlito, Calibri, sans-serif;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
transition: background-color 0.3s ease;
width: 85%;
}
.admonition span {
margin-right: 0.2em;
}
.admonition::before {
display: inline-block;
font-size: 2em;
flex-shrink: 0;
width: 1.8em; /* Adjust the icon size */
height: 1.8em;
margin: auto 0em; /* Center icon vertically */
line-height: 2em;
}
.admonition.note {
border-color: #2b8a3e;
background-color: #ebfbee;
}
.admonition.note::before,
.admonition.note span {
content: "\270E"; /* Unicode for pencil icon */
color: #2b8a3e;
font-weight: bold;
}
.admonition.observation {
border-color: #1976d2;
background-color: #e3f2fd;
}
.admonition.observation::before,
.admonition.observation span {
content: "\1F441"; /* Unicode for eye icon */
color: #1976d2;
font-weight: bold;
}
.admonition.alert {
border-color: #d32f2f;
background-color: #ffebee;
}
.admonition.alert::before,
.admonition.alert span {
content: "\26A0"; /* Unicode for warning triangle icon */
color: #d32f2f;
font-weight: bold;
}
.admonition:hover {
opacity: 0.9;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
table.schedule {
border-spacing: 1;
border-collapse: collapse;
background: white;
border-radius: 8px;
overflow: hidden;
margin: 1em;
td,
th {
padding-left: 8px;
}
thead tr {
height: 2.5em;
background: lightskyblue;
}
tbody tr {
height: 2em;
border-bottom: 1px solid lightsteelblue;
&:last-child {
border: 0;
}
}
td,
th {
text-align: center;
&.l {
text-align: left;
}
&.c {
text-align: center;
}
&.r {
text-align: right;
}
}
}
.movie-list {
list-style-type: none;
padding: 1em;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
li {
display: flex;
align-items: center;
margin-bottom: 12px;
&:before {
content: none;
}
}
img {
width: 80px;
height: auto;
margin: 0 1em;
border-radius: 4px;
}
}