98

What is a Webpage

A web page is a single hypertext document available on World Wide Web (WWW). It is composed of HTML elements and displayed on the user’s browser such as Mozilla, Firefox, Chrome, etc. It is also referred to as “Page.”

In this topic, we are going to discuss various details of the webpage, including the following topics:

• What is a Webpage?
• Characteristics of a Webpage
• Difference between a Webpage and a Website
• How does a Web Page Work?
• Elements of a Webpage
• Types of a Web page
• How to Create a Simple Webpage?

What is a Webpage?

A webpage is a document written in HTML and can be viewed on any web browser. It is contained within the web server, which can be accessed by entering the URL for that web page, and once it is loaded, it appears on the user’s web browser. Each webpage is linked with a unique URL; hence two pages cannot have the same URL.

A webpage may contain text, links for other pages, graphics, videos, etc. Moreover, it is mainly used to provide information to the user in text, images, etc.

A webpage is a part of a website; it means a website contains different web pages. Such as tutoraspire.com is a website, and the page currently you are accessing is the webpage. It can be understood as an example of a book. So, a Website is like a complete book, and a webpage is like a page of that book.

The WWW or Internet contains millions of web pages, and daily, a lot is being added. Tim Berners-Lee developed the first webpage.

Let’s understand some basic terms that are used with Webpage:

• WebSite: A website is a collection of several web pages. These pages are linked together with hyperlinks. A website has a unique domain name, and we can access it by entering that domain name in the URL.
• Search Engine: A search engine is an internet service that helps users find any information available on the internet. Some examples of search engines are Google, Yahoo, Bing, It is usually accessed with the help of Web browser.
• Web Browser: A web browser or simply browser is application software used to access the internet. Some examples of Web browsers are Google Chrome, Microsoft Internet Explorer, Safari, etc. It does two things:
  • It connects to a web server on the internet and requests a page that the user wants to view; once it finds that page, it displays it on its device.
  • It can interpret the set of HTML tags within a page to display the page in the correct format.
• Webserver: A web server can be understood as a computer that hosts or provide a website on the internet. It contains webserver software and component files of a website such as HTML document, images, CSS stylesheet, and JS files.

Note: For practice, you can create web pages on your own without the need for a web server, and your browser will display those pages on your machine only.

• HTML: HTML is an abbreviation of Hyper-Text Markup Language. A markup language is a computer language that specifies how a page should be formatted. With the help of HTML, one can specify fonts, colors, images, headings, and everything that he wants to display on a page displayed by the browser.

Note: A web browser can also display other documents such as a PDF document or images, but only an HTML document is referred to as Web page.

Characteristics of a Web Page

Following are some characteristics of a Web page:

• A simple webpage can be created very quickly.
• It takes very little time to create a webpage compared to a Website.
• A web page and a website should be compatible with any device, such as Mobile, Desktop, Laptop, etc.
• The search engine provides a web page through a link, and when a user clicks on that link, it is redirected to the webpage of a website.
• A webpage can have any type of information including videos, and audios.
• It can be made up of only HTML(Hypertext Markup Language), or CSS, or JavaScript for dynamic and attractive behavior.

Difference between a Webpage and a Website

Since both Websites and Web pages are related to each other, some users may use them interchangeably, but they are much different from each other. The basic difference between them is that webpage is a single web document, whereas a Website is a collection of different web pages. Here are some more differences between both of them:

Website	Webpage
A website is a collection of different web pages that are linked together with hyperlinks.	A webpage is a single hypertext document.
It consists of more than one webpage.	It is a single document that is displayed on the user’s browser.
To develop a website, developers need more skills and more time compared to a webpage.	To develop a webpage, developers need basic HTML knowledge and less time.
A website is accessed through its domain name, and it does not include any extension in the URL.	A webpage is accessed through a unique URL with some extension.
It can contain information for different entities, such as tutoraspire.com, which contains information about different technologies.	It can contain information for a single entity, such as currently viewing a web page containing information about this page only.
It is a little challenging to create a perfect website and requires lots of programming.	It is very simple to create a webpage.
Some examples of the website are tutoraspire.com, Amazon.com, etc.	Some examples of Webpages are the currently viewing page, contact page, registration page, the home page, etc.

