Session 2: HTML (Hypertext Markup Language)
1. Create an empty repository on GitHub.
2. Clone your newly created repository on your system.
3. Create an empty file inside this folder, and name it index.html.
4. Within the created folder, create /res/images/ directory, i.e., a folder named res, then, within res a folder named images.
main folder
└── res
└── images
5. Download the following images and place them in the /res/images/ directory.
- Favicon.ico: Favicon.ico.
- me.png: me.png.
6. Open the index.html and copy the following HTML snippet into it:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="res/images/favicon.ico">
<title>My Dashboard</title>
</head>
<body>
</body>
</html>
7. Save changes in index.html and open it using a web browser.
8. Insert the following snippet within the body element:
<header>
<strong>Welcome to your dashboard!</strong>
</header>
9. Insert the following snippet before the closing of the body tag:
<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>
10. Insert the following snippet after the header element:
<section>
<div>
<img src="res/images/me.png" width="128" height="128" alt="My picture">
</div>
<div>
<ul>
<li>Your name</li>
<li> A date following this format dd/mm/yyyy</li>
<li> Software Engineering </li>
</ul>
</div>
<div>
<strong>2.65</strong>
</div>
</section>
11. Insert the following snippet after the previous section element:
<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>fall</td>
<td>82</td>
</tr>
<tr>
<td>2</td>
<td> Systems modelling </td>
<td>fall</td>
<td>85</td>
</tr>
<tr>
<td>3</td>
<td> Requirements Engineering </td>
<td>fall</td>
<td>99</td>
</tr>
<tr>
<td>4</td>
<td> Human Computer Interaction </td>
<td>fall</td>
<td>65</td>
</tr>
</tbody>
</table>
</section>
12. Let the OIS and Courses links open in a new tab instead of the same one.
13. Add a table footer to the table above.
14. Link the listed course to their corresponding pages, You can use https://courses.cs.ut.ee/courses to find the page of each course.
15. Create a form for adding new courses that looks like the following one:
Note1: A semester can be fall or spring.
Note2: You just need to create a form; we will make it work later.
16. Validate your page (https://validator.w3.org/) against the HTML5 specification. Note: you can validate it by File upload.
The page does not look nice, right?
A good reason why you need to attend to the CSS topic next week :)
Do it yourself - not to be completed during the practical session
- Check how you can show information about a link (anchor element
<a href=".."> </a>) by just hovering over it. - Check how you can use the anchor element (
<a href=".."> </a>) as a link to an email, i.e., pressing on the anchor element will trigger the process of sending - Check how you can use HTML5 to add a caption to your image (me.png).
- Using Chrome Developer Tools, inspect the course wiki (https://courses.cs.ut.ee/2022/WAD/fall), select the Elements tab, and try to understand how main HTML elements are used in the pages.
- Using Chrome Developer Tools, go to the Lighthouse tab, and select only Accessibility from the categories. Then, run Analyze page load. What percentage of accessibility did you receive? Try to read the report to better understand the result.