Module - 4

Web Design (basics of

HTML, CSS and
JavaScript)

Module - 4
A Brief Introduction to the Internet:
● Origins ARPAnet -
○ late 1960s and early 1970s US DoD developed large scale network. Basic requirement was
that the network should be sufficiently robust. DoD’s ARPA funded for the first project and so
the name ARPAnet .(Advanced Research Projects Agency (ARPA) )
○ ARPANET was available to laboratories & universities that conducted ARPA-funded
research.
● BITnet(Because It’s Time N/W), CSnet(Computer Science Network) :
○ developed in late 1970s & early 1980s.BITnet is began at City University of New York. It was
to provide email and file transfer for other institutions.
○ For different reasons BITnet and CSnet were not widely used.

A Brief Introduction to the Internet:

● NSFnet(National Science Foundation) –
○ was created in 1986 .Originally for non-DOD funded places. Initially connected NSF funded
supercomputer centers at five universities.
○ By 1990, it had replaced ARPAnet for non-military uses. Soon became the network for all (by
the early 1990s).By 1992 NSFnet connected more than 1 million computers , around the
world.
○ NSFnet eventually became known as the Internet by 1995.
What is Internet?
• Internet refers to a "network of networks" composed of millions of smaller domestic,
academic, business, and government networks.
• It is a worldwide, publicly accessible network that integrates computing and communication
technologies.
• This system carries various types of information and services, including electronic mail,
online chat, file transfer, and the interlinked web pages and documents that form the World
Wide Web.

World Wide Web (WWW)

• The World Wide Web, introduced in 1990 by Tim Berners-Lee, is a system of interlinked
hypertext documents accessed via the Internet.
• These hypertext documents allow users to navigate between different resources through
embedded links.
• Using a web browser, users can view web pages that may include text, images,
multimedia, and other content, and move between them using hyperlinks.
• The information on the web is presented in various forms, often referred to as pages,
documents, or resources.
• The term "hypermedia" refers to documents that contain more than just text, incorporating
elements like images, audio, and video.
Web vs Internet
• Web:

• Collection of software and protocols that helps to gather or deliver information during
the communication.

• Web is information repository over internet.

• Internet:

• Collection of computers and other devices connected each other and allows them to
communicate each other.

• Internet is the interconnected network of networks.

Internet Protocol (IP) Addresses

• An IP address (Internet Protocol address) is a unique numerical label assigned to each device
connected to a network that uses the Internet Protocol for communication.
• It serves two main functions: identifying the host and providing the host’s location within the
network.
• IP addresses are classified into IPv4 (e.g., 192.168.1.1) and IPv6 (e.g., 2001:db8::ff00:42:8329),
with IPv6 designed to address the shortage of IPv4 addresses.
• The structure of an IPv4 address consists of a 32-bit numerical value, usually written in dotted
decimal notation (e.g., 192.168.1.1).
• It is divided into four octets (8-bit sections), each ranging from 0 to 255.
• The IPv4 address is typically represented as: X.X.X.X
(where X is an 8-bit number between 0 and 255).
Domain names
• A domain name is a human-readable address used to identify websites on the internet, making
it easier to access them instead of remembering numerical IP addresses.
• For example, www.google.com is a domain name that maps to an IP address like
142.250.183.14.
• A domain name consists of multiple parts, separated by dots ("."), forming a hierarchy:
• Top-Level Domain (TLD) – The last part (e.g., .com, .org, .net, .edu).
• Second-Level Domain (SLD) – The main part of the domain (e.g., google in google.com).
• Subdomain (Optional) – A prefix before the main domain (e.g., www in www.google.com).
• When you enter a domain name in a browser, the Domain Name System (DNS) translates it
into the corresponding IP address, allowing your device to connect to the correct server.
Brief History of HTML and the World Wide
Web
• The Internet emerged from efforts to connect major computer networks, but
accessing information remained complex until Sir Tim Berners-Lee introduced
hypertext links, leading to the World Wide Web.
• Initially limited, the Web rapidly expanded with browsers that supported text and
graphics, evolving into today’s massive digital landscape.
• Hypertext originally meant text stored in electronic form with cross-reference links
between pages.
• It is now a broader term that refers to just about any object (text, images, files, and
so on) that can be linked to other objects.

Brief History of HTML and the World Wide

