Introduction to Computer

science
JPNS 21582
Objective of the Course
❖ To gain an idea about network
❖ To work on network
❖ To get an ability to fix some network issues

2
What is a network?
❖ A network is two or more computers (or other electronic devices)
that are connected together, usually by cables or Wi-Fi.
❖ Some computer networks will have a server. A server is a powerful
computer that often acts as a central hub for services in a network,
eg emails, internet access and file storage.
❖ Each computer connected to a server is called a client.
❖ A computer that is not connected to a network is called a
standalone computer.

3
Types of network
Networks are categorized into 2 types base on their geographical location

❖ Local area network (LAN)

❖ Wide area network (WAN)

4
Local area network (LAN)
● A local area network is when computers or devices are connected
together over a small geographical area, such as within a home, a
building or one site. A LAN can be created to share data or hardware
such as a printer, or to share an internet connection.

Home networks
Home networks are a simple LAN that use a broadband router to connect
devices, either via cables or wirelessly. Such devices include laptops,
printers, smartphones, tablets, game consoles, and smart devices such as
TVs, speakers, central heating systems, doorbells and fridges.

5
Wide area network (WAN)

● A wide area network is when computers or devices

are connected together over a large geographical
area.
● For example, a company with an office in London and
another in Beijing would use a WAN to allow the
employees to share one network.
● Some companies will connect a number of LANs in
different areas together to create a WAN. The biggest
WAN we know is the internet.
● It is called a wide-area network because it spans
beyond a single building or large campus to include
multiple locations spread across a specific
geographic area, or even the world.

6
Usage of Networks
● User access control.
Centralized management for users and for network resources

● Information storing and sharing

Computers allow users to create and manipulate information. Information takes on a life of its own on a network. The network
provides both a place to store the information and mechanisms to share that information with other network users.

● Workgroup Computing
Collaborative software allows many users to work on a document or project concurrently. For example, educators located at
various schools within a county could simultaneously contribute their ideas about new curriculum standards to the same
document, spreadsheets, or website.

● Flexible Access.
School networks allow students to access their information from connected devices throughout the school. Students can begin an
assignment in their classroom, save part of it on a public access area of the network, then go to the media center after school to
finish their work. Students can also work cooperatively through the network.

● Computing resources.
The school can provide access to special purpose computing devices which individual users would not normally own. For
example, a school network might have high-speed high quality printers strategically located around a campus for instructor or
student use.

7
Network Related issues
● Expensive to Install.
Large networks can carry hefty price tags. Cabling, network cards, routers, bridges, firewalls, wireless access points,
and software can get expensive, and the installation would certainly require the services of technicians.

● Requires Administrative Time.

Proper maintenance of a network requires considerable time and expertise.

● Servers Fail.
If the files server "goes down" the entire network may come to a halt.

● Connectivity Issues.
Broken Cables, Poor Signal etc

● Security and compliance.

High risk of unauthorized access and disturbances

8
IP Address
● An "IP address" in networking refers to a unique numerical identifier assigned to every device
connected to a network. which allows devices to communicate with each other by specifying their
location and enabling data transfer between them
● The full range of IP addresses can go from 0.0.0.0 to 255.255.255.255.

9
Types of IP Address - Base on Scope
Private IP Address
● A private IP address is a range of non-internet facing IP addresses used in an
internal network. (LAN)
● Private IP addresses are provided by network devices, such as routers

Public IP Address
● A public IP address is a unique numerical label assigned to each device
connected to the Internet, allowing for the identification and communication
between devices on a global scale.

10
Types of IP Address - Base on lifetime
Dynamic IP address

A dynamic IP address is an IP address that changes over

time and is assigned to a device when it connects to a
network.
How it works
● When a device connects to the internet, the router pulls an IP
address from a pool of available addresses.
● When the device disconnects, the IP address is returned to the pool
to be used by another device.
● The device may receive the same IP address multiple times, but this
is not guaranteed.

11
Types of IP Address - Base on lifetime
Static IP Address

A "static IP address" is an internet

protocol (IP) address assigned to a
device that remains constant over
time,

A Dynamic Host Configuration Protocol (DHCP) server is a network

device that assigns IP addresses to devices on a network.

12
13
How to find your public IP Address
To find your public IP address, simply open a web browser and visit a website like
"whatismyip.com" or "whatsmyip.org"; the website will automatically detect and
display your public IP address on the page.

Note

