INTERNET

PROGRAMMING
NTA LEVE 5 SEMESTER I
 Assessment
1. Course Work – 50%
i. Test 1 – 15%
ii. Test 2 – 15%
iii. Individual assignment – 10%
iv. 2 Group assignments – 10%

2. End of Semester Examination – 50%

Introduction to Internet
Programming
Design Simple Interactive Website Using
Appropriate Web Design Tools

• Establish Website Application in Terms of Size and

Environment

• Establish Website User Requirements In Terms of

Services

• Perform Physical and Conceptual Modelling of Website

 What is the Internet programming?
• Internet programming, also known as web programming, is the
process of creating and maintaining websites and web applications
that can be accessed over the internet. or
• Web programming is used to create websites, online stores, web
applications, and other online services that are accessed through
the Internet. Web programming languages like HTML, CSS,
JavaScript, PHP, and Python are used to create these web-based
applications.
 Some common benefits include
the following:
• Multiple users can access the same version of an
application.

• Users don't need to install the app.

• Users can access the app through various platforms such

as a desktop, laptop or mobile.

• Users can access the app through multiple browsers.

 • Some of the technologies used for creating dynamic Web sites are as
follows:

• JavaScript
• It is used to develop interactive Web pages by adding programming to

Technologies HTML.

• Cascading Style Sheets (CSS)

for Dynamic • CSS are style sheets that specify the formatting of a Web page for both
static and dynamic Web pages.

Websites • HTML 5
• HTML is a standard tagging language for developing web pages. Each
webpage contain HTML code to define and display the contents of the
page.

• PHP
• PHP is a server side programing language that is used to create
dynamic contents and adds user interaction to the website by
connecting to the database and webserver.
 Technologies for Internet programming

Web Technologies: Internet programming relies on various technologies and languages, including but
not limited to:

• HTML (Hypertext Markup Language): Used for structuring and presenting content on web pages.

• CSS (Cascading Style Sheets): Used for styling and formatting web page elements.

• JavaScript: A scripting language used for adding interactivity and dynamic behavior to web pages.

• Server-Side Scripting Languages: Such as PHP, Python, Ruby, [Link], and others, used to process
requests and generate dynamic content on the server.

• Databases: Used for storing and retrieving data, commonly through database management systems
like MySQL, PostgreSQL, MongoDB, and more.

• Web Frameworks: Frameworks like Ruby on Rails, Django, [Link], and others provide pre-built
tools and structures to streamline web development.
The evolution of HTML
 What is the HTML code for web page?

What is the HTML code for web page?

• HTML (HyperText Markup Language) is the code that is

used to structure a web page and its content. For
example, content could be structured within a set of
paragraphs, a list of bulleted points, or using images and
data tables
 HTML
• What is HTML?
• HTML is the standard markup language for creating Web pages.
• HTML stands for Hyper Text Markup Language
• HTML describes the structure of Web pages using markup
• HTML elements are the building blocks of HTML pages
• HTML elements are represented by tags
• HTML tags label pieces of content such as "heading", "paragraph
"table", and so on
• Browsers do not display the HTML tags, but use them to render th
content of the page
 INTRODUCTION
• HyperText Markup Language (HTML) was introduced in
the year 1990. Since then, there has been continuous
evolution in the technology leading to introduction of new
versions.
• HTML5 is the next version of HTML and is the new standard.
HTML 4.01 was the previous version of HTML which was
released in 1999.

• Since then, there have been constant evolutions and additions

to the World Wide Web (WWW).

• Majority of the browsers support HTML5 elements and

Application Programming Interfaces (APIs).
 Web and Internet
• The advent of WANs raised a strong need to share data across the globe rather
than just sharing the data within the organization.

• This would facilitate faster analysis and decision-making process.

• This resulted in the evolution of the Web, also referred as World Wide Web or
WWW.

• Therefore, Internet is known as the largest WAN.

• The Web is a way to access information using the Internet that is referred to as
a network of networks.

• A Web page is a file that contains information and instructions to display the
information to the users.
 Web Communication
