What is the Internet and its function?

The Internet is a global network of

interconnected computer networks that
spans the entire planet. It allows for the
exchange of information,
communication, and the sharing of
resources among billions of devices and
users worldwide. The internet's primary
functions include:

1. Communication: The Internet enables various forms of communication, including email, instant messaging,
video conferencing, and social media. It allows people to connect with others globally in real time.
2. Information Retrieval: The internet is a vast repository of information. Users can access websites, search
engines, and online databases to find information on virtually any topic, from news and research to
entertainment and educational materials.
3. File Sharing: Users can share files, documents, images, videos, and other digital content through the internet.
File-sharing services, cloud storage, and peer-to-peer networks facilitate this function.
4. E-commerce: The internet has revolutionized commerce by enabling online shopping and electronic payments.
Businesses can operate online stores, and consumers can purchase products and services from anywhere in the
world.
5. Social Networking: Social media platforms like Facebook, Twitter, Instagram, and LinkedIn allow users to connect,
share updates, and interact with friends, family, and colleagues.
6. Entertainment: Streaming services deliver movies, TV shows, music, and games over the internet. This has
transformed the entertainment industry and provided on-demand access to a vast array of content.
7. Research and Education: Educational institutions, libraries, and online courses use the Internet to provide access
to educational resources and facilitate remote learning. Researchers can access academic journals, databases,
and collaborative tools.
8. Collaboration: The internet enables remote collaboration among individuals and teams. Tools like video
conferencing, cloud-based document sharing, and project management platforms support collaboration
regardless of geographical location.
9. Information Sharing and Social Causes: The Internet has been instrumental in raising awareness of social issues,
facilitating activism, and sharing information related to causes such as human rights, environmental
conservation, and public health.
10. Navigation and Mapping: Online maps and navigation services help users find directions, locate businesses, and
explore places of interest. GPS-enabled devices rely on internet connectivity for real-time updates.
 11. Email: Electronic mail (email) is a widely used method of communication over the Internet, allowing users to
send and receive messages, documents, and multimedia content.
12. Web Browsing: Web browsers like Chrome, Firefox, and Safari enable users to navigate websites, view web
pages, and access online services. Hyperlinks connect web pages and resources.
13. Search Engines: Search engines like Google, Bing, and Yahoo provide a means to discover information on the
web quickly. Users enter keywords, and the search engine returns relevant results.
14. Security and Privacy: The internet also plays a crucial role in security and privacy through encryption, secure
communication protocols, and privacy tools designed to protect users' data and online activities.
15. IoT (Internet of Things): The Internet facilitates the connection of everyday objects and devices to the Internet,
allowing them to collect and exchange data. This has applications in smart homes, healthcare, transportation,
and more.

In essence, the Internet serves as a global infrastructure that underpins numerous aspects of modern life, from
communication and commerce to education and entertainment. Its functions continue to expand as technology evolves,
enabling new possibilities and applications.

Evolution of Internet
The history of the internet is a complex and multifaceted story that spans several decades. It involves the contributions
of many individuals, organizations, and technological innovations. Here is a brief overview of the key milestones and
developments in the history of the Internet:

1. Early Concepts (1960s): The concept of a global computer network was first proposed in the 1960s. J.C.R.
Licklider of MIT, one of the first to envision such a system, wrote a series of memos discussing the "Intergalactic
Network" concept.
2. ARPANET (1969): The Advanced Research Projects Agency Network (ARPANET) is often considered the precursor
to the modern internet. It was created by the U.S. Department of Defense to facilitate communication between
researchers and universities. ARPANET went live on October 29, 1969, when UCLA connected to the Stanford
Research Institute.
3. Packet Switching (1970s): ARPANET adopted packet switching technology, which allowed data to be broken
down into smaller packets for more efficient transmission over the network.
4. TCP/IP Protocol (1970s): The Transmission Control Protocol (TCP) and Internet Protocol (IP) were developed in
the 1970s by Vint Cerf and Bob Kahn. TCP/IP became the standard for data transmission over the ARPANET and
eventually the internet.
5. Expansion and Growth (1980s): The ARPANET expanded rapidly throughout the 1980s, connecting universities
and research institutions across the United States. Other countries also started building their own networks.
6. Domain Name System (DNS) (1983): The DNS was introduced to replace the early Hosts.txt file, simplifying the
process of accessing websites by translating domain names into IP addresses.
7. Commercialization (1990s): The 1990s saw the emergence of commercial internet service providers (ISPs) and
the World Wide Web (WWW). Tim Berners-Lee's invention of the WWW in 1989 allowed users to access and
navigate web pages using hypertext links.
8. Browser Wars (1990s): The 1990s were marked by the "browser wars" between companies like Netscape and
Microsoft, as web browsers became the primary way people accessed the internet.
9. Dot-Com Bubble (Late 1990s): A speculative bubble in the stock market centered around internet-related
companies and startups, which eventually burst in the early 2000s.
10. Broadband and High-Speed Internet (2000s): The 2000s saw the widespread adoption of broadband internet,
enabling faster connections and multimedia content.
11. Social Media and Web 2.0 (2000s): The emergence of social media platforms like Facebook, Twitter, and YouTube
transformed the way people interacted online.
12. Mobile Internet and Smartphones (2000s and 2010s): The proliferation of smartphones and mobile internet
access led to a shift in how people accessed and used the internet.
13. Cloud Computing and IoT (2010s): Cloud computing services and the Internet of Things (IoT) became prominent,
enabling the storage and processing of vast amounts of data.
14. Net Neutrality and Privacy Concerns (2010s): Issues surrounding net neutrality, online privacy, and data security
gained attention and sparked debates and regulatory changes.
15. 5G and Future Developments (2020s and beyond): The rollout of 5G technology promises even faster and more
reliable internet connections, while emerging technologies like blockchain and artificial intelligence continue to
shape the future of the internet.

The history of the internet is an ongoing story of innovation, connectivity, and the ever-evolving ways in which
people and devices are connected worldwide. It has transformed nearly every aspect of society and continues to do
so as it evolves further.

Disadvantages of Internet
While the internet has brought about many benefits and advancements in various aspects of life, it also has its share
of drawbacks and disadvantages. Here are some of the cons of the internet:

1. Privacy Concerns: Online privacy is a major issue. Personal information is often collected and used by
companies and advertisers without users' consent. Data breaches and hacking incidents can lead to the
exposure of sensitive personal and financial information.
2. Cybersecurity Threats: The internet is rife with cyber threats, including viruses, malware, ransomware, and
phishing attacks that can compromise the security of devices and networks. Cyberattacks can result in data
loss, financial losses, and even damage to critical infrastructure.
3. Online Harassment and Bullying: The anonymity provided by the internet can lead to online harassment,
cyberbullying, and hate speech. Victims of online harassment often suffer emotional distress, and in severe
cases, it can lead to real-world harm.
4. Fake News and Misinformation: The spread of fake news and misinformation on the internet can mislead
and manipulate people. Social media platforms and websites can amplify false or misleading information,
leading to public confusion and distrust.
5. Addiction and Screen Time: Internet addiction is a growing concern, especially among young people.
Excessive screen time can lead to physical and mental health issues. Constant connectivity can also disrupt
sleep patterns and social relationships.
6. Isolation and Social Disconnection: While the internet allows for virtual connections, it can also contribute to
social isolation when people spend more time online than engaging in face-to-face interactions. It can lead
to a sense of loneliness and reduce the quality of real-life relationships.
 7. Online Scams and Fraud: Scammers use the internet to deceive people with fraudulent schemes, such as
