LOCAL WEB SERVER

Setup and Configuration

Introduction
Before we begin, let us briefly introduce ourselves to the class.

You may use the following as a guide:

-name
-where you are from
-hobbies
-professional goals
Objectives
◦ Learn common terminologies associated with webpages and webpage design.
◦ Explore server-side technologies.
◦ Learn about HTML Tags and how to create a simple HTML document.
◦ Setup and configure a local web server.
◦ Test the web server’s configuration.
Webpage Terminologies
Before we begin setup and configuration of a web server, let us understand four simple terms
regarding how web pages work:

◦ Web page - A Web page is a simple text file that contains not only text, but also a set of HTML
tags that describe how the text should be formatted when a browser displays it on the
screen. The tags are simple instructions that tell the Web browser how the page should look
when it is displayed. The tags tell the browser to do things like change the font size or color or
arrange things in columns. The Web browser interprets these tags to decide how to format
the text onto the screen.
Webpage Terminologies
◦ HTML - HTML stands for Hyper Text Markup Language. A "markup language" is a computer
language that describes how a page should be formatted. If all you want to do is display a long
string of black and white text with no formatting, then you don't need HTML. But if you want
to change fonts, add colors, create headlines and embed graphics in your page, HTML is the
language you use to do it.
Webpage Terminologies
Web browser - A Web browser, like Netscape Navigator or Microsoft Internet Explorer, is a
computer program (also known as a software application, or simply an application) that does
two things:
o A Web browser knows how to go to a Web server on the Internet and request a page, so
that the browser can pull the page through the network and into your machine.
o A Web browser knows how to interpret the set of HTML tags within the page in order to
display the page on your screen as the page's creator intended it to be viewed.
How a web browser works.
Webpage Terminologies
◦ It is extremely easy to experiment with Web pages without using a server. Your browser can
view the Web pages you create from your personal machine.
◦ Once you understand how to create your own pages, it is likely that you will want to put them
"out on a server," so that people around the world can load your pages and read them. We
will talk about how to do that later.
 Server Side Technologies
◦ Active Server Pages (ASP): A Microsoft technology. ASP pages typically have the extension .asp.

◦ Hypertext Preprocessor (PHP): An open-source technology. Originally, it meant Personal Home

Page. PHP pages typically have .php, .phtml or .php3 file name extensions.

◦ Java Server Pages: .jsp pages contain Java code.

◦ Server Side Includes (SSI): Involves the embedding of small code snippets inside the HTML page.
An SSI page typically has .shtml as its file extension.
Server-Side Technologies
◦ With these server technologies it has become easier to maintain Web pages especially helpful
for a large web site. The developer needs to embed the server-side language code inside the
HTML page.

◦ This code is passed to the appropriate interpreter which processes these instructions and
generates the final HTML displayed by the browser.

◦ Note, the embedded server-script code is not visible to the client (even if you check the
source of the page) as the server sends ONLY the HTML code.
Server-Side Technologies
Let's look at PHP as an example.
◦ A request sent for a PHP page from a client is passed to the PHP interpreter by the server
along with various program variables. The interpreter then processes the PHP code and
generates a dynamic HTML output. This is sent to the server which in turn redirects it to the
client.

◦ The browser is not aware of the functioning of the server. It just receives the HTML code,
which it appropriately formats and displays on your computer.
HTML BASICS
HTML
◦ HTML is an acronym for Hyper Text Markup Language.

◦ HTML is the predominant markup language for web pages.

◦ It provides a means to describe the structure of text-based information in a document — by

denoting certain text as links, headings, paragraphs, lists, and so on — and to supplement
that text with interactive forms, embedded images, and other objects. This in turn is
interpreted by the web browser to format documents in a particular way making web pages
viewable across many varying platforms.
The HTML Tag
◦ An HTML tag is a code element that tells the Web browser what to do with your text. Each tag
will appear as letters or words between a < (less than sign) and a > (greater than sign).
Example: <center><body>

◦ To tell the Web browser to "end" doing what you just told it to do, a forward slash is used in
the closing tag:
Example: </center></body>
The HTML Tag
◦ Any Web page you create will contain the following tags at the start of the page:
<HTML>: tells the Web browser that this is the beginning of an HTML document
<HEAD>: tells that Web browser that this is the header for the page. This section contains metadata
about the document, like the title, links to stylesheets, scripts, etc.
<TITLE>: tells the Web browser that this is the title of the page
<BODY>: tells the Web browser that this is the beginning of the Web page content -- everything you
want to say and see on your page will follow this tag.
◦ The tags needed to end any Web page are:
</BODY>
</HTML>
An HTML
Document
The diagram illustrates the general format of
an HTML document.
<html>
Example
<head>
<title>My Simple Webpage</title> Let us try the example:
</head> 1. Create a new folder on your desktop, name
<body> it html_code
<h1>Hello, World!</h1> 2. Open a text editor such as notepad, and
type the code.
<p>This is a simple HTML webpage.</p>
3. Save the file to the html_code folder
</body> located on your desktop with a .html
</html> extension e.g. index.html
4. Double click the file to preview the
document in your web browser.
 Example
