Scribd
Upload
6 views

IT Foundation Assignment - HTML5

The document outlines a series of HTML5 practice assignments, each focusing on different concepts such as basic HTML structure, tags, attributes, lists, tables, forms, media, and web storage. Each assignment includes a problem statement, expected functionality, sample input/output, and instructions for completion. The assignments are designed to progressively build skills in web programming over various estimated completion times.

Uploaded by

Chetan Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views

IT Foundation Assignment - HTML5

The document outlines a series of HTML5 practice assignments, each focusing on different concepts such as basic HTML structure, tags, attributes, lists, tables, forms, media, and web storage. Each assignment includes a problem statement, expected functionality, sample input/output, and instructions for completion. The assignments are designed to progressively build skills in web programming over various estimated completion times.

Uploaded by

Chetan Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

Web Programming – HTML5 Practice Assignments

Assignment 1.1.a
Header Section
 Assignment Sr.No: 1.1.a
 Module/Topic Name: Introduction to HTML5
 Concepts to be used/applied: Basic HTML structure, Tags
 Level of complexity: Easy
 Assignment Title: Create a Basic HTML5 Page
 Estimated Time of completion: 30 Minutes
Detail Section
 Problem Statement: Create a basic HTML5 page that includes a title, a
heading, and a paragraph. The page should display a welcome message to
the user.
 Expected Functionality: The HTML5 page should have a title “Welcome
Page”. It should display a main heading “Welcome to HTML5” and a
paragraph with the text “This is your first HTML5 page.”
 Sample Input: No input required from the user.
 Sample Output:
Welcome to HTML5
This is your first HTML5 page.
 Instructions/Tips:
o Use a text editor like Notepad++ or an online HTML editor like JSFiddle
or CodePen.
o Save your file with a .html extension and open it in a web browser to
see the output.

Assignment 1.2.a

 Assignment Sr.No: 1.2.a


 Module/Topic Name: Basic Tags
 Concepts to be
used/applied: <body>, <head>, <p>, <div>, <img>, <hr>, <br>
 Level of complexity: Easy
 Assignment Title: Create a Web Page with Basic Tags
 Estimated Time of completion: 45 Minutes
Detail Section
 Problem Statement: Create a web page that includes a heading, a
paragraph, an image, a horizontal rule, and a line break. The page should
display a heading “About Me”, a paragraph with some text about yourself, an
image, a horizontal rule, and a line break within the paragraph.
 Expected Functionality: The web page should display the heading “About
Me”, a paragraph with text “Hello, I am [Your Name]. I love
coding.<br>Welcome to my page.”, an image, and a horizontal rule below
the paragraph.
 Sample Input: No input required from the user.
 Sample Output:
About Me
Hello, I am [Your Name]. I love coding.
Welcome to my page.
[Image]
-------------------------
 Instructions/Tips:
o Use a text editor like Notepad++ or an online HTML editor like JSFiddle
or CodePen.
o Save your file with a .html extension and open it in a web browser to
see the output.
o Use the <img> tag to embed an image. Make sure the image file is in
the same directory as your HTML file or provide a valid URL.

Assignment 1.3.a
Header Section
 Assignment Sr.No: 1.3.a
 Module/Topic Name: Attributes
 Concepts to be used/applied: id, class, style
 Level of complexity: Easy
 Assignment Title: Apply Attributes to HTML Elements
 Estimated Time of completion: 30 Minutes
Detail Section
 Problem Statement: Create a web page that includes a heading and a
paragraph. Apply id, class, and style attributes to these elements to change
their appearance.
 Expected Functionality: The web page should display a heading “Styled
Heading” with a blue color and a paragraph “This is a styled paragraph.” with
a green color.
 Sample Input: No input required from the user.
 Sample Output:
Styled Heading (in blue color)
This is a styled paragraph. (in green color)
 Instructions/Tips:
o Use a text editor like Notepad++ or an online HTML editor like JSFiddle
or CodePen.
o Save your file with a .html extension and open it in a web browser to
see the output.
o Use the style attribute to apply inline CSS styles.

Assignment 1.4.a
Header Section
 Assignment Sr.No: 1.4.a
 Module/Topic Name: Lists
 Concepts to be used/applied: Ordered Lists, Unordered Lists, Definition
Lists
 Level of complexity: Easy
 Assignment Title: Create Different Types of Lists
 Estimated Time of completion: 40 Minutes
Detail Section
 Problem Statement: Create a web page that includes an ordered list, an
unordered list, and a definition list. Each list should contain at least three
items.
 Expected Functionality: The web page should display an ordered list of
three items, an unordered list of three items, and a definition list with three
terms and their definitions.
 Sample Input: No input required from the user.
 Sample Output:
1. First item
2. Second item
3. Third item

 First item
 Second item
 Third item

HTML
HyperText Markup Language

CSS
Cascading Style Sheets

JS
JavaScript

 Instructions/Tips:
o Use a text editor like Notepad++ or an online HTML editor like JSFiddle
or CodePen.
o Save your file with a .html extension and open it in a web browser to
see the output.

Assignment 1.5.a
 Assignment Sr.No: 1.5.a
 Module/Topic Name: Tables
 Concepts to be used/applied: Table Elements, Table Attributes
 Level of complexity: Medium
 Assignment Title: Create a Data Table
 Estimated Time of completion: 50 Minutes
Detail Section
 Problem Statement: Create a web page that includes a table with a
header, body, and footer. The table should display data about three products,
including their names, prices, and quantities.
 Expected Functionality: The web page should display a table with three
rows of product data, including headers for “Product Name”, “Price”, and
“Quantity”.
 Sample Input: No input required from the user.
 Sample Output:
Product Name | Price | Quantity
--------------------------------
Product 1 | $10 | 5
Product 2 | $20 | 3
Product 3 | $15 | 7
 Instructions/Tips:
o Use a text editor like Notepad++ or an online HTML editor like JSFiddle
or CodePen.
o Save your file with a .html extension and open it in a web browser to
see the output.
o Use table attributes to style the table.

Assignment 1.6.a
Header Section
 Assignment Sr.No: 1.6.a
 Module/Topic Name: Forms and Form Elements
 Concepts to be used/applied: Form Elements, Input Types
 Level of complexity: Medium
 Assignment Title: Create a User Registration Form
 Estimated Time of completion: 60 Minutes
Detail Section
 Problem Statement: Create a web page that includes a user registration
form. The form should collect the user’s name, email, password, and age. It
should also include a submit button.
 Expected Functionality: The web page should display a form with fields for
the user’s name, email, password, and age, along with a submit button.
 Sample Input:
Name: John Doe
Email: [email protected]
Password: ********
Age: 25
Sample Output:
[Form Submitted Successfully]
 Instructions/Tips:
 Use a text editor like Notepad++ or an online HTML editor like JSFiddle or
CodePen.
 Save your file with a .html extension and open it in a web browser to see the
output.
 Use appropriate input types for each field.

Assignment 1.7.a
 Assignment Sr.No: 1.7.a
 Module/Topic Name: Media – Video / Audio
 Concepts to be used/applied: Embedding Video, Embedding Audio
 Level of complexity: Easy
 Assignment Title: Embed a Video and Audio File
 Estimated Time of completion: 30 Minutes
 Detail Section
 Problem Statement: Create a web page that includes an embedded video
and an audio file. The video should have controls enabled, and the audio
should autoplay.
 Expected Functionality: The web page should display a video player with
controls and an audio player that starts playing automatically.
 Sample Input: No input required from the user.
 Sample Output:
[Video Player with Controls]
[Audio Player Autoplaying]
 Instructions/Tips:
 Use a text editor like Notepad++ or an online HTML editor like JSFiddle or
CodePen.
 Save your file with a .html extension and open it in a web browser to see the
output.
 Use the <video> and <audio> tags with appropriate attributes.

Assignment 1.8.a

 Module/Topic Name: Web Storage


 Concepts to be used/applied: localStorage, sessionStorage
 Level of complexity: Medium
 Assignment Title: Implement Web Storage
 Estimated Time of completion: 45 Minutes
 Detail Section
 Problem Statement: Create a web page that uses localStorage to store a
user’s name and sessionStorage to store a session ID. Display the stored
values on the page.
 Expected Functionality: The web page should allow the user to enter their
name and generate a session ID. The name should be stored
in localStorage and the session ID in sessionStorage. Both values should be
displayed on the page.
 Sample Input:
Name: John Doe
 Sample Output:
Name: John Doe
Session ID: 12345
 Instructions/Tips:
Use a text editor like Notepad++ or an online HTML editor like JSFiddle or
CodePen.
Save your file with a .html extension and open it in a web browser to see the
output.
Use JavaScript to interact with localStorage and sessionStorage.

Assignment 1.9.a
 Assignment Sr.No: 1.9.a
 Module/Topic Name: Conclusion and Q&A
 Concepts to be used/applied: Review of all concepts
 Level of complexity: Medium
 Assignment Title: Build a Complete Web Page of your profile and
registration page.
 Estimated Time of completion: 90 Minutes
 Detail Section
 Problem Statement: Create a complete web page that incorporates all the
concepts learned in the course. The page should include a title, headings,
paragraphs, lists, images, tables, forms, multimedia, and web storage.
 Expected Functionality: The web page should be a comprehensive
example of an HTML5 document, demonstrating the use of various tags and
attributes.
 Sample Input: input required from the user for the registration page.
 Sample Output:
[Complete Web Page with All Elements]
 Instructions/Tips:
Use a text editor like Notepad++ or an online HTML editor like JSFiddle or
CodePen.
Save your file with a .html extension and open it in a web browser to see the
output.
Review all previous assignments and incorporate the elements into a single
web page.
Additional Assignments:
Assignment 1:
Design the current standings of the ICC Test Championship.

Assignment 2:

You might also like