Internet Programming I Chapter One - Introduction

College of Engineering, Technology and Computational Sciences

Department of Computer Science

Course Title: Internet Programming I (COSC 3031)

Topic: Introduction

Topic Contents

1. Introduction
1.1 The Internet
1.2 Web Based Technologies
1.3 History of HTML and the WWW
1.4 Introduction to Web Page Design
1.5 Publishing Web content
1.6 Types of HTML editors

Objectives
After studying this chapter, you should be able to:
 Discuss about the internet, its advantages and drawbacks, and major services over
the internet
 Describe the major web technologies such as the web server, browser, protocols, API,
framework etc.…
 Gather knowledge about the history of the Internet, WWW, and HTML
 List and describe the phases in web development
 Differentiate between the most widely used HTML editors and discuss the common
features of each editor

Compiled By: Ephrem Tesfaye Tsidu 1

Internet Programming I Chapter One - Introduction

Hello friends, I’m glad you're here. "Internet Programming I" is a challenging and engaging course
that offers you the chance to develop new skills. The creation of websites and web applications
that can be accessed via the Internet is referred to as internet programming. It entails producing
online material that can be seen in a web browser, such as web pages and applications. Several
computer languages, including HTML, CSS, JavaScript, PHP, Python, Ruby, and Java, are used
to create web applications. The choice of language relies on the requirements of the project and
each of these languages has strengths and drawbacks. Any language coding proficiency is a good
skill. Even the most complicated websites are still constructed using HTML, the building blocks
of the internet. The basic technologies used to develop websites are HTML, CSS, and JS. When
developing websites, you're considerably better off if you can comprehend how they interact.

The three fundamental static web development tools—HTML, CSS, and JS—will be covered in
this course. In contrast to dynamic web pages, which are produced by a web application, a static
web page (also known as a flat page or a stationary page) is a web page that is presented to the
user's web browser exactly as saved. As a result, a static web page frequently shows the same
information to all users, regardless of their context, provided that the web server has the current
ability to negotiate the document's content-type or language, provided that such versions are
accessible and the server is set up to do so. However, JavaScript on a webpage can add client-side
dynamic functionality, which might give the static web page some degree of dynamic capability.

The main web technologies, including the Internet, Web server, browser, programming languages,
protocols, etc., as well as the history of HTML and the World Wide Web, an introduction to web
design, publishing a website, and HTML editors, will be covered in this chapter.

Compiled By: Ephrem Tesfaye Tsidu 2

Internet Programming I Chapter One - Introduction

1.1 The Internet

Discuss and differentiate the terms Intranet and Extranet.

The Internet is a global network (WAN) of connected computing resources. Network is a group of
two or more computer connected together. No company owns the Internet; it is a cooperative effort
governed by a system of standards and rules. The purpose of connecting computers together, of
course, is to share information. It's important to realize that the Internet is a global network of
physical cables, which can include copper telephone wires, TV cables, and fiber optic cables. Even
wireless connections like Wi-Fi and 3G/4G rely on these physical cables to access the Internet.

When you visit a website, your computer sends a request over these wires to a server. A server is
where websites are stored, and it works a lot like your computer's hard drive. Once the request
arrives, the server retrieves the website and sends the correct data back to your computer. What's
amazing is that this all happens in just a few seconds!

 It uses the standard Internet Protocol TCP/IP. (Transmission Control Protocol / Internet
Protocol)
 Every computer in internet is identified by a unique IP address. IP Address is a unique set
of numbers which identifies a computer location.
 Domain Name server (DNS) is used to give name to the IP Address so that user can locate
a computer by a name.
o For example, a DNS server will resolve a name http://www.google.com to a particular
IP address to uniquely identify the computer on which this website is hosted.

The word “internetted” was used as early as 1849, meaning interconnected or interwoven. The
word Internet was used in 1945 by the United States War Department in a radio operator's manual,
and 1974 as the shorthand form of Internetwork

Advantage of Internet Disadvantage of Internet

Information sharing Threat to personal information
Communication i.e. social networking Virus attack
Sharing of resource Spamming
Cyber crime

Compiled By: Ephrem Tesfaye Tsidu 3

Internet Programming I Chapter One - Introduction

History of the Internet (Reading assignment)

With reference to the following online resources, students are expected to understand and come up with

a concise note on this issue.

https://en.wikipedia.org/wiki/Internet#History

https://www.javatpoint.com/history-of-the-internet

https://youtu.be/9hIQjrMHTv4

Internet Based Services

Internet Services allows us to access huge amount of information such as text, graphics, sound and
software over the internet. Following diagram shows the four different categories of Internet
Services.

Internet Services

Communication Information
Web Service World Wide Web
Service Retrieval Service

Communication Services

There are various Communication Services available that offer exchange of information with
individuals or groups. The following list gives a brief introduction to these services:

1. Electronic Mail - Used to send and receive electronic message over the internet. The
common protocols for email delivery are Post Office Protocol (POP), Internet Message
Access Protocol (IMAP), and Simple Mail Transfer Protocol (SMTP). Each of these
protocols has a standard methodology to deal with the emails and also has defined
functions. Email protocol is a set of rules defined to ensure that emails can be exchanged
between various servers and email clients in a standard manner. This ensures that the email
is universal and works for all users.

Compiled By: Ephrem Tesfaye Tsidu 4

Internet Programming I Chapter One - Introduction

