CWD116 – Photography and Web Programming 1 LectureNotes02
Introduction to Web programming
Introduction
Let’s start with a brief description of the Web, which is short for World Wide Web. Most people
say “Web” instead of “World Wide Web,” and we’ll follow that convention.
➢ The Web is a collection of documents, called web pages, that are shared (for the most part) by
computer users throughout the world. Different types of web pages do different things, but at a
minimum, they all display content on computer screens. By “content,” we mean text, pictures, and
user input mechanisms like text boxes and buttons.
➢ The web page address is the location where the web page resides on the Internet.
➢ Speaking of the Internet, what is it? It’s a collection of several billion computers connected
throughout the world. Each web page is stored on one of those computers.
Creating a Website
➢ A website is a collection of related web pages that are normally stored on a single web server
computer.
➢ A web server is a computer system that enables users to access web pages stored on the web
server’s computer. The term “web server” can refer to the web page-accessing software that runs
on the computer, or it can refer to the computer itself.
CopyRight @ Eugene Mbah October 2022 1
CWD116 – Photography and Web Programming 1 LectureNotes02
To create a website, you’ll need these things:
(1) a text editor,
(2) an upload/publishing tool,
(3) a web hosting service, and
(4) a browser.
We’ll describe them in the upcoming paragraphs.
Text Editors
There are many different text editors, with varying degrees of functionality.
Microsoft’s Notepad is free and provides no special web functionality. To use it, the web developer simply
enters text, and the text appears as it is.
Although it’s possible to use a plain text editor such as Notepad, most web developers use a fancier type of
text editor—a web authoring tool.
Different web authoring tools have different features that are intended to make the web development
process easier.
At a minimum, web authoring tools are able to suggest valid code after the user has typed part of
a command. This is done by showing a pop-up to the user that suggests valid code that could complete the
command currently being entered. This auto-complete mechanism is often called intelligence and
sometimes called picklist.
Another feature common to all web authoring tools is WYSIWYG, pronounced “wizeewig.” It stands for
“what you see is what you get.”
WYSIWYG means that as you’re editing your text, you can see what your text will look like after it’s
eventually uploaded to a website.
Some people use Visual Studio web authoring tool. Visual Studio is from Microsoft, so it’s not free.
If you plan to use Visual Studio for nonbusiness purposes, you can download Microsoft Visual
Studio Community for free (that means you—students, faculty, and open-source project contributors).
There are a lot of other web authoring tools that you are welcome to learn on your own.
Visual Studio and its subsidiaries run on Windows, but if you have a Macintosh computer, check
out Adobe’s Dreamweaver web authoring tool. It works on both Windows and Mac. Or, do a
Google search for other web authoring tools—most are free and some are quite good!
Normally, web authoring tools enable developers to create not just web pages, but other software as well.
Such general-purpose web authoring tools are normally referred to as integrated
development environments, or IDEs for short.
CopyRight @ Eugene Mbah October 2022 2
CWD116 – Photography and Web Programming 1 LectureNotes02
Web page Uploads
After you enter your web page text on your local computer with your favorite IDE, you’ll probably
want to publish it. Publishing means that you upload your web page to a web server computer so
other users can access it on the Web.
Some IDEs, like Dreamweaver, provide built-in uploading capabilities, but other IDEs, like Visual Studio,
do not.
For IDEs that do not provide built-in uploading capabilities, you’ll need to use a separate file upload tool.
There are lots of file upload tools..
Web hosting Service
For a file upload tool such as WinSCP to work, you need to have a web server computer on which to store
the uploaded files. For the uploaded files to be accessible as web pages on the Web, your web server
computer needs to have a web hosting service in place.
The web developer usually doesn’t have to worry about the web hosting service software. If the web
developer is part of a medium- to large-sized organization, then the organization’s information technology
(IT) department will install and maintain the web hosting service.
On the other hand, if the web developer is part of a very small organization or not part of an organization at
all, the developer will need to set up the web hosting service or rely on a generic web-hosting company.
Regardless of who’s in charge of the web hosting service, all web hosting services need to have a
mechanism for receiving uploaded files from a file upload tool. Typically, that mechanism is an FTP (file
transfer protocol) server, which is a program that runs on the web server computer.
The figure below is a pictorial description of how the FTP server fits in with the rest of the website
creation process.
CopyRight @ Eugene Mbah October 2022 3
CWD116 – Photography and Web Programming 1 LectureNotes02
Browsers
The top of the figure above shows the final part of the website experience: browser access.
A browser is a piece of software that enables a user to retrieve and view a web page.
The most popular browsers for computers are Google Chrome, Microsoft’s browsers (Microsoft Edge and
Internet Explorer), and Mozilla2 Firefox, Google Chrome. … Other browsers are Safari (for Mac devices),
Opera, and Android’s default browser.
Safari and Android are particularly popular with mobile devices.
Web Page Example
In the Figure below, It shows Kansas City Weather web page.
You can see the website address. Formally, the website address value is known as a URL, which stands for
Uniform Resource Locator.
That name is not all that intuitive, so just remember that a URL is a website address.
Here’s the URL for the Kansas City Weather page in yhe figure below.
[Link]
CopyRight @ Eugene Mbah October 2022 4
CWD116 – Photography and Web Programming 1 LectureNotes02
Web Programming Basics
Basic Web Programming
• HTML
• CSS
• JavaScript
For more Dynamic Web Programming we use e.g.,
• [Link]
• SQL
• AJAX
• PHP
CopyRight @ Eugene Mbah October 2022 5
CWD116 – Photography and Web Programming 1 LectureNotes02
CopyRight @ Eugene Mbah October 2022 6
CWD116 – Photography and Web Programming 1 LectureNotes02
We can save this file in an HTML file [Link] using our favorite text editor. Finally oen it using a Web
browser like Internet Explorer, Google chrome, or Firefox …etc.
It must show the following output :
To learn HTML, you will need to study various tags and understand how they behave, while
formatting a textual document. Learning HTML is simple as users have to learn the usage of
different tags in order to format the text or images to make a beautiful webpage.
World Wide Web Consortium (W3C) recommends to use lowercase tags starting from HTML4.
CopyRight @ Eugene Mbah October 2022 7
CWD116 – Photography and Web Programming 1 LectureNotes02
HTML Document Structure
A typical HTML document will have the following structure:
We will study all the header and body tags in subsequent chapters, but for now let's see what is document
declaration tag.
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration tag is used by the web browser to understand the version of
the HTML used in the document. Current version of HTML is 5 and it makes use of the following
declaration:
There are many other declaration types which can be used in HTML document depending on
what version of HTML is being used. We will see more details on this while discussing
<!DOCTYPE...> tag along with other HTML tags.
Heading Tags
Any document starts with a heading. You can use different sizes for your headings. HTML also has six
levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying
any heading, browser adds one line before and one line after that heading.
CopyRight @ Eugene Mbah October 2022 8
CWD116 – Photography and Web Programming 1 LectureNotes02
Example
This will produce the following result:
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go
in between an opening <p> and a closing </p> tag as shown below in the example
CopyRight @ Eugene Mbah October 2022 9
CWD116 – Photography and Web Programming 1 LectureNotes02
This will produce the following result:
Line Break Tag
Whenever you use the <br /> element, anything following it starts from the next line. This
tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing
to go in between them.
The <br /> tag has a space between the characters br and the forward slash. If you omit this space, older
browsers will have trouble rendering the line break, while if you miss the forward slash character and just
use <br> it is not valid in XHTML.
CopyRight @ Eugene Mbah October 2022 10
CWD116 – Photography and Web Programming 1 LectureNotes02
Example
This will produce the following result:
Centering Content
You can use <center> tag to put any content in the center of the page or any table cell
Example
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
CopyRight @ Eugene Mbah October 2022 11
CWD116 – Photography and Web Programming 1 LectureNotes02
This will produce the following result:
Horizontal Lines
Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates
a line from the current position in the document to the right margin and breaks the line accordingly.
For example, you may want to give a line between two paragraphs as in the given example below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
HTML Tables
• Tables are a very useful way of visualizing information
• Tables have rows and columns
• The tags are;
• <table></table> : outer table tags
• <th></th> : table header row (for the first row of a table only)
• <tr></tr> : for a normal table row
• <td></td> for a table element
A Very Simple Table
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>My First Table</title>
</head>
<body>
<table border=1>
<tr>
<th>Column 1 Head</th>
CopyRight @ Eugene Mbah October 2022 12
CWD116 – Photography and Web Programming 1 LectureNotes02
<th>Column 2 Head</th>
</tr>
<tr>
<td>Column 1 Row 1 Data</td>
<td>Column 2 Row 1 Data</td>
</tr>
<tr>
<td>Column 1 Row 2 Data</td>
<td>Column 2 Row 2 Data</td>
</tr>
</table>
</body>
</html>
The output will be something like this:
Sending Information via the Web
• To develop an interactive web application a web page has to be able to send information
to a webserver
HTML Forms
• Information can be sent back to the server via web forms
• Web forms consist of web page components that capture information
--------------- to be continue
CopyRight @ Eugene Mbah October 2022 13