Preview in the web browser.
HTML TAGS
There are numerous HTML Tags which can be utilized in your webpages. They are as follows:
Tag Name Code Example Browser View
<!-- comment <!--This can be viewed in the HTML part of a document--> Nothing will show

<a href="http://www.domain.com/">
<a - anchor Visit Our Site
Visit Our Site</a>

<b> bold <b>Example</b> Example

<big> big (text) <big>Example</big> Example

<body> body of HTML document <body>The content of your HTML page</body> Contents of your web page

The contents of your web page

<br> line break The contents of your page<br>The contents of your page
The contents of your web page

<center> center <center>This will center your contents</center>

This will center your contents
HTML TAGS Cont’d
<embed src="yourfile.mid" autostart="true"
embed hidden="false" loop="false">
<embed> Music will begin playing when your page is loaded and will
object <noembed><bgsound src="yourfile.mid"
only play one time. A control panel will be displayed to enable
loop="1"></noembed>
your visitors to stop the music.

<font> font <font face="Times New Roman">Example</font> Example

<font face="Times New Roman"

<font> font Example
size="4">Example</font>

<font> font
<font face="Times New Roman" size="+3"
color="#ff0000">Example</font> Example
<form action="mailto:[email protected]">
Name: <input name="Name" value=""
Name:
size="10"><br>
<form> form Email: <input name="Email" value="" Email:
size="10"><br> Submit
<center><input type="submit"></center>
</form>
HTML TAGS Cont’d

<i> italic <i>Example</i> Example

HTML TAGS Cont’d
Example 1:

<menu> Example 1:
<li type="disc">List item 1</li>
<li type="circle">List item 2</li>  List item 1
<li type="square">List item 3</li> o List item 2
 List item 3
</MENU>

<li> list item

Example 2:
Example 2:
<ol type="i"> i. List item 1
<li>List item 1</li> ii. List item 2
<li>List item 2</li> iii. List item 3
<li>List item 3</li> iv. List item 4
<li>List item 4</li>
</ol>
HTML TAGS Cont’d

listbox option <form method=post action="/cgi-bin/example.cgi">

<center>
Select an option:
<select>
<option>option 1</option>
<option selected>option 2</option> Select an option:
<option> listbox option <option>option 3</option> option 2
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
</center>
</form>
HTML TAGS Cont’d
<p align="left">
Example 1:<br />
<br /> Example 1:
This is an example<br>
This is an example
displaying the use<br> displaying the use
of the paragraph tag.</p> of the paragraph tag.
<p align="right">
Example 2:<br> Example 2:
<p> paragraph
<br>
This is an example<br> This is an example
displaying the use<br> displaying the use
of the paragraph tag.</p>
of the paragraph tag.
<p align="center">
Example 3:
Example 3:<br>
<br> This is an example
This is an example<br> displaying the use
displaying the use<br> of the paragraph tag.
of the paragraph tag.</p>
 Example 1:
<table border="4" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td> Example 1:
</tr>
</table> Column 1 Column 2
Example 2: (Internet Explorer)

<table border="2" bordercolor="#336699" cellpadding="2" cellspacing="2" width="100%">

<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr> Example 2:
<table> table
</table>
Column 1 Column 2
Example 3:

<table cellpadding="2" cellspacing="2" width="100%">

<tr> Example 3:
<td bgcolor="#cccccc">Column 1</td>
<td bgcolor="#cccccc">Column 2</td> Column 1 Column 2
</tr>
<tr> Row 2 Row 2
<td>Row 2</td>
<td>Row 2</td>
</tr>
</table>
 <table border="2" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td> table data
<td>Column 2</td> Column 1 Column 2
</tr>
</table>

<div align="center">
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>Row 2</td> Column 1 Column 2 Column 3
<td>Row 2</td>
Row 2 Row 2 Row 2
<td>Row 2</td>
<th> table header
</tr>
Row 3 Row 3 Row 3
<tr>
<td>Row 3</td> Row 4 Row 4 Row 4
<td>Row 3</td>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr></table></div>
 document Title of your web page will be viewable in the title
<title> <title>Title of your HTML page</title>
title bar.

<table border="2" cellpadding="2" cellspacing="2"

width="100%">
<tr>
<tr> table row <td>Column 1</td> Column 1 Column 2
<td>Column 2</td>
</tr>
</table>

