Chapter 1

Advanced Web Designing

Introduction: What is Web Designing?

• Web designing is the process of planning, conceptualizing, and arranging the visual
and interactive elements of a website to create a user-friendly and aesthetically
pleasing online experience. It encompasses the visual layout, user interface, and user
experience, including elements like color, typography, images, and navigation. Essentially,
web design is about making websites both functional and visually appealing, while also
considering user experience and branding.
• We’ve learned basic terms for creating web pages. HTML, the core language for web
development, has evolved over time.
• The latest version, HTML5, is widely used today because it supports mobile-friendly
features and modern web technologies. Most major browsers like Chrome, Firefox, Edge,
Safari, and Opera fully support HTML5.
Forms

• In Std XI, we have studied different controls related to form like text, radio, checkbox,
submit, reset, select and textarea.
• These controls are used to collect different kinds of user inputs, such as contact details like
name, address, single or multiple options from group of options, as well as clearing and
submitting data etc.
• HTML5 has introduced additional form controls which can also be used for validation
purpose.
 Input Type Description
<input type="color"> Defines a color picker.
<input type="number"> Defines a field for entering a number.
<input type="url"> Defines a field for entering a URL.
<input type="image"> Defines an image as a submit button.
HTML5 advanced
<input type="date"> Defines a date picker with the year, month, and day.
elements
<input type="email"> Defines a field for an email address.
• HTML5 added new form controls such as Defines a month and year control in format “YYYY-
<input type="month">
email, date, number, range, URL, etc., MM”.
which help collect specific types of data <input type="range"> Defines a range control. Default range is 0 to 100.
and also support built-in validation, <input type="datetime- Defines a date picker that includes year, month, day,
making forms more user-friendly and local"> and time.
reliable. <input type="time"> Defines a control for entering a time.
<input type="week"> Defines a week and year control.
Defines a text field for entering a search string like a
<input type="search">
site search.
Defines a file-select field and a “Browse” button for
<input type="file">
file uploads.
Used to define input fields that should contain a
<input type="tel">
telephone number.
Input Restrictions

🧾 What is Input Restrictions in HTML?

Input restrictions are special attributes used with HTML <input> elements to control or
limit what users can enter or do in a form field. They improve form usability, ensure correct
data, and provide better user experience.
✅ Purpose of Input Restrictions:
✅ Prevent invalid input
✅ Control formatting
✅ Limit ranges (like age, dates)
✅ Guide users (e.g., placeholder text)
✅ Enhance form functionality (e.g., autocomplete, autofocus)
📌 Common Input Restriction Attributes:

Attribute Use / Effect

disabled Makes the field uneditable (grayed out).
readonly Allows viewing value but not editing it.
required User must fill this field before submitting.
min / max Sets a numeric range limit (e.g., Age: min=18, max=60).
pattern Uses regex to enforce a pattern (e.g., phone number format).
placeholder Shows gray text as a hint inside the field.
autocomplete Suggests saved inputs (e.g., name, email) automatically.
autofocus Automatically places cursor in that field when page loads.
multiple Allows selecting multiple files/emails.
height/width Specifies input box dimensions (used in image input).
 🔹 Other Useful Attributes Used with <input>
and Other HTML Elements
• These attributes enhance the behavior, appearance, and interaction of HTML elements on a web
page, especially when working with CSS and JavaScript.
✅ 1. id Attribute
• The id attribute is used to give a unique identifier to an HTML element.
• It is useful when you want to access or style a specific element using:
• CSS for styling
• JavaScript for dynamic behavior
• Form labels to link <input> with a field

• 🧾 Example: <input type="text" id="username">

🔧 CSS Styling Example: #username {border: 2px solid blue;}
🔁 JavaScript Access Example: [Link]("username").value = "Student123";
 🔹 Other Useful Attributes Used with <input>
