INTRODUCTION TO WEB

COMPUTING
CSC 104/SEN 104/CYB 118/IFT 202
2 Units
 Course Outline

➢ An Introduction to the Internet

➢ World Wide Web and Web Development
➢ Introduction to Hypertext Markup Language
➢ Introduction to Cascading Style Sheet
➢ Introduction to Javascript
➢ The Web Browser
➢ Web Application
➢ Introduction to Digital Media
 History of Internet

➢ The internet's history began with ARPANET in 1969, evolved through the development of TCP/IP protocols, and
gained widespread public access with the invention of the World Wide Web in 1989, leading to rapid growth in the
1990s and beyond.
➢ In 1960s, the concept of a "network of networks" emerged, with early ideas for interconnected computers for
researchers to share information. J.C.R. Licklider at MIT envisioned a "Galactic Network" in 1962, a precursor to the
modern internet. The Advanced Research Projects Agency (ARPA) of the U.S. Department of Defense sought to
create a resilient communication network, leading to the development of ARPANET. In 1969, ARPANET, the
precursor to the internet, was established, initially connecting four universities' computers.
➢ In 1970s, Vinton Cerf and Robert Kahn developed the TCP/IP protocols, which became the foundation for how
different networks could communicate. These protocols allowed machines to route, receive, and assemble data
across a network.
➢ In 1980s (Internet emerges), the U.S. government adopted Cerf and Kahn's architecture in 1980, creating a universal
standard for connection. The term "Internet" became widely used to describe the concept of a worldwide network
in 1982. January 1, 1983, is often considered the official birthday of the internet, as ARPANET and the Defense Data
Network officially transitioned to the TCP/IP standard.
➢ In 1989 (The World Wide Web), Tim Berners-Lee, a scientist at CERN, invented the World Wide Web, making the
internet more user-friendly and accessible to the public.
 History of Internet

❖ In 1990s (Rapid Growth and Commercialization): The World Wide Web led to the rapid expansion of the internet in
the 1990s. Applications like browsers and the World Wide Web simplified information access, contributing to rapid
growth. The private sector took over the internet, leading to commercialization and increased public use.
❖ In 2000s and Beyond (Continued Evolution), the 21st century saw the emergence of Web 2.0, emphasizing social
networks and user-generated content. Mobile phones gaining internet access further expanded access to the
internet. The internet continues to evolve, with new technologies and applications constantly emerging.
 Introduction to Web Development

➢ Web development encompasses the creation and maintenance of websites, ranging from simple static
pages to complex web applications, and is broadly categorized into front-end (client-facing) and back-
end (server-side) development, with full-stack developers proficient in both.
❖ Web development is the process of creating and maintaining websites for the internet (World Wide
Web) or an intranet (a private network).
❖ It involves a wide range of tasks, from designing the user interface to building the underlying
infrastructure and functionality.
❖ Web developers use various technologies and tools to achieve their goals, including programming
languages, frameworks, and databases.
❖ Types of Web Development:
▪ Front-End Development: Focuses on the user-facing part of a website, including the design, layout,
and interactive elements that users see and interact with.
o Key Technologies: HTML, CSS, JavaScript.
 Introduction to Web Development

▪ Back-End Development: Deals with the server-side logic, databases, and APIs that power a website's
functionality.
o Key Technologies: PHP, Python, Java, Ruby, Node.js, databases (e.g., PostgreSQL, MySQL, MongoDB).
▪ Full-Stack Development: Involves expertise in both front-end and back-end development, allowing
developers to build complete web applications from the ground up.
o Key Skills: Proficiency in multiple technologies and frameworks, understanding of both client-side and
server-side development.
 Introduction to Web Development

❖ Web Development Skills:

▪ HTML (HyperText Markup Language): The foundation of web pages, defining the structure and content.
▪ CSS (Cascading Style Sheets): Controls the presentation and styling of web pages.
▪ JavaScript: Adds interactivity and dynamic behavior to web pages.
▪ Server-side languages: PHP, Python, Java, Ruby, Node.js.
▪ Databases: PostgreSQL, MySQL, MongoDB.
▪ Version control: Git.
▪ Web security: Understanding and implementing security measures.
▪ Content management systems (CMS): WordPress, Joomla
 Programming and Web Systems Technology

➢ Programming is the process or activity of writing computer programs.

➢ Web design is the process of planning and creating a website. Text, images, digital media and interactive elements are
shaped by the web designer to produce the page seen on the web browser. It is the creation of digital environments that
facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over
time while always retaining their identity.
➢ Internet and World Wide Web are often used in everyday speech without much distinction. However, the Internet and
the World Wide Web are not one and the same.
➢ The Internet is a global data communications system. It is a hardware and software infrastructure services that provide
connectivity between computers. The Internet is a global system of interconnected computer networks that use the
standard Internet Protocol Suite (TCP/IP) to serve billions of users worldwide. It is a network of networks that consists of
millions of private, public, academic, business, and government networks, of local to global scope, that are linked by a
broad array of electronic, wireless and optical networking technologies. In contrast, the Web is one of communication
via the Internet. It is a collection of interconnected documents and other resources, linked by hyperlinks and URLs.
➢ The World Wide Web is a global set of documents, images and other resources, logically interrelated by hyperlinks and
referenced with Uniform Resource Identifiers (URIs). URIs allow providers to symbolically identify services and clients to
locate and address web servers, file servers, and other databases that store documents and provide resources and access
them using the Hypertext Transfer Protocol (HTTP), the primary carrier protocol of the Web. HTTP is only one of the
hundreds of communication protocols used on the Internet. Web services may also use HTTP to allow software systems
to communicate in order to share and exchange business logic and data. The World Wide Web is a system of hypertext
documents that are linked to each other. Internet is the means to access this set of interlinked documents.
 Programming and Web Systems Technology