• Web pages are stored on a Web server to make them available on the Internet so
that users can view them.

• A Web server is a computer with high processing speed connected to the Internet
and is used to host Web pages.

• Web browsers such as Microsoft Internet Explorer or Netscape Navigator are used
to interpret and display the Web pages using a protocol (set of rules).

• The most popular protocol used to view Web pages is Hypertext Transfer Protocol
(HTTP).

• It is a protocol that specifies how a Web page will be retrieved from the Web Server.
 Static Web Pages
• A static Web page consists of contents specified by the Web page
designer.
• These contents include text, images, audios, and videos.
• The same content is displayed to each user on the Internet each time
the page is requested.
• Therefore, such a Web page is called a static Web page, as the
contents of the Web page remain unchanged.
• The only way to update a static Web page is to change the content
manually.
 Static Web Pages PROS AND
CONS
• ADVANTAGES

• Simple to design as it does not provide interactivity. This leads to reduction

in programming effort and complexity of Web pages.

• Ideal for specifying the content appearance as static Web pages focus on
content presentation, which is one-way flow of information.

• DISADVANTAGES

• Static Web pages are difficult to maintain, as they need to be updated

manually.

• They do not allow any user interaction.

Dynamic Web Pages
• A dynamic Web page generates content ‘on-demand’ when
user provides certain inputs.

• It accepts the inputs from the user based on which it

displays the content in the browser.

• Consider an example of an online store where the users

can buy different products by selecting them online.

• Based on the selected products (input), a page with the

total cost is displayed to the user.
 HTML5
• Some basic rules for HTML5 that were established are as follows:

• Introduction of new features should be based on HTML, CSS, DOM, and

JavaScript

• More markup should be used to replace scripting

• HTML5 must be device independent

• Need for external plug-ins, such as Flash, to be reduced

• Better error handling capabilities

• Development process should be completely visible to the public

 BASIC HTML5 STRUCTURE
<!DOCTYPE html>

<html>
<head>
<title>

• ………………..

• …………….....

</title>
</head>

<body>

.....................................

……..............................

</body>
</html>
BASIC HTML TAGS
• 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 meta information about the
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
 HTML Tags
HTML tags are element names surrounded by angle brackets:

Example: <tagname>content goes here...</tagname>

• HTML tags normally come in pairs like <p> and </p>

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

• The end tag is written like the start tag, but with a forward slash
inserted before the tag name

Tip: The start tag is also called the opening tag, and the end tag the
closing tag.
BASIC HTML5 STRUCTURE
<!DOCTYPE html>

<html>
<head>
<title>
• ………………..
• …………….....
</title>
</head>

<body>

.....................................
……..............................

</body>
</html>
BASIC HTML TAGS
• 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 meta information about the
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
 HTML Tags
HTML tags are element names surrounded by angle brackets:

Example: <tagname>content goes here...</tagname>

• HTML tags normally come in pairs like <p> and </p>

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

• The end tag is written like the start tag, but with a forward slash
inserted before the tag name

Tip: The start tag is also called the opening tag, and the end tag the
closing tag.
 HTML Editors
• Write HTML Using Notepad or TextEdit

• Web pages can be created and modified by using professional HTML editors

such as Adobe Dreaweaver, Kompozer, FrontPage, CoffeeCup, Macromedia,

AdobeGoLive, BlueGriffon, Ms Expression, Mobirise, n.k.

• However, for learning HTML we recommend a simple text editor like

Notepad (PC) or TextEdit (Mac).

• We believe using a simple text editor is a good way to learn HTML.

 HTML Basic elements
• HTML Headings
• HTML headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading. <h6> defines the
least important heading:
• Example
• <h1>This is heading 1</h1>
• <h2>This is heading 2</h2>
• <h3>This is heading 3</h3>
 • An element organizes the content in a Web page
hierarchically, which forms the basic HTML structure.

• It consists of
Elements • tags,
• attributes,
• and content.

• Tags denote the start and end of an HTML element.

• A start tag includes an opening angular bracket (<)

followed by the element name, zero or more space
separated attributes, and a closing angular bracket (>).