phishing emails, advance-fee fraud, and online pyramid schemes. Many individuals have fallen victim to
online scams, resulting in financial losses.
8. Digital Divide: Not everyone has equal access to the internet, leading to a digital divide based on factors like
location, income, and education. Those without reliable internet access may face disadvantages in
education, employment, and accessing essential services.
9. Loss of Productivity: The internet can be a double-edged sword for productivity. While it provides access to
valuable information, it also offers countless distractions. Excessive use of social media and non-work-
related websites can reduce productivity in the workplace.
10. Content Inappropriate for Children: The internet contains a wide range of content, including explicit or
violent material that is not suitable for children. Parents and guardians may struggle to protect children from
exposure to harmful content online.
11. Environmental Impact: Data centers and the infrastructure that supports the internet consume significant
amounts of energy, contributing to environmental concerns.E-waste generated by discarded electronic
devices is also a growing problem.
12. Online Echo Chambers and Polarization: Algorithms used by social media platforms can create echo
chambers where individuals are exposed to content that aligns with their existing beliefs. This can contribute
to political polarization and a lack of exposure to diverse viewpoints.

It's important to note that the internet's drawbacks are not inherent to the technology itself but often result from
how it is used and regulated. Many of these issues can be mitigated through responsible online behavior, education,
and policy measures designed to protect users and their privacy.

Introduction to HTML
HTML Stands for Hypertext Markup Language
The language for building Web Pages
Describes the structure of Web pages using markup language
HTML elements are the building blocks of HTML pages
HTML elements are represented by HTML tags
Some of the Examples of HTML tags are:
<HTML></HTML>, <HEAD></HEAD>, <TITLE></TITLE>, <BODY></BODY>, <H1></H1>
<P></P>, <B></B>, <U></U>, <I></I> etc.

HTML Tags
HTML Tags are enclosed in the < and the > symbols.
It has two pairs, an Opening tag eg.<html> and a closing tag eg.
</html>.
A closing tag is followed by symbol ‘/’.
The <html> element defines the whole document.
It has a start tag <html> and an end tag </html>
HTML Tags Explained
The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains title of document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph
The <b> element defines the bold of text

HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
Example: <body BGCOLOR = “green”> changes the background of webpage to green color

Heading Tags
Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings,
which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds one line
before and one line after that heading.
Example
Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Heading Example</title>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>

</html>

Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an
opening <p> and a closing </p> tag as shown below in the example −
Example
Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Paragraph Example</title>
</head>

<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>

</html>

Line Break Tag

Whenever you use the <br /> element, anything following it starts from the next line. This tag is an example of
an empty element, where you do not need opening and closing tags, as there is nothing to go in between them.

The <br /> tag has a space between the characters br and the forward slash. If you omit this space, older browsers will
have trouble rendering the line break, while if you miss the forward slash character and just use <br> it is not valid in
XHTML.
Example
Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Line Break Example</title>
</head>

<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>

</html>

Centering Content
You can use <center> tag to put any content in the center of the page or any table cell.
Example
Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Centring Content Example</title>
</head>

<body>
 <p>This text is not in the center.</p>

<center>
<p>This text is in the center.</p>
</center>
</body>

</html>

Horizontal Lines
Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a line from the current
position in the document to the right margin and breaks the line accordingly.
For example, you may want to give a line between two paragraphs as in the given example below −
Example
Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Horizontal Line Example</title>
</head>

<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>

</html>

Again <hr /> tag is an example of the empty element, where you do not need opening and closing tags, as there is
nothing to go in between them.

The <hr /> element has a space between the characters hr and the forward slash. If you omit this space, older browsers
will have trouble rendering the horizontal line, while if you miss the forward slash character and just use <hr> it is not valid
in XHTML
Preserve Formatting
Sometimes, you want your text to follow the exact format of how it is written in the HTML document. In these cases, you
can use the preformatted tag <pre>.
Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting of the source document.
Example
Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Preserve Formatting Example</title>
</head>

<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
 </body>

</html>
Try using the same code without keeping it inside <pre>...</pre> tags

Nonbreaking Spaces
Suppose you want to use the phrase "12 Angry Men." Here, you would not want a browser to split the "12, Angry" and
"Men" across two lines −
An example of this technique appears in the movie "12 Angry Men."
In cases, where you do not want the client browser to break text, you should use a nonbreaking space
entity &nbsp; instead of a normal space. For example, when coding the "12 Angry Men" in a paragraph, you should use
something similar to the following code −
Example
Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Nonbreaking Spaces Example</title>
</head>

<body>
<p>An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p>
</body>

</html>
This will produce the following result −

HTML - Attributes

We have seen few HTML tags and their usage like heading tags <h1>, <h2>, paragraph tag <p> and other tags. We used
them so far in their simplest form, but most of the HTML tags can also have attributes, which are extra bits of information.

An attribute is used to define the characteristics of an HTML element and is placed inside the element's opening tag. All
attributes are made up of two parts − a name and a value

The name is the property you want to set. For example, the paragraph <p> element in the example carries an attribute
whose name is align, which you can use to indicate the alignment of paragraph on the page.

The value is what you want the value of the property to be set and always put within quotations. The below example
shows three possible values of align attribute: left, center and right.

Attribute names and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C)
recommends lowercase attributes/attribute values in their HTML 4 recommendation.

Example
Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Align Attribute Example</title>
</head>
 <body>
<p align = "left">This is left aligned</p>
<p align = "center">This is center aligned</p>
<p align = "right">This is right aligned</p>
</body>

</html>

Core Attributes
The four core attributes that can be used on the majority of HTML elements (although not all) are −

Id
Title
Class
Style
The Id Attribute
The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page. There are two
primary reasons that you might want to use an id attribute on an element −

If an element carries an id attribute as a unique identifier, it is possible to identify just that element and its content.

If you have two elements of the same name within a Web page (or style sheet), you can use the id attribute to distinguish
between elements that have the same name.

We will discuss style sheet in separate tutorial. For now, let's use the id attribute to distinguish between two paragraph
elements as shown below.

Example

<p id = "html">This para explains what is HTML</p>

<p id = "css">This para explains what is Cascading Style Sheet</p>
The title Attribute
The title attribute gives a suggested title for the element. They syntax for the title attribute is similar as explained for id
attribute −

The behavior of this attribute will depend upon the element that carries it, although it is often displayed as a tooltip when
cursor comes over the element or while the element is loading.