➢ World Wide Web browser software, such as Microsoft's Internet Explorer, Mozilla Firefox, Opera, Apple's Safari, and
Google Chrome, let users navigate from one web page to another via hyperlinks embedded in the documents. These
documents may also contain any combination of computer data, including graphics, sounds, text, video, multimedia and
interactive content including games, office applications and scientific demonstrations. The Web has also enabled
individuals and organizations to publish ideas and information to a potentially large audience online at greatly reduced
expense and time delay.
➢ Web designers utilize markup language, most notably HyperText Markup Language (HTML) for structure and Cascading
Style Sheet (CSS) for presentation to develop pages that can be read by web browsers.
❖ HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else
connected to the Internet.
▪ HyperText is the method by which you move around on the web by clicking on special text called hyperlinks which bring
you to the next page. The fact that it is Hyper means it is not linear.
▪ Markup is what HTML tags do to the text inside them. They mark it as a certain typeof text. HTML consists of a series of
tags. The tags are what separate normal text from HTML code.
➢ CSS are used to control how your pages are presented and make pages more accessible.
➢ Basic special effects and interaction is provided by JavaScript, which adds a lot of power to basic HTML.
 Introduction to World Wide Web(www)

➢ The WWW stands for the "World Wide Web." It is a system of interconnected webpages and digital
resources accessible via the internet. The WWW allows users to access and share information,
multimedia content, and services globally through web browsers.
❖ The WWW was invented by Tim Berners-Lee, a British computer scientist, in 1989 while working at
CERN (European Organization for Nuclear Research) in Switzerland.
❖ In 1990, Berners-Lee developed the first web browser/editor, called "World Wide Web“ (later renamed
Nexus), and the first web server software.
❖ The first-ever website, http://info.cern.ch, went live in 1991, providing information about the WWW
project.
❖ By 1993, web browsers and servers began to emerge outside of CERN, marking the beginning of the
WWW's expansion beyond the research community.
❖ The WWW rapidly evolved into a global platform for information dissemination, communication, and
commerce.
 Basic Terminologies of WWW