Example 1:<br>
<br>
<ul> Example 1:
<li>List item 1</li>
<li>List item 2</li>  List item 1
</ul>  List item 2
<br>
Example 2:<br>
<ul> unordered list
<ul type="disc">
Example 2:
<li>List item 1</li>
<li>List item 2</li>  List item 1
<ul type="circle">  List item 2
<li>List item 3</li> o List item 3
<li>List item 4</li> o List item 4
</ul>
</ul>
A WEB SERVER
What is a web server?
◦ A web server is a software application or hardware device that serves content (such as web pages,
images, files) to clients over the internet or a local network. It responds to requests from web browsers
or other web-enabled clients by delivering the requested content via the Hypertext Transfer Protocol
(HTTP) or its secure variant (HTTPS).
◦ HTTP Protocol: Web servers typically communicate with clients using the HTTP protocol. When a web
browser sends a request for a webpage or file, the web server processes the request and sends back the
requested content along with an HTTP response code indicating the status of the request (e.g., 200 for
success, 404 for not found).
◦ Client-Server Architecture: Web servers operate on a client-server model, where the server (the web
server) responds to requests from clients (web browsers or other client applications). This architecture
allows multiple clients to access the same web server simultaneously.
What is a web server?
◦ Examples: Some popular web server software includes Apache HTTP Server, Microsoft Internet
Information Services (IIS), and LiteSpeed Web Server. These servers can run on various operating
systems, such as Linux, Windows, and macOS.

◦ Configuration and Management: Web servers can be configured to serve different types of content,
manage user authentication, handle security features (such as SSL/TLS encryption), and optimize
performance. Administrators can typically manage and configure web servers through a graphical
interface or by editing configuration files.
XAMPP
◦ XAMPP is a free and open-source cross-platform web server solution stack package developed by
Apache Friends. The name "XAMPP" is an acronym that stands for:
• X: Stands for "Cross-platform," meaning it can run on various operating systems such as Windows,
macOS, Linux, and more.
• A: Stands for "Apache," which is the web server software included in the package.
• M: Stands for "MySQL," which is a relational database management system (RDBMS) included in the
package.
• P: Stands for "PHP," which is a popular server-side scripting language used for web development.
• P: Stands for "Perl," which is another programming language often used for web development.
XAMPP
◦ In addition to Apache, MySQL, PHP, and Perl, XAMPP also typically includes other useful tools and
software components such as phpMyAdmin, OpenSSL, and more. These tools help developers set up a
local web development environment quickly and easily without having to manually install and configure
each component separately.
◦ XAMPP is particularly popular among developers for its simplicity and ease of use. It provides a
complete and ready-to-use environment for developing and testing web applications locally on a
personal computer before deploying them to a live server.
◦ Overall, XAMPP is a valuable tool for developers looking to create and test web applications in a local
environment before deploying them to a live server. It simplifies the process of setting up a web server
environment and provides a convenient way to work on web projects offline.
XAMPP
Installation
◦ Link to download
https://www.apachefriends.org/

◦ Select the appropriate Download based on

your Operating System
XAMPP

1. Start Apache Service

2. Start MySQL Service
HTDOCS
After the xampp installation, the htdocs folder will have some files preloaded.
HTDOCS
For our ease and convenience, let’s clear all the files in the htdocs folder.
Steps:
1. Navigate to your C drive and locate the xampp folder.
2. Open the htdocs folder inside xampp.
3. Highlight and Delete all files in the htdocs folder.

Note: We’ll add our own files soon!

Testing the Install
1. Copy and paste the index.html file
created earlier into the htdocs folder
located in xampp.
2. Open a new tab in your web browser and
type http://127.0.0.1/

Your simple webpage should preview as

shown.
Local Host
You ask why use http://127.0.0.1/?

◦ 127.0.0.1 is the loopback Internet protocol (IP) address also referred to as the “localhost.”

◦ The address is used to establish an IP connection to the same machine or computer being
used by the end-user.

◦ Therefore, you may also enter the url: http://localhost/ to load your webpage. Try it!
 Create a sample webpage using the following HTML Tags:

◦ Heading 1 (<h1>)
◦ Paragraph (<p>)
◦ Heading 2 (<h2>)
Activity ◦ Bold (<b>)
◦ Underline (<u>)
◦ Unordered List (<ul> and <li>)
◦ Image (<img>)
◦ Font <font>
Sample
Solution
Sample
Solution
Questions
References
◦ ASP tutorial. (n.d.). W3Schools Online Web
Tutorials. https://www.w3schools.com/asp/asp_introduction.asp
◦ PHP: Hypertext preprocessor (PHP). (23, May 11).
WebDev. https://www.memphis.edu/webdev/scripts/php.php
◦ Introduction to JSP. (2023, November 2).
GeeksforGeeks. https://www.geeksforgeeks.org/introduction-to-jsp/
◦ Introduction to HTML. (n.d.). W3Schools Online Web
Tutorials. https://www.w3schools.com/html/html_intro.asp
◦ 127.0.0.1 – What are its uses and why is it important? - Tech-FAQ. (2019, April 6). Tech-FAQ -
. https://www.tech-faq.com/127-0-0-1.html