Example

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>The title Attribute Example</title>
</head>

<body>
<h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
</body>

</html>
Now try to bring your cursor over "Titled Heading Tag Example" and you will see that whatever title you used in your code
is coming out as a tooltip of the cursor.

The class Attribute

The class attribute is used to associate an element with a style sheet, and specifies the class of element. You will learn
more about the use of the class attribute when you will learn Cascading Style Sheet (CSS). So for now you can avoid it.

The value of the attribute may also be a space-separated list of class names. For example −

class = "className1 className2 className3"

The style Attribute
The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>The style Attribute</title>
</head>

<body>
<p style = "font-family:arial; color:#FF0000;">Some text...</p>
</body>

</html>

HTML Formatting Elements

Formatting elements were designed to display special types of text:

<b> - Bold text

<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text

The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

Example
I am Red
I am Blue
I am Big

<!DOCTYPE html>
<html>
<body>

<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>

</body>
</html>

The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.

You will learn more about CSS later in this tutorial.

Background Color
The CSS background-color property defines the background color for an HTML element.

Example
Set the background color for a page to powderblue:
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Background Color
You can set the background color for HTML elements:
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.
</p>

</body>
</html>

Text Color
You can set the color of text:
<!DOCTYPE html>
<html>
<body>
<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

HTML Images
In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute specifies the URL (web address) of the image:
<imgsrc="pic_mountain.jpg" alt="Mountain View" width= "340px" height="228px">
For Instance:

HTML Images
Use the HTML <img> element to define an image
Use the HTML src attribute to define the URL of the image
Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
Use the HTML width and height attributes to define the size of the image
Note: Loading images takes time. Large images can slow down your
page. Use images carefully.

HTLM List and Link

This chapter covers discussions on order list, unorder list and HTML link that can be connected on the same page, the
other website and email.

INTENDED LEARNING OUTCOME(S)

- Discuss what is HTML List (order and unorder list)
- Discuss what is HTML Link (same page, the other website and email)
- Demonstrate the functionality of HTML List and Link.

ENGAGE
Introduction.
A book has a data where we can find the whole content called as table of content. The composition of this is to give a glance what is
the book all about.

Link is connection and collection of the object or living things, wherein can be connection to the same kingdom or relation on the same
object.

Example of this is animals, they have different types that’s include Mammals, Birds, Reptiles, Amphibians, Fishes, Insects,
Crustaceans and Arachnids.

The same thing with HTML, ithas a list tag and Link tag that can be list the things you want and link to the other website, same page or
even in the email address.

What is HTML List

HTML lists allow web developers to group a set of related items in lists. ( A Glance of HTML List)
<!DOCTYPE html> <h2>An Ordered HTML List</h2>

<html>

<body> <ol>

<li>Coffee</li>

<h2>An Unordered HTML List</h2> <li>Tea</li>

<li>Milk</li>

<ul> </ol>

<li>Coffee</li>

<li>Tea</li> </body>

<li>Milk</li> </html>

</ul>

Unordered HTML List Ordered HTML List HTML Description Lists

An unordered list starts with the <ul> An ordered list starts with the <ol> tag. HTML also supports description
tag. Each list item starts with the <li> Each list item starts with the <li> tag. lists.
tag.

The list items will be marked with A description list is a list of terms,
The list items will be marked with numbers by default: with a description of each term.
bullets (small black circles) by default:

The <dl> tag defines the description

list, the <dt> tag defines the term
(name), and the <dd> tag describes
each term:
Unordered , Ordered and Description List HTML TAG Sample
<!DOCTYPE html> <!DOCTYPE html> <!DOCTYPE html>
<html> <html> <html>
<body> <body> <body>

<h2>An unordered HTML list</h2> <h2>An ordered HTML list</h2> <h2>A Description List</h2>

<ul> <ol> <dl>

<li>Coffee</li> <li>Coffee</li> <dt>Coffee</dt>
<li>Tea</li> <li>Tea</li> <dd>- black hot drink</dd>
<li>Milk</li> <li>Milk</li> <dt>Milk</dt>
</ul> </ol> <dd>- white cold drink</dd>
</dl>
</body> </body>
</html> </html> </body>
</html>
OUTPUT

HTML List Tags <li> Defines a list item

Tag Description <dl> Defines a description list
<ul> Defines an unordered list <dt> Defines a term in a description list
<ol> Defines an ordered list <dd> Describes the term in a description list

Unordered HTML List

The HTML <ul> tag defines an unordered (bulleted) list.
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:
Value Description
disc Sets the list item marker to a bullet
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked

<!DOCTYPE html>

<html>

<body>

<h2>Unordered List with Disc Bullets</h2>

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

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

</body>

</html>

<!DOCTYPE html>

<html>

<body>

<h2>Unordered List with Circle Bullets</h2>

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

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

</body>

</html>

<!DOCTYPE html>

<html>

<body>

<h2>Unordered List with Square Bullets</h2>

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

<li>Tea</li>

<li>Milk</li>

</ul>

</body>

</html>

<!DOCTYPE html>

<html>

<body>

<h2>Unordered List without Bullets</h2>

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

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

</body>

</html>

Nested HTML Lists

Lists can be nested (list inside list):
<!DOCTYPE html>

<html>

<body>

<h2>A Nested List</h2>

<p>Lists can be nested (list inside list):</p>

<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

</li>

<li>Milk</li>

</ul>

</body>

</html>

Ordered HTML List

The HTML <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

<!DOCTYPE html>

<html>

<body>

<h2>An ordered HTML list</h2>

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

</body>

</html>

Ordered HTML List - The Type Attribute

The type attribute of the <ol> tag, defines the type of the list item marker:

Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers

<!DOCTYPE html>

<html>

<body>

<h2>Ordered List with Numbers</h2>

<ol type="1">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

</body>

</html>

<!DOCTYPE html>

<html>

<body>

<h2>Ordered List with Letters</h2>

<ol type="A">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

</body>

</html>
<!DOCTYPE html>

<html>

<body>

<h2>Ordered List with Roman Numbers</h2>

<ol type="I">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

</body>

</html>

<!DOCTYPE html>

<html>

<body>

<h2>Ordered List with Lowercase Roman Numbers</h2>

<ol type="i">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

</body>

</html>

<!DOCTYPE html>

<html>

<body>

<h2>The start attribute</h2>

<p>By default, an ordered list will start counting from 1. Use the start
attribute to start counting from a specified number:</p>

<ol start="50">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

<ol type="I" start="50">

 <li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

</body>

</html>

<!DOCTYPE html>

<html>

<body>

<h2>A Nested List</h2>

<p>Lists can be nested (list inside list):</p>

<ol>

<li>Coffee</li>

<li>Tea

<ol>

<li>Black tea</li>

<li>Green tea</li>

</ol>

</li>

<li>Milk</li>

</ol>

</body>

</html>

HTML Links - Hyperlinks

Links are found in nearly all web pages. Links allow users to click their way from page to page.

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.
Note: A link does not have to be text. A link can be an image or any other HTML element!

