gerardfp.github.io/_materials/elementshtml/index.html at master · gerardfp/gerardfp.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!--meta {urls: [smx/m8/uf6], tags: [web, html]}-->

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>
<script type="module" src="/sofi/js/script.js"></script>
<link rel="stylesheet" href="/sofi/css/estil.css">


<header>
    <h1>Taules HTML</h1>

    <resum>En aquesta pràctica començarem amb les taules HTML</resum>

    <p>Segueix aquest tutorial de la <strong>Mozilla Developer Network</strong>:</p>

    <ul>
        <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics">
            Fonaments de la taula HTML
        </a>
    </ul>
</header>
<section>
    <h2>Desenvolupament de la pràctica</h2>
    <p>La pràctica consisteix a crear una web amb l'horari del curs, i una altra web amb el llistat d'alumnes.</p>

    <h3>Horari</h3>
    <check>El desenvolupament de la web amb l'<strong>horari</strong> haurà de complir, al menys, els següents criteris:</check>
    <ul>
        <li>
           Caldrà utilitzar els <strong>elements</strong>
           <ul>
               <li><w>table</w></li>
               <li><w>tr</w></li>
               <li><w>th</w></li>
               <li><w>td</w></li>
           </ul>
        </li>
        <li>
            Caldrà utilitzar els <strong>atributs</strong>
            <ul>
                <li><w>colspan</w></li>
                <li><w>rowspan</w></li>
            </ul>
         </li>
                </li>
                <li>
                    Caldrà utilitzar, al menys, les següents <strong>propietats</strong> CSS:

                    <ul>
                        <li><w>font-family</w></li>
                        <li><w>color</w></li>
                        <li><w>background-color</w></li>
                        <li><w>text-align</w></li>
                        <li><w>padding</w></li>
                        <li><w>margin</w></li>
                    </ul>

                    <ul>
                        <li><w>width</w></li>
                        <li><w>border-collapse</w></li>
                        <li><w>border</w></li>
                    </ul>
                </li>

                <li>
                    Caldrà utilitzar les següents <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">pseudo classes</a>:
                    <ul>
                        <li><w>first-child</w></li>
                        <li><w>last-child</w></li>
                        <li><w>nth-child(odd)</w></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <h4>Exemple:</h4>
    <img src="img/taula1.png">

    <h3>Alumnes</h3>

    <p>Per al llistat d'alumnes s'ha d'utilitzar com a base el codi d'aquest repository:
        <a href="https://github.com/smxm8/table">https://github.com/smxm8/table</a>
    </p>

    <h4>Exemple:</h4>
    <img src="img/taula2.png">
</section>