Your "private" IP address, which is used within your local network, is different from
your public IP address that is visible to the internet.

14
How to find your Private IP Address
To find your private IP address on a Windows
computer,

● open the Command Prompt by

searching for "cmd" and typing "ipconfig"
- your private IP address will be listed
next to "IPv4 Address" in the results;
● on a Mac, access System Preferences >
Network to view your private IP address.

15
What is IPv6?

● IPv6 (Internet Protocol version 6) is the latest version of the Internet Protocol (IP). It's designed
to support the growing number of connected devices and improve network traffic routing.
● IPv6 was designed by the Internet Engineering Task Force (IETF) in December 1998.
● IPv6 is written as a group of 8 hexadecimal numbers separated by colon (:).

16
IPv4 vs IPv6

17
Networking Devices
Access Point

● Access point (AP) is a device that

allows wireless devices to connect
to a wired network.
● It acts as a bridge between the
devices and the network.

18
Modem
● A modem is a hardware device
that connects computers to the
internet by converting digital
signals into analog signals.
● It also converts analog signals
back to digital signals.

19
Firewalls
● A firewall is a network security device
designed to monitor, filter, and control
incoming and outgoing network traffic
based on predetermined security rules.
● The primary purpose of a firewall is to
establish a barrier between a trusted
internal network and untrusted external
networks.

20
Router
a device that connects multiple networks together,
directing data packets between them by analyzing their
destination IP addresses and choosing the most
efficient route to send them

essentially acting as a dispatcher that manages traffic

between different networks and allows multiple devices
to access the internet through a single connection.

21
How Data Transfer in Network
❖ Breaking down information into smaller units called packets
❖ They are then sent across the network using protocols like TCP/IP,
❖ At the destination where they are reassembled to form the original data;

22
Key points about data transfer in a network:
❖ Packet Switching:
➢ The process of dividing data into packets, each containing the source and destination
information, allowing them to travel independently through the network and potentially take
different routes to reach the destination.
❖ Protocols:
➢ Protocols like TCP (Transmission Control Protocol) and IP (Internet Protocol) govern how data
is formatted, addressed, and routed across the network, ensuring reliable delivery.
❖ Routers:
➢ Network devices that analyze packet headers to determine the best route to send packets
towards their destination.
❖ Switches:
➢ Devices that connect devices within a local network and efficiently direct packets based on
their MAC addresses.

23
Network Protocol
A "protocol" is a set of established rules or
procedures that govern how data is transmitted
and received between devices.

Essentially acting as a standardized

communication guideline to ensure smooth
information exchange within a network or
system.

24
25
Common network protocols
Transmission Control Protocol (TCP): A connection-oriented protocol that ensures data
packets are delivered in order and without duplication
Internet Protocol (IP): Helps route data packets across networks
File Transfer Protocol (FTP): A client-server protocol that allows users to transfer files between
hosts
Hypertext Transfer Protocol (HTTP): Defines how data is transmitted over the internet and how
browsers and web servers respond to commands
Secure Socket Shell (SSH): Provides secure access to a computer, even if it's on an unsecured
network
Short Message Service (SMS): Allows users to send and receive text messages over cellular
networks

26
Hypertext Transfer Protocol (HTTP)
Set of rules that govern how web browsers and web servers communicate.

It's the foundation of the World Wide Web and one of the most common protocols
on the internet.

27
How HTTP works

❖ A user's browser sends an HTTP request to a web server.

❖ The web server responds with an HTTP response.
❖ The browser and server exchange data as plaintext.

28
HTTP features
❖ Client-server model: The client initiates requests, and the server responds.
❖ Stateless: The server doesn't keep session data between requests, but
cookies can add state.
❖ Extensible: HTTP can be used for more than just fetching hypertext
documents, such as images, videos, and posting content.
❖ Platform independent: Works on any operating system.
❖ Compatible: Compatible with various protocols and technologies.
❖ Secure: Supports encryption for secure data transfer.

29
HyperText
Hypertext refers to text that is linked to other pieces of text or information, allowing
users to easily navigate between them by clicking on links, usually represented as
highlighted or underlined words or phrases.

This concept is fundamental to the way the World Wide Web works, as it enables
the creation of interconnected documents that users can explore by following
hyperlinks.

The term "hypertext" was coined by Ted Nelson in the 1960s, and it paved the way
for the development of technologies like HTML (HyperText Markup Language),
which structures documents on the web.

