JavaScript
Tema 1 · HTML5 per a l'enginyeria
Introducció
HTML5 és el llenguatge estàndard per definir l'estructura i el contingut d'una pàgina web. En l'àmbit de l'enginyeria, HTML5 permet crear interfícies per mostrar dades tècniques, formularis de càlcul, panells de control i documentació interactiva de projectes.
Objectius
- Crear l'estructura bàsica d'un document HTML5
- Utilitzar etiquetes semàntiques:
<header>,<main>,<section>,<footer> - Inserir taules, formularis i gràfics vectorials (SVG)
- Enllaçar fulls d'estil (CSS) i scripts (JavaScript)
Estructura bàsica d'una pàgina tècnica
Plantilla inicial per a una pàgina de documentació d'un projecte:
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<title>Informe tècnic - Projecte Arduino</title>
<link rel="stylesheet" href="estils.css">
</head>
<body>
<header>
<h1>Projecte de control de temperatura</h1>
</header>
<main>
<section id="objectius">
<h2>Objectius</h2>
<p>Dissenyar un sistema de regulació...</p>
</section>
</main>
<footer>
<p>Grup d'enginyeria - 2025</p>
</footer>
</body>
</html>Taules i formularis per a dades tècniques
Exemple de taula de mesures i formulari per introduir dades d'un sensor:
<table border="1">
<thead>
<tr><th>Hora</th><th>Temperatura (°C)</th></tr>
</thead>
<tbody>
<tr><td>10:00</td><td>22.5</td></tr>
<tr><td>11:00</td><td>23.1</td></tr>
</tbody>
</table>
<form action="/calcular" method="post">
<label>Voltatge d'entrada (V):
<input type="number" step="0.1" name="voltatge">
</label>
<button type="submit">Calcular</button>
</form>Exercicis
- Crea una pàgina HTML5 senzilla que contingui una capçalera, un peu de pàgina i una secció amb una llista de materials d'un projecte.
- Dissenya un formulari per introduir les dades d'un motor (tensió, corrent, potència).
- Insereix una taula amb cinc lectures d'un sensor de pressió.
Mini Projecte – Pàgina de documentació tècnica
Crea una pàgina web per documentar un petit projecte d'enginyeria (per exemple, un sistema de reg automàtic). Ha d'incloure:
- Encapçalament amb el nom del projecte.
- Seccions de "Introducció", "Materials", "Esquema elèctric" (amb una imatge SVG simple o una taula de connexions) i "Resultats".
- Un formulari de contacte (simulat) per demanar pressupost.
- Peu de pàgina amb els autors i la data.