MODULE 4 WEB DESIGN
MODULE 4
Syllabus: Web Design (Basics of HTML, CSS, and JavaScript) – Understanding the
web content delivery, Understanding HTML and XHTML Connections,
Understanding Cascading Style Sheets, Understanding JavaScript
WEB DESIGN
• A website is a collection of interconnected web resources such as web pages and
multimedia files, hosted on one or more web servers and identified by a domain
name.
• Examples include [Link], [Link], and [Link].
• Websites can be accessed through the internet using a URL or through a local
network (intranet).
• They serve multiple purposes including sharing information, business operations,
education, entertainment, and communication.
• Web pages are written using HTML or XHTML, along with CSS for styling and
JavaScript for interactivity.
• Browsers interpret these technologies and display content in a user-friendly
format.
• Web pages are retrieved using HTTP (Hyper Text Transfer Protocol), and HTTPS
is used for secure communication.
• HTML defines the structure of content, CSS enhances its appearance, and
JavaScript adds dynamic behaviour.
UNDERSTANDING WEB CONTENT DELIVERY
• Web content delivery refers to the method by which web content such as HTML
pages, images, videos, and scripts are transferred from a server to a user's
browser.
• This process involves several technologies working together to ensure fast,
efficient, and secure delivery
Key Components of Web Content Delivery
• Web Content: Web content includes text, images, videos, stylesheets (CSS),
scripts (JavaScript), and other multimedia elements. These are stored on servers
and accessed via browsers.
1
MODULE 4 WEB DESIGN
• Web Servers: A web server is a system that stores website data and delivers it to
users upon request using HTTP or HTTPS protocols. Example: Apache,
Microsoft IIS.
• Web Browsers: A browser is software used to access and display web content. It
interprets HTML, CSS, and JavaScript. Examples: Chrome, Firefox, Edge,
Safari.
• HTTP / HTTPS: HTTP is used for communication between client and server.
HTTPS is the secure version of HTTP with encryption for safe data delivery
• DNS (Domain Name System): DNS converts domain names into IP addresses
so that browsers can locate servers.
• Browser Rendering: The browser processes HTML, CSS, and JavaScript to
display the webpage in an interactive format.
Steps in Web Content Delivery
• The user enters a URL in the browser
• The browser sends a request to the DNS server
• DNS returns the IP address of the web server
• The browser sends a request to the server
• The server processes the request and sends a response
• The browser renders the webpage content
2
MODULE 4 WEB DESIGN
HTML BASICS
UNDERSTANDING HTML
• HTML (HyperText Markup Language) is the standard language used to create web
pages.
• It allows linking between pages and structuring of content using tags.
• HTML consists of markup tags enclosed within angle brackets such as <html>.
• These tags usually appear in pairs like <tag> and </tag>.
• The opening tag indicates the start, and the closing tag indicates the end.
• HTML provides the basic structure of web pages, while CSS and JavaScript enhance
design and functionality.
Key Features of HTML
• Markup Language
HTML uses tags to define elements like headings, paragraphs, images, and links.
• Hypertext
HTML supports hyperlinks, allowing navigation between pages.
• Structure
HTML organizes content using tags like <header>, <section>, and <footer>.
Creating an HTML File
You can create an HTML file using any text editor like Notepad or advanced editors like
Visual Studio Code or Sublime Text.
Steps:
1. Open a text editor
2. Write HTML code
3. Save file with .html extension
4. Open using any browser
Basic Structure of HTML Document
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
3
MODULE 4 WEB DESIGN
</head>
<body>
<h1>Welcome to HTML Basics</h1>
<p>This is a paragraph in HTML.</p>
</body>
</html>
Explanation:
• <!DOCTYPE html> → Specifies HTML5 document
• <html> → Root element
• <head> → Contains metadata
• <title> → Page title
• <body> → Main visible content
HTML TAGS & LINKS
HTML tags follow a specific format:
• Opening tag: <tag>
• Closing tag: </tag>
Types of Tags:
Container Tags & Self-Closing Tags
• Tags that enclose content within a pair of opening and closing tags are called
container tags.
• They define a block or section of the web page and allow you to group
elements for styling, structure, or scripting purposes.
Example: <p>This is a paragraph.</p>
• Tags without content are called self-closing tags and take the form:
Example: <img src="[Link]">
• The combination of a tag (or tags) and its content is called an element.
4
MODULE 4 WEB DESIGN
Example:
<h1>Welcome to HTML</h1>
• <h1> is the opening tag, </h1> is the closing tag, and the entire structure is
an element.
• If a tag has attributes, they appear between the tag name and the closing
angle bracket of the opening tag.
Example:
<a href="[Link]">This is a link</a>
Section Tags in HTML
• Section tags in HTML5 are semantic elements introduced to organize and
structure web content.
• These tags make it easier to understand the purpose and role of different
sections of a web page.
• They help improve accessibility, readability, and search engine optimization
(SEO).
• Examples: <header>, <footer>, <section>, <article>
Title Tag (<title>)
• The <title> tag is used to define the title of a web page.
• The title is displayed in the browser tab and is often used by search engines
as the page title in search results.
Heading Tags (<h1> to <h6>)
• HTML provides six levels of heading tags.
• <h1> is the highest (most important) level, and <h6> is the lowest.
• These tags are used to define headings and subheadings on a web page,
creating a clear hierarchy and structure.
Paragraph Tag (<p>)
• The <p> tag is used to define a paragraph of text.
5
MODULE 4 WEB DESIGN
• It is a block-level element, meaning it starts on a new line and takes up the
full width available.
• Browsers add some default margin above and below paragraphs for
readability.
• You can include inline elements such as <strong>, <em>, or <a> within a
paragraph.
• The text will appear in separate blocks (paragraphs).
• Inline elements like bold (<strong>) and italic (<em>) will style specific parts
of the text.
Font Styles and Sizes
• Font Styles and Sizes (can be nested): In HTML, font styles and sizes can be
adjusted using various tags and CSS (Cascading Style Sheets).
• These styles can be nested to apply multiple styling rules to text within
different elements.
• Here's how you can modify font styles and sizes:
• Font Style Tags
1. <b>: Makes text bold.
2. <i>: Makes text italic.
3. <u>: Underlines the text.
4. <em>: Emphasizes text, typically in italics (semantic meaning in
HTML).
5. <strong>: Makes text bold with stronger emphasis (semantic meaning in
HTML).
Anchor Tag
• The <a> tag in HTML is used to create hyperlinks, enabling users to navigate
between different pages, sections of the same page, or other resources such as
files, images, or external websites.
Example : <a href="[Link] Example</a>
Attributes of the <a> Tag:
1. href (Hyperlink Reference): Specifies the URL of the link's destination.
Example: <a href="[Link] Example</a>
6
MODULE 4 WEB DESIGN
2. target: Specifies where to open the linked document.
a. _self (default): Opens in the same tab/window.
b. _blank: Opens in a new tab/window.
c. Example : <a href="[Link] target="_blank">Open in
New Tab</a>
3. title: Adds a tooltip that appears when the user hovers over the link.
a. Example:<a href="[Link] title="Visit Example">Hover
Over Me</a>
4. rel: Specifies the relationship between the current document and the linked
document (e.g., nofollow, noopener).
a. Example: <a href="[Link] rel="nofollow">No Follow
Link</a>
5. download: Suggests that the target should be downloaded when clicked.
a. Example: <a href="[Link]" download>Download File</a>
Image
• The <img> tag in HTML is used to embed images into a webpage.
• It is an inline, self-closing element that does not require a closing tag.
• The image source and additional attributes define the image's properties.
• Various attributes can be used to define the properties of the image.
1. src (Required): Specifies the source (URL or file path) of the image.
Example: <img src="[Link]">
2. alt (Optional but Recommended): Provides alternative text describing the
image for accessibility and when the image fails to load.
Example: <img src="[Link]" alt="Description of the
image">
3. width and height (Optional): Set the dimensions of the image in pixels or
percentage.
Example: <img src="[Link]" width="200">
7
MODULE 4 WEB DESIGN
4. style (Optional): Allows inline CSS styling of the image.
Example: <img src="[Link]" style="border: 2px
solid black;">
Lists:
• Lists are used to organize and display content in a structured manner.
• HTML supports two main types of lists along with a third type for definition
lists.
Unordered List (<ul>):
• In unordered lists, the items are displayed with bullets by default. This type is
used when the order of items does not matter.
• Example:
<h1>Unordered List Example</h1>
<h2>List of Fruits</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
Ordered List (<ol>):
• In ordered lists, the items are displayed with numbers or letters. This type is used
when the order of items does matter.
• Example :
<h1>Ordered List Example</h1>
<h2>List of Fruits</h2>
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
Nested Lists:
• You can nest lists within other lists.
• Example :
8
MODULE 4 WEB DESIGN
<h1>Nested List Example</h1>
<ul>
<li>Fruits
<ol>
<li>Apple</li>
<li>Orange</li>
</ol>
</li>
<li>Vegetables
<ol>
<li>Carrot</li>
<li>Potato</li>
</ol>
</li>
</ul>
Definition List (<dl>):
• These types of lists are used for terms and their definitions.
• This contains <dt> (definition term) and <dd> (definition description).
• Example
<h1>Definition List Example</h1>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
List Attributes
1. Type Attribute (<ol> only): Changes the numbering style.
9
MODULE 4 WEB DESIGN
Example:
<h2>List of Fruits</h2>
<ol type="A">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ol>
2. Start Attribute (<ol> only): Specifies the starting value.
Example:
<h2>List of Fruits</h2>
<ol start="5">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ol>
HTML Tables:
• The <table> tag in HTML is used to create tables, which are structured grids
of rows and columns for organizing and displaying data.
Key Elements of Table:
1. <table>: Defines the table.
2. <tr> (Table Row): Defines a row in the table.
3. <th> (Table Header): Defines a header cell in the table, usually displayed in
bold.
4. <td> (Table Data): Defines a standard cell in the table.
5. <caption>: Adds a description to the table.
<h1>HTML Table Example</h1>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Grade</th>
10
MODULE 4 WEB DESIGN
</tr>
<tr>
<td>AnnMaria</td>
<td>7</td>
<td>A</td>
</tr>
<tr>
<td>Joseph</td>
<td>17</td>
<td>B+</td>
</tr>
<tr>
<td>Meera</td>
<td>12</td>
<td>A</td>
</tr>
<tr>
<td>Rose</td>
<td>8</td>
<td>A+</td>
</tr>
</table>
XML
• Extensible Markup Language.
• It is a markup language designed to store, transport, and structure data in a
readable and organized format.
• XML was developed by the World Wide Web Consortium (W3C).
• it is called Extensible because we create your own tags.
• Unlike HTML (which has predefined tags like <p>,<h1>, etc.), XML allows
you to define meaningful tags based on your data.
11
MODULE 4 WEB DESIGN
• XHTML (Extensible HyperText Markup Language) is a markup language
that combines the flexibility of HTML with the strict syntax rules of XML
(Extensible Markup Language).
12
MODULE 4 WEB DESIGN
CSS
• CSS stands for Cascading Style Sheets.
• It is a style sheet language used to describe the presentation and layout of
HTML documents.
• CSS controls how web pages look, including:
o Colors
o Fonts
o Spacing
o Alignment
o Layout
o Backgrounds
o Animations
• CSS works along with HTML. HTML provides the structure of the webpage,
and CSS provides the styling.
• Example
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>This is a styled paragraph.</p>
</body>
</html>
13
MODULE 4 WEB DESIGN
• p { } → CSS selector for paragraph
• color: blue; → Text color
• font-size: 18px; → Text size
Advantages of CSS
1. Separation of Content and Design : CSS separates the structure (HTML) from
presentation (design). This makes the code cleaner and easier to manage.
2. Improves Website Appearance: CSS allows attractive designs with colors,
layouts, fonts, and animations.
3. Reusability: One CSS file can be used for multiple web pages. This saves time
and effort.
4. Faster Page Loading: External CSS reduces repeated code, making pages load
faster.
5. Easy Maintenance: If you want to change the design, you only need to edit the
CSS file instead of changing every HTML page.
6. Better User Experience: CSS helps create responsive designs that work on
mobile, tablet, and desktop devices.
7. Consistency: CSS ensures uniform design across all pages of a website.
Methods of Using CSS in an HTML File
• CSS (Cascading Style Sheets) is used to control the presentation and layout
of HTML documents.
• It defines styles such as colors, fonts, spacing, and positioning of elements.
• There are three ways to use CSS in an HTML file.
1. Inline CSS: Inline CSS is written directly inside an HTML element using the
style attribute.
Example: <p style="color: blue; font-size: 20px;">Hello World</p>
Features:
o Applies style to a single element.
o Has highest priority.
o Not suitable for large projects.
o Makes code less maintainable.
2. Internal CSS: Internal CSS is written inside the section of the HTML document.
Example :
14
MODULE 4 WEB DESIGN
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Features:
o Applies styles to the whole page.
o Suitable for single-page websites.
o Keeps styles separate from content.
3. External CSS: External CSS is written in a separate file with .css extension and
linked to the HTML file using the tag.
Example :
CSS File ([Link])
p { color: red; font-size: 22px; }
HTML File:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
15
MODULE 4 WEB DESIGN
<p>This text is styled using external CSS.</p>
</body>
</html>
Features:
o Best and most recommended method.
o Improves code reusability.
o Makes website easier to maintain.
o Can be applied to multiple web pages.
CSS Selectors
• CSS Selectors are patterns used to select and apply styles to specific HTML
elements.
• They define which elements the CSS rules should target.
• Types of CSS Selectors:
1. Universal Selector (*)
o Selects all elements in the document.
o Example:
*{
margin: 0;
padding: 0;
}
2. Type/Element Selector
o Selects all elements of a specified type/tag.
o Example:
p{
color: blue;
font-size: 16px;
}
o Targets all <p> elements.
3. Class Selector (.)
o Selects elements with a specific class.
o Example:
.my-class {
16
MODULE 4 WEB DESIGN
background-color: yellow;
}
HTML CODE :
<!DOCTYPE html>
<html>
<head>
<style>
.my-class {
background-color: yellow;
}
</style>
</head>
</head>
<body>
<p class="my-class">This paragraph has yellow background.</p>
</body>
</html>
4. ID Selector (#)
o Selects a single element with a specific id.
o Example: #my-id {color: red; }
HTML CODE :
<!DOCTYPE html>
<html>
<head>
<style>
#main {
color: red;
font-size: 24px;
}
</style>
</head>
<body>
<p id="main">This paragraph is styled using ID selector.</p>
</body>
</html>
17
MODULE 4 WEB DESIGN
5. Group Selector (,)
o Applies styles to multiple selectors.
o Example:
h1, p, div {
margin: 10px;
}
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
color: blue;
font-family: Arial;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>
</body>
</html>
Pseudo-classes
• Pseudo-classes are special keywords in CSS used to define the special state of
an element.
• They are used to style elements when they are in a particular condition, such
as:
o When a user hovers over it
o When a link is visited
o When an input field is focused
o When it is the first or last child Pseudo-classes are written using a colon
(:).
• Pseudo-classes are written using a colon (:).
• Example :
selector:pseudo-class { property: value; }
HTML CODE :
<html>
<head>
<style>
18
MODULE 4 WEB DESIGN
a:hover {
color: red;
}
input:focus {
background-color: lightyellow;
}
</style>
</head>
<body>
<a href="#">Hover over this link</a>
<br><br>
<input type="text" placeholder="Click here">
</body>
</html>
<div> Tag :
• The <div> (short for "division") is a container element in HTML used to group
and organize content, helping to structure a web page.
• It has no visual representation by default but is used to apply styles and
manipulate sections using CSS and JavaScript.
• Key Characteristics:
1. Block-Level Element:
o It takes up the full width available and starts on a new line.
o Can contain other HTML elements such as text, images, forms, or
other
2. No Default Styling:
o <div> itself has no visual effect but is often used with CSS to apply
styles.
3. Commonly Used for Layouts:
o Helps create grid-based or flexbox layouts.
o Used to define sections such as headers, footers, sidebars, and content
areas
Example:
<!DOCTYPE html>
<html>
19
MODULE 4 WEB DESIGN
<head>
<style>
.my-class {
background-color: yellow;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="my-class">
Hello World!
</div>
</body>
</html>
Previous year Questions
1. Write a simple HTML code to display a heading and a paragraph.
2. Design a webpage using HTML and CSS for an online bookstore. Include a
title, a heading, a list of book categories, and a basic style.
3. Inspect the following XHTML and make the necessary corrections required,
if any:
<!DOCTYPE html>
<html xmlns="[Link]
<head>
</head>
<BODY>
<b><i>Some text</b></i>
<P>This is a paragraph</P>
<a HREF="[Link] our university website</a>
</BODY>
4. Illustrate the different ways in which style sheets can be applied to a web page
with simple examples.
5. What is HTML, and what is its primary purpose in web design?
6. What is CSS?
7. Discuss the differences between HTML and XHTML. What are the
advantages and disadvantages of each?
8. Write a simple HTML code to display a heading and a paragraph.
9. Create an unordered list and a hyperlink using HTML.
[Link] an HTML structure for a student registration form.
20
MODULE 4 WEB DESIGN
Include the following fields: Name (text input), Age (number input), Gender
(radio buttons), and Submit button.
[Link] a webpage using HTML and CSS for an online bookstore.
Include a title, a heading, a list of book categories, and a basic style.
[Link] a CSS rule to style a paragraph with the following properties:
Font colour: Dark green, Font size: 16px, Line height: 1.5.
21