HTML Links - The target Attribute

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window
<!DOCTYPE html>
<html>
<body>

<h2>The target Attribute</h2>

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!

</a>

<p>If target="_blank", the link will open in a new browser window or

tab.</p>

</body>
</html>

Absolute URLs vs. Relative URLs

Both examples above are using an absolute URL (a full web address) in the href attribute.

A local link (a link to a page within the same website) is specified with a relative URL (without the "https://www"
part):
<!DOCTYPE html>
<html>
<body>

<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

</body>
</html>
HTML Links - Use an Image as a Link
To use an image as a link, just put the <img> tag
inside the <a> tag:
<!DOCTYPE html>
<html>
<body>

<h2>Image as a Link</h2>

<p>The image below is a link. Try to click on it.</p>

<a href="default.asp"><imgsrc="smiley.gif" alt="HTML tutorial"

style="width:42px;height:42px;"></a>

</body>
</html>

Link to an Email Address

Use mailto: inside the href attribute to create a
link that opens the user's email program (to let
them send a new email):
<!DOCTYPE html>
<html>
<body>
<h2>Link to an Email Address</h2>
<p>To create a link that opens in the user's email program (to let them
send a new email), use mailto: inside the href attribute:</p>
<p><a href="mailto:[email protected]">Send email</a></p>
</body>
</html>

Button as a Link
To use an HTML button as a link, you have to
add some JavaScript code.
JavaScript allows you to specify what happens at
certain events, such as a click of a button:
<!DOCTYPE html>
<html>
<body>

<h2>Button as a Links</h2>

<p>Click the button to go to the HTML tutorial.</p>

<button onclick="document.location='default.asp'">HTML
Tutorial</button>

</body>
</html>

Link Titles
The title attribute specifies extra information about an element. The information is most often shown as a
tooltip text when the mouse moves over the element.
<!DOCTYPE html>
<html lang="en-US">
<body>

<h2>Link Titles</h2>
<p>The title attribute specifies extra information about an element. The
information is most often shown as a tooltip text when the mouse moves
over the element.</p>
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>

</body>
</html>

Create a Bookmark in HTML

Bookmarks can be useful if a web page is very long.
HTML links can be used to create bookmarks, so that readers can jump to specific parts of a web page.

To create a bookmark - first create the bookmark, then add a link to it.

When the link is clicked, the page will scroll down or up to the location with the bookmark.

Example
First, use the id attribute to create a bookmark:
<!DOCTYPE html>
<html>
<body>

<p><a href="#C4">Jump to Chapter 4</a></p>

<p><a href="#C10">Jump to Chapter 10</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains bablabla</p>
<h2>Chapter 2</h2>
<p>This chapter explains bablabla</p>
<h2>Chapter 3</h2>
<p>This chapter explains bablabla</p>
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains bablabla</p>
<h2>Chapter 5</h2>
<p>This chapter explains bablabla</p>
<h2>Chapter 6</h2>
<p>This chapter explains bablabla</p>
<h2>Chapter 7</h2>
<p>This chapter explains bablabla</p>
<h2>Chapter 8</h2>
<p>This chapter explains bablabla</p>
<h2>Chapter 9</h2>
<p>This chapter explains bablabla</p>
<h2 id="C10">Chapter 10</h2>
<p>This chapter explains bablabla</p>
<h2>Chapter 11</h2>
<p>This chapter explains bablabla</p>
<h2>Chapter 12</h2>
<p>This chapter explains bablabla</p>
</body>
</html>

HTLM Image and Table

This chapter covers discussions on Image and Table that can create a webpage with images and table.

INTENDED LEARNING OUTCOME(S)

- Discuss what is Image in HTML.
- Discuss what is Table in HTML
- Demonstrate the functionality of HTML Image and Table.

ENGAGE
Introduction.

Images are very important in a website because it can capture the eyes of the audience specially if this is an animated picture. Picture
can bring life.

Part 1 - What is HTML Image.

HTML Images
Images can improve the design and the appearance of a web page.
<!DOCTYPE html>

<html>

<body>

<h2>HTML Image</h2>

<img src="pic_trulli.jpg" alt="Trulli" width="500"

height="333">

</body>

</html>

HTML Images Syntax

The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the
referenced image.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:
 src - Specifies the path to the image
 alt - Specifies an alternate text for the image

The src Attribute

The required src attribute specifies the path (URL) to the image.
Note: When a web page loads; it is the browser, at that moment, that gets the image from a web server and inserts it into the page.
Therefore, make sure that the image actually stays in the same spot in relation to the web page, otherwise your visitors will get a
broken link icon. The broken link icon and the alt text are shown if the browser cannot find the image.
<!DOCTYPE html>
<html>
<body>

<h2>Alternative text</h2>

<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of
what the image contains:</p>

<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">

</body>
</html>

The alt Attribute

The required alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow
connection, an error in the src attribute, or if the user uses a screen reader).

HTML Image Tags

Tag Description
<img> Defines an image
<map> Defines an image map
<area> Defines a clickable area inside an image map
<picture> Defines a container for multiple image resources

Image Maps
With HTML image maps, you can create clickable areas on an image.
The HTML <map> tag defines an image map. An image map is an image with clickable areas. The areas are defined with one or more
<area> tags.

Try to click on the computer, phone, or the cup of coffee in the image below:
<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>

Create Image Map

Then, add a <map> element.

The <map> element is used to create an image map, and is linked to the image by using the required name attribute:
<map name="workmap">
The name attribute must have the same value as the <img>'s usemap attribute .
The Areas
Then, add the clickable areas.
A clickable area is defined using an <area> element.

Shape
You must define the shape of the clickable area, and you can choose one of these values:

 rect - defines a rectangular region

 circle - defines a circular region
 poly - defines a polygonal region
 default - defines the entire region
You must also define some coordinates to be able to place the clickable area onto the image.

Shape="rect"
The coordinates for shape="rect" come in pairs, one for the x-axis and one for the y-axis.

So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels from the top:

Selecting and clicking laptop Selecting and clicking cellphone Selecting and clicking coffee cup
 Shape="poly"
The shape="poly" contains several coordinate points, which creates a shape
formed with straight lines (a polygon).

This can be used to create any shape.

Like maybe a croissant shape!

How can we make the croissant in the image below become a clickable link?

We have to find the x and y coordinates for all edges of the croissant:

The coordinates come in pairs, one for the x-axis and one for the y-axis:

<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the croissant to go to a new page and read more about the topic:</p>

<img src="frenchfood.jpg" alt="French Food" usemap="#foodmap" width="450" height="675">

<map name="foodmap">
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,
322,40,259,103,161,128,147" alt="Croissant" href="croissant.htm">
</map>

</body>
</html>

Image Map and JavaScript

A clickable area can also trigger a JavaScript function.

Add a click event to the <area> element to execute a JavaScript function:

<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>

<p>Click on the cup of coffee to execute a JavaScript function:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
<area shape="circle" coords="337,300,44" onclick="myFunction()">
</map>