Note: The terms Webpage and Web page are the same, and both are technically correct. However, most style guides suggest using a Webpage instead of a Web page.

How does a Web Page Work?

A simple web page is created using HTML, which is a markup language. However, we can also use CSS and JavaScript to add more functionalities and make it more attractive.

It is created using HTML, hence containing different markup tags that specify how the data should be formatted on screen.

The webpage is contained within the webserver. To load this webpage, a client sends the request to the server, and generally, the browser is known as the client, which can request the page on the internet.

The web browser requests the page on the internet. Once it is responded to by the server, the browser interprets the markup tags and displays them on the user’s screen in the correct format.

The browser sends the request for a page or a file via an HTTP request. The HTTP is the Hypertext Transfer Protocol, a network protocol that allows transferring hypermedia documents over the internet between a browser and server.

Once the request reaches the server, the HTTP server accepts the request, finds the requested page, and sends it back to the browser through the HTTP response. If a server is unable to find the requested page, it returns a 404 response.

Elements of a Webpage

The main element of the webpage is a text file composed of HTML. Apart from this, a webpage can also have the following elements:

• CSS: The CSS code is used to make the page more interactive and control its look and feel.
• Scripts: The JavaScript code is included in a webpage to add interactivity to the page and add more functionalities to it.
• Media: It is used to include media components such as audio, video, and images.

Although every web page is different from another web, some components are common to almost all the pages. Some of these components are given below; you can also relate these elements by the given image:

1. Name of the Website: Each webpage includes the name of the website or company, or blog to which it is attached. The name of the website and the logo are mostly situated at the top-left corner of the page. The logo may also contain a slogan of the site or a brief introduction to the site so that visitors can quickly identify what this site is about. It is one of the important components of the webpage.
   The website’s name also has a link that can redirect to the home page of that site. The name of the website usually includes at the header of the page.
2. Search bar: A search bar is also an important component that should present on each page of a website or blog. The search blog allows the visitor to search related information on that website.
3. Navigation Bar: A navigation bar is a component of a webpage that contains links to some important sections of the website. It helps the visitors to easily traverse some major sections of the website. It is placed mainly on the top of the web page or the left side of the page. When the user clicks on any link given in the navigation bar, it redirects to the page.
4. Heading of the page: Heading of the page tells the main information about the page, i.e., what this is all about. The heading is available on the top of the page, and it is included with the help of the <h1> tag of HTML.
5. Content of the Page: The content of the page means the information of the page. As you are visiting this page and reading this information, all the information contained within this page is known as the page’s content. It may contain below sub-elements:
   • Paragraphs: A webpage can have different paragraphs as per their length. The opening paragraph is crucial on the whole page, as it draws the attention of the visitor. If the first paragraph is not interesting and not related to the topic, a user may leave the page immediately. To create a paragraph <P> tag is used in HTML.
   • Subheadings: A page may have different subheadings as per the topic, whether related to information about something or a website’s web page. In HTML from <H2> to <H6> tags are used for including subheadings. Each page should be divided into different subheadings to make it easier for the users to read and understand.
   • Images: Each webpage contains images to make its content more attractive. To include an image, <img> tag is used in HTML.
6. Feedback or Comment form: Different websites include a Feedback or Comment form on each webpage. It is used to know the visitor’s views about the information of that page and any other feedback for the page or site. It lets to know the creator of the page that if the information is helpful or not.
7. Social Share links: Social share links allow the visitors to share that webpage with their friends on different social sites such as Facebook, Linked In, Twitter, etc.
8. Copyright Info: Each webpage must have Copyright information along with Privacy Policy. This information is available at the end of the page or on the footer of the page.
9. Go to Top: On most of the pages, a Back to Top button or link is available. This option helps the users to return to the upper section of the page.
10. Advertisement Banner: Whenever you visit any good website, you see different advertisement banners on each site’s page. These banners are used to displays ads in different places on a page. These banners are used to provide monitory benefits to the owner of the website.
11. Previous and Next buttons or links: On most of the pages, previous and Next buttons are available that help the user easily navigate to the previous and next page related to the topic. A page can also have links to other pages.
12. Company Info: On the footer of the page, there is a brief introduction about the company or website of that page. By this, visitors get to know about the company and can build trust in it.

