4 Simple Steps to Creating Your First Web Page

HOME >RESOURCES > CODING > GETTING STARTED > 4 SIMPLE STEPS TO CREATING YOUR FIRST WEB PAGE

Sections

Introduction
About Background
The Steps
Step 1 - Set Up Step 2 - Editor Step 3 - Create Step 4 - View
Additional Content
Next Steps Resources Glossary

About the Guide

This guide was created to help you get ready to create your first web page.

In this guide we will look at:

  • Background - Some background information on creating web pages.

Four steps to create a web page.

  1. Step 1 - Set Up a Location for Your Website Files
  2. Step 2 - Choose a Code Editor
  3. Step 3 - Create a Simple Web Page
  4. Step 4 - View the Web Page We Created

Also in this article you'll find:

  • Next Steps - Where to continue your coding training.
  • Resources - A consolidated list of the links in this article.
  • Glossary - A list of some of the terms found in this article.

Background

Every web page you visit on the Internet is a physical file that is stored on a computer (web server). Each file consists of content (text, images, etc.) and code that tells a web browser what needs to be displayed (rendered) on the web page and how.

For example, the image below (Figure 1) is a Google search results page. Some of the content on this page includes:

  1. An image for Google’s logo
  2. Text that describes how fast the search was performed
  3. The text of the search results
Google search results with some content highlighted.
Figure 1 - Google search results.

Most web pages are created using at least three types of code to describe the content on the web page to the web browser: HTML, CSS, and JavaScript. The table below (Table 1) lists some additional information about each of these types of code:

Code Type Description

HTML 		Markup language code that describes to the browser what a piece of content represents. For instance, the code can let the browser know that a certain piece of text is a paragraph or a heading.

CSS 		Markup language code that describes to the browser the formatting to apply to the content on a web page. For instance, CSS code can let the browser know it should format a portion of text in bold and red font.

JavaScript 		Programming language code that describes to the browser an action the browser should take when a certain event happens. For instance, the web page could display a message if a web page user clicked a button.
Table 1 - Web coding technologies.

Before you learn these technologies, you will want to set up a location for the files that will make up your website and select a code editor (the application you will use to create and update your web pages). Once you have these set up, you will be ready to create web pages.

Let’s go to step 1 and set up a location for our web page files.

Step 1 – Set Up a Location for Your Website Files

Each web page you view in a browser can be comprised of one or more of the following file types:

  • An HTML file that contains the text and the HTML code
  • Images
  • Style sheets (CSS)
  • Scripts (JavaScript, for instance)
  • Other types of files

When you create a website, you should have a designated place on your local computer to store all your files. The first step would be to create a folder for all your websites, for instance "my_websites".

Note: For details on working with Windows File Explorer, to create files and folders, see my File Explorer Quick Start article.

Within your websites folder, you should create a folder for each website you are designing. For instance, if the new website you are working on is your first website, you might want to name that website's folder "my_first_website".

As you continue to add pages to your website, you need to organize the content to make designing your website easier. For instance, you might have separate folders for images, style sheets and scripts. If you take this approach and create the file structure discussed, you will end up with something like the following:

Sample folder structure and file.
Figure 2 - Sample folder structure with file.

Some important things to notice about the folders and file in the above image:

  • The names are in lower case.
  • Underscores are used between words in the names.

These are two best practices for file and folder naming conventions. They help with readability, web server access and search engine optimization.

If you haven’t done so already, set up a folder structure for the web page we will create in this article. You can use the structure above or one of your choosing. We will add our web page to the appropriate folder in Step 3 of this article.

Before we create our file, you need an application, called a code editor, to create and edit HTML pages. In step 2 we'll look at some of the code editor options from which you can choose.

Step 2 – Choose a Code Editor

Introduction

There are many code editors from which to choose. Some are free, some charge a small fee for their use. Some are very basic, while others have a lot of functionality built into them.

There are many code editors from which to choose. Some are free, some charge a small fee for their use. Some are very basic, while others have a lot of functionality built into them.

Below are several categories of code editors.

Free, Simple Code Editors

There are free and simple-to-use code editors. They have a very simple user interface. You probably already use some of these applications for other tasks, so using them to create web pages will be a breeze.

There are some drawbacks to using these editors. They were not created explicitly for code editing so they lack some of the features found in other code editors such as syntax checking and text coloring.

Some free, simple-to-use options include:

Free, Feature-Rich Code Editors