Example: A sender using an Apple email client with a Gmail server can send an email to
another user using a Zoho mail server on an Outlook email client. This is possible because
the servers and the email clients follow the rules and standards defined by the email
protocols.
POP Protocol - POP stands for Post Office Protocol. Email clients use the POP protocol
support in the server to download the emails. This is primarily a one-way protocol and does
not sync back the emails to the server.
IMAP Protocol - IMAP stands for Internet Message Access Protocol. IMAP Protocol is
used to sync the emails in the server with the email clients. It allows two-way sync of
emails between the server and the email client, while the emails are stored on the server.
SMTP Protocol - SMTP stands for Simple Mail Transfer Protocol. SMTP is the principal
email protocol that is responsible for the transfer of emails between email clients and email
servers.
2. Telnet - Used to log on to a remote computer that is attached to internet. Telnet is a network
protocol used to virtually access a computer and to provide a two-way, collaborative and
text-based communication channel between two machines.
3. Newsgroup - Offers a forum for people to discuss topics of common interests. A
newsgroup is an Internet-based discussion around an individual, entity, organization or
topic. Newsgroups enable remotely connected users to share, discuss and learn about their
topic of interest by exchanging text messages, images, videos and other forms of digital
content. Newsgroups are also referred to as usenet. The communication protocol used by
newsgroups is called Network News Transfer Protocol, or NNTP.
4. Internet Telephony (VoIP) - Allows the internet users to talk across internet to any PC
equipped to receive the call.
5. Instant Messaging - Offers real time chat between individuals and group of people. E.g.
Yahoo messenger, MSN messenger.
6. Video Conferencing - Video conferencing or Video teleconferencing is a method of
communicating by two-way video and audio transmission with help of telecommunication
technologies.

Compiled By: Ephrem Tesfaye Tsidu 5

Internet Programming I Chapter One - Introduction

o Modes of Video Conferencing

 Point-to-Point - This mode of conferencing connects two locations only.
 Multi-point - This mode of conferencing connects more than two locations through
Multi-point Control Unit (MCU).

Information Retrieval Services

There exist several Information retrieval services offering easy access to information present on
the internet. The following list gives a brief introduction to these services:

1. File Transfer Protocol (FTP) - FTP is a standard internet protocol provided by TCP/IP
used for transmitting the files from one host to another. It is mainly used for transferring
the web page files from their creator to the computer that acts as a server for other
computers on the internet. It is also used for downloading the files to computer from other
servers.
2. Archie - It’s updated database of public FTP sites and their content. It helps to search a file
by its name.
3. Gopher - Used to search, retrieve, and display documents on remote sites.
4. Very Easy Rodent Oriented Netwide Index to Computer Achieved (VERONICA) -
VERONICA is gopher based resource. It allows access to the information resource stored
on gopher’s servers.

Web Services

Web services allow exchange of information between applications on the web. Using web services,
applications can easily interact with each other. The web services are offered using concept of
Utility Computing - is a service provisioning model where a provider makes computing resources,
infrastructure management and technical services available to customers as they need them. The
provider then charges the customer for the amount of services they use rather than a flat-rate fee.

World Wide Web (WWW)

WWW is also known as W3. It offers a way to access documents spread over the several servers
over the internet. These documents may contain texts, graphics, audio, video, hyperlinks. The
hyperlinks allow the users to navigate between the documents.

Compiled By: Ephrem Tesfaye Tsidu 6

Internet Programming I Chapter One - Introduction

1.2 Basic Web Technologies

Since computers can’t communicate with each other the way people do, they require codes instead.
Web technologies are the markup languages such as HTML, XML, and XHTML and multimedia
packages computers use to communicate.

A. Web Site

A website is a collection of web pages and related content that is identified by a common domain
name and published on at least one web server. Websites are typically dedicated to a particular
topic or purpose, such as news, education, commerce, entertainment or social networking.
Hyperlinking between web pages guides the navigation of the site, which often starts with a home
page. As of December 2022, the top 5 most visited websites are Google Search, YouTube,
Facebook, Twitter, and Instagram.

Accessing a website

A website is accessed using its address called Uniform Resource Locator (URL).

A URL (Uniform Resource Locator) is a unique identifier used to locate a resource on the Internet.
It is also referred to as a web address. URLs consist of multiple parts -- including a protocol and
domain name -- that tell a web browser how and where to retrieve a resource.

End users use URLs by typing them directly into the address bar of a browser or by clicking a
hyperlink found on a webpage, bookmark list, in an email or from another application.

The URL contains the name of the protocol needed to access a resource, as well as a resource
name. The first part of a URL identifies what protocol to use as the primary access medium. The
second part identifies the IP address or domain name -- and possibly subdomain -- where the
resource is located.

URL protocols include HTTP (Hypertext Transfer Protocol) and HTTPS (HTTP Secure) for web
resources, mail to for email addresses, FTP for files on a File Transfer Protocol (FTP) server, and
telnet for a session to access remote computers. Most URL protocols are followed by a colon and
two forward slashes; "mail to" is followed only by a colon.

Compiled By: Ephrem Tesfaye Tsidu 7

Internet Programming I Chapter One - Introduction

Optionally, after the domain, a URL can also specify:

o a path to a specific page or file within a domain;

o a network port to use to make the connection;
o a specific reference point within a file, such as a named anchor in an HTML file; and
o a query or search parameters used -- commonly found in URLs for search results.

Example: Using the URL https://www.techtarget.com/whatis/search/query?q=URL as an

example, components of a URL can include:

 The protocol or scheme. Used to access a resource on the internet. Protocols include http,
https, ftps, mailto and file. The resource is reached through the domain name system (DNS)
name. In this example, the protocol is https.
 Host name or domain name. The unique reference the represents a webpage. For this
