Paper 3
Introduction to Full Stack Web Development
Unit 1: Introduction to HTML
Duration: 4 Hours
Table of Contents
Unit 1: Introduction to HTML .................................................................................... 1
1. Introduction to HTML .................................................................................................... 3
2. HTML Document Structure ........................................................................................... 4
3. Lists and Tables............................................................................................................ 5
4. Links and Anchors ........................................................................................................ 6
5. Images and Multimedia ................................................................................................ 6
6. Forms and Input Elements ............................................................................................ 8
7. CSS and Styling in HTML ............................................................................................... 9
8. HTML 5 Semantic Elements .........................................................................................10
1. Introduction to HTML
HTML (HyperText Markup Language) is the standard language used to create web
pages. It consists of a series of elements that structure the content and layout of a
website.
Sample:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to HTML!</h1>
<p>This is a simple paragraph in HTML.</p>
</body>
</html>
Activity 1:
Create a simple webpage with a heading, a paragraph, and a title that says "My First
HTML Page."
2. HTML Document Structure
Every HTML document follows a specific structure with key elements like <!DOCTYPE>,
<html>, <head>, and <body>.
Sample:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Document Structure</title>
</head>
<body>
<h1>Document Structure Example</h1>
<p>HTML has a structured format for organizing content.</p>
</body>
</html>
Activity 2:
Create an HTML document with the correct structure, including <!DOCTYPE html> and a
few content elements inside the body.
3. Lists and Tables
HTML allows creating ordered lists, unordered lists, and tables for organizing data.
o Ordered List: Displays items in a numbered format.
o Unordered List: Displays items with bullet points.
o Tables: Organizes data into rows and columns.
Sample: Table:
Ordered List: html
Copy code
html <table border="1">
Copy code <tr>
<ol> <th>Name</th>
<li>HTML</li> <th>Age</th>
<li>CSS</li> </tr>
<li>JavaScript</li> <tr>
</ol> <td>John</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>22</td>
</tr>
</table>
Unordered List:
html
Copy code
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Activity 3:
Create a webpage with an ordered list of your favorite programming languages and
a table with two rows for your name and age.
4. Links and Anchors
Links (anchors) allow users to navigate between different pages or parts of a webpage.
Sample:
html
Copy code
<a href="[Link] Example</a>
<a href="#section1">Go to Section 1</a>
<h2 id="section1">Section 1</h2>
<p>This is Section 1 of the page.</p>
Activity 4:
Create a webpage with a link that takes you to another website, and link to a section within the same
page.
5. Images and Multimedia
You can embed images and multimedia elements like audio and video into your HTML pages.
These elements support various attributes that control their behavior, appearance, and interaction
with the user.
Image Attributes:
o src: Specifies the path or URL of the image file.
o alt: Provides alternative text for the image if it cannot be displayed.
o width and height: Set the dimensions of the image in pixels.
o title: Displays a tooltip text when hovering over the image.
o loading: Determines when the image should load. Options are lazy (delays loading
until necessary) or eager (loads immediately).
Sample:
• html
• Copy code
• <img src="[Link]" alt="Sample Image" width="300" height="200" title="Hover text"
loading="lazy">
Video Attributes:
o src: Specifies the path or URL of the video file.
o controls: Adds play, pause, and volume controls to the video.
o autoplay: Automatically starts playing the video when the page loads.
o loop: Replays the video after it finishes.
o muted: Mutes the video by default.
o width and height: Set the dimensions of the video in pixels.
Sample:
• html
• Copy code
• <video width="320" height="240" controls autoplay loop muted>
• <source src="movie.mp4" type="video/mp4">
• Your browser does not support the video tag.
• </video>
Audio Attributes:
o src: Specifies the path or URL of the audio file.
o controls: Adds play, pause, and volume controls to the audio.
o autoplay: Automatically starts playing the audio when the page loads.
o loop: Repeats the audio after it finishes.
o muted: Mutes the audio by default.
Sample:
html
Copy code
<audio controls autoplay loop muted>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
6. Forms and Input Elements
Forms allow users to input data that can be sent to a server for processing.
Sample:
html
Copy code
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>
Activity 6:
Create a form that asks for a user's name and email and include a submit button.
7. CSS and Styling in HTML
• Description: CSS (Cascading Style Sheets) is used to style HTML elements. It
can be applied inline, within a <style> tag, or through an external stylesheet.
Sample:
o Inline CSS:
html
Copy code
<h1 style="color: blue;">This is a blue heading</h1>
o Internal CSS:
html
Copy code
<style>
body {
background-color: lightgray;
}
p{
color: green;
}
</style>
8. HTML 5 Semantic Elements
Description: HTML5 introduces semantic elements like <header>, <footer>, <section>, and
<article> to give meaning to the structure of the page.
Sample:
html
Copy code
<header>
<h1>Welcome to My Website</h1>
</header>
<section>
<article>
<h2>Article Title</h2>
<p>This is an article.</p>
</article>
</section>
<footer>
<p>Footer content here.</p>
</footer>
Activity 8:
Use HTML5 semantic elements to structure a webpage with a header, a main content
section with an article, and a footer.