<script>
function myFunction() {
alert("You clicked the coffee cup!");
}
</script>

</body>
</html>

Background Image on a HTML element

A background image can be specified for almost any HTML element.
To add a background image on an HTML element, use the HTML style attribute and the CSS background-image property:
<!DOCTYPE html>
<html>
<body>

<h2>Background Image</h2>

<p>A background image for a div elememt:</p>

<div style="background-image: url('img_girl.jpg');">

You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>

<p>A background image for a p elememt:</p>

<p style="background-image: url('img_girl.jpg');">

By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</p>

</body>
</html>

Background Image on a Page

If you want the entire page to have a background image, you must specify the background image on the <body> element:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
</head>
<body>

<h2>Background Image</h2>

<p>By default, the background image will repeat itself if it is smaller than the element
where it is specified, in this case the body element.</p>

</body>
</html>
Background Repeat
If the background image is smaller than the element, the image will repeat itself, horizontally and vertically, until it reaches the end of
the element:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
</head>
<body>

<h2>Background Repeat</h2>

<p>By default, the background image will repeat itself if it is smaller than the element
where it is specified, in this case the body element.</p>

</body>
</html>

Background No Repeat – use the picture once

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
</head>
<body>

<h2>Background No Repeat</h2>

<p>You can avoid the image from being repeated by setting the background-repeat property to "no-
repeat".</p>

</body>
</html>

Background Cover
If you want the background image to cover the entire element, you can set the background-size property to cover.

Also, to make sure the entire element is always covered, set the background-attachment property to fixed:

This way, the background image will cover the entire element, with no stretching (the image will keep its original proportions):
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
<h2>Background Cover</h2>
<p>Set the background-size property to "cover" and the background image will cover the entire element, in this
case the body element.</p>
</body>
</html>

Background Stretch
If you want the background image to stretch to fit the entire element, you can set the background-size property to 100% 100%:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
</head>
<body>

<h2>Background Stretch</h2>

<p>Set the background-size property to "100% 100%" and the background image will be stretched to cover
the entire element, in this case the body element.</p>

</body>
</html>

Part 2 –What is Table

Define an HTML Table
HTML tables allow web developers to arrange data into rows and columns.
The <table> tag defines an HTML table.

Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is defined with a <td> tag.

 By default, the text in <th> elements are bold and centered.

 By default, the text in <td> elements are regular and left-aligned.
<!DOCTYPE html>
<html>
<body>
<h2>Basic HTML Table</h2>
<table style="width:50%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table></body></html>

HTML Tables

HTML Table - Add a Border

To add a border to a table, use the CSS border property:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Table With Border</h2>
<p>Use the CSS border property to add a border to the table.</p>
<table style="width:100%">
<tr>
<th>Firstname</th><th>Lastname</th><th>Age</th>
</tr>
<tr>
<td>Jill</td><td>Smith</td><td>50</td>
</tr>
<tr>
<td>Eve</td><td>Jackson</td><td>94</td>
</tr>
<tr>
<td>John</td> <td>Doe</td><td>80</td>
</tr>
</table>
</body>
</html>

HTML Table - Collapsed Borders

To let the borders collapse into one border, add the CSS border-collapse property:

Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

HTML Table - Add Cell Padding

Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
To set the padding, use the CSS padding property:

Example
th, td {
padding: 15px;
}

HTML Table - Left-align Headings

By default, table headings are bold and centered.
To left-align the table headings, use the CSS text-align property:
Example
th {
text-align: left;
}

HTML Table - Add Border Spacing

Border spacing specifies the space between the cells.

To set the border spacing for a table, use the CSS border-spacing property:
table {
border-spacing: 5px;
}
HTML Table - Cell that Span Many Columns
To make a cell span more than one column, use the colspan attribute:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>

<h2>Cell that spans two columns</h2>

<p>To make a cell span more than one column, use the colspan attribute.</p>

<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
</body>
</html>

HTML Table - Cell that Span Many Rows

To make a cell span more than one row, use the rowspan attribute:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two rows</h2>
<p>To make a cell span more than one row, use the rowspan attribute.</p>
<table style="width:30%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
 <td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>

</body>
</html>

HTML Table - Add a Caption

To add a caption to a table, use the <caption> tag:
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>

A Special Style for One Table

To define a special style for one particular table, add an id attribute to the table:

<!DOCTYPE html> <h2>Styling Tables</h2>

<html> <table id="t01">

<head> <tr>

<style> <th>Firstname</th>

table, th, td { <th>Lastname</th>

border: 1px solid black; <th>Age</th>

border-collapse: collapse; </tr>

} <tr>

th, td { <td>Jill</td>

padding: 15px; <td>Smith</td>

text-align: left; <td>50</td>

} </tr>

#t01 { <tr>

width: 30%; <td>Eve</td>

background-color: #f1f1c1; <td>Jackson</td>

} <td>94</td>

</style> </tr>

</head> <tr>

<body> <td>John</td>

<td>Doe</td>

<td>80</td>
 </tr>

</table>

</body>

</html>

Marquee and Frames

(version 4 of HTML not support in 5)

HTLM Marquee and Frames

This chapter covers discussions on Marquee and Frames

INTENDED LEARNING OUTCOME(S)

- Discuss what is Marquee
- Discuss what is Frames
- Demonstrate the functionality of HTML Marquee and Frames

Introduction

- Both HTML Marquee and Frames are not support of HTML 5 , this is only for version 4

An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically down your webpage depending on the
settings. This is created by using HTML <marquees> tag.

Note − The <marquee> tag deprecated in HTML5. Do not use this element, instead you can use JavaScript and CSS to create such
effects.

Syntax
A simple syntax to use HTML <marquee> tag is as follows −
<marquee attribute_name = "attribute_value"....more attributes>
One or more lines or text message or image
</marquee>

The <marquee> Tag Attributes

Following is the list of important attributes which can be used with <marquee> tag.
Sr.No Attribute & Description
 1 width
This specifies the width of the marquee. This can be a value like 10 or 20% etc.

2 height
This specifies the height of the marquee. This can be a value like 10 or 20% etc.

3 direction
This specifies the direction in which marquee should scroll. This can be a value like up, down, left or right.

4 behavior
This specifies the type of scrolling of the marquee. This can have a value like scroll, slide and alternate.

5 scrolldelay
This specifies how long to delay between each jump. This will have a value like 10 etc.

6 scrollamount
This specifies the speed of marquee text. This can have a value like 10 etc.

7 loop
This specifies how many times to loop. The default value is INFINITE, which means that the marquee loops
endlessly.

8 bgcolor
This specifies background color in terms of color name or color hex value.

9 hspace
This specifies horizontal space around the marquee. This can be a value like 10 or 20% etc.

10 vspace
This specifies vertical space around the marquee. This can be a value like 10 or 20% etc.

<!DOCTYPE html>
<html>

<head>
<title>HTML marquee Tag</title>
</head>