Web
• Hypertext Markup Language is a language for describing how text, graphics, and files
containing other information are organized and linked together.
• By 1993, only 100 or so computers throughout the world were equipped to serve up HTML
pages.
• Those interlinked pages were dubbed(named) the World Wide Web (WWW), and several
web browser programs had been written to allow people to view web pages.
Web Design
• A website is a collection of interconnected web resources, such as web pages and
multimedia content, hosted on one or more web servers and identified by a domain name.
• Examples include google.com, wikipedia.org, and amazon.com.
• Websites can be accessed via the public internet using a URL or through a private LAN for
intranet use.
• They serve various purposes, including personal, corporate, governmental, and
organizational functions, covering topics like entertainment, education, social networking,
and news.

Web Design
• Web pages are retrieved and displayed using the Hypertext Transfer Protocol (HTTP),
which can be secured with HTTPS for enhanced privacy and security.
• HTML provides the structure of a webpage by defining its elements, such as headings,
paragraphs, and images.
• CSS adds styling (e.g., colors, layouts, fonts), while JavaScript enables interactivity and
dynamic functionality (e.g., animations, form validation).
• A web browser renders the page content according to the HTML markup instructions,
displaying it on the user's device.
Understanding Web Content Delivery
• Web content delivery refers to the process through which web content, such as HTML

pages, images, videos, and scripts, is delivered from a server to a user's web browser.

• This involves several components and technologies working together to ensure efficient,

fast, and secure delivery.

Key Concepts of Web Content Delivery

1. Web Content:
• The term "web content" is preferred over "web pages" since it encompasses all types
of media (text, images, audio, video, etc.).
• Web content includes text, images, audio, video, and other media.
• Some HTML markup instructs the browser to display media files instead of plain text.
• Website owners control what users see by planning, designing, and implementing web
content.
• The first step in creating web content is writing HTML/XHTML code.
Types of Webpages
• Webpages can be classified as static or dynamic based on how they are created and how
their content is delivered to users.
Static Webpages
• A static webpage displays fixed content that does not change unless manually
updated by a developer.
• Pre-built HTML files stored on a web server.
• The same content is delivered to every user.
• Uses HTML, CSS, and JavaScript for styling and minor interactivity.
• No interaction with databases or server-side processing.
• Examples:A company’s "About Us" page.

Types of Webpages
Dynamic Webpages
• A dynamic webpage generates content on the fly, often based on user interaction,
database queries, or real-time data.
• Uses server-side programming (e.g., PHP, Python, Node.js, Java, ASP.NET).
• Can interact with databases (e.g., MySQL, MongoDB) to fetch or store data.
• Content changes based on user actions or external data.
• Often integrates APIs or real-time features (e.g., live chat, stock prices).
• Examples:
• Social media platforms (Facebook, Twitter, Instagram).
• E-commerce websites (Amazon, Flipkart).
Key Concepts of Web Content Delivery
2. Web Servers:
• A web server is software or hardware that delivers web content to clients over the
Internet or a local network.
• It processes client requests, typically made through a web browser using the Hypertext
Transfer Protocol (HTTP) or its secure variant, HTTPS.
• When a web server receives a request, it locates the requested resource (such as a
web page, image, or file) and sends it back to the client.
• If the request involves running a server-side script or program, the server executes it
and returns the generated output as a response.
• Examples: Apache, Microsoft IIS.

Key Concepts of Web Content Delivery

3. Web Browsers:
• A web browser is software that runs on a client machine, allowing users to display and
interact with the rich multimedia content of the web, including text, images, and other
information.
• The "web" in this context may refer to the World Wide Web, a local area network, or
even a web page hosted on the user's own machine.
• Web browsers always initiate communication with servers, while servers respond to
these requests.
• Examples: Chrome, Firefox, Edge, Safari.
Key Concepts of Web Content Delivery
4. HTTP/HTTPS:

• HTTP (Hypertext Transfer Protocol) is a protocol used for communication between a

browser and server.

• HTTPS is the secure version of HTTP with encryption for safe data transmission.

Key Concepts of Web Content Delivery

5. DNS (Domain Name System):

• DNS translates human-readable domain names into numerical IP addresses, making it

easier for users to navigate the internet.

• Without DNS, we'd have to remember complex IP addresses to access websites.

• Example: Converts human-readable domain names (e.g., www.example.com) into

corresponding IP addresses (e.g., 192.0.2.1).
Key Concepts of Web Content Delivery
6. CDN (Content Delivery Network):

• A network of servers distributed globally to deliver web content quickly.

• This helps to reduce latency and enhances user experience.

7. Caching:

• Storing a copy of web content closer to the user (in the browser or on proxy servers) for
faster retrieval.

Key Concepts of Web Content Delivery

8. Protocols and File Formats:
• Web content delivery involves several protocols and file formats to ensure efficient
transmission and rendering of content.
• Common file formats used in web are HTML, CSS, JS, JSON, XML, PNG, JPEG, MP4.
• A protocol is a set of rules and conventions that govern the communication between
devices in a network.
Steps in Web Content Delivery
1. User request: A user enters a URL (for example www.example.com) in the browser's
address bar or clicks a link. The browser sends an HTTP/HTTPS request to the DNS server.

