Practical-Oriented Notes
Computer & STEM
Contents
1. Introduction to HTML
○ Overview of HTML
○ Structure of an HTML File
○ Tags and Elements in HTML
2. Creating and Viewing an HTML File Using Notepad
○ Step-by-step process to create an HTML file
○ How to save and view your first HTML page
3. General Structure of an HTML Webpage (HTML5)
○ Understanding the structure: <!DOCTYPE html>, <html>, <head>, and
<body>
○ Example of a basic HTML structure
4. Common HTML Tags
○ Headings, Paragraphs, Line Breaks
○ Formatting Text: Bold and Italic Tags
5. Lists in HTML
○ Ordered Lists
○ Unordered Lists
○ Example of lists in HTML
6. Inserting Images in HTML
○ Basic Image Tag
○ Specifying Image Size
○ Using Images from URLs
7. Creating Hyperlinks in HTML
○ Creating Links to External Websites
○ Example Code for Links
8. Interlinking Multiple Webpages in HTML
○ Relative Path vs Absolute Path
○ Linking within the Same Folder or Across Folders
9. Creating Tables in HTML
○ Defining a Table, Rows, Columns, and Header Cells
○ Example Code for a Simple Table
10.Building a Login or Registration Form in HTML
○ Creating User Input Forms
○ Login and Registration Form Examples
11.CSS (Cascading Style Sheets)
○ Inline, Internal, and External CSS
○ How to Style HTML Elements
12.Designing the National Flag Using HTML and CSS
○ Step-by-step guide to create a flag using HTML and CSS
○ Example of creating the National Flag with the Ashoka Chakra
13.Basic Concepts in Web Development
○ Server, Client, Webpage, Website, Domain Name
○ Explanation of Hosting, Protocols, and URLs
14.HTML Basics
○ Introduction to Tags, Attributes, Elements
○ The Head Section, Body Section, and DOCTYPE Declaration
15.JavaScript Overview
○ Introduction to JavaScript and its Role in Web Development
○ Basics of Interactive Features
16.Website Structure
○ Frontend vs Backend
○ Introduction to Web Development Workflow
17.Security & Links
○ HTTPS: The Importance of Secure Communication
○ Hyperlinks: Creating and Using Links Effectively
HTML (HyperText Markup Language) is the standard language used to create and structure
content on the web. It uses tags to define elements like text, images, and links, and helps
browsers display content in a structured way. HTML is the foundation of every webpage.
Creating and Viewing an HTML File Using Notepad
1. Create an HTML File:
● Open Notepad on your computer.
● Type your HTML code in the Notepad window.
2. Save the File:
● After typing your HTML code, go to File → Save As.
● In the Save as type dropdown, select All Files.
● Name the file with the .html extension (e.g., [Link]).
● Choose a location to save it (e.g., Desktop) and click Save.
3. View the HTML File:
● Go to the folder where you saved the file (e.g., Desktop).
● Double-click the [Link] file, and it will open in your default web browser.
● You will now see the output of your HTML page!
General Structure of an HTML Webpage (HTML5)
1. <!DOCTYPE html>
Tells the browser that the page is written in HTML5.
<!DOCTYPE html>
2. <html> Tag
The root tag that wraps everything on the page.
<html>
<!-- Content goes here -->
</html>
3. <head> Section
Contains metadata like the title, CSS and so on.
<head>
<title>My Webpage</title>
</head>
4. <body> Section
This is where all visible content like text, images, and links go.
<body>
<!-- Visible content goes here -->
</body>
Example Code:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
Welcome to My Webpage
</body>
</html>
This is the basic structure of an HTML5 webpage. It includes the <!DOCTYPE html>, <head>,
and <body> sections to organize your content.
Common HTML Tags (Headings, Paragraphs, Line Breaks, etc.)
HTML provides a variety of tags to help structure content and make webpages more readable.
Here are some of the most common tags used in HTML.
1. Headings (<h1> to <h6>)
Headings are used to define titles and sections on a webpage. There are six levels of headings,
with <h1> being the largest and most important.
<h1>Main Heading</h1> <!-- Largest heading -->
<h2>Subheading</h2> <!-- Smaller heading -->
<h6>Smaller Subheading</h6> <!-- Smallest heading -->
2. Paragraph (<p>)
The <p> tag is used to define a paragraph of text.
<p>This is a paragraph of text on the webpage.</p>
3. Line Break (<br>)
The <br> tag is used to insert a line break in the text. It does not require a closing tag.
<p>This is the first line.<br>This is the second line.</p>
4. Bold (<b>)
The <b> tag makes text bold.
<p>This is <b>bold</b> text.</p>
5. Italic (<i>)
The <i> tag makes text italic.
<p>This is <i>italic</i> text.</p>
Example Code:
<!DOCTYPE html>
<html>
<head>
<title>Common HTML Tags</title>
</head>
<body>
<h1>Common HTML Tags</h1>
<h2>Headings</h2>
<p>Use h1 to h6 for different heading levels.</p>
<p>First line.<br>Second line.</p>
<p>This text is <b>bold</b> and this text is <i>italic</i>.</p>
</body>
</html>
Summary
These are some of the basic tags used to structure text and content on a webpage:
● Headings (<h1> to <h6>) for titles and sections.
● Paragraphs (<p>) for text.
● Line Breaks (<br>) to move text to the next line.
● Bold (<b>) and Italic (<i>) for text styling.
These tags help make your webpage easy to read and well-structured.
Lists in HTML (Ordered and Unordered)
HTML provides two main types of lists:
1. Unordered List (<ul>): Displays items with bullet points.
2. Ordered List (<ol>): Displays items with numbers.
1. Unordered List (<ul>)
An unordered list is used to group items with bullet points. Each list item is enclosed in an <li>
tag.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
2. Ordered List (<ol>)
An ordered list is used for items that need to be numbered. Like unordered lists, each item is
placed in an <li> tag.
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Example Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Lists</title>
</head>
<body>
<h1>HTML Lists</h1>
<h2>Unordered List</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
<h2>Ordered List</h2>
<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>
</body>
</html>
Inserting Images in HTML
To display images on a webpage, HTML uses the <img> tag. The <img> tag does not have a
closing tag and requires two important attributes: src (source).
1. Basic Image Tag
<img src="[Link]">
● src: Specifies the path to the image file.
2. Image with a Specific Width and Height
You can specify the width and height of an image using the width and height attributes.
<img src="[Link]" width="500" height="300">
● This will display the image with a width of 500 pixels and a height of 300 pixels.
3. Image from a URL
If the image is hosted online, you can use a URL in the src attribute.
<img src="[Link]
Example Code:
<!DOCTYPE html>
<html>
<head>
<title>Inserting Images in HTML</title>
</head>
<body>
<h1>HTML Images</h1>
<img src="[Link]">
<h2>Image with Size</h2>
<img src="[Link]" width="400" height="250">
<h2>Image from URL</h2>
<img src="[Link]
</body>
</html>
Summary
● <img> tag is used to insert images.
● src defines the image source.
● You can adjust the image size with width and height attributes.
Creating Hyperlinks in HTML
In HTML, hyperlinks are created using the <a> tag, which stands for "anchor." Hyperlinks allow
users to click and navigate to another webpage or a different section of the same page.
1. Hyperlink to External Sites (e.g., Instagram or Facebook)
To create a basic link, use the href attribute, which specifies the destination URL. To link to
popular social media platforms like Instagram or Facebook, use the respective URLs in the
href attribute.
<a href="[Link] Instagram</a>
<a href="[Link] Facebook</a>
● href: The URL where we want to visit.
Example Code:
<!DOCTYPE html>
<html>
<head>
<title>Creating Hyperlinks in HTML</title>
</head>
<body>
<h1>HTML Hyperlinks</h1>
<h2>Link to External Websites</h2>
<a href="[Link] Instagram</a><br>
<a href="[Link] Facebook</a>
</body>
</html>
Summary
● <a> tag creates hyperlinks in HTML.
● href defines the destination URL.
● You can link to external sites (e.g., Instagram, Facebook), email addresses, or specific
sections on the page.
Interlinking Multiple Webpages in HTML
Interlinking multiple webpages in HTML allows you to connect different pages within a website.
This is done by creating hyperlinks between the pages using the <a> tag.
1. Linking to Another Page in the Same Folder using Relative Path
If the pages are in the same folder (directory), you can link to them by specifying just the
filename.
<a href="[Link]">Go to About Page</a>
● This link will take the user to the [Link] page.
2. Linking to Another Page in Any Folder using Absolute Path
An absolute path provides the full address of a file starting from the root of your system (e.g.,
C:\Users\YourName\Documents\[Link]).
Steps to Get Absolute Path:
1. Right-click the file and select "Show more options".
2. Click Properties.
3. Go to the Security tab.
4. Copy the Object Name (full path).
5. Paste it in your HTML
Example:
<a href="C:\Users\Mohit_Singh\Documents\[Link]">Go to Contact
Page</a>
Example Code:
<!DOCTYPE html>
<html>
<head>
<title>Using Absolute and Relative Paths</title>
</head>
<body>
<h2>Go to Contact Page using Relative Path</h2>
<a href="[Link]">Go to Contact Page</a>
<h2>Go to Contact Page using Absolute Path</h2>
<a href="C:\Users\Mohit_Singh\Documents\[Link]">Go to
Contact Page</a>
</body>
</html>
Summary
● Interlinking allows navigation between multiple pages in a website.
● The relative path ([Link]) works when the file is in the same folder as the
current HTML file.
● The absolute path (C:\Users\Mohit_Singh\Documents\[Link]) is used
to link to a file located on your local system.
Creating Tables in HTML
HTML tables are used to display data in a structured format with rows and columns. The
<table> tag is used to define a table, and it consists of the following essential parts:
1. <table>: Defines the table.
2. <tr>: Defines a row in the table.
3. <th>: Defines a header cell (for column titles).
4. <td>: Defines a data cell (used for content).
Example Code:
<!DOCTYPE html>
<html>
<head>
<title>Student Information</title>
</head>
<body>
<h1>Student Details</h1>
<table>
<tr>
<th>Name</th>
<th>Class</th>
<th>Section</th>
</tr>
<tr>
<td>Amit</td>
<td>6</td>
<td>A</td>
</tr>
<tr>
<td>Ravi</td>
<td>7</td>
<td>B</td>
</tr>
<tr>
<td>Priya</td>
<td>8</td>
<td>C</td>
</tr>
</table>
</body>
</html>
Note: When you create a table in HTML, it doesn't automatically show any borders around the
cells. To add borders to your table, you need to include some CSS. Add the following code
inside the <head> section of your HTML:
<style>
th, tr, td {
border: 1px solid black;
</style>
Building a Login or Registration Form in HTML
HTML forms are used to collect input from users. A login form allows users to sign into a
website, while a registration form allows users to create a new account. Both forms include input
fields like text boxes, passwords, and submit buttons.
Login Form Example
This form asks for the username and password, which are required to log into an account.
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
</head>
<body>
<h1>Login</h1>
<form>
<label>What is your username?</label>
<input type="text"> <br>
<label>What is your password?</label>
<input type="password"> <br>
<input type="submit">Login</button>
</form>
</body>
</html>
Registration Form Example
This form asks for details like name, age, email, and password to create a new account.
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<h1>Register</h1>
<form>
<label>What is your name?</label>
<input type="text"> <br>
<label>What is your age?</label>
<input type="number"> <br>
<label for="email">What is your email?</label>
<input type="email" id="email" name="email" required><br><br>
<label>What is your password?</label>
<input type="password"> <br>
<input type="submit">Register</button>
</form>
</body>
</html>
Explanation:
● <form>: The form tag wraps all the input fields and specifies how the data should be
sent (via "action" and "method").
● <label>: The label tag defines what question or instruction will appear next to the input
field.
● <input>: The input tag defines the field where the user will enter data (e.g., text,
password, email).
CSS (Cascading Style Sheets)
CSS is used to style HTML elements, like changing colors, fonts, and layout. It helps improve
the look and feel of webpages.
Types of CSS:
1. Inline CSS:
○ Defined directly within an HTML element using the style attribute.
○ Example: <p style="color:blue;">This is blue text.</p>
2. Internal CSS:
○ Defined in the <style> tag within the <head> section of the HTML document.
Example:
<style>
p { color: blue; }
</style>
3. External CSS:
○ Defined in a separate .css file and linked to the HTML document using the
<link> tag.
Example:
<link rel="stylesheet" href="[Link]">
Inline CSS (color, background-color, border, etc.)
Inline CSS is used to style HTML elements directly within the HTML tag. This is done by adding
a style attribute to the HTML element. It allows you to apply styles like color, background
color, borders, etc., specifically to that element.
Example of Inline CSS
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: blue;">This is a Blue Heading</h1>
<p style="color: red; background-color: yellow;">This is a red
paragraph with a yellow background.</p>
<div style="border: 2px solid black;">
This div has a black border around the content.
</div>
</body>
</html>
Explanation:
● style attribute: This is added to an HTML element to apply styles directly to it.
● color: Changes the text color of the element (e.g., color: blue;).
● background-color: Sets the background color of the element (e.g.,
background-color: yellow;).
● border: Adds a border around the element (e.g., border: 2px solid black;).
Internal CSS (<style> Tag, Selectors, etc.)
Internal CSS allows you to define the styles within the <style> tag, which is placed inside the
<head> section of the HTML document. You can use selectors to target elements and apply
styles like colors, sizes, borders, and more. It targets all elements of the same type. For
example, p { color: red; } makes all <p> tags red.
Example of Internal CSS
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
body {
background-color: lightblue;
p {
color: green;
</style>
</head>
<body>
<p>This paragraph has green text and a font size of 18px.</p>
<p>This paragraph is highlighted with a yellow background.</p>
</body>
</html>
Explanation:
● <style> tag: This tag is used to include internal CSS in the <head> section of the
HTML document.
● Selectors:
○ Element selector (e.g., p): Styles applied to all elements of that type.
Key CSS Properties in Example:
● color: Changes the text color.
● background-color: Sets the background color of the element.
● border: Adds a border around an element.
Designing the National Flag Using HTML and CSS
We’ll create three <div> tags for the orange, white, and green bands. The Ashoka Chakra will
be centered using the <center> tag, and inline CSS will style the elements.
Download the Ashoka Chakra image from the internet and save it. Name it something like
"[Link]".
Code Example:
<!DOCTYPE html>
<html>
<head>
<title>National Flag</title>
</head>
<body>
<h1>National Flag Design</h1>
<div style="background-color: orange; height: 100px; width:
300px;"></div>
<div style="background-color: white; height: 100px; width:
300px;">
<center>
<img src="[Link]" height="200">
</center>
</div>
<div style="background-color: green; height: 100px; width:
300px;"></div>
</body>
</html>
Summary
● The colors orange, white, and green are directly used in the inline CSS for simplicity.
● The <center> tag is used to position the Ashoka Chakra in the white band.
Basic Concepts:
1. Server: A computer that holds website files and sends them when you request a
website.
2. Client: The device or browser you use to access websites.
3. Webpage: A single document on the internet made with HTML and styled with CSS.
4. Website: A collection of linked webpages under one name (domain).
5. Domain Name: The address of a website (like [Link]).
6. Hosting: A service that stores website files on a server so they can be accessed online.
7. Protocol: Rules for transferring data (e.g., HTTP or HTTPS).
8. URL (Uniform Resource Locator): The address of a webpage (e.g.,
[Link]
HTML Basics:
1. HTML (HyperText Markup Language): The language used to create webpages.
2. Tag: Keywords inside angle brackets (e.g., <p>) to define page elements.
3. Attribute: Extra details added to a tag (e.g., src in <img src="[Link]">).
4. Element: A complete HTML unit including tags and content (e.g., <p>Hello</p>).
5. Head Section: Contains metadata and links to CSS or other resources.
6. Body Section: Contains visible content like text and images.
7. DOCTYPE: A declaration to specify the HTML version (e.g., <!DOCTYPE html> for
HTML5).
CSS Basics:
1. CSS (Cascading Style Sheets): Used to style HTML elements (e.g., colors, fonts).
2. Selector: Targets an HTML element to apply a style (e.g., p to style paragraphs).
CSS Types:
1. Inline CSS: CSS within an HTML tag using the style attribute.
2. Internal CSS: CSS inside a <style> tag in the <head> section of the document.
3. External CSS: Linking to a separate CSS file using <link>.
JavaScript:
● JavaScript: A programming language that adds interactive features to websites.
Website Structure:
1. Frontend: The part of the website users interact with, made using HTML, CSS, and
JavaScript.
2. Backend: The server-side part that handles data and processes behind the scenes.
Security & Links:
1. HTTPS: A secure version of HTTP that encrypts data between the user and the server.
2. Hyperlink: A clickable link that takes users to another page or resource.
Trainer: Mohit Singh