<body>
<marquee>This is basic example of marquee</marquee>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
<title>HTML marquee Tag</title>
 </head>

<body>
<marquee width = "50%">This example will take only 50% width</marquee>
</body>

</html>
===============================================
<!DOCTYPE html>
<html>

<head>
<title>HTML marquee Tag</title>
</head>

<body>
<marquee direction = "right">This text will scroll from left to right</marquee>
</body>

</html>
===============================================
<!DOCTYPE html>
<html>

<head>
<title>HTML marquee Tag</title>
</head>

<body>
<marquee direction = "up">This text will scroll from bottom to up</marquee>
</body>

</html>
==============================================

FRAMES

HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document.
A collection of frames in the browser window is known as a frameset. The window is divided into frames in a similar way the tables are
organized: into rows and columns.

Disadvantages of Frames
There are few drawbacks with using frames, so it's never recommended to use frames in your webpages −

Some smaller devices cannot cope with frames often because their screen is not big enough to be divided up.

Sometimes your page will be displayed differently on different computers due to different screen resolution.

The browser's back button might not work as the user hopes.

There are still few browsers that do not support frame technology.

Creating Frames
 To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag defines, how to divide the window into
frames. The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines vertical frames. Each frame is
indicated by <frame> tag and it defines which HTML document shall open into the frame.

Note − The <frame> tag deprecated in HTML5. Do not use this element.

<!DOCTYPE html>
<html>

<head>
<title>HTML Frames</title>
</head>

<frameset rows = "10%,80%,10%">

<frame name = "top" src = "https://www.tutorialspoint.com/html/top_frame.htm" />
<frame name = "main" src = "https://www.tutorialspoint.com/html/main_frame.htm" />
<frame name = "bottom" src = "https://www.tutorialspoint.com/html/bottom_frame.htm" />

<noframes>
<body>Your browser does not support frames.</body>
</noframes>

</frameset>

</html>
========================================

<!DOCTYPE html>
<html>

<head>
<title>HTML Frames</title>
</head>

<frameset cols = "25%,50%,25%">

<frame name = "left" src = "/html/top_frame.htm" />
<frame name = "center" src = "/html/main_frame.htm" />
<frame name = "right" src = "/html/bottom_frame.htm" />

<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>

</html>

The <frameset> Tag Attributes

Following are important attributes of the <frameset> tag −

r.No Attribute & Description

 cols
Specifies how many columns are contained in the frameset and the size of each column. You can specify the width of each
column in one of the four ways −
Absolute values in pixels. For example, to create three vertical frames, use cols = "100, 500, 100".
1 A percentage of the browser window. For example, to create three vertical frames, use cols = "10%, 80%, 10%".
Using a wildcard symbol. For example, to create three vertical frames, use cols = "10%, *, 10%". In this case wildcard takes
remainder of the window.
As relative widths of the browser window. For example, to create three vertical frames, use cols = "3*, 2*, 1*". This is an
alternative to percentages. You can use relative widths of the browser window. Here the window is divided into sixths: the first
column takes up half of the window, the second takes one third, and the third takes one sixth.

rows
2 This attribute works just like the cols attribute and takes the same values, but it is used to specify the rows in the frameset. For
example, to create two horizontal frames, use rows = "10%, 90%". You can specify the height of each row in the same way as
explained above for columns.

border
3 This attribute specifies the width of the border of each frame in pixels. For example, border = "5". A value of zero means no
border.

frameborder
4 This attribute specifies whether a three-dimensional border should be displayed between frames. This attribute takes value either
1 (yes) or 0 (no). For example frameborder = "0" specifies no border.

framespacing
5 This attribute specifies the amount of space between frames in a frameset. This can take any integer value. For example
framespacing = "10" means there should be 10 pixels spacing between each frames.

The <frame> Tag Attributes

Following are the important attributes of <frame> tag −

r.No Attribute & Description

src
1 This attribute is used to give the file name that should be loaded in the frame. Its value can be any URL. For example,
src = "/html/top_frame.htm" will load an HTML file available in html directory.
 name
2 This attribute allows you to give a name to a frame. It is used to indicate which frame a document should be loaded
into. This is especially important when you want to create links in one frame that load pages into an another frame, in
which case the second frame needs a name to identify itself as the target of the link.

frameborder
3 This attribute specifies whether or not the borders of that frame are shown; it overrides the value given in the
frameborder attribute on the <frameset> tag if one is given, and this can take values either 1 (yes) or 0 (no).

marginwidth
4 This attribute allows you to specify the width of the space between the left and right of the frame's borders and the
frame's content. The value is given in pixels. For example marginwidth = "10".

marginheight
5 This attribute allows you to specify the height of the space between the top and bottom of the frame's borders and its
contents. The value is given in pixels. For example marginheight = "10".

noresize
6 By default, you can resize any frame by clicking and dragging on the borders of a frame. The noresize attribute
prevents a user from being able to resize the frame. For example noresize = "noresize".

scrolling
7 This attribute controls the appearance of the scrollbars that appear on the frame. This takes values either "yes", "no"
or "auto". For example scrolling = "no" means it should not have scroll bars.

longdesc
8 This attribute allows you to provide a link to another page containing a long description of the contents of the frame.
For example longdesc = "framedescription.htm"

<!DOCTYPE html>
<html>

<head>
<title>HTML Target Frames</title>
</head>

<frameset cols = "200, *">

<frame src = "/html/menu.htm" name = "menu_page" />
<frame src = "/html/main.htm" name = "main_page" />
 <noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>

</html>
==============================
<!DOCTYPE html>
<html>

<body bgcolor = "#4a7d49">

<a href = "http://www.google.com" target = "main_page">Google</a>
<br />
<br />

<a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>

<br />
<br />

<a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>

</body>

</html>
==============================
<!DOCTYPE html>
<html>

<body bgcolor = "#b5dcb3">

<h3>This is main page and content from any link will be displayed here.</h3>
<p>So now click any link and see the result.</p>
</body>

</html>

Now you can try to click links available in the left panel and see the result. The targetattribute can also take one of the following values
−

Sr.No Option & Description

_self
1
Loads the page into the current frame.

_blank
2
Loads a page into a new browser window. Opening a new window.

_parent
3
Loads the page into the parent window, which in the case of a single frameset is the main browser window.
 _top
4
Loads the page into the browser window, replacing any current frames.

targetframe
5
Loads the page into a named targetframe.

HTML Forms
HTML Forms are required, when you want to collect some data from the site visitor. For example, during user registration you would
like to collect information such as name, email address, credit card, etc.
A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The
back-end application will perform required processing on the passed data based on defined business logic inside the application.
There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.
The HTML <form> tag is used to create an HTML form and it has following syntax −
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>

Form Attributes

Apart from common attributes, following is a list of the most frequently used form attributes −

Sr.No Attribute & Description

1 action
Backend script ready to process your passed data.

2 method
Method to be used to upload data. The most frequently used are GET and POST methods.

3 target
Specify the target window or frame where the result of the script will be displayed. It takes values like _blank, _self,
_parent etc.

