diff --git a/.gitignore b/.gitignore index 8c2b884..fe96478 100644 --- a/.gitignore +++ b/.gitignore @@ -12,3 +12,4 @@ # Built Visual Studio Code Extensions *.vsix +*.code-workspace diff --git a/ex01.html b/ex01.html new file mode 100644 index 0000000..07f0471 --- /dev/null +++ b/ex01.html @@ -0,0 +1,269 @@ + + + + + + + + UC00622 – Criar aplicações em HTML5 + + + + + + + + + + + + + +
+ + +

Elementos HTML5 e exemplos de utilização

+
+ +
+

Listas

+

Filmes

+ +

Livros

+
    +
  1. Dom Quixote — Miguel de Cervantes
    2. +
  2. Harry Potter e a Pedra Filosofal — J.K. Rowling
    3. +
  3. O Senhor dos Anéis: A Sociedade do Anel — J.R.R. Tolkien
    4. +
  4. O Pequeno Príncipe — Antoine de Saint-Exupéry
    5. +
  5. 1984 — George Orwell
    6. +
  6. The Gallaghers of Ardmore — Nora Roberts
    7. +
  7. A Culpa é das Estrelas — John Green
    8. +
+

Tabelas

+

Calendário da Formação

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SessãoDataInícioTerminoDuraçãoID da Sessão / Ligação
1sab, 31 de janeiro09:0013:304h30 + 840 8135 5122
+ + Iniciar Reunião +
2sab, 7 de fevereiro09:0013:304h30
3sab, 21 de fevereiro09:0013:304h30
4sab, 28 de fevereiro09:0013:304h30
5sab, 7 de março09:0013:304h30
6sab, 14 de março09:0013:304h30
+

Formulário de contacto

+
+ + +
+ +

+ + +

+ + + +
+ +
+ +
+ +
+ +

+ +
+
+

Glossário

+
+
HTML
+
+

+ 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. +

+

+ Mais informação em + Wikipédia +

+
+
Cascading Style Sheets
+
+

+ 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 + <style\>. 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. +

+
+
Canvas (HTML5)
+
+

+ 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). +

+

+ 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. +

+
+
JavaScript
+
+

+ 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. +

+

+ Mais informação em + Wikipédia +

+
+ +
WebGL
+
+

+ 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. +

+

+ Mais informação em + Wikipédia +

+
+
+

Controlos de Média

+

Áudio

+ +

Vídeo

+ +
+ + + + diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..67b0537 Binary files /dev/null and b/favicon.ico differ diff --git a/favicon.svg b/favicon.svg new file mode 100644 index 0000000..eec5e1d --- /dev/null +++ b/favicon.svg @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + + diff --git a/images/12-angry-men.jpg b/images/12-angry-men.jpg new file mode 100644 index 0000000..d9f8912 Binary files /dev/null and b/images/12-angry-men.jpg differ diff --git a/images/forrest-gump.jpg b/images/forrest-gump.jpg new file mode 100644 index 0000000..5f0c9c4 Binary files /dev/null and b/images/forrest-gump.jpg differ diff --git a/images/html-js-css-icon-style.jpg b/images/html-js-css-icon-style.jpg new file mode 100644 index 0000000..53b9d86 Binary files /dev/null and b/images/html-js-css-icon-style.jpg differ diff --git a/images/html-js-css-icon-style.svg b/images/html-js-css-icon-style.svg new file mode 100644 index 0000000..eec5e1d --- /dev/null +++ b/images/html-js-css-icon-style.svg @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + + diff --git a/images/lotr.jpg b/images/lotr.jpg new file mode 100644 index 0000000..3b267c0 Binary files /dev/null and b/images/lotr.jpg differ diff --git a/images/matrix.jpg b/images/matrix.jpg new file mode 100644 index 0000000..ae18e5c Binary files /dev/null and b/images/matrix.jpg differ diff --git a/images/seven-samurai.jpg b/images/seven-samurai.jpg new file mode 100644 index 0000000..1d57699 Binary files /dev/null and b/images/seven-samurai.jpg differ diff --git a/images/shawshank.jpg b/images/shawshank.jpg new file mode 100644 index 0000000..859b442 Binary files /dev/null and b/images/shawshank.jpg differ diff --git a/images/silence-of-the-lambs.jpg b/images/silence-of-the-lambs.jpg new file mode 100644 index 0000000..f2daa94 Binary files /dev/null and b/images/silence-of-the-lambs.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..e69de29 diff --git a/media/aplauso.mp3 b/media/aplauso.mp3 new file mode 100644 index 0000000..aca93e7 Binary files /dev/null and b/media/aplauso.mp3 differ diff --git a/media/video.mp4 b/media/video.mp4 new file mode 100644 index 0000000..5e893d8 Binary files /dev/null and b/media/video.mp4 differ diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..ea79cf9 --- /dev/null +++ b/styles.css @@ -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; + } +}