Practical week 2: HTML
1. Install Git
2.Create GitHub account
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
- Make links open in a new tab instead of the same one.
- Link course titles to corresponding pages on http://courses.cs.ut.ee
- 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"
- 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)
- Commit and push all changes to your repository