Practical week 2: HTML

1. Install Git

2.Create GitHub account

https://github.com/

3. Create an empty repository on GitHub

4. Clone your newly created repository on your system

  • Create empty file inside this folder and name it index.html

  • Open index.html and paste this code and save:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<link rel="icon" href="res/images/favicon.ico">

<title>My Dashboard</title>

</head>

<body>

</body>

</html>

  • Let's commit and push our changes to our GitHub repository,

    • Run these commands in terminal, Make sure that you are located in your project folder

    • git add .

    • git commit -m "Initial message"

    • git push -u origin master

5. Add images

  • Download images and place them in /res/images/ directory (create these directories):

6. Add these lines between <body></body> tags

<header>

<strong>Welcome to your dashboard!</strong>

</header>

<footer>

<ul>

<li>

<a href="https://ois2.ut.ee/">OIS</a>

</li>

<li>

<a href="https://courses.cs.ut.ee/">Courses</a>

</li>

</ul>

</footer>

7. Insert these lines after <header> tag

<section>

<div>

<img src="res/images/me.png" alt="My picture">

</div>

<div>

<ul>

<li>John Doe</li>

<li>27/06/1993</li>

<li>Software Engineering</li>

</ul>

</div>

<div>

<strong>2.65</strong>

</div>

</section>

8. Insert these lines after <section> tag that you inserted in the previous step

<section>

<h1>Courses</h1>

<table>

<thead>

<tr>

<th>#</th>

<th>Course Title</th>

<th>Semester</th>

<th>Grade</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td>Agile software development</td>

<td>Semester 1 fall</td>

<td>82</td>

</tr>

<tr>

<td>2</td>

<td>System modeling</td>

<td>Semester 1 spring</td>

<td>85</td>

</tr>

<tr>

<td>3</td>

<td>Object-oriented programming</td>

<td>Semester 2 spring</td>

<td>99</td>

</tr>

<tr>

<td>4</td>

<td>Estonian language Level A2</td>

<td>Semester 2 fall</td>

<td>65</td>

</tr>

</tbody>

</table>

</section>

Tasks

  1. Make links open in a new tab instead of the same one.

  2. Link course titles to corresponding pages on http://courses.cs.ut.ee

  3. Add a table footer to the table above.

    • Add 2 row and inside the first row place 1 column that takes full space of the table (see: colspan)

    • Place a button inside this column with text "Add new course"

  4. Make a form for adding new courses in the second row of the table footer that you just created.

    • The form doesn't actually have to send data anywhere, build just the markup

    • The form needs to have 3 fields

      • Text type field, named "title"

      • Select type field named "semester"

        • Have four options:

          • Semester 1 fall

          • Semester 1 spring

          • Semester 2 fall

          • Semester 2 spring

      • Number type field named "grade"

        • Add a restriction for values, input should be between 0 and 100, (including 0 and 100)

  5. Commit and push all changes to your repository