example, techtarget.com.
The Domain Name System (DNS) turns domain names into IP addresses, which browsers
use to load internet pages. Every device connected to the internet has its own IP address,
which is used by other devices to locate the device. DNS servers make it possible for people
to input normal words into their browsers, such as Fortinet.com, without having to keep
track of the IP address for every website.

A DNS server is a computer with a database containing the public IP addresses associated
with the names of the websites an IP address brings a user to. DNS acts like a phonebook
for the internet. Whenever people type domain names, like Fortinet.com or Yahoo.com,
into the address bar of web browsers, the DNS finds the right IP address. The site’s IP
address is what directs the device to go to the correct place to access the site’s data.

There are many types of domain extensions you can choose for your domain name. This
depends on your business nature.
For example, if you are going to register a domain name for education purpose then you
can choose .edu extension.

Compiled By: Ephrem Tesfaye Tsidu 8

Internet Programming I Chapter One - Introduction

Below is a reference of the correct usage of certain extensions. But there is no hard and
fast rule to go for any extension. Most commonly used is .com
 .com − Stands for company/commercial, but it can be used for any website.
 .net − Stands for network and is usually used for a network of sites.
 .org − Stands for organization and is supposed to be for non-profit bodies.
 .us, .in − They are based on your country names so that you can go for country
specific domain extensions
 .biz − A newer extension on the Internet and can be used to indicate that this site is
purely related to business.
 .info − Stands for information. This domain name extension can be very useful, and
as a new comer it's doing well.
 .tv − Stands for Television and are more appropriate for TV channel sites.
 Port name. Usually not visible in URLs, but necessary. Always following a colon, port 80
is the default port for web servers.
 Path. A path refers to a file or location on the web server. For this example, search/query.
 Query. Found in the URL of dynamic pages. The query consists of a question mark,
followed by parameters. For this example, ?.
 Parameters. Pieces of information in a query string of a URL. Multiple parameters can be
separated by ampersands (&). For this example, q=URL.
 Fragment. This is an internal page reference, which refers to a section within the webpage.