and Other HTML Elements
✅ 2. class attribute
• The class attribute is used to assign one or more class names to an HTML element.
• It is useful for applying common CSS styles to multiple elements.
• 🧾 Example:
<input type="text" class="input-box">
<input type="email" class="input-box">
• 🔧 CSS Styling Example:
.input-box {
width: 250px;
padding: 10px;
border-radius: 5px;
}
 Attribute Values Description

Can be: author, description, Specifies the type of

keywords, copyright📌 metadata, like who
name
Example: <meta wrote the page,
name="author"> keywords, etc.

<meta> tag Any descriptive value related to

name.📌 Examples:<meta
name="author" Provides the value of
• The <meta> tag provides the metadata (data about content="Balbharti"><meta the metadata, like
data) about an HTML document. It is placed inside content name="description" author's name, page
content="Advance Web description, or search
the <head> section and is not displayed on the web Designing"><meta keywords.
page. name="keywords"
content="html5, learn html5">
📌 It helps search engines, browsers, and social media
Declares the character
platforms understand and process your page correctly. Character sets like UTF-8,
encoding of the
charset Big5📌 Example: <meta
document (e.g., UTF-8
🧾 <meta> Tag Attributes Table charset="UTF-8">
for Indian languages).

Used for HTTP

refresh, set-cookie, content-
headers, such as auto-
type, expires📌 Example:
http-equiv refreshing the page,
<meta http-equiv="refresh"
setting cookies, or
content="5">
setting expiry.
CSS: Cascading Styling Sheet

🎨 What is CSS?
• CSS stands for Cascading Style Sheets.
It is a styling language used to control the appearance and layout of web pages.
• ✅ Purpose of CSS
• CSS is used to style HTML content, such as:
• Adding colors, fonts, and backgrounds
• Controlling spacing, margins, and alignment
• Designing layouts, grids, and responsive designs
• Making web pages look attractive and professional
CSS

• CSS Syntax :
A CSS rule set contains
a selector and a declaration block.

📂 Types of CSS

Type Where it's written Use case

Inline CSS Inside HTML tag For quick, one-time styling
Internal CSS Inside <style> tag For styling one HTML page
External CSS In a .css file Best for large/multiple pages
Types of CSS

✅ 1. Inline CSS ❌ Disadvantages:

🔹 Where written: Directly within the HTML 🔹 Not reusable
tag using the style attribute
🔹 Difficult to maintain for large projects
🔹 Use case: Best for applying a unique style 🔹 Reduces code readability
to a single element only.
🧾 Example: <p style="color: red; font-size:
📘 Syntax: <tagname style="property: 20px;">This is an inline styled paragraph.</p>
value;">Content</tagname>
✅ Advantages:
🔹 Quick to implement
🔹 No need for separate CSS file
 Types of CSS

✅ 2. Internal CSS ❌ Disadvantages:

🔹 Where written: Inside a <style> tag in the <head> section 🔹 Cannot be reused on multiple HTML pages
of an HTML document.
🔹 Increases page size slightly
🔹 Use case: Useful for styling a single page with multiple
elements. 🧪 Example:

📘 Syntax: <!DOCTYPE html><html><head>

<head><style> <style>

h1 {color: blue; text-align: center;} body {background-color: lightyellow;}

p {font-size: 18px;} </style></head> h1 {color: green;}

✅ Advantages: </style></head><body>

🔹 Styles are grouped in one place <h1>This is a green heading</h1>

🔹 More manageable than inline CSS </body></html>

🔹 Easy to test and debug for single pages

 Types of CSS

✅ 3. External CSS ✅ Advantages: No styles if CSS file is missing or

🔹 Where written: In a separate Clean and organized code not linked properly
.css file Example: body {
Reusable across multiple pages
🔹 Use case: Best for styling Reduces redundancy and background-color: lightgray;}
multiple web pages consistently. improves maintainability h1 {color: navy;
📘 Syntax (Linking CSS): Faster page load times (when font-family: Arial, sans-serif;}
<head> cached)
p {font-size: 16px;
<link rel="stylesheet" ❌ Disadvantages: line-height: 1.5;}
href="[Link]"> Requires additional HTTP request
</head> (first load only)
 ✅ CSS Properties Table