• Attributes are name/value pairs that describe the

element and content format.

• An end tag is written exactly as the start tag, but the

forward slash (/) precedes the element name.
 • HTML attributes helps to provide some
meaning and context to the elements.

• Some of the global attributes used in

Attributes HTML5 elements are as follows:

• class – Specifies classnames for an element.
• contextmenu – Specifies the context menu for an element.
• dir – Specifies the direction of the text present for the
content.
• draggable – Specifies the draggable function of an element.
• dropzone – Specifies whether the data when dragged is
copied, moved, or linked, when dropped.
• style – Specifies the inline CSS style for an element.
• title – Specifies additional information about the element.
 Basic HTML document and headings

<!DOCTYPE html>
• <!DOCTYPE html> <html>
<body>
• <html>
<h1>This is heading 1</h1>
• <body> <h2>This is heading 2</h2>
<h3>This is heading 3</h3>
• <h1>My First Heading</h1>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
• <p>My first paragraph.</p>
</body>
</html>

• </body>

• </html>
 Html basic elements

• HTML Paragraphs
• <!DOCTYPE html>
• HTML paragraphs are defined with the <p> tag: • <html>

• <body>

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

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

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

• </html>
Working with Links and Images
• Absolute

• Relative paths

• Internal sections

• Linking to external web pages

• Adding Images
 HTML Links
• HTML Links

• HTML links are defined with the <a> tag:

• Example

• <a href="[Link] is a link</a>

• The link's destination is specified in the href attribute.

• The most important attribute of the <a> element is the href attribute, which
indicates the link's destination

• Attributes are used to provide additional information about HTML elements.

 HTML Links
• <!DOCTYPE html>

• <html>

• <body>

• <h2>HTML Links</h2>

• <p>HTML links are defined with the a tag:</p>

• <a href="https:// [Link] ">This is a link</a>

• </body>

• </html>
 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

35
Links - The target Attribute
using “blank”
Example

• Use target="_blank" to open the linked document in a

new browser window or tab:

• <a href="[Link] /"

target="_blank">Visit W3Schools!</a>

36
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 "[Link] part):

37
Examples
• <h2>Absolute URLs</h2>
• <p><a href="https:// [Link] /">unique
</a></p>
• <p><a href="[Link]

• <h2>Relative URLs</h2>
• <p><a href="html_images.asp">HTML Images</a></p>
• <p><a href="/css/[Link]">CSS Tutorial</a></p>

38
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):

<a href="[Link]
email</a>

39
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.

Example

• <a href="[Link] [Link]/html/" title="Go

to unique Lectures">Visit our HTML Tutorial</a>

40
Link-Summary

• Use the <a> element to define a link

• Use the href attribute to define the link address

• Use the target attribute to define where to open the linked

document

• Use the <img> element (inside <a>) to use an image as a link

• Use the mailto: scheme inside the href attribute to create a link
that opens the user's email program

41
 Html basic elements
• HTML Images

• HTML images are defined with the <img> tag.

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

• Example

• <img src=“[Link]" alt="[Link]" width="104" height="142">

 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
Syntax:<img src="url" alt="alternatetext">
 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.
 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).

• The value of the alt attribute should describe the image:

Example

• <img src="img_chania.jpg" alt="Flowers in Chania">

Images Link
• <p><a href="html_images.asp">HTML Images</a></p>
 Image Floating
• Use the CSS float property to let the image float to the right or
to the left of a text:
Example
• <p><img src="[Link]" alt="Smiley
face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="[Link]" alt="Smiley

face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
 Common Image Formats
Abbreviation File Format File Extension

APNG Animated Portable .apng

Network Graphics

GIF Graphics Interchange .gif

Format

ICO Microsoft Icon .ico, .cur

JPEG Joint Photographic Expert .jpg, .jpeg, .jfif, .pjpeg, .pjp

Group image

PNG Portable Network .png

Graphics
SVG Scalable Vector Graphics .svg
HTML Buttons
• The <button> tag defines a clickable button.