There are some code editors that have been created expressly for coding web pages. These editors have additional features such as syntax checking and text coloring to help make coding easier and more error free. Some of the free, feature-rich code editor options include:

Paid-For Code Editors

There are also some code editors that have some of the same features as those in the free, feature-rich section, but you have a to pay a fee to use them. The paid editors often have additional features not found in the free editors, more support and a larger community of users. Some paid-for code editor options include:

Conclusion

There are many other code editors available. My suggestion is to try a few, but eventually you will want to pick one and stick with it. The code editor I use is Sublime Text. I have tried several others, but have found this editor to have all the features I like and an interface that is comfortable for me to use.

Let's move on to step 3 where we'll create a simple web page in our new code editor.

Step 3 - Create a Simple Web Page

Once you have chosen the code editor you want to use, create a new document and save it on your computer as a file with the extension of ".html" within the folder you created for your new website. For instance, you could name your file:

my_first_web_page.html

Type the sample code below into your newly created HTML document. In the next section of this guide we’ll view the web page in a web browser.

Here’s the sample code:

<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <title>My First Web Page</title> </head> <body> <h1>Welcome to my first web page!</h1> <p>I'm so glad you stopped by.</p> <p>More content is coming soon.</p> </body> </html>
Figure 3 - Sample code.

Don’t worry about understanding what this code does, we just want to get a sample in place so we can see it in our web browser.

Step 4 – View the Web Page We Created

Once you’ve created a web page, you will want to view it in a web browser. Every web browser will be able to display the simple web page we created in the previous step. Some popular web browsers include:

Viewing your web page in a web browser is very easy:

  • Navigate to the location of the web page (my_first_web_page.html) in your computer’s file explorer application.
  • Double-click the file name.

This should open your web page in your default web browser. If this does not happen, the ".html" file extension may not be associated with the proper application. You can right-click the file name and choose the application to open it with or you can set up the file association. This article describes how to setup the file association in Windows 10.

Once you have the web page open in your browser, you should see something like the image below:

Screen shot of web page content as seen in browser.
Figure 4 - Web page as seen in browser.

So that’s it. You have the tools you need to create web pages. You have your folder structure started. You’ve created your first web page and you have seen the web page in your browser.

You’ve accomplished a lot! Get some ideas of where you can go to continue your web page creation training in the next section of this article.

Next Steps

Learn More HTML

If you are ready to learn more about creating web pages, the next step in your training should be to learn more about HTML. There are some very good courses to get you started including:

Learn About CSS

Once you have the basics of HTML under your belt, you’ll be ready to add style to your web pages with CSS. You may want to check out these courses:

Try Out JavaScript

After learning about CSS, you'll be ready to add interactivity to your web pages with JavaScript. These courses will give you an introduction:

My Upcoming Courses

I am working on courses for all of these topics and more. I will provide links here as soon as they are available. Here is a sampling of the courses I'm currently working on creating:

  • Code Your First Web Page with HTML
  • Add Style to Your First Web Page with CSS
  • Add Interactivity to Your First Web Page with JavaScript

These courses and more will all be a part of my Teachable school, The Coder's Path.

Resources

All the links throughout this guide have been consolidated below:

Glossary

Code Editor
An application used to write, design, or create web pages.
CSS (Cascading Style Sheets)
Code placed on a web page to define styles including color and formatting.
File Extension
The last three or four characters of a file's name, placed after the period, used to specify the type of file it is so that the operating system has a better understanding of what to do when you interact with the file, such as by double-clicking on the name.
HTML (Hypertext Markup Language)
Code placed within a web page to define what specific pieces of text represent, such as paragraphs, headings or hyperlinks.
JavaScript
A programming language used to add interactivity to a web page by taking an action based on a natural or visitor triggered event.
Markup Language
Special code within a web page that defines what specific pieces of text represent. For example, "<h1>" is used to define the start of a top-level heading on a web page. HTML and CSS are considered markup languages.
Programming Language
A set of coding instructions that perform an action based on events that occur on the web page. This type of code also uses logic to complete its instructions. JavaScript can be considered a programming language.
Render
How a web page displays within a web browser.
Syntax
The rules of a language.
User Interface
The part of an application that the user interacts with. Most user interfaces are a combination of tools, icons, content areas, buttons and more.
Web Browser
An application used to view web pages, often referred to as simply a "browser".
Web Page
A single document within a website that is displayed within a web browser.
Web Server
A computer that sends web pages to a visitor's web browser.
Website
A group of related web pages that usually focuses on a theme, business or topic.