Property Use Values Example

color Changes the text color Any color name (red, blue, maroon) h1 { color: maroon; }
background-color Sets background color for element Any color name body { background-color: yellow; }
font-weight Makes text bold bold or numeric: 100, 300, … 900 p { font-weight: 300; }
font-style Italicizes text italic, oblique, normal p { font-style: italic; }
underline, line-through, overline,
text-decoration Adds or removes decoration from text p { text-decoration: underline; }
none
text-align Aligns text horizontally left, right, center, justify h1 { text-align: center; }
font-family Sets the font for the text Font names (e.g. Arial, Verdana) p { font-family: arial; }
font-size Sets font size px, pt, cm, em, %, etc. p { font-size: 10px; }
letter-spacing Sets space between letters px, pt, em, etc. h1 { letter-spacing: 5pt; }

padding Adds space inside the border (inside element) In pixels or units h1 { padding: 30px; }

border Adds a border around element solid, dotted, double, ridge, etc. h1 { border: double; }
body { background-image:
background-image Sets an image as background url('[Link]')
url('[Link]'); }
background-repeat Controls if background image repeats repeat, no-repeat background-repeat: no-repeat;
margin-left Sets left margin (space outside element) px, cm, pt, %, etc. h1 { margin-left: 10px; }
🆔 CSS ID Selector
📘 Definition:
• The ID Selector in CSS is used to apply styles to a single, unique HTML element by
referencing its id attribute
🔑 Key Points:
• An id is a unique identifier for one HTML element per page.
• It helps apply a specific style to just that one element.
• In CSS, the ID selector is written with a hash # followed by the ID name.
• Cannot be reused on multiple elements in the same HTML document.
🧾 Syntax:
#idname {
property: value;
}
👉 HTML:
• <h1 id="main-heading">Welcome Students!</h1>
🎨 CSS:
#main-heading {
color: blue;
text-align: center;
font-size: 30px;
}
🧪 Output: The heading will appear blue, centered, and larger in size.
📘 CSS Class Selector
✅ Definition:
• The Class Selector in CSS is used to style multiple HTML elements that share the same
class name.
🔑 Key Points:
• The class attribute is reusable across many HTML elements.
• In CSS, a class selector is written using a dot . followed by the class name.
• Class names should not start with numbers and must avoid spaces or special characters
(except hyphen _ and dash -).
🧾 Syntax:
.classname {
property: value;
}
🧪 Example:
👉 HTML:
<p class="highlight">This is the first paragraph.</p>
<p class="highlight">This is the second paragraph.</p>
🎨 CSS:.highlight {
background-color: yellow;
font-weight: bold;
}
Class Selector for specific element

<!DOCTYPE html> </head>

<html> <body>
<head> <h1 class="intro">This heading is not
<style> affected</h1>

[Link] { <p class="intro">This paragraph is blue and

center-aligned.</p>
text-align: center;
</body>
color: blue;
</html>
}
</style>
🌐 Universal Selector (*)
• ✅ Definition:
• The Universal Selector is written as an asterisk (*) and it selects all HTML elements on
a page.
• 📘 Syntax:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
🧪 Group Selector

• ✅ Definition:
• The Group Selector is used to apply the same CSS rules to multiple different selectors
(elements) at once.
You separate each selector with a comma (,).
• 📘 Syntax:
h1, p, ul {
text-align: center;
color: navy;
}
✅ CSS Selectors Summary Table

Selector Type Symbol Used For Syntax Example Effect / Notes

