What is Web Page?


How the web works?

What is a web page? Why is understanding the web page so important?

Web pages are fascinating. just look at the millions and billions of people searching on Google search engines nowadays! I got started in web design and development in 2013 after reading a book on web design.

It was fascinating to me, difficult to comprehend how the information got sorted, learning how it all worked together to bring out the web page through the smartphone I was viewing from.

I began this web development, web design, and digital marketing pathways since then and never look back.

I will go in-depth into understanding what is web page by starting with the big picture and then slowly drive down to the specifics you need to know.

The Internet Vs The Web

The web was born in 1989, in a particle physics laboratory (CERN) in Geneva a year after I was born.

The web and the Internet are often used interchangeably however they are different. The web is a subset of the Internet, it is just one of the many ways information can be transferred around over the networked computers.

The Internet

No company in the world owns the Internet. It is an international network of computers connected, one cooperative system governed by rules and regulations. The sole purpose of connecting all the computers together is for sharing information.

Many sharing processes include emails, file transfers, secure shell (SSH Client and SSH Server connections), and more specialized modes where the Internet was purposed to form.

Protocols are the name for the standardized methods of transferring data or documents over the network.

The Web

The web also the most popular way of sharing information is just one of the ways information is now shared over the Internet. The web was known as World Wide Web initially. “www” we see at the start of the site addresses came from these words “World Wide Web.”

It is unique and allows you to form a huge web of connected information. The web is empowered by a protocol known as the “HTTP” or hypertext transfer protocol, it can be found on every website addresses we see on the Internet nowadays.

Whenever we hear about the web, we often get associated with these tech giants and jargons:

  • Web Page
  • Website
  • Web Server
  • Search Engine

Information Servers

Many people associate servers to computers that help to serve up the information or documents upon request.

More accurately, however, the servers are no computers. They are software that allow computers to communicate with each other.

The role of the server used is to wait for information requests, retrieve and then send out the information as efficient as possible.

Web servers are also known as the HTTP servers, there is nothing special with the computers ranging from normal ones to highly effective supercomputers to stay connected and link all the computers to the web, a server software needs to be inside the computer to make it happen.

Two of the popular servers include the Apache (open source software) and Microsoft Internet Information Services (IIS).

Apache is installed in Unix based computers such as macs running on macOS, while Microsoft Internet Information Services (IIS) comes in Microsoft family of server solutions, usually found in Windows PC.

What is an IP Address?

Every single computer, smartphones, devices that are connected to the Internet have a unique IP address also known as “Internet Protocols.”

As I am writing this on my laptop, the IP address that is hosting https://webleads.sg is 200.29.147.67. All these numbers will be hard to comprehend for human, however, this numerical IP address is written useful as a readable language for computers.

Invention of DNS

DNS stands for domain name system, it was purposed and developed allowing humans to refer to the server by its domain name for example “webleads.sg.” It makes it easy for humans to remember it.

To help you relate, you can think of IP address as a telephone number while the DNS server act as a phonebook.

Browsers

In web design, you will often hear the client-side and the server-side applications, they are used to indicate which machine is used for processing.

There are two sides when it comes to the web experience, the serving side from the servers and the clients’ side when people request information through the desktop browsers such as Chrome, Mozilla Firefox, and the Internet Explorer.

People use desktop browsers, mobile browsers, and screen readers alike to documents on the web, the server then returns the documents as needed to display for the browser.

Browsers are the frontend while servers are the backend in conclusion.

These days however the touchscreen within reach such as smartphones increases the browsing experience of browsers. Mobile browsers on smartphones and tablets now cover more than half of the web traffic.

Mobile browsers include Safari on the IOS, Chrome on Android devices, Opera and Mozilla Firefox, etc installable via downloads of apps.

What is the Rendering Engine?

Rendering engine is a program responsible to convert HTML, CSS into what you see on mobile browsers and desktop browsers.

Mobile browsers and desktop browsers are made up of many rendering engines, and other codes used for their individual interfaces and functionality.

Read more: More about rendering engines

Web Page Addresses (URLs)

URL stands for uniform resource locator. It is difficult nowadays to chance pass any business brochures, name cards, etc without a URL. Web addresses and websites are now essential for any business that is happening in the world.

Best practices are to make sure the website URL is short. This helps to boost SEO and people get to remember your URL, search for it easily as and when they need your products and services.

Parts of URL

A URL is made up of three parts such as the protocol, site name and the absolute path to the resources of documents they are looking for.

  1. http:// is the helps define the protocol used for this individual transactions and help indicates to the server that it is “web mode.” We now see secure web protocol more commonly when we browse website such as “https://”
  2. city.cuny.edu The next portion identifies the website via its domain name. In the example above, the domain name is “city.cuny.edu.” The www starting before the domain name is the hostname and it has become one of the standard conventions but not a must-have, sometimes you may even see it omitted. Subdomains such as development.city.cuny.edu is one example of it.
  3. /academics/index.html This is the directory path on the server to the HTML document. The words separated by slashes are the directory names starting with the root directory as indicated by “/”

Read more: More about secure web protocol (“https://”)

Anatomy of Web Page

We all know how a web page looks like in the browser. But it is actually makeup of more stuff in the backend, it should always consist of one CSS file and one HTML file. All images alike in .png, .jpg, and etc formats. All contents inclusive of texts, video embedded, etc.

Basically the HTML is the main component running the whole show.

HTML Documents

The interactive, graphics-rich web pages are actually a block of text working on the back to make it displayed as it is.

HTML 5 is the latest unique version that is in use now since its birth from HTML in 1989.

Web pages use this HTML or mark up language to define dozens of text documents such as headings, paragraphs, videos, images, text, links and more.

A Quick Introduction to HTML Markup

Most of the HTML tags come in pairs such as:

<h1> meant the start of the text indicating that the text is first-level heading while </h1> indicates to computer that it is the end of the heading.

Some elements are also known as the empty elements like <hr> tag. It does not come in pairs, however this empty element help to inform browsers to “insert one horizontal row” below a theme divider.

Pictures

Obviously you do not get to see the pictures but a bunch of text behind the backend of the HTML document. So how did the pictures or videos get onto our web pages?

The image is placed in the flow of the HTML document with this element tag <img> to indicate to the browser where to find the image ( its URL) and make another request to the server for the image file and place it in the content flow.

The browser also sends the request to the server for the style sheets like “menu.css” and Javascript files (.js) for embedded videos and audios.

The rendering engines or the browser software then places all this together which usually happens instantly and may look to us like the web page loads all at once.

CSS

Cascading Stylesheets is what makes our website stands out in the appearance of every single web page.

It is usually found at the top of the HTML document with a link element that points to the stylesheet of the document. (.css)

Cascading stylesheets allow designers to give visual instructions also known as documents’ presentation to the marked-up text (document structure such as HTML in web terminology.)

CSS is powerful and it does wonders for the presentation and display of your website. Few style rules from CSS allows you to make big changes to the overall website appearance.

Javascript

Javascript is a scripting language that allows you to make elements on the web page do something. They control the behavior of the web page elements.

In modern websites, Javascript is essential ingredient.

HTML provides structure, CSS styles provide the designs and alters how the websites look, Javascript adds the behavior component of the website controlling how things work and behave.

Javascript is interactive and may be triggered to run immediately when page loads or when users click or hover over an element, etc.

0 0 votes
Article Rating
Share this entry
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x