Sessão 2 - Criar uma página pessoal
This commit is contained in:
1
.gitignore
vendored
1
.gitignore
vendored
@@ -12,3 +12,4 @@
|
||||
# Built Visual Studio Code Extensions
|
||||
*.vsix
|
||||
|
||||
*.code-workspace
|
||||
|
||||
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>
|
||||
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
71
favicon.svg
Normal file
71
favicon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 18 KiB |
BIN
images/12-angry-men.jpg
Normal file
BIN
images/12-angry-men.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 212 KiB |
BIN
images/forrest-gump.jpg
Normal file
BIN
images/forrest-gump.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
BIN
images/html-js-css-icon-style.jpg
Normal file
BIN
images/html-js-css-icon-style.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 260 KiB |
71
images/html-js-css-icon-style.svg
Normal file
71
images/html-js-css-icon-style.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 18 KiB |
BIN
images/lotr.jpg
Normal file
BIN
images/lotr.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 491 KiB |
BIN
images/matrix.jpg
Normal file
BIN
images/matrix.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 318 KiB |
BIN
images/seven-samurai.jpg
Normal file
BIN
images/seven-samurai.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 346 KiB |
BIN
images/shawshank.jpg
Normal file
BIN
images/shawshank.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 257 KiB |
BIN
images/silence-of-the-lambs.jpg
Normal file
BIN
images/silence-of-the-lambs.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 347 KiB |
0
index.html
Normal file
0
index.html
Normal file
BIN
media/aplauso.mp3
Normal file
BIN
media/aplauso.mp3
Normal file
Binary file not shown.
BIN
media/video.mp4
Normal file
BIN
media/video.mp4
Normal file
Binary file not shown.
250
styles.css
Normal file
250
styles.css
Normal 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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user