Exercise 1
Implementation of Portfolio Page using HTML
Tarun Suresh
1.1 Understand the usage of HTML5 elements and practice to know their behavior. Implement a
plain Portfolio Page using necessary HTML elements. [CO1, K3]
HTML Anatomy
Header element
Paragraph element
List elements (ordered, unordered and description)
<hr> element
<br> element
<pre> element
Anchor (<a>) element and its attributes
Image (<img>) element and its attributes
1.2 Understand the usage of Table and Form elements. Practice these elements to explore their
behavior by implementing an academic timetable using table elements and attributes such as
rowspan, colspan, border, colgroup and caption. [CO1, K3]
1.3 Implement a basic user form using form elements and attributes. Include commonly used
input types such as: [C01, K3]
Text fields
Radio buttons
Checkboxes
Dropdown lists
Textarea
Submit and reset buttons
Use attributes like name, type, placeholder, required, etc.
Final Tasks:
1. Redesign your Portfolio Page using appropriate semantic HTML5 elements. Include table
elements and the form elements in relevant sections of your page structure.
2. Design your Portfolio Page in your native language by using necessary plugins. (optional)
Best Practices:
1. Folder Structure
portfolio/
├── index.html ← English version
├── index-ta.html ← Tamil version/ Any native language
├── pages/
│ └── about.html
├── css/
│ └── style.css
└── images/
└── profile.jpg
2. Use semantic HTML tags
3. Use meaningful and consistent file names (e.g., index.html, about.html, committee.html, style.css, form-
validation.js. Avoid spaces and use lowercase.)
4. Add meaningful comments in your HTML (<!-- Main Banner Section →
Q1
<!DOCTYPE html>
<html>
<head>
<title>M.Tech Integrated Time Table</title>
</head>
<body>
<!-- Title Section -->
<center>
<h1>TIME TABLE</h1>
<h2>M.Tech (5-Year Integrated) CSE</h2>
<hr>
</center>
<!-- Time Table Section -->
<center>
<table border="1">
<thead>
<tr>
<th rowspan="2">Day</th>
<th>I</th>
<th>II</th>
<th></th>
<th>III</th>
<th>IV</th>
<th></th>
<th>V</th>
<th>VI</th>
<th></th>
<th>VII</th>
<th>VIII</th>
</tr>
<tr>
<td>08:00 - 08:45</td>
<td>08:45 - 09:30</td>
<td>09:30 - 09:50</td>
<td>09:50 - 10:35</td>
<td>10:35 - 11:20</td>
<td>11:20 - 12:20</td>
<td>12:20 - 01:05</td>
<td>01:05 - 01:50</td>
<td>01:50 - 02:10</td>
<td>02:10 - 02:55</td>
<td>02:55 - 03:40</td>
</tr>
</thead>
<tbody>
<tr>
<td>MON</td>
<td>IBA2541/PT</td>
<td>IBA2541/PT</td>
<td rowspan="5">BREAK</td>
<td>ICS1562/PM</td>
<td>ICS1503/SRK</td>
<td rowspan="5">LUNCH</td>
<td>ICS1501/AV</td>
<td>ICS1504/VSF</td>
<td rowspan="5">BREAK</td>
<td>PROJECT</td>
<td>PROJECT</td>
</tr>
<tr>
<td>TUE</td>
<td>ICS1562/PM</td>
<td>ICS1502/AKR</td>
<td>ICS1501/AV</td>
<td>MENTOR</td>
<td>ICS1503/SRK</td>
<td>ICS1513/VSF</td>
<td>ICS1513/VSF</td>
<td>ICS1513/VSF</td>
</tr>
<tr>
<td>WED</td>
<td>ICS1502/AKR</td>
<td>ICS1503/SRK</td>
<td>ICS1503/SRK</td>
<td>BEYOND THE SYLLABUS</td>
<td>ICS1501/AV</td>
<td>ICS1512/AKR</td>
<td>ICS1512/AKR</td>
<td>ICS1512/AKR</td>
</tr>
<tr>
<td>THU</td>
<td>ICS1504/VSF</td>
<td>ICS1562/PM</td>
<td>ICS1502/AKR</td>
<td>SELF LEARNING</td>
<td>IBA2541/PT</td>
<td>TUTORIAL</td>
<td>TUTORIAL</td>
<td>LIBRARY</td>
</tr>
<tr>
<td>FRI</td>
<td>ICS1501/AV</td>
<td>ICS1511/SRK</td>
<td>ICS1511/SRK</td>
<td>ICS1511/SRK</td>
<td>ICS1502/AKR</td>
<td>ICS1504/VSF</td>
<td>ICS1562/PM</td>
<td>ICS1562/PM</td>
</tr>
</tbody>
</table>
</center>
Q2
<section id="contact">
<h2>Contact Me</h2>
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required placeholder="Your Name">
<br>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required placeholder="Your Email">
<br>
<br>
<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<br>
<br>
<label for="newsletter">Subscribe to Newsletter:</label>
<input type="checkbox" id="newsletter" name="newsletter">
<br>
<br>
<label for="course">Select Course:</label>
<select id="course" name="course">
<option value="web-dev">Web Development</option>
<option value="data-science">Data Science</option>
<option value="graphic-design">Graphic Design</option>
</select>
<br>
<br>
<label for="message">Message:</label>
<textarea id="message" name="message" required placeholder="Your Message"></textarea>
<br>
<br>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
<!
Q3 <DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<hr>
<!-- Header Section -->
<header>
<h1>Tarun Suresh</h1>
<img src="/home/wadlab/Desktop/candidate.jpg" width="200" height="200">
<nav>
<ul>
<li><a href="#about">About Me</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<hr>
<!-- Main Content -->
<main>
<!-- About Me Section -->
<section id="about">
<h2>About Me</h2>
<h3>Education</h3>
<ul>
<li>M.Tech Integrated 5 Years, SSN College of Engineering Chennai, 2023-2028</li>
<li>High School Diploma, The HDFC School Gurgaon, 2019-2023</li>
<br>
<h3>Skills</h3>
<ul>
<li>Python</li>
<li>Java</li>
<li>C</li>
<li>DBMS - MySQL, MongoDB, Neo4J</li>
<li>ML</li>
</ul>
<h3>Experience</h3>
<ul>
<li>Event Management Member. IEEECS 2025-Present</li>
<li>2nd year coordinator, IEEE SB 2024-2025</li>
<li>Finance GA, SSNSNUMUN '24</li>
<li>Lakshya Marketing Team Member</li>
</ul>
</section>
<hr>
<!-- Projects Section -->
<section id="projects">
<h2>Projects</h2>
<h3>Esport Analysis System</h3>
<p>Works with rocket league to analyse matches in real time while providing suggestions to improve
certain aspects. Includes a match outcome predictor as well as tools to compute and visualise
statistics</p>
<table border="1">
<caption><b>Tech Stack</b></caption>
<tr>
<th>Frontend</th>
<td>React.js<td>
</tr>
<tr>
<th>Backend</th>
<td>Python</td>
</tr>
<tr>
<th>Database</th>
<td>MySQL<td>
</tr>
<tr>
<th>ML</th>
<td>Random Forrest Cassifier, Linear Regression</td>
</tr>
</table>
<h3>Movie Scheduling System</h3>
<p>Utilises factors such as cast popularity and projected demand to allot initial number of screens in a
multiplex for a particular movie, adjusts the alloted screens based on real time performance on a
weekly basis.</p>
<table border="1">
<caption><b>Tech Stack</b></caption>
<tr>
<th>Frontend</th>
<td>tkinter<td>
</tr>
<tr>
<th>Backend</th>
<td>Python</td>
</tr>
<tr>
<th>Database</th>
<td>MySQL<td>
</tr>
</table>
</section>
<hr>
<!-- Contact Form Section -->
<section id="contact">
<h2>Contact Me</h2>
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required placeholder="Your Name">
<br>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required placeholder="Your Email">
<br>
<br>
<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<br>
<br>
<label for="newsletter">Subscribe to Newsletter:</label>
<input type="checkbox" id="newsletter" name="newsletter">
<br>
<br>
<label for="course">Select Course:</label>
<select id="course" name="course">
<option value="web-dev">Web Development</option>
<option value="data-science">Data Science</option>
<option value="graphic-design">Graphic Design</option>
</select>
<br>
<br>
<label for="message">Message:</label>
<textarea id="message" name="message" required placeholder="Your Message"></textarea>
<br>
<br>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
</section>
<hr>
</main>
</body>
</html>