4 enctype
You can use the enctype attribute to specify how the browser encodes the data before it sends it to the server.
Possible values are −
application/x-www-form-urlencoded − This is the standard method most forms use in simple scenarios.
mutlipart/form-data − This is used when you want to upload binary data in the form of files like image, word file etc.

Note − You can refer to Perl & CGI for a detail on how form data upload works.
HTML Form Controls

There are different types of form controls that you can use to collect data using HTML form −

 Text Input Controls

 Checkboxes Controls
 Radio Box Controls
 Select Box Controls
 File Select boxes
 Hidden Controls
 Clickable Buttons
 Submit and Reset Button

Text Input Controls

There are three types of text input used on forms −

 Single-line text input controls − This control is used for items that require only one line of user input, such as search boxes
or names. They are created using HTML <input> tag.
 Password input controls − This is also a single-line text input but it masks the character as soon as a user enters it. They
are also created using HTMl <input> tag.
 Multi-line text input controls − This is used when the user is required to give details that may be longer than a single
sentence. Multi-line input controls are created using HTML <textarea> tag.

Single-line text input controls

This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML
<input> tag.
Example
Here is a basic example of a single-line text input used to take first name and last name –

<!DOCTYPE html>
<html>

<head>
<title>Text Input Control</title>
</head>

<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>

</html>
 Attributes

Following is the list of attributes for <input> tag for creating text field.

Sr.No Attribute & Description

1 type
Indicates the type of input control and for text input control it will be set to text.

2 name
Used to give a name to the control which is sent to the server to be recognized and get the value.

3 value
This can be used to provide an initial value inside the control.

4 size
Allows to specify the width of the text-input control in terms of characters.

5 maxlength
Allows to specify the maximum number of characters a user can enter into the text box.

Password input controls

This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTML <input>tag
but type attribute is set to password.
Example
Here is a basic example of a single-line password input used to take user password −
<!DOCTYPE html>
<html>

<head>
<title>Password Input Control</title>
</head>

<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
</form>
</body>

</html>

<form method="get">
<label>Name:
<input name="submitted-name" autocomplete="name" />
</label>
<button>Save</button>
</form>

<!-- Form which will send a POST request to the current URL -->
<form method="post">
<label>Name:
<input name="submitted-name" autocomplete="name" />
</label>
<button>Save</button>
</form>

<!-- Form with fieldset, legend, and label -->

<form method="post">
<fieldset>
<legend>Title</legend>
<label><input type="radio" name="radio" /> Select me</label>
</fieldset>
</form>

Attributes

Following is the list of attributes for <input> tag for creating password field.

Sr.No Attribute & Description

1 type
Indicates the type of input control and for password input control it will be set to password.

2 name
Used to give a name to the control which is sent to the server to be recognized and get the value.

3 value
This can be used to provide an initial value inside the control.

4 size
Allows to specify the width of the text-input control in terms of characters.

5 maxlength
Allows to specify the maximum number of characters a user can enter into the text box.

Multiple-Line Text Input Controls

This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created
using HTML <textarea> tag.
Example
Here is a basic example of a multi-line text input used to take item description −
<!DOCTYPE html>
<html>

<head>
<title>Multiple-Line Input Control</title>
 </head>

<body>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>
</body>

</html>

Attributes

Following is the list of attributes for <textarea> tag.

Sr.No Attribute & Description

1 name
Used to give a name to the control which is sent to the server to be recognized and get the value.

2 rows
Indicates the number of rows of text area box.

3 cols
Indicates the number of columns of text area box

Checkbox Control

Checkboxes are used when more than one option is required to be selected. They are also created using HTML <input> tag but type
attribute is set to checkbox..
Example
Here is an example HTML code for a form with two checkboxes −
<!DOCTYPE html>
<html>

<head>
<title>Checkbox Control</title>
</head>

<body>
<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
</body>

</html>
Attributes

Following is the list of attributes for <checkbox> tag.

Sr.No Attribute & Description

1 type
Indicates the type of input control and for checkbox input control it will be set to checkbox..

2 name
Used to give a name to the control which is sent to the server to be recognized and get the value.

3 value
The value that will be used if the checkbox is selected.

4 checked
Set to checked if you want to select it by default.

Radio Button Control

Radio buttons are used when out of many options, just one option is required to be selected. They are also created using HTML
<input> tag but type attribute is set to radio.
Example
Here is example HTML code for a form with two radio buttons −
<!DOCTYPE html>
<html>

<head>
<title>Radio Box Control</title>
</head>

<body>
<form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
</body>

</html>

Attributes

Following is the list of attributes for radio button.

Sr.No Attribute & Description

1 type
Indicates the type of input control and for checkbox input control it will be set to radio.
 2 name
Used to give a name to the control which is sent to the server to be recognized and get the value.

3 value
The value that will be used if the radio box is selected.

4 checked
Set to checked if you want to select it by default.

Select Box Control

A select box, also called drop down box which provides option to list down various options in the form of drop down list, from where a
user can select one or more options.
Example
Here is example HTML code for a form with one drop down box
<!DOCTYPE html>
<html>

<head>
<title>Select Box Control</title>
</head>

<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>

</html>

Attributes

Following is the list of important attributes of <select> tag −

Sr.No Attribute & Description

1 name
Used to give a name to the control which is sent to the server to be recognized and get the value.

2 size
This can be used to present a scrolling list box.

3 multiple
If set to "multiple" then allows a user to select multiple items from the menu.

Following is the list of important attributes of <option> tag −

 Sr.No Attribute & Description

1 value
The value that will be used if an option in the select box box is selected.

2 selected
Specifies that this option should be the initially selected value when the page loads.

3 label
An alternative way of labeling options

File Upload Box

If you want to allow a user to upload a file to your web site, you will need to use a file upload box, also known as a file select box. This
is also created using the <input> element but type attribute is set to file.
Example
Here is example HTML code for a form with one file upload box −
<!DOCTYPE html>
<html>

<head>
<title>File Upload Box</title>
</head>

<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>

</html>

Attributes

Following is the list of important attributes of file upload box −

Sr.No Attribute & Description

1 name
Used to give a name to the control which is sent to the server to be recognized and get the value.

2 accept
Specifies the types of files that the server accepts.

Button Controls

There are various ways in HTML to create clickable buttons. You can also create a clickable button using <input>tag by setting its type
attribute to button. The type attribute can take the following values −
 Sr.No Type & Description

1 submit
This creates a button that automatically submits a form.

2 reset
This creates a button that automatically resets form controls to their initial values.

3 button
This creates a button that is used to trigger a client-side script when the user clicks that button.

4 image
This creates a clickable button but we can use an image as background of the button.
Example
Here is example HTML code for a form with three types of buttons −
<!DOCTYPE html>
<html>

<head>
<title>File Upload Box</title>
</head>

<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
</form>
</body>

</html>

Hidden Form Controls

