In this session, we will help you understand the invisible layers supporting the internet as you use it today.

At the end of this section, you should be able to:

• Understand the technologies supporting our daily internet browsing activities
• Understand the computing languages, tools and topics to explore when learning web development

Let's begin.

What Happens When You Open A Web Page?

Which Web Browser Do You Normally Use?

We view websites with the help of the software called a web browser. Software manufacturers periodically release new versions of the browsers that contains new features, close security gaps or support more languages.

Sometimes a website may not show properly on your browser due to the browser type or version. Most desktop computers have at least one web browser installed.

Here is a question for you to think about. Which is/are your preferred web browser(s)?

• Google Chrome
• Firefox
• Safari
• Microsoft Edge/Internet Explorer
• Opera

Did You Know?

Since the start of World Wide Web (WWW), different companies have tried to strive for market dominance to gain the usage share for web browsers.

The first "browser war" happened in the 1990s between Microsoft's Internet Explorer vs. Netscape's Navigator.

While initially Netscape's browser was dominant, Microsoft's Internet Explorer took the lead starting from Internet Explorer 4 when it was integrated into Microsoft Windows, giving it a large installation base and default user audience.

How Does The Web Works?

We have gone through an overview of what happens when someone opens a web page. Now let's go deeper to understand how does the web works.

Step 1: John access the web from Singapore.

• He typed in a web address or domain name in his browser.
• e.g., www.thisisanexample.com
• His request was passed through his Internet Service Provider (ISP) which allows him to connect to the web.

Step 2: John’s computer contacts a network of servers called Domain Name Systems (DNS) servers.

• Imagine the DNS servers are like a directory of phone numbers. Every device on the web has a unique IP address.
• The DNS servers tell John's computer the IP address associated with the requested domain name or web address.

Step 3: The DNS server guided John’s computer to contact the web server in Australia which host the website.

• A web server is basically a computer that is constantly connected to the web and is setup to send web page to requesters across the web.

Step 4: The web server then sends data making up the web page being requested to John’s web browser.

Observing Websites In Their Natural Habitats

Front-End Development: Building Blocks for Setting-Up Websites

As a budding web designer and developer, first you need to know three front end technologies:

• HTML: To setup the web page structure
• CSS: To style the web page
• JavaScript: To create interactive elements

As you advance in your learning journey, you may use the following points for broadening and deepening your capabilities in:

1. Web design
   • You may delve into topics related to digital user experience (UX) and user interface (UI).
   • At a more advanced level, you may explore human-computer interaction (HCI), cognitive science, or digital entrepreneurship.
2. Web development
   • You may also take note that the creation of a functional website will also require server side programming languages, e.g., SQL, PHP or Ruby.
   • Server-side development is also known as backend development and focuses primarily on backend logic, APIs, databases and servers.
   • At a more advanced level, you may explore computer/data science and engineering, as well as networking and cybersecurity topics.

What Else Can You Create With HTML5?

HTML5 is used primarily in setting-up websites. It can also be utilised for other content creation opportunities.

For aspiring writers, look-up EPUB creation with HTML5.

For young game developers, look-up HTML5 Canvas & web games development with JavaScript.

For backend developers and AI enthusiasts, look-up machine learning/AI APIs to integrate with websites, so as to expand features and deepen service offerings.

Above is an adaptation of a diagram from "The Spatial Web: How Web 3.0 Will Connect Humans, Machines, and AI to Transform the World" by Gabriel Rene, Dan Mapes and Jay Samit.

Web Technologies Focus Over the Years

Science, Engineering and Technologies at its base, springs from the Humanities; created by humans, for humans.

Social, economic and human elements plays a key role in the design and development of web technologies.

A quote by Michael I. Jordan, a professor at the University of California, Berkeley, framed the context succinctly.

• “Thinking about thought as a logical process and realizing that computers had arisen from software and hardware implementations of logic, I saw a parallel to the mind and the brain..."
  - ref: https://spectrum.ieee.org/stop-calling-everything-ai-machinelearning-pioneer-says

When you plan for future knowledge and skills acquisition in the web technologies space, understand the key breakdown of hard- & soft- ware infrastructures and the relevant domain expertise associated, to build-up the different technology stacks in greater breadth and depth, for the benefit of human societies and economies.

As the next generation of software designers and developers, you should harness your human creativity, curiosity and awareness of the world.

• Beside asking "why?" and "can it be done?", when conducting the art of creating a software service/product, also tap into your heart and your ethics. Remember to pause and reflect, in your position as a human being, "should it be done?".

Tools of the Trade (Front-End Development)

Text Editors

• Notepad (PC)
• TeachText, SimpleText (Mac)
• vi, emacs (Unix)

Web Authoring Tools (What You See Is What You Get – WYSIWYG)

• Adobe Dreamweaver
• Visual Studio Code