2. DNS Resolution: The browser sends a request to a DNS server to find the IP address
associated with the domain name. The domain name is resolved into an IP address by the
DNS Server.

3. Once the IP address is found, the browser sends a request to that IP address,
asking for the specific web page.

Steps in Web Content Delivery

4. Server Processing: The web server at that IP address processes the request and sends
back the requested web page.

5. Content Transmission: Content is transmitted over the Internet to the user's browser
using TCP/IP.

6. Browser Rendering: The browser receives the web page's data and renders it into a
format that user can read and interact with.
Steps in Web Content Delivery

Selecting a Web Hosting Provider

• Choosing the right web hosting provider is crucial for ensuring a website’s performance,
security, and reliability. Here are the key factors to consider:
• Reliability & Uptime – Look for providers offering 99.9% uptime or higher. Speed &
• Performance – Ensure the host uses SSD storage, CDN, and optimized servers.
• Security Features – Check for SSL certificates, firewalls, and DoS protection.
• Scalability – Choose a provider that allows easy upgrades as traffic grows.
• Customer Support – 24/7 support via chat, phone, or email is essential.
• Pricing & Plans – Compare pricing, renewal rates, and hidden fee
Examples
• A Small Orange (http://www.asmallorange.com )
• A Small Orange is a web hosting provider offering a variety of hosting plans tailored to
different needs.
• DailyRazor (http://www.dailyrazor.com)
• DailyRazor is a versatile web hosting provider offering a range of services tailored to
various needs, including shared hosting, VPS hosting, and specialized Java hosting
• LunarPages (http://www.lunarpages.com )
• Lunarpages was a web hosting provider known for offering affordable and feature-rich
hosting plans.

Testing with Multiple Web Browsers

• Before you go off and learn all about creating websites with HTML and CSS, do so
with this very important statement in mind:
• Every visitor to your website will potentially use hardware and software
configurations that are different than your own.
• Their device types (desktop, laptop, netbook, smartphone, or iPhone), their screen
resolutions, their browser types, their browser window sizes, and their speed of
connections will be different.
• Developers cannot control user configurations.
• You should always test your websites with as many of these web browsers as
possible.
Importance of Cross-Browser Testing
• Browsers process and display content differently.
• Even the same browser version may appear different based on user settings.
• Users can override background, fonts, and other display elements.

Recommended Browsers for Testing

• Apple Safari (http://www.apple.com/safari/) for Mac and Windows

• Google Chrome (http://www.google.com/chrome) for Windows

• Mozilla Firefox (http://www.mozilla.com/firefox/) for Mac, Windows, and Linux .

• Microsoft Internet Explorer (http://www.microsoft.com/ie) for Windows

• Opera (http://www.opera.com/) for Mac, Windows, and Linux/UNIX

Creating a Sample File
• This listing represents a simple piece of web content—a few lines of HTML
that print “Hello World! Welcome to My Web Server.” in large, bold letters on
two lines centered within the browser window.

Using FTP to Transfer Files

• You have to put your web content on a web server to make it accessible to others.
• This process typically occurs by using File Transfer Protocol (FTP).
• To use FTP, you need an FTP client—a program used to transfer files from your computer to a
web server.
• FTP clients require three pieces of information to connect to your web server; this information will
have been sent to you by your hosting provider after you set up your account:
• The hostname, or address, to which you will connect .
• Your account username .
• Your account password
• After you have this information, you are ready to use an FTP client to transfer content to your web
server.
Selecting FTP Client
• FTP Client Basics
• FTP (File Transfer Protocol) is used to upload and download files between your
local computer and a remote web server.
• FTP clients generally have a dual-pane interface:
• Left pane: Local computer files
• Right pane: Remote web server files
• Regardless of the FTP client you use, FTP clients generally use the same type of
interface.
• When you have selected an FTP client and installed it on your computer, you are
ready to upload and download files from your web server.

Selecting FTP Client

• File transfers can be done using drag and drop or arrow buttons.
• Popular free FTP clients include:
• Classic FTP (Mac, Windows)
• Cyberduck (Mac)
• Fetch (Mac)
• FileZilla (All platforms)
• FireFTP (All platforms)
Using an FTP Client
• The following steps show how to use Classic FTP to connect to your web server and
transfer a file.
• You first need the hostname, the account username, and the account password.

1. Start the Classic FTP program and click the Connect button. You will be prompted to fill out
information for the site to which you want to connect.
Using an FTP Client
2. Fill in each of the items shown in Figure 1.5 as follows: .
• Enter Site Label
•A name for your site.
•Enter FTP Server Address
•The FTP address provided by your hosting provider (e.g., ftp.yourdomain.com).
•Enter Login Credentials
•Username & Password (provided by your hosting provider).
•Keep Initial Directory Settings Default
•Do not change Initial Remote Directory and Initial Local Directory until you are
familiar with FTP workflows.
Using an FTP Client
3. Save Settings & Connect
•Click OK to save settings and establish a connection.
•Check Connection Status
•A dialog box will show connection progress.
•If successful, an interface appears showing:
•Local directory (your computer) on the left.
•Remote web server files on the right.
Using an FTP Client
4. Navigate to the Document Root
•The document root is the top-level directory for web content.
•Common names for the document root:
•public_html
•www (Alias for public_html)
•htdocs
•This directory is already created by your hosting provider.
•Open the Document Root Directory
•Double-click the directory name to open it
•Contents of this directory will be displayed (may be empty).
•Locate the File to Upload.
•The goal is to transfer the sample.html file you created earlier from your computer to the
web server
•In the left pane (local computer files), find the file (sample.html).
•Navigate if needed to locate the correct folder.

Using an FTP Client

5. Select the File for Transfer
•Click once on sample.html to highlight it.
6. Click the right-arrow button in the middle of the client interface to send the file to the web
server.
• After the file transfer is completed, the right side of the client interface should refresh to
show you that the file has made it to its destination.
7. Click the Disconnect button to close the connection, and then exit out of the Classic FTP
program
 Distributing Content Without a Web Server
1.Web Content without the Internet
•HTML and multimedia files can be used offline for various publishing purposes.
•This allows users to view content in a web browser without needing a web server or
an internet connection.
2. Use Cases for Local HTML Content
•CD-ROMs, DVD-ROMs, USB drives: Distribute marketing materials or presentations in
web format at trade shows.
•Instructional Manuals: Provide HTML-based user guides or training materials on
removable media for students.
•Offline Documentation: Store company policies, software manuals, or educational
content in an interactive format.

Distributing Content Without a Web Server

3. Local Sites vs. Web Sites
•A local site consists of HTML files accessed directly from a computer’s file system
instead of a web server.
•Even without a server, hyperlinks, images, and multimedia still function as they do on
the web.
4. Advantages of Local HTML Content
•No need for an internet connection or hosting service.
•Works across different operating systems without additional software.
•Content is easily portable via USB, CDs, or DVDs.
Understanding HTML
• HTML (Hypertext Markup Language) is the standard markup language for creating web
pages.
• Hyper Text is the text which contains links to other texts.
• It is a markup language which consists of a set of markup tags.
• HTML uses markup tags to describe web pages.
• HTML markup tags are usually called HTML tags.
• HTML tags are keywords surrounded by angle brackets like <html>.
• HTML tags come in pairs like <b> and </b>.

Understanding HTML
• The first tag in a pair is the start tag, the second tag is the end tag.

• It forms the backbone of web pages and applications by providing the basic structure that other

technologies like CSS (Cascading Style Sheets) and JavaScript enhance with styling and

interactivity.

• XHTML stands for EXtensible HyperText Markup Language.

• XHTML is almost identical to HTML 4.01.XHTML is a stricter and cleaner version of HTML 4.01.
Key Features of HTML
1. Markup Language:

• HTML uses tags to define elements of a webpage, such as headings, paragraphs,

links, images, and forms.
2. Hypertext:
• HTML allows the inclusion of hyperlinks, enabling navigation between different
pages or resources on the internet.
3. Structure:
• It organizes content hierarchically using tags like <html>, <head>, <body>, <title>.

Versions of HTML and XHTML

• Original intent of HTML: General layout of documents that could be displayed by a wide
variety of computers.
• HTML 1.0
• HTML 1.0 was the first release of HTML to the world .
• The language was very limiting.
• HTML 2.0
• HTML 2.0 included everything from the original 1.0 specifications
• HTML 2.0 was the standard for website design until January 1997
• Defined many core HTML features for the first time.
Versions of HTML and XHTML
• HTML 3.2 - 1997
• The browser-specific tags kept coming.
• First version developed and standardized exclusively by the W3C.
• HTML 4.0 – 1997
• Introduced many new features and deprecated many older features.
• Support for HTML’s new supporting presentational language, CSS.

Versions of HTML and XHTML

• HTML 4.01 - 1999
• A cleanup of 4.0.
• It faces 2 problems
• It specifies loose syntax rules
• Its specification does not define how a user agent (browser) is to recover when
erroneous code is encountered.
• XHTML 1.0 – 2000
• Redefinition of HTML 4.01 using XML, instead of SGML & HTML with stronger
syntactic rules
Versions of HTML and XHTML
• XHTML 1.0 is three standards: Strict, Transitional and Frameset.
- Strict standard requires all of the syntax rules of XHTML1.0 to be followed
- Transitional standard allows deprecated features of XHTML1.0 to be included.
- Frameset standard allows the collection of frame elements and attributes to be
included although they have been deprecated.
• XHTML 1.1 – 2001
• Modularization of XHTML 1.0 , drops some of the features of its predecessor such as
frames.
• HTML 5 – January 2008
• Latest specification of the HTML.
• HTML5 was published as a Working Draft by the W3C.

Basic Structure of an HTML Document

• An HTML document begins with the <!DOCTYPE> declaration, followed by <html> tags

enclosing the content.

• An HTML document must include the four tags <html>, <head>, <title>, and <body>.
Basic Structure of an HTML Document
• Example

<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to HTML Basics</h1>
<p>This is a paragraph in HTML</p>
</body>
</html>

Basic Structure of an HTML Document

✔ <!DOCTYPE html>: Declares the document type as HTML5.
✔ <html>: Root element of the document.
✔ <head>: The <head> element in an HTML document typically contains two essential
elements:
✔ <title> Element: Specifies the title of the document, which is displayed in the browser's
title bar or tab.
✔ <body>: Contains the visible content of the web page. The body of a document provides
content of the document.
 Creating an HTML file
• You can use any text editor, from the basic Editors such as Notepad (Windows) or
Advanced Editors like Visual Studio Code, Sublime Text, Notepad++, or Atom.
• Open your text editor and create a new file.
• Save the file with the .html extension. For example, index.html.
• Make sure the "Save as type" is set to All Files (if using Notepad).
• Locate the saved file on your computer. Double-click the file or right-click and choose Open
With > your preferred browser (e.g., Chrome, Firefox, Edge).
• The file will open in the browser, displaying the HTML content.

HTML Tags

• Tags in HTML follow a specific format, with most appearing in pairs:

• Opening Tag: <name>
• Closing Tag: </name>
• The opening tag and its corresponding closing tag together define a container for the
content they enclose.
• Example: <p>This is a paragraph.</p>
• 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. Examples: <div>, <span> etc.
HTML Tags

• However, not all tags have content.

• Tags without content are called self-closing tags and take the form, Example: <img
src="image.jpg" />.
• The combination of a tag (or tags) and its content is called an element.
• For instance, in the following example:
<h1>Welcome to HTML</h1>
• <h1> is the opening tag, </h1> is the closing tag, and the entire structure is an element with
the content "Welcome to HTML."

Common Tags
HTML Tag
• The <html> tag represents the root of an HTML document.

• The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE>
tag).

Head Tag
• The <head> element is a container for metadata (data about data) and is placed between
the <html> tag and the <body> tag.
• Metadata is data about the HTML document. Metadata is not displayed.
• Metadata typically define the document title, character set, styles, scripts, and other meta
information.
• The following elements can go inside the <head> element:
•<title> (required in every HTML document)
•<style>
•<base>
•<link>
•<meta>
•<script>
•<noscript>
Body Tag
• The <body> tag defines the document's body.
• The <body> element contains all the contents of an HTML document, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc.
• Note: There can only be one <body> element in an HTML document.

Title tag

• The <title> tag in HTML is used to define the title of a web page.
• This title is displayed on the browser tab and is often used by search engines as the title of
the page in search results.
 <!DOCTYPE html>
<html>
<head>
<title>HTML Elements Reference</title>
</head>
<body>
This is a Web page
Title tag </body>
</html>

Heading Tags
• HTML provides six levels of heading tags, from <h1> (the highest, most important level) to
<h6> (the lowest, least important level).
• These tags are used to define headings and subheadings on a web page, creating a clear
hierarchy and structure for content.
Example: Heading Tags
CODE OUTPUT

Paragraph
• The <p> tag in HTML is used to define a paragraph of text.
• It is a block-level element, meaning it starts on a new line and takes up the full width
available by default.
• 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.
 Example : Paragraph
CODE OUTPUT

<!DOCTYPE html>
<html>
<head>
<title>Sample Web Page</title>
</head>
<body>
<h1>This is an H1 heading (Largest)</h1>
<h2>This is an H2 heading</h2>
<h3>This is an H3 heading</h3>
<h4>This is an H4 heading</h4>
<h5>This is an H5 heading</h5>
<h6>This is an H6 heading (Smallest)</h6>
<p>This is the first paragraph. It introduces the concept of paragraphs in HTML.</p>
</body>
</html>
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
 Example
<!DOCTYPE html>
<html>
<head>
<title>Sample Web Page</title>
</head>
<body>
<h3>Font Size Example</h3>
<p>This is normal text - <b>and this is bold text</b>.</p>
<p>We <em>cannot</em> live like this.</p>
<p>The <i>Titanic</i>, a luxury steamship, sank after striking an iceberg.</p>
<p><strong>This text is important!</strong></p>
<p>This is some <u>mispeled</u> text.</p>
</body>
</html>
break tag
• Line break tag
• Used when the webmaster wants a carriage return but doesn't want a blank line to follow
• The <br> tag is an empty tag. It has no closing tag.
• Example: text a
• <p>text a</p>
• <p>text b</p> text b
• <br>text c
• <br>text d text c
text d

Example
<body>
<h2>Using the &lt;br&gt; Tag</h2>
<p>This is the first line.<br>This is the second line.<br>This is the third line.</p>
<p>Address Example:</p>
<p>
John Doe<br>
123 Main Street<br>
City, Country<br>
</p>
</body>
Horizontal Rule
• The <HR> tag puts a graphical line across the page.
• Horizontal Rule Attributes:
• WIDTH="xx%/xx" -- Controls the width of the line. You may specify either
percentage of the width of a page or actual pixel length
• SIZE="xx" -- Controls the height of the line. You need to specify the dimension in
pixels.
• ALIGN="left/center/right" -- This allows the line to be aligned to the left, right, or
center of the page
<body>
<h2>Default Horizontal Rule</h2>
<hr>
<h2>HR with Specific Width</h2>
<hr width="50%">
<h2>HR with Specific Height</h2>
<hr size="10">
<h2>HR with Alignment</h2>
<p>Left-aligned line:</p>
<hr width="50%" align="left">
<p>Center-aligned line:</p>
<hr width="50%" align="center">
<p>Right-aligned line:</p>
<hr width="50%" align="right">
</body>
 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.

• The syntax of creating an anchor:

<a href="url">Text to be displayed</a>

Attributes of Anchor tag

• Various attributes can be used to define the properties of <a>.

Attributes of the <a> Tag:

i. href (Hyperlink Reference):

•Specifies the URL of the link's destination.

•Example: <a href="https://google.com">SEARCH</a>

Example
<!DOCTYPE html>
<html>
<head>
<title>Sample Web Page</title>
</head>
<body>
<h1>Anchor Example</h1>
<a href="https://google.com">SEARCH</a>
</body>
</html>
HTML LISTS
• HTML supports ordered, unordered and definition lists.
1. Unordered Lists:
• An unordered list is a list of items.
• The list items are marked with bullets (typically small black circles).
• An unordered list starts with the <ul> tag and end with </ul>.
• Each list item starts with the <li> tag.
• Syntax
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Example
<body>
<h2>Shopping List</h2>
<ul class="styled-list">
<li>Bread</li>
<li>Milk</li>
<li>Cheese</li>
</ul>
</body>
HTML LISTS
2. Ordered List
• An ordered list is also a list of items.
• The list items are marked with numbers.
• An ordered list starts with the <ol> tag and end with </ol> tag.
• Each list item starts with the <li> tag.
• Syntax
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Example
<body>
<h2>Steps to Make Tea</h2>
<ol class="styled-list">
<li>Boil water</li>
<li>Add tea leaves</li>
<li>Simmer for a few minutes</li>
<li>Strain and serve</li>
</ol>
</body>
 Nested List
• A nested list in HTML is a list within a list. You can create a nested list using <ul>
(unordered list) or <ol> (ordered list) elements, with <li> (list items) inside them.
• Steps to Create a Nested List Structure:
1. Create a main <ul> or <ol> list.
2. Add <li> elements for list items.
3. Inside a <li>, nest another <ul> or <ol> list.
4. Repeat the process for deeper levels if needed.

<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grapes
<ul>
<li>Black Grapes</li>
Example of a <li>Green Grapes</li>
</ul>
Nested List </li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrot</li>
<li>Spinach</li>
</ul>
</li>
</ul>
HTML Description Lists
• A description list is a list of terms, with a description of each term.
• The <dl> tag defines the description list.
• The <dt> tag defines the term (name), and the <dd> tag describes each term:
Example
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- Coffee is a popular beverage made from roasted coffee beans, known for its rich
aroma, bold flavor, and stimulating caffeine content. It is enjoyed worldwide in various forms, from
espresso to lattes, and is a staple in many cultures.</dd>
<dt>Milk</dt>
<dd>- Milk is a nutritious liquid produced by mammals, rich in proteins, calcium, and essential
vitamins. It is widely consumed as a beverage and used in various dairy products like cheese, yogurt, and
butter.</dd>
</dl>
</body>
Image tag
•The <img> tag in HTML is used to display images on a webpage.

•It is a self-closing tag, meaning it does not require a closing tag.

•It is a empty tag.

•Syntax

<img src="image.jpg" alt="Description of Image">

Image tag
• Attributes
•src="image.jpg" → Specifies the image file location.
•alt="Description of Image" → Provides alternative text if the image fails to load.

•width : Image width (in pixels).

•height : Image height (in pixels).
Example
<body>
<h2>Image with Attributes</h2>
<img src=“Rose.jpg" alt="Sample Image" width="300" height="200" align="right">
<p>This image is aligned to the right using the deprecated `align="right"` attribute.</p>
<hr>
</body>
Background Image
<body bgcolor="lightblue">
<h1>Welcome to My Webpage</h1>
<p>This page has a solid background color.</p>
</body>

• bgcolor="lightblue" sets the background color to light blue.

Background Image
<body background="background.jpg">
<h1>Welcome to My Webpage</h1>
<p>This page has a background image.</p>
</body>

• background="background.jpg" sets an image as the background.

Tables
• A table is a matrix of cells, each possibly having content.
• The cells can include almost any element .
• Some cells have row or column labels and some have data.
• The cells in the top row often contain columns labels , those in the left most column often
contains row labels and most of the rest of the cells contain the data of the table.
• The content of a cell can be text, a heading, a horizontal rule , an image or a nested table.
• A table is specified as the content of a <table> tag.

HTML Table Tags

•<table > Used to create table
•<tr> Table is divided into rows

•<td> Each row is divided into data cells

•<th> Headings in a table

•<caption> Caption to the table

<body>
<h3>Example of Table without Border</h3>
<table>
<tr>
<td>MILK</td>
<td>TEA</td>
<td>COFFEE</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
Attributes
• border : Specifies a border between the cells.
•colspan : No of column working with will span attribute takes a number.

•rowspan : No of rows working with will span attribute takes a number.

<body>
<h2>Example of Table with Border</h2>
<h4>Horizontal Header:</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Loan No</th>
<th>Amount</th>
</tr>
<tr>
<td>Jones</td>
<td>L-1</td>
<td>5000</td>
</tr>
</table>
<br>
<br>
 <h4>Vertical Header:</h4>
<table border="5">
<tr>
<th>Name</th>
<td>Jones</td>
</tr>
<tr>
<th>Loan No</th>
<td>L-1</td>
</tr>
<tr>
<th>Amount</th>
<td>5000</td>
</tr>
</table>
</body>
HTML Form
•A form is an area that can contain form elements.
•Form elements are elements that allow the user to enter information in a form.
•Example - textfields, textarea fields, drop-down menus, radio buttons and checkboxes etc.

•A form is defined with the <form> tag.

•The syntax:-
<form>
input elements
</form>

HTML Form
• HTML has tags to create a collection of objects that implement the information gathering
– The objects are called widgets or controls (e.g., radio buttons ,checkboxes, text
,password , reset, submit )
– All control tags are inline tags
– Most controls are used to gather information from the user in the form of either text or
button selections
– Every form data requires submit button
• When the Submit button of a form is clicked, the form data is encoded and are sent to the
server for processing.
HTML Form Attributes
• The action attribute in an HTML <form> tag specifies the URL where the form data should
be sent when the user submits the form.

• If omitted, the form data is sent to the same page where the form is located.

• Example:

<form action="/action_page.php">

Form Elements
• The HTML <form> Elements
• The HTML <form> element can contain one or more of the following form elements:
• <input>
• <label>
• <select>
• <textarea>
• <button>
• <fieldset>
• <legend>
• <datalist>
• <output>
• <option>
• <optgroup>
The <input> Element
• The HTML <input> element is the most used form element.
• An <input> element can be displayed in many ways, depending on the type attribute.
• Many of the commonly used controls such as text , passwords, checkboxes, Reset, Submit,
radio buttons etc. are created with the <input> tag.
• The type attribute of <input> specifies the kind of widget being created such as checkbox,
text, password, radio button etc.

The <input> Element

The <input> Element
• All the previously listed controls except Reset and submit also require a name attribute
which becomes the name of the value of the control within the form data.
• If the name attribute is omitted, the value of the input field will not be sent at all.
• The controls for checkboxes and radio buttons require value attributes which initializes the
value of the control.

The <label> Element

• The <label> element defines a label for several form elements.
• The <label> element is useful for screen-reader users, because the screen-reader will read
out loud the label when the user focus on the input element.
• The for attribute of the <label> tag should be equal to the id attribute of the <input> element
to bind them together.
• <label for="fname">First name:</label>
Text
• Text control is often used to gather information from the user such as the user’s name or
address.
• Creates a horizontal box for text input.
• Default size is 20; it can be changed with the size attribute.
• If more characters are entered than will fit, the box is scrolled (shifted) left.
• <input type = "text" name = "Phone" size = “25“ />
• If you don’t want to allow the user to type more characters than will fit, set maxlength, which
causes excess input to be ignored
• <input type = "text" name = "Phone” size = “25“ maxlength =“25” />

Text
• If the contents of the textbox should not be displayed when it is entered by the user, a
password control can be used.
• <input type= “password” name = “myPassword” size = “10” maxlength = “10” />
• In this case, regardless of what characters are typed into a password control, only bullets or
asterisks are displayed by the browser.
Example
Example
<body>
<h3>Simple Form</h3>
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
<br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname">
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
Radio Buttons
• Closely related to checkbox buttons except that only one radio button can be ‘checked’ at a
time.
• Every time a radio button is pressed , the button in the group that was previously on turned
off.
• The type value for the radio buttons is radio.
• Every button in a radio button group MUST have the same name
Checkboxes
• It is used to collect multiple choice input.
• A checkbox control is a single button that is either on/off (checked or not) .
• Every checkbox requires a name attribute and value attribute, which is the widget’s value
in the form data when the checkbox is ‘checked’.
• A checkbox that is not ‘checked’ (off) contribute no value to the form data.
• To initialize a checkbox to ‘checked’, the checked attribute of checkbox must be set to
"checked“.
• Check box should appear in the label elements.
The Submit and Reset Button
• The <input type="submit"> defines a button for submitting the form data to a form-handler.
• The form-handler is typically a file on the server with a script for processing input data.
• The form-handler is specified in the form's action attribute.
• < input type = "reset" value = "Reset Form /">
• <input type = "submit” value = "Submit Form /">
• Submit has two actions:
• 1. Encode the data of the form and send to the server.
• 2. Request that the server execute the server-resident program specified as the value of the action
attribute of <form>
• 3. A Submit button is required in every form
• Reset button is used to reset the form data to its initial value.
Validating Your Web Content
• Validation is the process of testing your pages with a special application that searches for
errors and makes sure your pages follow the strict XHTML standard.
• The World Wide Web Consortium (W3C)—offers an online validation tool you can use.
• To validate a page, follow this URL: http://validator.w3.org/.
Validating Your Web Content
• If you’ve already published a page online, you can use the Validate by URI tab.
• Use the Validate by File Upload tab to validate files stored on your local computer file
system.
• The Validate by Direct Input tab enables you to paste the contents of a file from your text
editor

Validating Your Web Content

• If the W3C Markup Validation Service encounters an error in your web page, it will provide
specific details (including the line numbers of the offending code).
• Validation not only informs you whether your pages are constructed properly, it also
assists you in finding and fixing problems before you post pages for the world to see.
The Scoop on HTML, XML, XHTML, and
HTML5
• Early Days of HTML
• Initially created for scientists to share structured information over the Internet.
• Later evolved into a general-purpose web publishing language.
• Introduction of graphical web browsers led to inconsistencies due to browser-specific
features.

• Challenges with HTML

• Different browsers implemented proprietary features, causing inconsistencies.
• Browsers had to guess page rendering, leading to unpredictable results.
• Efforts were made to standardize HTML to ensure consistency across platforms.

The Scoop on HTML, XML, XHTML, and

HTML5
• Introduction of XML (Extensible Markup Language)
• XML provides rules for structuring data consistently.
• Unlike HTML, XML is not limited to web pages; it can describe any kind of data.
• Allows for creating custom markup languages (e.g., BCCML for bottle cap collections).
The Scoop on HTML, XML, XHTML, and
HTML5
XML’s Role in Web Development
• XML helps bring order to the web by making HTML more structured.
• XML is not a replacement for HTML but helps refine its structure.
• The result of integrating XML principles into HTML led to the creation of XHTML.
Emergence of XHTML
• XHTML is a stricter version of HTML that follows XML rules.
• Ensures better compatibility and structure across different browsers.
• XHTML cleaned up HTML’s inconsistencies by enforcing strict syntax rules.

The Scoop on HTML, XML, XHTML, and

HTML5
• HTML5 vs. XHTML
• HTML5 is not a replacement for XHTML but a major revision of HTML 4.
• XHTML and HTML5 can coexist, and future browsers will support both.
• HTML5 introduces new features, but XHTML’s structured approach remains relevant.