It appears at the end of a URL and begins with a hashtag (#). Although not in the example
above, an example could be #history in the URL
https://en.wikipedia.org/wiki/Internet#History.

Other examples of parts of a URL can include:

The URL mailto:[email protected] initiates a new email addressed to the mailbox

president in the domain whitehouse.gov.

The URL ftp://www.companyname.com/whitepapers/widgets.ps specifies the use of the FTP

protocol to download a file.

Compiled By: Ephrem Tesfaye Tsidu 9

Internet Programming I Chapter One - Introduction

Types of website

A static website is one that has Web pages stored on the server in the format that is sent to a client
Web browser. It is primarily coded in Hypertext Markup Language (HTML); Cascading Style
Sheets (CSS) are used to control appearance beyond basic HTML. Images are commonly used to
create the desired appearance and as part of the main content. Audio or video might also be
considered "static" content if it plays automatically or is generally non-interactive. This type of
website usually displays the same information to all visitors. Similar to handing out a printed
brochure to customers or clients, a static website will generally provide consistent, standard
information for an extended period of time. Although the website owner may make updates
periodically, it is a manual process to edit the text, photos, and other content and may require basic
website design skills and software. Simple forms or marketing examples of websites, such as a
classic website, a five-page website or a brochure website are often static websites, because they
present pre-defined, static information to the user. This may include information about a company
and its products and services through text, photos, animations, audio/video, and navigation menus.

A dynamic website is one that changes or customizes itself frequently and automatically. Server-
side dynamic pages are generated "on the fly" by computer code that produces the HTML (CSS
are responsible for appearance and thus, are static files). A site can display the current state of a
dialogue between users, monitor a changing situation, or provide information in some way
personalized to the requirements of the individual user. For example, when the front page of a
news site is requested, the code running on the webserver might combine stored HTML fragments
with news stories retrieved from a database or another website to produce a page that includes the
latest information. Dynamic sites can be interactive by using HTML forms, storing and reading
back browser cookies, or by creating a series of pages that reflect the previous history of clicks.
Another example of dynamic content is when a retail website with a database of media products
allows a user to input a search request, e.g. for the keyword Beatles. In response, the content of
the Web page will spontaneously change the way it looked before, and will then display a list of
Beatles products like CDs, DVDs, and books. Dynamic HTML uses JavaScript code to instruct
the Web browser how to interactively modify the page contents. One way to simulate a certain
type of dynamic website while avoiding the performance loss of initiating the dynamic engine on

Compiled By: Ephrem Tesfaye Tsidu 10

Internet Programming I Chapter One - Introduction

a per-user or per-connection basis is to periodically automatically regenerate a large series of static

pages.

Advantages of using web based systems

1. Lower Development Costs - A web-based application runs in a web browser. That means
that a single, responsive web application can be used across multiple device types.
Although web apps will need to be tested on different browsers, there is no need to test
them on different operating systems. This makes development and testing much easier. It
cuts development costs and reduces development time.
2. Easy Installation and Maintenance - Unlike traditional software that is loaded on each
device, web applications run from a host server. There is no installation on local machines.
Software upgrades are all completed centrally. That reduces the costs of installing and
upgrading software. It also ensures that all users are always using the same version of the
software.
3. Accessible Anywhere Anytime- Users can access a web-based system anywhere and
anytime. So long as they have an internet connection, a web browser, and the appropriate
login details. This means that users can access the data they need when they are away from
the office. It also brings the possibility of staff working from home.
4. Easy Data Sharing and Collaboration - The sharing of data and collaborating on projects
is made much easier with web-based systems. Data is stored in one central location, so
users can share data and work together on projects. It is also easier to integrate web-based
systems than isolated desktop applications.
5. Increased Customer Base – more access to potential customers with no restrictions or
limitations to geographical location. Better advertisement opportunity with minimum cost
and effort.

B. Web Server

Web server is a computer where the web content is stored. Basically web server is used to host the
web sites. The application code is usually stored on the server. The clients make requests to the
servers. The servers then respond to those requests after gathering the requested information.

Compiled By: Ephrem Tesfaye Tsidu 11

Internet Programming I Chapter One - Introduction

The most leading web servers available today:

1. Apache HTTP Server

This is the most popular web server in the world developed by the Apache Software Foundation.
Apache web server is an open source software and can be installed on almost all operating systems
including Linux, UNIX, Windows, FreeBSD, Mac OS X and more. About 60% of the web server
machines run the Apache Web Server.

2. Internet Information Services (IIS)

The Internet Information Server (IIS) is a high performance Web Server from Microsoft. This web
server runs on Windows NT/2000 and 2003 platforms (and may be on upcoming new Windows
version also). IIS comes bundled with Windows NT/2000 and 2003; Because IIS is tightly
integrated with the operating system so it is relatively easy to administer it.

3. Lighttpd

The lighttpd, pronounced lighty is also a free web server that is distributed with the FreeBSD
operating system. This open source web server is fast, secure and consumes much less CPU power.
Lighttpd can also run on Windows, Mac OS X, Linux and Solaris operating systems.

4. Sun Java System Web Server

This web server from Sun Microsystems is suited for medium and large web sites. Though the
server is free it is not open source. It however, runs on Windows, Linux and UNIX platforms. The
Sun Java System web server supports various languages, scripts and technologies required for Web
2.0 such as JSP, Java Servlets, PHP, Perl, Python, and Ruby on Rails, ASP and Coldfusion etc.

5. Jigsaw Server

Jigsaw (W3C's Server) comes from the World Wide Web Consortium. It is open source and free
and can run on various platforms like Linux, UNIX, Windows, and Mac OS X Free BSD etc.
Jigsaw has been written in Java and can run CGI scripts and PHP programs.

Compiled By: Ephrem Tesfaye Tsidu 12

Internet Programming I Chapter One - Introduction

Other server types based on their uses

 Mail server - A mail server facilitates email storage and management for clients.
 Application server - An application server provides an environment that helps develop,
process, and run web-based applications, irrespective of their functionality. The server
executes computer programs or scripts essential for running PHP, Java, or .Net
applications.
 Database server - Database servers offer database services to client computers. Users can
access, modify, store, and retrieve data from a database by executing a query.
 DNS server - DNS servers are domain name servers. These computers resolve server
names that reside in a network.
 File server - A file server refers to a machine that provides shareable disks that can be
accessed by the workstations on a network. The disk holds computer files such as text files,
images, graphic files, audio & video files, and so on. File servers are typically used for
storage purposes. Hence, they neither run computer programs nor perform computational
tasks.
 Print server - Print servers connect printing devices to clients on a network. They accept
print tasks from users and queue them in anticipation that printers can fail to cope with the
number of requests received in a certain timeframe.

C. Web Browser

Browsers request information and then they show us in the way we can understand. Think of them
as the interpreters of the web. Here are the most popular ones:

Google Chrome – Currently, the most popular browser brought to you by Google

Safari – Apple’s web browser

Firefox – Open-source browser supported by the Mozilla Foundation

Internet Explorer – Microsoft’s browser

Opera - Microsoft Windows, macOS Beta: iOS Android

Compiled By: Ephrem Tesfaye Tsidu 13

Internet Programming I Chapter One - Introduction

D. Protocol

The instructions for how to pass information back and forth between computers and devices are
commonly known as protocols.

HTTP - Thanks to this protocol, each website can get to the browser. The protocol requests the
website from Google’s server and then receives a response with the HTML, CSS, and JavaScript
of the website.

The Hypertext Transfer Protocol (HTTP) is an application-level protocol for distributed,

collaborative, hypermedia information systems. This is the foundation for data communication for
the World Wide Web (i.e. internet) since 1990.

Hypertext is text displayed on a computer display or other electronic devices with references to
other text that the reader can immediately access. Hypertext documents are interconnected by
hyperlinks, which are typically activated by a mouse click, keypress set, or screen touch.

E. Programming Language

As we explained before, since computers don’t use languages that are anything like human
languages, they need a different way to communicate. Here are some of the most popular
programming languages used in web development:

 JavaScript is the most popular programming language with 62.5% of respondents

claiming to use it. Often abbreviated as JS, is a programming language that is one of the
core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98%
of websites use JavaScript on the client side for webpage behavior, often incorporating
third-party libraries. All major web browsers have a dedicated JavaScript engine to execute
the code on users' devices.
JavaScript engines were originally used only in web browsers, but are now core
components of some servers and a variety of applications. The most popular runtime
system for this usage is Node.js.
Although Java and JavaScript are similar in name, syntax, and respective standard libraries,
the two languages are distinct and differ greatly in design.

Compiled By: Ephrem Tesfaye Tsidu 14

Internet Programming I Chapter One - Introduction

Common and basic uses of JS:

 Web page animations, such as fading objects in and out, resizing, and
moving them.
 Playing browser games.
 Controlling the playback of streaming media.
 Generating pop-up ads or alert boxes.
 Validating input values of a web form before the data is sent to a web server.
 ASP (Active Server Pages -- Developed and maintained by Microsoft-- ), JSP (Java
Server Pages -- Sun Microsystems and is maintained by Oracle-- ), and PHP (Hypertext
Pre-Processor -- Zend Technologies, PHP Foundation-- ) are the most popular server side
scripting languages, used to build dynamic webpages. Data manipulation and business
logics like storing, retrieving, and updating data from and to database is done using these
programming languages.
 Other programming languages (PERL, Python, Ruby…)
F. Web Development Framework

Web development frameworks are a starting point of items that a developer can use to avoid doing
the simple or mundane tasks, and instead get right to work. Web frameworks provide a standard
way to build and deploy web applications on the World Wide Web. Web frameworks aim to
automate the overhead associated with common activities performed in web development. For
example, many web frameworks provide libraries for database access, templating frameworks, and
session management, and they often promote code reuse. Although they often target development
of dynamic web sites, they are also applicable to static websites.

Popular Frameworks:

 Angular is one of the latest web technologies designed specifically for developing
dynamic web applications. With this framework, you can easily create front-end based
applications without needing to use other frameworks or plugins. The features include well-
made templates, code generation, code splitting etc. All the expressions are like code
snippets that enclosed within curly braces and do not use any loops or conditional
statements.

Compiled By: Ephrem Tesfaye Tsidu 15

Internet Programming I Chapter One - Introduction

 Ruby on Rails is a server-side website technology that makes app development much
easier and faster. The thing that really sets this framework apart is the reusability of the
code as well as some other cool features that will help you get the job done in no time.
 Yii is an open-source web application development framework built in PHP5. It is
performance-optimized and comes with a number of great tools for debugging and app
testing. Another plus is that it is pretty simple and easy to use.
 Meteor JS is written in Node.js and it makes it possible for you to create real-time web
applications for different platforms. The framework for creating simple websites for
personal use really stands out with Meteor JS. This is an open-source isomorphic
JavaScript web framework which also means that the webpage loading time is significantly
shorter. JavaScript stack also makes it possible to get the same results with fewer lines of
code than usual.
 Express.js Developed in Node.js, is a web app development network that is great for those
who need to develop apps and APIs as fast as possible. A lot of great features are provided
with the help of plugins.
 Django is one of the most popular frameworks written in Python and follows MVC
architecture. It makes the app development process much easier thanks to its simplicity.
Django simplifies using Python a lot and provides multiple tools that make a web app
developer’s life easier.
 Laravel is a PHP development framework ideal for small websites. It comes with a number
of useful features including the MVC support, object-oriented libraries, Artisan,
authorization technique, database migration, etc. Currently, it is one of the most
community-supported and community-developed frameworks, and given that PHP has one
of the largest communities out there, Laravel is a great tool powering both small websites
and large-scale B2B portals managing millions of transactions daily.
G. Application Programming Interface

An API (application programming interface) allows other developers to use some of the app’s
functionality without sharing the code. The endpoints are exposed by the developers while the API
can control access with an API key. Examples of well-made APIs are those created by Facebook,
Twitter, and Google for their web services.

Compiled By: Ephrem Tesfaye Tsidu 16

Internet Programming I Chapter One - Introduction

APIs are mechanisms that enable two software components to communicate with each other using
a set of definitions and protocols. For example, the weather bureau’s software system contains
daily weather data. The weather app on your phone “talks” to this system via APIs and shows you
daily weather updates on your phone.

H. Data Formats

Data is stored in a structure called a data format.

 JSON – JavaScript Object Notation is a syntax for storing and exchanging data (just like
XML). It is currently becoming the most popular data format out there.
 XML – Predominantly used by Microsoft systems, it used to be the most popular data
format.
 CSV – is data formatted by commas; for example Excel data.

1.3 History of HTML and the WWW

The World Wide Web ("WWW", "W3" or, simply, "the Web") is a global information medium
which users can access via computers connected to the Internet. The term is often mistakenly used
as a synonym for the Internet, but the Web is a service that operates over the Internet, just as email
and Usenet do. The history of the Internet and the history of hypertext date back significantly
farther than that of the World Wide Web.

Tim Berners-Lee invented the World Wide Web while working at CERN in 1989. He proposed a
"universal linked information system" using several concepts and technologies, the most
fundamental of which was the connections that existed between information. He developed the
first web server, the first web browser, and a document formatting protocol, called Hypertext
Markup Language (HTML). After publishing the markup language in 1991, and releasing the
browser source code for public use in 1993, many other web browsers were soon developed, with
Marc Andreessen's Mosaic (later Netscape Navigator), being particularly easy to use and install,
and often credited with sparking the Internet boom of the 1990s. It was a graphical browser which
ran on several popular office and home computers, bringing multimedia content to non-technical
users by including images and text on the same page.

Compiled By: Ephrem Tesfaye Tsidu 17

Internet Programming I Chapter One - Introduction

Websites for use by the general public began to emerge in 1994. This spurred competition in server
and browser software, highlighted in the Browser wars which was initially dominated by Netscape
Navigator and Internet Explorer. Following the complete removal of commercial restrictions on
Internet use by 1995, commercialization of the Web amidst macroeconomic factors led to the dot-
com boom and bust in the late 1990s and early 2000s.

The features of HTML evolved over time, leading to HTML version 2 in 1995, HTML3 and
HTML4 in 1997, and HTML5 in 2014. The language was extended with advanced formatting in
Cascading Style Sheets (CSS) and with programming capability by JavaScript. AJAX
programming delivered dynamic content to users, which sparked a new era in Web design, styled
Web 2.0. The use of social media, becoming common-place in the 2010s, allowed users to
compose multimedia content without programming skills, making the Web ubiquitous in every-
day life.

1.4 Introduction to Web Page Design

Over the years, the term “web design” has become a catchall for a process that encompasses a
number of different disciplines, from user experience design, to document markup, to serious
programming. This section describes some of the most common roles.

If you are designing a small website on your own, you will need to wear many hats. The good
news is that you probably won’t notice. Consider that the day-to-day upkeep of your household
requires you to be part-time chef, housecleaner, accountant, diplomat, gardener, and construction
worker— but to you it’s just the stuff you do around the house. In the same way, as a solo web
designer, you may be a part-time graphic designer, writer, HTML author, and information
architect, but to you, it’ll just feel like “making web pages.” Nothing to worry about.

Large-scale websites are almost always created by a team of people, numbering from a handful to
hundreds. In this scenario, each member of the team focuses on one facet of the site-building
process. If that is the case, you may be able to simply adapt your current set of skills (writing,
Photoshop, programming, etc.) and interests to the new medium.I’ve divided to categorize the
roles and responsibilities typically covered under the umbrella term “web design” into four very
broad categories: design, development, content strategy, and multimedia.

Compiled By: Ephrem Tesfaye Tsidu 18

Internet Programming I Chapter One - Introduction

1. Design

Ah, design! It sounds fairly straightforward, but even this simple requirement has been divided
into a number of specializations when it comes to creating sites. Here are a few of the new job
descriptions related to designing a site, but bear in mind that the disciplines often overlap and that
the person calling herself the “Designer” often is responsible for more than one (if not all) of these
responsibilities.

User Experience, Interaction, and User Interface design Often, when we think of design, we think
about how something looks. On the Web, the first matter of business is designing how the site
works. Before picking colors and fonts, it is important to identify the site’s goals, how it will be
used, and how visitors move through it. These tasks fall under the disciplines of Interaction Design
(IxD), User Interface (UI) design, and User Experience (UX) design. There is a lot of overlap
between these responsibilities, and it is not uncommon for one person or team to handle all three.

The goal of the Interaction Designer is to make the site as easy, efficient, and delightful to use as
possible. Closely related to interaction design is User Interface design, which tends to be more
narrowly focused on the functional organization of the page as well as the specific tools (buttons,
links, menus, and so on) that users use to navigate content or accomplish tasks.

A more recent job title in the web design realm is the User Experience Designer. The UX designer
takes a more holistic view—ensuring the entire experience with the site is favorable. UX design is
based on a solid understanding of users and their needs based on observations and interviews.

According to Donald Norman (who coined the term), user experience design includes “all aspects
of the user’s interaction with the product: how it is perceived, learned, and used.” For a website or
application, that includes the visual design, the user interface, the quality and message of the
content, and even overall site performance. The experience must be in line with the organization’s
brand and business goals in order to be successful.

Some of the documents an IxD, UI, or UX designer might produce include:

Compiled By: Ephrem Tesfaye Tsidu 19

Internet Programming I Chapter One - Introduction

User research and testing reports

Understanding the needs, desires, and limitations of users is central to the success of the design of
the site or web application. This approach of designing around the user’s needs is referred to as
User Centered Design (UCD), and it is central to contemporary design. Site designs often start
with user research, including interviews and observations, in order to gain a better understanding
of how the site can solve problems or how it will be used. It is typical for designers to do a round
of user testing at each phase of the design process to ensure the usability of their designs.

If users are having a hard time figuring out where to find content or how to move to the next step
in a process, then it’s back to the drawing board.

Wireframe diagrams

A wireframe diagram shows the structure of a web page using only outlines for each content type
and widget. The purpose of a wireframe diagram is to indicate how the screen real estate is divided
and indicate where functionality and content such as navigation, search boxes, form elements, and
so on, are placed, without any decoration or graphic design. They are usually annotated with
instructions for how things should work so the development team knows what to build.

Compiled By: Ephrem Tesfaye Tsidu 20

Internet Programming I Chapter One - Introduction

Site diagram

A site diagram indicates the structure of the site as a whole and how individual pages relate to one
another. Some site diagrams fill entire walls!

Visual (graphic) design

Because the Web is a visual medium, web pages require attention to presentation and design. A
graphic designer creates the “look and feel” of the site—logos, graphics, type, colors, layout, etc.—
to ensure that the site makes a good first impression and is consistent with the brand and message
of the organization it represents. Visual designers typically generate sketches of the way the site
might look. They may also be responsible for producing the graphic files in a way that is optimized
for delivery over the Web.

Compiled By: Ephrem Tesfaye Tsidu 21

Internet Programming I Chapter One - Introduction

2. Development

A fair amount of the web design process involves the creation and troubleshooting of the
documents, style sheets, scripts, and images that make up a site. At web design firms, the team that
handles the creation of the files that make up the website (or templates for pages that get assembled
dynamically) is usually called the development or production department.

Web developers may not design the look or structure of the site themselves, but they do need to
communicate well with designers and understand the intended site goals so they may suggest
solutions that meet those goals.

The broad disciplines that fall under development are authoring, styling, and
scripting/programming.

Authoring/markup

Authoring is the term used for the process of preparing content for delivery on the Web, or more
specifically, marking up the content with HTML tags that describe its content and function. If you
want a job as a web developer, you need to have an intricate knowledge of HTML and how it
functions on various browsers and devices. The HTML specification is constantly evolving, which
means you’ll need to keep up with the latest best practices and opportunities as well as bugs and
limitations.

Styling

In web design, the appearance of the page in the browser is controlled by style rules written in CSS
(Cascading Style Sheets).

Scripting and programming

As the Web has evolved into a platform of applications for getting stuff done, programming has
never been more important. JavaScript is the language that makes elements on web pages do
things. It adds behaviors and functionality to elements in the page and even to the browser window
itself.

Compiled By: Ephrem Tesfaye Tsidu 22

Internet Programming I Chapter One - Introduction

There are other web-related programming languages as well, including PHP, Ruby, Python, and
ASP.NET, that run on the server and process data and information before it is sent to the user’s
browser.

Frontend versus Backend

You may hear web designers and developers say that they specialize in either the frontend or
backend of website creation.

“Frontend” refers to any aspect of the design process that appears in or relates directly to the
browser. This course focuses primarily on frontend web design.

The following tasks are commonly considered to be frontend tasks:

 Graphic design and image production

 Interface design
 Information design as it pertains to the user’s experience of the site
 HTML document and style sheet development
 JavaScript

“Backend” refers to the programs and scripts that work on the server behind the scenes to make
web pages dynamic and interactive. In general, backend web development falls in the hands of
experienced programmers, but it is good for all web designers to be familiar with backend
functionality.

The following tasks take place on the backend:

 Information design as it pertains to how the information is organized on the server

 Forms processing
 Database programming
 Content management systems
 Other server-side web applications using PHP, JSP, Ruby, ASP.NET, Java, and other
programming languages

Compiled By: Ephrem Tesfaye Tsidu 23

Internet Programming I Chapter One - Introduction

3. Content strategy and creation

Third on our list, though ideally first in the actual website creation process, is the critical matter of
the site’s content itself. Anyone who uses the title “web designer” needs to be aware that
everything we do supports the process of getting the content, message, or functionality to our users.
Furthermore, good writing can help the user interfaces we create be more effective.

Of course, someone needs to create the content and maintain it—don’t underestimate the resources
required to do this successfully. In addition, I want to call your attention to two content-related
specialists on the modern web development team: the Content Strategist and Information Architect

(IA).

When the content isn’t written right, the site can’t be fully effective. A Content Strategist makes
sure that every bit of text on a site, from long explanatory text down to the labels on buttons,
supports the brand identity and marketing goals of the company. Content strategy may also extend
to data modeling and content management on a large and ongoing scale, such as planning for
content reuse and update schedules.

An Information Architect (also called an Information Designer) organizes the content logically
and for ease of findability. She may be responsible for search functionality, site diagrams, and how
the content and data is organized on the server. Information architecture is inevitably entwined
with UX and UI design, and it is not uncommon for a single person or team to perform all roles.

4. Multimedia

One of the cool things about the Web is that you can add multimedia elements to a site, including
sound, video, animation, and even interactive games. You may decide to add multimedia skills,
such as audio and video editing or Flash development to your web design tool belt, or you may
decide to go all in and become a multimedia specialist. If you are not interested in becoming a
multimedia developer, you can always hire one. Web development companies usually look for
people who have mastered the standard multimedia tools, and have a good visual sensibility and
an instinct for intuitive and creative multimedia design.

Compiled By: Ephrem Tesfaye Tsidu 24

Internet Programming I Chapter One - Introduction

1.5 Publishing Web content

Web publishing is the process of publishing or hosting original content on the Internet.

The process includes building and uploading websites, updating the associated webpages, and
posting content to these webpages online. Web publishing comprises of personal, business, and
community websites in addition to e-books and blogs.

The content meant for web publishing can include text, videos, digital images, artwork, and other
forms of media.

A publisher requires three things to publish content on the Internet:

 Website development software

 Internet connection
 A web server to host the website

Since web publishing does not demand physical materials like ink and paper, it costs practically
nothing to publish the content.

Thus, anyone fulfilling the above three requirements can become a web publisher. In addition, web
publishing brings countless visitors as the published contents are accessed by global visitors. These
benefits of web publishing opened a new era of personal publishing, which was unimaginable
before.

E-book and blog publishers utilize almost the same web publishing tools used by the website
developers. People who do not have the required web publishing skills seek the services of
professional web publishing individuals or organizations to host, maintain, and modify their
websites, e-books and blogs.

1.6 Types of HTML editors

An HTML editor is a piece of software for creating and editing HTML code. It can be a stand-
alone software dedicated to code writing and editing or a part of an IDE (Integrated Development
Environment).

Compiled By: Ephrem Tesfaye Tsidu 25

Internet Programming I Chapter One - Introduction

An HTML editor provides more advanced features and is specifically designed for developers to
create web pages more efficiently. It ensures every string of code is clean and works properly.

The most common features in a good HTML editor are:

 Syntax highlighting. Differs HTML tags in various colors based on their categories,
making it easier to read and recognize the code structure.
 Auto-completion. Automatically suggests HTML elements and attributes based on
previously added values, saving time when typing a longer piece of code.
 Error detection. Scans for syntax errors whenever you type in code incorrectly to fix the
mistake immediately.
 Search and replace. Helps find particular code and replace them all at once, saving time
from editing each string of code.
 FTP integration. It connects your web server with an FTP client right from the dashboard.
 Code folding. Hides a section of code and focuses on certain parts of the HTML document.

There are two different types of HTML code editors – WYSIWYG and text-based editors. Both
come with their perks and benefits.

WYSIWYG Editor

WYSIWYG stands for “What You See Is What You Get”. As the name suggests, the WYSIWYG
editor shows a live preview of your page as you add or modify elements. In addition, the code
editor provides a visual interface that looks like a typical word processor.

With a WYSIWYG editor, users can add web page elements, such as headings, paragraphs, or
images without touching a line of code – making this type of HTML editor an excellent option for
beginners with little to no coding experience.

Text-based HTML Editor

In contrast to a WYSIWYG editor, a text-based website with an HTML editor is designed to enable
more intricate coding practices. In addition, this type of HTML editor gives advanced users more
control over their work as they can directly modify the code.

Compiled By: Ephrem Tesfaye Tsidu 26

Internet Programming I Chapter One - Introduction

Features like auto-completion, syntax highlighting, and error detection are primarily available in
this type of HTML editor. However, since there is no live preview of your page, it requires enough
HTML knowledge to prevent errors.

Here are the most widely used HTML editors currently (2023)

1. Atom

Atom is one of the most popular HTML editors in the market, and for good reasons. This open-
source code editor aims to offer premium tools while keeping them completely free. In addition,
it comes with open-source packages maintained by the GitHub community.

Web developers can add, modify, and share various source code to improve Atom’s functionality.
They can also customize their interface by choosing the pre-installed themes or creating their own.

Although Atom doesn’t come with a visual editor, it offers a live preview of your webpage. Thus,
you can spot errors easily and fix the code in the text editor.

In addition to writing HTML code, Atom supports multiple programming languages, such as
JavaScript, Node.js, and CSS. It’s also well-integrated with Teletype for easy project collaboration
with other developers.

Compiled By: Ephrem Tesfaye Tsidu 27

Internet Programming I Chapter One - Introduction

Other Atom features include:

Built-in package manager – more than 80 built-in packages available. Users can add up to 8,700
additional packages, as well as develop custom packages.

Multiple panes – split its interface into multiple windows to easily compare and write code across
different files.

Syntax highlighting – makes it easier to spot errors and identify different code types and coding
languages.

Smart auto-completion – helps users to create code faster with its smart autosuggestions.

Atom is available for Windows, OS X, and Linux (64-bit).

2. Notepad++

Notepad++ is a free, open-source HTML editor developed for Windows-based computers. The
program is lightweight and comes with a straightforward user interface. A mobile version is
available for developers to code on the go without installing it into Windows.

Compiled By: Ephrem Tesfaye Tsidu 28

Internet Programming I Chapter One - Introduction

Notepad++ is distributed as free software, and its repository is available on GitHub. Although this
HTML editor is exclusive for Windows platforms, Linux users can use this program via Wine to
add a compatibility layer.

Its flexible user interface allows users to choose between split or full-screen layouts when coding.
On a split-screen layout, users can work on two different documents simultaneously.

This advanced text editor also has multi-language support for web development, from HTML and
CSS to JavaScript and PHP.

Other highlights from Notepad++ include:

Powerful code editing tools – as a Scintilla-based text editor, Notepad++ ensures fast processing
speed with lighter program size.

Plugin integrations – extend functionality and add more advanced features by creating new
plugins or installing third-party plugins from the list.

FTP connection – helps users to directly connect to server files and edit them from the dashboard.

Document map – displays overview and sections of a document, making it easier for users to
navigate within a larger file.

Notepad++ available for Windows and Linux (only via Wine).

3. Sublime text

Compiled By: Ephrem Tesfaye Tsidu 29

Internet Programming I Chapter One - Introduction

Sublime is an HTML editor that resembles Notepad++. It provides cross-platform support and is
available in Windows, Mac, and Linux-based systems. However, this text editor falls under the
freemium category, meaning users can use Sublime for free but will have to buy a license to enjoy
full features.

Built with web developers in mind, Sublime is packed with more advanced tools. For example,
there is a GPU rendering system that helps provide optimal performance across operating systems.

The most recent version also supports TypeScript, JSX, and TSX, along with many other
programming languages.

Upon activation, the program shows a basic text editor with no sidebar or tools. Users can start
coding immediately using the command palette to navigate around and execute actions using
keyboard shortcuts.

Although a paid version is available, the Sublime free version already comes with adequate
features to help you start coding.

Some of the main features include:

Context-aware autocomplete – gives suggestions based on existing code, where each has a link
to its definition for more information.

Split-editing – easily splits layout of tabs for a more efficient and easier HTML editing.

GoTo anything – finds anything in a specific file, code string, or section with a simple keyboard
shortcut.

Updated Python API – updated to Python 3.8, it makes the program compatible with a wide range
of plugins.

Sublime Text is available for Windows, OS X, and Linux (32/64 bit).

Compiled By: Ephrem Tesfaye Tsidu 30

Internet Programming I Chapter One - Introduction

4. Visual Studio Code

Visual Studio Code is an open-source, free HTML editor from Microsoft built on Github’s
Electron. With this framework, users can create projects using HTML, CSS, and JavaScript across
multiple operating systems.

Visual Studio Code is compatible with Windows, Mac, and Linux. It also integrates with Microsoft
Azure which makes it easy for code deployment. Users can develop projects and applications
locally and publish them to Azure using a single click.

This open-source code editor uses IntelliSense features to provide different types of auto-
completion, including variables, fields, and function definitions. In addition, users can install
language extensions, like Python and Ruby, to allow IntelliSense to work with other programming
languages.

Furthermore, its clean and straightforward interface makes it easy to locate various HTML editing
tools, open a new file, and search documents.

Other essential features include:

Debugging – built-in debugger tool is available within the dashboard to quickly edit, compile, or
debug code.

Compiled By: Ephrem Tesfaye Tsidu 31

Internet Programming I Chapter One - Introduction

WYSIWYG editor – simply install an extension to alter the default text editor to WYSIWYG
HTML editor.

Code snippets – includes built-in snippets powered by IntelliSense, making it easier to enter
repeating code patterns.

Multi-root workspace – users can simultaneously work on different projects or files from
different parent folders.

Visual Studio Code is available for Linux x64, Windows x64, and OS X.

_______________The End!_______________

Compiled By: Ephrem Tesfaye Tsidu 32