Chapter Four

First HTML – Page

T his chapter covers the steps required to set up a basic web page using HTML.

NOTE: For every web design project, a single folder is required anywhere in your computer that will be used to store files related to the project you are working on. Examples of such files could be images used for the project, audio, video and most importantly HTML and CSS files. As we progress, you will get to see the benefit of doing this.

Throughout this chapter, a company called Dixre will serve as a case study for our first HTML web page. Dixre requires a professional website to create an online presence for its company. Although you haven't designed a website before! But you wouldn't want Dixre (your client) to know that you are just about to start learning how to design a web page. Let's get started.

Creating a New HTML Project

Local Disk (C:) is used to store the project files. You can use your documents folder or wherever you feel is convenient for you. Figure 4.0 shows a screen shot of the newly created folder called “dixre” inside the Local Disk (C:).

Figure 4.0: New folder created for “dixre” project.

From Figure 4.0, you will observe that the company's name was used as the project folder name. You will be doing that a lot for every project you work on.

NOTE: You can always use an underscore “_” to join two or more words together in cases where your project name contains multiple words. And one more thing, always name your project folders using lower se letters. This also applies to your file names. These are all best practices recommended. Now that we have a new folder for our project, let's go through some steps to create our first HTML file.

Creating a New HTML File

Step 1: Open your text editor (Notepad++) which we went through the installation process in the previous chapter. If your Notepad++ is still a fresh installation, you may still see a welcome page just like what is on Figure 4.1

Figure 4.1: First installation page on Notepad++

If you have used Notepad++ before, you should see a blank page or a page you had opened before. But if this is your first-time using notepad++, you can click on the close button highlighted on Figure 4.1 to close the welcome page. You should now see a blank page.

Step 2: To create a new file, select the “File” menu option at the top left side of your text editor, select the first option, which is “New”. Figure 4.2 shows the menu option.

Figure 4.2: Creating a new file

Step 3: We need to save our newly created file in our project folder ("dixre").

      NOTE: Your folder name can be anything; just ensure that you follow the case study used here to get the desired results.

Click on the “File” menu item again on your Notepad++, but this time, select the option “Save As” since we are saving the file for the first time. Figure 4.3 shows the menu item.

Figure 4.3: Saving a new file

Step 4: After selecting the “Save As” option, you should see a new window that looks like what is on Figure 4.4

Figure 4.4: Default Notepad++ folder for saving new files

There are few things to observe here. First, the current folder opened is a Notepad++ folder as highlighted at the top most part of the window on Figure 4.4 with a label “Save in”. Always take note of the folder you want to save your project files. We don't want to save our new file inside the Notepad++ folder. We want to save it in the project folder “dixre” which we had created earlier.

Step 5: Navigate to the location where you created your project folder using the highlighted area at the left side on Figure 4.4. The project folder "dixre" was created in Local Disk (C:) which means we will have to click on “This PC” icon. You might have created your new folder inside your documents folder. In that case, you will be clicking on the “Libraries” icon where you can find the documents folder.

      NOTE: The operating system used here is Windows 10. On older versions of Windows OS, you might see “My Computer” instead of “This PC”. They all point to the same location.

Figure 4.5 shows the next windo after clicking on the “This PC” icon.

Figure 4.5: “This PC” folder in Windows 10

​ After clicking on “This PC or My Computer” icon, the window on Figure 4.5 opens. Scroll down to find “Local Disk C:”, double click on it to find your “dixre” folder. Figure 4.6 shows the “dixre” folder inside Local Disk (C:).

Figure 4.6: Project folder highlighted

Step 6: Double click on the folder, you should see an empty window because we have not stored anything inside the folder. To save the file, we have to give it a name using the “File Name” input field on the “Save As” window. We will be naming our new file index.html, Figure 4.7 shows our new file inside the “dixre” folder.

Figure 4.7: Where the new index.html file will be stored

For now, don't worry about why we named our first HTML file as index.html. You will get a better explanation on this as we progress.

NOTE: index.html should be all lower case, and without a space.

Step 6: Click on the “Save” button and we should be able to start writing our first HTML code. For every new file required in a web design project, the steps above will serve as a guide to store newly created files. In case of any challenges with saving a new file, always refer to the previous steps.

Your First HTML File

​ HTML is an acronym for Hypertext Mark-Up Language. It uses a pair of opening and closing tags to structure the contents of a web page. HTML tags look something like this <opening_tag></closing_tag> . More on this later.

​ Figure 4.8 has some basic HTML tags written in our new index.html file. You should try to write the codes as best as you can in your index.html file using Notepad++ or any text editor of your choice. You will learn more about these tags in the next chapter.

Figure 4.8: Basic HTML code

Anytime you make a modification on your HTML file, you will notice a red icon highlighted at the top left side of your Notepad++ editor. All you have to do is save the file and the red icon will turn blue in color.

NOTE: To save an existing file, i.e. a file you had already saved in a folder, all you have to do is select the “File” menu and select “Save” instead of “Save As”. Figure 4.9 shows the save menu option highlighted.

Figure 4.9: Saving existing files

Viewing Your HTML Files

​ After working on your HTML files, you will need to see the output of the codes that you have written right? It's very easy to open HTML files. Let's quickly go through the steps to view our index.html file.

Step 1: Minimize your Notepad++ text editor using the minimize button at the top right side of your text editor. Figure 4.10 highlights the minimize button.

Figure 4.10: Where to minimize Notepad++ text editor

Step 2: Navigate to the directory where your project folder “dixre” resides. In this case Local Disk (C:).

Step 3: Double click on the folder to open it. You should now see your index.html file in that folder. The file usually has the icon of your default browser which in this case is Firefox. Yours might not be that way, and you shouldn't worry about that. Figure 4.11 shows the “dixre” folder with an index.html file in it.

Figure 4.11: New file “index.html” stored within the “dixre” project folder.

Step 4: Right-click on the file and highlight the option “Open With”, you should see a list of programs that you can use to open your index.html file. But we are only interested in using a web browser, so select any browser of your choice, depending on the options you have. Here, we will be using Firefox. Figure 4.12 shows the “Open With” menu options.

Figure 4.12: Choosing a browser to open HTML files.

​ After selecting the browser of your choice, the selected browser should open your index.html . If you have written the HTML code in your index.html file correctly, your page should look like what is on Figure 4.13.

Figure 4.13: index.html file displayed on a web browser.

At this point, you have successfully created your first HTML web page.

Summary

In this chapter, we have gone through the steps of setting up a new project folder, creating and saving a new HTML file, and writing our first HTML code which we finally got to view in a web browser. Although you might not understand the codes you've written, in the next chapter, we will be looking at the HTML codes we have written in more detail.