Module 1 Study Material: HTML5, Style Sheets, and Graphics
1. Introduction to HTML5
What is HTML?
HTML (HyperText Markup Language) is the standard language used to create and design documents
displayed in a web browser. It structures the content on web pages using various tags and elements. HTML5
is the fifth and latest major version, introducing new semantic elements, multimedia tags, and enhanced
APIs for web applications.
Key Features of HTML5: - Cleaner and more meaningful markup (semantic elements such as <header> ,
<footer> , <article> , <section> ) - Multimedia support with <audio> and <video> - Graphics
with <canvas> and <svg> - Local storage and offline application support - Enhanced forms with new
input types
2. Understanding HTML Tags and Structure
An HTML document consists of elements enclosed in tags. Each element has an opening tag, content, and a
closing tag.
Basic Structure of an HTML5 Document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to HTML5</h1>
<p>This is a sample HTML5 page.</p>
</body>
</html>
Explanation: - <!DOCTYPE html> defines the document type and version (HTML5). - <html> is the root
element. - <head> contains metadata and page title. - <body> contains visible page content.
3. Formatting Text Using HTML Tags
HTML provides tags for text formatting and emphasis.
1
Formatting Type Tag Example Output
Bold <b>Text</b> Text
Italic <i>Text</i> Text
Underline <u>Text</u> <u>Text</u>
Superscript <sup>2</sup> x²
Subscript <sub>2</sub> H₂O
Monospace <tt>Text</tt> Text
Preformatted Text:
<pre>
This text preserves
both spaces and line breaks.
</pre>
4. Lists and Backgrounds
Types of Lists: 1. Ordered List:
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
2. Unordered List:
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
3. Definition List:
<dl>
<dt>HTML</dt>
2
<dd>HyperText Markup Language</dd>
</dl>
Backgrounds:
<body style="background-color: lightblue;">
5. Hyperlinks and Anchors
Creating Hyperlinks:
<a href="[Link] Example</a>
Email Link:
<a href="[Link] Email</a>
Linking to a Section on Same Page:
<a href="#section1">Go to Section 1</a>
<h2 id="section1">Section 1</h2>
6. Introduction to Style Sheets (CSS)
What is CSS?
CSS (Cascading Style Sheets) defines how HTML elements are displayed. It separates content from
presentation, enabling consistent styling across pages.
Advantages: - Consistent look and feel - Easier maintenance - Faster loading (due to reusable styles)
Syntax:
selector {
property: value;
}
3
Example:
p {
color: blue;
font-size: 16px;
}
7. Types of CSS
1. Inline CSS: Defined within an HTML tag.
<p style="color:green;">This is green text.</p>
2. Internal CSS: Defined inside the <style> tag within <head> .
<style>
h1 { color: red; }
</style>
3. External CSS: Defined in a separate .css file.
<link rel="stylesheet" href="[Link]">
8. Applying Styles to Hyperlinks and Lists
Hyperlink States:
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: green; }
Styling Lists:
ul {
list-style-type: square;
background-color: #f9f9f9;
}
4
9. Using Graphics in HTML5
Adding an Image:
<img src="[Link]" alt="Description" width="300" height="200">
Using Figure and Caption:
<figure>
<img src="[Link]" alt="Mountain">
<figcaption>Beautiful Mountain</figcaption>
</figure>
Graphics Formats: - JPEG: Best for photos - PNG: Supports transparency - GIF: For simple animations - SVG:
Scalable vector graphics for icons
10. Page Layout and Navigation
Creating Tables:
<table border="1">
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Aarati</td><td>25</td></tr>
</table>
Creating Navigation Bar:
<nav>
<a href="[Link]">Home</a>
<a href="[Link]">About</a>
<a href="[Link]">Contact</a>
</nav>
11. Creating User Forms
HTML5 introduced new form features and validation.
5
Example:
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
<input type="submit" value="Submit">
</form>
New Input Types: - email , url , number , range , date , color , tel
12. Incorporating Multimedia
Video Tag:
<video controls width="400">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Audio Tag:
<audio controls>
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
13. Summary
• HTML5 provides structure and multimedia capabilities.
• CSS defines styling and layout.
• Forms, navigation, and multimedia enhance interactivity.
• External CSS ensures maintainability and clean design.
6
Textbook References: 1. Step by Step HTML5 by Faithe Wempen (Microsoft Press, 2011)
2. The Complete Reference HTML & CSS by Thomas A. Powell (McGraw-Hill, 2010)
3. Web Technologies: HTML, JAVASCRIPT, PHP, XML, AJAX by Kogent Learning Solutions
Reference Books: 1. Learning Web Design by Jennifer Niederst Robbins (O’Reilly, 2018)
2. Web Enabled Commercial Applications by Ivan Bayross (BPB, 2004)
End of Module 1 Study Material