WEB DEVELOPMENT – 1 BY AKSHAT NETWORK HUB

Subject: Web Development – I

Subject Code: ANH/WD/2530/01

Program 1–8 (HTML Only)

Program 1: Basic Web Page Structure
Situation: You are asked to design a simple introductory webpage for a student who is learning web development
for the first time. The page should demonstrate the basic structure of an HTML document and present clear,
readable content using standard tags.
Tasks :-
1. Create a valid HTML document structure
2. Use <title>, <h1>, and <p> tags
3. Add a horizontal rule
4. Include at least two paragraphs

Program 2: Personal Profile Page

Situation: A student wants to create a personal profile page that introduces basic details such as name, course,
and interests. The page should be simple and use only semantic HTML tags without any styling.
Tasks:-
1. Use heading tags appropriately
2. Add ordered and unordered lists
3. Insert line breaks where needed
4. Maintain proper indentation

Program 3: Hyperlinks and Navigation

Situation: Design a webpage that demonstrates navigation using hyperlinks. The page should guide users to
different sections or external websites using anchor tags.
Tasks:-

Page 1 of 9
 WEB DEVELOPMENT – 1 BY AKSHAT NETWORK HUB

1. Create at least three hyperlinks

2. Use target attribute for one link
3. Link to an internal section
4. Use descriptive link text

Program 4: Images in HTML

Situation: Create a webpage for an image gallery introduction where images are displayed with proper
descriptions. Focus only on correct usage of HTML image elements.
Tasks:-
1. Insert at least two images
2. Use alt attributes
3. Set image width or height
4. Add captions using paragraphs
5. Make a Hyperlink Image pointing to another image.

Program 5: Tables for Data Display

Situation: A teacher needs a webpage to display student marks in a tabular format. The table should be clear,
structured, and readable.
Tasks:-
1. Create a table with rows and columns
2. Use <th> for headings
3. Add at least three data rows
4. Include a table caption

Program 6: HTML Forms (Basic)

Situation: Design a simple feedback form for users to submit their name and comments. Only basic form
elements should be used.

Page 2 of 9
 WEB DEVELOPMENT – 1 BY AKSHAT NETWORK HUB

Tasks:-
1. Create a form element
2. Add text input and textarea
3. Use labels properly
4. Add a submit button

Program 7: Lists and Nested Lists

Situation: Create a webpage that explains different web technologies using lists. The structure should include
nested lists to show subcategories.
Tasks:-
1. Use ordered and unordered lists
2. Create one nested list
3. Add headings for sections
4. Keep content well-structured
5. Create a skill page showing your skills using List
6. Use <dl>,<dt> & <dd> to demonstrate Definition list

Program 8: Semantic HTML Layout

Situation: Develop a basic webpage layout using semantic HTML elements to represent header, main content,
and footer sections.
Tasks:-
1. Use <header>, <main>, and <footer>
2. Add content inside each section
3. Use headings appropriately
4. Maintain semantic correctness
5. Add a Navbar in Header
6. Add Nav links to Navbar

Page 3 of 9
 WEB DEVELOPMENT – 1 BY AKSHAT NETWORK HUB

Program 9–15 (HTML + Embedded CSS)

Program 9: Styled Profile Page
Situation: Enhance a basic profile page by embedding CSS to improve appearance. The styling should focus on
fonts, colors, and spacing.
Tasks:-
1. Embed CSS using <style> tag
2. Change font family and color
3. Apply background color
4. Style headings and paragraphs

Program 10: CSS Box Model

Situation: Create a webpage demonstrating the CSS box model by styling a content box with margin, padding,
and border.
Tasks:-
1. Create a div element
2. Apply margin and padding
3. Add a visible border
4. Change background color

Program 11: Navigation Menu Styling

Situation: Design a simple navigation menu and enhance it with embedded CSS for better layout and readability.
Tasks:-
1. Create a list-based menu
2. Remove default list styling
3. Style links with CSS
4. Add hover effect
Page 4 of 9
 WEB DEVELOPMENT – 1 BY AKSHAT NETWORK HUB

Program 12: Table Styling with CSS

Situation: Improve the appearance of an HTML table using embedded CSS for borders, alignment, and colors. (
Refer to Program – 5 and apply styles )
Tasks:-
1. Style table borders
2. Align text properly
3. Add background color to headers
4. Apply padding to cells
5. Apply Formatting to Table heading and column i.e., font-size , color , etc

Program 13: Form Styling

Situation: Create a user registration form and use embedded CSS to make it visually appealing and user-friendly.
( Refer to Program 6 )
Tasks:-
1. Style input fields
2. Adjust form width
3. Style submit button
4. Use spacing effectively
5. Make Form UI Media Friendly ( Mobile / Tablet / Laptop )
6. Apply Basic form Validation within Html
7. Use Dropdown Menu and Use <select> tag to create many Options to select one only .