30
HyperText
Hypertext is one of the key underlying
concepts of the World Wide Web,[2] where
Web pages are often written in the Hypertext
Markup Language (HTML).

hypertext enables the easy-to-use publication

of information over the Internet.

31
World Wide Web
System of interconnected documents and
resources, accessed via the internet.

It enables users to browse and interact with

various types of information, including text,
images, videos, and other multimedia, using a
web browser (like Chrome, Firefox, Safari, etc.).

32
key points about the World Wide Web:
Hypertext: The web is based on the concept of hypertext, which allows for the linking of documents to one another.
This means users can navigate from one page to another by clicking on hyperlinks.

Web Pages: Websites consist of web pages, which are formatted using HTML (HyperText Markup Language) and can
include other technologies like CSS (Cascading Style Sheets) for design and JavaScript for interactive elements.

URLs (Uniform Resource Locators): Every web page has a unique address, known as a URL, which allows users to
access specific content on the web.

Web Servers and Browsers: When you enter a URL in your browser, the browser sends a request to a web server,
which hosts the webpage. The server then sends the requested page back to your browser to be displayed.

Tim Berners-Lee: The World Wide Web was invented in 1989 by Tim Berners-Lee, a British computer scientist. He
developed the basic technologies of HTML, HTTP (Hypertext Transfer Protocol), and URLs, which allowed for the
creation of web pages and browsing of content.

33
Hypertext Markup Language (HTML)
Hypertext Markup Language is the standard markup
language for documents designed to be displayed in a
web browser.

It defines the content and structure of web content.

It is often assisted by technologies such as Cascading

Style Sheets and scripting languages such as
JavaScript, a programming language.

34
How does HTML work?
● HTML is a text-based language that uses markup symbols to indicate how to
display content
● Markup is the text that appears between the angle brackets "<>"
● Each markup code is called an element or a tag
● Some elements come in pairs to indicate when to start and stop a display
effect
● HTML is often used with Cascading Style Sheets (CSS) and JavaScript

35
HTML and the web
● HTML is the standard markup language for web content
● It's used by all major web browsers, including mobile and desktop browsers
● The World Wide Web Consortium (W3C) recommends HTML
● HTML5 is the latest version of HTML

36
HTML and web pages
HTML allows users to embed images, videos, and other content into web pages

HTML also allows users to adjust the width, height, position, and other attributes of
embedded content

37
HTML Example
<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>This is a Heading</h1>

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

</body>

</html>

38
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

Note: Some HTML elements have no content (like the <br> element). These elements are called empty
elements. Empty elements do not have an end tag!

39
Web Browsers

Read HTML documents and display them

correctly.

A browser does not display the HTML tags, but

uses them to determine how to display the
document:

40
HTML Page Structure

41
Example Explained
● The <!DOCTYPE html> declaration defines that this document is an HTML5 document
● The <html> element is the root element of an HTML page
● The <head> element contains meta information about the HTML page
● The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
● The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
● The <h1> element defines a large heading
● The <p> element defines a paragraph

42
<!DOCTYPE> Declaration
● The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages
correctly.
● It must only appear once, at the top of the page (before any HTML tags).

● The <!DOCTYPE> declaration is not case sensitive.

● The <!DOCTYPE> declaration for HTML5 is:

● In older documents (HTML 4 or XHTML), the declaration is more complicated because the declaration must
refer to a DTD (Document Type Definition).

43
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading:

Examples

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

44
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:

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

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

45
Practice code #1

Write HTML code to below output

46
HTML Links
HTML links are defined with the <a> tag:

<a href="https://www.kln.ac.lk/home">This is a link</a>

47
HTML Images
HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes:

<img src="university.jpg" alt="Image of the university" width="104" height="142">

48
View HTML Source Code:

Click CTRL + U in an HTML page, or right-click on the page and select "View
Page Source". This will open a new tab containing the HTML source code of
the page.

49
Nested HTML Elements
❖ HTML elements can be nested (this means that elements can contain other

elements).

❖ All HTML documents consist of nested HTML elements.

50
Practice code #3

51
Empty HTML Elements

HTML elements with no content are called empty elements.

The <br> tag defines a line break, and is an empty element without a closing tag:

<p>This is a <br> paragraph with a line break.</p>

52
HTML Attributes
❖ All HTML elements can have attributes

❖ Attributes provide additional information about elements

❖ Attributes are always specified in the start tag

❖ Attributes usually come in name/value pairs like: name="value"

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