Selects all
Universal Applies to every
* elements on the * { margin: 0; }
Selector HTML element
page
Selects one #header { Only one element
ID Selector # unique element background: red; should have that
by id } ID
Selects multiple
.note { font-size: Reusable across
Class Selector . elements with
18px; } many elements
same class
Selects multiple
h1, p { text-align: Reduces
Group Selector , selectors with
center; } repetition
same style
 🧪 The position Property
• The position property in CSS determines how an element is positioned in the document
layout.
• ✅ Types of Positioning in CSS
Offset Properties
• Syntax: Position Type Description
Supported
Use Case

selector { Default position;

Basic text and
static element appears in ❌ (Offsets don’t apply)
position: value; paragraph layout
normal flow of the page
top: 20px; Element is positioned Slightly moving an
✅ top, left, right,
left: 50px; relative relative to its original element from its default
bottom
position place
} Positioned relative to
the nearest non-static Pop-ups, tooltips,
absolute ✅
ancestor (or <html> if dropdowns
none)

Positioned relative to
Sticky headers, floating
fixed the browser window; ✅
buttons
does not move on scroll
Types of Positioning

- Static(default) - Relative
Normal flow (no special positioning). Positioned relative to its normal position.
element { element {
position: static; position: relative;
} top: 20px;
left: 10px;
}
Types of Positioning

- Absolute - Fixed
Positioned relative to the nearest Positioned relative to the browser window,
positioned ancestor (not static). does not move on scroll.
element { element {
position: absolute; position: fixed;
top: 50px; bottom: 0;
left: 30px; right: 0;
} }
🌊 Float Property in CSS
• ✅ What is the Float Property?
• The float property in CSS is used to place elements to the left or right of their container,
allowing text or other elements to wrap around it.
• It’s commonly used in:
• Image placement
• Layout designs
• Columns or grids
📘 Syntax:
selector {
float: left | right | none | inherit;
}
🎯 Values of Float:
Value Effect

left Floats the element to the left of its container

right Floats the element to the right of its container

none Default value; element does not float

📌 Example: Floating an Image Left

<img src="[Link]" style="float: left; margin-right: 10px;">
<p>This text will wrap around the image on the right side.</p>

📌 Use Case: Side-by-Side Columns

<div style="float: left; width: 50%;">Left Column</div>
<div style="float: right; width: 50%;">Right Column</div>
 🧪 Display Property in CSS

• ✅ What is the display property?

• The display property defines how an HTML element is displayed on the web page —
as a block, inline, flex, grid, etc.
• It is one of the most important CSS properties because it affects:
• Layout behavior
• Box model (height/width)
• Whether elements start on a new line or not
📘 Common Display Values:

Value Description
Displays the element as a block-level element
block
(starts on a new line)

