first-website/index.html at master · bartimore/first-website · 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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!-- dit werd meteen ingevoegd door emmet -->
<!DOCTYPE html> <!-- version of html -->
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <!-- all tekst is encoded in utf-8 (standaard,
      want heel groot copy uit unicode: https://unicode-table.com/en/)
      encoding system.
    Heeft veel andere attributes zoals description. Dit stukje tekst wordt
  vaak door search engines gebruikt om een beschrijving te geven van de site -->
  <title>Bart's Personal Site</title>
  <link rel="stylesheet" href="css/styles.css">
  <!-- Stijl consequent doorvoeren over heel de website (en dus niet in "inline") -->

  <!--
  <style>
    body {
      background-color: #e3fdfd;"
    }
    hr {
      border-style: dotted none none;
      border-color: grey;
      border-width: 5px;
      height: 0px;
      width: 5%;
    }
  </style>
-->
  <!-- there is always some default css present. Check at:
  https://www.w3schools.com/cssref/css_default_values.asp -->
  <!-- CSS werkt met boxes. Elk element is een box die je kan aanpassen-->
  <!-- <style></style> in de head werkt op deze page, maar je wilt dat dit over
  alle pagina's gaat -> external css -->
  <!-- inline > internal > external -->
  <!-- CSS syntax: selector{property: value;}

</head>

<body>
<!-- CSS actergrond veranderen met style in body -->
<!-- voor mooie kleurpaletten: ga naar colorhunt.co -->
<!-- standaard kleuren: https://developer.mozilla.org/nl/docs/Web/CSS/kleur_waarde-->
  <table cellspacing = "20">
    <tr>
      <td><img src="fotoboomrots.jpeg" alt="Bart's profile picture" width = "400" height = "500"></td>
      <!-- attribute is the text that will be displayed when rendering of the picture fails-->
      <!-- nu heb je de afhankelijkheid van linked-in in je url -> plaats afbeelding in folder-->

      <td>
        <h1> Bart van der Holst </h1>
        <br>
        <p><em>Student at the University of Eindhoven </em></p>
      </td>
    </tr>
  </table>

  <p>Hello, my name is <a href="https://www.linkedin.com/in/bart-van-der-holst-48b08297/"> Bart van der Holst </a>
     and this is my first website I built for a Udemy course on Web Development. Please do not take the actual content of this website too serious.. </p>
   <hr>
   <h3> Education: </h3>
   <ul>
     <li> vwo at Gertrudis College Roosendaal </li>
     <li> bachelor degree Applied Physics at the TU/e </li>
     <li> master degrees in Applied Math and Applied Physics at the TU/e </li>
   </ul>
  <h5>Summarizing Table:</h5>
  <table border = "1">
    <!-- opdeling in head, body en foot is een slim idee, om ze los te kunnen bewerken-->

  <table>
    <thead>
      <tr>
        <th>Year</th>
        <th>School</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>2008-2014</td>
        <td>Gertrudis College Roosendaal </td>
      </tr>
      <tr>
        <td>2014-2020</td>
        <td>Technical University Eindhoven</td>
      </tr>
    </tbody>
    <tfoot>

    </tfoot>


  </table>
  <hr>
  <h3> Skills: </h3>
  <table>
    <thead></thead>
    <tbody>
      <tr>
        <td>
          <table>
            <tr>
              <td>Physics</td> <td>💖💖💖💖</td>
           </tr>
           <tr>
             <td>Math</td> <td>💖💖💖</td>
           </tr>
          </table>
        </td>
        <td>
          <table>
            <tr>
              <td>Programming</td> <td>💖💖💖</td>
           </tr>
           <tr>
             <td>Being Nice</td> <td>💖💖💖💖</td>
           </tr>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
   <hr>
   <a href="hobbies.html">My Hobbies</a> <!--Hiermee verwijs je naar pages in je project folder -->
   <a href="ContactDetails.html">My Contact Details</a>
   <p>My HTML cheat sheet: <a download href="https://web.stanford.edu/group/csp/cs21/htmlcheatsheet.pdf">Download here</a></p>
   <!-- downlaod werkt niet meer via html, maar kan wel via CSS -->

</body>

</html>