WEB PROGRAMMING

1ST MEET
OBJECTIVES

• Introduction to Web Programming Concepts

• Introduction to HTML
INTERNET

• Internet is all interconnected computer networks using the

global TCP / IP system standard as a packet exchange
protocol (packet switching communication protocol) to
service billions of users worldwide.
WEB

• Web is one application that contains multimedia

documents (text, images, animation, video) in it that uses
the HTTP protocol (hypertext transfer protocol) and to
access it using software called a browser.
WEB TERMINOLOGY

• HTTP (HyperText Transfer Protocol) is a protocol used to

send and receive web pages in the World Wide Web
(WWW).
• HTML (HyperText Markup Language) is the script
language used to create documents on the World Wide
Web.
WEB TERMINOLOGY

• Static Web Page

• A web page that contains information written in HTML.
• Information on web pages cannot be changed except by
changing the HTML source code that forms the page.
• Interactions that occur between users (clients) and servers are
only about processing links.
WEB TERMINOLOGY

• Dynamic Web Page

• A web page that is generated at every access requested by
users or web pages that are always changing as a result of
interaction with users.
• Web pages are generally in the form of templates to display
the results of query operations on information sources, such as
databases (database driven) or the results of calculations of a
program algorithm.
WEB TERMINOLOGY

Web server
• A web server is a computer that provides web page services.
• Each web server has an IP address and / or domain name and
web server software and is also connected to the internet
network.
• Examples of web server software: Apache, GlassFish, NCSA,
and IIS.
WEB TERMINOLOGY

Browser
• A browser is an application software that is used to find, retrieve and
display content from the World Wide Web, in the form of web
pages, images, videos, audio and other multimedia files.
• The browser is a client of a web server that is run on the side of the
user's computer to contact and request information and a web server.
• Examples of browser software: Internet Explorer, Netscape
Navigator, Firefox, Google Chrome, Apple Safari and Opera.
WEB TERMINOLOGY

Web Programming
• Activities to write web application source code intended
to create certain functionality that is run on a web server
and can be accessed by various web users with different
platforms.
• Web programming languages include, PHP, ASP, JSP,
Python, etc.
WEB TERMINOLOGY

Client Side Scripting

• Source code of web applications that are run / rendered
by a web browser or browser plug-in.
• This application is downloaded from a web server and
compiled on a web client.
• Examples: JavaScript and ActionScript.
WEB TERMINOLOGY

Server Side Scripting

• Source code for web applications that are run on the web
server to generate dynamic web pages.
• The results of processing information on the server are
sent to a web browser in the form of web documents.
• Example: JSP, ASP, ColdFusion, Perl and PHP.
WEB
ARCHITECTURE

• Two-tier client/server
architecture
WEB
ARCHITECTURE

• Three-Tier
Client/Server
Architectures
WEB TECHNOLOGY

HTML/XHTML HTTP utk

utk display transport

HTTP
Server

URL/URI utk PHP, python dll.

Clients pengalamatan utk interaksi
(browsers)
URI AND URL

URI
• Uniform Resource Identifier is a string of characters used
to identify names, resources, or services on the Internet.
• The web is an information space, URI is the steering wheel
to navigate information space.
• Unique naming for Web / addressing technology (HTML:
only data format, HTTP: Web protocol)
URI AND URL

URL
• Uniform Resource Locator is a series of characters according to
a certain standard format, which is used to indicate the
address of a source such as documents and images on the
Internet.
• Subset of URIs for several existing internet protocols, such as:
http, ftp, mailto, etc.
• Not used anymore in making specifications
HTTP

HyperText Transfer Protocol

• The main protocol behind the WWW
• The way computers to communicate are standardized
• Client / server protocol, always initiated by the client
• Request message from client to server
• Response message from server to client
TCP/IP

• TCP / IP is a software that is used to send and receive

information from one computer to another.
• TCP / IP consists of two components, namely Internet
Protocol (IP) and Transmission Control Protocol (TCP)
• TCP works with the IP protocol to ensure that information
sent across a network is received by the destination
computer
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 the
content of the page
HTML TAGS

• HTML tags are element names surrounded by angle brackets:

<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
WEB BROWSERS

• The purpose of a web browser

(Chrome, IE, Firefox, Safari) is to
read HTML documents and
display them.

• The browser does not display the

HTML tags, but uses them to
determine how to display the
document:
HTML PAGE
STRUCTURE

• Below is a
visualization of an
HTML page
structure:
HTML VERSIONS

• Since the early days of the web, there have been many
versions of HTML:

Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
HTML ELEMENTS

• An HTML element usually consists of

a start tag and end tag, with the
content inserted in between:
<p>My first paragraph.</p>
• HTML elements can be nested
(elements can contain elements).
• All HTML documents consist of nested
HTML 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.
HTML ATTRIBUTES

• All HTML elements can have attributes

• Attributes provide additional information about an
element
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs
like: name="value"
HTML ATTRIBUTES

• HTML links are defined with the <a> tag. The link address is
specified in the href attribute:
<a href="https://www.w3schools.com">This is a link</a>
• HTML images are defined with the <img> tag.
• The filename of the image source is specified in
the src attribute:
<img src="img_girl.jpg">
<img src="img_girl.jpg" width="500" height="600">
HTML HEADINGS

<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
HTML PARAGRAPHS

<html>
<head>
<title>Title</title>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>
Line 1<br>
Line 2
</p>
<p align=center>Paragraph
(centered)</p>
<p align=right>Paragraph (left
aligned)</p>
<pre>Pre-formatted text (spaces
and line breaks
are preserved)</pre>
<hr>
</body>
</html>
HTML TEXT FORMATTING

<html>
<head>
<title>Title</title>
</head>
<body>
<em>Emphasis</em><br>
<strong>Strong</strong><br>
<cite>Citation</cite><br>
<code>Code</code><br>
</body>
</html>
HTML STYLES

<html>
<head>
<title>Title</title>
</head>
<body>
<i>Italic</i><br>
<b>Bold</b><br>
<u>Underline</u><br>
<tt>Typewriter</tt><br>
A_i^j<br>
<font size="+3">Relative</font> size<br>
<font size=24>Absolute</font> size<br>
<font color=blue face="Helvetica,Arial">

Face/color</font>
</body>
</html>
HTML LISTS

<html>
<head>
<title>Title</title>
</head>
<body>
<ul>
<li>Apples
<li>Oranges
<li>Bananas
</ul>
<ol>
<li>First
<li>Second
<li>Third
</ol>
</body>
</html>
HTML IMAGES

<html>
<head>
<title>Title</title>
</head>
<body>
<p>This is a GIF image<br>
<img src="img_girl.jpg" alt="Girl in
a jacket" width="500" height="600">
</body>
</html>
HTML TABLES

<html>
<head>
<title>Title</title>
</head>
<body>
<table border cellpadding=6>
<tr>
<th>1</th>
<td>2</td>
<td rowspan=2 colspan=2>3,4,7,8</td>
</tr>
<tr>
<th>5</th>
<td>6</td>
</tr>
</table>
</body>
</html>
ANY QUESTION ?
EXERCISE

• Create a static web page with tags contained in HTML

• Present the web page at the next meeting
THANK YOU
BIBLIOGRAPHY

• Pemprograman Web Pertemuan 1, STMIK AMIKOM

Yogyakarta
• Pertemuan Pemrograman Basis WEB, Universitas Sanata
Dharma Yogyakarta
• Materi Kuliah Desain Grafis Web, Universitas Petra
• www.w3schools.com