What is a web page?

A web page is a document on a website that can be accessed using a web browser. A website usually contains several web pages, and each web page has a unique uniform resource locator (URL). When a user types a URL in any web browser, the elements on the web page are downloaded and represented on the user’s browser.

Web pages contain one or more text files written in Hypertext Markup Language (HTML). Web pages also use JavaScript and Cascading Style Sheets (CSS) to make the page interactive.

Types of web page

Web pages are of two types:

  • Static
  • Dynamic

Static web pages

Static web pages cannot be changed by the end-users. It means users can view these pages in the same format as they are stored on the server. In other words, users can only read the content on the page. Such pages are best suited for content that does not need to be updated regularly.

Static web pages are created using HTML and CSS only.

Dynamic web pages

Dynamic web pages show users different information at different times. They respond to the actions performed by the user. For example, a dynamic login web page designed for user registration will show different content when the user logs into his/ her account on the website.

Creation of a web pages

Web pages are typically written using HTML and CSS. However, web pages created with HTML have limited functionalities. Therefore, scripting languages like JavaScript, PHP, and Python are used to make the web page interactive and add more functionalities.

The simplest way to create any web page is using Notepad. However, advanced web programmers often prefer integrated development environments (IDEs) like PyCharm and Atom to create web pages. Using IDEs, programmers can write, compile, debug, and execute their programs at the same place.

Creating a web page using HTML

The following are the prerequisites for creating a web page:

  • A text editor such as Notepad or Notepad++.
  • A web browser like Mozilla Firefox or Google Chrome.

Structure of a web page document

Before creating a web page, it is necessary to understand the basic components used in HTML web pages. The basic structure of an HTML code is as follows:

<!doctype html>

<html>

  <head>

        <title>The title goes here</title>

  </head>

  <body>

    <h1>The main heading goes here</h1>

    <p>Any text is written here.</p>

  </body>

</html>

Each component used in the HTML structure has a specific purpose which is explained below:

  • <!doctype html> - This statement is used to declare an HTML document. It is always the first line in the document.
  • <html> - This tag states the beginning of the HTML program.
  • <head> - This line indicates the beginning of the head section. The basic parameters of a web page are written within this section. The information written here is not displayed on the screen. Examples of content written in the head tag are meta description and title. The section is closed using the </head> tag.
  • <title>The title goes here</title> - The page title in written under this tag. The text written here will appear on the title bar of the browser.
  • <body> - This tag indicates the beginning of the body section. All the information that needs to be displayed on the web page goes here.
  • <h1>The main heading goes here</h1> - The main header of the web page is written within the h1 tag.
  • <p>Any text is written here.</p> - This tag indicates a paragraph.
  • </html> - It is the closing tag. All HTML documents are closed using this tag.

The step-wise process to create a web page

The following steps indicate how to create a simple web page using HTML.

Step 1: Begin by typing the <!doctype html> tag.

Step 2: Now, type the <html> tag to mark the beginning of the code.

Step 3: Type the head tag by typing <head>.

Step 4: Type <title> and type any title for the web page. For example, Hello Techy! This is my first website

Step 5: Close the title tag by typing </title>.

Step 6: Close the head tag by typing </head>.

Step 7: To create the body of the document, type <body>.

Step 8: Type <h1> to type the main heading for the web page.

Step 9: Within the <h1> tag, type any heading. For example, My first page!

Step 10: Close the tag by typing </h1>.

Step 11: Type the paragraph tag <p> and type some text within the tag.

Step 12: Close the paragraph tag by typing </p>.

Step 13: Close the body tag by typing </body>.

Step 14: Finally, type the closing HTML tag (</html>) to close the document.

The code should look like this:

<!doctype html>

<html>

  <head>

         <title>Hello Techy!</title>

  </head>

  <body>

    <h1>My First Page!</h1>

    <p> This is just a sample page</p>

  </body>

</html>

Save and run the page

To save the web page, follow the steps below:

Step 1: Click File from the top menu in Notepad and select save As. 