<img src="img_girl.jpg">

53
Specify the URL(Uniform Resource Locator)
1. Absolute URL - Links to an external image that is hosted on another website. Example:
src="https://www.w3schools.com/images/img_girl.jpg".

2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not
include the domain name. If the URL begins without a slash, it will be relative to the current page.

Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative to the domain.
Example: src="/images/img_girl.jpg".

Tip: It is almost always best to use relative URLs. They will not break if you change domain.

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

<p style="color:red;">This is a red paragraph.</p>

55
The lang Attribute
You should always include the lang attribute inside the <html> tag, to declare the
language of the Web page. This is meant to assist search engines and browsers.

<!DOCTYPE html>

<html lang="en">

<body>

...

</body>

</html>

56
Single or Double Quotes
Double quotes around attribute values are the most common in HTML, but single
quotes can also be used.

In some situations, when the attribute value itself contains double quotes, it is
necessary to use single quotes:

<p title='John "ShotGun" Nelson'>

<p title="John 'ShotGun' Nelson">

57
HTML Headings
HTML headings are titles or subtitles that you want to display on a webpage.

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

58
HTML Paragraphs
The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before
and after a paragraph

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

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

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

<tagname style="property:value;">

<body style="background-color:powderblue;">

<h1>This is a heading</h1>

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

</body>

The property is a CSS property. The value is a CSS value.

60
HTML Styles
background-color: coral; Set the background color for an element:

text-align:center Set the text alignment. Can have values : center,left,right,justify

Font-size: sets the size of the text.

color: blue; Text color

61
HTML Styles
Exercise : StyleTest1.html

62
HTML Styles: Font Size
The font-size value can be an absolute, or relative size.

Absolute size:

❖ Sets the text to a specified size

❖ Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
❖ Absolute size is useful when the physical size of the output is known
❖ font-size: 40px;

Relative size:

❖ Sets the size relative to surrounding elements

❖ Allows a user to change the text size in browsers
➢ em , viewport(vp)

63
Relative Font Size: em
❖ The em is based on the parent font size so that it can change in nested elements,
❖ The em unit relative to the font size of its parent element.
❖ It scales based on the current element’s font size, affecting the size of nested elements
according to their parent’s size.

font-size: 2em; // 2 times of parent font size

64
Relative Font Size: em

Exercise : FontSizeEm.html

65
Relative Font Size: rem
The rem unit in CSS is relative to the font size of the root element (<html>).

It provides consistent scaling across the entire document, ensuring that elements are sized relative to a
single base font size.

font-size: 2rem; // 2 times of root element font size

66
Relative Font Size: Responsive font(viewport)
That way the text size will follow the size of the browser window:

The text size can be set with a vw unit, which means the "viewport width".

10vw will set the size to 10% of the viewport width.

Viewport is the browser window size.

1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

It can be vh(viewport height)

<h1 style="font-size:10vw">Hello World</h1>

67
Relative Font Size: rem

Exercise : FontSizeRem.html

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

69
HTML Tables
HTML tables allow web developers to arrange data into rows and columns.

70
HTML Tables
HTML tables allow web developers to arrange data into rows and columns.

71
Table Borders
To add a border, use the CSS border property on table, th, and td elements:

table, th, td {

border: 1px solid black;

72
HTML Table Sizes
HTML tables can have different sizes for each column, row or the entire table.

To set the width of a table, add the style attribute to the <table> element:

<table style="width:100%">

To set the size of a specific column, add the style attribute on a <th> or <td> element:

<th style="width:70%">Firstname</th>

73
HTML Table Padding & Spacing
HTML tables can adjust the padding inside the cells, and also the space between the cells.

74
Cell Padding
❖ Same padding for top,bottom,left & right

th, td {

padding: 15px;

❖ Separate padding for each side

th, td {

padding-top: 10px;

padding-bottom: 20px;

padding-left: 30px;

padding-right: 40px;

75
Cell Spacing
❖ Cell spacing is the space between each cell.

❖ By default the space is set to 2 pixels.

❖ To change the space between table cells, use the CSS border-spacing property

on the table element

table {
border-spacing: 30px;
}

76
Colspan & Rowspan
❖ HTML tables can have cells that span over multiple rows and/or columns.

77
Colspan & Rowspan
❖ To make a cell span over multiple columns, use the colspan attribute:

<th colspan="2">Name</th>

❖ To make a cell span over multiple rows, use the rowspan attribute:

<th rowspan="2">Phone</th>

78
Table - Zebra Stripes
❖ To style every other table row element, use the :nth-child(even) selector like this:

tr:nth-child(even) {
background-color: #D6EEEE;
}

79
HTML Colors : Color Names
❖ HTML colors are specified with predefined color names, or with RGB, HEX values.

Color can be specified by using a color name:

<h1 style="background-color:Tomato;">Tomato</h1>

<h1 style="background-color:Orange;">Orange</h1>

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

❖ HTML supports 140 standards color names.

❖ For full list of HTML color name go to https://htmlcolorcodes.com

80
HTML Colors : Color Values

❖ RGB Values : Red Green Blue values

<h1 style="background-color:rgb(255, 99, 71);">...</h1>

❖ Hex Value : hexadecimal value

<h1 style="background-color:#ff6347;">...</h1>

81
HTML Lists
❖ An unordered HTML list:
● Item
● Item
● Item
● Item

❖ An ordered HTML list:

1. First item
2. Second item
3. Third item
4. Fourth item

82
Unordered HTML 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:

<ul>
<li>Coffee</li>
<li>Tea</li> ● Coffee
<li>Milk</li>
● Tea
</ul>
● Milk

83
Ordered HTML List

❖ 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:

<ol>
<li>Coffee</li> 1. Coffee
<li>Tea</li> 2. Tea
<li>Milk</li>
3. Milk
</ol>

84
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:

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

85
Block and Inline Elements
❖ Every HTML element has a default display value, depending on what type of element it
is.
❖ The two most common display values are block and inline.

86
Block-level Elements
❖ A block-level element always starts on a new line, and the browsers automatically
add some space (a margin) before and after the element.
❖ A block-level element always takes up the full width available
❖ Two commonly used block elements are: <p> and <div>.

<p>Hello World</p>

<div>Hello World</div>

87
Block-level Elements Examples
❖ Some Block-Level Elements

88
Inline Elements
❖ An inline element does not start on a new line.

❖ An inline element only takes up as much width as necessary.

<span>Hello World</span>

89
Inline Elements Examples

90
Div Element
❖ The <div> element is used as a container for other HTML elements.
❖ A <div> element takes up all available width:

Lorem Ipsum <div>I am a div</div> dolor sit amet.

❖ The <div> element has no required attributes, but style, class and id are common.
❖ The <div> element is often used to group sections of a web page together.

91
Div Element
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 9 million inhabitants.</p>
</div>

92
Center align a <div> element
If you have a <div> element that is not 100% wide, and you want to center-align it, set the CSS margin
property to auto.

<style>
div {
width:300px;
margin:auto;
}
</style>

93
Multiple <div> elements
You can have many <div> containers on the same page.

94
Multiple <div> elements
You can have many <div> containers on the same page.

<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 9 million inhabitants.</p>
</div>

<div>
<h2>Oslo</h2>
<p>Oslo is the capital city of Norway.</p>
<p>Oslo has over 700,000 inhabitants.</p>
</div>

<div>
<h2>Rome</h2>
<p>Rome is the capital city of Italy.</p>
<p>Rome has over 4 million inhabitants.</p>
</div>

95
Aligning <div> elements side by side
Can have two or more <div> elements side by side, like this:

96
Aligning <div> elements side by side
CSS float property is used for positioning and formatting content and allows elements to be positioned
horizontally, rather than vertically.

<style>
.mycontainer {
width:100%;
overflow:auto;
}
.mycontainer div {
width:33%;
float:left;
}
</style>

97
Cascading Style Sheets (CSS)
❖ Used to format the layout of a webpage.
❖ CSS can be added to HTML documents in 3 ways:
➢ Inline - by using the style attribute inside HTML elements
■ <h1 style="color:blue;">A Blue Heading</h1>
➢ Internal - by using a <style> element in the <head> section
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
➢ External - by using a <link> element to link to an external CSS file

98
Cascading Style Sheets (CSS) : External

❖ 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:
<head>
<link rel="stylesheet" href="styles.css">
</head>

❖ The external style sheet can be written in any text editor.

❖ The file must not contain any HTML code, and must be saved with a .css extension.

99
Cascading Style Sheets (CSS) : External Sample

❖ Here is what the "styles.css" file looks like:

body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

100
class Attribute
❖ class attribute is used to specify a class for an HTML element.

❖ Multiple HTML elements can share the same class.

❖ The class attribute is often used to point to a class name in a style sheet. It can also
be used by a JavaScript to access and manipulate elements with the specific class
name.

❖ To create a class; write a period (.) character, followed by a class name. Then, define
the CSS properties within curly braces {}:

101
class Attribute Example

102
class Attribute
❖ HTML elements can belong to more than one class.
<h2 class="city main">London</h2>

❖ Different HTML elements can point to the same class name.

<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>

103
id Attribute
❖ The HTML id attribute is used to specify a unique id for an HTML element.
❖ You cannot have more than one element with the same id in an HTML document.
❖ The id attribute is used by CSS and JavaScript to style/select a specific element
❖ The value of the id attribute is case sensitive
❖ The id attribute is also used to create HTML bookmarks
❖ JavaScript can access an element with a specific id with the getElementById() method
❖ The syntax for id is: write a hash character (#), followed by an id name. Then, define
the CSS properties within curly braces {}.

104
id Attribute : Example
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>

105
Html formatting
❖ 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

●
106
HTML Forms
❖ An HTML form is used to collect user input. The user input is most often sent to a
server for processing.

<form>

form elements

</form>

107
HTML Forms
❖ An HTML form is used to collect user input. The user input is most often sent to a
server for processing.

<form action="/action_page.php">

<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname"><br>

<label for="lname">Last name:</label><br>

<input type="text" id="lname" name="lname">

<input type="submit" value="Submit">

</form>

108
<form> Element
❖ Input elements <input>
➢ used to input values by user.
➢ There different input elements. Eg. Text, button etc.

❖ Label elements <label>

➢ Used to display text in a form

109
<input> Elements

110
input & label Elements
❖ Text Fields
<input type="text">

❖ Label
<label for="fname">First name:</label>

<form>

<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname"><br>

<label for="lname">Last name:</label><br>

<input type="text" id="lname" name="lname">

</form>

111
Radio Buttons
❖ The <input type="radio"> defines a radio button.

❖ Radio buttons let a user select ONE of a limited number of choices.

<form>

<input type="radio" id="html" name="fav_language" value="HTML">

<label for="html">HTML</label><br>

<input type="radio" id="css" name="fav_language" value="CSS">

<label for="css">CSS</label><br>

<input type="radio" id="javascript" name="fav_language" value="JavaScript">

<label for="javascript">JavaScript</label>

</form>

112
Checkboxes
❖ <input type="checkbox"> defines a checkbox.
❖ Checkboxes let a user select ZERO or MORE options of a limited number of choices.

<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

113
Submit 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.

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

114
Select
❖ <select> element defines a drop-down list:
❖ The <option> element defines an option that can be selected.
❖ By default, the first item in the drop-down list is selected.
❖ To define a pre-selected option, add the selected attribute to the option:
❖ Use the multiple attribute to allow the user to select more than one value:

<select id="cars" name="cars">

<option value="volvo" selected>Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

115
textarea Element
❖ <textarea> element defines a multi-line input field (a text area):
❖ The rows attribute specifies the visible number of lines in a text area.
❖ The cols attribute specifies the visible width of a text area.

<textarea name="message" rows="10" cols="30">

The cat was playing in the garden.
</textarea>

❖ The <button> element defines a clickable button:

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

116
HTML Video
❖ To show a video in HTML, use the <video> element:
❖ To start a video automatically, use the autoplay attribute:
❖ Add muted after autoplay to let your video start playing automatically (but muted):
❖ The controls attribute adds video controls, like play, pause, and volume.

<video width="320" height="240" autoplay muted>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

Your browser does not support the video tag.

</video>

117
HTML Iframes
❖ HTML iframe is used to display a web page within a web page.

❖ <iframe> tag specifies an inline frame.

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe

Example"></iframe>

❖ To remove the borders set : style="border:none;"

❖ The target attribute of the link must refer to the name attribute of the iframe:

118
HTML Layout Elements
<header> - Defines a header for a document or a section

<nav> - Defines a set of navigation links

<section> - Defines a section in a document

<article> - Defines independent, self-contained content

<aside> - Defines content aside from the content (like a sidebar)

<footer> - Defines a footer for a document or a section

<details> - Defines additional details that the user can open and close on demand

<summary> - Defines a heading for the <details> element

119
HTML References

❖ https://www.w3schools.com/html/

❖ https://www.tutorialspoint.com/html/index.htm

❖ https://www.geeksforgeeks.org/html-tutorial/

120