Program 14: Simple Page Layout

Situation: Design a webpage layout with header, content, and footer using div elements and CSS styling.
Tasks:-
1. Create three layout sections
2. Apply background colors

Page 5 of 9
 WEB DEVELOPMENT – 1 BY AKSHAT NETWORK HUB

3. Set width and alignment

4. Add padding and margin
5. Apply Background Image ( If background image not found during runtime , auto apply background color )
6. Create Footer with Copyright Statement

Program 15: CSS Text Formatting

Situation: Create a content page where text formatting such as alignment, transformation, and spacing is
controlled using CSS.
Tasks:-
1. Change text alignment
2. Use text-transform property
3. Adjust line-height
4. Apply font styling
5. Text Hover
6. Opacity / Animation / Fading / Padding / Margin Concept

Program 16–21 (HTML + Basic JavaScript)

Program 16: Alert Message
Situation: Create a webpage that displays a welcome alert message when the page loads to introduce JavaScript
interaction.
Tasks:-
1. Use <script> tag
2. Display alert message
3. Write proper JavaScript syntax
4. Embed script in HTML
5. Learn about [Link] ( within Code Editor / Chrome Console )

Page 6 of 9
 WEB DEVELOPMENT – 1 BY AKSHAT NETWORK HUB

6. Use [Link] in <script> </script> tags to print Hello World in Code Editor Terminal / Browser Console in
Inspection Mode .

7. Use Internal ( <script> </script> ) or external ( [Link] ) and Learn the ways of linking script to our Html.
8. Use inline basic JS Execution with <script> i.e., <body onload=“alert(‘Welcome to our Webpage’)”>

Program 17: Button Click Event

Situation: Design a webpage where clicking a button displays a message, demonstrating event handling in
JavaScript.
Tasks:-
1. Create a button
2. Write a JavaScript function
3. Trigger function on click
4. Display output using alert
5. Create a heading with id = “title” without any content . Use JS and DOM to dynamically inject content when a
button is click .
6. Show a Welcome alert when a button is click
7. Create a button that trigger a action but before execution ask for confirmation from Users.

Program 18: Changing Text Using JavaScript

Situation: Create a webpage where JavaScript changes the text content of an HTML element when a button is
clicked.
Tasks:-
1. Use getElementById
2. Change inner text
3. Add a button
4. Write a function

Page 7 of 9
 WEB DEVELOPMENT – 1 BY AKSHAT NETWORK HUB

5. Create a loop statement to print “Hello World” 15 times using <h3> tags with unique id to each heading
dynamically injected in <div id=“content”> </div> using JavaScript looping and innerHTML . ( Use for loop , while
loop and do-while loop ) and write separate program with file name as loop_type.html

Program 19: Simple Calculator (Addition)

Situation: Develop a basic calculator that takes two numbers and displays their result using JavaScript.
Tasks:-
1. Create input fields
2. Use JavaScript to read values
3. Perform addition
4. Perform Subtraction
5. Perform Multiply / Divide / Remainder
6. Create Button for each action and call relevant function to store result and display in id “res”
7. Display result on page

Program 20: Input Validation

Situation: Create a form that checks whether the user has entered data before submission using basic JavaScript
validation. ( Refer to Program – 13 )
Tasks:-
1. Create a form with input
2. Write validation function
3. Prevent empty submission
4. Display warning message
5. Store data in Local storage / IndexDB to reinforce Duplicate data

Page 8 of 9
 WEB DEVELOPMENT – 1 BY AKSHAT NETWORK HUB

Program 21: Dynamic Greeting Injection Using forEach

Situation: You are developing a dynamic webpage where multiple greeting messages must be displayed
automatically. Instead of a traditional loop counter, JavaScript array iteration is used. Each message should be
injected dynamically into a webpage using <h3> elements inside a container.

Tasks:-

1. Create a <div> with id content

2. Use a JavaScript array with 15 values

3. Loop through the array using forEach()

4. Inject <h3> elements dynamically using innerHTML

5. Assign a unique id to each <h3>

End of Practical Program List

Akshat Network Hub | All Right Reserved
Learning Club  Key of Success Learning Point

References :-
 For the Resource / Notes / Solutions / Codes Related to above
Practical List , Kindly refer to :-
 Pdf Resources :- [Link]
Success-Learning-Point/
 Web Development Course Resources :- [Link]
[Link]/WebDevelopmentCourse/
 Html Tutorials :- [Link]
[Link]/WebDevelopmentCourse/Html/Tutorial/[Link]
 Html Practical Solution :- [Link]
[Link]/WebDevelopmentCourse/Html/Practical/[Link]

Page 9 of 9