Step 2: Give a name to the document and save it using the .html extension. For example, MyFirstWebsite.html. (.html is the extension used to save HTML files.)

Step 3: Close the text editor.

Step 4: Open the document with a browser, and the result will appear on the computer screen.

Example of a web page

Explanation: The above HTML code will create a web page with a heading - My First Page! and paragraph - This is just a sample page. The web page title will be Hello Techy!, which is shown in the title bar.

Other methods of creating a web page

Traditionally, programmers used to create web pages using HTML codes. However, nowadays, most programmers use website builders like WordPress, Joomla, Squarespace, and Drupal to create professional-looking web pages.

The benefits of using these website builders are:

  • Most of these web builders are free to use.
  • They are mostly drag-and-drop builders.
  • They require minimum or no coding knowledge.
  • They offer various customization options.

Importance of creating a web page

We are living in a digital world where everyone depends on any kind of digital platform to meet their daily requirements. With just one click, one can fetch details about any product or any place to visit. The digital world has brought business into a small mobile application. Web pages enable all this. A collection of multiple web pages are there in a website that has its unique URL and a domain name. E-commerce has paved way for global business platforms even for small business owners. Online stores and social media have further shrunken the world and brought each user closer. Many free websites are available on the internet that are not only user-friendly but also give a step-by-step guide to use various platforms or applications. WordPress is open-source to create content. Some websites have built-in Word Press plugins and one can easily learn how to use those WordPress themes.

Context and Applications

Creating a web page is an essential topic that every web programmer or developer should know. The topic is covered in Web Technology subject in courses like:

  • Bachelor of Science in Computer Science
  • Bachelor of Science in information technology
  • Master of Science in Computer Science
  • Master of Science in information technology
  • Web programming certification courses

Practice Problems

1. Which of the following is a type of web page?

  1. Dynamic
  2. Designer-made
  3. Internet marketing
  4. Blog posts publishers

Answer: Option a

Explanation: Web pages are of two types - dynamic and static.


2. Which extension is used to save HTML files?

  1. .google
  2. .custom domain
  3. .html
  4. .business online presence

Answer: Option c

Explanation: The .html extension is used to save HTML documents.


3. Which HTML tag indicates the beginning of the head section in an HTML document?

  1. <business online presence>
  2. <head>
  3. <all-in-one new website>
  4. <new pages title>

Answer: Option b

Explanation: The <head> tag indicates the beginning of the head section in an HTML document.


4. Static web pages are written in which language?

  1. WordPress site
  2. WordPress dashboard
  3. HTML
  4. JavaScript

Answer: Option c

Explanation: Static web pages are written using HTML and CSS codes.


5. Which HTML tag indicates a paragraph?

  1. <p>
  2. <WordPress website paragraph>
  3. <user paragraph>
  4. <Content paragraph>

Answer: Option a

Explanation: The <p> tag defines a paragraph in the HTML document.

Common Mistakes

The contents of <head> section will not be rendered on the content area of the browser. It contains tags that are used to specify instructions to the browser.

  • Search engine optimization (SEO)
  • Scripting languages
  • Javascript
  • Uniform resource locator

Want more help with your computer science homework?

We've got you covered with step-by-step solutions to millions of textbook problems, subject matter experts on standby 24/7 when you're stumped, and more.
Check out a sample computer science Q&A solution here!

*Response times may vary by subject and question complexity. Median response time is 34 minutes for paid subscribers and may be longer for promotional offers.

Search. Solve. Succeed!

Study smarter access to millions of step-by step textbook solutions, our Q&A library, and AI powered Math Solver. Plus, you get 30 questions to ask an expert each month.

Tagged in
EngineeringComputer Science

Web Development

Creating web pages

Search. Solve. Succeed!

Study smarter access to millions of step-by step textbook solutions, our Q&A library, and AI powered Math Solver. Plus, you get 30 questions to ask an expert each month.

Tagged in
EngineeringComputer Science

Web Development

Creating web pages