There can also be some additional information and tools such as a button to print the page that can also be helpful for users.

Types of a Web page

There are mainly two types of a Web page based on functionality:

• Static Webpage
• Dynamic Webpage

Static Webpage

Static webpages are those webpages that cannot be modified or altered by the client. These are also known as stationary or flat web pages. They are displayed on the client’s browser in the same format and manner as they are saved in the webserver. Users can only load the page and read the information but cannot perform any change on the page.

A static webpage is generally made up of HTML and CSS only.

Dynamic Webpage

As the name suggests, Dynamic webpages are dynamic, which means it shows different information at different point of time.

The dynamic webpage shows different content each time it is viewed. There are two types of Dynamic web pages, which are:

• Server-Side Dynamic Webpage: These web pages are created using Server-side scripting. These pages are changed when they are visited or viewed. Some examples of server-side pages are login pages, submission forms, shopping carts, etc. Various scripting languages such as PHP, ASP.Net, JSP, etc., can be used for server-side scripting.
• Client-side Dynamic Webpage: These web pages are created using Client-side scripting. These pages get changed in response to actions that occur within that page, such as mouse or keyboard action. Scripting languages such as JavaScript, Dart, etc., can be used for client-Side scripting.

Note: Scripting languages are programming languages that allow us to write programs in the form of scripts, and these are interpreted, not compiled.

Apart from these two Webpages, there are some examples of common web pages that can be found on most of the websites, and these are as follow:

• Home Page: The home page of any website is one of the most important pages. It is called a home page because this is like a starting point from where users can go anywhere on that website. This page usually contains links to the important zones of the site. It can also be known as the index page.
• Feed Page: The feed page is usually found in those websites that update content. It is used to provide information to users for the latest information that has been updated.
• Menu Page: The menu page is created to accomplish the navigation goal. The page contains a collection of different links that give access to different categories and zones.
• About-us Page: This page contains brief information and details of the company, product, or website. It allows the visitors to know the details of the website that they are using.
• Registration Page: The registration page allows users to create an account by signing up, and hence they can create a personalized account. It helps the company to know the visitor and provide personalized offers and deals to them.
• Contacts Page: This is a simple page made for the visitors to contact the website owner. For any issue or any feedback, users can use this page.
• Landing Page: This is one of the special types of a Web page used as a core part of a website or as an individual page. The main aim of creating this page is to convert the visitors into the lead. It represents clear and focused content on a specific goal.

How to Create a Simple Webpage?

Creating a simple webpage is very easy; anyone with basic knowledge of computers and HTML can create it. But before creating a webpage, you should be aware of the below points:

• A simple webpage can be created using HTML code only. Such pages are simple but not interactive and have very few functionalities.
• To make your webpage interactive and add functionality, you need to learn and use scripting languages, such as PHP, Python, etc.
• A web page can also be created using Notepad, but it is recommended to use IDEs for advanced uses such as Atom, Sublime Text editor, PyCharm,

Follow the below steps to create your webpage:

1. Open the Notepad application on your computer.
2. Write Below code on it.

In the above code, the following tags are used:

• <!DOCTYPE html>: It is used for document type declaration, which means which version of HTML you are using. It indicates the browser that which language it is supposed to interpret.
• <html>: it indicates the start and of the HTML code.
• <head>: It can have different types of information such as title, meta tag, etc.; this information will not appear on the webpage.
• <body>: This tag contains other tags on the webpage, and users can see them. In above code, we have included <h1> heading tag and <p> paragraph tags.

Note: It is important to end each tag in html, and put all the tags either in upper case or lower case. However, a lower case is recommended.

3. Save the file with any name and .html extension. For example, save it with html name.
4. Go to the saved file (web.html), double click or right-click and run it.
5. It will open on your default browser and will display the below output:

You can also add more tags for different elements, such as add images, background images, border, table, table, etc., using HTML. You can learn all these from here.

Note: This webpage is local to your machine only, and only you can see this on your browser. To view this on the internet, you need to first publish it.

After creating the page, you can also make changes in your file through the editor. Just make the change, save the file again, and reload the page; those changes will appear on the screen.

---