inline Displays the element inline (doesn't break the line)

inline-block Like inline but can set width/height

Hides the element completely (it disappears from
none
the page)
🧪 Examples:

1. Block Example 2. Inline Example

div { span {
display: block; display: inline;
} }
📌 Output: Starts on a new line, takes full 📌 Output: Appears in-line with other
width by default. elements; can't set width/height.
🧪 Examples:

3. Inline-block Example 4. None (Hide Element)

button { h1 {
display: inline-block; display: none;
} }
📌 Output: Behaves like inline but supports 📌 Output: The <h1> tag will not appear at all
width/height control. on the webpage.
🔢 Ordered List (Numbered List) in HTML

✅ Definition: <ol>
• An Ordered List is used in HTML to display a <li>HTML</li>
list of items in a specific sequence, usually
<li>CSS</li>
numbered or lettered. Each item in the list is
marked with a number, letter, or Roman <li>JavaScript</li>
numeral depending on the type specified. </ol>
📘 HTML Tag Used:
<ol> … </ol> ✅ Output:
• Each item in the list is written using: 1. HTML
<li> … </li> 2. CSS
3. JavaScript
🧪 Attributes of <ol>:
Attribute Purpose Example
Defines numbering style (1, A, a,
type <ol type="A"> → A. B. C.
I, i)
start Starts list from a specific number <ol start="5"> → 5. 6. 7.
Reverses order of numbers
reversed <ol reversed> → 3. 2. 1.
(HTML5 only)

🎯 Example with Attributes:

✅ Output:
<ol type="I" start="4">
IV. First Item
<li>First Item</li>
V. Second Item
<li>Second Item</li>
VI. Third Item
<li>Third Item</li>
</ol>
📚 Types of Ordered List using

type Numbering Style

1 1, 2, 3, ... (default)
A A, B, C, ...
a a, b, c, ...
I I, II, III, ...
i i, ii, iii, ...
🔘 Unordered List (Bulleted List) in HTML
✅ Definition: <ul>
• An Unordered List is used to display a <li>HTML</li>
group of related items without any
<li>CSS</li>
particular order. Instead of numbers, it
shows bullets (●, ○, ■) before each list item. <li>JavaScript</li>
📘 HTML Tags Used: </ul>

• <ul> - Defines the unordered list. ✅ Output:

• <li> - Defines each item inside the list. • HTML

• CSS
• JavaScript
(Default bullet is a solid black circle)
📋 Bullet Types in HTML (using type attribute)
type Bullet Symbol Description
disc ● (default) Solid round bullet
circle ◦ Hollow round bullet
square ■ Solid square bullet

🎨 Modern Method (Using CSS):

<ul style="list-style-type: square;">

<li>Python</li>
<li>Java</li>
</ul>
📘 Definition List in HTML

• ✅ Definition: <dl>
• A Definition List is used to represent terms <dt>HTML</dt>
and their corresponding definitions —
<dd>HyperText Markup Language</dd>
similar to how a dictionary or glossary works.
<dt>CSS</dt>
• Unlike ordered & unordered lists, a definition
list uses 3 special tags – <dd>Cascading Style Sheets</dd>
• <dl> - Definition List Container </dl>
• <dt> - Definition term ✅ Output:
• <dd> - Definition Description HTML
HyperText Markup Language
CSS
Cascading Style Sheets
🧪 Nested List in HTML

• ✅ Definition:
• A nested list means placing one list inside another list item (<li>) — to show hierarchy.
1. Single-Level Nested List
📘 Definition:
• A list nested only one level deep — useful for basic subcategories.

2. Multi-Level Nested List

📘 Definition:
• A list that is nested more than one level deep — used for detailed topics or outlines.
🧪 Example:

• Single-level nested list <li>Math</li>

<ul> </ul>
<li>Computer Subjects ✅ Output:
<ul> • Computer Subjects
<li>HTML</li> • HTML
• CSS
<li>CSS</li>
• Math
</ul>
</li>
🧪 Example:
• Multi-level nested list <ul> ✅ Output:
<ol> <li>PHP</li> 1. Languages
• Front-end
<li>Languages <li>Python</li>
• HTML
<ul> </ul> • CSS
<li>Front-end </li> • Back-end
• PHP
<ul> </ul>
• Python
<li>HTML</li> </li>
2. Databases
<li>CSS</li> <li>Databases</li>
</ul> </ol>
</li>
<li>Back-end
 🎧🎬 Inserting Audio and Video in HTML5

• HTML5 introduced new tags to embed 🎯 Explanation:

audio and video directly into a webpage
without using Flash or third-party plugins.
🔊 1. Inserting Audio Element/Attribute Purpose
<audio> Main container to embed audio
✅ HTML5 Audio Tag:
controls Adds play, pause, volume buttons
<audio controls> <source> Provides audio file and format
<source src="sound.mp3" type Specifies the MIME type (e.g., audio/mpeg)

type="audio/mpeg"> Fallback Text Displayed if browser doesn’t support audio

Your browser does not support the audio

element. </audio>
 🎧🎬 Inserting Audio and Video in HTML5

🎥 2. Inserting Video
✅ HTML5 Video Tag:
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Element/Attribute Purpose
🎯 Explanation:
<video> Main container to embed video
width & height Set the size of video player
controls Adds play, pause, volume, fullscreen
<source> Specifies the video file and format
Fallback Text For browsers that don't support video
📌 Common Attributes for Both <audio> &
<video> tag
Attribute Description
Specifies the path to the media file (used if
src
<source> tag is not used)
Displays default media controls (play, pause,
controls
volume, etc.)
Starts playing automatically when page loads
autoplay
(may be blocked without muted)
loop Repeats the media file after it finishes
muted Starts playing with volume turned off
Tells browser how much of the file to load in
preload
advance
(For <video> only) Displays an image before
poster
video starts
width/height Sets the size of the video player (video only)
Specifies the MIME type of media in <source>
type
(e.g., audio/mp3, video/mp4)
 🧪 Image Map in HTML5
✅ Definition:
• An image map is an image that contains multiple hyperlinks embedded within different areas of the
image. These clickable zones are known as hotspots
📌 It allows users to click on different parts of a single image to navigate to different web pages or
sections.
🔎 Purpose:
• Image maps are used to:
• Create interactive diagrams (e.g., maps, product layouts)
• Link multiple destinations through one image
• Visually segment an image into functional parts
🔥 Hotspots:
• Hotspots are the specific clickable areas on an image.
• Each hotspot is defined using the <area> tag inside a <map> tag.
🧪 Types of Image Maps:

Type Description
Processed by the browser. Defined using HTML
Client-Side
tags like <map> and <area>.
Processed by the server using coordinates sent
Server-Side
from the client. (Not commonly used now)

🔔 We focus on Client-Side Image Maps

only.
🧪 Tags Used in Client-Side Image Map:

Tag Description

<img> Displays the image. usemap attribute links it to a <map> element.

Contains one or more <area> elements. name attribute must match the
<map>
usemap value (without #).
Defines a clickable hotspot area. A singular tag that uses attributes like shape,
<area>
coords, and href.
 🧪 Example:
<img src="india_map.jpg" usemap="#india">

<map name="india">
<area shape="rect" coords="34,44,270,350" href="[Link]" alt="Maharashtra">
<area shape="circle" coords="337,300,44" href="[Link]" alt="Gujarat">
</map>

✅ What Happens Here:

• The image india_map.jpg is displayed
• The usemap="#india“connects the image to the <map> named india
• Inside the map, two areas are clickable: a rectangle and a circle.
• Clicking each area takes the user to a different web page.
📌 Important Attributes of <area> Tag:

Attribute Description
shape Shape of hotspot: rect, circle, or poly
coords Coordinates for the shape (based on pixels)
href URL to go to when hotspot is clicked
alt Alternate text (accessibility)
target Open link in same or new tab (_blank, _self)
🧪 Inline Frame (<iframe>) in HTML5

• The <iframe> tag is used to embed another webpage or document within the current
HTML page.
It creates a "window within a window" on your web page.
🧾 Purpose of <iframe>:
Embed content from another HTML page.
Include videos, maps, advertisements, or other documents.
Useful for integrating third-party services without redirecting the user.
📘 Basic Syntax:
<iframe src="[Link]" width="300" height="200"></iframe>
🧪 Important Attributes of <iframe>

Attribute Value Type Description

Specifies the source of the page
src URL
to embed
height Pixels Sets the height of the iframe
width Pixels Sets the width of the iframe
name Text Names the iframe for targeting
Embeds HTML directly inside the
srcdoc HTML code
iframe
🧪 Example with Output

<!DOCTYPE html> 🧾 Output:

<html> A heading and a paragraph on the page.
<body> A 300×200 pixel window showing the
<h2>HTML Iframes</h2> contents of [Link]

<p>This is the example of iframes.</p>

<iframe src="[Link]" height="200"
width="300"></iframe>
</body>
</html>
🌐 Website Hosting
✅ What is Website Hosting?
• Website hosting is a service that allows individuals or organizations to store their website
files (HTML, images, CSS, etc.) on a web server, and make them accessible via the
Internet.
• Without hosting, a website cannot be seen online.
💡 What is a Web Host?
• A Web Host is a company that:
• Owns and manages web servers.
• Provides storage space for websites.
• Ensures 24/7 Internet connectivity for your site.
• These companies "host" your website on their servers and keep it available online.
🌐 Website Hosting

🧪 Why Hosting is Important?

• Just creating a website on your computer is not enough.
• You need to upload it to a live server.
• Hosting makes your website publicly available to everyone.
🧾 Real-World Examples

Hosting Type Example Providers

Shared Hosting Bluehost, HostGator
Free Hosting InfinityFree, GitHub Pages, 000webhost
Dedicated Hosting AWS, GoDaddy Dedicated Servers
🌐 Website Hosting

• 📦 Types of Web Hosting

Type Features Best For

- Multiple websites share the same server. -

1. Shared Hosting Beginners & small websites
Cost-effective. - Comes with a domain name.

- Provided by some companies at no cost. -

2. Free Hosting Limited storage & features. - Often includes Students, practice, hobbyists
ads.

- You get a complete server. - High Large businesses or e-

3. Dedicated Hosting
performance and security. - Paid service. commerce
✅ Prerequisites for Free Web Hosting

• Just building a website isn’t enough—it needs to be hosted to make it accessible on the
internet.

Requirement Purpose
🧾 [Link] Home page of the website
💻 Internet connection To upload and configure hosting
📧 Gmail ID & Password Required for signing up on hosting services
🌐 Websites used 000webhost & Freenom
🌐 Hosting Service Get free web space from 000webhost
🌐 Domain Name Provider Get free domain name from Freenom
🔧 Steps to Host Website using 000webhost
🔹 1. Create Hosting Account on • Open the file manager  Click upload
000webhost • Upload all your webfiles including:
• Go to: [Link] • [Link]
• Click Free Sign Up • Images, audio, CSS/JS

• Register using Gmail ID and verify email • Click logout

• Click Get Started ✅ You now get a free subdomain:

🔹 2. Upload Website Files • [Link]

• Click +Create New Site

• Enter:
• Website name: it-xi-textbook
• Password: (any strong Password)
🌐 Steps to Acquire Free Domain using
Freenom
• 🔹 1. Register Domain
• Visit: [Link]
• Sign in using Gmail
• Click: Services → Register a New Domain
• Enter your desired website name
→ Click Check Availability
• Choose domain (e.g. .tk, .ml)  Click get it now
• Click Checkout → Select free hosting period
• Confirm: Total Due = $0.00 → Click Complete Order
• Note your domain: [Link]
🌐 Park Domain to Server (Connect Domain with
Hosting)
• 🔹 1. Go to 000webhost Dashboard
• My Website → Manage → Tools → Set Web Address
• Click +Add Domain → Choose Park Domain
• Enter domain name from Freenom ( e.g. [Link])
• Click on park domain
• 🕓 Domain status = pending initially  Wait till it says “parked”
🔁 Redirect Domain to Hosting Server (Set
Nameservers)
• 🔹 1. Open Freenom Dashboard
• Login → Services → My Domains → Manage Domain
• Click Management Tools → Nameservers
• Select Use custom nameservers
• Enter:
• [Link]
• [Link]

• Click Change Nameservers

✅ Now your domain is linked to 000webhost!
🔍 Test the Hosted Website

• In browser, open: [Link]

• You can also access the website from your mobile!
• 📚 Summary Table

Step Platform Description

Sign Up & Upload Website 000webhost Free hosting and file manager
Register Domain Name Freenom Get .tk or .ml domain for free
Link domain name to hosting
Park Domain to Host 000webhost
service
Point domain to server using
Set Nameservers Freenom
NS01/NS02