➢ URL (Uniform Resource Locator): A web address used to locate resources on the internet, consisting of
a protocol (e.g., http://), domain name (e.g., www.example.com), and path.
➢ Web Browser: Software used to access and view web content, such as Chrome, Firefox,or Safari.
➢ Webpage: A single document or page of information on the website that can contain text, images,
multimedia, and hyperlinks.
➢ Website: A collection of webpages and digital resources hosted on a specific domain.
➢ Hyperlink: A clickable link within a webpage that directs the user to another webpage or resource.
➢ HTML (Hypertext Markup Language): The standard language used to create and format web content.
➢ HTTP (Hypertext Transfer Protocol): A protocol for transmitting data and resources over the WWW.
❖ HTTP (Hypertext Transfer Protocol): Used for transferring webpages and their content between web
servers and browsers.
➢ HTTPS (HTTP Secure): A secure version of HTTP that encrypts data transmission, commonly used for
secure online transactions and data protection.
 List of WWW Protocols

➢ FTP (File Transfer Protocol): Used for transferring files between computers on the internet.
➢ SMTP (Simple Mail Transfer Protocol): Used for sending emails.
➢ POP3 (Post Office Protocol 3) and IMAP (Internet Message Access Protocol): Used for receiving emails
from mail servers.
➢ DNS (Domain Name System): Resolves domain names into IP addresses.
➢ TCP/IP (Transmission Control Protocol/Internet Protocol): The fundamental protocols that enable data
to be transmitted over the internet.
 List of WWW Protocols

➢ Advantages of WWW
❖ Access to Information: Provides easy access to vast amounts of information and resources.
❖ Communication: Facilitates global communication through email, social media, and messaging.
❖ E-commerce: Enables online shopping and business transactions.
❖ Education: Provides educational resources, online courses, and e-learning opportunities.
❖ Entertainment: Offers a wide range of multimedia content, including videos, music, and games.
❖ Research: Supports research and data retrieval on various topics.
❖ Global Connectivity: Connects people, businesses, and organizations worldwide.
➢ Navigating Through Websites Using Website Addresses:
❖ To navigate through websites, users enter website addresses (URLs) into the address bar of their web browser.
❖ A URL typically consists of the protocol (e.g., http:// or https://), followed by the domain name (e.g.,
www.example.com) and, optionally, a specific path or resource (e.g.,/page.html).
❖ After entering a URL and pressing "Enter" or clicking "Go," the web browser fetches and displays the requested
webpage. Users can then use hyperlinks within the page to navigate to other parts of the website or external
websites.
 HTML
➢ HTML, is the language used to describe structured documents and the language used to create web pages on the
internet.
➢ HTML tags are the keywords on a web page that define how your web browser must format and display your web
page.
❖ Head Tag: The head tag <head> contains all the elements describing the document.
❖ Title Tag: The title tag <title> specifies the HTML page title, which is shown in the browser’s title bar.
❖ Body Tag: The body tag <body> is where you insert your web page’s content.
❖ Paragraph Tag: A paragraph tag <p> is used to define a paragraph on a web page.
❖ Heading Tag : The HTML heading tag is used to define the heading of the HTML document. The <h1> tag defines the
most important tag, and <h6> defines the least.

<!DOCTYPE html>
<html><head><title>Introduction to Web Computing</title></head>
<body>
<h1>I am programming<h1>
<p> This is an introductory class</p>
</body>
</html>
 HTML (Formatting Tags)
❖ Emphasis tag: The HTML <em> tag is used to emphasize the particular text in a paragraph.
❖ Bold Tag: The <b> tag is used to make the text bold.
❖ Italic Tag: The <i> tag is used to make the text italic.
❖ Underline Tag: The <u> tag is used to set the text underline.

<!DOCTYPE html>
<html><head><title>Introduction to Web Computing</title></head>
<body>
<h1>I am <em>programming</em><h1>
<p> <b>This<b> is an <i>introductory</i> <u>class</u></p>
</body>
</html>
❖ Link Tag: The <a> tag links one page to another page. The href attribute is used to define
<!DOCTYPE html>
<html><head><title>Introduction to Web Computing</title></head>
<body>
<h1>I am <em>programming</em><h1>
<p> <b>This<b> is an <i>introductory</i> <u>class</u></p>
<a href=“csc104.html”>Link to csc</a>
</body>
</html>
 HTML (List Tags)
➢ List Tag: The <li> tag is used if you want to enter the contents in the listed order. There are two types of lists.
❖ Ordered list <ol>
❖ Unordered list <ul>

<!DOCTYPE html>
<html><head><title>Introduction to Web Computing</title></head>
<body>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>PHP</li>
</ol>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>PHP</li>
</ul>
</body>
</html>
 HTML (List Tags)
➢ Image Tag: The <img> tag is used to embed an image in an HTML document. You need to specify the source of the
image inside the tag.
<!DOCTYPE html>
<html><head><title>Introduction to Web Computing</title></head>
<body>
<center><img src="israeloa.jpg" alt ="israel" width=""200px" height="200px"></center></a> </body>
</html>
 HTML (List Tags)
➢ The Table Tag
❖ The <table> tag is used to create a table in the HTML document.
❖ The table row (<tr>) tag is used to make the rows in the table, and the table data (<td>) tag is used to enter the data
in the table.
❖ The style (<style>) tag is used to add methods to the content by typing the code in the HTML file itself.
<!DOCTYPE html>
<html><head><title>Introduction to Web Computing</title>
<style type=“type/css”>
Table, th, td{
Border: 1px solid black;
}
</style>
</head>
<body>
<center><img src="israeloa.jpg" alt ="israel" width=""200px" height="200px"></center></a>
<table >
<thead>
<tr><th>Month</th> <th>Saving</th> </tr><thead>
<tr><td>January</td> <td>20</td> </tr>
<tr><td>February</td> <td>30</td> </tr>
</table>
</body>
</html>
 Programming and Web Systems Technology

➢ How to use Hypertext link

<html><head><title>Programming and Web
<html><head><title>Programming and Web Systems
Systems Class</title></head>
Class</title></head>
<body>
<body>
<p> Waooh! This is Programming Class</p>
<p> Waooh! We are linking classes in programming
<a href="ift204s.html"> Go to Second Page</a>
class</p>
</body>
<a href="ift204.html">Link Page</a>
</html>
</body>
</html>
<html><head><title>Programming and Web Systems
Class</title></head>
<body>
<p> How to download documents</p>
<a href="ift204.html">Link Page</a>
<a href="israeloa.jpg" download="israel">
<center><img src="israeloa.jpg" alt ="israel"
width=""200px" height="200px"></center></a>
</body>
</html>
 Cascading Style Sheet (CSS)
➢ CSS is the language for web and graphic designers to learn. Short for Cascading Style Sheet, CSS is the language
used to add style to HTML elements.
❖ CSS is used to describe all the style that will be applied to the various elements (tags) on the HTML page. In this
context, the term style means all the color, fonts, and placement of pictures and content on the page. It does not
refer to the content itself. You can think of style sheets as an over-arching style template for your Web pages.
❖ We need CSS to add our own custom styles; we need CSS to add color, size, columns, and layout; we need CSS to
beautify our typography; we need CSS to add background textures and images. If good HTML is the key to an
organized, accessible web, then CSS is the key to a beautiful web. CSS puts the design in Web Design.
❖ Cascading Style Sheets are simple text files saved in a “.css” extension which contain style Rules. For example,
imagine we had a <h1> heading element on a page, and we wanted to make it orange, and center aligned.
h1{
color: orange;

text-align: center;

❖ Our CSS Rule begins with “h1” which is our CSS selector. The selector tells the web browser which HTML element
we wish to style. Next, the word “color” is a property and “orange” is its value. A property and value pair together and
create a declaration. We create complex style rules by stringing together multiple declarations, which are separated
by semicolons. This entire piece of code, including the selector and declarations, is known as a CSS Rule.
 Types of Style Sheet
➢ inline = style attributes are used inline with the HTML tags. For example:

<p style="color: red">When in the course...</p>

❖ This would style the paragraph red, but just this one paragraph on the page. Using this type of style sheet, you would
have to individually style other p tags on the page if you also want those to be red. This is an inefficient style sheet
concept.
➢ embedded (internal) = style information is in a <style> tag which is nested in the <head> tag of a single Web page.
For example:

<style type="text/css">
p {color: red;}
</style>

❖ This would style all the paragraphs on this one Web page red. This is more powerful, but if you want to style all the p
tags on your other Web pages using this model, then you'd have to add this code to them all. If your site contains
hundreds of pages, this could take a while.
 Types of Style Sheet
➢ linked (external) = the style is in one .css file that is linked to multiple Web pages. The link tag on the page is
connected to the external file. For example: <link rel="stylesheet" type="text/css" href=“csc104.css" />

➢ In a case like this, all the Web pages in an entire site and there could be dozens, hundreds, or thousands could be
linked to this one external style sheet file. If that file contained a selector that specified the p tag was red, all the p
tags throughout all the pages of the site would be styled that color.
 CSS Sample
<!DOCTYPE html>
<html>
<head><title>CSC104 Lesson</title>
<!-- <script src="csc104.js"></script> -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewpor" content="width-device-width initial-scale=1.0">
<link rel="stylesheet" href="dropdown.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
</head>
<body>

<nav>
<div class="dropdown">
<button class="link"><a href="#" class="home">Home</a></button>
<div class="projects">
<button>Projects</button>
<ul>
<li><a href="#">weather App</a></li>
<li><a href="#">App development</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Gaming</a></li>
</ul>
</div>
 CSS Sample
<div class="products">
<button>Products</button>
<ul>
<li><a href="#">Cloud Services</a></li>
<li><a href="#">Bitcoin</a></li>
<li><a href="#">E-trade</a></li>
<li><a href="#">Film</a></li>
</ul>
</div>
</div>
</nav>
</body>

</html>
 CSS Sample
*{
padding:0;
margin:0;
box-sizing: border-box;
}
body{
height: 100vh;
background-color: rgb(139,62,85);
font-family: "Poppins", sans-serif;
}
a,
button{
font-family: "Poppins", sans-serif;
}
.dropdown{
height:10vh;

display:flex;
justify-content:space-around;
align-items:center;
width:80%;
margin: auto;
}
 CSS Sample
.products,.projects{
position:relative;
}
.projects ul, .products ul{
position:absolute;
left:0px;
background: white;
margin-top:10px;
width:200px;
height:200px;
display:flex;
justify-content:space-around;
align-items:center;
flex-direction:column;
list-style:none;
border-radius:5px;
opacity:0;
pointer-events:none;
transform: translateY(-10px);
transition: all 0.4s ease;
}
 CSS Sample
.projects a, .products a{
color:black;
text-decoration:none;
}
.projects li, .products li{

width:100%;
height:100%;
display:flex;
justify-content:space-around;
align-items:center;
}
.projects li:hover, .products li:hover{
background-color: rgb(218,179,191);
}
.dropdown button, .home{
background:none;
border:none;
color:white;
font-size:18px;
text-decoration:none;
cursor:pointer;
 CSS Sample
.dropdown button:hover, .home:hover{
color:rgb(224,224,224);
}
.projects button:focus + ul,.products button:focus + ul{
opacity:1;
pointer-events:all;
transform: translateY(0px);
}
 Javascript
➢ JavaScript is a powerful programming language that can add interactivity to a website. It was invented by Brendan
Eich. It is a dynamic programming language
➢ Variables: Variables are containers that store values. It stores data temporarily in computer memory. You start by
declaring a variable with the let keyword, followed by the name you give to the variable: For example; let myVariable;
❖ Features of variables:
✓ A variable name cannot be a reserved word
✓ A variable name must be meaningful
✓ A variable name cannot start with a number
✓ It cannot contain a space or hyphen (-)
✓ It is case sensitive
✓ All number types are number (there is no interger nor floating point)
✓ There are two categories of types in Javascript: Primitive/Value types and Reference types
➢ Primitive/Value/Data Types:
❖ String
❖ Number
❖ Boolean
❖ Undefined
❖ Null
➢ Reference Types
❖ Object
❖ Array
❖ Function
 Javascript Syntax

❖ It can be implemented using the script tag <script></script>

❖ The tag takes two important attributes:
❖ Language: It specifies the scripting language you are using
❖ Type: It indicates the scripting language in use and it value
<script language=“javascript” type=“text/javascript”>

</script>
 Javascript Placement

➢ Javascript in <head></head>section
➢ Javascript in <body></body>section
➢ Javascript in <head></head> and <body></body> section
➢ Javascript in external file
➢ Javascript in <head></head>section: It can be used if you want to run a script on some event
<head>
<script language=“javascript” type=“text/javascript”>
Function sayHello(){
alert(‘Hello World’)
}
</script></head>
<body><input type=“button” onclick=“sayHello()” value=“say Hello”></body>
 Javascript Placement

➢ Javascript in <body></body>section: It can be used if you want to run a script alongside the page
contents.
<head>
</head>
<script language=“javascript” type=“text/javascript”>
Document.write(“Hello World”)
</script>
<body>This is web page</body>
 Javascript Placement

➢ Javascript in <head></head> and <body></body> section<head>

<script language=“javascript” type=“text/javascript”>
Function sayHello(){
alert(‘Hello World’)
}
</script></head>
<body>
<script language=“javascript” type=“text/javascript”>
Document.write(“Hello World”)
</script>
<input type=“button” onclick=“sayHello()” value=“say Hello”></body>
 Javascript Placement

➢ Javascript in external file: It provides mechanism that enables you store javascript in an external file and
include it in your html.
Function sayHello(){
alert(‘Hello World’)
}

<head>
<script type=“text/javascript” src=“filename.js”></script></head>
<body><input type=“button” onclick=“sayHello()” value=“say Hello”></body>
 Javascript
➢ Constants: Constants are values we give to variables or use in performing mathematical operation.
❖ The value of a variable declared as constant cannot change. For Example:
✓ Let myVariable =0.5
✓ myVariable = 1
✓ alert(myVariable)
✓ String myVariable = “waaooh”
✓ const myVariable =0.5
✓ myVariable = 1
✓ Alert(myVariable)
➢ Reference Types
➢ Object: An object is a collection of properties, and a property is an association between a name (or key) and a
value. A property's value can be a function, in which case the property is known as a method. Objects in JavaScript,
just as in many other programming languages, can be compared to objects in real life.
let person = {
name : 'josh',
phone : 070
};
document.write(person.name);
 Javascript
➢ Array : An array in JavaScript is a type of global object that is used to store data. Arrays consist of an ordered
collection or list containing zero or more data types, and use numbered indices starting from 0 to access specific
items. For example:

<script>
const fruits = [];
fruits.push("banana", "apple", "peach");
console.log(fruits.length);
</script>
 Advantages and Limitations of Javascript

➢ Advantages
❖ Less server interaction: The page can be validated before sending it to the server.
❖ Immediate feedback to the user: They do not need to reload before getting error message
❖ Increased interactivity: We can create interfaces that allows users to hover with mouse or activate them
with keyboard.
❖ Richer Interfaces: we can create drag and drop and sliders that give richer interfaces to users.
➢ Limitations: Javascript cannot be treated as a full-fledge programming language. It lacks the following:
❖ Client-Side javascript does not allow the reading or writing of files.
❖ It cannot be used for networking application because there is no support for it
❖ It does not have multithreading or multiprocessor capability
 JQuery
➢ jQuery is an open-sourced JavaScript library that simplifies creation and navigation of web applications. jQuery is easy to learn. It
was introduced by John Resig in 2006
❖ Two ways of using jquery:
▪ By referencing
o Download and save jquery to the html path
o Call jquery in the HTML file
o To utilize jquery file, write a javascript function and call it in the html file
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<h1 align="center">Introduction to JQuery </h1>

<img src="kdu.jpg" alt="JS" id="img1"/>
<button onclick="func1()">Fade</button>
</body>
<script src="jquery.js" type="text/javascript"></script>
<script src="jq.js" type="text/javascript"></script>
</html>
o Save this function as jq.js
function func1(){
$("#img1").fadeToggle(3000);
}
 JQuery
▪ By using CDN
o The user has to connect to the internet to use CDN
o Copy CDN link and replace with the referencing link
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<h1 align="center">Introduction to JQuery </h1>
<img src="kdu.jpg" alt="JS" id="img1"/>
<button onclick="func1()">Fade</button>
</body>
<!-- <script src="jquery.js" type="text/javascript"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-
v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g
==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="jq.js" type="text/javascript"></script>
</html>
 JQuery
▪ Selector in Jquery
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="jqstyle.css">
</head>
<body>
<h1 align="center">Introduction to JQuery </h1>
<div id="div1">
<p id="p1">Paragraph 1</p>
<p>Paragraph 2</p>
</div>
<div id="div2">
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</div>
<button onclick="func2()">Click me</button>
</body>
<script src="jquery.js" type="text/javascript"></script>
<script src="jq.js" type="text/javascript"></script>
</html>
 JQuery
▪ Save this function
function func2(){
$("div").css('background-color','orange');
$("#p1").css('font-style','italic');
}
 JQuery
▪ Using Id has effect on only one element but class has effect on multiple elements
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="jqstyle.css">
</head>
<body>

<h1 align="center">Introduction to JQuery </h1>

<div id="div1">
<p class="p1">Paragraph 1</p>
<p>Paragraph 2</p>
</div>
<div id="div2">
<p class="p1">Paragraph 3</p>
<p>Paragraph 4</p>
</div>
<button onclick="func2()">Click me</button>
</body>
<script src="jquery.js" type="text/javascript"></script>
<script src="jq.js" type="text/javascript"></script>

</html>
 JQuery
▪ Save this function
function func2(){
$("div").css('background-color','orange');
//$("#p1").css('font-style','italic');
$(".p1").css('font-style','italic');
}
 Introduction to PHP

➢ PHP (Hypertext Preprocessor) is a server-side scripting language designed specifically for web development. It is
open-source which means it is free to download and use. The file extension of PHP is “.php”.
➢ PHP was introduced by Rasmus Lerdorf in the first version and participated in the later versions. It is an
interpreted language and it does not require a compiler.
➢ Characteristics of PHP
❖ PHP code is executed in the server.
❖ It can be integrated with many databases such as Oracle, Microsoft SQL Server, MySQL, PostgreSQL, Sybase, and
Informix.
❖ It is powerful to hold a content management system like WordPress and can be used to control user access.
❖ It supports main protocols like HTTP Basic, HTTP Digest, IMAP, FTP, and others.
❖ Websites like www.facebook.com and www.yahoo.com are also built on PHP.
❖ One of the main reasons behind this is that PHP can be easily embedded in HTML files and HTML codes can also
be written in a PHP file.
❖ The thing that differentiates PHP from the client-side language like HTML is, that PHP codes are executed on the
server whereas HTML codes are directly rendered on the browser. PHP codes are first executed on the server and
then the result is returned to the browser.
❖ The only information that the client or browser knows is the result returned after executing the PHP script on the
server and not the actual PHP codes present in the PHP file. Also, PHP files can support other client-side scripting
languages like CSS
 Introduction to PHP

➢ Purpose of using PHP

❖ PHP is primarily used for server-side web development. It enables the creation of dynamic web pages by
embedding PHP code within HTML.
❖ PHP can perform various tasks, including handling form data, generating dynamic page content, managing
databases, and interacting with servers.

<html>

<head>
<title>PHP Hello World</title>
</head>

<body>
<?php echo "Hello, World! This is PHP code";?>
</body>

</html>
 Introduction to PHP
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewpor" content="width-device-width initial-scale=1.0">
<head><title>Cascading Style Sheet</title>
</head>
<body>
<form action="fibbonacci.php" method="get">
<input type="text" name="fibbo">
<input type="submit" value="Fibbonacci">
</form>
<?php

$fibbo= $_GET["fibbo"];
$a=0;
$b=1;
echo "The fibbonacci number is: $fibbo <br/>";

for ($i=1;$i<=$fibbo;$i++){
$y = $a+$b;
echo("\nThe result is: $y\n <br/>");
$a = $b;
$b = $y;
}

?>
</body>
</html>
 Introduction to PHP

➢ Features of PHP
❖ Dynamic Typing: PHP is dynamically typed, meaning you don’t need to declare the data type of a variable
explicitly.
❖ Cross-Platform: PHP runs on various platforms, making it compatible with different operating systems.
❖ Database Integration: PHP provides built-in support for interacting with databases, such as MySQL, PostgreSQL,
and others.
❖ Server-Side Scripting: PHP scripts are executed on the server, generating HTML that is sent to the client’s browser.
 Introduction to PHP

➢ Advantages of PHP
❖ Open Source: PHP is an open-source language, making it freely available for use and distribution. This encourages
a large community of developers, contributing to its growth and improvement.
❖ Easy to Learn: PHP syntax is similar to C and other programming languages, making it relatively easy for
developers to learn, especially for those with a background in programming.
❖ Web Integration: PHP is designed specifically for web development and is embedded within HTML. It seamlessly
integrates with various web technologies, facilitating the creation of dynamic and interactive web pages.
❖ Database Support: PHP has excellent support for various databases, including MySQL, PostgreSQL, SQLite, and
more. This makes it easy to connect and interact with databases, a crucial aspect of many web applications.
❖ Cross-Platform Compatibility: PHP is platform-independent and runs on various operating systems, including
Windows, Linux, macOS, and others. This ensures compatibility across different environments.
❖ Large Community and Documentation: PHP has a vast and active community of developers. The abundance of
online resources, tutorials, and documentation makes it easier for developers to find solutions and seek help when
needed.
❖ Frameworks and CMS: There are popular PHP frameworks like Laravel, Symfony, and CodeIgniter, which provide
pre-built modules and features, aiding in rapid development. Additionally, PHP supports widely used content
management systems (CMS) like WordPress and Joomla.
❖ Server-Side Scripting: PHP scripts are executed on the server, reducing the load on the client’s side. This server-
side scripting capability is crucial for generating dynamic content and performing server-related tasks.
❖ Community Support: The PHP community actively contributes to the language’s development, ensuring regular
updates, security patches, and improvements. large and complex applications where more structured languages
might be preferred.
 Introduction to PHP

➢ Disadvantages of PHP
❖ Inconsistency: PHP has been criticized for inconsistencies in function names and parameter orders. This can lead
to confusion for developers, especially when working with a mix of older and newer functions.
❖ Security Concerns: If not handled properly, PHP code may be susceptible to security vulnerabilities, such as SQL
injection and cross-site scripting (XSS). Developers need to be cautious and follow best practices to secure PHP
applications.
❖ Performance: While PHP performs well for many web applications, it may not be as fast as some compiled
languages like C or Java. However, advancements and optimizations in recent versions have improved
performance.
❖ Lack of Modern Features: Compared to newer languages, PHP may lack some modern language features.
However, recent versions of PHP have introduced improvements and features to address this concern.
❖ Scalability Challenges: PHP can face challenges when it comes to scaling large and complex applications.
Developers may need to adopt additional tools or frameworks to address scalability issues.
❖ Not Suitable for Large-Scale Applications: While PHP is suitable for small to medium-sized projects, it might not
be the best choice for extremely large and complex applications where more structured languages might be
preferred.
❖ Limited Object-Oriented Programming (OOP) Support: Although PHP supports OOP, its implementation has
been criticized for not being as robust as in some other languages. However, recent versions have introduced
improvements to enhance OOP capabilities.
 Introduction to Digital Media

➢ Digital media is transmitted as digital data, which at its simplest involves digital cables or satellites sending binary signals
0s and 1s to devices that translate them into audio, video, graphics, text, and more. Anytime you use your computer,
tablet, or cellphone, opening web-based systems and apps, you are consuming digital media. Digital media might come
in the form of videos, articles, advertisements, music, podcasts, audiobooks, virtual reality, or digital art.
➢ Today, most types of digital media fit into one of these main subgroups:
❖ Audio: Audio forms of digital media include digital radio stations, podcasts, and audiobooks. Tens of
millions of Americans subscribe to digital radio services such as Apple Music, Spotify, Tidal, Pandora,
and Sirius, which provide a wide range of musical stations and allow users to listen to databases of
millions of songs on demand.
❖ Video: Many digital media outlets are visual, from streaming movie and television services such as
Netflix to virtual reality surgical simulators used in medical institutions. One of the biggest players in
visual digital media is YouTube, which hosts billions of videos. Launched in 2005, the website is one of
the most popular destinations on the web.
❖ Social media: Social media includes sites such as Twitter, Facebook, Instagram, LinkedIn, and
Snapchat, which enable their users to interact with one another through text posts, photographs, and
videos, leaving “likes” and comments to create conversations around pop culture, sports, news,
politics, and the daily events of users’ lives.
 Introduction to Digital Media

❖ Advertising: Advertisers have made their way into the digital media landscape, taking advantage of
marketing partnerships and advertising space wherever possible. The internet has moved away from
the use of pop-up and autoplay ads, which flooded early websites and drove away visitors. Instead,
advertisers look toward native content and other methods of keeping consumers invested without
overselling their product.
❖ News, literature, and more: Traditionally, people consumed text via books, print newspapers,
magazines, and the like. Even though digital media has proliferated, the desire for those kinds of
reading experiences has endured. Research from the Pew Research Center indicates that 38% of
adults in the U.S. read news online. The proliferation of literary websites, the popularity of resources
like Wikipedia, and the rise of e-readers like the Kindle all further underline the continued importance
of written work in digital media.
 Introduction to Digital Media

➢ Digital Media Types

❖ TV & Radio: Generally, the primary advertisements are either aired over TV or radio, shown through
search engine advertisement, in-video campaigns, in-application campaigns etc., where the content
delivered by the marketer is rather small and contains a link for the detailed description of the offering.
❖ Websites & Social Media: The second most important part of digital media marketing which is the
website. Websites can be interactive, loaded with content and user friendly. This helps in making the
visitor or the user comfortable with the content, easily understandable and the value addition the
offering can give. A decent pricing content is also made available with the differentiating points, if any,
to the visitor.
❖ Email & SMS: Digital media marketing includes the email and the SMS services. Often to either attract
or to remind people about the website they visited for a purchase or actually made a purchase from,
marketers use the platform of email and SMS services. Emails and SMS can be highly customizable,
cost effective and informative. Emails tend to contain multimedia messages as well which the SMS
cannot deliver but the rate of content delivery is higher in case of an SMS than an email.
❖ Blogs: The fourth type of digital media marketing is the interactive blogs or review panels. Generally,
before making a buying decision any customer wishes to get a review from the current user of the
product or service. Also, there are certain doubts which can be cleared by the company or the current
users through blogging websites where question and answer conveyance is very high.
 Introduction to Digital Media

❖ Mobile Apps: With the growing presence of smartphones, mobile apps have become an
importantdigital media option for businesses to work. Interactive apps help build a strong connect with
its customers offering ease of use and instant updates.
❖ Modern Formats (AR, 3D): There are newer types of digital media coming up in the ecosystem like
Augmented Reality, 3D (three dimensional), Podcasts, Stories which can help customers connect even
better with a company and at the same time experience the product or service at much detailed and
interactive levels.
➢ Advantages of Digital Media: There are several advantages of digital media in marketing:
❖ Digital media helps companies connect with its target audience.
❖ Use digital and big data, the accurate target customers can be targeted.
❖ It helps increase sales & business.
❖ Using digital media helps establish the brand using all the channels that customers use.
 Introduction to Digital Media

❖ Attributes of Audio/Video files:

▪ Controls: It displays the control of a web page
▪ Loop: It repeats the video after completion
▪ Muted: It mute the audio/video file
▪ Poster (video tag): display the poster until user plays the video
▪ Width and height (video tag): display the size of the video player
❖ Upload image(s) to a web page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="imaged.css">
</head>
<body>
<img id="myimage" src="kdu.jpg" alt="Seagul1">
<a href="kdu.jpg" download>Download</a>
</body>
</html>
 Introduction to Digital Media

❖ Upload audio files to a web page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jqstyle.css">
</head>
<body>
<audio controls>
<source src="beautiful_exchange.mp3" type="audio/mp3">
<hr>
<source src="beautiful_exchange.mp3" type="audio/mp3">
Your browser does not support this audio
</audio>
<a href="beautiful_exchange.mp3" download>Download audio</a>
</body>
</html>
 Introduction to Digital Media

❖ Upload videos to a web page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jqstyle.css">
</head>
<body>
<video width="330" height="250" controls>
<source src="Mighty_name_of_Jesus.mp4" type="video/mp4">
Your browser does not support this video
</video>
<a href="Mighty_name_of_Jesus.mp4" download="video download">Download video</a>
</body>
</html>
 Introduction to Digital Media

❖ Upload multiple videos to a web page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="imaged.css">
</head>
<body>
<video width="330" height="250" controls>
<source src="Mighty_name_of_Jesus.mp4" type="video/mp4">
<a href="Mighty_name_of_Jesus.mp4" download="video download">Download video</a>
<hr>
<source src="Mighty_name_of_Jesus.mp4" type="video/mp4">
Your browser does not support this video
</video>
<video width="330" height="250" controls>
<source src="Montesiwaju.mp4" type="video/mp4">
<a href="Montesiwaju.mp4" download="video download">Download video</a>
<hr>
<source src="Montesiwaju.mp4" type="video/mp4">
Your browser does not support this video
</video>
<a href="Mighty_name_of_Jesus.mp4" download="video download">Download video</a>
<img id="myimage" src="kdu.jpg" alt="Seagul1">
<a href="kdu.jpg" download="image">Download</a>
</body>
</html>
 Database

<! DOCTYPE HTML>

<HTML>
<head><title>IFT 204 CLASS</title></head>
<body>
<form action="insert.php" method="POST">
<table>
<tr>
<td>Name: </td>
<td><input type="text" name="username" required> </td>
</tr>
<tr>
<td>Password: </td>
<td><input type="text" name="password" required> </td>
</tr>
<tr>
<td>Gender: </td>
<td><input type="radio" name="gender" required> Male
<input type="radio" name="gender" required> Female</td>
</tr>
 Database

<tr>
<td>Email: </td>
<td><input type="email" name="email" required> </td>
</tr>
<tr>
<td>Phone: </td>
<td><select name="phonecode" required>
<option selected hidden value="">Select Option</option>
<option value="991">991</option>
<option value="997">997</option>
<option value="999">999</option>
</select>
<input type="phone" name="phone" required>
</td>
</tr>
<tr>
<td><input type="submit" value="submit"> </td>
</tr>
</table>
</form>
</body>
</HTML>
 Database - php
<?php
$username = $_POST['username'];
$password = $_POST['password'];
$gender = $_POST['gender'];
$email = $_POST['email'];
$phonecode = $_POST['phonecode'];
$phone = $_POST['phone'];
if(!empty($username) || !empty ($password) || !empty($gender) || !empty($email) || !empty($phonecode) || !empty($phone)){
//Database Connection
$conn = new mysqli('localhost','root','','register');
if(mysqli_connect_error()){
die(' Connect error ('.mysqli_connect_error.')'.mysqli_connect_error());
}else{
$select ="SELECT email FROM registration where email=?";
$insert = "INSERT INTO registration(username,password,gender,email,phonecode,phone) values(?,?,?,?,?,?)";
$stmt = $conn-> prepare($select);
$stmt ->bind_param("s", $email);
$stmt -> execute();
$stmt -> bind_result($email);
$stmt -> store_result();
$rnum =$stmt ->num_rows;
 Database - php

if($rnum==0){
$stmt ->close();
$stmt = $conn ->prepare($insert);
$stmt ->bind_param("ssssii",$username,$password,$gender,$email,$phonecode,$phone);
$stmt -> execute();
echo "New data inserted successfully";
}else{
echo "Email exist";
}
$stmt->close();
$conn->close();
}
}else{
echo "Fill all fields";
die();
}
?>
Exercise