• Inside a <button> element you can put text (and tags like
<i>, <b>, <strong>, <br>, <img>, etc.). That is not possible
with a button created with the <input> element!

• Tip: Always specify the type attribute for a <button>

element, to tell browsers what type of button it is.
Html basic elements

• HTML Buttons

• HTML buttons are defined with the <button> tag:

• Example

• <button>Click me</button>
Button
• <!DOCTYPE html>

• <html>

• <body>

• <h1>The button Element</h1>

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

• </body>

• </html>
 HTML <details> Tag as Button
• <!DOCTYPE html>

• <html>

• <body>

• <h1>The details element</h1>

• <details>

• <summary>Epcot Center</summary>

• <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special events.</p>

• </details>

• </body>

• </html>
Attribute
Attributes
Value Description
autofocus autofocus Specifies that a button should automatically get focus when the page loads

disabled disabled Specifies that a button should be disabled

form form_id Specifies which form the button belongs to
formaction URL Specifies where to send the form-data when a form is submitted. Only for type="submit"

formenctype application/x-www-form-urlencoded Specifies how form-data should be encoded before sending it to a server. Only for
multipart/form-data type="submit"
text/plain
formmethod get Specifies how to send the form-data (which HTTP method to use). Only for type="submit"
post
formnovalidate formnovalidate Specifies that the form-data should not be validated on submission. Only for type="submit"

formtarget _blank Specifies where to display the response after submitting the form. Only for type="submit"
_self
_parent
_top
framename
popovertarget element_id Specifies a which popover element to invoke
popovertargetaction hide Specifies what happens to the popover element when the button is clicked
show
toggle
name name Specifies a name for the button
type button Specifies the type of button
reset
 Embed a video, use the <video>
tag:
• <video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>
• <!DOCTYPE html>

• <html>

• <body>

• <h1>The video element</h1>

• <video width="320" height="240" controls>

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

• <source src="[Link]" type="video/ogg">

• Your browser does not support the video tag.

• </video>

• </body>

• </html>
HTML Lists
HTML Lists

HTML lists are defined with the <ul> (unordered/bullet list) or the
<ol> (ordered/numbered list) tag, followed by <li> tags (list items):

• Example

• <ul>

• <li>Coffee</li>

• <li>Tea</li>

• <li>Milk</li>

• </ul>
HTML lists allow web developers to group a
set of related items in 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

59
HTML Description Lists
• HTML also supports 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>

60
HTML BASIC ELEMENTS
• Empty HTML Elements

• HTML elements with no content are called empty elements.

• <br> is an empty element without a closing tag (the <br> tag defines a
line break).

• Empty elements can be "closed" in the opening tag like this: <br />.

• HTML5 does not require empty elements to be closed. But if you want
stricter validation, or if you need to make your document readable by
XML parsers, you must close all HTML elements properly.
BASIC HTML ELEMENTS
• HTML Comment Tags
• You can add comments to your HTML source by using the following
syntax:
• <!-- Write your comments here -->
• Example
• <!-- This is a comment -->
• <p>This is a paragraph.</p>
• <!-- Remember to add more information here -->
 Unordered HTML List
• <!DOCTYPE html>

• <html>

• <body>

• <h2>An unordered HTML list</h2>

• <ul>

• <li>Coffee</li>

• <li>Tea</li>

• <li>Milk</li>

• </ul>

• </body>

• </html>
• 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:

• <!DOCTYPE html>

• <html>

• <body>

• <h2>An ordered HTML list</h2>

• <ol>

• <li>Coffee</li>

• <li>Tea</li>

• <li>Milk</li>

• </ol>

• </body>

• </html>
HTML Description Lists

• HTML also supports 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:
• <!DOCTYPE html>

• <html>

• <body>

• <h2>A Description List</h2>

• <dl>

• <dt>Coffee</dt>

• <dd>- black hot drink</dd>

• <dt>Milk</dt>

• <dd>- white cold drink</dd>

• </dl>

• </body>

• </html>
HTML List Tags
Tag Description

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term in a description list

<dd> Describes the term in a description list