Hidden form controls are used to hide data inside the page which later on can be pushed to the server. This control hides inside the
code and does not appear on the actual page. For example, following hidden form is being used to keep current page number. When a
user will click next page then the value of hidden control will be sent to the web server and there it will decide which page will be
displayed next based on the passed current page.
Example
Here is example HTML code to show the usage of hidden control −
<!DOCTYPE html>
<html>

<head>
<title>File Upload Box</title>
</head>

<body>
 <form>
<p>This is page 10</p>
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>

</html>

HTML Styles – CSS

This chapter covers discussions on HTML Styles – CSS

INTENDED LEARNING OUTCOME(S)

- Discuss what is HTML Styles – CSS
- Discuss what is HTML – CSS in different HTML Tags
- Demonstrate the functionality of HTML Styles -CSS

ENGAGE
Introduction.

To help build highly interactive online pages, CSS is strongly recommended due to its importance in providing greater options in the
design process. When marketing products and services, web design plays a vital part; a site should be created in a manner that will
draw potential customers to explore and revisit a website more often. Many Texas web design firms are developing and enhancing
websites through the use of CSS as this is a great form of web development.

Part 1 - What is HTML Style -CSS

CSS stands for Cascading Style Sheets.

CSS saves a lot of work. It can control the layout of multiple web pages all at once.
What is CSS?
Cascading Style Sheets (CSS) is used to format the layout of a webpage.

With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out,
what background images or background colors are to be used, different displays for different devices and screen sizes, and much
more!
Tip: The word cascading means that a style applied to a parent element will also apply to all children elements within the parent. So, if you set the color of the
body text to "blue", all headings, paragraphs, and other text elements within the body will also get the same color (unless you specify something else)!

CSS Syntax
A CSS rule-set consists of a selector and a declaration block:

CSS selector

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.

Using CSS
CSS can be added to HTML documents in 3 ways:

 Inline - by using the style attribute inside HTML elements

 Internal - by using a <style> element in the <head> section
 External - by using a <link> element to link to an external CSS file

The most common way to add CSS, is to keep the styles in external CSS files. However, in this tutorial we will use inline and internal
styles, because this is easier to demonstrate, and easier for you to try it yourself.

Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the <h1> element to blue, and the text color of the <p> element to red:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
</html>

Internal CSS
An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within a <style> element.

The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text color of ALL the <p> elements
to red. In addition, the page will be displayed with a "powderblue" background color:

Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

<!DOCTYPE html> table id="t01">

<html> <tr>
<head> <th>Firstname</th>
<style> <th>Lastname</th>
table, th, td { <th>Age</th>
border: 1px solid black; </tr>
border-collapse: collapse; <tr>
} <td>Jill</td>
th, td { <td>Smith</td>
padding: 15px; <td>50</td>
text-align: left; </tr>
} <tr>
#t01 { <td>Eve</td>
width: 100%; <td>Jackson</td>
background-color: #f1f1c1; <td>94</td>
} </tr>
</style> <tr>
</head> <td>John</td>
<body> <td>Doe</td>
<td>80</td>
</tr>
</table>

</body>
 </html>

External CSS
An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the <head> section of each HTML page:

Example

The main file… Filename called by the main progam. Styles.css

<!DOCTYPE html>
<html>
<head> body {
<link rel="stylesheet" href="styles.css"> background-color: powderblue;
</head> }
<body> h1 {
color: blue;
<h1>This is a heading</h1> }
<p>This is a paragraph.</p> p{
color: red;
</body> }
</html>

CSS Colors, Fonts and Sizes

Here, we will demonstrate some commonly used CSS properties. You will learn more about them later.

 The CSS color property defines the text color to be used.

 The CSS font-family property defines the font to be used.
 The CSS font-size property defines the text size to be used.

Example
Use of CSS color, font-family and font-size properties:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue; font-family: verdana; font-size: 300%;
}
p{
color: red; font-family: courier; font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Other CSS application in HTML.

CSS Border
The CSS border property defines a border around an HTML element.

Tip: You can define a border for nearly all HTML elements.

Example
Use of CSS border property:
 <!DOCTYPE html> <body>
<html> <h1>This is a heading</h1>
<head> <p>This is a paragraph.</p>
<style> <p>This is a paragraph.</p>
p{ <p>This is a paragraph.</p>
border: 2px solid powderblue; </body>
} </html>
</style>
</head>

CSS Padding
The CSS padding property defines a padding (space) between the text and the border.
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 2px solid powderblue;
padding: 30px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

CSS Margin
The CSS margin property defines a margin (space) outside the border.
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 2px solid powderblue;
margin: 50px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

Multiple Style Sheets

If some properties have been defined for the same selector (element) in different style sheets, the value from the last read
style sheet will be used.

Assume that an external style sheet has the following style for the <h1> element:
h1 {
color: navy;
}

Then, assume that an internal style sheet also has the following style for the <h1> element:
h1 {
color: orange;
}

Example
If the internal style is defined after the link to the external style sheet, the <h1> elements will be "orange":
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>

</body>
</html>

Example
However, if the internal style is defined before the link to the external style sheet, the <h1> elements will be "navy":
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>

</body>
</html>

ASSESS:

Quiz.
Identification: Identify the right term for each of the question.
1. CSS stands for Cascading Style Sheets.
A. True
B. False
ANSWER: A

2. It is used to format the layout of a webpage.

A. CSS
B. CCS
C. HTML
D. JAVASCRIPT
ANSWER: A

3. It is by using the style attribute inside HTML elements

A. Inline
B. Internal
C. External
D. Within
ANSWER: A

4. It is by using a <style> element in the <head> section

A. Inline
B. Internal
C. External
D. Multiple Style Sheets
ANSWER: B

5. It is by using a <link> element to link to an external CSS file

A. Inline
B. Internal
C. External
D. Within
ANSWER: C

6. It is a CSS that defines a margin space outside the border.

A. CSS Margin
B. CSS Padding
C. CSS border
D. CSS text color, style and size
ANSWER: A

7. It is a CSS that defines a padding space between the text and the border.
A. CSS Margin
B. CSS Padding
C. CSS border
D. CSS text color, style and size
ANSWER: B

8. It is a CSS that defines a border around an HTML element.

A. CSS Margin
B. CSS Padding
C. CSS border
D. CSS text color, style and size
ANSWER: C

9. It is a CSS color defines the text color, font-family and font-size for a text.
A. CSS Margin
B. CSS Padding
C. CSS border
D. CSS text color, style and size
ANSWER: D

10. It is a properties that defined same selector in different style sheets.

A. Inline
B. Internal
C. External
D. Multiple Style Sheets
ANSWER: D

ACTIVITY

Create a CSS – table that will have the same background color for every option
in the menu.
References
 https://www.w3schools.com/
 W3schools. Com

 TutorialRepublic
 https://www.tutorialrepublic.com/html-tutorial/html-lists.php

 tutorialspoints
 https://www.tutorialspoint.com/html/html_lists.htm

 github
 https://webplatform.github.io/docs/guides/html_lists/

https://www.w3schools.com/css/css_intro.asp