What You’ll Need

To start creating a webpage all you will need is a simple text editor. Every operating system comes with its own editor: Windows has Notepad and Apple has TextEdit. There are several other text editors you can download but I strongly discourage this. While these text editors are wonderful for those who are experienced with HTML and CSS, they become something of a crutch for those who are learning. The issue with these downloaded text editors is that they often auto-generate templates when you create a specific type of file (such as an .html or .css file) and these templates have pre-defined code already written in them. The problem occurs when you need to change their default, auto-generated code but do not know what the auto-generated code does or how it works. Therefore, I strongly encourage you to use the default text editor that comes with your operating system.

1. Open the text editor

To find the text editor just search for the appropriate, operating system-dependent editor in the search bar. In Windows 10 this is in the lower, left-hand corner (also known as Cortana) and has the text “type here to search” within the bar.

2. Create a folder for your new file

In Windows 10, click on the file explorer icon located on the Taskbar at the bottom of the desktop (you can alternatively click on the windows icon at the lower left of the desktop and then on “File Explorer” within the sidebar menu that pops up)

Double click on documents within the window that pops up.

Right click within the window, select “New” and then “Folder”

Name the new folder whatever you like.

3. Save your text file as an .html file in your new folder

Click on “file” in the upper, left-hand corner of your Notepad document, and then on “Save as”.

To save the file as an .html file, go to the bar third from the bottom of the window that has popped up and name the file “index.html”. You can name it whatever you like so long as it ends with the .html extension. On the bar at the very bottom of this window, change Encoding from “ANSI” to “UTF-8”. Once this is complete, click “Save.”

4. Congratulations!!!

You have saved your first .html file!!! This is where we will be working for the next couple of tutorials. To open it for editing just double click on the icon with the name of your document and your text editor will open. This is the “mode” you will want to open it in when going through the tutorials.

5. Viewing in Your Browser

This file can also be opened in your browser to see what it would look like to others viewing it on the web. To do this, right click on your file, click on “Open With” and then click on your preferred browser (I will be using Google Chrome).

Viewing Your Work

This is what will pop up in your browser window.

There is nothing in there yet, but don’t worry. We will start adding elements, styles and scripts soon!!!

Next is Introducing the Tag


Chadwick A. Mayer, November 2017